/** Shopify CDN: Minification failed

Line 3090:2 Unexpected "{"
Line 3090:3 Expected identifier but found "%"
Line 3090:41 Unexpected "("
Line 3093:63 Expected identifier but found "%"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:404 (INDEX:0) */
.v-404 {
    display: grid;
    grid-template-columns: var(--content-grid);
    min-height: 70svh;
    align-items: center;
    padding: var(--sp-9) 0 var(--sp-10);
  }
  .v-404__inner {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 600px;
  }
  .v-404__title {
    font-size: clamp(var(--type-32), 7vw, var(--type-80));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin: 0;
  }
  .v-404__desc { font-size: var(--type-16); max-width: 48ch; }
  .v-404__cta { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
  .v-404__cta .v-link { width: fit-content; }
/* END_SECTION:404 */

/* START_SECTION:article (INDEX:3) */
.v-article { display: grid; grid-template-columns: var(--content-grid); }
  .v-article > * { grid-column: 2; }

  .v-article__header { padding: var(--sp-8) 0 var(--sp-5); max-width: 720px; }
  .v-article__title {
    font-size: clamp(var(--type-32), 6vw, var(--type-80));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin: var(--sp-3) 0 var(--sp-4);
  }
  .v-article__excerpt {
    font-size: var(--type-20);
    color: var(--ink-mute);
    line-height: var(--leading-body);
    max-width: 58ch;
  }

  .v-article__hero {
    margin: 0 0 var(--sp-6);
    aspect-ratio: 16 / 9;
    background: var(--paper-2);
    overflow: hidden;
  }
  .v-article__hero img { width: 100%; height: 100%; object-fit: cover; }

  .v-article__body {
    padding: var(--sp-3) 0 var(--sp-8);
    max-width: 68ch;
    font-size: var(--type-16);
    line-height: var(--leading-body);
  }
  .v-article__body h2 { font-size: var(--type-24); margin: var(--sp-6) 0 var(--sp-3); }
  .v-article__body p { margin-bottom: var(--sp-4); }
  .v-article__body a { text-decoration: underline; }

  .v-article__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
  }

  .v-article__nav {
    display: flex;
    justify-content: space-between;
    padding: var(--sp-5) 0 var(--sp-9);
  }
  .v-article__nav a {
    color: var(--ink);
    text-decoration: none;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }
/* END_SECTION:article */

/* START_SECTION:blog (INDEX:4) */
.v-blog { display: grid; grid-template-columns: var(--content-grid); }
  .v-blog > * { grid-column: 2; }

  .v-blog__header { padding: var(--sp-8) 0 var(--sp-5); }
  .v-blog__title {
    font-size: clamp(var(--type-32), 6vw, var(--type-80));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin-top: var(--sp-2);
  }

  .v-blog__list { list-style: none; padding: 0; margin: 0; }
  .v-blog__item { padding: var(--sp-6) 0; }
  .v-blog__link {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--sp-6);
    align-items: start;
    text-decoration: none;
    color: var(--ink);
  }
  .v-blog__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--paper-2);
  }
  .v-blog__media img { width: 100%; height: 100%; object-fit: cover; }
  .v-blog__meta { display: flex; flex-direction: column; gap: var(--sp-2); }
  .v-blog__item-title {
    font-size: clamp(var(--type-24), 3vw, var(--type-48));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin: 0;
  }
  .v-blog__excerpt { font-size: var(--type-14); max-width: 68ch; }

  .v-blog__empty { padding: var(--sp-8) 0; text-align: center; }
  .v-blog__pagination {
    display: flex;
    justify-content: space-between;
    padding: var(--sp-5) 0 var(--sp-9);
  }
  .v-blog__pagination a { color: var(--ink); text-decoration: none; letter-spacing: var(--track-wide); text-transform: uppercase; }

  @media (max-width: 768px) {
    .v-blog__link { grid-template-columns: 1fr; gap: var(--sp-3); }
  }
/* END_SECTION:blog */

/* START_SECTION:cart-drawer (INDEX:6) */
.v-drawer {
    padding: 0;
    border: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    width: min(480px, 100%);
    height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    position: fixed;
    inset: 0 0 0 auto;
  }
  .v-drawer::backdrop { background: rgba(0, 0, 0, 0.4); }
  .v-drawer[open] { animation: v-slide-left var(--motion-base) var(--ease-out); }
  @keyframes v-slide-left {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  /* Mobile: anchor to the bottom and let the shared `.v-bsheet` class
     (snippets/context-bottom-sheet.liquid) provide the rounded corners,
     drag handle, slide-up animation, and shadow. We just set the
     positioning + sizing here and adjust the head/foot padding so the
     drag handle has clearance and the safe-area inset is respected. */
  @media (max-width: 768px) {
    .v-drawer {
      inset: auto 0 0 0;
      width: 100%;
      height: auto;
      max-height: 88dvh;
    }
    .v-drawer__head { padding-top: calc(var(--sp-5) + 12px); }
    .v-drawer__foot {
      padding-bottom: calc(var(--sp-5) * 2 + env(safe-area-inset-bottom));
    }
  }

  .v-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .v-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
  }
  .v-drawer__title {
    font-size: var(--type-20);
    font-weight: 500;
    letter-spacing: 0;
    margin: 0;
  }
  /* Close button uses shared `.v-close-btn` (defined in critical.css). */

  .v-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
  }
  .v-drawer__empty {
    padding: var(--sp-8) 0;
    text-align: center;
  }
  .v-drawer__empty .v-link {
    display: inline-block;
    margin-top: var(--sp-4);
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }
  [hidden] { display: none !important; }

  .v-drawer__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .v-drawer__item {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .v-drawer__item:last-child { border-bottom: 0; }
  .v-drawer__thumb {
    aspect-ratio: 2/3;
    background: var(--paper-2);
    overflow: hidden;
    display: block;
  }
  /* object-fit: contain preserves the source image's natural aspect ratio.
     The 4/5 container keeps all thumbnails on a consistent footprint, while
     letterboxing lets the full product photo show without head/feet getting
     cropped (was object-fit: cover before, which cropped the head out of
     portrait-oriented model photos like the TAMC layered tee). */
  .v-drawer__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
  }
  .v-drawer__info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
  }
  .v-drawer__name {
    font-size: var(--type-14);
    color: var(--ink);
    text-decoration: none;
  }
  .v-drawer__meta { font-size: var(--type-12); color: var(--ink-mute); }
  .v-drawer__price {
    font-size: var(--type-14);
    color: var(--ink-mute);
    margin-top: auto;
  }
  .v-drawer__ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-2);
  }

  /* Quantity stepper styled as a rounded pill matching PDP swatches. */
  .v-drawer__qty {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 999px;
    align-items: center;
    padding: 2px;
    gap: 2px;
  }
  .v-drawer__qty button {
    background: transparent;
    border: 0 !important;
    padding: 0 !important;
    color: var(--ink);
    cursor: pointer;
    font-size: var(--type-14);
    text-transform: none !important;
    letter-spacing: 0 !important;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-drawer__qty button:hover { background: var(--paper-2); color: var(--ink); }}
  .v-drawer__qty input {
    width: 2.2rem;
    border: 0;
    text-align: center;
    background: transparent;
    font-size: var(--type-14);
    font-family: inherit;
    -moz-appearance: textfield;
  }
  .v-drawer__qty input::-webkit-outer-spin-button,
  .v-drawer__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .v-drawer__remove {
    background: none;
    border: 0 !important;
    padding: 0 !important;
    color: var(--ink-mute);
    font-size: var(--type-12);
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: underline;
    cursor: pointer;
  }@media (hover: hover){
  .v-drawer__remove:hover { color: var(--ink); background: none; }}

  .v-drawer__foot {
    border-top: 1px solid var(--line);
    /* Twice the room under the checkout control than at its sides: pinned to
       the very edge it read as stuck to the bottom of the sheet. */
    padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) * 2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
  }
  .v-drawer__sub {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--type-16);
  }
  /* Subtotal label and shipping byline use Helvetica Neue, never WDXL. */
  .v-drawer__sub-label {
    font-family: inherit;
    font-size: var(--type-14);
    font-weight: 500;
    color: var(--ink);
    letter-spacing: 0;
    text-transform: none;
  }
  .v-drawer__note-text {
    font-family: inherit;
    margin: 0;
    font-size: var(--type-12);
    color: var(--ink-mute);
    letter-spacing: 0;
    text-transform: none;
  }
  /* Checkout button reuses the PDP ATC pill language. */
  .v-drawer__checkout {
    display: block;
    text-align: center;
    padding: 18px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 999px;
    text-decoration: none;
    font-size: var(--type-14);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    min-height: 60px;
    transition: background-color var(--motion-fast) ease-out, color var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-drawer__checkout:hover { background: var(--paper); color: var(--ink); opacity: 1; }}

  /* ---- Gift card + charge breakdown (snippets/v-cart-totals.liquid) ----
     Defined here once. Shopify bundles every section's stylesheet block into
     one global sheet, so the /cart page gets these without a second copy. */
  .v-gc { display: flex; flex-direction: column; gap: var(--sp-2); }
  .v-gc__form {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    padding: 4px 4px 4px var(--sp-3);
    background: var(--paper);
    transition: border-color var(--motion-fast) ease-out;
  }
  .v-gc__form:focus-within { border-color: var(--ink); }
  /* Three states, three colours: ink while typing, --ok once a code has
     taken, --bad when it has not. Hairline, mark, text and message move
     together, so the state reads at a glance from across the room. */
  .v-gc.is-applied .v-gc__form { border-color: var(--ok); background: rgba(15, 122, 61, 0.06); }
  .v-gc.is-error .v-gc__form { border-color: var(--bad); background: rgba(180, 35, 24, 0.05); }
  .v-gc__mark { flex: 0 0 auto; color: var(--ink-mute); }
  .v-gc.is-error .v-gc__mark { color: var(--bad); }
  .v-gc__check { display: none; flex: 0 0 auto; color: var(--ok); }
  .v-gc.is-applied .v-gc__mark { display: none; }
  .v-gc.is-applied .v-gc__check { display: block; }
  .v-gc.is-applied .v-gc__input { color: var(--ok); font-weight: 700; }
  .v-gc.is-applied .v-gc__btn { background: var(--ok); }
  /* A code that did not take: one short shake, then still. */
  .v-gc.is-error .v-gc__form { animation: v-gc-shake 360ms var(--ease-out); }
  @keyframes v-gc-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
  }
  .v-gc__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    padding: 0;
    font-family: inherit;
    font-size: var(--type-14);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink);
  }
  /* iOS zooms the page in when a focused field's text is under 16px, and this
     one sits in the cart drawer, so the zoom lands mid-checkout. Bumped on
     touch devices only; the drawer keeps its 14px elsewhere. Gated on
     `pointer: coarse` because the zoom is a property of the input method, not
     the viewport width. CSS only - the class and the `name` are what Magic
     Checkout reads, and neither moves. */
  @media (pointer: coarse) {
    .v-gc__input { font-size: 16px; }
  }
  .v-gc__input::placeholder {
    color: var(--ink-mute);
    letter-spacing: 0;
    text-transform: none;
  }
  .v-gc__btn {
    flex: 0 0 auto;
    border: 0 !important;
    border-radius: var(--radius-full);
    background: var(--ink);
    color: var(--paper);
    font-family: inherit;
    font-size: var(--type-12);
    font-weight: 700;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 0 var(--sp-4) !important;
    min-height: 40px;
    cursor: pointer;
    transition: opacity var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-gc__btn:hover { opacity: 0.82; background: var(--ink); color: var(--paper); }}
  .v-gc__btn[disabled] { opacity: 0.45; cursor: default; }
  /* While the code is being checked the button keeps its size and shows a
     ring in place of its label, so nothing jumps when the answer lands. */
  .v-gc.is-busy { pointer-events: none; }
  .v-gc.is-busy .v-gc__btn { position: relative; color: transparent; opacity: 1; }
  .v-gc.is-busy .v-gc__btn::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    animation: v-gc-spin 700ms linear infinite;
  }
  @keyframes v-gc-spin { to { transform: rotate(360deg); } }
  .v-gc__msg {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding-left: var(--sp-3);
    font-size: var(--type-12);
    color: var(--ink-mute);
  }
  .v-gc__msg::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
  }
  .v-gc.is-applied .v-gc__msg { color: var(--ok); font-weight: 500; }
  .v-gc__msg.is-error { color: var(--bad); font-weight: 500; }

  /* ---- Policies under the last line (snippets/v-bag-trust.liquid) ----
     Four quiet chips in a row. Grey by design: ink-mute at reduced opacity,
     full ink only under the pointer, so they never compete with the total. */
  .v-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
  }
  .v-trust__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--sp-3) var(--sp-1);
    border-radius: 14px;
    color: var(--ink-mute);
    opacity: 0.55;
    font-size: var(--type-11);
    letter-spacing: 0;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: opacity var(--motion-fast) ease-out, color var(--motion-fast) ease-out, background-color var(--motion-fast) ease-out;
  }
  .v-trust__item svg { width: 20px; height: 20px; }
  @media (hover: hover) {
    .v-trust__item:hover { opacity: 1; color: var(--ink); background: var(--paper-2); }
  }
  .v-trust__item:focus-visible { opacity: 1; outline: 2px solid var(--ink); outline-offset: 2px; }

  /* The breakdown opens UPWARD out of a bar pinned to the bottom of the sheet,
     so the rows sit before the bar in the DOM and a button drives the
     disclosure. <details> was tried first and cannot work here: the checkout
     control has to share the bar with the total, and a <summary> swallows every
     click inside it. */
  .v-totals { display: flex; flex-direction: column; }
  .v-totals__rows {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-bottom: var(--sp-4);
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .v-totals__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
  }
  .v-totals__key {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--type-14);
    color: var(--ink-mute);
  }
  .v-totals__val { font-size: var(--type-14); color: var(--ink); }
  .v-totals__soft { color: var(--ink-mute); }
  /* Money saved is the one thing on this sheet that is not ink. */
  .v-totals__key--ok { color: var(--ok); }
  .v-totals__val--ok,
  .v-totals__val--ok .v-price,
  .v-totals__val--ok .v-price__cur,
  .v-totals__val--ok .v-price__num { color: var(--ok); font-weight: 500; }
  .v-totals__tag {
    font-style: normal;
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-full);
    padding: 2px 8px;
  }

  /* The bar: what it costs on the left, the one action on the right. */
  .v-totals__bar { display: flex; align-items: center; gap: var(--sp-4); }
  .v-totals__toggle {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    background: none;
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--ink);
  }
  .v-totals__toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .v-totals__label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--type-12);
    color: var(--ink-mute);
    white-space: nowrap;
  }
  .v-totals__total {
    font-size: var(--type-24);
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
  }
  /* Points up while closed, because that is the direction it opens. */
  .v-totals__chev {
    transform: rotate(180deg);
    transition: transform var(--motion-fast) var(--ease-out);
  }
  .v-totals.is-open .v-totals__chev { transform: rotate(0deg); }

  /* Both checkout controls keep their own class, which Magic Checkout keys on.
     Only their box in this row is set here. */
  .v-totals__bar .v-drawer__checkout,
  .v-totals__bar .v-cart__checkout {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    margin: 0;
    /* Vertical padding is dropped in favour of a fixed height. Left as padding
       the pill grows with its own line-height and turns into an oval. */
    padding: 0 var(--sp-4);
    height: 56px;
    min-height: 56px;
    line-height: 56px;
    white-space: nowrap;
  }
  @media (max-width: 420px) {
    .v-totals__bar { gap: var(--sp-3); }
    .v-totals__total { font-size: var(--type-20); }
    .v-totals__bar .v-drawer__checkout,
    .v-totals__bar .v-cart__checkout { font-size: var(--type-12); padding: 0 var(--sp-3); height: 52px; min-height: 52px; line-height: 52px; }
  }

  /* The toggle is a disclosure, not an action. The global button:hover fills
     every button with ink, which here read as a bug: the bar went black the
     moment the pointer crossed it. Only the cursor says it is live. */
  @media (hover: hover) {
    .v-totals__toggle:hover { background: none; color: var(--ink); }
  }
  /* A code is a code: echoed back in caps wherever it appears. */
  .v-totals__tag { text-transform: uppercase; }

  /* The struck MRP sits ahead of each line's real price, a step smaller. */
  .v-drawer__price .v-price__compare,
  .v-cart__price .v-price__compare,
  .v-cart__line-total .v-price__compare { font-size: var(--type-12); margin-right: 6px; }

  /* ---- "Added to bag" (assets/tenzen-nudge.js) ----
     Top centre on every viewport. White, black text, fully round, and the
     same 1px glass hairline the nav pills carry: `--tz-stroke-ink` painted
     into a masked ::after, exactly as `.tz-pill::after` does it. It never
     takes a tap. */
  .tz-nudge {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 50%;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #000;
    font-family: inherit;
    font-size: var(--type-14);
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    backdrop-filter: blur(12px) saturate(1.6);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -12px);
    transition: opacity 220ms var(--ease-out), transform 360ms var(--ease-out);
  }
  .tz-nudge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    background: var(--tz-stroke-ink);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
  .tz-nudge.is-on { opacity: 1; transform: translate(-50%, 0); }
  /* The phone's top bar (back, bag, share, search) owns that first row, and
     the bag pill sits exactly where the nudge would land. One row down: the
     bar is 12px + 48px tall under the safe area. */
  @media (max-width: 768px) {
    .tz-nudge { top: calc(env(safe-area-inset-top, 0px) + 72px); }
  }

  /* ---- The applied moment (gift-card.js, celebrate()) ----
     A white sheet slides over the bag from the right carrying a green seal,
     the "<CODE> applied" chip, the total and a "Saved" pill; confetti
     bursts from the centre while the total rolls digit by digit. Inside the
     drawer it is absolute to the <dialog>, which is the only way to be seen
     above a showModal() top layer; on /cart it covers the viewport. */
  .v-gcx {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    transform: translateX(100%);
    transition: transform 280ms var(--ease-out);
  }
  .v-gcx--page { position: fixed; z-index: 1300; }
  .v-gcx.is-in { transform: translateX(0); }
  .v-gcx.is-out { transform: translateX(100%); transition: transform 240ms ease-in; }
  .v-gcx__confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .v-gcx__stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 24px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 240ms var(--ease-out) 140ms, transform 360ms var(--ease-out) 140ms;
  }
  .v-gcx.is-in .v-gcx__stack { opacity: 1; transform: none; }
  .v-gcx__seal { width: 46px; height: 46px; color: var(--ok); }
  .v-gcx__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--paper-2);
    font-size: var(--type-14);
    font-weight: 600;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }
  .v-gcx__chip svg { color: var(--ok); }
  .v-gcx__total {
    display: inline-flex;
    align-items: flex-start;
    height: 1em;
    overflow: hidden;
    font-size: clamp(36px, 10vw, 48px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 6px 0 2px;
  }
  .v-gcx__chr { display: inline-block; height: 1em; line-height: 1; }
  .v-gcx__col { display: inline-block; height: 1em; overflow: hidden; }
  .v-gcx__strip { display: block; transition: transform 640ms var(--ease-out); will-change: transform; }
  .v-gcx__strip i { display: block; height: 1em; line-height: 1; font-style: normal; }
  .v-gcx__saved {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--ok);
    color: #fff;
    font-size: var(--type-14);
    font-weight: 600;
  }

  @media (prefers-reduced-motion: reduce) {
    .v-totals__chev, .v-gc__form, .v-gc__btn,
    .tz-nudge, .v-gcx, .v-gcx__stack, .v-gcx__strip, .v-trust__item { transition: none; }
    .v-gc.is-error .v-gc__form, .v-gc.is-busy .v-gc__btn::after { animation: none; }
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:cart (INDEX:7) */
.v-cart { display: grid; grid-template-columns: var(--content-grid); }
  .v-cart > * { grid-column: 2; }

  .v-cart__header { padding: var(--sp-7) 0 var(--sp-4); }
  .v-cart__title {
    font-size: clamp(var(--type-32), 6vw, var(--type-80));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin-top: var(--sp-2);
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
  }
  .v-cart__count { font-size: var(--type-16); font-weight: 400; letter-spacing: 0; }

  .v-cart__empty { padding: var(--sp-9) 0; text-align: center; }
  .v-cart__empty-title { font-size: var(--type-20); margin-bottom: var(--sp-4); }
  [hidden] { display: none !important; }

  .v-cart__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--sp-8);
    padding: var(--sp-6) 0 var(--sp-10);
    align-items: start;
  }

  .v-cart__row {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    gap: var(--sp-4);
    align-items: center;
    transition: opacity var(--motion-fast) ease-out;
  }
  .v-cart__row--head { padding: var(--sp-3) 0; }
  .v-cart__row--item { padding: var(--sp-4) 0; }
  .v-cart__row.is-updating { opacity: 0.4; pointer-events: none; }

  .v-cart__product { display: flex; gap: var(--sp-4); }
  .v-cart__thumb { flex: 0 0 80px; aspect-ratio: 2/3; background: var(--paper-2); overflow: hidden; }
  /* object-fit: contain preserves the source image aspect ratio so portrait
     model photos render fully (heads + feet visible). cover was cropping. */
  .v-cart__thumb img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
  .v-cart__info { display: flex; flex-direction: column; gap: var(--sp-1); }
  .v-cart__name { color: var(--ink); text-decoration: none; font-size: var(--type-14); }
  .v-cart__meta { font-size: var(--type-12); }
  .v-cart__remove {
    background: none;
    border: 0;
    padding: 0;
    margin-top: var(--sp-2);
    color: var(--ink-mute);
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    text-decoration: underline;
    cursor: pointer;
    align-self: flex-start;
    width: fit-content;
  }@media (hover: hover){
  .v-cart__remove:hover { color: var(--ink); background: none; }}

  .v-cart__right { text-align: right; }

  .v-cart__qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line);
    width: fit-content;
  }
  .v-cart__qty button {
    background: none;
    border: 0;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--type-14);
    color: var(--ink);
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
  }@media (hover: hover){
  .v-cart__qty button:hover { background: var(--ink); color: var(--paper); }}
  .v-cart__qty input {
    width: 2.5rem;
    border: 0;
    text-align: center;
    background: transparent;
    font-size: var(--type-14);
    -moz-appearance: textfield;
  }
  .v-cart__qty input::-webkit-outer-spin-button,
  .v-cart__qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .v-cart__summary {
    position: sticky;
    top: var(--sp-5);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
  }
  .v-cart__summary-inner {
    padding: var(--sp-5) 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .v-cart__summary-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--type-16);
  }
  .v-cart__summary-note { margin: 0; }
  .v-cart__note {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .v-cart__note textarea {
    border: 1px solid var(--line);
    padding: var(--sp-3);
    background: var(--paper-2);
    font-family: inherit;
    font-size: var(--type-14);
    resize: vertical;
  }
  /* Same reason as the drawer's gift-card field: under 16px, iOS zooms the
     whole page the moment this is focused. */
  @media (pointer: coarse) {
    .v-cart__note textarea { font-size: 16px; }
  }
  .v-cart__checkout {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    padding: var(--sp-4);
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    cursor: pointer;
  }@media (hover: hover){
  .v-cart__checkout:hover { background: var(--paper); color: var(--ink); }}
  .v-cart__continue {
    text-align: center;
    text-decoration: underline;
  }

  .v-cart__flash {
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    font-size: var(--type-12);
    color: var(--ink-mute);
  }

  @media (max-width: 900px) {
    .v-cart__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
    .v-cart__row { grid-template-columns: 1fr 1fr; grid-template-areas: "product product" "price qty" "total total"; }
    .v-cart__row--head { display: none; }
    .v-cart__product { grid-area: product; }
    .v-cart__price { grid-area: price; }
    .v-cart__qty { grid-area: qty; justify-self: end; }
    .v-cart__line-total { grid-area: total; text-align: left; }
    .v-cart__summary { position: static; }
  }
/* END_SECTION:cart */

/* START_SECTION:collection (INDEX:8) */
.v-col { display: grid; grid-template-columns: var(--content-grid); position: relative; }
  .v-col > * { grid-column: 2; }

  /* Sub-category nav */
  .v-col__subnav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    padding: var(--sp-4) 0 var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .v-col__subnav-link {
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-mute);
    text-decoration: none;
    transition: color var(--motion-fast) ease-out;
  }
  .v-col__subnav-link.is-active{ color: var(--ink); }@media (hover: hover){.v-col__subnav-link:hover{ color: var(--ink); }}
  .v-col__subnav-link.is-active { text-decoration: underline; text-underline-offset: 4px; }

  /* Two classes, not one: `.v-col > *` sets `grid-column: 2` at the same
     (0,1,0) specificity and lands later in the compiled bundle, which
     pinned the banner to the content column instead of full bleed. */
  .v-col > .v-col__banner { grid-column: 1 / -1; }

  /* Sentinel sits right above the sticky bar - IntersectionObserver trips is-stuck when it leaves */
  .v-col__bar-sentinel {
    grid-column: 1 / -1;
    display: block;
    height: 1px;
    width: 100%;
    pointer-events: none;
  }

  /* Title bar - full-width so glass background extends edge-to-edge when stuck */
  .v-col__bar {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--paper);
    transition:
      background var(--motion-fast) ease-out,
      padding var(--motion-fast) ease-out,
      border-color var(--motion-fast) ease-out,
      box-shadow var(--motion-fast) ease-out;
  }
  .v-col__bar-inner {
    display: grid;
    grid-template-columns: var(--content-grid);
    align-items: flex-end;
    padding: var(--sp-7) 0 var(--sp-4);
    transition: padding var(--motion-fast) ease-out;
  }
  .v-col__bar-inner > * { grid-column: 2; }
  .v-col__bar-inner {
    display: flex;
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
    justify-content: space-between;
    gap: var(--sp-5);
  }
  .v-col__bar-left { display: flex; flex-direction: column; gap: var(--sp-2); transition: gap var(--motion-fast) ease-out; }
  .v-col__title {
    font-size: clamp(var(--type-32), 6vw, var(--type-80));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    color: var(--ink);
    margin: 0;
    transition: font-size var(--motion-fast) ease-out, letter-spacing var(--motion-fast) ease-out;
  }
  .v-col__count { display: inline-flex; gap: 4px; transition: opacity var(--motion-fast) ease-out; }

  /* ── Desktop: the category header sits in the middle ─────────────────
     `.v-col__bar-inner` is `space-between` for the title / Refine pair, but
     Refine is gone from this bar, so the single remaining child was being
     pushed to the left edge. Centred here, with the column centring its own
     two lines so the count sits under the middle of the title rather than
     under its first letter. The title also drops 8px, to a 72px ceiling.

     PREFIXED WITH `body.template-collection` FOR A REAL REASON, not tidiness.
     `sections/search.liquid` carries its own UNSCOPED copy of this entire
     header block - `.v-col__bar-inner`, `.v-col__title`, the lot - and
     Shopify concatenates every section's `{% stylesheet %}` into one
     styles.css regardless of which sections the page actually renders. That
     copy lands AFTER this file's, so at equal specificity it wins on the
     COLLECTION page too. A plain `.v-col__bar-inner { justify-content:
     center }` here computed to `space-between` for exactly that reason.
     The template prefix outranks it and leaves the search page alone.

     990px, the desktop nav's own breakpoint - below it the header keeps the
     left alignment it has today, and m-web keeps its 32px title.

     NOT applied to the STUCK state: `.v-col__bar.is-stuck .v-col__bar-left`
     sets `flex-direction: row; align-items: baseline`, and the added
     `body.template-collection` keeps this above that too - so the stuck row
     is restated below rather than left to chance. Album pages are
     unaffected: their `.v-col__bar-inner` is `display: none` until stuck. */
  @media (min-width: 990px) {
    body.template-collection .v-col__bar-inner { justify-content: center; }
    body.template-collection .v-col__bar-left { align-items: center; text-align: center; }
    /* Only the CEILING moves. The 6vw middle term and the 32px floor stay,
       so nothing under a ~1200px viewport changes size. */
    body.template-collection .v-col__title {
      font-size: clamp(var(--type-32), 6vw, calc(var(--type-80) - 8px));
    }
    /* ── The header does NOTHING on scroll ───────────────────────────
       Aditya: no compaction, no de-stacking, no resize. The title and the
       item count sit where they are, scroll away with the content, and the
       hand-off to the top-left nav pill (driven separately by
       `html.tz-col-stuck` in assets/collection-rail.js) is the only move.

       `snippets/tenzen-topnav.liquid` already cancels most of the stuck
       state on desktop, and I BROKE THAT LAST ROUND: the
       `body.template-collection ... .is-stuck .v-col__bar-left { flex-
       direction: row }` rule that used to sit here outranked the cancel at
       (0,3,1) vs (0,2,0) and put the de-stacking back. Deleted. What is
       left are the two compact-state rules the topnav cancel never covered
       - the inner's padding and the count's opacity - restated at
       `body.template-collection` specificity so they also beat the
       duplicate copy in `sections/search.liquid`, which loads later.

       Album pages are untouched: their `.v-col__bar` is `display: none` on
       desktop (tenzen-topnav.liquid:1684). */
    body.template-collection .v-col__bar,
    body.template-collection .v-col__bar-inner { transition: none; }
    /* 96px, NOT `var(--sp-7)`. The unstuck header does not use `--sp-7`
       either: `snippets/tenzen-topnav.liquid` pins `.v-col__bar
       .v-col__bar-inner { padding-top: 96px }` unconditionally to clear the
       floating desktop deck, and it says in its own comment that it was made
       unconditional so the padding could not snap away when the sentinel
       trips. `--sp-7` is 3rem = 48, so writing it here re-created exactly
       that jump - measured 96 -> 48 the moment `is-stuck` landed. This
       matches the clearance rule instead, at a specificity that also beats
       the `.is-stuck` copies in this file and in search.liquid. */
    body.template-collection .v-col__bar.is-stuck .v-col__bar-inner {
      padding-top: 96px;
      padding-bottom: var(--sp-4);
    }
    body.template-collection .v-col__bar.is-stuck .v-col__bar-left {
      flex-direction: column;
      align-items: center;
      gap: var(--sp-2);
    }
    body.template-collection .v-col__bar.is-stuck .v-col__title {
      font-size: clamp(var(--type-32), 6vw, calc(var(--type-80) - 8px));
      letter-spacing: var(--track-tight);
    }
    body.template-collection .v-col__bar.is-stuck .v-col__count { opacity: 1; }
  }

  /* Stuck state - solid white (no glass). User feedback: glass on
     the category page header was distracting; the bar should read
     as a clean light-mode header that scales the title down on
     scroll without any backdrop-filter blur. */
  .v-col__bar.is-stuck {
    background: var(--paper);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .v-col__bar.is-stuck .v-col__bar-inner {
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-3);
  }
  .v-col__bar.is-stuck .v-col__bar-left {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-3);
  }
  .v-col__bar.is-stuck .v-col__title {
    font-size: var(--type-20);
    letter-spacing: var(--track-tight);
  }
  .v-col__bar.is-stuck .v-col__count { opacity: 0.7; }

  .v-col__trigger {
    background: none;
    border: 0;
    padding: var(--sp-2) 0;
    font-family: inherit;
    font-size: var(--type-12);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
  }
  .v-col__trigger::after {
    content: ' +';
    color: var(--ink-mute);
    font-weight: 400;
  }@media (hover: hover){
  .v-col__trigger:hover { opacity: 0.65; background: none; }}

  .v-col__desc { color: var(--ink-mute); font-size: var(--type-14); max-width: 64ch; padding: var(--sp-3) 0 0; }

  /* Active filter chips */
  .v-col__active {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4) 0 0;
    grid-column: 1 / -1;
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
  .v-col__active-label {
    font-size: 10px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }
  .v-col__active-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .v-col__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    font-size: 10px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }@media (hover: hover){
  .v-col__chip:hover { background: var(--ink); color: var(--paper); }}
  .v-col__chip-x { font-size: 11px; line-height: 1; }
  .v-col__clear {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-mute);
    text-decoration: underline;
  }

  /* Results - grid is the shared `.v-grid` (snippets/grid-cards.liquid).
     Only the surrounding container styles live here. */
  /* Flush to the viewport edges on every width, the same as the home
     grid: the shared .v-grid owns the gutters, this wrapper adds none. */
  .v-col__results { grid-column: 1 / -1; padding: var(--sp-5) 0 var(--sp-9); }

  .v-col__empty { padding: var(--sp-9) 0; text-align: center; }
  .v-col__empty .v-link { display: inline-block; margin-top: var(--sp-4); }

  .v-col__pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-5) 0 0; }
  .v-col__pagination a { text-decoration: none; color: var(--ink); letter-spacing: var(--track-wide); text-transform: uppercase; }

  /* Skeleton grid */
  .v-col__skeleton {
    display: none;
    grid-column: 1 / -1;
    padding: var(--sp-5) 0 var(--sp-9);
  }
  .v-col.is-loading .v-col__results { opacity: 0; pointer-events: none; height: 0; overflow: hidden; padding: 0; }
  .v-col.is-loading .v-col__skeleton { display: block; }

  .v-skel { display: flex; flex-direction: column; gap: 10px; }
  .v-skel__img {
    width: 100%;
    aspect-ratio: 4/5;
    background: var(--paper-2, #f2f2f2);
    position: relative;
    overflow: hidden;
  }
  .v-skel__img::after,
  .v-skel__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    animation: v-skel-shimmer 1.4s ease-in-out infinite;
  }
  .v-skel__line {
    height: 12px;
    background: var(--paper-2, #f2f2f2);
    position: relative;
    overflow: hidden;
  }
  .v-skel__line--title { width: 70%; height: 14px; }
  .v-skel__line--price { width: 30%; height: 12px; }
  @keyframes v-skel-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  /* --- Filter + Sort drawer (right-slide) --- */
  .v-col-drawer {
    padding: 0;
    border: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100dvh;
    width: min(420px, 100%);
    height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    position: fixed;
    inset: 0 0 0 auto;
    box-shadow: -1px 0 0 var(--line);
  }
  /* Transparent backdrop - products stay visible behind, Fear-of-God style */
  .v-col-drawer::backdrop { background: transparent; }
  .v-col-drawer[open] { animation: v-col-drawer-slide var(--motion-base) var(--ease-out); }
  @keyframes v-col-drawer-slide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  .v-col-drawer__inner { display: flex; flex-direction: column; height: 100%; }
  .v-col-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .v-col-drawer__tabs { display: inline-flex; align-items: center; gap: var(--sp-3); }
  .v-col-drawer__tab {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: var(--type-14);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-mute);
    cursor: pointer;
    font-weight: 600;
  }
  .v-col-drawer__tab.is-active { color: var(--ink); }@media (hover: hover){
  .v-col-drawer__tab:hover { opacity: 0.8; background: none; }}
  .v-col-drawer__sep { color: var(--line); font-weight: 300; }
  .v-col-drawer__close {
    background: none;
    border: 0;
    padding: var(--sp-2);
    color: var(--ink);
    font-size: var(--type-16);
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
  }@media (hover: hover){
  .v-col-drawer__close:hover { background: none; opacity: 0.6; }}

  .v-col-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4) var(--sp-5);
  }
  .v-col-drawer__panel { display: none; }
  .v-col-drawer__panel.is-active { display: block; }
  .v-col-drawer__stub { padding: var(--sp-5) 0; }
  .v-col-drawer__tab-count { color: var(--ink-mute); font-weight: 400; margin-left: 2px; }

  .v-col-drawer__sorts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .v-col-drawer__sort {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: var(--type-14);
    cursor: pointer;
  }
  .v-col-drawer__sort:last-child { border-bottom: 0; }
  .v-col-drawer__sort-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
  }
  .v-col-drawer__radio {
    width: 14px; height: 14px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    flex-shrink: 0;
    position: relative;
  }
  .v-col-drawer__sort-input:checked + .v-col-drawer__radio::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--ink);
    border-radius: 999px;
  }

  .v-col-drawer__foot {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  /* Drawer footer buttons reuse the PDP ATC pill language - rounded
     999-px corners, same heights, same Helvetica Neue 14/20 typography
     so every CTA on the site reads as one component family. */
  .v-col-drawer__clear,
  .v-col-drawer__apply {
    flex: 1 1 0;
    height: 56px;
    padding: 0 24px;
    border-radius: 999px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease-out,
                color var(--motion-fast) ease-out,
                border-color var(--motion-fast) ease-out;
  }
  .v-col-drawer__clear {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
  }@media (hover: hover){
  .v-col-drawer__clear:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ink);
    border-color: var(--ink);
  }}
  .v-col-drawer__apply {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
  }@media (hover: hover){
  .v-col-drawer__apply:hover {
    background: #1f1f1f;
    color: var(--paper);
  }}

  @media (max-width: 768px) {
    .v-col__bar-inner { padding-top: var(--sp-5); padding-bottom: var(--sp-3); align-items: flex-end; gap: var(--sp-2); }
    .v-col__title { font-size: var(--type-32); }
    .v-col__bar.is-stuck .v-col__bar-inner { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
    .v-col__bar.is-stuck .v-col__title { font-size: var(--type-16); }
    .v-col__trigger { font-size: var(--type-11); white-space: nowrap; }
    /* Mobile: results region is flush edge-to-edge (no horizontal
       padding) so the shared `.v-grid` 2-up cards line up with the
       Figma 187:1255 reference. The skeleton grid keeps a small inset
       so the placeholder doesn't shock-cut against the bar above. */
    .v-col__results { padding: var(--sp-4) 0 var(--sp-8); }
    .v-col__skeleton { padding: var(--sp-4) 8px var(--sp-8); }
    /* Mobile catalog: header "Refine" button is hidden; the floating
       glass-morphic FAB is the only refinement entry-point. */
    .v-col__trigger { display: none; }
    .v-col-drawer { width: 100%; }
    .v-col__subnav { gap: var(--sp-3); padding: var(--sp-3) 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .v-col__subnav::-webkit-scrollbar { display: none; }
    .v-col__subnav-link { white-space: nowrap; }
  }

  /* Cross-collection navigation - surfaces every other collection at
     the bottom of each collection page. Helps internal-link equity flow
     + AI assistant brand-comprehension. */
  .v-col__cross {
    margin: var(--sp-8) auto var(--sp-4);
    padding: var(--sp-6) var(--page-margin, 16px) 0;
    border-top: 1px solid var(--line);
    max-width: var(--pdp-content-width, 1280px);
  }
  .v-col__cross-title {
    font-size: var(--type-18);
    font-weight: 600;
    letter-spacing: var(--track-tight);
    margin: 0 0 var(--sp-5);
    color: var(--ink);
  }
  .v-col__cross-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--sp-5);
  }
  .v-col__cross-card {
    display: block;
    color: var(--ink);
    text-decoration: none;
  }
  .v-col__cross-img {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--paper-2);
    margin: 0 0 var(--sp-3);
  }
  .v-col__cross-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .v-col__cross-img--empty { background: var(--paper-2); }
  .v-col__cross-name {
    font-size: var(--type-14);
    font-weight: 600;
    margin: 0 0 var(--sp-1);
  }
  .v-col__cross-desc {
    font-size: var(--type-12);
    color: var(--ink-mute);
    margin: 0;
    line-height: 1.5;
  }
  @media (max-width: 640px) {
    .v-col__cross-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .v-col__cross-title { font-size: var(--type-16); }
  }
/* END_SECTION:collection */

/* START_SECTION:collections (INDEX:9) */
.v-cols { display: grid; grid-template-columns: var(--content-grid); }
  .v-cols > * { grid-column: 2; }

  .v-cols__header { padding: var(--sp-8) 0 var(--sp-5); }
  .v-cols__title {
    font-size: clamp(var(--type-32), 6vw, var(--type-80));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin-top: var(--sp-2);
  }

  .v-cols__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-7) var(--sp-5);
    padding: var(--sp-6) 0 var(--sp-9);
  }

  .v-cols__tile {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    text-decoration: none;
    color: var(--ink);
  }@media (hover: hover){
  .v-cols__tile:hover { opacity: 1; }}
  .v-cols__media {
    aspect-ratio: 4 / 5;
    background: var(--paper-2);
    overflow: hidden;
  }
  .v-cols__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--motion-slow) var(--ease-out);
  }@media (hover: hover){
  .v-cols__tile:hover .v-cols__media img { transform: scale(1.03); }}

  .v-cols__meta { display: flex; justify-content: space-between; align-items: baseline; }
  .v-cols__name {
    font-size: var(--type-16);
    font-weight: 400;
    margin: 0;
  }

  .v-cols__empty { padding: var(--sp-8) 0; text-align: center; }

  @media (max-width: 768px) {
    .v-cols__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-3); }
  }
  @media (max-width: 420px) {
    .v-cols__grid { grid-template-columns: 1fr; }
  }
/* END_SECTION:collections */

/* START_SECTION:custom-section (INDEX:10) */
.custom-section {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .custom-section__background {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  .custom-section__background img {
    position: absolute;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .custom-section__content {
    display: grid;
    grid-template-columns: var(--content-grid);
  }
  .custom-section__content > * {
    grid-column: 2;
  }
/* END_SECTION:custom-section */

/* START_SECTION:featured-carousel (INDEX:11) */
/* ── .v-frail - the home page's featured RAIL ──────────────────────
     Named for the rail, not the collection, because the section is now a
     carousel on every viewport. Edge to edge like the grid it replaced. */
  .v-frail {
    display: block;
    width: 100%;
    /* Was `var(--sp-8)`, which left a large dead band under the last row of
       cards once the View all button was removed. */
    padding: 0 0 32px;
    /* The home page body is BLACK on mobile (critical.css, so the hero's
       surroundings read as part of the artwork). The grid this replaced was
       exempted by name with `body.template-index .v-featured { background:
       var(--paper) }`; a new section is not, so without this the card titles
       and prices were dark ink on black and simply vanished. Carry the paper
       ground on the section itself rather than adding another name to that
       rule in critical.css. */
    background: var(--paper, #fff);
  }

  .v-frail__banner {
    display: block;
    width: 100%;
    aspect-ratio: var(--fb-m, 1.3333);
    overflow: hidden;
    line-height: 0;
    background: var(--paper-2, #f1f1f1);
    -webkit-tap-highlight-color: transparent;
  }
  .v-frail__banner, .v-frail__banner:hover, .v-frail__banner:focus { opacity: 1; }
  .v-frail__banner picture { display: block; width: 100%; height: 100%; }
  .v-frail__banner-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .v-frail__track {
    display: flex;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* NO scroll snapping, at any width (Aditya, 2026-09-14: "the carousel
       needs to be much more simple to swipe. Right now it is snapping onto
       the next SKU. That should not happen."). A flick now coasts wherever
       its momentum takes it and stops there, mid-card if that is where it
       lands. */
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    /* The rail starts flush with the viewport edge, same as the grid. */
    padding: 0;
    margin-top: var(--sp-6);
  }
  /* No gap under a banner: the rail reads as part of the same block. */
  .v-frail__banner + .v-frail__track { margin-top: 0; }
  .v-frail__track::-webkit-scrollbar { display: none; }
  .v-frail__track:focus-visible { outline: 2px solid var(--ink, #000); outline-offset: -2px; }

  .v-frail__cell {
    /* Counts Aditya set: 1.75 cards on a phone, 4.25 on desktop, so the
       next card is always visibly cut and the rail reads as swipeable.
       A PERCENTAGE of the track, not vw: `100vw` includes the classic
       desktop scrollbar, which would make every card a few px too wide and
       push the fractional card off by the end of the rail. A percentage
       resolves against the track's own content box, so 1/4.25 of it is
       exactly 4.25 cards in view whether or not a scrollbar is present. */
    flex: 0 0 calc(100% / 1.75);
    max-width: calc(100% / 1.75);
  }
  /* The card fills the cell; it brings its own internal layout. */
  .v-frail__cell > .v-card { width: 100%; }

  /* Centre the card's text in the rail only, and drop the gender and
     category eyebrow entirely (Aditya, 2026-09-14: "the gender and the
     category label should not be visible on the SKU"). It was desktop-only
     for one revision; it is now every width. Scoped to `.v-frail`, so the
     same card keeps its eyebrow on collection pages, search and PDP
     recommendations. */
  .v-frail .v-card__eyebrow { display: none; }
  .v-frail .v-card__meta { text-align: center; align-items: center; }
  /* Medium, not regular (Aditya, 2026-09-14). */
  @media (min-width: 769px) {
    .v-frail .v-card__title { font-weight: 500; }
  }
  .v-frail .v-card__eyebrow,
  .v-frail .v-card__title,
  .v-frail .v-card__price { justify-content: center; }

  /* ── The card's own image rail is display-only inside this carousel ──
     Two asks, one mechanism (Aditya, 2026-09-14): "disable the scrolling
     within the SKU itself" and "when I scroll it should not change the
     images inside the SKU, it should scroll the carousel of the parent".
     `overflow: hidden` does both. The element keeps `scrollLeft` and
     `scrollWidth`, so the hover script below can still drive it and
     `assets/card-carousel.js` can still place it, but the browser will not
     scroll it from a wheel, a drag or a swipe. With no scrollable box under
     the pointer, the wheel walks up to the nearest scrollable ancestor,
     which is the rail - so a trackpad swipe over a card now moves the rail
     exactly as asked, with no event plumbing of our own.

     Snapping comes off with it: snap points only matter to a scroll the
     user can start, and leaving them on makes them fight the smooth hover
     seek. */
  .v-frail .v-card__scroll {
    overflow: hidden;
    scroll-snap-type: none;
    touch-action: auto;
    /* THE SWIPE FIX (Aditya, 2026-09-14: "if I swipe left and right on the
       image, the whole carousel should move, but nothing is happening").
       The base card marks this strip as its own momentum scroller with
       `-webkit-overflow-scrolling: touch` and walls it off with
       `overscroll-behavior-x: contain`. Both are correct for a card the
       visitor can swipe; both are wrong here, where the strip is frozen and
       the gesture is meant for the rail behind it. Chromium chains out of it
       anyway, which is why this looked fine in testing; WebKit does not, so
       on an iPhone the swipe died on the card and the rail never moved.
       Hand the gesture back: no private scroller, no containment. */
    -webkit-overflow-scrolling: auto;
    overscroll-behavior: auto;
  }
  /* The per-card progress bar still tracks the hover, which is the point:
     it is the affordance that says the card has a second image. */

  .v-frail__more {
    display: inline-block;
    margin: var(--sp-5) 0 0 var(--page-margin, 20px);
    padding: 10px 18px;
    border-radius: 999px;
    background: #F8F8F8;
    color: var(--ink, #111);
    font-size: var(--type-12, 0.75rem);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    text-decoration: none;
  }
  @media (hover: hover) {
    .v-frail__more:hover { background: #ECECEC; opacity: 1; }
  }

  /* ── Quick view sheet (mobile only) ─────────────────────────────── */
  .v-frail__qv-sheet { position: fixed; inset: 0; z-index: 1200; }
  .v-frail__qv-sheet[hidden] { display: none; }
  .v-frail__qv-scrim {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 240ms var(--tz-ease, cubic-bezier(0.32,0.72,0,1));
  }
  .v-frail__qv-sheet[data-open] .v-frail__qv-scrim { opacity: 1; }
  .v-frail__qv-panel {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--paper, #fff);
    border-radius: 16px 16px 0 0;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 300ms var(--tz-ease, cubic-bezier(0.32,0.72,0,1));
    max-height: 86vh;
    overflow-y: auto;
  }
  .v-frail__qv-sheet[data-open] .v-frail__qv-panel { transform: translateY(0); }
  .v-frail__qv-grab {
    display: block; width: 44px; height: 5px; margin: 0 auto 16px;
    padding: 0; border: 0; border-radius: 999px;
    background: var(--line, rgba(0,0,0,0.18));
    font-size: 0; cursor: pointer;
  }
  .v-frail__qv-body { display: flex; gap: 14px; align-items: center; }
  .v-frail__qv-img {
    width: 84px; height: 112px; flex: none;
    object-fit: cover; border-radius: 8px;
    background: var(--paper-2, #f1f1f1);
  }
  .v-frail__qv-title {
    margin: 0 0 4px; font-size: var(--type-16, 1rem); font-weight: 500;
    line-height: var(--leading-snug, 1.3);
  }
  .v-frail__qv-price { margin: 0; font-size: var(--type-14, 0.875rem); }
  .v-frail__qv-sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; }
  /* The cloned pills arrive with the card's dark hover styling, which was
     drawn for a pill sitting ON a photograph. In the sheet they sit on paper,
     so they are re-dressed here rather than in the card. */
  .v-frail__qv-sizes .v-card__size {
    position: static; opacity: 1; transform: none;
    flex: 1 0 auto; min-width: 56px;
    padding: 12px 14px; border-radius: 999px;
    background: #F4F4F4; color: var(--ink, #111);
    font-size: var(--type-14, 0.875rem); text-align: center;
  }
  .v-frail__qv-sizes .v-card__size[data-card-add-done] { background: var(--ink, #111); color: #fff; }
  .v-frail__qv-link {
    display: block; margin: 18px 0 0; text-align: center;
    font-size: var(--type-12, 0.75rem); letter-spacing: var(--track-wide);
    text-transform: uppercase; text-decoration: underline;
    text-underline-offset: 3px; color: var(--ink-mute, rgba(0,0,0,0.6));
  }
  /* Desktop has hover, the size rail and the chevrons, so it never needs the
     sheet; keeping it out of the layout there also keeps a stray fixed
     element off every desktop page. */
  @media (min-width: 769px) {
    .v-frail__qv-sheet { display: none !important; }
  }

  @media (max-width: 768px) {
    /* The bordered, inset, 24px-radius container that briefly lived here is
       GONE (Aditya, 2026-09-14: "roll back the changes we made to the
       on-scroll banner and the carousel. I want them back edge to edge").
       The banner and the rail run to the viewport edges again, like every
       other grid on the site. */

    /* ONE image per card on a phone (Aditya, 2026-09-14), so everything
       that implies a second one goes: the chevrons that were pinned visible
       here a revision ago, and the progress bar under the image. The strip
       itself is already unscrollable via `overflow: hidden` above, and it
       rests on the first real image, so hiding the affordances is all that
       is left. Desktop keeps the chevrons and the hover seek. */
    .v-frail .v-card__nav,
    .v-frail .v-card__progress { display: none; }

    /* The quick-view plus replaces them as the card's only control. */
    .v-frail .v-card__qv { display: inline-flex; }
  }

  @media (min-width: 769px) {
    .v-frail__banner { aspect-ratio: var(--fb-d, 1.3333); }
    .v-frail__cell {
      flex-basis: calc(100% / 4.25);
      max-width: calc(100% / 4.25);
    }
    /* Aditya, 2026-09-14: "have a 60-pixel gap after these cards on desktop
       only". On a phone the rails stack tight by design; on desktop the card
       titles sat straight onto the next banner with nothing between them. */
    .v-frail { padding-bottom: 60px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .v-frail__track { scroll-behavior: auto; }
  }
/* END_SECTION:featured-carousel */

/* START_SECTION:featured-collection (INDEX:12) */
.v-featured {
    display: grid;
    grid-template-columns: var(--content-grid);
    padding: var(--sp-9) 0 var(--sp-10);
  }
  .v-featured > * { grid-column: 2; }

  .v-featured__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    padding: 0 12px;
  }
  .v-featured__head-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-4);
  }
  .v-featured__title {
    font-size: clamp(var(--type-24), 4vw, var(--type-48));
    font-weight: var(--font-display--weight);
    line-height: var(--leading-tight);
    letter-spacing: var(--track-tight);
    margin: 0;
  }
  /* "View all" — same #F8F8F8 rounded-pill component on every
     viewport (desktop + mobile) per spec. Matches the close-btn /
     menu-sheet bottom-tab / other light-pill buttons across the
     site. */
  .v-featured__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: #F8F8F8;
    color: var(--ink);
    border: 0;
    border-radius: 999px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-featured__more:hover { background: #ECECEC; opacity: 1; }}

  /* Featured grid wrapper extends the shared `.v-grid` (defined in
     snippets/grid-cards.liquid) — no per-surface column or gap rules
     needed here. */
  .v-featured__grid { grid-column: 1 / -1; }

  .v-featured__empty {
    padding: var(--sp-7) 12px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    text-align: center;
  }

  @media (max-width: 768px) {
    /* 48 px top/bottom padding on phone — was sp-9 / sp-10 (96 / 128 px)
       originally; user dialled it to 48 px exact for a tighter rhythm. */
    .v-featured { padding: 48px 0; }

    /* No left/right padding on the header — it already sits inside
       the section's content column with --page-margin (20 px) gutters
       built in by the .shopify-section grid. The earlier inline
       `padding: 0 20px` was double-padding it to 40 px from the edge. */
    .v-featured__header {
      padding: 0;
      gap: var(--sp-2);
      margin-bottom: var(--sp-4);
    }

  }
/* END_SECTION:featured-collection */

/* START_SECTION:footer (INDEX:13) */
/* The body's mobile bottom-deck clearance lives HERE on the footer
     instead of `<body>` per spec — content above the footer sits
     flush, and the footer's own dark bg fills the deck-clearance
     band so the visible result reads as continuous black on every
     template (home, collection, page, search, article, etc.). */
  .v-footer {
    --v-footer-ink: #fff;
    --v-footer-ink-mute: rgba(255, 255, 255, 0.6);
    --v-footer-line: rgba(255, 255, 255, 0.15);
    display: grid;
    grid-template-columns: var(--content-grid);
    background-color: #000;
    color: var(--v-footer-ink);
    margin-top: var(--sp-10);
    border-top: 1px solid var(--v-footer-line);
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .v-footer__inner {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
    padding: var(--sp-8) 0 var(--sp-6);
  }
  .v-footer__logo {
    display: inline-block;
    color: var(--v-footer-ink);
  }
  .v-footer__logo svg {
    display: block;
    height: 1.6rem;
    width: auto;
    color: var(--v-footer-ink);
  }
  .v-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
  }
  .v-footer__links a {
    font-size: var(--type-12);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--v-footer-ink);
    text-decoration: none;
    transition: opacity var(--motion-fast) ease-out;
  }
  .v-footer__text {
    font-size: var(--type-12);
    line-height: 1.55;
    color: var(--v-footer-ink-mute);
    text-transform: none;
    letter-spacing: 0;
    max-width: 320px;
  }@media (hover: hover){
  .v-footer__links a:hover { opacity: 0.65; }}
  .v-footer__compliance {
    display: grid;
    gap: 6px;
    max-width: 520px;
  }
  .v-footer__compliance p {
    margin: 0;
    font-size: var(--type-12);
    line-height: 1.55;
    color: var(--v-footer-ink-mute);
    text-transform: none;
    letter-spacing: 0;
  }
  .v-footer__compliance strong {
    color: var(--v-footer-ink);
    font-weight: 600;
  }
  .v-footer__compliance a {
    color: var(--v-footer-ink);
    text-decoration: none;
  }
  .v-footer__copyright {
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--v-footer-ink-mute);
    margin: 0;
  }

  @media (max-width: 768px) {
    .v-footer { margin-top: 0; }
    .v-footer__inner {
      gap: var(--sp-4);
      padding: var(--sp-6) 0 var(--sp-5);
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:14) */
.v-header {
    display: grid;
    grid-template-columns: var(--content-grid);
    --nav-bottom-gap: 64px;
    padding: 0;
    background: transparent;
    border: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
  }
  .v-header__inner {
    grid-column: 2;
    align-self: end;
    margin-bottom: 64px;
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  /* ── Glass deck — pixel-accurate to Figma node 172:564 (Component 4). ──
     56-tall pill, 28-px radius, 12/20 padding, dark-glass gradient + 50-px
     backdrop blur, no border, single 4-px-offset shadow. White Lucide
     icons + 88.889 px white wordmark. Same shape on desktop and mobile. */
  .v-header__deck {
    width: min(370px, calc(100vw - 32px));
    min-height: 56px;
    padding: 12px 20px;
    border: 0;
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(10, 10, 10, 0.42), rgba(10, 10, 10, 0.24));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    color: #fff;
    pointer-events: auto;
    overflow: hidden;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
                opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .v-header__deck--default {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Row content: 3-column grid (1fr | auto | 1fr) keeps the brand
     dead-centered. Icon clusters hug the deck's outer edges, with a 16-px
     gap between the icons inside each cluster (Figma 172:564). */
  .v-header__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .v-header__row-side {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
  }
  .v-header__row-side--left  { justify-content: flex-start; }
  .v-header__row-side--right { justify-content: flex-end; }
  .v-header__row--search {
    display: none;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 16px;
    align-items: center;
  }
  .v-header.is-searching .v-header__deck--default { display: none; }
  .v-header.is-searching .v-header__row--search { display: grid; }

  /* Collapsible panels (menu + country) — same grid-rows trick. */
  .v-header__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--motion-base) var(--ease-out);
  }
  .v-header.is-menu-open    [data-header-menu]    { grid-template-rows: 1fr; }
  .v-header.is-country-open [data-header-country] { grid-template-rows: 1fr; }
  .v-header__panel-clip {
    min-height: 0;
    overflow: hidden;
    transition: opacity var(--motion-fast) ease-out;
    opacity: 0;
  }
  .v-header.is-menu-open    [data-header-menu]    .v-header__panel-clip { opacity: 1; }
  .v-header.is-country-open [data-header-country] .v-header__panel-clip { opacity: 1; }

  /* The panel clip has overflow:hidden so the grid-rows open/close animates,
     which also meant a menu taller than the viewport simply got cut off with no
     way to reach the rest. The country list already solved this; the menu now
     uses the same treatment rather than a new one. */
  .v-header__menu {
    display: flex;
    flex-direction: column;
    padding: 10px 6px 8px;
    max-height: 64vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .v-header__menu-link {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    font-family: inherit; font-size: 16px; font-weight: 500;
    color: #fff; text-decoration: none;
    background: transparent; border: 0; border-radius: 14px;
    text-align: left; letter-spacing: 0; text-transform: none;
    cursor: pointer; width: 100%;
    transition: background-color var(--motion-fast) ease-out;
  }
  .v-header__menu-link + .v-header__menu-link { margin-top: 4px; }@media (hover: hover){
  .v-header__menu-link:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }}
  .v-header__menu-icon { flex: 0 0 auto; width: 20px; height: 20px; color: rgba(255, 255, 255, 0.92); }

  /* Country panel */
  .v-country { padding: 12px 8px 8px; }
  .v-country__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 8px 12px;
  }
  .v-country__head-label {
    font-size: 14px; color: rgba(255,255,255,0.78);
    letter-spacing: 0; text-transform: none;
  }
  .v-country__head-value {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; color: #fff; font-weight: 500;
  }
  .v-country__head-flag,
  .v-country__flag {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    flex: 0 0 auto;
  }
  .v-country__head-flag .v-flag,
  .v-country__flag .v-flag,
  .v-header__flag-wrap .v-flag {
    width: 100%; height: 100%; object-fit: cover;
    transform: scale(1.55);
  }
  .v-country__label {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    padding: 8px 8px 6px;
  }
  .v-country__list { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
  .v-country__list--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 6px;
    padding-bottom: 4px;
    max-height: 64vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .v-country__row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #fff;
    font-family: inherit; font-size: 14px; font-weight: 500;
    letter-spacing: 0; text-align: left; text-transform: none;
    cursor: pointer; width: 100%;
    transition: background-color var(--motion-fast) ease-out, border-color var(--motion-fast) ease-out;
  }
  .v-country__row-label {
    display: flex; flex-direction: column; gap: 1px;
    min-width: 0; flex: 1 1 auto;
  }
  .v-country__row-label > span:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .v-country__row-ccy {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.06em;
  }@media (hover: hover){
  .v-country__row:hover { background: rgba(255,255,255,0.10); }}
  .v-country__row.is-selected {
    border-color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.06);
  }
  .v-country__row.is-loading {
    background: rgba(255,255,255,0.10);
    cursor: progress;
  }
  .v-country__row.is-loading::after {
    content: '';
    margin-left: auto;
    width: 14px; height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff;
    animation: v-spin 0.7s linear infinite;
  }
  @keyframes v-spin { to { transform: rotate(360deg); } }

  /* Hamburger ↔ ✕ morph */
  [data-toggle-menu] .v-header__icon--close { display: none !important; }
  [data-toggle-menu] .v-header__icon--menu  { display: block !important; }
  .v-header.is-menu-open [data-toggle-menu] .v-header__icon--menu  { display: none  !important; }
  .v-header.is-menu-open [data-toggle-menu] .v-header__icon--close { display: block !important; }

  /* Country trigger flag (replaces icon SVG inside the icon-btn shell) */
  .v-header__flag-wrap {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,0.10);
  }
  /* Country trigger is now a regular 24×24 globe icon-btn — no pill, no
     chevron — per Figma 172:570. The override block from the old flag-
     pill design is no longer needed; defaults from `.v-header__icon-btn`
     above apply directly. */

  /* Icon buttons — 24×24 white Lucide strokes per Figma. No fill, no
     border, transparent background. The 24-px hit area equals the visible
     icon size to match the Figma layout (use the row's 16-px gap as the
     touch breathing room). */
  .v-header__icon-btn {
    width: 24px; height: 24px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
    transition: opacity var(--motion-fast) ease-out, transform var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-header__icon-btn:hover { background: transparent; color: #fff; opacity: 0.7; }}
  .v-header__icon-btn:active { transform: scale(0.94); }
  .v-header__icon { display: block; width: 24px; height: 24px; }

  /* Wordmark — 88.889 × 16 in a 24-tall slot, white. Fixed width so the
     auto grid column can't expand to the SVG's intrinsic 1000-px viewbox. */
  .v-header__brand {
    width: auto;
    flex-shrink: 0;
    height: 24px;
    padding: 0;
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none;
  }@media (hover: hover){
  .v-header__brand:hover { opacity: 0.7; }}
  .v-header__logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 88.889px;
  }
  .v-header__logo svg { display: block; width: 100%; height: auto; color: currentColor; }

  .v-header__cart-count {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 16px; height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e02929;
    color: #fff;
    font-size: 10px;
    letter-spacing: 0;
    font-weight: 600;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; border: 0;
  }
  .v-header__cart-count[hidden] { display: none; }
  .v-header__search-form { min-width: 0; }
  .v-header__search-form input {
    width: 100%; height: 40px;
    border: 0; outline: none;
    background: transparent;
    font-family: inherit;
    font-size: var(--type-14);
    color: #fff;
    padding: 0 4px;
  }
  .v-header__search-form input::placeholder { color: rgba(255, 255, 255, 0.58); }
  .v-header__search-form input::-webkit-search-cancel-button,
  .v-header__search-form input::-webkit-search-decoration {
    -webkit-appearance: none; appearance: none; display: none;
  }

  .v-search-drop {
    position: fixed; inset: 0;
    background: rgba(255, 255, 255, 0.45);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    overflow-y: auto;
    overscroll-behavior: contain;
    z-index: 59;
    animation: v-search-drop-in var(--motion-fast) ease-out;
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }
  .v-search-drop[hidden] { display: none; }
  @keyframes v-search-drop-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .v-search-drop__inner {
    max-width: min(1120px, calc(100vw - 24px));
    margin: 0 auto;
    padding: var(--sp-5) 0 var(--sp-9);
  }
  .v-search-drop__hint { padding: var(--sp-5) 0; margin: 0; font-size: var(--type-12); }
  .v-search-drop__collections {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--sp-5);
  }
  .v-search-drop__chip {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--line);
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink);
    text-decoration: none;
  }@media (hover: hover){
  .v-search-drop__chip:hover { border-color: var(--ink); }}
  .v-search-drop__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 56px 12px;
  }
  .v-search-drop__more {
    margin-top: var(--sp-7);
    display: inline-block;
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    border-bottom: 1px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
  }

  /* Search drop sits behind the bottom deck on non-PDP pages — bottom
     padding keeps results scrollable above the pill. */
  @media (max-width: 768px) {
    .v-header {
      --nav-bottom-gap: 20px;
    }
    .v-header__inner {
      grid-column: 1 / -1;
      margin-bottom: 20px;
    }
    .v-search-drop { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
    .v-search-drop__inner { padding: var(--sp-4) 8px; }
    .v-search-drop__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 8px; }
    .v-search-drop__chip { padding: 6px 10px; font-size: 10px; }

    /* Old vertical-deck artifacts — never render on mobile. */
    .v-header__brand-mark,
    .v-header__deck-chevron,
    .v-header__panel-close { display: none !important; }

    /* Mobile Nav Deck icons → 20 × 20 by default. Globe + search read
       cleaner small. Hamburger and cart get a +2 bump (22 × 22) since
       they're the primary actions and Figma calls for a slightly heavier
       glyph on those. */
    .v-header__icon-btn,
    .v-header__icon { width: 20px; height: 20px; }

    [data-toggle-menu],
    [data-toggle-menu] .v-header__icon,
    .v-header__cart,
    .v-header__cart .v-header__icon { width: 22px; height: 22px; }

    /* Country trigger flag mirrors the icon size on mobile so the globe
       glyph matches the rest of the deck. */
    .v-header__flag-wrap { width: 20px; height: 20px; }

    /* Menu + Country panels: items have ZERO horizontal padding on
       mobile because the deck wrapper already provides the 20-px
       inset (`.v-header__deck { padding: 12px 20px }`). Stacking 20-px
       panel padding on top of that doubled the inset to 40 px and
       pushed labels off-center inside the glass. With items flush left
       at 0, the icon glyph aligns with the deck icons in the row above. */
    .v-header__menu { padding: 10px 0 8px; }
    .v-header__menu-link { padding: 14px 0; }

    .v-country { padding: 12px 0 8px; }
    .v-country__head { padding: 4px 0 12px; }
    .v-country__label { padding: 8px 0 6px; }
    .v-country__row { padding: 12px 0; }
    /* Selected pill gets a 12-px inset on each side so its hairline
       border floats inside the panel rather than kissing the rounded
       deck edge — visual hierarchy for the active region. */
    .v-country__row.is-selected { padding: 12px 12px; }

    /* ── PDP-specific: deck mirrors to the TOP and hides on velocity-
       based scroll-down (driven by snippets/pdp-sheet.liquid). ── */
    body.is-pdp .v-header {
      --nav-bottom-gap: 0px;
      padding: env(safe-area-inset-top, 0px) 0 0;
      top: 0;
      bottom: auto;
    }
    body.is-pdp .v-header__inner {
      align-self: start;
      margin-top: 20px;
      margin-bottom: 0;
    }
    body.is-pdp .v-header__row.v-header__row--default { order: 0; }
    body.is-pdp #v-header-menu                        { order: 1; }
    body.is-pdp #v-header-country                     { order: 2; }
    body.is-pdp[data-pdp-deck="hidden"] .v-header__deck {
      /* Opacity-only fade — translateY animation was causing iOS
         Safari to drop `viewport-fit=cover` on the body once the
         transformed glass element re-entered the viewport. The
         page would stop extending behind the status bar after the
         first scroll-up. Pure opacity has no transform side-effect. */
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--motion-fast, 180ms) ease-out;
    }
  }

  /* ── Hamburger menu drawer ──
     Mirrors the cart drawer's `<dialog class="v-drawer v-bsheet">`
     pattern: native `<dialog>`, `.v-bsheet` provides mobile
     bottom-sheet treatment (rounded top, drag handle, slide-up,
     ::backdrop). Desktop renders as a 480-px left-slide drawer
     (mirror of the cart's right-slide). ── */
  .v-menu-drawer {
    padding: 0;
    border: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    width: min(480px, 100%);
    height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    position: fixed;
    inset: 0 auto 0 0;
    overflow: hidden;
  }
  .v-menu-drawer::backdrop { background: rgba(0, 0, 0, 0.4); }
  .v-menu-drawer[open] {
    animation: v-menu-slide-right var(--motion-base, 280ms) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  }
  @keyframes v-menu-slide-right {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }

  /* Mobile (≤768 px): drawer becomes a bottom sheet — anchored to
     the bottom, full width, auto-height up to 88 dvh. The shared
     `.v-bsheet` class handles rounded top corners, drag handle,
     slide-up animation, and matches the cart drawer's visual
     language exactly. */
  @media (max-width: 768px) {
    .v-menu-drawer {
      inset: auto 0 0 0;
      width: 100%;
      height: auto;
      max-height: 88dvh;
    }
    .v-menu-drawer .v-menu-panel__head {
      /* Drag-handle clearance — same offset the cart drawer uses. */
      padding-top: calc(var(--sp-5) + 12px);
    }
    .v-menu-drawer .v-menu-panel__tabs {
      /* Honour iOS home-indicator safe-area at the bottom of the sheet. */
      padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom));
    }
  }

  /* Inner layout — column flex so tabs stick to the bottom on
     desktop. Mirrors cart's `.v-drawer__inner`. */
  .v-menu-panel__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  /* Head — exactly mirrors `.v-drawer__head` so heading typography
     + close button match the cart bottom sheet 1:1. */
  .v-menu-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    flex: 0 0 auto;
  }
  .v-menu-panel__title {
    font-size: var(--type-20);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    margin: 0;
  }
  .v-menu-panel__close {
    /* Uses the shared `.v-close-btn` class for visuals — this
       block is just a placeholder so historical references still
       resolve. */
  }

  /* Nav body — vertical stack of the Home pill + 3-card grid.
     `flex: 1 1 auto` lets it grow so the bottom tabs always sit
     at the bottom of the sheet on desktop. */
  .v-menu-panel__nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 var(--sp-5);
  }

  /* Home pill — full-width #F2F2F2 pill. Icon + label sit
     LEFT-aligned (flex-start) per Figma node `213:1442` — the
     outer pill is `flex items-center` with no horizontal justify,
     so children sit at flex-start with 24 px left padding. */
  .v-menu-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 12px 24px;
    background: #F2F2F2;
    border-radius: 16px;
    color: var(--ink, #000);
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    transition: background-color var(--motion-fast, 180ms) ease-out;
  }@media (hover: hover){
  .v-menu-row:hover { background: #ECECEC; }}
  .v-menu-row__icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: block;
  }
  .v-menu-row__icon > img { width: 32px; height: 32px; display: block; }

  /* 3-card grid — Shop All / Tees / Shirts. Equal width, 135 px
     tall, 12 px gap. Per Figma node `213:1447`. */
  .v-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .v-menu-card {
    height: 135px;
    background: #F2F2F2;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink, #000);
    transition: background-color var(--motion-fast, 180ms) ease-out;
  }@media (hover: hover){
  .v-menu-card:hover { background: #ECECEC; }}
  /* Plain passthrough — the SVG asset already contains the
     gradient circle and the symbol, so the wrap span just sizes
     to 56 px and renders the asset as-is. No CSS gradient, no
     CSS border-radius. */
  .v-menu-card__icon-wrap {
    width: 56px;
    height: 56px;
    display: block;
  }
  .v-menu-card__icon-wrap > img { width: 56px; height: 56px; display: block; }
  .v-menu-card__label {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.02em;
    color: #000;
  }

  /* Accordion — uses native `<details>` for accessibility, with a
     chevron flip on `[open]`. Body is the indented sublink list. */
  .v-menu-panel__accordion { border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.06)); }
  .v-menu-panel__accordion-summary {
    list-style: none;
    cursor: pointer;
    border-bottom: 0;
  }
  .v-menu-panel__accordion-summary::-webkit-details-marker { display: none; }
  .v-menu-panel__chev {
    transition: transform var(--motion-fast, 180ms) ease-out;
    color: var(--ink-mute, rgba(0, 0, 0, 0.5));
    flex: 0 0 auto;
  }
  .v-menu-panel__accordion[open] .v-menu-panel__chev { transform: rotate(180deg); }
  .v-menu-panel__accordion-body {
    display: flex;
    flex-direction: column;
    padding: 4px 0 8px;
  }
  .v-menu-panel__sublink {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0 12px 34px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    color: var(--ink, #000);
    text-decoration: none;
  }@media (hover: hover){
  .v-menu-panel__sublink:hover { opacity: 0.7; }}
  .v-menu-panel__sublink .v-menu-panel__icon { opacity: 0.65; }

  /* Bottom tabs — two equal-width #F2F2F2 pills, 24 px radius,
     12 px gap, anchored to the bottom of the panel on both
     viewports. Padding matches the Figma node `213:1482`: 20 px
     left/right, 32 px from the bottom edge of the sheet. The
     mobile rule above adds `env(safe-area-inset-bottom)` so the
     buttons sit above the iOS home indicator. */
  .v-menu-panel__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: var(--sp-4) 20px 32px;
    background: var(--paper, #fff);
    flex: 0 0 auto;
  }
  .v-menu-panel__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 24px;
    border-radius: 24px;
    border: 0;
    background: #F2F2F2;
    color: var(--ink, #000);
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    transition: background-color var(--motion-fast, 180ms) ease-out;
  }@media (hover: hover){
  .v-menu-panel__tab:hover { background: #ECECEC; }}
  .v-menu-panel__tab .v-menu-icon { width: 20px; height: 20px; flex: 0 0 20px; }

  /* Hide the in-deck menu panel since the slide-out replaces it.
     Country panel stays in the deck (still expands the deck for
     the region picker). */
  body .shopify-section .v-header__panel#v-header-menu { display: none; }
/* END_SECTION:header */

/* START_SECTION:hello-world (INDEX:15) */
.v-hero {
    position: relative;
    width: 100%;
    min-height: 88vh;
    background: #0A0A0A;
    color: #F2F2F2;
    overflow: hidden;
    isolation: isolate;
  }

  .v-hero__track {
    display: flex;
    width: 100%;
    height: 88vh;
    min-height: 88vh;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .v-hero__track::-webkit-scrollbar { display: none; }

  .v-hero__slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    min-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 24px;
    overflow: hidden;
    isolation: isolate;
  }

  .v-hero__slide--logo  { background: #0A0A0A; }
  .v-hero__slide--word  { background: #0E0E0E; }
  .v-hero__slide--drop  { background: #080808; }
  .v-hero__slide--stamp { background: #111111; }

  .v-hero__grain {
    position: absolute;
    inset: -10%;
    background-repeat: repeat;
    background-size: 240px 240px;
    opacity: 0.35;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
    animation: v-grain-drift 8s steps(4) infinite;
  }
  @keyframes v-grain-drift {
    0%   { transform: translate(0, 0); }
    25%  { transform: translate(-4%, -2%); }
    50%  { transform: translate(3%, 4%); }
    75%  { transform: translate(-2%, 3%); }
    100% { transform: translate(0, 0); }
  }

  .v-hero__vignette {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.6) 100%),
      linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 25%, transparent 75%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
    z-index: 0;
  }

  .v-hero__top,
  .v-hero__bottom {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    gap: 16px;
  }

  .v-hero__tick {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 242, 242, 0.75);
    font-weight: 600;
    white-space: nowrap;
  }

  .v-hero__center {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    gap: clamp(16px, 3vw, 40px);
    padding: 32px 0;
    text-align: center;
  }
  .v-hero__center--left { place-items: start; text-align: left; padding: 32px 6vw; }
  .v-hero__center--stack { gap: clamp(8px, 1.5vw, 20px); }
  .v-hero__center--split {
    grid-template-columns: minmax(160px, 300px) 1fr;
    place-items: center;
    gap: clamp(24px, 5vw, 80px);
    padding: 32px 6vw;
    text-align: left;
  }

  /* --- Slide 1: vertical logo --- */
  .v-hero__mark { width: 100%; display: grid; place-items: center; }
  .v-hero__mark svg {
    display: block;
    width: clamp(240px, 42vw, 540px);
    height: auto;
    color: #F2F2F2;
    filter: drop-shadow(0 0 30px rgba(255,255,255,0.08));
  }

  /* --- Slide 2: giant wordmark --- */
  .v-hero__wordmark {
    margin: 0;
    display: flex;
    flex-direction: column;
    line-height: 0.88;
    letter-spacing: -0.04em;
    font-size: clamp(72px, 14vw, 220px);
    font-weight: 700;
    color: #F2F2F2;
  }
  .v-hero__wordmark-thin {
    font-weight: 200;
    color: rgba(242, 242, 242, 0.65);
  }
  .v-hero__sub {
    margin: clamp(16px, 2vw, 28px) 0 0 0;
    font-size: clamp(13px, 1.1vw, 16px);
    line-height: 1.55;
    max-width: 46ch;
    color: rgba(242, 242, 242, 0.82);
  }

  /* --- Slide 3: huge SS26 --- */
  .v-hero__kicker {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(242, 242, 242, 0.65);
    font-weight: 600;
  }
  .v-hero__display {
    margin: 0;
    display: flex;
    align-items: baseline;
    line-height: 0.82;
    letter-spacing: -0.05em;
    font-weight: 600;
    color: #F2F2F2;
  }
  .v-hero__display-line {
    font-size: clamp(140px, 30vw, 480px);
  }
  .v-hero__display-line--alt {
    font-weight: 200;
    color: rgba(242, 242, 242, 0.6);
    margin-left: 0.05em;
  }

  /* --- Slide 4: stamp + manifesto --- */
  .v-hero__stamp { display: grid; place-items: center; }
  .v-hero__stamp svg {
    display: block;
    width: clamp(160px, 20vw, 280px);
    height: auto;
    color: #F2F2F2;
    opacity: 0.92;
  }
  .v-hero__manifesto { max-width: 42ch; display: flex; flex-direction: column; gap: 12px; }
  .v-hero__manifesto-text {
    margin: 0;
    font-size: clamp(16px, 1.8vw, 26px);
    line-height: 1.35;
    color: #F2F2F2;
    font-weight: 400;
  }

  /* --- Dots --- */
  .v-hero__dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(8px);
    border-radius: 9999px;
  }
  .v-hero__dot {
    width: 24px;
    height: 2px;
    border-radius: 2px;
    border: 0;
    background: rgba(242, 242, 242, 0.35);
    padding: 0;
    cursor: pointer;
    transition: background 200ms ease-out, width 200ms ease-out;
  }
  .v-hero__dot.is-active { background: #F2F2F2; width: 32px; }@media (hover: hover){
  .v-hero__dot:hover { background: rgba(242, 242, 242, 0.65); }}

  /* --- Mobile: 3/4 aspect, tighter padding --- */
  @media (max-width: 768px) {
    .v-hero { min-height: 0; }
    .v-hero__track {
      aspect-ratio: 3 / 4;
      height: auto;
      min-height: 0;
    }
    .v-hero__slide { padding: 14px 10px; }
    .v-hero__top, .v-hero__bottom { padding: 4px 6px; }
    .v-hero__tick { font-size: 9px; letter-spacing: 0.14em; }
    .v-hero__mark svg { width: min(68vw, 260px); }
    .v-hero__wordmark { font-size: clamp(48px, 16vw, 84px); }
    .v-hero__display-line { font-size: clamp(120px, 42vw, 240px); }
    .v-hero__sub { font-size: 11px; max-width: 28ch; }
    .v-hero__manifesto-text { font-size: 14px; line-height: 1.45; }
    .v-hero__center--left { padding: 24px 14px; }
    .v-hero__center--split {
      grid-template-columns: 1fr;
      gap: 20px;
      place-items: center;
      text-align: center;
      padding: 24px 14px;
    }
    .v-hero__stamp svg { width: clamp(120px, 40vw, 180px); }
    .v-hero__manifesto { max-width: 32ch; align-items: center; text-align: center; }
    .v-hero__dots { bottom: 12px; gap: 6px; }
    .v-hero__dot { width: 18px; }
    .v-hero__dot.is-active { width: 26px; }
  }

  @media (max-width: 400px) {
    .v-hero__top .v-hero__tick:last-child,
    .v-hero__bottom .v-hero__tick:first-child { display: none; }
  }
/* END_SECTION:hello-world */

/* START_SECTION:hero-banner-carousel (INDEX:17) */
/* ── Hero banner carousel ─────────────────────────────────────
     One section, one Liquid file, one component. Renders edge-to-
     edge on every viewport. Each slide is a 100vw scroll-snap
     panel; on desktop the wide image fills the viewport, on mobile
     the tall image fills it. JS handles autoplay + dot indicator. */
  .v-hero-banner {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
  }

  /* The top fade-to-black scrim that used to live here is GONE (Aditya,
     2026-09-13: "remove this useless gradient"). It had to be removed HERE
     as well as in sections/hero-banner.liquid, because Shopify concatenates
     every section's stylesheet into one theme-wide sheet whether or not the
     section renders. This file is currently unused, yet its rules were still
     served and the scrim rule still matched the static hero's root and
     painted the band. Unused CSS is not inert when two sections share a
     class name. */

  /* The wrapper-level pull-up lives in assets/critical.css —
     section wrapper class is `.v-hero-banner-section` (set via the
     {% schema %} `class` field) which is the body's flex child;
     critical.css uses max(env(safe-area-inset-top, 20px), 20px) so
     the rule fires even when env() reports 0. */
  .v-hero-banner__track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .v-hero-banner__track::-webkit-scrollbar { display: none; }

  .v-hero-banner__slide {
    flex: 0 0 100%;
    width: 100%;
    /* Aspect ratio is driven by the section's --bc-*-aspect custom
       props, set inline from the first block's image dimensions. This
       reserves the correct slot height on FIRST PAINT — before any
       <picture> source resolves — so the banner doesn't initially
       render at the desktop image's 16:10 ratio (246 px tall on a
       393-wide phone) and then jump to the mobile image's 2:3 ratio
       (590 px tall) once the source loads. With the right slot from
       frame 1, the section sits at top:0 behind the iOS status bar
       at full height, never below it. */
    aspect-ratio: var(--bc-desktop-aspect, 1.6);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    line-height: 0;
    /* Kill the global `a:hover { opacity: 0.6 }` darkening from
       critical.css and iOS's translucent tap-highlight overlay so
       the banner image is never visually dimmed on hover or tap. */
    -webkit-tap-highlight-color: transparent;
  }
  .v-hero-banner__slide, .v-hero-banner__slide:focus, .v-hero-banner__slide:active{
    opacity: 1;
  }@media (hover: hover){.v-hero-banner__slide:hover{
    opacity: 1;
  }}
  .v-hero-banner__picture {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
  }
  .v-hero-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    user-select: none;
    -webkit-user-drag: none;
  }
  .v-hero-banner__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.55);
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 0 24px;
  }

  /* Sliding-thumb progress indicator — same visual language as
     the product card image carousel (`.v-card__progress`). The
     track is a low-contrast pill the width of the banner minus a
     32-px gutter; the white thumb is sized to `100/N %` (set in
     JS via inline style) and translates as the user scrolls. */
  .v-hero-banner__dots {
    position: absolute;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.32);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .v-hero-banner__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: width 0.28s ease, background-color 0.28s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .v-hero-banner__dot.is-active {
    width: 22px;
    background: #fff;
  }
  .v-hero-banner__dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  /* Desktop hover chevrons — dark-glass pill, same component
     family as `.v-card__nav` and the refine FAB. Hidden on touch
     devices via `(hover: hover)`. Slightly larger than the card
     arrows because the banner is bigger. */
  .v-hero-banner__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.42), rgba(10, 10, 10, 0.24));
    color: #fff;
    border: 0;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
    opacity: 0;
    transition: opacity 200ms ease-out, transform 200ms ease-out, background 200ms ease-out;
    z-index: 6;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  .v-hero-banner__nav--prev { left: 16px; }
  .v-hero-banner__nav--next { right: 16px; }
  .v-hero-banner__nav svg { display: block; }

  {%- comment -%} Arrows on EVERY device (Aditya, 2026-09-26 asked for arrow
    navigation on desktop AND mobile). They used to be desktop-only behind
    `(hover: hover)`; on touch they now sit at a constant low opacity instead
    of appearing on hover, which no touch device can express. {%- endcomment -%}
  .v-hero-banner__nav { display: inline-flex; opacity: 0.72; }
  @media (max-width: 768px) {
    .v-hero-banner__nav { width: 34px; height: 34px; }
    .v-hero-banner__nav--prev { left: 8px; }
    .v-hero-banner__nav--next { right: 8px; }
  }

  @media (hover: hover) {
    .v-hero-banner__nav { opacity: 0; }@media (hover: hover){
    .v-hero-banner:hover .v-hero-banner__nav { opacity: 1; }}@media (hover: hover){
    .v-hero-banner__nav:hover {
      background: linear-gradient(180deg, rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.35));
      transform: translateY(-50%) scale(1.05);
      opacity: 1;
    }}
  }

  @media (max-width: 768px) {
    .v-hero-banner__slide {
      aspect-ratio: var(--bc-mobile-aspect, 0.6667);
    }
    .v-hero-banner__dots { bottom: 14px; }
  }

  /* Reduced-motion users get no autoplay (handled in JS) and a
     non-animated scroll. */
  @media (prefers-reduced-motion: reduce) {
    .v-hero-banner__track { scroll-behavior: auto; }
  }
/* END_SECTION:hero-banner-carousel */

/* START_SECTION:hero-banner (INDEX:18) */
/* ── Hero banner - single static image, edge to edge ──────────── */
  .v-hero-banner {
    position: relative;
    width: 100%;
    background: #000;
    overflow: hidden;
  }

  .v-hero-banner__frame {
    display: block;
    position: relative;
    width: 100%;
    /* Ratio comes from the uploaded image via the inline custom
       property set above; the literal is only the first-paint fallback
       when no image is configured. */
    aspect-ratio: var(--bc-desktop-aspect, 1.7778);
    line-height: 0;
    text-decoration: none;
    color: inherit;
    /* Kill the global `a:hover { opacity: 0.6 }` from critical.css and
       iOS's tap-highlight overlay so the banner is never dimmed. */
    -webkit-tap-highlight-color: transparent;
  }
  .v-hero-banner__frame,
  .v-hero-banner__frame:focus,
  .v-hero-banner__frame:active { opacity: 1; }
  @media (hover: hover) {
    .v-hero-banner__frame:hover { opacity: 1; }
  }

  .v-hero-banner__picture {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
  }

  .v-hero-banner__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    user-select: none;
    -webkit-user-drag: none;
  }

  @media (max-width: 768px) {
    .v-hero-banner__frame {
      aspect-ratio: var(--bc-mobile-aspect, 0.5625);
    }
  }
/* END_SECTION:hero-banner */

/* START_SECTION:home-brand-block (INDEX:19) */
.v-home-brand {
    max-width: var(--pdp-content-width, 1280px);
    margin: 0 auto;
    padding: var(--sp-8) var(--page-margin, 16px);
  }
  .v-home-brand__section + .v-home-brand__section {
    margin-top: var(--sp-8);
  }
  .v-home-brand__title {
    font-size: var(--type-20);
    font-weight: 600;
    letter-spacing: var(--track-tight);
    margin: 0 0 var(--sp-5);
    color: var(--ink);
  }
  .v-home-brand__coll-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--sp-5);
  }
  .v-home-brand__coll-card {
    display: block;
    color: var(--ink);
    text-decoration: none;
  }
  .v-home-brand__coll-img {
    aspect-ratio: 4/5;
    overflow: hidden;
    background: var(--paper-2);
    margin: 0 0 var(--sp-3);
  }
  .v-home-brand__coll-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .v-home-brand__coll-name {
    font-size: var(--type-16);
    font-weight: 600;
    margin: 0 0 var(--sp-1);
  }
  .v-home-brand__coll-desc {
    font-size: var(--type-13);
    color: var(--ink-mute);
    margin: 0;
    line-height: 1.5;
  }
  .v-home-brand__about-body p {
    font-size: var(--type-14);
    line-height: 1.7;
    color: var(--ink-mute);
    margin: 0 0 var(--sp-3);
    max-width: 720px;
  }
  .v-home-brand__about-body p:last-child { margin-bottom: 0; }
  .v-home-brand__about-link {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  @media (max-width: 640px) {
    .v-home-brand { padding: var(--sp-6) var(--page-margin, 16px); }
    .v-home-brand__coll-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
    .v-home-brand__title { font-size: var(--type-18); }
    .v-home-brand__coll-name { font-size: var(--type-14); }
    .v-home-brand__coll-desc { font-size: var(--type-12); }
  }
/* END_SECTION:home-brand-block */

/* START_SECTION:page (INDEX:20) */
.v-page { display: grid; grid-template-columns: var(--content-grid); }
  .v-page > * { grid-column: 2; }

  .v-page__header { padding: var(--sp-8) 0 var(--sp-5); max-width: 800px; }
  .v-page__title {
    font-size: clamp(var(--type-32), 6vw, var(--type-80));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    margin-top: var(--sp-2);
  }

  .v-page__body {
    padding: var(--sp-6) 0 var(--sp-10);
    max-width: 68ch;
    font-size: var(--type-16);
    line-height: var(--leading-body);
    color: var(--ink);
  }
  .v-page__body h2 { font-size: var(--type-24); margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
  .v-page__body h3 { font-size: var(--type-20); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
  .v-page__body p { margin-bottom: var(--sp-4); }
  .v-page__body ul, .v-page__body ol { margin-bottom: var(--sp-4); padding-left: var(--sp-5); }
  .v-page__body li { margin-bottom: var(--sp-2); }
  .v-page__body a { text-decoration: underline; }
  .v-page__body img { margin: var(--sp-5) 0; }
/* END_SECTION:page */

/* START_SECTION:product (INDEX:22) */
.v-pdp {
    --pdp-content-width: min(1440px, calc(100vw - (var(--page-margin) * 2)));
    --pdp-media-width: clamp(480px, 62vh, 720px);

    display: grid;
    grid-template-columns:
      minmax(var(--page-margin), 1fr)
      var(--pdp-content-width)
      minmax(var(--page-margin), 1fr);
    padding: 0 0 var(--sp-10);
  }
  .v-pdp__inner {
    grid-column: 2;
    display: grid;
    grid-template-columns:
      minmax(260px, 1fr)
      minmax(420px, var(--pdp-media-width))
      minmax(280px, 1fr);
    gap: clamp(24px, 3vw, 56px);
    align-items: start;
  }

  /* --- LEFT column: sticky info (3D + title + description) ---
     Content stays left-aligned while the panel sits near the hero's visual center. */
  .v-pdp__left {
    position: sticky;
    top: calc(50vh + var(--sp-6));
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: var(--sp-4);
    max-height: calc(100vh - var(--sp-7));
    overflow-y: auto;
    scrollbar-width: none;
    transform: translateY(-50%);
    justify-self: end;
    width: min(100%, 380px);
    padding-bottom: 200px;
  }
  .v-pdp__left .v-pdp__head { gap: var(--sp-2); }
  .v-pdp__left::-webkit-scrollbar { display: none; }

  .v-pdp__head {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    align-items: flex-start;
    width: 100%;
  }
  /* Font family + letter-spacing for `.v-pdp__vendor` come from `.font-jp`
     in critical.css - don't redeclare them here or the cascade will drop
     the WDXL family / 0.1em spacing. Only set what's surface-specific. */
  .v-pdp__vendor {
    font-size: var(--type-11);
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0;
    /* Renders as an `<a>` so the user can jump to the matching
       collection. Strip the default underline and let the eyebrow keep
       its quiet typography; the underline appears on hover for affordance. */
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: color var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-pdp__vendor:hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
  }}
  .v-pdp__title {
    font-size: var(--type-24);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--track-tight);
    color: var(--ink);
    margin: 0;
  }
  .v-pdp__title-jp {
    font-size: var(--type-14);
    color: var(--ink-mute);
    letter-spacing: 0.02em;
    margin: 0;
  }

  .v-pdp__desc-shell {
    width: 100%;
    max-width: 280px;
  }

  /* Gender and category eyebrow. `.v-pdp__vendor` already carries the
     WDXL face and the muted tone; these add the separator and keep the
     link from picking up an underline it never had as a bare element. */
  .v-pdp__vendor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
  }
  /* 2em glyph, half the leading - see the twin rule in product-card.liquid:
     the halved line-height holds the inline box at 1em so this flex row
     keeps the height it had before the bullet grew. */
  .v-pdp__vendor-dot { font-size: 2em; line-height: 0.5; opacity: 0.55; }
  .v-pdp__vendor-link { color: inherit; text-decoration: none; }
  /* The base rule underlines `.v-pdp__vendor` on hover, from when the whole
     eyebrow WAS the link. Only the category half is a link now, so the
     underline moves onto it and off the gender. */
  @media (hover: hover) {
    .v-pdp__vendor:hover { text-decoration: none; }
    .v-pdp__vendor-link:hover { text-decoration: underline; text-underline-offset: 2px; }
  }

  /* ── Desktop simplifications ─────────────────────────────────────────
     The right-hand column already carries the buying information on a wide
     screen, and there is room to simply show the description, so two m-web
     affordances are dropped rather than scaled up:

       - the spec grid, which repeats what the column states;
       - the expand/collapse, which exists to save vertical space that a
         desktop layout is not short of.

     The toggle is hidden AND the clamp is lifted. Hiding the button alone
     would have left the copy permanently truncated with no way to open it,
     which is the worst of both. */
  @media (min-width: 990px) {
    /* `.v-pdp__specs` is hidden in `snippets/pdp-specs.liquid` instead: its
       own `display: grid` compiles later than anything here and would win,
       media query or not. */
    .v-pdp__desc-shell .v-pdp__desc-toggle { display: none; }
    .v-pdp__desc-shell .v-pdp__desc,
    .v-pdp__desc-shell .v-pdp__desc[data-tz-clamp='closed'],
    .v-pdp__desc-shell .v-pdp__desc[data-pdp-desc-body] {
      display: block;
      -webkit-line-clamp: none;
      overflow: visible;
      max-height: none;
    }
  }

  /* ── Sheet content, repeated under the description on m-web ──────────
     The accordions live in the glass sheet, where they are white-on-dark.
     Down here they sit on the description's grey field, so the colours are
     restated for THIS context rather than inherited from a sheet they are
     no longer inside. Desktop keeps them in the right-hand column only. */
  .v-pdp__desc-extras {
    margin-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    color: #1a1a1a;
  }
  .v-pdp__desc-extras .v-pdp__acc {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .v-pdp__desc-extras .v-pdp__acc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    cursor: pointer;
    list-style: none;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #1a1a1a;
  }
  .v-pdp__desc-extras .v-pdp__acc-summary::-webkit-details-marker { display: none; }
  .v-pdp__desc-extras .v-pdp__acc-label { display: inline-flex; align-items: center; gap: 10px; }
  /* `.v-pdp__acc-lucide { display: none }` further down hides these icons
     everywhere outside the glass sheet, and setting a width on them does
     not undo that - which is why the accordions down here had no icons at
     all. `display: block` is the declaration that was missing. */
  .v-pdp__desc-extras .v-pdp__acc-lucide {
    display: block;
    flex: none;
    width: 20px;
    height: 20px;
    max-width: none;
  }

  /* NOTHING here overrides `.v-pdp__acc-icon`. It is already a +/- built
     from two pseudo-element bars, with the vertical one collapsing on
     `[open]`, and that is exactly the control the glass sheet uses. The
     border-drawn chevron that used to sit here fought it: the bars kept
     rendering underneath, and the two together drew the mangled asterisk
     in Aditya's screenshot. The fix is to delete the override, not to
     restyle it. */
  .v-pdp__desc-extras .v-pdp__acc-body {
    padding: 0 0 16px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #666;
  }
  .v-pdp__desc-extras .v-pdp__acc-faq + .v-pdp__acc-faq { margin-top: 12px; }
  .v-pdp__desc-extras .v-pdp__acc-faq-q { margin: 0 0 2px; color: #1a1a1a; }
  .v-pdp__desc-extras .v-pdp__acc-body p { margin: 0; }

  /* The sheet already carries all of this on desktop. */
  @media (min-width: 990px) {
    .v-pdp__desc-extras { display: none; }
  }
  .v-pdp__desc {
    font-size: var(--type-13, 13px);
    line-height: var(--leading-body);
    color: var(--ink);
    text-align: left;
    width: 100%;
    position: relative;

    /* Collapsed state: clamp to 5 visual lines + fade the last line out.
       Expanded state (set via data-expanded on the shell) lifts the
       clamp and the fade. */
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }
  .v-pdp__desc-shell[data-expanded="true"] .v-pdp__desc {
    display: block;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    overflow: visible;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Merge all <p> blocks into one continuous flowing paragraph visually.
     The HTML still ships as multiple <p> tags so Google sees the
     original paragraph structure for SEO/AEO. */
  .v-pdp__desc p { display: inline; margin: 0; }
  .v-pdp__desc p + p::before { content: " "; }

  /* Toggle button: horizontal hairlines flanking a circular chevron.
     No text label - purely iconographic per spec. */
  .v-pdp__desc-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .v-pdp__desc-toggle-rule {
    flex: 1;
    height: 1px;
    background: var(--ink, currentColor);
    opacity: 0.18;
  }
  .v-pdp__desc-toggle-circle {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--ink, currentColor);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .v-pdp__desc-toggle:focus-visible {
    outline: none;
  }
  .v-pdp__desc-toggle-chevron {
    transition: transform 200ms ease;
    transform: translateY(0);
  }
  .v-pdp__desc-shell[data-expanded="true"] .v-pdp__desc-toggle-chevron {
    transform: rotate(180deg);
  }
  .v-pdp__sizing-note {
    font-size: var(--type-12);
    line-height: var(--leading-body);
    color: var(--ink-mute);
    margin: 0;
    max-width: 280px;
    text-align: left;
  }
  .v-pdp__sizing-note strong { color: var(--ink); font-weight: 600; }

  /* --- 3D model viewer --- */
  .v-pdp__model-stage {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1 / 1;
    background: transparent;
    margin: 0 0 var(--sp-3);
  }
  .v-pdp__model {
    width: 100%;
    height: 100%;
    background: transparent;
    --poster-color: transparent;
    --progress-bar-color: var(--ink);
    --progress-bar-height: 1px;
  }
  .v-pdp__model::part(default-progress-bar) { display: none; }
  .v-pdp__ar-btn {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    background: var(--ink);
    color: var(--paper);
    border: 0;
    font-family: inherit;
    font-size: 10px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    cursor: pointer;
    z-index: 2;
    transition: opacity var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-pdp__ar-btn:hover { opacity: 0.85; }}
  .v-pdp__ar-icon { font-size: var(--type-14); line-height: 1; }
  model-viewer:not([ar-status]) .v-pdp__ar-btn,
  model-viewer[ar-status="not-presenting"]:not([ar]) .v-pdp__ar-btn { display: none; }

  /* --- MIDDLE column: gallery (vertical scroll) --- */
  .v-pdp__media {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: var(--pdp-media-width);
    justify-self: center;
  }
  .v-pdp__media-item {
    margin: 0;
    background: var(--paper-2);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/5;
  }
  .v-pdp__media-item--placeholder {
    background:
      linear-gradient(135deg, transparent 49%, var(--line) 49%, var(--line) 51%, transparent 51%),
      var(--paper-2);
  }
  .v-pdp__img,
  .v-pdp__video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  /* --- Magnify cursor is a real DOM element (`.v-pdp__magnifier`),
     positioned via JS to follow the pointer. CSS `cursor: none` hides
     the OS pointer over zoomable images so only our glass pill shows.
     The pill itself is styled identically to `.v-pdp__model-magnify`
     (same backdrop-filter, border, gradient) for visual consistency. */
  .v-pdp__media-item--zoomable,
  .v-pdp__media-item--zoomable .v-pdp__img { cursor: none; }
  /* The glass is gone, per Aditya. This is now the site's standard circular
     control - the `.v-close-btn` recipe from critical.css: flat `--paper-2`
     fill, `--ink` glyph, no blur, no border, no drop shadow. 40px so it and
     the 3D corner button below are the same object in two places. */
  .v-pdp__magnifier {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--paper-2, #f1f1f1);
    border: 0;
    color: var(--ink, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 80;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    transition: opacity 0.18s ease-out;
    will-change: transform, opacity;
  }
  .v-pdp__magnifier.is-active { opacity: 1; }
  /* Hide any leftover icon overlay inside zoomable image cards. */
  .v-pdp__media-item--zoomable .v-pdp__zoom-icon { display: none; }

  /* 3D model corner button: the SAME control as the hover cursor above and
     as every other circular button on the site (`.v-close-btn`). It used to
     be the glass-deck treatment - dark translucent fill, white hairline
     border, 22px blur, drop shadow - which is exactly what Aditya asked to
     be taken off both. */
  .v-pdp__model-magnify {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: var(--paper-2, #f1f1f1);
    color: var(--ink, #000);
    border: 0 !important;
    padding: 0 !important;
    margin: 0;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 0 !important;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-pdp__model-magnify:hover {
    background: var(--line, #ddd);
    color: var(--ink, #000);
  }}

  /* --- Lightbox: full-viewport white overlay; light-mode controls --- */
  .v-lightbox {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--paper);
    color: var(--ink);
    /* Disable browser visual-viewport pinch on the chrome; we control
       pinch-zoom on the image element via JS so the buttons stay put. */
    touch-action: none;
    overscroll-behavior: contain;
  }
  .v-lightbox::backdrop { background: rgba(255, 255, 255, 0.96); }
  .v-lightbox[open] { animation: v-lightbox-fade var(--motion-fast) ease-out; }
  @keyframes v-lightbox-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* Lightbox close uses the shared `.v-close-btn` - only positioning here. */
  .v-lightbox__close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3;
    touch-action: manipulation;
  }

  /* Carousel nav arrows - same neutral pill styling, repositioned. */
  .v-lightbox__nav {
    appearance: none;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--paper-2, #f1f1f1);
    color: var(--ink);
    border: 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--motion-fast) ease-out;
  }
  .v-lightbox__nav--prev { left: 20px; }
  .v-lightbox__nav--next { right: 20px; }@media (hover: hover){
  .v-lightbox__nav:hover { background: var(--line, #ddd); color: var(--ink); }}
  .v-lightbox__nav[hidden] { display: none; }

  .v-lightbox__stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    /* Click-outside-to-close lives here; child <img> stops propagation. */
    cursor: zoom-out;
  }
  .v-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
    object-fit: contain;
    cursor: default;
    touch-action: pinch-zoom;
    transform-origin: center center;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
  }
  .v-lightbox__model {
    width: 100%;
    height: 100%;
    background: transparent;
    --poster-color: transparent;
    --progress-bar-color: var(--ink);
  }

  /* --- RIGHT column: sticky actions, left-aligned and visually centered --- */
  .v-pdp__right {
    position: sticky;
    top: calc(50vh + var(--sp-6));
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* 1rem, per Aditya. NOT `--sp-5` (1.5rem) any more, and deliberately a
       literal rather than `--sp-4`: this is the PDP column's own rhythm, and
       retuning a global step would move every other surface that uses it. */
    gap: 1rem;
    text-align: left;
    transform: translateY(-50%);
    justify-self: start;
    width: min(100%, 400px);
  }
  /* Match the form's internal gap to the parent's so price→sizes and
     sizes→ATC end up visually equidistant. */
  .v-pdp__right .v-pdp__form { gap: 1rem; }

  /* PDP price: wrapper-only. INR/num/yen typography owned by `.v-price*` in
     critical.css - this is the same component used on the product card. */
  .v-pdp__price {
    /* +4 per Aditya, on desktop as well as m-web. `--type-16` is 16px, so
       this is the same step the sheet's figure took. */
    font-size: 20px;
    margin: 0;
  }

  /* ── Desktop price wears the desktop TITLE's text style ──────────────
     Per Aditya: same weight, same negative tracking, same leading as
     `.v-pdp__title` (600 / --track-tight / --leading-tight), with the size
     alone stepping +2 to 22px rather than matching the title's 24.

     Scoped to `min-width: 901px` on purpose. `.v-price__cur` / `__num` /
     `__jp` carry their own family, weight and size from critical.css and
     from the sheet's rules, and those are correct on m-web - this must not
     leak down. The symbol and the figure are restated together because
     they are one run of text; sizing one and not the other reopens the
     gap between them. */
  @media (min-width: 901px) {
    /* The class-only `gap: 1rem` above does NOT win. `assets/critical.css`
       duplicates this column inside its own `@media (min-width: 901px)` as
       `body .shopify-section .v-pdp__right { gap: var(--sp-5) }` -
       specificity (0,2,2) against (0,1,0) - and that is what was actually
       painting the 24px. Restated at the same specificity; the critical
       block is inlined at the top of <head> and styles.css is linked well
       after it, so on a tie this rule is the later one and lands. Scoped to
       the same query so the m-web sheet, which sets its own `gap: 0`, is
       untouched. */
    body .shopify-section .v-pdp__right { gap: 1rem; }

    .v-pdp__price,
    .v-pdp__price .v-price__cur,
    .v-pdp__price .v-price__num {
      font-family: inherit;
      /* 24 now: +2 again on top of the last +2, so it lands on the desktop
         title's own size. Weight, tracking and leading were already the
         title's. */
      font-size: 24px;
      font-weight: 600;
      line-height: var(--leading-tight);
      letter-spacing: var(--track-tight);
    }
    /* One run of text, so no gap between the symbol and the figure - the
       only space is the font's own sidebearing. */
    .v-pdp__price .v-price__current { gap: 0; }
  }

  .v-pdp__form { display: flex; flex-direction: column; gap: var(--sp-4); }
  .v-pdp__option { display: flex; flex-direction: column; gap: var(--sp-2); }
  .v-pdp__option-values {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--sp-2);
    width: 100%;
  }
  .v-pdp__swatch {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    font-family: inherit;
    font-size: var(--type-12);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    cursor: pointer;
    color: var(--ink);
    transition: border-color var(--motion-fast) ease-out,
                background-color var(--motion-fast) ease-out,
                color var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-pdp__swatch:hover { border-color: var(--ink); }}
  .v-pdp__swatch.is-selected {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }

  /* --- Cart action ---
     Pre-add: a single full-width "Add to bag" pill. Post-add: a small
     56-px cart-link button slides in on the left, and the ATC pill turns
     into a faded "Added ✓" state on the right (informational, disabled).
     Switching variants resets `.is-added` so the user can add the new
     variant fresh - no qty carry-over. */
  .v-pdp__cart-action {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: 60px;
    overflow: hidden;
    gap: 0;
  }

  .v-pdp__atc {
    padding: 18px 24px;
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--type-14);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    min-height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: opacity var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-pdp__atc:hover { background: #1f1f1f; color: var(--paper); }}
  .v-pdp__atc[disabled] { background: var(--ink-mute); border-color: var(--ink-mute); cursor: not-allowed; }
  .v-pdp__atc--main {
    flex: 1 1 0;
    min-width: 0;
    transition:
      flex-grow var(--motion-base) cubic-bezier(0.32, 0.72, 0, 1),
      padding var(--motion-base) cubic-bezier(0.32, 0.72, 0, 1),
      background-color 220ms ease-out,
      color 220ms ease-out;
  }
  .v-pdp__atc [data-pdp-atc-label] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  /* "Visit bag" pill (right of split). Sits off the right edge in the
     pre-add state (`flex: 0 0 0; transform: translateX(24px)`). Post-add,
     `flex-grow` rises from 0 → 7 and translateX(24) → 0 so the pill
     glides in from the right and settles into its 70 % slot while the
     ATC pill shrinks to the 30 % "Added ✓" state on the left.
     The cart drawer opens via the existing [data-open-cart] handler. */
  .v-pdp__cart-link {
    flex: 0 0 0;
    width: 0;
    height: 60px;
    min-height: 60px;
    padding: 0;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    margin-left: 0;
    opacity: 0;
    transform: translateX(24px);
    pointer-events: none;
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--type-14);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    transition:
      flex-grow var(--motion-base) cubic-bezier(0.32, 0.72, 0, 1),
      width var(--motion-base) cubic-bezier(0.32, 0.72, 0, 1),
      padding var(--motion-base) cubic-bezier(0.32, 0.72, 0, 1),
      margin-left var(--motion-base) cubic-bezier(0.32, 0.72, 0, 1),
      transform var(--motion-base) cubic-bezier(0.32, 0.72, 0, 1),
      opacity 220ms ease-out;
  }@media (hover: hover){
  .v-pdp__cart-link:hover { background: #1f1f1f; color: var(--paper); }}
  .v-pdp__cart-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .v-pdp__cart-link-label { white-space: nowrap; }

  /* Post-add: 30 / 70 split - Added pill on the left @ 30 %, Visit cart
     button on the right @ 70 %, with 8-px gap between. Implemented via
     `flex: <grow> 1 0` so the percentages are of the available row width
     (gap excluded). */
  .v-pdp__cart-action.is-added .v-pdp__atc--main {
    flex: 3 1 0;
    min-width: 0;
    background: #F8F8F8;
    color: #808080;
    border-color: #F8F8F8;
    cursor: default;
  }@media (hover: hover){
  .v-pdp__cart-action.is-added .v-pdp__atc--main:hover {
    background: #F8F8F8;
    color: #808080;
  }}
  .v-pdp__cart-action.is-added .v-pdp__cart-link {
    flex: 7 1 0;
    width: auto;
    min-width: 0;
    padding: 0 24px;
    margin-left: 8px;
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Accordions: Size guide (button) / Shipping / Returns / Tenzen's promise --- */
  .v-pdp__accordions {
    display: flex;
    flex-direction: column;
  }
  .v-pdp__acc {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    width: 100%;
    padding: 0;
    text-transform: none;
    letter-spacing: 0;
  }
  /* Lines removed by request - accordions are flush, separated only by whitespace. */
  .v-pdp__acc--button { cursor: pointer; }
  /* Defeat the global button:hover (background:var(--ink); color:var(--paper))
     for the size-guide accordion - it's a button only because we need the click
     handler, not a visual button. */@media (hover: hover){
  .v-pdp__acc--button:hover { background: transparent; color: var(--ink); }}
  .v-pdp__acc-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-3) 0;
    cursor: pointer;
    font-size: var(--type-14);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    list-style: none;
  }
  .v-pdp__acc-summary::-webkit-details-marker { display: none; }
  .v-pdp__acc-icon {
    position: relative;
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
  }
  .v-pdp__acc-icon::before,
  .v-pdp__acc-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--ink);
    transition: transform var(--motion-fast) ease-out;
  }
  .v-pdp__acc-icon::before { width: 12px; height: 1px; }
  .v-pdp__acc-icon::after  { width: 1px; height: 12px; }
  .v-pdp__acc[open] .v-pdp__acc-icon::after { transform: scaleY(0); }
  .v-pdp__acc-body {
    padding: 0 0 var(--sp-3);
    font-size: var(--type-12);
    line-height: var(--leading-body);
    color: var(--ink-mute);
  }
  .v-pdp__acc-body p { margin: 0; }

  /* FAQ list inside Specs & care: stack Q&A pairs with breathing room.
     Each .v-pdp__acc-faq holds one <Q> + <A> pair; gap between pairs is
     var(--sp-4); gap between Q and A within a pair is tighter. */
  .v-pdp__acc-body--faq { display: flex; flex-direction: column; gap: var(--sp-4); }
  .v-pdp__acc-faq { display: flex; flex-direction: column; gap: var(--sp-1); }
  .v-pdp__acc-faq-q { color: var(--ink); }

  /* "View more" under a shortened accordion body. The shipping and return
     panels now carry three lines and hand the detail to the policy page, so
     the way through needs to read as a control rather than as a sentence that
     happens to be underlined. */
  .v-pdp__acc-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    margin-top: var(--sp-3, 12px);
    padding: 7px 14px;
    border: 1px solid currentColor;
    border-radius: 999px;
    color: var(--ink);
    font-size: 13px;
    line-height: 1;
    text-decoration: none;
    transition: background 160ms ease, color 160ms ease;
  }@media (hover: hover){
  .v-pdp__acc-more:hover { background: var(--ink); color: var(--paper, #fff); }}

  /* Inline link inside accordion body - e.g., "Read the full return policy →" */
  .v-pdp__acc-link {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
  }@media (hover: hover){
  .v-pdp__acc-link:hover { opacity: 0.7; }}

  /* --- Size chart dialog --- */
  .v-size-chart {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    margin: auto;
    max-width: 100%;
    width: min(880px, calc(100% - 48px));
    background: var(--paper);
    color: var(--ink);
    position: fixed;
    inset: 0;
    height: fit-content;
    max-height: calc(100dvh - 48px);
    overflow: hidden;
  }
  .v-size-chart::backdrop { background: rgba(0, 0, 0, 0.45); }
  .v-size-chart[open] { animation: v-size-chart-fade var(--motion-fast) var(--ease-out); }
  @keyframes v-size-chart-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .v-size-chart__grab { display: none; }
  .v-size-chart__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-6) var(--sp-7) var(--sp-7);
    max-height: calc(100dvh - 48px);
    overflow-y: auto;
  }
  .v-size-chart__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .v-size-chart__title {
    margin: 0;
    font-size: var(--type-20);
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
  }
  .v-size-chart__close {
    background: none;
    border: 0;
    color: var(--ink-mute);
    padding: var(--sp-1);
    cursor: pointer;
    font-size: var(--type-16);
  }@media (hover: hover){
  .v-size-chart__close:hover { color: var(--ink); background: none; }}
  .v-size-chart__hint {
    font-size: var(--type-12);
    color: var(--ink-mute);
    margin: 0;
  }
  .v-size-chart__group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }
  .v-size-chart__group-title {
    font-size: var(--type-14);
    font-weight: 600;
    margin: 0;
    color: var(--ink);
  }
  .v-size-chart__table-wrap { overflow-x: auto; }
  /* `fixed` is what removes the sideways scroll: the columns divide the
     sheet instead of sizing to their content, so six sizes plus a label
     still fit a 375px phone. The label column is given a fixed em width
     because "Shoulder" and "Out seam" are the widest things in the table
     and an auto split starved them. */
  .v-size-chart__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--type-13, 13px);
  }
  .v-size-chart__table th,
  .v-size-chart__table td {
    padding: 12px 6px;
    border-bottom: 1px solid var(--line);
    text-align: center;
  }
  .v-size-chart__table thead th:first-child,
  .v-size-chart__table tbody th { width: 6.5em; }
  .v-size-chart__table thead th {
    font-weight: 600;
    color: var(--ink);
    border-bottom: 1px solid var(--ink);
  }
  .v-size-chart__table thead th:first-child,
  .v-size-chart__table tbody th {
    text-align: left;
    font-weight: 500;
    color: var(--ink);
  }
  .v-size-chart__table tbody tr:last-child th,
  .v-size-chart__table tbody tr:last-child td { border-bottom: 0; }
  .v-size-chart__note {
    font-size: var(--type-12);
    color: var(--ink-mute);
    margin: 0;
  }

  .rte h1, .rte h2, .rte h3, .rte h4 { color: var(--ink); }
  .rte a { text-decoration: underline; }
  .rte ul, .rte ol { padding-left: var(--sp-5); }

  /* ── Desktop defaults for mobile-only elements ──
     Hide everything that only appears in the mobile bottom sheet, and make
     the structural wrapper elements (`.v-pdp__price-row`, `.v-pdp__acc-label`)
     transparent so desktop layout reads exactly as it did before. */
  .v-pdp__model-hint,
  .v-pdp__sheet-handle,
  .v-pdp__sheet-compact-row,
  .v-pdp__sheet-sized-title,
  .v-pdp__sheet-head,
  .v-pdp__sheet-specs-title,
  .v-pdp__sheet-desc,
  .v-pdp__sheet-size-guide,
  .v-pdp__acc-lucide { display: none; }

  /* "You may also like" recommendations - independent section below
     the PDP (markup lives outside `.v-pdp` so it doesn't take a
     column slot in the desktop sticky 3-column grid). */
  .v-pdp-recs {
    display: grid;
    grid-template-columns: var(--content-grid);
    padding: var(--sp-10) 0 var(--sp-9);
  }
  .v-pdp-recs > * { grid-column: 2; }
  .v-pdp-recs__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    padding: 0 12px;
  }
  .v-pdp-recs__title {
    font-size: clamp(var(--type-24), 4vw, var(--type-48));
    font-weight: var(--font-display--weight);
    line-height: var(--leading-tight);
    letter-spacing: var(--track-tight);
    margin: 0;
  }
  .v-pdp-recs__grid { grid-column: 1 / -1; }
  @media (max-width: 768px) {
    /* Mobile: flush with the gallery above and the footer below.
       48-px top/bottom padding matches the original spec. The grid
       itself is owned by `.v-grid` (snippets/grid-cards.liquid) which
       hard-locks mobile to a 2-up flush layout - explicit
       `overflow-x: hidden` here guarantees no horizontal scroll
       can ever leak out of the recs widget. */
    .v-pdp-recs {
      padding: 48px 0;
      overflow-x: hidden;
    }
    .v-pdp-recs__header { padding: 0 16px; margin-bottom: var(--sp-4); }
    .v-pdp-recs__title { font-size: var(--type-24); }
  }
  .v-pdp__price-row,
  .v-pdp__acc-label { display: contents; }

  /* --- Mobile: top-flushed 3D, vertical gallery, glass sheet at bottom --- */
  @media (max-width: 900px) {
    .v-pdp {
      grid-template-columns: 1fr;
      padding: 0;
    }
    .v-pdp__inner {
      grid-column: 1;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* Flatten left wrapper so the 3D stage and gallery share one flow.
       Right wrapper becomes the fixed bottom sheet (see pdp-sheet.liquid). */
    .v-pdp__left { display: contents; }

    /* Hide desktop-only elements that have moved into the sheet on mobile.
       Note: .v-pdp__desc-shell is intentionally NOT hidden - the product
       description with its collapse/expand toggle stays visible on mobile
       directly under the gallery (see .v-pdp__desc-shell mobile rule below). */
    .v-pdp__head,
    .v-pdp__sizing-note { display: none; }
    .v-pdp__accordions [data-open-size-chart] { display: none; }

    /* Description shell on mobile: takes the full available width inside
       the page gutter, sits below the gallery and above the bottom sheet.
       Mobile shows the FULL description always - no 5-line clamp, no
       chevron toggle. The clamp/toggle is desktop-only.
       Color is forced to var(--ink) to match desktop - without this the
       block can inherit white from the parent .v-pdp__right sheet styles
       since `display: contents` on .v-pdp__left lifts the description
       into the document flow at a level where color inheritance shifts. */
    .v-pdp__desc-shell {
      max-width: 100%;
      width: 100%;
      padding: 28px var(--page-margin, 16px) 32px;
      margin: 0;
      order: 2;
      color: #666666;
    }
    /* Override the clamp + mask: full description visible on mobile. */
    .v-pdp__desc {
      max-width: 100%;
      color: #666666;
      display: block;
      line-height: 1.7;
      -webkit-line-clamp: unset;
      -webkit-box-orient: unset;
      overflow: visible;
      mask-image: none;
      -webkit-mask-image: none;
    }
    .v-pdp__desc p,
    .v-pdp__desc * { color: #666666 !important; }
    /* Hide the chevron toggle entirely on mobile. */
    .v-pdp__desc-toggle { display: none; }

    /* Visual order: 3D model → gallery (no gap between images).
       Right column is fixed-positioned by pdp-sheet.liquid. */
    .v-pdp__model-stage  { order: 0; padding: 0; }
    .v-pdp__media        { order: 1; }

    .v-pdp__price { font-size: 19px; }   /* +4, matching desktop */
    /* Single-row variants enforced via the base .v-pdp__option-values
       rule (nowrap + flex:1 per swatch). Just bump touch target height. */
    .v-pdp__swatch { min-height: 44px; padding: 10px 8px; }
    .v-pdp__atc { min-height: 56px; }

    /* 3D stage: full-bleed 3:4 frame, Figma gradient bg, model centered at
       80 % so the garment fills the wider frame. Magnify button hidden -
       a tap on the stage opens the lightbox via the pointer detector. */
    .v-pdp__model-stage {
      width: 100%;
      max-width: none;
      margin: 0;
      aspect-ratio: 3 / 4;
      background: linear-gradient(180deg, #f2f2f2 0%, #c6c9cc 100%);
      cursor: zoom-in;
      -webkit-user-select: none;
      user-select: none;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .v-pdp__model-stage > .v-pdp__model-magnify { display: none; }
    .v-pdp__model {
      width: 80%;
      height: 80%;
    }
    .v-pdp__model-hint {
      display: inline-flex;
      position: absolute;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      align-items: center;
      gap: 8px;
      color: #666;
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: -0.32px;
      pointer-events: none;
      white-space: nowrap;
    }
    .v-pdp__model-hint-icon { width: 24px; height: 24px; flex: 0 0 auto; color: inherit; }

    /* Gallery: vertical full-bleed column on mobile, zero gap between
       images and no trailing padding - each image stacks naturally
       and the page scrolls past them. The PDP recommendations widget
       (rendered as a separate section after `</section>`) appears
       below in normal flow. */
    .v-pdp__media {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 100%;
      max-width: none;
      justify-self: stretch;
      overflow: visible;
      padding-bottom: 0;
    }
    .v-pdp__media-item {
      width: 100%;
      scroll-snap-align: unset;
    }
  }

  /* Size chart on mobile uses the shared `.v-bsheet` base
     (snippets/context-bottom-sheet.liquid) for rounded corners,
     drag handle, slide-up animation, and shadow. The head bar with
     the title + X close button stays visible (matches the cart
     drawer's mobile sheet) so users have an explicit way to dismiss
     besides the drag handle. */
  @media (max-width: 768px) {
    .v-size-chart {
      width: 100%;
      max-width: 100%;
      inset: auto 0 0 0;
      margin: 0;
      border: 0;
      height: auto;
      max-height: 90dvh;
    }
    .v-size-chart__head {
      display: flex;
      padding-top: calc(var(--sp-5) + 12px);
    }
    .v-size-chart__inner {
      gap: var(--sp-4);
      padding: 0 var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom));
    }
    /* One table, sized to be read at a glance rather than scrolled. */
    .v-size-chart__table { font-size: var(--type-12, 12px); }
    .v-size-chart__table th,
    .v-size-chart__table td { padding: 11px 3px; }
    .v-size-chart__table thead th:first-child,
    .v-size-chart__table tbody th { width: 5.4em; }
  }
/* END_SECTION:product */

/* START_SECTION:search (INDEX:23) */
/* The `.v-col` markup mirrors sections/collection.liquid 1:1 so the
     search results page reads as a category page. CSS is duplicated here
     (rather than imported) because section stylesheets are scoped to the
     section that emits them - search and collection are different section
     types, so each needs its own copy. If a future refactor moves these
     into critical.css, both sections can drop their copies. */

  .v-col { display: grid; grid-template-columns: var(--content-grid); position: relative; }
  .v-col > * { grid-column: 2; }

  .v-col__bar-sentinel {
    grid-column: 1 / -1;
    display: block;
    height: 1px;
    width: 100%;
    pointer-events: none;
  }
  .v-col__bar {
    grid-column: 1 / -1;
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--paper);
    transition:
      background var(--motion-fast) ease-out,
      padding var(--motion-fast) ease-out,
      border-color var(--motion-fast) ease-out,
      box-shadow var(--motion-fast) ease-out;
  }
  .v-col__bar-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--sp-5);
    padding: var(--sp-7) var(--page-margin) var(--sp-4);
    transition: padding var(--motion-fast) ease-out;
  }
  .v-col__bar-left { display: flex; flex-direction: column; gap: var(--sp-2); transition: gap var(--motion-fast) ease-out; }
  .v-col__title {
    font-size: clamp(var(--type-32), 6vw, var(--type-80));
    font-weight: var(--font-display--weight);
    letter-spacing: var(--track-tight);
    line-height: var(--leading-tight);
    color: var(--ink);
    margin: 0;
    transition: font-size var(--motion-fast) ease-out, letter-spacing var(--motion-fast) ease-out;
  }
  .v-col__count { display: inline-flex; gap: 4px; transition: opacity var(--motion-fast) ease-out; }
  .v-col__bar.is-stuck { background: var(--paper); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
  .v-col__bar.is-stuck .v-col__bar-inner { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  .v-col__bar.is-stuck .v-col__bar-left { flex-direction: row; align-items: baseline; gap: var(--sp-3); }
  .v-col__bar.is-stuck .v-col__title { font-size: var(--type-20); letter-spacing: var(--track-tight); }
  .v-col__bar.is-stuck .v-col__count { opacity: 0.7; }

  .v-col__trigger {
    background: none;
    border: 0;
    padding: var(--sp-2) 0;
    font-family: inherit;
    font-size: var(--type-12);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
  }
  .v-col__trigger::after { content: ' +'; color: var(--ink-mute); font-weight: 400; }@media (hover: hover){
  .v-col__trigger:hover { opacity: 0.65; background: none; }}

  /* Active chips */
  .v-col__active {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-4) 0 0;
    grid-column: 1 / -1;
    padding-left: var(--page-margin);
    padding-right: var(--page-margin);
  }
  .v-col__active-label { font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; }
  .v-col__active-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
  .v-col__chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px;
    border: 1px solid var(--ink);
    color: var(--ink);
    text-decoration: none;
    font-size: 10px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
  }@media (hover: hover){
  .v-col__chip:hover { background: var(--ink); color: var(--paper); }}
  .v-col__chip-x { font-size: 11px; line-height: 1; }
  .v-col__clear {
    padding: 6px 10px;
    font-size: 10px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-mute);
    text-decoration: underline;
  }

  /* Flush to the viewport edges on every width, the same as the home
     grid: the shared .v-grid owns the gutters, this wrapper adds none. */
  .v-col__results { grid-column: 1 / -1; padding: var(--sp-5) 0 var(--sp-9); }
  .v-col__empty { padding: var(--sp-9) 0; text-align: center; }
  .v-col__empty .v-link { display: inline-block; margin-top: var(--sp-4); color: var(--ink); text-decoration: underline; }

  .v-col__pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-5) 0 0; }
  .v-col__pagination a { text-decoration: none; color: var(--ink); letter-spacing: var(--track-wide); text-transform: uppercase; }

  /* Skeleton */
  .v-col__skeleton { display: none; grid-column: 1 / -1; padding: var(--sp-5) 0 var(--sp-9); }
  .v-col.is-loading .v-col__results { opacity: 0; pointer-events: none; height: 0; overflow: hidden; padding: 0; }
  .v-col.is-loading .v-col__skeleton { display: block; }
  .v-skel { display: flex; flex-direction: column; gap: 10px; }
  .v-skel__img { width: 100%; aspect-ratio: 4/5; background: var(--paper-2, #f2f2f2); position: relative; overflow: hidden; }
  .v-skel__img::after,
  .v-skel__line::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
    animation: v-skel-shimmer 1.4s ease-in-out infinite;
  }
  .v-skel__line { height: 12px; background: var(--paper-2, #f2f2f2); position: relative; overflow: hidden; }
  .v-skel__line--title { width: 70%; height: 14px; }
  .v-skel__line--price { width: 30%; height: 12px; }
  @keyframes v-skel-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

  /* Drawer */
  .v-col-drawer {
    padding: 0;
    border: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100dvh;
    width: min(420px, 100%);
    height: 100dvh;
    background: var(--paper);
    color: var(--ink);
    position: fixed;
    inset: 0 0 0 auto;
    box-shadow: -1px 0 0 var(--line);
  }
  .v-col-drawer::backdrop { background: transparent; }
  .v-col-drawer[open] { animation: v-col-drawer-slide var(--motion-base) var(--ease-out); }
  @keyframes v-col-drawer-slide { from { transform: translateX(100%); } to { transform: translateX(0); } }

  .v-col-drawer__inner { display: flex; flex-direction: column; height: 100%; }
  .v-col-drawer__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    border-bottom: 1px solid var(--line);
  }
  .v-col-drawer__tabs { display: inline-flex; align-items: center; gap: var(--sp-3); }
  .v-col-drawer__tab {
    background: none; border: 0; padding: 0;
    font-family: inherit;
    font-size: var(--type-14);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-mute);
    cursor: pointer;
    font-weight: 600;
  }
  .v-col-drawer__tab.is-active { color: var(--ink); }@media (hover: hover){
  .v-col-drawer__tab:hover { opacity: 0.8; background: none; }}
  .v-col-drawer__sep { color: var(--line); font-weight: 300; }
  .v-col-drawer__close { background: none; border: 0; padding: var(--sp-2); color: var(--ink); font-size: var(--type-16); cursor: pointer; letter-spacing: 0; text-transform: none; }@media (hover: hover){
  .v-col-drawer__close:hover { background: none; opacity: 0.6; }}
  .v-col-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
  .v-col-drawer__panel { display: none; }
  .v-col-drawer__panel.is-active { display: block; }
  .v-col-drawer__stub { padding: var(--sp-5) 0; }
  .v-col-drawer__tab-count { color: var(--ink-mute); font-weight: 400; margin-left: 2px; }

  .v-col-drawer__sorts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .v-col-drawer__sort {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: var(--type-14);
    cursor: pointer;
  }
  .v-col-drawer__sort:last-child { border-bottom: 0; }
  .v-col-drawer__sort-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
  .v-col-drawer__radio { width: 14px; height: 14px; border: 1px solid var(--ink); border-radius: 999px; flex-shrink: 0; position: relative; }
  .v-col-drawer__sort-input:checked + .v-col-drawer__radio::after { content: ''; position: absolute; inset: 2px; background: var(--ink); border-radius: 999px; }

  .v-col-drawer__foot {
    display: flex; gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .v-col-drawer__clear,
  .v-col-drawer__apply {
    flex: 1 1 0;
    height: 56px;
    padding: 0 24px;
    border-radius: 999px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease-out,
                color var(--motion-fast) ease-out,
                border-color var(--motion-fast) ease-out;
  }
  .v-col-drawer__clear { background: transparent; color: var(--ink); border: 1px solid var(--line); }@media (hover: hover){
  .v-col-drawer__clear:hover { background: rgba(0, 0, 0, 0.04); color: var(--ink); border-color: var(--ink); }}
  .v-col-drawer__apply { background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }@media (hover: hover){
  .v-col-drawer__apply:hover { background: #1f1f1f; color: var(--paper); }}

  @media (max-width: 768px) {
    .v-col__bar-inner { padding-top: var(--sp-5); padding-bottom: var(--sp-3); align-items: flex-end; gap: var(--sp-2); }
    .v-col__title { font-size: var(--type-32); }
    .v-col__bar.is-stuck .v-col__bar-inner { padding-top: var(--sp-2); padding-bottom: var(--sp-2); }
    .v-col__bar.is-stuck .v-col__title { font-size: var(--type-16); }
    .v-col__trigger { font-size: var(--type-11); white-space: nowrap; display: none; }
    .v-col__results { padding: var(--sp-4) 0 var(--sp-8); }
    .v-col__skeleton { padding: var(--sp-4) 8px var(--sp-8); }
    .v-col-drawer { width: 100%; }
  }
/* END_SECTION:search */

/* CSS from block stylesheet tags */
/* START_BLOCK:group (INDEX:24) */
.group {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    width: 100%;
  }

  .group--horizontal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--padding);
  }

  .group--vertical {
    flex-direction: column;
    align-items: var(--alignment);
    padding: var(--padding) 0;
  }
/* END_BLOCK:group */

/* START_BLOCK:text (INDEX:25) */
.text {
    text-align: var(--text-align);
  }
  .text--title {
    font-size: 2rem;
    font-weight: 700;
  }
  .text--subtitle {
    font-size: 1.5rem;
  }
/* END_BLOCK:text */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:album-player (INDEX:28) */
/* ── Play ────────────────────────────────────────────────────────────
     The reference is a white pill on a dark page. This page is white, so
     the pill inverts to the site's primary button - the same ink-on-paper
     pair `.tz-screen__btn` uses - rather than inventing a third style. */
  .v-album-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 12px above and below, matching. */
    margin: 12px 0;
    /* A fixed 44px, not padding-derived: an explicit height cannot drift
       when the label wraps to a different locale or the font falls back.
       Horizontal padding stays long, per Aditya. */
    height: 44px;
    padding: 0 48px;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: var(--ink, #000);
    color: var(--paper, #fff);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    text-transform: none;
    cursor: pointer;
    transition: transform 180ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1));
  }
  /* The theme reset paints `button:hover { background-color: var(--ink);
     color: var(--paper) }`, which happens to match - but it also sets a
     border and uppercase text, so every state is restated. */
  .v-album-play,
  .v-album-play:focus,
  .v-album-play:active { background: var(--ink, #000); color: var(--paper, #fff); outline: none; }
  @media (hover: hover) {
    .v-album-play:hover { background: var(--ink, #000); color: var(--paper, #fff); transform: scale(1.03); }
  }
  .v-album-play:active { transform: scale(0.97); }
  .v-album-play:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
  .v-album-play__icon { display: block; flex: none; max-width: none; }

  /* ── The sticky player ───────────────────────────────────────────────
     Bottom-right, ABOVE the cart FAB. On m-web the cart sits at
     `bottom: 100px` and is 60 tall, so 172px clears it with 12px of air.
     Desktop has no cart FAB - the cart lives in the nav pill - so it drops
     to the same 20px inset the deck uses. */
  .v-album-player {
    position: fixed;
    right: 16px;
    bottom: 172px;
    z-index: 1005;
    width: min(380px, calc(100vw - 32px));
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    /* Rim, no drop shadow - the site's chrome carries no shadows. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
  }
  .v-album-player[hidden] { display: none; }

  .v-album-player__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 16px;
  }
  .v-album-player__title {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--ink, #000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Same 40px circle and same `--tz-close` glyph the sheets use, at the
     smaller of the two sizes since this sits inside a compact header. */
  .v-album-player__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--paper-2, rgba(0, 0, 0, 0.05));
    color: var(--ink, #000);
    font-size: 0;
    cursor: pointer;
  }
  .v-album-player__close::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: currentColor;
    -webkit-mask: var(--tz-close) center / 18px 18px no-repeat;
    mask: var(--tz-close) center / 18px 18px no-repeat;
  }
  .v-album-player__close,
  .v-album-player__close:focus,
  .v-album-player__close:active { background: var(--paper-2, rgba(0, 0, 0, 0.05)); color: var(--ink, #000); outline: none; }
  @media (hover: hover) {
    .v-album-player__close:hover { background: rgba(0, 0, 0, 0.1); color: var(--ink, #000); }
  }

  .v-album-player__frame { line-height: 0; }
  .v-album-player__frame iframe {
    display: block;
    width: 100%;
    height: 400px;
    border: 0;
    max-width: none;
  }

  /* ── M-web: a bottom SHEET, not a floating card ──────────────────────
     A 358px card hovering 172px off the bottom edge of a 390px phone reads
     as a misplaced dialog. Docked to the edge, full width, with the site's
     own 24px sheet radius, it reads as the mini-player it is.

     Deliberately NOT modal: no scrim, no scroll lock. The whole point is
     that it keeps playing while the customer carries on browsing the album,
     which a modal sheet would prevent. */
  @media (max-width: 989px) {
    .v-album-player {
      inset: auto 0 0 0;
      width: 100%;
      max-width: 100%;
      border-radius: 24px 24px 0 0;
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* 400px of widget plus a header is most of a small viewport, and the
       track list scrolls inside itself anyway. */
    .v-album-player__frame iframe { height: 300px; }
  }

  /* The refine dock lives at the bottom of a collection page too, so it
     steps up by exactly the sheet's MEASURED height - `--tz-player-h` is
     published by assets/album-player.js on open, close and resize. A
     constant here would be wrong the moment the widget or the header
     changes size. */
  html.tz-player-open .v-refine-dock {
    bottom: calc(20px + var(--tz-player-h, 0px) + 12px);
    transition: bottom 260ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1));
  }

  @media (min-width: 990px) {
    /* Desktop keeps the card: there is no bottom deck to dock to, the cart
       lives in the nav pill, and the refine dock is centred so a 380px card
       on the right never reaches it. */
    .v-album-player { right: 20px; bottom: 20px; }
    html.tz-player-open .v-refine-dock { bottom: 20px; }
  }

  @media (prefers-reduced-transparency: reduce) {
    .v-album-player {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgba(255, 255, 255, 0.97);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .v-album-play { transition: none; }
  }
/* END_SNIPPET:album-player */

/* START_SNIPPET:atc-sheet (INDEX:29) */
.v-atc {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 20px;
    margin: auto;
    max-width: 100%;
    width: min(520px, calc(100% - 48px));
    background: var(--paper);
    color: var(--ink);
    position: fixed;
    inset: 0;
    height: fit-content;
    max-height: calc(100dvh - 48px);
    overflow: hidden;
  }
  .v-atc::backdrop { background: rgba(0, 0, 0, 0.45); }
  .v-atc[open] { animation: v-atc-fade var(--motion-fast) var(--ease-out); }
  @keyframes v-atc-fade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  @media (max-width: 768px) {
    .v-atc {
      width: 100%;
      max-width: 100%;
      inset: auto 0 0 0;
      margin: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 0;
      border-radius: 20px 20px 0 0;
      height: auto;
      max-height: 90dvh;
      min-height: 52dvh;
    }
    .v-atc[open] { animation: v-atc-slide-up var(--motion-base) var(--ease-out); }
    @keyframes v-atc-slide-up {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
  }

  .v-atc__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-5) var(--sp-5);
  }
  @media (max-width: 768px) {
    .v-atc__inner {
      gap: var(--sp-5);
      padding: var(--sp-5) var(--sp-5) calc(var(--sp-6) + env(safe-area-inset-bottom));
    }
  }

  .v-atc__head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  .v-atc__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    flex: 0 0 auto;
  }
  .v-atc__msg {
    /* Same typography as accordion summaries: type-14 / weight 400 / sentence case. */
    font-size: var(--type-14);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    flex: 1;
  }
  .v-atc__close {
    /* Circular icon button matching the lightbox close. */
    background: var(--paper);
    border: 1px solid var(--line) !important;
    color: var(--ink);
    padding: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-size: 0 !important;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-atc__close:hover { background: var(--paper-2); color: var(--ink); }}

  .v-atc__grab { display: none; }
  @media (max-width: 768px) {
    .v-atc__grab {
      display: block;
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translateX(-50%);
      width: 36px;
      height: 4px;
      border-radius: 4px;
      background: var(--ink-mute);
      opacity: 0.35;
    }
  }

  .v-atc__body {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
  }
  .v-atc__body .v-atc__thumb {
    width: 80px;
    aspect-ratio: 4/5;
    background: var(--paper-2);
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 8px;
  }
  .v-atc__body .v-atc__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .v-atc__body .v-atc__name { font-size: var(--type-14); font-weight: 500; color: var(--ink); }
  .v-atc__body .v-atc__variant { font-size: var(--type-12); color: var(--ink-mute); margin-top: 2px; }
  .v-atc__body .v-atc__price { font-size: var(--type-13, 13px); color: var(--ink); margin-top: var(--sp-1); }

  .v-atc__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  /* Primary + secondary actions reuse the PDP ATC button language —
     rounded pill, sentence-case label, type-14, bold for primary. */
  .v-atc__primary,
  .v-atc__secondary {
    width: 100%;
    padding: 16px;
    border-radius: 999px;
    font-family: inherit;
    font-size: var(--type-14);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    min-height: 56px;
    transition: background-color var(--motion-fast) ease-out, color var(--motion-fast) ease-out;
  }
  .v-atc__primary {
    background: var(--ink);
    color: var(--paper);
    border: 1px solid var(--ink);
    font-weight: 700;
  }@media (hover: hover){
  .v-atc__primary:hover { background: var(--paper); color: var(--ink); }}
  .v-atc__secondary {
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--ink);
    font-weight: 500;
  }@media (hover: hover){
  .v-atc__secondary:hover { background: var(--paper-2); }}

  @media (max-width: 768px) {
    .v-atc__primary,
    .v-atc__secondary { padding: 14px; min-height: 52px; }
  }
/* END_SNIPPET:atc-sheet */

/* START_SNIPPET:collection-filter-rail (INDEX:32) */
/* ── Filter pill rail ────────────────────────────────────────────────
     Full bleed. `.v-col > *` pins children to the content column at (0,1,0)
     and lands later in the compiled bundle, so this needs two classes to
     win - the same trap `.v-col > .v-col__banner` documents. */
  .v-col > .v-col__rail { grid-column: 1 / -1; }

  /* Sticky offset as a custom property so one declaration serves both
     states. `top` on a sticky element does nothing until the element is
     actually stuck, which is exactly right here: near the top of the page
     the rail sits in flow and the value is inert, and the transition only
     ever shows while it is pinned.

     `--tz-bar-h` is written by `assets/collection-rail.js` from the stuck
     header's measured height - it changes with the title's wrap and with
     the viewport, so it cannot be a constant. */
  .v-col__rail {
    position: sticky;
    top: var(--tz-rail-top, var(--tz-bar-h, 44px));
    z-index: 29;
    /* 16px of air under the copy before the rail starts. Margin, not
       padding: the rail's own background should start where the pills'
       padding does, so the gap stays page-coloured rather than becoming
       part of the bar. */
    margin-top: 16px;
    background: var(--paper, #fff);
    transition: top 260ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1));
  }

  /* The header's own 64px offset (it clears the floating nav circles) and
     the `tz-chrome-hidden` signal both live inside `@media (max-width: 989px)`
     in `snippets/tenzen-topnav.liquid`. Above that the bar sticks at 0, so
     the rail's offset has to be scoped the same way or it would hang 64px
     low on desktop. */
  @media (max-width: 989px) {
    .v-col__rail {
      --tz-rail-top: calc(64px + env(safe-area-inset-top) + var(--tz-bar-h, 44px));
    }
    /* Scroll down and the header slides away with the nav circles; the rail
       stays and goes flush to the top edge. Flush, not offset: any gap
       leaves a sliver of the product grid scrolling above a floating white
       bar, which reads as a rendering fault rather than as spacing. */
    html.tz-chrome-hidden .v-col__rail {
      --tz-rail-top: env(safe-area-inset-top, 0px);
    }
  }

  .v-col__rail-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--page-margin, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .v-col__rail-scroll::-webkit-scrollbar { display: none; }

  .v-col__rail-sep {
    flex: none;
    width: 1px;
    height: 22px;
    background: var(--line, rgba(0, 0, 0, 0.12));
  }

  /* The pill. Neutral state is the theme's soft grey fill with no rim;
     an active group inverts to the ink, which is the only accent this
     design system has. */
  .v-col__pill {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 9999px;
    background: var(--paper-2, rgba(0, 0, 0, 0.05));
    color: var(--ink, #000);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease-out, color 160ms ease-out;
  }
  /* The theme styles every bare `button`, including a solid
     `button:hover { background-color: var(--ink) }`, which latches after a
     tap on touch. Restate the resting state on every interactive state. */
  .v-col__pill:focus {
    background: var(--paper-2, rgba(0, 0, 0, 0.05));
    color: var(--ink, #000);
    outline: none;
  }
  .v-col__pill:focus-visible { outline: 2px solid var(--ink, #000); outline-offset: 2px; }
  .v-col__pill:active { transform: scale(0.97); }

  .v-col__pill.is-active,
  .v-col__pill.is-active:focus {
    background: var(--ink, #000);
    color: var(--paper, #fff);
  }

  /* With a count badge the pill's left padding has to equal its vertical
     padding, so the white circle sits in a square of space rather than a
     wide one. The pill is 36px tall around a 20px badge, so that gap is
     (36 - 20) / 2 = 8px, and the left padding matches it exactly.
     `--all` is excluded: it carries a dot, not a badge. */
  .v-col__pill.is-active:not(.v-col__pill--all) { padding-left: 8px; }

  .v-col__pill--all { padding: 0 12px; position: relative; }
  /* `img, picture, video, canvas, svg { max-width: 100% }` in the theme reset
     clamps an svg to its padded content box and beats an explicit width. */
  .v-col__pill-icon { display: block; flex: none; width: 18px; height: 18px; max-width: none; }
  .v-col__pill-dot {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--ink, #000);
    box-shadow: 0 0 0 2px var(--paper, #fff);
  }
  .v-col__pill--all.is-active .v-col__pill-dot {
    background: var(--paper, #fff);
    box-shadow: 0 0 0 2px var(--ink, #000);
  }

  /* Count badge, leading the label exactly as the reference has it. */
  .v-col__pill-count {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--paper, #fff);
    color: var(--ink, #000);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  /* Chevron from two borders rather than another data URI, the same way the
     bag sheet draws its back glyph. */
  .v-col__pill-chev {
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 1px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }

  @media (hover: hover) {
    .v-col__pill:hover {
      background: var(--paper-2, rgba(0, 0, 0, 0.05));
      color: var(--ink, #000);
    }
    .v-col__pill.is-active:hover {
      background: var(--ink, #000);
      color: var(--paper, #fff);
    }
  }

  /* Desktop keeps the in-bar "Refine" trigger as the primary control, but
     the rail is still the fastest way into one group, so it stays. It only
     needs the wider page margin. */
  @media (min-width: 769px) {
    .v-col__rail-scroll { padding-left: var(--page-margin, 24px); padding-right: var(--page-margin, 24px); }
  }
/* END_SNIPPET:collection-filter-rail */

/* START_SNIPPET:collection-filters-2col (INDEX:33) */
/* Visually hidden, still counted by the DOM queries that need it. */
  .u-vh {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* ── Two-column filter body ──────────────────────────────────────────
     Fixed left rail, fluid right pane, each scrolling independently. The
     sheet's own body stops scrolling in this mode (see the height and
     padding overrides below) so the two columns can own their overflow -
     one scroll surface per column is the whole point of the layout. */
  .v-f2 {
    display: grid;
    grid-template-columns: 136px 1fr;
    height: 100%;
    min-height: 0;
  }

  .v-f2__nav {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper-2, rgba(0, 0, 0, 0.04));
    border-right: 1px solid var(--line, rgba(0, 0, 0, 0.1));
    scrollbar-width: none;
  }
  .v-f2__nav::-webkit-scrollbar { display: none; }

  .v-f2__navitem {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    /* Taller, with more air around the label. Vertical padding rather than a
       flex gap: the items carry hairlines between them, and a gap would open
       a break in the rule instead of a margin inside it. */
    min-height: 60px;
    padding: 20px 14px;
    border: 0;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    background: none;
    color: var(--ink-mute, rgba(0, 0, 0, 0.6));
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    transition: background-color 140ms ease-out, color 140ms ease-out;
  }
  /* The theme's `button:hover { background-color: var(--ink) }` latches after
     a tap on touch, so every interactive state is restated. */
  .v-f2__navitem:focus {
    background: none;
    color: var(--ink-mute, rgba(0, 0, 0, 0.6));
    outline: none;
  }
  .v-f2__navitem:focus-visible { outline: 2px solid var(--ink, #000); outline-offset: -3px; }
  .v-f2__navitem.is-active,
  .v-f2__navitem.is-active:focus {
    background: var(--paper, #fff);
    color: var(--ink, #000);
    font-weight: 600;
  }
  @media (hover: hover) {
    .v-f2__navitem:hover { background: rgba(0, 0, 0, 0.03); color: var(--ink, #000); }
    .v-f2__navitem.is-active:hover { background: var(--paper, #fff); }
  }
  .v-f2__navcount {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink, #000);
  }
  .v-f2__navcount:empty { display: none; }

  .v-f2__panes { min-height: 0; display: flex; flex-direction: column; }
  .v-f2__pane {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 12px 16px 16px;
    /* The stacked-groups stylesheet gives every `.v-fg` a rule under it;
       in two columns each pane is the whole surface, so it has none. */
    border-bottom: 0;
  }
  .v-f2__pane[hidden] { display: none; }

  .v-f2__searchwrap { flex: none; padding-bottom: 8px; }
  .v-f2__search {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: var(--paper-2, rgba(0, 0, 0, 0.05));
    color: var(--ink, #000);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    /* iOS zooms the page in on focus for anything under 16px, so the value
       is bumped only where that actually bites. */
    outline: none;
  }
  @media (max-width: 768px) { .v-f2__search { font-size: 16px; } }
  .v-f2__search::-webkit-search-cancel-button { -webkit-appearance: none; }

  .v-f2__list { gap: 0; }
  .v-f2__row[hidden] { display: none; }
  .v-f2__item {
    padding: 11px 0;
    font-size: 15px;
    gap: 12px;
  }
  .v-f2__row + .v-f2__row .v-f2__item { border-top: 1px solid var(--line, rgba(0, 0, 0, 0.08)); }
  .v-f2__row--all .v-f2__item { font-weight: 600; }
  .v-f2__label--all { font-weight: 600; }
  /* Rounded box, to sit with the pill language the rest of the sheet uses. */
  .v-f2 .v-fg__check { width: 20px; height: 20px; border-radius: 6px; border-width: 1.5px; }
  .v-f2 .v-fg__checkbox:checked + .v-fg__check::after,
  .v-f2 .v-f2__allbox:checked + .v-fg__check::after { font-size: 12px; }
  .v-f2__allbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
  }
  .v-f2__allbox:checked + .v-fg__check { background: var(--ink, #000); }
  .v-f2__allbox:checked + .v-fg__check::after { content: '✓'; color: var(--paper, #fff); font-weight: 600; }
  /* Some, but not all, of the group selected. */
  .v-f2__allbox:indeterminate + .v-fg__check { background: var(--ink, #000); }
  .v-f2__allbox:indeterminate + .v-fg__check::after {
    content: '';
    width: 9px;
    height: 2px;
    background: var(--paper, #fff);
    border-radius: 1px;
  }

  /* ── Sheet shape in filter mode ──────────────────────────────────────
     A two-column layout needs a known height to divide, so the sheet stops
     hugging its content here. `data-mode` is set by
     `assets/collection-rail.js`; the sort sheet is left short and auto. */
  .v-col-drawer[data-filter-drawer][data-mode='filter'] {
    height: 88dvh;
  }
  .v-col-drawer[data-mode='filter'] .v-col-drawer__body {
    padding: 0;
    overflow: hidden;
  }
  .v-col-drawer[data-mode='filter'] .v-col-drawer__panel[data-panel='filter'] {
    height: 100%;
    min-height: 0;
  }

  /* ── Footer as two pills ─────────────────────────────────────────────
     The reference pairs an outlined button with a filled one. The left one
     stays CLEAR rather than becoming Cancel: the ✕ in the header already
     cancels, and relabelling would drop the only way to empty a selection
     without applying it. */
  .v-col-drawer__foot {
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .v-col-drawer__clear,
  .v-col-drawer__apply {
    flex: 1;
    height: 52px;
    border-radius: 9999px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    cursor: pointer;
  }
  .v-col-drawer__clear,
  .v-col-drawer__clear:focus {
    border: 1.5px solid var(--ink, #000);
    background: none;
    color: var(--ink, #000);
    outline: none;
  }
  .v-col-drawer__apply,
  .v-col-drawer__apply:focus {
    border: 1.5px solid var(--ink, #000);
    background: var(--ink, #000);
    color: var(--paper, #fff);
    outline: none;
  }
  @media (hover: hover) {
    .v-col-drawer__clear:hover { background: none; color: var(--ink, #000); }
    .v-col-drawer__apply:hover { background: var(--ink, #000); color: var(--paper, #fff); }
  }
/* END_SNIPPET:collection-filters-2col */

/* START_SNIPPET:collection-filters (INDEX:34) */
.v-fg { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-3); }
  .v-fg:last-of-type { border-bottom: 0; padding-bottom: 0; }
  .v-fg__summary {
    padding: var(--sp-3) 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    list-style: none;
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink);
    font-weight: 600;
  }
  .v-fg__summary::-webkit-details-marker { display: none; }
  .v-fg__summary::after { content: '+'; font-size: var(--type-16); line-height: 1; color: var(--ink-mute); margin-left: var(--sp-2); }
  .v-fg[open] > .v-fg__summary::after { content: '−'; }
  .v-fg__count {
    font-size: 10px;
    color: var(--ink);
    letter-spacing: 0;
    min-width: 14px;
    text-align: right;
    font-weight: 400;
  }
  .v-fg__count:empty { color: var(--ink-mute); }
  .v-fg__body { padding-bottom: var(--sp-3); }

  .v-fg__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .v-fg__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 4px;
    color: var(--ink);
    font-size: var(--type-13, 13px);
    cursor: pointer;
    transition: background-color var(--motion-fast) ease-out;
  }@media (hover: hover){
  .v-fg__item:hover { background: var(--paper-2); }}
  .v-fg__checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
  }
  .v-fg__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px; height: 15px;
    border: 1px solid var(--ink);
    font-size: 11px;
    color: var(--paper);
    line-height: 1;
    flex-shrink: 0;
    transition: background-color var(--motion-fast) ease-out;
  }
  .v-fg__checkbox:checked + .v-fg__check {
    background: var(--ink);
  }
  .v-fg__checkbox:checked + .v-fg__check::after {
    content: '✓';
    color: var(--paper);
    font-size: 10px;
    font-weight: 600;
  }
  .v-fg__checkbox:focus-visible + .v-fg__check {
    outline: 2px solid var(--ink-mute);
    outline-offset: 1px;
  }
  .v-fg__label { flex: 1; }
  .v-fg__num { color: var(--ink-mute); font-size: 11px; font-variant-numeric: tabular-nums; }
  .v-fg__item.is-disabled {
    opacity: 0.35;
    pointer-events: none;
  }

  .v-fg__price { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-2); }
  .v-fg__price-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .v-fg__price label {
    display: flex; flex-direction: column; gap: 4px;
    font-size: 10px;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .v-fg__price input {
    font-family: inherit;
    font-size: var(--type-13, 13px);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 8px 10px;
    outline: none;
    transition: border-color var(--motion-fast) ease-out;
  }
  .v-fg__price input:focus { border-color: var(--ink); }
/* END_SNIPPET:collection-filters */

/* START_SNIPPET:context-bottom-sheet (INDEX:36) */
/* ── Shared bottom-sheet visual base. Callers pin the dialog to the
     bottom + width 100% themselves; this base just handles corners,
     animation, and the drag-handle indicator so every white sheet on
     the site (cart drawer, size guide, future ones) reads as one
     component family. ── */
  @media (max-width: 768px) {
    .v-bsheet {
      border-radius: 32px 32px 0 0 !important;
      box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.14) !important;
      border-top: 0 !important;
      overflow: hidden;
    }
    /* Drag handle — 36 × 4 ink-mute pill at the top-center of the
       sheet. We render it via a pseudo-element so callers don't have
       to add markup; safe-area-inset-top is already absorbed by the
       sheet's own padding so we just sit 12 px below the top edge. */
    .v-bsheet::before {
      content: '';
      position: absolute;
      top: 12px;
      left: 50%;
      transform: translateX(-50%);
      width: 36px;
      height: 4px;
      border-radius: 4px;
      background: var(--ink-mute, rgba(0, 0, 0, 0.3));
      opacity: 0.35;
      z-index: 2;
      pointer-events: none;
    }
    /* Slide-up animation — overrides any default `[open]` animation
       from the caller. */
    .v-bsheet[open] {
      animation: v-bsheet-slide-up 320ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes v-bsheet-slide-up {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
    /* Backdrop matches across all sheets so they read as one family. */
    .v-bsheet::backdrop { background: rgba(0, 0, 0, 0.45); }
  }
/* END_SNIPPET:context-bottom-sheet */

/* START_SNIPPET:currency-notice (INDEX:38) */
/* ── Currency notice ─────────────────────────────────────────────────
     Same bottom-sheet language as the rest of the family: rounded top,
     drag handle, slide up from the edge. */
  .tz-ccy {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 24px 24px 0 0;
    background: var(--paper, #fff);
    color: var(--ink, #000);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
  }
  .tz-ccy::backdrop {
    background: rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    backdrop-filter: blur(20px) saturate(1.1);
  }
  .tz-ccy[open] { animation: tz-ccy-up 320ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1)); }
  @keyframes tz-ccy-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* The handle the sheet family shares. */
  .tz-ccy::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 99px;
    background: var(--ink-mute, rgba(0, 0, 0, 0.3));
    opacity: 0.35;
  }

  .tz-ccy__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 44px 24px calc(24px + env(safe-area-inset-bottom));
  }

  /* The swap, stated rather than described: the currency they have been
     reading, an arrow, the one they will be charged in. Each part arrives
     in turn so the eye reads it left to right instead of all at once. */
  .tz-ccy__swap {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
  }
  .tz-ccy__from,
  .tz-ccy__to {
    display: grid;
    place-items: center;
    min-width: 56px;
    height: 56px;
    padding: 0 12px;
    border-radius: 18px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .tz-ccy__from {
    background: var(--paper-2, rgba(0, 0, 0, 0.05));
    color: var(--ink-mute, rgba(0, 0, 0, 0.5));
    animation: tz-ccy-pop 380ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1)) 120ms both;
  }
  .tz-ccy__to {
    background: var(--ink, #000);
    color: var(--paper, #fff);
    font-weight: 600;
    animation: tz-ccy-pop 380ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1)) 320ms both;
  }
  @keyframes tz-ccy-pop {
    from { opacity: 0; transform: scale(0.7); }
    to   { opacity: 1; transform: scale(1); }
  }
  /* Arrow from two borders, the way the rest of the interface draws its
     chevrons - no extra asset for six pixels of line. */
  .tz-ccy__arrow {
    position: relative;
    width: 22px;
    height: 2px;
    background: var(--ink-mute, rgba(0, 0, 0, 0.35));
    animation: tz-ccy-arrow 300ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1)) 240ms both;
  }
  .tz-ccy__arrow::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--ink-mute, rgba(0, 0, 0, 0.35));
    border-bottom: 2px solid var(--ink-mute, rgba(0, 0, 0, 0.35));
    transform: translateY(-50%) rotate(-45deg);
  }
  @keyframes tz-ccy-arrow {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  .tz-ccy__title {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--ink, #000);
    animation: tz-ccy-rise 380ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1)) 380ms both;
  }
  .tz-ccy__body {
    margin: 8px 0 0;
    max-width: 34ch;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: var(--ink-mute, rgba(0, 0, 0, 0.55));
    text-wrap: pretty;
    animation: tz-ccy-rise 380ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1)) 440ms both;
  }
  @keyframes tz-ccy-rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .tz-ccy__cta {
    width: 100%;
    height: 54px;
    margin-top: 26px;
    border: 0;
    border-radius: 9999px;
    background: var(--ink, #000);
    color: var(--paper, #fff);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms var(--tz-ease, cubic-bezier(0.22, 1, 0.36, 1));
    animation: tz-ccy-rise 380ms var(--tz-ease, cubic-bezier(0.32, 0.72, 0, 1)) 500ms both;
  }
  /* The theme's `button:hover { background-color: var(--ink) }` latches
     after a tap on touch, so every state is restated. */
  .tz-ccy__cta:focus { background: var(--ink, #000); color: var(--paper, #fff); outline: none; }
  .tz-ccy__cta:focus-visible { outline: 2px solid var(--ink, #000); outline-offset: 2px; }
  .tz-ccy__cta:active { transform: scale(0.98); }
  @media (hover: hover) {
    .tz-ccy__cta:hover { background: var(--ink, #000); color: var(--paper, #fff); }
  }

  @media (prefers-reduced-motion: reduce) {
    .tz-ccy[open] { animation: none; }
    .tz-ccy__from,
    .tz-ccy__to,
    .tz-ccy__arrow,
    .tz-ccy__title,
    .tz-ccy__body,
    .tz-ccy__cta { animation: none; opacity: 1; transform: none; }
  }
/* END_SNIPPET:currency-notice */

/* START_SNIPPET:grid-cards (INDEX:40) */
/* ── .v-grid - the canonical product-card grid for every surface
     on the site. Mobile is fixed at flush 2-up; desktop column count
     comes from `data-cols`. ── */
  .v-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    /* Mobile vertical row-gap for breathing room between rows. Column
       gap stays at 0 so adjacent cards in a row remain flush. The
       desktop @media block below replaces this with the desktop gap. */
    gap: 24px 0;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
  }
  .v-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
  .v-grid[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .v-grid[data-cols="5"] { grid-template-columns: repeat(2, 1fr); }
  .v-grid[data-cols="6"] { grid-template-columns: repeat(2, 1fr); }

  /* Mobile zigzag with full-width feature card every 5th - 5-cycle
     pattern repeats:
       row 1 (cards 1, 2)         →  1 | 2     ← natural
       row 2 (cards 3, 4, swapped) →  4 | 3     ← zigzag
       row 3 (card 5, full-width)  →  [    5    ]
       row 4 (cards 6, 7)         →  6 | 7     ← natural
       row 5 (cards 8, 9, swapped) →  9 | 8     ← zigzag
       row 6 (card 10, full-width) →  [   10    ]
       …
     Implementation:
       - 5n+3 (cards 3, 8, 13, …) → grid-column: 2 (zigzag right)
       - 5n+4 (cards 4, 9, 14, …) → grid-column: 1 (zigzag left, dense
         fills the hole left by 5n+3)
       - 5n   (cards 5, 10, 15, …) → spans full row via the
         `.v-card--full-width` class added by the Liquid loop. The
         class lives on the <a> directly so the cycle counts correctly.
     `:nth-of-type` (not `:nth-child`) so any non-<a> elements in the
     grid don't break the count. Cancelled on desktop. */
  .v-grid > .v-card:nth-of-type(5n+3) { grid-column: 2; }
  .v-grid > .v-card:nth-of-type(5n+4) { grid-column: 1; }
  /* Mobile alone-in-row → full-width. A card sits alone in a 2-up row
     when it is the LAST card of the grid AND its 5-cycle position is
     either:
       - 5n+1 (cards 1, 6, 11, 16, …) - natural col 1, no row partner
       - 5n+3 (cards 3, 8, 13, 18, …) - forced col 2 by zigzag, no
         row partner (the 5n+4 partner that would have filled the
         dense hole at col 1 doesn't exist)
     In both cases the user wants the lone card to span the full row
     instead of sitting half-width on the left. */
  .v-grid > .v-card:nth-of-type(5n+1):last-of-type,
  .v-grid > .v-card:nth-of-type(5n+3):last-of-type {
    grid-column: 1 / -1;
  }

  /* Full-width feature card on mobile. Triggers in three cases:
       (a) Every 5th product (`.v-card--full-width` class added by the
           Liquid loop / search.js).
       (b) When the grid renders only ONE product card in total
           (`:only-of-type`).
       (c) Last card alone in its row - see the dedicated 5n+1 / 5n+3
           `:last-of-type` rule below (kept separate so the comment
           explains the row-occupancy logic). */
  .v-grid > .v-card--full-width,
  .v-grid > .v-card:only-of-type {
    grid-column: 1 / -1;
  }
  /* No object-fit override here - full-width cards inherit the base
     `object-fit: contain` so the image keeps its full content with no
     cropping (per user spec). */

  /* MOBILE ONLY - force 2:3 portrait on the wider feature card so
     images don't crop or letterbox. Wrapping this in @media (max-width:
     768px) is critical: with `!important`, an unscoped rule would also
     fire on desktop and override the per-product inline `aspect-ratio`
     set by product-card.liquid. The desktop @media block below then
     can't cleanly "cancel" back to the inline value, which previously
     collapsed full-width cards to 0 height on desktop. */
  @media (max-width: 768px) {
    .v-card--full-width .v-card__media,
    .v-grid > .v-card:only-of-type .v-card__media,
    .v-grid > .v-card:nth-of-type(5n+1):last-of-type .v-card__media,
    .v-grid > .v-card:nth-of-type(5n+3):last-of-type .v-card__media {
      aspect-ratio: 2 / 3 !important;
    }
  }
  .v-card--full-width .v-card__meta,
  .v-grid > .v-card:only-of-type .v-card__meta,
  .v-grid > .v-card:nth-of-type(5n+1):last-of-type .v-card__meta,
  .v-grid > .v-card:nth-of-type(5n+3):last-of-type .v-card__meta {
    padding-left: 20px;
    padding-right: 20px;
  }

  @media (min-width: 769px) {
    /* One grid for every surface: home, catalogue, albums, search, PDP
       recommendations. Tablet (769 to 1023) is 3-up, desktop (1024 and up)
       is 4-up site-wide (Aditya, 2026-09-09; it was locked at 3). The
       data-cols attribute is still emitted for any future per-surface
       override but every value renders the same count. Vertical 56-px gap
       between rows; column-gap and outer side padding are both 0 so the
       grid is completely flush to the viewport edges, exactly like the
       "Selected pieces" grid on the home page. */
    .v-grid,
    .v-grid[data-cols="3"],
    .v-grid[data-cols="4"],
    .v-grid[data-cols="5"],
    .v-grid[data-cols="6"] {
      grid-template-columns: repeat(3, 1fr);
      gap: 56px 0;
      padding: 0;
    }
  }
  @media (min-width: 1024px) {
    .v-grid,
    .v-grid[data-cols="3"],
    .v-grid[data-cols="4"],
    .v-grid[data-cols="5"],
    .v-grid[data-cols="6"] {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  @media (min-width: 769px) {
    /* Cancel mobile zigzag + alone-in-row full-width + every-5th feature
       card + only-of-type promotion - desktop is 3-up, every card
       flows naturally in the grid. */
    .v-grid > .v-card:nth-of-type(5n+3),
    .v-grid > .v-card:nth-of-type(5n+4),
    .v-grid > .v-card:nth-of-type(5n+1):last-of-type,
    .v-grid > .v-card:nth-of-type(5n+3):last-of-type,
    .v-grid > .v-card--full-width,
    .v-grid > .v-card:only-of-type {
      grid-column: auto;
    }
    /* No aspect-ratio cancel needed - the mobile 2:3 rule is now
       scoped inside @media (max-width: 768px) so desktop falls back
       to the per-product inline aspect-ratio from product-card.liquid
       naturally. */
  }
/* END_SNIPPET:grid-cards */

/* START_SNIPPET:image (INDEX:41) */
.image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

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

/* START_SNIPPET:load-more (INDEX:43) */
.v-loadmore {
    display: flex;
    justify-content: center;
    padding: var(--sp-6) var(--page-margin, 20px) 0;
  }
  .v-loadmore__btn {
    appearance: none;
    border: 1px solid var(--ink, #111);
    background: none;
    color: var(--ink, #111);
    border-radius: 999px;
    padding: 14px 34px;
    font-size: var(--type-12, 0.75rem);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color var(--motion-fast, .15s) ease-out,
                color var(--motion-fast, .15s) ease-out;
  }
  @media (hover: hover) {
    .v-loadmore__btn:hover { background: var(--ink, #111); color: var(--paper, #fff); }
  }
  .v-loadmore[data-busy] .v-loadmore__btn { opacity: 0.6; pointer-events: none; }
/* END_SNIPPET:load-more */

/* START_SNIPPET:mobile-nav (INDEX:45) */
.v-menu {
    --nav-bottom-gap: 64px;
    --nav-deck-height: 56px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    margin: 0;
    max-width: min(500px, calc(100vw - 40px));
    max-height: calc(100dvh - var(--nav-bottom-gap) - var(--nav-deck-height) - 36px - env(safe-area-inset-bottom));
    width: min(500px, calc(100vw - 40px));
    height: auto;
    background:
      linear-gradient(180deg, rgba(10, 10, 10, 0.58), rgba(10, 10, 10, 0.34));
    color: #fff;
    position: fixed;
    inset: auto auto calc(var(--nav-bottom-gap) + var(--nav-deck-height) + 10px + env(safe-area-inset-bottom)) 50%;
    border-radius: 28px;
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    backdrop-filter: blur(22px) saturate(150%);
    overflow: hidden;
    transform: translateX(-50%);
  }
  .v-menu::backdrop { background: rgba(0, 0, 0, 0.08); }
  .v-menu[open] {
    animation: v-menu-rise var(--motion-base) var(--ease-out);
  }
  @keyframes v-menu-rise {
    from { opacity: 0; transform: translateX(-50%) translateY(18px) scale(0.98); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  }

  .v-menu__inner {
    display: flex;
    flex-direction: column;
    height: auto;
    max-height: inherit;
    overflow-y: auto;
    padding: 16px 18px 18px;
  }
  .v-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .v-menu__brand {
    display: inline-flex;
    align-items: center;
    color: #fff;
    text-decoration: none;
  }
  .v-menu__brand svg {
    display: block;
    height: 1.3rem;
    width: auto;
    color: #fff;
  }
  .v-menu__close {
    background: none;
    border: 0;
    font-size: var(--type-16);
    padding: var(--sp-2);
    color: #fff;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
  }@media (hover: hover){
  .v-menu__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }}
  .v-menu__nav {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    flex: 0 1 auto;
  }
  .v-menu__link {
    display: block;
    padding: 13px 2px;
    font-size: var(--type-16);
    font-weight: 400;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
  }@media (hover: hover){
  .v-menu__link:hover { opacity: 0.6; }}
  .v-menu__link--small {
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    border: 0;
    padding: 0;
  }
  .v-menu__foot {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  @media (max-width: 768px) {
    .v-menu {
      --nav-bottom-gap: 20px;
      --nav-deck-height: 54px;
      width: calc(100vw - 40px);
      max-width: calc(100vw - 40px);
      border-radius: 24px;
    }
  }
/* END_SNIPPET:mobile-nav */

/* START_SNIPPET:pdp-sheet (INDEX:47) */
@media (max-width: 900px) {
    /* The dark glass sheet floats with 16-px side insets and a 20-px
       bottom inset - `backdrop-filter` glass is kept OFF every screen
       edge so iOS Safari doesn't drop `viewport-fit=cover` (known
       iOS bug: glass elements at the viewport edge break the
       page's safe-area extension). Solid (non-glass) `#0A0A0A` is
       painted across the bottom by `body.template-product::after`
       in critical.css; the sheet sits ON TOP of that solid layer
       (z-90 over z-89), so the visible bottom edge is always a
       reliably-rendered solid colour and the glass appears as a
       floating pill above it. Full 32-px border-radius (no flat
       bottom corners) since the sheet is no longer flush. */
    .v-pdp__right[data-pdp-sheet] {
      /* One value for the sheet's horizontal inset, so the gap under the
         Add to bag button in the sized state cannot drift away from the
         gap either side of it. Change it here and all three move. */
      --sheet-pad-x: 24px;
      --sheet-h-compact: 127px;
      --sheet-h-sized: 271px;
      --sheet-h-extended: min(626px, 80vh);
      position: fixed;
      top: auto;
      /* Use explicit `width: calc(100% - 32px)` + only `left: 16px`
         instead of `left: 16px; right: 16px; width: auto`. iOS Safari
         resolves `width: auto` from `left/right` differently across
         versions which can leave a 1-2 px asymmetry on the right edge.
         Calculating width explicitly forces exact 16 px on both sides. */
      left: 16px;
      right: auto;
      /* 20-px from the bottom of the screen on mobile per user spec
         and matching the reference's floating bottom treatment. */
      bottom: 20px;
      max-width: none;
      width: calc(100% - 32px);
      box-sizing: border-box;
      height: var(--sheet-h-compact);
      margin: 0;
      /* Figma 2999:3760 / 3774 / 3804 all carry the SAME box: `pt-[8px]
         px-[24px] pb-[24px]`, radius 40. All three states inherit it here
         and none of them override it any more. */
      padding: 8px var(--sheet-pad-x) 24px;
      /* Dark glass. The surface values are the ones this sheet always had
         and that were tuned against the media above it; what is NOT rolled
         back is the structure the light pass brought in - the 1px hairline
         instead of a drop shadow, and the gradient ring on `::after`.

         `--tz-stroke` is left at its `:root` value on purpose: that ramp is
         WHITE, which is what a dark surface wants. `--tz-stroke-ink` is the
         black one, and it is for light surfaces only. */
      /* The bag button's fill, verbatim: `--tz-bag` is `rgba(0,0,0,0.75)`
         with white ink and a white 16% rim, taken down to 50% per Aditya.
         A flat black reads as one
         solid object where the old two-stop gradient read as a pane that
         was lit from somewhere. */
      background: rgba(0, 0, 0, 0.5);
      -webkit-backdrop-filter: blur(50px);
      backdrop-filter: blur(50px);
      border: 0;
      border-radius: 40px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
      color: #fff;
      isolation: isolate;
      overflow: hidden;
      transform: none;
      transition: height 360ms cubic-bezier(0.22, 1, 0.36, 1);
      will-change: height;
      z-index: 90;
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    /* NO `::after` gradient ring on this element, deliberately.

       The sheet is the SCROLLER in its extended state (`overflow-y: auto`),
       and an absolutely-positioned ring inside a scroll container scrolls
       with the content - which is exactly what Aditya saw: the stroke
       drifting down over the accordions instead of staying on the frame.

       The flat `inset 0 0 0 1px` hairline in the rule above does not have
       that problem: an inset shadow paints against the BORDER BOX and is
       unaffected by scroll position. So the sheet carries one edge, not
       two, and it is the one that stays put. Putting the gradient back
       means moving `overflow-y` off this element onto an inner wrapper
       first. */

    /* `auto` with a floor, not a fixed height. At a fixed 127px a two-line
       title plus the price overran the box, and `overflow: hidden` ate the
       bottom padding - which is what made the blob look padding-less at the
       bottom. The sized state already sizes this way. */
    body[data-pdp-sheet-state="compact"]  .v-pdp__right[data-pdp-sheet] { height: auto; min-height: var(--sheet-h-compact); padding-top: 8px; }
    /* The sized state HUGS ITS CONTENT. It used to be pinned to a flat
       251px, which is why the gap under the Add to bag button kept
       changing: a one-line product title left slack at the bottom and a
       two-line title ate it, so the same rule produced a different gap on
       every product. Nothing about that state has a fixed size any more,
       and the bottom padding is now the SAME `--sheet-pad-x` as the left
       and right, so the space under the button reads as one continuous
       inset around the whole button rather than a tighter band beneath it.

       `compact` and `extended` keep their fixed heights: compact has no
       ATC button at all (it is the round +), and extended pins its ATC
       with `position: sticky; bottom: 0`, so neither measures this way. */
    body[data-pdp-sheet-state="sized"]    .v-pdp__right[data-pdp-sheet] { height: auto; padding-top: 8px; padding-bottom: var(--sheet-pad-x); }

    /* Height cannot normally animate to or from `auto`, so the slide into
       the sized state would snap. Where the browser supports interpolating
       intrinsic sizes it animates as it always did; everywhere else it
       simply arrives, which is the correct trade for a gap that was
       visibly wrong on half the catalogue. */
    @supports (interpolate-size: allow-keywords) {
      :root { interpolate-size: allow-keywords; }
    }
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] {
      /* Was a FIXED `--sheet-h-extended`, so a product with short accordions
         left dead space under the last element. Height follows the content
         and the old value becomes the ceiling. */
      height: auto;
      max-height: var(--sheet-h-extended);
      padding-top: 8px;
      overflow-y: auto;
      overscroll-behavior: contain;
    }

    body[data-pdp-sheet-state="extended"] {
      overflow: hidden;
      touch-action: none;
    }
    body[data-pdp-sheet-state="extended"] .v-pdp__media,
    body[data-pdp-sheet-state="extended"] .v-pdp__model-stage {
      pointer-events: none;
    }

    .v-pdp__sheet-handle {
      align-self: stretch;
      width: 100%;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      cursor: grab;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 auto;
      touch-action: none;
      min-height: 7px;
      color: #fff;
      letter-spacing: 0 !important;
      text-transform: none !important;
      font-size: 0 !important;
    }
    .v-pdp__sheet-handle:active, .v-pdp__sheet-handle:focus, .v-pdp__sheet-handle:focus-visible{
      background: transparent !important;
      color: #fff !important;
      outline: none !important;
      box-shadow: none !important;
      opacity: 1 !important;
    }@media (hover: hover){.v-pdp__sheet-handle:hover{
      background: transparent !important;
      color: #fff !important;
      outline: none !important;
      box-shadow: none !important;
      opacity: 1 !important;
    }}
    .v-pdp__sheet-grab { width: 28px; height: 7px; display: block; }
    body[data-pdp-sheet-state="extended"] .v-pdp__sheet-grab { transform: scaleY(-1); }

    /* One value, all three states: the sheet's outer column is `gap-[16px]`
       in every Figma frame (2999:3760, 3774, 3804), between the grabber row
       and the content below it. Sized and extended were on 12. */
    body[data-pdp-sheet-state="compact"] .v-pdp__sheet-handle,
    body[data-pdp-sheet-state="sized"] .v-pdp__sheet-handle,
    body[data-pdp-sheet-state="extended"] .v-pdp__sheet-handle { margin-bottom: 16px; }

    body[data-pdp-sheet-state="sized"] .v-pdp__sheet-sized-title { margin-bottom: 4px; }
    body[data-pdp-sheet-state="sized"] .v-pdp__price-row { margin-bottom: 16px; }

    /* Figma 2999:3810 - the head block and the price/size/ATC block sit
       `gap-[16px]` apart, not 8. */
    body[data-pdp-sheet-state="extended"] .v-pdp__sheet-head { margin-bottom: 16px; }
    body[data-pdp-sheet-state="extended"] .v-pdp__price-row { margin-bottom: 16px; }

    /* Form (sized + extended): flex column with explicit 16-px gap so
       sizes and ATC sit exactly 16 px apart per Figma 172:778 (Frame 58
       end y=108 → Frame 63 ATC start y=124). Overrides the desktop
       `.v-pdp__right .v-pdp__form { gap: var(--sp-5) }` rule that was
       leaking ~24-px gap into mobile. `margin-bottom: 0` so the form
       butts cleanly against whatever follows (accordions in extended
       use their own `margin-top: 32`). */
    body[data-pdp-sheet-state="sized"]    .v-pdp__right[data-pdp-sheet] .v-pdp__form,
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] .v-pdp__form {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 0;
    }
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] .v-pdp__accordions { margin-top: 32px; margin-bottom: 32px; }
    body[data-pdp-sheet-state="extended"] .v-pdp__sheet-specs-title { margin-bottom: 12px; }
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc { margin-bottom: 16px; }

    .v-pdp__right[data-pdp-sheet] > * { padding-left: 0; padding-right: 0; }

    .v-pdp__sheet-compact-row {
      width: 100%;
      display: flex;
      /* Figma 2999:3763: `gap-[12px] items-start`. The plus is a fixed 64
         against a 72-tall text block, so it hangs from the TOP of the row -
         centring it (what was here) drops it 4px and unbalances the title. */
      gap: 12px;
      align-items: flex-start;
      flex: 0 0 auto;
    }
    .v-pdp__sheet-compact-text {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      /* 4px in COMPACT, per Aditya - the expanded state keeps its 8. The
         compact pair is tighter type in a shorter box, so the same gap read
         as looser there. */
      gap: 4px;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
      outline-offset: 4px;
    }
    .v-pdp__sheet-compact-text:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.6);
      border-radius: 4px;
    }
    /* Figma 2999:3765: Helvetica Neue REGULAR 16 / 20, tracking -0.16px
       (-0.01em), 2-line clamp. The compact and sized titles share this
       exact spec; only the extended one steps up to 20 / 28. */
    .v-pdp__sheet-compact-title {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: -0.01em;
      color: #fff;
      /* Full width of the text column, which is itself `flex: 1 1 0` inside
         the row - so the title runs to the sheet's padding on both sides. */
      width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
    }
    .v-pdp__sheet-compact-price {
      display: inline-flex;
      align-items: flex-start;
      gap: 4px;
      white-space: nowrap;
      margin: 0;
    }
    /* ── In-flow Add to bag, under the accordions ────────────────────
       The sticky sheet is glass over the media; this one sits in the page
       at the end of the reading flow, for the customer who has scrolled
       through the accordions and is ready. Solid black, per Aditya - a
       translucent button in normal flow has nothing to refract. */
    .v-pdp__atc-inflow {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      /* 64, matching the blob's ATC exactly - they are the same action and
         should not be two different sizes on one page. */
      height: 64px;
      min-height: 64px;
      margin: 24px 0 8px;
      padding: 0 24px;
      border: 0;
      border-radius: 999px;
      background: #000;
      color: #fff;
      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1;
      text-transform: none;
      cursor: pointer;
    }
    /* The theme reset restyles every bare `button` on hover and latches it
       after a tap on touch, so every state is restated. */
    .v-pdp__atc-inflow,
    .v-pdp__atc-inflow:focus,
    .v-pdp__atc-inflow:active { background: #000; color: #fff; outline: none; }
    @media (hover: hover) {
      .v-pdp__atc-inflow:hover { background: #1f1f1f; color: #fff; }
    }
    .v-pdp__atc-inflow:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

    /* The old "compact is 2px under expanded" pair used to live here (title
       18/22, price 18/26). Figma 2999:3760 overrides both: the title steps
       16 -> 20 between compact and extended, and the PRICE DOES NOT STEP AT
       ALL - it is 20 / 28 in all three states. So there is nothing left to
       override, only the transition to keep. */
    .v-pdp__sheet-compact-title {
      transition: font-size 360ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* `.v-pdp__acc-link` is `color: var(--ink)` from sections/product.liquid -
       black, which is correct on the desktop column and invisible inside
       this dark sheet. White and bold here. */
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-link {
      color: #fff;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    @media (hover: hover) {
      .v-pdp__right[data-pdp-sheet] .v-pdp__acc-link:hover { color: #fff; opacity: 0.7; }
    }

    /* Same reason as the link above: the pill is ink-on-paper on the desktop
       column and invisible on this dark sheet. */
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-more {
      color: #fff;
      border-color: rgba(255, 255, 255, 0.45);
    }
    @media (hover: hover) {
      .v-pdp__right[data-pdp-sheet] .v-pdp__acc-more:hover { background: #fff; color: #111; }
    }

    .v-pdp__sheet-plus {
      flex: 0 0 auto;
      /* A real square again. `align-self: stretch` + `aspect-ratio` does NOT
         work here and that is why it stopped being round: in a ROW flex
         container the main size (width) resolves from flex-basis before the
         cross size (height) is known, so `width: auto` fell back to the
         24px icon and the stretch made it a tall lozenge. A definite pair is
         the only reliable answer, and 56 is the site's control size - the
         dock, the FABs and the pane close buttons are all 56. */
      /* Top of the row, per Figma 2999:3770 (y=0 inside a 72-tall row). */
      align-self: flex-start;
      /* A FLAT 64, straight off Figma 2999:3770 (`size-[64px]`).
         This replaces the ResizeObserver that used to measure the title +
         price block and publish `--tz-plus-size`: the design fixes the
         circle rather than deriving it, so the measurement was producing 72
         where the spec says 64. Nothing reads that variable any more. */
      width: 64px;
      height: 64px;
      border-radius: 999px;
      border: 0 !important;
      background: #fff !important;
      color: #000 !important;
      padding: 0 !important;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      letter-spacing: 0 !important;
      text-transform: none !important;
      font-size: 0 !important;
      transition: transform 180ms ease-out;
    }
    .v-pdp__sheet-plus:focus{ background: #fff !important; color: #000 !important; transform: scale(1.04); }@media (hover: hover){.v-pdp__sheet-plus:hover{ background: #fff !important; color: #000 !important; transform: scale(1.04); }}
    .v-pdp__sheet-plus:active { transform: scale(0.98); }
    .v-pdp__sheet-plus svg { width: 24px; height: 24px; display: block; color: #000; }

    .v-pdp__sheet-head {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 0 0 auto;
      max-width: none;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-eyebrow {
      font-family: 'WDXL Lubrifont JP N', 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: rgba(255, 255, 255, 0.65);
      letter-spacing: 2px;
      margin: 0;
      text-transform: uppercase;
      /* A `<span>` wrapping [gender][dot][category-link] - only the
         category is a destination. Flex so the dot sits on the text's
         optical centre rather than its baseline. */
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      /* Figma 2999:3813 - `gap-[6px]` either side of the 2px dot. */
      gap: 6px;
      /* Three segments now (gender, category, type). "Unisex • Sweatpants •
         Loose-Fit Sweatpants" is wider than a 375 sheet, so let it wrap. */
      flex-wrap: wrap;
      transition: color 180ms ease-out;
    }@media (hover: hover){
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-eyebrow-link:hover {
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 2px;
    }}
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-eyebrow-link {
      color: inherit;
      text-decoration: none;
    }
    /* 2em at half the leading, the same arithmetic the card and main-PDP
       dots use: the glyph doubles, the box stays 1em, the row does not grow. */
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-eyebrow-dot {
      font-size: 2em;
      line-height: 0.5;
      opacity: 0.55;
    }

    /* Figma 2999:3824 - HN REGULAR 20 / 28, tracking -0.2px. The extended
       state is the only one that promotes the title; 28 is the design's
       leading, not the 24 that was guessed here to tighten a two-line wrap. */
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-title {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 20px;
      line-height: 28px;
      color: #fff;
      margin: 0;
      letter-spacing: -0.01em;
      /* `h1..h6 { text-wrap: balance }` in assets/critical.css evens the
         lines out, which is exactly what stops a heading reaching the
         container edge - it shortens the long line on purpose.

         MUST be `wrap`, NOT `normal`. `normal` is not a valid `text-wrap`
         value in Chrome: the declaration is DROPPED at parse time and the
         computed value stays `balance`, so the "fix" that was here did
         nothing at all. Measured in Chrome 152 on this exact rule pair:
         with `normal` the first line came out 189.1px, with `wrap` it is
         254.8px inside the same 310px box. */
      text-wrap: wrap;
      /* The three states show three different ELEMENTS, so a font-size
         transition cannot tween across the swap - this smooths a resize
         within a state (orientation change, font swap), not the state
         change itself. A true interpolation needs the compact and expanded
         titles merged into one node. */
      transition: font-size 360ms cubic-bezier(0.22, 1, 0.36, 1);
      overflow: visible;
      white-space: normal;
      word-break: break-word;
    }
    /* The JP mirror is a SECOND LINE OF THE SAME NAME, not a paragraph, so
       it gets exactly one line and ellipsises. Two lines of kana under a
       two-line Latin title pushed the price down and made the head block
       read as four lines of title.

       `nowrap` + `text-overflow` rather than a `-webkit-line-clamp: 1`:
       clamping needs `display: -webkit-box`, which would drop the element
       out of the head's flex column. `max-width: none` beats the theme
       reset's `p { max-width: 68ch }`, which would otherwise cut the line
       short of the sheet's padding. */
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-title-jp {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      color: #fff;
      margin: 0;
      width: 100%;
      max-width: none;
      height: auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: normal;
      letter-spacing: 0;
    }

    /* Figma 2999:3779 - identical to the compact title: HN Regular 16 / 20,
       tracking -0.16px. The sized and compact states show the same name at
       the same size; only extended promotes it. */
    .v-pdp__sheet-sized-title {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 20px;
      letter-spacing: -0.01em;
      color: #fff;
      margin: 0;
      width: 100%;
      max-width: none;
      /* Same `text-wrap: balance` trap as the extended title, and the same
         correction: `wrap`, never `normal` - Chrome drops `normal` as an
         invalid value and leaves the computed style on `balance`. */
      text-wrap: wrap;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      flex: 0 0 auto;
    }

    .v-pdp__price-row {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex: 0 0 auto;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__price {
      margin: 0;
      padding: 0;
      display: inline-flex;
      align-items: flex-start;
      gap: 4px;
      color: #fff;
    }

    /* ── Price typography - pixel-perfect to Figma 172:554-557 (Frame 60).
       Frame 60 is 106 × 24. Children:
         • INR    @ x=0,  y=3, 12 × 20 - font 9.03/20 WDXL Lubrifont JP N
                  Regular, color rgba(255, 255, 255, 0.65)
         • 2,499  @ x=16, y=0, 41 × 24 - font 16/24 Helvetica Neue Medium,
                  color #fff
         • /¥9246 @ x=61, y=6, 45 × 16 - font 12/16 Helvetica Neue Regular,
                  color #fff
       `align-items: flex-start` + per-child `margin-top` locks the y
       positions exactly. 4-px gap between siblings (matches 16-12 and
       61-57 from the Figma frame). ── */
    /* Figma 2999:3767 is `items-baseline gap-[4px]`. It was `flex-start` +
       a hand-tuned `margin-top` on the yen figure, which only lines up at
       one pair of font sizes; baseline alignment is the rule the design
       actually states and it survives a locale that changes the leading. */
    .v-pdp__sheet-compact-price .v-price,
    .v-pdp__right[data-pdp-sheet] .v-price {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      white-space: nowrap;
    }
    .v-pdp__sheet-compact-price .v-price__current,
    .v-pdp__right[data-pdp-sheet] .v-price__current {
      display: inline-flex;
      align-items: baseline;
      /* ZERO. In Figma "₹2,499" is a single text run (2999:3829), so the
         only space between symbol and figure is the font's own sidebearing.
         The 2px that was here added a gap the design does not have. */
      gap: 0;
    }
    .v-pdp__sheet-compact-price .v-price *,
    .v-pdp__right[data-pdp-sheet] .v-price * { color: #fff; }

    /* The symbol is PART OF THE FIGURE, not a label on it. It was 9.03px
       WDXL at 65% white nudged 3px down, which rendered as a small syllable
       floating to the left of the price rather than as the currency of it.
       Same face, size, weight, colour and baseline as the number now - the
       only difference left is the glyph. */
    .v-pdp__sheet-compact-price .v-price__cur,
    .v-pdp__right[data-pdp-sheet] .v-price__cur {
      font-family: 'Helvetica Neue', sans-serif !important;
      font-weight: 500;
      /* +4 per Aditya. Symbol and figure move together - they are one run
         of text, so sizing only one of them would re-open the gap that was
         just closed. */
      font-size: 20px;
      line-height: 28px;
      color: #fff;
      /* Figma 2999:3829: tracking -0.4px on 20px = -0.02em. */
      letter-spacing: -0.02em;
      align-self: baseline;
      margin-top: 0;
    }
    /* 2,499 - Figma 2999:3829, HN Medium 20 / 28, tracking -0.4px, white. */
    .v-pdp__sheet-compact-price .v-price__num,
    .v-pdp__right[data-pdp-sheet] .v-price__num {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 500;
      /* +4 per Aditya. Symbol and figure move together - they are one run
         of text, so sizing only one of them would re-open the gap that was
         just closed. */
      font-size: 20px;
      line-height: 28px;
      color: #fff;
      letter-spacing: -0.02em;
      align-self: baseline;
      margin-top: 0;
    }
    /* /¥9246 - Figma 2999:3830, HN Regular 12 / 16, tracking -0.24px, on
       the SAME BASELINE as the figure. It was 14 / 18 nudged down 6px. */
    .v-pdp__sheet-compact-price .v-price__compare,
    .v-pdp__right[data-pdp-sheet] .v-price__compare,
    .v-pdp__sheet-compact-price .v-price__jp,
    .v-pdp__right[data-pdp-sheet] .v-price__jp {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: #fff;
      letter-spacing: -0.02em;
      align-self: baseline;
      margin-top: 0;
    }

    /* Size guide trigger lives inline at the right edge of the price row.
       The desktop default (in product.liquid) hides this with `display:
       none` so it doesn't leak into the desktop side panel - we have to
       re-enable it explicitly on mobile or it stays invisible inside
       the sized/extended price row. */
    /* Figma 2999:3831 - "Size Guide" HN Medium 14 / 20, tracking -0.28px,
       underlined, then a 2px gap and a 16px chevron. The chevron is the
       `Icons/Dropdown` instance rotated to point right. */
    .v-pdp__sheet-size-guide {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      flex: 0 0 auto;
      background: transparent !important;
      border: 0 !important;
      padding: 0 !important;
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      color: #fff !important;
      text-decoration: underline;
      text-decoration-style: solid;
      cursor: pointer;
      letter-spacing: -0.02em !important;
      text-transform: none !important;
    }
    /* The chevron is NOT underlined - only the words are, per the design,
       so the mark sits outside the underlined run. `max-width: none` beats
       the theme reset's `svg { max-width: 100% }`. */
    .v-pdp__sheet-size-guide__chev {
      display: block;
      flex: 0 0 auto;
      width: 16px;
      height: 16px;
      max-width: none;
      text-decoration: none;
      /* The source glyph is a caret pointing DOWN; -90deg turns it to the
         right, which is the orientation in the frame. */
      transform: rotate(-90deg);
    }@media (hover: hover){
    .v-pdp__sheet-size-guide:hover { opacity: 0.7; background: transparent !important; color: #fff !important; }}

    .v-pdp__right[data-pdp-sheet] .v-pdp__form { flex: 0 0 auto; width: 100%; }
    .v-pdp__right[data-pdp-sheet] .v-pdp__option-values {
      display: flex;
      gap: 4px;
      width: 100%;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__swatch {
      flex: 1 0 0;
      min-width: 0;
      /* Figma 2999:3837 - `h-[48px]`. These were 40. */
      height: 48px;
      padding: 8px 24px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.25);
      background: transparent;
      color: #fff;
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
      letter-spacing: 0;
      text-transform: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }@media (hover: hover){
    .v-pdp__right[data-pdp-sheet] .v-pdp__swatch:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }}
    .v-pdp__right[data-pdp-sheet] .v-pdp__swatch.is-selected {
      background: #fff;
      color: #000;
      border-color: #fff;
    }

    .v-pdp__right[data-pdp-sheet] .v-pdp__cart-action {
      width: 100%;
      flex: 0 0 auto;
      margin-top: 0;
      display: flex;
      gap: 0;
      min-height: 64px;
      overflow: visible;
      z-index: 5;
      box-sizing: border-box;
    }
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] .v-pdp__cart-action {
      position: sticky;
      bottom: 0;
      padding: 0;
      background: transparent;
    }
    /* Pre-add: ATC fills the row. `flex: 1 1 0` (basis 0, grow 1)
       lets the post-add flex-grow swap to 3 cleanly so the "Visit bag"
       pill on the right has a known share of the row. */
    .v-pdp__right[data-pdp-sheet] .v-pdp__atc--main {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      height: 64px;
      min-height: 64px;
      padding: 8px 24px;
      border-radius: 999px;
      background: #fff;
      color: #000;
      border: 1px solid #fff;
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 500;
      /* +2 per Aditya, matched by the in-flow button under the
         accordions - the same action should not be two sizes on one page. */
      font-size: 16px;
      line-height: 20px;
      /* Figma 2999:3850 - tracking -0.32px on 16px = -0.02em. */
      letter-spacing: -0.02em;
      text-transform: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      /* Smoother shrink - slightly longer duration + transition every
         flex sub-property so browsers that handle them individually
         (Safari) animate cleanly instead of snapping. */
      will-change: flex-grow, opacity;
      transition:
        flex-grow 480ms cubic-bezier(0.32, 0.72, 0, 1),
        flex-basis 480ms cubic-bezier(0.32, 0.72, 0, 1),
        padding 480ms cubic-bezier(0.32, 0.72, 0, 1),
        background-color 320ms ease-out,
        color 320ms ease-out,
        opacity 320ms ease-out;
    }@media (hover: hover){
    .v-pdp__right[data-pdp-sheet] .v-pdp__atc--main:hover { background: rgba(255, 255, 255, 0.92); color: #000; }}
    .v-pdp__right[data-pdp-sheet] .v-pdp__atc--main:disabled { opacity: 0.5; }

    /* Mobile cart-link "Visit bag" pill - collapsed to flex:0 0 0 with
       a 24-px right offset in the pre-add state. Post-add, flex-grow
       rises from 0 → 7 and translateX(24px) → 0 so the pill glides in
       from the right and settles into its 70 % slot. The longer 480-ms
       duration + matching transition curve on every animatable property
       makes the swap feel like one fluid motion instead of separate
       jumps. */
    .v-pdp__right[data-pdp-sheet] .v-pdp__cart-link {
      flex: 0 0 0;
      width: 0;
      min-width: 0;
      height: 64px;
      min-height: 64px;
      padding: 0;
      background: #fff;
      border: 1px solid #fff;
      color: #000;
      border-radius: 999px;
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 500;
      font-size: 14px;
      line-height: 20px;
      letter-spacing: 0;
      text-transform: none;
      box-sizing: border-box;
      overflow: hidden;
      opacity: 0;
      transform: translateX(24px);
      pointer-events: none;
      margin-left: 0;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      will-change: flex-grow, transform, opacity;
      transition:
        flex-grow 480ms cubic-bezier(0.32, 0.72, 0, 1),
        flex-basis 480ms cubic-bezier(0.32, 0.72, 0, 1),
        width 480ms cubic-bezier(0.32, 0.72, 0, 1),
        padding 480ms cubic-bezier(0.32, 0.72, 0, 1),
        margin-left 480ms cubic-bezier(0.32, 0.72, 0, 1),
        transform 480ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 320ms ease-out 80ms;
    }@media (hover: hover){
    .v-pdp__right[data-pdp-sheet] .v-pdp__cart-link:hover { background: rgba(255, 255, 255, 0.92); color: #000; }}
    .v-pdp__right[data-pdp-sheet] .v-pdp__cart-link svg { color: #000; }
    .v-pdp__right[data-pdp-sheet] .v-pdp__cart-action.is-added .v-pdp__cart-link {
      flex: 7 1 0;
      width: auto;
      padding: 0 24px;
      margin-left: 8px;
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    /* Post-add: ATC shrinks to a 30 % faded "Added ✓" pill on the left.
       Mobile keeps the white pill at 50 % opacity on the dark glass - the
       desktop #F8F8F8 / #808080 combo would lose contrast here. */
    .v-pdp__right[data-pdp-sheet] .v-pdp__cart-action.is-added .v-pdp__atc--main {
      flex: 3 1 0;
      width: auto;
      min-width: 0;
      background: #fff;
      color: #000;
      border-color: #fff;
      opacity: 0.5;
      cursor: default;
    }@media (hover: hover){
    .v-pdp__right[data-pdp-sheet] .v-pdp__cart-action.is-added .v-pdp__atc--main:hover {
      background: #fff;
      color: #000;
    }}

    .v-pdp__right[data-pdp-sheet] .v-pdp__accordions {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 24px;
      flex: 0 0 auto;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc { border: 0; background: transparent; }@media (hover: hover){
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc--button:hover { background: transparent; color: #fff; }}
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0;
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #fff;
      letter-spacing: 0;
      text-transform: none;
      list-style: none;
      gap: 12px;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-summary > span { color: #fff; }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-label {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-lucide {
      display: block;
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      color: #fff;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-body {
      padding: 8px 0 0 32px;
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: rgba(255, 255, 255, 0.75);
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-body p { margin: 0; color: rgba(255, 255, 255, 0.75); }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-icon { width: 20px; height: 20px; }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-icon::before,
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-icon::after { background: #fff; width: 12px; height: 1px; }
    .v-pdp__right[data-pdp-sheet] .v-pdp__acc-icon::after  { width: 1px; height: 12px; }

    .v-pdp__sheet-specs-title {
      font-family: 'WDXL Lubrifont JP N', 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: rgba(255, 255, 255, 0.65);
      letter-spacing: 2px;
      margin: 0;
      text-transform: uppercase;
      width: 100%;
      flex: 0 0 auto;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc {
      width: 100%;
      flex: 0 0 auto;
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: #fff;
      padding: 0;
      overflow: visible;
    }
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc *,
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc p { color: #fff !important; }
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc strong,
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc b { font-weight: 500; }
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc p { margin: 0 0 12px; word-break: break-word; }
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc p:last-child { margin: 0; }

    .v-pdp__sheet-compact-row,
    .v-pdp__sheet-sized-title,
    .v-pdp__sheet-head,
    .v-pdp__price-row,
    .v-pdp__sheet-specs-title,
    .v-pdp__right[data-pdp-sheet] .v-pdp__form,
    .v-pdp__right[data-pdp-sheet] .v-pdp__cart-action,
    .v-pdp__right[data-pdp-sheet] .v-pdp__accordions,
    .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc { display: none; }

    body[data-pdp-sheet-state="compact"] .v-pdp__sheet-compact-row { display: flex; }

    body[data-pdp-sheet-state="sized"] .v-pdp__sheet-sized-title { display: -webkit-box; }
    body[data-pdp-sheet-state="sized"] .v-pdp__price-row  { display: flex; }
    body[data-pdp-sheet-state="sized"] .v-pdp__right[data-pdp-sheet] .v-pdp__form { display: flex; }
    body[data-pdp-sheet-state="sized"] .v-pdp__right[data-pdp-sheet] .v-pdp__cart-action { display: flex; }

    body[data-pdp-sheet-state="extended"] .v-pdp__sheet-head { display: flex; }
    body[data-pdp-sheet-state="extended"] .v-pdp__price-row  { display: flex; }
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] .v-pdp__form { display: flex; }
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] .v-pdp__cart-action { display: flex; }
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] .v-pdp__accordions { display: flex; }
    body[data-pdp-sheet-state="extended"] .v-pdp__sheet-specs-title { display: block; }
    body[data-pdp-sheet-state="extended"] .v-pdp__right[data-pdp-sheet] .v-pdp__sheet-desc { display: block; }
  }

  /* The in-flow button's styling lives inside the `max-width: 900px` block
     with the rest of the sheet, so above that it would paint as a bare
     `button` with the theme reset's border and uppercase text. Hidden
     outright: on desktop the full form is already on screen beside the
     media, so a second Add to bag is the same control twice. */
  @media (min-width: 901px) {
    .v-pdp__atc-inflow { display: none !important; }
  }


  /* The struck reference price on the main PDP, +2 to follow the figure.
     Scoped to `.v-pdp__price` so the product cards, which have their own
     scale, are untouched. */
  .v-pdp__price .v-price__jp { font-size: 15px; }
  @media (max-width: 900px) {
    .v-pdp__price .v-price__jp { font-size: 14px; }
  }
/* END_SNIPPET:pdp-sheet */

/* START_SNIPPET:pdp-specs (INDEX:48) */
/* ── Specification grid ──────────────────────────────────────────────
     Two columns, and a <dl> because that is what this is: a list of terms
     and their definitions. The visual pairing is done with a wrapper per
     row so the key and its value can never be split across the column
     break the way a bare dt/dt/dd/dd sequence would. */
  .v-pdp__specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
    margin: 24px 0 0;
    padding: 0;
  }
  /* The disc sits to the LEFT of the pair and is exactly as tall as the
     pair is: caption line-box (14) + the gap under it (3) + value line-box
     (20) = 37px. Stated as a sum rather than a round number so it stays
     true if any of the three is retuned. */
  .v-pdp__spec {
    position: relative;
    min-width: 0;
    padding-left: calc(37px + 10px);
    min-height: 37px;
  }
  .v-pdp__spec-disc {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: calc(14px + 3px + 20px);
    height: calc(14px + 3px + 20px);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    /* The glyph inherits this: the svg strokes on `currentColor`, so the
       disc's colour is the icon's colour. #666 keeps it a quiet marker
       against the value beside it rather than competing with it. */
    color: #666;
  }

  /* The WDXL caption face, same treatment the rest of the site gives a
     label. `.font-jp` carries the family; the size and tracking are the
     caption scale. */
  .v-pdp__spec-key {
    display: block;
    margin: 0 0 3px;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-mute, rgba(0, 0, 0, 0.5));
  }

  /* Helvetica, title case. `capitalize` rather than retyping the values:
     Shopify writes them in sentence case ("Machine washable"), and the
     labels are the taxonomy's, so casing them here keeps this file from
     becoming a second copy of Shopify's vocabulary that can drift. */
  .v-pdp__spec-val {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.01em;
    text-transform: capitalize;
    color: var(--ink, #000);
    overflow-wrap: anywhere;
  }

  /* The theme resets `img, picture, video, canvas, svg { max-width: 100% }`,
     which clamps an svg to its content box and beats an explicit width. */
  /* The theme resets `img, picture, video, canvas, svg { max-width: 100% }`,
     which clamps an svg to its content box and beats an explicit width. */
  .v-pdp__spec-icon {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    max-width: none;
  }

  /* M-WEB ONLY. The desktop layout already states all of this in the
     right-hand column, so the grid is redundant there.

     This lives HERE, not in `sections/product.liquid`, and that is the
     whole point: a media query adds NO specificity, so an identical
     `.v-pdp__specs` selector anywhere later in the compiled stylesheet
     beats it. The hide rule used to sit in product.liquid and compiled
     ~61KB EARLIER than this file's own `display: grid`, which quietly won
     and kept the grid on screen. Keeping both in one file makes source
     order the guarantee. */
  @media (min-width: 990px) {
    .v-pdp__specs { display: none; }
  }

  /* Inside the PDP description shell the type is set on grey at #666, so
     the value takes the darker ink and the key stays quieter than it. */
  .v-pdp__desc-shell .v-pdp__spec-val { color: #1a1a1a; }
  .v-pdp__desc-shell .v-pdp__spec-key { color: #8a8a8a; }
/* END_SNIPPET:pdp-specs */

/* START_SNIPPET:product-card (INDEX:49) */
.v-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    color: var(--ink);
    text-decoration: none;
  }@media (hover: hover){
  .v-card:hover { opacity: 1; }}

  .v-card__media {
    position: relative;
    width: 100%;
    background-color: var(--paper-2);
    overflow: hidden;
  }

  /* The legacy desktop hover-stack (cross-fade between two images) has
     been replaced site-wide by the same horizontal carousel + slider
     used on mobile. The hover-stack markup still renders for back-
     compat but is hidden via `.v-card__hover-stack { display: none }`
     in the carousel block below. */

  /* ---------- Carousel (used on every viewport) ---------- */
  .v-card__scroll {
    display: flex;
    position: absolute;
    inset: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .v-card__scroll::-webkit-scrollbar { display: none; }
  .v-card__scroll-img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    pointer-events: none; /* let swipe gestures hit the scroll container */
  }
  /* Carousel replaces the legacy two-image hover-stack on desktop -
     hide it so it doesn't render an extra layer over the slides. */
  .v-card__hover-stack { display: none; }

  .v-card__placeholder {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(135deg, transparent 49%, var(--line) 49%, var(--line) 51%, transparent 51%),
      var(--paper-2);
  }

  .v-card__tag {
    position: absolute;
    top: var(--sp-3);
    left: var(--sp-3);
    background: var(--ink);
    color: var(--paper);
    font-size: var(--type-11);
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
    padding: var(--sp-1) var(--sp-3);
    z-index: 2;
  }
  .v-card__tag--muted { background: var(--ink-mute); }

  .v-card__eyebrow {
    display: flex;
    align-items: center;
    gap: 5px;
    /* Two under the 16px title, per Aditya. */
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  /* Twice the words it separates. `line-height: 0.5` is not a taste call:
     the glyph doubles to 2em, so halving the leading keeps its inline box
     at 1em - exactly the height it occupied at `inherit` / `line-height: 1`.
     The eyebrow is a flex row, so without that the row would grow by the
     difference and push the title down. Ratio holds at any base size. */
  .v-card__eyebrow-dot { font-size: 2em; line-height: 0.5; opacity: 0.55; }

  /* The stack sets no gap of its own: each row owns the space beneath it,
     so the 2px taken off the title/price gap cannot also shrink the space
     under the eyebrow. */
  .v-card__meta {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: var(--sp-1);
    /* Desktop: 20-px left indent so card text doesn't kiss the image's
       left edge (cards are flush edge-to-edge on the grid since the
       column-gap dropped to 0). The mobile @media block below resets
       padding to `12px 16px` shorthand so mobile is unaffected. */
    padding-left: 20px;
  }
  .v-card__title {
    /* was `gap: var(--sp-1)` (4px) on the parent; 2px here per Aditya. */
    margin-top: 4px;
    margin-bottom: 2px;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    line-height: var(--leading-snug);
    letter-spacing: var(--track-normal);
  }
  .v-card__title-jp {
    font-size: 12px;
    color: var(--ink-mute);
    line-height: var(--leading-snug);
    letter-spacing: 0.02em;
    font-weight: 400;
  }
  /* The wrapper just sets the base size - every internal child (INR label,
     number, yen) is owned by the shared `.v-price` rules in critical.css. */
  .v-card__price {
    display: inline-flex;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
  }

  /* Slider - Figma 204:1416 spec.
       Track: 84% wide (16-px insets), 3-px tall, rounded full pill,
              `bg: rgba(0,0,0,0.1)` so it shows softly on any image.
       Thumb: white pill, height matches track, width = `100/N` % set
              by JS, slides via translateX as the carousel scrolls.
     Renders on every viewport - same component on mobile + desktop. */
  .v-card__progress {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    height: 3px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.1);
    overflow: hidden;
    pointer-events: none;
    z-index: 2;
  }
  .v-card__progress-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 33.3333%;
    border-radius: 999px;
    background: #fff;
    transform: translateX(0);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
                width 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Desktop hover arrows. A FLAT BLACK-OPACITY CIRCLE with a white
     chevron, per Aditya - the two-stop gradient, the 50px backdrop blur
     and the drop shadow are gone. Same fill as the size pills below, so
     the two controls on this card read as one set.
     Hidden by default and on touch devices via `(hover: hover)`. */
  .v-card__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 200ms ease-out, transform 200ms ease-out, background 200ms ease-out;
    z-index: 3;
    user-select: none;
    -webkit-user-select: none;
  }
  /* Quick-view plus: a bare white glyph, no pill, no shadow, 4px off the
     image's bottom-right corner (Aditya, 2026-09-14). Only rendered when a
     caller passes `quick_view`, and only shown where that caller shows it. */
  .v-card__qv {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
    z-index: 4;
    -webkit-tap-highlight-color: transparent;
  }
  .v-card__qv svg { display: block; }

  .v-card__nav--prev { left: 8px; }
  .v-card__nav--next { right: 8px; }
  .v-card__nav svg { display: block; }
  @media (hover: hover) {
    .v-card__nav { display: inline-flex; }@media (hover: hover){
    .v-card:hover .v-card__nav { opacity: 1; }}@media (hover: hover){
    .v-card__nav:hover {
      background: rgba(0, 0, 0, 0.68);
      transform: translateY(-50%) scale(1.05);
    }}
  }

  /* ── Quick-add size rail ────────────────────────────────────────────
     One padding value drives left, right and bottom, so the rail is inset
     from the card by the same amount on all three edges as asked. Change
     `--card-rail-pad` and all three move together. */
  /* Sits ABOVE the carousel indicator, not over it. The indicator is at
     `bottom: 16px` and is 3px tall, so 16 + 3 + 12 of air = 31px clears it
     and reads as a deliberate stack rather than a collision. Aditya: the
     pills were easy to miss down at the very bottom edge. */
  .v-card__sizes {
    --card-rail-pad: 12px;
    position: absolute;
    left: var(--card-rail-pad);
    right: var(--card-rail-pad);
    bottom: 31px;
    z-index: 4;
    display: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 200ms ease-out, transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .v-card__size {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48 / 16px, per Aditya - the 2x pass (68 / 24px) overshot. Min-width
       and padding come down with them so the pill keeps its proportions
       rather than turning into a lozenge around a short label. */
    min-width: 62px;
    height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    /* Blur behind the fill, so the pill separates from a busy photograph
       without the fill having to go opaque. Same pair the refine dock uses,
       so it is the site's existing glass value rather than a new one. */
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    backdrop-filter: blur(12px) saturate(1.6);
    color: #fff;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 160ms ease-out, transform 160ms ease-out;
  }
  .v-card__size[data-card-add-busy] { opacity: 0.6; }
  /* Post-add confirmation. The label is restored by the script. */
  .v-card__size[data-card-add-done] { background: #fff; color: #000; }

  /* Touch never gets the rail: there is no hover to reveal it, and a
     permanently-visible bar would cover the product on a 2-up grid. */
  @media (hover: hover) {
    .v-card__sizes { display: flex; }
    .v-card:hover .v-card__sizes { opacity: 1; transform: translateY(0); }
    .v-card__size:hover { background: rgba(0, 0, 0, 0.78); transform: translateY(-1px); }
  }

  /* On touch / mobile: hide the desktop hover-stack, show the swipe carousel.
     Typography matches Figma 187:1255 - title 12 / 16 Helvetica Regular,
     no JP mirror in the meta block, price INR 7.74 / 12 / 10 with 4-px
     gap. Same card style is used by the home featured grid AND the
     search overlay results so the two surfaces look identical on mobile. */
  @media (max-width: 768px) {
    .v-card { gap: 0; }
    .v-card__title-jp { display: none; }

    .v-card__media { aspect-ratio: 195 / 292.46; }

    .v-card__meta {
      /* Aditya, 2026-09-14: 8px above the title, 16px right / left / bottom.
         The tighter top pulls the name up towards the image it names; the
         even 16 elsewhere keeps the text block square with the card edge. */
      padding: 8px 16px 16px;
      /* Zero, like the desktop stack: each row owns the space beneath it,
         so the 2px between title and price cannot be re-inflated here. */
      gap: 0;
      box-sizing: border-box;
    }
    /* The eyebrow had NO mobile rule, so it kept the desktop 14px while the
       title dropped to 12 - the label ended up LARGER than the name under
       it, which is why the line read as something other than a caption.
       It now sits 2px under the title here as it does on desktop. */
    .v-card__eyebrow {
      font-size: 10px;
      letter-spacing: 0.06em;
    }
    .v-card__title {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 18px;
      margin-top: 4px;
      margin-bottom: 2px;
      color: #000;
      letter-spacing: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
    }
    .v-card__price {
      font-size: 14px;
      line-height: 18px;
    }
    /* Override the global `.v-price__cur / __num / __jp` typography
       inside cards on mobile only. */
    .v-card .v-price {
      display: inline-flex;
      align-items: baseline;
      gap: 4px;
      white-space: nowrap;
    }
    .v-card .v-price__current {
      display: inline-flex;
      align-items: baseline;
      /* No seam at all. This was a 2px word-space so the pair read as
         "₹ 2,599"; Aditya, 2026-09-14, wants the symbol and the figure set
         as ONE unit, so they now close up to "₹2,599". */
      gap: 0;
    }
    /* The symbol is NOT its own visual object. It carries the number's
       family, size, weight and colour so the pair reads as one string.
       The <span> survives only because currency.js rewrites its text on
       a region switch and cart.js / search.js emit the same markup -
       deleting the element would break the currency swap in five files.
       `!important` answers the global WDXL rule in critical.css. */
    .v-card .v-price__cur,
    .v-card .v-price__num {
      font-family: 'Helvetica Neue', sans-serif !important;
      /* Medium, 2026-09-14. The title dropped to regular in the same pass,
         so the price is now the heavier of the two and carries the emphasis
         on a phone. */
      font-weight: 500;
      /* Locked to .v-card__title above: the price is the title's twin. */
      font-size: 14px;
      line-height: 18px;
      color: #000;
      letter-spacing: 0;
    }
    .v-card .v-price__jp,
    .v-card .v-price__compare {
      font-family: 'Helvetica Neue', sans-serif;
      font-weight: 400;
      font-size: 10px;
      line-height: 16px;
      color: #666;
    }
  }
/* END_SNIPPET:product-card */

/* START_SNIPPET:refine-dock (INDEX:51) */
/* One pill, two targets. The values below are the nav bar's, restated:
     `snippets/tenzen-topnav.liquid` scopes `--tz-surface` to `.tz-app` /
     `.tz-topbar`, so it cannot be inherited from here. `--tz-stroke` and
     `--tz-ease` ARE global on `:root`, so those are referenced and stay in
     step on their own. */
  .v-refine-dock {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 20px;
    margin: 0 auto;
    width: max-content;
    max-width: calc(100% - 32px);
    height: 56px;
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    backdrop-filter: blur(12px) saturate(1.6);
    /* Rim, not a drop shadow. Every piece of floating chrome on the site
       lost its shadow at Aditya's call - blur plus a hairline stroke is the
       only thing separating these surfaces from the page now. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    color: #000;
    z-index: 50;
  }

  /* The same rim the nav pills carry, via the padding-box mask trick so it
     hugs the pill radius exactly. On the container, not the buttons, so the
     two halves read as one object. */
  .v-refine-dock::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    z-index: 4;
    background: var(--tz-stroke, linear-gradient(140deg, rgba(255,255,255,0.55), rgba(0,0,0,0.25)));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  .v-refine-dock__sep {
    flex: none;
    width: 1px;
    height: 24px;
    background: rgba(0, 0, 0, 0.14);
  }

  .v-refine-dock__btn {
    height: 100%;
    padding: 0 22px;
    border: 0;
    border-radius: 9999px;
    background: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #000;
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms var(--tz-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  /* The theme styles every bare `button`, including a solid
     `button:hover { background-color: var(--ink) }` (assets/critical.css:274)
     which latches after a tap on touch. Restate every state. */
  .v-refine-dock__btn:focus {
    background: none;
    color: #000;
    outline: none;
  }
  .v-refine-dock__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
  .v-refine-dock__btn:active { transform: scale(0.94); }
  @media (hover: hover) {
    .v-refine-dock__btn:hover { background: none; color: #000; }
  }

  /* `img, picture, video, canvas, svg { max-width: 100% }` in the theme reset
     clamps an svg to its padded content box and beats an explicit width. */
  .v-refine-dock__icon { display: block; flex: none; width: 20px; height: 20px; max-width: none; }
  .v-refine-dock__label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    white-space: nowrap;
  }

  /* Inside the search overlay it stacks above the body. */
  .v-search-screen .v-refine-dock { z-index: 1101; }

  /* Desktop keeps the in-bar "Refine" trigger as the primary control, so the
     dock hides there - the same rule the FAB it replaces carried. */
  @media (min-width: 769px) {
    .v-col .v-refine-dock { display: none; }
  }

  @media (prefers-reduced-transparency: reduce) {
    .v-refine-dock {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgba(255, 255, 255, 0.94);
    }
  }

  /* ── Two sheets out of one dialog ────────────────────────────────────
     FILTER and SORT are two separate destinations now, so the sheet stops
     presenting itself as a tab strip: the inactive tab and the divider drop
     out and the remaining one is the sheet's title.

     Deliberately CSS-only, driven by the `data-mode` attribute
     `assets/collection-rail.js` sets. Splitting the dialog into two real
     <dialog> elements would mean two copies of the filter form, and the
     apply / clear / AJAX path in `sections/collection.liquid` is built
     around there being exactly one. Same markup, same handlers, same form -
     only what is on screen changes.

     The tab button stays a button on purpose: it is still the element the
     section's `[data-tab]` handler is bound to, and with its sibling hidden
     a press on it is a no-op rather than a dead control. */
  .v-col-drawer[data-mode] .v-col-drawer__sep { display: none; }
  .v-col-drawer[data-mode='filter'] .v-col-drawer__tab[data-tab='sort'] { display: none; }
  .v-col-drawer[data-mode='sort'] .v-col-drawer__tab[data-tab='filter'] { display: none; }
  .v-col-drawer[data-mode] .v-col-drawer__tab {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: var(--ink, #000);
    cursor: default;
  }
  .v-col-drawer[data-mode] .v-col-drawer__tab-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-mute, rgba(0, 0, 0, 0.55));
  }
  @media (hover: hover) {
    .v-col-drawer[data-mode] .v-col-drawer__tab:hover { opacity: 1; }
  }
/* END_SNIPPET:refine-dock */

/* START_SNIPPET:refine-fab (INDEX:52) */
/* Refine button.

     Was a 56px dark-glass circle pinned bottom-RIGHT. Aditya moved it to
     bottom-CENTRE, exactly where the main nav bar sits, with the icon and
     the words beside it, in the nav bar's material rather than its own.

     The values below are the nav bar's, restated: `snippets/tenzen-topnav.liquid`
     scopes `--tz-surface` to `.tz-app`/`.tz-topbar`, so it cannot be inherited
     from here. `--tz-stroke` and `--tz-ease` ARE global on `:root`, so those
     are referenced rather than copied and stay in step on their own.

     Geometry matches the PDP sheet and the nav: 16px side margins, 20px off
     the bottom, no safe-area addition. */
  .v-refine-fab {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 20px;
    margin: 0 auto;
    width: max-content;
    max-width: calc(100% - 32px);
    height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    isolation: isolate;
    background: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    backdrop-filter: blur(12px) saturate(1.6);
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
    color: #000;
    cursor: pointer;
    z-index: 50;
    letter-spacing: 0;
    text-transform: none;
    -webkit-tap-highlight-color: transparent;
    transition: transform 180ms var(--tz-ease, cubic-bezier(0.22, 1, 0.36, 1));
  }

  /* The same rim the nav pills carry, via the padding-box mask trick so it
     hugs the pill radius exactly. */
  .v-refine-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    z-index: 4;
    background: var(--tz-stroke, linear-gradient(140deg, rgba(255,255,255,0.55), rgba(0,0,0,0.25)));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }

  /* The theme styles every bare `button`, including a solid
     `button:hover { background-color: var(--ink) }` (assets/critical.css:274)
     which latches after a tap on touch. Restate every state. */
  .v-refine-fab:focus{
    background: rgba(255, 255, 255, 0.65);
    color: #000;
    outline: none;
  }@media (hover: hover){.v-refine-fab:hover{
    background: rgba(255, 255, 255, 0.65);
    color: #000;
    outline: none;
  }}
  .v-refine-fab:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
  .v-refine-fab:active { transform: scale(0.97); }

  /* `img, picture, video, canvas, svg { max-width: 100% }` in the theme reset
     clamps an svg to its padded content box and beats an explicit width, so
     `max-width: none` is the declaration doing the work here. */
  .v-refine-fab__icon { display: block; flex: none; width: 22px; height: 22px; max-width: none; }
  .v-refine-fab__label {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: none;
    white-space: nowrap;
  }

  /* Inside the search overlay it stacks above the body; raise z-index
     above the overlay scroll context. */
  .v-search-screen .v-refine-fab { z-index: 1101; }

  /* Catalog / collection page: the in-bar "Refine" button is the primary
     trigger on desktop, so the FAB hides there. On mobile it no longer has
     to clear a bottom nav deck - the bar is home-only now - so it simply
     takes the nav's own position. */
  @media (min-width: 769px) {
    .v-col .v-refine-fab { display: none; }
  }

  @media (prefers-reduced-transparency: reduce) {
    .v-refine-fab {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      background: rgba(255, 255, 255, 0.94);
    }
  }
/* END_SNIPPET:refine-fab */

/* START_SNIPPET:search-overlay (INDEX:53) */
/* ── Search overlay ───────────────────────────────────────────────────
     Slides in from the right over the current page. While open, the body
     gets `data-search-open="true"` which:
       • shows the overlay (transform 0)
       • hides the primary nav deck (.v-header) so it doesn't double up
       • locks the underlying body scroll
     Closing reverses everything; the underlying page is `position: fixed`
     for nothing — we simply keep its scrollY frozen and restore on close. */
  .v-search-screen {
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1100;
    transform: translateX(100%);
    transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
    visibility: hidden;
    /* Mobile flex column so cluster (top) and pill (bottom) are
       flex:0 0 auto and the body between them scrolls. Desktop overrides
       below convert this to a body that fills the viewport with the
       cluster floating fixed at the bottom-center. */
    display: flex;
    flex-direction: column;
  }
  body[data-search-open="true"] .v-search-screen {
    transform: translateX(0);
    visibility: visible;
  }
  body[data-search-open="true"] .v-header {
    opacity: 0;
    pointer-events: none;
  }
  body[data-search-open="true"] {
    overflow: hidden;
  }

  /* ── Cluster — wraps the back-circle, the deck, and (desktop only)
     the refine-circle. Mobile: cluster pins to the top, back-circle
     left + deck filling the remaining width. The glass-morphic refine
     FAB at the bottom-right handles refine on touch. Desktop: cluster
     pins to bottom-center, all three children visible side-by-side. ── */
  .v-search-screen__cluster {
    position: fixed;
    top: calc(20px + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 1101;
    width: max-content;
    max-width: calc(100vw - 40px);
  }

  /* ── Search deck — F8F8F8 fill with black icons + input. Same on
     every viewport so the deck reads consistently inside the cluster. ── */
  .v-search-screen__deck {
    width: min(350px, calc(100vw - 40px));
    height: 56px;
    padding: 12px 20px;
    border: 0;
    border-radius: 32px;
    background: #f8f8f8;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    box-shadow: none;
    color: #000;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    flex: 0 0 auto;
  }

  /* Desktop circles: F8F8F8 fill, black icon, 56-px circle, same
     visual weight as the deck so the trio reads as one cluster. */
  .v-search-screen__back--circle,
  .v-search-screen__refine--inline {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    border: 0;
    padding: 0;
    background: #f8f8f8;
    color: #000;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    flex: 0 0 auto;
    letter-spacing: 0;
    text-transform: none;
    transition: background-color 180ms ease-out, transform 180ms ease-out;
  }@media (hover: hover){
  .v-search-screen__back--circle:hover,
  .v-search-screen__refine--inline:hover {
    background: #efefef;
    color: #000;
    transform: translateY(-1px);
  }}
  .v-search-screen__back--circle svg,
  .v-search-screen__refine--inline svg { display: block; }

  /* Mobile: hide the desktop circles (back + refine). The inline back
     inside the deck handles close; the glass-morphic refine FAB at
     bottom-right handles refine. Mobile deck reads as: ← input ×
     `!important` because `.v-search-screen__back--circle` and
     `.v-search-screen__refine--inline` have a base rule below
     setting `display: inline-flex`, which (same specificity, later
     in source) would otherwise win. */
  @media (max-width: 900px) {
    .v-search-screen__back--circle,
    .v-search-screen__refine--inline { display: none !important; }
  }

  /* Desktop: cluster moves to the bottom-center; the floating glass-
     morphic refine FAB is suppressed because the inline F8F8F8 refine
     circle is part of the cluster. The inline back arrow inside the
     deck is hidden — the back-circle in the cluster is the single
     close affordance. Desktop deck reads as: input × (no leading
     icon). `!important` because `.v-search-screen__icon-btn` has a
     base rule below setting `display: inline-flex` that would
     otherwise override this hide. */
  @media (min-width: 901px) {
    .v-search-screen__cluster {
      top: auto;
      bottom: calc(64px + env(safe-area-inset-bottom));
    }
    .v-search-screen__back--inline { display: none !important; }
    .v-search-screen .v-refine-fab { display: none !important; }
  }
  .v-search-screen__icon-btn {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
  }@media (hover: hover){
  .v-search-screen__icon-btn:hover { background: transparent; opacity: 0.65; color: #000; }}
  .v-search-screen__icon-btn svg { display: block; }
  .v-search-screen__clear { width: 20px; height: 20px; }
  .v-search-screen__form {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 24px;
  }
  .v-search-screen__input {
    width: 100%;
    height: 24px;
    border: 0;
    outline: none;
    background: transparent;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #000;
    padding: 0;
  }
  .v-search-screen__input::placeholder { color: rgba(0, 0, 0, 0.4); }
  .v-search-screen__input::-webkit-search-cancel-button,
  .v-search-screen__input::-webkit-search-decoration {
    -webkit-appearance: none; appearance: none; display: none;
  }

  /* ── Results body — fills the entire overlay. The deck is fixed at
     the top and the refine FAB at the bottom-right, both with their
     own z-index, so the body just scrolls behind them. Top padding
     clears the deck (56 + 20-px gap + safe-area-top); bottom padding
     clears the refine FAB (56 + 20-px gap + safe-area-bottom). ── */
  .v-search-screen__body {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(56px + 20px + 16px + env(safe-area-inset-top));
    padding-bottom: calc(56px + 20px + 16px + env(safe-area-inset-bottom));
    box-sizing: border-box;
  }
  .v-search-screen__hint,
  .v-search-screen__empty {
    text-align: center;
    color: rgba(0, 0, 0, 0.5);
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    line-height: 20px;
    padding: 24px 20px;
    margin: 0;
  }
  /* Search-overlay grid wrapper — fully delegates to the shared
     `.v-grid` (snippets/grid-cards.liquid). No max-width or per-
     surface padding here so the desktop overlay's 5-up grid is the
     SAME size as the home featured 5-up grid (same component, same
     viewport, same card width). */

  /* Both mobile and desktop now share the same overlay layout: full-
     viewport body, deck pinned top-center, refine FAB pinned bottom-
     right. No per-viewport layout overrides needed. */

  /* Card visuals are owned by `.v-card*` in snippets/product-card.liquid
     (the same component used by the home featured collection and the
     /collections page). search.js renders identical markup, so cards in
     the overlay look exactly like cards on those pages. */

  /* "View all results →" CTA appended below the grid when the predictive
     search hits its 10-result cap. Funnels users into the full /search
     page where filters + sort + pagination live. */
  .v-search-screen__view-all {
    display: block;
    text-align: center;
    margin: 32px auto 0;
    padding: 16px 24px;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink, #000);
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: opacity 180ms ease-out;
  }@media (hover: hover){
  .v-search-screen__view-all:hover { opacity: 0.65; }}

  /* The two-button Filters | Sort pill was removed in favour of a
     single bottom-right glass-morphic refine FAB
     (snippets/refine-fab.liquid). Its CSS is owned by that snippet. */

  /* ── Filter + Sort drawer (right-slide, tabbed) — same pattern as the
     collection page's `.v-col-drawer`. Filter / Sort tabs share one body;
     Clear + Apply footer commits the choice (or just resets). ── */
  .v-search-drawer {
    padding: 0;
    border: 0;
    margin: 0;
    max-width: 100%;
    max-height: 100dvh;
    width: min(420px, 100%);
    height: 100dvh;
    background: var(--paper, #fff);
    color: var(--ink, #000);
    position: fixed;
    inset: 0 0 0 auto;
    box-shadow: -1px 0 0 var(--line, rgba(0, 0, 0, 0.08));
    z-index: 1102;
  }
  .v-search-drawer::backdrop { background: rgba(0, 0, 0, 0.35); }
  .v-search-drawer[open] {
    animation: v-search-drawer-slide 320ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes v-search-drawer-slide {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }
  .v-search-drawer__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .v-search-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  }
  .v-search-drawer__tabs {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .v-search-drawer__tab {
    background: none;
    border: 0;
    padding: 0;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute, rgba(0, 0, 0, 0.5));
    cursor: pointer;
  }
  .v-search-drawer__tab.is-active { color: var(--ink, #000); }@media (hover: hover){
  .v-search-drawer__tab:hover { background: none; opacity: 0.85; }}
  .v-search-drawer__sep { color: var(--line, rgba(0, 0, 0, 0.15)); font-weight: 300; }
  .v-search-drawer__close {
    background: none;
    border: 0;
    padding: 8px;
    color: var(--ink, #000);
    font-size: 16px;
    cursor: pointer;
    letter-spacing: 0;
    text-transform: none;
  }@media (hover: hover){
  .v-search-drawer__close:hover { background: none; opacity: 0.6; }}

  .v-search-drawer__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 24px;
  }
  .v-search-drawer__panel { display: none; }
  .v-search-drawer__panel.is-active { display: block; }
  .v-search-drawer__panel[hidden] { display: none; }

  .v-search-drawer__check {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--ink, #000);
    cursor: pointer;
  }
  .v-search-drawer__check:last-child { border-bottom: 0; }
  .v-search-drawer__check input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
  .v-search-drawer__box {
    width: 16px;
    height: 16px;
    border: 1px solid var(--ink, #000);
    border-radius: 2px;
    flex-shrink: 0;
    position: relative;
  }
  .v-search-drawer__check input:checked + .v-search-drawer__box::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--ink, #000);
  }

  .v-search-drawer__sorts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .v-search-drawer__sort {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.08));
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: var(--ink, #000);
    cursor: pointer;
  }
  .v-search-drawer__sorts li:last-child .v-search-drawer__sort { border-bottom: 0; }
  .v-search-drawer__sort-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
  }
  .v-search-drawer__radio {
    width: 14px;
    height: 14px;
    border: 1px solid var(--ink, #000);
    border-radius: 999px;
    flex-shrink: 0;
    position: relative;
  }
  .v-search-drawer__sort-input:checked + .v-search-drawer__radio::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 999px;
    background: var(--ink, #000);
  }

  .v-search-drawer__foot {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 16px 24px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line, rgba(0, 0, 0, 0.1));
  }
  /* Drawer footer buttons match the PDP ATC pill language — same
     56-px height, 999-px corners, Helvetica Neue 14/20, so the
     filter/sort actions read as one family with every other CTA. */
  .v-search-drawer__clear,
  .v-search-drawer__apply {
    flex: 1 1 0;
    height: 56px;
    padding: 0 24px;
    border-radius: 999px;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--motion-fast) ease-out,
                color var(--motion-fast) ease-out,
                border-color var(--motion-fast) ease-out;
  }
  .v-search-drawer__clear {
    background: transparent;
    color: var(--ink, #000);
    border: 1px solid var(--line, rgba(0, 0, 0, 0.18));
  }@media (hover: hover){
  .v-search-drawer__clear:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ink, #000);
    border-color: var(--ink, #000);
  }}
  .v-search-drawer__apply {
    background: var(--ink, #000);
    color: var(--paper, #fff);
    border: 1px solid var(--ink, #000);
  }@media (hover: hover){
  .v-search-drawer__apply:hover { background: #1f1f1f; color: var(--paper, #fff); }}

  /* The right-slide drawer is shared between mobile and desktop now -
     no viewport-conditional `display: none`. Mobile-only bottom sheet
     CSS (`.v-search-sheet*`) was removed alongside its markup. */

  /* ── The scrim ────────────────────────────────────────────────────────
     Hidden by default at every width. It only exists for the desktop side
     pane; below 990px the overlay is the whole screen and there is nothing
     behind it to dim. */
  .v-search-scrim { display: none; }

  /* ── Desktop: a side pane, not a screen ───────────────────────────────
     Same overlay, same JS, same suggestion rows - re-shaped into a right-
     hand pane so it reads as a sibling of the cart drawer rather than as a
     separate destination. The page stays where it is beside it.

     Deliberately 990px, matching the deck's own desktop breakpoint in
     snippets/tenzen-topnav.liquid, NOT the 901px used by the older rules
     above. Between 901 and 989 the m-web bottom deck is still the nav, so
     that range keeps the full-screen treatment it has always had. This
     block wins over the 901px one for 990+ only because it is later in the
     file - equal specificity, and a media query adds none. */
  @media (min-width: 990px) {
    .v-search-screen {
      inset: 0 0 0 auto;
      width: min(480px, 100vw);
      /* Edge, not a shadow - matching the browse / global / account panes.
         The scrim already separates the pane from the page. */
      box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.08);
    }

    /* `.v-search-screen` is transformed in both states (translateX(100%)
       when closed, translateX(0) when open), and a transformed element is
       the containing block for its `position: fixed` descendants. So the
       cluster's offsets below resolve against the PANE, not the viewport -
       which is what lets a fixed-position header sit inside a sliding
       panel and travel with it. */
    .v-search-screen__cluster {
      top: 20px;
      bottom: auto;
      left: 20px;
      right: 20px;
      width: auto;
      max-width: none;
      transform: none;
    }
    /* The deck was a fixed 350px, which together with the 56px back circle
       and the 12px gap overflowed the pane's 440px of usable width. Let it
       take whatever is left instead. */
    .v-search-screen__deck { width: auto; flex: 1 1 auto; }

    /* No refine FAB and no bottom cluster in the pane, so the body only
       needs to clear the header. */
    .v-search-screen__body { padding-bottom: 24px; }

    .v-search-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: 1099;          /* under the pane at 1100, over everything else */
      background: rgba(0, 0, 0, 0.32);
      opacity: 0;
      visibility: hidden;
      transition: opacity 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 360ms;
    }
    body[data-search-open="true"] .v-search-scrim { opacity: 1; visibility: visible; }
  }
/* END_SNIPPET:search-overlay */