/* ============================================================================
   BANG storefront upgrade
   ----------------------------------------------------------------------------
   Uses the theme variables from header.php so Theme Studio changes still apply.

   ── STRUCTURE ──────────────────────────────────────────────────────────────
   PART 1  Base (tokens, toast, swatches, badges)
   PART 2  DESKTOP HERO     (min-width: 901px)   ← adjust frog/size here
   PART 3  MOBILE HERO      (max-width: 900px)   ← adjust text/photo here
   PART 4  Product page
   PART 5  Bag / cart
   PART 6  Shop, checkout, cart surfaces

   ── HOW TO ADJUST THE FROG (PART 2) ────────────────────────────────────────
   Look for the block marked  ⟪ FROG — ADJUST HERE ⟫  in PART 2.
   Every changeable number has a short ← comment next to it.
   ============================================================================ */


/* ============================================================================
   PART 1 — BASE
   ============================================================================ */

.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(a,button,input,select,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Shared surface tokens for shop / cart / bag / checkout */
:root{
  --shop-surface:color-mix(in srgb,var(--paper) 92%,var(--soft));
  --shop-surface-alt:color-mix(in srgb,var(--soft) 94%,var(--paper));
  --shop-border:color-mix(in srgb,var(--ink) 12%,var(--line));
  --shop-elev:0 1px 2px rgba(15,18,13,.04),0 8px 24px rgba(15,18,13,.05);
  --ui-font:var(--font-body,var(--font,'Inter','Nunito Sans',system-ui,sans-serif));
  --ui-display:var(--font-display,var(--display-font,var(--ui-font)));
}

/* ---------- toast ---------- */
.bang-toast{position:fixed;z-index:80;left:50%;top:calc(var(--header-height,70px) + 14px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 28px));padding:13px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;line-height:1.35;box-shadow:0 18px 50px rgba(0,0,0,.35);animation:toastIn .35s cubic-bezier(.2,.8,.2,1) both,toastOut .4s ease 5.2s forwards}
.bang-toast.is-error{background:#8f2a2a;color:#fff}
.bang-toast.is-success{background:var(--accent);color:#fff}
.bang-toast button{min-height:0;padding:2px 6px;background:transparent;color:inherit;font-size:20px;line-height:1;border-radius:6px}
.bang-toast button:hover{transform:none;box-shadow:none;opacity:.7}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,-12px);visibility:hidden}}

/* ---------- swatches / badges on product cards ---------- */
.swatch-dots{display:inline-flex;align-items:center;gap:5px;margin-top:2px}
.swatch-dots i{width:13px;height:13px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent)}
.swatch-dots em{font-style:normal;font-size:11px;font-weight:800;color:var(--muted)}
.product-card .product-media{position:relative}
.card-badges{position:absolute;left:10px;top:10px;z-index:2;display:flex;gap:6px;flex-wrap:wrap}
.card-badge{padding:5px 9px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.card-badge.is-sale{background:var(--accent);color:#fff}
.product-card.is-soldout .product-media img,.product-card.is-soldout>a>img{filter:grayscale(.6) opacity(.7)}
.product-card .swatch-dots{margin-top:4px}


/* ============================================================================
   PART 2 — DESKTOP HERO  (viewport ≥ 901px)
   ----------------------------------------------------------------------------
   Layout: text on the LEFT, photo RIGHT-ALIGNED at 62% width, dissolving
   into the background. Frog sits BELOW the text as a large faint watermark.
   ============================================================================ */

/* ---- Hero container ---- */
.hero-has-models{display:grid;align-content:center;padding-bottom:clamp(96px,11vw,120px)}
.hero-has-models .hero-inner{max-width:min(640px,100%);padding-top:0}
.hero-has-models h1{font-size:clamp(44px,7vw,112px)}

/* .hero-models is NOT a stacking context, so the photos (z0) sit under the
   frog (z1), text (z3) and controls (z4). */
.hero-models{position:absolute;inset:0;pointer-events:none}
.ms-track{position:absolute;inset:0;z-index:0;display:block}
.ms-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 0s 1s}
.ms-slide.is-active{opacity:1;visibility:visible;transition-delay:0s}
.ms-photo{display:block;position:absolute;inset:0;overflow:hidden;background:var(--hero-from)}

/* ---- Desktop photo: right-aligned, 62% width, full height ---- */
.hero-has-models .ms-photo img{
  position:absolute;
  top:0;
  right:0;
  width:62%;                          /* ← PHOTO WIDTH  (60–70% typical)   */
  height:100%;
  object-fit:cover;
  object-position:center 20%;         /* ← CROP FOCUS  (X% Y%)             */
  opacity:1;

  /* Fade the photo's own left edge to transparent — no visible seam */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.12) 8%,
    rgba(0,0,0,.42) 18%,
    rgba(0,0,0,.75) 28%,
    #000 40%,                         /* ← SOLID FROM HERE (bigger = softer fade) */
    #000 100%);
          mask-image:linear-gradient(90deg,
    transparent 0%,
    rgba(0,0,0,.12) 8%,
    rgba(0,0,0,.42) 18%,
    rgba(0,0,0,.75) 28%,
    #000 40%,
    #000 100%);
}

/* ---- Desktop scrim: darkens the left for text contrast only ---- */
.hero-has-models .ms-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      var(--hero-from) 0%,
      color-mix(in srgb,var(--hero-from) 85%,transparent) 22%,
      color-mix(in srgb,var(--hero-from) 45%,transparent) 42%,
      color-mix(in srgb,var(--hero-from) 14%,transparent) 60%,
      transparent 78%
    ),
    linear-gradient(180deg,
      transparent 62%,
      rgba(0,0,0,.32) 100%
    );
}

/* ---- Slider caption pill ---- */
.ms-caption{position:absolute;z-index:4;right:clamp(16px,3vw,40px);bottom:clamp(74px,9vw,92px);display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;border-radius:999px;background:color-mix(in srgb,var(--hero-from) 82%,transparent);border:1px solid color-mix(in srgb,var(--hero-text) 16%,transparent);color:var(--hero-text);pointer-events:auto;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ms-cap-text{display:flex;align-items:baseline;gap:10px;min-width:0}
.ms-cap-text b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:26ch}
.ms-cap-text .price{font-size:14px;color:var(--hero-text)}
.ms-cap-text .price .was-price{color:color-mix(in srgb,var(--hero-text) 55%,transparent)}
.ms-cap-go{flex:0 0 auto;padding:9px 14px;border-radius:999px;background:var(--hero-text);color:var(--hero-from);font-size:12px;font-weight:900;letter-spacing:.04em}

/* ---- Slider controls (arrows + dots) ---- */
.ms-controls{position:absolute;z-index:4;left:max(26px,calc((100vw - var(--container)) / 2));right:max(26px,calc((100vw - var(--container)) / 2));bottom:clamp(22px,3.5vw,38px);display:flex;align-items:center;gap:14px;margin:0;pointer-events:auto}
.ms-arrow{width:42px;height:42px;min-height:0;padding:0;border-radius:50%;background:rgba(5,6,5,.5);border:1px solid color-mix(in srgb,var(--hero-text) 26%,transparent);color:var(--hero-text);font-size:18px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ms-arrow:hover{background:var(--hero-text);color:var(--hero-from);transform:none;box-shadow:none}
.ms-dots{display:flex;gap:6px;align-items:center}
.ms-dot{position:relative;width:28px;height:20px;min-height:0;padding:0;background:transparent;border-radius:0}
.ms-dot::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:3px;background:color-mix(in srgb,var(--hero-text) 26%,transparent)}
.ms-dot::after{content:"";position:absolute;left:0;top:9px;height:3px;width:0;border-radius:3px;background:var(--hero-text)}
.ms-dot.is-active::after{width:100%;transition:width var(--ms-interval,5500ms) linear}
.ms-dot:hover{transform:none;box-shadow:none}
.ms-count{margin-left:auto;font-family:var(--font-display);font-weight:700;letter-spacing:.12em;font-size:12px;color:color-mix(in srgb,var(--hero-text) 65%,transparent)}
.ms-count{display:none}
.hero-models.is-paused .ms-dot.is-active::after{transition:none}

/* ============================================================================
   ⟪ FROG — ADJUST HERE (desktop only) ⟫
   ----------------------------------------------------------------------------
   The frog sits under the hero text as a large faint watermark.

   THE 6 NUMBERS YOU CAN TUNE  (everything else stays as-is):

     ①  width:min(34vw,420px)          SIZE
         · Bigger frog:  min(45vw,560px)
         · Smaller frog: min(20vw,240px)
         · 34vw = 34% of screen width, capped at 420px.

     ②  opacity:.22                     VISIBILITY
         · Very faint watermark: .08
         · Clearly visible:      .45
         · Solid:                1.0

     ③  filter:blur(0.5px)              SOFTNESS
         · Crisp edges:  0
         · Soft glow:    2px
         · Hazy:         4px

     ④  bottom:clamp(30px,7vh,84px)     VERTICAL POSITION
         · Lower on page:  10px
         · Higher on page: 120px

     ⑤  left:max(26px,calc(...))        LEFT EDGE
         · The 26px is the minimum inset from the left of the text column.
         · Increase to 60px to push the frog further in.

     ⑥  filter:drop-shadow? — NOT USED HERE. If you want a subtle glow
         around the frog, change filter to:
             filter:drop-shadow(0 0 30px rgba(255,255,255,.08));
   ============================================================================ */

@media(min-width:901px){
  .hero-has-models .hero-brand-mark{
    position:absolute;
    left:max(26px,calc((100vw - var(--container)) / 2));   /* ⑤ LEFT EDGE   */
    top:auto;
    right:auto;
    bottom:clamp(30px,7vh,84px);                           /* ④ VERTICAL    */
    transform:none;
    width:min(34vw,420px);                                 /* ① SIZE        */
    max-width:none;
    height:auto;
    opacity:.22;                                           /* ② VISIBILITY  */
    z-index:1;
    filter:blur(0.5px);                                    /* ③ SOFTNESS    */
    pointer-events:none;
  }
}

/* ---- Hero text: bright white with a soft shadow for readability ---- */
.hero-has-models h1,
.hero h1{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.8);
}
.hero-has-models p,
.hero p{
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.7);
}
.hero .eyebrow{
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 6px rgba(0,0,0,.55);
}


/* ============================================================================
   PART 3 — MOBILE HERO  (viewport ≤ 900px)
   ----------------------------------------------------------------------------
   Layout: text on the LEFT, photo RIGHT-ALIGNED at 72% width, dissolving
   into the background. Frog is HIDDEN (repetitive with the header icon).
   Caption pill HIDDEN (only arrows + dots remain).

   THE NUMBERS YOU CAN TUNE:

     ⑦  width:72%                       PHOTO WIDTH
         · Narrower photo: 66%
         · Wider photo:    78%

     ⑧  object-position:center 24%      CROP FOCUS
         · Show more head:    center 18%
         · Show more chest:   center 32%

     ⑨  max-width:min(64vw,300px)       TEXT COLUMN WIDTH
         · Narrower: min(56vw,260px)
         · Wider:    min(72vw,340px)

     ⑩  font-size:clamp(32px,9.5vw,44px) HEADLINE SIZE
         · Bigger:  clamp(34px,10vw,48px)
         · Smaller: clamp(28px,8.5vw,38px)
   ============================================================================ */

@media(max-width:900px){

  /* ---- Hero container ---- */
  .hero-has-models{
    display:block;
    min-height:calc(100vh - 110px);
    min-height:calc(100svh - 110px);
    padding:0;
    overflow:hidden;
  }

  /* ---- Mobile photo: right-aligned, 72% width, own left edge fades ---- */
  .hero-has-models .ms-photo img{
    position:absolute;
    top:0;
    right:0;
    width:72%;                        /* ⑦ PHOTO WIDTH */
    height:100%;
    object-fit:cover;
    object-position:center 24%;       /* ⑧ CROP FOCUS */
    opacity:1;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 6%,
      rgba(0,0,0,.40) 16%,
      rgba(0,0,0,.74) 27%,
      #000 38%,
      #000 100%);
            mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 6%,
      rgba(0,0,0,.40) 16%,
      rgba(0,0,0,.74) 27%,
      #000 38%,
      #000 100%);
  }

  /* ---- Mobile scrim: darkens the left for text contrast ---- */
  .hero-has-models .ms-photo::after{
    background:
      linear-gradient(90deg,
        var(--hero-from) 0%,
        color-mix(in srgb,var(--hero-from) 88%,transparent) 18%,
        color-mix(in srgb,var(--hero-from) 50%,transparent) 40%,
        color-mix(in srgb,var(--hero-from) 16%,transparent) 60%,
        transparent 80%
      ),
      linear-gradient(180deg,
        transparent 58%,
        rgba(0,0,0,.42) 100%
      );
  }

  /* ---- Mobile text block: left, comfortable width ---- */
  .hero-has-models .hero-inner{
    position:relative;
    z-index:3;
    max-width:min(64vw,300px);        /* ⑨ TEXT COLUMN WIDTH */
    padding:96px 20px 0;
    margin:0;
    text-align:left;
  }

  .hero .eyebrow{
    font-size:10px;
    letter-spacing:.22em;
    margin:0 0 14px;
  }

  .hero-has-models h1,
  .hero h1{
    font-size:clamp(32px,9.5vw,44px);  /* ⑩ HEADLINE SIZE */
    line-height:.94;
    letter-spacing:-.03em;
    margin:0 0 16px;
    max-width:none;
  }

  .hero-has-models p,
  .hero p{
    font-size:15px;
    line-height:1.5;
    max-width:30ch;
    margin:0;
  }

  /* ---- CTA in flow, directly under the copy ---- */
  .hero-actions{
    position:static;
    display:flex;
    margin:26px 0 0;
    gap:12px;
    flex-wrap:nowrap;
  }
  .hero-actions .button{
    min-height:46px;
    padding:0 24px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    border-radius:999px;
    background:#f4f0e7;
    color:#090b09;
  }
  .hero-actions .button:hover{
    transform:none;
    box-shadow:0 6px 18px rgba(0,0,0,.28);
  }

  /* ---- Frog HIDDEN on mobile ---- */
  .hero-has-models .hero-brand-mark{display:none!important}

  /* ---- Caption pill HIDDEN on mobile ---- */
  .ms-caption{display:none!important}

  /* ---- Controls: bottom, minimal glass pills ---- */
  .ms-controls{
    left:20px;
    right:20px;
    bottom:22px;
    gap:10px;
  }
  .ms-arrow{
    width:36px;
    height:36px;
    font-size:14px;
  }
  .ms-dots{gap:5px}
  .ms-dot{width:22px;height:14px}
  .ms-dot::before{top:6px;height:2px}
  .ms-dot::after{top:6px;height:2px}
}

/* ---- Small phones (≤ 480px) ---- */
@media(max-width:480px){
  .hero-has-models .hero-inner{
    max-width:68vw;
    padding:84px 18px 0;
  }
  .hero-has-models h1,
  .hero h1{
    font-size:clamp(30px,10vw,38px);
  }
  .hero-has-models p,
  .hero p{
    font-size:14px;
    max-width:26ch;
  }
  .hero-actions .button{
    min-height:44px;
    padding:0 20px;
    font-size:11px;
  }
  .hero-has-models .ms-photo img{
    width:76%;
    object-position:center 26%;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 6%,
      rgba(0,0,0,.40) 15%,
      rgba(0,0,0,.74) 26%,
      #000 37%,
      #000 100%);
            mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.10) 6%,
      rgba(0,0,0,.40) 15%,
      rgba(0,0,0,.74) 26%,
      #000 37%,
      #000 100%);
  }
}

@media(prefers-reduced-motion:reduce){.ms-slide{transition:none}.ms-dot.is-active::after{transition:none}}


/* ============================================================================
   PART 4 — PRODUCT PAGE
   ============================================================================ */

.pp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.85fr);gap:clamp(26px,5vw,72px);align-items:start;max-width:1180px;padding-top:clamp(26px,4vw,52px)}
.pp-gallery{position:sticky;top:calc(var(--header-height) + 18px);display:grid;gap:12px}
.pp-photo{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.pp-photo img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pp-photo .card-badges{left:14px;top:14px}
.pp-photo-note{margin:0;font-size:12px;color:var(--muted);line-height:1.5}
.pp-highlights{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0;list-style:none;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp-info{display:grid;gap:20px;min-width:0}
.pp-info .eyebrow{color:var(--muted);font-size:10px;letter-spacing:.22em}
.pp-info h1{margin:8px 0 12px;font-family:var(--font-display);font-size:clamp(32px,4.6vw,58px);line-height:.98;letter-spacing:-.035em;overflow-wrap:anywhere}
.pp-info .price{font-size:22px}
.pp-desc{margin:0;color:var(--muted);font-size:15px;line-height:1.7;max-width:58ch}
.pp-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 16px;margin:0;padding:14px 0;border-block:1px solid var(--line)}
.pp-specs div{display:grid;gap:3px}
.pp-specs dt{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp-specs dd{margin:0;font-size:13px}
.pp-buy{display:grid;gap:20px;padding:clamp(16px,2.4vw,24px);border:1px solid var(--line);border-radius:var(--radius);background:var(--soft)}
.opt{border:0;margin:0;padding:0;min-width:0}
.opt legend{display:flex;justify-content:space-between;align-items:baseline;width:100%;padding:0;margin-bottom:10px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.opt legend b{color:var(--ink);letter-spacing:.02em;text-transform:none;font-size:13px}
.sw-list{display:flex;flex-wrap:wrap;gap:12px}
.sw{position:relative}
.sw input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sw span{display:block;width:40px;height:40px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent);transition:transform .18s ease,box-shadow .18s ease}
.sw:hover span{transform:scale(1.07)}
.sw input:checked+span{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 25%,transparent),0 0 0 3px var(--soft),0 0 0 5px var(--ink)}
.sw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:6px}
.sz-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.sz{position:relative}
.sz input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.sz span{display:grid;place-items:center;min-height:46px;border:1px solid var(--line);border-radius:10px;background:var(--paper);font-weight:800;font-size:14px;transition:background .15s,color .15s,border-color .15s}
.sz:hover span{border-color:var(--ink)}
.sz input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sz input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
.qty-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.qty{display:inline-grid;grid-template-columns:44px 52px 44px;align-items:center;border:1px solid var(--line);border-radius:10px;background:var(--paper);overflow:hidden}
.qty button{min-height:46px;padding:0;border-radius:0;background:transparent;color:var(--ink);font-size:20px;font-weight:700}
.qty button:hover:not(:disabled){background:color-mix(in srgb,var(--ink) 8%,transparent);transform:none;box-shadow:none}
.qty button:disabled{opacity:.3;cursor:not-allowed}
.qty input{width:100%;min-height:46px;padding:0;border:0;border-inline:1px solid var(--line);background:transparent;color:var(--ink);text-align:center;font-weight:800;font-size:15px;-moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stock-line{margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.stock-line.is-low{color:#d98a1f}
.stock-line.is-out{color:#d05252}
.pp-add{width:100%;min-height:56px;font-size:15px;background:var(--ink);color:var(--paper);border-radius:12px;gap:10px}
.pp-add:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.pp-secure{margin:0;text-align:center;font-size:12px;color:var(--muted)}
@media(max-width:900px){
  .pp{grid-template-columns:1fr;padding-inline:16px}
  .pp-gallery{position:static}
  .pp-photo img{aspect-ratio:1/1}
  .pp-add-wrap{position:sticky;bottom:0;z-index:20;margin:0 calc(-1 * clamp(16px,2.4vw,24px));padding:12px clamp(16px,2.4vw,24px) calc(12px + env(safe-area-inset-bottom));background:linear-gradient(0deg,var(--soft) 78%,transparent);border-radius:0 0 var(--radius) var(--radius)}
}
@media(max-width:480px){.pp-specs{grid-template-columns:1fr 1fr}.sz span{min-height:44px}}


/* ============================================================================
   PART 5 — BAG (CART PAGE)
   ============================================================================ */

.bag{max-width:1180px;padding-top:clamp(28px,4vw,56px)}
.bag-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,3vw,30px)}
.bag-head h1{margin:6px 0 0}
.bag-head span.count{font-size:13px;font-weight:800;color:var(--muted)}
.bag-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr);gap:clamp(18px,3vw,34px);align-items:start}
.bag-list{display:grid;gap:12px}
.bag-item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;grid-template-areas:"img info total" "img ctrl total";gap:6px 18px;align-items:center;padding:16px;border:1px solid var(--shop-border);border-radius:calc(var(--radius) - 2px);background:var(--shop-surface);box-shadow:var(--shop-elev);transition:border-color .2s}
.bag-item:hover{border-color:color-mix(in srgb,var(--ink) 22%,var(--line))}
.bag-item.is-unavailable{opacity:.7}
.bag-img{grid-area:img;display:block;overflow:hidden;border-radius:calc(var(--radius) - 4px);background:var(--paper)}
.bag-img img{width:100%;aspect-ratio:4/5;object-fit:cover}
.bag-info{grid-area:info;display:grid;gap:5px;min-width:0;align-self:end}
.bag-name{font-family:var(--ui-font);font-weight:800;font-size:16px;line-height:1.25;overflow-wrap:anywhere}
.bag-name:hover{text-decoration:underline;text-underline-offset:3px}
.bag-chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 7px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:12px;font-weight:800;line-height:1.2}
.chip.is-text{padding-left:10px}
.chip .dot,.line-variant .dot{width:12px;height:12px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent)}
.bag-unit{font-size:13px;color:var(--muted)}
.bag-note{margin:0;font-size:12px;font-weight:700;color:#d98a1f}
.bag-note.is-out{color:#d05252}
.bag-ctrl{grid-area:ctrl;display:flex;align-items:center;gap:14px;flex-wrap:wrap;align-self:start;margin-top:4px}
.bag-ctrl .qty{grid-template-columns:40px 46px 40px}
.bag-ctrl .qty button,.bag-ctrl .qty input{min-height:42px}
.bag-remove{min-height:42px;padding:0 4px;background:none;color:var(--muted);font-size:13px;font-weight:800;text-decoration:underline;text-underline-offset:3px;border-radius:6px}
.bag-remove:hover{color:#d05252;transform:none;box-shadow:none}
.bag-total{grid-area:total;font-family:var(--ui-font);font-variant-numeric:tabular-nums;font-size:17px;font-weight:900;white-space:nowrap;align-self:center}
.bag-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px;font-size:14px}
.bag-foot a{font-weight:800;text-decoration:underline;text-underline-offset:3px;color:var(--muted)}
.bag-foot a:hover{color:var(--ink)}
.bag-foot .text-button{min-height:42px}
.bag-summary{position:sticky;top:calc(var(--header-height) + 18px);display:grid;gap:14px;padding:clamp(18px,2.4vw,26px);border:1px solid var(--shop-border);border-radius:var(--radius);background:var(--shop-surface);box-shadow:var(--shop-elev)}
.bag-summary h2{margin:0;font-family:var(--ui-font);font-weight:800;font-size:20px;letter-spacing:-.01em}
.ship-offer{display:grid;gap:8px;padding:14px;border-radius:12px;background:var(--paper);border:1px solid var(--shop-border);font-size:13px}
.ship-offer strong{font-size:12px;letter-spacing:.08em}
.ship-offer span{color:var(--muted)}
.ship-bar{height:6px;border-radius:6px;background:var(--line);overflow:hidden}
.ship-bar i{display:block;height:100%;width:var(--p,0%);background:var(--accent);border-radius:6px;transition:width .5s ease}
.ship-offer.is-unlocked{border-color:var(--accent)}
.sum-rows{display:grid;gap:10px}
.sum-row{display:flex;justify-content:space-between;gap:14px;font-size:14px}
.sum-row span:first-child{color:var(--muted)}
.sum-row.is-discount strong{color:var(--accent)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:14px;border-top:1px solid var(--line);font-size:19px;font-weight:900}
.offer-form{display:flex;gap:8px}
.offer-form input{min-width:0;flex:1;height:46px;padding:0 14px;border:1px solid var(--shop-border);border-radius:10px;background:var(--paper);color:var(--ink)}
.offer-form button{min-height:46px;padding:0 18px;background:var(--paper);color:var(--ink);border:1px solid var(--shop-border)}
.offer-form button:hover{background:var(--ink);color:var(--paper);transform:none;box-shadow:none}
.offer-applied{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--accent) 16%,var(--paper));font-size:13px;font-weight:700}
.offer-applied button{min-height:32px;padding:0}
.bag-checkout{width:100%;min-height:56px;font-size:15px;background:var(--ink);color:var(--paper);border-radius:12px;gap:8px;font-family:var(--font-button,var(--ui-font));font-weight:900;letter-spacing:.02em}
.bag-checkout:hover{background:var(--accent);color:#fff}
.bag-trust{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:0;font-size:12px;color:var(--muted)}
.bag-empty{display:grid;justify-items:center;gap:14px;padding:clamp(48px,9vw,100px) 20px;text-align:center}
.bag-empty svg{width:56px;height:56px;fill:none;stroke:var(--muted);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.bag-empty h1{margin:0;font-size:clamp(30px,5vw,48px)}
.bag-empty p{margin:0;color:var(--muted);max-width:40ch}
.bag-bar{display:none}
@media(max-width:1000px){
  .bag-layout{grid-template-columns:1fr}
  .bag-summary{position:static}
  .bag-bar{position:fixed;z-index:60;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 18px calc(12px + env(safe-area-inset-bottom));background:var(--ink);color:var(--paper);box-shadow:0 -10px 34px rgba(0,0,0,.28)}
  .bag-bar b{font-size:18px}
  .bag-bar small{display:block;opacity:.7;font-size:11px;letter-spacing:.04em}
  .bag-bar a{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:10px;background:var(--paper);color:var(--ink);font-weight:900}
  body.has-bag-bar{padding-bottom:84px}
}
@media(max-width:560px){
  .bag-item{grid-template-columns:78px minmax(0,1fr);grid-template-areas:"img info" "img total" "ctrl ctrl";gap:8px 14px;padding:12px}
  .bag-total{justify-self:start;font-size:16px}
  .bag-ctrl{justify-content:space-between;width:100%;padding-top:10px;border-top:1px solid var(--line);margin-top:2px}
  .bag-name{font-size:15px}
}


/* ============================================================================
   PART 6 — SHOP, CHECKOUT, CART SURFACES
   ============================================================================ */

.line-variant{display:flex!important;align-items:center;gap:7px}
.shop-colors{display:flex;gap:8px;align-items:center;margin:0 0 26px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.shop-colors::-webkit-scrollbar{display:none}
.shop-colors a{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;min-height:38px;padding:0 14px 0 10px;border:1px solid var(--shop-border);border-radius:999px;background:var(--shop-surface);font-size:12px;font-weight:800;white-space:nowrap}
.shop-colors a i{width:14px;height:14px;border-radius:50%;background:var(--sw);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent)}
.shop-colors a.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.shop-colors a.all{padding-left:14px}

/* Shop filter bar + product cards use shared surface & font */
.shop-section .shop-filter{
  background:var(--shop-surface);
  border-color:var(--shop-border);
  box-shadow:var(--shop-elev);
}
.shop-section .shop-filter input,
.shop-section .shop-filter select{
  background:var(--paper);
  border-color:var(--shop-border);
  font-family:var(--ui-font);
  font-size:14px;
  letter-spacing:0;
}
.shop-section .shop-filter button{
  background:var(--ink);
  color:var(--paper);
  border:1px solid var(--ink);
  font-family:var(--font-button,var(--ui-font));
  font-weight:800;
  letter-spacing:.02em;
}
.shop-section .shop-filter button:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:none;
  box-shadow:none;
}

/* Product card typography — one body font, tabular prices */
.product-card h3,
.shop-section .product-card h3{
  font-family:var(--ui-font);
  font-weight:700;
  letter-spacing:-.005em;
  color:var(--ink);
}
.product-card .body .muted,
.shop-section .product-card .muted{
  color:color-mix(in srgb,var(--muted) 82%,var(--ink));
  font-size:12.5px;
  line-height:1.45;
}
.product-card .price,
.shop-section .product-card .price{
  font-family:var(--ui-font);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  font-weight:800;
}
.product-card .price .was-price{
  color:color-mix(in srgb,var(--muted) 90%,var(--ink));
}

/* Section headings stay in the display face, but sit tighter */
.shop-section .section-head h1,
.cart-page .section-head h1,
.bag-head h1{
  font-family:var(--ui-display);
  letter-spacing:-.04em;
}

/* Cart page surfaces use the shared system */
.cart-page .table-wrap,
.cart-page .discount-box,
.cart-page .summary{
  background:var(--shop-surface);
  border-color:var(--shop-border);
  box-shadow:var(--shop-elev);
}
.cart-page .cart-table th{
  color:color-mix(in srgb,var(--muted) 78%,var(--ink));
  font-weight:900;
  letter-spacing:.1em;
}
.cart-page .cart-table td{color:var(--ink);font-family:var(--ui-font)}
.cart-page .cart-table tbody tr{transition:background .15s ease}
.cart-page .cart-table tbody tr:hover td{background:color-mix(in srgb,var(--soft) 55%,transparent)}
.cart-page .checkout-button{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-button,var(--ui-font));
  font-weight:900;
  letter-spacing:.02em;
  border-radius:12px;
}
.cart-page .checkout-button:hover{
  background:var(--accent);
  color:#fff;
  transform:none;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 30%,transparent);
}

/* Readonly fields and offer inputs match the surface system */
.readonly-field{background:var(--paper);border-color:var(--shop-border)}