/* ============================================================================
   css/30-storefront.css  ·  Storefront v2 redesign (ordering.html ONLY)
   Scoped to `body.storefront-v2` so the production order-page bundle is never
   touched. Styles the prototype card DOM emitted by js/storefront-cards.js,
   ported 1:1 from mockups/order-redesign-proto.html:
     badge-row -> card-img (real 3D flip) -> name -> one spec line -> price + stepper.
   Specs/story live in the description sheet (bottom-sheet.js), not on the card.
   Loaded un-bundled AFTER css/bundle.css, so `.storefront-v2 .sf-card ...`
   (specificity 0,3,0 + later source order) wins over legacy `.coin-card` rules
   without needing !important.
   ============================================================================ */

/* ── 0. Palette + font custom properties ──────────────────────────────────── */
.storefront-v2 {
  --sf-ink: #070b16;
  --sf-navy: #0c1426;
  --sf-navy-2: #111c33;
  --sf-line: rgba(212,179,99,.18);
  --sf-line-soft: rgba(255,255,255,.07);
  --sf-txt: #eaf0fb;
  --sf-muted: #9aa7c2;
  --sf-muted-2: #7e8cab;
  --sf-gold-1: #f6e3a8;
  --sf-gold-2: #d8b35f;
  --sf-gold-3: #b8862f;
  --sf-silver-1: #f1f4fa;
  --sf-silver-2: #c2cad8;
  --sf-silver-3: #8c98ad;
  --sf-green: #39d98a;
  --sf-r: 18px;
  --display: 'Fraunces', Georgia, serif;
  --ui: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}
/* Hebrew/Arabic: swap display + UI to native families so RTL never falls back
   to Latin Fraunces -> generic serif. */
[dir="rtl"] .storefront-v2 {
  --display: 'Frank Ruhl Libre', 'Heebo', Georgia, serif;
  --ui: 'Heebo', system-ui, -apple-system, sans-serif;
}
.storefront-v2 .price-display,
.storefront-v2 .spec { font-feature-settings: "tnum" 1, "lnum" 1; }

/* ── 1. Match the mockup's 1180px canvas ──────────────────────────────────────
   The order-page container caps at 1060px by default, shrinking the cards to ~243px.
   Widen it to 1180px on the storefront so cards render at the prototype's ~270px. */
.storefront-v2 .container { max-width: 1180px; }

/* ── 1a. Header wordmark (mockup): INNOVATION light + DIAMONDS gold beneath ────
   Replaces the low-contrast outline logo image on /ordering. Always Fraunces (Latin
   brand mark) even under dir="rtl" so Hebrew display fonts never reshape the letters. */
.storefront-v2 .logo-wrap .logo-img { display: none; }
.storefront-v2 .sf-wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  direction: ltr;
}
.storefront-v2 .sf-wm-1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  letter-spacing: .42em;
  font-size: 30px;
  padding-inline-start: .42em;
  color: #fdfbf4;
}
.storefront-v2 .sf-wm-2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  letter-spacing: .6em;
  font-size: 13px;
  padding-inline-start: .6em;
  margin-top: 5px;
  color: var(--sf-gold-2);
}

/* Kill the legacy full-width gold divider under the header (border-bottom:2.6px
   #8a6508 from the bundle) -- a cheap-template look the mockup does not have. */
.storefront-v2 .header { border-bottom: none; }

/* ── 1a-hero. Hero headline -> mockup `.hero h1` + `.tag` ──────────────────────
   The bundle styles `.hero-title` as Rubik 800 / 32px gold; the prototype uses a
   grand Fraunces display headline with a muted one-line tag beneath. Scoped rule
   (loaded after bundle.css) wins on source order, no !important needed. Localized
   text uses var(--display) so RTL renders Frank Ruhl Libre, not Latin Fraunces. */
.storefront-v2 .hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--sf-txt);
  text-align: center;
  text-shadow: none;
  margin: 30px auto 0;
  padding: 0 24px;
}
/* Gold-shimmer accent word (mockup `.gold`) */
.storefront-v2 .hero-title .gold {
  background: linear-gradient(100deg, var(--sf-gold-3), var(--sf-gold-1) 25%, #fff7df 38%, var(--sf-gold-1) 50%, var(--sf-gold-3));
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sf-shimmer 7s linear infinite;
}
@keyframes sf-shimmer { to { background-position: 250% center; } }
@media (prefers-reduced-motion: reduce) {
  .storefront-v2 .hero-title .gold { animation: none; }
}
.storefront-v2 .hero-sub {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--sf-muted);
  text-align: center;
  max-width: 520px;
  margin: 14px auto 0;
  padding: 0 24px;
}
@media (max-width: 768px) {
  .storefront-v2 .hero-title { font-size: clamp(30px, 8vw, 46px); margin-top: 18px; line-height: 1.04; letter-spacing: -.015em; }
  .storefront-v2 .hero-sub { font-size: 12.5px; }
}

/* ── 1a-tabs. Category tabs (sub-menu) -> mockup pills ────────────────────────
   The elaborate coin-scene tab design is dropped here (its coin imagery is already
   display:none); restyle as the prototype's simple pills: muted outline, gold-gradient
   active state, count bubble. Localized label uses var(--display) so RTL gets the
   Hebrew display font (Frank Ruhl Libre) rather than Latin Fraunces. */
.storefront-v2 .hero-cat-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.storefront-v2 .hero-cat-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;        /* override the legacy flex-basis:300px so pills size to content */
  width: auto;
  height: auto;
  min-height: 0;
  border: 1px solid var(--sf-line-soft);
  background: rgba(255,255,255,.02);
  color: var(--sf-muted);
  font-family: var(--display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: .01em;
  padding: 11px 22px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: none;
  overflow: visible;
  transition: color .28s, border-color .28s, background .28s;
}
.storefront-v2 .hero-cat-tab .tab-ground,
.storefront-v2 .hero-cat-tab .coin-scene,
.storefront-v2 .hero-cat-tab .bars-scene { display: none; }
/* Legacy bundle paints a dark square box (::before) + a gradient line (::after)
   behind each tab · the "cube with an ellipse inside" the operator flagged.
   Kill both pseudos so only the premium pill remains. */
.storefront-v2 .hero-cat-tab::before,
.storefront-v2 .hero-cat-tab::after { content: none !important; }
.storefront-v2 .hero-cat-tab .tab-label {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.storefront-v2 .hero-cat-tab .tab-label-en {
  font-family: var(--display);
  font-weight: 500;
  /* Phase 34 forces 4 tabs to equal flex-basis (line ~1518) so long labels like
     "בליסטר מעוצב" no longer size to content - fluid clamp keeps text inside its
     pill at every width instead of spilling past the border (fixed 18px overflowed). */
  font-size: clamp(13px, 1.5vw, 18px);
  color: inherit;
}
/* Count bubble inside the pill · mockup .ct (operator 2026-06-10: restore the
   mockup look; supersedes the earlier hide-counts call). */
.storefront-v2 .hero-cat-tab .tab-count {
  display: inline-block;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: var(--sf-muted-2);
}
.storefront-v2 .hero-cat-tab.active .tab-count {
  background: rgba(0,0,0,.18);
  color: #3a2c08;
}
@media (hover: hover) {
  .storefront-v2 .hero-cat-tab:hover { color: var(--sf-txt); border-color: var(--sf-line); }
}
.storefront-v2 .hero-cat-tab.active {
  color: #1a1305;
  background: linear-gradient(120deg, var(--sf-gold-1), var(--sf-gold-2));
  border-color: transparent;
  box-shadow: 0 8px 24px rgba(216,179,95,.3);
}
.storefront-v2 .hero-cat-tab.active .tab-label-en { color: #1a1305; }

/* ── 1b. Strip the inventory box + redundant master title + List toggle ───────
   The dark theme (css/04-theme-dark.css, bundled + shared with order-page) paints
   EVERY `.section` a navy box with a gold !important border. We must not touch the
   shared bundle, so override here with !important to let the grid float like the
   mockup (cards on the page background, no panel chrome). */
.storefront-v2 .section.section-products {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  max-width: 1180px;
  margin: 0 auto;
}
.storefront-v2 .section-products > .section-title { display: none; }
.storefront-v2 .view-mode-bar { display: none; }

/* ── 2. Per-category eyebrow title (prototype .section-title) ──────────────── */
.storefront-v2 .section-tab-title {
  text-align: center;
  color: var(--sf-muted-2);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin: 26px 0 18px;
  border: none;
  padding: 0;
}

/* ── 3. Floating grid (no card-list chrome) ───────────────────────────────── */
.storefront-v2 .coins-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  padding: 8px 0 10px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ── 4. Card shell ────────────────────────────────────────────────────────── */
.storefront-v2 .sf-card {
  position: relative;
  /* flex-column so the price-row can be bottom-anchored (margin-block-start:auto).
     This aligns price rows across cards regardless of Dremt-slot presence or name
     line-wrap differences. The card-img block gets a fixed aspect-ratio so the image
     height stays predictable inside the flex container. */
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-r);
  padding: 16px;
  overflow: hidden;
  min-height: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .6s cubic-bezier(.32,.72,0,1),
              border-color .6s cubic-bezier(.32,.72,0,1),
              box-shadow .6s cubic-bezier(.32,.72,0,1);
}
/* Coin artwork eases for the hover zoom (coins only). */
.storefront-v2 .sf-card.coins-item .sf-face.sf-front img {
  transition: transform .7s cubic-bezier(.32,.72,0,1);
}
@media (hover: hover) {
  .storefront-v2 .sf-card:hover {
    transform: translateY(-8px);
    border-color: var(--sf-line);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10),
                0 30px 60px -20px rgba(0,0,0,.7),
                0 0 0 1px rgba(216,179,95,.12),
                0 0 44px -10px rgba(216,179,95,.18);
  }
  .storefront-v2 .sf-card:active { transform: translateY(-4px) scale(.992); }
  .storefront-v2 .sf-card.coins-item:hover .sf-face.sf-front img { transform: scale(1.04); }
}
.storefront-v2 .sf-card.is-gold {
  background: linear-gradient(180deg, #1c1708, #120d04);
  border-color: rgba(216,179,95,.32);
}

/* ── 5. Badge row ABOVE the image ─────────────────────────────────────────── */
.storefront-v2 .sf-card .badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  position: static;
}
.storefront-v2 .sf-card .badge-row .badge,
.storefront-v2 .sf-card .badge-row .status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  margin: 0;
  inset: auto;            /* neutralise any legacy absolute positioning */
}
.storefront-v2 .sf-card .badge-row .dot { width: 6px; height: 6px; border-radius: 50%; }
.storefront-v2 .sf-card .badge-row .status-chip--available {
  background: rgba(57,217,138,.12);
  color: #7ff0b6;
  border: 1px solid rgba(57,217,138,.3);
}
.storefront-v2 .sf-card .badge-row .status-chip--available .dot {
  background: var(--sf-green);
  box-shadow: 0 0 8px var(--sf-green);
}
.storefront-v2 .sf-card .badge-row .status-chip--preorder {
  background: rgba(216,179,95,.13);
  color: var(--sf-gold-1);
  border: 1px solid var(--sf-line);
}
.storefront-v2 .sf-card .badge-row .status-chip--preorder .dot {
  background: var(--sf-gold-2);
  box-shadow: 0 0 8px rgba(216,179,95,.6);
}
/* Dremt chip (teal) appended by applyFirestoreContent */
.storefront-v2 .sf-card .badge-row .badge--dremt {
  position: relative;
  background: rgba(45,212,191,.12);
  color: #5eead4;
  border: 1px solid rgba(45,212,191,.3);
  cursor: help;
}

/* ── 6. Card image + REAL 3D flip ─────────────────────────────────────────── */
.storefront-v2 .sf-card .card-img {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.05), transparent 70%);
  overflow: visible;
}
.storefront-v2 .sf-card.is-gold .card-img {
  background: radial-gradient(circle at 50% 38%, rgba(246,227,168,.14), transparent 68%);
}
/* High-end coin tray · the coin sits in a machined "well" with concentric inset
   highlights. Coins only — bars/blisters keep their full-bleed / no-frame look. */
.storefront-v2 .sf-card.coins-item .card-img {
  border: 1px solid var(--sf-line-soft);
  background: radial-gradient(circle at 50% 35%, #18223a, #0a1120 72%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.08), inset 0 -16px 34px rgba(0,0,0,.5);
}
.storefront-v2 .sf-card.coins-item.is-gold .card-img {
  border-color: rgba(216,179,95,.22);
  background: radial-gradient(circle at 50% 35%, #1d1708, #0a0a06 72%);
}
/* Real 3D flip · sf-* class names so the legacy `.flip-inner{transform:none!important}`
   carousel rules in bundle.css cannot touch it. Perspective lives on .sf-flip
   (the DIRECT parent of the rotating .sf-flip-inner) exactly like the prototype. */
.storefront-v2 .sf-card .sf-flip { position: absolute; inset: 0; perspective: 1100px; }
.storefront-v2 .sf-card .sf-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.4, 0, .2, 1);
}
.storefront-v2 .sf-card .sf-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.storefront-v2 .sf-card .sf-face img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
/* Flip restored (operator 2026-06-16) · coins auto-flip, bars/blisters flip on tap.
   The reverse face sits pre-rotated; flipping the inner 180deg swaps which face is
   shown (the other is hidden by backface-visibility). One toggle class .sf-flipped
   on .card-img drives both the coin auto-flip (JS scheduler) and the bar/blister
   tap flip (delegated click handler). */
.storefront-v2 .sf-card .sf-face.sf-back { transform: rotateY(180deg); }
.storefront-v2 .sf-card .card-img.sf-flipped .sf-flip-inner { transform: rotateY(180deg); }
.storefront-v2 .sf-card .card-img.sf-tap-flip { cursor: pointer; }

/* Metal ring · coins only (round). Silver by default, gold for gold / gold-plated.
   Sits in the empty margin around the coin (the coin image fills only ~80%). */
.storefront-v2 .sf-card .card-img.sf-coin-fx::before {
  content: "";
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  padding: 3px;
  z-index: 0;
  pointer-events: none;
  --ring-1: var(--sf-silver-1);
  --ring-3: var(--sf-silver-3);
  background: conic-gradient(from 0deg, transparent, var(--ring-1), var(--ring-3), transparent 62%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  animation: sf-ring-spin 6s linear infinite;
}
.storefront-v2 .sf-card .card-img.sf-coin-fx.sf-gold-ring::before {
  --ring-1: var(--sf-gold-1);
  --ring-3: var(--sf-gold-3);
}
@keyframes sf-ring-spin { to { transform: rotate(360deg); } }

/* Accessibility · stop continuous motion for users who ask for less of it.
   (The JS scheduler also skips the auto-flip under this setting; the manual
   bar/blister tap flip stays, just without the rotate transition.) */
@media (prefers-reduced-motion: reduce) {
  .storefront-v2 .sf-card .sf-flip-inner { transition: none; }
  .storefront-v2 .sf-card .card-img.sf-coin-fx::before { animation: none; }
}

/* Dremt slot · sits BENEATH the image so the badge tooltip never overlays the coin.
   Collapses entirely when the product has no Dremt value. */
.storefront-v2 .sf-card .sf-dremt-slot { display: flex; margin-top: 11px; }
.storefront-v2 .sf-card .sf-dremt-slot:empty { display: none; }
.storefront-v2 .sf-card .sf-dremt-slot .badge--dremt { position: relative; margin: 0; }

/* ── 6b. Blister cards · full-bleed artwork (operator 2026-06-10) ─────────────
   Blisters are wide gift cards; the artwork must be cropped + enlarged and fill
   the card edge-to-edge with no inner frame · no halo, no drop-shadow, no border. */
.storefront-v2 .sf-card.blister-card .card-img {
  background: none;
  aspect-ratio: 3 / 2;
  margin-inline: -16px;          /* bleed across the card's 16px padding */
  margin-block-start: 6px;
}
.storefront-v2 .sf-card.blister-card .sf-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* crop, do not letterbox */
  border-radius: 0;
  filter: none;
}
.storefront-v2 .sf-card.blister-card.is-gold {
  border-color: rgba(255,255,255,.05);   /* lighter than the gold coin/bar frame */
}

/* ── 6c. Bar cards · enlarge the portrait bar photo + pack tighter (operator 2026-06-12)
   The default .sf-face img sizes to 80% with object-fit:contain · for a portrait
   bar package that leaves a large empty frame around a small photo. Zoom the photo
   in to fill the image area, drop the inner halo, and tighten the wrap so the card
   reads as packed rather than a small bar floating in dead space. */
/* Pack the bars grid (drop the bundle's 900px cap + 3-col rule) so it follows the
   same responsive density as the coins grid · 4 / 3 / 2 columns. With the photo now
   filling 100% of the frame each bar reads larger than the old 80%-in-a-wide-card
   layout, and the grid is denser / less dead space. #id specificity beats the
   bundle's #barsList rules; explicit per-breakpoint so mobile is never forced 4-up. */
@media (min-width: 981px) {
  .storefront-v2 #barsList { max-width: none; grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 761px) and (max-width: 980px) {
  .storefront-v2 #barsList { max-width: none; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .storefront-v2 #barsList { max-width: none; grid-template-columns: 1fr 1fr; }
}
.storefront-v2 .sf-card.bars-item .card-img {
  background: none;              /* drop the radial halo · reads as an inner frame */
  margin-inline: -6px;          /* let the photo breathe wider toward the card edges */
  aspect-ratio: 340 / 481;       /* match the real bar-photo proportions (~0.71) instead
                                     of the base 1/1 square, so contain leaves zero dead
                                     space on the sides instead of ~15% margins each way */
}
.storefront-v2 .sf-card.bars-item .sf-face img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ── 7. Name + spec line ──────────────────────────────────────────────────── */
.storefront-v2 .sf-card .nm {
  font-family: var(--display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  color: var(--sf-txt);
  margin: 14px 0 2px;
  cursor: pointer;
  /* Reserve 2 lines so 1-line and 2-line names occupy the same height · keeps
     every card the same total height so the bottom-pinned price aligns on one
     line across all cards (operator 2026-06-12). */
  min-height: 2.4em;
}
.storefront-v2 .sf-card .spec {
  font-family: var(--ui);
  font-size: 11.5px;
  color: var(--sf-muted-2);
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: baseline;
}

/* ── 8. Price row · [Per unit + price]  |  [stepper] ──────────────────────── */
.storefront-v2 .sf-card .price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  /* margin-block-start:auto pushes the price row to the card bottom, aligning it
     across all grid cells regardless of Dremt slot presence or name line-wrapping.
     NOTE: do not re-add an explicit margin-top here · it resolves to the same
     physical top margin and shadows `auto`, breaking the bottom-pin. */
  margin-block-start: auto;
  padding-top: 12px;
  border-top: 1px solid var(--sf-line-soft);
}
.storefront-v2 .sf-card .price-cell { display: flex; flex-direction: column; gap: 2px; }
.storefront-v2 .sf-card .price-cell .lab {
  font-family: var(--ui);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sf-muted-2);
}
.storefront-v2 .sf-card .price-field { display: none; }
.storefront-v2 .sf-card .price-display {
  font-family: var(--display);
  font-weight: 500;
  font-size: 23px;
  line-height: 1;
  color: var(--sf-txt);
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  /* Force LTR so the number reads "₪500.00" even under dir="rtl"; otherwise the
     cents span (.00) flows to the left of the integer and the price reads wrong. */
  direction: ltr;
  unicode-bidi: isolate;
}
.storefront-v2 .sf-card .price-display .currency-sym { font-size: 14px; color: var(--sf-gold-2); }
.storefront-v2 .sf-card .price-display .price-cents { font-size: 13px; opacity: .7; }
.storefront-v2 .sf-card.is-gold .price-display { color: var(--sf-gold-1); }

/* Stepper pill */
.storefront-v2 .sf-card .stepper {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: rgba(0,0,0,.28);
  border: 1px solid var(--sf-line-soft);
  border-radius: 999px;
  padding: 3px;
}
.storefront-v2 .sf-card .stepper .qty-btn {
  width: 27px; height: 27px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--sf-txt);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.storefront-v2 .sf-card .stepper .qty-btn:hover {
  background: rgba(216,179,95,.16);
  color: var(--sf-gold-1);
}
.storefront-v2 .sf-card .stepper .qty-val {
  width: 30px;
  min-width: 22px;
  text-align: center;
  border: none;
  background: none;
  color: var(--sf-txt);
  font-weight: 600;
  font-size: 14px;
  -moz-appearance: textfield;
}
.storefront-v2 .sf-card .stepper .qty-val::-webkit-outer-spin-button,
.storefront-v2 .sf-card .stepper .qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ── 9. Hidden subtotal (kept in DOM for updateTotals) ────────────────────── */
.storefront-v2 .sf-card .sf-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 10. Bulk-discount chip · inline under the price row, qty>1 ────────────── */
.storefront-v2 .sf-card .bulk-disc-chip {
  display: none;
  margin-top: 10px;
  width: 100%;
  flex-direction: column;
  gap: 2px;
  text-align: start;
  padding: 9px 12px;
  border: 1px solid var(--sf-line);
  border-radius: 12px;
  background: rgba(216,179,95,.06);
  color: var(--sf-gold-1);
  font-family: var(--ui);
  font-size: 12px;
  cursor: pointer;
}
.storefront-v2 .sf-card .bulk-disc-chip[style*="display: block"],
.storefront-v2 .sf-card .bulk-disc-chip:not([style*="display: none"]) { display: flex; }
.storefront-v2 .sf-card .bulk-disc-chip .bda-tier { font-weight: 700; }
.storefront-v2 .sf-card .bulk-disc-chip .bda-next { color: var(--sf-muted); }
.storefront-v2 .sf-card .bulk-disc-chip .bda-price { color: var(--sf-gold-1); font-weight: 600; }

/* ── 10b. Scroll reveal · cards fade-up-blur on entry (GPU-safe: opacity/transform/filter).
   Driven by the IntersectionObserver in storefront-cards.js (adds .sf-in). Each card
   reveals once; on grid re-render already-seen cards skip the hidden state. ──────── */
@media (prefers-reduced-motion: no-preference) {
  .storefront-v2 .sf-card.sf-reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  .storefront-v2 .sf-card.sf-reveal.sf-in {
    opacity: 1; transform: none; filter: none;
    transition: opacity .8s cubic-bezier(.32,.72,0,1),
                transform .8s cubic-bezier(.32,.72,0,1),
                filter .8s cubic-bezier(.32,.72,0,1);
  }
}

/* ── 11. Responsive grid (prototype breakpoints) ──────────────────────────── */
@media (max-width: 980px) {
  .storefront-v2 .coins-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .storefront-v2 .coins-list { grid-template-columns: 1fr 1fr; gap: 13px; }
  .storefront-v2 .sf-card .nm { font-size: 15px; }
  .storefront-v2 .sf-card .price-display { font-size: 19px; }
  /* 2-up cards are too narrow for stepper (>=44px touch) + price on one line ·
     stack them so the price is never clipped (was overflowing off-screen). */
  .storefront-v2 .sf-card .price-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .storefront-v2 .sf-card .price-row .price-display { order: -1; align-self: flex-start; }
  .storefront-v2 .sf-card .price-row .stepper { width: 100%; justify-content: space-between; }
}
/* Very small phones (<=360px, e.g. iPhone SE gen1): shrink the wordmark so the
   letter-spaced logo never exceeds the viewport. */
@media (max-width: 360px) {
  .storefront-v2 .sf-wm-1 { font-size: 25px; letter-spacing: .32em; padding-inline-start: .32em; }
  .storefront-v2 .sf-wm-2 { letter-spacing: .48em; padding-inline-start: .48em; }
}

/* ============================================================================
   12. Description modal · storefront only · DESKTOP (>820px) + MOBILE (<=820px).
   All rules scoped to .storefront-v2 so order-page bundle is never affected.
   No em-dash in comments · use middot.

   DESKTOP grid layout (col 1 = text, col 2 = image):
     Row 1 (full-width): breadcrumb
     Row 2+: col-1 = text stack (chips -> title -> price -> stepper -> cta ->
             story-h -> story), col-2 = image (sticky, spans all text rows)
     Below both: spec-table, trust-row

   The bundle (10-bottom-sheet.css) sets grid-column:2 on text blocks and
   grid-row:2 on the image with NO explicit row for text -> auto-placement
   creates a gap above the title. We fix by:
     - overriding grid to col-1=text / col-2=image (swapped from bundle)
     - giving the image grid-column:2 and grid-row:2/span 9 (explicit)
     - giving every text block grid-column:1 and an explicit grid-row
   display:contents on .sheet-info-block lets title + spec-table place separately.

   MOBILE: full-screen dark takeover. The bundle shows a light card panel
   (navy-on-light text). We override to single dark background, height 100dvh,
   border-radius 0, and neutralise the .sheet-info-block light surface.

   SCROLLBAR: thin dark-themed, scoped to .storefront-v2 #product-sheet .sheet-scroll.
   ============================================================================ */

/* ── Themed scrollbar (both desktop + mobile, storefront only) ───────────── */
.storefront-v2 #product-sheet .sheet-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(216,179,95,.35) transparent;
}
.storefront-v2 #product-sheet .sheet-scroll::-webkit-scrollbar { width: 8px; }
.storefront-v2 #product-sheet .sheet-scroll::-webkit-scrollbar-track { background: transparent; }
.storefront-v2 #product-sheet .sheet-scroll::-webkit-scrollbar-thumb {
  background: rgba(216,179,95,.30);
  border-radius: 8px;
}

/* ── Mobile full-screen dark takeover (<=820px, storefront only) ──────────── */
@media (max-width: 820px) {
  .storefront-v2 #product-sheet {
    height: 100vh;
    height: 100dvh;
    width: 100%;
    border-radius: 0;
    border-top: none;
    background: linear-gradient(180deg, var(--sf-navy-2, #0d1f36), var(--sf-navy, #071424));
    inset-block-start: 0;
    transform: translateY(100%);
  }
  .storefront-v2 #product-sheet.open {
    transform: translateY(0);
  }
  /* Neutralise the light card panel from the bundle */
  .storefront-v2 #product-sheet .sheet-info-block {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0;
  }
  .storefront-v2 #product-sheet .sheet-title {
    color: var(--sf-txt, #eaf0fb);
  }
  /* Single scroll context: shell does not add a second scrollbar */
  .storefront-v2 #product-sheet .sheet-scroll {
    overflow-y: auto;
    height: 100%;
    padding: 16px 20px 32px;
    box-sizing: border-box;
  }
}

/* ── Desktop two-column modal (>820px, storefront only) ───────────────────── */
@media (min-width: 821px) {
  /* Luxury modal shell */
  .storefront-v2 #product-sheet.sheet-desktop {
    width: min(960px, 94vw);
    max-width: 960px;
    background: linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
    border: 1px solid var(--sf-line);
    border-radius: 24px;
    box-shadow: 0 40px 120px rgba(0,0,0,.6);
    /* Physical left centering: logical insets mis-center under dir="rtl" */
    inset-inline-start: auto;
    inset-inline-end: auto;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }
  .storefront-v2 #product-sheet.sheet-desktop.open { transform: translate(-50%, -50%); }

  /* Neutralise light .sheet-info-block from bundle */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-info-block {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 0;
  }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-title {
    color: var(--sf-txt, #eaf0fb);
  }

  /* Two-column grid: col-1=text (left), col-2=image (right) */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-scroll {
    display: grid;
    grid-template-columns: 1fr 440px;
    grid-auto-rows: auto;
    gap: 0 40px;
    padding: 24px 30px 26px;
    align-items: start;
  }

  /* Unglue title + spec-table: each can grid-place independently */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-info-block { display: contents; }

  /* Row 1: breadcrumb spans full width */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-breadcrumb {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Text column (col 1), rows 2-10: chips -> title -> price -> stepper ->
     bulk-cta -> subtotal -> cta -> story-h -> story */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-chips-row      { grid-column: 1; grid-row: 2;  margin: 0 0 2px; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-title          { grid-column: 1; grid-row: 3;  margin-block-start: 0; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-spec-table     { grid-column: 1; grid-row: 4; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-p33-price-block{ grid-column: 1; grid-row: 5;  margin-block: 10px; padding-block: 10px; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-stepper-row    { grid-column: 1; grid-row: 6; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-bulk-cta       { grid-column: 1; grid-row: 7; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-subtotal-row   { grid-column: 1; grid-row: 8;  margin-block: 6px; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-cta-btn        { grid-column: 1; grid-row: 9; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-p33-story-h    { grid-column: 1; grid-row: 10; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-story-block    { grid-column: 1; grid-row: 11; }

  /* Image column (col 2), sticky · spans rows 2-10 so it stays level with title */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-hero-img-wrap {
    grid-column: 2;
    grid-row: 2 / span 10;
    align-self: start;
    position: sticky;
    top: 0;
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 440px;
    min-height: 0;
    max-height: none;
    margin-inline: auto;
    display: block;
    border: 1px solid var(--sf-line-soft);
    border-radius: 20px;
    background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.06), transparent 70%);
    overflow: hidden;
    cursor: pointer;
  }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-hero-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    border-radius: 20px;
    background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 49%, transparent 57%);
    background-size: 280% 280%;
    mix-blend-mode: screen;
    animation: sf-sheet-sweep 4.5s ease-in-out infinite;
  }
  /* Gold products: warm gold sheen instead of the cold white flash
     (.sheet-gold is toggled by populateSheet from product.metal). */
  .storefront-v2 #product-sheet.sheet-desktop.sheet-gold .sheet-hero-img-wrap::after {
    background: linear-gradient(115deg, transparent 42%, rgba(255,213,128,.24) 49%, transparent 57%);
    background-size: 280% 280%;
  }
  /* Coin fills the square; override bundle max-height:240px that truncated it.
     Also clear the p33-float animation that fought the 3D flip rotateY. */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-hero-img-wrap .sheet-hero-img {
    max-height: none;
    padding: 11%;
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
  }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-hero-img-wrap .sheet-hero-img:not(.sheet-hero-img-back) {
    animation: none;
  }

  /* Spec list · narrow 2-col hairline, directly under the title (row 4 via row-map) */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-spec-table {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    margin: 12px 0 4px;
    padding: 0;
    border: none;
    border-radius: 0;
  }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-spec-table dt,
  .storefront-v2 #product-sheet.sheet-desktop .sheet-spec-table dd {
    padding: 9px 0;
    margin: 0;
    font-size: 13.5px;
    border-block-end: 1px solid rgba(255,255,255,.06);
  }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-spec-table dt {
    color: var(--sf-muted-2); letter-spacing: .02em; font-weight: 400;
  }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-spec-table dd {
    color: var(--sf-txt); font-weight: 500; text-align: end;
  }

  /* Trust row: full width below spec-table (row 12) */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-trust-row {
    grid-column: 1 / -1;
    grid-row: 12;
    margin-block-start: 16px;
    padding-block: 12px;
  }

  /* Title: Fraunces display headline */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 2px 0 0;
  }

  /* Story: show paragraph inline, no collapse */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-story-toggle { display: none; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-story-text {
    display: block;
    font-family: var(--ui);
    font-size: 15px;
    line-height: 1.8;
    color: var(--sf-muted);
    max-width: 54ch;
  }

  /* CTA: gold pill, full width of the text column */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-cta-btn {
    width: 100%;
    border-radius: 999px;
    margin-top: 6px;
  }

  /* Close button: sits in top-right corner, always above scroll content */
  .storefront-v2 #product-sheet.sheet-desktop .sheet-close-btn {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-end: 16px;
    z-index: 10;
    min-width: 44px;
    min-height: 44px;
  }
}
/* Sweep crosses in ~3.2s, then rests ~1.3s off-screen before the next pass
   (was parked for 45% of a 5s cycle · read as "ran once and stopped"). */
@keyframes sf-sheet-sweep { 0% { background-position: 160% 0; } 72% { background-position: -60% 0; } 100% { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) {
  .storefront-v2 #product-sheet.sheet-desktop .sheet-hero-img-wrap::after { animation: none; }
}

/* ── 12b. High-end uplift · description modal (additive overrides) ─────────────
   Layered after §12 so it wins by source order without rewriting the grid/flip.
   Applies to BOTH desktop (.sheet-desktop) and the mobile takeover. The hero
   flip (data-flipped, defined in the bundle) is left untouched. */

/* Modal double-bezel shell + top gold glow (desktop) */
.storefront-v2 #product-sheet.sheet-desktop {
  border-radius: 26px;
  box-shadow: 0 50px 120px -30px rgba(0,0,0,.8),
              0 0 0 6px rgba(255,255,255,.03),
              inset 0 1px 1px rgba(255,255,255,.10);
}

/* Hero · machined tray with concentric inset highlights (keeps sweep + flip) */
.storefront-v2 #product-sheet .sheet-hero-img-wrap {
  border: 1px solid var(--sf-line-soft);
  border-radius: 22px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.10), inset 0 -22px 50px rgba(0,0,0,.45);
}
.storefront-v2 #product-sheet.sheet-gold .sheet-hero-img-wrap { border-color: rgba(216,179,95,.22); }

/* Price · gold currency + Fraunces integer, tabular */
.storefront-v2 #product-sheet .sheet-unit-price {
  font-family: var(--display); display: inline-flex; align-items: baseline; gap: 1px;
  direction: ltr; unicode-bidi: isolate;
}
.storefront-v2 #product-sheet .sheet-currency { color: var(--sf-gold-2); font-size: 18px; }
.storefront-v2 #product-sheet .sheet-price-int { font-size: 32px; line-height: 1; color: var(--sf-txt); font-variant-numeric: tabular-nums; }
.storefront-v2 #product-sheet .sheet-price-cents { font-size: 15px; color: var(--sf-muted); }
.storefront-v2 #product-sheet .sheet-per-unit {
  font-family: var(--ui); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sf-muted-2); margin-inline-start: 8px;
}
.storefront-v2 #product-sheet.sheet-gold .sheet-price-int { color: var(--sf-gold-1); }

/* Stepper · island pill + circular buttons */
.storefront-v2 #product-sheet .sheet-mini {
  display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
  background: rgba(0,0,0,.28); border: 1px solid var(--sf-line-soft);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.06);
}
.storefront-v2 #product-sheet .sheet-qty-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--sf-txt); font-size: 19px; line-height: 1;
  display: grid; place-items: center;
  transition: background .25s cubic-bezier(.32,.72,0,1), transform .15s cubic-bezier(.32,.72,0,1);
}
.storefront-v2 #product-sheet .sheet-qty-btn:hover { background: linear-gradient(180deg, var(--sf-gold-1), var(--sf-gold-2)); color: var(--sf-ink); }
.storefront-v2 #product-sheet .sheet-qty-btn:active { transform: scale(.9); }
.storefront-v2 #product-sheet .sheet-qty-num { min-width: 30px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Subtotal row · clean tabular */
.storefront-v2 #product-sheet .sheet-subtotal-row {
  display: flex; justify-content: space-between; align-items: baseline;
  color: var(--sf-muted); font-size: 13px;
}
.storefront-v2 #product-sheet .sheet-subtotal-amt { color: var(--sf-txt); font-variant-numeric: tabular-nums; font-weight: 600; }

/* CTA · gold pill, magnetic press + trailing arrow (arrow via ::after so the
   JS-set textContent is never clobbered). */
.storefront-v2 #product-sheet .sheet-cta-btn {
  background: linear-gradient(180deg, var(--sf-gold-1), var(--sf-gold-2));
  color: var(--sf-ink); font-weight: 700; border: none; padding: 15px 22px; border-radius: 999px;
  box-shadow: 0 12px 28px -12px rgba(216,179,95,.7);
  transition: transform .25s cubic-bezier(.32,.72,0,1), filter .25s cubic-bezier(.32,.72,0,1);
}
.storefront-v2 #product-sheet .sheet-cta-btn::after {
  content: "→"; margin-inline-start: 10px; display: inline-block;
  transition: transform .3s cubic-bezier(.32,.72,0,1);
}
[dir="rtl"] .storefront-v2 #product-sheet .sheet-cta-btn::after { content: "←"; }
.storefront-v2 #product-sheet .sheet-cta-btn:hover { filter: brightness(1.04); }
.storefront-v2 #product-sheet .sheet-cta-btn:hover::after { transform: translateX(3px); }
[dir="rtl"] .storefront-v2 #product-sheet .sheet-cta-btn:hover::after { transform: translateX(-3px); }
.storefront-v2 #product-sheet .sheet-cta-btn:active { transform: scale(.99); }

/* Bulk-discount controls · the "%" toggle (sheet-disc-btn) and the active-tier
   chip (sheet-bulk-cta) that appear once a quantity reaches a discount tier. */
.storefront-v2 #product-sheet .sheet-disc-btn {
  border: 1px solid var(--sf-line); border-radius: 999px; cursor: pointer;
  background: rgba(216,179,95,.10); color: var(--sf-gold-1);
  font-size: 11px; font-weight: 700; padding: 5px 11px; line-height: 1;
  transition: background .25s cubic-bezier(.32,.72,0,1), border-color .25s cubic-bezier(.32,.72,0,1);
}
.storefront-v2 #product-sheet .sheet-disc-btn[hidden] { display: none; }
.storefront-v2 #product-sheet .sheet-disc-btn:hover { background: rgba(216,179,95,.18); border-color: var(--sf-gold-2); }
.storefront-v2 #product-sheet .sheet-bulk-cta {
  margin-block: 4px 2px; padding: 11px 14px; border-radius: 14px;
  border: 1px solid var(--sf-line); background: rgba(216,179,95,.06);
  color: var(--sf-gold-1); font-size: 12.5px; line-height: 1.45; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.storefront-v2 #product-sheet .sheet-bulk-cta[hidden] { display: none; }

/* ── 13. Header / footer / order-form recolor (operator 2026-06-10) ───────────
   The legacy bundle paints the header a blue gradient (#0d1b2a -> #1a2f42), the
   customer/payment sections a lighter navy gradient with warm-beige inputs, and
   the submit button the old navy. None of these match the v2 ink palette, so
   re-skin them here · scoped, with !important only where 04-theme-dark.css
   already uses !important on .section. */
.storefront-v2 .header {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.storefront-v2 .site-footer {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.06);
  color: var(--sf-muted);
}
.storefront-v2 .site-footer a { color: var(--sf-muted); }

.storefront-v2 .section.section-customer,
.storefront-v2 .section.section-payment {
  /* Match the catalog card surface (#1a1a2e · the navy the cards actually render,
     from the bundle's #...List .coin-card rule) · the --sf-navy gradient read as a
     separate bluer/teal panel vs the cards (operator 2026-06-12). */
  background: #1a1a2e !important;
  border: 1px solid var(--sf-line-soft) !important;
  box-shadow: none !important;
  border-radius: var(--sf-r);
}
.storefront-v2 .section-customer input,
.storefront-v2 .section-customer select,
.storefront-v2 .section-customer textarea,
.storefront-v2 .section-payment input:not([type="radio"]):not([type="checkbox"]),
.storefront-v2 .section-payment select {
  background: #0a1322 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  color: var(--sf-txt) !important;
  border-radius: 12px;
}
.storefront-v2 .section-customer input:focus,
.storefront-v2 .section-customer select:focus,
.storefront-v2 .section-payment select:focus {
  border-color: var(--sf-gold-2) !important;
  box-shadow: 0 0 0 3px rgba(216,179,95,.15) !important;
  outline: none;
}
.storefront-v2 .section-customer ::placeholder { color: var(--sf-muted-2); }
.storefront-v2 .btn-submit {
  background: linear-gradient(120deg, var(--sf-gold-1), var(--sf-gold-2)) !important;
  color: #1a1305 !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(216,179,95,.3) !important;
}
/* ── Auth modal (sign-in) · restyled to match the storefront-v2 checkout modal
   language instead of the legacy plain-white popup (operator 2026-07-07: felt
   disconnected from the rest of the site, and gave guests no explanation for why
   sign-in was required when clicking the pre-order chip - see preorder-ui.js
   triggerSignIn/authContextMsg). Shared by every sign-in trigger on the page
   (header button, pre-order chip, checkout gate) - only the optional context line
   differs per trigger. */
.storefront-v2 .auth-modal-content {
  background: linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
  border: 1px solid var(--sf-line-soft);
  border-radius: 26px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.85), inset 0 1px 1px rgba(255,255,255,.10);
  color: var(--sf-txt);
}
.storefront-v2 .auth-modal h2 { font-family: var(--display); color: var(--sf-txt); }
.storefront-v2 .auth-context-msg {
  font-size: 12.5px; line-height: 1.5; color: var(--sf-muted); text-align: center;
  margin: -12px 0 20px;
}
.storefront-v2 .auth-form-group label,
.storefront-v2 label[data-t="authPhoneLabel"] { color: var(--sf-muted); }
.storefront-v2 #authPhone,
.storefront-v2 #authOTP,
.storefront-v2 .auth-form-group input,
.storefront-v2 .auth-form-group select {
  background: rgba(255,255,255,.04); border: 1px solid var(--sf-line-soft); color: var(--sf-txt);
}
.storefront-v2 .auth-send-btn,
.storefront-v2 .auth-submit-btn {
  background: linear-gradient(180deg, var(--sf-gold-1), var(--sf-gold-2));
  color: #1a1305; border: none;
}
.storefront-v2 .google-signin-btn {
  background: rgba(255,255,255,.04); border: 1px solid var(--sf-line-soft); color: var(--sf-txt);
}
.storefront-v2 .google-signin-btn:hover { border-color: var(--sf-gold-2); background: rgba(216,179,95,.06); }
.storefront-v2 .auth-divider span { background: var(--sf-navy-2); color: var(--sf-muted-2); }
.storefront-v2 .auth-divider::before { background: var(--sf-line-soft); }
.storefront-v2 .auth-guest-link { color: var(--sf-muted); }
.storefront-v2 .auth-guest-link:hover { color: var(--sf-gold-1); }
.storefront-v2 .auth-close { color: var(--sf-muted); }
.storefront-v2 .auth-close:hover { color: var(--sf-gold-1); }

/* Payment-method icons: SVG line-glyphs (replace emoji 💳🏦💵) · matches the
   gold stroke language of the service-highlights row. currentColor-free so the
   icon stays gold in rest/checked states. */
.storefront-v2 .pay-option label.pay .pay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.storefront-v2 .pay-option label.pay .pay-icon svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--sf-gold-2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .2s;
}
.storefront-v2 .pay-option input:checked + label.pay .pay-icon svg {
  stroke: var(--sf-gold-1);
}

/* ── 14. Hero declutter + compact rhythm + mockup seg control (operator 2026-06-10) */

/* The small line under the slogan ("Innovation Diamonds · Ramat Gan exchange")
   duplicates the wordmark and cheapens the hero · removed per operator. */
.storefront-v2 .hero-sub { display: none; }

/* Tighter vertical rhythm: the hero band had ~85px of dead air before the grid. */
.storefront-v2 .hero-title { margin-top: 22px; margin-bottom: 6px; }
.storefront-v2 .container { padding-top: 12px; }
.storefront-v2 .section-tab-title { margin: 14px 0 12px; }

/* Bars Silver/Gold sub-filter -> mockup .seg (dark inset pill, metal pips,
   sliding metal thumb). Markup already matches the prototype
   (.bars-subfilter > .seg-thumb + .seg-btn > .metal-pip); only the desktop
   skin + thumb geometry (positioned by storefront-cards.js) were missing. */
.storefront-v2 .bars-subfilter {
  display: flex;
  width: fit-content;
  margin: 18px auto 4px;        /* centered, like the mockup */
  background: rgba(0,0,0,.35);
  border: 1px solid var(--sf-line-soft);
  border-radius: 999px;
  padding: 5px;
  gap: 4px;
  position: relative;
  /* Recessed-track depth (matches .po-batch/.po-track language) so the pill
     reads as a crafted control, not a flat CSS toggle (operator 2026-07-07:
     "looks cheap, not premium"). */
  box-shadow: inset 0 2px 5px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.03);
}
.storefront-v2 .bars-subfilter .seg-btn {
  position: relative;
  z-index: 2;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .01em;
  color: var(--sf-muted);
  padding: 9px 24px;
  border-radius: 999px;
  transition: color .3s;
  display: flex;
  align-items: center;
  gap: 9px;
}
.storefront-v2 .bars-subfilter .metal-pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,.35), inset 0 1px 1px rgba(255,255,255,.5), 0 0 0 1px rgba(0,0,0,.15);
}
/* Polished-metal sphere (radial highlight), same recipe as the checkout
   modal's coin thumbnails (.tone-silver/.tone-gold .po-thumb-core) instead of
   a flat linear-gradient dot. */
.storefront-v2 .bars-subfilter .metal-pip--silver { background: radial-gradient(60% 60% at 35% 28%, #f4f7fb, #aab4c4 55%, #6c7689); }
.storefront-v2 .bars-subfilter .metal-pip--gold { background: radial-gradient(60% 60% at 35% 28%, #fbe6b4, var(--sf-gold-2) 55%, var(--sf-gold-3)); }
.storefront-v2 .bars-subfilter .seg-thumb {
  position: absolute;
  z-index: 1;
  top: 5px;
  bottom: 5px;
  left: 5px;                     /* physical: thumb math uses physical offsetLeft (RTL-safe) */
  width: 0;
  border-radius: 999px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), background .35s, box-shadow .35s, width .35s;
  background: linear-gradient(120deg, #eef2f7, #b9c3d2);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
/* main.js applyBarsMetalFilter toggles class "active" (and moves the thumb);
   the initial markup ships "seg-btn--active" on Silver · support both. */
.storefront-v2 .bars-subfilter:has(.seg-btn.active[data-metal="gold"]) .seg-thumb {
  background: linear-gradient(120deg, var(--sf-gold-1), var(--sf-gold-2));
  box-shadow: 0 6px 16px -4px rgba(216,179,95,.65), inset 0 1px 0 rgba(255,255,255,.5);
}
.storefront-v2 .bars-subfilter .seg-btn.active { color: #0b1020; font-weight: 700; }
.storefront-v2 .bars-subfilter:has(.seg-btn.active[data-metal="gold"]) .seg-btn.active { color: #2a1e05; }

/* ── Language bar · quieter desktop treatment (keep all 8 · operator 2026-06-12)
   The bundle paints each lang as a bordered, filled pill (.lang-btn). On the
   storefront that competes with the wordmark. Soften to flat text+flag links;
   gold ink only on active / hover. Desktop only · mobile uses the dropdown. */
@media (min-width: 821px) {
  /* Fixed LTR order regardless of selected language (operator 2026-07-07: switching
     between an RTL language (he/ar) and an LTR one flipped the whole row, reading as
     "the menu keeps moving"). Same fix as .hero-cat-tabs (Phase 34). */
  .storefront-v2 .lang-bar { gap: 2px; direction: ltr; }
  .storefront-v2 .lang-bar .lang-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--sf-muted-2);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    padding: 4px 8px;
    backdrop-filter: none;
    transition: color .2s, border-color .2s;
  }
  .storefront-v2 .lang-bar .lang-btn:hover {
    color: var(--sf-txt);
    border-color: transparent;
  }
  .storefront-v2 .lang-bar .lang-btn.active {
    color: var(--sf-gold-1);
    border-color: var(--sf-line);
    background: rgba(216,179,95,.06);
  }
}

/* Add-to-cart feedback · gold pulse on the card when its qty increments,
   and a soft flash on the grand total when it changes (operator 2026-06-12). */
@keyframes sf-cart-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(216,179,95,.0); }
  30%  { box-shadow: 0 0 0 3px rgba(216,179,95,.35); }
  100% { box-shadow: 0 0 0 0 rgba(216,179,95,.0); }
}
.storefront-v2 .sf-card.sf-just-added { animation: sf-cart-pulse .5s ease-out; }
@keyframes sf-total-flash {
  0%   { color: var(--sf-gold-1); }
  100% { color: inherit; }
}
.storefront-v2 #t-total.sf-total-flash { animation: sf-total-flash .6s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .storefront-v2 .sf-card.sf-just-added,
  .storefront-v2 #t-total.sf-total-flash { animation: none; }
}

/* Card name = "open details" affordance (operator 2026-06-12).
   Chevron via ::after so applyFirestoreContent's textContent reset can't wipe it. */
.storefront-v2 .sf-card .nm.coin-name { cursor: pointer; }
.storefront-v2 .sf-card .nm.coin-name::after {
  content: '\203A';                /* › */
  margin-inline-start: 6px;
  color: var(--sf-muted-2);
  font-weight: 400;
  transition: color .2s, margin-inline-start .2s;
}
.storefront-v2 .sf-card .nm.coin-name:hover,
.storefront-v2 .sf-card .nm.coin-name:focus-visible { color: var(--sf-gold-1); outline: none; }
.storefront-v2 .sf-card .nm.coin-name:hover::after { color: var(--sf-gold-1); margin-inline-start: 9px; }
.storefront-v2 .sf-card .nm.coin-name:focus-visible { text-decoration: underline; text-underline-offset: 3px; }

/* Dremt badge: signal it is explainable. Brand term stays; add an info dot and
   desktop hover tooltip. The bundle reveal mechanism is display:none -> display:block
   (tap toggles .tip-open on mobile); hover-reveal mirrors that here. */
.storefront-v2 .badge--dremt { cursor: help; }
.storefront-v2 .badge--dremt .dremt-val::after {
  content: '\24D8';                /* ⓘ */
  margin-inline-start: 5px;
  opacity: .6;
  font-size: .9em;
}
@media (hover: hover) {
  .storefront-v2 .badge--dremt:hover .dremt-tip { display: block; }
}

/* Unify checkout panels to the catalog card surface (#1a1a2e · operator 2026-06-12).
   #totalBox / .bank-details-box / .installments-box were off-token navies; match
   them to the same #1a1a2e the cards + customer + payment panels render, so the
   whole order area reads as one navy (not a bluer/teal block at the bottom). */
.storefront-v2 #totalBox,
.storefront-v2 .bank-details-box,
.storefront-v2 .installments-box {
  background: #1a1a2e !important;
  border: 1px solid var(--sf-line-soft) !important;
}

/* Modal backdrop · blur + dim the catalog behind for focus/depth (liquid-glass). */
.storefront-v2 .sheet-overlay {
  background: rgba(4, 8, 16, .55);
  backdrop-filter: blur(7px) saturate(.9);
  -webkit-backdrop-filter: blur(7px) saturate(.9);
}

/* Single price source of truth: the .sheet-p33-price-block hero price (with VAT
   note) is canonical; hide the duplicate unit price inside the stepper row. */
.storefront-v2 #product-sheet .sheet-unit-price { display: none; }
.storefront-v2 #product-sheet .sheet-stepper-bottom { justify-content: flex-start; }

/* Sticky action-bar (price+stepper+CTA reachable while scrolling) · mobile footer.
   .sheet-action-bar wraps stepper-row + subtotal-row + cta-btn; pinned to the
   bottom of the scroll context, bleeding to the scroll padding edges. */
@media (max-width: 820px) {
  .storefront-v2 #product-sheet .sheet-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    margin: 8px -20px -32px;     /* bleed to the .sheet-scroll padding edges */
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(7,11,22,.0), rgba(7,11,22,.92) 22%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}

/* Desktop: the action bar is a single grid item in col-1; its children (stepper,
   subtotal, cta) flow inside it. Supersedes the individual T9 row numbers for
   stepper/subtotal/cta (now flex children, grid-row ignored) and shifts
   story-h/story/trust/image down by one. Net col-1 order: breadcrumb(1) chips(2)
   title(3) spec(4) price(5) action-bar(6) story-h(7) story(8) trust(9). */
@media (min-width: 821px) {
  .storefront-v2 #product-sheet.sheet-desktop .sheet-action-bar {
    grid-column: 1;
    grid-row: 6;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-p33-story-h { grid-column: 1; grid-row: 7; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-story-block { grid-column: 1; grid-row: 8; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-trust-row   { grid-column: 1 / -1; grid-row: 10; }
  .storefront-v2 #product-sheet.sheet-desktop .sheet-hero-img-wrap { grid-row: 2 / span 7; }
}

/* Front/Back segmented control removed (operator 2026-06-12 · flip feature dropped). */

/* Editorial drop-cap on the first story paragraph (desktop only) */
@media (min-width: 821px) {
  .storefront-v2 #product-sheet.sheet-desktop .sheet-story-text p:first-child::first-letter {
    font-family: var(--display);
    font-size: 3.1em;
    line-height: .8;
    float: inline-start;
    margin-inline-end: .08em;
    margin-block-start: .06em;
    color: var(--sf-gold-1);
    font-weight: 400;
  }
}

/* ── Phase-1 follow-up · OZ→Bars calculator on storefront-v2 ───────── */
.storefront-v2 .calc-widget-panel {
  background: var(--sf-ink);
  border: 1px solid var(--sf-line-soft);
  border-radius: var(--sf-r);
  color: var(--sf-txt);
  /* widget sits bottom-right (09-mobile inset-inline) · open panel leftward so it stays on screen */
  left: auto;
  right: 0;
  max-width: min(380px, calc(100vw - 32px));
}
.storefront-v2 .calc-widget-header { background: linear-gradient(135deg, var(--sf-navy-2), var(--sf-navy)); border-bottom: 1px solid var(--sf-line-soft); }
.storefront-v2 .calc-widget-title { color: var(--sf-txt); font-family: var(--display, 'Fraunces', serif); }
.storefront-v2 .calc-widget-close { color: var(--sf-muted); }

/* Step 1 · metal selection (dark, metal-accented · was light inline styles) */
.storefront-v2 #calcStep1MetalSelect { padding: 16px; text-align: center; }
.storefront-v2 .calc-step-label {
  color: var(--sf-gold-2); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.storefront-v2 .calc-metal-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.storefront-v2 .calc-metal-button {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 14px; cursor: pointer; font-size: 17px; font-weight: 600;
  color: var(--sf-txt); font-family: var(--ui, inherit);
  background: linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
  border: 1.5px solid var(--sf-line-soft); border-radius: 14px;
  transition: border-color .25s, transform .15s, box-shadow .25s;
}
.storefront-v2 .calc-metal-button .metal-sym {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; font-size: 13px; font-weight: 800;
}
.storefront-v2 .calc-metal-button[data-metal="silver"] .metal-sym {
  color: #0c1426; background: linear-gradient(135deg, #f4f4f4, #b8b8b8);
}
.storefront-v2 .calc-metal-button[data-metal="silver"]:hover {
  border-color: rgba(220,224,230,.5); box-shadow: 0 6px 20px rgba(180,184,190,.12); transform: translateY(-1px);
}
.storefront-v2 .calc-metal-button[data-metal="gold"] .metal-sym {
  color: #1a1405; background: linear-gradient(135deg, var(--sf-gold-1), var(--sf-gold-3));
}
.storefront-v2 .calc-metal-button[data-metal="gold"]:hover {
  border-color: var(--sf-line); box-shadow: 0 6px 20px rgba(216,179,95,.16); transform: translateY(-1px);
}
.storefront-v2 .calc-metal-button.active { border-color: var(--sf-line); }
.storefront-v2 .calc-metal-button:active { transform: scale(.98); }
.storefront-v2 .calc-proceed-btn {
  width: 100%; margin-top: 16px; padding: 13px; cursor: pointer;
  font-weight: 700; font-size: 15px; border: none; border-radius: 12px;
  color: #1a1a2e; background: linear-gradient(120deg, var(--sf-gold-1), var(--sf-gold-2));
  transition: filter .2s, transform .15s;
}
.storefront-v2 .calc-proceed-btn:hover { filter: brightness(1.05); }
.storefront-v2 .calc-proceed-btn:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .storefront-v2 .calc-metal-button, .storefront-v2 .calc-proceed-btn { transition: none; }
  .storefront-v2 .calc-metal-button:hover, .storefront-v2 .calc-metal-button:active,
  .storefront-v2 .calc-proceed-btn:active { transform: none; }
}

.storefront-v2 .calc-mode-seg { display: flex; gap: 8px; margin-bottom: 14px; }
.storefront-v2 .calc-mode-btn {
  flex: 1; min-height: 44px; padding: 10px 14px; cursor: pointer;
  border: 1px solid var(--sf-line-soft); border-radius: 12px;
  background: rgba(255,255,255,.04); color: var(--sf-muted);
  font: inherit; transition: color .2s, border-color .2s, background .2s;
}
.storefront-v2 .calc-mode-btn:hover { color: var(--sf-txt); border-color: var(--sf-line); }
.storefront-v2 .calc-mode-btn.active {
  background: linear-gradient(120deg, var(--sf-gold-1), var(--sf-gold-2));
  color: #1a1a2e; border-color: transparent; font-weight: 600;
}

.storefront-v2 .calc-input-cap { font-size: 12px; color: var(--sf-muted); margin-bottom: 8px; }
.storefront-v2 .calc-input-row { display: flex; gap: 8px; align-items: center; }
.storefront-v2 .oz-calc-input {
  flex: 1; min-height: 44px; padding: 12px; font-size: 16px;
  background: rgba(0,0,0,.28); border: 1px solid var(--sf-line-soft);
  border-radius: 12px; color: var(--sf-txt); font-variant-numeric: tabular-nums;
}
.storefront-v2 .calc-unit { font-size: 13px; font-weight: 600; color: var(--sf-gold-2); }
.storefront-v2 #metalIndicator { display: none; }

.storefront-v2 .calc-reco-card {
  display: block; width: 100%; text-align: start; cursor: pointer;
  margin: 8px 0; padding: 12px 14px;
  background: linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
  border: 1px solid var(--sf-line-soft); border-radius: 14px; color: var(--sf-txt);
  transition: transform .15s ease, border-color .2s;
}
.storefront-v2 .calc-reco-card:hover { border-color: var(--sf-line); }
.storefront-v2 .calc-reco-card:active { transform: scale(.98); }
.storefront-v2 .calc-reco-card.is-reco { border-color: var(--sf-line); }
.storefront-v2 .calc-reco-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.storefront-v2 .calc-reco-badge { font-size: 11px; font-weight: 700; color: var(--sf-gold-1); }
.storefront-v2 .calc-reco-label { font-size: 12px; color: var(--sf-muted); }
.storefront-v2 .calc-reco-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.storefront-v2 .calc-bar-chip {
  font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 7px;
  background: linear-gradient(135deg, #8a6508, #b8860b); color: #fff;
  border: 1px solid rgba(218,165,32,.5);
}
.storefront-v2 .calc-reco-foot {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}
.storefront-v2 .calc-reco-grams { color: var(--sf-muted); font-size: 13px; }
.storefront-v2 .calc-reco-price { color: var(--sf-gold-1); font-weight: 700; margin-inline-start: auto; }
.storefront-v2 .calc-leftover { color: var(--sf-muted-2); font-size: 12px; width: 100%; }
.storefront-v2 .calc-empty { color: var(--sf-muted); font-size: 13px; padding: 10px 4px; }

.calc-toast {
  position: fixed; inset-block-end: 24px; inset-inline-start: 50%;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  display: flex; align-items: center; gap: 8px; z-index: 1000;
  padding: 12px 18px; border-radius: 12px;
  background: var(--sf-navy-2, #111c33); color: var(--sf-txt, #eaf0fb);
  border-inline-start: 3px solid var(--sf-green, #39d98a);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  transition: opacity .3s ease, transform .3s ease;
}
.calc-toast svg { color: var(--sf-green, #39d98a); }
.calc-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .storefront-v2 .calc-reco-card,
  .storefront-v2 .calc-mode-btn,
  .calc-toast { transition: none; }
  .storefront-v2 .calc-reco-card:active { transform: none; }
}

/* ===== Calculator redesign · trays modal · storefront-v2 only ===== */
.storefront-v2 .cx-backdrop{display:none;position:fixed;inset:0;z-index:1200;background:rgba(3,6,14,.62);backdrop-filter:blur(7px) saturate(120%);-webkit-backdrop-filter:blur(7px) saturate(120%)}
.storefront-v2 .calc-widget.cx-open .cx-backdrop{display:block;animation:cxFade .3s ease}
.storefront-v2 .calc-widget.cx-open .calc-widget-fab{display:none}
@keyframes cxFade{from{opacity:0}to{opacity:1}}
.storefront-v2 .calc-widget-panel{
  display:none;position:fixed;z-index:1201;left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);width:368px;max-width:calc(100vw - 28px);max-height:88dvh;overflow:hidden;
  flex-direction:column;background:linear-gradient(180deg,#0d1730,#0a1124);
  border:1px solid var(--sf-line);border-radius:22px;color:var(--sf-txt);
  box-shadow:0 26px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.storefront-v2 .calc-widget.cx-open .calc-widget-panel{display:flex;animation:cxRise .4s cubic-bezier(.2,.8,.2,1)}
@keyframes cxRise{from{opacity:0;transform:translate(-50%,-46%) scale(.98)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.storefront-v2 .cx-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px}
.storefront-v2 .cx-title{font-family:var(--display,'Fraunces',serif);font-weight:500;font-size:19px}
.storefront-v2 .cx-x{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--sf-line-soft);border-radius:9px;background:rgba(255,255,255,.03);color:var(--sf-muted);cursor:pointer}
.storefront-v2 .cx-x:hover{color:var(--sf-txt);border-color:var(--sf-line)}
.storefront-v2 .cx-body{padding:0 18px 18px;overflow-y:auto}
.storefront-v2 .cx-seg{display:flex;gap:5px;background:rgba(0,0,0,.28);border:1px solid var(--sf-line-soft);padding:4px;border-radius:12px;margin-bottom:8px}
.storefront-v2 .cx-seg button{flex:1;border:none;cursor:pointer;font:inherit;font-weight:600;font-size:13px;color:var(--sf-muted);background:transparent;border-radius:9px;padding:9px 6px;transition:color .18s,background .25s}
.storefront-v2 .cx-seg.cx-mode button.active{color:#15110a;background:linear-gradient(120deg,var(--sf-gold-1),var(--sf-gold-2))}
.storefront-v2 .cx-seg.cx-metal{margin-bottom:14px}
.storefront-v2 .cx-seg.cx-metal button{font-size:12px;padding:7px}
.storefront-v2 .cx-seg.cx-metal button[data-metal="silver"].active{background:linear-gradient(120deg,#e9edf2,#aeb6c2);color:#0c1426}
.storefront-v2 .cx-seg.cx-metal button[data-metal="gold"].active{background:linear-gradient(120deg,var(--sf-gold-1),var(--sf-gold-2));color:#15110a}
.storefront-v2 .cx-amt-cap{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--sf-muted);margin:2px 2px 8px;letter-spacing:.03em}
.storefront-v2 .cx-amt{display:inline-flex;align-items:baseline;gap:4px}
.storefront-v2 .cx-amt input{width:78px;text-align:right;border:none;background:transparent;font-family:var(--display,'Fraunces',serif);font-size:17px;color:var(--sf-gold-1);outline:none;border-bottom:1px dashed rgba(216,179,95,.45);padding:0 2px 2px;font-variant-numeric:tabular-nums}
.storefront-v2 .cx-amt input:focus{border-bottom-color:var(--sf-gold-2)}
.storefront-v2 .cx-unit{font-size:13px;color:var(--sf-gold-2);font-family:var(--display,'Fraunces',serif)}
.storefront-v2 .cx-slider{-webkit-appearance:none;width:100%;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--sf-gold-2) var(--p,30%),rgba(255,255,255,.08) var(--p,30%));outline:none}
.storefront-v2 .cx-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;cursor:grab;background:radial-gradient(circle at 35% 30%,#fff7df,var(--sf-gold-1) 55%,var(--sf-gold-3));box-shadow:0 0 0 4px rgba(216,179,95,.18),0 3px 8px rgba(0,0,0,.4)}
.storefront-v2 .cx-slider::-moz-range-thumb{width:26px;height:26px;border:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7df,var(--sf-gold-1) 55%,var(--sf-gold-3))}
.storefront-v2 .cx-sug{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sf-gold-2);margin:16px 2px 9px;opacity:.85}
.storefront-v2 .cx-tray{width:100%;text-align:start;cursor:pointer;display:block;margin-bottom:9px;position:relative;background:linear-gradient(180deg,var(--sf-navy-2),var(--sf-navy));border:1px solid var(--sf-line-soft);border-radius:14px;padding:11px 13px;color:var(--sf-txt);transition:border-color .2s,transform .12s,box-shadow .25s;animation:cxTrayIn .45s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*75ms)}
.storefront-v2 .cx-tray:hover{border-color:var(--sf-line);transform:translateY(-1px)}
.storefront-v2 .cx-tray:active{transform:scale(.99)}
.storefront-v2 .cx-tray.sel{border-color:var(--sf-gold-2);box-shadow:0 0 0 1px var(--sf-gold-2),0 12px 30px rgba(216,179,95,.14)}
.storefront-v2 .cx-tray.sel::before{content:"";position:absolute;inset:-1px;border-radius:15px;pointer-events:none;animation:cxPulse .6s ease forwards}
@keyframes cxTrayIn{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cxPulse{from{box-shadow:0 0 0 0 rgba(246,227,168,.55)}to{box-shadow:0 0 0 16px rgba(246,227,168,0)}}
.storefront-v2 .cx-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:9px}
.storefront-v2 .cx-tray.sel .cx-top{padding-inline-end:26px}
.storefront-v2 .cx-reason{font-size:13px;color:var(--sf-muted)}
.storefront-v2 .cx-tray.rec .cx-reason{color:var(--sf-gold-1);font-weight:600}
.storefront-v2 .cx-tray.rec .cx-reason::before{content:"\2605 ";color:var(--sf-gold-1)}
.storefront-v2 .cx-price{font-family:var(--display,'Fraunces',serif);font-size:18px;color:var(--sf-gold-1)}
.storefront-v2 .cx-check{position:absolute;top:11px;inset-inline-end:13px;width:19px;height:19px;border-radius:50%;background:linear-gradient(120deg,var(--sf-gold-1),var(--sf-gold-2));display:none;place-items:center;color:#15110a;box-shadow:0 0 12px rgba(246,227,168,.5)}
.storefront-v2 .cx-tray.sel .cx-check{display:grid;animation:cxPop .36s cubic-bezier(.3,1.7,.5,1)}
@keyframes cxPop{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}
.storefront-v2 .cx-rail{display:flex;align-items:flex-end;gap:3px;min-height:32px;padding:7px 9px 8px;border-radius:9px;background:repeating-linear-gradient(135deg,rgba(0,0,0,.30),rgba(0,0,0,.30) 6px,rgba(0,0,0,.20) 6px,rgba(0,0,0,.20) 12px);border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 2px 7px rgba(0,0,0,.55);overflow:hidden;perspective:340px}
.storefront-v2 .cx-ingot{width:var(--w,24px);height:12px;border-radius:2px;position:relative;flex:none;transform-style:preserve-3d;background:linear-gradient(180deg,var(--ig1,#f0c030),var(--ig2,#b8860b));border:1px solid rgba(255,255,255,.28);box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);animation:cxDrop .55s cubic-bezier(.25,1.1,.4,1) backwards;overflow:hidden}
.storefront-v2 .cx-ingot::before{content:"";position:absolute;left:1px;right:1px;top:1px;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}
.storefront-v2 .cx-ingot::after{content:"";position:absolute;inset:0;background:linear-gradient(108deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%);transform:translateX(-130%);animation:cxShine 2.8s ease-in-out infinite;animation-delay:var(--si,0ms)}
.storefront-v2 .cx-ingot.silver{--ig1:#f6f6f6;--ig2:#aeaeae}
@keyframes cxDrop{0%{opacity:0;transform:translateY(-42px) rotateX(40deg) scaleY(.7)}55%{opacity:1;transform:translateY(0) rotateX(0) scaleY(1.14) scaleX(.93)}74%{transform:translateY(-5px) scaleY(.97)}100%{opacity:1;transform:none}}
@keyframes cxShine{0%,62%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.storefront-v2 .cx-more{font-size:10px;color:var(--sf-gold-1);font-weight:700;align-self:center;margin-inline-start:4px;flex:none}
.storefront-v2 .cx-meta{display:flex;gap:8px;margin-top:8px;font-size:11px;color:var(--sf-muted-2);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.storefront-v2 .cx-left{color:var(--sf-green)}
.storefront-v2 .cx-notice{margin-top:12px;padding:12px;border:1px solid var(--sf-line-soft);border-radius:12px;background:rgba(255,255,255,.02);color:var(--sf-muted);font-size:12.5px;line-height:1.45}
.storefront-v2 .cx-cta{width:100%;margin-top:14px;padding:14px;border:none;border-radius:13px;cursor:pointer;font:inherit;font-weight:700;font-size:14px;color:#15110a;background:linear-gradient(120deg,var(--sf-gold-1),var(--sf-gold-2));transition:filter .18s,transform .1s;position:relative;overflow:hidden}
.storefront-v2 .cx-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.45) 50%,transparent 58%);transform:translateX(-130%);animation:cxSweep 5s ease-in-out infinite}
@keyframes cxSweep{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.storefront-v2 .cx-cta:hover{filter:brightness(1.06)}
.storefront-v2 .cx-cta:active{transform:scale(.99)}
.storefront-v2 .cx-cta[disabled]{opacity:.4;cursor:default}
@media (max-width:560px){
  .storefront-v2 .calc-widget-panel{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-width:100%;max-height:92dvh;border-radius:22px 22px 0 0}
  .storefront-v2 .calc-widget.cx-open .calc-widget-panel{animation:cxSheet .35s cubic-bezier(.2,.8,.2,1)}
  @keyframes cxSheet{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .storefront-v2 .cx-tray,.storefront-v2 .cx-ingot{animation-duration:.01s!important}
  .storefront-v2 .cx-ingot::after,.storefront-v2 .cx-cta::after,.storefront-v2 .cx-tray.sel::before,.storefront-v2 .calc-widget.cx-open .calc-widget-panel,.storefront-v2 .calc-widget.cx-open .cx-backdrop{animation:none}
}

/* Phase 34: 4-tab hero row (Coins / Blisters / Bars / About). Keep all four on a
   single row in every language and keep their order and position fixed - they must
   not mirror or jump when the language switches (incl. RTL he/ar). */
/* overflow-x:auto is the real fix for long labels (e.g. "בליסטר מעוצב") clipping
   past their pill - equal flex-basis + min-width:0 forced every tab to shrink to
   fit the row no matter how long its text was, and a vw-based font clamp still
   computed close to 18px on ordinary desktop widths (1280-1440px), so it never
   actually shrank there. min-width:max-content makes tabs floor at their content
   size instead; if that's wider than the row, it scrolls (same fallback already
   used on mobile) instead of squeezing text outside the pill. */
.storefront-v2 .hero-cat-tabs{direction:ltr;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  /* plain "center" clips content symmetrically off BOTH ends once the row overflows
     (scrollLeft:0 doesn't line up with the start of centered content) - "safe center"
     falls back to start-alignment automatically once it no longer fits. */
  justify-content:safe center;
  /* THE actual root cause of the "בליסטר מעוצב" overflow: css/08-decoration.css
     (legacy retired order-page rule, still bundled into bundle.css and loaded
     before this file) caps .hero-cat-tabs at max-width:720px unconditionally, at
     every viewport width. Nothing here ever overrode max-width, only font-size/
     flex-basis - so 5 tabs were always squeezed into 720px no matter the screen.
     Match the storefront's standard content width instead of the legacy cap. */
  max-width:1180px;}
.storefront-v2 .hero-cat-tabs::-webkit-scrollbar{display:none;}
.storefront-v2 .hero-cat-tab{flex:0 1 auto;min-width:max-content;}
.storefront-v2 .hero-cat-tab .tab-label{padding:0 8px;}
.storefront-v2 .hero-cat-tab .tab-label-en{white-space:nowrap;}
/* About has no count bubble and a short label - don't stretch it to match the
   other three tabs' width, just size it to its content. */
.storefront-v2 .hero-cat-tab.tab-about{flex:0 0 auto;}
/* The tab row itself stays LTR (order must not mirror), but the label+count pair
   inside each tab should still read in the language's natural direction, so the
   count bubble sits on the left in he/ar instead of always trailing on the right. */
[dir="rtl"] .storefront-v2 .hero-cat-tab .tab-label{direction:rtl;}

/* Phase 38: header account entry. Logged in -> gold coin chip (initials + first
   name) linking to /account. Logged out -> a single Sign In button. Uses logical
   padding/gap so it mirrors cleanly in RTL (he/ar). */
.account-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding-block:4px; padding-inline:4px 14px;
  border-radius:999px; text-decoration:none; line-height:1;
  background:rgba(138,101,8,.07); border:1px solid rgba(138,101,8,.28);
  color:#6b4e06; font-weight:600;
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.account-chip:hover{ background:rgba(138,101,8,.13); border-color:rgba(138,101,8,.55); transform:translateY(-1px); }
.account-chip:active{ transform:translateY(0); }
.account-chip-coin{
  width:30px; height:30px; flex:0 0 auto; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Georgia,'Frank Ruhl Libre',serif;
  font-size:12px; font-weight:700; letter-spacing:.3px; color:#3a2a04;
  background:radial-gradient(circle at 32% 28%, #f6dc86 0%, #e3c04f 42%, #b68920 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4), inset 0 0 0 3px rgba(138,101,8,.5), 0 1px 3px rgba(0,0,0,.22);
}
.account-chip-name{
  font-size:14px; max-width:120px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.account-signin{
  display:inline-flex; align-items:center; justify-content:center;
  padding-block:8px; padding-inline:18px;
  border-radius:999px; cursor:pointer; line-height:1;
  background:linear-gradient(180deg,#a97f13,#8a6508); color:#fff;
  font-weight:600; font-size:14px; border:1px solid rgba(138,101,8,.9);
  transition:filter .15s ease, transform .15s ease;
}
.account-signin:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.account-signin:active{ transform:translateY(0); }
@media (max-width:560px){ .account-chip-name{ max-width:88px; } }

/* Bars-calculator FAB label overflowed the 60-66px button in languages with a
   long single word (ru Калькулятор, uk Калькулятор, fr Calculateur, es
   Calculadora). Break long words, trim the font and cap the label to the
   button's inner width so every language stays inside the button. */
.storefront-v2 .calc-fab-label{
  font-size:9px;
  letter-spacing:0;
  max-width:54px;
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}
@media (max-width:480px){
  .storefront-v2 .calc-fab-label{ font-size:8.5px; max-width:50px; }
}