@charset "UTF-8";
/* =============================================================================
   meltX — stylesheet
   Artisan chocolate confectionery, Punjab, Pakistan.

   ── THE COLOUR MODEL — read this before changing anything ──────────────────
   The site is LIGHT. A warm off-white page, white cards, cocoa ink. Chocolate
   is the CONTRAST colour, not the wash: it appears as the marquee strip, the
   combo band, the footer, and — most of all — in the product artwork itself,
   which is dark chocolate and therefore needs a light ground to read against.

   Every component is written against SEMANTIC tokens:
       --bg  --bg-alt  --surface  --surface-2  --line  --line-strong
       --ink --ink-2   --ink-3    --accent     --accent-fill --accent-on-fill
   :root defines the light values. `.on-dark` (and the few blocks that carry it)
   redefines those same tokens to their dark equivalents. Nothing below needs a
   second rule to work on a dark band — it inherits the flipped tokens.

   So: to add a dark section, add `.on-dark`. Never hand-write a dark override.

   CONTENTS
   01  Tokens                     17  Product cards and options
   02  Reset and base             18  Combo band
   03  Typography                 19  Trust row
   04  Layout                     20  Craft timeline
   05  Buttons                    21  Video slots
   06  Focus and a11y helpers     22  Reviews rail
   07  Reduced motion             23  Newsletter
   08  Announcement marquee       24  Footer
   09  Header and mobile menu     25  Products page
   10  Language toggle            26  About page
   11  Floating WhatsApp          27  Forms and contact
   12  Tempering gradient         28  Cart, drawer, checkout
   13  Scroll reveals             29  Admin panel
   14  Product artwork engine     30  Toasts and utilities
   15  Placeholders               31  Breakpoints
   16  Hero and slider            32  Urdu / RTL layer

   SPACING RULE
   Vertical section rhythm lives on ONE layer: `.section { padding-block: … }`.
   No other selector sets top or bottom padding on a section. Modifiers are
   `.section--tight` and `.section--flush` only.
   ============================================================================= */


/* =============================================================================
   01  TOKENS
   ============================================================================= */
:root {
  /* --- Brand constants. These never change with the surface. -------------- */
  --cocoa-900: #1C110B;
  --cocoa-800: #26160E;
  --cocoa-700: #3B2318;
  --cocoa-600: #4E3123;
  --cocoa-500: #6B4530;

  --caramel:       #C98B4B;   /* fill colour */
  --caramel-lift:  #E0A768;   /* fill hover, and accent text ON dark */
  --caramel-deep:  #A9682C;
  --caramel-ink:   #9A6222;   /* accent TEXT on light — 4.9:1 */

  --crown:      #D4AF37;      /* crownX fills and gilding */
  --crown-ink:  #8A6D1F;      /* crownX text on light — 4.7:1 */
  --peanut:     #B5732E;      /* peanutX fills */
  --peanut-ink: #94551F;      /* peanutX text on light — 5.7:1 */

  --wa: #25D366;
  --wa-ink: #0B6B35;
  --danger: #A8321C;          /* on light — 6.0:1 */
  --danger-lift: #E4735F;     /* on dark */
  --ok: #3D7A2E;              /* on light — 4.9:1 */
  --ok-lift: #8FC47A;         /* on dark */

  /* --- Semantic surface tokens: LIGHT (the default) ----------------------- */
  --bg:         #FDFBF7;      /* the page */
  --bg-alt:     #F6F1E8;      /* alternating band */
  --surface:    #FFFFFF;      /* cards */
  --surface-2:  #FBF6EE;      /* inputs, insets */
  --line:       #EADFCF;      /* hairlines */
  --line-strong:#D9C8AE;

  --ink:   #241609;           /* headings — 17.0:1 */
  --ink-2: #4E3B2C;           /* body — 10.2:1 */
  --ink-3: #7A6656;           /* secondary — 5.3:1 */

  --accent:         var(--caramel-ink);
  --accent-fill:    var(--caramel);
  --accent-on-fill: #2A1A0A;
  --product-crown:  var(--crown-ink);
  --product-peanut: var(--peanut-ink);
  --tone-ok:     var(--ok);
  --tone-danger: var(--danger);

  /* Warm, low-opacity shadows. Chocolate-brown, never grey. */
  --shadow-1: 0 1px 2px rgb(36 22 9 / .07);
  --shadow-2: 0 8px 24px -12px rgb(36 22 9 / .22);
  --shadow-3: 0 26px 60px -26px rgb(36 22 9 / .30);
  --shadow-gloss: inset 0 1px 0 rgb(255 255 255 / .7);
  --art-glow: radial-gradient(70% 62% at 50% 44%, rgb(201 139 75 / .18), transparent 72%);

  /* --- Type -------------------------------------------------------------- */
  --ff-display: 'Bodoni Moda', Didot, 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-sub: 'Tenor Sans', Optima, Candara, 'Gill Sans', 'Trebuchet MS', sans-serif;
  --ff-body: 'Montserrat', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --ff-urdu: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Alvi Nastaleeq', 'Noto Naskh Arabic', serif;

  --fs-display: clamp(2.6rem, 1.10rem + 6.4vw, 6.25rem);
  --fs-h1:      clamp(2.1rem, 1.35rem + 3.6vw, 4.0rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 2.0vw, 2.75rem);
  --fs-h3:      clamp(1.2rem, 1.08rem + 0.7vw, 1.6rem);
  --fs-lead:    clamp(1.06rem, 1.00rem + 0.4vw, 1.22rem);
  --fs-body:    clamp(0.94rem, 0.91rem + 0.2vw, 1.0rem);
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;
  --fs-eyebrow: 0.72rem;

  --lh-display: 0.98;
  --lh-heading: 1.14;
  --lh-lead: 1.55;
  --lh-body: 1.7;

  --measure: 62ch;
  --measure-tight: 15ch;

  /* --- Spacing, 8px scale ------------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  --section-y: clamp(64px, 7vw, 120px);
  --gutter: clamp(20px, 4vw, 44px);
  --maxw: 1200px;
  --maxw-tight: 820px;
  --rail-w: clamp(4px, 0.5vw, 6px);
  --rail-x: clamp(6px, 1.3vw, 22px);
  --header-h: 68px;

  /* --- Radii. Bigger than before: soft, modern, confident. ---------------- */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 30px;  --r-pill: 999px;

  /* --- Motion ------------------------------------------------------------- */
  --t-fast: 150ms;  --t-mid: 300ms;  --t-slow: 560ms;  --t-hero: 1000ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --stagger: 65ms;

  --dir: 1;      /* directional animations multiply by this instead of duplicating keyframes */
  --temper: 0;   /* 0 → 1 scroll progress, written by JS */
}

[dir="rtl"] { --dir: -1; }

/* -----------------------------------------------------------------------------
   THE DARK BAND. One class, applied to a section, flips every semantic token.
   No component below needs to know it is on a dark background.
   ----------------------------------------------------------------------------- */
.on-dark {
  --bg:         var(--cocoa-900);
  --bg-alt:     var(--cocoa-800);
  --surface:    #33200F;
  --surface-2:  var(--cocoa-800);
  --line:       #4E3123;
  --line-strong:#6B4530;

  --ink:   #FFF8EC;
  --ink-2: #EADFCE;
  --ink-3: #BCAB98;

  --accent:         var(--caramel-lift);
  --accent-fill:    var(--caramel);
  --accent-on-fill: #1C110B;
  --product-crown:  var(--crown);
  --product-peanut: #D69249;
  --tone-ok:     var(--ok-lift);
  --tone-danger: var(--danger-lift);

  --shadow-1: 0 1px 2px rgb(0 0 0 / .35);
  --shadow-2: 0 8px 24px -10px rgb(0 0 0 / .55);
  --shadow-3: 0 26px 60px -24px rgb(0 0 0 / .70);
  --shadow-gloss: inset 0 1px 0 rgb(255 255 255 / .08);
  --art-glow: radial-gradient(70% 62% at 50% 44%, rgb(107 62 34 / .55), transparent 72%);

  background-color: var(--bg);
  color: var(--ink-2);
}


/* =============================================================================
   02  RESET AND BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + var(--s-5));
}

body {
  min-block-size: 100vh;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video, canvas, picture { display: block; max-inline-size: 100%; block-size: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

ul, ol { padding-inline-start: 0; list-style: none; }
.prose ul, .prose ol { padding-inline-start: 1.25em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }

hr { border: 0; border-block-start: 1px solid var(--line); margin-block: var(--s-6); }
::selection { background: var(--caramel); color: #2A1A0A; }


/* =============================================================================
   03  TYPOGRAPHY
   ============================================================================= */
h1, h2, h3, h4 { font-weight: 400; line-height: var(--lh-heading); text-wrap: balance; color: var(--ink); }

.display {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  max-inline-size: var(--measure-tight);
  color: var(--ink);
}

.h1 { font-family: var(--ff-display); font-size: var(--fs-h1); font-weight: 500; letter-spacing: -0.02em; }
.h2 { font-family: var(--ff-display); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.015em; }
.h3 { font-family: var(--ff-body); font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.005em; }

.eyebrow {
  font-family: var(--ff-sub);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-block-end: var(--s-4);
}
.eyebrow--crown  { color: var(--product-crown); }
.eyebrow--peanut { color: var(--product-peanut); }
.eyebrow--muted  { color: var(--ink-3); }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-inline-size: var(--measure); }
.prose { max-inline-size: var(--measure); color: var(--ink-2); }
.prose > * + * { margin-block-start: var(--s-4); }
.prose h3 { margin-block-start: var(--s-7); }

.muted { color: var(--ink-3); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); letter-spacing: 0.03em; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* --- The wordmark. Built here, not placeholdered. --- */
.wordmark {
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  min-block-size: 44px;            /* it is a link, so it gets a tap target */
  padding-inline-end: var(--s-2);
}
.wordmark:hover { color: var(--ink); }
.wordmark__x {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
  margin-inline-start: 0.02em;
  transition: color var(--t-mid) var(--ease-out);
}
.wordmark:hover .wordmark__x { color: var(--crown-ink); }
.on-dark .wordmark:hover .wordmark__x { color: var(--crown); }


/* =============================================================================
   04  LAYOUT
   ============================================================================= */
.container { inline-size: 100%; max-inline-size: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container--tight { max-inline-size: var(--maxw-tight); }

/* THE single owner of vertical section rhythm. */
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--flush { padding-block: 0; }
.section--tint { background: var(--bg-alt); }

/* Fluid gap. A flat 64px between a heading and its content costs a phone user
   most of a thumb-scroll before they see anything. */
.section-head { margin-block-end: clamp(var(--s-6), 7vw, var(--s-8)); max-inline-size: var(--measure); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head > * + * { margin-block-start: var(--s-4); }

.grid { display: grid; gap: var(--s-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.stack > * + * { margin-block-start: var(--s-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }

.rule-gold { block-size: 1px; background: linear-gradient(to right, transparent, var(--crown), transparent); border: 0; margin: 0; }


/* =============================================================================
   05  BUTTONS
   Every button is at least 48px tall and shares one baseline grid, so a row of
   mixed variants lines up exactly. Icon + label gap is uniform.
   ============================================================================= */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-block-size: 48px;
  padding-inline: var(--s-5);
  padding-block: var(--s-2);
  border-radius: var(--r-pill);
  border: 1px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--ff-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition:
    background-color var(--t-mid) var(--ease-out),
    color var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-spring),
    box-shadow var(--t-mid) var(--ease-out);
}
.btn:hover { color: var(--btn-fg); }
.btn:active { transform: scale(.975); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; pointer-events: none; }

.btn--primary {
  --btn-bg: var(--accent-fill);
  --btn-fg: var(--accent-on-fill);
  box-shadow: var(--shadow-2);
}
.btn--primary:hover { --btn-bg: var(--caramel-lift); box-shadow: var(--shadow-3); }

/* The ghost border is derived from its own text colour, not from --line-strong.
   That keeps it visible on the combo band's caramel gradient, where a fixed
   cocoa hairline disappears. */
.btn--ghost { --btn-bd: color-mix(in srgb, currentColor 38%, transparent); --btn-fg: var(--ink); }
.btn--ghost:hover { --btn-bd: currentColor; --btn-bg: color-mix(in srgb, currentColor 8%, transparent); }

.btn--solid { --btn-bg: var(--ink); --btn-fg: var(--bg); }
.btn--solid:hover { --btn-bg: var(--cocoa-700); }

.btn--crown  { --btn-bg: var(--crown);  --btn-fg: #2A1F05; }
.btn--crown:hover  { --btn-bg: #E4C255; }
.btn--peanut { --btn-bg: var(--peanut); --btn-fg: #1A0F05; }
.btn--peanut:hover { --btn-bg: #C9853C; }

.btn--wa { --btn-bg: var(--wa); --btn-fg: #05270F; }
.btn--wa:hover { --btn-bg: #34E27A; }

.btn--lg { min-block-size: 56px; padding-inline: var(--s-6); font-size: 0.95rem; }
.btn--sm { min-block-size: 44px; padding-inline: var(--s-4); font-size: var(--fs-micro); }
.btn--block { display: flex; inline-size: 100%; }

.btn--icon {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding: var(--s-2);
  border-radius: var(--r-pill);
}
.btn--icon:hover { --btn-bg: color-mix(in srgb, var(--ink) 7%, transparent); }
/* Sized on the class itself, not only inside .btn. An <svg class="icon"> used
   anywhere else has no intrinsic size and expands to fill its container — which
   is how the checkout summary ended up with a chevron the size of the card. */
.icon { inline-size: 20px; block-size: 20px; flex: none; }
.btn--lg .icon { inline-size: 22px; block-size: 22px; }

/* Magnetic pull. JS writes --mx/--my in px. Killed by reduced motion. */
.btn--magnetic { transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px)); }
.btn--magnetic:active { transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px)) scale(.975); }

/* A row of buttons: equal widths, one baseline. */
.btn-row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: stretch; }
.btn-row > .btn { flex: 1 1 0; min-inline-size: 148px; }


/* =============================================================================
   06  FOCUS, SKIP LINK, SCREEN-READER HELPERS
   Nothing sets outline:none without putting a visible ring back.
   ============================================================================= */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-sm); }

.skip-link {
  position: absolute;
  inset-inline-start: var(--s-4);
  inset-block-start: -100px;
  z-index: 200;
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  transition: inset-block-start var(--t-fast) var(--ease-out);
}
.skip-link:focus { inset-block-start: var(--s-4); }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}


/* =============================================================================
   07  REDUCED MOTION
   Transforms, parallax, marquee and auto-advance all stop. Opacity survives.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: var(--t-fast) !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .reveal.is-in,
  .btn--magnetic,
  .hero__art,
  .hero__art-inner,
  .art-swap__view,
  .marquee__track,
  .product-card:hover,
  .review-card:hover,
  .trust-item:hover,
  .gloss { transform: none !important; }

  .marquee__track { animation: none !important; }
  .js .reveal { opacity: 0; transition: opacity var(--t-slow) linear; }
  .js .reveal.is-in { opacity: 1; }
  .gloss { display: none !important; }
  .tempering__spec { display: none !important; }
}


/* =============================================================================
   08  ANNOUNCEMENT MARQUEE
   A thin chocolate strip at the very top — the first note of the contrast
   colour, before the page opens out into light.
   ============================================================================= */
.marquee {
  --marquee-duration: 46s;
  overflow: hidden;
  position: relative;
  z-index: 60;
  background: var(--cocoa-900);
  color: #EADFCE;
}
.marquee__viewport { display: flex; inline-size: max-content; }
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-block: var(--s-2);
  padding-inline-end: var(--s-6);
  white-space: nowrap;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__item {
  font-family: var(--ff-sub);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #D6C8B4;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.marquee__item::after {
  content: "";
  inline-size: 4px; block-size: 4px;
  border-radius: 50%;
  background: var(--crown);
  flex: none;
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--dir) * -100%), 0, 0); }
}


/* =============================================================================
   09  HEADER, NAVIGATION, MOBILE MENU
   ============================================================================= */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-block-end: 1px solid transparent;
  padding-block: var(--s-3);
  transition:
    background-color var(--t-mid) var(--ease-out),
    border-color var(--t-mid) var(--ease-out),
    padding-block var(--t-mid) var(--ease-out),
    box-shadow var(--t-mid) var(--ease-out);
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-block-end-color: var(--line);
  padding-block: var(--s-2);
  box-shadow: 0 6px 24px -18px rgb(36 22 9 / .5);
}
.site-header.is-scrolled .wordmark { font-size: 1.32rem; }

.header__inner { display: flex; align-items: center; gap: var(--s-4); min-block-size: 52px; }
.header__brand { flex: none; }
.header__nav { flex: 1 1 auto; display: none; justify-content: center; }
.header__actions { flex: none; display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; }

.nav-list { display: flex; align-items: center; gap: var(--s-1); }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--s-4);
  font-family: var(--ff-sub);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  position: relative;
  transition: color var(--t-fast) var(--ease-out);
}
.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: var(--s-4);
  inset-block-end: 8px;
  block-size: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--t-mid) var(--ease-out);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* Cart button + live count badge */
.cart-btn { position: relative; }
.cart-badge {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 1px;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 4px;
  border-radius: var(--r-pill);
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  transform: scale(0);
  transition: transform var(--t-mid) var(--ease-spring);
}
.cart-badge.is-visible { transform: scale(1); }

.header__wa { display: none; }

/* Burger */
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; }
.burger__bar {
  display: block;
  inline-size: 20px; block-size: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--t-mid) var(--ease-out), opacity var(--t-fast) linear;
}
.is-menu-open .burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.is-menu-open .burger__bar:nth-child(2) { opacity: 0; }
.is-menu-open .burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Full-screen mobile menu. Focus trapped by JS, Esc closes. */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: var(--s-5) var(--gutter) max(var(--s-7), env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  /* visibility is STEPPED, not transitioned. Transitioning it leaves the panel
     `hidden` on the frame the class lands, so moving focus in silently fails. */
  transition:
    opacity var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out),
    visibility 0s linear var(--t-mid);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out),
    visibility 0s;
}
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s-7); }
.mobile-menu__list { display: flex; flex-direction: column; }
.mobile-menu__link {
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 8vw, 2.5rem);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--s-4);
  display: block;
  border-block-end: 1px solid var(--line);
  transition: color var(--t-fast) var(--ease-out), padding-inline-start var(--t-mid) var(--ease-out);
}
.mobile-menu__link:hover,
.mobile-menu__link:focus-visible { color: var(--accent); padding-inline-start: var(--s-3); }
.mobile-menu__foot { margin-block-start: auto; padding-block-start: var(--s-7); display: grid; gap: var(--s-4); justify-items: stretch; }

body.is-menu-open { overflow: hidden; }


/* =============================================================================
   10  LANGUAGE TOGGLE
   ============================================================================= */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
}
.lang-toggle__btn {
  min-block-size: 44px;      /* tap target — do not shrink */
  min-inline-size: 44px;
  padding-inline: var(--s-3);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink-3);
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.lang-toggle__btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.lang-toggle__btn:hover:not([aria-pressed="true"]) { color: var(--ink); }
.lang-toggle__btn--ur { font-family: var(--ff-urdu); font-size: 0.8rem; line-height: 1.9; padding-block-start: 2px; }
.mobile-menu .lang-toggle { justify-self: start; }


/* =============================================================================
   11  FLOATING WHATSAPP
   Above everything, clears the iOS home indicator, and steps aside for the
   sticky checkout bar on mobile (js adds .is-tucked).
   ============================================================================= */
.wa-float {
  position: fixed;
  inset-block-end: max(var(--s-5), calc(env(safe-area-inset-bottom) + var(--s-3)));
  inset-inline-end: max(var(--s-5), calc(env(safe-area-inset-right) + var(--s-3)));
  z-index: 70;
  inline-size: 56px;
  block-size: 56px;
  border-radius: 50%;
  background: var(--wa);
  color: #05270F;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px -8px rgb(11 107 53 / .5);
  text-decoration: none;
  transition: transform var(--t-mid) var(--ease-spring), box-shadow var(--t-mid) var(--ease-out), opacity var(--t-mid) var(--ease-out);
}
.wa-float:hover { transform: scale(1.07); color: #05270F; box-shadow: 0 16px 34px -8px rgb(11 107 53 / .6), 0 0 0 10px rgb(37 211 102 / .12); }
.wa-float svg { inline-size: 28px; block-size: 28px; }
.wa-float.is-tucked { transform: translateY(-74px); }
.wa-float.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.wa-float__label { display: none; }

@media (min-width: 1200px) {
  .wa-float { inline-size: auto; block-size: 56px; border-radius: var(--r-pill); padding-inline: var(--s-5); gap: var(--s-3); grid-auto-flow: column; }
  .wa-float__label { display: inline; font-size: var(--fs-small); font-weight: 700; }
}


/* =============================================================================
   12  TEMPERING GRADIENT — THE SIGNATURE ELEMENT
   A rail pinned to the inline-start edge. Its fill height tracks scroll; the
   gradient inside runs the real tempering curve for dark chocolate:
     45°C melt → 27°C seed and cool → 31°C working temperature → tempered snap.
   The inner element is always one viewport tall, so the gradient reads as
   absolute progress along the curve rather than stretching with the fill.
   ============================================================================= */
.tempering {
  position: fixed;
  inset-block: 0;
  inset-inline-start: var(--rail-x);
  inline-size: var(--rail-w);
  z-index: 40;
  pointer-events: none;
}
.tempering__track {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  background: rgb(36 22 9 / .08);
  overflow: hidden;
}
.tempering__fill {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: calc(var(--temper) * 100%);
  overflow: hidden;
  transition: block-size 90ms linear;
  border-radius: var(--r-pill);
}
.tempering__inner {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100dvh;
  background: linear-gradient(
    to bottom,
    #2A1912 0%,      /* 45°C — raw, melted, matte */
    #4A2A18 22%,
    #5A3319 38%,     /* 27°C — seeded, crystals forming */
    #6B3E22 52%,
    #8C5729 66%,     /* 31°C — reheated to working temperature */
    #A96F37 82%,
    #E7C48C 100%     /* tempered: snap and shine */
  );
}
.tempering__spec {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100dvh;
  background: linear-gradient(to bottom, transparent 0%, transparent 60%, rgb(255 255 255 / .55) 72%, transparent 84%, transparent 100%);
  mix-blend-mode: screen;
  animation: temper-sweep 6s var(--ease-in-out) infinite;
  opacity: calc(var(--temper) * 0.9);
}
@keyframes temper-sweep {
  0%, 100% { transform: translateY(-6%); opacity: .35; }
  50%      { transform: translateY(6%); opacity: .85; }
}

.tempering__ticks { position: absolute; inset: 0; }
.tempering__tick {
  position: absolute;
  inset-inline-start: calc(var(--rail-w) + 8px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-sub);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  opacity: .35;
  white-space: nowrap;
  transition: opacity var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out);
}
.tempering__tick::before { content: ""; inline-size: 8px; block-size: 1px; background: currentColor; flex: none; }
.tempering__tick.is-lit { opacity: 1; color: var(--caramel-ink); }
@media (max-width: 1199px) { .tempering__ticks { display: none; } }
@media (max-width: 599px)  { .tempering { inset-inline-start: 4px; } }


/* =============================================================================
   13  SCROLL REVEALS
   Every starting state is gated on `.js`, which the inline script in each <head>
   adds. Without JavaScript the IntersectionObserver never runs, so an ungated
   `.reveal { opacity: 0 }` would leave the whole page blank. Content is visible
   by default; the animation is the enhancement.
   ============================================================================= */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal--x { transform: translateX(calc(var(--dir) * -28px)); }
.js .reveal--scale { transform: scale(.96); }
.js .reveal--x.is-in,
.js .reveal--scale.is-in { transform: none; }


/* =============================================================================
   14  PRODUCT ARTWORK ENGINE
   All artwork is inline SVG referenced with <use href="#id"> from a per-page
   <defs> block. Same-document references work over file://; an external sprite
   would not.
   ============================================================================= */
.art { position: relative; display: block; inline-size: 100%; }
.art svg { inline-size: 100%; block-size: auto; display: block; overflow: visible; }

.art-swap { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.art-swap__view { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.art-swap__view--cut {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(.96);
  display: grid;
  align-items: center;
}
.art-swap__view--whole { opacity: 1; }
.art-swap[data-state="cut"] .art-swap__view--whole { opacity: 0; transform: scale(1.03); }
.art-swap[data-state="cut"] .art-swap__view--cut { opacity: 1; transform: none; }

.art-swap__hint {
  position: absolute;
  inset-block-end: var(--s-2);
  /* Centred with inset-inline + margin-inline:auto, NOT inset-inline-start:50%
     + translateX(-50%). The inset is logical but the translate is physical, so
     that pairing throws the chip a full width off centre under RTL. */
  inset-inline: 0;
  margin-inline: auto;
  inline-size: max-content;
  max-inline-size: calc(100% - var(--s-5));
  font-family: var(--ff-sub);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 14px;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity var(--t-mid) var(--ease-out);
}
.art-swap[data-state="cut"] .art-swap__hint { opacity: .5; }

/* One specular sweep on hover — 560ms, eased, then it stops. */
.gloss { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; }
.gloss::after {
  content: "";
  position: absolute;
  inset-block: -30%;
  inline-size: 42%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / .30) 45%, rgb(255 255 255 / .55) 50%, rgb(255 255 255 / .30) 55%, transparent);
  transform: skewX(-14deg);
  transition: inset-inline-start var(--t-slow) var(--ease-in-out);
}
.art-swap:hover .gloss::after,
.product-card:hover .gloss::after,
.gloss.is-sweeping::after { inset-inline-start: 130%; }


/* =============================================================================
   15  PLACEHOLDERS
   Every one is a real SVG file in assets/placeholders/, wrapped in a
   <figure class="placeholder" data-swap="key"> so it can be grepped and swapped.
   ============================================================================= */
.placeholder {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.placeholder img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.placeholder figcaption {
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-start: var(--s-2);
  font-family: var(--ff-sub);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--caramel-ink);
  background: color-mix(in srgb, #FFFFFF 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--caramel) 45%, transparent);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  pointer-events: none;
}
.placeholder--square   { aspect-ratio: 1 / 1; }
.placeholder--wide     { aspect-ratio: 16 / 9; }
.placeholder--hero     { aspect-ratio: 5 / 3; }
.placeholder--portrait { aspect-ratio: 3 / 4; }
.placeholder--process  { aspect-ratio: 4 / 3; }


/* =============================================================================
   16  HERO AND SLIDER
   Light, open, generous. The chocolate artwork is the only dark mass, which is
   exactly the contrast the page is built on.
   ============================================================================= */
.hero {
  position: relative;
  min-block-size: min(88svh, 820px);
  display: grid;
  /* minmax(0,1fr), not auto: an auto track sizes to the intrinsic 2000px width
     of the hero photo placeholders and shoves the copy off screen. */
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% 12%, rgb(201 139 75 / .16), transparent 60%),
    radial-gradient(90% 80% at 8% 92%, rgb(212 175 55 / .10), transparent 62%),
    var(--bg);
}
.hero::after {
  /* one hairline to seat the hero on the section below it */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background: var(--line);
}
.hero__slides { display: grid; grid-template-areas: "slide"; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.hero__slide {
  grid-area: slide;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-inline-size: 0;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-slow) var(--ease-out), visibility 0s;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  align-items: center;
  /* The generous bottom padding is not decoration — the slogan, the dots and the
     pause control are absolutely positioned in that band. Reduce it and they
     land on top of the artwork. */
  padding-block: calc(var(--section-y) * 0.85) calc(var(--section-y) * 1.45);
  inline-size: 100%;
}

/* Choreographed load: headline masks up, art scales in, CTAs fade last. */
.hero__mask { overflow: hidden; display: block; padding-block-end: 0.06em; }
.hero__line { display: block; }
.js .hero__line {
  transform: translateY(105%);
  transition: transform var(--t-hero) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 105ms);
}
.js .is-hero-ready .hero__line,
.is-hero-ready .hero__line { transform: none; }

.hero__copy { position: relative; z-index: 2; }
.hero__title em { font-style: italic; color: var(--accent); }
.hero__story { margin-block-start: var(--s-5); max-inline-size: 44ch; }
.hero__ctas { margin-block-start: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch; }
/* On a phone two CTAs at their natural widths look accidental. Full width and
   stacked reads as a decision. They go side by side from 600px up. */
.hero__ctas .btn { flex: 1 1 100%; }
@media (min-width: 600px) { .hero__ctas .btn { flex: 0 1 auto; } }

.js .hero__story {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease-out) 640ms, transform var(--t-slow) var(--ease-out) 640ms;
}
.js .hero__ctas {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease-out) 880ms, transform var(--t-slow) var(--ease-out) 880ms;
}
.is-hero-ready .hero__story,
.is-hero-ready .hero__ctas { opacity: 1; transform: none; }

.hero__art {
  position: relative;
  z-index: 1;
  transform: translate3d(0, calc(var(--parallax, 0) * 1px), 0);
  will-change: transform;
}
.hero__art-inner {
  /* Default scale is 1 so the artwork is correct without JS. `.js` arms the
     scale-in and .is-hero-ready releases it. */
  transform: rotateX(calc(var(--tilt-y, 0) * 1deg)) rotateY(calc(var(--tilt-x, 0) * 1deg)) scale(var(--hero-scale, 1));
  transform-style: preserve-3d;
  transition: transform var(--t-hero) var(--ease-out);
}
.js .hero__art-inner { --hero-scale: .9; }
.is-hero-ready .hero__art-inner { --hero-scale: 1; }
.hero__art-inner.is-tilting { transition: transform 260ms var(--ease-out); }

/* Slogan overlay — present on all three slides. */
.hero__slogan {
  position: absolute;
  inset-block-end: var(--s-8);
  inset-inline: 0;
  text-align: center;
  font-family: var(--ff-sub);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 3;
  pointer-events: none;
  padding-inline: var(--gutter);
}
.hero__slogan strong { color: var(--ink); font-weight: 400; }

/* Photo slides.
   aspect-ratio is cancelled here on purpose: the figure already has a definite
   height from the slide, so leaving 5/3 in place would derive its WIDTH from
   that height and blow the slide out to ~1900px. */
.hero__photo { position: relative; inline-size: 100%; block-size: 100%; min-inline-size: 0; }
.hero__photo .placeholder {
  inline-size: 100%; block-size: 100%; min-inline-size: 0;
  aspect-ratio: auto; border-radius: 0; border: 0;
}
.hero__photo .placeholder img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero__photo-copy {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: var(--gutter);
  padding-block-end: calc(var(--s-10) + var(--s-2));
  background: linear-gradient(to top, rgb(28 17 11 / .92), rgb(28 17 11 / .5) 48%, transparent);
  color: #FFF8EC;
}
.hero__photo-copy h2 { color: #FFF8EC; }
.hero__photo-copy .lead { color: rgb(255 248 236 / .82); }

/* Dots */
.hero__dots { position: absolute; inset-block-end: var(--s-4); inset-inline: 0; display: flex; justify-content: center; gap: var(--s-1); z-index: 4; }
.hero__dot { inline-size: 44px; block-size: 44px; display: grid; place-items: center; }
.hero__dot::before {
  content: "";
  inline-size: 8px; block-size: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-3);
  transition: background-color var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-spring), border-color var(--t-mid) var(--ease-out);
}
.hero__dot[aria-selected="true"]::before { background: var(--ink); border-color: var(--ink); transform: scale(1.3); }

.hero__pause { position: absolute; inset-block-end: var(--s-4); inset-inline-end: var(--gutter); z-index: 4; color: var(--ink-3); }
.hero__pause:hover { color: var(--ink); }


/* =============================================================================
   17  PRODUCT CARDS AND OPTIONS
   Cards in a row share one internal grid: media, name, claim, body, options —
   then `margin-block-start: auto` on the price row pushes price and actions to
   the bottom, so prices and buttons line up across cards of unequal copy.
   ============================================================================= */
.product-card {
  --accent-product: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.product-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-3); }
.product-card--crown  { --accent-product: var(--product-crown); }
.product-card--peanut { --accent-product: var(--product-peanut); }

/* The identity stripe — the at-a-glance signal telling the two lines apart. */
.product-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(to right, transparent, var(--accent-product), transparent);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  margin-block-end: var(--s-5);
  border-radius: var(--r-md);
  background: var(--art-glow), var(--surface-2);
  border: 1px solid var(--line);
  padding: var(--s-3);
  overflow: hidden;   /* keeps the sold-out ribbon inside the rounded corners */
}
.product-card__tier {
  position: absolute;
  inset-block-start: var(--s-3);
  inset-inline-end: var(--s-3);
  font-family: var(--ff-sub);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-product);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 4px 11px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  z-index: 2;
}

.product-card__name {
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.product-card__claim {
  font-family: var(--ff-sub);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--accent-product);
  margin-block-start: var(--s-3);
}
.product-card__body { color: var(--ink-3); font-size: var(--fs-small); margin-block-start: var(--s-3); }

/* Inclusion chips — the five-in-one proof, on the card itself. */
.inclusions { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: var(--s-5); }
.inclusion {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-micro);
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 5px 11px 5px 6px;
}
.inclusion__dot { inline-size: 13px; block-size: 13px; border-radius: 50%; flex: none; box-shadow: inset 0 -1px 2px rgb(0 0 0 / .2); }
.inclusion__dot--almond    { background: linear-gradient(140deg, #F0DCBB, #B98F5E); }
.inclusion__dot--peanut    { background: linear-gradient(140deg, #EBBE7C, #A9702F); }
.inclusion__dot--pistachio { background: linear-gradient(140deg, #BCD46C, #6C8A32); }
.inclusion__dot--cashew    { background: linear-gradient(140deg, #F7E9CD, #C6A268); }
.inclusion__dot--raisin    { background: linear-gradient(140deg, #6A4257, #241521); }

/* Option pills */
.options { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-3); }
.option {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-block-size: 52px;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  text-align: start;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.option:hover:not([disabled]) { border-color: var(--ink-3); color: var(--ink); }
.option[aria-pressed="true"] {
  border-color: var(--accent-product, var(--accent));
  box-shadow: inset 0 0 0 1px var(--accent-product, var(--accent));
  background: color-mix(in srgb, var(--accent-product, var(--accent)) 8%, var(--surface));
  color: var(--ink);
}
.option__label { font-weight: 600; font-size: var(--fs-small); }
.option__save { color: var(--tone-ok); font-size: var(--fs-micro); letter-spacing: .02em; }
.option[disabled] { opacity: .45; cursor: not-allowed; }

/* Quantity stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface);
}
.stepper__btn {
  inline-size: 46px; block-size: 46px;
  display: grid; place-items: center;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1;
  transition: background-color var(--t-fast) var(--ease-out);
}
.stepper__btn:hover { background: var(--surface-2); }
.stepper__input {
  inline-size: 46px;
  min-block-size: 46px;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Price block — auto top margin is what aligns cards to each other. */
.price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-block-start: auto;
  padding-block-start: var(--s-5);
}
.price {
  font-family: var(--ff-display);
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums lining-nums;
}
.price__unit { font-family: var(--ff-body); font-size: var(--fs-micro); color: var(--ink-3); letter-spacing: .03em; }
.price--was { font-size: var(--fs-lead); color: var(--ink-3); text-decoration: line-through; }
/* Full-width second line INSIDE the price row. Living here rather than after
   the actions is deliberate: the price row is the auto-margin element, so extra
   height here pushes the price up instead of pushing the buttons down — and the
   button rows stay aligned across cards. */
.price-row__note { flex-basis: 100%; margin-block-start: calc(var(--s-1) * -1); }

/* Present on BOTH product cards, always, even when there is only one variant.
   Identical structure below the price is what makes the price rows and the
   button rows line up across cards whose copy is different lengths. */
.qty-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-start: var(--s-4);
  min-block-size: 48px;
}

.product-card__actions { display: flex; gap: var(--s-3); margin-block-start: var(--s-5); flex-wrap: wrap; align-items: stretch; }
.product-card__actions .btn { flex: 1 1 0; min-inline-size: 140px; }
.product-card__foot { margin-block-start: var(--s-1); }
.product-card__foot a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline-end: var(--s-2); }

/* Stock states */
.stock { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-micro); color: var(--tone-ok); margin-inline-start: auto; }
.stock::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }
.stock--out { color: var(--tone-danger); }

.badge-soldout {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-sub);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tone-danger);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 3px 10px;
}

/* Sold out: the card stays legible, the artwork steps back, and a ribbon says
   so without the customer having to hunt for a disabled button. */
.is-soldout .product-card__media { filter: grayscale(.75) contrast(.92) brightness(1.03); }
.is-soldout .product-card__media::after {
  content: attr(data-soldout-label);
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding-block: var(--s-2);
  text-align: center;
  font-family: var(--ff-sub);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FFF8EC;
  background: color-mix(in srgb, var(--cocoa-900) 82%, transparent);
}


/* =============================================================================
   18  COMBO BAND
   The one surface carrying the tempering treatment at full strength, and the
   biggest note of chocolate on the page.
   ============================================================================= */
.combo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(115deg, #24140D 0%, #43260F 26%, #6B3E22 52%, #A96F37 80%, #E7C48C 136%);
  isolation: isolate;
}
.combo::before,
.combo::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1px;
  background: linear-gradient(to right, transparent, var(--crown), transparent);
  z-index: 2;
}
.combo::before { inset-block-start: 0; }
.combo::after  { inset-block-end: 0; }

.combo__grain { position: absolute; inset: 0; z-index: 1; opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
.combo .container { position: relative; z-index: 2; }
.combo__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.combo__title { color: #FFF7EA; }
.combo__body { color: rgb(255 247 234 / .86); max-inline-size: 46ch; }
.combo__price { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; margin-block-start: var(--s-5); }
.combo__price .price { color: #FFF7EA; }
.combo__price .price--was { color: rgb(255 247 234 / .58); }
.combo__save {
  font-family: var(--ff-sub);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2A1F05;
  background: var(--crown);
  border-radius: var(--r-pill);
  padding: 5px 13px;
}
.combo__art { display: block; }


/* =============================================================================
   19  TRUST ROW
   Five claims, five icons drawn for their own claim. Five identical checkmarks
   would communicate nothing five times.
   ============================================================================= */
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-4); }
.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.trust-item:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.trust-item__icon { inline-size: 38px; block-size: 38px; color: var(--accent); }
.trust-item__label {
  font-family: var(--ff-sub);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.trust-item__note { font-size: var(--fs-micro); color: var(--ink-3); margin-block-start: auto; }


/* =============================================================================
   20  CRAFT TIMELINE
   Progress line draws with stroke-dashoffset as the section scrolls.
   ============================================================================= */
.craft__track { position: relative; }
.craft__line { position: absolute; inset-block-start: 34px; inset-inline: 10%; block-size: 2px; display: none; }
.craft__line svg { inline-size: 100%; block-size: 2px; overflow: visible; }
/* --len and --dash are written by JS, WITH px UNITS. stroke-dasharray accepts a
   bare <number> but stroke-dashoffset does not, and the failure is silent. */
.craft__line path {
  stroke: var(--accent-fill);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: var(--len, 1000px);
  stroke-dashoffset: var(--dash, 1000px);
  transition: stroke-dashoffset 120ms linear;
}
.craft__line-bg { stroke: var(--line); stroke-width: 2; fill: none; }

.craft__steps { display: grid; gap: var(--s-7); position: relative; }
.craft-step { display: flex; flex-direction: column; gap: var(--s-4); }
.craft-step__num {
  inline-size: 68px; block-size: 68px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ff-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--bg);
  border: 1.5px solid var(--line-strong);
  position: relative;
  z-index: 2;
  transition: border-color var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out);
}
.craft-step.is-in .craft-step__num { border-color: var(--accent-fill); }
.craft-step__temp { font-family: var(--ff-sub); font-size: var(--fs-micro); letter-spacing: .12em; color: var(--accent); }
.craft-step__body { color: var(--ink-3); font-size: var(--fs-small); max-inline-size: 40ch; }
.craft-step .placeholder { margin-block-start: auto; }


/* =============================================================================
   21  VIDEO SLOTS
   ============================================================================= */
.video-slot {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.video-slot .placeholder { border-radius: 0; border: 0; }
.video-slot__play {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 100%;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: rgb(28 17 11 / .05);
  transition: background-color var(--t-mid) var(--ease-out);
}
.video-slot__play:hover { background: rgb(28 17 11 / .01); }
.video-slot__play span {
  inline-size: 60px; block-size: 60px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: grid; place-items: center;
  box-shadow: var(--shadow-2);
  transition: transform var(--t-mid) var(--ease-spring);
}
.video-slot__play:hover span { transform: scale(1.08); }
.video-slot__meta { padding: var(--s-3) var(--s-4); border-block-start: 1px solid var(--line); }


/* =============================================================================
   22  REVIEWS RAIL
   Draggable, snap-scrolling. Keyboard users get arrow buttons and native focus
   scrolling, so dragging is never the only way through.
   ============================================================================= */
.reviews__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); margin-block-end: var(--s-7); }
.rating-agg { display: flex; align-items: center; gap: var(--s-4); }
.rating-agg__score { font-family: var(--ff-display); font-size: 2.75rem; font-weight: 600; line-height: 1; color: var(--ink); }
.stars { display: inline-flex; gap: 2px; color: var(--crown); }
.stars svg { inline-size: 16px; block-size: 16px; }

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(272px, 32%);
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-block: var(--s-2) var(--s-5);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  cursor: grab;
  overscroll-behavior-inline: contain;
}
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail::-webkit-scrollbar { block-size: 6px; }
.rail::-webkit-scrollbar-track { background: var(--surface-2); border-radius: var(--r-pill); }
.rail::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--r-pill); }

.review-card {
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out), box-shadow var(--t-mid) var(--ease-out);
}
.review-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.review-card__text { color: var(--ink-2); font-size: var(--fs-small); }
.review-card__who { margin-block-start: auto; display: flex; align-items: center; gap: var(--s-3); padding-block-start: var(--s-4); border-block-start: 1px solid var(--line); }
.review-card__avatar {
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  display: grid; place-items: center;
  color: var(--ink-3); font-size: var(--fs-micro);
  flex: none;
}
.review-card__name { font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.review-card__city { font-size: var(--fs-micro); color: var(--ink-3); }

/* Sample-copy marker. Honest about what this is. */
[data-placeholder-copy="true"] { position: relative; }
[data-placeholder-copy="true"]::after {
  content: "SAMPLE COPY";
  position: absolute;
  inset-block-start: var(--s-2);
  inset-inline-end: var(--s-2);
  font-family: var(--ff-sub);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: var(--r-sm);
  padding: 2px 7px;
  opacity: .7;
  pointer-events: none;
}
.rail-controls { display: flex; gap: var(--s-2); }
.rail-controls .btn--icon { border: 1px solid var(--line-strong); }


/* =============================================================================
   23  NEWSLETTER
   ============================================================================= */
.newsletter { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.newsletter__form { display: flex; gap: var(--s-3); flex-wrap: wrap; max-inline-size: 520px; align-items: flex-start; }
.newsletter__form .field { flex: 1 1 220px; }
.newsletter__form .btn { flex: 0 0 auto; min-block-size: 50px; }


/* =============================================================================
   24  FOOTER
   The closing chocolate band.
   ============================================================================= */
.site-footer {
  padding-block: var(--s-9) var(--s-5);
  padding-block-end: calc(var(--s-8) + 40px);   /* clear the floating WhatsApp button */
}
.footer__grid { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.footer__title {
  font-family: var(--ff-sub);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-block-end: var(--s-3);
}
.footer__list { display: grid; gap: 0; }
.footer__list a,
.footer__list span {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  color: var(--ink-3);
  text-decoration: none;
  font-size: var(--fs-small);
}
.footer__list a:hover { color: var(--accent); }
.footer__socials { display: flex; gap: var(--s-2); margin-block-start: var(--s-5); }
.footer__social {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  border-radius: 50%;
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.footer__social:hover { color: var(--accent); background: color-mix(in srgb, currentColor 10%, transparent); }
.footer__social svg { inline-size: 19px; block-size: 19px; }
.footer__bottom {
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--ink-3);
}
.footer__policies { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.footer__policies a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ink-3); text-decoration: none; }
.footer__policies a:hover { color: var(--accent); }


/* =============================================================================
   25  PRODUCTS PAGE
   ============================================================================= */
.page-head { padding-block: calc(var(--section-y) * 0.9) 0; }

/* minmax(0,1fr), not auto: an auto column takes its width from the widest
   child's min-content, and the 5-column bundle table is wider than a phone. */
.pdp { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.pdp__media { position: relative; }
.pdp__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--art-glow), var(--surface);
  overflow: hidden;
}
.pdp__view {
  grid-area: 1 / 1;
  inline-size: 100%;
  /* Fluid, not a flat 48px. On a 390px phone a fixed 48px inset on each side
     shrank the artwork to a small object floating in a large empty square. */
  padding: clamp(var(--s-4), 5vw, var(--s-7));
  opacity: 0;
  visibility: hidden;
  transform: scale(.96);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility 0s linear var(--t-slow);
}
.pdp__view.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out), visibility 0s;
}
.pdp__views { display: flex; gap: var(--s-2); flex-wrap: wrap; margin-block-start: var(--s-4); }
.pdp__views .option { min-block-size: 46px; }
.pdp__facts { display: grid; gap: 0; margin-block-start: var(--s-6); }
.fact-row {
  display: grid;
  grid-template-columns: minmax(110px, 30%) 1fr;
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-small);
  align-items: start;
}
.fact-row dt { font-family: var(--ff-sub); letter-spacing: .05em; color: var(--ink-3); }
.fact-row dd { margin: 0; color: var(--ink-2); }

.allergen {
  display: flex;
  gap: var(--s-4);
  align-items: flex-start;
  padding: var(--s-5);
  border: 1px solid color-mix(in srgb, var(--tone-danger) 40%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tone-danger) 7%, transparent);
  margin-block-start: var(--s-6);
  font-size: var(--fs-small);
}
.allergen svg { inline-size: 22px; block-size: 22px; color: var(--tone-danger); flex: none; margin-block-start: 2px; }
.allergen strong { color: var(--ink); display: block; margin-block-end: 2px; }

.table-wrap { overflow-x: auto; margin-block-start: var(--s-4); scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.bundle-table { inline-size: 100%; min-inline-size: 380px; border-collapse: collapse; font-size: var(--fs-small); }
.bundle-table th, .bundle-table td { text-align: start; padding: var(--s-3) var(--s-4); border-block-end: 1px solid var(--line); }
.bundle-table th { font-family: var(--ff-sub); font-weight: 400; letter-spacing: .08em; font-size: var(--fs-micro); text-transform: uppercase; color: var(--ink-3); }
.bundle-table td { color: var(--ink-2); }
.bundle-table td.num { font-variant-numeric: tabular-nums; }
.bundle-table .save { color: var(--tone-ok); }

.gift-note {
  border-inline-start: 2px solid var(--crown);
  padding-inline-start: var(--s-4);
  margin-block-start: var(--s-6);
  font-size: var(--fs-small);
  color: var(--ink-3);
}


/* =============================================================================
   26  ABOUT PAGE
   ============================================================================= */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.temper-chart { inline-size: 100%; }
.temper-chart svg { inline-size: 100%; block-size: auto; }
.temper-chart .curve {
  fill: none;
  stroke: var(--accent-fill);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 900px);
  stroke-dashoffset: var(--dash, 900px);   /* px units required — see .craft__line path */
  transition: stroke-dashoffset 140ms linear;
}
.temper-chart .grid-line { stroke: var(--line); stroke-width: 1; }
.temper-chart .axis-label { fill: var(--ink-3); font-family: var(--ff-sub); font-size: 11px; letter-spacing: .1em; }
.temper-chart .point { fill: var(--bg); stroke: var(--accent-fill); stroke-width: 2.5; }
.temper-chart .point-label { fill: var(--ink); font-family: var(--ff-body); font-size: 12px; font-weight: 600; }

.promise { display: grid; gap: var(--s-5); counter-reset: promise; }
.promise__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  padding-block-end: var(--s-5);
  border-block-end: 1px solid var(--line);
  align-items: start;
}
.promise__item::before {
  counter-increment: promise;
  content: "0" counter(promise);
  font-family: var(--ff-display);
  font-size: 1.5rem;
  color: var(--accent);
  line-height: 1.2;
}
.source-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-6); block-size: 100%; }


/* =============================================================================
   27  FORMS AND CONTACT
   ============================================================================= */
.field { display: grid; gap: var(--s-2); align-content: start; }
.field__label { font-family: var(--ff-sub); font-size: var(--fs-small); letter-spacing: .04em; color: var(--ink); }
.field__label .req { color: var(--accent); }
.field__hint { font-size: var(--fs-micro); color: var(--ink-3); }
/* A value the customer reads rather than edits. Deliberately NOT styled like
   .input — a bordered box invites people to tap and type into it. */
.field__readout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-block-size: 52px;
  padding: var(--s-3) 0;
  border-block-end: 1px solid var(--line);
  font-size: var(--fs-lead);
  font-weight: 600;
  color: var(--ink);
}

.input, .textarea, .select {
  inline-size: 100%;
  min-block-size: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
  /* NEVER let this fall below 16px. iOS Safari zooms the whole page when a
     focused field is smaller than 16px, which throws the layout sideways and
     leaves the customer pinch-zooming back out mid-checkout. --fs-body is
     ~15.3px on a phone, so max() holds the floor. */
  font-size: max(16px, var(--fs-body));
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
/* Same floor for the quantity field, which is also a real <input>. */
.stepper__input { font-size: max(16px, var(--fs-small)); }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: .75; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-3); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
}
.textarea { min-block-size: 124px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237A6656' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 12px;
  padding-inline-end: var(--s-8);
}
[dir="rtl"] .select { background-position: left var(--s-4) center; }

.field.has-error .input,
.field.has-error .textarea,
.field.has-error .select { border-color: var(--tone-danger); }
.field__error { display: none; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--tone-danger); }
.field.has-error .field__error { display: flex; }
.field__error::before {
  content: "!";
  inline-size: 15px; block-size: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; flex: none;
}

.form-grid { display: grid; gap: var(--s-5); }
.form-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* Honeypot — off-screen, never focusable by a real person. */
.hp-field { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.contact-hero {
  text-align: center;
  padding: var(--s-8) var(--gutter);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: radial-gradient(80% 120% at 50% 0%, rgb(37 211 102 / .10), transparent 62%), var(--surface);
  box-shadow: var(--shadow-1);
}
.contact-hero > * + * { margin-block-start: var(--s-4); }
.contact-hero .btn { margin-block-start: var(--s-6); }

.info-list { display: grid; gap: var(--s-5); }
.info-list__row { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-4); align-items: start; font-size: var(--fs-small); }
.info-list__row svg { inline-size: 20px; block-size: 20px; color: var(--accent); margin-block-start: 2px; }
.info-list__row strong { color: var(--ink); display: block; margin-block-end: 2px; }
/* These are standalone contact details, not links inside a sentence, so they
   carry a real tap target rather than taking the inline-link exemption. */
.info-list__row a { display: inline-flex; align-items: center; min-block-size: 44px; }


/* =============================================================================
   28  CART DRAWER, CART PAGE, CHECKOUT
   ============================================================================= */
.cart-scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgb(36 22 9 / .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cart-scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-mid) var(--ease-out), visibility 0s; }

.cart-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 96;
  inline-size: min(420px, 100%);
  background: var(--bg);
  border-inline-start: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(calc(var(--dir) * 100%));
  /* Same stepped-visibility rule as .mobile-menu — see the note there. */
  transition: transform var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid);
  visibility: hidden;
  box-shadow: var(--shadow-3);
}
.cart-drawer.is-open { transform: none; visibility: visible; transition: transform var(--t-mid) var(--ease-out), visibility 0s; }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-block-end: 1px solid var(--line); }
.cart-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--s-5); overscroll-behavior: contain; }
.cart-drawer__foot {
  border-block-start: 1px solid var(--line);
  padding: var(--s-5) var(--s-5) max(var(--s-5), calc(env(safe-area-inset-bottom) + var(--s-3)));
  display: grid;
  gap: var(--s-3);
  background: var(--surface-2);
}

.line-item {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-block-end: 1px solid var(--line);
  align-items: start;
}
.line-item:last-child { border-block-end: 0; }
.line-item__thumb {
  inline-size: 68px; block-size: 68px;
  border-radius: var(--r-sm);
  background: var(--art-glow), var(--surface-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
  padding: 6px;
}
.line-item__name { font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.line-item__variant { font-size: var(--fs-micro); color: var(--ink-3); }
.line-item__controls { display: flex; align-items: center; gap: var(--s-3); margin-block-start: var(--s-3); flex-wrap: wrap; }
.line-item__price { font-variant-numeric: tabular-nums; font-weight: 600; text-align: end; white-space: nowrap; color: var(--ink); }
/* Cart controls stay at the 44px target like everything else. They were 36px
   to save width; the row wraps instead, which is the better trade on a phone. */
.line-item__remove {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--s-1);
  color: var(--ink-3);
  font-size: var(--fs-micro);
  text-decoration: underline;
}
.line-item__remove:hover { color: var(--tone-danger); }
.line-item .stepper__btn { inline-size: 44px; block-size: 44px; }
.line-item .stepper__input { inline-size: 40px; min-block-size: 44px; }

.cart-empty { text-align: center; padding-block: var(--s-8); display: grid; gap: var(--s-4); justify-items: center; }
.cart-empty__art { inline-size: 108px; }
.cart-empty .btn { margin-block-start: var(--s-2); }

.totals { display: grid; gap: var(--s-2); font-size: var(--fs-small); }
.totals__row { display: flex; justify-content: space-between; gap: var(--s-4); }
.totals__row--grand { padding-block-start: var(--s-3); border-block-start: 1px solid var(--line); font-size: var(--fs-lead); font-weight: 700; color: var(--ink); }

/* Checkout.
   On a phone the summary is pulled ABOVE the form. Left in source order it sat
   after every field, so the customer filled in name, phone and address before
   ever seeing what they were buying or what it came to. Collapsed-summary-first
   is the standard mobile checkout order, and it is one line of `order`. */
.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.checkout__summary { order: -1; }
.checkout__summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-1); }
/* One row, never wrapping: label on the left, total and chevron on the right. */
.summary-toggle {
  display: flex;
  inline-size: 100%;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  min-block-size: 48px;
  text-align: start;
}
.summary-toggle .cluster { flex-wrap: nowrap; gap: var(--s-3); }
/* The summary column is narrow. A display-scale price and an h3 title side by
   side wrap into a mess, so the title becomes a label and the price steps down. */
.summary-toggle .h3 {
  font-family: var(--ff-sub);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.summary-toggle .price { font-size: var(--fs-h3); white-space: nowrap; }
/* On desktop the grand total is already visible three rows below, so the
   duplicate in the header just crowds the column. It earns its place only when
   the summary is collapsed. */
.summary-toggle.is-static .price { display: none; }
.summary-toggle svg { transition: transform var(--t-mid) var(--ease-out); flex: none; }
.summary-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* On desktop the summary is permanently open, so the control stops pretending
   to be one. JS removes the `hidden` attribute there — CSS cannot, because the
   [hidden] utility is !important and would win. */
.summary-toggle.is-static { pointer-events: none; }
.summary-toggle.is-static svg { display: none; }
.summary-body { display: grid; gap: var(--s-5); margin-block-start: var(--s-5); }

.pay-methods { display: grid; gap: var(--s-2); }
.pay-method {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: start;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.pay-method:hover { border-color: var(--ink-3); }
.pay-method:has(input:checked) {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.pay-method input { inline-size: 20px; block-size: 20px; accent-color: var(--accent); margin-block-start: 2px; }
.pay-method__name { font-weight: 600; font-size: var(--fs-small); color: var(--ink); }
.pay-method__note { font-size: var(--fs-micro); color: var(--ink-3); }

.pay-details {
  margin-block-start: var(--s-4);
  padding: var(--s-5);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px dashed var(--line-strong);
  display: grid;
  gap: var(--s-4);
}
.pay-details[hidden] { display: none; }
.acct-row { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-small); flex-wrap: wrap; align-items: baseline; }
.acct-row dt { color: var(--ink-3); }
.acct-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.copy-btn { font-size: var(--fs-micro); color: var(--accent); text-decoration: underline; min-block-size: 36px; margin-inline-start: var(--s-2); }

.form-status { padding: var(--s-5); border-radius: var(--r-md); border: 1px solid var(--line); font-size: var(--fs-small); display: none; gap: var(--s-3); }
.form-status.is-shown { display: grid; }
.form-status strong { color: var(--ink); }
.form-status--error { border-color: color-mix(in srgb, var(--tone-danger) 45%, transparent); background: color-mix(in srgb, var(--tone-danger) 7%, transparent); }
.form-status--ok { border-color: color-mix(in srgb, var(--tone-ok) 45%, transparent); background: color-mix(in srgb, var(--tone-ok) 7%, transparent); }

/* Sticky submit bar on mobile.
   Solid, full-bleed and bordered — like an app's bottom action bar. The old
   version used a transparent gradient, so form fields showed through it and it
   read as a rendering fault rather than a bar. */
.checkout__submit-bar {
  position: sticky;
  inset-block-end: 0;
  z-index: 20;
  background: var(--bg);
  border-block-start: 1px solid var(--line);
  box-shadow: 0 -10px 26px -18px rgb(36 22 9 / .45);
  margin-inline: calc(var(--gutter) * -1);
  margin-block-start: var(--s-5);
  padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
}

.order-success { text-align: center; display: grid; gap: var(--s-5); justify-items: center; margin-inline: auto; }
.order-id {
  font-family: var(--ff-display);
  font-size: clamp(1.75rem, 5vw, 2.6rem);
  font-weight: 600;
  color: var(--crown-ink);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}


/* =============================================================================
   29  ADMIN PANEL — phone first
   ============================================================================= */
.admin { max-inline-size: 660px; margin-inline: auto; }
.admin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s-5); box-shadow: var(--shadow-1); }
.admin-card + .admin-card { margin-block-start: var(--s-4); }
.admin-card__title { font-family: var(--ff-sub); font-size: var(--fs-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-block-end: var(--s-4); }
.admin-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: center; padding-block: var(--s-3); border-block-end: 1px solid var(--line); }
.admin-row:last-child { border-block-end: 0; }
.admin-row__label { font-size: var(--fs-small); color: var(--ink); display: block; }
.admin-row__sub { font-size: var(--fs-micro); color: var(--ink-3); display: block; }
.admin-price { inline-size: 116px; min-block-size: 48px; text-align: end; }
.admin-city { display: grid; grid-template-columns: 1fr 116px 48px; gap: var(--s-2); align-items: center; }

/* Switch */
.switch { position: relative; display: inline-block; inline-size: 56px; block-size: 32px; flex: none; }
.switch input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; }
.switch__track { position: absolute; inset: 0; background: var(--line-strong); border-radius: var(--r-pill); transition: background-color var(--t-fast) var(--ease-out); pointer-events: none; }
.switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  inline-size: 26px; block-size: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-1);
  transition: transform var(--t-mid) var(--ease-spring);
}
.switch input:checked + .switch__track { background: var(--tone-ok); }
.switch input:checked + .switch__track::after { transform: translateX(calc(var(--dir) * 24px)); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 3px; }

.admin-login { max-inline-size: 400px; margin-inline: auto; display: grid; gap: var(--s-4); }


/* =============================================================================
   30  TOASTS AND UTILITIES
   ============================================================================= */
.toast-stack {
  position: fixed;
  inset-block-end: max(var(--s-5), env(safe-area-inset-bottom));
  /* Direction-agnostic centring — see the note on .art-swap__hint. */
  inset-inline: 0;
  margin-inline: auto;
  z-index: 120;
  display: grid;
  gap: var(--s-2);
  inline-size: min(420px, calc(100% - var(--s-8)));
  pointer-events: none;
}
.toast {
  background: var(--cocoa-900);
  color: #FFF8EC;
  border-radius: var(--r-pill);
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-small);
  box-shadow: var(--shadow-3);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  animation: toast-in var(--t-mid) var(--ease-out);
  pointer-events: auto;
}
.toast svg { inline-size: 18px; block-size: 18px; color: var(--ok-lift); flex: none; }
.toast.is-out { animation: toast-out var(--t-mid) var(--ease-out) forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px); } }

.noise-defs { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
[hidden] { display: none !important; }
.text-center { text-align: center; }
.mt-3 { margin-block-start: var(--s-3); }
.mt-5 { margin-block-start: var(--s-5); }
.mt-6 { margin-block-start: var(--s-6); }
.mt-7 { margin-block-start: var(--s-7); }


/* =============================================================================
   31  BREAKPOINTS
   Mobile first. These are the only width queries in the file.
   ============================================================================= */
@media (min-width: 600px) {
  .craft__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
  .craft__line { display: block; }
  .newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .line-item { grid-template-columns: 78px 1fr auto; }
}

@media (min-width: 860px) {
  :root { --header-h: 76px; }
  .header__nav { display: flex; }
  .header__wa { display: inline-flex; }
  .burger { display: none; }
  .hero__grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: var(--s-8); }
  .hero__slide--photo .hero__grid { grid-template-columns: minmax(0, 1fr); padding-block: 0; }
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .combo__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  /* A fixed-range summary column, not a ratio: at 1.4fr/.6fr the summary got
     narrow enough that its line items wrapped mid-phrase. */
  .checkout { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--s-7); }
  /* Back to source order on desktop, where the summary is a sidebar. */
  .checkout__summary { order: 0; position: sticky; inset-block-start: calc(var(--header-h) + var(--s-4)); }
  .checkout__submit-bar {
    position: static;
    background: none;
    border-block-start: 0;
    box-shadow: none;
    margin-inline: 0;
    padding: var(--s-2) 0 0;
  }
}

@media (min-width: 1100px) {
  .rail { grid-auto-columns: minmax(300px, 30%); }
}

@media (min-width: 1440px) { :root { --maxw: 1280px; } }

/* Pointer devices: hover swaps the artwork state. Touch uses tap (JS). */
@media (hover: hover) and (pointer: fine) {
  .art-swap:hover .art-swap__view--whole { opacity: 0; transform: scale(1.03); }
  .art-swap:hover .art-swap__view--cut   { opacity: 1; transform: none; }
}


/* =============================================================================
   32  URDU / RTL LAYER
   No separate RTL stylesheet — the layout above already mirrors because it uses
   logical properties throughout. This block only handles what is about the
   SCRIPT, not the direction: Nastaliq needs far more line height and reads
   smaller at the same nominal size, and Bodoni has no Urdu coverage.
   ============================================================================= */
[lang="ur"] body,
[lang="ur"] .lead,
[lang="ur"] .prose,
[lang="ur"] p,
[lang="ur"] li,
[lang="ur"] .btn,
[lang="ur"] .field__label,
[lang="ur"] .input,
[lang="ur"] .textarea,
[lang="ur"] .select {
  font-family: var(--ff-urdu);
  line-height: 2.1;
  font-size: 0.9em;
}

/* Bodoni has no Urdu glyphs, so the display face becomes Nastaliq at weight 600. */
[lang="ur"] .display,
[lang="ur"] .h1,
[lang="ur"] .h2,
[lang="ur"] .product-card__name,
[lang="ur"] .mobile-menu__link,
[lang="ur"] .hero__title {
  font-family: var(--ff-urdu);
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: 0;
}
[lang="ur"] .display { font-size: clamp(1.9rem, 0.9rem + 4.2vw, 3.8rem); }
[lang="ur"] .h1 { font-size: clamp(1.6rem, 1rem + 2.4vw, 2.8rem); }
[lang="ur"] .h2 { font-size: clamp(1.3rem, 1rem + 1.5vw, 2rem); }

/* Uppercase and wide tracking are Latin typographic devices and both break
   Nastaliq, so they are switched off rather than translated visually. */
[lang="ur"] .eyebrow,
[lang="ur"] .marquee__item,
[lang="ur"] .trust-item__label,
[lang="ur"] .footer__title,
[lang="ur"] .admin-card__title,
[lang="ur"] .hero__slogan,
[lang="ur"] .badge-soldout,
[lang="ur"] .product-card__tier {
  font-family: var(--ff-urdu);
  text-transform: none;
  letter-spacing: 0;
  line-height: 2;
}
[lang="ur"] .nav-link { font-family: var(--ff-urdu); line-height: 1.9; }

/* Latin islands: brand names, prices, phone numbers, order IDs. */
[dir="rtl"] .num,
[dir="rtl"] .wordmark,
[dir="rtl"] .price,
[dir="rtl"] .order-id,
[dir="rtl"] [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--ff-body);
}
[dir="rtl"] .price,
[dir="rtl"] .order-id,
[dir="rtl"] .wordmark { font-family: var(--ff-display); }

/* Nastaliq descends a long way; give inputs and buttons room to breathe. */
[lang="ur"] .btn { padding-block: var(--s-2) var(--s-3); min-block-size: 54px; }
[lang="ur"] .input,
[lang="ur"] .select { min-block-size: 56px; }
[lang="ur"] .option { min-block-size: 58px; }

/* The 0.9em step-down above applies to form controls too, which puts them back
   under 16px and brings the iOS focus-zoom straight back for Urdu readers.
   Re-assert the floor for controls only — the rest of the Urdu text keeps its
   step-down, because that is a legibility decision about Nastaliq, not a
   browser workaround. */
[lang="ur"] .input,
[lang="ur"] .textarea,
[lang="ur"] .select,
[lang="ur"] .stepper__input { font-size: max(16px, 0.9em); }

/* Directional flourishes that are not layout: mirror explicitly. */
[dir="rtl"] .stars { direction: ltr; }
[dir="rtl"] .rail { direction: rtl; }