/** Shopify CDN: Minification failed

Line 1388:2 Unexpected "{"
Line 1388:3 Expected identifier but found "%"
Line 1391:35 Expected identifier but found whitespace
Line 1393:3 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.brp-404 {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(60vh, 70vh, 800px);
    padding: var(--space-section) clamp(20px, 5vw, 56px);
    overflow: hidden;
    text-align: center;
    color: var(--color-foreground);
  }
  .brp-404--has-image {
    color: #fff;
  }
  .brp-404__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .brp-404__tint {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: var(--color-background);
    mix-blend-mode: multiply;
    opacity: 0.55;
  }
  .brp-404__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(16px, 3vw, 28px);
    max-width: 40ch;
  }
  .brp-404__eyebrow {
    font-family: var(--font-display--family);
    font-size: clamp(64px, 16vw, 180px);
    line-height: 0.9;
    letter-spacing: 0.02em;
    opacity: 0.9;
  }
  .brp-404__title {
    font-size: clamp(24px, 4vw, 44px);
    margin: 0;
  }
  .brp-404__btn {
    display: inline-flex;
    align-items: center;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    background: var(--color-foreground);
    color: var(--color-background);
    font-family: var(--font-display--family);
    text-transform: lowercase;
    text-decoration: none;
    transition: transform 150ms ease, opacity 150ms ease;
  }
  .brp-404--has-image .brp-404__btn {
    background: #fff;
    color: #000;
  }
  .brp-404__btn:hover {
    transform: translateY(-2px);
    opacity: 0.95;
  }
/* END_SECTION:404 */

/* START_SECTION:brp-cart (INDEX:3) */
.brp-cart { padding-block: var(--space-section); }

  .brp-cart__head {
    margin-bottom: clamp(20px, 3vw, 40px);
    display: flex;
    align-items: baseline;
    gap: 1rem;
  }
  .brp-cart__title { text-transform: uppercase; }
  .brp-cart__count {
    font-family: var(--font-display--family);
    font-size: 14px;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .brp-cart__empty {
    padding: clamp(40px, 6vw, 80px) 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .brp-cart__empty-msg {
    font-family: var(--font-display--family);
    font-size: clamp(20px, 2.4vw, 28px);
    text-transform: uppercase;
  }

  .brp-cart__cta,
  .brp-cart__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    border-radius: 999px;
    border: 0;
    background: var(--color-foreground);
    color: var(--color-background);
    font-family: var(--font-display--family);
    font-weight: var(--font-display--weight);
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 150ms ease;
  }
  .brp-cart__cta:hover,
  .brp-cart__checkout:hover { opacity: 0.9; }

  .brp-cart__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: start;
  }
  @media (max-width: 900px) {
    .brp-cart__grid { grid-template-columns: 1fr; }
  }

  .brp-cart__items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  .brp-cart__item {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: clamp(12px, 2vw, 24px);
    padding: clamp(16px, 2vw, 24px) 0;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    align-items: start;
  }
  @media (max-width: 640px) {
    .brp-cart__item {
      grid-template-columns: 80px 1fr;
    }
    .brp-cart__price { grid-column: 1 / -1; text-align: right; }
  }

  .brp-cart__media {
    width: 100%;
    aspect-ratio: 1;
    background-color: var(--color-surface-soft);
    box-shadow: var(--shadow-sm);
    border-radius: 12px;
    overflow: hidden;
    display: block;
  }
  .brp-cart__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .brp-cart__media-ph {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(255,255,255,0.4);
    font-family: var(--font-display--family);
    font-size: 12px;
  }

  .brp-cart__details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }
  .brp-cart__name {
    font-family: var(--font-display--family);
    font-size: clamp(16px, 1.6vw, 20px);
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    line-height: 1.05;
  }
  .brp-cart__name:hover { text-decoration: underline; text-underline-offset: 3px; }
  .brp-cart__variant {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
  }
  .brp-cart__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.25rem;
  }

  .brp-cart__qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    overflow: hidden;
  }
  .brp-cart__qty-btn {
    width: 36px;
    background: transparent;
    color: inherit;
    border: 0;
    font: inherit;
    font-size: 18px;
    cursor: pointer;
  }
  .brp-cart__qty-btn:hover { background: rgba(255,255,255,0.08); }
  .brp-cart__qty-input {
    width: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: center;
    font: inherit;
    -moz-appearance: textfield;
  }
  .brp-cart__qty-input::-webkit-outer-spin-button,
  .brp-cart__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .brp-cart__remove {
    color: inherit;
    font-size: 13px;
    opacity: 0.7;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .brp-cart__remove:hover { opacity: 1; }

  .brp-cart__price {
    font-family: var(--font-display--family);
    font-size: clamp(16px, 1.6vw, 20px);
    white-space: nowrap;
  }
  .brp-cart__price-was {
    opacity: 0.6;
    margin-left: 0.4rem;
    font-size: 0.85em;
  }

  /* Summary */
  .brp-cart__summary {
    position: sticky;
    top: calc(var(--brp-header-height) + 16px);
  }
  @media (max-width: 900px) {
    .brp-cart__summary { position: static; }
  }
  .brp-cart__summary-inner {
    background-color: var(--color-blueprint);
    border: 1px solid var(--panel-border-color);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-card);
    padding: clamp(20px, 3vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .brp-cart__summary-title {
    text-transform: uppercase;
    font-size: clamp(18px, 2vw, 24px);
  }
  .brp-cart__totals {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .brp-cart__totals > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-display--family);
    font-size: 16px;
    text-transform: uppercase;
  }
  .brp-cart__totals dt { margin: 0; }
  .brp-cart__totals dd { margin: 0; }
  .brp-cart__note { font-size: 13px; color: var(--text-muted); }

  .brp-cart__update {
    background: transparent;
    color: inherit;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    padding: 12px 20px;
    font-family: var(--font-display--family);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 150ms ease;
  }
  .brp-cart__update:hover { background: rgba(255,255,255,0.08); }
/* END_SECTION:brp-cart */

/* START_SECTION:brp-collection (INDEX:4) */
.brp-collection { padding-block: var(--space-section); }

  .brp-collection__head {
    margin-bottom: clamp(24px, 4vw, 48px);
  }
  .brp-collection__title {
    text-transform: uppercase;
  }
  .brp-collection__count {
    margin-top: 0.5rem;
    font-family: var(--font-display--family);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }
  .brp-collection__desc {
    margin-top: 1rem;
    max-width: 60ch;
    font-size: 15px;
    line-height: 1.5;
  }

  .brp-collection__empty {
    padding: clamp(40px, 6vw, 80px) 0;
    text-align: center;
    font-family: var(--font-display--family);
    font-size: clamp(18px, 2vw, 24px);
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .brp-collection__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(16px, 2vw, 32px);
  }
  @media (max-width: 1100px) { .brp-collection__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 780px)  { .brp-collection__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px)  { .brp-collection__grid { grid-template-columns: 1fr; } }

  .brp-collection__card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: inherit;
    text-decoration: none;
  }
  .brp-collection__card:hover .brp-collection__name { text-decoration: underline; text-underline-offset: 3px; }

  /* Product images sit on the pale lavender box from v3.1, not on a
     translucent white wash: the wash let the blue through and tinted
     every product photo. */
  .brp-collection__media {
    aspect-ratio: 1;
    background-color: var(--color-surface-soft);
    border-radius: 14px;
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 30px rgba(0, 0, 60, 0.5);
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .brp-collection__card:hover .brp-collection__media {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md-hover);
  }
  .brp-collection__img,
  .brp-collection__img-ph {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .brp-collection__img-ph {
    display: grid;
    place-items: center;
    color: rgba(0,0,0,0.35);
    font-family: var(--font-display--family);
    font-size: 12px;
  }

  .brp-collection__name {
    font-size: clamp(15px, 1.4vw, 18px);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
  }
  .brp-collection__price {
    font-family: var(--font-display--family);
    font-size: 14px;
    margin: 0;
  }
  .brp-collection__price s { opacity: 0.6; margin-left: 0.4rem; }

  /* Pagination */
  .brp-collection__pagination {
    margin-top: clamp(32px, 4vw, 56px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .brp-collection__pages {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.25rem;
  }
  .brp-collection__pages li a,
  .brp-collection__pages li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    font-family: var(--font-display--family);
    font-size: 14px;
    text-decoration: none;
    color: inherit;
  }
  .brp-collection__pages li a:hover { background: rgba(255,255,255,0.08); }
  .brp-collection__pages li span[aria-current="page"] {
    background: var(--color-foreground);
    color: var(--color-background);
  }
  .brp-collection__pager {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    color: inherit;
    text-decoration: none;
    font-family: var(--font-display--family);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .brp-collection__pager:hover { background: rgba(255,255,255,0.08); }
/* END_SECTION:brp-collection */

/* START_SECTION:brp-contact-form (INDEX:5) */
.brp-contact {
    padding-block: var(--brp-pt, 20px) var(--brp-pb, 56px);
  }
  .brp-contact__panel {
    padding: clamp(24px, 3vw, 32px);
    text-align: left;
  }
  .brp-contact__title {
    margin-bottom: 16px;
    font-size: clamp(20px, 2vw, 26px);
  }
  .brp-contact__fld {
    margin-bottom: 16px;
  }
  .brp-contact__row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  @media (max-width: 680px) {
    .brp-contact__row2 { grid-template-columns: 1fr; }
  }
  .brp-contact__label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .brp-contact__fld input,
  .brp-contact__fld select,
  .brp-contact__fld textarea {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    background-color: #fff;
    color: #111;
    font: inherit;
  }
  .brp-contact__fld textarea {
    min-height: 90px;
    resize: vertical;
  }
  .brp-contact__note {
    margin-top: 14px;
    opacity: 0.7;
  }
  .brp-contact__msg {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 10px;
    font-weight: 700;
    /* The site header is fixed at the top, so a message scrolled flush to the
       top of the viewport would sit underneath it. */
    scroll-margin-top: 100px;
  }
  .brp-contact__done {
    display: grid;
    justify-items: center;
    gap: 18px;
    padding-block: clamp(20px, 4vw, 40px);
    text-align: center;
    scroll-margin-top: 100px;
  }
  /* Focused on load to pull the visitor to it. It is not in the tab order, so
     dropping the ring cannot strand anyone navigating by keyboard. */
  .brp-contact__done:focus {
    outline: none;
  }
  .brp-contact__done-icon {
    width: clamp(48px, 7vw, 64px);
    height: clamp(48px, 7vw, 64px);
  }
  .brp-contact__done-msg {
    max-width: 32ch;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 700;
    line-height: 1.35;
  }
  .brp-contact__msg--error {
    background-color: rgba(255, 60, 60, 0.2);
  }
/* END_SECTION:brp-contact-form */

/* START_SECTION:brp-hero (INDEX:6) */
.brp-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: var(--brp-hero-height, 80svh);
    min-height: 520px;
    overflow: hidden;
    isolation: isolate;
  }
  .brp-hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .brp-hero__img,
  .brp-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .brp-hero__ph {
    height: 100%;
    border-radius: 0;
    font-size: clamp(14px, 2vw, 20px);
    /* Vignette so the scroll cue stays legible against the flat placeholder,
       the same way the tint works once a real video is in place. */
    box-shadow: inset 0 0 120px rgba(0, 0, 40, 0.6);
  }
  .brp-hero__tint {
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: var(--brp-hero-tint, 0.3);
  }
  .brp-hero__scroll {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-bottom: 30px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    opacity: 0.9;
  }
  .brp-hero__content {
    display: flex;
    flex-direction: column;
    padding-block: clamp(40px, 5vw, 70px) clamp(16px, 2vw, 20px);
  }
  .brp-hero__content .brp-container {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.8vw, 22px);
  }
/* END_SECTION:brp-hero */

/* START_SECTION:brp-iubenda (INDEX:7) */
/* Full-bleed neutral backdrop so the branded blue body never shows behind
     the document. Kept a soft grey so the white card reads as a "page". */
  .brp-iubenda {
    /* Clear the fixed header, then normal reading margins. */
    padding-top: calc(var(--brp-header-height, 96px) + clamp(24px, 5vw, 56px));
    padding-bottom: clamp(48px, 8vw, 96px);
    padding-inline: clamp(16px, 4vw, 40px);
    background: #eef0f4;
    min-height: 100svh;
  }

  /* Column shrink-wraps to the iubenda content's natural width and stays
     centred. Background stays full width via .full-width. */
  .brp-iubenda__card {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: clamp(24px, 5vw, 64px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 30px rgba(0, 0, 0, 0.06);
  }

  /* Optional heading above the embed — plain, not the bubble display font. */
  .brp-iubenda__title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.2;
    font-size: clamp(24px, 3.5vw, 34px);
    color: #1a1a1a;
    margin-bottom: 1.5rem;
  }

  /* -------------------------------------------------------------------
     Neutralise the theme inside the iubenda content.
     The embed inherits the theme's display/body fonts, uppercase headings
     and blue link colour — reset all of it to a plain, readable document.
     Scoped strictly to .brp-iubenda__content so header/footer stay branded.
     ------------------------------------------------------------------- */
  .brp-iubenda__content,
  .brp-iubenda__content * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
  }

  .brp-iubenda__content {
    color: #2a2a2a;
    font-size: 16px;
    line-height: 1.6;
    overflow-wrap: anywhere;
  }

  .brp-iubenda__content img { max-width: 100%; height: auto; }

  .brp-iubenda__content h1,
  .brp-iubenda__content h2,
  .brp-iubenda__content h3,
  .brp-iubenda__content h4,
  .brp-iubenda__content h5,
  .brp-iubenda__content h6 {
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a;
    overflow-wrap: normal;
    word-break: normal;
  }
  .brp-iubenda__content h1 { font-size: 1.6em; margin: 1.6em 0 0.6em; }
  .brp-iubenda__content h2 { font-size: 1.35em; margin: 1.5em 0 0.5em; }
  .brp-iubenda__content h3 { font-size: 1.15em; margin: 1.3em 0 0.4em; }
  .brp-iubenda__content h4,
  .brp-iubenda__content h5,
  .brp-iubenda__content h6 { font-size: 1em; margin: 1.2em 0 0.3em; }
  .brp-iubenda__content > :first-child { margin-top: 0; }

  .brp-iubenda__content p { margin: 0 0 1em; }
  .brp-iubenda__content ul,
  .brp-iubenda__content ol { margin: 0 0 1em; padding-left: 1.4rem; }
  .brp-iubenda__content li { margin-bottom: 0.4em; }

  .brp-iubenda__content a {
    color: #0645ad;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .brp-iubenda__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2em;
    font-size: 0.95em;
  }
  .brp-iubenda__content th,
  .brp-iubenda__content td {
    border: 1px solid #ddd;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
  }
  .brp-iubenda__content hr {
    border: 0;
    border-top: 1px solid #e2e2e2;
    margin: 2em 0;
  }
/* END_SECTION:brp-iubenda */

/* START_SECTION:brp-layout (INDEX:8) */
.brp-layout {
    padding-block: var(--brp-pt, 56px) var(--brp-pb, 56px);
  }
  /* Section background paints the whole edge-to-edge strip. It is separate
     from "Panel style", which paints the boxed container inside it. */
  .brp-layout--bg-dark {
    background-color: #000;
    color: #fff;
  }
  .brp-layout--bg-blueprint {
    background-color: var(--color-blueprint);
  }
  .brp-layout--bg-surface {
    background-color: var(--color-surface);
    color: var(--color-surface-foreground);
  }
/* END_SECTION:brp-layout */

/* START_SECTION:brp-legal (INDEX:9) */
.brp-legal {
    padding-block: var(--space-section);
    padding-inline: clamp(20px, 5vw, 48px);
  }
  .brp-legal__inner {
    max-width: 74ch;
    margin-inline: auto;
  }
  .brp-legal__head {
    margin-bottom: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(16px, 2vw, 24px);
    border-bottom: 2px solid var(--color-foreground);
  }
  .brp-legal__title {
    font-size: clamp(32px, 5vw, 64px);
    line-height: 0.95;
    overflow-wrap: normal;
    word-break: keep-all;
  }
  .brp-legal__updated {
    margin-top: 0.75rem;
    font-size: 14px;
    color: var(--text-subtle);
  }

  /* Table of contents */
  .brp-legal__toc {
    margin-bottom: clamp(28px, 4vw, 48px);
    padding: clamp(16px, 2vw, 24px);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 30%, transparent);
    border-radius: var(--radius-card, 24px);
  }
  .brp-legal__toc-title {
    font-family: var(--font-display--family);
    text-transform: lowercase;
    margin-bottom: 0.5rem;
  }
  .brp-legal__toc-list {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.35rem;
    font-size: 15px;
  }
  .brp-legal__toc-list a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Rich-text body — readable long-form legal copy */
  .brp-legal__content {
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.65;
  }
  .brp-legal__content > :first-child { margin-top: 0; }
  .brp-legal__content h1,
  .brp-legal__content h2,
  .brp-legal__content h3,
  .brp-legal__content h4,
  .brp-legal__content h5,
  .brp-legal__content h6 {
    font-family: var(--font-display--family);
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.15;
    /* Wrap between whole words only — never split "SPEDIZIONI" etc.
       Overrides the global `overflow-wrap: break-word` in critical.css. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    scroll-margin-top: calc(var(--brp-header-height, 96px) + 16px);
  }
  /* A stray H1 inside the body (policies often include their own title)
     should read as a section heading, not a giant hero title. */
  .brp-legal__content h1 {
    font-size: clamp(24px, 2.8vw, 34px);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
  }
  .brp-legal__content > h1:first-child,
  .brp-legal__content > h2:first-child { margin-top: 0; }
  .brp-legal__content h2 {
    font-size: clamp(22px, 2.4vw, 30px);
    margin-top: 2.2em;
    margin-bottom: 0.6em;
  }
  .brp-legal__content h3 {
    font-size: clamp(18px, 1.8vw, 22px);
    margin-top: 1.6em;
    margin-bottom: 0.5em;
  }
  .brp-legal__content h4 {
    font-size: 17px;
    margin-top: 1.3em;
    margin-bottom: 0.4em;
  }
  .brp-legal__content p { margin: 0 0 1em; }
  .brp-legal__content ul,
  .brp-legal__content ol {
    margin: 0 0 1em;
    padding-left: 1.4rem;
  }
  .brp-legal__content li { margin-bottom: 0.4em; }
  .brp-legal__content a {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .brp-legal__content strong { font-weight: 700; }
  .brp-legal__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.2em;
    font-size: 0.95em;
  }
  .brp-legal__content th,
  .brp-legal__content td {
    border: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
  }
  .brp-legal__content hr {
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
    margin: 2em 0;
  }
/* END_SECTION:brp-legal */

/* START_SECTION:brp-manifesto (INDEX:10) */
.brp-manifesto {
    padding-block: var(--brp-pt, 56px) var(--brp-pb, 56px);
  }
  .brp-manifesto__panel {
    padding: clamp(20px, 3vw, 40px);
  }
  .brp-manifesto__img {
    width: 100%;
    height: auto;
    display: block;
  }
  .brp-manifesto__ph {
    min-height: 300px;
  }
  .brp-manifesto__lines {
    margin-top: 24px;
  }
  .brp-manifesto__sig {
    margin-top: 24px;
    max-width: 560px;
    opacity: 0.7;
  }
/* END_SECTION:brp-manifesto */

/* START_SECTION:brp-media-text (INDEX:11) */
.brp-mt {
    padding-block: var(--brp-pt, 50px) var(--brp-pb, 50px);
  }
  .brp-mt__inner {
    display: grid;
    grid-template-columns: var(--brp-media-col, 50fr) var(--brp-body-col, 50fr);
    gap: clamp(24px, 3.5vw, 40px);
    align-items: center;
  }
  /* Reversing with `order` rather than `direction` keeps the DOM order —
     and therefore the reading and tab order — text-first on mobile. */
  .brp-mt__inner--reversed .brp-mt__media {
    order: 2;
  }
  .brp-mt__inner--divided {
    padding-bottom: clamp(24px, 4vw, 50px);
    border-bottom: 1px solid var(--rule-color);
  }
  .brp-mt__body {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vw, 18px);
  }
  .brp-mt__media .brp-media:not(.brp-media--ratio) .brp-media__ph {
    min-height: 280px;
  }
  .brp-mt__media .brp-media__ph,
  .brp-mt__media .brp-media__img,
  .brp-mt__media .brp-media__video {
    box-shadow: var(--shadow-media);
  }
  @media (max-width: 1000px) {
    .brp-mt__inner {
      grid-template-columns: minmax(0, 1fr);
    }
    .brp-mt__inner--reversed .brp-mt__media {
      order: 0;
    }
  }
/* END_SECTION:brp-media-text */

/* START_SECTION:brp-newsletter (INDEX:12) */
.brp-news {
    background-color: var(--brp-news-bg);
    color: var(--brp-news-fg);
    padding-block: var(--brp-news-pad-y, 88px);
    padding-inline: clamp(16px, 4vw, 48px);
  }
  .brp-news__inner {
    max-width: var(--brp-news-width, 640px);
    margin-inline: auto;
    text-align: var(--brp-news-align, center);
  }
  .brp-news__title {
    margin: 0 0 1rem;
    margin-inline: var(--brp-news-block-margin, auto);
    max-width: var(--brp-news-title-width, 20ch);
    font-size: var(--brp-news-title-size, 48px);
    font-weight: var(--brp-news-title-weight, 700);
    text-transform: var(--brp-news-title-transform, uppercase);
    line-height: 1.05;
  }
  .brp-news__body {
    margin: 0 0 2rem;
    margin-inline: var(--brp-news-block-margin, auto);
    max-width: 52ch;
    font-size: var(--brp-news-body-size, 16px);
    line-height: 1.5;
    opacity: 0.95;
  }
  .brp-news__body p { margin-block: 0; }
  .brp-news__body p + p { margin-top: 0.75rem; }

  .brp-news__form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: var(--brp-news-flex-align, center);
  }
  .brp-news__field {
    position: relative;
    display: flex;
    gap: 8px;
    width: 100%;
    max-width: 460px;
  }
  .brp-news__label {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
  .brp-news__input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.35);
    background: transparent;
    color: var(--brp-news-fg);
    font: inherit;
  }
  .brp-news__input::placeholder { color: rgba(255,255,255,0.55); }
  .brp-news__input:focus {
    outline: 2px solid var(--brp-news-fg);
    outline-offset: 2px;
  }
  .brp-news__submit {
    padding: 14px 24px;
    border-radius: 999px;
    border: 0;
    background: var(--brp-news-fg);
    color: var(--brp-news-bg);
    font-family: var(--font-display--family);
    font-weight: var(--font-display--weight);
    font-size: 15px;
    text-transform: lowercase;
    cursor: pointer;
    transition: opacity 150ms ease;
  }
  .brp-news__submit:hover { opacity: 0.9; }

  .brp-news__consent {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    max-width: 460px;
    margin-inline: var(--brp-news-block-margin, auto);
    text-align: left;
    font-size: 13px;
    line-height: 1.4;
    opacity: 0.95;
  }
  .brp-news__consent-box {
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: var(--brp-news-fg);
  }
  .brp-news__consent-text {
    max-width: 460px;
    margin-inline: var(--brp-news-block-margin, auto);
    margin-top: 0.75rem;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-subtle);
  }
  .brp-news__consent-text a { text-decoration: underline; text-underline-offset: 2px; }
  .brp-news__consent-text p { margin-block: 0; }

  .brp-news__msg {
    margin-top: 0.75rem;
    font-size: 14px;
    /* Clears the fixed header when focus scrolls this to the top. */
    scroll-margin-top: 100px;
  }
  .brp-news__msg:focus {
    outline: none;
  }
  .brp-news__msg--error   { color: #ff9aa1; }
  .brp-news__msg--success { color: #a2f5b7; }

  @media (max-width: 520px) {
    .brp-news__field { flex-direction: column; }
  }
/* END_SECTION:brp-newsletter */

/* START_SECTION:brp-page-hero (INDEX:13) */
.brp-phero {
    position: relative;
    display: grid;
    /* On narrow viewports the strict 16:9 box becomes too short to hold
       the heading + body without clipping. Keep a min-height that gives
       text enough room; the aspect-ratio is reapplied above the mobile
       breakpoint, where the hero has plenty of space horizontally. */
    min-height: 70svh;
    overflow: hidden;
    isolation: isolate;
  }
  @media (min-width: 781px) {
    .brp-phero {
      aspect-ratio: 16 / 9;
      min-height: 0;
    }
  }
  .brp-phero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .brp-phero__img,
  .brp-phero__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .brp-phero__placeholder {
    display: grid;
    place-items: center;
    background: repeating-linear-gradient(
      45deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.06) 16px,
      rgba(255,255,255,0.02) 16px,
      rgba(255,255,255,0.02) 32px
    );
    color: rgba(255,255,255,0.6);
    font-family: var(--font-display--family);
    font-size: clamp(32px, 5vw, 72px);
  }
  .brp-phero__tint {
    position: absolute;
    inset: 0;
    background-color: var(--color-background);
    mix-blend-mode: multiply;
    opacity: 0.55;
  }
  .brp-phero__logo {
    position: absolute;
    z-index: 2;
    right: clamp(24px, 5vw, 80px);
    top: 50%;
    transform: translateY(-50%);
    width: clamp(140px, 22vw, 320px);
  }
  .brp-phero__logo img {
    width: 100%;
    height: auto;
    display: block;
  }
  .brp-phero__content {
    position: relative;
    z-index: 1;
    align-self: end;
    /* Top padding equals the header height so content can never slide
       under the fixed header bar even when the heading + body are tall. */
    padding:
      calc(var(--brp-header-height, 96px) + 16px)
      clamp(24px, 4vw, 48px)
      clamp(24px, 4vw, 48px);
    max-width: 60ch;
  }
  /* Stable typography: the heading wraps onto a consistent number of
     lines across viewport sizes by capping its line length, and font
     size scales gently rather than tracking the viewport closely. */
  .brp-phero__content h1 {
    font-size: clamp(36px, 4.6vw, 80px);
    line-height: 0.95;
    max-width: 12ch;
    text-wrap: balance;
    /* Wrap between words only — never split a word like "PROGETTO".
       Overrides the global `overflow-wrap: break-word` in critical.css. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }
  .brp-phero__body {
    margin-top: 1rem;
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.5;
    max-width: 48ch;
  }
  .brp-phero__body p { margin-block: 0; }
  .brp-phero__body p + p { margin-top: 0.75rem; }
/* END_SECTION:brp-page-hero */

/* START_SECTION:brp-product (INDEX:14) */
.brp-product { padding-block: var(--space-section); }

  .brp-product__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: clamp(16px, 2vw, 24px);
    font-family: var(--font-display--family);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-decoration: none;
  }
  .brp-product__back:hover {
    color: var(--color-foreground);
  }
  .brp-product__back-icon {
    width: 18px;
    height: 18px;
    flex: none;
    transition: transform 0.15s ease;
  }
  .brp-product__back:hover .brp-product__back-icon {
    transform: translateX(-3px);
  }
  @media (prefers-reduced-motion: reduce) {
    .brp-product__back-icon { transition: none; }
    .brp-product__back:hover .brp-product__back-icon { transform: none; }
  }

  .brp-product__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
  }
  @media (max-width: 900px) {
    .brp-product__grid { grid-template-columns: 1fr; }
  }

  .brp-product__gallery { position: sticky; top: calc(var(--brp-header-height) + 16px); }
  @media (max-width: 900px) {
    .brp-product__gallery { position: static; }
  }

  .brp-product__main {
    background-color: var(--color-surface-soft);
    box-shadow: var(--shadow-media);
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
  }
  .brp-product__main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
  .brp-product__main-ph {
    color: rgba(255,255,255,0.4);
    font-family: var(--font-display--family);
  }

  .brp-product__thumbs {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 8px;
  }
  .brp-product__thumb {
    background-color: var(--color-surface-soft);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    transition: border-color 150ms ease, transform 150ms ease;
  }
  .brp-product__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .brp-product__thumb:hover { transform: translateY(-1px); }
  .brp-product__thumb.is-active { border-color: var(--color-foreground); }

  .brp-product__title {
    margin-bottom: 0.5rem;
    /* Smaller than the global h1 so typical product titles stay on one line. */
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.05;
    text-transform: uppercase;
  }
  .brp-product__price {
    font-family: var(--font-display--family);
    font-size: clamp(20px, 2vw, 28px);
    margin-bottom: 1.5rem;
  }
  .brp-product__price-was {
    opacity: 0.6;
    margin-left: 0.5rem;
    font-size: 0.85em;
  }

  .brp-product__form { display: flex; flex-direction: column; gap: 1.25rem; }

  .brp-product__option { border: 0; padding: 0; margin: 0; }
  .brp-product__option-name {
    font-family: var(--font-display--family);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    padding: 0;
  }
  .brp-product__option-values {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .brp-product__option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .brp-product__option-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
    user-select: none;
  }
  .brp-product__option input[type="radio"]:checked + .brp-product__option-value {
    background: var(--color-foreground);
    color: var(--color-background);
    border-color: var(--color-foreground);
  }
  .brp-product__option input[type="radio"]:focus-visible + .brp-product__option-value {
    outline: 2px solid var(--color-foreground);
    outline-offset: 2px;
  }

  .brp-product__atc {
    padding: 16px 24px;
    border-radius: 999px;
    border: 0;
    background: var(--color-foreground);
    color: var(--color-background);
    font-family: var(--font-display--family);
    font-weight: var(--font-display--weight);
    text-transform: uppercase;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 150ms ease;
  }
  .brp-product__atc:hover { opacity: 0.9; }
  .brp-product__atc:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  .brp-product__accordions {
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
  .brp-product__acc {
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
  .brp-product__acc-head {
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--font-display--family);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    user-select: none;
  }
  .brp-product__acc-head::-webkit-details-marker { display: none; }
  .brp-product__acc-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 200ms ease;
  }
  .brp-product__acc[open] .brp-product__acc-icon { transform: rotate(180deg); }

  .brp-product__acc-body {
    padding: 0 0 16px;
    font-size: 14px;
    line-height: 1.55;
  }
  .brp-product__acc-body p { margin-block: 0.6em; }
  .brp-product__acc-body p:first-child { margin-top: 0; }
  .brp-product__acc-body p:last-child { margin-bottom: 0; }
  .brp-product__acc-body img { border-radius: 8px; margin-block: 0.75em; }
  .brp-product__acc-body ul, .brp-product__acc-body ol { padding-left: 1.25em; }
  {% comment %}
    Size charts are tables, and a merchant writing one into the product
    description had nothing styling it -- .rte carries no table rules, so it
    arrived borderless and cramped. Borders and spacing follow brp-legal, which
    is the other place in the theme that renders merchant-authored tables.
  {% endcomment %}
  .brp-product__acc-body table {
    width: 100%;
    border-collapse: collapse;
    margin-block: 0.75em;
    font-size: 0.95em;
  }
  .brp-product__acc-body th,
  .brp-product__acc-body td {
    border: 1px solid color-mix(in srgb, var(--color-foreground) 25%, transparent);
    padding: 7px 9px;
    text-align: left;
    vertical-align: top;
  }
  .brp-product__acc-body th {
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  /* Four numeric columns still fit a 375px phone once the type steps down. */
  @media (max-width: 520px) {
    .brp-product__acc-body table { font-size: 0.85em; }
    .brp-product__acc-body th,
    .brp-product__acc-body td { padding: 6px 6px; }
  }
/* END_SECTION:brp-product */

/* START_SECTION:brp-shop (INDEX:15) */
.brp-shop {
    --brp-shop-side-pad: 6%;

    /* The whole section (including the title band) sits on the page
       background colour. Only the stage below carries the image / white. */
    background-color: var(--color-background);
    color: var(--color-surface-foreground);
  }

  /* Title band — always on the page background colour, full width, its own
     block above the image. */
  .brp-shop__head {
    color: var(--color-foreground);
    padding: clamp(32px, 6%, 88px) var(--brp-shop-side-pad) clamp(24px, 4%, 56px);
  }
  .brp-shop__title {
    max-width: 16ch;
  }

  /* Stage — the full-width image with the products highlighted on top of it.
     Aspect ratio, background-size/position and (optional) min-height are
     merchant-controlled via the inline style above. */
  .brp-shop__stage {
    position: relative;
    aspect-ratio: var(--brp-shop-aspect, 1920 / 1268);
    min-height: var(--brp-shop-min-height, 0svh);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Background image lives on a pseudo-element so we can apply
     filter: drop-shadow() to it. The shadow follows the alpha channel
     of the PNG, so torn edges cast irregular shadows naturally. */
  .brp-shop__stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--brp-shop-bg);
    background-size: var(--brp-shop-bg-size, cover);
    background-position: var(--brp-shop-bg-position, center);
    background-repeat: no-repeat;
    filter: var(--brp-shop-shadow, none);
    pointer-events: none;
  }
  .brp-shop__stage > * { position: relative; z-index: 1; }

  /* No image uploaded: white product area, no aspect-ratio lock — the stage
     just wraps the products with padding. */
  .brp-shop--no-image .brp-shop__stage {
    aspect-ratio: auto;
    min-height: 0;
    background: #fff;
    padding-block: clamp(40px, 6vw, 88px);
  }
  .brp-shop--no-image .brp-shop__stage::before {
    display: none;
  }

  /* Mobile: swap to the merchant's mobile aspect ratio, image and scaling.
     Applied properties live here (not inline) so this media query can win. */
  @media (max-width: 780px) {
    .brp-shop__stage {
      aspect-ratio: var(--brp-shop-aspect-mobile, 1080 / 1440);
      min-height: var(--brp-shop-min-height-mobile, 0svh);
    }
    .brp-shop__stage::before {
      background-image: var(--brp-shop-bg-mobile, var(--brp-shop-bg));
      background-size: var(--brp-shop-bg-size-mobile, cover);
      background-position: var(--brp-shop-bg-position-mobile, center);
    }
    .brp-shop--no-image .brp-shop__stage {
      aspect-ratio: auto;
    }
  }

  .brp-shop__grid {
    display: grid;
    grid-template-columns: repeat(var(--brp-shop-cols, 4), minmax(0, 1fr));
    gap: clamp(16px, 3vw, 48px);
    width: 100%;
    /* --page-width keeps body-copy templates narrow; the product grid
       belongs to the wide BRP scale like every other section here. */
    max-width: var(--brp-width-wide, 1400px);
    margin-inline: auto;
    padding-inline: var(--brp-shop-side-pad);
  }
  @media (max-width: 1000px) {
    .brp-shop__grid { grid-template-columns: repeat(var(--brp-shop-cols-md, 2), minmax(0, 1fr)); }
  }
  @media (max-width: 680px) {
    .brp-shop__grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* Name and price sit left under the photo, and the price tucks up close to
     the name rather than sharing the card's main gap (reference .prod). */
  .brp-shop__card {
    display: flex;
    flex-direction: column;
    gap: 0;
    color: inherit;
    text-align: left;
  }
  .brp-shop__media {
    height: clamp(140px, 14vw, 200px);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--color-surface-soft);
    box-shadow: 0 14px 30px rgba(0, 0, 60, 0.5);
    transition: box-shadow 0.2s ease;
  }
  .brp-shop__card:hover .brp-shop__media {
    box-shadow: var(--shadow-md-hover);
  }
  .brp-shop__media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .brp-shop__media-ph {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(0,0,0,0.35);
    background: repeating-linear-gradient(45deg,#f1f1f1,#f1f1f1 10px,#e8e8e8 10px,#e8e8e8 20px);
    font-family: var(--font-display--family);
  }
  .brp-shop__name {
    font-family: var(--font-display--family);
    font-size: clamp(18px, 2vw, 22px);
    color: var(--color-surface-foreground);
  }
  .brp-shop__price {
    margin-top: 4px;
    font-size: 16px;
    font-weight: 700;
    color: color-mix(in srgb, var(--color-surface-foreground) var(--text-muted-amount), transparent);
  }
/* END_SECTION:brp-shop */

/* START_SECTION:brp-youtube (INDEX:16) */
/* The section was inheriting the narrow --page-width column (960px) while
     its neighbours run at 1320px, and .section's 8vw block padding, which is
     double the reference's. Match the reference: 1400px cap, 56px block. */
  .brp-yt {
    padding-block: clamp(36px, 4vw, 56px);
  }

  /* Reference .yt-wrap: text on the left, the channel card on the right, both
     halves vertically centred, stacking at the reference's 1000px breakpoint. */
  .brp-yt__wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 40px);
    align-items: center;
  }
  @media (max-width: 1000px) {
    .brp-yt__wrap { grid-template-columns: minmax(0, 1fr); }
  }

  /* Reference left column: heading, blurb, button. Nothing else. */
  .brp-yt__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* No font-size here: the global h2 is now the reference's 46px. The line
     break comes from the stored value, so no max-width is needed either. */
  .brp-yt__blurb { max-width: 60ch; margin-top: 0.5rem; color: var(--text-muted); }
  .brp-yt__cta {
    margin-top: clamp(16px, 2vw, 24px);
  }
  .yt-widget {
    max-width: 100%;
    margin: 0;
    background: var(--color-surface);
    color: var(--color-surface-foreground);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 20px 60px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    font-family: var(--font-primary--family);
  }

  .yt-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .yt-widget-header-left { display: flex; align-items: center; gap: 14px; }
  .yt-widget-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    object-fit: cover; background: #e0e0e0;
  }
  .yt-widget-channel-name {
    font-size: 1.05rem; font-weight: 700; color: #111; margin: 0 0 3px;
  }
  .yt-widget-channel-stats { font-size: 0.78rem; color: #666; margin: 0; }
  .yt-widget-subscribe {
    display: inline-flex; align-items: center; gap: 6px;
    background: #ff0000; color: #fff;
    font-size: 0.82rem; font-weight: 600;
    padding: 8px 16px; border-radius: 6px;
    text-decoration: none; transition: background 0.2s;
    white-space: nowrap;
  }
  .yt-widget-subscribe:hover { background: #d00; }
  .yt-widget-subscribe svg { width: 18px; height: 18px; fill: #fff; }

  .yt-widget-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 20px 24px 24px;
    list-style: none;
    margin: 0;
  }
  .yt-widget-grid li { display: flex; flex-direction: column; }

  .yt-widget-thumb {
    position: relative; display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden; border-radius: 8px;
    background: #e8e8e8;
  }
  .yt-widget-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
  }
  .yt-widget-thumb:hover img { transform: scale(1.04); filter: brightness(0.8); }

  .yt-widget-play {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0;
    transition: opacity 0.25s ease;
  }
  .yt-widget-thumb:hover .yt-widget-play { opacity: 1; }
  .yt-widget-play-circle {
    width: 50px; height: 50px;
    background: rgba(60, 60, 60, 0.75);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
  }
  .yt-widget-thumb:hover .yt-widget-play-circle { transform: scale(1.1); background: rgba(80, 80, 80, 0.85); }
  .yt-widget-play-circle svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }

  .yt-widget-duration {
    position: absolute; bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.8); color: #fff;
    font-size: 0.72rem; font-weight: 600;
    padding: 2px 5px; border-radius: 3px;
    letter-spacing: 0.02em;
  }

  .yt-widget-title {
    margin: 8px 0 2px;
    font-size: 0.85rem; font-weight: 600;
    line-height: 1.35; color: #111;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .yt-widget-title a { color: inherit; text-decoration: none; }
  .yt-widget-title a:hover { text-decoration: underline; }
  .yt-widget-date { font-size: 0.75rem; color: #888; margin: 0; }

  @media (max-width: 760px) {
    .yt-widget-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; }
    .yt-widget-header { padding: 16px; }
  }
  @media (max-width: 480px) {
    .yt-widget-grid { grid-template-columns: 1fr; }
    .yt-widget-subscribe span { display: none; }
  }

  @keyframes yt-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  .yt-skel {
    background: linear-gradient(90deg, #e8e8e8 25%, #f4f4f4 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: yt-shimmer 1.5s ease infinite;
  }
  .yt-widget-grid.is-loading .yt-widget-thumb { pointer-events: none; }
  .yt-widget-grid.is-loading .yt-skel-title { height: 14px; width: 80%; margin-top: 10px; border-radius: 4px; }
  .yt-widget-grid.is-loading .yt-skel-date  { height: 12px; width: 45%; margin-top: 6px; border-radius: 4px; }

  .yt-widget-header.is-loading .yt-widget-avatar {
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: yt-shimmer 1.5s ease infinite;
  }
  .yt-widget-header.is-loading .yt-skel-name  { height: 16px; width: 160px; border-radius: 4px; }
  .yt-widget-header.is-loading .yt-skel-stats { height: 12px; width: 220px; border-radius: 4px; margin-top: 6px; }
/* END_SECTION:brp-youtube */

/* START_SECTION:collection (INDEX:18) */
.collection-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:19) */
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr));
    gap: var(--grid-gap);
  }
  .collections--compact {
    --collection-card-size: 160px;
  }
  .collections--full {
    --collection-card-size: 280px;
  }
  .collection-card {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
/* END_SECTION:collections */

/* START_SECTION:footer (INDEX:20) */
.brp-footer {
    background-color: var(--color-background);
    color: var(--color-foreground);
    padding-inline: clamp(16px, 3vw, 40px);
  }
  /* Reference .footer-main: a raised panel in the darker blue, not a hairline
     box on the page colour. Three equal columns, vertically centred. */
  .brp-footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(16px, 3vw, 30px);
    align-items: center;
    max-width: var(--brp-width-wide, 1400px);
    margin-inline: auto;
    padding: clamp(24px, 4vw, 40px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    background-color: var(--color-blueprint);
    box-shadow: var(--shadow-media);
  }
  @media (max-width: 780px) {
    .brp-footer__inner {
      grid-template-columns: 1fr;
      justify-items: center;
      text-align: center;
      gap: 28px;
    }
  }

  /* Middle column: label, address to write to, then the social row — every way
     of reaching BRP in one stack, which also gives the icons something to sit
     against instead of floating over the grid. */
  .brp-footer__cell--contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
  .brp-footer__logo {
    display: block;
    width: clamp(120px, 14vw, 180px);
  }
  .brp-footer__logo svg,
  .brp-footer__logo img {
    width: 100%;
    height: auto;
  }
  .brp-footer__label {
    font-family: var(--font-display--family);
    text-transform: lowercase;
    font-size: 16px;
    margin-bottom: 0.25rem;
  }
  .brp-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 14px;
  }
  .brp-footer__contact a { text-decoration: underline; text-underline-offset: 3px; }
  .brp-footer__links {
    width: max-content;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(var(--fm-cols, 2), max-content);
    grid-template-rows: repeat(var(--fm-rows, 3), auto);
    justify-items: start;
    gap: 0.6rem 2.5rem;
    font-size: 13px;
  }
  @media (max-width: 480px) {
    .brp-footer__links {
      margin-left: 0;
      width: auto;
      grid-auto-flow: row;
      grid-template-columns: 1fr;
      grid-template-rows: none;
    }
  }
  .brp-footer__social {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 2.5vw, 28px);
  }
  .brp-footer__social-link {
    display: inline-flex;
    color: var(--color-foreground);
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .brp-footer__social-link:hover {
    opacity: 1;
    transform: translateY(-2px);
  }
  .brp-footer__social-link svg {
    width: 24px;
    height: 24px;
    display: block;
  }
  .brp-footer__legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 12px;
    opacity: 0.8;
    flex-wrap: wrap;
  }
  .brp-footer__payments {
    display: flex;
    gap: 0.5rem;
  }
  .brp-footer__payments svg { height: 20px; width: auto; }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:21) */
:root {
    --brp-header-height: clamp(72px, 8vw, 96px);
  }
  .brp-header {
    /* Progress is set by inline JS based on scrollY (0 at top, 1 once
       the user has scrolled past the threshold). All visual properties
       interpolate against this value, so the fade is continuous. */
    --brp-header-progress: 0;

    box-shadow: 0 6px 20px rgba(0, 0, 40, 0.35);

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    color: var(--color-foreground);
    background-color: color-mix(
      in srgb,
      var(--color-background) calc(var(--brp-header-progress) * 75%),
      transparent
    );
    backdrop-filter: blur(calc(var(--brp-header-progress) * 10px));
    -webkit-backdrop-filter: blur(calc(var(--brp-header-progress) * 10px));
    box-shadow: 0 2px 12px rgba(0, 0, 0, calc(var(--brp-header-progress) * 0.08));
  }
  .brp-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem clamp(16px, 3vw, 32px);
    min-height: var(--brp-header-height);
  }
  .brp-header__nav {
    display: flex;
    gap: clamp(14px, 2.4vw, 40px);
    justify-content: center;
    grid-column: 2;
    order: 2;
    font-family: var(--font-display--family);
    /* The nav shrinks with the viewport rather than wrapping: ~13px at the
       burger breakpoint, rising to the theme-editor setting, which is the
       ceiling and is reached around 1920px. The min() keeps the floor under
       the ceiling when a merchant picks a size below 13px — plain clamp()
       would silently ignore their choice, since a MAX below MIN returns MIN. */
    font-size: clamp(
      min(13px, var(--brp-nav-size, 15px)),
      0.625vw + 8px,
      var(--brp-nav-size, 15px)
    );
    /* No label may break across lines in the bar: if the menu outgrows the row
       the font scales down, and past that the burger takes over. Scoped to the
       bar — the drawer below is a vertical stack, where wrapping is correct. */
    white-space: nowrap;
    text-transform: lowercase;
  }
  .brp-header__link {
    color: var(--color-foreground);
    opacity: 0.9;
    transition: opacity 150ms ease;
    /* Drop-shadow fades out as the background fades in. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, calc((1 - var(--brp-header-progress)) * 0.25));
  }
  .brp-header__link:hover,
  .brp-header__link.is-active {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .brp-header__logo {
    grid-column: 3;
    order: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    max-height: clamp(56px, 7vw, 84px);
  }
  .brp-header__logo-img,
  .brp-header__logo svg {
    max-height: clamp(56px, 7vw, 84px);
    width: auto;
    height: auto;
    object-fit: contain;
  }
  .brp-header__icons {
    grid-column: 1;
    order: 1;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-self: start;
  }
  .brp-header__icons svg {
    width: 22px;
    color: var(--color-foreground);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, calc((1 - var(--brp-header-progress)) * 0.25)));
  }
  .brp-header__cart {
    position: relative;
    display: inline-flex;
  }
  .brp-header__cart sup {
    position: absolute;
    top: -4px;
    right: -10px;
    background: var(--color-foreground);
    color: var(--color-background);
    border-radius: 999px;
    font-size: 10px;
    padding: 2px 6px;
    line-height: 1;
  }

  /* --- Hamburger button (hidden on desktop) --- */
  .brp-header__burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-foreground);
  }
  .brp-header__burger-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, calc((1 - var(--brp-header-progress)) * 0.25)));
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .brp-menu-open .brp-header__burger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .brp-menu-open .brp-header__burger-bar:nth-child(2) {
    opacity: 0;
  }
  .brp-menu-open .brp-header__burger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* --- Mobile overlay + slide-in panel --- */
  .brp-header__overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
  }
  .brp-menu-open .brp-header__overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .brp-header__mobile {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 46;
    /* The panel's width and padding are declared once here because the label
       size below is derived from them. The drawer is a slide-in panel, not a
       full-width sheet, so the room for a label is much narrower than the
       viewport — sizing the text against vw overflows it. */
    --brp-drawer-width: min(80vw, 320px);
    --brp-drawer-pad: clamp(24px, 7vw, 40px);
    width: var(--brp-drawer-width);
    background: var(--color-background, #0019FF);
    color: var(--color-foreground, #fff);
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.25);
    transform: translateX(-100%);
    transition: transform 250ms ease;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  .brp-menu-open .brp-header__mobile {
    transform: translateX(0);
    pointer-events: auto;
  }
  .brp-header__mobile-inner {
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 4vw, 28px);
    padding: calc(var(--brp-header-height) + 12px) var(--brp-drawer-pad) 40px;
    font-family: var(--font-display--family);
    /* Same rule as the bar: shrink rather than wrap. The size is whichever is
       smaller — the merchant's setting, or what the panel can actually hold.
       The divisor is the width of the longest label in ems (~11 for "big
       rocket project" in Gluten) plus ~9% in hand for letter-spacing and for
       a slightly longer label. Note the room does not simply grow with the
       viewport: past 571px the panel is capped at 320px while the padding is
       still widening, so the tightest case is the WIDE end, not the narrow. */
    font-size: min(
      calc(var(--brp-nav-size, 15px) * 1.45),
      calc((var(--brp-drawer-width) - 2 * var(--brp-drawer-pad)) / 12)
    );
    text-transform: lowercase;
  }
  .brp-header__mobile .brp-header__link {
    color: var(--color-foreground, #fff);
    text-shadow: none;
    /* The drawer shrinks its text rather than breaking a label across lines,
       so it holds the same no-wrap guarantee as the bar. */
    white-space: nowrap;
    opacity: 1;
  }

  @media (max-width: 860px) {
    .brp-header__inner {
      grid-template-columns: auto 1fr auto;
    }
    .brp-header__nav {
      display: none;
    }
    .brp-header__burger {
      display: inline-flex;
    }
  }
  @media (min-width: 861px) {
    /* Keep panel + overlay out of the way on desktop even if left in the DOM. */
    .brp-header__mobile,
    .brp-header__overlay {
      display: none;
    }
  }

  /* Reserve space for the fixed header by default, but drop the reserved
     space on any page whose first section is a full-bleed hero, so the
     hero can extend under the transparent header. */
  .brp-main {
    padding-top: var(--brp-header-height);
  }
  .brp-main:has(> .shopify-section:first-child .brp-hero),
  .brp-main:has(> .shopify-section:first-child .brp-phero) {
    padding-top: 0;
  }
/* END_SECTION:header */

/* START_SECTION:search (INDEX:25) */
.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .search-results .prev,
  .search-results .page,
  .search-results .next {
    grid-column: 1 / -1;
  }
/* END_SECTION:search */

/* CSS from block stylesheet tags */
/* START_BLOCK:brp-badge (INDEX:26) */
.brp-badge-wrap {
    display: flex;
  }
  .brp-badge {
    display: inline-block;
    padding: 8px 24px;
    border: 2px solid currentcolor;
    border-radius: var(--radius-pill);
    font-family: var(--font-display--family);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(0, 0, 60, 0.4);
  }
/* END_BLOCK:brp-badge */

/* START_BLOCK:brp-button (INDEX:27) */
.brp-button {
    display: flex;
  }
/* END_BLOCK:brp-button */

/* START_BLOCK:brp-card (INDEX:28) */
.brp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: clamp(24px, 2.5vw, 32px) clamp(20px, 2vw, 28px);
    border: 1px solid color-mix(in srgb, var(--color-foreground) 22%, transparent);
    border-radius: 16px;
    /* Solid panel rather than a translucent white wash: the wash picked up
       whatever sat behind it, so a card over the hero read differently from
       one over flat blue. */
    background-color: var(--color-blueprint);
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .brp-card--linked:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md-hover);
  }
  .brp-card__eyebrow {
    font-size: 20px;
    letter-spacing: 0;
    opacity: 0.5;
  }
  .brp-card__title {
    font-size: clamp(20px, 2vw, 24px);
  }
  .brp-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  .brp-card__body {
    flex: 1;
  }
  .brp-card__body > p {
    max-width: none;
  }
  /* An outline pill rather than bare text. On desktop the card's hover lift
     already says "clickable", but hover does not exist on touch, so the arrow
     was the only affordance there and a line of uppercase text does not read
     as a control. Outline and small, not the filled .btn: three filled pills
     side by side would outrank the hero's own buttons, and these cards are a
     secondary route, not the page's primary action. Still a span, not a
     second anchor -- the title's stretched link owns the whole card. */
  .brp-card__go {
    align-self: flex-start;
    margin-top: 0.25rem;
    padding: 9px 20px;
    border: 2px solid color-mix(in srgb, currentColor 55%, transparent);
    border-radius: var(--radius-pill);
    font-family: var(--font-display--family);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  /* Fills on hover so the pill answers the card-wide hover instead of sitting
     inert inside a card that is visibly reacting. */
  .brp-card--linked:hover .brp-card__go {
    border-color: var(--color-foreground);
    background-color: var(--color-foreground);
    color: var(--color-blueprint);
  }
/* END_BLOCK:brp-card */

/* START_BLOCK:brp-group (INDEX:29) */
.brp-group {
    display: flex;
    gap: var(--brp-group-gap, 16px);
  }
  .brp-group--row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--brp-group-align, flex-start);
  }
  .brp-group--column {
    flex-direction: column;
    align-items: var(--brp-group-align, flex-start);
  }
  /* Panelled group: lets one column of a layout read as a card without
     needing a separate card block for every combination of contents. */
  .brp-group--panel {
    height: 100%;
    padding: clamp(24px, 3vw, 32px);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
  }
  .brp-group--outline {
    border: 1px solid var(--panel-border-color);
  }
  .brp-group--surface {
    background-color: var(--color-surface);
    color: var(--color-surface-foreground);
  }
/* END_BLOCK:brp-group */

/* START_BLOCK:brp-heading (INDEX:30) */
.brp-heading-wrap__eyebrow {
    margin-bottom: 10px;
  }
  /* Explicit sizes so a heading's visual size is independent of its level:
     a block may need to be an <h3> for the document outline while still
     reading as display type. The global scale now matches the reference
     (68/46/24), so these agree with it rather than compensating for it. */
  .brp-heading {
    max-width: var(--brp-max-width, none);
    text-wrap: balance;
  }
  .brp-heading--xl { font-size: clamp(40px, 5.5vw, 72px); }
  .brp-heading--lg { font-size: clamp(30px, 3.6vw, 46px); }
  .brp-heading--md { font-size: clamp(22px, 2.2vw, 30px); }
  .brp-heading--sm { font-size: clamp(18px, 1.6vw, 22px); }
  /* A capped heading inside a centred wrapper has to be centred itself,
     or it sits left inside its own max-width. */
  .brp-align--center > .brp-heading { margin-inline: auto; }
  .brp-align--right > .brp-heading { margin-inline-start: auto; }
/* END_BLOCK:brp-heading */

/* START_BLOCK:brp-icon (INDEX:31) */
.brp-icon {
    display: grid;
    place-items: center;
    width: var(--brp-icon-size, 100px);
    height: var(--brp-icon-size, 100px);
    border-radius: 12px;
    /* The blueprint grid would be almost invisible at this size, so the box
       keeps the panel's border, fill and shadow but drops the ruling. */
    background-image: none;
    box-shadow: var(--shadow-md);
  }
  .brp-icon.brp-justify--center { margin-inline: auto; }
  .brp-icon.brp-justify--right { margin-inline-start: auto; }
  .brp-icon__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .brp-icon__ph {
    display: grid;
    place-items: center;
    width: 80%;
    height: 80%;
    border: 2px dashed color-mix(in srgb, var(--color-foreground) 35%, transparent);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
  }
/* END_BLOCK:brp-icon */

/* START_BLOCK:brp-image (INDEX:32) */
.brp-image {
    width: 100%;
  }
  /* A placeholder with no aspect ratio would collapse to its text height. */
  .brp-image .brp-media:not(.brp-media--ratio) .brp-media__ph {
    min-height: 260px;
  }

  /* Height goes on .brp-media, not the image: the image is already
     height:100% of it, and an aspect-ratio set on the same element would
     fight the fixed height. */
  .brp-image--screen .brp-media {
    height: calc((100svh - var(--brp-header-height, 0px)) * var(--brp-image-screen, 100) / 100);
    aspect-ratio: auto;
  }
  .brp-image--screen .brp-media__img,
  .brp-image--screen .brp-media__video,
  .brp-image--screen .brp-media__ph {
    height: 100%;
    object-fit: cover;
  }
/* END_BLOCK:brp-image */

/* START_BLOCK:brp-manifesto-line (INDEX:33) */
.brp-manifesto-line {
    padding-top: 8px;
    border-top: 1px solid var(--rule-color);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    text-transform: uppercase;
    opacity: 0.9;
  }
  .brp-manifesto-line__n {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    opacity: 0.5;
  }
/* END_BLOCK:brp-manifesto-line */

/* START_BLOCK:brp-process-card (INDEX:34) */
.brp-process {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 22px 18px;
    border-radius: 18px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    --blueprint-grid: 20px;
  }
  .brp-process:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md-hover);
  }
  .brp-process__title {
    font-size: clamp(17px, 1.6vw, 19px);
    line-height: 1.05;
  }
  .brp-process__sub {
    margin-top: -8px;
    font-size: 12px;
    font-weight: 600;
    opacity: 0.6;
  }
  .brp-process__icon {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    /* The card is a column flex container, and a flex item will not shrink
       below its own content. Without this a portrait icon file overrode the
       aspect-ratio and stretched the box, dropping that card's text out of
       line with the rest of the row. */
    min-height: 0;
    border: 1px solid var(--rule-color);
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: var(--shadow-sm);
  }
  .brp-process__icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .brp-process__icon-ph {
    display: grid;
    place-items: center;
    width: 82%;
    height: 82%;
    border: 2px dashed color-mix(in srgb, var(--color-foreground) 35%, transparent);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.6;
  }
  /* Turns off the ruling without giving up the panel's fill, border and
     shadow, which is what dropping .blueprint would cost. */
  .brp-process--flat {
    background-image: none;
  }
  .brp-process__desc {
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.9;
  }
  .brp-process__mat {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.7;
  }
  .brp-process__mat b {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
  }
  /* Pushes the button to the bottom so a row of cards lines up even when
     the descriptions have different lengths. */
  .brp-process__cta {
    margin-top: auto;
  }
/* END_BLOCK:brp-process-card */

/* START_BLOCK:brp-spec (INDEX:35) */
.brp-spec {
    height: 100%;
    padding: 16px 20px;
    border: 1px solid var(--rule-color);
    border-radius: 10px;
  }
  .brp-spec__term {
    display: block;
    margin-bottom: 2px;
    font-size: 19px;
    font-weight: 700;
  }
  .brp-spec__desc {
    font-size: var(--font-size-small);
    /* The term leads and the definition supports, so it takes the same step
       back as any other secondary text. --text-muted is 85% alpha, matching
       the opacity this replaced, but on the shared scale rather than a value
       of its own. */
    color: var(--text-muted);
  }
/* END_BLOCK:brp-spec */

/* START_BLOCK:brp-step (INDEX:36) */
.brp-step {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    height: 100%;
    padding: clamp(20px, 2vw, 24px);
    border: 1px solid var(--rule-color);
    border-radius: var(--radius-panel);
    background-color: rgba(0, 0, 0, 0.12);
  }
  .brp-step__n {
    font-family: var(--font-display--family);
    font-size: 34px;
    line-height: 1;
    opacity: 0.4;
  }
  .brp-step__title {
    font-size: clamp(18px, 1.6vw, 20px);
  }
  .brp-step__body > p {
    max-width: none;
  }
/* END_BLOCK:brp-step */

/* START_BLOCK:brp-text (INDEX:37) */
/* The max-width has to land on the paragraphs, not just the wrapper:
     .rte already caps them at 66ch, so an explicit value must beat it. */
  .brp-text[style] > * {
    max-width: var(--brp-max-width, 66ch);
  }
/* END_BLOCK:brp-text */

/* START_BLOCK:brp-usecase (INDEX:38) */
.brp-usecase {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
  }
  .brp-usecase__media {
    margin-bottom: 0.5rem;
  }
  /* These photos sit on white cards in the reference design, so their
     placeholder uses the light variant regardless of the surrounding panel. */
  .brp-usecase__media .brp-media__ph {
    border-color: rgba(0, 0, 0, 0.2);
    background-color: var(--color-surface-soft);
    color: rgba(0, 0, 0, 0.45);
  }
  .brp-usecase__media .brp-media__ph,
  .brp-usecase__media .brp-media__img {
    box-shadow: 0 12px 28px rgba(0, 0, 60, 0.45);
  }
  .brp-usecase__title {
    font-size: clamp(19px, 1.8vw, 22px);
  }
  /* Body copy in a card is prose, not a caption — same call as brp-card.
     --font-size-small stays for genuine captions. */
  .brp-usecase__body > p {
    max-width: none;
  }
/* END_BLOCK:brp-usecase */

/* START_BLOCK:brp-video (INDEX:39) */
.brp-video__thumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
  .brp-video__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .brp-video__ph {
    height: 100%;
    border-radius: 0;
  }
  .brp-video__thumb svg {
    position: absolute;
    width: 22%;
    height: auto;
    opacity: 0.9;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
    pointer-events: none;
  }
  .brp-video__title {
    display: block;
    padding-top: 8px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
  }
/* END_BLOCK:brp-video */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:image (INDEX:47) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:image */