/* ═══════════════════════════════════════════════════════════════════
   NOKSHALO — design system
   ---------------------------------------------------------------------
   The palette is taken from the brand logo: deep maroon and gold on a
   warm cream page. Everything below is driven by CSS custom properties,
   and the three brand colours are replaced at runtime from the CRM, so
   the whole site re-skins without a deploy.

     --brand   #6c0114   maroon   headings, footer, solid panels, CTAs
     --accent  #b57a1b   gold     highlights, badges, small marks
     --cream   #f9f6f0   page background

   Contrast note: gold is a light colour, so text on gold must be dark
   maroon, never white (white on gold is only 1.9:1).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand — replaced at runtime from the CRM */
  --brand: #6c0114;
  --brand-deep: #4a000b;
  --brand-soft: #8d1f30;
  --accent: #b57a1b;
  --accent-light: #e0a94e;
  --accent-pale: #f0dcb4;
  /* Text that sits on a gold fill. White on gold is only 1.9:1, so this must
     stay dark: #2e0710 gives 4.9:1 against #b57a1b. */
  --on-accent: #2e0710;

  /* Surfaces */
  --cream: #f9f6f0;
  --surface: #fdfbf8;
  --surface-2: #f4eee6;
  --surface-3: #ebe2d6;
  --line: #e7ddd2;
  --line-strong: #d8c9b8;

  /* Ink. The mid and muted tones are deliberately darker than a typical
     designer's palette: this has to stay readable on a phone in daylight. */
  --ink: #221015;
  --ink-2: #4a3a40;
  --ink-3: #6f5d63;

  /* Feedback */
  --ok: #2f6f4f;
  --ok-bg: #eaf3ed;
  --warn: #8a6318;
  --warn-bg: #f9f1df;
  --err: #8e2233;
  --err-bg: #f9eaed;

  --sans: 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  /* For anything the visitor types - search, checkout, chat. Inter covers the
     Latin, Hind Siliguri covers the Bangla, so a mixed-script field never
     falls back to an arbitrary system face. */
  --ui: 'Inter', 'Hind Siliguri', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  /* The hero's display face: an elegant high-contrast serif, used only for the
     banner headline and the brand lockup on the banner panel. Everything else
     keeps --serif, so the rest of the site is unchanged. */
  --display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  /* Bangla needs its own stack: the Latin faces have no Bengali glyphs, so the
     browser would fall back to something unshaped and hard to read. Hind Siliguri
     is the standard web face for Bangla; the rest are device fallbacks. */
  --bn: 'Hind Siliguri', 'Noto Sans Bengali', 'Nirmala UI', 'Vrinda', 'SolaimanLipi', sans-serif;

  --r-xs: 4px;
  --r-sm: 7px;
  --r: 12px;
  --r-lg: 18px;
  --r-xl: 26px;

  --shadow-1: 0 1px 2px rgba(42, 18, 24, .05);
  --shadow-2: 0 8px 24px -12px rgba(42, 18, 24, .18);
  --shadow-3: 0 24px 60px -26px rgba(42, 18, 24, .34);
  --shadow-brand: 0 14px 34px -16px rgba(108, 1, 20, .42);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1220px;
  --h-sec: 21px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.68;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.22; }
p { margin: 0; }
ul { margin: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent-pale); color: var(--brand-deep); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--brand); color: #fff; padding: 10px 16px; }
.skip-link:focus { left: 0; }

/* ─── Type ─── */
.display { font-family: var(--serif); }
.h1 { font-family: var(--serif); font-size: clamp(30px, 4.6vw, 54px); font-weight: 400; letter-spacing: -.015em; line-height: 1.08; color: var(--brand); }
.h2 { font-size: var(--h-sec); font-weight: 500; color: var(--brand); }
.h3 { font-size: 17px; font-weight: 500; color: var(--brand); }
.lead { font-size: 16.5px; color: var(--ink-2); line-height: 1.75; }
.muted { color: var(--ink-3); }
.tiny { font-size: 12.5px; }
.eyebrow {
  font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
/* A short gold rule used above section headings. */
.eyebrow::before {
  content: ''; display: inline-block; width: 18px; height: 1.5px; margin-right: 9px;
  background: var(--accent); vertical-align: middle;
}

/* ─── Buttons ─── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 24px; border-radius: var(--r-xs); border: 1px solid transparent;
  font-size: 14.5px; font-weight: 500; letter-spacing: .015em; line-height: 1;
  transition: background .2s var(--ease), color .2s, border-color .2s, box-shadow .25s var(--ease), transform .18s var(--ease);
  white-space: nowrap;
}
/* Icons inside a button. Without this rule an inline <svg viewBox> with no
   width/height falls back to 300x150 and inflates the button. */
.btn svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn-primary:hover { background: var(--brand-deep); }
.btn-gold { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-gold:hover { background: var(--accent-light); }
.btn-outline { background: transparent; color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--brand); color: #fff; }
.btn-quiet { background: var(--surface-2); color: var(--brand); }
.btn-quiet:hover { background: var(--surface-3); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink-3); }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 32px; font-size: 15px; }
.btn-sm { padding: 8px 15px; font-size: 13px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }

.icon-btn {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--ink); transition: background .18s, color .18s; position: relative;
}
.icon-btn:hover { background: var(--surface-2); color: var(--brand); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Announcement ─── */
.announce {
  background: var(--brand); color: rgba(255,255,255,.94);
  text-align: center; font-size: 13.5px; letter-spacing: .025em; padding: 9px 18px;
}
.announce b, .announce strong { color: var(--accent-light); }
.announce[hidden] { display: none; }

/* ─── Header ─── */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: var(--cream);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s, background .3s;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .hdr { background: color-mix(in srgb, var(--cream) 92%, transparent); }
}
.hdr.stuck { box-shadow: 0 1px 20px rgba(42,18,24,.08); border-bottom-color: var(--line); }
.hdr-in { display: flex; align-items: center; gap: 14px; height: 64px; transition: height .3s var(--ease); }
.hdr.stuck .hdr-in { height: 58px; }

.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; overflow: hidden;
  background: var(--brand); color: var(--accent-pale);
  font-family: var(--serif); font-size: 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
/* When a real logo is present the letter mark steps aside. */
.brand.has-logo .brand-mark { display: none; }
/* The logo itself, shown instead of a letter mark when one is uploaded. */
.brand-logo { width: 38px; height: 38px; object-fit: contain; transition: width .3s var(--ease), height .3s var(--ease); }
.hdr.stuck .brand-logo { width: 34px; height: 34px; }
.brand-logo-light { display: none; }
.brand-name { font-family: var(--serif); font-size: 21px; letter-spacing: .015em; color: var(--brand); }
.brand-lg .brand-mark { width: 44px; height: 44px; font-size: 22px; }
.brand-lg .brand-logo { width: 58px; height: 58px; }
.brand-lg .brand-name { font-size: 26px; }
/* The wordmark speaks in the same high-contrast serif as the hero headline, so
   the logo and the banner share one voice. Scoped to .brand so the drawer's own
   "Menu" heading, which also carries .brand-name, keeps the plainer serif.
   Cormorant is delicate, so it needs a bigger size and a touch more weight than
   the old face to hold the same visual presence. */
.brand .brand-name { font-family: var(--display); font-size: 27px; font-weight: 500; letter-spacing: .035em; }
.brand-lg .brand-name { font-size: 34px; }

.hdr-nav { display: none; gap: 2px; margin-left: 26px; }
.hdr-nav a {
  position: relative; padding: 9px 14px; font-size: 14px; color: var(--ink-2); transition: color .18s;
}
.hdr-nav a::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.hdr-nav a:hover { color: var(--brand); }
.hdr-nav a:hover::after, .hdr-nav a.on::after { transform: scaleX(1); }
.hdr-nav a.on { color: var(--brand); }
.hdr-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.hdr-menu { width: 40px; height: 40px; display: grid; place-items: center; gap: 5px; padding: 11px 10px; }
.hdr-menu span { display: block; width: 18px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.hdr-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hdr-menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr-menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.cart-count {
  position: absolute; top: 2px; right: 1px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 100px;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 600;
  box-shadow: 0 0 0 2px var(--cream);
}
.cart-count[hidden] { display: none; }
.cart-count.bump { animation: bump .4s var(--ease); }
@keyframes bump { 40% { transform: scale(1.35); } }

.search-bar { border-top: 1px solid var(--line); background: var(--surface); }
.search-bar[hidden] { display: none; }
.search-in { display: flex; align-items: center; gap: 10px; padding: 13px 0; }
.search-in input {
  flex: 1; padding: 13px 16px; border: 1px solid var(--line-strong); background: #fff;
  font-size: 15px; border-radius: var(--r-xs); transition: border-color .18s, box-shadow .18s;
}
.search-in input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(108,1,20,.07); }

/* ─── Slide-over drawers (mobile nav + cart) ─── */
.scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(42,18,24,.44);
  backdrop-filter: blur(2px); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.scrim.on { opacity: 1; pointer-events: auto; }
[hidden].scrim { display: none; }

.panel {
  position: fixed; top: 0; bottom: 0; z-index: 95;
  width: min(88vw, 350px); background: var(--surface);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-3);
  /* Closed panels stay in the DOM so they can animate, but must not be
     reachable by tab or by click. */
  visibility: hidden; pointer-events: none;
  transition: transform .34s var(--ease-out), visibility 0s linear .34s;
}
.panel-left { left: 0; transform: translateX(-102%); }
.panel-right { right: 0; width: min(92vw, 400px); transform: translateX(102%); }
.panel.open {
  transform: translateX(0); visibility: visible; pointer-events: auto;
  transition: transform .34s var(--ease-out), visibility 0s;
}
.panel[hidden] { display: none; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.panel-head h3 { font-family: var(--serif); font-size: 18px; font-weight: 400; color: var(--brand); }
.panel-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.panel-foot { padding: 16px 18px; border-top: 1px solid var(--line); flex-shrink: 0; background: var(--surface); }

.drawer-nav { padding: 10px; }
.drawer-nav a { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; font-size: 15.5px; color: var(--ink-2); border-radius: var(--r-xs); }
.drawer-nav a:hover { background: var(--surface-2); color: var(--brand); }
.drawer-nav h5 { margin: 18px 14px 6px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.drawer-nav h5:first-child { margin-top: 6px; }
.drawer-foot { padding: 16px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); }

/* Cart drawer lines */
.cd-line { display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); align-items: start; }
.cd-img { width: 62px; height: 76px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.cd-img img { width: 100%; height: 100%; object-fit: cover; }
.cd-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--accent-pale); font-family: var(--serif); font-size: 20px; }
.cd-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cd-nm { font-size: 14.5px; line-height: 1.4; }
.cd-vr { font-size: 12.5px; color: var(--ink-3); }
.cd-price { font-size: 14.5px; font-weight: 500; color: var(--brand); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cd-qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-xs); margin-top: 5px; overflow: hidden; }
.cd-qty button { width: 28px; height: 28px; font-size: 15px; color: var(--ink-2); }
.cd-qty button:hover { background: var(--surface-2); color: var(--brand); }
.cd-qty span { min-width: 26px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.cd-remove { font-size: 11.5px; color: var(--ink-3); text-decoration: underline; margin-left: 10px; }
.cd-remove:hover { color: var(--err); }

/* Free-delivery progress */
.ship-bar { padding: 14px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ship-bar p { font-size: 12.5px; color: var(--ink-2); margin-bottom: 9px; }
.ship-bar b { color: var(--brand); }
.ship-track { height: 5px; border-radius: 100px; background: var(--surface-3); overflow: hidden; }
.ship-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--accent), var(--accent-light)); width: 0; transition: width .6s var(--ease-out); }
.ship-bar.done .ship-fill { background: linear-gradient(90deg, var(--ok), #4b9a72); }

/* ─── Hero ───
   A full-bleed banner: the photograph covers the whole band, edge to edge, and
   the copy sits on top of it. A maroon scrim runs from dense on the left, where
   the words are, to nearly clear on the right, so the picture stays the hero and
   the text stays readable whatever is behind it. */
.hero {
  position: relative; overflow: hidden; background: var(--brand-deep);
  border-bottom: 1px solid var(--line);
  display: grid; grid-template-rows: 1fr auto;
  min-height: clamp(430px, 80vh, 700px);
}
/* The photograph, or the brand gradient when the CRM has set no image. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--brand-deep); }
/* A soft, blurred copy of the same picture fills the band edge to edge. A tall
   portrait cannot cover a wide band without a hard zoom, so the fill is the
   blur: it reads as colour and depth, never as a cropped photograph. */
.hero-blur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.2);
  filter: blur(26px) saturate(1.05) brightness(.5);
}
/* The sharp copy stands whole on the right, unzoomed - the subject is seen from
   head to hem instead of being cropped into a close-up. Its side edges are
   feathered so the crisp picture melts into the blurred fill rather than
   sitting on it as a hard rectangle. */
.hero-subject {
  position: absolute; top: 0; right: 7%; height: 100%; width: auto; max-width: 52%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.hero-media-fallback {
  position: absolute; inset: 0;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 58%, #2c0007 100%);
}
/* The decorative bouquet, shown only on the gradient fallback. Faded to a
   watermark: it suggests ornament without competing with the words. */
.hero-floral {
  position: absolute; left: -40px; top: -60px;
  width: min(74vw, 540px); height: auto; color: var(--accent-light); opacity: .2;
}
/* Dense where the copy sits, opening up on the right so the photograph reads.
   A second pass darkens the base for the slide controls. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(30,0,6,.92) 0%, rgba(38,0,8,.76) 34%, rgba(52,4,14,.34) 64%, rgba(52,4,14,.06) 100%),
    linear-gradient(180deg, rgba(24,0,5,.40) 0%, transparent 24%, transparent 60%, rgba(20,0,4,.62) 100%);
}
.hero-in { position: relative; z-index: 2; align-self: center; width: 100%; padding: 34px 20px 10px; }
.hero-copy { max-width: 620px; position: relative; }
.hero .eyebrow { color: var(--accent-light); }
.hero .eyebrow::before { background: var(--accent-light); }
.hero-eyebrow { margin-bottom: 16px; }
.hero-title {
  font-family: var(--display);
  font-size: clamp(36px, 6.6vw, 72px);
  font-weight: 500; line-height: 1.04; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 2px 28px rgba(18,0,4,.5);
}
.hero-title em { font-style: italic; color: var(--accent-light); }
.hero-native {
  font-family: var(--bn); font-size: clamp(15px, 2.2vw, 19px); line-height: 1.7;
  color: var(--accent-pale); margin-top: 14px; text-shadow: 0 1px 16px rgba(18,0,4,.5);
}
.hero-native[hidden] { display: none; }
.hero-lead {
  color: rgba(255,255,255,.9); font-size: 16.5px; line-height: 1.8;
  max-width: 46ch; margin-top: 14px; text-shadow: 0 1px 14px rgba(18,0,4,.4);
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
/* On the dark scrim the filled button has to be the gold one - maroon on maroon
   would disappear. Gold keeps the brand pair and stays high contrast. */
.btn-hero-solid {
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  font-weight: 600; padding: 15px 24px 15px 30px; box-shadow: 0 14px 34px -14px rgba(0,0,0,.55);
}
.btn-hero-solid:hover { background: var(--accent-light); border-color: var(--accent-light); }
.btn-hero-ghost {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); padding: 15px 30px;
}
.btn-hero-ghost:hover { background: #fff; border-color: #fff; color: var(--brand); }
.hero .btn-hero-solid svg { transition: transform .25s var(--ease); }
.hero .btn-hero-solid:hover svg { transform: translateX(3px); }

/* The copy fades in on each slide change, so a new message reads as a change. */
.hero-in-anim { animation: heroCopyIn .55s var(--ease-out) both; }
@keyframes heroCopyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* The brand lockup, used only when there is no photograph to fill the band. */
.hero-panel { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; padding: 44px 26px; text-align: center; }
.hero-panel img { max-width: min(46%, 200px); height: auto; }
.hero-panel .hero-word { font-family: var(--display); font-size: clamp(30px, 4vw, 44px); letter-spacing: .05em; color: #fff; }
.hero-panel .hero-tag { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent-light); }

/* The caption chip rides beside the slide controls, clear of the picture. */
.hero-caption {
  padding: 7px 15px; border-radius: 100px; white-space: nowrap;
  background: rgba(20,0,5,.45); border: 1px solid rgba(240,220,180,.3);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-pale);
}
/* On a phone the picture cannot stand beside the words, so the band keeps the
   soft fill and the copy takes the whole width. The caption chip goes too. */
@media (max-width: 899px) {
  .hero-caption, .hero-subject { display: none; }
}

/* The slide indicator, bottom-left over the picture. */
.hero-foot { position: relative; z-index: 2; width: 100%; display: flex; align-items: center; gap: 18px; padding: 0 20px 30px; }
.hero-nav { display: inline-flex; align-items: center; gap: 14px; }
.hero-arrow {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.5); background: rgba(20,0,5,.3); color: #fff;
  display: grid; place-items: center;
  transition: background .2s var(--ease), color .2s, border-color .2s;
}
.hero-arrow:hover { background: #fff; border-color: #fff; color: var(--brand); }
.hero-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-count { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--display); font-size: 15px; letter-spacing: .1em; color: rgba(255,255,255,.72); }
.hero-count b { font-weight: 600; font-size: 18px; color: #fff; }
.hero-count-sep { color: rgba(255,255,255,.45); }

/* The paused / coming-soon page shares this shell. */
.hero .h1 { color: #fff; }
.hero .h1 em { font-style: italic; color: var(--accent-light); }
.hero .lead { color: rgba(255,255,255,.9); }

/* ─── Scroll reveal ─── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
/* The stagger delays are qualified with .reveal so they outrank the `transition`
   shorthand that components like .cat and .quote declare — otherwise those
   shorthands reset transition-delay to 0 and every item animates at once. */
.reveal.reveal-d1 { transition-delay: .07s; }
.reveal.reveal-d2 { transition-delay: .14s; }
.reveal.reveal-d3 { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}



/* ═══════════════ Sections ═══════════════ */
.sec { padding: 48px 0; }
.sec-cream { background: var(--cream); }
.sec-white { background: var(--surface); }
.sec-brand { background: var(--brand); color: #fff; }
/* Small left-aligned heading over a hairline rule. */
.sec-head {
  margin-bottom: 24px; padding-bottom: 15px; border-bottom: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.sec-head .eyebrow { margin-bottom: 7px; }
.sec-head h2 { font-family: var(--sans); font-size: var(--h-sec); font-weight: 500; color: var(--brand); letter-spacing: .002em; }
.sec-head p { font-size: 14.5px; color: var(--ink-3); margin-top: 5px; }
.sec-brand .sec-head { border-bottom-color: rgba(255,255,255,.16); }
.sec-brand .sec-head h2 { color: #fff; }
.sec-brand .sec-head .eyebrow { color: var(--accent-light); }
.sec-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; color: var(--ink-2); padding-bottom: 1px;
  border-bottom: 1px solid var(--line-strong);
  transition: color .18s, border-color .18s, gap .18s;
}
.sec-link:hover { color: var(--brand); border-color: var(--brand); gap: 10px; }
.sec-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.9; }

/* ═══════════════ Category tiles ═══════════════ */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.cat {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
  aspect-ratio: 3/4; display: flex; align-items: flex-end;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  box-shadow: var(--shadow-1);
}
.cat:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.cat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.cat:hover img { transform: scale(1.06); }
/* A gold ring that appears on hover — small, premium touch. */
.cat::after {
  content: ''; position: absolute; inset: 8px; border-radius: calc(var(--r) - 4px);
  border: 1px solid rgba(224,169,78,0); pointer-events: none; transition: border-color .4s var(--ease);
}
.cat:hover::after { border-color: rgba(224,169,78,.55); }
.cat-body {
  position: relative; z-index: 2; padding: 14px; width: 100%; color: #fff;
  background: linear-gradient(to top, rgba(42,18,24,.9), rgba(42,18,24,.24) 68%, transparent);
}
.cat-name { font-size: 14.5px; font-weight: 500; letter-spacing: .01em; }
.cat-count { font-size: 12px; opacity: .74; }
.cat-plain .cat-mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--serif); font-size: 44px; color: rgba(224,169,78,.28);
}

/* ═══════════════ Product card ═══════════════ */
.prod-grid, .prod-grid-4 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
.card { position: relative; display: flex; flex-direction: column; }
/* Wraps just the image so the badges, wishlist and quick-add all align to the
   photo rather than to the whole card (which includes the text below). */
.card-media-wrap { position: relative; }
.card-media {
  position: relative; aspect-ratio: 3/4; background: var(--surface-2);
  overflow: hidden; border-radius: var(--r); display: block;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }
.card-noimg {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--accent-pale); font-family: var(--serif); font-size: 36px;
  background: linear-gradient(155deg, var(--surface-2), var(--surface-3));
}
.card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; z-index: 3; }
.badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 3px; background: var(--brand); color: #fff;
}
.badge-sale { background: var(--brand); color: #fff; }
.badge-out { background: var(--ink-3); }
.badge-new { background: var(--ok); }
.badge-low { background: var(--warn); }
.wish {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; border: 0;
  background: rgba(253,251,248,.92); color: var(--brand);
  backdrop-filter: blur(3px);
  transition: transform .2s var(--ease), background .2s;
}
.wish:hover { transform: scale(1.1); background: #fff; }
.wish svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.wish.on { color: var(--brand); }
.wish.on svg { fill: var(--brand); }
/* Quick add: slides up over the image on hover (always visible on touch). */
.quick-add {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-xs); border: 0;
  background: rgba(253,251,248,.96); color: var(--brand);
  font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  backdrop-filter: blur(4px); box-shadow: var(--shadow-2);
  transform: translateY(12px); opacity: 0;
  transition: transform .32s var(--ease), opacity .32s var(--ease), background .2s, color .2s;
}
.card:hover .quick-add, .quick-add:focus-visible { transform: none; opacity: 1; }
.quick-add:hover { background: var(--brand); color: #fff; }
.quick-add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quick-add.done { background: var(--ok); color: #fff; }
@media (hover: none) {
  .quick-add { transform: none; opacity: 1; }
}
.card-body { padding: 11px 1px 0; display: flex; flex-direction: column; gap: 4px; }
.card-cat { font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }
.card-name {
  font-size: 14.5px; color: var(--ink); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .18s;
}
.card:hover .card-name { color: var(--brand); }
.card-price { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.price-now { font-size: 16px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }
.price-was { font-size: 13px; color: var(--ink-3); text-decoration: line-through; }
.price-off { font-size: 11.5px; font-weight: 600; color: var(--on-accent); background: var(--accent-pale); padding: 1px 6px; border-radius: 3px; }

/* ═══════════════ Skeletons ═══════════════ */
.sk {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: sk 1.5s linear infinite; border-radius: var(--r);
}
@keyframes sk { to { background-position: -200% 0; } }
.sk-card { border-radius: var(--r); overflow: hidden; }
.sk-media { aspect-ratio: 3/4; }
.sk-line { height: 11px; margin: 9px 0; }
.sk-line.short { width: 55%; }

/* ═══════════════ Promo band ═══════════════ */
.promo {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff; display: grid; align-items: center; min-height: 200px; box-shadow: var(--shadow-2);
}
.promo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(46% 82% at 88% 14%, rgba(224,169,78,.28) 0%, transparent 62%); }
.promo-body { position: relative; z-index: 2; padding: 32px 28px; max-width: 580px; }
.promo h3 { font-family: var(--serif); font-size: clamp(21px, 2.7vw, 30px); font-weight: 400; margin-bottom: 8px; }
.promo p { color: rgba(255,255,255,.86); font-size: 15px; }
.promo-actions { margin-top: 20px; display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.promo-code {
  display: inline-flex; align-items: center; padding: 9px 15px; border-radius: var(--r-xs);
  border: 1px dashed rgba(224,169,78,.6); color: var(--accent-pale);
  font-family: var(--serif); font-size: 14px; letter-spacing: .14em;
}
.promo-strip {
  padding: 13px 20px; text-align: center; font-size: 14.5px; background: var(--surface-2);
  color: var(--ink-2); border-radius: var(--r); border: 1px solid var(--line);
}
.promo-strip b { color: var(--brand); }

/* ═══════════════ Editorial band ═══════════════ */
.band {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff; min-height: 180px; display: grid; align-items: center;
}
.band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 90% at 84% 20%, rgba(224,169,78,.22) 0%, transparent 66%); }
.band-body { position: relative; z-index: 2; padding: 34px 30px; }
.band-text { font-size: clamp(18px, 2.5vw, 27px); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; line-height: 1.36; }
.band-sub { font-size: 14.5px; color: rgba(255,255,255,.74); margin-top: 11px; max-width: 48ch; }
.band .promo-actions { margin-top: 20px; }

/* ═══════════════ Why + testimonials ═══════════════ */
/* ═══════════════ Why Nokshalo ═══════════════
   Four trust cards. This block is deliberately livelier than the rest of the
   page: a gold rail draws across the row, each card rises in turn, the icon
   badge drops in with a small overshoot and lifts on hover. It is all CSS -
   no library - and the site-wide prefers-reduced-motion rule below flattens
   every one of these animations for anyone who asks for that. */
.why-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 14px; }
/* The rail that links the cards into one set. Only meaningful on one row, so
   it is switched on with the four-column layout further down. */
.why-grid::before {
  content: ''; position: absolute; left: 30px; right: 30px; top: 43px; height: 1px; z-index: 0;
  display: none; /* Only one row of cards is linked, so this turns on at 900px. */
  background: linear-gradient(90deg, transparent, var(--line-strong) 10%, var(--line-strong) 90%, transparent);
  /* Visible in its own right, and only hidden once the row is known to be
     waiting to be revealed. If scripting or the observer never runs, the rail is
     still drawn rather than left stranded at zero width. */
  transform: scaleX(1); transform-origin: left;
}
.why-grid.reveal:not(.in)::before { transform: scaleX(0); }
.why-grid.reveal.in::before { transition: transform 1.15s var(--ease-out) .12s; }
/* The grid takes the .in class for the rail, but must not fade as a block -
   the cards do that themselves, one after another. */
.why-grid.reveal { opacity: 1; transform: none; }

.why-card {
  position: relative; z-index: 1; overflow: hidden;
  display: flex; flex-direction: column; gap: 9px;
  padding: 20px 18px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
/* Position within the row drives the stagger, so the four cards arrive left to
   right rather than in the order of the page-wide reveal index. Qualified with
   .why-grid so it outranks the shared .reveal delay rules. The index is set
   inline by the renderer as --i. */
.why-grid .why-card { transition-delay: calc(var(--i, 0) * 90ms); }
/* A warm wash that fades in behind the copy on hover. */
.why-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(130% 100% at 10% 0%, rgba(181,122,27,.13), transparent 62%);
  transition: opacity .45s var(--ease);
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.why-card:hover::after { opacity: 1; }
/* A large ghosted index, so the four points read as a numbered set. */
.why-num {
  position: absolute; top: 12px; right: 15px; z-index: 0;
  font-family: var(--serif); font-size: 32px; line-height: 1; letter-spacing: -.02em;
  color: var(--brand); opacity: .1; transition: opacity .4s var(--ease);
}
.why-card:hover .why-num { opacity: .2; }
.why-ico {
  position: relative; z-index: 1;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: var(--accent-light);
  box-shadow: 0 9px 20px -11px rgba(108,1,20,.65), inset 0 0 0 1px rgba(255,255,255,.1);
  transition: transform .4s var(--ease), color .3s var(--ease);
}
.why-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.why-card:hover .why-ico { transform: translateY(-3px) rotate(-4deg) scale(1.05); color: var(--accent-pale); }
/* The badge lands with a slight overshoot as its card arrives. */
.why-card.reveal.in .why-ico {
  animation: whyPop .6s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms + 110ms);
}
@keyframes whyPop {
  0% { transform: scale(.55); opacity: 0; }
  62% { transform: scale(1.06); opacity: 1; }
  100% { transform: none; }
}
.why-title { position: relative; z-index: 1; font-size: 15.5px; font-weight: 600; color: var(--brand); line-height: 1.35; margin: 0; }
.why-title .bn-sub { font-weight: 400; }
.why-body { position: relative; z-index: 1; font-size: 14px; color: var(--ink-2); line-height: 1.7; }
.quote-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.quote {
  padding: 22px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.quote:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.quote-stars { display: flex; gap: 2px; color: var(--accent); font-size: 14px; letter-spacing: .1em; }
.quote-body { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); position: relative; }
.quote-body::before { content: '\201C'; font-family: var(--serif); font-size: 34px; line-height: 0; color: var(--accent-pale); position: absolute; top: 8px; left: -4px; }
.quote-body { padding-left: 18px; }
.quote-who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; }
.quote-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; background: var(--brand); color: var(--accent-pale);
  font-size: 12px; font-weight: 500;
}
.quote-av img { width: 100%; height: 100%; object-fit: cover; }
.quote-who b { font-size: 13.5px; font-weight: 500; display: block; color: var(--ink); }
.quote-who span { font-size: 12.5px; color: var(--ink-3); }

/* ═══════════════ Breadcrumbs ═══════════════ */
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-3); padding: 16px 0 0; flex-wrap: wrap; }
.crumbs a:hover { color: var(--brand); }
.crumbs span { opacity: .5; }

/* ═══════════════ Product page ═══════════════ */
.pdp { display: grid; gap: 30px; padding: 22px 0 60px; }
.gal { display: flex; flex-direction: column; gap: 9px; }
.gal-main { position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface-2); aspect-ratio: 3/3.6; }
.gal-main img { width: 100%; height: 100%; object-fit: cover; }
.gal-main .gal-noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-pale); font-family: var(--serif); font-size: 56px; background: linear-gradient(155deg, var(--surface-2), var(--surface-3)); }
.gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.gal-thumb {
  width: 62px; height: 62px; flex-shrink: 0; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface-2); padding: 0;
  transition: border-color .2s, transform .2s var(--ease);
}
.gal-thumb:hover { transform: translateY(-2px); }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gal-thumb.on { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.pdp-info { display: flex; flex-direction: column; gap: 15px; }
.pdp-title { font-family: var(--serif); font-size: clamp(22px, 2.9vw, 32px); font-weight: 400; color: var(--brand); line-height: 1.24; }
.pdp-price { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.pdp-price .now { font-size: clamp(21px, 2.7vw, 27px); font-weight: 500; color: var(--brand); font-variant-numeric: tabular-nums; }
.pdp-price .was { font-size: 15px; color: var(--ink-3); text-decoration: line-through; }
.pdp-price .save { font-size: 11.5px; font-weight: 600; color: var(--on-accent); background: var(--accent-pale); padding: 3px 9px; border-radius: 3px; }
.pdp-desc { color: var(--ink-2); font-size: 15.5px; line-height: 1.8; white-space: pre-wrap; }

/* ─── Product details ───
   One card under the buy area, holding switchable panels. A card rather than
   loose text so the block reads as its own contained piece. */
.pdp-details-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 22px 24px; box-shadow: var(--shadow-1);
}
.pdp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.pdp-tab {
  position: relative; padding: 10px 15px 12px; font-size: 14px; font-weight: 500; color: var(--ink-3);
  border-radius: var(--r-xs) var(--r-xs) 0 0; transition: color .18s, background .18s;
}
.pdp-tab:hover { color: var(--brand); background: var(--surface-2); }
.pdp-tab.on { color: var(--brand); }
.pdp-tab.on::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: -1px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.pdp-panel { display: none; }
.pdp-panel.on { display: block; animation: pdpIn .35s var(--ease-out); }
@keyframes pdpIn { from { opacity: 0; transform: translateY(6px); } }

/* The icon-and-text tiles used inside the panels. */
.fact-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.fact {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
  padding: 15px 16px; background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); transition: border-color .25s, transform .25s var(--ease);
}
.fact:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.fact > svg, .fact > .pay-dot {
  grid-row: 1 / span 2; width: 19px; height: 19px; margin-top: 2px;
  color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.fact > .pay-dot { grid-row: 1; width: 12px; height: 12px; margin-top: 5px; border: 0; }
.fact b { font-size: 14px; font-weight: 600; color: var(--brand); }
.fact span { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.pdp-pay-note {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 14px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6;
}
.pdp-pay-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; }
@media (min-width: 620px) { .fact-grid { grid-template-columns: 1fr 1fr; } }

.pdp-specs {
  display: grid; grid-template-columns: auto 1fr; gap: 10px 20px;
  margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px;
}
.pdp-specs dt { color: var(--ink-3); }
.pdp-specs dd { margin: 0; color: var(--ink); }

/* ─── Structured text ───
   How the CRM's plain text is rendered on product pages and policy pages, so
   ordinary typed content comes out looking designed. */
.rt > * + * { margin-top: 15px; }
.rt-lede { font-size: 17px !important; line-height: 1.75 !important; color: var(--ink) !important; }
.rt p { color: var(--ink-2); font-size: 15px; line-height: 1.85; }
.rt-h {
  font-size: 15px; font-weight: 600; color: var(--brand);
  padding-left: 13px; position: relative; margin-top: 26px;
}
.rt-h::before {
  content: ''; position: absolute; left: 0; top: .35em; bottom: .3em; width: 3px;
  background: var(--accent); border-radius: 2px;
}
.rt-h + p { margin-top: 8px; }
.rt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rt-list li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.rt-list li::before {
  content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent);
}
.rt-fact {
  display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 6px 20px;
  padding: 13px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
}
.rt-fact-label { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding-top: 2px; }
.rt-fact-value { font-size: 15px; color: var(--ink); line-height: 1.65; }
.rt-help {
  margin-top: 34px; padding: 18px 20px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line);
}
.rt-help b { font-size: 14.5px; color: var(--brand); }
.rt-help p { margin-top: 5px; font-size: 13px; color: var(--ink-3); }
.rt-help a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 560px) { .rt-fact { grid-template-columns: 1fr; } }
.pdp-meta { display: flex; gap: 8px 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.pdp-meta b { color: var(--ink-2); font-weight: 500; }

.opt { display: flex; flex-direction: column; gap: 8px; }
.opt-label { font-size: 11.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); }
.opt-label span { color: var(--ink); font-weight: 500; letter-spacing: 0; text-transform: none; }
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt-chip {
  min-width: 44px; padding: 9px 15px; border-radius: var(--r-xs); text-align: center;
  border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px;
  transition: all .18s var(--ease);
}
.opt-chip:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.opt-chip.on { border-color: var(--brand); background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.opt-chip.out { opacity: .38; text-decoration: line-through; cursor: not-allowed; }
.opt-chip.swatch { display: inline-flex; align-items: center; gap: 8px; padding-left: 7px; }
.opt-chip .sw { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.14); flex-shrink: 0; }
.opt-chip.swatch.on .sw { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-xs); overflow: hidden; }
.qty button { width: 40px; height: 42px; font-size: 17px; color: var(--ink-2); transition: background .15s, color .15s; }
.qty button:hover { background: var(--surface-2); color: var(--brand); }
.qty input { width: 44px; height: 42px; border: 0; text-align: center; background: transparent; font-weight: 500; font-variant-numeric: tabular-nums; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }

.stock { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; }
.stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px currentColor; opacity: .95; }
.stock-in { color: var(--ok); }
.stock-low { color: var(--warn); }
.stock-out { color: var(--err); }
.stock-pre { color: var(--accent); }

.pdp-cta { display: flex; gap: 11px; flex-wrap: wrap; align-items: stretch; }
.pdp-cta .btn { flex: 1 1 160px; min-height: 52px; }
.pdp-cta .btn-icon { flex: 0 0 auto; min-width: 52px; padding: 0 15px; }
.pdp-assure { display: grid; gap: 12px; padding: 20px 0 0; border-top: 1px solid var(--line); }
.pdp-assure div { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.pdp-assure svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pdp-assure b { color: var(--brand); display: block; font-weight: 600; font-size: 14px; }

/* Sticky buy bar on small screens */
.sticky-buy {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -14px rgba(42,18,24,.3);
  transform: translateY(102%); transition: transform .32s var(--ease-out);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .sticky-buy { background: var(--surface); } }
.sticky-buy.on { transform: none; }
.sticky-buy .sb-price { font-size: 16px; font-weight: 500; color: var(--brand); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sticky-buy .sb-name { font-size: 11.5px; color: var(--ink-3); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-buy .btn { flex: 1; min-height: 46px; }

/* ═══════════════ Shop controls ═══════════════ */
.shop-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 0 0; }
.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.select {
  padding: 10px 14px; border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 13px; border-radius: var(--r-xs); cursor: pointer; transition: border-color .18s;
}
.select:hover { border-color: var(--ink-3); }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 20px; scrollbar-width: thin; }
.chip {
  padding: 9px 16px; border: 1px solid var(--line-strong); background: var(--surface);
  font-size: 13.5px; white-space: nowrap; border-radius: 100px;
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.chip b { opacity: .6; font-weight: 400; margin-left: 5px; }
.pager { display: flex; justify-content: center; gap: 7px; padding: 32px 0 6px; flex-wrap: wrap; }
.pager button, .pager a {
  min-width: 40px; height: 40px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: var(--surface); font-size: 13px; border-radius: var(--r-xs);
  transition: all .18s;
}
.pager button:hover, .pager a:hover { border-color: var(--brand); color: var(--brand); }
.pager .on { background: var(--brand); border-color: var(--brand); color: #fff; }
.pager [disabled] { opacity: .4; }

/* ═══════════════ Collection page ═══════════════
   The banner, then a filter sidebar beside the grid. Every filter is a link, so
   the sidebar is plain markup that reflects the query string. */

/* The wide banner: the photograph fills the whole panel and the words sit on top
   of it. A warm cream wash is dense on the left, where the words are, and clears
   to the right so the picture shows - which keeps the light palette and the
   maroon heading readable without darkening the picture. */
.col-banner {
  position: relative; overflow: hidden; margin-top: 14px;
  border-radius: var(--r-xl); border: 1px solid var(--line);
  min-height: 272px; display: flex; align-items: center;
  background: linear-gradient(112deg, #fbf7f1 0%, var(--surface-2) 46%, #e8dcc9 100%);
}
.col-banner-media { position: absolute; inset: 0; z-index: 0; }
/* A gentle warm grade so any photograph sits naturally in the cream-and-maroon
   palette rather than beside it. Subtle on purpose: it should read as the shop's
   light, not as a filter. */
.col-banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: sepia(.14) saturate(1.08); }
.col-banner-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(96deg,
    rgba(251,247,241,.97) 0%, rgba(249,243,234,.93) 30%,
    rgba(248,241,231,.58) 56%, rgba(248,241,231,.06) 100%);
}
.col-banner-copy { position: relative; z-index: 3; padding: 40px 26px 38px; max-width: 640px; }
.col-banner-title {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 7vw, 62px); line-height: 1.04; letter-spacing: -.01em;
  color: var(--brand); margin: 12px 0 10px;
}
.col-banner-sub { color: var(--ink-2); font-size: 15.5px; max-width: 34ch; }
/* The bouquet, catching the gold accent on the open right-hand side. */
.col-leaf {
  position: absolute; right: -30px; top: -40px; z-index: 1;
  width: min(66%, 330px); height: auto;
  color: var(--accent); opacity: .38; pointer-events: none;
}

/* Sidebar beside the grid. The grid is one column until there is room. */
.shop-layout { display: grid; gap: 22px; padding: 26px 0 60px; }
.filters-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px 6px; align-self: start;
}
.fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.fp-title { font-family: var(--display); font-size: 21px; color: var(--brand); letter-spacing: .01em; }
.fp-clear { font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line-strong); }
.fp-clear:hover { color: var(--brand); border-color: var(--brand); }

/* Each group collapses. <details> means it still works with no JavaScript. */
.flt-sec { border-bottom: 1px solid var(--line); }
.flt-sec:last-of-type { border-bottom: 0; }
.flt-sec summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.flt-sec summary::-webkit-details-marker { display: none; }
.flt-sec summary:hover { color: var(--brand); }
.flt-chev { display: inline-flex; color: var(--ink-3); transition: transform .25s var(--ease); }
.flt-chev svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flt-sec[open] .flt-chev { transform: rotate(90deg); }
.flt-body { padding-bottom: 10px; }

.flt-opt {
  display: flex; align-items: center; gap: 9px; padding: 6px 0;
  font-size: 13.5px; color: var(--ink-2);
}
.flt-opt:hover { color: var(--brand); }
.flt-box {
  width: 17px; height: 17px; flex-shrink: 0; border: 1.5px solid var(--line-strong); border-radius: 4px;
  display: grid; place-items: center; background: var(--surface); transition: background .18s, border-color .18s;
}
.flt-box svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.flt-opt.on .flt-box { background: var(--brand); border-color: var(--brand); color: #fff; }
.flt-opt.on { color: var(--brand); font-weight: 500; }
.flt-label { flex: 1; }
.flt-count { color: var(--ink-3); font-size: 12px; }
.flt-none { font-size: 13px; color: var(--ink-3); padding: 4px 0 8px; }

/* Content column */
.shop-main { min-width: 0; }
.shop-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.shop-title { font-family: var(--display); font-size: clamp(26px, 3.6vw, 40px); font-weight: 500; color: var(--brand); line-height: 1.1; }
.shop-desc { color: var(--ink-3); font-size: 14px; margin-top: 6px; }
.shop-tools { display: inline-flex; align-items: center; gap: 9px; }
.shop-tools-label { font-size: 13px; color: var(--ink-3); }
.shop-count { font-size: 12.5px; color: var(--ink-3); margin: 12px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* The collection grid. Cards are deliberately smaller than the shelves elsewhere
   on the site: a pageful reads at a glance, so there is no long scroll and each
   page is a tidy block. Square photos keep the rows even. */
.prod-grid-3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
.prod-grid-3 .card-media { aspect-ratio: 1 / 1; }
.prod-grid-3 .card-body { padding-top: 9px; gap: 3px; }
.prod-grid-3 .card-name { font-size: 13.5px; line-height: 1.4; }
.prod-grid-3 .price-now { font-size: 14.5px; }
.prod-grid-3 .price-was { font-size: 12px; }
.prod-grid-3 .price-off { font-size: 10.5px; padding: 1px 5px; }
.prod-grid-3 .quick-add { padding: 8px 10px; font-size: 11.5px; }
.prod-grid-3 .card-cat { font-size: 10px; }
@media (min-width: 700px) { .prod-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 26px 16px; } }

.pager-right { justify-content: flex-end; }
.pager-gap { display: inline-flex; align-items: center; padding: 0 4px; color: var(--ink-3); }

@media (min-width: 900px) {
  .col-banner { min-height: 430px; }
  .col-banner-copy { padding: 54px 30px 52px 48px; }
  .col-leaf { width: 350px; right: -34px; top: -54px; }
  .shop-layout { grid-template-columns: 254px 1fr; gap: 34px; }
  .prod-grid-3 { gap: 30px 18px; }
}

/* ═══════════════ My account ═══════════════
   A profile card on the left, and the section the visitor picked on the right.
   Everything here is the visitor's own data: their orders, their saved items and
   the address the courier uses. */
.acct { display: grid; gap: 20px; padding: 26px 0 64px; }

.acct-side {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 16px 14px; align-self: start; box-shadow: var(--shadow-1);
}
.acct-user { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.acct-av {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--brand); color: var(--accent-pale);
  font-family: var(--serif); font-size: 17px; letter-spacing: .04em;
}
.acct-user b { display: block; font-size: 14.5px; color: var(--brand); font-weight: 600; }
.acct-user span { font-size: 12.5px; color: var(--ink-3); word-break: break-word; }

.acct-nav { display: flex; flex-direction: column; gap: 3px; }
.acct-link {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: var(--r-sm); font-size: 14px; color: var(--ink-2);
  transition: background .18s var(--ease), color .18s;
}
.acct-link svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acct-link:hover { background: var(--surface-2); color: var(--brand); }
.acct-link.on { background: var(--brand); color: #fff; }
.acct-out { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-out .acct-link { color: var(--ink-3); }
.acct-out .acct-link:hover { background: var(--err-bg); color: var(--err); }

.acct-main { min-width: 0; }
.acct-title { font-family: var(--display); font-weight: 500; font-size: clamp(27px, 3.8vw, 38px); color: var(--brand); line-height: 1.1; }
.acct-sub { color: var(--ink-3); font-size: 14px; margin-top: 6px; }

.acct-stats { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 22px 0 2px; }
.acct-stat {
  display: flex; align-items: center; gap: 13px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 15px 16px; box-shadow: var(--shadow-1);
}
.acct-stat-ico {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: var(--surface-2); color: var(--brand);
}
.acct-stat-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acct-stat-lbl { display: block; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.acct-stat-num { display: block; margin-top: 6px; font-size: 22px; font-weight: 600; color: var(--brand); line-height: 1.25; font-variant-numeric: tabular-nums; }

.acct-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 30px 0 13px; }
.acct-sec-head h3 { font-family: var(--display); font-weight: 500; font-size: 21px; color: var(--brand); }
.acct-sec-link { font-size: 13.5px; color: var(--brand); display: inline-flex; align-items: center; gap: 6px; transition: gap .2s var(--ease); }
.acct-sec-link:hover { gap: 10px; }
.acct-sec-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.acct-orders { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1); }
.acct-order {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center;
  padding: 15px 18px; border-bottom: 1px solid var(--line); transition: background .18s;
}
.acct-order:last-child { border-bottom: 0; }
.acct-order:hover { background: var(--surface-2); }
.acct-order-no { display: block; font-size: 12.5px; color: var(--ink-3); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.acct-order-name { display: block; font-size: 14.5px; color: var(--ink); font-weight: 500; margin-top: 1px; }
.acct-order-meta { display: block; font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.acct-order-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.acct-order-price { font-size: 15px; font-weight: 600; color: var(--brand); font-variant-numeric: tabular-nums; }

/* Status pills, in the soft colours the design calls for. */
.st-pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 100px; white-space: nowrap;
}
.st-process { background: #fbe9ef; color: #9c2a4e; }
.st-ship { background: #e8effb; color: #2c569b; }
.st-deliver { background: #e6f4ec; color: #2b6b45; }
.st-off { background: var(--surface-3); color: var(--ink-3); }

.acct-empty { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 6px; }

@media (min-width: 620px) {
  .acct-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .acct { grid-template-columns: 258px 1fr; gap: 30px; padding: 32px 0 72px; }
}

/* ═══════════════ Cart page ═══════════════ */
.cart-wrap { display: grid; gap: 26px; padding: 20px 0 60px; }
.cart-list { display: flex; flex-direction: column; }
.cart-row { display: grid; grid-template-columns: 78px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.cart-img { width: 78px; height: 94px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cart-info .nm { font-size: 15px; }
.cart-info .vr { font-size: 13px; color: var(--ink-3); }
.cart-line { font-size: 14.5px; font-weight: 500; color: var(--brand); font-variant-numeric: tabular-nums; }
.cart-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 5px; }
.cart-remove { color: var(--ink-3); font-size: 12px; text-decoration: underline; padding: 3px; }
.cart-remove:hover { color: var(--err); }

.summary { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.summary h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--brand); margin-bottom: 16px; }
.sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14.5px; color: var(--ink-2); }
.sum-row b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; }
.sum-row.total { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 15px; font-size: 15px; color: var(--ink); }
.sum-row.total b { color: var(--brand); font-size: 20px; font-weight: 500; }
.sum-row .free { color: var(--ok); font-weight: 500; }
.coupon-row { display: flex; gap: 8px; margin: 16px 0 6px; }
.coupon-row input {
  flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--line-strong); background: #fff;
  font-size: 13px; text-transform: uppercase; border-radius: var(--r-xs); letter-spacing: .06em;
}
.coupon-row input:focus { outline: none; border-color: var(--brand); }
.coupon-note { font-size: 12px; margin-bottom: 10px; }
.coupon-note.ok { color: var(--ok); }
.coupon-note.bad { color: var(--err); }
.sum-note { font-size: 11.5px; color: var(--ink-3); margin-top: 12px; display: flex; gap: 7px; align-items: flex-start; }
.sum-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; }

/* Delivery progress on the cart page */
.cart-ship { padding: 13px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xs); margin-bottom: 16px; }
.cart-ship p { font-size: 12.5px; color: var(--ink-2); margin-bottom: 9px; }
.cart-ship b { color: var(--brand); }
.cart-ship .ship-track { background: var(--surface-3); }
.cart-ship.done p { color: var(--ok); }
.cart-ship.done b { color: var(--ok); }

/* ═══════════════ Checkout ═══════════════ */
.checkout-wrap { display: grid; gap: 30px; padding: 20px 0 60px; align-items: start; }
.co-step { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.co-step i {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: var(--brand); color: #fff; font-size: 12px; font-weight: 600; font-style: normal;
}
.co-step h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--brand); }
.co-section { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 16px; }
.co-section .co-step { margin-bottom: 18px; }
.co-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); background: var(--surface-2); padding: 12px 14px; border-radius: var(--r-xs); margin-bottom: 16px; }
.co-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; }

/* ═══════════════ Forms ═══════════════ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }
.field label .req { color: var(--err); }
.field input, .field select, .field textarea {
  padding: 13px 15px; border: 1px solid var(--line-strong); background: #fff;
  font-size: 15.5px; width: 100%; border-radius: var(--r-xs);
  transition: border-color .18s, box-shadow .18s;
}
.field textarea { min-height: 84px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(108,1,20,.07);
}
.field .hint { font-size: 12.5px; color: var(--ink-3); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--err); background: var(--err-bg); }
.field .err { font-size: 12.5px; color: var(--err); display: flex; align-items: center; gap: 5px; }
.form-grid { display: grid; gap: 15px; }
.form-2 { display: grid; gap: 15px; }

.pay-opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px;
  border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer;
  border-radius: var(--r-xs); transition: border-color .18s, background .18s;
}
.pay-opt:hover { border-color: var(--ink-3); }
.pay-opt.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
@supports not (background: color-mix(in srgb, red 50%, transparent)) { .pay-opt.on { background: var(--surface-2); } }
.pay-opt input { margin-top: 3px; accent-color: var(--brand); width: 17px; height: 17px; flex-shrink: 0; }
/* The payment choices are labels inside a form field, so they would otherwise
   inherit the field-label styling (uppercase, letter-spaced) and read as
   shouting capitals. This is reading copy, not a field name, so the reset is
   scoped to beat .field label. */
.field .pay-opt, .field .pay-opt b, .field .pay-opt em { text-transform: none; letter-spacing: 0; }
.pay-opt b { display: block; font-size: 13px; font-weight: 500; }
.pay-opt em { font-size: 11.5px; color: var(--ink-3); font-style: normal; display: block; line-height: 1.45; }
/* Inline icons have no browser default size. Without this, the wallet icon in
   the advance-payment label uses SVG's 300x150 fallback size and becomes a
   giant black rectangle. */
.pay-opt b svg { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pay-note { font-size: 11.5px; color: var(--err); display: flex; align-items: center; gap: 5px; margin-top: 8px; }

/* ─── Wallet payment at checkout ───
   A coloured dot beside the name, then the send-money steps once chosen. The
   number is the one thing a customer must get right, so it is large, selectable
   and copyable rather than buried in a sentence. */
.pay-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.pay-list { gap: 10px; }
/* The delivery area: two choices, side by side when there is room. */
.area-row { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 520px) { .area-row { grid-template-columns: 1fr 1fr; } }
.pay-opt b { display: flex; align-items: center; }
.pay-none {
  display: flex; gap: 9px; align-items: flex-start; padding: 14px 16px;
  background: var(--warn-bg); border: 1px solid var(--accent-light); border-radius: var(--r-xs);
  font-size: 13.5px; color: var(--ink-2);
}
.pay-none svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--warn); fill: none; stroke: currentColor; stroke-width: 1.8; }

.pay-wallet {
  border: 1px solid var(--line-strong); border-left: 3px solid var(--accent);
  border-radius: var(--r); background: var(--surface-2); padding: 16px 18px;
  animation: pdpIn .3s var(--ease-out);
}
.pay-wallet-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; }
.pay-wallet-head .pay-dot { margin-right: 0; width: 11px; height: 11px; }
.pay-wallet-name { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pay-wallet-no {
  font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: .02em;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.pay-copy {
  margin-left: auto; font-size: 12px; font-weight: 500; color: var(--brand);
  border: 1px solid var(--line-strong); background: var(--surface);
  padding: 5px 12px; border-radius: var(--r-xs); transition: background .18s, border-color .18s;
}
.pay-copy:hover { background: var(--surface-3); border-color: var(--ink-3); }
.pay-steps { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 7px; }
.pay-steps li { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.pay-steps b { color: var(--ink); }
.pay-wallet-note {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 12px;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.6;
}
.pay-wallet-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; }
.pay-wallet .field label { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink-2); }
.pay-wallet input.bad { border-color: var(--err); background: var(--err-bg); }

/* Quantity stepper shared by cart and drawer */
.step { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-xs); overflow: hidden; }
.step button { width: 34px; height: 36px; font-size: 15px; color: var(--ink-2); transition: background .15s, color .15s; }
.step button:hover { background: var(--surface-2); color: var(--brand); }
.step output { min-width: 34px; text-align: center; font-size: 13.5px; font-variant-numeric: tabular-nums; }

/* ═══════════════ Order success ═══════════════ */
.success-hero { text-align: center; padding: 42px 20px 8px; }
.success-mark {
  width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ok-bg); color: var(--ok);
  animation: pop .5s var(--ease-out);
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.success-mark svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.success-hero h1 { font-family: var(--serif); font-size: clamp(23px, 3.2vw, 33px); font-weight: 400; color: var(--brand); margin-bottom: 10px; }
.success-hero p { color: var(--ink-2); max-width: 46ch; margin: 0 auto; }
.order-no-badge {
  display: inline-flex; align-items: center; gap: 9px; margin: 20px auto 0;
  padding: 10px 18px; border-radius: 100px; background: var(--surface-2);
  border: 1px dashed var(--line-strong); font-family: var(--serif);
  font-size: 17px; letter-spacing: .1em; color: var(--brand);
}

/* ═══════════════ Track ═══════════════ */
.track-steps { display: flex; flex-direction: column; margin: 22px 0; }
.tstep { display: flex; gap: 14px; align-items: flex-start; position: relative; padding-bottom: 22px; }
.tstep:last-child { padding-bottom: 0; }
.tstep::before { content: ''; position: absolute; left: 12px; top: 28px; bottom: 0; width: 1px; background: var(--line); }
.tstep:last-child::before { display: none; }
.tstep.done::before { background: var(--brand); }
.tdot { width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); font-size: 11px; z-index: 1; }
.tdot svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.tstep.done .tdot { background: var(--brand); color: #fff; }
.tstep.current .tdot { box-shadow: 0 0 0 4px var(--surface-3); }
.tstep .tl { font-size: 14.5px; color: var(--ink-2); }
.tstep .tl b { display: block; color: var(--ink); font-weight: 500; }
.tstep.current .tl b { color: var(--brand); }

.info-card { padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.info-card h4 { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.kv { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.kv:last-child { border-bottom: 0; }
.kv dt { color: var(--ink-3); }
.kv dd { margin: 0; text-align: right; }
.track-grid { display: grid; gap: 20px; }

/* ═══════════════ Content pages ═══════════════ */
.prose { max-width: 72ch; margin: 0 auto; padding: 30px 0 60px; }
.prose h1 { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 34px); font-weight: 400; color: var(--brand); margin-bottom: 20px; }
.prose h2 { font-size: 15.5px; font-weight: 600; color: var(--brand); margin: 30px 0 9px; }
.prose p { color: var(--ink-2); font-size: 15.5px; line-height: 1.9; margin-bottom: 15px; }
.prose ul { color: var(--ink-2); font-size: 15.5px; line-height: 1.9; padding-left: 20px; margin-bottom: 15px; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════ Toast ═══════════════ */
.toasts {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 200;
  display: flex; flex-direction: column; gap: 9px; align-items: center;
  pointer-events: none; width: max-content; max-width: 92vw;
}
.toast {
  display: flex; align-items: center; gap: 10px; padding: 13px 20px;
  background: var(--brand); color: #fff; font-size: 14.5px; border-radius: var(--r-xs);
  box-shadow: var(--shadow-3); animation: toastIn .3s var(--ease-out);
}
.toast svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.toast.ok { background: var(--ok); }
.toast.err { background: var(--err); }
.toast.warn { background: var(--warn); }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px); } }

/* ═══════════════ Modal ═══════════════ */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 18px; background: rgba(42,18,24,.48); backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-box {
  width: 100%; max-width: 450px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border-radius: var(--r-lg); padding: 26px;
  box-shadow: var(--shadow-3); animation: popIn .3s var(--ease-out);
}
@keyframes popIn { from { opacity: 0; transform: translateY(12px) scale(.985); } }
.modal-box h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--brand); margin-bottom: 8px; }
.modal-box > p { color: var(--ink-2); font-size: 13.5px; margin-bottom: 18px; }
.modal-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.modal-tabs button {
  padding: 10px 16px; font-size: 13.5px; color: var(--ink-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .18s, border-color .18s;
}
.modal-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 500; }

/* ═══════════════ Empty / error ═══════════════ */
.empty { text-align: center; padding: 64px 20px; }
.empty .glyph {
  width: 70px; height: 70px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface-2); color: var(--accent);
}
.empty .glyph svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.empty h3 { font-family: var(--serif); font-size: 21px; font-weight: 400; color: var(--brand); margin-bottom: 8px; }
.empty p { color: var(--ink-3); font-size: 14.5px; max-width: 42ch; margin: 0 auto 20px; }

/* ═══════════════ Footer ═══════════════ */
.ftr {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: rgba(255,255,255,.72); padding: 48px 0 22px; margin-top: 18px;
}
.ftr::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(42% 70% at 12% 0%, rgba(224,169,78,.14) 0%, transparent 58%); }
.ftr-grid { position: relative; display: grid; gap: 30px; grid-template-columns: 1fr; }
.ftr .brand-name { color: #fff; }
.ftr .brand-mark { background: rgba(255,255,255,.12); color: var(--accent-pale); box-shadow: none; }
.ftr-logo { height: 46px; width: auto; }
.ftr-tag { margin-top: 14px; max-width: 38ch; }
/* The brand column keeps to a single line: the tagline. */
.ftr-tagline { display: block; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .93); }
.ftr-social { display: flex; gap: 9px; margin-top: 17px; }
.ftr-social a {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.09); color: #fff; transition: background .2s, transform .2s var(--ease);
}
.ftr-social a:hover { background: var(--accent); color: var(--on-accent); transform: translateY(-2px); }
.ftr-social svg { width: 16px; height: 16px; fill: currentColor; }
.ftr-col h4 { color: #fff; font-size: 10.5px; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 13px; font-weight: 600; }
.ftr-col a { display: block; font-size: 14px; padding: 5px 0; transition: color .18s, padding-left .18s; }
.ftr-col a:hover { color: var(--accent-light); padding-left: 3px; }
/* Contact rows in the footer: an icon, then the detail. The list itself stacks,
   so these selectors are deliberately scoped to the list's direct children —
   styling every div under .ftr-contact would turn the wrapper into a row and
   lay the three details out side by side. */
.ftr-contact #ftrContact { display: flex; flex-direction: column; }
.ftr-contact #ftrContact > * {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 14px; line-height: 1.5; padding: 4px 0;
}
.ftr-contact #ftrContact > * span { min-width: 0; word-break: break-word; }
.ftr-contact #ftrContact > a:hover span { color: var(--accent-light); }
.ftr-contact svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--accent-light); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ─── Payment methods ───
   The artwork the shop supplied, shown beside the copyright line. It sits on a
   light plate because one of the marks is drawn in near-black and would
   otherwise disappear against the maroon footer. */
.ftr-pay { display: flex; align-items: center; }
.ftr-pay img {
  display: block; height: 24px; width: auto; max-width: 100%;
  padding: 5px 9px; border-radius: 6px; background: #fff;
  /* The page sets border-box globally, which would count the padding above
     against the height and shrink the artwork. Here the height means the
     artwork itself. */
  box-sizing: content-box;
}
.ftr-pay:empty { display: none; }

.ftr-base {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  gap: 14px 20px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.13);
  font-size: 11.5px; color: rgba(255,255,255,.52);
}
.ftr-legal { display: flex; flex-direction: column; gap: 4px; }
.ftr-base a:hover { color: var(--accent-light); }
/* On a narrow footer the marks drop below the copyright rather than being
   squeezed in beside it. */
@media (max-width: 620px) {
  .ftr-base { align-items: flex-start; }
}

/* ═══════════════ Responsive ═══════════════ */
@media (min-width: 620px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  .prod-grid, .prod-grid-4 { grid-template-columns: repeat(3, 1fr); gap: 26px 16px; }
  .form-2 { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr 1fr; }
  .quote-grid { grid-template-columns: repeat(2, 1fr); }
  .ftr-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; }
  .track-grid { grid-template-columns: 1.3fr 1fr; }
}
@media (min-width: 900px) {
  :root { --h-sec: 22px; }
  .hdr-nav { display: flex; }
  .hdr-menu { display: none; }
  .hdr-in { height: 72px; }
  .cat-grid { grid-template-columns: repeat(5, 1fr); }
  .prod-grid, .prod-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 30px 18px; }
  .hero-in { padding: 60px 20px 10px; }
  .hero-foot { padding-bottom: 42px; }
  .why-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .why-grid::before { display: block; }
  .quote-grid { grid-template-columns: repeat(3, 1fr); }
  .pdp { grid-template-columns: 1.02fr 1fr; gap: 52px; padding: 26px 0 76px; }
  .pdp-info { position: sticky; top: 96px; align-self: start; }
  .cart-wrap { grid-template-columns: 1.7fr 1fr; align-items: start; }
  .summary { position: sticky; top: 96px; }
  .checkout-wrap { grid-template-columns: 1.45fr 1fr; gap: 34px; }
  .checkout-wrap .summary { position: sticky; top: 96px; }
  .sec { padding: 66px 0; }
  .ftr-grid { gap: 44px; }
  .sticky-buy { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
   Bilingual typography — English leads, Bangla follows
   ---------------------------------------------------------------------
   Every English string is paired with its Bangla counterpart on the line
   beneath it: same left edge, a touch smaller, in a softer ink. Two rules
   have to be enforced for Bengali to render correctly at all, and both are
   reset on every node that can carry Bangla:

     • no letter-spacing — Bengali is a cursive script, so any positive
       tracking pulls syllables, matras and conjuncts apart;
     • no text-transform — "uppercase" is meaningless for Bengali and only
       risks mangling the Latin fragments sitting beside it.

   Because the reset rides on the Bangla nodes themselves, a Bangla line
   stays correct even inside an uppercase, letter-spaced Latin heading.
   The [lang="bn"] selector also covers text the CRM supplies directly.
   ═══════════════════════════════════════════════════════════════════ */

/* One Bangla face, and no inherited Latin decoration. */
.bn, .bn-inline, .bn-sub, .bn-lead, .bn-num, .bi-bn, .sum-bn, [lang="bn"] {
  font-family: var(--bn);
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
}
.bn, .bn-num { display: block; }
.bn-inline { display: inline; }

/* A bilingual pair: English on top, Bangla directly beneath. Used for
   headings, buttons, nav items and rows so the two languages always share
   one left edge and one vertical rhythm. */
.bi {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  gap: 2px; line-height: 1.22; text-align: left; max-width: 100%;
}
.bi-en { display: block; }
.bi-bn { display: block; font-size: max(.8em, 11px); line-height: 1.45; font-weight: 400; color: var(--ink-3); }
/* One-line pairs, for controls with no room to stack. */
.bi-row, .bi.row { flex-direction: row; align-items: baseline; gap: 6px; }
.bi-row .bi-bn, .bi.row .bi-bn { font-size: max(.92em, 12px); line-height: inherit; }

/* A quiet Bangla line under an English heading. The size is relative, so it
   tracks whatever it sits under, with a floor so it never becomes unreadable. */
.bn-sub {
  display: block;
  font-size: max(.86em, 12px);
  line-height: 1.55;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 4px;
}
.bn-lead { display: block; font-size: 16px; line-height: 1.75; color: var(--ink-2); margin-top: 8px; }

/* Bangla on the coloured and dark surfaces: the muted ink is unreadable
   there, so it takes a translucent white instead. */
.ftr .bi-bn, .ftr .bn-sub, .sec-brand .bi-bn, .sec-brand .bn-sub,
.band .bi-bn, .band .bn-sub, .promo .bi-bn, .promo .bn-sub,
.hero .bn-sub, .cat .bi-bn, .cat .bn-sub,
.chat-head .bi-bn, .chat-head .bn-sub {
  color: rgba(255, 255, 255, .76);
}

/* Headings: the Bangla scales with the English it sits under. */
.sec-head h2 .bn-sub, .h1 .bn-sub, .h2 .bn-sub, .h3 .bn-sub,
.prose h1 .bn-sub, .success-hero h1 .bn-sub { font-size: .72em; margin-top: 5px; }
.hero .eyebrow .bn-sub { font-size: 12.5px; margin-top: 4px; color: rgba(255,255,255,.78); }
.eyebrow .bn, .eyebrow .bn-sub, .eyebrow .bi-bn { font-size: 12.5px; text-transform: none; letter-spacing: 0; }
.ftr-col h4 .bi-bn, .drawer-nav h5 .bi-bn { font-size: 11.5px; margin-top: 3px; }

/* Buttons: the pair is centred inside the pill. */
.btn .bi { align-items: center; text-align: center; gap: 1px; line-height: 1.18; }
.btn .bi-bn { color: currentColor; opacity: .85; }
/* Small buttons, text links and the chat pill stay on one line, where a stack
   would either grow too tall or run out of width. */
.btn-sm .bi, .sec-link .bi, .chat-fab .bi { flex-direction: row; align-items: baseline; gap: 6px; }
.btn-sm .bi-bn, .sec-link .bi-bn, .chat-fab .bi-bn { font-size: max(.92em, 12px); line-height: inherit; }

/* Compact inline pairs, e.g. the label side of a summary row. */
.sum-bn {
  display: block; margin-top: 1px;
  font-size: max(.86em, 12px); line-height: 1.45;
  color: var(--ink-3); font-weight: 400;
}
.sum-row.total .sum-bn { font-size: 13px; }

/* Shop by category tile captions. */
.cat-name .bn-sub { font-size: .88em; color: rgba(255,255,255,.82); margin-top: 1px; }
/* Prices stay in Latin digits with the taka sign - the clearest convention. */
.bn-num { font-family: var(--bn); }
/* Inputs carry --ui, so anything typed - in either script - is shaped well. */
.field input, .field select, .field textarea,
.chat-compose textarea, .search-in input, .coupon-row input { font-family: var(--ui); }

/* Bangla inside tight UI - form labels, notes and the assurance blocks - is
   kept close to its English line so the pair reads as one unit. */
.field label .bi-bn { font-size: max(.95em, 12px); margin-top: 1px; }
.field label .bn-sub, .pay-opt em .bn-sub, .co-note .bn-sub,
.pdp-assure .bn-sub, .chat-hint .bn-sub, .sum-note .bn-sub,
.empty p .bn-sub, .cart-ship .bn-sub {
  font-size: max(.92em, 11.5px); line-height: 1.5; margin-top: 2px;
}
.empty h3 .bn-sub { font-size: .58em; margin-top: 7px; }
/* The payment choice is a two-line label; the Bangla note sits under its own
   English line rather than beside it, so both stay readable. */
.pay-opt b .bi-bn { font-weight: 400; }
.pay-opt em .bn-sub { margin-top: 3px; }

/* A small Bangladeshi flag accent, used once in the trust band. */
.bd-flag {
  display: inline-block; width: 22px; height: 14px; border-radius: 2px;
  background: #006a4e; position: relative; overflow: hidden; vertical-align: -2px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.bd-flag::after {
  content: ''; position: absolute; top: 50%; left: 42%; width: 8px; height: 8px;
  border-radius: 50%; background: #f42a41; transform: translate(-50%, -50%);
}
.bd-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--ink-3);
}
.bd-note .bn-sub { display: inline; font-size: 14px; margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   Live chat widget
   ═══════════════════════════════════════════════════════════════════ */
.chat-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  width: 54px; height: 54px; padding: 0; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #fff;
  box-shadow: 0 14px 34px -10px rgba(108, 1, 20, .5);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  user-select: none; -webkit-user-select: none; touch-action: none; cursor: grab;
}
.chat-fab:not(.dragging):hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(108,1,20,.6); }
.chat-fab.dragging { cursor: grabbing; transition: none; transform: none; }
.chat-fab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.chat-fab .chat-dot {
  position: absolute; top: 4px; right: 6px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--brand);
}
.chat-fab.has-reply .chat-dot { background: #38d39f; }
.chat-panel {
  position: fixed; z-index: 96; right: 18px; bottom: 18px;
  width: min(94vw, 390px); height: min(78vh, 610px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3);
  transform: translateY(14px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out);
}
.chat-panel.open { transform: none; opacity: 1; pointer-events: auto; }
@media (max-width: 560px) {
  .chat-panel { right: 0; left: 0; bottom: 0; width: 100%; height: 86vh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-fab, .chat-panel { transition: none; }
}
.chat-head {
  display: flex; align-items: center; gap: 11px; padding: 15px 16px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%); color: #fff;
  flex-shrink: 0;
}
.chat-head .chat-av {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: grid; place-items: center; background: rgba(255,255,255,.14); color: var(--accent-pale);
  font-family: var(--serif); font-size: 17px;
}
.chat-head .chat-av img { width: 100%; height: 100%; object-fit: cover; }
.chat-head h4 { font-family: var(--serif); font-size: 17px; font-weight: 400; line-height: 1.2; }
.chat-head .chat-state { font-size: 12px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 6px; }
.chat-head .chat-state::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: #38d39f;
  box-shadow: 0 0 0 3px rgba(56,211,159,.25);
}
.chat-head .chat-close {
  margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff;
}
.chat-head .chat-close:hover { background: rgba(255,255,255,.2); }
.chat-head .chat-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.chat-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px; background: var(--cream); }
.chat-intro { padding: 18px 16px 8px; text-align: center; }
.chat-intro p { font-size: 14px; color: var(--ink-2); }
.chat-intro .bn-sub { font-size: 14.5px; margin-top: 6px; }

.chat-msg { display: flex; flex-direction: column; margin-bottom: 12px; max-width: 86%; }
.chat-msg.from-customer { margin-left: auto; align-items: flex-end; }
.chat-msg .bubble {
  padding: 11px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.65;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.chat-msg.from-customer .bubble {
  background: var(--brand); border-color: var(--brand); color: #fff; border-bottom-right-radius: 4px;
}
.chat-msg.from-staff .bubble { border-bottom-left-radius: 4px; }
.chat-msg.from-system .bubble {
  background: var(--surface-2); border-style: dashed; font-size: 13.5px; color: var(--ink-2);
  margin: 0 auto; text-align: center;
}
.chat-msg .meta { font-size: 11.5px; color: var(--ink-3); margin-top: 5px; padding: 0 4px; }
.chat-msg .bubble.bn { font-family: var(--bn); }

.chat-typing { display: flex; gap: 4px; padding: 12px 14px; }
.chat-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); display: block;
  animation: chatBounce 1.2s infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chatBounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

.chat-foot { border-top: 1px solid var(--line); background: var(--surface); padding: 12px 14px; flex-shrink: 0; }
.chat-compose { display: flex; gap: 9px; align-items: flex-end; }
.chat-compose textarea {
  flex: 1; min-height: 44px; max-height: 120px; resize: none; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: #fff;
  font-size: 15px; line-height: 1.5;
}
.chat-compose textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(108,1,20,.07); }
.chat-send {
  width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--r-xs); border: 0;
  display: grid; place-items: center; background: var(--brand); color: #fff;
}
.chat-send:hover { background: var(--brand-deep); }
.chat-send[disabled] { opacity: .45; }
.chat-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.chat-hint { font-size: 12px; color: var(--ink-3); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.chat-hint svg { width: 12px; height: 12px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.chat-err { font-size: 13px; color: var(--err); margin-top: 8px; }
.chat-form { display: grid; gap: 11px; }
.chat-form .field label { font-size: 12px; }

/* A "we are here" strip on the contact page. */
.support-card { display: grid; gap: 16px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.support-card h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--brand); }
.support-card .bn-sub { font-size: 14.5px; }
.support-row { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.support-row svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 3px; color: var(--accent); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Reference badge for a support ticket. */
.ref-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border-radius: 100px; background: var(--surface-2); border: 1px dashed var(--line-strong);
  font-family: var(--serif); font-size: 15px; letter-spacing: .08em; color: var(--brand);
}