/** Shopify CDN: Minification failed

Line 1589:28 Unexpected "*"

**/
/*
  rbk-pdp.css — Premium buy-box polish for the product page.
  Loaded on product templates only. Pure CSS over Shella's existing markup, so
  Pixel/gtag/cart wiring and the form's zoom-scaler are untouched.

  Design language: RBK's own, drawn from evemen / bluorng / esthreall —
  confident Sequel Sans hierarchy, airy rhythm, outlined size pills with a
  filled selected state and diagonal-strike sold-outs, an elevated brand-red CTA
  (not a flat slab), and Emil-style reveal + press feedback. Everything answers
  to the theme tokens, so it's correct in light AND dark.

  Sizing is plain px on purpose: the buy-box form already scales on 2K/4K via
  its own zoom (product-page-get-info), so these values ride that zoom.
*/

/* ============================ Fixed-header clearance ============================ */
/* The header is position:fixed. The sticky product column is offset below it via
   data-top-spacing="120" on the column (read by the StickySidebar lib + its CSS
   fallback) so the title no longer slides under the header when it reveals on
   scroll-up. scroll-padding keeps in-page anchors clear of the header too. */
html { scroll-padding-top: calc(var(--rbk-header-h, 110px) + 14px); }

/* ============================ Rhythm ============================ */
.product-page-info { color: var(--rbk-ink); }

/* Rhythm: header block → size selector → ATC step on a 24px outer scale (the major
   beats of the buy box), while within-block gaps use the 18px minor step. Even
   beats let the box breathe without ad-hoc per-element guesses. */
.product-page-info .rk-header-row { margin-bottom: 24px; }

/* Breadcrumb (Home > Title) — quiet, like evemen */
.product-page .breadcrumbs,
.product-page .breadcrumb { font-family: "Sequel Sans Medium Disp", sans-serif; font-size: 12px; letter-spacing: 0.04em; color: var(--rbk-ink-mute); margin-bottom: 18px; }
.product-page .breadcrumbs a, .product-page .breadcrumb a { color: var(--rbk-ink-mute); transition: color .2s var(--rbk-ease-out); }
.product-page .breadcrumbs a:hover, .product-page .breadcrumb a:hover { color: var(--rbk-ink); }

/* ============================ Title ============================ */
.product-page-info .rk-product-title {
  /* Evemen restraint: the title was 38px Heavy — loud. Dropped to 26px and a lighter
     Bold weight so it reads premium/quiet, not shouty. Mobile keeps its own 28px. */
  font-family: "Sequel Sans Bold Disp", sans-serif !important;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--rbk-ink) !important;
  margin: 0 0 8px;
  text-wrap: balance;
}

/* Micro-subtext: token-driven (reads in light), and given real breathing room —
   the template setting pulls it up with a -18px top margin, which collided with
   the title. Force a clean gap below the title and before the price. */
.product-page-info .rk-product-micro-subtext {
  color: var(--rbk-ink-dim) !important;
  margin-top: 4px !important;
  margin-bottom: 16px !important;
  line-height: 1.35 !important;
}
/* ---- Header layout: CSS GRID with named areas ----
   ONE arrangement at every breakpoint (the desktop split was scrapped — it "sucked
   on desktop" and drifted per product). Left column stacks title → subtext → price;
   "Dive Into Lore" sits top-right, pinned to the title row.
     ┌─────────────────────┬──────────────┐
     │ TITLE               │  DIVE → (top)│
     │ subtext             │              │
     │ PRICE               │              │
     └─────────────────────┴──────────────┘ */
.product-page-info .rk-header-row--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* Lore lives in the TITLE row only (centered against the title), so it aligns to
     the product title — not floating across the whole stack. */
  grid-template-areas:
    "title lore"
    "sub   ."
    "price .";
  column-gap: 16px;
  row-gap: 0;               /* spacing is controlled per-element below, not uniform */
  align-items: start;
  text-align: left !important;   /* beat the markup's `.text-center` utility on mobile */
  margin-top: 10px;         /* breathing room above the title */
}
/* The header carries a `text-center` class (with `text-md-left` only at ≥768px).
   The mobile left-align used to come from product-page-get-info-styles.liquid —
   but that snippet ONLY renders when the product has a micro_subtext, so products
   WITHOUT a tagline stayed centered on mobile. Force left-align here (always loaded
   on product pages) so every product is left-aligned regardless of subtext. */
.product-page-info .rk-header-row--split,
.product-page-info .rk-header-row--split .rk-ga-title,
.product-page-info .rk-header-row--split .rk-product-micro-subtext,
.product-page-info .rk-header-row--split .rk-price-wrap,
.product-page-info .rk-header-row--split .rk-price-wrap .price { text-align: left !important; }
.product-page-info .rk-header-row--split .rk-price-wrap .price { justify-content: flex-start !important; }
.product-page-info .rk-header-row--split .rk-ga-title { grid-area: title; margin: 0 !important; }
/* subtext hugs the title; price sits noticeably lower → subtext clearly belongs to
   the title, not floating equidistant between the two. */
.product-page-info .rk-header-row--split .rk-product-micro-subtext { margin: 4px 0 0 !important; }
.product-page-info .rk-header-row--split .rk-price-wrap { margin: 16px 0 0 !important; transform: none !important; justify-self: start; }
.product-page-info .rk-ga-sub   { grid-area: sub; }
.product-page-info .rk-ga-price { grid-area: price; }
/* Lore: top-right, flush to the edge, vertically centered against the title line. */
.product-page-info .rk-ga-lore  { grid-area: lore; align-self: center; justify-self: end; text-align: right; }

@media (min-width: 768px) {
  .product-page-info .rk-header-row--split { column-gap: 24px; margin-top: 6px; }
  /* Price drops one minor step (20px) below the subtext on desktop — enough air that
     it reads as its own beat, on the same scale as the rest of the buy box. */
  .product-page-info .rk-header-row--split .rk-price-wrap { margin-top: 20px !important; }
}

/* ---- "Dive Into Lore" → a quiet text link with an arrow (no box) ----
   The boxed treatment read as cheap; this is a restrained uppercase link. The
   accent-colored arrow nudges right on hover (Emil), and the label carries a thin
   accent underline that wipes in on hover so it still feels interactive. */
.product-page-info .rk-lore-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rbk-ink) !important;
  opacity: 1 !important;
  font-family: "Sequel Sans Semi Bold Disp", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s var(--rbk-ease-out);
}
.product-page-info .rk-lore-label {
  position: relative;
}
.product-page-info .rk-lore-label::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1.5px;
  background: var(--rbk-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s var(--rbk-ease-out);
}
.product-page-info .rk-lore-arrow {
  color: var(--rbk-accent);
  display: inline-block;
  will-change: transform;
  transition: transform .2s var(--rbk-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-lore-link:hover { color: var(--rbk-accent) !important; }
  .product-page-info .rk-lore-link:hover .rk-lore-label::after { transform: scaleX(1); }
  .product-page-info .rk-lore-link:hover .rk-lore-arrow { transform: translateX(4px); }
}

/* ===================== Lore button — style + placement system =====================
   product-page-get-info.liquid puts 4 computed classes on the button:
     rk-lore--sd-<style> / rk-lore--sm-<style>   (desktop / mobile STYLE)
     rk-lore--pd-<place> / rk-lore--pm-<place>   (desktop / mobile PLACEMENT)
   STYLES: link | underline | pill-outline | pill-solid | tag
   PLACEMENTS: top_right | under_title | under_price
   `link` + `top_right` are the original look, so the defaults change nothing. The
   per-product metafields are the LOCAL control; the global theme settings OVERRIDE
   them per axis. Desktop rules are keyed off -sd-/-pd- inside min-width:768px and
   mobile off -sm-/-pm- inside max-width:767px, so the two breakpoints differ freely. */

/* ---- STYLE: desktop ---- */
@media (min-width: 768px) {
  .product-page-info .rk-lore--sd-underline { border:0 !important; background:transparent !important; padding:0 !important; }
  .product-page-info .rk-lore--sd-underline .rk-lore-arrow { display:none; }
  .product-page-info .rk-lore--sd-underline .rk-lore-label::after { display:none; }
  .product-page-info .rk-lore--sd-underline .rk-lore-label { text-decoration:underline; text-decoration-color:var(--rbk-accent); text-underline-offset:4px; text-decoration-thickness:1.5px; }

  .product-page-info .rk-lore--sd-pill-outline { border:1px solid var(--rbk-line); border-radius:999px; padding:9px 16px; background:transparent; }
  .product-page-info .rk-lore--sd-pill-outline .rk-lore-label::after { display:none; }

  .product-page-info .rk-lore--sd-pill-solid { border:1px solid var(--rbk-ink); border-radius:999px; padding:9px 16px; background:var(--rbk-ink); color:var(--rbk-bg) !important; }
  .product-page-info .rk-lore--sd-pill-solid .rk-lore-arrow { color:var(--rbk-bg); }
  .product-page-info .rk-lore--sd-pill-solid .rk-lore-label::after { display:none; }

  .product-page-info .rk-lore--sd-tag { border:1px solid var(--rbk-line); border-radius:4px; padding:7px 11px; background:transparent; font-size:10px; letter-spacing:0.18em; }
  .product-page-info .rk-lore--sd-tag .rk-lore-label::after { display:none; }
}
@media (hover:hover) and (pointer:fine) and (min-width:768px) {
  .product-page-info .rk-lore--sd-pill-outline:hover,
  .product-page-info .rk-lore--sd-tag:hover { border-color:var(--rbk-ink) !important; }
  .product-page-info .rk-lore--sd-pill-solid:hover { color:var(--rbk-bg) !important; opacity:.88; }
}

/* ---- STYLE: mobile ---- */
@media (max-width: 767px) {
  .product-page-info .rk-lore--sm-underline { border:0 !important; background:transparent !important; padding:0 !important; }
  .product-page-info .rk-lore--sm-underline .rk-lore-arrow { display:none; }
  .product-page-info .rk-lore--sm-underline .rk-lore-label::after { display:none; }
  .product-page-info .rk-lore--sm-underline .rk-lore-label { text-decoration:underline; text-decoration-color:var(--rbk-accent); text-underline-offset:4px; text-decoration-thickness:1.5px; }

  .product-page-info .rk-lore--sm-pill-outline { border:1px solid var(--rbk-line); border-radius:999px; padding:8px 14px; background:transparent; }
  .product-page-info .rk-lore--sm-pill-outline .rk-lore-label::after { display:none; }

  .product-page-info .rk-lore--sm-pill-solid { border:1px solid var(--rbk-ink); border-radius:999px; padding:8px 14px; background:var(--rbk-ink); color:var(--rbk-bg) !important; }
  .product-page-info .rk-lore--sm-pill-solid .rk-lore-arrow { color:var(--rbk-bg); }
  .product-page-info .rk-lore--sm-pill-solid .rk-lore-label::after { display:none; }

  .product-page-info .rk-lore--sm-tag { border:1px solid var(--rbk-line); border-radius:4px; padding:6px 10px; background:transparent; font-size:10px; letter-spacing:0.16em; }
  .product-page-info .rk-lore--sm-tag .rk-lore-label::after { display:none; }
}

/* ---- PLACEMENT: desktop (rewrites the header grid via :has() so the button can
        leave the title row and become a full-width row) ---- */
@media (min-width: 768px) {
  .product-page-info .rk-header-row--split:has(.rk-lore--pd-under_title) {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "title" "lore" "sub" "price";
  }
  .product-page-info .rk-ga-lore.rk-lore--pd-under_title { justify-self:start; align-self:start; text-align:left; margin:10px 0 0 !important; }

  .product-page-info .rk-header-row--split:has(.rk-lore--pd-under_price) {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "title" "sub" "price" "lore";
  }
  .product-page-info .rk-ga-lore.rk-lore--pd-under_price { justify-self:start; align-self:start; text-align:left; margin:16px 0 0 !important; }
}

/* ---- PLACEMENT: mobile ---- */
@media (max-width: 767px) {
  .product-page-info .rk-header-row--split:has(.rk-lore--pm-under_title) {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "title" "lore" "sub" "price";
  }
  .product-page-info .rk-ga-lore.rk-lore--pm-under_title { justify-self:start; align-self:start; text-align:left; margin:8px 0 0 !important; }

  .product-page-info .rk-header-row--split:has(.rk-lore--pm-under_price) {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "title" "sub" "price" "lore";
  }
  .product-page-info .rk-ga-lore.rk-lore--pm-under_price { justify-self:start; align-self:start; text-align:left; margin:14px 0 0 !important; }
}

/* ---- Size Guide → a quiet underlined text link (was a boxed button) ----
   Scoped to .product-page-info (a guaranteed ancestor of the size row) AND raised
   in specificity with the wrapper so it beats theme-m.css's later, boxed
   `.rk-size-guide-btn` rule on EVERY product — that mismatch was why one product
   showed a box and another a link. */
.product-page-info .rk-size-row .rk-size-guide-btn,
.product-page-info .rk-size-guide-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
  position: relative;
  top: -2px;              /* optical nudge up so it sits level with the size label */
  color: var(--rbk-ink) !important;
  font-family: "Sequel Sans Semi Bold Disp", sans-serif !important;
  font-size: clamp(8.5px, 3cqw, 12px) !important;   /* scales with the column like the label */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--rbk-accent);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  cursor: pointer;
  transition: color .2s var(--rbk-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-size-guide-btn:hover { color: var(--rbk-accent) !important; }
}

/* ============================ Price ============================ */
.product-page-info .rk-price-wrap .price,
.product-page-info .rk-price-wrap [data-js-product-price] {
  font-family: "Sequel Sans Medium Disp", sans-serif;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--rbk-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  /* Tabular figures so the price holds its width as the variant changes — no glyph
     reflow / horizontal jitter when digits swap (e.g. 1→8). */
  font-variant-numeric: tabular-nums;
}
/* The sale "now" price (red) inherited a legacy `font-weight: 700` (theme-m.css),
   which made it look heavy and blurry on mobile. Pull it back to a clean Medium so
   the red price stays crisp and doesn't feel like it'll bleed. */
.product-page-info .rk-price-wrap .price-now,
.product-page-info .rk-price-wrap .price-now .rbk-price,
.product-page-info .price--sale .price-now {
  font-family: "Sequel Sans Medium Disp", sans-serif !important;
  font-weight: 400 !important;
  color: var(--rbk-ink);   /* neutral price globally (was red); sale price is no longer accent */
  /* Same tabular figures on the sale price so it can't shift width per variant. */
  font-variant-numeric: tabular-nums;
}
.product-page-info .price-compare,
.product-page-info .price-compare s {
  color: var(--rbk-ink-dim);                 /* legible muted, not near-invisible on dark */
  font-size: 0.78em;
  font-weight: 400 !important;
  text-decoration-thickness: 1px;            /* hairline strike so the price stays readable */
  text-decoration-color: var(--rbk-ink-mute);
}

/* ============================ Size selector ============================ */
/* Options → ATC: the other major beat, matched to the header's 24px so both block
   separators are identical and the box reads on one rhythm. */
.product-page-info .product-page-info__options { margin-bottom: 24px; }

/* Size row = [ SIZE: 30 · WAIST · LENGTH ]  …………  [ Size Guide ]
   ALIGNMENT (the bit that kept "feeling off"): the label and "Size Guide" are both
   all-caps but at DIFFERENT font sizes. `align-items: center` lines up their
   line-box midpoints — but for caps the empty descender space below the baseline
   sits unused, so centering pushes the larger text optically HIGHER than the
   smaller one. The fix for caps-on-a-line is `align-items: baseline`, which sits
   both on the same cap baseline so they read level regardless of size difference.
   (Also: the wrapper must NOT be `overflow: hidden` — that makes a flex item report
   its bottom edge as its baseline, which would re-break baseline alignment.) */
.product-page-info .rk-size-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: nowrap;         /* keep SIZE / CHEST / LENGTH + SIZE CHART on ONE line. The
                                label below shrinks (font keyed to the COLUMN width via
                                container queries) so it fits instead of dropping SIZE CHART
                                to a 2nd line — works on mobile AND tablet split columns. */
  gap: 6px clamp(8px, 2cqw, 14px);
  width: 100%;
  margin-bottom: 18px;       /* clear gap before the variant pills below */
  container-type: inline-size;  /* the row IS the query container; its inline size == the
                                   buy-box column, so 'cqw' below scales to the real column,
                                   not the viewport. Only the size row holds no abs-positioned
                                   children, so inline-size containment here is layout-safe. */
}
.product-page-info .rk-size-row .rk-size-label-wrapper {
  flex: 0 1 auto;       /* may shrink */
  min-width: 0;         /* allow shrink below content size */
  overflow: visible;    /* keep the real text baseline (overflow:hidden corrupts it) */
}
.product-page-info .rk-size-row .rk-size-guide-btn {
  align-self: baseline;
  flex: 0 0 auto;       /* SIZE CHART never shrinks or wraps; the label yields space first */
  margin-left: auto;    /* stay right-aligned even when the Size label toggle hides the label */
}
/* bare SIZE: the toggle keeps the word but drops the colon + the Chest/Waist/Length measures
   ([data-rk-size-extra] = the JS-injected measure spans; hidden here as a backstop) */
.product-page-info .rk-size-row.rk-size--bare .rk-size-colon,
.product-page-info .rk-size-row.rk-size--bare .rk-size-value,
.product-page-info .rk-size-row.rk-size--bare [data-rk-size-extra],
.product-page-info .rk-size-row.rk-size--bare .rk-size-measures { display: none !important; }

/* "Size" label + size-guide affordance on one line (esthreall / evemen).
   Font is keyed to the column (cqw) so the SIZE / CHEST / LENGTH measures shrink on
   narrow columns (mobile + tablet split) and the whole row holds one line. !important on
   the spans beats theme-m.css's `.rk-size-label-enhanced span { 8px }`. Inter-measure
   spacing is the flex gap below (responsive), NOT hardcoded spaces in the JS. */
.product-page-info .rk-size-label-wrapper {
  font-family: "Sequel Sans Semi Bold Disp", sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rbk-ink);
  margin-bottom: 0;     /* moved to .rk-size-row so the row stays symmetric */
  display: flex;
  align-items: baseline;   /* SIZE / value / WAIST / LENGTH all share one baseline */
  flex-wrap: nowrap;
  gap: clamp(4px, 1.4cqw, 9px);
  white-space: nowrap;     /* each measure stays intact; the row shrinks the font, not wraps */
}
.product-page-info .rk-size-label-wrapper,
.product-page-info .rk-size-label-wrapper span,
.product-page-info .rk-size-label-wrapper [data-rk-size-extra],
.product-page-info .rk-size-label-enhanced span { font-size: clamp(8.5px, 3cqw, 12px) !important; }
.product-page-info .rk-size-label-wrapper [data-rk-size-extra]:not(:empty) { white-space: nowrap; }

/* The SIZE: 30 · WAIST · LENGTH chip was a grey filled pill (theme-d/m
   `.rk-size-label-enhanced` → background var(--rbk-bg-2) + radius + padding). Strip
   it back to PLAIN TEXT so it matches the editorial, airy feel of the rest of the
   buy box — no fill, no box, no negative margin pulling it off the column edge. */
.product-page-info .rk-size-label-wrapper.rk-size-label-enhanced,
.product-page-info label.rk-size-label-wrapper.rk-size-label-enhanced {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-left: 0 !important;
}

/* Size-guide / details link — refined, with arrow on hover (Emil) */
.product-page-info .product-page-info__details-buttons .btn-link,
.product-page-info .js-popup-button {
  font-family: "Sequel Sans Medium Disp", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
  color: var(--rbk-ink-dim) !important;
  text-transform: none;
  transition: color .2s var(--rbk-ease-out);
}
.product-page-info .product-page-info__details-buttons .btn-link:hover,
.product-page-info .js-popup-button:hover { color: var(--rbk-ink) !important; }

/* The pills */
.product-page-info .product-options__value--text,
.product-page-info .product-options__value--large-text {
  min-width: 56px;
  /* Target = 50px RENDERED on 1080p desktop. The buy-box form is at 0.9 zoom on
     desktop (768–1920px), so the CSS height is target/0.9 → it displays at 50px.
     2K/4K ride the form's 1.35×/1.9× zoom, so this scales up proportionally there.
     Mobile (zoom 1) keeps its own 46px override below — untouched. */
  height: calc(50px / 0.9);
  padding: 0 18px;
  margin: 0 8px 8px 0;
  border-radius: 8px !important;
  border: 1px solid var(--rbk-line) !important;     /* hairline, not heavy — premium calm */
  background: transparent !important;
  color: var(--rbk-ink) !important;
  font-family: "Sequel Sans Semi Bold Disp", sans-serif;  /* a touch more presence than Medium */
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: border-color .2s var(--rbk-ease-out),
              background-color .2s var(--rbk-ease-out),
              color .2s var(--rbk-ease-out),
              transform .14s var(--rbk-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .product-page-info .product-options__value--text:hover,
  .product-page-info .product-options__value--large-text:hover {
    border-color: var(--rbk-ink) !important;
    transform: translateY(-1px);
  }
}
.product-page-info .product-options__value--text:active,
.product-page-info .product-options__value--large-text:active { transform: translateY(0) scale(0.97); }

/* Selected = filled ink (bluorng) */
.product-page-info .product-options__value--text.active,
.product-page-info .product-options__value--large-text.active {
  background: var(--rbk-ink) !important;
  color: var(--rbk-bg) !important;
  border-color: var(--rbk-ink) !important;
}

/* Sold-out = greyed pill, label still VISIBLE, struck through horizontally.
   Two things broke visibility before:
   (1) the legacy markup adds `.text-hide` to image/color swatches, but for text
       pills the size label lives in our `.rk-opt-txt` span — we force it visible.
   (2) the legacy diagonal cross is drawn with `var(--theme)` (unmapped → invisible
       in light). We kill that cross and draw our own horizontal strike instead. */
.product-page-info .product-options__value--text.disabled,
.product-page-info .product-options__value--large-text.disabled,
.product-page-info .product-options__value--text.disabled-hidden,
.product-page-info .product-options__value--large-text.disabled-hidden {
  color: var(--rbk-ink-dim) !important;       /* greyed, readable in BOTH themes */
  border-color: var(--rbk-line) !important;
  background: transparent !important;
  opacity: 1 !important;                      /* legacy sometimes dims the whole box away */
  text-decoration: none !important;           /* drop the theme's native strike on the box */
  text-indent: 0 !important;                  /* undo `.text-hide` (text-indent:-9999px) */
}
/* Force the label span back into normal flow + visible, greyed (inactive look).
   The legacy `.disabled-hidden span` is position:absolute (for the diagonal bars) —
   re-assert static so the size number shows. We DROP CSS `line-through` here because
   it only spans the glyphs (padding doesn't widen it → looked short/bugged). The
   wider strike is drawn as a pseudo-element bar below. */
.product-page-info .product-options__value.disabled .rk-opt-txt,
.product-page-info .product-options__value.disabled-hidden .rk-opt-txt {
  position: static !important;
  display: inline-block !important;
  color: var(--rbk-ink-mute) !important;      /* greyed, clearly inactive */
  text-indent: 0 !important;
  font-size: inherit !important;
  text-decoration: none !important;
}
/* Wider strike: a centered bar spanning ~70% of the WHOLE pill, not just the text.
   The pill is the positioning context; the bar is horizontally centered and runs
   well past the size number so it reads unmistakably as struck-out / sold-out. */
.product-page-info .product-options__value.disabled,
.product-page-info .product-options__value.disabled-hidden {
  position: relative;
}
.product-page-info .product-options__value.disabled::after,
.product-page-info .product-options__value.disabled-hidden::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 50%;
  /* Width + thickness are theme-setting driven (Product page > Sold-out strike).
     The bar stays centred: left = (100% - width) / 2. */
  width: var(--rbk-strike-width, 64%);
  left: calc((100% - var(--rbk-strike-width, 64%)) / 2);
  height: var(--rbk-strike-thickness, 1.5px);
  transform: translateY(-50%);
  background: var(--rbk-ink-mute) !important; /* greyed strike, matches the inactive text */
  pointer-events: none;
}
/* Kill the legacy diagonal cross (drawn on the inner span's ::before/::after, and
   the element's own ::before). We do NOT touch the element's ::after — that's our
   new horizontal strike bar above. */
.product-page-info .product-options__value.disabled-hidden span::before,
.product-page-info .product-options__value.disabled-hidden span::after,
.product-page-info .product-options__value.disabled span::before,
.product-page-info .product-options__value.disabled span::after,
.product-page-info .product-options__value.disabled::before,
.product-page-info .product-options__value.disabled-hidden::before {
  display: none !important;
}

/* ============================ Add to cart ============================ */
/* Elevated brand-red CTA. NO drop shadow (the red glow looked cheap on light).
   Depth comes from a subtle inner top-highlight + a crisp press, not a halo.
   A sweeping sheen crosses on hover (desktop) for a premium, tactile feel. */
.product-page-info .product-page-info__button-add-to-cart .btn,
.product-page-info .js-product-button-add-to-cart {
  position: relative;
  overflow: hidden;
  background-color: var(--rbk-accent) !important;
  color: var(--rbk-on-accent) !important;
  border: 0 !important;
  border-radius: 8px !important;
  /* Target = 75px RENDERED on 1080p desktop. Form is at 0.9 zoom, so target/0.9
     displays at 75px; 2K/4K ride the form zoom. Mobile keeps its 60px override. */
  height: calc(75px / 0.9) !important;
  font-family: "Sequel Sans Semi Bold Disp", sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.22em;          /* wide tracking lets the uppercase breathe — premium */
  text-transform: uppercase;
  box-shadow: none !important;               /* killed the red drop shadow */
  /* inner highlight = soft top sheen for a "lit" surface without an outer halo */
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(255,255,255,0) 42%);
  transition: transform .2s var(--rbk-ease-out),
              background-color .2s var(--rbk-ease-out),
              filter .2s var(--rbk-ease-out) !important;
}
/* hover sheen sweep */
.product-page-info .js-product-button-add-to-cart::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .55s var(--rbk-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .product-page-info .js-product-button-add-to-cart:hover {
    transform: translateY(-1px);
    background-color: var(--rbk-accent-bright) !important;
    filter: saturate(1.05);
  }
  .product-page-info .js-product-button-add-to-cart:hover::after { left: 120%; }
}
.product-page-info .js-product-button-add-to-cart:active { transform: translateY(0) scale(0.99); }
.product-page-info .js-product-button-add-to-cart .btn__text,
.product-page-info .js-product-button-add-to-cart .btn__text * { color: var(--rbk-on-accent) !important; }
@media (prefers-reduced-motion: reduce) {
  .product-page-info .js-product-button-add-to-cart::after { display: none; }
}

/* Dynamic checkout (Buy Now) — quiet, ink outline so the red ATC leads */
.product-page-info .dynamic-checkout__button--styled .shopify-payment-button__button--unbranded {
  border-radius: 14px !important;
  height: 56px !important;
  font-family: "Sequel Sans Semi Bold Disp", sans-serif !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: transparent !important;
  color: var(--rbk-ink) !important;
  border: 1.5px solid var(--rbk-line-strong) !important;
  transition: border-color .2s var(--rbk-ease-out), transform .15s var(--rbk-ease-out) !important;
}
.product-page-info .dynamic-checkout__button--styled .shopify-payment-button__button--unbranded:hover {
  border-color: var(--rbk-ink) !important;
}

/* Trust / free-shipping line below the CTA */
.product-page-info .product-page-info__free-shipping,
.product-page-info .free-shipping {
  font-family: "Sequel Sans Medium Disp", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rbk-ink-mute);
}

/* Rotating trust strip: up to 3 lines. Static when 1 line is filled; cross-fades
   between lines when 2+ are filled (JS adds .is-active). Grid-stacked so the
   container auto-sizes to the tallest line and wrapping never overlaps. */
.product-page-info .rk-trust {
  text-align: center;
  margin: 16px auto 4px;
  font-family: "Sequel Sans Medium Disp", sans-serif;
  font-size: 12px;
  letter-spacing: 0.05em;
  line-height: 1.4;
  color: var(--rbk-ink-dim);
}
/* Subtext + trust line were reading invisible / too-dim on dark (ink-mute is ~#5a5a5a,
   and theme rules were overriding them further). Force the more readable secondary-text
   token, scoped under html[data-theme] with !important so it wins on BOTH themes (≈#9a9a9a
   on dark, #54575e on light) instead of a single hardcoded grey that wouldn't flip. */
html[data-theme] .product-page-info .rk-product-micro-subtext,
html[data-theme] .product-page-info .rk-trust,
html[data-theme] .product-page-info .rk-trust .rk-trust__line { color: var(--rbk-ink-dim) !important; }
.product-page-info .rk-trust--rotate { display: grid; overflow: hidden; }
/* Smooth one-direction ticker: the incoming line slides UP from below while the outgoing
   slides UP and out the top — same direction, so they never cross. The old version faded
   the two lines toward each other (out moved down, in moved up), which clashed and read as
   a jarring flicker. JS toggles .is-active and briefly tags the old line .is-leaving
   (product-page-get-buttons.liquid). */
.product-page-info .rk-trust--rotate .rk-trust__line {
  grid-area: 1 / 1 / 2 / 2;     /* stack every line in one cell */
  opacity: 0;
  transform: translateY(115%);
  transition: opacity .6s var(--rbk-ease-out), transform .6s var(--rbk-ease-out);
  will-change: opacity, transform;
}
.product-page-info .rk-trust--rotate .rk-trust__line.is-active { opacity: 1; transform: translateY(0); }
.product-page-info .rk-trust--rotate .rk-trust__line.is-leaving { opacity: 0; transform: translateY(-115%); }
@media (prefers-reduced-motion: reduce) {
  .product-page-info .rk-trust--rotate .rk-trust__line,
  .product-page-info .rk-trust--rotate .rk-trust__line.is-leaving { transition: none; transform: none; }
}

/* ============================ Buy it now (express Razorpay checkout) ============================ */
/* Sits directly beneath the red Add to Bag as the secondary express button. Defaults to an ink
   fill that inverts per theme (near-black in light, off-white in dark); merchant can override
   bg/text, height, radius, leading icon and hover animation from the section settings ("Buy It
   Now Button"). Tokenised throughout, scales on 2K/4K via --rbk-up-real, radius/colors via the
   --rk-bn-* custom props the Liquid writes inline. Matches the ATB radius by default. */
.product-page-info .rk-buy-now {
  position: relative; isolation: isolate; overflow: hidden;   /* clips the shine/fill/idle layers */
  width: 100%;
  /* Height is the merchant's --rk-bn-minh slider (38–84px), scaled on 2K/4K. Vertical padding
     is kept small so the slider — not the padding — drives the real button height; the flex
     centring keeps the label/icon optically centred at any height. */
  min-height: calc(var(--rk-bn-minh, 60px) * var(--rbk-up-real, var(--rbk-up, 1)));
  display: flex; align-items: center; justify-content: center; gap: 0.55em;
  margin-top: calc(10px * var(--rbk-up-real, var(--rbk-up, 1)));
  padding: calc(8px * var(--rbk-up-real, var(--rbk-up, 1))) calc(20px * var(--rbk-up-real, var(--rbk-up, 1)));
  background: var(--rk-bn-bg, var(--rbk-ink));
  color: var(--rk-bn-text, var(--rbk-bg));
  border: 1px solid var(--rk-bn-bg, var(--rbk-ink));
  border-radius: calc(var(--rk-bn-radius, 8px) * var(--rbk-up-real, var(--rbk-up, 1)));
  font-family: "Sequel Sans Bold Disp", system-ui, sans-serif;
  font-size: calc(13px * var(--rbk-up-real, var(--rbk-up, 1)));
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background .25s var(--rbk-ease-out), border-color .25s var(--rbk-ease-out),
              color .25s var(--rbk-ease-out), box-shadow .3s var(--rbk-ease-out),
              transform .14s var(--rbk-ease-out), opacity .2s ease;
}

/* Mobile gets its own corner radius (--rk-bn-radius-m), independent of desktop/tablet.
   Falls back to the desktop radius, then 8px, if the mobile value is ever absent. */
@media (max-width: 767px) {
  .product-page-info .rk-buy-now {
    border-radius: calc(var(--rk-bn-radius-m, var(--rk-bn-radius, 8px)) * var(--rbk-up-real, var(--rbk-up, 1)));
  }
}

/* R11: Buy It Now stays at its 1080p size on EVERY screen. Shella's buy box
   around it (Add to Bag fixed at 56px, the variant pills, the form) does not
   scale on 2K/4K, so the lone scaled button read as comically oversized next
   to its own siblings. Zeroing the scale vars on the button subtree
   neutralises every internal calc (height, padding, font, radius, icon) in
   one declaration — the merchant's px sliders now mean exactly what they say
   at every resolution. */
.product-page-info .rk-buy-now { --rbk-up-real: 1; --rbk-up: 1; }

/* Content sits above the animation layers */
.product-page-info .rk-buy-now__label,
.product-page-info .rk-buy-now__icon,
.product-page-info .rk-buy-now__arrow,
.product-page-info .rk-buy-now__spin { position: relative; z-index: 1; }
.product-page-info .rk-buy-now__icon { display: inline-flex; }
.product-page-info .rk-buy-now__icon svg { width: 1.05em; height: 1.05em; display: block; }

/* Default hover (applies to every style as the base lift of the fill colour) */
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-buy-now:hover {
    background: color-mix(in srgb, var(--rk-bn-bg, var(--rbk-ink)) 86%, var(--rk-bn-text, var(--rbk-bg)));
    border-color: color-mix(in srgb, var(--rk-bn-bg, var(--rbk-ink)) 86%, var(--rk-bn-text, var(--rbk-bg)));
  }
}
.product-page-info .rk-buy-now:active { transform: scale(0.985); }
.product-page-info .rk-buy-now:focus-visible { outline: 2px solid var(--rbk-accent); outline-offset: 2px; }
.product-page-info .rk-buy-now.is-loading { pointer-events: none; opacity: 0.75; }
.product-page-info .rk-buy-now__spin {
  display: none; width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: rk-bn-spin .6s linear infinite;
}
.product-page-info .rk-buy-now.is-loading .rk-buy-now__spin { display: inline-block; }
@keyframes rk-bn-spin { to { transform: rotate(360deg); } }

/* ---- Animation 1: SHINE — a diagonal light streak sweeps across on hover. The sheen is
   mixed from the TEXT colour so it reads on both the dark (light theme) and light (dark theme)
   button faces, never a hardcoded white that would vanish on the off-white dark-mode button. */
.product-page-info .rk-buy-now--anim-shine::before {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: -60%; width: 55%;
  background: linear-gradient(105deg, transparent 0%,
              color-mix(in srgb, var(--rk-bn-text, var(--rbk-bg)) 24%, transparent) 50%, transparent 100%);
  transform: skewX(-14deg); pointer-events: none; opacity: 0;
}
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-buy-now--anim-shine:hover::before {
    opacity: 1; animation: rk-bn-shine .85s var(--rbk-ease-out);
  }
}
@keyframes rk-bn-shine { from { left: -60%; } to { left: 130%; } }

/* ---- Animation 2: FILL — the brand accent wipes in from the left on hover; text flips to the
   on-accent token so it stays legible over red regardless of theme. */
.product-page-info .rk-buy-now--anim-fill::before {
  content: ""; position: absolute; z-index: 0; inset: 0;
  background: var(--rbk-accent);
  transform: translateX(-101%); transition: transform .42s var(--rbk-ease-out);
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-buy-now--anim-fill:hover { color: var(--rbk-on-accent); border-color: var(--rbk-accent); background: var(--rk-bn-bg, var(--rbk-ink)); }
  .product-page-info .rk-buy-now--anim-fill:hover::before { transform: translateX(0); }
}

/* ---- Animation 3: ARROW — label nudges left and an arrow slides in from the right on hover. */
.product-page-info .rk-buy-now--anim-arrow .rk-buy-now__label { transition: transform .3s var(--rbk-ease-out); }
.product-page-info .rk-buy-now--anim-arrow .rk-buy-now__arrow {
  width: 0; overflow: hidden; opacity: 0; transform: translateX(-6px);
  display: inline-flex; align-items: center;
  transition: width .3s var(--rbk-ease-out), opacity .3s var(--rbk-ease-out), transform .3s var(--rbk-ease-out);
}
.product-page-info .rk-buy-now--anim-arrow .rk-buy-now__arrow svg { width: 1.1em; height: 1.1em; display: block; }
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-buy-now--anim-arrow:hover .rk-buy-now__label { transform: translateX(-3px); }
  .product-page-info .rk-buy-now--anim-arrow:hover .rk-buy-now__arrow { width: 1.2em; opacity: 1; transform: translateX(0); }
}

/* ---- Animation 4: LIFT — the button rises with a soft shadow on hover, presses on click. */
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-buy-now--anim-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 calc(10px * var(--rbk-up-real, var(--rbk-up, 1))) calc(26px * var(--rbk-up-real, var(--rbk-up, 1)))
                color-mix(in srgb, var(--rbk-ink) 26%, transparent);
  }
}
.product-page-info .rk-buy-now--anim-lift:active { transform: translateY(0) scale(0.985); }

/* ============================ Idle animations (play with no hover) ============================ */
/* These run continuously and are independent of the hover animation above — a button can have
   both. They use the ::after layer (hover effects use ::before) so the two never collide. The
   transform-based ones (pulse, float) pause on hover so the hover state takes over cleanly.
   All of them are switched off under prefers-reduced-motion. */

/* Idle 1: SHEEN LOOP — a light streak crosses the button on a slow repeat. */
.product-page-info .rk-buy-now--idle-sheen::after {
  content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: -60%; width: 55%;
  background: linear-gradient(105deg, transparent 0%,
              color-mix(in srgb, var(--rk-bn-text, var(--rbk-bg)) 22%, transparent) 50%, transparent 100%);
  transform: skewX(-14deg); pointer-events: none;
  animation: rk-bn-idle-sheen 4.8s var(--rbk-ease-out) infinite;
}
@keyframes rk-bn-idle-sheen { 0% { left: -60%; } 28% { left: 130%; } 100% { left: 130%; } }

/* Idle 2: BREATHING GLOW — a soft accent halo fades in and out. */
.product-page-info .rk-buy-now--idle-glow { animation: rk-bn-idle-glow 2.8s ease-in-out infinite; }
@keyframes rk-bn-idle-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--rbk-accent) 0%, transparent); }
  50%      { box-shadow: 0 0 calc(18px * var(--rbk-up-real, var(--rbk-up, 1))) 0 color-mix(in srgb, var(--rbk-accent) 40%, transparent); }
}

/* Idle 3: PULSE — a gentle scale breath. */
.product-page-info .rk-buy-now--idle-pulse { animation: rk-bn-idle-pulse 2.4s ease-in-out infinite; }
@keyframes rk-bn-idle-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }

/* Idle 4: FLOAT — a small vertical bob. */
.product-page-info .rk-buy-now--idle-float { animation: rk-bn-idle-float 3s ease-in-out infinite; }
@keyframes rk-bn-idle-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Idle 5: GRADIENT SHIFT — a faint diagonal sheen drifts across the face continuously. */
.product-page-info .rk-buy-now--idle-shift::after {
  content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%,
              color-mix(in srgb, var(--rk-bn-text, var(--rbk-bg)) 14%, transparent) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: rk-bn-idle-shift 3.6s linear infinite;
}
@keyframes rk-bn-idle-shift { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Transform-based idles hand over to the hover state */
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-buy-now--idle-pulse:hover,
  .product-page-info .rk-buy-now--idle-float:hover { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
  .product-page-info .rk-buy-now__spin { animation-duration: 1.4s; }
  .product-page-info .rk-buy-now--anim-shine:hover::before { animation: none; opacity: 0; }
  .product-page-info .rk-buy-now--anim-fill::before { transition: none; }
  .product-page-info .rk-buy-now--anim-arrow .rk-buy-now__label,
  .product-page-info .rk-buy-now--anim-arrow .rk-buy-now__arrow { transition: none; }
  .product-page-info .rk-buy-now--anim-lift:hover { transform: none; box-shadow: none; }
  /* Kill every idle animation + its layer */
  .product-page-info .rk-buy-now--idle-glow,
  .product-page-info .rk-buy-now--idle-pulse,
  .product-page-info .rk-buy-now--idle-float { animation: none; }
  .product-page-info .rk-buy-now--idle-sheen::after,
  .product-page-info .rk-buy-now--idle-shift::after { animation: none; display: none; }
}

/* ============================ Tabs / accordion (light-dark) ============================ */
/* The product tabs render with Shella's --theme (text) / --theme2 (surface),
   which are the OLD dark-theme values (#fff text on #2b2b2b). They were never
   remapped, so the accordion stayed a dark card in light mode. Remap them to
   tokens (scoped to the tabs) so the whole accordion adapts, with explicit
   surface/text tokens as a backup. */
.product-page__tabs,
.product-page__tabs .product-tabs {
  --theme: var(--rbk-ink);
  --theme2: var(--rbk-bg-2);
  --product-page-tabs-border-c: var(--rbk-line);
}
.product-page__tabs .product-tabs,
.product-page__tabs .tabs__head,
.product-page__tabs .tabs__body,
.product-page__tabs [data-js-tabs-tab],
.product-page__tabs .tabs__content {
  background-color: var(--rbk-bg-2) !important;
  border-color: var(--rbk-line) !important;
}
.product-page__tabs .tabs__btn,
.product-page__tabs [data-js-tabs-btn-mobile] {
  font-family: "Sequel Sans Semi Bold Disp", sans-serif !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rbk-ink) !important;
}
.product-page__tabs [data-js-tabs-btn-mobile] { border-top-color: var(--rbk-line) !important; }
.product-page__tabs .tabs__content,
.product-page__tabs .tabs__content .rte,
.product-page__tabs .tabs__content p,
.product-page__tabs .tabs__content li,
.product-page__tabs .tabs__content span {
  color: var(--rbk-ink-dim) !important;
  font-family: "Sequel Sans Medium Disp", sans-serif;
  line-height: 1.7;
}
.product-page__tabs .tabs__content strong,
.product-page__tabs .tabs__content b,
.product-page__tabs .tabs__content h1,
.product-page__tabs .tabs__content h2,
.product-page__tabs .tabs__content h3,
.product-page__tabs .tabs__content h4 { color: var(--rbk-ink) !important; }

/* ============================ Reveal motion (Emil) ============================ */
/* Buy box is above the fold, so a one-shot staggered intro on load. Default
   (and reduced-motion) state is fully visible — animation only adds the entrance. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rbk-pdp-in {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to   { opacity: 1; transform: none;             filter: blur(0); }
  }
  .product-page-info .rk-header-row,
  .product-page-info .product-page-info__options,
  .product-page-info .product-page-info__details-buttons,
  .product-page-info .product-page-info__button-add-to-cart,
  .product-page-info .product-page-info__quantity {
    animation: rbk-pdp-in 0.7s var(--rbk-ease-out) both;
  }
  /* Stagger ladder: even ~60ms steps so the cascade feels like one quick sweep, not
     a slow relay. The old 0.02→0.12 jump was a 100ms hole that broke the rhythm
     (Emil: 30–80ms between siblings). Ladder tops out at 0.28s — still snappy. */
  .product-page-info .rk-header-row { animation-delay: 0.04s; }
  .product-page-info .product-page-info__options { animation-delay: 0.10s; }
  .product-page-info .product-page-info__details-buttons { animation-delay: 0.16s; }
  .product-page-info .product-page-info__quantity { animation-delay: 0.22s; }
  .product-page-info .product-page-info__button-add-to-cart { animation-delay: 0.28s; }
}

/* ============================ Mobile ============================ */
@media (max-width: 767px) {
  .product-page-info .rk-product-title { font-size: 28px; line-height: 1.05; }
  .product-page-info .rk-price-wrap .price,
  .product-page-info .rk-price-wrap [data-js-product-price] { font-size: 19px; }
  .product-page-info .product-options__value--text,
  .product-page-info .product-options__value--large-text { height: 46px; min-width: 54px; }
  .product-page-info .rk-trust { font-size: 11px; }
  /* preserved from the old trust snippet: no cart glyph on the mobile CTA */
  .product-page-info__button-add-to-cart .btn__icon { display: none !important; }

  /* Variant pills: legacy mobile CSS forces `justify-content: center` on the
     option section, which centered the pill row and made it look boxed/inset from
     the column edge. Force them flush-LEFT so the first pill lines up with the
     title and price, and kill any residual section side padding. */
  .product-page-info .product-options__section { justify-content: flex-start !important; padding-left: 0 !important; padding-right: 0 !important; }
  /* The first pill in a row should sit at x=0 of the content column (the pills use
     `margin: 0 8px 8px 0`, so left is already 0 — this just guards the wrap class). */
  .product-page-info .product-options--type-page .product-options__section { margin-left: 0 !important; margin-right: 0 !important; }

  /* Header grid: a touch tighter so the stacked title/subtext/price reads as one
     block, and the lore link never crowds the title. */
  .product-page-info .rk-header-row--split { column-gap: 12px; }
  .product-page-info .rk-ga-lore { font-size: 10px; }

  /* Size row: more space between pill and Size Guide, and a clearer gap before the
     variant pills below it. Keep baseline alignment (see the desktop rule). */
  /* Row sizing/one-line behaviour is handled by the cqw base rules (column-scaled), so the
     mobile block only carries the metrics tweaks: tighter row margin and the Size Guide's
     1px-down nudge + tighter tracking for mobile. Font is intentionally NOT re-pinned here. */
  .product-page-info .rk-size-row { gap: 6px 10px; align-items: baseline; margin-bottom: 20px; }
  .product-page-info .rk-size-row .rk-size-guide-btn,
  .product-page-info .rk-size-guide-btn { letter-spacing: 0.06em; top: -1px; }

  /* TRUE full-bleed ATC — math-robust, no guessed padding.
     The earlier `left:50% + translateX(-50%)` overshot because `left:50%` resolves
     against the padded ANCESTOR, not the viewport, so it pushed the button half
     off-screen. This uses the classic full-bleed identity instead:
        width: 100vw;  margin-inline: calc(50% - 50vw);
     `50%` is half the container's CONTENT width; `50vw` is half the viewport. On
     mobile the info column is `col-12` (full width), so its content is horizontally
     centered in the viewport — which makes that margin resolve to exactly the
     negative offset needed to land the left edge at x=0, regardless of how many
     padding layers (info 15px + column gutter) sit in between. Self-correcting. */
  .product-page-info .product-page-info__button-add-to-cart {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    box-sizing: border-box;
  }
  .product-page-info .product-page-info__button-add-to-cart .btn,
  .product-page-info .js-product-button-add-to-cart {
    border-radius: 0 !important;
    width: 100% !important;
    height: 60px !important;
    letter-spacing: 0.16em;
  }
  /* The sheen sweep is a desktop hover affordance; no hover on touch, so hide it. */
  .product-page-info .js-product-button-add-to-cart::after { display: none; }
}

/* ============================================================================
   DESKTOP BREATHING ROOM (Evemen restraint)
   ----------------------------------------------------------------------------
   On desktop the buy box now uses smaller type; pair that with MORE vertical air
   between blocks so it reads calm and premium rather than loud-and-cramped. Mobile
   keeps its own tighter rhythm (it has less width to spend).
   ============================================================================ */
@media (min-width: 768px) {
  .product-page-info .rk-header-row { margin-bottom: 30px; }
  /* A clear gap between the price line and the size selector. */
  .product-page-info .product-page-info__options { margin-bottom: 30px; margin-top: 4px; }
  /* Air above the ATC so the button doesn't crowd the size pills. */
  .product-page-info .product-page-info__button-add-to-cart { margin-top: 6px; }
  /* Title → subtext → price already hug via grid; give the price a touch more lead. */
  .product-page-info .rk-header-row--split .rk-price-wrap { margin-top: 14px !important; }
  /* Subtext quieter + a hair more space under it. */
  .product-page-info .rk-product-micro-subtext { font-size: 12px !important; }
}

/* ============================================================================
   LAYOUT 2 — Evemen-style sticky gallery (DESKTOP ONLY)
   ----------------------------------------------------------------------------
   Structure (from product-page-get-main.liquid, rbk_pdp_layout == '2'):
     .product-page-main--l2
       .rbk-l2-mobile-gallery (d-md-none)  ← the locked-in swipe gallery, mobile only
       .row.rbk-l2-row
         .rbk-l2-gallery (col-md-8, d-none d-md-block)
           .rbk-l2-grid
             .rbk-l2-fixed   ← sticky single image (the LAST media)
             .rbk-l2-scroll  ← stacked column of the other images (featured first)
         .rbk-l2-info (col-md-4)
           .rbk-l2-info-sticky

   Mobile is UNTOUCHED: the desktop zones are d-none on mobile, and .rbk-l2-mobile-
   gallery renders the existing gallery (its own CSS owns the swipe experience).
   No JS — pure position:sticky (verified: no overflow on PDP ancestors).
   ============================================================================ */
@media (min-width: 768px) {
  /* Gallery zone = two columns: a sticky fixed image + a scrolling image column.
     The fixed column pins via position:sticky; the scroll column is taller (it
     stacks the remaining images) so it scrolls past while the fixed image holds. */
  .product-page-main--l2 .rbk-l2-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
  }
  .product-page-main--l2 .rbk-l2-fixed {
    position: sticky;
    top: var(--rbk-header-h, 110px);
    /* Fill the FULL available viewport height — flush from the header bottom to the
       viewport bottom, no top/bottom gap. cover crops the sides as the column narrows
       (intentional on narrow screens). */
    height: calc(100vh - var(--rbk-header-h, 110px));
    align-self: start;
  }
  .product-page-main--l2 .rbk-l2-fixed .rbk-l2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* fill the pinned viewport, crop sides as the screen narrows */
    object-position: center;
    display: block;
    border-radius: 2px;
  }
  .product-page-main--l2 .rbk-l2-scroll {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
  }
  .product-page-main--l2 .rbk-l2-scroll .rbk-l2-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
  }

  /* Info column: sticky so it stays in view while the scroll column moves; when the
     gallery bottom is reached the row ends and the page scrolls on normally. The
     sticky child is what pins (the col itself is the scroll context). */
  .product-page-main--l2 .rbk-l2-info-sticky {
    position: sticky;
    top: calc(var(--rbk-header-h, 110px) + 8px);
  }
  /* Layout 2 info sits in a narrower 4/12 column, so it needs much tighter gutters
     than Layout 1's 80px — 30px each side. */
  .product-page-main--l2 .rbk-l2-info .product-page-info {
    padding-left: 30px !important;
    padding-right: 30px !important;
  }

}

/* Belt-and-braces: never show the desktop L2 GALLERY on mobile, never show the L2
   mobile gallery on desktop (Bootstrap's d-* utilities already do this, but assert
   it so a utility-class regression can't break the mobile experience).
   FIX: hide only the desktop GALLERY zone on mobile — NOT the whole `.rbk-l2-row`.
   The row also holds `.rbk-l2-info` (the buy box); hiding the row hid the add-to-cart
   on mobile entirely (and broke the footbar reveal, which measures the buy box). The
   row now stays, the desktop gallery col is hidden, and the info col (col-12) stacks
   below the mobile gallery — identical to Layout 1's mobile. */
@media (max-width: 767px) {
  .product-page-main--l2 .rbk-l2-gallery { display: none !important; }
  .product-page-main--l2 .rbk-l2-mobile-gallery { display: block !important; }
}
@media (min-width: 768px) {
  .product-page-main--l2 .rbk-l2-mobile-gallery { display: none !important; }
}

/* ============================================================================
   LAYOUT 3 — horizontal-pan gallery (DESKTOP ONLY)
   ----------------------------------------------------------------------------
   Structure (product-page-get-main.liquid, rbk_pdp_layout 3 / 3b):
     .product-page-main--l3  (TALL block; JS sets height = 100vh + panDistance)
       .rbk-l3-stage  (sticky, top:0, 100vh, FLEX ROW — holds while track pans)
         .rbk-l3-gallery (flex:1)  → .rbk-l3-viewport → .rbk-l3-track → slides + controls
         .rbk-l3-mobile-gallery (d-md-none)   ← swipe gallery, mobile only
         .rbk-l3-info (fixed 520px)           ← buy box, rendered ONCE
           .rbk-l3-info-scroll                ← scrolls natively (data-lenis-prevent)

   STICKY (not GSAP pin): the tall block scrolls, the stage sticks at top for its
   100vh, and rbk-l3.js scrubs the track's translateX against scroll progress. This
   avoids the position:fixed/flex-collapse that GSAP pin caused (info fell below the
   gallery). Buy box rendered ONCE → no duplicate accordions. Mobile untouched.
   ============================================================================ */
@media (min-width: 768px) {
  .product-page-main--l3 {
    display: block;
    /* Info column width: 570px is the base where SIZE / WAIST / LENGTH + SIZE CHART
       fit on ONE line at 1080p. It now SCALES with --rbk-up so on 2K/4K the info
       column grows in step with the images (fixing the squeeze where only the gallery
       was scaling). The 44vw cap stops it over-widening — and crushing the image — on
       narrow screens (tablets), where it shrinks proportionally instead. */
    --rbk-l3-info-w: min(calc(570px * var(--rbk-up, 1)), 44vw);
  }
  /* The sticky stage: holds the gallery+info row pinned BELOW the fixed header for the
     full height of the tall region while the track pans. Height is viewport MINUS the
     header (it sits at top:header-h), so its bottom lands exactly at the fold — that's
     what makes the pinned ADD TO BAG visible without scrolling. --rbk-l3-vh is that
     usable height; everything inside (gallery, images, panel) uses it. */
  .product-page-main--l3 {
    --rbk-l3-vh: calc(100vh - var(--rbk-header-h, 74px));
  }
  .product-page-main--l3 .rbk-l3-stage {
    position: sticky;
    top: var(--rbk-header-h, 74px);
    height: var(--rbk-l3-vh);
    display: flex;
    align-items: flex-start;
    overflow: hidden;
  }
  .product-page-main--l3 .rbk-l3-gallery {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--rbk-l3-vh);
    background: var(--rbk-bg);
  }
  .product-page-main--l3 .rbk-l3-viewport {
    position: relative;
    width: 100%;
    height: var(--rbk-l3-vh);
    overflow: hidden;
  }
  .product-page-main--l3 .rbk-l3-track {
    display: flex;
    height: var(--rbk-l3-vh);
    will-change: transform;           /* JS animates translateX */
  }
  .product-page-main--l3 .rbk-l3-slide {
    height: var(--rbk-l3-vh);
    flex: 0 0 auto;
  }
  .product-page-main--l3 .rbk-l3-img {
    height: var(--rbk-l3-vh);
    width: auto;                      /* natural width — images sit edge to edge */
    display: block;
    object-fit: cover;
  }

  /* INFO panel — fixed width on the right, full height. The buy box scrolls inside
     natively (data-lenis-prevent in markup stops Lenis hijacking wheel here); the
     ATC bar pins to the panel bottom. */
  .product-page-main--l3 .rbk-l3-info {
    flex: 0 0 var(--rbk-l3-info-w, 520px);
    width: var(--rbk-l3-info-w, 520px);
    height: var(--rbk-l3-vh);        /* match the stage — fits below the header so the
                                        pinned ADD TO BAG lands on the fold, visible */
    border-left: 1px solid var(--rbk-line);
    background: var(--rbk-bg);
    display: flex;
    flex-direction: column;
  }
  .product-page-main--l3 .rbk-l3-info-scroll {
    flex: 1 1 auto;
    min-height: 0;          /* flex child must cap at the panel height (not grow to fit) */
    /* overflow HIDDEN, not auto: the UNIFIED scroll drives this panel's scrollTop via
       JS in lockstep with the image pan. The user doesn't scroll it directly (that would
       fight the page scroll); JS owns scrollTop. */
    overflow: hidden;
    padding-top: 28px;     /* panel already sits below the header; just breathing room */
  }
  .product-page-main--l3 .rbk-l3-info .product-page-info {
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  /* ===== LAYOUT 3b deltas =====
     b = (1) green In-Stock badge above the title, (2) ADD TO BAG pinned full-bleed at
     the panel bottom with content scrolling up behind it. rbk-l3.js builds a flex
     column INSIDE the form (.rbk-l3b-content scrolls, the ATC bar is a fixed bottom
     row) so cart wiring survives. Verified live: sticky-on-last-child cannot pin. */
  .product-page-main--l3-b .rbk-l3-info-scroll {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .product-page-main--l3-b .rbk-l3-info-scroll .product-page-info {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  .product-page-main--l3-b .rbk-l3b-form {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  }
  .product-page-main--l3-b .rbk-l3b-content {
    /* overflow HIDDEN (not auto): like 3a, the UNIFIED sequential scroll drives this
       content's scrollTop via JS. Page scroll first reveals all of this (phase 1),
       THEN pans the images (phase 2). The ATC bar below stays pinned the whole time. */
    flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 24px;
  }
  /* ATC bar = the JS-tagged holder (.rbk-l3b-atcbar, the data-js-footbar-product-limit
     wrapper). Full-bleed: negative margins cancel the panel's 36px gutter so it spans
     the FULL panel width; padding re-insets the button. Non-scrolling bottom flex row. */
  .product-page-main--l3-b .rbk-l3b-atcbar {
    flex: 0 0 auto;
    margin: 0 -36px !important;
    padding: 14px 22px 16px !important;
    background: var(--rbk-bg);
    border-top: 1px solid var(--rbk-line);
  }
  /* The inner ATC block + its button fill the bar width edge to edge. */
  .product-page-main--l3-b .rbk-l3b-atcbar .product-page-info__button-add-to-cart {
    margin: 0 !important;
  }
  .product-page-main--l3-b .rbk-l3b-atcbar .btn,
  .product-page-main--l3-b .rbk-l3b-atcbar .js-product-button-add-to-cart {
    width: 100% !important;
  }
  .product-page-main--l3-b .rbk-l3b-atcbar .rk-trust { display: none; }
  /* The free-shipping/exchange line under the button also hidden in the pinned bar. */
  .product-page-main--l3-b .rbk-l3b-atcbar .product-page-info__free-shipping { display: none; }
  /* Size row in the 570px panel: keep SIZE / WAIST / LENGTH + SIZE CHART on ONE line
     (both variants — the wider panel gives room; nowrap stops SIZE CHART dropping). */
  .product-page-main--l3 .rk-size-row { flex-wrap: wrap; gap: 8px 12px; }
  .product-page-main--l3 .rk-size-row .rk-size-guide-btn { margin-left: auto; white-space: nowrap; }
  .product-page-main--l3 .rk-size-label-wrapper,
  .product-page-main--l3 .rk-size-label-wrapper span { white-space: nowrap; }
  /* The tighter 11px label is 3b ONLY: 3b's form has NO zoom, so it needs the real
     reduction to fit. 3a keeps 12px (its form is zoom:0.9, which already shrinks it —
     11px there would render ~9.9px, too small). */
  .product-page-main--l3-b .rk-size-label-wrapper,
  .product-page-main--l3-b .rk-size-label-wrapper span {
    font-size: 11px !important;
    letter-spacing: 0.1em;
  }
  .product-page-main--l3-b .rk-size-row .rk-size-guide-btn { font-size: 11px !important; }

  /* CONTROLS — arrows + progress bar, overlaid bottom-left of the viewport. */
  .product-page-main--l3 .rbk-l3-controls {
    position: absolute;
    left: calc(24px * var(--rbk-up, 1));
    bottom: calc(24px * var(--rbk-up, 1));
    display: flex;
    align-items: center;
    gap: calc(14px * var(--rbk-up, 1));
    z-index: 4;
  }
  .product-page-main--l3 .rbk-l3-arrow {
    width: calc(40px * var(--rbk-up, 1));
    height: calc(40px * var(--rbk-up, 1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    cursor: pointer;
    background: rgba(20, 20, 20, 0.4);
    color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transition: background-color 0.2s var(--rbk-ease-out), transform 0.15s var(--rbk-ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .product-page-main--l3 .rbk-l3-arrow:hover { background: rgba(20, 20, 20, 0.62); }
  }
  .product-page-main--l3 .rbk-l3-arrow:active { transform: scale(0.92); }
  .product-page-main--l3 .rbk-l3-arrow[disabled] { opacity: 0.35; pointer-events: none; }
  /* SVG carries inline 9x16 attrs; scale it with the button on large displays. */
  .product-page-main--l3 .rbk-l3-arrow svg { width: calc(9px * var(--rbk-up, 1)); height: calc(16px * var(--rbk-up, 1)); }
  .product-page-main--l3 .rbk-l3-progress {
    width: calc(180px * var(--rbk-up, 1));
    height: calc(2px * var(--rbk-up, 1));
    border-radius: 10px;
    background: rgba(180, 180, 180, 0.35);
    overflow: hidden;
  }
  .product-page-main--l3 .rbk-l3-progress-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: rgba(230, 230, 230, 0.95);
    border-radius: 10px;
    transition: width 0.1s linear;
  }

  /* ---- Hold-&-drag affordance: custom "swipe" cursor over the gallery ----
     Outer node carries the position (JS sets transform to the pointer); the inner dot
     carries the scale/opacity so the two transforms never fight. */
  .product-page-main--l3 .rbk-l3-cursor {
    position: fixed;
    top: 0; left: 0;
    z-index: 60;
    pointer-events: none;          /* purely visual — never intercepts */
    will-change: transform;
  }
  .product-page-main--l3 .rbk-l3-cursor-dot {
    position: absolute;
    transform: translate(-50%, -50%) scale(0.4);
    width: calc(88px * var(--rbk-up, 1)); height: calc(88px * var(--rbk-up, 1));
    border-radius: 50%;
    background: var(--rbk-ink);
    color: var(--rbk-bg);
    display: flex; align-items: center; justify-content: center;
    font-family: "Sequel Sans Semi Bold Disp", sans-serif;
    font-size: calc(12px * var(--rbk-up, 1));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.28s var(--rbk-ease-out), transform 0.4s var(--rbk-ease-out);
  }
  .product-page-main--l3 .rbk-l3-cursor.is-visible .rbk-l3-cursor-dot {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  /* Press feedback: the dot dips while dragging (Emil — interactive things respond). */
  body.rbk-l3-dragging .product-page-main--l3 .rbk-l3-cursor-dot {
    transform: translate(-50%, -50%) scale(0.86);
  }
  /* Mouse devices only: hide the native cursor over the gallery so just the swipe label
     shows, and stop images ghost-dragging / selecting while you swipe. */
  @media (hover: hover) and (pointer: fine) {
    .product-page-main--l3 .rbk-l3-viewport,
    .product-page-main--l3 .rbk-l3-viewport * { cursor: none; }
  }
  .product-page-main--l3 .rbk-l3-img { -webkit-user-drag: none; user-select: none; }
  body.rbk-l3-dragging { user-select: none; }
}

/* In-Stock badge base styling — outside the desktop media query so it's styled on the
   mobile stacked b view too (the desktop rule above only adds nothing extra). */
.product-page-main--l3-b .rk-l3b-badge {
  display: inline-block;
  font-family: "Sequel Sans Semi Bold Disp", sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 12px;
}
.product-page-main--l3-b .rk-l3b-badge--in { color: #18a558; background: color-mix(in srgb, #18a558 16%, transparent); }
.product-page-main--l3-b .rk-l3b-badge--out { color: var(--rbk-ink-mute); background: color-mix(in srgb, var(--rbk-ink-mute) 16%, transparent); }

/* Mobile: no sticky/flex stage; the stage stacks (swipe gallery, then info). The
   desktop pan gallery is hidden; the tall-region height JS may set is overridden. */
@media (max-width: 767px) {
  .product-page-main--l3 { height: auto !important; }
  .product-page-main--l3 .rbk-l3-stage {
    position: static !important;
    height: auto !important;
    display: block !important;
    overflow: visible !important;
  }
  .product-page-main--l3 .rbk-l3-gallery { display: none !important; }
  .product-page-main--l3 .rbk-l3-mobile-gallery { display: block !important; }
  /* Info panel = normal stacked block on mobile (no fixed width / 100vh / border). */
  .product-page-main--l3 .rbk-l3-info {
    width: auto !important;
    height: auto !important;
    border-left: 0 !important;
    display: block !important;
  }
  .product-page-main--l3 .rbk-l3-info-scroll {
    overflow: visible !important;
    padding-top: 0 !important;
  }
  /* On mobile the ATC is NOT a pinned bottom bar — it flows inline like layouts 1/2. */
  .product-page-main--l3 .rbk-l3-info .product-page-info__button-add-to-cart {
    position: static !important;
  }
}

/* ============================================================================
   PLAN B — TABLET PDP (768–1280px): Layouts 2 & 3 behave like MOBILE — the buy box
   stacks UNDER a COMPACT single-image SWIPE. WIDTH-based (not pointer:coarse, which
   doesn't fire reliably in the theme-editor preview iframe), so it triggers the same
   in DevTools, the Shopify preview, and on real tablets. Phones (<768) keep their own
   mobile layout; desktops (>1280) keep the split/pan. The gallery rules are scoped to
   the PDP mobile wrappers, so L1 / quick-view / desktop are untouched.
   NOTE on the gallery: Shella's visible tablet gallery is `.product-gallery__sheet`
   (a 2-col grid); the swipe lives in `.product-gallery__main` (which is d-md-none).
   So we HIDE the sheet, SHOW main, then force the one-image swipe inside it.
   (Raise the 1280px cap if you run a larger tablet.)
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1280px) {
  /* ---- L2 → stacked ---- */
  .product-page-main--l2 .rbk-l2-gallery { display: none !important; }
  .product-page-main--l2 .rbk-l2-mobile-gallery { display: block !important; }
  .product-page-main--l2 .rbk-l2-info-sticky { position: static !important; top: auto !important; }
  /* ---- L3 → stacked ---- */
  .product-page-main--l3 { height: auto !important; }
  .product-page-main--l3 .rbk-l3-stage { position: static !important; height: auto !important; display: block !important; overflow: visible !important; }
  .product-page-main--l3 .rbk-l3-gallery { display: none !important; }
  .product-page-main--l3 .rbk-l3-mobile-gallery { display: block !important; }
  .product-page-main--l3 .rbk-l3-info { width: auto !important; height: auto !important; border-left: 0 !important; display: block !important; }
  .product-page-main--l3 .rbk-l3-info-scroll { overflow: visible !important; padding-top: 0 !important; }
  .product-page-main--l3 .rbk-l3-info .product-page-info__button-add-to-cart { position: static !important; }

  /* ---- Gallery → single-image swipe ---- */
  /* Hide the 2-col grid SHEET; reveal the mobile 'main' area that holds the swipe. */
  .rbk-l2-mobile-gallery .product-gallery__sheet,
  .rbk-l3-mobile-gallery .product-gallery__sheet { display: none !important; }
  .rbk-l2-mobile-gallery .product-gallery__main,
  .rbk-l3-mobile-gallery .product-gallery__main { display: block !important; }
  /* Inside 'main': hide the slick slider, show the swipe wrapper. */
  .rbk-l2-mobile-gallery .product-gallery__main_slider,
  .rbk-l3-mobile-gallery .product-gallery__main_slider { display: none !important; }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-wrapper,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-wrapper {
    display: block !important; position: relative !important;   /* anchor for the absolute pill/arrows */
    width: 100%; margin: 0; background: var(--rbk-bg); overflow: hidden; touch-action: pan-y;
  }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-track,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-track {
    display: flex !important; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; width: 100%;
  }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-track::-webkit-scrollbar,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-track::-webkit-scrollbar { display: none; }
  /* One image per swipe, capped at 62vh so the ATC is a short scroll away. */
  .rbk-l2-mobile-gallery .rk-mobile-gallery-item,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-item {
    flex: 0 0 100% !important; width: 100% !important; height: 62vh; scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center; background: transparent;
  }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-item img,
  .rbk-l2-mobile-gallery .rk-mobile-gallery-item video,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-item img,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-item video {
    width: auto !important; height: 100% !important; max-width: 100%; object-fit: contain; display: block;
  }

  /* ---- Borrow the mobile swipe chrome: bottom SCRUB PILL + OVERLAY ARROWS ----
     The JS that drives these is NOT width-gated (it runs on any screen), so the
     pill scrub / arrow steps already work on tablets; only the phone-scoped CSS was
     missing, which left the arrows as ugly default buttons under the image. These
     re-declare the overlays (scoped to the PDP mobile wrappers, over the 62vh image). */
  /* Explicit width + forced centering so a stray width:100% (or the absolute box
     anchoring to the wrong ancestor) can't push the pill off to one side. */
  .rbk-l2-mobile-gallery .rk-gallery-scroll-container,
  .rbk-l3-mobile-gallery .rk-gallery-scroll-container {
    position: absolute !important; bottom: 18px; left: 50% !important; right: auto !important;
    transform: translateX(-50%) !important; width: 150px !important; z-index: 50;
  }
  .rbk-l2-mobile-gallery .rk-gallery-scroll-track,
  .rbk-l3-mobile-gallery .rk-gallery-scroll-track {
    width: 100% !important; height: 3px; background: rgba(140, 140, 140, 0.35); position: relative; border-radius: 10px; margin: 0 auto;
  }
  .rbk-l2-mobile-gallery .rk-gallery-scroll-pill,
  .rbk-l3-mobile-gallery .rk-gallery-scroll-pill {
    position: absolute; left: 0; top: -15px; height: 32px; width: 45px; background: transparent;
    display: flex; align-items: center; justify-content: center; touch-action: none; cursor: pointer;
  }
  .rbk-l2-mobile-gallery .rk-gallery-scroll-pill::after,
  .rbk-l3-mobile-gallery .rk-gallery-scroll-pill::after {
    content: ''; width: 100%; height: 3px; background: rgba(180, 180, 180, 0.95); border-radius: 10px;
    transition: height 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .rbk-l2-mobile-gallery .rk-gallery-scroll-pill.is-dragging::after,
  .rbk-l3-mobile-gallery .rk-gallery-scroll-pill.is-dragging::after { height: 8px; }

  .rbk-l2-mobile-gallery .rk-mobile-gallery-arrow,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 40;
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    padding: 0; border: 0; border-radius: 50%; background: rgba(20, 20, 20, 0.34);
    color: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s cubic-bezier(0.16,1,0.3,1), transform 0.15s cubic-bezier(0.16,1,0.3,1);
  }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-arrow--prev,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-arrow--prev { left: 14px; right: auto; }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-arrow--next,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-arrow--next { right: 14px; left: auto; }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-arrow:active,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-arrow:active { transform: translateY(-50%) scale(0.92); }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-arrow svg,
  .rbk-l3-mobile-gallery .rk-mobile-gallery-arrow svg { display: block; }
  .rbk-l2-mobile-gallery .rk-mobile-gallery-arrow[hidden],
  .rbk-l3-mobile-gallery .rk-mobile-gallery-arrow[hidden] { display: none !important; }
}

/* Reduced motion: no scroll-hijack. JS bails (see rbk-l3.js); CSS safety net — let
   the stage be static and the track a normal horizontal-scroll strip. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .product-page-main--l3 .rbk-l3-stage { position: static; height: auto; }
  .product-page-main--l3 .rbk-l3-viewport { overflow-x: auto; }
}

/* ============================================================================
   R15 — PDP LAYOUT VARIANTS
   Desktop 4-8 = CSS arrangements of the LAYOUT-1 markup (.rbk-l1v--N on the
   single-product wrapper). They only touch the two outer columns of the row,
   never the gallery internals or the buy box, so every wired behaviour
   (variant pills, ATC, Buy It Now, Razorpay, Pixel) is untouched.
   Mobile m2-m6 (.rbk-mv--*) restyle the shared mobile swipe gallery and apply
   on every desktop layout.
   ============================================================================ */
@media (min-width: 768px) {
  /* 4 - mirror: info left, gallery right */
  .rbk-l1v--4 > .row { flex-direction: row-reverse; }

  /* 5 - wide stage: gallery takes 2/3 */
  .rbk-l1v--5 > .row > .sticky-sidebar:first-child { flex: 0 0 66.666%; max-width: 66.666%; }
  .rbk-l1v--5 > .row > .sticky-sidebar:last-child { flex: 0 0 33.333%; max-width: 33.333%; }

  /* 6 - editorial center: gallery full width, info centered below; the sticky
     engine is neutralised so the page reads as one editorial column */
  .rbk-l1v--6 > .row { display: block; }
  .rbk-l1v--6 > .row > .sticky-sidebar { width: 100%; max-width: 100%; flex: none; }
  .rbk-l1v--6 > .row > .sticky-sidebar:last-child { max-width: 760px; margin: 34px auto 0; float: none; }
  .rbk-l1v--6 [data-js-sticky-sidebar-body] { transform: none !important; position: static !important; width: auto !important; }

  /* 7 - boutique: both columns narrowed and centered, heavy side whitespace */
  .rbk-l1v--7 > .row { justify-content: center; }
  .rbk-l1v--7 > .row > .sticky-sidebar:first-child { flex: 0 0 44%; max-width: 44%; }
  .rbk-l1v--7 > .row > .sticky-sidebar:last-child { flex: 0 0 34%; max-width: 34%; }

  /* 8 - minimal split: clean 50/50 with a wide gutter and a dropped info seat */
  .rbk-l1v--8 > .row > .sticky-sidebar { flex: 0 0 50%; max-width: 50%; }
  .rbk-l1v--8 > .row > .sticky-sidebar:last-child { padding-left: clamp(28px, 4vw, 84px); }
  .rbk-l1v--8 > .row > .sticky-sidebar:last-child [data-js-sticky-sidebar-body] { padding-top: clamp(16px, 4vh, 64px); }
}

@media (max-width: 767px) {
  /* m2 - inset card: gallery un-bleeds into a bordered, rounded surface */
  .rbk-mv--m2 .rk-mobile-gallery-wrapper {
    width: 100%; margin-left: 0; margin-right: 0;
    border: 1px solid var(--rbk-line); border-radius: 14px; background: var(--rbk-bg-2);
  }
  .rbk-mv--m2 .rk-mobile-gallery-item { flex: 0 0 100%; width: 100%; }

  /* m3 - peek: slides at 86vw so the next image shows; signals swipeability */
  .rbk-mv--m3 .rk-mobile-gallery-track { scroll-padding-left: 7vw; }
  .rbk-mv--m3 .rk-mobile-gallery-item { flex: 0 0 86vw; width: 86vw; margin-right: 8px; }
  .rbk-mv--m3 .rk-mobile-gallery-item:first-child { margin-left: 7vw; }

  /* m4 - compact: shorter gallery, content sooner */
  .rbk-mv--m4 .rk-mobile-gallery-item img { height: 52svh !important; object-fit: cover; }

  /* m5 - contact sheet: two-up editorial preview, still swipes */
  .rbk-mv--m5 .rk-mobile-gallery-item { flex: 0 0 58vw; width: 58vw; margin-right: 6px; }
  .rbk-mv--m5 .rk-mobile-gallery-item img { height: 74vw !important; object-fit: cover; }

  /* m6 - buy box first (LAYOUT 1 ONLY): the info column rises above the gallery */
  .rbk-l1v.rbk-mv--m6 > .row { display: flex; flex-direction: column-reverse; }
}

/* ============================================================================
   LAYOUT F — FABRIC (editorial minimal)
   Same CSS-variant approach as 4-8: only the two outer columns, the info-column
   type rhythm, and the accordion skin are touched. Gallery internals and the
   buy box (variant pills / ATC / Buy It Now / Razorpay / Pixel) are NEVER
   altered. Photography-forward editorial split + a quieter, more minimal info.
   ============================================================================ */
@media (min-width: 768px) {
  /* gallery ~57%, info ~43% with a dropped editorial seat */
  .rbk-l1v--fabric > .row > .sticky-sidebar:first-child { flex: 0 0 57%; max-width: 57%; }
  .rbk-l1v--fabric > .row > .sticky-sidebar:last-child { flex: 0 0 43%; max-width: 43%; }
  .rbk-l1v--fabric > .row > .sticky-sidebar:last-child [data-js-sticky-sidebar-body] { padding-top: clamp(18px, 4.5vh, 72px); }
}

/* info column: calmer rhythm, tighter display tracking (visual only) */
.rbk-fabric-info .rk-product-title { letter-spacing: -0.018em; }
.rbk-fabric-info .product-page-info__options { margin-top: clamp(16px, 2.6vh, 26px) !important; }

/* Fabric Layout 1 (.rbk-l1v--fabric) — airier editorial rhythm, more negative space.
   Gaps measured live (old 13/27/14/39 → 19/40/23/56). Scoped to F1 so F2/F3 keep the
   tighter shared rhythm. The button margin-top must exceed the size block's 15px
   bottom margin or margin-collapse eats it. */
.rbk-l1v--fabric .rk-header-row--split .rk-price-wrap { margin-top: clamp(18px, 2.4vh, 26px) !important; }
.rbk-l1v--fabric .product-page-info__options { margin-top: clamp(30px, 5vh, 50px) !important; }
.rbk-l1v--fabric .product-page-info__button-add-to-cart { margin-top: clamp(18px, 2.8vh, 30px) !important; }
.rbk-l1v--fabric .rk-guarantee-wrapper { margin-top: clamp(28px, 4.2vh, 50px) !important; }

/* Mobile (Fabric): with NO Dive Into Lore button, put title + price on one line
   (title left, price right). `flex: 1 0 auto` on the title means when the title is
   long enough that the two don't fit, the price drops to its own line, left-aligned
   (max-width:100% keeps a very long title from overflowing). Subtext sits below.
   row-gap was 4px — when the price wrapped it sat almost on top of the title (the
   "cramped / stuck together" report). Now 14px so the wrapped price has the same
   gap as the stacked (with-lore) header, and the subtext relies on the same row-gap
   (its own margin-top dropped to 0) so the whole stack reads on one uniform rhythm. */
@media (max-width: 767px) {
  .rbk-fabric-info .rk-header-row--split:not(:has(.rk-lore-link)) {
    display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 14px;
  }
  .rbk-fabric-info .rk-header-row--split:not(:has(.rk-lore-link)) .rk-product-title {
    order: 1; flex: 1 0 auto; min-width: 0; max-width: 100%; margin: 0;
  }
  .rbk-fabric-info .rk-header-row--split:not(:has(.rk-lore-link)) .rk-price-wrap {
    order: 2; flex: 0 0 auto; margin: 0 !important;
  }
  .rbk-fabric-info .rk-header-row--split:not(:has(.rk-lore-link)) .rk-product-micro-subtext {
    order: 3; flex: 1 1 100%; margin-top: 0 !important;
  }
}
/* price stays standard ink (black on light, white on dark) — even on sale, no red */
.rbk-fabric-info .rk-price-wrap .price-now,
.rbk-fabric-info .rk-price-wrap .price-now .rbk-price,
.rbk-fabric-info .price--sale .price-now { color: var(--rbk-ink) !important; }

/* minimal accordion skin: a thinner + that opens to a calm minus.
   Row padding + heading letter-spacing are now the global "PDP accordion"
   settings (not hardcoded here), so the merchant controls them. */
.rbk-fabric-info .rk-toggle-icon { width: 11px; height: 11px; }
.rbk-fabric-info .rk-toggle-icon::before { height: 1px; }
.rbk-fabric-info .rk-toggle-icon::after { width: 1px; }

/* Fabric lore override REMOVED — it made the lore button title-case / tighter /
   ink-dim ONLY on the Fabric (F1/F2/F3) layouts, so the same "Dive Into Lore"
   button rendered two different ways across products. The unified lore style
   system (rk-lore--sd-*/sm-* in this file + the global/local cascade) now governs
   the button identically on every layout, so this layout-specific skin is gone.
   (It was also the later-in-file rule that forced the lore text to --rbk-ink-dim,
   which the pill-solid ID-scoped fix in product-page-get-info.liquid was guarding
   against; that guard stays as harmless insurance.) */

/* Buy buttons (ALL PDP layouts): BUY IT NOW is the red primary (fashion = impulse,
   express straight to Magic Checkout); Add to Cart is the quiet ink outline.
   Heights ride the 0.9 desktop form zoom. */

/* PRIMARY — Buy It Now (red filled) */
.product-page-info .rk-buy-now {
  height: calc(56px / 0.9) !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  background: var(--rbk-accent) !important;
  color: var(--rbk-on-accent, #fff) !important;
  border: 1px solid var(--rbk-accent) !important;
  animation: none !important;          /* a steady CTA, no idle glow/pulse */
}
.product-page-info .rk-buy-now::before,
.product-page-info .rk-buy-now::after { display: none !important; }   /* drop anim fills / sheens */
/* RBK FIX (dark-theme legibility): the Buy It Now fill resolves to var(--rbk-ink),
   which inverts per theme (dark fill on light theme, cream fill on dark theme). The
   label/icon were pinned to --rbk-on-accent (#fff), so on dark theme it rendered
   white-on-cream = invisible. Inherit the button's own (correctly inverting) text
   colour so the label/icon flip with the fill on both themes and on hover. */
.product-page-info .rk-buy-now__label,
.product-page-info .rk-buy-now__icon,
.product-page-info .rk-buy-now__arrow,
.product-page-info .rk-buy-now__icon svg { color: inherit !important; }
@media (hover: hover) and (pointer: fine) {
  .product-page-info .rk-buy-now:hover {
    background: var(--rbk-accent-bright, var(--rbk-accent)) !important;
    border-color: var(--rbk-accent-bright, var(--rbk-accent)) !important;
    color: var(--rbk-on-accent, #fff) !important;
  }
}

/* SECONDARY — Add to cart (ink outline) */
.product-page-info .product-page-info__button-add-to-cart .btn,
.product-page-info .js-product-button-add-to-cart {
  height: calc(56px / 0.9) !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--rbk-ink) !important;
  border: 1px solid var(--rbk-line-strong) !important;
}
.product-page-info .js-product-button-add-to-cart::after { display: none !important; }  /* no hover sweep */
.product-page-info .js-product-button-add-to-cart .btn__text,
.product-page-info .js-product-button-add-to-cart .btn__text * { color: var(--rbk-ink) !important; }
@media (hover: hover) and (pointer: fine) {
  .product-page-info .js-product-button-add-to-cart:hover {
    background: transparent !important; background-color: transparent !important;
    border-color: var(--rbk-ink) !important; transform: none !important; filter: none !important;
  }
}

/* mobile: full-bleed, square edges so no corner radius shows at the screen edge */
@media (max-width: 767px) {
  .product-page-info .product-page-info__button-add-to-cart .btn,
  .product-page-info .js-product-button-add-to-cart,
  .product-page-info .rk-buy-now {
    height: 54px !important;
    border-radius: 0 !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }
}