/* ==========================================================================
   WRB UI — weRbangali storefront design framework
   --------------------------------------------------------------------------
   Direction: "Bengali indie apparel house" — sindoor red on warm paper,
   ink text, marigold accents, chunky display type, flat surfaces with
   hairline borders.

   Rules of the framework:
   • Mobile-first. min-width queries only: 640 / 900 / 1200.
   • Token-driven: change :root, change the brand.
   • Budget: this file ≤ 28KB raw. No external origins (font self-hosted).
   • Layers: tokens → base → layout → components → utilities.
   • Legacy class names from the scaffold (.btn .chip .card .qty .summary
     .field .alert .grid .two-col .line-item .pin-row .crumbs .block …)
     are preserved and restyled so un-redesigned pages keep working.
   See resources/views/storefront/DESIGN.md for the usage reference.
   ========================================================================== */

@layer tokens, base, layout, components, utilities;

/* ---------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    /* color */
    --ink: #211d1c;
    --ink-2: #6b6360;
    --paper: #faf6ef;
    --surface: #fff;
    --line: #e8e0d4;
    --brand: #e23530;      /* sindoor */
    --brand-deep: #b71d13; /* hover / text on light (AA) */
    --brand-tint: #fdeeea;
    --haldi: #f2a71b;      /* marigold accent */
    --haldi-tint: #fdf3dd;
    --ok: #1a7f4b;
    --ok-tint: #e7f5ec;

    /* semantic */
    --bg: var(--paper);
    --text: var(--ink);
    --muted: var(--ink-2);

    /* type — Ubuntu is the weRbangali theme font */
    --font-display: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --fs--1: clamp(.78rem, .74rem + .2vw, .84rem);
    --fs-0: clamp(.95rem, .92rem + .15vw, 1rem);
    --fs-1: clamp(1.05rem, 1rem + .3vw, 1.2rem);
    --fs-2: clamp(1.25rem, 1.14rem + .55vw, 1.55rem);
    --fs-3: clamp(1.55rem, 1.32rem + 1.15vw, 2.2rem);
    --fs-4: clamp(2rem, 1.55rem + 2.2vw, 3.1rem);

    /* space (4px base) */
    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 40px; --s8: 48px; --s9: 64px;

    /* shape & chrome */
    --radius: 6px;
    --radius-lg: 12px;
    --shadow: 0 6px 24px rgb(33 29 28 / .10);
    --container: 1200px;
    --header-h: 56px;

    /* z */
    --z-header: 50;
    --z-drawer: 90;
    --z-toast: 100;
  }
}

/* ------------------------------------------------------------------ base */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body {
    font-family: var(--font-body);
    font-size: var(--fs-0);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.01em;
    text-wrap: balance;
  }
  h1 { font-size: var(--fs-4); }
  h2 { font-size: var(--fs-3); }
  h3 { font-size: var(--fs-2); }
  h4, h5, h6 { line-height: 1.25; }
  p { text-wrap: pretty; }

  img, svg, video { display: block; max-width: 100%; height: auto; }

  a { color: inherit; text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }

  button { font: inherit; color: inherit; }

  input, select, textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    color: var(--text);
    background: var(--surface);
  }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ink);
  }

  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius);
  }

  ::selection { background: var(--haldi); color: var(--ink); }

  [x-cloak] { display: none !important; }

  .skip-link {
    position: absolute;
    left: var(--s3); top: var(--s3);
    z-index: calc(var(--z-toast) + 1);
    padding: var(--s2) var(--s4);
    background: var(--ink); color: #fff;
    border-radius: var(--radius);
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }

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

/* ---------------------------------------------------------------- layout */
@layer layout {
  .container {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s4);
  }

  .stack > * + * { margin-top: var(--s4); }
  .stack-lg > * + * { margin-top: var(--s6); }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: center;
  }

  .section { margin-block: var(--s7); }
  @media (min-width: 900px) { .section { margin-block: var(--s9); } }

  .section-head { margin-bottom: var(--s5); }
  .section-head .eyebrow {
    display: block;
    font-size: var(--fs--1);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--brand-deep);
    margin-bottom: var(--s1);
  }
  .section-head h2 { margin: 0; }
  .section-head .sub { color: var(--muted); margin-top: var(--s1); }

  /* product grid: 2 → 3 → 4 */
  .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
  }
  @media (min-width: 640px) { .grid { grid-template-columns: repeat(3, 1fr); gap: var(--s4); } }
  @media (min-width: 900px) { .grid { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }

  /* mobile swipe row → desktop grid */
  .scroll-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    gap: var(--s3);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--s4);
    padding-bottom: var(--s3);
    scrollbar-width: none;
  }
  .scroll-row::-webkit-scrollbar { display: none; }
  .scroll-row > * { scroll-snap-align: start; }
  @media (min-width: 640px) { .scroll-row { grid-auto-columns: 31%; } }
  @media (min-width: 900px) {
    .scroll-row {
      grid-auto-flow: row;
      grid-auto-columns: unset;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--s5);
      overflow: visible;
      padding-bottom: 0;
    }
  }

  .two-col {
    display: grid;
    gap: var(--s5);
    align-items: start;
  }
  @media (min-width: 900px) { .two-col { grid-template-columns: 2fr 1fr; gap: var(--s6); } }
}

/* ------------------------------------------------------------ components */
@layer components {

  /* Buttons ------------------------------------------------------------ */
  .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--s2);
    padding: 12px 20px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font-weight: 600;
    font-size: var(--fs-0);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .btn:hover { text-decoration: none; background: var(--ink); color: #fff; }
  .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
  .btn-primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
  .btn-block { display: flex; width: 100%; }
  .btn.small { padding: 6px 12px; font-size: var(--fs--1); }
  .btn:disabled, .btn.disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }

  /* Badges & chips ------------------------------------------------------ */
  .badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: var(--fs--1);
    font-weight: 700;
    line-height: 1.3;
  }
  .badge-off { background: var(--haldi); color: var(--ink); }
  .badge-oos { background: var(--ink); color: #fff; }
  .badge-cod { background: var(--ok-tint); color: var(--ok); }

  .chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
  .chip {
    min-width: 44px;
    padding: 9px 14px;
    border: 1.5px solid var(--ink);
    border-radius: var(--radius);
    background: var(--surface);
    text-align: center;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s;
  }
  .chip.round { border-radius: 999px; }
  .chip:hover { background: var(--brand-tint); }
  .chip.selected { background: var(--ink); border-color: var(--ink); color: #fff; }
  .chip.soldout { opacity: .35; text-decoration: line-through; cursor: not-allowed; }

  /* Product card -------------------------------------------------------- */
  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
  }
  .card:hover { text-decoration: none; border-color: var(--ink-2); box-shadow: var(--shadow); }
  .card .thumb { position: relative; aspect-ratio: 1 / 1; background: var(--paper); overflow: hidden; }
  .card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
  .card .thumb .alt { position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
  @media (hover: hover) {
    .card:hover .thumb img { transform: scale(1.04); }
    .card:hover .thumb .alt { opacity: 1; transform: none; }
  }
  .card .badge { position: absolute; top: var(--s2); left: var(--s2); }
  .card .badge.tag { left: auto; right: var(--s2); background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
  .card .body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s1); flex: 1; }
  .card .name {
    font-size: var(--fs--1);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
  }
  .card .price { font-weight: 700; font-size: var(--fs-0); margin-top: auto; }
  .card .mrp { color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: var(--fs--1); margin-left: var(--s1); }
  .oos { color: var(--brand-deep); font-size: var(--fs--1); font-weight: 600; }
  .low-stock {
    display: inline-flex; align-items: center; gap: var(--s1);
    margin-top: var(--s2);
    padding: 4px 12px;
    background: var(--haldi-tint); color: #8a5a00;
    border: 1px solid var(--haldi); border-radius: 999px;
    font-size: var(--fs--1); font-weight: 700;
  }
  .low-stock::before { content: '🔥'; }

  /* Header --------------------------------------------------------------- */
  .promo-strip {
    background: var(--brand);
    color: #fff;
    text-align: center;
    font-size: var(--fs--1);
    font-weight: 600;
    padding: 6px var(--s4);
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .site-header .bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--s3);
    height: var(--header-h);
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--s4);
  }
  .site-header .logo { justify-self: start; }
  .site-header .logo img { height: 36px; width: auto; }

  .icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border: 0; background: none;
    border-radius: var(--radius);
    cursor: pointer;
  }
  .icon-btn:hover { background: var(--paper); }
  .icon-btn svg { width: 24px; height: 24px; }

  .header-actions { display: flex; gap: var(--s1); align-items: center; justify-self: end; }
  .cart-link { position: relative; }
  .cart-badge {
    position: absolute;
    top: 2px; right: 0;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    background: var(--brand);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
  }

  .site-nav { display: none; }
  @media (min-width: 900px) {
    .site-nav { display: flex; gap: var(--s5); justify-self: center; }
    .site-nav a { font-size: var(--fs--1); font-weight: 600; letter-spacing: .02em; }
    .site-nav a:hover { color: var(--brand-deep); text-decoration: none; }
    .menu-btn { display: none; }
    .site-header .logo img { height: 40px; }
  }

  /* Mobile drawer -------------------------------------------------------- */
  .drawer-overlay {
    position: fixed; inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: rgb(33 29 28 / .5);
  }
  .nav-drawer {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    z-index: var(--z-drawer);
    width: min(320px, 85vw);
    background: var(--surface);
    padding: var(--s5) var(--s5) var(--s7);
    overflow-y: auto;
    box-shadow: var(--shadow);
  }
  .nav-drawer .group { margin-top: var(--s5); }
  .nav-drawer .group-label {
    font-size: var(--fs--1);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: var(--s2);
  }
  .nav-drawer a {
    display: block;
    padding: var(--s2) 0;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
  }
  .nav-drawer a:hover { color: var(--brand-deep); text-decoration: none; }

  /* Hero ------------------------------------------------------------------ */
  .hero { display: block; margin-top: var(--s4); }
  .hero img, .hero picture {
    width: 100%;
    aspect-ratio: 1 / 1;               /* mobile banner is 600×600 */
    object-fit: cover;
    border-radius: var(--radius-lg);
    background: var(--line);
  }
  @media (min-width: 900px) {
    .hero img, .hero picture { aspect-ratio: 2400 / 899; }  /* desktop banner */
  }
  .hero-text {
    display: grid;
    place-content: center;
    text-align: center;
    gap: var(--s3);
    aspect-ratio: unset;
    padding: var(--s8) var(--s4);
    background: var(--brand);
    color: #fff;
    border-radius: var(--radius-lg);
  }
  .hero-text h2 { font-size: var(--fs-4); }

  /* USP strip -------------------------------------------------------------- */
  .usp-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s2);
    margin-top: var(--s4);
    padding: var(--s3) 0;
    border-block: 1px solid var(--line);
    text-align: center;
  }
  .usp-strip .usp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s1);
    font-size: var(--fs--1);
    font-weight: 600;
    color: var(--ink);
  }
  .usp-strip svg { width: 22px; height: 22px; color: var(--brand-deep); }
  @media (min-width: 640px) {
    .usp-strip .usp { flex-direction: row; justify-content: center; gap: var(--s2); }
  }

  /* Collection tiles --------------------------------------------------------- */
  .tiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s3);
  }
  @media (min-width: 900px) { .tiles { grid-template-columns: repeat(4, 1fr); gap: var(--s4); } }
  .tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--s5);
    min-height: 120px;
    padding: var(--s4);
    border-radius: var(--radius-lg);
    background: var(--ink);
    color: #fff;
    transition: transform .15s;
  }
  .tile:hover { text-decoration: none; transform: translateY(-2px); }
  .tile .t-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); line-height: 1.1; }
  .tile .t-cta { font-size: var(--fs--1); font-weight: 600; opacity: .85; }
  .tile.brand { background: var(--brand); }
  .tile.haldi { background: var(--haldi); color: var(--ink); }
  .tile.paper { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }

  /* Forms ---------------------------------------------------------------- */
  .field { margin-bottom: var(--s4); }
  .field label { display: block; font-size: var(--fs--1); font-weight: 600; margin-bottom: var(--s1); }
  .error-text { color: var(--brand-deep); font-size: var(--fs--1); margin-top: var(--s1); }
  .field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--brand-deep); }
  .pin-row { display: flex; gap: var(--s2); }
  .pin-row input { flex: 1; }

  /* Alerts & toast --------------------------------------------------------- */
  .alert { padding: var(--s3) var(--s4); border-radius: var(--radius); margin-block: var(--s3); font-size: var(--fs-0); }
  .alert-ok { background: var(--ok-tint); color: var(--ok); }
  .alert-err { background: var(--brand-tint); color: var(--brand-deep); }

  .toast {
    position: fixed;
    z-index: var(--z-toast);
    left: var(--s4); right: var(--s4);
    bottom: var(--s5);
    padding: var(--s3) var(--s4);
    background: var(--ink);
    color: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-weight: 600;
    text-align: center;
  }
  @media (min-width: 640px) {
    .toast { left: auto; right: var(--s5); bottom: auto; top: calc(var(--header-h) + var(--s4)); max-width: 320px; }
  }

  /* Commerce widgets ---------------------------------------------------------- */
  .qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--surface); }
  .qty button { width: 38px; height: 38px; border: 0; background: none; font-size: var(--fs-1); cursor: pointer; }
  .qty button:disabled { opacity: .35; cursor: not-allowed; }
  .qty span { width: 40px; text-align: center; font-weight: 700; }

  .summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s5); }
  .summary h3 { margin-bottom: var(--s3); }
  .summary .row { display: flex; justify-content: space-between; padding: var(--s1) 0; }
  .summary .row.total { border-top: 1px solid var(--line); margin-top: var(--s2); padding-top: var(--s3); font-weight: 700; font-size: var(--fs-1); }
  @media (min-width: 900px) {
    .cart-summary, .checkout-summary { position: sticky; top: calc(var(--header-h) + var(--s4)); }
  }

  .link-btn { background: none; border: 0; padding: 0; color: var(--brand-deep); font-size: var(--fs--1); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .link-btn:disabled { opacity: .4; cursor: not-allowed; }

  .line-item {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: var(--s3);
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .line-item:last-child { border-bottom: 0; }

  /* Order status / manage page ------------------------------------------------
     Doubles as the post-checkout receipt (.is-new) and the page Track lands on. */
  .order-hero {
    padding: var(--s6) var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(120% 140% at 50% 0%, var(--brand-tint), transparent 62%),
      linear-gradient(180deg, var(--surface), var(--paper));
    text-align: center;
  }
  .order-hero.is-new {
    border-color: var(--ok);
    background: linear-gradient(180deg, var(--ok-tint), var(--surface));
  }
  .order-hero .oh-badge {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    font-size: var(--fs--1); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep);
  }
  .order-hero.is-new .oh-badge { color: var(--ok); border-color: var(--ok); }
  .order-hero h1 { margin-top: var(--s3); font-size: var(--fs-3); }
  .order-hero p { margin-top: var(--s2); }
  .order-hero .oh-meta {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s2); margin-top: var(--s4);
  }
  .order-hero .oh-chip {
    padding: 6px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--surface);
    font-size: var(--fs--1); font-weight: 600; color: var(--text);
  }
  button.oh-chip { cursor: pointer; transition: border-color .15s, background .15s; }
  button.oh-chip:hover { border-color: var(--ink); background: var(--paper); }

  /* Progress bar: vertical on phones, horizontal from 640px. The connector is a
     ::before on each step, so it can't outrun the number of steps rendered. */
  .order-steps { display: grid; gap: var(--s3); margin: var(--s5) 0 var(--s4); }
  .order-steps .ostep {
    position: relative;
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-areas: "dot label" "dot note";
    gap: 0 var(--s3);
    padding-bottom: var(--s3);
    color: var(--muted);
  }
  .order-steps .os-dot {
    grid-area: dot;
    position: relative;
    z-index: 1;                 /* the connector is positioned too — keep it behind */
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 999px;
    border: 2px solid var(--line); background: var(--surface);
    font-size: var(--fs--1); font-weight: 700; line-height: 1;
  }
  .order-steps .os-label { grid-area: label; font-weight: 700; color: var(--text); }
  .order-steps .os-note { grid-area: note; font-size: var(--fs--1); }
  .order-steps .ostep.done .os-dot { border-color: var(--ok); background: var(--ok); color: #fff; }
  .order-steps .ostep.now .os-dot { border-color: var(--brand); background: var(--brand); color: #fff; }
  .order-steps .ostep.now .os-label { color: var(--brand-deep); }
  /* connector between dots — inset at both ends so it meets the rims, not the dots */
  .order-steps .ostep::before {
    content: ""; position: absolute; z-index: 0;
    left: 13px; top: 32px; bottom: 4px; width: 2px;
    background: var(--line);
  }
  .order-steps .ostep:last-child::before { display: none; }
  .order-steps .ostep.done::before { background: var(--ok); }

  @media (min-width: 640px) {
    .order-steps { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; text-align: center; }
    .order-steps .ostep {
      grid-template-columns: 1fr;
      grid-template-areas: "dot" "label" "note";
      justify-items: center;
      gap: var(--s2) 0;
      padding: 0 var(--s2);
    }
    .order-steps .ostep::before {
      left: calc(50% + 20px); right: calc(-50% + 20px); top: 13px; bottom: auto;
      width: auto; height: 2px;
    }
  }

  .order-flag {
    margin-top: var(--s4); padding: var(--s3) var(--s4);
    border: 1px solid var(--haldi); border-radius: var(--radius);
    background: var(--haldi-tint); font-size: var(--fs--1);
  }

  /* Per-item status, colour-coded by outcome rather than by step */
  .status-pill {
    display: inline-block; margin-top: var(--s2);
    padding: 2px 10px; border-radius: 999px;
    background: var(--paper); border: 1px solid var(--line);
    font-size: var(--fs--1); font-weight: 700;
  }
  .status-pill.status-delivered { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
  .status-pill.status-cancelled { background: var(--paper); border-color: var(--ink-2); color: var(--ink-2); }
  .status-pill.status-shipped,
  .status-pill.status-out-for-delivery { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-deep); }
  .status-pill[class*="status-return"] { background: var(--haldi-tint); border-color: var(--haldi); color: #8a5b00; }

  .item-confirm {
    margin-top: var(--s3); padding: var(--s3);
    border: 1px dashed var(--line); border-radius: var(--radius);
    background: var(--paper);
  }

  .order-help {
    display: grid; gap: var(--s3);
    margin-top: var(--s5); padding: var(--s4);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface);
  }
  @media (min-width: 560px) {
    .order-help { grid-template-columns: 1fr auto; align-items: center; gap: var(--s4); }
  }
  .btn-wa {
    gap: var(--s2);
    background: #25d366; border-color: #25d366; color: #08331a;
  }
  .btn-wa:hover { background: #1fbb5a; border-color: #1fbb5a; color: #08331a; }
  .btn-wa svg { width: 18px; height: 18px; }

  /* free-shipping progress (cart) */
  .ship-progress {
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    font-size: var(--fs--1);
    font-weight: 600;
  }
  .ship-progress .track { height: 6px; margin-top: var(--s2); background: var(--line); border-radius: 999px; overflow: hidden; }
  .ship-progress .fill { height: 100%; background: var(--ok); border-radius: 999px; transition: width .3s; }

  /* numbered step heading (checkout blocks) */
  .step { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s3); }
  .step .n {
    width: 24px; height: 24px;
    display: grid; place-content: center;
    background: var(--ink); color: #fff;
    border-radius: 999px;
    font-size: var(--fs--1); font-weight: 700;
  }
  .step h3 { margin: 0; font-size: var(--fs-1); }
  .line-item img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }

  .block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--s4); margin-block: var(--s4); }
  .block h3 { font-size: var(--fs-0); margin-bottom: var(--s2); }
  details.block > summary { font-weight: 700; cursor: pointer; }
  details.block[open] > summary { margin-bottom: var(--s3); }

  /* Rich text (product description, CMS pages) */
  .prose { max-width: 68ch; line-height: 1.7; }
  .prose > * + * { margin-top: var(--s4); }
  .prose h1, .prose h2, .prose h3 { margin-top: var(--s6); line-height: 1.2; }
  .prose h2 { font-size: var(--fs-2); }
  .prose h3 { font-size: var(--fs-1); }
  .prose ul, .prose ol { padding-left: 1.4em; }
  .prose li + li { margin-top: var(--s1); }
  .prose img { border-radius: var(--radius); margin-block: var(--s4); }
  .prose a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 2px; }
  .prose table { width: 100%; border-collapse: collapse; }
  .prose td, .prose th { padding: 6px 10px; border: 1px solid var(--line); }

  /* Home "our story" teaser — same alpona motif as /pages/about, so the two
     pages read as one voice. */
  .home-about {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: var(--s5);
    justify-items: center;
    padding: var(--s6) var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(80% 120% at 100% 0%, var(--haldi-tint), transparent 62%),
      var(--surface);
    text-align: center;
  }
  @media (min-width: 820px) {
    .home-about {
      grid-template-columns: 132px 1fr;
      align-items: center;
      gap: var(--s7);
      padding: var(--s7);
      text-align: left;
      justify-items: start;
    }
  }
  .home-about .ha-motif {
    display: inline-flex; align-items: center; justify-content: center;
    width: 108px; height: 108px; flex: none;
    border-radius: 50%;
    background: var(--paper);
    color: var(--haldi);
  }
  @media (min-width: 820px) { .home-about .ha-motif { width: 132px; height: 132px; } }
  .home-about .ha-motif svg { width: 74%; height: auto; }
  .home-about h2 { margin-top: var(--s3); font-size: var(--fs-2); }
  .home-about p { max-width: 62ch; margin-top: var(--s3); color: var(--muted); line-height: 1.7; }
  .home-about .btn { margin-top: var(--s5); }

  /* About page --------------------------------------------------------------
     Bengali motifs carry the page: alpona rosettes (doorstep rice-paste art)
     and kantha running-stitch rules between sections. Both are decorative and
     aria-hidden; nothing here is load-bearing for the content. */
  .about { padding-block: var(--s5) var(--s8); }
  .about section { margin-top: var(--s9); }

  /* Ubuntu has no Bengali glyphs — hand these runs to the platform's own */
  .bn {
    font-family: 'Noto Sans Bengali', 'Kohinoor Bangla', 'Nirmala UI', 'Shonar Bangla', var(--font-body);
    font-weight: 500;
  }

  .kantha {
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--haldi) 0 12px, transparent 12px 22px);
    opacity: .75;
  }

  .ab-hero {
    position: relative;
    overflow: hidden;
    padding: var(--s8) var(--s5) 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(120% 130% at 50% 0%, var(--brand-tint), transparent 60%),
      linear-gradient(180deg, var(--surface), var(--paper));
    text-align: center;
  }
  @media (min-width: 900px) { .ab-hero { padding: var(--s9) var(--s7) 0; } }
  .ab-hero .kantha { margin: var(--s7) calc(var(--s5) * -1) 0; }
  @media (min-width: 900px) { .ab-hero .kantha { margin-inline: calc(var(--s7) * -1); } }

  .ab-alpona { position: absolute; color: var(--haldi); opacity: .35; pointer-events: none; }
  .ab-alpona svg { width: 100%; height: auto; }
  .ab-alpona--tl { top: calc(var(--s6) * -1); left: calc(var(--s6) * -1); width: 150px; }
  .ab-alpona--br { bottom: calc(var(--s7) * -1); right: calc(var(--s6) * -1); width: 190px; }
  /* On a narrow hero the motifs would sit under the copy — push them further
     into the corners and fade them so the text stays the loudest thing. */
  @media (max-width: 719px) {
    .ab-alpona { opacity: .26; }
    .ab-alpona--tl { width: 104px; top: -34px; left: -38px; }
    .ab-alpona--br { width: 124px; bottom: -46px; right: -46px; }
  }

  .ab-eyebrow {
    position: relative;
    font-size: var(--fs--1); font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase; color: var(--brand-deep);
  }
  .ab-hero h1 { position: relative; margin-top: var(--s3); font-size: var(--fs-4); }
  .ab-lede {
    position: relative;
    max-width: 60ch; margin: var(--s4) auto 0;
    color: var(--muted); line-height: 1.7;
  }

  .ab-head { max-width: 60ch; margin-bottom: var(--s6); }
  .ab-kicker {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--fs--1); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--brand-deep);
  }
  .ab-kicker::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--haldi); }
  .ab-kicker.light { color: var(--haldi); }
  .ab-head h2 { margin-top: var(--s3); font-size: var(--fs-3); }

  /* Journey: numbered by the ordered list itself, so the markup stays honest */
  .ab-journey { display: grid; gap: var(--s5); padding: 0; list-style: none; counter-reset: step; }
  @media (min-width: 820px) { .ab-journey { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
  .ab-journey li {
    position: relative;
    counter-increment: step;
    padding: var(--s5) var(--s4) var(--s4);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .ab-journey li::after {
    content: counter(step, decimal);
    position: absolute; top: var(--s4); right: var(--s4);
    font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700;
    color: var(--line); line-height: 1;
  }
  .ab-journey .aj-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand-deep);
  }
  .ab-journey .aj-ico svg { width: 26px; height: 26px; }
  .ab-journey h3 { margin-top: var(--s3); font-size: var(--fs-1); }
  .ab-journey p { margin-top: var(--s2); color: var(--muted); line-height: 1.7; }

  .ab-invite {
    position: relative; overflow: hidden;
    padding: var(--s7) var(--s5);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-deep), var(--brand) 62%, #ee6a3a);
    color: #fff;
  }
  @media (min-width: 900px) { .ab-invite { padding: var(--s8) var(--s7); } }
  .ab-invite .ab-alpona--watermark {
    top: 50%; right: calc(var(--s7) * -1); translate: 0 -50%;
    width: 260px; color: #fff; opacity: .16;
  }
  .ab-invite-body { position: relative; max-width: 62ch; }
  .ab-invite h2 { margin-top: var(--s3); font-size: var(--fs-3); }
  .ab-invite p { margin-top: var(--s3); line-height: 1.75; color: rgb(255 255 255 / .92); }
  .ab-invite .btn {
    margin-top: var(--s5);
    background: #fff; border-color: #fff; color: var(--brand-deep);
  }
  .ab-invite .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--brand-deep); }

  .ab-values { display: grid; gap: var(--s4); }
  @media (min-width: 820px) { .ab-values { grid-template-columns: repeat(3, 1fr); } }
  .ab-value {
    padding: var(--s5) var(--s4);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface);
  }
  .ab-value .av-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius);
    background: var(--haldi-tint); color: #8a5b00;
  }
  .ab-value .av-ico svg { width: 26px; height: 26px; }
  .ab-value h3 { margin-top: var(--s3); font-size: var(--fs-1); }
  .ab-value p { margin-top: var(--s2); color: var(--muted); line-height: 1.7; }

  .ab-note { text-align: center; }
  .ab-note .kantha { max-width: 320px; margin: 0 auto var(--s6); }
  .ab-signoff {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-2); color: var(--brand-deep);
  }
  .ab-ps { max-width: 52ch; margin: var(--s3) auto 0; color: var(--muted); }
  .ab-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-top: var(--s6); }

  /* Pujo countdown (home, under the hero) -----------------------------------
     Night-of-the-pandal palette: deep ink ground, sindoor bleeding in, marigold
     digits. Sits between the hero and the USP strip, so it gets its own top
     margin rather than .section's symmetric block margin. */
  .pujo-band {
    position: relative;
    overflow: hidden;
    display: grid; gap: var(--s5);
    margin-top: var(--s5);
    padding: var(--s6) var(--s5);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(85% 140% at 100% 0%, rgb(242 167 27 / .28), transparent 60%),
      linear-gradient(135deg, #2b1512, var(--brand-deep) 82%);
    color: #fff;
  }
  @media (min-width: 900px) {
    .pujo-band {
      grid-template-columns: 1fr auto;
      grid-template-areas: "copy clock" "cta clock";
      column-gap: var(--s7); row-gap: var(--s5);
      padding: var(--s7);
      align-items: center;
    }
    .pujo-band .pb-copy  { grid-area: copy; }
    .pujo-band .pb-clock { grid-area: clock; }
    .pujo-band .pb-cta   { grid-area: cta; }
  }
  .pujo-band .pb-motif {
    position: absolute; right: -34px; bottom: -30px;
    width: 190px; color: var(--haldi); opacity: .15;
    pointer-events: none;
  }
  @media (min-width: 900px) { .pujo-band .pb-motif { right: -26px; bottom: -26px; width: 220px; } }
  .pujo-band .pb-motif svg { width: 100%; height: auto; }

  .pb-eyebrow {
    display: block;
    font-size: var(--fs--1); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--haldi);
  }
  .pujo-band h2 { margin-top: var(--s2); font-size: var(--fs-3); line-height: 1.15; }
  .pb-latin {
    display: block; margin-top: 2px;
    font-family: var(--font-body); font-weight: 400;
    font-size: var(--fs-0); letter-spacing: .02em; color: rgb(255 255 255 / .72);
  }
  .pb-date { margin-top: var(--s3); color: rgb(255 255 255 / .86); line-height: 1.7; }
  .pb-date strong { color: var(--haldi); }

  .pb-clock { position: relative; }
  /* 4 equal tracks rather than a flex row: on a 360px phone the boxes have to
     share whatever is left after the container and band padding, and minmax(0)
     lets them shrink instead of pushing the band into a sideways scroll. */
  .pb-units {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s2);
    text-align: center;
  }
  @media (min-width: 900px) { .pb-units { gap: var(--s3); } }
  .pb-unit {
    padding: var(--s3) var(--s2);
    border: 1px solid rgb(255 255 255 / .18);
    border-radius: var(--radius);
    background: rgb(255 255 255 / .09);
  }
  @media (min-width: 900px) { .pb-unit { min-width: 82px; padding: var(--s4) var(--s3); } }
  .pb-unit strong {
    display: block;
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-3); line-height: 1;
    /* tabular figures or the seconds box twitches on every tick */
    font-variant-numeric: tabular-nums;
    color: var(--haldi);
  }
  .pb-unit span {
    display: block; margin-top: 5px;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: rgb(255 255 255 / .68);
  }
  .pb-until {
    margin-top: var(--s3);
    text-align: center;
    font-size: var(--fs--1); letter-spacing: .1em; text-transform: uppercase;
    color: rgb(255 255 255 / .6);
  }
  .pb-until .bn { letter-spacing: 0; text-transform: none; color: var(--haldi); }
  .pb-over { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); color: var(--haldi); }

  .pujo-band .pb-cta {
    background: #fff; border-color: #fff; color: var(--brand-deep);
    justify-self: start;
  }
  .pujo-band .pb-cta:hover { background: var(--paper); border-color: var(--paper); color: var(--brand-deep); }

  /* Fanbook -----------------------------------------------------------------
     A scrapbook wall: polaroid frames pinned to dotted paper, each one tilted
     a hair. The tilt is per-nth-child so it stays deterministic without JS,
     and hover/focus straightens the card — the "pick it up and look" gesture.
     Hero / invite band / sign-off reuse the About page set (.ab-*): same voice,
     no second copy of those rules. */
  .fanbook { padding-block: var(--s5) var(--s8); }
  .fanbook > section { margin-top: var(--s9); }

  .fb-tags {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s2);
    margin-top: var(--s6); padding: 0;
    list-style: none;
  }
  .fb-tags li {
    padding: 5px 12px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface);
    font-size: var(--fs--1); font-weight: 500; color: var(--ink-2);
  }

  /* The wall. CSS columns, not grid: photos keep their own aspect ratio and
     tile with no gaps, which is the whole look. */
  .fb-wall {
    columns: 2; column-gap: var(--s3);
    padding: var(--s4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(circle at 1px 1px, rgb(33 29 28 / .10) 1px, transparent 0) 0 0 / 22px 22px,
      var(--paper);
  }
  @media (min-width: 640px) { .fb-wall { columns: 3; column-gap: var(--s4); padding: var(--s5); } }
  @media (min-width: 1200px) { .fb-wall { columns: 4; } }

  .fb-card {
    position: relative;
    display: block; width: 100%;
    break-inside: avoid;
    margin-bottom: var(--s3);
    padding: 6px 6px 0;
    border: 0;
    border-radius: 3px;
    background: var(--surface);
    box-shadow: 0 2px 10px rgb(33 29 28 / .16);
    text-align: left;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  @media (min-width: 640px) { .fb-card { margin-bottom: var(--s4); padding: 8px 8px 0; } }
  a.fb-card, button.fb-card { cursor: pointer; }
  .fb-card .fb-shot { display: block; overflow: hidden; background: var(--paper); }
  .fb-card img { display: block; width: 100%; height: auto; }
  .fb-lip {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s2); padding: 6px 2px 7px;
  }
  .fb-mark {
    font-family: var(--font-display); font-weight: 700;
    font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-2); opacity: .65;
  }
  .fb-no { font-size: 11px; line-height: 1; color: var(--haldi); }

  /* Deterministic scatter — the 2/3/5/7 cycle keeps neighbours from matching
     however many columns the viewport gives us. */
  .fb-wall > * { transform: rotate(-.9deg); }
  .fb-wall > :nth-child(2n) { transform: rotate(1deg); }
  .fb-wall > :nth-child(3n) { transform: rotate(-1.7deg); }
  .fb-wall > :nth-child(5n) { transform: rotate(1.8deg); }
  .fb-wall > :nth-child(7n) { transform: rotate(0deg); }

  /* Bit of washi tape, on every fourth card */
  .fb-wall > :nth-child(4n+3)::before {
    content: "";
    position: absolute; top: -8px; left: 50%;
    width: 54px; height: 17px;
    transform: translateX(-50%) rotate(-4deg);
    background: rgb(242 167 27 / .4);
    border-inline: 1px dashed rgb(255 255 255 / .55);
  }

  /* Scoped to the clickable cards — the home strip renders plain divs, and a
     photo that lifts under the cursor but goes nowhere is an affordance lie. */
  a.fb-card:hover, button.fb-card:hover,
  a.fb-card:focus-visible, button.fb-card:focus-visible {
    transform: rotate(0deg) translateY(-5px) scale(1.02);
    box-shadow: 0 14px 32px rgb(33 29 28 / .26);
    z-index: 2;
  }
  @media (prefers-reduced-motion: reduce) {
    .fb-card { transition: none; }
  }

  /* Slot zero: the invitation, so the ask lives inside the wall itself */
  .fb-add {
    display: grid; place-items: center; align-content: center;
    gap: var(--s2);
    min-height: 200px;
    padding: var(--s5) var(--s4);
    border: 2px dashed var(--brand);
    background: linear-gradient(180deg, var(--brand-tint), var(--surface));
    color: var(--text);
    text-align: center;
  }
  .fb-add-ico {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--brand); color: #fff;
  }
  .fb-add-ico svg { width: 22px; height: 22px; }
  .fb-add-t { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-1); }
  .fb-add-d { font-size: var(--fs--1); color: var(--muted); line-height: 1.6; }
  .fb-add strong { color: var(--brand-deep); }

  /* Get-featured band — .ab-invite carries the sindoor panel + white buttons */
  .fb-steps { display: grid; gap: var(--s2); margin-top: var(--s5); padding-left: 1.25em; }
  .fb-steps li { color: rgb(255 255 255 / .92); }
  .fb-steps strong, .fb-join p strong { color: var(--haldi); }
  .fb-join-cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
  .fb-ig { width: 17px; height: 17px; margin-right: 7px; vertical-align: -3px; }

  /* Lightbox. Teleported to <body>, so it is a sibling of .container and the
     fixed overlay can't be trapped by an ancestor's transform/overflow. */
  .fb-lightbox {
    position: fixed; inset: 0;
    z-index: var(--z-drawer);
    display: grid; align-content: center; justify-items: center;
    gap: var(--s4);
    padding: var(--s7) var(--s4);
  }
  .fb-lb-back { position: absolute; inset: 0; background: rgb(20 17 16 / .93); }
  .fb-lb-frame {
    position: relative;
    height: min(76vh, 780px);
    max-width: 100%;
    /* aspect-ratio arrives inline from the photo so the box is the right shape
       before the 1400px file has landed; object-fit takes it from there. */
  }
  .fb-lb-frame img {
    display: block; width: 100%; height: 100%;
    object-fit: contain;
    border-radius: var(--radius);
  }
  .fb-lb-cap {
    position: relative;
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--s2) var(--s4);
    font-size: var(--fs--1); color: rgb(255 255 255 / .68);
  }
  .fb-lb-tag { color: var(--haldi); }
  .fb-lb-btn {
    position: absolute; z-index: 2;
    display: grid; place-items: center;
    width: 44px; height: 44px;
    border: 0; border-radius: 999px;
    background: rgb(255 255 255 / .13); color: #fff;
    cursor: pointer;
    transition: background .15s;
  }
  .fb-lb-btn:hover { background: rgb(255 255 255 / .26); }
  .fb-lb-btn svg { width: 22px; height: 22px; }
  .fb-lb-close { top: var(--s4); right: var(--s4); }
  .fb-lb-prev { left: var(--s3); top: 50%; margin-top: -22px; }
  .fb-lb-next { right: var(--s3); top: 50%; margin-top: -22px; }
  @media (min-width: 900px) {
    .fb-lb-prev { left: var(--s6); }
    .fb-lb-next { right: var(--s6); }
  }

  /* Home teaser — a strip of the wall, spread out like photos on a table */
  .home-fans {
    position: relative;
    overflow: hidden;
    padding: var(--s6) 0 var(--s6);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(70% 120% at 0% 0%, var(--brand-tint), transparent 60%),
      var(--surface);
    text-align: center;
  }
  .home-fans .hf-head { padding-inline: var(--s5); }
  .home-fans h2 { margin-top: var(--s3); font-size: var(--fs-2); }
  .home-fans .hf-head p { max-width: 58ch; margin: var(--s3) auto 0; color: var(--muted); line-height: 1.7; }
  .home-fans > .btn { margin-top: var(--s2); }

  .fan-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: 44%;
    align-items: center;
    gap: var(--s4);
    margin-block: var(--s5);
    padding: var(--s5) var(--s5) var(--s6);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .fan-strip::-webkit-scrollbar { display: none; }
  .fan-strip > * { scroll-snap-align: center; }
  @media (min-width: 640px) { .fan-strip { grid-auto-columns: 27%; } }
  @media (min-width: 900px) { .fan-strip { grid-auto-columns: 19%; } }
  .fan-strip > :nth-child(odd) { transform: rotate(-2.2deg); }
  .fan-strip > :nth-child(even) { transform: rotate(1.9deg); }
  .fan-strip > :nth-child(3n) { transform: rotate(.8deg); }
  .fan-strip .fb-card { margin-bottom: 0; }
  .fan-strip a.fb-card:hover, .fan-strip a.fb-card:focus-visible { transform: rotate(0deg) translateY(-5px) scale(1.03); }

  .fb-more {
    display: grid; place-items: center; align-content: center;
    gap: var(--s1);
    min-height: 190px;
    padding: var(--s5) var(--s3);
    background: var(--ink); color: #fff;
    text-align: center;
  }
  .fb-more strong { font-family: var(--font-display); font-size: var(--fs-2); line-height: 1; }
  .fb-more span { font-size: var(--fs--1); color: rgb(255 255 255 / .72); }

  .crumbs { font-size: var(--fs--1); color: var(--muted); margin-block: var(--s4); }
  .crumbs a { color: var(--muted); }
  .crumbs a:hover { color: var(--brand-deep); }

  /* Listing header + empty state */
  .list-head { margin-block: var(--s4) var(--s6); }
  .list-head h1 { font-size: var(--fs-3); }
  .empty-state { text-align: center; padding: var(--s9) var(--s4); }
  .empty-state .empty-emoji { font-size: 3rem; margin-bottom: var(--s3); }
  .empty-state h2 { margin-bottom: var(--s2); }
  .empty-state .btn { margin-top: var(--s4); }

  /* PDP -------------------------------------------------------------------- */
  .pdp { display: grid; gap: var(--s6); margin-block: var(--s5); }
  @media (min-width: 900px) { .pdp { grid-template-columns: 1fr 1fr; align-items: start; } }
  @media (min-width: 900px) {
    .pdp .gallery { position: sticky; top: calc(var(--header-h) + var(--s4)); }
  }
  .gallery .main { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
  .gallery .main img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
  .gallery .thumbs { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
  .gallery .thumbs img { width: 60px; height: 60px; object-fit: cover; border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color .15s; }
  .gallery .thumbs img.active { border-color: var(--brand); }

  .pdp .eyebrow { display: block; font-size: var(--fs--1); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-deep); margin-bottom: var(--s1); }
  .pdp h1 { font-size: var(--fs-3); }
  .pdp .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-3); font-weight: 700; margin-block: var(--s3); }
  .pdp .price-row .mrp { color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: var(--fs-1); }
  .pdp .price-row .off { color: #fff; background: var(--ok); font-size: var(--fs--1); font-weight: 700; padding: 2px 8px; border-radius: 999px; }
  .pdp .tax-note { color: var(--muted); font-size: var(--fs--1); margin-top: calc(var(--s2) * -1); margin-bottom: var(--s4); }

  /* Share — sits at the end of the price row, pushed to the far edge */
  .pdp-share { position: relative; margin-left: auto; align-self: center; }
  .pdp-share .share-btn {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--text);
    font-size: var(--fs--1); font-weight: 700; cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .pdp-share .share-btn:hover { border-color: var(--ink); background: var(--paper); }
  .pdp-share .share-btn svg { width: 16px; height: 16px; }
  .pdp-share .share-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    display: grid; min-width: 168px; padding: var(--s1);
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow);
    font-size: var(--fs--1); font-weight: 600;
  }
  .pdp-share .share-menu a,
  .pdp-share .share-menu button {
    padding: 8px var(--s3); border: 0; border-radius: var(--radius);
    background: none; color: var(--text); text-align: left; cursor: pointer;
  }
  .pdp-share .share-menu a:hover,
  .pdp-share .share-menu button:hover { background: var(--paper); text-decoration: none; }

  /* Bookmark hint (order status page) */
  .bookmark-box { margin-top: var(--s4); }
  .bookmark-box .btn { justify-content: center; }
  .bm-tip {
    margin-top: var(--s2); padding: var(--s3);
    border: 1px dashed var(--line); border-radius: var(--radius);
    background: var(--paper);
  }
  .bm-tip p + p { margin-top: var(--s2); }
  .bm-tip kbd {
    display: inline-block; padding: 2px 8px;
    border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
    background: var(--surface); font-family: inherit; font-weight: 700; font-size: .95em;
  }
  .bm-tip .link-btn { margin-top: var(--s3); }

  .variants { margin-block: var(--s4); }
  .variants .label { font-weight: 700; font-size: var(--fs--1); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s2); }
  .actions { display: flex; gap: var(--s3); margin-block: var(--s5); flex-wrap: wrap; }
  .actions .btn { flex: 1; min-width: 150px; padding: 14px 20px; }

  /* PDP delivery / trust row */
  .pdp-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); margin-block: var(--s5); text-align: center; }
  .pdp-usp .u { display: flex; flex-direction: column; align-items: center; gap: var(--s1); font-size: var(--fs--1); font-weight: 600; }
  .pdp-usp svg { width: 22px; height: 22px; color: var(--brand-deep); }

  /* Offers panel — sits right under pricing to nudge coupon use */
  .offers-panel { margin-block: var(--s4); padding: var(--s4); border: 1.5px solid var(--brand); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--brand-tint), var(--surface)); }
  .offers-panel__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-bottom: var(--s3); }
  .offers-panel__title { font-size: var(--fs-1); font-weight: 800; color: var(--brand-deep); }
  .offers-panel__sub { font-size: var(--fs--1); color: var(--muted); }

  .offers { display: flex; flex-direction: column; gap: var(--s2); }
  .offer { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); border: 1px dashed var(--brand); border-radius: var(--radius); background: var(--surface); font-size: var(--fs--1); }
  .offer .code { display: inline-block; padding: 5px 11px; background: var(--brand); color: #fff; border-radius: var(--radius); font-weight: 800; letter-spacing: .06em; white-space: nowrap; }
  .offer .offer-text { flex: 1; }
  .offer .offer-link { white-space: nowrap; font-weight: 700; color: var(--brand-deep); }
  .offer .offer-link:hover { text-decoration: underline; }

  /* Mobile sticky buy bar */
  .buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s2) var(--s4);
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgb(33 29 28 / .08);
  }
  .buybar .bb-price { font-weight: 700; font-size: var(--fs-1); }
  .buybar .btn { flex: 1; }
  .buybar-spacer { height: 68px; }
  @media (min-width: 900px) { .buybar, .buybar-spacer { display: none; } }

  /* Modal (size guide) */
  .modal-overlay {
    position: fixed; inset: 0;
    z-index: var(--z-drawer);
    display: grid; place-items: center;
    padding: var(--s4);
    background: rgb(33 29 28 / .55);
  }
  .modal {
    width: 100%; max-width: 560px; max-height: 85vh;
    overflow-y: auto;
    padding: var(--s5);
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
  }
  .modal .m-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
  .modal .m-head h3 { margin: 0; }

  /* Pincode results */
  .pin-results { margin: var(--s3) 0 0; padding: var(--s3) var(--s4); list-style: none; background: var(--ok-tint); border-radius: var(--radius); }
  .pin-results li { display: flex; gap: var(--s2); align-items: baseline; padding-block: 2px; font-size: var(--fs--1); }
  .pin-results li::before { content: '✓'; color: var(--ok); font-weight: 700; }

  /* mini chip (PDP collection links) */
  .chip.mini { padding: 4px 12px; font-size: var(--fs--1); border-width: 1px; border-color: var(--line); font-weight: 600; }
  .chip.mini:hover { border-color: var(--ink); text-decoration: none; }

  /* Size guide trigger button */
  .size-guide-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--ink);
    font-size: var(--fs--1); font-weight: 600; line-height: 1; cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
  }
  .size-guide-btn svg { width: 15px; height: 15px; }
  .size-guide-btn:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }

  /* Size chart table */
  .size-table { width: 100%; border-collapse: collapse; font-size: var(--fs--1); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
  .size-table thead th { background: var(--ink); color: #fff; font-weight: 700; letter-spacing: .04em; padding: 10px 12px; text-align: center; }
  .size-table td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--line); }
  .size-table tbody tr:nth-child(odd) { background: var(--paper); }
  .size-table tbody tr:hover { background: var(--brand-tint); }
  .size-table tbody tr:last-child td { border-bottom: 0; }

  /* Size chart: unit toggle (segmented) + note + diagram */
  .unit-toggle { display: inline-flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); font-size: var(--fs--1); font-weight: 600; }
  .unit-toggle > span { color: var(--muted); }
  .unit-toggle .seg { display: inline-flex; padding: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; }
  .unit-btn { padding: 4px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-weight: 600; cursor: pointer; transition: background .15s, color .15s; }
  .unit-btn.active { background: var(--ink); color: #fff; }
  .size-note { margin-top: var(--s3); padding: var(--s2) var(--s3); background: var(--paper); border-radius: var(--radius); font-size: var(--fs--1); color: var(--muted); }
  .size-diagram { margin-top: var(--s4); text-align: center; }
  .size-diagram img { max-width: 55%; height: auto; opacity: .9; }

  /* Compact delivery / COD pincode check (secondary importance) */
  .pin-check { margin-block: var(--s4); padding: var(--s3); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--paper); }
  .pin-check__title { font-size: var(--fs--1); font-weight: 700; color: var(--muted); margin-bottom: var(--s2); }
  .pin-check .pin-row { max-width: 320px; }
  .pin-check .pin-row input { padding: 8px 10px; font-size: var(--fs--1); }
  .pin-check .btn { padding: 8px 16px; font-size: var(--fs--1); }
  .pin-check .pin-results { padding: var(--s2) var(--s3); }

  /* Footer -------------------------------------------------------------------- */
  .site-footer {
    position: relative;
    /* clip only sideways — the cutout is allowed to rise past the top edge */
    overflow-x: clip;
    margin-top: var(--s9);
    /* sindoor pooled behind the cutout, a haldi wash top-left. The glow tracks
       the cutout: centred while it's stacked, off to the right once it isn't. */
    --f-glow: 50% 74%;
    background:
      radial-gradient(42% 62% at var(--f-glow), rgb(226 53 48 / .34), transparent 68%),
      radial-gradient(52% 58% at 2% 0%, rgb(242 167 27 / .11), transparent 64%),
      linear-gradient(180deg, #2c2624, var(--ink) 66%);
    color: #cfc8c2;
    font-size: var(--fs--1);
  }
  /* barely-there weave, so the gradient doesn't read as a flat block */
  .site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .035) 0 1px, transparent 1px 10px);
    pointer-events: none;
  }
  .site-footer > .container { position: relative; }  /* above the weave */
  .site-footer a { color: #fff; }
  .site-footer a:hover { color: var(--haldi); text-decoration: none; }
  /* Phones: brand block full width, the two short link lists side by side. */
  .site-footer .cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s4);
    padding-block: var(--s5) var(--s7);
  }
  .site-footer .cols > :first-child,
  .site-footer .f-art { grid-column: 1 / -1; }
  @media (min-width: 640px) {
    .site-footer .cols {
      grid-template-columns: 1.4fr 1fr 1fr;
      gap: var(--s6);
      padding-block: var(--s6) var(--s7);
    }
    .site-footer .cols > :first-child { grid-column: auto; }
    /* until there's room for a 4th column, the cutout takes a centred row of its own */
  }
  /* Wide enough for a 4th column: the cutout is pulled up out of the row, which
     both shortens the row and breaks the figure through the footer's top edge.
     The pairs below are art direction, not rhythm — the negative margin lands
     that edge just under the model's shoulders, and the footer's own top margin
     gives the head exactly that much clear air so it never covers page content. */
  @media (min-width: 900px) {
    .site-footer { margin-top: 165px; --f-glow: 86% 58%; }
    .site-footer .cols { grid-template-columns: 1.2fr 1fr 1fr auto; align-items: start; }
    .site-footer .f-art { grid-column: auto; align-self: end; margin-top: -175px; }
  }
  @media (min-width: 1200px) {
    .site-footer { margin-top: 180px; }
    .site-footer .cols { grid-template-columns: 1.4fr 1fr 1fr auto; }
    .site-footer .f-art { margin-top: -190px; }
  }
  .site-footer .f-brand { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); color: #fff; }
  .site-footer .f-logo { display: inline-block; }
  .site-footer .f-logo img { height: 52px; width: auto; max-width: 200px; }
  .site-footer .f-social { display: flex; gap: var(--s2); margin-top: var(--s4); }
  .site-footer .f-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 999px;
    background: rgb(255 255 255 / .08); color: #fff;
    transition: background .15s, color .15s, transform .15s;
  }
  .site-footer .f-social a:hover { background: var(--brand); color: #fff; transform: translateY(-2px); }
  .site-footer .f-social svg { width: 18px; height: 18px; }
  .site-footer .f-label {
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: var(--s3);
  }
  .site-footer .f-links a { display: block; padding: var(--s1) 0; }
  .site-footer .trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3) var(--s5);
    padding-block: var(--s4);
    border-block: 1px solid rgb(255 255 255 / .12);
    font-weight: 600;
  }
  .site-footer .copy { padding-block: var(--s4); color: #8d857f; }

  /* Footer cutout ------------------------------------------------------------
     A sindoor glow pooled behind a transparent-PNG model, pulled down through
     the column row's own padding so the figure stands on the trust-bar rule. */
  .site-footer .f-art {
    position: relative;
    display: block;
    justify-self: center;
    width: min(58%, 210px);
    margin-bottom: calc(var(--s7) * -1);
  }
  @media (min-width: 640px) { .site-footer .f-art { width: 240px; } }
  @media (min-width: 900px) { .site-footer .f-art { width: 270px; } }
  @media (min-width: 1200px) { .site-footer .f-art { width: 300px; } }
  /* Both are sized off the cutout's own height so they stay under the footer's
     top edge once the figure breaks through it — hence ellipses, not circles. */
  .site-footer .f-art::before,
  .site-footer .f-art::after {
    content: "";
    position: absolute;
    left: 50%;
    z-index: 0;                 /* ::after is a later box than the img — hold it behind */
    translate: -50% 0;
    border-radius: 999px;
  }
  /* 110% keeps the glow inside the container even at exactly 1200px, so browsers
     without `overflow: clip` support can't pick up a stray horizontal scrollbar */
  .site-footer .f-art::before {
    bottom: -4%;
    width: 110%;
    height: 66%;
    background: radial-gradient(closest-side, rgb(226 53 48 / .5), rgb(226 53 48 / .12) 52%, transparent 74%);
  }
  .site-footer .f-art::after {
    bottom: 3%;
    width: 104%;
    height: 58%;
    border: 1px solid rgb(242 167 27 / .3);
  }
  .site-footer .f-art img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 22px rgb(0 0 0 / .4));
    transition: transform .25s;
  }
  .site-footer .f-art:hover img { transform: translateY(-4px); }
  @media (prefers-reduced-motion: reduce) {
    .site-footer .f-art img { transition: none; }
    .site-footer .f-art:hover img { transform: none; }
  }

  /* Checkout ----------------------------------------------------------------- */
  .field-row { display: grid; gap: 0 var(--s3); }
  @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

  .pay-opts { display: grid; gap: var(--s2); }
  .pay-opt {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    padding: var(--s3) var(--s4);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .pay-opt input { width: auto; margin-top: 5px; accent-color: var(--brand); }
  .pay-opt .t { font-weight: 700; }
  .pay-opt .d { font-size: var(--fs--1); color: var(--muted); }
  .pay-opt.selected { border-color: var(--ink); background: var(--brand-tint); }

  .mini-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: var(--s2) var(--s3);
    align-items: center;
    padding: var(--s2) 0;
    font-size: var(--fs--1);
  }
  .mini-item img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }

  .ship-note { font-size: var(--fs--1); font-weight: 600; color: var(--ok); background: var(--ok-tint); border-radius: var(--radius); padding: var(--s2) var(--s3); margin-block: var(--s3); }

  /* Legacy banner helper (special pages) --------------------------------------- */
  .banner img { width: 100%; border-radius: var(--radius-lg); }
  .banner .desktop { display: none; }
  .banner .mobile { display: block; }
  @media (min-width: 700px) {
    .banner .desktop { display: block; }
    .banner .mobile { display: none; }
  }

  /* Home campaign band --------------------------------------------------------- */
  .campaign-band {
    display: grid; gap: var(--s4);
    padding: var(--s5) var(--s4);
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--brand-deep), var(--brand) 60%, #ee6a3a);
    color: #fff;
  }
  @media (min-width: 640px) { .campaign-band { gap: var(--s5); padding: var(--s6) var(--s5); } }
  @media (min-width: 900px) {
    .campaign-band {
      grid-template-columns: 1fr 1fr;
      grid-template-areas: "copy codes" "cta codes";
      column-gap: var(--s7); row-gap: var(--s4);
      padding: var(--s7);
      align-items: start;
    }
    .campaign-band .cb-copy  { grid-area: copy; }
    .campaign-band .cb-codes { grid-area: codes; align-self: center; }
    .campaign-band .cb-cta   { grid-area: cta; justify-self: start; }
  }
  .campaign-band .eyebrow {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    background: rgb(255 255 255 / .18); color: #fff;
    font-size: var(--fs--1); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
  }
  .campaign-band h2 { margin-top: var(--s3); font-size: var(--fs-3); line-height: 1.1; }
  .campaign-band p {
    max-width: 46ch; margin-top: var(--s2);
    color: rgb(255 255 255 / .88); line-height: 1.6;
  }
  /* .btn's ghost-on-paper default is invisible here, so it inverts */
  .campaign-band .btn {
    background: #fff; border-color: #fff; color: var(--brand-deep);
  }
  .campaign-band .btn:hover { background: var(--paper); border-color: var(--paper); color: var(--brand-deep); }
  .campaign-band .cb-codes { display: grid; gap: var(--s3); align-content: center; }
  /* .coupon-card.compact carries a bottom margin for the campaign page, where it
     sits above a product grid; in here the .cb-codes gap does the spacing. */
  .campaign-band .coupon-card.compact { margin-bottom: 0; }

  /* Special / campaign page ---------------------------------------------------- */

  /* One rhythm owner. The page is a flex column so nothing collapses through the
     top edge (which used to leave the first heading jammed under the header) and
     every block is separated by exactly one gap — .section keeps its own margins
     for every other page, but hands spacing over here. */
  .special-page {
    display: flex;
    flex-direction: column;
    gap: var(--s7);
    padding-block: var(--s5) var(--s8);
  }
  .special-page > .section { margin-block: 0; }
  .special-page > .section[id] { scroll-margin-top: calc(var(--header-h) + 64px); }
  .special-page .section-head .sub { max-width: 68ch; line-height: 1.6; }
  .special-page .section-head.center { text-align: center; }
  .special-page .section-head.center .sub { margin-inline: auto; }
  @media (min-width: 900px) {
    .special-page { gap: var(--s9); padding-block: var(--s6) var(--s9); }
  }

  /* Hero ----------------------------------------------------------------- */
  .offer-hero {
    text-align: center;
    padding: var(--s7) var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
      radial-gradient(120% 140% at 50% 0%, var(--brand-tint), transparent 62%),
      linear-gradient(180deg, var(--surface), var(--paper));
  }
  @media (min-width: 900px) { .offer-hero { padding: var(--s9) var(--s7); } }
  .offer-hero .eyebrow {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--brand-tint);
    border-radius: 999px;
    background: var(--surface);
    color: var(--brand-deep);
    font-size: var(--fs--1); font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
  }
  .offer-hero h1 { margin-top: var(--s3); font-size: var(--fs-4); line-height: 1.05; }
  .offer-hero .lede {
    max-width: 54ch; margin: var(--s3) auto 0;
    color: var(--muted); line-height: 1.6;
  }
  .offer-stats {
    display: grid; gap: var(--s3);
    grid-template-columns: repeat(2, 1fr);
    margin-top: var(--s6); padding: 0; list-style: none;
  }
  /* an odd trailing tile spans the row rather than sitting orphaned beside a gap */
  .offer-stats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  @media (min-width: 640px) {
    .offer-stats { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
    .offer-stats li:last-child:nth-child(odd) { grid-column: auto; }
  }
  .offer-stats li {
    padding: var(--s3) var(--s2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .offer-stats b {
    display: block; font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-2); line-height: 1.1; color: var(--brand-deep);
  }
  .offer-stats span { display: block; margin-top: 2px; font-size: var(--fs--1); color: var(--muted); }

  /* Sticky jump nav ------------------------------------------------------- */
  .offer-nav {
    position: sticky; top: var(--header-h); z-index: 20;
    display: flex; gap: var(--s2);
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--s4) * -1);
    padding: var(--s3) var(--s4);
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(8px);
    border-block: 1px solid var(--line);
  }
  .offer-nav::-webkit-scrollbar { display: none; }
  .offer-nav .chip { flex: none; background: var(--surface); }

  /* Coupon cards ---------------------------------------------------------- */
  .coupon-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
  @media (min-width: 640px) { .coupon-grid { grid-template-columns: repeat(2, 1fr); } }

  .coupon-card {
    position: relative; overflow: hidden;
    display: grid; gap: var(--s3);
    padding: var(--s4) var(--s4) var(--s4) calc(var(--s4) + 6px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  @media (min-width: 900px) {
    .coupon-card { padding: var(--s5) var(--s5) var(--s5) calc(var(--s5) + 6px); }
  }
  .coupon-card::before {
    content: ''; position: absolute; inset-block: 0; left: 0; width: 6px;
    background: linear-gradient(180deg, var(--brand), var(--haldi));
  }
  .cc-save {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: var(--haldi); color: var(--ink);
    font-size: var(--fs--1); font-weight: 700; letter-spacing: .04em;
  }
  .cc-title { margin-top: var(--s2); font-size: var(--fs-2); line-height: 1.2; }
  .cc-deal { display: flex; align-items: baseline; gap: var(--s2); margin-top: var(--s2); }
  .cc-qty {
    font-size: var(--fs--1); font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .08em;
  }
  .cc-price {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-3); line-height: 1; color: var(--brand-deep);
  }
  .cc-note { margin-top: var(--s2); font-size: var(--fs--1); color: var(--muted); line-height: 1.6; }

  /* Code + copy affordance on one row: a stacked block read as a big empty slab
     on narrow screens, and cost ~76px of height to say eight characters. */
  .cc-code {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    width: 100%; padding: var(--s2) var(--s2) var(--s2) var(--s3);
    font: inherit; text-align: left; cursor: pointer;
    background: var(--haldi-tint);
    border: 2px dashed var(--haldi);
    border-radius: var(--radius);
    transition: background .15s, border-color .15s;
  }
  .cc-code:hover { background: var(--brand-tint); border-color: var(--brand); }
  .cc-code.copied { background: var(--ok-tint); border-color: var(--ok); border-style: solid; }
  .cc-code-val {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--fs-1); letter-spacing: .1em; color: var(--ink);
  }
  .cc-code-cta {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 5px 10px; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--haldi);
    font-size: var(--fs--1); font-weight: 700; color: var(--brand-deep);
  }
  .cc-code-cta .cc-ico { width: 14px; height: 14px; flex: none; }
  .cc-code.copied .cc-code-cta { border-color: var(--ok); color: var(--ok); }
  .cc-valid { margin-top: var(--s2); font-size: var(--fs--1); color: var(--muted); }
  .cc-link {
    display: block; margin-top: var(--s1);
    font-size: var(--fs--1); font-weight: 600; color: var(--brand-deep);
  }
  @media (min-width: 640px) {
    .coupon-card { grid-template-columns: 1fr minmax(190px, auto); align-items: center; gap: var(--s5); }
  }

  /* Compact variant: the code that works on the grid directly below it. Its
     badge and price sit on one line so the whole thing reads as a single strip. */
  .coupon-card.compact {
    gap: var(--s3);
    padding: var(--s3) var(--s3) var(--s3) calc(var(--s3) + 6px);
    margin-bottom: var(--s5);
  }
  .coupon-card.compact .cc-main {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  }
  .coupon-card.compact .cc-deal { margin-top: 0; }
  .coupon-card.compact .cc-price { font-size: var(--fs-2); }
  .coupon-card.compact .cc-valid.inline { display: none; margin-top: 0; }
  @media (min-width: 640px) {
    .coupon-card.compact { grid-template-columns: 1fr auto; align-items: center; }
    .coupon-card.compact .cc-code { width: auto; min-width: 210px; }
  }
  @media (min-width: 900px) { .coupon-card.compact .cc-valid.inline { display: inline; } }

  /* Promo callout (text-grid) --------------------------------------------- */
  .note-band {
    text-align: center; padding: var(--s7) var(--s5);
    background: linear-gradient(180deg, var(--brand-tint), var(--surface));
    border: 1px solid var(--line); border-radius: var(--radius-lg);
  }
  .note-band h2 { font-size: var(--fs-2); color: var(--brand-deep); }
  .note-band .nb-lead { margin-top: var(--s2); font-size: var(--fs-1); font-weight: 600; }
  .note-band .nb-note {
    max-width: 62ch; margin: var(--s3) auto 0;
    color: var(--muted); line-height: 1.6;
  }

  /* How it works ---------------------------------------------------------- */
  .offer-steps {
    display: grid; gap: var(--s4); grid-template-columns: 1fr;
    margin: 0; padding: 0; list-style: none; counter-reset: step;
  }
  @media (min-width: 640px) { .offer-steps { grid-template-columns: repeat(3, 1fr); } }
  .offer-steps li {
    counter-increment: step;
    padding: var(--s4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .offer-steps li::before {
    content: counter(step);
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; margin-bottom: var(--s3);
    border-radius: 50%; background: var(--brand); color: #fff;
    font-family: var(--font-display); font-weight: 700; font-size: var(--fs--1);
  }
  .offer-steps b { display: block; }
  .offer-steps span { display: block; margin-top: 2px; font-size: var(--fs--1); color: var(--muted); line-height: 1.6; }
  .offer-fineprint {
    max-width: 68ch; margin: var(--s5) auto 0;
    text-align: center; font-size: var(--fs--1); color: var(--muted); line-height: 1.6;
  }

  /* Contact page --------------------------------------------------------------- */
  .contact-grid { display: grid; gap: var(--s5); grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 820px) { .contact-grid { grid-template-columns: 340px 1fr; } }
  .contact-info { display: flex; flex-direction: column; gap: var(--s3); }
  .contact-card {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); color: var(--text);
    transition: border-color .15s, box-shadow .15s, transform .15s;
  }
  .contact-card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); text-decoration: none; }
  .contact-card .ci-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand-deep);
  }
  .contact-card .ci-ico svg { width: 20px; height: 20px; }
  .contact-card.whatsapp .ci-ico { background: #d9fbe6; color: #12a150; }
  .contact-card .ci-body { display: flex; flex-direction: column; min-width: 0; }
  .contact-card .ci-label { font-size: var(--fs--1); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
  .contact-card .ci-val { font-weight: 700; }

  /* Order self-service callout, above the form */
  .contact-help {
    display: grid;
    gap: var(--s3);
    justify-items: center;
    margin-bottom: var(--s5);
    padding: var(--s4) var(--s5);
    border: 1px solid var(--haldi);
    border-radius: var(--radius-lg);
    background: var(--haldi-tint);
    text-align: center;
  }
  @media (min-width: 720px) {
    .contact-help {
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: var(--s4);
      text-align: left;
      justify-items: start;
    }
  }
  .contact-help .ch-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none; border-radius: 50%;
    background: var(--surface); color: var(--brand-deep);
  }
  .contact-help .ch-ico svg { width: 22px; height: 22px; }
  .contact-help h2 { font-size: var(--fs-1); }
  .contact-help p { margin-top: 2px; font-size: var(--fs--1); color: var(--ink-2); max-width: 62ch; }
  .contact-help .btn { flex: none; white-space: nowrap; }

  /* hCaptcha's iframe is a fixed 303px — keep it inside narrow phone screens */
  .h-captcha { max-width: 100%; overflow-x: auto; }
}

/* -------------------------------------------------------------- utilities */
@layer utilities {
  .muted { color: var(--muted); }
  .small { font-size: var(--fs--1); }
  .text-center { text-align: center; }
  .hidden { display: none !important; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}