/* ============================================================================
   MISTER BAKER — TRADE CATALOGUE
   Built to Brand System V2.1 · Mode: MINIMAL
   ----------------------------------------------------------------------------
   Colour law     : 60 cream / 30 crimson / 10 confetti. Never exceeded.
   Black          : text only, never a surface.
   Confetti       : energy accents only, never a background.
   Tagline        : "let's celebrate" — always lowercase, always script.
   Layout         : logical properties throughout, so RTL mirrors automatically.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   BRAND FONTS — self-hosted
   ----------------------------------------------------------------------------
   The three licensed brand faces, converted from the supplied desktop files to
   woff2 (1.4 MB of TTF/OTF down to 383 KB). Self-hosted rather than pulled from
   a CDN, so nothing depends on a third party and there is no extra DNS lookup.

   Originals are kept alongside these in assets/fonts/ — do not delete them,
   they are the source if the fonts ever need re-converting or subsetting.

   NOTE ON LICENSING: embedding a font on a website needs a WEBFONT licence,
   which is a different product from the desktop licence used in Illustrator.
   Worth confirming with the foundries for Lifehack and Ara Jozoor. Dubai is
   published free by the Dubai Executive Council with webfont formats included.
---------------------------------------------------------------------------- */
@font-face {
  font-family: 'Lifehack';
  src: url('../fonts/Lifehack-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ara Jozoor';
  src: url('../fonts/AraJozoor-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Dubai';
  src: url('../fonts/Dubai-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Dubai';
  src: url('../fonts/Dubai-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Dubai';
  src: url('../fonts/Dubai-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Dubai';
  src: url('../fonts/Dubai-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --- BRAND COLOUR (exact codes from Brand System V2.1) ----------------- */
  --crimson:        #CC003D;   /* MB Crimson · Pantone 1935C · the hero      */
  --crimson-deep:   #A30031;   /* pressed / hover only                       */
  --crimson-soft:   rgba(204, 0, 61, 0.08);
  --crimson-line:   rgba(204, 0, 61, 0.16);

  --cream:          #F2DCCA;   /* base everywhere                            */
  --cream-lift:     #F7E9DA;   /* raised surfaces: cards, inputs — a half-step
                                  above the page, never a different colour    */
  --cream-deep:     #E8CDB6;   /* recessed surfaces                          */
  --beige:          #DCB38D;   /* support tone                               */

  --ink:            #000000;   /* black — TEXT ONLY, never a surface         */
  --ink-70:         rgba(0, 0, 0, 0.68);
  --ink-45:         rgba(0, 0, 0, 0.46);
  --ink-15:         rgba(0, 0, 0, 0.13);

  --confetti-blue:  #9ACAEB;
  --confetti-turq:  #3FBFAD;
  --confetti-yellow:#FFCE00;

  /* --- TYPE ------------------------------------------------------------- */
  /* Ara Jozoor carries the headings and every other tagline; Dubai carries
     all body text in both scripts. Lifehack is scoped to a single spot —
     the hero's "let's celebrate" line — via --font-hero-script below. */
  --font-display:     'Ara Jozoor', 'Baloo Bhaijaan 2', system-ui, sans-serif;
  --font-body:        'Dubai', 'Tajawal', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script:      'Ara Jozoor', 'Baloo Bhaijaan 2', system-ui, sans-serif;
  --font-hero-script: 'Lifehack', 'Baloo Bhaijaan 2', 'Baloo 2', system-ui, sans-serif;

  /* --- SPACE / SHAPE ---------------------------------------------------- */
  /* Fluid: fills big screens instead of stranding a narrow column in the
     middle of them, while prose stays capped by max-inline-size on .lede etc. */
  --page:      min(95vw, 2200px);
  --page-wide: min(97vw, 2800px);   /* the product grid earns more room */
  --gutter:    clamp(1rem, 2.2vw, 2.25rem);
  --section:   clamp(2.5rem, 5vw, 4rem);

  --r-sm:      12px;
  --r-md:      18px;
  --r-lg:      28px;
  --r-xl:      40px;
  --r-pill:    999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(90, 40, 10, .06);
  --shadow-md: 0 2px 6px rgba(0,0,0,.05), 0 14px 40px rgba(90, 40, 10, .11);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.07), 0 32px 80px rgba(90, 40, 10, .18);

  --ease:      cubic-bezier(.22,.61,.36,1);
  --dur:       .28s;

  --header-h:  76px;   /* compact/scrolled height — sticky offsets use this */
  --logo-h:    52px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  font-family: var(--font-body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--crimson); color: var(--cream-lift); }

/* ============================================================================
   TYPE SCALE
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;              /* Ara Jozoor ships one weight */
  font-synthesis-weight: none;   /* so never let the browser fake a bolder one */
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.h-xl  { font-size: clamp(2.6rem, 1.6rem + 4.6vw, 4.9rem); }
.h-lg  { font-size: clamp(2rem, 1.4rem + 2.9vw, 3.35rem); }
.h-md  { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem); }
.h-sm  { font-size: clamp(1.12rem, 1.05rem + .35vw, 1.3rem); letter-spacing: -0.01em; }

/* RTL Arabic needs a touch more line-height and no negative tracking */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
  letter-spacing: 0;
  line-height: 1.28;
}
[dir="rtl"] body { line-height: 1.85; }

.script {
  font-family: var(--font-script);
  font-weight: 400;
  text-transform: lowercase;  /* Brand law: the tagline is ALWAYS lowercase */
  letter-spacing: 0;
  line-height: 1;
}

/* ============================================================================
   SECTION SUB-HEADINGS — abstract marks
   ----------------------------------------------------------------------------
   No number, no rule, no badge, and no icon. Each section carries a small
   abstract mark above its label, and the mark turns as you move down the page,
   so the six of them read as one family rather than six decorations.

   There is nothing to read in a mark, so there is nothing to translate: it
   works identically in Arabic. The label under it is lower case at normal
   size — a caption for the heading beneath, not a tab. Shouting it in
   tracked-out capitals is what made it read as stock UI furniture.

   Switch treatment with data-kicker on <html> in index.html:
     sprinkle  three scattered strokes, the brand's confetti at pen scale (in use)
     wedge     a filled sector turning through a soft disc
     orbit     a hairline ring with one dot travelling round it
   ========================================================================== */
.kicker {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--ink-70);
}
/* The mark sits ABOVE the label. Beside it, any small shape reads as an icon. */
.kicker::before {
  content: '';
  display: block;
  margin-block-end: .8rem;
  --turn: 0deg;          /* each section overrides only this angle */
}

/* ---- sprinkle ------------------------------------------------------------ */
[data-kicker="sprinkle"] .kicker::before {
  inline-size: 52px;
  block-size: 34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cg fill='none' stroke-width='4.4' stroke-linecap='round'%3E%3Cpath d='M5 24 L11 7' stroke='%23CC003D'/%3E%3Cpath d='M21 27 L25 10' stroke='%23DCB38D'/%3E%3Cpath d='M33 21 L41 6' stroke='%23CC003D'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
  transform: rotate(var(--turn));
}
[data-kicker="sprinkle"] .custom .kicker::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cg fill='none' stroke-width='4.4' stroke-linecap='round'%3E%3Cpath d='M5 24 L11 7' stroke='%23FBF2E9'/%3E%3Cpath d='M21 27 L25 10' stroke='rgba%28251,242,233,0.5%29'/%3E%3Cpath d='M33 21 L41 6' stroke='%23FBF2E9'/%3E%3C/g%3E%3C/svg%3E"); }

/* ---- wedge --------------------------------------------------------------- */
[data-kicker="wedge"] .kicker::before {
  inline-size: 52px; block-size: 52px; border-radius: 50%;
  background: conic-gradient(from var(--turn),
              var(--crimson) 0 96deg, rgba(220, 179, 141, .55) 96deg 360deg);
}
[data-kicker="wedge"] .custom .kicker::before {
  background: conic-gradient(from var(--turn),
              var(--cream-lift) 0 96deg, rgba(251, 242, 233, .24) 96deg 360deg);
}

/* ---- orbit --------------------------------------------------------------- */
[data-kicker="orbit"] .kicker::before {
  inline-size: 52px; block-size: 52px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(220, 179, 141, .85);
  background: radial-gradient(circle 6px at 50% 7px, var(--crimson) 98%, transparent 100%);
  transform: rotate(var(--turn));
}
[data-kicker="orbit"] .custom .kicker::before {
  box-shadow: inset 0 0 0 1.5px rgba(251, 242, 233, .38);
  background: radial-gradient(circle 6px at 50% 7px, var(--cream-lift) 98%, transparent 100%);
}

/* The angle is keyed to the section itself, not to its position in the page,
   so a mark stays with its own section if the admin reorders things. */
#supply   .kicker::before { --turn: -22deg; }
#range    .kicker::before { --turn:   5deg; }
#ordering .kicker::before { --turn:  33deg; }
#custom   .kicker::before { --turn:  61deg; }
#how      .kicker::before { --turn:  89deg; }
#contact  .kicker::before { --turn: 117deg; }

/* Inverted on the crimson panel. */
.custom .kicker { color: rgba(251, 242, 233, .85); }

/* Arabic sits a shade larger; lower-casing is a no-op in Arabic script. */
[dir="rtl"] .kicker { font-size: 1.05rem; }


.lede { font-size: clamp(1.05rem, 1rem + .35vw, 1.2rem); color: var(--ink-70); max-inline-size: 56ch; }

/* ============================================================================
   LAYOUT
   ========================================================================== */
.wrap {
  inline-size: min(100% - (var(--gutter) * 2), var(--page));
  margin-inline: auto;
}
.wrap-wide {
  inline-size: min(100% - (var(--gutter) * 2), var(--page-wide));
  margin-inline: auto;
}

.section { padding-block: var(--section); position: relative; }
/* Anchor jumps skip the section's top padding so the heading lands under the header. */
.section { scroll-margin-block-start: calc(-1 * var(--section)); }
.section-head { max-inline-size: 62ch; margin-block-end: clamp(2.5rem, 5vw, 3.75rem); }
.section-head .kicker { margin-block-end: 1.35rem; }
.section-head h2 { margin-block-end: 1rem; }

/* A soft hairline divider in beige — the support tone doing structural work */
.rule { block-size: 1px; background: var(--beige); opacity: .55; border: 0; }

/* ============================================================================
   SIGNATURE SHAPE
   ----------------------------------------------------------------------------
   The brand's most distinctive device: a large organic crimson blob with one
   soft corner. Rebuilt here in CSS so it scales and mirrors in RTL.
   ========================================================================== */
.blob {
  position: absolute;
  background: var(--crimson);
  border-start-start-radius: 50%;
  border-start-end-radius: 50%;
  border-end-end-radius: 50%;
  border-end-start-radius: 8%;
  pointer-events: none;
  z-index: 0;
}

/* Confetti flecks — energy only, max 10% of surface, never a background */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.section > .wrap, .section > .wrap-wide { position: relative; z-index: 2; }
.confetti i {
  position: absolute;
  inline-size: var(--d, 12px);
  block-size: var(--d, 12px);
  border-radius: 50%;          /* circles — never squares or squircles */
  opacity: var(--o, .9);
  animation: float 7s var(--ease) infinite;
}
/* Explicit colours so each circle is placed deliberately, not by nth-child
   accident. Confetti tones stay accents only — never a surface. */
.confetti i.c-blue    { background: var(--confetti-blue);   }
.confetti i.c-turq    { background: var(--confetti-turq);   }
.confetti i.c-yellow  { background: var(--confetti-yellow); }
.confetti i.c-cream   { background: var(--cream-lift);      }
.confetti i.c-beige   { background: var(--beige);           }
.confetti i.c-crimson { background: var(--crimson);         }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn {
  --btn-bg: var(--crimson);
  --btn-fg: var(--cream-lift);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: .97rem;
  line-height: 1.2;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  box-shadow: 0 2px 10px rgba(204,0,61,.22);
  white-space: nowrap;
}
.btn:hover  { background: var(--crimson-deep); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(204,0,61,.3); }
.btn:active { transform: translateY(0); }

.btn svg { inline-size: 1.1em; block-size: 1.1em; flex: none; }
[dir="rtl"] .btn svg.arrow { transform: scaleX(-1); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink-15);
}
.btn-ghost:hover {
  --btn-bg: transparent;
  --btn-fg: var(--crimson);
  box-shadow: inset 0 0 0 2px var(--crimson);
}

.btn-cream {
  --btn-bg: var(--cream-lift);
  --btn-fg: var(--crimson);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
.btn-cream:hover { --btn-bg: #fff; --btn-fg: var(--crimson-deep); }

.btn-sm { padding: .6rem 1.05rem; font-size: .86rem; }
.btn-block { inline-size: 100%; }

.btn-wa svg { inline-size: 1.25em; block-size: 1.25em; }

/* ============================================================================
   HEADER
   ========================================================================== */
.topstrip {
  background: var(--crimson);
  color: var(--cream-lift);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-align: center;
  padding-block: .55rem;
  padding-inline: var(--gutter);
}
[dir="rtl"] .topstrip { letter-spacing: 0; font-size: .85rem; }

.setup-warning {
  background: var(--confetti-yellow);
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
  text-align: center;
  padding: .6rem var(--gutter);
}

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: rgba(242, 220, 202, .88);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.header.is-stuck {
  border-block-end-color: rgba(0,0,0,.08);
  box-shadow: 0 6px 24px rgba(90,40,10,.07);
}
.header:not(.is-stuck) .header-inner { block-size: 108px; }
.header:not(.is-stuck) .logo img     { block-size: 78px; }
/* Snapped to the compact size with no animation, so an anchor jump from the
   top of the page measures its target against the settled layout. */
.header.is-snapping .header-inner,
.header.is-snapping .logo img { transition: none; }

.header-inner {
  block-size: var(--header-h);
  transition: block-size var(--dur) var(--ease);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

/* --- logo ----------------------------------------------------------------
   Brand law: the mark is never redrawn. Drop the official file at
   assets/img/logo-trade.png and it replaces the text wordmark automatically. */
.logo { display: flex; align-items: center; text-decoration: none; flex: none; }
.logo img {
  block-size: var(--logo-h);
  inline-size: auto;
  transition: block-size var(--dur) var(--ease);
}
.logo-fallback { display: flex; flex-direction: column; line-height: .95; }
.logo-fallback .en {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 1.6rem;
  color: var(--crimson);
  letter-spacing: -.01em;
}
.logo-fallback .ar { font-family: var(--font-body); font-weight: 700; font-size: .82rem; color: var(--crimson); }

.nav { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.5rem); margin-inline-start: auto; }
.nav-links { display: flex; align-items: center; gap: clamp(.4rem, 1.4vw, 1.35rem); }
.nav-links a {
  text-decoration: none;
  font-weight: 500;
  font-size: .93rem;
  padding: .45rem .2rem;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  inset-inline: .2rem;
  inset-block-end: .1rem;
  block-size: 2px;
  background: var(--crimson);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--crimson); }
.nav-links a:hover::after { transform: scaleX(1); }

.lang-btn {
  font-weight: 700;
  font-size: .85rem;
  padding: .5rem .85rem;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--ink-15);
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  flex: none;
}
.lang-btn:hover { box-shadow: inset 0 0 0 1.5px var(--crimson); color: var(--crimson); }

/* enquiry pill in the header */
.enq-btn { position: relative; }
.enq-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.4rem;
  block-size: 1.4rem;
  padding-inline: .35rem;
  border-radius: var(--r-pill);
  background: var(--cream-lift);
  color: var(--crimson);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
}
.enq-btn.is-bumped { animation: bump .4s var(--ease); }
@keyframes bump {
  0%,100% { transform: scale(1); }
  35%     { transform: scale(1.11); }
}

.menu-btn { display: none; padding: .5rem; border-radius: var(--r-sm); }
.menu-btn svg { inline-size: 26px; block-size: 26px; }

/* --- account control + signed-in bar --------------------------------------- */
.acct-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border-radius: var(--r-pill);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 0 0 1.5px var(--ink-15);
  transition: box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
  flex: none;
  white-space: nowrap;
}
.acct-btn:hover { box-shadow: inset 0 0 0 1.5px var(--crimson); color: var(--crimson); }
.acct-btn svg { inline-size: 1.05em; block-size: 1.05em; }

.acct-bar {
  background: var(--ink);
  color: var(--cream-lift);
  font-size: .82rem;
  padding-block: .5rem;
}
.acct-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.acct-bar button {
  color: var(--cream-lift);
  text-decoration: underline;
  font-size: .82rem;
  font-weight: 700;
}
.acct-bar button:hover { color: var(--confetti-yellow); }

@media (max-width: 860px) { .acct-btn .label { display: none; } }

/* ============================================================================
   HERO — walk the counter
   ----------------------------------------------------------------------------
   The section is a tall scroll runway. Inside it, .hero-stage pins to the
   viewport while app.js maps scroll progress to a horizontal pan across the
   photograph — like walking along the display counter. The translucent
   header floats on top, so the image runs edge to edge.

   The pan uses PHYSICAL left/top on purpose: it happens in image space and
   must not flip in RTL — the photograph reads left to right in both
   languages.
   ========================================================================== */
.hero { position: relative; block-size: 370vh; }

.hero-stage {
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  block-size: 100svh;
  overflow: hidden;
  background: var(--cream-deep);
}

.hero-track {
  position: absolute;
  top: 0;
  left: 0;
  block-size: 100%;
  /* Natural width at full height would be height × 1.79 (the photo is
     4096 × 2286); × ~1.5 zooms in so the opening frame holds only the left
     end of the counter and there is a real distance to walk. The 170vw
     floor keeps a pan even on very wide screens. */
  inline-size: max(265vh, 170vw);
  will-change: transform;
}
.hero-track > img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Crop biased below centre: trims empty wall at the top and keeps the
     cookies — the lowest product on the counter — fully in frame. */
  object-position: 50% 55%;
  display: block;
}

/* This box matches exactly where the cover-fitted photo renders, so tag
   positions are plain photo coordinates in %. The 55% offsets mirror the
   img object-position above — change them together. */
.hero-tags {
  position: absolute;
  left: 0;
  top: 55%;
  transform: translateY(-55%);
  inline-size: 100%;
  aspect-ratio: 4096 / 2286;
}

.hero-tag {
  position: absolute;
  transform: translate(-50%, -50%) scale(.88) translateY(10px);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .5em 1.1em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cream-lift) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-md);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.85rem, .75rem + .5vw, 1.05rem);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              visibility 0s .45s, background-color var(--dur) var(--ease);
}
.hero-tag::before {
  content: '';
  inline-size: .55em;
  block-size: .55em;
  border-radius: 50%;
  background: var(--crimson);
  flex: none;
}
.hero-tag.is-on {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1) translateY(0);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              visibility 0s, background-color var(--dur) var(--ease);
}
.hero-tag:hover { background: var(--cream-lift); box-shadow: var(--shadow-lg); }

/* --- copy card: floats on the empty wall, fades as the walk begins -------- */
.hero-copy {
  position: absolute;
  z-index: 3;
  inset-block-start: calc(var(--header-h) + clamp(.75rem, 4vh, 2.75rem));
  inset-inline-start: max(var(--gutter), (100vw - var(--page)) / 2);
  max-inline-size: min(52rem, calc(100vw - var(--gutter) * 2));
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--cream-lift) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-md);
}
.hero-copy.is-gone { pointer-events: none; }
.hero-copy h1 { margin-block-end: .5rem; }

.hero-script {
  font-family: var(--font-hero-script);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
  color: var(--crimson);
  text-transform: lowercase;
  line-height: 1;
  margin-block-end: 1.6rem;
  display: block;
}

.hero-copy .lede { margin-block-end: 2.1rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-block-end: 1.9rem; }

.hero-note {
  font-size: .93rem;
  color: var(--ink-70);
  max-inline-size: 46ch;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--beige);
}

/* --- end-of-walk handoff: appears once the cookies are in frame ----------- */
.hero-end {
  position: absolute;
  z-index: 3;
  inset-block-end: clamp(1.2rem, 5vh, 2.6rem);
  inset-inline-end: max(var(--gutter), (100vw - var(--page)) / 2);
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  transition: opacity .45s var(--ease), translate .45s var(--ease), visibility 0s .45s;
}
.hero-end.is-on {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity .45s var(--ease), translate .45s var(--ease), visibility 0s;
}

/* --- scroll hint: visible only before the walk starts --------------------- */
.hero-hint {
  position: absolute;
  z-index: 3;
  inset-block-end: clamp(1rem, 4vh, 2.2rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45em 1em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cream-lift) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-70);
  white-space: nowrap;
  transition: opacity .4s var(--ease);
}
.hero-hint svg {
  inline-size: 1em;
  block-size: 1em;
  rotate: 90deg;               /* the arrow sprite points right; aim it down */
  animation: hint-nudge 1.8s var(--ease) infinite;
}
.hero-hint.is-off { opacity: 0; }
@keyframes hint-nudge {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 4px; }
}

/* ============================================================================
   STATS BAR
   ========================================================================== */
.stats {
  background: var(--cream-lift);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 2;
}
.stat { text-align: center; }
.stat + .stat { border-inline-start: 1px solid var(--ink-15); }
.stat .v {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
  color: var(--crimson);
  line-height: 1;
  display: block;
}
.stat .l {
  font-size: .84rem;
  color: var(--ink-70);
  margin-block-start: .45rem;
  display: block;
  line-height: 1.35;
}

/* ============================================================================
   SEGMENTS
   ========================================================================== */
.seg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}
@media (min-width: 880px) { .seg-grid { grid-template-columns: repeat(3, 1fr); } }
.seg-card {
  background: var(--cream-lift);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.seg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.seg-icon {
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--r-md);
  background: var(--crimson-soft);
  color: var(--crimson);
  display: grid;
  place-items: center;
  margin-block-end: 1.15rem;
}
.seg-icon svg { inline-size: 26px; block-size: 26px; }
.seg-card h3 { margin-block-end: .5rem; }
.seg-card p { color: var(--ink-70); font-size: .95rem; }

/* Client logos inside each segment card — transparent artwork on the cream
   card, so no plates or boxes behind them. */
.seg-clients {
  /* Slot size lives here so the li box and the image box can never drift.
     Height must be a length, not a percentage: a % block-size on the image does
     not resolve against a centred grid area, and silently falls back to auto. */
  --client-h: 54px;
  --client-w: 144px;
  /* Centred flex rather than a 2-up grid: with a grid each logo centres inside
     its own half, so a wide mark beside a narrow one makes the pair read as
     off-centre under the rule. Centring the group fixes that optically. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .85rem 1.15rem;
  margin-block-start: 1.25rem;
  /* Kill the UA list indent: the rule above is this element's border, so any
     inline padding shifts the logos off-centre against it. */
  padding-inline: 0;
  padding-block-start: 1.15rem;
  border-block-start: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  list-style: none;
  margin-inline: 0;
}
.seg-clients li {
  display: grid;
  place-items: center;
  /* Uniform slot: every mark gets the same optical allowance, and the box is
     laid out before the image loads so lazy-loading still fires. */
  inline-size: var(--client-w);
  block-size: var(--client-h);
}
.seg-clients img {
  inline-size: 100%;
  block-size: var(--client-h);
  object-fit: contain;
  object-position: center;
  opacity: .78;
  filter: saturate(.9);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.seg-card:hover .seg-clients img { opacity: 1; filter: saturate(1); }

@media (prefers-reduced-motion: reduce) {
  .seg-clients img { transition: none; }
}

/* ============================================================================
   CATALOGUE
   ========================================================================== */
.catalogue { background: transparent; }

.demo-banner {
  background: var(--confetti-yellow);
  color: var(--ink);
  font-weight: 700;
  font-size: .85rem;
  text-align: center;
  padding: .75rem 1rem;
  border-radius: var(--r-pill);
  margin-block-end: 1.75rem;
}

/* --- filter bar (sticky under the header) --- */
.filters {
  position: sticky;
  inset-block-start: var(--header-h);
  z-index: 40;
  background: var(--cream-lift);
  padding-block: 1rem;
  margin-block-end: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  border-block-end: 1px solid var(--ink-15);
}

.chips { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1 1 auto; }
.chip {
  padding: .5rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: .89rem;
  font-weight: 500;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--ink-15);
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--crimson); color: var(--crimson); }
.chip.is-active {
  background: var(--crimson);
  color: var(--cream-lift);
  box-shadow: none;
  font-weight: 700;
}
.chip .n { opacity: .6; font-size: .82em; margin-inline-start: .35rem; }

.search {
  position: relative;
  flex: 0 1 280px;
  min-inline-size: 200px;
}
.search input {
  inline-size: 100%;
  padding: .68rem 1rem;
  padding-inline-start: 2.6rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--cream);
  font-size: .92rem;
  transition: box-shadow var(--dur) var(--ease);
}
.search input::placeholder { color: var(--ink-45); }
.search input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--crimson); }
.search svg {
  position: absolute;
  inset-inline-start: .95rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 18px;
  block-size: 18px;
  color: var(--ink-45);
  pointer-events: none;
}

.result-count { font-size: .87rem; color: var(--ink-45); margin-block-end: 1.25rem; }

/* --- product grid --- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 1.6vw, 1.75rem);
}

.card {
  background: var(--cream);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  animation: cardIn .45s var(--ease) both;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-media {
  position: relative;
  aspect-ratio: 1;
  background: var(--cream-deep);
  overflow: hidden;
  border: 0;
  padding: 0;
  inline-size: 100%;
  display: block;
  cursor: zoom-in;
}
.card-media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: var(--img-fit, cover);
  transition: transform .55s var(--ease);
}
/* Cut-outs get breathing room so the product floats rather than fills. */
[data-fit="contain"] .card-media       { background: transparent; }
[data-fit="contain"] .card-media img   { padding: 9%; }
[data-fit="contain"] .lb-media         { background: var(--cream-lift); }
[data-fit="contain"] .lb-media img     { padding: 7%; }
[data-fit="contain"] .enq-thumb        { object-fit: contain; padding: 5%; background: var(--cream-lift); }
.card:hover .card-media img { transform: scale(1.055); }

/* graceful placeholder when an image is missing or still loading */
.card-media.is-empty::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, var(--beige) 0 22%, transparent 22.5%),
    var(--cream-deep);
  opacity: .55;
}

.card-body { padding: 1.05rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.card-cat {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--crimson);
}
[dir="rtl"] .card-cat { letter-spacing: 0; font-size: .8rem; }
.card-name { font-family: var(--font-display); font-size: 1.06rem; line-height: 1.2; letter-spacing: -.01em; }
[dir="rtl"] .card-name { letter-spacing: 0; line-height: 1.45; }
.card-spec { font-size: .84rem; color: var(--ink-45); display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.card-spec span:not(:last-child)::after { content: '·'; margin-inline-start: .5rem; opacity: .5; }

.card-actions { margin-block-start: auto; padding-block-start: .85rem; display: flex; gap: .5rem; }

.add-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .6rem .8rem;
  border-radius: var(--r-pill);
  font-size: .86rem;
  font-weight: 700;
  background: var(--crimson);
  color: var(--cream-lift);
  transition: all var(--dur) var(--ease);
}
.add-btn:hover { background: var(--crimson-deep); }
.add-btn svg { inline-size: 15px; block-size: 15px; flex: none; }
.add-btn.is-added { background: var(--confetti-turq); color: var(--ink); }

.detail-btn {
  flex: none;
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1.5px var(--ink-15);
  transition: all var(--dur) var(--ease);
}
.detail-btn:hover { box-shadow: inset 0 0 0 1.5px var(--crimson); color: var(--crimson); }
.detail-btn svg { inline-size: 17px; block-size: 17px; }
/* With the enquiry list switched off, the detail button is the only action
   left, so it stops being a square icon and takes the whole row. */
.detail-btn.is-wide { inline-size: 100%; flex: 1; }

.add-btn:disabled { background: var(--ink-15); color: var(--ink-45); cursor: not-allowed; }
.add-btn:disabled:hover { background: var(--ink-15); }

/* --- product badge — set per product in the admin ----------------------- */
.card-badge {
  position: absolute;
  inset-block-start: .7rem;
  inset-inline-start: .7rem;
  z-index: 2;
  padding: .3rem .7rem;
  border-radius: var(--r-pill);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--confetti-yellow);
  color: var(--ink);
  box-shadow: 0 2px 10px rgba(0,0,0,.14);
}
[dir="rtl"] .card-badge { letter-spacing: 0; }
.card-badge.is-out  { background: var(--ink); color: var(--cream-lift); }
.card-badge.is-made { background: var(--confetti-blue); color: var(--ink); }
.card.is-out .card-media img { opacity: .55; filter: grayscale(.35); }

/* In the detail panel the badge sits inline beside the category, so it needs
   no corner placement of its own. */
.lb-eyebrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.lb-eyebrow .card-badge { position: static; box-shadow: none; }

/* --- empty states --- */
.empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) 1.5rem;
  background: var(--cream);
  border-radius: var(--r-lg);
  border: 2px dashed var(--beige);
}
.empty h3 { margin-block-end: .6rem; color: var(--crimson); }
.empty p { color: var(--ink-70); max-inline-size: 52ch; margin-inline: auto; margin-block-end: 1.4rem; }
.empty code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .88em;
  background: var(--cream-deep);
  padding: .12em .45em;
  border-radius: 5px;
}

/* --- prices ---------------------------------------------------------------- */
.card-price, .lb-price, .enq-price {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.2;
}
.card-price { font-size: 1.02rem; margin-block-start: .15rem; }
.lb-price   { font-size: 1.5rem; margin-block-end: 1.4rem; }
.enq-price  { font-size: .86rem; font-family: var(--font-body); font-weight: 700; }

.card-price s, .lb-price s, .enq-price s {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .78em;
  color: var(--ink-45);
  text-decoration-thickness: 1px;
}
.card-price.is-contract .amt,
.lb-price.is-contract .amt,
.enq-price.is-contract .amt { color: var(--crimson); }

.card-price.is-request, .lb-price.is-request, .enq-price.is-request {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: .84rem;
  color: var(--ink-45);
}
.lb-price.is-request { font-size: 1rem; }

.lb-perpiece {
  font-size: .92rem;
  color: var(--ink-70);
  margin-block-start: -1rem;
  margin-block-end: 1.4rem;
}

.enq-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-block-start: 1.1rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--ink-15);
}
.enq-total span { font-weight: 700; font-size: .95rem; }
.enq-total b {
  font-family: var(--font-display);
  font-size: 1.35rem;
  margin-inline-start: auto;
  color: var(--crimson);
}
.enq-total small { inline-size: 100%; font-size: .76rem; color: var(--ink-45); }
.enq-total.is-partial { display: block; font-size: .82rem; color: var(--ink-45); }

/* ============================================================================
   ORDERING TERMS
   ========================================================================== */
.terms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr));
  gap: clamp(1rem, 2vw, 1.4rem);
}
.term {
  background: var(--cream-lift);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.5vw, 1.9rem);
  box-shadow: var(--shadow-sm);
}
.term-icon { color: var(--crimson); margin-block-end: 1rem; }
.term-icon svg { inline-size: 28px; block-size: 28px; }
.term .v { font-family: var(--font-display); font-size: clamp(1.35rem, 1.15rem + .85vw, 1.8rem); line-height: 1.05; display: block; }
.term .l { font-weight: 700; font-size: .95rem; color: var(--crimson); margin-block: .35rem .5rem; display: block; }
.term .n { font-size: .88rem; color: var(--ink-70); }

/* ============================================================================
   CUSTOM / PRIVATE LABEL — the one full crimson surface on the page
   ========================================================================== */
.custom {
  background: var(--crimson);
  color: var(--cream-lift);
  border-radius: var(--r-xl);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
  margin-block: var(--section);
  scroll-margin-block-start: calc(-1 * clamp(2.5rem, 6vw, 4.5rem));
}
.custom h2 { margin-block-end: 1.1rem; }
.custom .lede { color: rgba(251, 242, 233, .88); }

.custom-inner { position: relative; z-index: 2; }
.custom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin-block: clamp(2.25rem, 5vw, 3.25rem);
}
.custom-point h3 { font-size: 1.12rem; margin-block-end: .45rem; }
.custom-point p { font-size: .94rem; color: rgba(251, 242, 233, .82); }
.custom-point .dot {
  inline-size: 12px;
  block-size: 12px;
  border-radius: 50%;      /* circles, like every other brand dot */
  display: block;
  margin-block-end: 1rem;
}
.custom-point:nth-child(1) .dot { background: var(--confetti-blue); }
.custom-point:nth-child(2) .dot { background: var(--confetti-turq); }
.custom-point:nth-child(3) .dot { background: var(--confetti-yellow); }

/* ============================================================================
   HOW IT WORKS
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step { position: relative; padding-block-start: 1.6rem; border-block-start: 3px solid var(--beige); }
.step .n {
  font-family: var(--font-display);
  font-size: 2.4rem;
  color: var(--crimson);
  line-height: 1;
  display: block;
  margin-block-end: .7rem;
}
.step h3 { margin-block-end: .45rem; }
.step p { color: var(--ink-70); font-size: .95rem; }

/* ============================================================================
   CONTACT + FOOTER
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-list { display: grid; gap: 1.1rem; }
.contact-item { display: flex; flex-direction: column; gap: .1rem; }
.contact-item dt { font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-45); }
[dir="rtl"] .contact-item dt { letter-spacing: 0; font-size: .85rem; }
.contact-item dd { font-size: 1.06rem; font-weight: 500; margin: 0; }
.contact-item a { text-decoration: none; transition: color var(--dur) var(--ease); }
.contact-item a:hover { color: var(--crimson); }

.contact-cta {
  background: var(--cream-lift);
  border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.contact-cta .script { font-size: 2.2rem; color: var(--crimson); display: block; margin-block-end: 1.25rem; }

.footer {
  background: var(--crimson);
  color: var(--cream-lift);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  margin-block-start: var(--section);
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: space-between; }
.footer .script { font-size: 2rem; }
.footer-meta { font-size: .86rem; color: rgba(251,242,233,.8); text-align: end; max-inline-size: 48ch; }
.footer-meta p + p { margin-block-start: .3rem; }

/* ============================================================================
   ENQUIRY DRAWER
   ========================================================================== */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
  z-index: 90;
}
.scrim.is-open { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(100%, 400px);
  background: var(--cream);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transform: translateX(102%);
  transition: transform .36s var(--ease);
  box-shadow: var(--shadow-lg);
}
[dir="rtl"] .drawer { transform: translateX(-102%); }
.drawer.is-open { transform: translateX(0); }

.drawer-head {
  padding: 1.4rem 1.5rem 1.15rem;
  border-block-end: 1px solid var(--ink-15);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex: none;
}
.drawer-head h2 { font-size: 1.35rem; margin-block-end: .25rem; }
.drawer-head p { font-size: .87rem; color: var(--ink-70); }
.drawer-close {
  flex: none;
  inline-size: 38px;
  block-size: 38px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  margin-inline-start: auto;
  transition: background var(--dur) var(--ease);
}
.drawer-close:hover { background: var(--cream-deep); }
.drawer-close svg { inline-size: 20px; block-size: 20px; }

.drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; overscroll-behavior: contain; }

.enq-item {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: .85rem;
  align-items: center;
  padding-block: .9rem;
}
.enq-item + .enq-item { border-block-start: 1px solid var(--ink-15); }
.enq-thumb {
  inline-size: 62px;
  block-size: 62px;
  border-radius: var(--r-sm);
  object-fit: cover;
  background: var(--cream-deep);
}
.enq-info { min-inline-size: 0; }
.enq-info .n { font-weight: 700; font-size: .93rem; line-height: 1.25; }
.enq-info .c { font-size: .77rem; color: var(--ink-45); }
.enq-info button {
  font-size: .77rem;
  color: var(--ink-45);
  text-decoration: underline;
  margin-block-start: .25rem;
  transition: color var(--dur) var(--ease);
}
.enq-info button:hover { color: var(--crimson); }

.qty { display: flex; align-items: center; gap: .2rem; background: var(--cream-lift); border-radius: var(--r-pill); padding: .2rem; }
.qty button {
  inline-size: 27px;
  block-size: 27px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  transition: background var(--dur) var(--ease);
}
.qty button:hover { background: var(--cream-deep); }
.qty .v { min-inline-size: 1.8rem; text-align: center; font-weight: 700; font-size: .9rem; font-variant-numeric: tabular-nums; }

.drawer-form { margin-block-start: 1.75rem; padding-block-start: 1.5rem; border-block-start: 1px solid var(--ink-15); }
.drawer-form h3 { font-size: 1.05rem; margin-block-end: .2rem; }
.drawer-form .hint { font-size: .8rem; color: var(--ink-45); margin-block-end: 1.1rem; }

.field { margin-block-end: .9rem; }
.field label { display: block; font-size: .8rem; font-weight: 700; margin-block-end: .35rem; }
.field input, .field select, .field textarea {
  inline-size: 100%;
  padding: .68rem .9rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--cream-lift);
  font-size: .92rem;
  transition: box-shadow var(--dur) var(--ease);
}
.field textarea { resize: vertical; min-block-size: 76px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--crimson); }

.drawer-foot {
  flex: none;
  padding: 1.15rem 1.5rem calc(1.15rem + env(safe-area-inset-bottom));
  border-block-start: 1px solid var(--ink-15);
  background: var(--cream-lift);
}
.drawer-foot .sendnote { font-size: .78rem; color: var(--ink-45); text-align: center; margin-block-start: .7rem; }
.drawer-foot .clear { display: block; margin-inline: auto; margin-block-start: .6rem; font-size: .8rem; color: var(--ink-45); text-decoration: underline; }
.drawer-foot .clear:hover { color: var(--crimson); }

.drawer-empty { text-align: center; padding-block: 3.5rem; }
.drawer-empty svg { inline-size: 52px; block-size: 52px; color: var(--beige); margin-inline: auto; margin-block-end: 1.1rem; }
.drawer-empty h3 { margin-block-end: .4rem; }
.drawer-empty p { font-size: .9rem; color: var(--ink-70); margin-block-end: 1.4rem; }

/* ============================================================================
   PRODUCT DETAIL LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lb-panel {
  background: var(--cream);
  border-radius: var(--r-xl);
  inline-size: min(100%, 880px);
  max-block-size: min(92vh, 720px);
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  transform: scale(.95) translateY(12px);
  transition: transform .32s var(--ease);
  position: relative;
}
.lightbox.is-open .lb-panel { transform: scale(1) translateY(0); }

.lb-media { background: var(--cream-deep); position: relative; min-block-size: 280px; }
.lb-panel.is-noimg { grid-template-columns: 1fr; inline-size: min(100%, 520px); }
.lb-panel.is-noimg .lb-media { display: none; }
.lb-media img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: var(--img-fit, cover); }

.lb-content { padding: clamp(1.75rem, 3.5vw, 2.6rem); overflow-y: auto; display: flex; flex-direction: column; }
.lb-content .lb-eyebrow { margin-block-end: .5rem; }
.lb-content h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.05rem); margin-block-end: .75rem; }

.lb-specs { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-end: 1.4rem; }
.lb-specs span {
  font-size: .8rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: var(--r-pill);
  background: var(--crimson-soft);
  color: var(--crimson);
}
.lb-desc { font-size: .96rem; color: var(--ink-70); margin-block-end: 1.75rem; }
.lb-actions { margin-block-start: auto; display: flex; align-items: center; gap: .75rem; }
.lb-actions .qty { background: var(--cream-lift); }

.lb-close {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-end: 1rem;
  inline-size: 40px;
  block-size: 40px;
  border-radius: var(--r-pill);
  background: var(--cream);
  display: grid;
  place-items: center;
  z-index: 3;
  box-shadow: var(--shadow-sm);
  transition: background var(--dur) var(--ease);
}
.lb-close:hover { background: var(--cream-deep); }
.lb-close svg { inline-size: 20px; block-size: 20px; }

/* ============================================================================
   TOAST
   ========================================================================== */
.toast {
  position: fixed;
  inset-block-end: 1.5rem;
  inset-inline-start: 50%;
  transform: translate(-50%, 130%);
  background: var(--ink);
  color: var(--cream-lift);
  padding: .8rem 1.4rem;
  border-radius: var(--r-pill);
  font-size: .9rem;
  font-weight: 500;
  z-index: 120;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transition: transform .38s var(--ease), opacity .28s var(--ease), visibility .38s;
  pointer-events: none;
  max-inline-size: calc(100% - 2rem);
  text-align: center;
}
.toast.is-open { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .stat:nth-child(3) { border-inline-start: 0; }
  .stat + .stat { border-inline-start: 1px solid var(--ink-15); }
  .stat:nth-child(odd) { border-inline-start: 0; }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: grid; }
  .nav-links.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    background: var(--cream-lift);
    padding: 1rem var(--gutter) 1.5rem;
    box-shadow: var(--shadow-md);
    gap: 0;
  }
  .nav-links.is-open a { padding-block: .85rem; border-block-end: 1px solid var(--ink-15); font-size: 1.05rem; }
  .nav-links.is-open a::after { display: none; }
  .lb-panel { grid-template-columns: 1fr; max-block-size: 90vh; }
  .lb-media { min-block-size: 200px; max-block-size: 38vh; }
  .header-inner { gap: .75rem; }
  .enq-btn .label { display: none; }
}

@media (max-width: 560px) {
  :root { --header-h: 62px; --logo-h: 42px; }
  .header:not(.is-stuck) .header-inner { block-size: 78px; }
  .header:not(.is-stuck) .logo img     { block-size: 56px; }
  .topstrip { font-size: .7rem; }
  .filters { gap: .75rem; }
  .search { flex: 1 1 100%; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 158px), 1fr)); gap: .85rem; }
  .card-body { padding: .85rem .9rem 1rem; }
  .card-name { font-size: .95rem; }
  .detail-btn { display: none; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: start; }
  .stats { grid-template-columns: 1fr 1fr; }
  .custom { border-radius: var(--r-lg); }
}

/* ============================================================================
   MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* No pinned walk: one static full-bleed screen, then the page scrolls on.
     app.js skips the pan wiring under the same media query. */
  .hero { block-size: auto; }
  .hero-stage { position: relative; }
  .hero-track { inline-size: 100%; }
  .hero-tags, .hero-hint { display: none; }
  .hero-end { opacity: 1; visibility: visible; translate: 0 0; }
}

@media print {
  .header, .topstrip, .filters, .drawer, .scrim, .lightbox, .card-actions, .hero-actions { display: none !important; }
  .hero { block-size: auto; }
  .hero-stage { position: static; block-size: auto; }
  .hero-copy { position: static; max-inline-size: none; box-shadow: none; }
  .hero-track, .hero-hint, .hero-end { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
}

/* --- packaging options, inside the crimson panel --------------------------- */
.pack-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.1rem, 2.5vw, 2rem);
  margin-block: clamp(2rem, 4vw, 2.75rem);
}
.pack-option { margin: 0; display: none; }
/* Hidden until its photo has actually decoded. The previous version showed the
   figure and hid it on error, which made an empty box flash on every load
   while the missing file 404'd. */
.pack-option.is-ready { display: block; }

.pack-shot {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-lift);
  aspect-ratio: 4 / 3;
  margin-block-end: 1.1rem;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
}
.pack-shot img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}
.pack-option:hover .pack-shot img { transform: scale(1.04); }

.pack-option figcaption h3 {
  font-size: 1.12rem;
  color: var(--cream-lift);
  margin-block-end: .4rem;
}
.pack-option figcaption p {
  font-size: .94rem;
  color: rgba(251, 242, 233, .82);
  max-inline-size: 44ch;
}