/** Shopify CDN: Minification failed

Line 3612:22 Unexpected "{"
Line 3612:31 Expected ":"
Line 7253:2 Expected percentage but found "0"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:about-prsso (INDEX:0) */
.ab {
    position: relative;
    overflow: hidden;
    padding-top: var(--ab-pt, 0);
    padding-bottom: var(--ab-pb, 96px);
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
  }
  .ab__decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .ab > * { position: relative; z-index: 1; }
  .ab .ab__sec { margin-top: clamp(4.4rem, 9vw, 8rem); }
  .ab .ab__sec--last { margin-bottom: 0; }

  /* ---------- HERO ---------- */
  .ab__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(38rem, 60vh, 56rem);
    text-align: center;
    overflow: hidden;
    background:
      radial-gradient(120% 90% at 50% 0%, rgba(var(--color-button), 0.14), transparent 60%),
      radial-gradient(80% 60% at 50% 120%, rgba(var(--color-foreground), 0.06), transparent 70%);
  }
  .ab__hero-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
  }
  .ab__hero-veil {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(var(--color-background), 0.72), rgba(var(--color-background), 0.86));
  }
  .ab__hero-inner {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; align-items: center;
    gap: 1.4rem;
    padding-top: 4rem; padding-bottom: 4rem;
    max-width: 78rem;
  }
  .ab__eyebrow {
    margin: 0;
    font-size: 1.05rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(var(--color-button));
    font-weight: 700;
  }
  .ab__hero-title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    line-height: 1;
    font-size: clamp(2.6rem, 6.2vw, 5rem);
    background: linear-gradient(180deg, rgb(var(--color-button)), color-mix(in srgb, rgb(var(--color-button)) 55%, #fff));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .ab__hero-sub {
    margin: 0;
    font-family: var(--font-heading-family);
    font-size: clamp(1.3rem, 1.9vw, 1.75rem);
    line-height: 1.3;
    color: rgb(var(--color-foreground));
  }
  .ab__hero-text {
    margin: 0;
    max-width: 62ch;
    font-size: clamp(1.4rem, 1.8vw, 1.65rem);
    line-height: 1.7;
    color: rgba(var(--color-foreground), 0.78);
  }
  .ab__hero-text p { margin: 0; }
  .ab__hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 0.8rem; }

  /* ---------- brand buttons (hard-shadow) ---------- */
  .ab__btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.9rem 1.7rem;
    border-radius: 6px;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1.5px solid rgb(var(--color-button));
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.2s ease;
  }
  .ab__btn--primary {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    box-shadow: 4px 4px 0 1px color-mix(in srgb, rgb(var(--color-button)) 55%, #000);
  }
  .ab__btn--primary:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 1px color-mix(in srgb, rgb(var(--color-button)) 55%, #000); }
  .ab__btn--primary:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 1px color-mix(in srgb, rgb(var(--color-button)) 55%, #000); }
  .ab__btn--ghost {
    background: transparent;
    color: rgb(var(--color-button));
    box-shadow: 4px 4px 0 1px rgb(var(--color-button));
  }
  .ab__btn--ghost:hover { transform: translate(-1px, -1px); background: rgba(var(--color-button), 0.08); box-shadow: 6px 6px 0 1px rgb(var(--color-button)); }
  .ab__btn--ghost:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 1px rgb(var(--color-button)); }

  /* ---------- shared headings ---------- */
  .ab__h2 {
    margin: 0 0 1.4rem;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.65rem, 2.4vw, 2.3rem);
    line-height: 1.15;
    color: rgb(var(--color-foreground));
  }
  .ab__h2--center { text-align: center; margin-inline: auto; }
  .ab__head { max-width: 64rem; margin: 0 auto clamp(3rem, 5vw, 4.4rem); text-align: center; }
  .ab__head-sub {
    margin: 0;
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.72);
  }

  /* ---------- split (image + text) ---------- */
  .ab__split { display: grid; grid-template-columns: 1fr; gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
  @media (min-width: 900px) {
    .ab__split { grid-template-columns: 1fr 1fr; }
    .ab__split--reverse .ab__split-media { order: -1; }
  }
  .ab__body {
    font-size: clamp(1.45rem, 1.8vw, 1.7rem);
    line-height: 1.75;
    color: rgba(var(--color-foreground), 0.8);
  }
  .ab__body p { margin: 0 0 1.2rem; }
  .ab__body p:last-child { margin-bottom: 0; }

  .ab__mini { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.2rem; }
  @media (max-width: 479px) { .ab__mini { grid-template-columns: 1fr; } }
  .ab__mini-card {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 1.4rem 1.6rem;
    border-radius: 12px;
    background: rgba(var(--color-foreground), 0.05);
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-inline-start: 3px solid rgb(var(--color-button));
  }
  .ab__mini-title { font-family: var(--font-heading-family); font-weight: 700; font-size: 1.55rem; color: rgb(var(--color-foreground)); }
  .ab__mini-text { font-size: 1.3rem; line-height: 1.5; color: rgba(var(--color-foreground), 0.72); }

  /* ---------- media frame ---------- */
  .ab__frame {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(var(--color-button), 0.14), transparent 62%),
      rgba(var(--color-foreground), 0.04);
    border: 1px solid rgba(var(--color-button), 0.28);
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), inset 0 0 60px -20px rgba(var(--color-button), 0.35);
    aspect-ratio: 1 / 1;
  }
  .ab__split--reverse .ab__frame { aspect-ratio: 5 / 4; }
  .ab__frame img, .ab__frame .placeholder-svg {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
  }
  .ab__quote {
    margin: 1.6rem 0 0;
    text-align: center;
    font-family: var(--font-heading-family);
    font-size: clamp(1.5rem, 2vw, 1.9rem);
    font-style: italic;
    color: rgb(var(--color-button));
  }

  /* ---------- features ---------- */
  .ab__features { display: grid; grid-template-columns: 1fr; gap: 1.6rem; }
  @media (min-width: 750px) { .ab__features { grid-template-columns: repeat(3, 1fr); } }
  .ab__feature {
    padding: clamp(2rem, 3vw, 2.8rem);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(var(--color-foreground), 0.06), rgba(var(--color-foreground), 0.02));
    border: 1px solid rgba(var(--color-foreground), 0.1);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .ab__feature:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--color-button), 0.5);
    box-shadow: 0 22px 44px -26px rgba(0, 0, 0, 0.7);
  }
  .ab__feature-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 13px;
    margin-bottom: 1.4rem;
    background: rgba(var(--color-button), 0.14);
    color: rgb(var(--color-button));
  }
  .ab__feature-icon svg { width: 26px; height: 26px; }
  .ab__feature-title { margin: 0 0 0.7rem; font-family: var(--font-heading-family); font-weight: 700; font-size: 1.6rem; color: rgb(var(--color-foreground)); }
  .ab__feature-text { margin: 0; font-size: 1.4rem; line-height: 1.65; color: rgba(var(--color-foreground), 0.72); }

  /* ---------- values ---------- */
  .ab__values { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2rem; }
  .ab__value { display: flex; gap: 1.4rem; align-items: flex-start; }
  .ab__value-num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-family: var(--font-heading-family); font-weight: 700; font-size: 1.6rem;
    color: rgb(var(--color-button-text));
    background: rgb(var(--color-button));
    box-shadow: 0 0 0 4px rgba(var(--color-button), 0.16);
  }
  .ab__value-title { margin: 0.3rem 0 0.5rem; font-family: var(--font-heading-family); font-weight: 700; font-size: 1.55rem; color: rgb(var(--color-foreground)); }
  .ab__value-text { margin: 0; font-size: 1.4rem; line-height: 1.65; color: rgba(var(--color-foreground), 0.75); }

  @media (max-width: 749px) {
    .ab { line-height: 1.4; }
    .ab__hero { min-height: 23rem; }
    .ab__hero-inner { gap: 0.85rem; padding-top: 2.2rem; padding-bottom: 2.2rem; }
    .ab__eyebrow { letter-spacing: 0.12em; font-size: 0.78rem; }
    .ab__hero-title { font-size: clamp(2rem, 8.5vw, 2.7rem); line-height: 1.05; }
    .ab__hero-sub { font-size: 1.1rem; line-height: 1.3; }
    .ab__hero-text { font-size: 0.95rem; line-height: 1.4; }
    .ab__hero-cta { flex-direction: column; width: 100%; max-width: 280px; }
    .ab__btn { width: 100%; font-size: 0.88rem; padding: 0.72rem 1.2rem; }
    .ab__h2 { font-size: 1.3rem; line-height: 1.2; margin-bottom: 1rem; }
    .ab__head-sub { font-size: 0.95rem; line-height: 1.4; }
    .ab__body { font-size: 1rem; line-height: 1.4; }
    .ab__body p { margin-bottom: 0.9rem; }
    .ab__feature-title { font-size: 1.2rem; }
    .ab__feature-text { font-size: 0.95rem; line-height: 1.4; }
    .ab__value-title { font-size: 1.15rem; }
    .ab__value-text { font-size: 0.95rem; line-height: 1.4; }
    .ab__mini-title { font-size: 1.05rem; }
    .ab__mini-text { font-size: 0.9rem; line-height: 1.35; }
    .ab__quote { font-size: 1.1rem; line-height: 1.35; }
  }
/* END_SECTION:about-prsso */

/* START_SECTION:bundle-builder (INDEX:3) */
.bb { position: relative; }

  .bb__row--breadcrumbs { padding: 0.4rem 0 1.4rem; }

  .bb__description {
    margin: 0 0 1.6rem;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2.4rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: rgb(var(--color-foreground));
  }

  /* ===== Main layout — left 76.5%, right 23.5% ===== */
  .bb__main {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }
  .bb__left {
    flex: 0 0 76.5%;
    max-width: 76.5%;
    min-width: 0;
  }
  .bb__cart {
    flex: 0 0 23.5%;
    max-width: 23.5%;
    min-width: 0;
  }
  @media (max-width: 989px) {
    .bb__main { flex-direction: column; }
    .bb__left { flex: 1 1 auto; max-width: 100%; padding-right: 0; width: 100%; }
    .bb__cart { flex: 1 1 auto; max-width: 100%; width: 100%; margin-top: 1.4rem; }
  }

  /* ===== Tabs =====
     Non-active tabs sit BEHIND the active one (lower z-index) and share the
     same visual baseline with it. The non-active tab's `margin-bottom` equals
     its shadow offset, so the shadow's bottom lands on the row's baseline;
     the active tab pads the same amount on its bottom to match. */
  .bb__tabs {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0;
  }
  .bb__tab {
    flex: 1 1 0;
    position: relative;
    z-index: 1;
    padding: 12px 16px;
    /* bottom margin = shadow offset (6px) so shadow ends at the row baseline */
    margin: 0 -3px 6px;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 0;
    box-shadow: 2px 6px 0 0 rgb(var(--color-foreground));
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 1.1rem;
    line-height: 1.1;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, padding 0.15s ease, margin 0.15s ease, background-color 0.15s ease;
    text-align: left;
    @media screen and (max-width: 999px) {
      text-align: center;
      font-size: 0.85rem;
      padding: 10px 7px;;
    }
  }
  .bb__tab.is-active {
    /* Sit on top, no shadow, smaller padding — but pad-bottom fills the
       6px shadow gap so the visual baseline matches non-active tabs. */
    z-index: 0;
    margin: 0;
    margin-right: -4px;
    padding: 10px 14px 14px;
    background-color: rgb(var(--color-button));
    border-color: rgb(var(--color-foreground));
    box-shadow: none;
    @media screen and (max-width: 999px) {
      padding: 10px 7px 12px;
    }
  }

  /* ===== Search ===== */
  .bb__search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 12px 14px;
    border: 1px solid rgb(var(--color-foreground));
    border-top: none;
    background: rgb(var(--color-background));
  }
  .bb__search-icon {
    width: 18px;
    height: 18px;
    color: rgb(var(--color-foreground));
    flex-shrink: 0;
  }
  .bb__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.95rem;
    color: rgb(var(--color-foreground));
    padding: 0;
  }
  .bb__search-input::placeholder {
    color: rgb(var(--color-foreground));
    opacity: 1;
  }

  /* ===== Panels + product grid ===== */
  .bb__panel { padding-top: 1rem; }
  .bb__panel.is-hidden { display: none; }
  .bb__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding-right: 1rem;
    
  }
  @media (max-width: 749px) {
    .bb__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      padding-right: 0;
      
    }
  }
  .bb__product { min-width: 0; position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease; }
  .bb__product--filtered { display: none; }
  .bb__product--added { transform: scale(0.97); }
  /* Selected — a persistent outline + a check overlay on the quick-add button. */
  .bb__product--in-bundle {
    box-shadow: 0 0 0 2px rgb(var(--color-button));
    border-radius: 12px;
  }
  .bb__product--in-bundle .card-product__qa {
    background-color: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
  }
  .bb__product--in-bundle .card-product__qa-icon svg {
    display: none;
  }
  .bb__product--in-bundle .card-product__qa-icon::after {
    content: '';
    width: 12px;
    height: 7px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translateY(-2px);
    display: block;
  }

  .bb__empty {
    padding: 2rem 1rem;
    text-align: center;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Loader overlay — sits over the left column's panel area; only visible
     when JS toggles .is-visible (after a 150ms delay so quick swaps don't
     flicker). Uses the same dashed-tick spinner as the quick-add buttons. */
  .bb__left {
    position: relative;
  }
  .bb__loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--color-background), 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 5;
  }
  .bb__loader.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .bb__loader-spinner {
    width: 36px;
    height: 36px;
    color: rgb(var(--color-foreground));
    animation: bb-loader-spin 1.1s linear infinite;
  }
  .bb__loader-spinner svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  @keyframes bb-loader-spin {
    to { transform: rotate(360deg); }
  }

  /* ===== Sticky bottom bar =====
     Both shortcuts (cart + showcase) live inside one fixed wrapper so they
     share a single row instead of stacking. Wrapper auto-hides when both
     children are [hidden] (via :has). */
  .bb-stickybar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: max-content;
    max-width: calc(100vw - 20px);
    pointer-events: none; /* re-enabled on the buttons */
  }
  .bb-stickybar:not(:has(> :not([hidden]))) { display: none; }

  .bb-sticky,
  .bs-sticky {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1rem;
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 999px;
    box-shadow: 3px 3px 0 0 rgb(var(--color-foreground));
    cursor: pointer;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.82rem;
    line-height: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
  }
  .bb-sticky[hidden],
  .bs-sticky[hidden] { display: none; }
  /* Cart shortcut is mobile-only — desktop has the cart in the side column. */
  @media (min-width: 990px) {
    .bb-sticky { display: none; }
  }
  .bb-sticky__count {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-button-text));
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 800;
    font-size: 0.78rem;
    min-width: 22px;
    text-align: center;
  }

  /* ===== Cart (right column) ===== */
  .bb__cart {
    background: rgb(var(--color-background));
    border: 1px solid rgb(var(--color-foreground));
    padding: 1rem 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    box-shadow: 7px 7px 0 rgb(var(--color-foreground));
    position: sticky;
    z-index:4;
    top: 80px;
    /* Spring-bump on add — the keyframes preserve the original transform-less
       state, so this composes with any existing transforms cleanly. */
    transform-origin: center top;
  }
  .bb__cart.is-bump {
    animation: bb-cart-bump 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes bb-cart-bump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.02); }
    100% { transform: scale(1); }
  }
  @media (max-width: 989px) {
    .bb__cart { position: static; }
  }
  .bb__cart-head {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--font-body-family);
  }
  .bb__cart-title {
    font-weight: 500;
    font-size: 0.95rem;
    color: rgb(var(--color-foreground));
  }
  .bb__cart-count {
    font-size: 0.95rem;
    color: rgb(var(--color-foreground));
  }
  .bb__cart-count [data-bb-count],
  .bb__cart-count [data-bb-slots] {
    font-weight: 800;
  }

  /* Progress bar with target dot at the end. The mid-point marker for d1 is a
     pseudo-element that only shows once d1 is reached. */
  .bb__progress {
    position: relative;
    padding: 16px 0;
  }
  .bb__progress-track {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(var(--color-foreground), 0.12);
    border-radius: 999px;
    overflow: visible;
  }
  .bb__progress-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0%;
    background: rgb(var(--color-button));
    border-radius: 999px;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Discount badges — circular, sit ON the track, centered on their left%
     so they "cap" the bar end with no gap and no inset overlap. */
  .bb__progress-badge {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 0.72rem;
    line-height: 1;
    transform: translate(-50%, -50%);
    transition:
      left 0.4s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.25s ease;
    z-index: 1;
    pointer-events: none;
    white-space: nowrap;
  }
  /* Right-most badge is shifted a bit INSIDE the bar (offset by ~half its
     own radius) so it doesn't hang off the edge. The mid position is exact
     50% since it's well inside the track. */
  .bb__progress-badge--d1 { left: calc(100% - 18px); }
  .bb--d1-reached .bb__progress-badge--d1 { left: 50%; }
  .bb__progress-badge--d2 { left: calc(100% - 18px); opacity: 0; }
  .bb--d1-reached .bb__progress-badge--d2 { opacity: 1; }

  /* Tier-unlock pulse: badge scales up + an expanding ring fades out.
     ::after needs its own rule to be position-anchored to the badge box. */
  .bb__progress-badge::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgb(var(--color-button));
    opacity: 0;
    pointer-events: none;
  }
  .bb__progress-badge.is-celebrating {
    animation: bb-badge-pulse 0.6s ease-out;
  }
  .bb__progress-badge.is-celebrating::after {
    animation: bb-badge-ring 0.6s ease-out;
  }
  @keyframes bb-badge-pulse {
    0%   { transform: translate(-50%, -50%) scale(1); }
    45%  { transform: translate(-50%, -50%) scale(1.22); }
    100% { transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes bb-badge-ring {
    0%   { transform: scale(0.7); opacity: 0.9; }
    100% { transform: scale(2);   opacity: 0;   }
  }

  /* ===== Slots ===== */
  .bb__slots {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }
  .bb__slot {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    position: relative;
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Slot slide-in: the slot that just received the new product enters from
     translateX(8px) + opacity 0. JS removes .is-entering on the next frame so
     the slot animates to its identity state. */
  .bb__slot.is-entering {
    opacity: 0;
    transform: translateX(8px);
  }
  .bb__slot-thumb {
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px dashed rgba(var(--color-foreground));
    border-radius: 8px;
    color: rgb(var(--color-foreground));
    overflow: hidden;
    background: rgb(var(--color-background));
  }
  .bb__slot-thumb svg { width: 55px; height: 55px; opacity: 0.7; display: block; }
  .bb__slot-thumb--img {
    border: 1px solid rgb(var(--color-foreground));
    border-style: solid;
  }
  .bb__slot-thumb--img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .bb__slot-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    color: rgb(var(--color-foreground));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bb__slot--filled .bb__slot-text { font-weight: 500; }
  .bb__slot-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bb__slot-remove {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-foreground));
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    cursor: pointer;
    line-height: 1;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .bb__slot-remove:hover {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  /* ===== CTA ===== */
  .bb__cta {
    position: relative;
    width: 100%;
    margin-top: 0.4rem;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .bb__cta:disabled { opacity: 0.5; cursor: not-allowed; }
  .bb__cta-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4em;
    height: 1.4em;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    animation: bb-spin 1.1s linear infinite;
  }
  .bb__cta-spinner svg { width: 100%; height: 100%; display: block; }
  .bb__cta.is-loading .bb__cta-label { visibility: hidden; }
  .bb__cta.is-loading .bb__cta-spinner { opacity: 1; }
  @keyframes bb-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* ===== Clear bundle (underlined text link beneath the CTA) ===== */
  .bb__clear {
    appearance: none;
    background: none;
    border: 0;
    margin: 0.6rem auto 0;
    padding: 0.2rem 0.4rem;
    display: block;
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.75);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.15s ease;
  }
  .bb__clear:hover { color: rgb(var(--color-foreground)); }
  .bb__clear[hidden] { display: none; }

  /* ============ SHOWCASE ============
     Stage with main pack image centered; accessory/patch overlays absolute
     and draggable via translate. Toolbar appears when an overlay is selected. */
  .bs {
    --bs-main-w: 38vw;
    --bs-canvas-ar: 16 / 9;
    margin-top: 8rem;
  }
  @media (max-width: 749px) {
    .bs { --bs-main-w: 70vw; --bs-canvas-ar: 4 / 3; }
  }
  .bs__head {
    text-align: center;
    margin: 0 auto 1.4rem;
    max-width: 720px;
  }
  .bs__eyebrow {
    margin: 0 0 0.4rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: rgba(var(--color-foreground), 0.7);
  }
  .bs__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    font-size: clamp(1.6rem, 1.8vw + 1rem, 2.6rem);
    line-height: 1.1;
    color: rgb(var(--color-foreground));
  }
  .bs__stage {
    position: relative;
    width: 100%;
    aspect-ratio: var(--bs-canvas-ar);
    background: transparent;
    border-radius: 0;
    overflow: visible;
    touch-action: none;
  }
  .bs__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--color-foreground), 0.6);
    font-style: italic;
    padding: 2rem;
    text-align: center;
  }
  /* Hide the empty placeholder as soon as a pack is picked. */
  .bs[data-bs-empty="false"] .bs__empty { display: none; }
  .bs__main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--bs-main-w);
    max-width: 90%;
    z-index: 1;
    pointer-events: none;
  }
  .bs__main-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
  }
  .bs__main[hidden] { display: none; }

  .bs__overlays {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  .bs-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110px;
    cursor: grab;
    pointer-events: auto;
    transition: opacity 0.22s ease, filter 0.18s ease;
    will-change: transform;
  }
  .bs-item.is-entering { opacity: 0; }
  .bs-item.is-leaving  { opacity: 0; pointer-events: none; }
  .bs-item.is-dragging {
    cursor: grabbing;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
  }
  .bs-item.is-selected {
    outline: 2px dashed rgb(var(--color-button));
    outline-offset: 4px;
  }
  .bs-item__img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
  }
  @media (max-width: 749px) {
    .bs-item { width: 80px; }
  }

  /* ===== Floating edit panel =====
     Pinned to the bottom of the viewport while an overlay is selected.
     Clicking outside the panel/overlays hides it (handled in JS). */
  .bs__toolbar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    width: min(640px, calc(100vw - 24px));
    background: rgb(var(--color-background));
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 14px;
    box-shadow: 4px 4px 0 0 rgb(var(--color-foreground)), 0 10px 28px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  .bs__toolbar:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }
  .bs__toolbar[hidden] {
    /* keep display flex so the slide-in/out has something to animate */
    display: flex;
    transform: translate(-50%, 14px);
  }

  .bs__toolbar-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.12);
    background: rgba(var(--color-foreground), 0.03);
  }
  .bs__toolbar-eyebrow {
    font-family: var(--font-body-family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    color: rgba(var(--color-foreground), 0.6);
  }
  .bs__toolbar-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: 0.92rem;
    color: rgb(var(--color-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bs__toolbar-close {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.2);
    background: rgb(var(--color-background));
    border-radius: 999px;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }
  .bs__toolbar-close:hover {
    background: rgba(var(--color-foreground), 0.06);
    border-color: rgb(var(--color-foreground));
  }
  .bs__toolbar-close svg { width: 12px; height: 12px; }

  .bs__toolbar-body {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 10px 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bs__tool-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
    flex: 0 0 auto;
  }
  .bs__tool-group-label {
    font-family: var(--font-body-family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6rem;
    color: rgba(var(--color-foreground), 0.55);
  }
  .bs__tool-group-buttons {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .bs__tool-sep {
    width: 1px;
    align-self: stretch;
    background: rgba(var(--color-foreground), 0.12);
    margin: 4px 0;
    flex: 0 0 auto;
  }

  /* Each tool button — icon stacked above a small label */
  .bs__tool {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 54px;
    min-height: 50px;
    padding: 6px 4px;
    border: 1px solid transparent;
    background: transparent;
    color: rgb(var(--color-foreground));
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
  }
  .bs__tool:hover {
    background: rgba(var(--color-foreground), 0.06);
    border-color: rgba(var(--color-foreground), 0.18);
  }
  .bs__tool:active { transform: scale(0.96); }
  .bs__tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: rgb(var(--color-foreground));
  }
  .bs__tool-icon--text {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1;
  }
  .bs__tool-label {
    font-family: var(--font-body-family);
    font-size: 0.65rem;
    letter-spacing: 0.02em;
    color: rgba(var(--color-foreground), 0.85);
    line-height: 1.1;
  }
  /* Defensive SVG styling — every shape inside a tool icon strokes with
     currentColor and has no fill, except the explicit ".bs__layer-front"
     rect which is filled to denote "front" in the layer icon. */
  .bs__tool-icon svg,
  .bs__toolbar-close svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
  }
  .bs__tool-icon svg path,
  .bs__tool-icon svg line,
  .bs__tool-icon svg polyline,
  .bs__tool-icon svg polygon,
  .bs__tool-icon svg circle,
  .bs__tool-icon svg rect {
    fill: none;
    stroke: currentColor;
  }
  .bs__tool-icon svg .bs__layer-front {
    fill: currentColor;
    stroke: currentColor;
  }
  .bs__tool-icon svg .bs__layer-back {
    fill: none;
    stroke: currentColor;
  }

  @media (max-width: 749px) {
    .bs__toolbar { bottom: 12px; border-radius: 12px; }
    .bs__tool { width: 50px; min-height: 46px; }
    .bs__tool-label { font-size: 0.6rem; }
  }

  /* Showcase sticky scroll-to button — visuals only; positioning is handled
     by the shared .bb-stickybar wrapper above. */
  .bs-sticky:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 rgb(var(--color-foreground));
  }
  .bs-sticky__icon { width: 14px; height: 14px; }
  .bs-sticky__icon polyline { fill: none; }
/* END_SECTION:bundle-builder */

/* START_SECTION:cart (INDEX:6) */
.cp { position: relative; }
  .cp__breadcrumbs { margin: 0 0 1rem; }

  .cp__head {
    text-align: center;
    margin: 0 auto 2rem;
    max-width: 720px;
  }
  .cp__title { margin: 0; }
  .cp__meta {
    margin: 0.8rem 0 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: 0.9rem;
  }
  .cp__continue {
    color: rgb(var(--color-foreground));
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
  }
  .cp__continue:hover { color: rgb(var(--color-button)); }

  /* ===== Empty state ===== */
  .cp__empty {
    text-align: center;
    padding: 4rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .cp__empty-icon {
    width: 64px;
    height: 64px;
    color: rgba(var(--color-foreground), 0.3);
    margin-bottom: 0.3rem;
  }
  .cp__empty-title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    font-size: clamp(1.4rem, 1vw + 1rem, 2rem);
    color: rgb(var(--color-foreground));
  }
  .cp__empty-text {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: 0.95rem;
  }
  .cp__empty-cta {
    margin-top: 0.8rem;
    padding: 0.85em 1.6em;
    letter-spacing: 0.08em;
  }

  /* ===== Layout: items left, summary right (desktop) ===== */
  .cp__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  @media (min-width: 990px) {
    .cp__layout {
      grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
      gap: 2rem;
    }
  }

  /* ===== Line items ===== */
  .cp__items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .cp-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    background: rgb(var(--color-background));
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 12px;
    box-shadow: 3px 3px 0 0 rgb(var(--color-foreground));
    transition: opacity 0.18s ease, transform 0.24s ease, max-height 0.24s ease;
    overflow: hidden;
  }
  @media (min-width: 750px) {
    .cp-item { grid-template-columns: 120px minmax(0, 1fr); gap: 1.2rem; padding: 1.2rem; }
  }
  .cp-item.is-updating { opacity: 0.7; }
  .cp-item.is-leaving {
    opacity: 0;
    transform: translateX(-12px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    border-width: 0;
  }

  .cp-item__media {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(var(--color-foreground), 0.04);
  }
  .cp-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .cp-item__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--color-foreground), 0.3);
  }

  .cp-item__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
    min-width: 0;
  }
  @media (min-width: 750px) {
    .cp-item__body {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: start;
      gap: 1.2rem;
    }
  }

  .cp-item__main { min-width: 0; }
  .cp-item__title {
    display: block;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 1rem;
    line-height: 1.2;
    color: rgb(var(--color-foreground));
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .cp-item__title:hover { text-decoration: underline; text-underline-offset: 2px; }
  .cp-item__variant {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: rgba(var(--color-foreground), 0.7);
  }
  .cp-item__props {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: rgba(var(--color-foreground), 0.7);
  }
  .cp-item__props li { margin-bottom: 0.15rem; }
  .cp-item__prop-key { font-weight: 500; margin-right: 0.3rem; }

  .cp-item__price-row--mobile { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
  .cp-item__price-row--desktop { display: none; }
  @media (min-width: 750px) {
    .cp-item__price-row--mobile { display: none; }
    .cp-item__price-row--desktop { display: flex; gap: 0.5rem; justify-content: flex-end; }
  }
  .cp-item__price {
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 0.95rem;
    color: rgb(var(--color-foreground));
  }
  .cp-item__compare {
    font-size: 0.85rem;
    color: rgba(var(--color-foreground), 0.5);
    text-decoration: line-through;
  }

  .cp-item__controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
  }
  .cp-item__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 999px;
    background: rgb(var(--color-background));
    overflow: hidden;
  }
  .cp-item__qty-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: background-color 0.12s ease;
  }
  .cp-item__qty-btn:hover { background: rgba(var(--color-foreground), 0.08); }
  .cp-item__qty-btn svg { width: 14px; height: 14px; }
  .cp-item__qty-input {
    width: 36px;
    text-align: center;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: 0.92rem;
    color: rgb(var(--color-foreground));
    -moz-appearance: textfield;
  }
  .cp-item__qty-input::-webkit-outer-spin-button,
  .cp-item__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .cp-item__remove {
    background: none;
    border: none;
    color: rgba(var(--color-foreground), 0.7);
    font-family: var(--font-body-family);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.3rem 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.15s ease;
  }
  .cp-item__remove:hover { color: rgb(var(--color-foreground)); }

  .cp-item__totals { display: none; }
  @media (min-width: 750px) {
    .cp-item__totals {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 0.4rem;
      min-width: 90px;
    }
  }
  .cp-item__line-total {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 1.05rem;
    color: rgb(var(--color-foreground));
  }

  /* ===== Summary ===== */
  .cp__summary { position: relative; }
  @media (min-width: 990px) {
    .cp__summary { position: sticky; top: calc(var(--header-height, 0px) + 1rem); }
  }
  .cp__summary-card {
    background: rgb(var(--color-background));
    border-radius: 12px;
    padding: 1.4rem 1.4rem 1.6rem;
  }
  .cp__summary-title {
    margin: 0 0 1rem;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    font-size: 1.1rem;
    letter-spacing: 0.06em;
    color: rgb(var(--color-foreground));
  }
  .cp__summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    font-size: 0.95rem;
    color: rgba(var(--color-foreground), 0.8);
  }
  .cp__summary-row--discount { color: #15803d; }
  .cp__summary-row--total {
    margin-top: 0.6rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(var(--color-foreground), 0.15);
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
    color: rgb(var(--color-foreground));
    font-size: 1.1rem;
  }
  .cp__summary-note {
    margin: 0.8rem 0 1.2rem;
    color: rgba(var(--color-foreground), 0.6);
    font-size: 0.8rem;
  }

  .cp__note { display: block; margin: 0 0 1rem; }
  .cp__note-label {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.8);
  }
  .cp__note-input {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 8px;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 70px;
    transition: box-shadow 0.15s ease;
  }
  .cp__note-input:focus {
    outline: none;
    box-shadow: 3px 3px 0 0 rgb(var(--color-foreground));
  }

  .cp__checkout {
    position: relative;
    width: 100%;
    padding: 1em 1.4em;
    font-size: 1rem;
    letter-spacing: 0.06em;
  }
  .cp__checkout-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4em;
    height: 1.4em;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    animation: cp-spin 1.1s linear infinite;
  }
  .cp__checkout-spinner svg { width: 100%; height: 100%; display: block; }
  .cp__checkout.is-loading .cp__checkout-label { visibility: hidden; }
  .cp__checkout.is-loading .cp__checkout-spinner { opacity: 1; }
  @keyframes cp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

  .cp__extra-checkout {
    margin-top: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
/* END_SECTION:cart */

/* START_SECTION:collection-banner (INDEX:7) */
.cb { position: relative; }
  .cb__main { width: 100%; }
  .cb__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
  .cb__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .cb__subtitle {
    margin: 0;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    color: rgba(var(--color-foreground), 0.72);
  }

  /* Tabs — horizontal scroll row of shadow-button pills */
  .cb__tabs {
    margin-top: 1.4rem;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.7rem;
    padding: 8px 4px 12px;
    overflow-x: auto;
    scrollbar-width: none;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .cb__tabs::-webkit-scrollbar { display: none; }
  @media (min-width: 750px) {
    /* Centre the row when the tabs fit; it still scrolls if they overflow. */
    .cb__tabs { justify-content: center; }
  }
  .cb__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding: 0.6rem 1.35rem;
    border-radius: 6px;
    background: #fff;
    color: #2a1e18; /* fixed dark — the pill is always white, so don't follow the scheme foreground (which is cream on the dark scheme → invisible) */
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 2px 3px 0 0 color-mix(in srgb, rgb(var(--color-button)) 55%, #000);
    font-family: var(--font-body-family);
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.2s ease, color 0.2s ease;
  }
  .cb__tab:hover {
    transform: translate(1px, 2px);
    box-shadow: 0 1px 0 0 color-mix(in srgb, rgb(var(--color-button)) 55%, #000);
  }
  .cb__tab.is-active {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    border-color: transparent;
    transform: translate(1px, 2px);
    box-shadow: none;
  }

  /* Promo strip — full width, deeper tone, centred text only */
  .cb__promo {
    width: 100%;
    padding: 0.8rem 0;
    text-align: center;
  }
  .cb__promo-text {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(0.95rem, 1.6vw, 1.4rem);
    letter-spacing: 0.02em;
    color: rgb(var(--color-foreground));
  }
/* END_SECTION:collection-banner */

/* START_SECTION:collection-grid (INDEX:9) */
.cg { position: relative; }
  .cg__row { padding-top: 1rem; padding-bottom: 1rem; }
  .cg__row--intro { display: none; }
  .cg__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.6rem, 0.6rem + 2vw, 2.6rem);
    line-height: 1.08;
    color: rgb(var(--color-foreground));
  }
  .cg__desc {
    margin: 0.6rem 0 0;
    max-width: 62ch;
    font-size: 0.98rem;
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.72);
  }
  .cg__desc p { margin: 0; }

  /* ============ TOOLBAR ============ */
  .cg__toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.6rem;
  }
  .cg__count {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.95rem;
    color: rgba(var(--color-foreground), 0.7);
  }
  .cg__count strong { color: rgb(var(--color-foreground)); font-weight: 700; }
  .cg__filter-trigger {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }
  .cg__filter-trigger svg { width: 22px; height: 22px; display: block; }

  /* Column toggle — mobile only */
  .cg__cols-toggle { display: none; gap: 0.4rem; flex: 0 0 auto; }
  .cg__cols-btn {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.25);
    border-radius: 60px;
    background: transparent;
    color: rgba(var(--color-foreground), 0.5);
    cursor: pointer;
  }
  .cg__cols-btn svg { width: 22px; height: 22px; display: block; }
  .cg__cols-btn[aria-pressed="true"] {
    color: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
  }

  /* ============ PRODUCTS GRID ============ */
  .cg__grid {
    display: grid;
    grid-template-columns: repeat(var(--cg-cols-m, 2), minmax(0, 1fr));
    gap: 16px;
  }
  @media (min-width: 990px) {
    .cg__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  }
  .cg__item { min-width: 0; }

  .cg__empty { text-align: center; padding: 4rem 0; color: rgb(var(--color-foreground)); }

  /* ============ LOAD MORE ============ */
  .cg__loadmore-wrap { display: flex; justify-content: center; margin-top: 3rem; }
  .cg__loadmore {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1.6rem;
    background: transparent;
    color: rgb(var(--color-foreground));
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 4px;
    font-family: var(--font-heading-family);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .cg__loadmore:hover { background: rgb(var(--color-foreground)); color: rgb(var(--color-background)); }
  .cg__loadmore.is-loading { opacity: 0.5; pointer-events: none; }
  .cg__loadmore-plus { font-size: 1.1em; line-height: 1; }

  /* ============ DRAWER ============ */
  .cg__drawer-overlay {
    position: fixed; inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998; opacity: 0;
    transition: opacity 0.26s ease;
  }
  .cg__drawer-overlay.is-open { opacity: 1; }
  .cg__drawer-overlay[hidden] { display: none; }
  .cg__drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(460px, 94vw);
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    z-index: 9999;
    display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .cg__drawer.is-open { transform: translateX(0); }
  .cg__drawer[hidden] { display: none; }
  .cg__drawer-head {
    flex: 0 0 auto;
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem;
    padding: 1.6rem 1.6rem 1.2rem;
  }
  .cg__drawer-head h3 {
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .cg__drawer-count { margin: 0.25rem 0 0; font-size: 0.85rem; color: rgba(var(--color-foreground), 0.6); }
  .cg__drawer-count strong { color: rgb(var(--color-foreground)); }
  .cg__drawer-close {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    border: 1px solid rgba(var(--color-foreground), 0.3);
    border-radius: 50%;
    background: transparent;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: background-color 0.15s ease;
  }
  .cg__drawer-close:hover { background: rgba(var(--color-foreground), 0.06); }
  .cg__drawer-close svg { width: 18px; height: 18px; }
  .cg__drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 0 1.6rem 1.4rem; }
  .cg__drawer-foot {
    flex: 0 0 auto;
    padding: 1rem 1.6rem 1.4rem;
    box-shadow: 0 -8px 16px -8px rgba(0, 0, 0, 0.12);
  }
  .cg__view-results {
    width: 100%;
    padding: 1rem;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    border: none;
    font-family: var(--font-heading-family);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.95rem;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }
  .cg__view-results:hover { opacity: 0.88; }

  /* Accordions */
  .cg__acc { border-top: 1px solid rgba(var(--color-foreground), 0.15); }
  .cg__acc:last-child { border-bottom: 1px solid rgba(var(--color-foreground), 0.15); }
  .cg__acc-summary {
    list-style: none;
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    cursor: pointer;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(var(--color-foreground));
  }
  .cg__acc-summary::-webkit-details-marker { display: none; }
  /* +/− icon */
  .cg__acc-icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
  .cg__acc-icon::before, .cg__acc-icon::after {
    content: ""; position: absolute; background: rgb(var(--color-foreground));
    transition: opacity 0.2s ease;
  }
  .cg__acc-icon::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
  .cg__acc-icon::after { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
  .cg__acc[open] .cg__acc-icon::after { opacity: 0; }
  .cg__acc-body { padding: 0 0 1.3rem; }

  /* Sort options */
  .cg__sort { display: flex; flex-direction: column; gap: 0.2rem; }
  .cg__sort-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: rgba(var(--color-foreground), 0.7);
  }
  .cg__sort-row:has(input:checked) { color: rgb(var(--color-foreground)); font-weight: 500; }
  .cg__sort-row input { accent-color: rgb(var(--color-foreground)); }

  /* Chip filters (availability, skin type, etc.) */
  .cg__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
  .cg__chip-filter {
    display: inline-flex; align-items: center;
    padding: 0.55rem 0.9rem;
    border: 1px solid rgba(var(--color-foreground), 0.3);
    border-radius: 4px;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .cg__chip-filter:hover { border-color: rgb(var(--color-foreground)); }
  .cg__chip-filter.is-active {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    border-color: rgb(var(--color-foreground));
  }

  /* Price filter */
  .cg__price { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
  .cg__price-field { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
  .cg__price-input {
    display: inline-flex; align-items: stretch;
    border: 1px solid rgba(var(--color-foreground), 0.3);
  }
  .cg__price-currency {
    display: inline-flex; align-items: center; padding: 0 0.5rem;
    font-size: 0.9rem; color: rgba(var(--color-foreground), 0.7);
    border-right: 1px solid rgba(var(--color-foreground), 0.18);
    background: rgba(var(--color-foreground), 0.04);
  }
  .cg__price-input input {
    padding: 0.45rem 0.6rem; border: none; outline: none; background: transparent;
    color: rgb(var(--color-foreground)); width: 90px; font-size: 0.95rem;
    -moz-appearance: textfield;
  }
  .cg__price-input input::-webkit-outer-spin-button,
  .cg__price-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  /* ============ MOBILE ============ */
  @media (max-width: 749px) {
    .cg__description { font-size: 1rem; }
    .cg__cols-toggle { display: inline-flex; }
    .cg__count { flex: 1 1 auto; text-align: center; }
  }
/* END_SECTION:collection-grid */

/* START_SECTION:collection-list-fancy (INDEX:10) */
.clf {
    position: relative;
  }

  /* Section header (title left + secondary button right) */
  .clf__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }
  .clf__header .section-title {
    margin: 0;
    text-align: start;
    flex: 1 1 auto;
  }
  .clf__header-button {
    flex: 0 0 auto;
  }
  .clf__header-spacer {
    flex: 1 1 auto;
  }

  /* Cards row: column on mobile, row no-wrap on desktop. */
  .clf__cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    transform-origin: 50% 50%;
    will-change: transform;
  }
  @media (min-width: 990px) {
    .clf__cards {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
    }
  }

  /* ===== CARD ===== */
  .clf-card {
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border: 1px solid rgb(var(--color-foreground));
    box-shadow: 4px 4px 0 0 #000;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    @media (min-width: 1000px) {
      flex: 1 1 0;

    }
  }

  /* Row 1: header (number + title + button), padded */
  .clf-card__row1 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2.5rem;
    padding: 1.1rem 1.3rem 4rem;
  }

  .clf-card__title-group {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    min-width: 0;
  }

  .clf-card__num,
  .clf-card__title {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    color: rgb(var(--color-foreground));
    margin: 0;
    letter-spacing: 0;
    line-height: 1;
  }
  .clf-card__num {
    flex: 0 0 auto;
    font-size: clamp(2.75rem, 1.9348rem + 1.3043vw, 3.5rem);
  }

  .clf-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55em 1.1em;
    background-color: rgb(var(--color-button));
    font-family: var(--font-heading-family);
    color: rgb(var(--color-button-text));
    border: 1px solid rgb(var(--color-foreground));
    box-shadow: 3px 3px 0 0 rgb(var(--color-foreground));
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-decoration: none;
    line-height: 1;
    flex: 0 0 auto;
    transition: transform 0.15s ease
    , box-shadow 0.15s ease;
  }
  .clf-card__btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 0 rgb(var(--color-foreground));
  }
  .clf-card__btn:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 0 rgb(var(--color-foreground));
  }

  /* Row 2: image, no padding, full width, section aspect-ratio */
  .clf-card__row2 {
    width: 100%;
    aspect-ratio: var(--clf-image-ar, 4 / 5);
    overflow: hidden;
  }
  .clf-card__row2 img,
  .clf-card__row2 svg.placeholder-svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
/* END_SECTION:collection-list-fancy */

/* START_SECTION:comparison-table (INDEX:12) */
.scmp__inner {
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}
.scmp__intro {
  flex: 0 1 38%;
  min-width: 0;
}
.scmp__heading {
  margin: 0;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.12;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
}
.scmp__subheading {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--color-foreground), 0.75);
}
.scmp__table {
  flex: 1 1 62%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(70px, 1fr));
}
.scmp__row {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  align-items: stretch;
}
.scmp__label {
  display: flex;
  align-items: center;
  padding: 16px 16px 16px 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  color: rgb(var(--color-foreground));
  border-bottom: 1px solid rgba(var(--color-foreground), 0.14);
}
.scmp__label--head {
  border-bottom: 0;
}
.scmp__row--last .scmp__label {
  border-bottom: 0;
}
.scmp__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(var(--color-foreground), 0.14);
}
.scmp__row--last .scmp__cell {
  border-bottom: 0;
}
.scmp__cell--us {
  background: rgba(var(--color-button), 0.12);
  border-bottom-color: transparent;
}
.scmp__cell--us-last {
  border-radius: 0 0 14px 14px;
  padding-bottom: 22px;
}
.scmp__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 10px 14px;
  text-align: center;
}
.scmp__head.scmp__cell--us {
  border-radius: 14px 14px 0 0;
  padding-top: 26px;
}
.scmp__head-media {
  display: block;
  width: clamp(52px, 6vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.scmp__head-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scmp__head-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--color-foreground));
}
.scmp__ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.scmp__ic svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scmp__ic--yes {
  background: rgb(var(--color-button));
}
.scmp__ic--yes svg {
  stroke: rgb(var(--color-button-text, var(--color-background)));
}
.scmp__ic--no {
  background: #ec6a5f;
}
.scmp__ic--no svg {
  stroke: #ffffff;
}
.scmp__ic--mid {
  background: rgba(var(--color-foreground), 0.16);
}
.scmp__ic--mid svg {
  stroke: rgb(var(--color-foreground));
}
.scmp__celltext {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  color: rgb(var(--color-foreground));
}
@media (max-width: 989px) {
  .scmp__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .scmp__intro {
    flex-basis: auto;
    text-align: center;
  }
  .scmp__table {
    flex-basis: auto;
  }
}
@media (max-width: 749px) {
  .scmp__table {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(56px, 1fr));
  }
  .scmp__label {
    font-size: 13px;
    padding: 12px 10px 12px 0;
  }
  .scmp__cell {
    padding: 10px 6px;
  }
  .scmp__head {
    padding: 14px 6px 10px;
  }
  .scmp__head-label {
    font-size: 11px;
    letter-spacing: 0.04em;
  }
  .scmp__ic {
    width: 24px;
    height: 24px;
  }
  .scmp__ic svg {
    width: 13px;
    height: 13px;
  }
}
/* END_SECTION:comparison-table */

/* START_SECTION:contact (INDEX:13) */
.ct { position: relative; overflow: hidden; }
  .ct::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(120% 85% at 100% 0%, rgba(var(--color-button), 0.06), transparent 58%),
      radial-gradient(100% 70% at 0% 100%, rgba(var(--color-foreground), 0.04), transparent 55%);
  }
  .ct__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .ct > .page-width { position: relative; z-index: 1; }

  .ct__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: stretch;
  }
  @media (min-width: 990px) {
    .ct__grid { grid-template-columns: 1fr 1.05fr; }
  }

  /* Store note + badges: in the aside on desktop, moved below the form on MOBILE only. */
  .ct__below { display: none; margin-top: clamp(2rem, 5vw, 3.5rem); flex-direction: column; gap: 1.2rem; }
  .ct__below .ct__store { margin: 0; }
  @media (max-width: 989px) {
    .ct__below { display: flex; }
    .ct__aside > .ct__store,
    .ct__aside > .ct__badges { display: none; }
  }

  /* ===== LEFT aside ===== */
  .ct__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding: clamp(1.4rem, 3vw, 2.4rem) 0;
  }
  @media (min-width: 990px) {
    .ct__aside { padding-right: clamp(1rem, 3vw, 2.4rem); }
  }
  .ct__eyebrow {
    margin: 0;
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(var(--color-button));
  }
  .ct__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.08;
    color: rgb(var(--color-foreground));
  }
  .ct__intro {
    margin: 0;
    max-width: 46ch;
    font-size: 1.02rem;
    line-height: 1.6;
    color: rgba(var(--color-foreground), 0.78);
  }
  .ct__intro p { margin: 0; }

  .ct__store {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.2rem;
    border-inline-start: 3px solid rgb(var(--color-button));
    background: rgba(var(--color-foreground), 0.03);
    border-radius: 0 10px 10px 0;
  }
  .ct__store-name {
    font-family: var(--font-heading-family);
    font-size: 1.15rem;
    color: rgb(var(--color-foreground));
  }
  .ct__store-owner {
    font-size: 0.9rem;
    color: rgb(var(--color-button));
    font-weight: 500;
  }
  .ct__store-note {
    margin: 0.4rem 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Badges / notes list */
  .ct__badges {
    list-style: none;
    margin: 0.2rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
  }
  .ct__badge {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.98rem;
    line-height: 1.35;
    color: rgb(var(--color-foreground));
  }
  .ct__badge-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--color-button), 0.1);
    color: rgb(var(--color-button));
    transition: transform 0.15s ease, background 0.2s ease;
  }
  .ct__badge:hover .ct__badge-icon { transform: scale(1.08); background: rgba(var(--color-button), 0.18); }
  .ct__badge-icon svg { width: 19px; height: 19px; }

  .ct__addr {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.45;
    color: rgba(var(--color-foreground), 0.85);
  }
  .ct__addr-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(var(--color-foreground), 0.2);
    color: rgb(var(--color-button));
  }
  .ct__addr-icon svg { width: 18px; height: 18px; }
  .ct__addr-text p { margin: 0; }

  /* Direct contact buttons */
  .ct__direct {
    margin-top: 0.4rem;
    padding-top: 1.2rem;
    width: 100%;
    border-top: 1px solid rgba(var(--color-foreground), 0.14);
  }
  .ct__direct-label {
    display: block;
    margin-bottom: 0.7rem;
    font-size: 0.88rem;
    color: rgba(var(--color-foreground), 0.6);
  }
  .ct__direct-btns { display: flex; flex-wrap: wrap; gap: 0.85rem; }
  .ct__wa, .ct__mail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.72rem 1.2rem;
    border-radius: 6px;
    font-family: var(--font-heading-family);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.2s ease, color 0.2s ease;
  }
  .ct__wa svg, .ct__mail svg { width: 18px; height: 18px; }
  /* WhatsApp — brand green with the brand hard-shadow button shape */
  .ct__wa {
    background: #25d366;
    color: #fff;
    border: 1.5px solid #25d366;
    box-shadow: 3px 3px 0 1px #1a9b4c;
  }
  .ct__wa:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 1px #1a9b4c; }
  .ct__wa:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 1px #1a9b4c; }
  /* Email / Call — outline hard-shadow, matches the site .primary--button */
  .ct__mail {
    background: rgb(var(--color-background));
    color: rgb(var(--color-button));
    border: 1.5px solid rgb(var(--color-button));
    box-shadow: 3px 3px 0 1px rgb(var(--color-button));
  }
  .ct__mail:hover { transform: translate(-1px, -1px); background: rgba(var(--color-button), 0.06); box-shadow: 5px 5px 0 1px rgb(var(--color-button)); }
  .ct__mail:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 1px rgb(var(--color-button)); }
  /* Mobile: tighter WhatsApp / Email / Call CTAs so the three fit comfortably. */
  @media (max-width: 749px) {
    .ct__wa, .ct__mail {
      padding-inline: 0.8rem;
      font-size: 0.75rem;
    }
  }

  /* Socials */
  .ct__social {
    margin-top: 0.2rem;
    padding-top: 1.1rem;
    width: 100%;
    border-top: 1px solid rgba(var(--color-foreground), 0.14);
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
  }
  .ct__social-label { font-size: 0.88rem; color: rgba(var(--color-foreground), 0.6); }
  .ct__social .svg_social {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    border-radius: 9px;
    transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .ct__social .svg_social:hover {
    transform: translateY(-2px);
    border-color: rgb(var(--color-button));
    background: rgba(var(--color-button), 0.08);
    opacity: 1;
  }

  /* ===== RIGHT form card ===== */
  .ct__form-wrap { width: 100%; }
  .ct__form {
    position: relative;
    background: linear-gradient(180deg, rgb(var(--color-background)), rgba(var(--color-foreground), 0.025));
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-radius: 16px;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    box-shadow: 0 22px 48px -28px rgba(var(--color-foreground), 0.55);
    overflow: hidden;
  }
  .ct__form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, rgb(var(--color-button)), color-mix(in srgb, rgb(var(--color-button)) 45%, #000));
  }
  .ct__form-title {
    margin: 0 0 1.4rem;
    font-family: var(--font-heading-family);
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    color: rgb(var(--color-foreground));
  }
  .ct__field-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  @media (min-width: 620px) {
    .ct__field-row { grid-template-columns: 1fr 1fr; gap: 1rem; }
  }
  .ct__field { display: block; margin-bottom: 1rem; }
  .ct__field-label {
    display: block;
    margin-bottom: 0.45rem;
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: 0.86rem;
    color: rgba(var(--color-foreground), 0.85);
  }
  .ct__field-label em { color: #d21f28; font-style: normal; }
  .ct__input {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(var(--color-foreground), 0.16);
    border-radius: 10px;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    font-size: 0.98rem;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .ct__input::placeholder { color: rgba(var(--color-foreground), 0.4); }
  .ct__input:focus {
    outline: none;
    border-color: rgb(var(--color-button));
    box-shadow: 0 0 0 3px rgba(var(--color-button), 0.12);
  }
  .ct__textarea { min-height: 150px; resize: vertical; }

  .ct__submit {
    position: relative;
    margin-top: 0.8rem;
    width: 100%;
    min-height: 54px;
    padding: 1rem 1.6rem;
    border: 1.5px solid rgb(var(--color-button));
    cursor: pointer;
    border-radius: 6px;
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 1px color-mix(in srgb, rgb(var(--color-button)) 52%, #000);
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.2s ease;
  }
  .ct__submit:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 1px color-mix(in srgb, rgb(var(--color-button)) 52%, #000); }
  .ct__submit:active { transform: translate(1px, 1px); box-shadow: 2px 2px 0 1px color-mix(in srgb, rgb(var(--color-button)) 52%, #000); }
  .ct__submit:disabled { cursor: not-allowed; opacity: 0.85; }
  .ct__submit-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4em;
    height: 1.4em;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    animation: ct-spin 1.1s linear infinite;
  }
  .ct__submit-spinner svg { width: 100%; height: 100%; display: block; }
  .ct__submit.is-loading .ct__submit-label { visibility: hidden; }
  .ct__submit.is-loading .ct__submit-spinner { opacity: 1; }
  @keyframes ct-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

  /* ===== Status ===== */
  .ct__status {
    padding: 1rem 1.2rem;
    border-radius: 10px;
    margin-bottom: 1.2rem;
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .ct__status p { margin: 0; }
  .ct__status--success {
    background: rgba(34, 197, 94, 0.12);
    color: #166534;
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }
  .ct__status--success svg { width: 22px; height: 22px; flex: 0 0 auto; color: #15803d; }
  .ct__status--error { background: rgba(220, 53, 69, 0.1); color: #991b1b; }
  .ct__status--error ul { margin: 0.5rem 0 0; padding-inline-start: 1.2rem; }
  .ct__status--error a { color: inherit; text-decoration: underline; }
/* END_SECTION:contact */

/* START_SECTION:faq (INDEX:14) */
.faq {
    position: relative;
  }

  .faq__layout {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
  }

  .faq__intro {
    flex: 0 0 34%;
    align-self: flex-start;
    position: sticky;
    top: 100px;
  }
  .faq__title {
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.7rem, 1.2vw + 1.3rem, 2.6rem);
    line-height: 1.1;
    margin: 0 0 0.7rem;
    color: rgb(var(--color-foreground));
  }
  .faq__subtitle {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(var(--color-foreground), 0.7);
  }
  .faq__subtitle a { color: inherit; text-decoration: underline; }
  .faq__subtitle p { margin: 0; }
  .faq__image-wrap {
    margin-top: 1.4rem;
  }
  .faq__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
  }

  .faq__items {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid rgba(var(--color-foreground), 0.16);
  }

  /* ===== ITEM ===== */
  .faq-item {
    border-radius: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.16);
  }
  .faq-item__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    cursor: pointer;
    list-style: none;
  }
  .faq-item__summary::-webkit-details-marker {
    display: none;
  }
  .faq-item__question {
    font-size: 16px;
    font-weight: 500;
    color: rgb(var(--color-foreground));
    line-height: 1.4;
    flex: 1 1 auto;
    min-width: 0;
  }
  .faq-item__toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-foreground));
  }
  .faq-item__icon {
    width: 18px;
    height: 18px;
    display: block;
  }
  /* Show plus when closed, minus when open. */
  .faq-item .faq-item__icon--minus { display: none; }
  .faq-item[open] .faq-item__icon--plus { display: none; }
  .faq-item[open] .faq-item__icon--minus { display: block; }

  /* The wrapper is what we animate (height). The inner answer keeps its
     natural padding. Native <details>/<summary> is used for semantics, but
     the open/close is intercepted by JS so we can tween the height. */
  .faq-item__answer-wrap {
    overflow: hidden;
    height: 0;
    transition: height 0.28s ease;
  }
  .faq-item[open] .faq-item__answer-wrap {
    height: auto;
  }
  .faq-item__answer {
    padding: 0 1.1rem 1rem;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgb(var(--color-foreground));
    opacity: 0.85;
  }
  .faq-item__answer p {
    margin: 0 0 0.5rem;
  }
  .faq-item__answer p:last-child {
    margin-bottom: 0;
  }
  .faq-item__answer a {
    color: inherit;
    text-decoration: underline;
  }

  /* ===== MOBILE ===== */
  @media (max-width: 749px) {
    .faq__layout {
      flex-direction: column;
      gap: 1.2rem;
    }
    .faq__intro { position: static; }
    .faq__image-wrap {
      position: static;
      width: 100% !important;
      max-width: 480px;
      align-self: center;
    }
  }
/* END_SECTION:faq */

/* START_SECTION:feature-banner (INDEX:15) */
/* --fb-edge mirrors .page-width's side padding at each breakpoint */
  .feature-banner {
    position: relative;
    --fb-edge: 0.75rem;
  }
  @media (min-width: 768px) { .feature-banner { --fb-edge: 5rem; } }
  @media (min-width: 1000px) { .feature-banner { --fb-edge: 2.5rem; } }
  @media (min-width: 1400px) { .feature-banner { --fb-edge: 5rem; } }

  .feature-banner__inner {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* ===== Media ===== */
  .feature-banner__media {
    position: relative;
    overflow: hidden;
  }
  .feature-banner__media img,
  .feature-banner__media video,
  .feature-banner__media svg {
    display: block;
    width: 100%;
    height: auto;
  }
  /* custom height: fixed aspect ratio + cover (mobile ratio) */
  .feature-banner--custom .feature-banner__media {
    aspect-ratio: var(--fb-ar-m, 4/5);
  }
  .feature-banner--custom .feature-banner__media img,
  .feature-banner--custom .feature-banner__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ===== Details ===== */
  .feature-banner__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* mobile: .page-width padding on BOTH sides */
    padding: clamp(2rem, 9vw, 3rem) var(--fb-edge);
  }
  .feature-banner__details-inner {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-width: 640px;
  }
  .feature-banner__title {
    margin: 0;
  }
  .feature-banner__subtitle {
    color: rgba(var(--color-foreground), 0.85);
    line-height: 1.5;
    max-width: 52ch;
  }
  .feature-banner__subtitle > :first-child { margin-top: 0; }
  .feature-banner__subtitle > :last-child { margin-bottom: 0; }
  .feature-banner__button {
    align-self: flex-start;
    margin-top: 0.4rem;
  }
  .feature-banner__button svg {
    width: 1.1em;
    height: 1.1em;
    flex: 0 0 auto;
  }

  /* ===== Desktop: 2 columns, media full-bleed left, details right-inset ===== */
  @media (min-width: 990px) {
    .feature-banner__inner {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
    /* media always covers its column on desktop (column height = the row) */
    .feature-banner__media img,
    .feature-banner__media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .feature-banner--custom .feature-banner__media {
      aspect-ratio: var(--fb-ar-d, 1/1);
    }
    .feature-banner__details {
      justify-content: center;
      padding-top: clamp(2rem, 4vw, 3.5rem);
      padding-bottom: clamp(2rem, 4vw, 3.5rem);
      padding-left: clamp(1.5rem, 4vw, 4rem);
      padding-right: var(--fb-edge); /* = .page-width side padding */
    }
  }
  .rtl .feature-banner__details {
    padding-left: var(--fb-edge);
  }
  @media (min-width: 990px) {
    .rtl .feature-banner__details {
      padding-left: var(--fb-edge);
      padding-right: clamp(1.5rem, 4vw, 4rem);
    }
  }
/* END_SECTION:feature-banner */

/* START_SECTION:feature-list (INDEX:16) */
.fl {
    position: relative;
    --fl-edge: 0.75rem;
  }
  @media (min-width: 768px) { .fl { --fl-edge: 5rem; } }
  @media (min-width: 1000px) { .fl { --fl-edge: 2.5rem; } }
  @media (min-width: 1400px) { .fl { --fl-edge: 5rem; } }

  .fl__inner {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* ===== Media ===== */
  .fl__media { position: relative; overflow: hidden; }
  .fl__media img,
  .fl__media video,
  .fl__media svg { display: block; width: 100%; height: auto; }
  .fl--custom .fl__media { aspect-ratio: var(--fl-ar-m, 4/5); }
  .fl--custom .fl__media img,
  .fl--custom .fl__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* ===== Content ===== */
  .fl__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 9vw, 3rem) var(--fl-edge);
  }
  .fl__content-inner { width: 100%; max-width: 660px; }
  .fl__title {
    margin: 0 0 clamp(1.4rem, 3vw, 2.4rem);
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0.02em;
    color: rgb(var(--color-foreground));
  }
  .fl__blocks {
    display: flex;
    flex-direction: column;
    gap: clamp(1.2rem, 2.6vw, 2rem);
  }
  .fl__block-label {
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    line-height: 1.2;
    color: rgb(var(--color-foreground));
  }
  .fl__block-body {
    color: rgba(var(--color-foreground), 0.8);
    font-size: 0.95rem;
    line-height: 1.5;
  }
  .fl__block-body > :first-child { margin-top: 0; }
  .fl__block-body > :last-child { margin-bottom: 0; }

  /* split: heading left, body right */
  .fl__blocks--split .fl__block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  /* stacked: heading over body */
  .fl__blocks--stacked .fl__block-label { margin-bottom: 0.5rem; }

  /* ===== Desktop: 2 columns, media full-bleed, content inset ===== */
  @media (min-width: 990px) {
    .fl__inner {
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
    }
    .fl__media img,
    .fl__media video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .fl--custom .fl__media { aspect-ratio: var(--fl-ar-d, 1/1); }
    .fl--media-right .fl__media { order: 2; }
    .fl--media-right .fl__content { order: 1; }
    .fl__content {
      padding-top: clamp(2rem, 4vw, 4rem);
      padding-bottom: clamp(2rem, 4vw, 4rem);
    }
    .fl--media-left .fl__content { padding-left: clamp(1.5rem, 4vw, 4rem); padding-right: var(--fl-edge); }
    .fl--media-right .fl__content { padding-right: clamp(1.5rem, 4vw, 4rem); padding-left: var(--fl-edge); }
  }

  /* Mobile: stack the split rows */
  @media (max-width: 749px) {
    .fl__blocks--split .fl__block { grid-template-columns: 1fr; gap: 0.4rem; }
    .fl__blocks--split .fl__block-label { margin-bottom: 0.2rem; }
  }
  .rtl .fl--media-left .fl__content { padding-left: var(--fl-edge); }
/* END_SECTION:feature-list */

/* START_SECTION:featured-banner (INDEX:17) */
.fb {
    position: relative;
  }

  .fb__row + .fb__row {
    margin-top: 1.6rem;
  }

  .fb__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(var(--color-foreground), 0.08);
  }
  .fb__placeholder svg {
    width: 60%;
    height: 60%;
  }

  /* ===================== ROW 1 ===================== */
  .fb__row1 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 2rem 1rem;
    background-size: cover;
    background-position: center;
    background-color: rgba(var(--color-foreground), 0.04);
    border-radius: 14px;
    flex-wrap: wrap;
  }

  /* Heavy shadow on the two row-1 cards — overrides the default .card-shadow. */
  .fb__row1 .fb__row1-left-img.card-shadow,
  .fb__row1 .fb__row1-right.card-shadow {
    box-shadow: 8px 8px 0 0 rgb(var(--color-foreground));
  }

  .fb__row1-left {
    flex: 0 0 auto;
  }
  .fb__row1-left-img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    /* background-color: rgb(var(--color-background)); */
  }

  .fb__row1-right {
    flex: 0 1 320px;
    min-width: 0;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border-radius: 12px;
    padding: 1.2rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .fb__price {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-align: center;
    font-size: clamp(2.4rem, 1.4vw + 2rem, 3.4rem);
    line-height: 1;
    color: rgb(var(--color-foreground));
  }

  .fb__bar-block {
    padding-block: 0.4rem;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.2);
  }
  .fb__bar {
    position: relative;
    width: 100%;
    height: 3px;
    background-color: rgba(var(--color-foreground), 0.15);
    overflow: hidden;
  }
  .fb__bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    background-color: rgb(var(--color-button));
  }
  .fb__bar-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: rgb(var(--color-foreground));
  }
  .fb__bar-count,
  .fb__bar-pct {
    font-variant-numeric: tabular-nums;
  }

  .fb__desc {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 500;
    color: rgb(var(--color-foreground));
  }

  .fb__cta {
    width: 100%;
    gap: 8px;
    padding-block: 0.8rem;
    margin-top: 0.4rem;
  }
  .fb__cta-text {
    flex: 0 0 auto;
    font-size: 12px
  }
  .fb__cta-arrow {
    display: block;
    width: 30px;
    height: 12px;
    color: currentColor;
  }

  @media (max-width: 749px) {
    .fb__row1 {
      flex-direction: column;
      align-items: center;
      gap: 200px;
      padding: 1.4rem 0.9rem;
    }
    .fb__row1-left {
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .fb__row1-right {
      width: 100%;
      flex: 0 0 auto;
      max-width: 420px;
    }
    .fb__cta {
      font-size: 0.95rem;
    }
  }

  /* ===================== ROW 2 ===================== */
  .fb__row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .fb__row2-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
  }
  .fb__row2-img {
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .fb__row2-text {
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgb(var(--color-foreground));
  }
  .fb__row2-cta {
    flex-shrink: 0;
  }

  @media (max-width: 749px) {
    .fb__row2 {
      flex-direction: column;
      align-items: stretch;
      gap: 0.9rem;
    }
    .fb__row2-left {
      justify-content: center;
      text-align: start;
    }
    .fb__row2-cta {
      align-self: center;
    }
  }

  /* ===================== ROW 3 ===================== */
  .fb__row3 {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
  }
  .fb__row3-left {
    flex: 0 0 auto;
  }
  .fb__row3-img {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
  }
  .fb__row3-right {
    flex: 1 1 0;
    min-width: 0;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border-radius: 12px;
    padding: 2rem 1.4rem;
    box-shadow: 5px 5px 0 0 rgb(var(--color-foreground));
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 1rem;
  }
  .fb__row3-text--left {
    font-size: 1rem;
    flex: 0 0 auto;
  }
  .fb__row3-text--center {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: clamp(5rem, -0.4348rem + 8.6957vw, 10rem);
    line-height: 0.88;
    color: rgb(var(--color-foreground));
    text-align: center;
  }
  .fb__row3-text--right {
    display: flex;
    align-self: stretch;
    flex-direction: column;
    padding: 6px 0;
    justify-content: space-between;
    gap: 0.1rem;
    flex: 0 0 auto;
    @media (max-width: 999px) {
      width: 200px
    }
  }
  .fb__row3-text-l1 {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: clamp(3rem, 1.3696rem + 2.6087vw, 4.5rem);
    line-height: 1;
    color: rgb(var(--color-foreground));
  }
  .fb__row3-text-l2 {
    font-size: 1rem;
    line-height: 1.2;
    color: rgb(var(--color-foreground));
  }

  @media (max-width: 749px) {
    .fb__row3 {
      flex-direction: column;
      align-items: stretch;
      gap: 0.9rem;
    }
    .fb__row3-left {
      display: flex;
      justify-content: center;
    }
    .fb__row3-img {
      width: 100% !important;
      max-width: 360px;
    }
    .fb__row3-right {
      padding: 1.1rem 1rem;
      flex-direction: row;
      align-items: center;
      justify-content: start;
      flex-wrap: wrap;
      gap: 0.5rem;
      text-align: start;
    }
    .fb__row3-text--left {
      font-size: 0.85rem;
      width: 100%;
      flex-shrink: 0;
    }
    .fb__row3-text--center {
      font-size: 3rem;
    }
    .fb__row3-text-l1 {
      font-size: clamp(1rem, 3vw, 1.5rem);
    }
    .fb__row3-text-l2 {
      font-size: 0.75rem;
    }
  }
/* END_SECTION:featured-banner */

/* START_SECTION:footer (INDEX:18) */
.footer {
    position: relative;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border-top: 1px solid rgba(var(--color-foreground), 0.09);
  }
  /* Arabic (RTL): flip footer so menu headings, links + text align right and columns mirror. */
  .rtl .footer { direction: rtl; }
  .rtl .footer__col-link:hover { transform: translateX(-3px); }
  .rtl .footer__nl-input { text-align: right; }


  /*
   Product pages: flip the whole footer to the flavor's button color (same logic as 
   the announcement bar / marquee). Remapping the tokens recolors every child.
*/
  .footer.is-product-scheme {
    --color-background: var(--color-button);
    --color-foreground: var(--color-button-text);
    --color-link: var(--color-button-text);
  }

  /* Logo */
  .footer__logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 2.6rem;
  }
  .footer__logo {
    display: block;
    height: auto;
    max-width: 70%;
  }
  .footer__wordmark {
    font-family: var(--font-heading-family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: rgb(var(--color-foreground));
  }

  /* Main row: 2 menus · center · 2 menus */
  .footer__main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem 2rem;
  }
  @media (min-width: 900px) {
    .footer__main {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      gap: clamp(1.5rem, 3vw, 3.5rem);
    }
  }

  /* Link columns */
  .footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    width: 200px;
    @media (max-width: 999px) {
      width: 150px;
    }
  }
  .footer__col-title {
    position: relative;
    margin: 0 0 0.3rem;
    padding-bottom: 0.7rem;
    font-family: var(--font-heading-family);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgb(var(--color-foreground));
  }
  .footer__col-title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: rgb(var(--color-button));
  }
  .footer__col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .footer__col-link {
    display: block;
    color: rgba(var(--color-foreground), 1);
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.22s ease, transform 0.22s ease;
  }
  .footer__col-link:hover {
    color: rgb(var(--color-button));
    transform: translateX(3px);
  }

  /* Center block */
  .footer__center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    text-align: center;
    grid-column: 1 / -1;
    order: -1;
  }
  @media (min-width: 900px) {
    .footer__center {
      flex: 0 1 380px;
      order: 0;
    }
  }

  .footer__badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.6rem;
  }
  .footer__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: rgb(var(--color-foreground));
  }
  .footer__badge-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }
  .footer__badge-icon svg {
    width: 100%;
    height: 100%;
  }

  /* Newsletter — input + brand button (matches the site's default buttons) */
  .footer__nl {
    display: flex;
    align-items: stretch;
    gap: 0.6rem;
    width: 100%;
    max-width: 420px;
  }
  .footer__nl-input {
    flex: 1 1 auto;
    min-width: 0;
    outline: 0;
    border: 1.5px solid rgba(var(--color-foreground), 0.25);
    border-radius: 6px;
    background: rgba(var(--color-foreground), 0.06);
    padding: 0.7rem 1rem;
    font-family: var(--font-body-family);
    font-size: 0.95rem;
    color: rgb(var(--color-foreground));
    transition: border-color 0.15s ease;
  }
  .footer__nl-input::placeholder {
    color: rgba(var(--color-foreground), 0.5);
  }
  .footer__nl-input:focus {
    border-color: rgb(var(--color-button));
  }
  .footer__nl-btn {
    flex: 0 0 auto;
    cursor: pointer;
    border: 1.5px solid rgb(var(--color-button));
    border-radius: 6px;
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    padding: 0.7rem 1.5rem;
    font-family: var(--font-heading-family);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
    box-shadow: 3px 3px 0 1px color-mix(in srgb, rgb(var(--color-button)) 52%, #000);
    transition: transform 0.14s ease, box-shadow 0.14s ease;
  }
  .footer__nl-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 5px 5px 0 1px color-mix(in srgb, rgb(var(--color-button)) 52%, #000);
  }
  .footer__nl-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 1px color-mix(in srgb, rgb(var(--color-button)) 52%, #000);
  }
  .footer__nl-success {
    margin: 0;
    font-weight: 500;
    color: rgb(var(--color-foreground));
  }
  .footer__nl-error {
    margin: 0;
    font-size: 0.85rem;
    color: #ff6b6b;
  }

  /* Socials — filled circles (reuses snippets/socials.liquid, our colors) */
  .footer__socials {
    margin-top: 0.2rem;
  }
  .footer__socials .socials-group {
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer .svg_social {
    width: 30px;
    height: 30px;
    border-radius: 0;
    background: transparent; /* no chip */
    opacity: 1;
  }
  .footer .svg_social:hover {
    opacity: 0.65;
  }
  .footer__socials .svg_social svg path {
    fill: rgb(var(--color-button)); /* brown glyph, no background */
  }

  /* Bottom bar */
  .footer__bottom {
    margin-top: 3rem;
    padding-top: 1.6rem;
    text-align: start;
    border-top: 1px solid rgba(var(--color-foreground), 0.16);
  }
  .footer__copyright {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(var(--color-foreground), 0.6);
  }
/* END_SECTION:footer */

/* START_SECTION:hero (INDEX:22) */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  /* Background image — single <picture> absolutely fills the section.
     The browser only downloads the source matching the current viewport. */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    display: block;
  }
  .hero__bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* Content overlay — pinned to the right side, RTL flow, max-width capped
     so long titles wrap nicely instead of stretching across the section. */
  .rtl .hero__content {
    direction: rtl;
    text-align: right;
  }
  .hero__content {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    box-sizing: border-box;
  }

  .rtl .hero__title {
    text-align: right;
  }
  .hero__title {
    color: rgb(var(--color-foreground));
    margin: 0;
    font-weight: bold;
    max-width: 100%;
  }
  .hero__title.h1 p { margin: 0; }

  .hero__cta {
    text-decoration: none;
    text-align: center;
    width: auto;
    max-width: clamp(400px, 45vw, 750px);
  }

  /* Mobile content sizing. */
  @media (max-width: 989px) {
    .hero__content {
      gap: 1rem;
      padding-block: 1rem;
    }
    .hero__cta {
      width: 100%;
    }
  }

  /* Desktop content sizing — title/CTA constrained to a comfortable
     reading column on the right side of the cover. */
  @media (min-width: 990px) {
    .hero__content {
      gap: 1.75rem;
      padding-block: 2rem;
    }
    .hero__title {
      max-width: 47vw;
    }
    .hero__cta {
      width: auto;
      min-width: 14rem;
    }
  }
/* END_SECTION:hero */

/* START_SECTION:how-to-use (INDEX:23) */
.htu {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    overflow: hidden;
  }
  .htu__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .htu__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .htu__subtitle {
    margin: 0.6rem 0 0;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    color: rgba(var(--color-foreground), 0.72);
  }

  .htu__videos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(1rem, 3vw, 2.4rem);
    margin-top: clamp(1.8rem, 4vw, 3rem);
    width: 100%;
  }
  /* Portrait, width-capped (max-width set per-section via the inline style above). */
  .htu__col { flex: 0 1 auto; width: 100%; }

  /* Same treatment as the Reviews video, but portrait. */
  .htu__video {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 18px;
    overflow: hidden;
    background: #000;
  }
  .htu__vid,
  .htu__poster { width: 100%; height: 100%; object-fit: cover; display: block; }
  .htu__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 68px;
    height: 68px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, opacity 0.2s ease;
  }
  .htu__play img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); }
  .htu__video:hover .htu__play { transform: scale(1.08); }
  .htu__video.has-played .htu__play { opacity: 0; pointer-events: none; }

  /* Mobile: keep both clips side by side but smaller so the pair still fits. */
  @media (max-width: 749px) {
    #shopify-section-{{ section.id }} .htu__col { max-width: 44vw; }
  }
/* END_SECTION:how-to-use */

/* START_SECTION:list-collections (INDEX:24) */
.lc { position: relative; }
  .lc__breadcrumbs { margin: 0 0 1rem; }

  .lc__head {
    margin: 0 auto 2rem;
    text-align: center;
    max-width: 720px;
  }
  .lc__eyebrow {
    margin: 0 0 0.4rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    color: rgba(var(--color-foreground), 0.7);
  }
  .lc__title { margin: 0; }
  .lc__intro {
    margin: 1rem 0 0;
    color: rgba(var(--color-foreground), 0.75);
    font-size: 0.95rem;
    line-height: 1.6;
  }
  .lc__intro p { margin: 0; }

  /* ===== Grid ===== */
  .lc__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--lc-gap, 24px);
  }
  @media (min-width: 990px) {
    .lc__grid {
      grid-template-columns: repeat(var(--lc-cols-d, 3), minmax(0, 1fr));
    }
  }

  /* ===== Card ===== */
  .lc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: rgb(var(--color-foreground));
    background: rgb(var(--color-background));
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 4px 4px 0 0 rgb(var(--color-foreground));
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
  .lc-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 0 rgb(var(--color-foreground));
  }
  .lc-card:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 0 rgb(var(--color-foreground));
  }

  /* Media — landscape aspect by default, square on mobile for denser grid. */
  .lc-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: rgba(var(--color-foreground), 0.04);
  }
  @media (min-width: 750px) {
    .lc-card__media { aspect-ratio: 3 / 2; }
  }
  .lc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .lc-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--color-foreground), 0.3);
  }
  .lc-card:hover .lc-card__img { transform: scale(1.04); }

  /* Subtle gradient overlay so white text would be readable if we ever
     overlay the title on the image. Currently used just for visual depth. */
  .lc-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.18), rgba(0,0,0,0) 45%);
    pointer-events: none;
  }

  /* Count chip — top-right */
  .lc-card__count {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 999px;
    padding: 0.25rem 0.6rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  /* Body */
  .lc-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.9rem 1rem;
    background: rgb(var(--color-background));
  }
  .lc-card__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    font-size: clamp(1.05rem, 0.7vw + 0.6rem, 1.4rem);
    line-height: 1.15;
    color: rgb(var(--color-foreground));
    flex: 1 1 auto;
    min-width: 0;
  }
  .lc-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
    font-family: var(--font-body-family);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.85);
    transition: color 0.15s ease, transform 0.18s ease;
  }
  .lc-card__cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.18s ease;
  }
  .lc-card:hover .lc-card__cta {
    color: rgb(var(--color-foreground));
  }
  .lc-card:hover .lc-card__cta svg {
    transform: translateX(3px);
  }

  /* Empty state */
  .lc__empty {
    text-align: center;
    padding: 4rem 1.5rem;
    color: rgba(var(--color-foreground), 0.7);
  }
/* END_SECTION:list-collections */

/* START_SECTION:marquee (INDEX:25) */
.prsso-marq {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    padding-top: var(--marq-pad-top, 12px);
    padding-bottom: var(--marq-pad-bottom, 12px);
    overflow: hidden;
    width: 100%;
    direction: ltr; /* keep the scrolling bar LTR + seamless in Arabic/RTL too */
  }
  /* When the scheme is inherited from the product, invert to the flavor's button color. */
  .prsso-marq--btn {
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
  }
  .prsso-marq__viewport {
    display: flex;
    overflow: hidden;
    user-select: none;
    /* Soft fade at both ends so phrases dissolve in/out instead of hard-clipping.
       Symmetric, so it reads the same under RTL. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  }
  .prsso-marq__track {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    will-change: transform;
    animation: prsso-marq-scroll var(--marq-speed, 24s) linear infinite;
  }
  .prsso-marq:hover .prsso-marq__track { animation-play-state: paused; }

  .prsso-marq__item {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--marq-font, 14px);
    line-height: 1;
  }
  .prsso-marq__sep {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 clamp(1.2rem, 3vw, 2.4rem);
    opacity: 0.85;
  }
  .prsso-marq__sep svg { width: calc(var(--marq-font, 14px) * 0.55); height: calc(var(--marq-font, 14px) * 0.55); display: block; }
  .prsso-marq__slash { font-size: var(--marq-font, 14px); line-height: 1; }

  @keyframes prsso-marq-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .prsso-marq__track { animation: none; justify-content: center; width: 100%; flex-wrap: wrap; white-space: normal; gap: 0.4rem 0; }
  }
/* END_SECTION:marquee */

/* START_SECTION:mega-deals (INDEX:26) */
.md {
    position: relative;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
  }
  .md__tex { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .md > .page-width--3 { position: relative; z-index: 1; }

  /* ===== ROW 1 — banner ===== */
  .md__banner {
    --md-ink: 42
    , 27
    , 78;
    position: relative;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.5rem;
    border-radius: 16px;
    padding: 1rem 2rem 0;
    overflow: hidden;
  }
  .md__banner-left {
    margin-left: 58px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.2rem 0 1rem;
  }
  .md__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 2.2rem);
    line-height: 1.05;
    color: rgb(var(--md-ink));
  }
  .md__subtitle {
    margin: 0.35rem 0 0;
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: clamp(0.95rem, 0.5vw + 0.8rem, 1.1rem);
    line-height: 1.4;
    color: rgb(var(--md-ink));
  }
  .md__subtitle p {
    margin: 0;
  }
  .md__subtitle strong {
    font-weight: 700;
  }

  .md__banner-right {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 2rem;
    flex-shrink: 0;
  }

  /* Countdown */
  .md__countdown {
    position: relative;
    z-index: 2;
    align-self: center;
    margin: 0.9rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    border-radius: 12px;
    padding: 0.7rem 1.1rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  }
  .md__cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.4ch;
  }
  .md__cd-num {
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem);
    line-height: 1;
    color: rgb(var(--md-ink));
    font-variant-numeric: tabular-nums;
  }
  .md__cd-label {
    margin-top: 0.25rem;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: rgba(var(--md-ink), 0.6);
  }
  .md__cd-colon {
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.3rem, 1.2vw + 0.9rem, 1.7rem);
    color: rgba(var(--md-ink), 0.5);
    transform: translateY(-0.35em);
  }

  .md__banner-img {
    position: relative;
    z-index: 1;
    display: block;
    align-self: flex-end;
    height: 110px;
    width: auto;
    object-fit: contain;
  }

  /* ===== MOBILE (banner) ===== */
  @media (max-width: 749px) {
    .md__banner {
      flex-direction: column;
      align-items: flex-start;
      gap: 1.2rem;
      padding: 1.2rem 1.2rem 1.6rem;
    }
    .md__banner-left {
      margin-left: 0;
    }
    .md__banner-right {
      flex-direction: column-reverse;
      align-items: center;
      gap: 0;
      width: 100%;
    }
    /* Image tucks up behind the countdown. */
    .md__banner-img {
      height: clamp(90px, 34vw, 150px);
      margin-bottom: -26px;
      width: 100%;
    }
  }

  /* ===== ROW 2 — collection cards ===== */
  .md__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: clamp(1.6rem, 3vw, 2.6rem);
    padding: 6px;
    justify-content: center;
  }
  .md__cat {
    flex: 0 0 216px;
    width: 216px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    border: 0;
    text-decoration: none;
    text-align: right;
    font-family: var(--font-body-family);
  }
  .md__cat-media {
    position: relative;
    width: 100%;
    aspect-ratio: 216 / 274;
    background: rgb(var(--color-wave, 247, 242, 235));
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }
  .md__cat-media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .md__cat:hover .md__cat-media img {
    transform: scale(1.05);
  }
  .md__cat-badge {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 7.5px 13px;
    border-radius: 5px;
    background: linear-gradient(135deg, #f7f0e2, #e6d2b0);
    color: #2a1e18;
    border: 1px solid rgba(42, 30, 24, 0.1);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
  }
  .md__cat-arrow {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgb(var(--color-button));
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
  }
  .md__cat-arrow svg {
    width: 18px;
    height: 18px;
  }
  .md__cat:hover .md__cat-arrow {
    transform: translateX(3px);
    background: rgb(var(--color-button-text));
    color: rgb(var(--color-button));
  }
  .md__cat-title {
    margin-top: 4px;
    padding: 0 4px;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.1;
    color: rgb(var(--color-foreground));
  }
  .md__cat-sub {
    padding: 0 4px;
    font-size: 0.85rem;
    line-height: 1.2;
    color: rgb(var(--color-foreground), 0.7);
  }
  .md__cat.is-featured .md__cat-sub {
    color: var(--md-sale);
    font-weight: 500;
  }

  /* RTL: mirror the corner arrow so it points inward-forward. */
  .rtl .md__cat-arrow {
    right: auto;
    left: 10px;
  }
  .rtl .md__cat-arrow svg {
    transform: scaleX(-1);
  }
  .rtl .md__cat:hover .md__cat-arrow {
    transform: translateX(-3px);
  }

  @media (max-width: 749px) {
    .md__cat {
      flex: 0 1 calc(50% - 12px);
      width: auto;
    }
  }
/* END_SECTION:mega-deals */

/* START_SECTION:more-about (INDEX:27) */
.more-about {
    width: 100%;
  }

  .more-about__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.6rem;
  }

  .more-about__subtitle {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    direction: rtl;
    @media screen and (max-width: 999px) {
      font-size: 14px;
    }
  }

  .more-about__title {
    margin: 0;
    color: rgb(var(--color-foreground));
  }

  .more-about__description {
    margin: 0 auto;
    max-width: clamp(400px, 40vw, 650px);
    color: rgb(var(--color-foreground));
    font-size: clamp(0.95rem, 0.5696rem + 0.6087vw, 1.3rem);
    line-height: 1.55;
    @media screen and (max-width: 999px) {
      font-size: 0.875rem;
    }
  }

  .more-about__cta {
    text-decoration: none;
    min-width: 18rem;
    font-size: 18px;
    text-underline-offset: 3px;
    text-decoration: underline;
    font-weight: 500;
    color: rgb(var(--color-foreground));
  }

  .more-about__image-wrap {
    margin-top: 0.8rem;
    max-width: 100%;
    overflow: hidden;
    -webkit-clip-path: url('#more-about-blob-12');
    clip-path: url('#more-about-blob-12');
  }

  .more-about__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .more-about__svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
/* END_SECTION:more-about */

/* START_SECTION:newsletter-signup (INDEX:29) */
/* --nl-edge mirrors .page-width side padding at each breakpoint */
  .newsletter {
    position: relative;
    --nl-edge: 0.75rem;
  }
  @media (min-width: 768px) { .newsletter { --nl-edge: 5rem; } }
  @media (min-width: 1000px) { .newsletter { --nl-edge: 2.5rem; } }
  @media (min-width: 1400px) { .newsletter { --nl-edge: 5rem; } }

  .newsletter__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* ===== Details (form) ===== */
  .newsletter__details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* mobile: .page-width padding both sides */
    padding-left: var(--nl-edge);
    padding-right: var(--nl-edge);
  }
  .newsletter__title {
    margin: 0 0 0.75rem;
    font-family: var(--font-heading-family);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.1;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    color: rgb(var(--color-foreground));
  }
  .newsletter__subtitle {
    margin: 0 0 1.75rem;
    max-width: 46ch;
    color: rgba(var(--color-foreground), 0.7);
    line-height: 1.5;
    font-size: 0.95rem;
  }
  .newsletter__subtitle > :first-child { margin-top: 0; }
  .newsletter__subtitle > :last-child { margin-bottom: 0; }

  .newsletter__form { max-width: 460px; }
  .newsletter__field {
    border-bottom: 1px solid rgba(var(--color-foreground), 0.3);
    margin-bottom: 1.4rem;
  }
  .newsletter__phone {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .newsletter__prefix {
    flex: 0 0 auto;
    font-size: 0.95rem;
    color: rgb(var(--color-foreground));
    padding-right: 10px;
    border-right: 1px solid rgba(var(--color-foreground), 0.25);
  }
  .newsletter__input {
    width: 100%;
    border: 0;
    background: transparent;
    padding: 10px 0;
    font: inherit;
    font-size: 0.95rem;
    color: rgb(var(--color-foreground));
    outline: none;
  }
  .newsletter__input::placeholder { color: rgba(var(--color-foreground), 0.5); }

  .newsletter__check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.8rem;
    color: rgba(var(--color-foreground), 0.75);
    cursor: pointer;
  }
  .newsletter__check input {
    flex: 0 0 auto;
    margin-top: 2px;
    accent-color: rgb(var(--color-foreground));
  }

  .newsletter__submit {
    align-self: flex-start;
  }
  .newsletter__submit svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; }
  .newsletter__submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  .newsletter__success,
  .newsletter__error {
    margin: 0 0 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
  }
  .newsletter__success { color: rgb(var(--color-foreground)); }
  .newsletter__error { color: #c0392b; }

  /* ===== Media ===== */
  .newsletter__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--nl-ar-m, 16/9);
    /* container background (scheme bg) — the video's own white blends into it,
       and with object-fit:contain the whole clip shows on this background */
    background: rgb(var(--color-background));
    /* mobile: full-bleed, no radius (touches both screen edges) */
    border-radius: 0;
  }
  .newsletter__media > img,
  .newsletter__media > video,
  .newsletter__media > .placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  /* ===== Desktop: form left, media right (bleeds right, left corners round) ===== */
  @media (min-width: 990px) {
    .newsletter__inner {
      grid-template-columns: 1fr 1.1fr;
      align-items: stretch;
      gap: 0;
    }
    .newsletter__details {
      padding-top: clamp(1.5rem, 3vw, 3rem);
      padding-bottom: clamp(1.5rem, 3vw, 3rem);
      padding-right: clamp(2rem, 4vw, 4.5rem);
      /* padding-left stays --nl-edge */
    }
    .newsletter__media {
      aspect-ratio: auto;
      border-radius: var(--nl-radius, 16px) 0 0 var(--nl-radius, 16px);
    }
  }

  /* RTL: mirror the rounded corners + insets */
  .rtl .newsletter__media { border-radius: 0; }
  @media (min-width: 990px) {
    .rtl .newsletter__media { border-radius: 0 var(--nl-radius, 16px) var(--nl-radius, 16px) 0; }
    .rtl .newsletter__details { padding-right: var(--nl-edge); padding-left: clamp(2rem, 4vw, 4.5rem); }
  }
/* END_SECTION:newsletter-signup */

/* START_SECTION:page (INDEX:30) */
.page-section {
    width: 100%;
  }
  .page-section__title {
    margin: 0 0 1.2rem;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    text-align:center;
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    line-height: 1.1;
    color: rgb(var(--color-foreground));
  }

  /* ===== Breadcrumbs ===== */
  /* Visuals come from snippets/breadcrumbs.liquid — this wrapper just adds
     spacing below the row inside the page section. */
  .page-section__breadcrumbs { margin: 0 0 1rem; }

  /* ===== Blocks ===== */
  .page-section__content > * + * { margin-top: 1.1rem; }

  .page-block--heading {
    margin: 1.6rem 0 0.6rem;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    color: rgb(var(--color-foreground));
    line-height: 1.15;
  }
  .page-block--h1 { font-size: clamp(2rem, 2vw + 1rem, 3.2rem); text-transform: uppercase; }
  .page-block--h2 { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.4rem); text-transform: uppercase; }
  .page-block--h3 { font-size: clamp(1.3rem, 1vw + 1rem, 1.9rem); }
  .page-block--h4 { font-size: clamp(1.15rem, 0.6vw + 1rem, 1.5rem); }
  .page-block--h5 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; }
  .page-block--h6 { font-size: 0.9rem;  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--color-foreground), 0.7); }
  /* First heading sits flush at the top of the content block */
  .page-section__content > .page-block--heading:first-child { margin-top: 0; }

  .page-block--text {
    font-family: var(--font-body-family);
    font-size: 1rem;
    line-height: 1.65;
    color: rgb(var(--color-foreground));
  }
  .page-block--text p { margin: 0 0 0.9rem; }
  .page-block--text p:last-child { margin-bottom: 0; }
  /* The theme's base CSS strips list-style off ul/ol, so re-assert it here
     so richtext bullets/numbers actually render in this section. */
  .page-block--text ul,
  .page-block--text ol {
    margin: 0 0 0.9rem;
    padding-left: 1.6rem;
    list-style-position: outside;
  }
  .page-block--text ul { list-style: disc; }
  .page-block--text ol { list-style: decimal; }
  .page-block--text ul ul { list-style: circle; }
  .page-block--text ul ul ul { list-style: square; }
  .page-block--text li {
    display: list-item;
    list-style: inherit;
  }
  .page-block--text li + li { margin-top: 0.3rem; }
  .page-block--text li::marker {
    color: rgb(var(--color-foreground));
  }
  .page-block--text a {
    color: rgb(var(--color-foreground));
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .page-block--text strong { font-weight: 700; }
  .page-block--text em { font-style: italic; }

  .page-block--image { margin: 1.4rem 0; }
  .page-block__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .page-block__caption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: rgba(var(--color-foreground), 0.7);
    text-align: center;
  }

  .page-block--spacer { height: var(--spacer-h, 24px); }
/* END_SECTION:page */

/* START_SECTION:path-marquee (INDEX:32) */
.path-marquee {
    width: 100%;
    background: transparent !important;
    overflow: hidden;
    padding: 1.5rem 0;
  }

  .path-marquee__band {
    position: relative;
    width: 100%;
    height: var(--pm-band-h, 320px);
  }

  .path-marquee__svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
  }

  .path-marquee__ribbon {
    stroke: rgb(var(--color-background));
    stroke-width: var(--pm-ribbon-width, 60);
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .path-marquee__guide-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .path-marquee__text {
    fill: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    font-size: var(--pm-font-size, 18px);
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  @media screen and (max-width: 749px) {
    .path-marquee__text {
      font-size: calc(var(--pm-font-size, 18px) * 0.7);
    }
  }
/* END_SECTION:path-marquee */

/* START_SECTION:prize-popup (INDEX:35) */
.prize-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.62);
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: var(--padding-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  .prize-popup-overlay:not(.is-open) {
    pointer-events: none;
  }
  .prize-popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
  }

  .prize-popup-modal {
    width: min(800px, 80vw);
    height: min(600px, 85vh);
    display: grid;
    grid-template-columns: 58% 42%;
    background: var(--color-background);
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    opacity: 0;
    transform: scale(0.94);
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .prize-popup-overlay.is-open .prize-popup-modal {
    opacity: 1;
    transform: scale(1);
  }

  .prize-popup-media {
    background: rgb(var(--color-foreground-rgb) / 0.06);
    min-height: 100%;
  }

  .prize-popup-media__picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .prize-popup-media__image,
  .prize-popup-media__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .prize-popup-body {
    background: var(--prize-right-bg);
    padding: 32px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: var(--gap-sm);
  }
  .prize-popup-body form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .prize-popup-panel {
    padding-top: 10px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .prize-popup-panel strong {
    color: var(--prize-deal-text);
  }

  .prize-popup-no-thanks {
    text-align: center;
    margin-inline: auto;
    font-size:14px
  }
  .prize-popup-close-link,
  .prize-popup-no-thanks {
    background: transparent;
    border: 0;
    text-decoration: underline;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font-size: 14px;
    width: fit-content;
  }

  .prize-popup-close-link { margin-left: auto; }

  .prize-popup-subtitle,
  .prize-popup-title,
  .prize-popup-description,
  .prize-popup-legal,
  .prize-popup-rich { margin: 0; }

  .prize-popup-title { font-size: 1.5rem; line-height: 1.2; }
  .prize-popup-description { opacity: 0.9; margin-top: var(--padding-xs); margin-bottom: var(--padding-sm); }
  .prize-popup-offer-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    margin: 8px 0;
  }
  .prize-popup-offer-line .prize-popup-rich,
  .prize-popup-offer-line .prize-popup-rich p {
    margin: 0;
    display: inline;
    white-space: nowrap;
  }

  .prize-popup-input {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid rgb(var(--color-foreground-rgb) / 0.35);
    background: rgb(var(--color-background-rgb));
    padding-inline: 16px;
    margin-bottom: 0;
  }

  .prize-popup-submit {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    border: 0;
    display: grid;
    place-items: center;
    text-decoration: none;
    background: var(--prize-deal-text);
    color: var(--color-primary-button-text);
    padding-inline: var(--padding-md);
    cursor: pointer;
    margin-bottom: 10px;
    margin-top: 10px;
  }

  .prize-popup-deal-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    background: var(--prize-deal-bg);
    color: var(--prize-deal-text);
    border-radius: 16px;
    padding: 0px 12px;
    margin: 0;
    white-space: nowrap;
  }

  .prize-popup-legal {
    font-size: 12px;
    opacity: 0.85;
    margin-top: auto !important;
    text-align: center;
  }

  .prize-popup-legal a { text-decoration: underline; }
  .prize-popup-error {
    margin-bottom: 10px;
    color: #b42318;
    font-size: 13px;
  }

  .floating-discount {
    position: fixed;
    right: 20px;
    bottom: 24px;
    z-index: 2147482000;
    width: 200px;
    height: 32px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    background: #000;
    color: #fff;
    padding-inline: 8px;
    transition: transform 0.25s ease;
  }

  /* Never let popup/floating block cart drawer interactions. */
  body:has(.cart-drawer__dialog[open]) .prize-popup-overlay {
    display: none !important;
    pointer-events: none !important;
  }

  body:has(.cart-drawer__dialog[open]) .floating-discount {
    pointer-events: none !important;
    opacity: 0 !important;
  }

  .floating-discount__open {
    flex: 1;
    height: 100%;
    background: transparent;
    border: 0;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
  }

  .floating-discount__hide {
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
  }

  .floating-discount__dot {
    width: 16px;
    height: auto;
    background: var(--prize-deal-bg);
    display: inline-block;
  }

  .floating-discount__text {
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
  }

  @media (max-width: 749px) {
    .prize-popup-modal {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      height: auto;
      max-height: 90vh;
      width: min(500px, 92vw);
      overflow-y: auto;
    }
    .prize-popup-media {
      min-height: auto;
      max-height: 35vh;
      aspect-ratio: 16 / 10;
    }
    .prize-popup-media__video { display: none; }
    .floating-discount {
      right: 12px;
      bottom: 12px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
    }
    .floating-discount.is-visible-mobile {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .prize-popup-overlay,
    .prize-popup-modal {
      transition: none;
    }
  }
/* END_SECTION:prize-popup */

/* START_SECTION:product-carousel (INDEX:36) */
.pc {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    overflow: hidden;
  }

  /* ===== Heading ===== */
  .pc__head { text-align: center; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
  .pc__title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: 700;
    font-size: clamp(2.4rem, 3.6vw, 3.6rem);
    line-height: 1.02;
    letter-spacing: 0;
    color: rgb(var(--color-button));
  }

  /* ===== Carousel — full bleed, page-width padding so first/last slide align ===== */
  .pc__wall { margin: 0; }
  /* Higher specificity than Swiper's `.swiper { overflow: hidden }` so the card
     shadow/wave isn't clipped; the section still clips horizontally. */
  .pc__wall .pc__swiper {
    overflow: visible;
    padding: 0 clamp(12px, 3vw, 40px) 6px;
  }
  /* Pre-init: lay the slides out as a centred row so the carousel already looks
     complete on first paint — no blank flash before Swiper hydrates. Because the
     products are duplicated, the centre of this row shows the same cards Swiper
     centres on, so the hand-off is seamless. Swiper drops :not(.swiper-initialized)
     once it owns positioning. */
  .pc__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    gap: 16px;
    justify-content: center;
  }
  .pc__swiper:not(.swiper-initialized) .pc__slide { flex: 0 0 auto; }
  /* Beat Swiper's `.swiper-slide { width: 100% }` — fixed card width so ~4-5 show
     with a peek on each side; capped on small screens so it never overflows. */
  .pc__swiper .pc__slide { width: min(280px, 74vw); height: auto; }

  /* ===== Nav — arrows flanking the collection button(s), centered ===== */
  .pc__nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
  }
  .pc__navbtn {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1.5px solid rgb(var(--color-button));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    transition: background 0.15s ease, color 0.15s ease, transform 0.14s ease;
  }
  .pc__navbtn:hover { background: rgb(var(--color-button-text)); color: rgb(var(--color-button)); }
  .pc__navbtn:active { transform: translateY(1px); }
  .pc__navbtn svg { width: 20px; height: 20px; display: block; }
  .pc__navbtn.swiper-button-disabled { opacity: 0.4; pointer-events: none; }
  /* Match the arrow height exactly, wider footprint + breathing room from the arrows.
     Hover comes from .primary--button (shared brand lift + offset shadow). */
  .pc__navlink { height: 48px; min-width: 240px; padding-block: 0; margin: 0 0.4rem; }

  .pc__empty { text-align: center; padding: 2rem 0 3rem; opacity: 0.85; }

  @media (max-width: 749px) {
    .pc__navbtn { width: 44px; height: 44px; }
    .pc__navlink { height: 44px; }
  }
/* END_SECTION:product-carousel */

/* START_SECTION:product-comparison (INDEX:37) */
.pcs { width: 100%; }
  .pcs__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
  }
  @media (min-width: 990px) {
    .pcs__inner {
      grid-template-columns: 0.85fr 1.3fr;
      gap: clamp(2rem, 5vw, 5rem);
    }
  }
  .pcs__text { min-width: 0; }
  .pcs__title {
    margin: 0 0 1rem;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
    color: rgb(var(--color-foreground));
  }
  .pcs__desc {
    color: rgba(var(--color-foreground), 0.85);
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 46ch;
  }
  .pcs__desc > :first-child { margin-top: 0; }
  .pcs__desc > :last-child { margin-bottom: 0; }
  .pcs__media { min-width: 0; }
/* END_SECTION:product-comparison */

/* START_SECTION:product-list (INDEX:38) */
.product-list {
    position: relative;
  }

  .product-list__empty {
    text-align: center;
    padding: 2rem 0 3rem;
    opacity: 0.85;
  }

  .product-list__slide {
    min-width: 0;
    height: 100%;
  }

  /* ===== ARROWS — split: prev at left, next at right of carousel ===== */
  .product-list__arrow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    background-color: transparent;
    color: rgb(var(--color-foreground));
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    transition:
      opacity 0.35s ease,
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .product-list__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* Position at page-width padding boundary (just before peek on each side) */
  .product-list__arrow--prev {
    left: 0.75rem;
    transform: translateY(-50%);
  }
  .product-list__arrow--next {
    right: 0.75rem;
    transform: translateY(-50%);
  }

  @media (min-width: 768px) {
    .product-list__arrow--prev { left: 5rem; }
    .product-list__arrow--next { right: 5rem; }
  }
  @media (min-width: 1000px) {
    .product-list__arrow--prev { left: 2.5rem; }
    .product-list__arrow--next { right: 2.5rem; }
    .product-list__arrow {
      width: 56px;
      height: 56px;
    }
    .product-list__arrow svg {
      width: 24px;
      height: 24px;
    }
  }
  @media (min-width: 1400px) {
    .product-list__arrow--prev { left: 5rem; }
    .product-list__arrow--next { right: 5rem; }
    .product-list__arrow {
      width: 64px;
      height: 64px;
    }
    .product-list__arrow svg {
      width: 28px;
      height: 28px;
    }
  }

  /* Boundary disabled: slide out + fade */
  .product-list__arrow.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
  }
  .product-list__arrow--prev.swiper-button-disabled {
    transform: translate(-50%, -50%);
  }
  .product-list__arrow--next.swiper-button-disabled {
    transform: translate(50%, -50%);
  }

  /* Hide the SIDE arrows on mobile (touch — infinite loop). Inline header arrows stay. */
  @media (max-width: 989px) {
    .product-list__arrow:not(.product-list__arrow--inline) {
      display: none;
    }
  }

  /* ===== Header-end nav: segmented bullets + plain arrows ===== */
  .product-list__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .product-list__bullets {
    display: flex;
    align-items: center;
    gap:0;
  }
  .product-list__bullet {
    width: 26px;
    height: 2px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(var(--color-foreground), 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .product-list__bullet.is-active {
    background: rgb(var(--color-foreground));
  }
  /* Inline (header) arrows: plain icon, no circle/shadow. */
  .product-list__arrow--inline {
    position: static;
    transform: none;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: rgb(var(--color-foreground));
    transition: opacity 0.15s ease;
  }
  .product-list__arrow--inline:hover { opacity: 0.6; }
  .product-list__arrow--inline.swiper-button-disabled {
    opacity: 0.25;
    pointer-events: none;
    transform: none;
  }
  @media (max-width: 749px) {
    .product-list__nav { gap: 0.6rem; }
    .product-list__bullet { width: 18px; }
    .product-list__arrow--inline { width: 34px; height: 34px; }
  }

  /* Header: title left, optional secondary button right (space-between) */
  .product-list__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }
  .product-list__header .section-title {
    margin: 0;
    text-align: start;
    display: flex; align-items: center;
    flex: 1 1 auto;
  }
  .product-list__header-button {
    flex: 0 0 auto;
  }
  .product-list__header-spacer {
    flex: 1 1 auto;
  }

  .section-title__icon {width: 70px; height: auto;}
  /* ===== GRID layout ===== */
  .product-list__track--grid {
    display: grid;
    grid-template-columns: repeat(var(--pl-cols-m), 1fr);
    column-gap: var(--pl-gap);
    row-gap: calc(var(--pl-gap) * 2);
  }
  @media (min-width: 990px) {
    .product-list__track--grid {
      grid-template-columns: repeat(var(--pl-cols-d), 1fr);
    }
  }

  /* ===== PURE CAROUSEL — full-bleed track with page-width padding ===== */
  .product-list__carousel-wrap {
    position: relative;
  }
  .product-list__swiper {
    width: 100%;
  }
  /* PRE-INIT: lay slides out at the size Swiper will give them so there's
     no layout shift while the deferred Swiper script is hydrating. The
     :not(.swiper-initialized) selector is removed by Swiper once it owns
     the slide widths inline. mobile cols + 0.2 peek; desktop overrides. */
     .swiper-wrapper-thumbs {
      padding-inline: 1rem;
     }
  .product-list__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--pl-gap);
    overflow: hidden;
  }
  .product-list__swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc((100% - var(--pl-gap) * (var(--pl-cols-m) + 0.2 - 1)) / (var(--pl-cols-m) + 0.2));
    min-width: 0;
  }
  @media (min-width: 990px) {
    .product-list__swiper:not(.swiper-initialized) .swiper-slide {
      flex: 0 0 calc((100% - var(--pl-gap) * (var(--pl-cols-d) + 0.2 - 1)) / (var(--pl-cols-d) + 0.2));
    }
  }
  /* Track padding matches .page-width breakpoints so first slide aligns
     with the page-width content edge and the next slide peeks past it.
     Stacked class selector beats Swiper's `.swiper { padding: 0 }`. */
  .product-list__swiper.product-list__swiper--padded {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  @media (min-width: 768px) {
    .product-list__swiper.product-list__swiper--padded {
      padding-left: 5rem;
      padding-right: 5rem;
    }
  }
  @media (min-width: 1000px) {
    .product-list__swiper.product-list__swiper--padded {
      padding-left: 2.5rem;
      padding-right: 2.5rem;
    }
  }
  @media (min-width: 1400px) {
    .product-list__swiper.product-list__swiper--padded {
      padding-left: 5rem;
      padding-right: 5rem;
    }
  }

  /* ===== MIXED layout: grid at desktop ===== */
  @media (min-width: 990px) {
    .product-list__mixed-wrap .swiper-wrapper {
      display: grid !important;
      grid-template-columns: repeat(var(--pl-cols-d), 1fr) !important;
      column-gap: var(--pl-gap) !important;
      row-gap: calc(var(--pl-gap) * 2 + 16px) !important;
      transform: none !important;
      height: auto !important;
    }
    .product-list__mixed-wrap .swiper-slide {
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
    }
    .product-list__mixed-wrap .product-list__swiper {
      overflow: visible;
    }
  }
/* END_SECTION:product-list */

/* START_SECTION:product-reels (INDEX:40) */
.reels { position: relative; }

  /* ===== Header ===== */
  .reels__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
  }
  .reels__header .section-title {
    margin: 0;
    text-align: start;
    flex: 1 1 auto;
  }
  .reels__header-spacer { flex: 1 1 auto; }
  .reels__header-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .reels__ig {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .reels__ig svg { width: 18px; height: 18px; }

  /* ===== Nav (arrows + segmented bullets) ===== */
  .reels__nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .reels__bullets { display: flex; align-items: center; gap: 0; }
  .reels__bullet {
    width: 26px;
    height: 2px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(var(--color-foreground), 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .reels__bullet.is-active { background: rgb(var(--color-foreground)); }
  .reels__arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    color: rgb(var(--color-foreground));
    cursor: pointer;
    transition: opacity 0.15s ease;
  }
  .reels__arrow svg { width: 22px; height: 22px; display: block; }
  .reels__arrow:hover { opacity: 0.6; }
  .reels__arrow.is-disabled { opacity: 0.25; pointer-events: none; }

  /* ===== Carousel ===== */
  .reels__carousel-wrap { position: relative; }
  .reels__swiper { width: 100%; }
  .reels__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--rl-gap);
    overflow: hidden;
  }
  .reels__swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc((100% - var(--rl-gap) * (var(--rl-cols-m) + 0.2 - 1)) / (var(--rl-cols-m) + 0.2));
    min-width: 0;
  }
  @media (min-width: 990px) {
    .reels__swiper:not(.swiper-initialized) .swiper-slide {
      flex: 0 0 calc((100% - var(--rl-gap) * (var(--rl-cols-d) + 0.2 - 1)) / (var(--rl-cols-d) + 0.2));
    }
  }
  .reels__swiper.reels__swiper--padded { padding-left: 0.75rem; padding-right: 0.75rem; }
  @media (min-width: 768px) {
    .reels__swiper.reels__swiper--padded { padding-left: 5rem; padding-right: 5rem; }
  }
  @media (min-width: 1000px) {
    .reels__swiper.reels__swiper--padded { padding-left: 2.5rem; padding-right: 2.5rem; }
  }
  @media (min-width: 1400px) {
    .reels__swiper.reels__swiper--padded { padding-left: 5rem; padding-right: 5rem; }
  }
  .reels__slide { min-width: 0; height: auto; }

  /* ===== Card ===== */
  .reels__card {
    display: flex;
    flex-direction: column;
    border-radius: var(--rl-radius);
    overflow: hidden;
    background: rgb(var(--color-background));
  }
  .reels__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--rl-aspect, 2/3);
    overflow: hidden;
  }
  .reels__media-btn {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    outline:none;
    cursor: pointer;
    color: inherit;
    position: relative;
  }
  .reels__video,
  .reels__img,
  .reels__media-btn .placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .reels__float {
    position: absolute;
    bottom: 8px;
    left: 8px;
    right: 8px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    pointer-events: none;
    z-index: 2;
  }
  .reels__float-img {
    width: 44px;
    aspect-ratio: 1;
    border-radius: 4px;
    object-fit: cover;
    background-color: rgb(var(--color-background));
    flex-shrink: 0;
  }
  .reels__float-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
  .reels__float-title {
    font-family: var(--font-body-family);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .reels__price-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    font-size: 0.8125rem;
  }
  .reels__price { font-weight: 700; }
  .reels__compare { text-decoration: line-through; opacity: 0.75; }

  /* Grid sound toggle */
  .reels__mute {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .reels__mute svg { width: 20px; height: 20px; display: block; }
  .reels__mute-on, .reels__mute-off { display: none; }
  .reels__mute.is-muted .reels__mute-on { display: block; }
  .reels__mute:not(.is-muted) .reels__mute-off { display: block; }

  /* ===== Quick-add (card) ===== */
  .reels__actions {
    display: flex;
    flex-direction: row;
    gap: 0;
    height: 46px;
    flex-shrink: 0;
    position: relative;
  }
  .reels__atc {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    cursor: pointer;
    font-family: var(--font-body-family);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: center;
    overflow: hidden;
    position: relative;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    transition: opacity 0.15s ease;
  }
  .reels__atc:hover:not(:disabled) { opacity: 0.88; }
  .reels__atc--full { flex: 1 1 100%; }
  .reels__atc:disabled { cursor: default; }
  .reels__atc.is-adding { opacity: 0.6; }
  .reels__var-toggle-wrap {
    position: relative;
    width: 56px;
    flex-shrink: 0;
    border-left: 1px solid rgba(var(--color-background), 0.25);
  }
  .reels__var-toggle {
    width: 100%;
    height: 100%;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    padding: 0;
    transition: transform 0.2s ease;
  }
  .reels__var-toggle svg { width: 20px; height: 20px; display: block; fill: currentColor; }
  .reels__var-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

  .reels__var-panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    transform: translateY(-100%);
    padding: 1rem;
    flex-direction: column;
    gap: 0.85rem;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
    z-index: 30;
  }
  .reels__var-panel.is-open { display: flex; }
  .reels__var-group { display: flex; flex-direction: column; gap: 6px; }
  .reels__var-name {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .reels__select-wrap { position: relative; }
  .reels__select {
    width: 100%;
    appearance: none;
    font-family: var(--font-body-family);
    font-size: 0.8rem;
    padding: 11px 34px 11px 12px;
    border: 1px solid rgba(var(--color-foreground), 0.18);
    background: rgba(var(--color-foreground), 0.04);
    color: rgb(var(--color-foreground));
    cursor: pointer;
  }
  .reels__select-arrow {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    pointer-events: none;
    display: flex;
    align-items: center;
    color: rgb(var(--color-foreground));
  }
  .reels__select-arrow svg { width: 18px; height: 18px; fill: currentColor; }
  .reels__var-price {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: baseline;
    font-weight: 700;
    font-size: 0.8rem;
  }

  /* ===== Mobile footer ===== */
  .reels__footer {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 1.25rem;
  }
  @media (max-width: 989px) {
    .reels__header-actions { display: none; }
    .reels__footer { display: flex; }
    .reels__arrow { width: 26px; height: 26px; }
  }

  /* ===== Lightbox modal ===== */
  .reels-modal {
    position: fixed;
    inset: 0;
    z-index: 1005;
    display: none;
    align-items: stretch;
    justify-content: center;
  }
  .reels-modal.is-open { display: flex; }
  .reels-modal__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(var(--color-foreground), 0.5);
    border: 0;
    cursor: pointer;
    padding: 0;
  }
  .reels-modal__shell {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .reels-modal__shell .page-width {
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .reels-modal__content {
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: min(100dvh, 100vh);
  }
  @media screen and (max-width: 749px) {
    .reels-modal__shell { padding-top: calc(var(--header-height, 0px) + var(--announcement-height, 0px)); }
    .reels-modal__content {
      max-height: calc(100dvh - var(--header-height, 0px) - var(--announcement-height, 0px) - 16px);
      align-items: stretch;
    }
  }
  .reels-modal__close,
  .reels-modal__viewport,
  .reels-modal__nav-btn { pointer-events: auto; }

  .reels-modal__nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
    pointer-events: none;
    z-index: 2;
  }
  .reels-modal__nav-btn {
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(var(--color-background), 0.85);
    color: rgb(var(--color-foreground));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: opacity 0.2s ease;
  }
  .reels-modal__nav-btn svg { width: 22px; height: 22px; }
  .reels-modal__nav-btn:disabled { opacity: 0.4; cursor: default; }

  .reels-modal__viewport {
    max-width: 820px;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    max-height: min(90vh, calc(100vh - 80px));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    z-index: 1;
  }
  @media screen and (max-width: 749px) {
    .reels-modal__viewport { max-height: none; }
  }
  .reels-modal__track {
    display: flex;
    flex-direction: row;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    width: 100%;
  }
  .reels-modal__slide { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; }
  .reels-modal__slide-inner {
    display: flex;
    flex-direction: row;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border-radius: var(--rl-radius);
    overflow: hidden;
    max-height: min(90vh, 880px);
  }
  @media screen and (max-width: 749px) {
    .reels-modal__slide-inner { flex-direction: column; max-height: none; }
  }
  .reels-modal__media {
    position: relative;
    flex: 1 1 50%;
    min-width: 0;
    aspect-ratio: var(--rl-aspect, 2/3);
    background: #000;
  }
  @media screen and (max-width: 749px) {
    .reels-modal__media { flex: none; width: 100%; }
  }
  .reels-modal__video,
  .reels-modal__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .reels-modal__mute {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .reels-modal__mute svg { width: 22px; height: 22px; display: block; }
  .reels-modal__detail {
    flex: 1 1 50%;
    min-width: 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .reels-modal__detail-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    min-height: 0;
  }
  .reels-modal__bundle-title {
    font-family: var(--font-heading-family);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .reels-modal__detail-body { display: flex; flex-direction: column; gap: 1rem; }
  .reels-modal__pinfo { display: flex; flex-direction: row; gap: 12px; align-items: center; }
  .reels-modal__pimg { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
  .reels-modal__ptext { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .reels-modal__ptext strong { font-size: 1rem; }
  .reels-modal__variants { display: flex; flex-direction: column; gap: 0.85rem; }
  .reels-modal__atc { width: 100%; }
  .reels-modal__atc.is-adding { opacity: 0.6; }
  .reels-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 4px;
    background: rgba(var(--color-background), 0.85);
    color: rgb(var(--color-foreground));
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
  }
/* END_SECTION:product-reels */

/* START_SECTION:product-showcase (INDEX:41) */
.ps { position: relative; }

  /* ===== HEADER ===== */
  .ps__header {
    text-align: center;
    margin-bottom: 2.4rem;
  }
  .ps__subtitle {
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: clamp(0.85rem, 0.4vw + 0.7rem, 1rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.4rem;
    color: rgba(var(--color-foreground), 0.72);
    line-height: 1.1;
  }
  .ps__title {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: clamp(2rem, 1.5vw + 1.5rem, 3.4rem);
    margin: 0;
    line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .ps__title-fam { color: rgb(var(--color-foreground)); }
  .ps__title-dim { color: rgba(var(--color-foreground), 0.72); }
  /* Image logo (e.g. the Egypt-edition lockup: Arabic + PRSSO + flag badge) is a
     two-line mark, so give it more height than the single-line SVG wordmark. */
  .ps__logo { display: block; height: 88px; width: auto; margin: 0 auto 1rem; }
  /* Inline SVG variant follows the scheme foreground (white on scheme-10). */
  .ps__logo--svg { display: flex; justify-content: center; height: 66px; margin: 0 auto 1rem; color: rgb(var(--color-foreground)); }
  .ps__logo--svg svg { display: block; height: 100%; width: auto; }

  /* ===== CAROUSEL ===== */
  /* min-height = largest possible card height across both aspect-ratios.
     With slidesPerView 1.4 (mobile) the card is ~78vw wide; with 3.4 (desktop)
     it's ~17vw. Card height = width × (ratio.h / ratio.w). The max() picks
     whichever ratio is taller — so the carousel never shrinks when the active
     card swaps to its (potentially taller) aspect. */
  .ps__carousel {
    position: relative;
    overflow: hidden;
    min-height: max(
      calc(78vw * var(--ps-ar-h) / var(--ps-ar-w)),
      calc(78vw * var(--ps-ar-a-h) / var(--ps-ar-a-w))
    );
  }
  @media (min-width: 990px) {
    .ps__carousel {
      min-height: max(
        calc(17vw * var(--ps-ar-h) / var(--ps-ar-w)),
        calc(17vw * var(--ps-ar-a-h) / var(--ps-ar-a-w))
      );
    }
  }
  /* Force LTR — Swiper's loop math mirrors under RTL and breaks the
     centered-peek layout. Explicit touch-action so iOS/Android always
     hand horizontal pans to Swiper (fixes "fails to drag" / gap-area issues). */
  .ps__swiper {
    width: 100%;
    direction: ltr;
    touch-action: pan-y pinch-zoom;
  }
  /* PRE-INIT: 1.4 mobile / 3.4 desktop slides per view — match Swiper. */
  .ps__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    overflow: hidden;
  }
  .ps__swiper:not(.swiper-initialized) .ps__slide {
    flex: 0 0 calc((100% - 14px * 0.2) / 1.2);
    min-width: 0;
  }
  @media (min-width: 990px) {
    .ps__swiper:not(.swiper-initialized) .swiper-wrapper { gap: 20px; }
    .ps__swiper:not(.swiper-initialized) .ps__slide {
      flex: 0 0 calc((100% - 20px * 4.5) / 5.5);
    }
  }
  .ps__swiper .swiper-wrapper,
  .ps__swiper .ps__slide {
    touch-action: pan-y pinch-zoom;
  }
  .ps__swiper .swiper-wrapper {
    align-items: center;
    /* Lock the cards-wrapper to the tallest possible card height so the
       layout never grows/shrinks when the active card swaps aspect-ratio. */
    min-height: max(
      calc(78vw * var(--ps-ar-h) / var(--ps-ar-w)),
      calc(78vw * var(--ps-ar-a-h) / var(--ps-ar-a-w))
    );
  }
  @media (min-width: 990px) {
    .ps__swiper .swiper-wrapper {
      min-height: max(
        calc(17vw * var(--ps-ar-h) / var(--ps-ar-w)),
        calc(17vw * var(--ps-ar-a-h) / var(--ps-ar-a-w))
      );
    }
  }

  /* Let Swiper compute slide widths from the numeric slidesPerView.
     `display: flex` centers the card vertically inside the slide so when
     the active card has a shorter aspect, the section height stays stable
     (driven by the tallest, non-active card). */
  .ps__swiper .ps__slide {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Slide reserves the TALL (active) height so the row never resizes;
       only the card inside morphs aspect-ratio, centered within it. */
    aspect-ratio: var(--ps-ar-active, 2 / 3);
    height: auto;
  }

  /* ===== CARD ===== */
  .ps-card:after {
    position: absolute;
    z-index: 0;
    inset: 0;
    content: '';
    background: linear-gradient( to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 30%);
  }
  .ps--no-product .ps-card:after { display: none; }
  .ps-card {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ps-ar, 4 / 5);
    background-color: rgb(var(--color-background));
    border-radius: 8px;
    overflow: hidden;
    /* Smooth aspect-ratio morph between active states. Safe now because
       loop:false means there's no clone-snap re-triggering the class. */
    transition: aspect-ratio 0.5s ease-out;
  }
  .swiper-slide-active .ps-card {
    aspect-ratio: var(--ps-ar-active, 1 / 1);
  }

  .ps-card__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* ===== LOADING SPINNER (shown only while the lazy video buffers) ===== */
  .ps-card__loader {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .ps-card[data-loading="true"] .ps-card__loader {
    display: flex;
  }
  .ps-card__loader svg {
    width: 30px;
    height: 30px;
    color: #fff;
    opacity: 0.92;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45));
    animation: ps-loader-spin 0.85s linear infinite;
  }
  @keyframes ps-loader-spin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .ps-card__loader svg { animation-duration: 1.8s; }
  }

  /* ===== TOP-RIGHT CONTROLS ===== */
  .ps-card__controls {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
  }

  .ps-card__sound,
  .ps-card__playpause {
    width: 30px;
    height: 30px;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    transition: background 0.15s ease;
  }
  .ps-card__sound:hover,
  .ps-card__playpause:hover { background: rgba(0, 0, 0, 0.62); }
  .ps-card__sound svg {
    width: 56%;
    height: 56%;
    display: block;
    fill: none;
    stroke: currentColor;
  }
  .ps-card__playpause svg {
    width: 44%;
    height: 44%;
    display: block;
    fill: currentColor;
    stroke: none;
  }

  /* Toggle: hide the inactive icon */
  .ps-card[data-muted="true"] .ps-card__icon--unmuted,
  .ps-card[data-muted="false"] .ps-card__icon--muted { display: none; }
  .ps-card[data-playing="true"] .ps-card__icon--play,
  .ps-card[data-playing="false"] .ps-card__icon--pause { display: none; }

  /* ===== BOTTOM PRODUCT INFO ===== */
  .ps-card__product {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.8rem;
    color: #fff;
  }
  .ps-card__product-img {
    width: 56px;
    height: auto;
    aspect-ratio: 2/2.5;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
  }
  .ps-card__product-row {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
  }
  .ps-card__product-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .ps-card__product-title {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
  }
  .ps-card__product-price {
    font-size: 0.85rem;
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
  }
  .ps-card__product-compare {
    opacity: 0.65;
    text-decoration: line-through;
  }
  .ps-card__add {
    margin-left: auto;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 0;
    position: relative;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
  }
  .ps-card__add:hover { transform: scale(1.06); }
  .ps-card__add:disabled { cursor: wait; transform: none; }
  /* Hidden label so quick-add.js has a target for its textContent swap
     (ADDING/ADDED/ERROR) without nuking our SVG children. */
  .ps-card__add-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* Plus icon and spinner share the same 28x28 box; one fades out as the
     other fades in when the global quick-add JS sets [disabled]. */
  .ps-card__add-icon,
  .ps-card__add-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s ease;
  }
  .ps-card__add-icon svg,
  .ps-card__add-spinner svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .ps-card__add-spinner {
    opacity: 0;
    animation: ps-spin 1.1s linear infinite;
  }
  .ps-card__add:disabled .ps-card__add-icon { opacity: 0; }
  .ps-card__add:disabled .ps-card__add-spinner { opacity: 1; }
  @keyframes ps-spin {
    to { transform: rotate(360deg); }
  }

  /* ===== PROGRESS / TIMELINE (active video) ===== */
  .ps__progress-wrap {
    max-width: 560px;
    margin: 1.8rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
  }
  .ps__progress-wrap[hidden] { display: none; }
  .ps__progress {
    cursor: pointer;
    padding: 8px 0;
    touch-action: none;
  }
  .ps__progress-track {
    position: relative;
    height: 4px;
    border-radius: 999px;
    background: rgba(var(--color-foreground), 0.16);
  }
  .ps__progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    border-radius: 999px;
    background: rgb(var(--color-button));
    transition: width 0.25s linear;
  }
  .ps__progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(var(--color-button));
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.15s ease, left 0.25s linear;
  }
  .ps__progress:hover .ps__progress-handle,
  .ps__progress:focus-visible .ps__progress-handle { opacity: 1; }
  .ps__progress-row { display: flex; align-items: center; gap: 0.8rem; }
  .ps__progress-row .ps__progress { flex: 1 1 auto; }
  /* Arrows — match the home carousel (.pc__navbtn): solid fill, 10px radius, colour-invert
     hover. A button-coloured border stays through the invert so the hover reads on dark. */
  .ps__nav {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1.5px solid rgb(var(--color-button));
    background: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, transform 0.14s ease;
  }
  .ps__nav:hover {
    background: rgb(var(--color-button-text));
    color: rgb(var(--color-button));
  }
  .ps__nav:active { transform: translateY(1px); }
  .ps__nav svg { width: 18px; height: 16px; }
  .ps__progress-time {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body-family);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--color-foreground), 0.6);
  }
  .ps__progress-count { color: rgba(var(--color-foreground), 0.5); }

  @media (max-width: 749px) {
    .ps-card__controls { top: 12px; right: 12px; gap: 8px; }
    .ps-card__product { left: 12px; right: 12px; bottom: 12px; padding: 0.45rem 0.55rem; gap: 0.6rem; }
    .ps-card__product-img { width: 44px; }
    .ps-card__product-title { font-size: 0.82rem; }
    .ps-card__product-price { font-size: 0.75rem; }
    .ps-card__add { width: 28px; height: 28px; }
  }
/* END_SECTION:product-showcase */

/* START_SECTION:product (INDEX:42) */
.prod {
  width: 100%;
  position: relative;
  padding-top: var(--prod-pad-top, 36px);
  padding-bottom: var(--prod-pad-bottom, 36px);
  /* one signature highlighter mark for all schemes (unified yellow, see --hl-mark) */
  --meter-mark: rgb(var(--hl-mark));
  /* per-scheme "heavy" edge = the scheme button darkened + shifted toward deep red, for a rich dark border/shadow on every scheme */
  --prod-edge: rgb(var(--color-shadow));
  /* all product-section text renders in the flavor's button colour */
  --color-foreground: var(--color-button);
  @media screen and (max-width: 999px) {
    padding-top: 0;
  }
}

/* Unified: every scheme (incl. Espresso Max / scheme-11) now uses the same beige page +
   brown glow. No per-product red glow or accent — see the unified override in
   snippets/color-schemes.liquid. */
/* On the dark scheme-11, components that use the light --color-button-text as a surface
   (the flavour switcher toggle/panel) would show the cream text invisibly — give them a
   subtly-lifted dark surface so the cream text reads. */
.prod.color-scheme-11 .prod__switch-toggle,
.prod.color-scheme-11 .prod__switch-panel {
  background: color-mix(in srgb, rgb(var(--color-foreground)) 8%, rgb(var(--color-background)));
}

/* Background texture: brand coffee-bean motif (scheme-adaptive) + a soft glow, behind the content. */
.prod__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.prod__bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.prod__bg-glow--1 {
  left: -8%;
  top: 12%;
  width: min(760px, 58vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--color-button), 0.13), rgba(var(--color-button), 0) 70%);
}
.prod__bg-glow--2 {
  right: -10%;
  top: 52%;
  width: min(680px, 50vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(var(--color-foreground), 0.05), rgba(var(--color-foreground), 0) 70%);
}

/* ====== Layout: gallery 50% | info 50% (desktop grid, reserved gap) ====== */
.prod__layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
@media (min-width: 990px) {
  .prod__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--prod-col-gap, 48px);
    align-items: start;
  }
}

/* LEFT: gallery — sticky under the header on desktop */
.prod__gallery {
  min-width: 0;
  position: relative
}
@media (min-width: 990px) {
  .prod__gallery {
    position: sticky;
    top: calc(var(--header-height, 72px) + var(--prod-sticky-offset, 16px));
    align-self: start;
  }
}
.prod__gallery-inner {
  display: flex;
  gap: var(--prod-thumb-gap, 12px);
  align-items: stretch;
}

/* Thumbs: vertical column on the left (desktop). Hidden on mobile. */
.prod__gallery-thumbs {
  flex: 0 0 var(--prod-thumb-w, 84px);
  width: var(--prod-thumb-w, 84px);
  align-self: stretch;
  max-height: 100%;
  overflow: hidden;
  padding-right: 1px;
}
.prod__gallery-thumbs .swiper-slide {
  height: auto;
}
/* Pre-init: stack thumbs vertically to match the hydrated column (no flash). */
.prod__gallery-thumbs:not(.swiper-initialized) .swiper-wrapper {
  flex-direction: column;
  height: auto;
}
.prod__gthumb {
  height: auto;
  aspect-ratio: var(--prod-thumb-ar, 1);
  border: 1px solid rgba(var(--color-foreground), 0.35);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  opacity: 0.5;
  box-sizing: border-box;
  transition: opacity 0.18s ease
  , border-color 0.18s ease;
}
.prod__gthumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prod__gthumb:hover {
  opacity: 0.85;
}
.prod__gthumb.swiper-slide-thumb-active {
  opacity: 1;
  border-color: rgb(var(--color-foreground));
}
.prod__gthumb-play {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  pointer-events: none;
}
.prod__gthumb-play svg {
  width: 13px;
  height: 13px;
}

/* Main slider */
.prod__gallery-main {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.prod__gslide {
  aspect-ratio: var(--prod-main-ar, 1);
  overflow: hidden;
  background: transparent;
}
.prod__gmedia,
.prod__gslide img,
.prod__gslide video,
.prod__gslide iframe {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.prod__gmedia--embed {
  width: 100%;
  height: 100%;
}
/* Pre-init: show only the first slide (full-width) until Swiper hydrates. */
.prod__gallery-main:not(.swiper-initialized) .prod__gslide {
  width: 100%;
}
.prod__gallery-main:not(.swiper-initialized) .prod__gslide:not(:first-child) {
  display: none;
}

/* Bullets (mobile only) */
.prod__gallery-bullets {
  position: static;
  margin-top: 12px;
  display: none;
  text-align: center;
}
.prod__gallery-bullets .swiper-pagination-bullet {
  background: rgb(var(--color-foreground));
  opacity: 0.28;
  width: 8px;
  height: 8px;
  transition: opacity 0.18s ease
  , width 0.18s ease
  , border-radius 0.18s ease;
}
.prod__gallery-bullets .swiper-pagination-bullet-active {
  opacity: 1;
  width: 22px;
  border-radius: 6px;
}

/* RIGHT: info */
.prod__info {
  min-width: 0;
}
@media (max-width: 989px) {
  .prod__info {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    margin-top: 1.6rem;
  }
}

.prod__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 768px) {
  .prod__form {
    gap: 1rem;
  }
}

/* Row 1: badge */
.prod__badge-row {
  display: flex;
}
.prod__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 2px;
  background-color: var(--badge-bg, rgb(var(--color-foreground)));
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-body-family);
  font-weight: 500;
  font-size: 0.72rem;
  line-height: 1.5;
}

.prod__add-bag path {
  stroke: var(--color-background)
}
.prod__add-bag {
  width: 20px;
  height: 20px;
}
.prod__title {
  margin: 0;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  font-size: 1.5rem;
  color: rgb(var(--color-foreground));
}

/* Row 4: description + READ MORE */
.prod__desc {
  color: rgb(var(--color-foreground));
  font-size: 0.95rem;
  line-height: 1.55;
}
.prod__desc-short {
  margin: 0;
}
.prod__desc-full {
  margin: 0;
}
.prod__desc-full p {
  margin: 0 0 0.6rem;
}
.prod__desc-full p:last-child {
  margin-bottom: 0;
}
.prod__desc-more {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--font-heading-family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: rgb(var(--color-foreground));
  font-size: inherit;
}
.prod__desc-more:hover {
  text-decoration: underline;
}

.prod__price-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.prod__price {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: 1.4rem;
  line-height: 1;
  color: rgb(var(--color-foreground));
}
.prod__compare {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  font-size: 1.1rem;
  line-height: 1;
  color: rgb(var(--color-foreground));
  opacity: 0.5;
  text-decoration: line-through;
}
.prod__compare[hidden],
.prod__savings[hidden],
.prod__sale[hidden] {
  display: none;
}
.prod__savings {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background-color: var(--sale);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.2;
}
.prod__sale {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 0;
  background-color: var(--sale);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.82rem;
  line-height: 1.1;
}
.prod__sale-icon {
  width: 13px;
  height: 13px;
  fill: currentColor;
  flex-shrink: 0;
}
.prod__sale-icon path {
  stroke: none;
}

.prod__reviews {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  color: rgb(var(--color-foreground));
  font-size: 0.95rem;
}
.prod__stars {
  position: relative;
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 1px;
  color: rgba(var(--color-foreground), 0.25);
}
.prod__stars-bg {
  display: inline-block;
}
.prod__stars-fg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #FFC107;
  width: calc(var(--prod-rv, 0) / 5 * 100%);
  white-space: nowrap;
}
.prod__rv {
  font-weight: 500;
}
.prod__rc,
.prod__sold {
  color: rgba(var(--color-foreground), 0.75);
}

/* Variants */
.prod__variant-group {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.prod__variant-label {
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  color: rgb(var(--color-foreground));
  padding: 0;
}
.prod__color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.prod__color {
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid rgb(var(--color-foreground));
  border-radius: 0;
  cursor: pointer;
  position: relative;
  outline-offset: 2px;
  transition: outline-color 0.12s ease;
}
.prod__color.is-active {
  outline: 2px solid rgb(var(--color-foreground));
}
.prod__color-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--swatch, rgb(var(--color-foreground)));
  background-size: cover;
  background-position: center;
}
.prod__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.prod__pill {
  padding: 0.55rem 1rem;
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  border: 1px solid rgb(var(--color-foreground));
  border-radius: 0;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.12s ease
  , color 0.12s ease;
}
.prod__pill.is-active {
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}


/*
   Out-of-stock variant values: diagonal strike + dim. mix-blend-mode 
   keeps the line visible on any swatch/background.
*/
.prod__color.is-unavailable,
.prod__pill.is-unavailable {
  position: relative;
  overflow: hidden;
  opacity: 0.55;
}
.prod__color.is-unavailable::after,
.prod__pill.is-unavailable::after {
  content: '';
  position: absolute;
  left: -25%;
  top: 50%;
  width: 150%;
  height: 1.5px;
  background-color: #fff;
  mix-blend-mode: difference;
  transform: translateY(-50%) rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
}

/* ====== BUNDLE LIST ====== */
.prod__bundle {
  display: flex;
  flex-direction: column;
}
.prod__bundle-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  position: relative;
}
.prod__bundle-extras-slot {
  display: contents;
}

.prod__bcard {
  --bcard-img-w: 72px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.3rem;
  background: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-foreground));
  border-radius: 10px;
  box-sizing: border-box;
}
.prod__bcard[hidden] {
  display: none;
}

.prod__bcard-img {
  flex: 0 0 var(--bcard-img-w);
  width: var(--bcard-img-w);
  aspect-ratio: var(--prod-ar, 1);
  background: rgba(var(--color-foreground), 0.04);
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  display: block;
}
.prod__bcard-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.prod__bcard-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.prod__bcard-title {
  margin: 0;
  font-family: var(--font-body-family);
  font-style: var(--font-body-style);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.25;
  color: rgb(var(--color-foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.prod__bcard-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.prod__bcard--current .prod__bcard-price {
  color: rgb(var(--color-foreground));

}
.prod__bcard-price {
  font-family: var(--font-body-family);
  font-weight: 700;
  font-size: 0.95rem;
  color: rgb(var(--color-button));
}
.prod__bcard-compare {
  font-weight: 700;
  font-family: var(--font-body-family);
  font-size: 0.875rem;
  color: rgba(var(--color-foreground), 0.5);
  text-decoration: line-through;
}

.prod__bcard-qty {
  flex: 0 0 auto;
  display: inline-flex;
  padding-right: 0.4rem;
  align-items: center;
  gap: 6px;
}
.prod__bcard-qty-btn {
  width: 26px;
  height: 26px;
  padding: 2px;
  background: rgb(var(--color-background));
  border: 1px solid rgba(var(--color-foreground), 0.7);
  border-radius: 4px;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease;
}
.prod__bcard-qty-btn:hover {
  opacity: 0.7;
}
.prod__bcard-qty-btn.is-disabled,
.prod__bcard-qty-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.prod__bcard-qty-value {
  min-width: 18px;
  text-align: center;
  font-family: var(--font-heading-family);
  font-size: 0.9rem;
  color: rgb(var(--color-foreground));
}

.prod__bcard-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-foreground));
  color: rgb(var(--color-foreground));
  line-height: 1;
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
}
.prod__bcard-remove:hover {
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
}

.prod__bcard-add-wrap {
  position: relative;
}
.prod__bcard-add-wrap[hidden] {
  display: none;
}
.prod__bcard-add {
  width: 100%;
  min-height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: rgba(var(--color-foreground), 0.03);
  color: rgb(var(--color-foreground));
  border: 1.5px dashed rgba(var(--color-foreground), 0.55);
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease
  , border-color 0.15s ease;
}
.prod__bcard-add:hover {
  background-color: rgba(var(--color-foreground), 0.06);
  border-color: rgb(var(--color-foreground));
}
.prod__bcard-add svg {
  width: 28px;
  height: 28px;
}

/* Overlay anchored to + card: expands UPWARD (bottom flush with + card top). */
.prod__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 8px);
  background: rgb(var(--color-background));
  border: 1px solid rgb(var(--color-foreground));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 0.5rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 360px;
  overflow-y: auto;
  /* Enter animation */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom center;
  transition: opacity 0.22s ease
  , transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.prod__overlay.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.prod__overlay[hidden] {
  display: none;
}

/* Overlay cards: whole card is the click target, smaller image, bigger title */
.prod__bcard--source {
  --bcard-img-w: 64px;
  border: 0;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s ease
  , transform 0.15s ease;
}
.prod__bcard--source:hover {
  background-color: rgba(var(--color-foreground), 0.05);
}
.prod__bcard--source:hover .prod__bcard-add-btn {
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  transform: scale(1.04);
}
.prod__bcard--source[hidden] {
  display: none;
}
.prod__bcard--source .prod__bcard-title {
  font-size: 1rem;
}
.prod__bcard--source .prod__bcard-img {
  border-radius: 6px;
}

/* ADD pill — rounded, slightly bigger */
.prod__bcard-add-btn {
  flex: 0 0 auto;
  padding: 0.55rem 1.2rem;
  background: rgb(var(--color-foreground));
  color: rgb(var(--color-background));
  border: 0;
  border-radius: 999px;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: none;
  /* card-level click handles add */
  transition: background-color 0.15s ease
  , color 0.15s ease
  , transform 0.15s ease;
}

/* Enter/leave animations for cards moved into the bundle list */
.prod__bcard {
  transition: opacity 0.28s ease
  , transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod__bcard.is-entering {
  opacity: 0;
  transform: translateY(-6px) scale(0.97);
}
.prod__bcard.is-leaving {
  opacity: 0;
  transform: translateX(24px) scale(0.96);
}

/* Buy row — qty flush against ATC; separated from variants by a light rule */
.prod__buy {
  display: flex;
  gap: 0;
  align-items: stretch;
  border-top: 1px solid rgba(var(--color-foreground), 0.15);
  padding-top: 1.2rem;
  margin-top: 0.2rem;
}
.prod__qty {
  --prod-qty-h: 46px;
  display: inline-flex;
  align-items: stretch;
  height: var(--prod-qty-h);
  border: 1px solid rgb(var(--color-foreground));
  border-radius: 4px 0 0 4px;
  border-right: 0;
  overflow: hidden;
  background: rgb(var(--color-background));
  flex: 0 0 auto;
}
.prod__qty-btn {
  width: 42px;
  height: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.prod__qty-btn svg {
  width: 16px;
  height: 16px;
}
.prod__qty-btn:hover {
  opacity: 0.7;
}
.prod__qty-input {
  width: 38px;
  height: 100%;
  text-align: center;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-heading-family);
  font-size: 1rem;
  color: rgb(var(--color-foreground));
  -moz-appearance: textfield;
}
.prod__qty-input::-webkit-outer-spin-button,
.prod__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.prod__add {
  flex: 1 1 auto;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0 1.2rem;
  background-color: rgb(var(--color-foreground));
  color: rgb(var(--color-button-text));
  border-radius: 0;
  cursor: pointer;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  font-size: 1.1rem;
  line-height: 1;
  border-radius: 4px;
  transition: transform 0.12s ease
  , box-shadow 0.12s ease
  , opacity 0.12s ease;
}

.prod__add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.prod__add-sep {
  opacity: 0.85;
}

/* Row 7: Free delivery note */
.prod__shipping {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(var(--color-foreground), 0.8);
}
.prod__shipping strong {
  color: rgb(var(--color-foreground));
  font-weight: 700;
}
.prod__shipping-link {
  color: rgba(var(--color-foreground), 0.6);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prod__shipping-link:hover {
  color: rgb(var(--color-foreground));
}

/* Row 8: We accept label (font-size inherits from .prod__payments) */
.prod__payments-label {
  flex: 0 0 auto;
  font-weight: 700;
}

/* Payments */
.prod__payments {
  color: rgb(var(--color-foreground));
  font-size: 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.prod__payments-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.prod__payments-list li {
  display: inline-flex;
  align-items: center;
}
.prod__payments-icon {
  width: 32px;
  height: 24px;
  object-fit: contain;
}
.prod__payments-list svg {
  width: 32px;
  height: 24px;
}

/* FAQs */
.prod__faqs {
  display: flex;
  flex-direction: column;
  margin-top: 0.6rem;
}
.prod__faq {
  border-top: 1px solid rgb(var(--color-foreground), 0.1);
}
.prod__faq:last-child {
  border-bottom: 1px solid rgb(var(--color-foreground), 0.1);
}
.prod__faq-toggle {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0.8rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  color: rgb(var(--color-foreground));
  text-align: left;
  @media screen and (max-width: 999px) {
    padding: 0.5rem 0;
  }
}
.prod__faq-question {
  flex: 1;
  font-family: var(--font-heading-family);
  font-style: var(--font-heading-style);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  font-size: 1.375rem;
  line-height: 1.25;
  color: rgb(var(--color-foreground));
  @media screen and (max-width: 999px) {
    font-size: 1rem;
  }
}
.prod__faq-question p {
  margin: 0;
}
.prod__faq-arrow-box {
  flex: 0 0 auto;
  position: relative;
  width: 40px;
  height: 40px;
  color: rgb(var(--color-foreground));
}
.prod__faq-arrow-box::before,
.prod__faq-arrow-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transition: opacity 0.22s ease;
}
.prod__faq-arrow-box::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.prod__faq-arrow-box::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}
.prod__faq-toggle[aria-expanded="true"] .prod__faq-arrow-box::after {
  opacity: 0;
}
@media screen and (max-width: 999px) {
  .prod__faq-arrow-box {
    width: 32px;
    height: 32px;
  }
  .prod__faq-arrow-box::before {
    width: 14px;
  }
  .prod__faq-arrow-box::after {
    height: 14px;
  }
}
.prod__faq-panel {
  overflow: hidden;
}
.prod__faq-answer {
  padding: 0 0 1.2rem;
  color: rgba(var(--color-foreground), 0.85);
  font-size: 0.95rem;
  line-height: 1.55;
  @media screen and (max-width: 999px) {
    font-size: 0.8rem;
  }
}
.prod__faq-answer p:last-child {
  margin-bottom: 0;
}

/* Mobile */
@media (max-width: 989px) {
  .prod__gallery {
    width: 100%;
    padding: 0;
  }
  .prod__gallery-thumbs {
    display: none !important;
  }
  .prod__gallery-bullets {
    display: block;
    /* Force normal flow so the dots sit BELOW the gallery, not absolutely over the
       last image (Swiper's .swiper-pagination sets position:absolute + bottom, which
       otherwise overlaps the infographic text at the image's bottom edge). */
    position: static !important;
    margin-top: 12px;
    width: 100%;
  }
  .prod__qty {
    --prod-qty-h: 40px;
  }
  .prod__qty-btn {
    width: 30px;
  }
  .prod__qty-input {
    width: 24px;
  }
  .prod__add {
    height: 40px;
    font-size: 0.85rem;
    padding: 0 0.9rem;
    gap: 0.45rem;
  }
  .prod__bcard {
    --bcard-img-w: 80px;
    padding: 0.5rem;
    gap: 0.6rem;
  }
  .prod__bcard-title {
    font-size: 0.85rem;
  }
}
@media (min-width: 768px) and (max-width: 989px) {
  .prod__info {
    padding-left: 5rem;
    padding-right: 5rem;
  }
}


/*
   ============================================================ 
   BUY BOX (info column) — rows 1–13. Centered, scheme-tinted. 
   ============================================================
*/
.prod__form {
  text-align: center;
  align-items: stretch;
}
.prod__form > * {
  width: 100%;
}

/* Row 1: Attention notice */
.prod__attn {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
  padding: 0.85rem 1rem;
  border: 2px solid rgba(var(--color-button));
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  @media (max-width: 990px) {
    flex-direction: column;
  }
}
.prod__attn-icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  animation: prod-attn-pulse 2.6s ease-in-out infinite;
}
.prod__attn-icon svg {
  width: 18px;
  height: 18px;
}
@keyframes prod-attn-pulse {
  0,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--color-button), 0.35);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(var(--color-button), 0);
  }
}
.prod__attn-text > p {
  display: inline;
  margin: 0;
}
.prod__attn-text .prod__attn-label {
  font-weight: 700;
  color: rgb(var(--color-button));
  padding: 0 3px;
  background: linear-gradient(rgba(var(--color-button), 0.3), rgba(var(--color-button), 0.3)) no-repeat 0 100% / 100% 38%;
}
.prod__attn-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgb(var(--color-button))
}
.prod__attn-text > :first-child {
  margin-top: 0;
}
.prod__attn-text > :last-child {
  margin-bottom: 0;
}
.prod__attn-text strong {
  color: rgb(var(--color-button));
  font-weight: 700;
}
.prod__attn-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgb(var(--color-button));
  border-radius: 5px;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--color-button));
  text-decoration: none;
  transition: background-color 0.15s ease
  , color 0.15s ease;
}
.prod__attn-btn:hover {
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
}

/* Row 2: Rating — start-aligned (left in EN / right in AR), not centered */
.prod__rating {
  display: flex;
  justify-content: flex-start;
}
.prod__rating .card-product__rating-count-wrap {
  text-decoration: none;
  font-size: 0.82rem;
}

/* Row 3: Title */
.prod__title {
  font-size: 1.9rem;
  letter-spacing: 0.01em;
  color: rgb(var(--color-button));
}
@media (min-width: 990px) {
  .prod__title {
    font-size: 2.05rem;
  }
}

/* Rows 3+4: Title + price on one line, space-between */
.prod__title-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.prod__title-price .prod__title {
  text-align: start;
  min-width: 0;
}
.prod__title-price .prod__price-line {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Row 4: Price */
.prod__price-line {
  justify-content: center;
}
.prod__price {
  font-size: 1.5rem;
  font-weight: 700;
  color: rgb(var(--color-button));
}

/* Row 5: Tax / small note */
.prod__tax {
  margin: 0;
  text-align: left;
  font-size: 0.8rem;
  color: rgba(var(--color-foreground));
}

/* Row 6: Variant pickers — centered */
.prod__variant-group {
  align-items: center;
}
.prod__variant-label {
  text-align: center;
}
.prod__color-swatches,
.prod__pills {
  justify-content: center;
}

/* Row 7: Flavor switcher — moved to the very end of the buy box (after tabs) */
.prod__switch {
  position: relative;
  text-align: start;
  order: 10; /* flex reorder: render last inside .prod__form, after tabs */
}
.prod__switch-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.8rem;
  background: rgb(var(--color-button-text));
  border: 1.5px solid var(--prod-edge);
  border-radius: 7px;
  box-shadow: 3px 4px 0 1px var(--prod-edge);
  cursor: pointer;
  color: rgb(var(--color-foreground));
  transition: border-color 0.15s ease
  , box-shadow 0.15s ease;
}
.prod__switch.is-open .prod__switch-toggle {
  border-color: rgb(var(--color-button));
  border-bottom-color: transparent;
  border-radius: 6px 6px 0 0;
}
.prod__switch-current {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex: 1 1 auto;
  min-width: 0;
}
.prod__switch-thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(var(--color-foreground), 0.05);
}
.prod__switch-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.prod__switch-name {
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.9rem;
  color: rgb(var(--color-foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prod__switch-chevron {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}
.prod__switch.is-open .prod__switch-chevron {
  transform: rotate(180deg);
}
.prod__switch-panel {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: 100%;
  background: rgb(var(--color-button-text));
  border: 1.5px solid rgb(var(--color-button));
  border-top: 0;
  border-radius: 0 0 6px 6px;
  padding: 0.35rem;
  max-height: 340px;
  overflow-y: auto;
  transform-origin: top center;
  box-shadow: 3px 4px 0 1px var(--prod-edge);

}
.prod__switch-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: rgb(var(--color-foreground));
  transition: background-color 0.14s ease;
}
.prod__switch-item:hover {
  background: rgba(var(--color-button), 0.09);
}
.prod__switch-item.is-current {
  background: rgba(var(--color-button), 0.12);
}
.prod__switch-item.is-current .prod__switch-name {
  color: rgb(var(--color-button));
}
.prod__switch-item .prod__switch-thumb {
  width: 44px;
  height: 44px;
}
.prod__switch-check {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: rgb(var(--color-button));
}

/* Row 8: Flavor meters + highlighter underline */
.prod__meters {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 5vw, 3rem);
  padding: 1.5rem 0;
}
.prod__meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.prod__meter-dots {
  display: inline-flex;
  gap: 5px;
}
.prod__meter-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(var(--color-button), 0.28);
}
.prod__meter-dot.is-on {
  background: rgb(var(--color-button));
}
.prod__meter-label {
  display: inline-block;
  padding: 0 3px;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: rgb(var(--color-foreground));
  background: linear-gradient(var(--meter-mark), var(--meter-mark)) no-repeat 0 100% / 100% 38%;
}

/* Row 9: Notes */
.prod__notes {
  margin: 0;
  text-align: start; /* left in EN (LTR), right in AR (RTL) — not centered */
  font-size: 0.95rem;
  color: rgba(var(--color-foreground));
}
.prod__notes-label {
  color: rgb(var(--color-foreground));
}
.prod__notes-val {
  font-weight: 700;
}

/* Row 10: Buy row — quantity + add to cart, spaced & rounded */
.prod__buy {
  gap: 0.7rem;
  align-items: stretch;
}
.prod__qty {
  --prod-qty-h: 48px;
  border: 1.5px solid var(--prod-edge);
  border-radius: 6px;
  box-shadow: 3px 4px 0 1px var(--prod-edge);
  transition: border-color 0.15s ease
  , box-shadow 0.15s ease;
}
.prod__qty:focus-within {
  border-color: rgb(var(--color-button));
  box-shadow: 7px 10px 0 -1px var(--prod-edge);
}
.prod__add {
  height: 48px;
  border-radius: 6px;
  background-color: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  box-shadow: 3px 4px 0 1px rgba(var(--color-button), 0.4);
  transition: box-shadow 0.15s ease;
}
.prod__add:hover {
  box-shadow: 4px 6px 0 1px rgba(var(--color-button), 0.55);
}
.prod__add:active {
  transform: translateY(0);
  box-shadow: none;
}
.prod__add-bag path {
  stroke: rgb(var(--color-button-text));
}

/* Row 10: Buy it now */
.prod__buynow {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--color-background));
  color: rgb(var(--color-button));
  border: 1.5px solid rgba(var(--color-button), 0.5);
  border-radius: 6px;
  box-shadow: 3px 3px 0 1px var(--prod-edge);
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.15s ease
  , color 0.15s ease
  , border-color 0.15s ease
  , transform 0.12s ease
  , opacity 0.15s ease;
}
.prod__buynow:hover {
  box-shadow: 3px 3px 0 1px rgba(var(--color-button), 0.4);
  background: rgb(var(--color-button));
  color: rgb(var(--color-button-text));
  border-color: rgb(var(--color-button));
  transform: translateY(-1px);
}
.prod__buynow:active {
  transform: translateY(0);
}
.prod__buynow:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* buttons/controls use the body font, not the heading font */
.prod__add,
.prod__buynow,
.prod__attn-btn,
.prod__qty-input,
.prod__switch-name {
  font-family: var(--font-body-family);
  font-style: normal;
}
.prod__buynow.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* MOBILE (≤749px): hide the inline buy row. On phones the mobile sticky bar (.psb)
   is the only buy UI and stays visible at all times (see the psbMobile guard in JS).
   Desktop keeps the inline buy row + shows the sticky bar on scroll. */
@media (max-width: 749px) {
  .prod__buy,
  .prod__buynow { display: none; }
}

/* Row 11: Feature badges */
.prod__fbadges {
  list-style: none;
  margin: 0 0 0.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1.6rem;
}
.prod__fbadge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.prod__fbadge-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: rgb(var(--color-foreground));
}
.prod__fbadge-icon svg {
  width: 100%;
  height: 100%;
}
.prod__fbadge-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.prod__fbadge-text {
  font-size: 0.85rem;
  color: rgba(var(--color-foreground), 0.85);
}

/* Row 12: Description (start-aligned by language, clamped, animated) */
.prod__desc {
  text-align: start; /* left in EN (LTR), right in AR (RTL) via <html dir> */
}
.prod__desc-clip {
  position: relative;
  max-height: 5.4em;
  overflow: hidden;
}
.prod__desc.is-open .prod__desc-clip {
  max-height: none;
}
.prod__desc-clip::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.2em;
  background: linear-gradient(to bottom, rgba(var(--color-background), 0), rgb(var(--color-background)));
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.prod__desc.is-open .prod__desc-clip::after {
  opacity: 0;
}
.prod__desc-full {
  color: rgba(var(--color-foreground), 0.9);
  font-size: 0.95rem;
  line-height: 1.6;
}
.prod__desc-full p {
  margin: 0 0 0.6rem;
}
.prod__desc-full p:last-child {
  margin-bottom: 0;
}
.prod__desc-more {
  background: none;
  border: 0;
  margin-top: 0.5rem;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-heading-family);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  color: rgb(var(--color-foreground));
}
.prod__desc-more:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Row 13: Tabs */
.prod__tabs {
  margin-top: 1.6rem;
  text-align: center;
}
.prod__tabs-nav {
  position: relative;
  display: flex;
  gap: 0.4rem;
  border-bottom: 1px solid rgba(var(--color-button), 0.25);
}
.prod__tab-btn {
  flex: 1 1 0;
  min-width: 0;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.7rem 0.4rem;
  font-weight: var(--font-heading-weight);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.76rem;
  color: rgba(var(--color-foreground));
  transition: color 0.18s ease;
}
.prod__tab-btn.is-active {
  color: rgb(var(--color-button));
}
.prod__tabs-ind {
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 2px;
  width: 0;
  background: rgb(var(--color-button));
  border-radius: 2px;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1)
  , width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.prod__tabs-panels {
  padding-top: 1.4rem;
  text-align: start; /* heading + body: left in EN (LTR), right in AR (RTL) */
}
.prod__tab-panel {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.prod__tab-panel[hidden] {
  display: none;
}
.prod__tab-media {
  flex: 0 0 auto;
}
.prod__tab-media img {
  max-width: 130px;
  height: auto;
  display: block;
}
.prod__tab-text {
  flex: 1 1 auto;
  min-width: 0;
}
.prod__tab-heading {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading-family);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
  color: rgb(var(--color-button));
}
.prod__tab-body {
  color: rgba(var(--color-foreground), 0.7);
  font-size: 0.9rem;
  line-height: 1.55;
}
.prod__tab-body p:last-child {
  margin-bottom: 0;
}
/* END_SECTION:product */

/* START_SECTION:prsso-connected (INDEX:43) */
.conn {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* ===== WAVE ===== */
  /* Bigger than the section + shifted down so the blob's wavy top edge shows. */
  .conn__wave {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 206%;
    z-index: 0;
    fill: rgb(var(--color-wave, 240, 231, 220));
    pointer-events: none;
  }

  /* ===== CENTER STACK ===== */
  .conn__center {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 460px;
    padding: 2.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .conn__tag {
    display: inline-block;
    background: #f4c64e;
    color: rgb(var(--color-background));
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    padding: 0.55rem 1rem;
    border-radius: 5px;
    transform: rotate(-3.5deg);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    margin-bottom: 1.1rem;
  }
  .conn__title {
    font-family: var(--font-heading-family);
    font-weight: 700;
    color: rgb(var(--color-background));
    font-size: clamp(2.6rem, 4vw + 1rem, 4.4rem);
    line-height: 0.98;
    letter-spacing: -0.01em;
    margin: 0;
  }
  .conn__subtitle {
    font-family: var(--font-body-family);
    font-weight: 500;
    color: rgba(var(--color-background), 0.72);
    font-size: clamp(1.2rem, 0.6vw + 1rem, 1.6rem);
    margin: 0.6rem 0 0;
  }
  .conn__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    padding: 0.65rem 3rem;
    background: rgb(var(--color-background));
    color: rgb(var(--color-wave, 240, 231, 220));
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.05rem;
    text-decoration: none;
    border-radius: 6px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow:  3px 4px 0px 1px rgb(var(--color-button),0.7)
  }
  .conn__btn:hover {
    transform: translate(1px ,1px);
    box-shadow: none;
  }

  /* ===== SIDE IMAGES — tall blocks that frame the sides ===== */
  .conn__media {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
  }
  .conn__img {
    position: absolute;
    bottom: 10px;
    height: calc(100% - 36px);
    width: auto;
    object-fit: cover;
  }
  .conn__img--left { left: clamp(-500px, calc(-673.913px + 17.391vw), -340px); }
  .conn__img--right { right: clamp(-500px, calc(-673.913px + 17.391vw), -340px); }

  /* ===== MOBILE / STACKED (< 990px) ===== */
  @media (max-width: 989px) {
    .conn {
      flex-direction: column;
      min-height: 0;
    }
    /* Swap the full-height mound for a cream card with a curved bottom. */
    .conn__wave {
      top: 39px;
      left: -34%;
      width: 155%;
      height: 78%;
    }
    .conn__center {
      order: 1;
      width: 100%;
      max-width: none;
      padding: 2.4rem 1.6rem 3rem;
    }
    .conn__media {
      position: relative;
      order: 2;
      width: 100%;
      max-width: 560px;
      margin: 1.6rem auto 0;
      overflow: hidden; /* clips the half of each image that's shifted off */
    }
    .conn__img {
      width: 100%;         /* each image is full width */
      height: auto;        /* natural aspect — no forced ratio, no distortion */
      max-width: none;
      min-width: 0;
      display: block;
      border-radius: 0;
    }
    /* Left image shifted OUT to the left (its right half shows); right image shifted OUT
       to the right (its left half shows). The left one stays in flow to set the height;
       the right one overlays, bottom-aligned. */
    .conn__img--left {
      position: relative;
      left: auto;
      right: auto;
      bottom: auto; /* reset the desktop base's bottom:10px, which shifts a relative element up */
      transform: translateX(calc(-50% - 4px)); /* 4px extra out → 8px gap at the centre */
    }
    .conn__img--right {
      position: absolute;
      left: 0;
      right: auto;
      bottom: 0;
      transform: translateX(calc(50% + 4px));
    }
  }

  /* ===== Side images reveal — both start together at the CENTRE, then spread out to
     their resting side positions when the footer scrolls into view (theme .section-active
     trigger). Only `transform`/`opacity` animate, so the left/right anchoring is untouched.
     Desktop spread; mobile (stacked) gets a gentle fade-up. ===== */
  @media (min-width: 990px) and (prefers-reduced-motion: no-preference) {
    .section-connected-inner:not(.section-active) .conn__img--left {
      opacity: 0;
      transform: translateX(50vw);
    }
    .section-connected-inner:not(.section-active) .conn__img--right {
      opacity: 0;
      transform: translateX(-50vw);
    }
    .section-connected-inner.section-active .conn__img--left {
      animation: connSpreadLeft 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    }
    .section-connected-inner.section-active .conn__img--right {
      animation: connSpreadRight 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
    }
    @keyframes connSpreadLeft {
      from { opacity: 0; transform: translateX(50vw); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes connSpreadRight {
      from { opacity: 0; transform: translateX(-50vw); }
      to { opacity: 1; transform: translateX(0); }
    }
  }
  @media (max-width: 989px) and (prefers-reduced-motion: no-preference) {
    /* Reveal via OPACITY only — animating transform here would clobber the left/right
       translateX shift (fill-mode:both holds translateY(0) and wins over it). */
    .section-connected-inner:not(.section-active) .conn__img {
      opacity: 0;
    }
    .section-connected-inner.section-active .conn__img {
      animation: connFadeUp 0.7s ease both;
    }
    @keyframes connFadeUp {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  }
/* END_SECTION:prsso-connected */

/* START_SECTION:prsso-divider (INDEX:44) */
.pdiv { width: 100%; background: rgb(var(--color-background)); overflow: hidden; }
  .pdiv__svg { display: block; width: 100%; }
/* END_SECTION:prsso-divider */

/* START_SECTION:prsso-flavours (INDEX:45) */
/* Unified BEIGE background on the flavour carousel — the JS still swaps color-{scheme}
     per active flavour, but this pins the background; accents (--color-button) keep swapping.
     Doubled class (.pf.pf) outranks the .color-{scheme} rule regardless of load order. */
  .pf.pf { --color-background: 244, 239, 232; } /* #f4efe8 */
  .pf {
    position: relative; overflow: hidden; isolation: isolate; text-align: center;
    background: rgb(var(--color-background)); color: rgb(var(--color-button));
    padding: var(--pf-pad-y, 56px) 0;
    transition: background-color 0.55s ease, color 0.55s ease;
    font-family: var(--font-body-family);
  }
  .pf__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }

  /* Smoothly cross-fade every text/mark colour when the active flavour (scheme) changes. */
  .pf__eyebrow, .pf__title, .pf__review, .pf__review-text, .pf__review-title, .pf__review-by,
  .pf__notes, .pf__meter-label, .pf__meter-dot, .pf__verified {
    transition: color 0.55s ease, background-color 0.55s ease, border-color 0.55s ease;
  }
  .pf__verified svg { transition: stroke 0.55s ease; }

  .pf__eyebrow {
    font-weight: 500; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: rgb(var(--color-button)); opacity: 0.75;
  }
  .pf__title {
    margin: 0.2rem 0 0; font-family: var(--font-heading-family); font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.1; color: rgb(var(--color-button));
  }
  .pf__mark {
    position: relative; display: inline-block; padding: 0 0.12em; white-space: nowrap;
    background: linear-gradient(rgb(var(--hl-mark)), rgb(var(--hl-mark))) no-repeat 0 100% / 100% 35%;
  }

  /* ── Pyramid carousel ── */
  .pf__stage { position: relative; width: 100%; max-width: 1200px; margin: 2.6rem auto 0; height: clamp(240px, 26vw, 320px); }
  .pf__carousel { position: absolute; inset: 0; }
  .pf__slide {
    position: absolute; left: 50%; top: 50%; width: 23%; aspect-ratio: 1; display: block;
    transform: translate(-50%, -50%); transform-origin: center center; will-change: left, top, transform, opacity;
    transition: left 0.6s cubic-bezier(0.5, 0, 0.2, 1), top 0.6s cubic-bezier(0.5, 0, 0.2, 1), transform 0.6s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.5s ease;
  }
  .pf__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; pointer-events: none; }
  /* Tin in front; the flavour texture floats behind it (same box, slightly larger to frame it). Both drift slowly, out of phase, for depth. */
  .pf__slide-tin { z-index: 2; filter: drop-shadow(0 20px 28px rgba(0, 0, 0, 0.28)); }
  .pf__slide-tex { z-index: 1; transform: scale(1.32); opacity: 0.9; }
  .pf__slide:not(.is-active) .pf__slide-tex { opacity: 0.5; }
  @media (prefers-reduced-motion: no-preference) {
    .pf__slide-tin { animation: pf-float-tin 6.5s ease-in-out infinite; animation-delay: calc(var(--pf-i, 0) * -1.7s); }
    .pf__slide-tex { animation: pf-float-tex 9s ease-in-out infinite; animation-delay: calc(var(--pf-i, 0) * -2.3s); }
  }
  @keyframes pf-float-tin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5.5%); } }
  @keyframes pf-float-tex { 0%, 100% { transform: scale(1.32) translateY(2%) rotate(-1.5deg); } 50% { transform: scale(1.32) translateY(-3%) rotate(2deg); } }
  .pf__slide { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
  .pf__slide.is-hidden { pointer-events: none; }
  .pf__slide.is-active { cursor: pointer; }
  .pf__slide:not(.is-active) { cursor: pointer; }

  /* ── Review ── */
  .pf__review { margin: 1.6rem auto 0; max-width: 46ch; min-height: 4.5em; color: rgb(var(--color-button)); }
  .pf__review-text { margin: 0; font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.55; }
  .pf__review-title { display: block; margin-top: 0.6rem; font-family: var(--font-heading-family); font-weight: 500; font-size: 1.05rem; }
  .pf__review-by { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 0.5rem; font-size: 0.9rem; font-weight: 500; }
  .pf__verified { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--color-button)); }
  .pf__verified svg { width: 11px; height: 11px; stroke: rgb(var(--color-background)); fill: none; }

  /* ── Meters (reuse the PDP look, all in button colour) ── */
  .pf__meters { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.2rem, 5vw, 3rem); margin-top: 1.4rem; }
  .pf__meters:empty { display: none; }
  .pf__meter { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
  .pf__meter-dots { display: inline-flex; gap: 5px; }
  .pf__meter-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(var(--color-button), 0.28); }
  .pf__meter-dot.is-on { background: rgb(var(--color-button)); }
  .pf__meter-label {
    font-family: var(--font-heading-family); font-weight: 500; font-size: 0.92rem; color: rgb(var(--color-button));
    background: linear-gradient(rgb(var(--hl-mark)), rgb(var(--hl-mark))) no-repeat 0 100% / 100% 38%;
    padding: 0 3px;
  }

  .pf__notes { margin: 1rem 0 0; font-size: 0.95rem; color: rgb(var(--color-button)); }
  .pf__notes:empty { display: none; }
  .pf__notes b { font-weight: 700; }

  /* ── Add to cart — bordered, no fill, hard shadow in button colour ── */
  .pf__buy { margin-top: 1.5rem; }
  .pf__add {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-width: 220px; height: 50px; padding: 0 1.6rem; cursor: pointer;
    background: transparent; color: rgb(var(--color-button));
    border: 1.5px solid rgb(var(--color-button)); border-radius: 6px;
    box-shadow: 3px 3px 0 1px rgb(var(--color-button));
    font-family: var(--font-body-family); font-weight: 500; font-size: 1rem; letter-spacing: 0.03em; text-transform: uppercase;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
  }
  .pf__add:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 1px rgb(var(--color-button)); }
  .pf__add:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 1px rgb(var(--color-button)); }
  .pf__add.is-loading { opacity: 0.7; pointer-events: none; }
  .pf__add-sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.6; }
  .pf__add-sep:empty { display: none; }

  @media (max-width: 749px) {
    .pf__stage { margin: 1.2rem auto 0; gap:0.5rem; height: clamp(125px,39vw,190px); }
    .pf__slide { width: 34%; }
  }
/* END_SECTION:prsso-flavours */

/* START_SECTION:prsso-hero-feature (INDEX:46) */
.phf {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
  }

  /* ===== ROW 1 ===== */
  .phf__row1 {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: clamp(1.5rem, 3vw, 3rem);
    align-items: center;
  }
  .phf__col { min-width: 0; }

  /* LEFT */
  .phf__left { display: flex; flex-direction: column; align-items: flex-start; }
  .phf__eyebrow {
    font-family: var(--font-heading-family);
    font-weight: 500;
    font-size: clamp(1rem, 1.1vw + 0.7rem, 1.25rem);
    color: rgb(var(--color-button));
    margin-bottom: 0.4rem;
  }
  .phf__headline {
    margin: 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(2.1rem, 4.4vw, 3.4rem);
    line-height: 0.92;
    letter-spacing: -0.01em;
  }
  .phf__line1 { display: block; color: rgb(var(--color-button)); }
  .phf__line2 {  position: relative; display: inline-block; margin-top: 0.12em; }
  .phf__line2::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 58% 5% 0% 0%;
    background: rgb(var(--hl-mark));
    transform: rotate(-1.6deg);
  }
  .phf__line2-mark { position: relative; z-index: 1; color: rgb(var(--color-foreground)); }
  .phf__award {
    margin-top: 1.4rem;
    font-size: 0.78rem;
    letter-spacing: 0;
    color: rgba(var(--color-button));
  }
  .phf__award-img { display: block; height: auto; margin-top: 0.6rem; }

  /* MIDDLE */
  .phf__middle { display: flex; align-items: center; justify-content: center; }
  /* The product video has a near-black background; on this dark scheme,
     `lighten` swaps that dark bg for the exact section colour (invisible)
     while the lighter device shows through — no re-encoding needed. */
  .phf__video {
    mix-blend-mode: lighten;
  }
  .phf__media {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
  }

  /* RIGHT */
  .phf__right { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .phf__circled { position: relative; display: inline-block; padding: 0.1em 0.35em; }
  .phf__circled-text {
    position: relative;
    z-index: 1;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(1.3rem, 1.4vw + 1rem, 1.7rem);
    color: rgb(var(--color-foreground));
  }
  .phf__circle {
    position: absolute;
    top: -22%;
    left: -8%;
    width: 116%;
    height: 150%;
    z-index: 0;
    stroke: #e8b04b;
    overflow: visible;
    pointer-events: none;
  }
  .phf__subhead {
    font-family: var(--font-heading-family);
    font-weight: 500;
    font-size: clamp(1.6rem, 2.4vw, 2.2rem);
    line-height: 1.12;
    color: rgb(var(--color-button));
  }
  .phf__subhead p { margin: 0; }

  /* Button — same treatment as the Prsso Flavours add-to-cart */
  .phf__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 200px; height: 50px; padding: 0 1.6rem; margin-top: 0.5rem;
    background: transparent; color: rgb(var(--color-button));
    border: 1.5px solid rgb(var(--color-button)); border-radius: 6px;
    box-shadow: 3px 3px 0 1px rgb(var(--color-button));
    font-family: var(--font-body-family); font-weight: 500; font-size: 0.9rem;
    letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
  }
  .phf__btn:hover {
    transform: translate(1px,1px);
    box-shadow: none;
  }
  .phf__btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 1px rgb(var(--color-button)); }

  /* ===== ROW 2 — features ===== */
  .phf__row2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1.2rem, 2.5vw, 2.4rem);
    margin-top: clamp(2.4rem, 6vw, 5rem);
  }
  /* Each badge: icon centered above centered title text. */
  .phf__feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .phf__icon {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0;
    background: transparent;
    color: rgb(var(--color-button));
    margin-bottom: 0.7rem;
  }
  .phf__icon svg { width: 46px; height: 46px; display: block; }
  .phf__feature-title {
    margin: 0 0 0.3rem;
    font-family: var(--font-body-family);
    font-weight: 700;
    font-size: 1.05rem;
    color: rgb(var(--color-foreground));
  }
  .phf__feature-text {
    display: none;
  }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 989px) {
    .phf__row1 { grid-template-columns: 1fr; gap: 2rem; text-align: center; }
    .phf__left, .phf__right { align-items: center; text-align: center; }
    .phf__middle { order: -1; }
    .phf__media { max-height: 340px; }
    .phf__row2 { grid-template-columns: repeat(2, 1fr); }
    .phf__feature { text-align: center; }
    .phf__icon { margin-left: auto; margin-right: auto; }
  }
/* END_SECTION:prsso-hero-feature */

/* START_SECTION:prsso-hero (INDEX:47) */
.prsso-hero {
    position: relative; overflow: hidden; isolation: isolate;
    background: rgb(var(--color-background)); color: rgb(var(--color-foreground));
    padding: var(--hero-pad-y, 64px) 0 calc(var(--hero-pad-y, 64px) * 0.6);
    --hero-font-heading: var(--font-heading-family);
    --hero-font-body: var(--font-body-family);
    --flavor: var(--color-background);
    --flavor-ink: var(--color-button);
  }
  .prsso-hero img { -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; pointer-events: none; }

  .prsso-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  /* scattered coffee-bean motif — tone-on-tone, drawn as the SVG pattern below */
  .prsso-hero__tex { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
  .prsso-hero__inner { position: relative;  display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 5vw, 3rem); align-items: center; }
  @media (min-width: 900px) { .prsso-hero__inner { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); } }

  .prsso-hero__content { max-width: 640px; }
  .prsso-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--hero-font-body); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: rgb(var(--color-button)); padding: 0.5rem 0.95rem; border: 1px solid rgba(var(--color-button), 0.35); border-radius: 100px;
    transition: color 0.6s ease, border-color 0.6s ease;
  }
  .prsso-hero__eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--color-button)); animation: hero-pulse 2.4s ease-out infinite; transition: background 0.6s ease; }
  @keyframes hero-pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--color-button), 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--color-button), 0); } }

  .prsso-hero__title {
    margin: 1.4rem 0 0; font-family: var(--hero-font-heading); font-weight: 500; font-optical-sizing: auto;
    font-size: clamp(2.9rem, 7vw, 5.6rem); line-height: 1.02; letter-spacing: -0.02em; color: rgb(var(--color-foreground));
  }
  .prsso-hero__title p { margin: 0; }
  .prsso-hero__title em { font-style: italic; font-weight: 500; color: rgb(var(--color-button)); transition: color 0.6s ease; }
  /* highlighted word — button-colour text sitting on a clean background-colour marker bar */
  .prsso-hero__title strong {
    position: relative; display: inline-block; isolation: isolate; vertical-align: baseline;
    font-weight: 500; color: rgb(var(--flavor-ink));
    padding: 0 0.16em; margin: 0 0.02em;
    transition: color 0.55s ease;
  }
  .prsso-hero__title strong::before {
    content: ''; position: absolute; z-index: -1;
    left: 0; right: 0; bottom: 0.06em; height: 0.4em;
    background: rgb(var(--hl-mark));
    transition: background 0.55s ease;
  }
  .prsso-hero__word { display: inline-block; will-change: transform; }

  .prsso-hero__sub { margin: 1.5rem 0 0; max-width: 46ch; font-family: var(--hero-font-body); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; color: rgba(var(--color-foreground), 0.78); }

  .prsso-hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
  .prsso-hero__btn {
    display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--hero-font-body); font-weight: 500; font-size: 0.92rem;
    padding: 1rem 1.6rem; border-radius: 100px; text-decoration: none; cursor: pointer;
    transition: background 0.6s ease, color 0.3s ease, border-color 0.3s ease;
  }
  .prsso-hero__btn svg { width: 18px; height: 18px; transition: transform 0.25s ease; }
  .prsso-hero__btn--primary { background: rgb(var(--flavor)); color: rgb(var(--flavor-ink));  }
  .prsso-hero__btn--primary:hover svg { transform: translateX(4px); }
  .prsso-hero__btn--ghost { background: transparent; color: rgb(var(--color-foreground)); border: 1.5px solid rgba(var(--color-foreground), 0.25); }
  .prsso-hero__btn--ghost:hover { border-color: rgb(var(--color-foreground))}

  .prsso-hero__stats { margin-top: 2.4rem; display: flex; gap: clamp(1.2rem, 3vw, 2.4rem); }
  .prsso-hero__stat { display: flex; flex-direction: column; }
  .prsso-hero__stat b { font-family: var(--hero-font-heading); font-weight: 500; font-size: 1.7rem; line-height: 1; color: rgb(var(--color-foreground)); }
  .prsso-hero__stat span { font-family: var(--hero-font-body); font-size: 0.8rem; color: rgba(var(--color-foreground), 0.6); margin-top: 4px; }
  .prsso-hero__stat + .prsso-hero__stat { padding-inline-start: clamp(1.2rem, 3vw, 2.4rem); border-inline-start: 1px solid rgba(var(--color-foreground), 0.14); }

  /* ── Arc carousel stage ── */
  .prsso-hero__stage { position: relative; min-height: clamp(400px,52vw,600px); }
  .prsso-hero__box {
    position: absolute; top: -16%; right: -14%;
    width: 54%; height: 116%;
    background-color: rgba(var(--flavor));
    border-radius: 72px;
    transform: rotate(-17deg); transform-origin: top right;
    z-index: 0; pointer-events: none;
    transition: background-color 0.55s ease;
  }
  .prsso-hero__glow { position: absolute; left: 40%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background-color: rgb(var(--flavor)); filter: blur(56px); opacity: 0.5; transition: background-color 0.55s ease; z-index: 0; }

  /* big flavor emblem sitting in the box, behind the tins */
  .prsso-hero__emblem {
    position: absolute; left: 68%; top: 40%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%);
    color: rgb(var(--flavor-ink)); opacity: 0.5; z-index: 0; display: flex; align-items: center; justify-content: center;
  }
  .prsso-hero__emblem svg { width: 100%; height: 100%; display: block; }

  .prsso-hero__carousel { position: absolute; inset: 0; z-index: 2; will-change: transform; }
  .prsso-hero__cfallback { position: absolute; left: 40%; top: 50%; width: 42%; height: auto; transform: translate(-50%, -50%); object-fit: contain; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.32)); }
  .prsso-hero__cslide {
    position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer;
    transform: translate(-50%, -50%);
    transition: left 0.65s cubic-bezier(0.5, 0, 0.2, 1), top 0.65s cubic-bezier(0.5, 0, 0.2, 1), transform 0.65s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.5s ease;
    will-change: left, top, transform, opacity;
  }
  .prsso-hero__cslide img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.3)); }
  .prsso-hero__cslide.is-hidden { pointer-events: none; }

  /* ── Per-flavor profile strip under the hero — dot-meters + notes, recolours per flavor ── */
  .prsso-hero__profile {
    grid-column: 1 / -1; position: relative; z-index: 1;
    padding-top: clamp(1.2rem, 2vw, 1.8rem); border-top: 1px solid rgba(var(--color-foreground), 0.12);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(1rem, 3vw, 2.6rem); font-family: var(--hero-font-body);
  }
  .prsso-hero__profile:empty { display: none; }
  .prsso-hero__prof-name {
    font-family: var(--hero-font-heading); font-weight: 500; font-size: 1.35rem;
    text-transform: uppercase; letter-spacing: 0.08em; color: rgb(var(--flavor-ink)); transition: color 0.5s ease;
  }
  .prsso-hero__meter { display: inline-flex; align-items: center; gap: 0.55rem; }
  .prsso-hero__meter-k { font-size: 0.82rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--color-foreground), 0.58); }
  .prsso-hero__meter-dots { display: inline-flex; gap: 4px; }
  .prsso-hero__meter-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--color-foreground), 0.2); transition: background 0.4s ease; }
  .prsso-hero__meter-dot.is-on { background: rgb(var(--flavor-ink)); }
  .prsso-hero__prof-notes { font-size: 0.95rem; color: rgba(var(--color-foreground), 0.72); }
  .prsso-hero__prof-notes b { color: rgb(var(--flavor-ink)); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; margin-right: 0.45rem; transition: color 0.5s ease; }
  @media (max-width: 749px) {
    .prsso-hero__profile { gap: 0.8rem 1.4rem; padding-top: 1.2rem; }
    .prsso-hero__prof-notes { flex-basis: 100%; text-align: center; }
  }

  /* ── Right thumbnail rail ── */
  .prsso-hero__rail { position: absolute; right: 1%; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
  .prsso-hero__rbtn {
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer; flex: 0 0 auto;
    border: 1.5px solid rgba(var(--color-foreground), 0.18); background: rgba(var(--color-background), 0.72); color: rgb(var(--color-foreground));
    display: flex; align-items: center; justify-content: center; transition: background 0.2s ease, transform 0.2s ease; backdrop-filter: blur(3px);
  }
  .prsso-hero__rbtn:hover { background: rgb(var(--color-background)); transform: scale(1.08); }
  .prsso-hero__rbtn svg { width: 18px; height: 18px; }
  .prsso-hero__thumbs { display: flex; flex-direction: column; gap: 0.5rem; }
  .prsso-hero__thumb { width: 46px; height: 46px; padding: 3px; border-radius: 50%; cursor: pointer; background: rgba(var(--color-foreground), 0.05); border: 2px solid transparent; transition: border-color 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; }
  .prsso-hero__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .prsso-hero__thumb.is-active { border-color: rgb(var(--flavor-ink)); transform: scale(1.1); }
  @media (max-width: 749px) { .prsso-hero__rail { right: 0; gap: 0.45rem; } .prsso-hero__thumb { width: 36px; height: 36px; } .prsso-hero__rbtn { width: 32px; height: 32px; } }

  @media (max-width: 899px) {
    .prsso-hero__stage { order: -1; min-height: clamp(340px, 84vw, 440px); }
    .prsso-hero__content { text-align: center; margin-inline: auto; }
    .prsso-hero__eyebrow { margin-inline: auto; }
    .prsso-hero__cta, .prsso-hero__stats { justify-content: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .prsso-hero__eyebrow-dot { animation: none; }
    .prsso-hero__glow { transition: none; }
  }
/* END_SECTION:prsso-hero */

/* START_SECTION:review-wall (INDEX:49) */
.rw {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    overflow: hidden;
  }

  /* ===== stars ===== */
  .rw__stars { display: inline-flex; gap: 4px; }
  .rw__star { width: 32px; height: 32px; fill: rgba(var(--color-foreground), 0.22); }
  .rw__star.is-on { fill: #e8b04b; }
  /* Pyramid arch: middle highest, its neighbours a touch up — transform only, so
     the row keeps its height. */
  .rw__stars .rw__star:nth-child(2),
  .rw__stars .rw__star:nth-child(4) { transform: translateY(-4px); }
  .rw__stars .rw__star:nth-child(3) { transform: translateY(-7px); }
  .rw__stars--lg .rw__star { width: 26px; height: 26px; }
  .rw__stars--lg .rw__star:nth-child(2),
  .rw__stars--lg .rw__star:nth-child(4) { transform: translateY(-6px); }
  .rw__stars--lg .rw__star:nth-child(3) { transform: translateY(-10px); }

  /* ===== ROW 1 ===== */
  .rw__top {
    display: grid;
    grid-template-columns: 1fr 1.12fr 1.12fr;
    gap: clamp(1.4rem, 3vw, 3rem);
    align-items: center;
  }
  /* When the demo videos are moved to their own section, the intro centres instead
     of sitting cramped in a 1/3 column. */
  .rw__top--solo { grid-template-columns: 1fr; justify-items: center; }
  .rw__top--solo .rw__intro { max-width: 640px; }
  .rw__intro { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .rw__title {
    margin: 1rem 0 0;
    font-family: var(--font-heading-family);
    font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 3rem);
    line-height: 1.02;
    color: rgb(var(--color-foreground));
  }
  .rw__intro-text {
    margin: 1rem auto 0;
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(var(--color-foreground), 0.75);
    max-width: 34ch;
  }
  .rw__intro-text p { margin: 0; }
  .rw__btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: 1.6rem; min-width: 200px; height: 50px; padding: 0 1.6rem;
    background: transparent; color: rgb(var(--color-button));
    border: 1.5px solid rgb(var(--color-button)); border-radius: 6px;
    box-shadow: 3px 3px 0 1px rgb(var(--color-button));
    font-family: var(--font-body-family); font-weight: 500; font-size: 0.9rem;
    letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease;
  }
  .rw__btn:hover { transform: translate(1px, 1px); box-shadow: none; }
  .rw__btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 1px rgb(var(--color-button)); }

  /* video posters (image-only fallback) */
  .rw__vbtn {
    position: relative; display: block; width: 100%; aspect-ratio: 4 / 5;
    padding: 0; border: 0; border-radius: 18px; overflow: hidden; cursor: pointer;
    background: rgba(var(--color-foreground), 0.06);
  }
  .rw__vbtn--static { cursor: default; }
  .rw__poster { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* inline review video — plays in place with native controls (no popup) */
  .rw__video {
    position: relative; width: 100%; aspect-ratio: 4 / 5;
    border-radius: 18px; overflow: hidden; background: #000;
  }
  .rw__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rw__play {
    position: absolute; inset: 0; margin: auto; width: 76px; height: 76px;
    padding: 0; border: 0; background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.18s ease, opacity 0.2s ease;
  }
  .rw__play img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); }
  .rw__video:hover .rw__play { transform: scale(1.08); }
  .rw__video.has-played .rw__play { opacity: 0; pointer-events: none; }

  /* ===== ROW 2 — carousel ===== */
  .rw__wall { margin-top: clamp(2.4rem, 5vw, 4rem); }
  /* Higher specificity than Swiper's `.swiper { overflow: hidden }` so the
     card wing isn't clipped; the section still clips horizontally. */
  .rw__wall .rw__swiper { overflow: visible; padding: 0 clamp(12px, 3vw, 40px) 22px; }
  /* Beat Swiper's `.swiper-slide { width: 100% }` — fixed card width (≈360px desktop,
     capped on small screens so it never overflows). ~5 + hints on a wide desktop. */
  .rw__swiper .rw__slide { width: min(360px, 80vw); height: auto; }

  .rw__imgcard,
  .rw__card {
    position: relative;
    aspect-ratio: 10 / 11;
    border-radius: 18px;
    overflow: visible;
  }
  .rw__imgcard { overflow: hidden; background: rgba(var(--color-foreground), 0.06); }
  .rw__imgcard img,
  .rw__imgcard-ph { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ===== Review card (white card · stars top-left · quote top-right · divider · name/role) ===== */
  .rw__card {
    aspect-ratio: auto;
    min-height: 232px;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    gap: 0.9rem;
    padding: 1.4rem 1.5rem 1.3rem;
    background: #fff;
    color: rgb(var(--color-foreground));
    border-radius: 14px;
    box-shadow: 0 14px 32px -16px rgba(58, 36, 22, 0.28), 0 2px 6px -2px rgba(58, 36, 22, 0.08);
  }
  .rw__quote {
    position: absolute; top: 18px; right: 18px;
    width: 34px; height: 26px;
    fill: rgba(var(--color-button), 0.2);
  }
  /* Stars top-left, flat (override the intro pyramid), accent when on. */
  .rw__card .rw__stars { gap: 3px; }
  .rw__card .rw__star { width: 18px; height: 18px; transform: none !important; fill: rgba(var(--color-foreground), 0.2); }
  .rw__card .rw__star.is-on { fill: rgb(var(--color-button)); }
  .rw__card-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: rgba(var(--color-foreground), 0.85);
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .rw__by {
    margin-top: auto;
    width: 100%;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(var(--color-foreground), 0.1);
    display: flex; flex-direction: column; gap: 2px;
  }
  .rw__by-name { font-weight: 700; font-size: 0.92rem; color: rgb(var(--color-foreground)); }
  .rw__by-role { font-size: 0.8rem; color: rgba(var(--color-foreground), 0.55); }
  /* Arabic: review text reads right-to-left. */
  .rtl .rw__card-text { direction: rtl; text-align: right; }

  /* nav */
  .rw__nav { display: flex; justify-content: center; gap: 0.8rem; margin-top: 1.8rem; }
  .rw__navbtn {
    width: 44px; height: 44px; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(var(--color-button)); color: rgb(var(--color-button-text));
    transition: background 0.15s ease, color 0.15s ease;
    border: none;
  }
  .rw__navbtn:hover { background: rgb(var(--color-button-text)); color: rgb(var(--color-button))}
  .rw__navbtn svg { width: 20px; height: 20px; }

  /* ===== responsive ===== */
  @media (max-width: 989px) {
    .rw__top { grid-template-columns: 1fr; text-align: center; }
    .rw__intro { align-items: center; }
    .rw__intro-text { max-width: none; }
    .rw__vwrap { max-width: 420px; margin: 0 auto; }
  }
/* END_SECTION:review-wall */

/* START_SECTION:reviews-banner (INDEX:50) */
/* Unified BEIGE background (matches the product page); the accent (--color-button)
     still comes from the product's flavour scheme. Doubled class wins over .color-{scheme}. */
  .prsso-rev.prsso-rev { --color-background: 244, 239, 232; } /* #f4efe8 */
  .prsso-rev {
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border-bottom: 2px solid rgb(var(--color-button));
    overflow: hidden;
  }
  .prsso-rev__grid { display: flex; flex-direction: column; }
  @media (min-width: 750px) {
    .prsso-rev__grid { flex-direction: row; align-items: stretch; gap: clamp(1.25rem, 4vw, 3rem); }
    .prsso-rev__reviews { flex: 1 1 0; min-width: 0; }
  }

  /* LEFT: reviews — padding applies only here */
  .prsso-rev__reviews {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: var(--rev-pad-top, 48px) clamp(1.25rem, 5vw, 4rem) var(--rev-pad-bottom, 48px);
  }

  .prsso-rev__heading {
    margin: 0 0 1.4rem;
    font-family: var(--font-heading-family); font-weight: var(--font-heading-weight);
    text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.4rem;
    color: rgb(var(--color-button));
  }
  .prsso-rev__swiper { width: 100%; }
  .prsso-rev .swiper-slide { height: auto; }
  .prsso-rev__slide { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
  .prsso-rev__stars { display: inline-flex; gap: 3px; color: rgb(var(--color-button)); }
  .prsso-rev__stars svg { width: 18px; height: 18px; }
  .prsso-rev__title {
    margin: 0;
    font-family: var(--font-heading-family); font-weight: var(--font-heading-weight);
    font-size: 1.55rem; line-height: 1.2;
    color: rgb(var(--color-button));
  }
  .prsso-rev__text {
    margin: 0.6rem 0;
    display: flex; flex-direction: column; align-items:center;
    color: rgba(var(--color-button)); font-size: 1rem; line-height: 1.55;
  }
  .prsso-rev__text p { margin: 0; }
  .prsso-rev__author {
    margin: 0.2rem 0 0;
    font-family: var(--font-heading-family); font-weight: 700; letter-spacing: 0.02em;
    color: rgb(var(--color-button));
  }
  .prsso-rev__verified {
    margin: 0; display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.85rem; color: rgba(var(--color-button));
  }
  .prsso-rev__verified svg { width: 16px; height: 16px; color: rgb(var(--color-button)); }

  .prsso-rev__bullets { position: static !important; margin-top: 1.4rem; }
  .prsso-rev__bullets {
  }
  .prsso-rev__bullets .swiper-pagination-bullet {
    background: rgb(var(--color-foreground)); opacity: 0.25;
    width: 8px; height: 8px; transition: opacity 0.18s ease, width 0.18s ease, border-radius 0.18s ease;
  }
  .prsso-rev__bullets .swiper-pagination-bullet-active {
    opacity: 1; width: 22px; border-radius: 6px; background: rgb(var(--color-button));
  }

  /* Banner — full-width landscape on mobile; on desktop fills the row height at 50% width */
  .prsso-rev__banner {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-top: 2px solid rgb(var(--color-button));
    background: rgba(var(--color-foreground), 0.04);
    overflow: hidden;
  }
  .prsso-rev__banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (min-width: 750px) {
    .prsso-rev__banner {
      flex: 1 1 0; min-width: 0; width: auto; aspect-ratio: auto;
      border-top: 0;
	border-left: 2px solid rgb(var(--color-button));
    }
  }

  /* Banner-only (no reviews) — full-bleed landscape strip */
  .prsso-rev--banner-only .prsso-rev__grid { display: block; }
  .prsso-rev--banner-only .prsso-rev__reviews { display: none; }
  .prsso-rev--banner-only .prsso-rev__banner {
    width: 100%; aspect-ratio: 16 / 7; border-top: 0;
  }
  @media (min-width: 750px) {
    .prsso-rev--banner-only .prsso-rev__banner { flex: none; width: 100%; aspect-ratio: 24 / 7; }
  }
/* END_SECTION:reviews-banner */

/* START_SECTION:reviews (INDEX:51) */
.rr {
    position: relative;
  }
  .rr__title {
    margin: 0 0 1.4rem;
    color: rgb(var(--color-foreground));
  }

  /* ===== Grid: 2 columns × auto rows ===== */
  .rr__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
  }
  @media (max-width: 749px) {
    .rr__grid {
      grid-template-columns: 1fr;
      gap: 0.8rem;
    }
  }

  /* ===== STATS CARD ===== */
  .rr-stats {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    padding: 1rem 1.2rem;
    color: rgb(var(--color-foreground));
  }
  @media (max-width: 749px) {
    .rr-stats { gap: 1rem; padding: 1rem 0.5rem; }
  }
  .rr-stats__left {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
  }
  .rr-stats__big {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: clamp(7.5rem, 2.6087rem + 7.8261vw, 12rem);
    line-height: 1;
    color: rgb(var(--color-foreground));
    @media screen and (max-width: 999px) {
      font-size: 5.8rem;
    }
  }
  .rr-stats__small {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: clamp(0.95rem, 0.6vw + 0.6rem, 1.4rem);
    color: rgb(var(--color-foreground));
    opacity: 0.5;
    margin-left: 2px;
  }
  .rr-stats__right {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .rr-stats__row {
    display: grid;
    grid-template-columns: 18px 18px 1fr;
    align-items: center;
    gap: 0.55rem;
  }
  .rr-stats__star {
    width: 14px;
    height: 14px;
  }
  .rr-stats__num {
    font-size: 0.85rem;
    color: rgb(var(--color-foreground));
    line-height: 1;
  }
  .rr-stats__bar {
    height: 10px;
    border-radius: 999px;
    background-color: rgba(var(--color-foreground), 0.05);
    overflow: hidden;
  }
  .rr-stats__fill {
    height: 100%;
    background-color: #0e5e2dff;
    transition: width 0.4s ease;
  }

  /* ===== REVIEW CARD ===== */
  .rr-card {
    background-color: rgb(var(--color-background));
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    color: rgb(var(--color-foreground));
    /* max-height is large enough for any realistic card height; the actual
       size is determined by content. Animating max-height → 0 produces the
       expand/collapse effect without measuring each card in JS. */
    max-height: 1000px;
    overflow: hidden;
    transform-origin: top center;
    transition:
      max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.32s ease,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      margin 0.45s cubic-bezier(0.22, 1, 0.36, 1),
      padding 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  /* Hidden cards (haven't been loaded yet) are removed from layout. */
  .rr-card.is-hidden { display: none; }
  /* Collapsed start state — Load More flips this off to animate the card open. */
  .rr-card.is-expanding {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px) scaleY(0.96);
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
  }

  .rr-card__name {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    color: rgb(var(--color-foreground));
  }
  .rr-card__stars {
    margin-bottom: 0.25rem;
  }
  .rr-card__stars .card-product__stars-empty path {
    fill: transparent;
    stroke: rgba(var(--color-foreground), 0.1);
  }
  .rr-card__desc {
    font-size: 0.9rem;
    line-height: 1.45;
    color: rgb(var(--color-foreground));
    margin: 0.25rem 0 0.5rem;
  }
  .rr-card__bottom {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .rr-card__avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: rgba(var(--color-foreground), 0.06);
  }
  .rr-card__avatar--placeholder {
    background: rgba(var(--color-foreground), 0.08);
  }
  /* Date sits on its own row, right-aligned */
  .rr-card__date-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
  }
  .rr-card__date {
    font-size: 0.8rem;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* ===== LOAD MORE ===== */
  .rr__actions {
    display: flex;
    justify-content: center;
    margin-top: 1.6rem;
  }
  .rr__load-more {
    min-width: 180px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
/* END_SECTION:reviews */

/* START_SECTION:scroll-text (INDEX:52) */
.scrolltext {
    position: relative;
  }
  .scrolltext__lead {
    margin: 0;
    max-width: 62%;
    font-family: var(--font-heading-family);
    font-weight: 700;
    line-height: 1.3;
    font-size: clamp(1.4rem, 3vw, 2.6rem);
    color: rgb(var(--color-foreground));
  }
  .scrolltext__lead > :first-child { margin-top: 0; }
  .scrolltext__lead > :last-child { margin-bottom: 0; }
  .scrolltext__char {
    opacity: var(--sct-dim, 0.4);
    will-change: opacity;
  }

  .scrolltext__tail {
    margin-top: clamp(3rem, 12vh, 9rem);
    margin-left: auto;
    max-width: 62%;
    text-align: right;
  }
  .scrolltext__small,
  .scrolltext__strong {
    font-family: var(--font-heading-family);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    letter-spacing: 0.01em;
  }
  .scrolltext__small {
    color: rgba(var(--color-foreground), 0.45);
    font-size: clamp(1rem, 2vw, 1.5rem);
  }
  .scrolltext__strong {
    color: rgb(var(--color-foreground));
    font-size: clamp(1.2rem, 2.6vw, 2rem);
    margin-top: 0.15em;
  }
  .scrolltext__small > *,
  .scrolltext__strong > * { margin: 0; }

  @media (max-width: 749px) {
    .scrolltext__lead { max-width: 100%; }
    .scrolltext__tail {
      max-width: 100%;
      margin-left: 0;
      text-align: left;
      margin-top: clamp(2rem, 8vh, 4rem);
    }
  }
/* END_SECTION:scroll-text */

/* START_SECTION:search-grid (INDEX:53) */
.sg { position: relative; }

  /* ===== Header ===== */
  .sg__head {
    margin: 0 auto 1.4rem;
    text-align: center;
    max-width: 720px;
  }
  .sg__meta {
    margin: 0.8rem 0 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: 0.95rem;
  }
  .sg__meta strong {
    color: rgb(var(--color-foreground));
    font-weight: 700;
  }

  /* ===== Search input (big, prominent) ===== */
  .sg__form { margin: 0 auto 1.6rem; max-width: 760px; }
  .sg__search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0 0 0 1.1rem;
    background: transparent;
    border: 1px solid rgba(var(--color-foreground), 0.25);
    border-radius: 0;
    transition: border-color 0.15s ease;
  }
  .sg__search:focus-within { border-color: rgb(var(--color-foreground)); }
  .sg__search-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: rgba(var(--color-foreground), 0.6);
  }
  .sg__search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    font-size: 1rem;
    padding: 0.65rem 0;
  }
  .sg__search-input::placeholder { color: rgba(var(--color-foreground), 0.5); }
  .sg__search-submit {
    flex: 0 0 auto;
    align-self: stretch;
    padding: 0.55em 1.6em;
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
    border: none;
    border-radius: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease;
  }
  .sg__search-submit:hover { opacity: 0.82; }
  @media (max-width: 749px) {
    .sg__search-submit { display: none; }
    .sg__search { padding: 0.15rem 1rem 0.15rem 1rem; }
  }

  /* ===== Filter toolbar ===== */
  .sg__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.2rem;
    align-items: center;
    justify-content: center;
    padding: 1rem 0 1.6rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.12);
  }
  .sg__filter {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }
  .sg__filter-label {
    font-family: var(--font-body-family);
    font-weight: 500;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(var(--color-foreground), 0.75);
  }
  .sg__select { position: relative; display: inline-block; }
  .sg__select .options__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    background: transparent;
    border: 1px solid rgba(var(--color-foreground), 0.25);
    border-radius: 0;
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    font-size: 0.88rem;
    cursor: pointer;
    line-height: 1;
    transition: border-color 0.15s ease;
  }
  .sg__select .options__trigger:hover,
  .sg__select[open] .options__trigger { border-color: rgb(var(--color-foreground)); }
  .sg__select .options__trigger svg { width: 14px; height: 14px; }
  .sg__select .options__drawer {
    display: none;
    position: absolute;
    top: calc(100% - 1px);
    left: 0;
    min-width: 100%;
    z-index: 10;
    background: rgb(var(--color-background));
    border: 1px solid rgb(var(--color-foreground));
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    padding: 0.4rem;
    border-radius: 0;
    max-height: 280px;
    overflow-y: auto;
  }
  .sg__select[open] .options__drawer { display: block; }
  .sg__select .options__item {
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    cursor: pointer;
    border-radius: 0;
    white-space: nowrap;
  }
  .sg__select .options__item:hover {
    background: rgba(var(--color-foreground), 0.06);
  }
  .sg__select .options__item[aria-selected="true"] {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  /* ===== Results grid ===== */
  .sg__results { margin-top: 1.4rem; transition: opacity 0.2s ease; }
  .sg__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  @media (min-width: 750px) {
    .sg__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  }
  @media (min-width: 990px) {
    .sg__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  }
  .sg__item { min-width: 0; }

  .sg__pagination {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
  }

  /* ===== Empty / no-results ===== */
  .sg__empty {
    text-align: center;
    padding: 4rem 1.5rem;
    color: rgb(var(--color-foreground));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
  }
  .sg__empty-icon {
    width: 56px;
    height: 56px;
    color: rgba(var(--color-foreground), 0.3);
    margin-bottom: 0.3rem;
  }
  .sg__empty-title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    font-size: clamp(1.2rem, 0.8vw + 1rem, 1.8rem);
    color: rgb(var(--color-foreground));
  }
  .sg__empty-text {
    margin: 0;
    color: rgba(var(--color-foreground), 0.7);
    font-size: 0.95rem;
  }
  .sg__empty-cta {
    margin-top: 0.8rem;
    padding: 0.7em 1.4em;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
  }
/* END_SECTION:search-grid */

/* START_SECTION:steps (INDEX:54) */
.steps {
    position: relative;
  }

  .steps__empty {
    text-align: center;
    padding: 2rem 0 3rem;
    opacity: 0.85;
  }

  .steps__slide {
    min-width: 0;
    height: 100%;
  }

  /* ===== Card ===== */
  .step-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
  }
  .step-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: var(--st-media-ar, 3/4);
    overflow: hidden;
    border-radius: var(--st-media-radius, 0px);
    background: rgba(var(--color-foreground), 0.04);
  }
  .step-card__image,
  .step-card__video,
  .step-card__media .placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Big floating number — white + blend so it reads against any media. */
  .step-card__number {
    position: absolute;
    left: 1rem;
    bottom: 1rem;
    z-index: 2;
    margin: 0;
    pointer-events: none;
    font-family: var(--font-heading-family);
    font-weight: 700;
    line-height: 0.9;
    font-size: clamp(2.75rem, 5vw, 4.5rem);
    color: #fff;
    mix-blend-mode: difference;
  }
  .rtl .step-card__number {
    left: auto;
    right: 0.5rem;
  }
  /* Richtext caption (below the media) */
  .step-card__caption {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: rgb(var(--color-foreground));
    text-align: left;
  }
  .step-card__caption > :first-child { margin-top: 0; }
  .step-card__caption > :last-child { margin-bottom: 0; }
  .step-card__caption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

  /* ===== ARROWS — split: prev at left, next at right of carousel ===== */
  .steps__arrow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    background-color: transparent;
    color: rgb(var(--color-foreground));
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    z-index: 5;
    transition:
      opacity 0.35s ease,
      transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .steps__arrow svg {
    width: 22px;
    height: 22px;
    display: block;
  }
  .steps__arrow--prev {
    left: 0.75rem;
    transform: translateY(-50%);
  }
  .steps__arrow--next {
    right: 0.75rem;
    transform: translateY(-50%);
  }
  @media (min-width: 768px) {
    .steps__arrow--prev { left: 5rem; }
    .steps__arrow--next { right: 5rem; }
  }
  @media (min-width: 1000px) {
    .steps__arrow--prev { left: 2.5rem; }
    .steps__arrow--next { right: 2.5rem; }
    .steps__arrow { width: 56px; height: 56px; }
    .steps__arrow svg { width: 24px; height: 24px; }
  }
  @media (min-width: 1400px) {
    .steps__arrow--prev { left: 5rem; }
    .steps__arrow--next { right: 5rem; }
    .steps__arrow { width: 64px; height: 64px; }
    .steps__arrow svg { width: 28px; height: 28px; }
  }
  .steps__arrow.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
  }
  .steps__arrow--prev.swiper-button-disabled { transform: translate(-50%, -50%); }
  .steps__arrow--next.swiper-button-disabled { transform: translate(50%, -50%); }
  /* Hide the SIDE arrows on mobile. Inline header arrows stay. */
  @media (max-width: 989px) {
    .steps__arrow:not(.steps__arrow--inline) { display: none; }
  }

  /* ===== Header-end nav: segmented bullets + plain arrows ===== */
  .steps__nav {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .steps__bullets {
    display: flex;
    align-items: center;
    gap: 0;
  }
  .steps__bullet {
    width: 26px;
    height: 2px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(var(--color-foreground), 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .steps__bullet.is-active {
    background: rgb(var(--color-foreground));
  }
  .steps__arrow--inline {
    position: static;
    transform: none;
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: rgb(var(--color-foreground));
    transition: opacity 0.15s ease;
  }
  .steps__arrow--inline:hover { opacity: 0.6; }
  .steps__arrow--inline.swiper-button-disabled {
    opacity: 0.25;
    pointer-events: none;
    transform: none;
  }
  @media (max-width: 749px) {
    .steps__nav { gap: 0.6rem; }
    .steps__bullet { width: 18px; }
    .steps__arrow--inline { width: 34px; height: 34px; }
  }

  /* Header: title left, optional secondary button right (space-between) */
  .steps__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 2rem;
    flex-wrap: wrap;
  }
  .steps__header .section-title {
    margin: 0;
    text-align: start;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
  }
  .steps__header-button { flex: 0 0 auto; }
  .steps__header-spacer { flex: 1 1 auto; }
  .section-title__icon { width: 70px; height: auto; }

  /* ===== GRID layout ===== */
  .steps__track--grid {
    display: grid;
    grid-template-columns: repeat(var(--st-cols-m), 1fr);
    column-gap: var(--st-gap);
    row-gap: calc(var(--st-gap) * 2);
  }
  @media (min-width: 990px) {
    .steps__track--grid {
      grid-template-columns: repeat(var(--st-cols-d), 1fr);
    }
  }

  /* ===== PURE CAROUSEL — full-bleed track with page-width padding ===== */
  .steps__carousel-wrap { position: relative; }
  .steps__swiper { width: 100%; }
  .steps__swiper:not(.swiper-initialized) .swiper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--st-gap);
    overflow: hidden;
  }
  .steps__swiper:not(.swiper-initialized) .swiper-slide {
    flex: 0 0 calc((100% - var(--st-gap) * (var(--st-cols-m) + 0.2 - 1)) / (var(--st-cols-m) + 0.2));
    min-width: 0;
  }
  @media (min-width: 990px) {
    .steps__swiper:not(.swiper-initialized) .swiper-slide {
      flex: 0 0 calc((100% - var(--st-gap) * (var(--st-cols-d) + 0.2 - 1)) / (var(--st-cols-d) + 0.2));
    }
  }
  .steps__swiper.steps__swiper--padded {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  @media (min-width: 768px) {
    .steps__swiper.steps__swiper--padded { padding-left: 5rem; padding-right: 5rem; }
  }
  @media (min-width: 1000px) {
    .steps__swiper.steps__swiper--padded { padding-left: 2.5rem; padding-right: 2.5rem; }
  }
  @media (min-width: 1400px) {
    .steps__swiper.steps__swiper--padded { padding-left: 5rem; padding-right: 5rem; }
  }

  /* ===== MIXED layout: grid at desktop ===== */
  @media (min-width: 990px) {
    .steps__mixed-wrap .swiper-wrapper {
      display: grid !important;
      grid-template-columns: repeat(var(--st-cols-d), 1fr) !important;
      column-gap: var(--st-gap) !important;
      row-gap: calc(var(--st-gap) * 2 + 16px) !important;
      transform: none !important;
      height: auto !important;
    }
    .steps__mixed-wrap .swiper-slide {
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
    }
    .steps__mixed-wrap .steps__swiper { overflow: visible; }
  }
/* END_SECTION:steps */

/* START_SECTION:sticker-showcase (INDEX:55) */
.sticker-showcase {
    position: relative;
    overflow: hidden;
  }

  .sticker-showcase__inner {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Bag width = viewport %. Stickers share the SAME height as the bag
     (driven from --ss-bag-h, derived per-breakpoint from the bag width),
     and are perfectly centered over it. */
  .sticker-showcase {
    --ss-bag-w: 50vw;
    --ss-bag-h: calc(var(--ss-bag-w) * 547 / 433);
  }
  @media (min-width: 750px) {
    .sticker-showcase {
      --ss-bag-w: 24vw;
      --ss-bag-h: calc(var(--ss-bag-w) * 547 / 433);
    }
  }
  .sticker-showcase__product {
    position: relative;
    z-index: 1;
    width: var(--ss-bag-w);
    height: var(--ss-bag-h);
    aspect-ratio: 433 / 547;
    object-fit: contain;
    display: block;
    pointer-events: none;
  }
  /* Each sticker matches the bag's height, centered on the same point.
     Centering via negative margins (NOT transform) so GSAP can own the
     transform property entirely when animating xPercent on top. */
  .sticker-showcase__sticker {
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--ss-bag-h);
    width: var(--ss-bag-w);
    aspect-ratio: 433 / 547;
    object-fit: contain;
    display: block;
    z-index: 3;
    pointer-events: none;
    margin-top: calc(var(--ss-bag-h) / -2);
    margin-left: calc(var(--ss-bag-w) / -2);
    will-change: transform;
  }
/* END_SECTION:sticker-showcase */

/* START_SECTION:subscription-plans (INDEX:56) */
.sub {
    position: relative;
  }

  /* Section header — title left, secondary button right (space-between). */
  .sub__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 2rem;
    flex-wrap: wrap;
  }
  .sub__title {
    margin: 0;
    text-align: start;
    flex: 1 1 auto;
  }
  .sub__header-button {
    flex: 0 0 auto;
  }
  .sub__header-spacer {
    flex: 1 1 auto;
  }

  /* Per-card subscribe form wraps the CTA so it inherits full-width sizing. */
  .sub-card__form {
    margin: 0;
    width: 100%;
  }

  .sub__row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sub-gap, 24px);
  }
  @media (min-width: 990px) {
    .sub__row {
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-end;
    }
  }

  /* ===== CARD ===== */
  .sub-card {
    position: relative;
    min-width: 0;
    background-color: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 14px;
    box-shadow: 6px 6px 0 0 rgb(var(--color-foreground));
    padding: 1.4rem 1.4rem 1.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow: hidden;
    @media (min-width: 1000px){
      flex: 1 1 0;
    }
  }


  /*
   "MOST POPULAR" badge bar — full-width, breaks out of the card's
   horizontal + top padding so it spans edge-to-edge. The whole bar takes
   --color-button as background; text uses --color-button-text. Lines on
   either side of the text are 2px thick and use --color-button.
*/
  .sub-card__popular {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -1.4rem -1.4rem 0.4rem;
    padding: 10px 1.4rem;
    background-color: rgb(var(--color-button));
  }
  .sub-card__popular-line {
    flex: 1;
    height: 2px;
    background-color: rgb(var(--color-button-text));
  }
  .sub-card__popular-text {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    letter-spacing: 0.32em;
    font-size: 1.1rem;
    white-space: nowrap;
    background: transparent;
    color: rgb(var(--color-button-text));
    padding: 0;
  }

  /* Head: name + target + price + CTA */
  .sub-card__head {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
  }

  .sub-card__name {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    font-size: clamp(2rem, 1vw + 1.5rem, 2.6rem);
    margin: 0;
    line-height: 1;
    color: rgb(var(--color-foreground));
  }
  .sub-card__target {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.75;
  }

  .sub-card__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.4rem 0;
  }
  .sub-card__price-compare,
  .sub-card__price-now {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: clamp(2rem, 1vw + 1.5rem, 2.6rem);
    line-height: 1;
  }
  .sub-card__price-compare {
    position: relative;
    color: rgba(var(--color-foreground), 0.35)
  }
  /* 3px strikethrough rendered as a ::after line so we can control thickness. */
  .sub-card__price-compare::after {
    content: '';
    position: absolute;
    left: -4%;
    right: -4%;
    top: 50%;
    height: 4px;
    background-color: rgb(var(--color-foreground));
    transform: translateY(-50%);
    transform-origin: center;
    pointer-events: none;
  }
  .sub-card__price-suffix {
    font-size: 0.8rem;
    opacity: 0.7;
  }

  .sub-card__cta {
    width: 100%;
    font-size: 1.3rem;
    padding: 0.8em 1.2em;
    position: relative;
  }
  /* Dashed spinner — discrete ticks around a circle, animated rotating. */
  .sub-card__cta-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.4em;
    height: 1.4em;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    animation: sub-spin 1.1s linear infinite;
  }
  .sub-card__cta-spinner svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .sub-card__cta.is-loading .sub-card__cta-label { visibility: hidden; }
  .sub-card__cta.is-loading .sub-card__cta-spinner { opacity: 1; }
  @keyframes sub-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* ===== PROS / CONS LIST ===== */
  .sub-card__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }
  .sub-card__item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.88rem;
    line-height: 1.35;
  }
  .sub-card__item--con {
    opacity: 0.55;
  }
  .sub-card__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0.1em;
    color: rgb(var(--color-foreground));
  }

  /* ===== PERKS PANEL ===== */
  .sub-card__perks {
    border: 1px solid rgb(var(--color-foreground));
    border-radius: 10px;
    overflow: hidden;
  }
  .sub-card__features-title,
  .sub-card__perks-title {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    font-size: 1.1rem;
    margin: 0;
    padding: 1rem 1rem 0;
    color: rgb(var(--color-foreground));
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
  .sub-card__features-title {
    padding: 0;
  }
  .sub-card__perk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(var(--color-foreground), 0.5);
    font-size: 0.9rem;
  }
  .sub-card__perk:last-child {
    border-bottom: none;
  }
  .sub-card__perk-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ===== FEATURES LIST ===== */
  .sub-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .sub-card__feature {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.88rem;
    line-height: 1.35;
  }
  .sub-card__feature-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* ===== EXPANDABLE (summary mode) =====
     The .sub-card__expandable-wrap is a 1-row grid; animating
     grid-template-rows from 1fr ↔ 0fr produces a true height: auto ↔ 0
     transition without measuring anything in JS. The inner
     .sub-card__expandable must clip with overflow:hidden during the
     collapse so content doesn't spill out while the row shrinks. */
  .sub-card__expandable-wrap {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .sub-card__expandable-wrap.is-collapsed {
    grid-template-rows: 0fr;
  }
  .sub-card__expandable {
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    /* Inner content fades alongside the height change so the reveal feels
       intentional instead of "popping" in once the row hits full height. */
    opacity: 1;
    transition: opacity 0.32s ease 0.04s;
  }
  .sub-card__expandable-wrap.is-collapsed > .sub-card__expandable {
    opacity: 0;
    transition: opacity 0.18s ease;
  }

  /* "VIEW ALL FEATURES" button — centered, underlined text + chevron, border-bottom only. */
  .sub-card__expand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-family: var(--font-heading-family);
    align-self: center;
    margin: 0.2rem auto 0;
    padding: 0.25rem 0.4rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgb(var(--color-foreground));
    color: rgb(var(--color-foreground));
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
  }
  .sub-card__expand-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
  }
  .sub-card.is-expanded .sub-card__expand-chevron {
    transform: rotate(180deg);
  }

  /* ===== BADGES ===== */
  .sub-badge {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.4em 0.8em;
    text-transform: uppercase;
    line-height: 1;
    flex-shrink: 0;
  }
  /* Render badges as inline-flex so the leading icon aligns with the label. */
  .sub-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
  }
  .sub-badge__icon {
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
    color: currentColor;
    fill: currentColor;
  }

  /* Diamond before MOST POPULAR — inherits the bar's button-text color. */
  .sub-card__popular-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
  }
  .sub-card__popular-icon {
    width: 0.9em;
    height: 0.9em;
    flex-shrink: 0;
    color: currentColor;
    fill: currentColor;
  }

  .sub-badge--cheaper {
    background-color: rgb(var(--color-button));
    color: rgb(var(--color-button-text));
    border-radius: 2px;
  }
  .sub-badge--unlimited {
    background-color: rgb(var(--color-foreground));
    color: #fff;
    border-radius: 2px;
  }
/* END_SECTION:subscription-plans */

/* START_SECTION:testimonials-drop (INDEX:58) */
.td {
    position: relative;
    /* pinSpacing already reserves the scroll length for the pinned timeline.
       Setting min-height: 100vh on top of that doubled the section's effective
       scroll height and caused the next section to feel "miles away". The
       .td__inner below still claims 100vh so the bag stays viewport-sized
       while pinned — that's the only height we actually need. */
    background: rgb(var(--color-background));
  }

  .td__inner {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    padding-bottom: 0;
    align-items: end;
    justify-content: center;
  }

  /* Stage = the image + a cards layer anchored to the image's TOP edge. */
  .td__stage {
    position: relative;
    width: var(--td-content-w, 600px);
    max-width: calc(100vw - 32px);
    margin: 0 auto;
  }

  /* Center image — sits ABOVE all cards. */
  .td__bg {
    position: relative;
    z-index: 50;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
  }


  /*
   Black backdrop sitting BEHIND the image AND all cards (low z-index).
   Inset 10px from the bag's top edge — it never exceeds the bag's top.
   Only visible where the bag image has transparency (the opening), so it
   reads as a dark interior the cards drop into.
*/
  .td__cover {
    position: absolute;
    top: 28px;
    left: 4px;
    right: 4px;
    height: 40px;
    background-color: #222;
    z-index: 0;
    pointer-events: none;
    border-radius: 12px;
  }


  /*
   Ensure .td__stage establishes a stacking context so the cover's low
   z-index can't escape to a parent layer (e.g. behind the section bg).
*/
  .td__stage {
    isolation: isolate;
  }
  .td__bg--placeholder {
    aspect-ratio: 16 / 10;
    background: rgba(var(--color-foreground), 0.06);
  }
  .td__bg--placeholder svg {
    width: 100%;
    height: 100%;
    display: block;
  }


  /*
   Cards container is absolutely anchored to the stage's top — same edge as
   the image's top — so a card at `top: 0` has its center exactly on the
   image's top edge, with its lower half sitting behind the image.
*/
  .td__cards {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
  }

  .td-card {
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--td-content-w, 600px) - 64px);
    max-width: calc(100vw - 32px - 64px);
    background-color: rgb(var(--color-background));
    border: 1px solid rgba(var(--color-foreground), 0.1);
    border-radius: 10px;
    padding: 1rem;
    pointer-events: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    /* Default centering used pre-JS / on mobile */
    transform: translate(-50%, -50%);
  }

  .td-card__name {
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    color: rgb(var(--color-foreground));
  }

  .td-card__stars {
    margin-bottom: 0.5rem;
  }
  .td-card__stars .card-product__stars-empty path {
    fill: transparent;
    stroke: rgba(var(--color-foreground), 0.1);
  }

  .td-card__desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: rgb(var(--color-foreground));
    margin: 0.5rem 0 0.75rem;
  }

  .td-card__bottom {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .td-card__avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: rgba(var(--color-foreground), 0.06);
  }
  .td-card__avatar--placeholder {
    background: rgba(var(--color-foreground), 0.08);
  }
  .td-card__date-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.55rem;
  }
  .td-card__date {
    font-size: 0.8rem;
    color: rgba(var(--color-foreground), 0.7);
  }

  /* Mobile: same layout + animation as desktop. Bag image scales to a
     viewport-relative width so the stage doesn't overflow narrow screens. */
  @media (max-width: 749px) {
    .td__stage {
      width: 86vw;
      max-width: 86vw;
    }
    .td-card {
      /* The card width is derived from --td-content-w; on mobile we want it
         to track the scaled stage too. Cap at 86vw minus the original
         32px gutter so the card doesn't kiss the edge. */
      width: calc(86vw - 32px);
      max-width: calc(86vw - 32px);
      margin: 0 auto;
    }
  }
/* END_SECTION:testimonials-drop */

/* START_SECTION:trustpilot-reviews-slider (INDEX:60) */
.silque-rvs__inner {
  display: flex;
  align-items: center;
  gap: 28px;
}
.silque-rvs__summary {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  min-width: 170px;
}
.silque-rvs__verdict {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: rgb(var(--color-foreground));
}
.silque-rvs__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 3px;
  background: rgba(var(--color-foreground), 0.18);
}
.silque-rvs__star.is-on {
  background: rgb(var(--color-button));
}
.silque-rvs__star-i {
  width: 15px;
  height: 15px;
  fill: rgb(var(--color-background));
}
.silque-rvs__star--sm {
  width: 17px;
  height: 17px;
}
.silque-rvs__star--sm .silque-rvs__star-i {
  width: 11px;
  height: 11px;
}
.silque-rvs__star--brand {
  width: 18px;
  height: 18px;
}
.silque-rvs__star--brand .silque-rvs__star-i {
  width: 12px;
  height: 12px;
}
.silque-rvs__hstars {
  position: relative;
  display: inline-flex;
}
.silque-rvs__hstars-row {
  display: inline-flex;
  gap: 4px;
}
.silque-rvs__hstars-fill {
  position: absolute;
  inset: 0;
  width: var(--fill, 100%);
  overflow: hidden;
}
.silque-rvs__based {
  margin: 0;
  font-size: 13px;
  color: rgb(var(--color-foreground), 0.75);
}
.silque-rvs__count-link {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
}
.silque-rvs__brand {
  margin: 6px 0 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 700;
  color: rgb(var(--color-foreground));
}
.silque-rvs__slider {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.silque-rvs__arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-foreground), 0.2);
  background: transparent;
  color: rgb(var(--color-foreground));
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.silque-rvs__arrow svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.silque-rvs__arrow:hover:not(:disabled) {
  background: rgba(var(--color-foreground), 0.06);
  border-color: rgba(var(--color-foreground), 0.4);
}
.silque-rvs__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.silque-rvs__track {
  --gap: 24px;
  --per: var(--per-m, 2);
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.silque-rvs__track::-webkit-scrollbar {
  display: none;
}
.silque-rvs__slide {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  min-width: 0;
  scroll-snap-align: start;
}
.silque-rvs__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.silque-rvs__stars {
  display: inline-flex;
  gap: 3px;
  margin-bottom: 10px;
}
.silque-rvs__meta {
  margin: 0 0 6px;
  font-size: 13px;
  color: rgb(var(--color-foreground), 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.silque-rvs__name {
  font-weight: 700;
  color: rgb(var(--color-foreground));
}
.silque-rvs__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  color: rgb(var(--color-foreground));
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.silque-rvs__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--color-foreground), 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 750px) {
  .silque-rvs__track {
    --per: 3;
  }
}
@media (min-width: 990px) {
  .silque-rvs__track {
    --per: var(--per-d, 4);
  }
}
@media (max-width: 749px) {
  .silque-rvs__inner {
    flex-direction: column;
    gap: 24px;
  }
  .silque-rvs__slider {
    width: 100%;
    gap: 8px;
  }
  .silque-rvs__arrow {
    width: 32px;
    height: 32px;
  }
  .silque-rvs__track {
    --gap: 14px;
  }
}
/* END_SECTION:trustpilot-reviews-slider */

/* START_SECTION:trustpilot-reviews (INDEX:61) */
.silque-reviews__head {
  text-align: center;
  margin-bottom: 28px;
}
.silque-reviews__verdict-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.silque-reviews__verdict {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: rgb(var(--color-foreground));
}
.silque-reviews__star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 3px;
  background: rgba(var(--color-foreground), 0.18);
}
.silque-reviews__star.is-on {
  background-color: var(--silk-gold, #b8905a);
  background-image: var(--silk-gold-gradient);
}
.silque-reviews__star-i {
  width: 14px;
  height: 14px;
  fill: rgb(var(--color-background));
}
.silque-reviews__star--sm {
  width: 16px;
  height: 16px;
}
.silque-reviews__star--sm .silque-reviews__star-i {
  width: 11px;
  height: 11px;
}
.silque-reviews__hstars {
  position: relative;
  display: inline-flex;
}
.silque-reviews__hstars-row {
  display: inline-flex;
  gap: 4px;
}
.silque-reviews__hstars-fill {
  position: absolute;
  inset: 0;
  width: var(--fill, 100%);
  overflow: hidden;
}
.silque-reviews__summary {
  margin: 16px 0 0;
  font-size: 14px;
  color: rgb(var(--color-foreground), 0.75);
}
.silque-reviews__count-link {
  color: inherit;
  font-weight: 500;
  text-decoration: underline;
}
.silque-reviews__platform {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  color: rgb(var(--color-foreground));
}
.silque-reviews__subtitle {
  margin: 24px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: rgb(var(--color-foreground), 0.7);
  text-align: left;
}
.silque-reviews__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
@media (min-width: 750px) {
  .silque-reviews__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 990px) {
  .silque-reviews__grid {
    grid-template-columns: repeat(var(--cols-d, 4), minmax(0, 1fr));
  }
}
.silque-reviews__card {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border-radius: 12px;
  background: rgba(var(--color-foreground), 0.03);
  border: 1px solid rgba(var(--color-foreground), 0.08);
}
.silque-reviews__stars {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 12px;
}
.silque-reviews__meta {
  margin: 0 0 6px;
  font-size: 13px;
  color: rgb(var(--color-foreground), 0.6);
}
.silque-reviews__name {
  font-weight: 700;
  color: rgb(var(--color-foreground));
}
.silque-reviews__title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--color-foreground));
}
.silque-reviews__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: rgb(var(--color-foreground), 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.silque-reviews__card.is-open .silque-reviews__body {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.silque-reviews__reply {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 3px solid var(--silk-gold-light, #cda871);
  background: rgba(var(--color-foreground), 0.04);
  border-radius: 0 8px 8px 0;
}
.silque-reviews__reply-head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: rgb(var(--color-foreground), 0.7);
}
.silque-reviews__reply-ico {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--silk-gold, #b8905a);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.silque-reviews__reply-date {
  margin-left: auto;
  font-weight: 400;
  opacity: 0.7;
}
.silque-reviews__reply-body {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgb(var(--color-foreground), 0.8);
  display: none;
}
.silque-reviews__card.is-open .silque-reviews__reply-body {
  display: block;
}
.silque-reviews__more {
  align-self: center;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  color: rgb(var(--color-foreground));
  cursor: pointer;
}
/* END_SECTION:trustpilot-reviews */

/* START_SECTION:wholesale-form (INDEX:62) */
.whf {
    position: relative;
    background: rgb(var(--color-background));
    color: rgb(var(--color-foreground));
    font-family: var(--font-body-family);
    overflow: hidden;
  }
  .whf__tex { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .whf__inner { position: relative; z-index: 1; max-width: 760px; }

  .whf__head { text-align: center; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
  .whf__eyebrow {
    margin: 0 0 0.5rem;
    font-family: var(--font-heading-family); font-weight: 600;
    font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgb(var(--color-button));
  }
  .whf__title {
    margin: 0;
    font-family: var(--font-heading-family); font-weight: 700;
    font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05;
    color: rgb(var(--color-foreground));
  }
  .whf__intro {
    margin: 0.9rem auto 0; max-width: 48ch;
    font-size: 1rem; line-height: 1.55; color: rgba(var(--color-foreground), 0.75);
  }
  .whf__intro p { margin: 0; }

  .whf__card {
    background: #fff;
    border: 1px solid rgba(var(--color-foreground), 0.06);
    border-radius: 18px;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    box-shadow: 0 18px 44px -20px rgba(58, 36, 22, 0.24), 0 2px 8px -3px rgba(58, 36, 22, 0.08);
  }
  .whf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .whf__field { display: flex; flex-direction: column; gap: 0.4rem; text-align: right; }
  .whf__field--full { grid-column: 1 / -1; }
  .whf__label { font-size: 0.85rem; font-weight: 600; color: rgba(var(--color-foreground), 0.82); }
  .whf__input {
    width: 100%; padding: 0.85rem 1rem;
    font-family: var(--font-body-family); font-size: 0.95rem;
    color: rgb(var(--color-foreground));
    background: rgb(var(--color-background));
    border: 1.5px solid rgba(var(--color-foreground), 0.14);
    border-radius: 10px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .whf__input::placeholder { color: rgba(var(--color-foreground), 0.4); }
  .whf__input:focus {
    outline: none;
    border-color: rgb(var(--color-button));
    box-shadow: 0 0 0 3px rgba(var(--color-button), 0.12);
  }
  .whf__textarea { resize: vertical; min-height: 120px; }
  .whf__submit {
    margin-top: 1.2rem; width: 100%; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgb(var(--color-button)); color: rgb(var(--color-button-text));
    border: 0; border-radius: 10px; cursor: pointer;
    font-family: var(--font-body-family); font-weight: 600; font-size: 1rem;
    letter-spacing: 0.02em;
    transition: opacity 0.15s ease, transform 0.12s ease;
  }
  .whf__submit:hover { opacity: 0.92; }
  .whf__submit:active { transform: translateY(1px); }

  .whf__status {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 1rem 1.2rem; border-radius: 12px;
    background: rgba(34, 160, 107, 0.1); color: #1c7a4f;
  }
  .whf__status svg { width: 22px; height: 22px; flex: 0 0 auto; }
  .whf__status p { margin: 0; font-weight: 600; }
  .whf__errors {
    margin-bottom: 1rem; padding: 0.8rem 1rem; border-radius: 10px;
    background: rgba(200, 32, 47, 0.08); color: #b3202c; font-size: 0.9rem;
  }

  .whf__direct {
    margin-top: 1.4rem; padding-top: 1.4rem;
    border-top: 1px solid rgba(var(--color-foreground), 0.1);
    text-align: center;
  }
  .whf__direct-label { display: block; font-size: 0.85rem; color: rgba(var(--color-foreground), 0.6); margin-bottom: 0.7rem; }
  .whf__direct-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
  /* WhatsApp + Email — same treatment as the Contact section. */
  .whf__wa, .whf__mail {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.72rem 1.2rem; border-radius: 6px;
    font-family: var(--font-heading-family);
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; text-decoration: none;
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.2s ease, color 0.2s ease;
  }
  .whf__wa svg, .whf__mail svg { width: 18px; height: 18px; }
  .whf__wa {
    background: #25d366; color: #fff; border: 1.5px solid #25d366;
    box-shadow: 3px 3px 0 1px #1a9b4c;
  }
  .whf__wa:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 1px #1a9b4c; }
  .whf__wa:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 1px #1a9b4c; }
  .whf__mail {
    background: rgb(var(--color-background)); color: rgb(var(--color-button));
    border: 1.5px solid rgb(var(--color-button)); box-shadow: 3px 3px 0 1px rgb(var(--color-button));
  }
  .whf__mail:hover { transform: translate(-1px, -1px); background: rgba(var(--color-button), 0.06); box-shadow: 5px 5px 0 1px rgb(var(--color-button)); }
  .whf__mail:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 1px rgb(var(--color-button)); }

  @media (max-width: 749px) {
    .whf__grid { grid-template-columns: 1fr; }
    .whf__wa, .whf__mail { padding-inline: 0.8rem; font-size: 0.75rem; }
  }
/* END_SECTION:wholesale-form */

/* START_SECTION:wishlist (INDEX:63) */
.wl { background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); }
  .wl__head { margin-bottom: 0.6rem; }

  /* Product grid — matches the theme's responsive product grids (2 / 3 / 4). */
  .wl__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    min-height: 120px;
  }
  @media (min-width: 750px) {
    .wl__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  }
  @media (min-width: 990px) {
    .wl__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  }
  .wishlist-item { position: relative; min-width: 0; }

  /* Empty state — branded, centered (shown by JS when there are no saved items). */
  .wl__empty {
    display: none;
    text-align: center;
    padding: 3.5rem 1.5rem;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }
  .wl__empty-icon {
    display: inline-flex;
    color: rgb(var(--color-button));
    margin-bottom: 0.3rem;
  }
  .wl__empty-icon svg { width: 52px; height: 52px; }
  .wl__empty-title {
    margin: 0;
    font-family: var(--font-heading-family);
    font-style: var(--font-heading-style);
    font-weight: var(--font-heading-weight);
    text-transform: uppercase;
    font-size: clamp(1.2rem, 0.8vw + 1rem, 1.7rem);
    color: rgb(var(--color-foreground));
  }
  .wl__empty-text {
    margin: 0;
    max-width: 42ch;
    color: rgba(var(--color-foreground), 0.7);
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .wl__empty-cta {
    margin-top: 0.9rem;
    padding: 0.75em 1.6em;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
  }
/* END_SECTION:wishlist */

/* CSS from block stylesheet tags */
/* START_BLOCK:badge-item (INDEX:66) */
.badge-item {
    display: flex;
    flex-direction: var(--badge-layout, column);
    align-items: var(--badge-align-items, center);
    text-align: var(--badge-text-align, center);
    gap: var(--badge-gap, 5px);
    min-width: 0;
  }

  .badge-item__icon {
    flex-shrink: 0;
    width: var(--badge-icon, 40px);
    height: var(--badge-icon, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .badge-item__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .badge-item__copy {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    text-align: inherit;
    min-width: 0;
    gap: 0.35em;
  }

  .badge-item__text {
    margin: 0;
    font-size: var(--badge-fs-m, 12px);
    font-weight: var(--badge-fw, 400);
    line-height: 1.35;
    max-width: 100%;
    color: rgb(var(--color-foreground));
  }

  .badge-item__subtitle {
    margin: 0;
    font-size: var(--badge-sub-fs-m, 12px);
    font-weight: var(--badge-sub-fw, 400);
    line-height: 1.35;
    max-width: 100%;
    color: rgb(var(--color-foreground));
  }

  @media screen and (min-width: 750px) {
    .badge-item__text {
      font-size: var(--badge-fs-d, 14px);
    }

    .badge-item__subtitle {
      font-size: var(--badge-sub-fs-d, 14px);
    }
  }
/* END_BLOCK:badge-item */

/* START_BLOCK:button (INDEX:67) */
.theme-button-slot {
    min-width: 0;
  }

  .theme-button-slot--custom {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
  }

  .theme-block-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-block) var(--button-padding-inline);
    width: var(--button-width-mobile);
    flex: var(--button-flex-mobile);
    min-width: 0;
    text-decoration: none;
    border-radius: var(--button-radius);
    border: 1px solid transparent;
    font-size: var(--button-mobile-size);
    line-height: 1;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
  }

  .theme-block-button--width-custom {
    display: flex;
  }

  .theme-block-button:hover {
    opacity: 0.85;
  }

  .theme-block-button--primary {
    background: rgb(var(--color-button));
    color: rgb(var(--color-background));
  }

  .theme-block-button--secondary {
    background: rgb(var(--color-foreground));
    color: rgb(var(--color-background));
  }

  .theme-block-button--outlined {
    background: transparent;
    color: rgb(var(--color-foreground));
    border-color: rgb(var(--color-foreground));
  }

  .theme-block-button--link.invert {
    color: rgb(var(--color-background))
  }
  .theme-block-button--link {
    background: transparent;
    color: rgb(var(--color-foreground));
    border: none;
    border-radius: 0;
    text-decoration: underline;
  }

  .theme-block-button--custom {
    background: var(--custom-bg);
    color: var(--custom-color);
    border-color: var(--custom-border-color);
    border-width: var(--custom-border-width);
  }

  @media (min-width: 1000px) {
    .theme-block-button {
      font-size: var(--button-desktop-size);
      width: var(--button-width-desktop);
      flex: var(--button-flex-desktop);
    }
  }
/* END_BLOCK:button */

/* START_BLOCK:group-badges (INDEX:70) */
.badges-group {
    padding-top: var(--badges-group-pt, 0);
    padding-bottom: var(--badges-group-pb, 0);
  }

  .badges-group__grid {
    display: grid;
    grid-template-columns: var(--badges-group-cols, repeat(3, minmax(0, 1fr)));
    gap: var(--badges-group-gap, 16px);
    justify-items: var(--badges-group-justify-items, center);
    width: 100%;
  }

  .badges-group .badge-item--default {
    --badge-icon: var(--badges-group-icon-size, 40px);
    --badge-fs-d: var(--badges-group-fs-d, 14px);
    --badge-fs-m: var(--badges-group-fs-m, 12px);
    --badge-fw: var(--badges-group-fw, 400);
    --badge-sub-fs-d: var(--badges-group-sub-fs-d, 14px);
    --badge-sub-fs-m: var(--badges-group-sub-fs-m, 12px);
    --badge-sub-fw: var(--badges-group-sub-fw, 400);
    --badge-layout: var(--badges-group-layout, column);
    --badge-align-items: var(--badges-group-align-items, center);
    --badge-text-align: var(--badges-group-text-align, center);
    --badge-gap: var(--badges-group-item-gap, 5px);
  }

  .badges-group--main-heading .badge-item--default .badge-item__text {
    font-family: var(--font-heading-family);
  }

  .badges-group--subtitle-heading .badge-item--default .badge-item__subtitle {
    font-family: var(--font-heading-family);
  }
/* END_BLOCK:group-badges */

/* START_BLOCK:group-buttons (INDEX:71) */
.buttons-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--btn-group-gap, 12px);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .buttons-group > * {
    min-width: 0;
  }

  .buttons-group--horizontal {
    flex-direction: row;
    justify-content: var(--btn-group-main, flex-start);
    align-items: center;
  }

  .buttons-group--horizontal > .theme-button-slot--custom {
    flex: 1 1 0%;
  }

  .buttons-group--horizontal > *:has(.theme-block-button--width-custom) {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
  }

  .buttons-group--vertical {
    flex-direction: column;
    align-items: var(--btn-group-cross, flex-start);
    justify-content: flex-start;
  }

  .buttons-group--vertical > .theme-button-slot--custom {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }

  .buttons-group--vertical > *:has(.theme-block-button--width-custom) {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
  }
/* END_BLOCK:group-buttons */

/* START_BLOCK:payments-icons (INDEX:72) */
.payment-icons {
    width: 100%;
  }

  .payment-icons__list {
    display: flex;
    align-items: center;
    justify-content: var(--alignment);
    flex-wrap: wrap;
    gap: var(--icon-gap);
    margin: 0;
    padding: 0;
  }

  .payment-icons__item {
    display: flex;
    align-items: center;
  }
/* END_BLOCK:payments-icons */

/* START_BLOCK:positioned-image (INDEX:73) */
/* Match horizontal padding of .page-width (see assets/base.css) */
  .positioned-image {
    --positioned-image-page-pad: 0.75rem;
  }

  .positioned-image--layout-absolute {
    position: absolute;
    z-index: var(--positioned-image-z, 5);
    pointer-events: none;
    max-width: none;
  }

  .positioned-image--layout-absolute.positioned-image--width-custom {
    width: min(90%, var(--positioned-image-w-mobile, 280px));
  }

  .positioned-image--layout-absolute.positioned-image--width-adapt {
    width: auto;
    max-width: min(100%, 90vw);
  }

  .positioned-image--layout-absolute.positioned-image--width-adapt .positioned-image__picture,
  .positioned-image--layout-absolute.positioned-image--width-adapt .positioned-image__img {
    width: auto;
    max-width: 100%;
    height: auto;
  }

  .positioned-image--layout-static {
    position: relative;
    z-index: auto;
    pointer-events: auto;
    max-width: 100%;
  }

  .positioned-image--layout-static.positioned-image--width-custom {
    width: min(100%, var(--positioned-image-w-mobile, 280px));
  }

  .positioned-image--layout-static.positioned-image--width-adapt {
    width: 100%;
    max-width: 100%;
  }

  @media screen and (max-width: 999px) {
    .positioned-image--hide-mobile {
      display: none !important;
    }
  }

  @media screen and (min-width: 768px) {
    .positioned-image--layout-absolute {
      --positioned-image-page-pad: 5rem;
    }
  }

  @media screen and (min-width: 1000px) {
    .positioned-image--layout-absolute {
      --positioned-image-page-pad: 2.5rem;
    }

    .positioned-image--layout-absolute.positioned-image--width-custom {
      width: min(90%, var(--positioned-image-w-desktop, 720px));
    }
  }

  @media screen and (min-width: 1400px) {
    .positioned-image--layout-absolute {
      --positioned-image-page-pad: 5rem;
    }
  }

  @media screen and (min-width: 1000px) {
    .positioned-image--layout-static.positioned-image--width-custom {
      width: min(100%, var(--positioned-image-w-desktop, 720px));
    }
  }

  .positioned-image--empty {
    min-width: 48px;
    min-height: 48px;
    outline: 1px dashed rgba(var(--color-foreground), 0.25);
  }

  .positioned-image__picture,
  .positioned-image__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--positioned-image-radius, 0);
    overflow: hidden;
  }

  /* Top row — left/right use same inset as .page-width padding (absolute layout only) */
  .positioned-image--top-left {
    top: 0;
    left: var(--positioned-image-page-pad);
    transform: none;
  }

  .positioned-image--top-center {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .positioned-image--top-right {
    top: 0;
    right: var(--positioned-image-page-pad);
    left: auto;
    transform: none;
  }

  /* Middle row */
  .positioned-image--center-left {
    top: 50%;
    left: var(--positioned-image-page-pad);
    transform: translateY(-50%);
  }

  .positioned-image--center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .positioned-image--center-right {
    top: 50%;
    right: var(--positioned-image-page-pad);
    left: auto;
    transform: translateY(-50%);
  }

  /* Bottom row */
  .positioned-image--bottom-left {
    bottom: 0;
    left: var(--positioned-image-page-pad);
    top: auto;
    transform: none;
  }

  .positioned-image--bottom-center {
    bottom: 0;
    left: 50%;
    top: auto;
    transform: translateX(-50%);
  }

  .positioned-image--bottom-right {
    bottom: 0;
    right: var(--positioned-image-page-pad);
    left: auto;
    top: auto;
    transform: none;
  }
/* END_BLOCK:positioned-image */

/* START_BLOCK:slide (INDEX:74) */
.swiper-slide-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 0 0);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
  }
  .swiper-slide-wrapper.has-overlay:after {
    position: absolute;
    content:"";
    inset: 0;
    background-color: rgba(0, 0, 0, var(--overlay-opacity));
    z-index: 1;
  }

  .swiper-slide-wrapper.active {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    clip-path: inset(0 0 0 0) !important;
  }

  .swiper-slide-wrapper.next-slide {
    opacity: 1;
    visibility: visible;
    z-index: 1;
    clip-path: inset(0 0 0 0);
  }

  .swiper-slide-wrapper.cutting {
    opacity: 1;
    visibility: visible;
    z-index: 3;
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
    transition: clip-path 0.5s ease-in;
    -webkit-transition: -webkit-clip-path 0.5s ease-in;
  }

  .swiper-slide-wrapper.cutting.cut-active-next {
    clip-path: inset(0 100% 0 0);
    -webkit-clip-path: inset(0 100% 0 0);
  }

  .swiper-slide-wrapper.cutting.cut-active-prev {
    clip-path: inset(0 0 0 100%);
    -webkit-clip-path: inset(0 0 0 100%);
  }

  .swiper-slide-wrapper.cutting * {
    pointer-events: none;
  }

  .swiper-slide-wrapper img,
  .swiper-slide-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    pointer-events: none;
  }

  .swiper-slide-image--fallback {
    display: none;
  }

  .swiper-slide-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Mobile / touch: stable stacking + compositing (Safari, Chrome Android) */
  @media screen and (max-width: 999px) {
    .swiper-slide-wrapper {
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }

    .swiper-slide-wrapper.active {
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
    }
  }
/* END_BLOCK:slide */

/* START_BLOCK:text (INDEX:75) */
.theme-block-text {
    margin: 0;
    width: 100%;
    text-align: inherit;
    color: rgb(var(--text-color-rgb), var(--text-opacity));
    font-size: var(--text-mobile-size);
    font-weight: var(--text-font-weight, 400);
    line-height: 1.1;
    letter-spacing: 0;
  }

  .theme-block-text p {
    margin: 0;
    color: inherit;
  }

  .theme-block-text strong {
    color: rgb(var(--color-button));
  }

  @media (min-width: 1000px) {
    .theme-block-text {
      font-size: var(--text-desktop-size);
    }
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:background-media (INDEX:81) */
@media (prefers-reduced-motion: reduce) {
    video-background-component video {
      display: none;
    }
  }
/* END_SNIPPET:background-media */

/* START_SNIPPET:divider (INDEX:91) */
.divider {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: var(--divider-justify-content);
  }

  .divider__line {
    border-bottom: var(--divider-border-thickness) solid var(--color-border);
    border-right: var(--divider-border-thickness) solid var(--color-border);
    border-radius: calc(var(--style-border-radius-sm) * var(--divider-border-rounded));
    flex-basis: var(--divider-flex-basis);
    min-height: var(--divider-flex-basis);
  }
/* END_SNIPPET:divider */

/* START_SNIPPET:group (INDEX:96) */
.group-block__link {
    position: absolute;
    inset: 0;
  }

  .group-block__link ~ :is(.group-block-content, .group-block__media-wrapper) {
    pointer-events: none;

    :is(a, button, input, textarea, select) {
      pointer-events: auto;
    }
  }

  /* Needs the .group-block__link ~ to be specific enough to take effect. */
  .group-block__link ~ .group-block-content--design-mode {
    pointer-events: auto;
  }
/* END_SNIPPET:group */

/* START_SNIPPET:overlay (INDEX:109) */
.overlay {
    position: absolute;
    inset: 0;
    z-index: var(--overlay-layer);
    pointer-events: none;
    border-radius: var(--overlay-border-radius, 0);
  }

  .overlay--solid {
    background: var(--overlay-color);
  }

  .overlay--gradient {
    background: linear-gradient(var(--overlay-direction), var(--overlay-color), var(--overlay-color--end));
  }
/* END_SNIPPET:overlay */

/* START_SNIPPET:torn-edge (INDEX:141) */
.torn-edge {
    position: absolute;
    left: 0;
    right: 0;
    height: var(--torn-h, 44px);
    z-index: 6;
    pointer-events: none;
    line-height: 0;
  }
  .torn-edge--bottom { bottom: 0; }
  .torn-edge--top { top: 0; transform: scaleY(-1); }
  .torn-edge__svg { display: block; width: 100%; height: 100%; }
  .torn-edge__fill { fill: var(--torn-fill, #ffffff); transition: fill 0.55s ease; }
/* END_SNIPPET:torn-edge */