/* ==========================================================================
   BunchMart — brand blue + orange, built mobile-first as an app shell.
   Blue carries structure and trust. Orange is reserved for two things
   only: money saved and the action we want taken. Nothing else is loud.
   ========================================================================== */

:root {
  /* Brand, taken from the BunchMart logo */
  --blue-900: #081B4D;
  --blue-800: #0B2E8A;
  --blue-700: #1247D6;
  --blue-600: #1B5CFF;   /* the logo blue */
  --blue-500: #3B76FF;
  --blue-100: #DCE7FF;
  --blue-050: #F0F5FF;

  /* Near-black from the "Bunch" wordmark, used for ink and the deep bar */
  --carbon:   #101322;

  /* Accent stays warm so savings read as a different signal from brand */
  --orange-600: #D9541A;
  --orange-500: #F26722;
  --orange-400: #FF8038;
  --amber-400:  #FBAE28;
  --orange-050: #FFF2E9;

  --green-600: #0E8A52;
  --green-050: #E6F6EE;
  --red-600:   #C0392B;
  --red-050:   #FDECEA;

  --ink:     #101322;
  --ink-2:   #48506B;
  --ink-3:   #79839E;
  --line:    #E3E7F2;
  --line-2:  #EDF1F7;
  --paper:   #FFFFFF;
  --wash:    #F4F6FC;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --tabbar-h: 60px;
  --meter-h:  64px;

  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Noto Sans",
          "Noto Sans Gujarati", "Noto Sans Devanagari", Helvetica, Arial, sans-serif;

  --sh-1: 0 1px 2px rgba(16, 19, 34, .05);
  --sh-2: 0 2px 8px rgba(16, 19, 34, .07);
  --sh-3: 0 8px 28px rgba(16, 19, 34, .10);
  --sh-blue: 0 6px 22px rgba(27, 92, 255, .30);
  --sh-orange: 0 6px 20px rgba(242, 103, 34, .30);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--wash);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { letter-spacing: -.02em; }

button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--blue-500); outline-offset: 2px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; background: var(--blue-800); color: #fff; padding: 12px 16px; z-index: 999; }
.skip-link:focus { left: 8px; top: 8px; }

.num, .price { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 14px; }

/* =============================================================== HEADER */

.topstrip {
  display: none;
  background: var(--carbon);
  color: rgba(255, 255, 255, .82);
  font-size: 12px;
}
.topstrip .wrap { display: flex; align-items: center; justify-content: space-between; height: 34px; gap: 14px; }
.topstrip a { color: rgba(255, 255, 255, .82); }
.topstrip a:hover { color: #fff; }
.topstrip-links { display: flex; gap: 16px; }
.topstrip-usp { display: flex; gap: 18px; }
.topstrip-usp span { display: flex; align-items: center; gap: 6px; }
.topstrip-usp svg { width: 13px; height: 13px; color: var(--amber-400); }

.appbar {
  position: sticky; top: 0; z-index: 60;
  background: linear-gradient(180deg, var(--blue-700) 0%, var(--blue-600) 100%);
  color: #fff;
  box-shadow: var(--sh-2);
}
.appbar .wrap { display: flex; align-items: center; gap: 14px; height: 60px; }

.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand img { height: 34px; width: auto; }
.brand-text { display: none; line-height: 1.05; }
.brand-text b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.brand-text small { font-size: 8.5px; letter-spacing: .16em; color: rgba(255, 255, 255, .65); font-weight: 600; }

.searchbar { flex: 1; position: relative; min-width: 0; }
.searchbar input {
  width: 100%; height: 42px;
  padding: 0 90px 0 42px;
  border: 0; border-radius: var(--r-md);
  background: #fff; color: var(--ink);
  box-shadow: var(--sh-1);
}
.searchbar input::placeholder { color: var(--ink-3); }
.searchbar > svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--ink-3); pointer-events: none;
}
.searchbar button {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  padding: 0 16px; border: 0; border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  color: #fff; font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.searchbar button:hover { filter: brightness(1.06); }

.barnav { display: none; align-items: center; gap: 4px; flex-shrink: 0; }
.barlink {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: #fff;
}
.barlink:hover { background: rgba(255, 255, 255, .14); }
.barlink svg { width: 20px; height: 20px; }
.barlink small { display: block; font-size: 10.5px; font-weight: 500; color: rgba(255, 255, 255, .68); }
.barlink .lbl { line-height: 1.15; }

.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: grid; place-items: center; background: transparent; border: 0;
  cursor: pointer; color: #fff; flex-shrink: 0;
}
.icon-btn:hover { background: rgba(255, 255, 255, .14); }
.icon-btn svg { width: 21px; height: 21px; }
.badge {
  position: absolute; top: 2px; right: 0;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--orange-500); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
  border: 2px solid var(--blue-700);
}

/* Category ribbon under the bar, desktop only */
.catnav { display: none; background: var(--paper); border-bottom: 1px solid var(--line); }
.catnav .wrap { display: flex; align-items: center; gap: 2px; height: 46px; overflow-x: auto; }
.catnav a {
  padding: 8px 13px; border-radius: var(--r-sm);
  font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap;
}
.catnav a:hover { background: var(--blue-050); color: var(--blue-700); }
.catnav a.hot { color: var(--orange-600); }

main { min-height: 55vh; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 14px); }
body.has-meter main { padding-bottom: calc(var(--tabbar-h) + var(--meter-h) + env(safe-area-inset-bottom, 0px) + 14px); }

/* ============================================================== SECTIONS */

.section { padding: 26px 0 6px; }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card-pad { padding: 18px; }
.tile { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--sh-1); }

/* =================================================================== HERO */

.hero { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; }

.hero-main {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-600) 55%, var(--blue-500) 100%);
  color: #fff; padding: 26px 22px 24px;
  box-shadow: var(--sh-blue);
}
.hero-main::after {
  content: ""; position: absolute; right: -70px; top: -70px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,169,25,.36) 0%, rgba(242,103,34,0) 68%);
}
.hero-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .16);
  padding: 5px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
  margin-bottom: 12px;
}
.hero-main h1 { margin: 0 0 10px; font-size: 27px; line-height: 1.18; font-weight: 800; max-width: 15ch; }
.hero-main h1 em { font-style: normal; color: var(--amber-400); }
.hero-main p { margin: 0 0 18px; font-size: 14.5px; color: rgba(255, 255, 255, .86); max-width: 42ch; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }

.hero-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); padding: 16px;
  min-height: 108px; display: flex; flex-direction: column; justify-content: space-between;
}
.hero-card b { font-size: 15px; font-weight: 800; line-height: 1.25; }
.hero-card span { font-size: 12px; opacity: .82; }
.hero-card.warm { background: linear-gradient(135deg, #FFF4E9, #FFE6D2); color: var(--orange-600); }
.hero-card.cool { background: linear-gradient(135deg, var(--blue-050), var(--blue-100)); color: var(--blue-700); }
.hero-card .arrow { font-size: 18px; align-self: flex-end; }

/* ============================================================ USP STRIP */

/* ============================================================ CATEGORIES */

/* ========================================================= PRODUCT CARDS */

.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.prow {
  display: grid; grid-auto-flow: column; grid-auto-columns: 47%;
  gap: 12px; overflow-x: auto; padding-bottom: 8px;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.prow::-webkit-scrollbar { height: 0; }
.prow > * { scroll-snap-align: start; }

.pcard {
  background: var(--paper); border-radius: var(--r-lg);
  border: 1px solid var(--line); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--blue-100); }
.pcard-img { position: relative; aspect-ratio: 1; background: var(--wash); overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; }
.pcard-badges { position: absolute; left: 8px; top: 8px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.pill {
  padding: 3px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff;
}
.pill-off   { background: var(--orange-500); }
.pill-bunch { background: var(--blue-600); }
.pill-new   { background: var(--green-600); }
.pill-low   { background: var(--red-600); }
.pcard-wish {
  position: absolute; right: 8px; top: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, .94); border: 0;
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-1);
  color: var(--ink-3);
}
.pcard-wish:hover { color: var(--orange-500); }
.pcard-wish svg { width: 15px; height: 15px; }

.pcard-body { padding: 11px 12px 13px; display: flex; flex-direction: column; flex: 1; }
.pcard-brand { font-size: 10.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .05em; margin-bottom: 3px; }
.pcard-name {
  font-size: 13.5px; line-height: 1.38; margin: 0 0 7px; font-weight: 500;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-rate {
  display: inline-flex; align-items: center; gap: 3px; margin-bottom: 7px;
  background: var(--green-050); color: var(--green-600);
  padding: 2px 7px; border-radius: var(--r-sm); font-size: 11px; font-weight: 700; width: fit-content;
}
.pcard-rate svg { width: 10px; height: 10px; }
.pcard-price { margin-top: auto; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pcard-price b { font-size: 16.5px; font-weight: 800; }
.pcard-price s { font-size: 12.5px; color: var(--ink-3); }
.pcard-price .off { font-size: 12.5px; font-weight: 700; color: var(--green-600); }
.pcard-bunch {
  margin-top: 8px; padding: 6px 9px; border-radius: var(--r-sm);
  background: var(--orange-050); color: var(--orange-600);
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; gap: 5px;
}
.pcard-cta { margin-top: 9px; }

/* =============================================================== BUTTONS */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700; cursor: pointer; text-align: center;
  background: var(--blue-600); color: #fff;
  transition: filter .15s ease, transform .1s ease;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-cta {
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  box-shadow: var(--sh-orange);
}
.btn-light { background: #fff; color: var(--blue-700); }
.btn-quiet { background: var(--paper); color: var(--ink); border-color: var(--line); }
.btn-quiet:hover { background: var(--wash); filter: none; }
.btn-ghost { background: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-danger { background: var(--red-600); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn-lg { height: 52px; font-size: 16px; }
.btn-block { width: 100%; }

.chiprow { display: flex; gap: 9px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chiprow::-webkit-scrollbar { height: 0; }
.chip {
  flex-shrink: 0; padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; cursor: pointer;
}
.chip:hover { border-color: var(--blue-500); color: var(--blue-600); }
.chip.is-on, .chip[aria-pressed="true"] {
  background: var(--blue-600); color: #fff; border-color: var(--blue-600);
}

.tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--line-2); color: var(--ink-2); }
.tag-save  { background: var(--green-050); color: var(--green-600); }
.tag-brand { background: var(--blue-050); color: var(--blue-700); }
.tag-warm  { background: var(--orange-050); color: var(--orange-600); }
.tag-alert { background: var(--red-050); color: var(--red-600); }

/* ========================================================== BUNCH LADDER */

.ladderbox {
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  border-radius: var(--r-xl); padding: 22px 18px; color: #fff;
  box-shadow: var(--sh-blue); position: relative; overflow: hidden;
}
.ladderbox::after {
  content: ""; position: absolute; left: -60px; bottom: -80px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(251,169,25,.28), transparent 70%);
}
.ladderbox h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; }
.ladderbox > p { margin: 0 0 18px; font-size: 14px; color: rgba(255,255,255,.84); max-width: 52ch; }
.rungs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; position: relative; }
.rung {
  background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-md); padding: 13px 14px; text-align: center;
}
.rung.best { background: linear-gradient(135deg, var(--amber-400), var(--orange-500)); border-color: transparent; }
.rung .qty { font-size: 11.5px; color: rgba(255, 255, 255, .82); font-weight: 600; }
.rung .pct { font-size: 24px; font-weight: 800; line-height: 1.15; margin: 3px 0; }
.rung .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; opacity: .9; }

/* ============================================================ DEAL TIMER */

.deal-timer { display: flex; gap: 6px; align-items: center; }
.deal-timer b {
  background: var(--blue-800); color: #fff; border-radius: var(--r-sm);
  padding: 5px 8px; font-size: 14px; font-weight: 800; min-width: 34px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.deal-timer span { font-size: 13px; color: var(--ink-3); font-weight: 700; }

/* ============================================================== BANNERS */

.brandtile {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  height: 68px; display: grid; place-items: center; padding: 10px;
  font-weight: 800; color: var(--ink-3); font-size: 13px; text-align: center;
}
.brandtile:hover { border-color: var(--blue-500); color: var(--blue-600); }

.testi { display: grid; grid-template-columns: 1fr; gap: 12px; }
.testi-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.testi-card .stars { color: var(--amber-400); font-size: 13px; letter-spacing: 2px; margin-bottom: 8px; }
.testi-card p { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.testi-who { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: var(--blue-100); color: var(--blue-700);
  display: grid; place-items: center; font-weight: 800; font-size: 14px;
}
.testi-who b { display: block; font-size: 13px; }
.testi-who span { font-size: 11.5px; color: var(--ink-3); }

/* =============================================================== FORMS */

.field { display: block; margin-bottom: 15px; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.input, select.input, textarea.input {
  width: 100%; height: 46px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper);
}
textarea.input { height: auto; min-height: 104px; padding: 11px 13px; resize: vertical; }
.input:focus { border-color: var(--blue-500); outline: none; box-shadow: 0 0 0 3px var(--blue-050); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 13px; }

.flash { padding: 12px 15px; border-radius: var(--r-md); font-size: 14px; margin-bottom: 13px; font-weight: 500; }
.flash-success { background: var(--green-050); color: var(--green-600); }
.flash-error   { background: var(--red-050);   color: var(--red-600); }
.flash-info    { background: var(--blue-050);  color: var(--blue-700); }

.crumbs { font-size: 12.5px; color: var(--ink-3); padding: 14px 0 4px; }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--blue-600); }

.empty { text-align: center; padding: 54px 20px; }
.empty h2 { margin: 0 0 8px; font-size: 19px; }
.empty p { margin: 0 0 20px; color: var(--ink-3); }

/* ================================================================= CART */

.line { display: grid; grid-template-columns: 84px 1fr; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.line:last-child { border-bottom: 0; }
.line-img { width: 84px; height: 84px; border-radius: var(--r-md); background: var(--wash); object-fit: cover; }
.line-name { font-size: 14px; line-height: 1.4; margin: 0 0 3px; font-weight: 500; }
.line-seller { font-size: 12px; color: var(--ink-3); }
.line-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.stepper button { width: 36px; height: 36px; border: 0; background: var(--paper); cursor: pointer; font-size: 18px; color: var(--ink-2); }
.stepper button:hover { background: var(--blue-050); color: var(--blue-600); }
.stepper span { min-width: 36px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.totals { font-size: 14px; }
.totals div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.totals .t-save { color: var(--green-600); font-weight: 700; }
.totals .t-grand {
  border-top: 2px dashed var(--line); margin-top: 8px; padding-top: 13px;
  font-size: 18px; font-weight: 800;
}

/* ================================================== TAB BAR + THE METER */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--paper); border-top: 1px solid var(--line);
  box-shadow: 0 -2px 14px rgba(16, 19, 34, .07);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--ink-3); position: relative;
}
.tabbar a svg { width: 22px; height: 22px; }
.tabbar a[aria-current="page"] { color: var(--blue-600); }
.tabbar a[aria-current="page"]::before {
  content: ""; position: absolute; top: 0; width: 28px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--orange-500);
}
.tab-badge {
  position: absolute; top: 5px; left: 50%; margin-left: 5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--orange-500); color: #fff; border-radius: 9px;
  font-size: 10px; font-weight: 800; line-height: 17px; text-align: center;
}

.meter {
  position: fixed; left: 0; right: 0; z-index: 65;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
  height: var(--meter-h);
  background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
  color: #fff; display: flex; align-items: center; gap: 13px; padding: 0 14px;
}
.meter[hidden] { display: none; }
.meter-body { flex: 1; min-width: 0; }
.meter-line { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; margin-bottom: 7px; }
.meter-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.meter-saved { margin-left: auto; flex-shrink: 0; color: var(--amber-400); font-weight: 800; }
.meter-track { position: relative; height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); overflow: hidden; }
.meter-fill {
  position: absolute; inset: 0 auto 0 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--amber-400), var(--orange-500));
  transition: width .4s cubic-bezier(.2,.7,.3,1);
}
.meter-rungs { position: absolute; inset: 0; display: flex; pointer-events: none; }
.meter-rungs span { flex: 1; border-right: 1px solid rgba(14,42,92,.55); }
.meter-rungs span:last-child { border-right: 0; }
.meter-tier { flex-shrink: 0; text-align: right; line-height: 1.15; }
.meter-tier b { display: block; font-size: 16px; font-weight: 800; }
.meter-tier small { font-size: 10.5px; color: rgba(255,255,255,.7); }

@keyframes tier-hit { 0% { filter: none; } 30% { filter: brightness(1.5) saturate(1.4); } 100% { filter: none; } }
.meter.is-unlocked { animation: tier-hit .9s ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .meter.is-unlocked { animation: none; }
  .meter-fill, .pcard { transition: none; }
  html { scroll-behavior: auto; }
}

.wa {
  position: fixed; right: 14px; z-index: 68;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 16px);
  width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
}
body.has-meter .wa { bottom: calc(var(--tabbar-h) + var(--meter-h) + env(safe-area-inset-bottom, 0px) + 16px); }
.wa svg { width: 28px; height: 28px; }

/* Footer styles live in storefront.css. */

/* =========================================================== PANELS */

.panel { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.panel-side { background: var(--carbon); color: rgba(255,255,255,.75); padding: 14px 12px; }
.panel-side .brand { margin-bottom: 14px; }
.panel-side .brand img { height: 32px; }
.panel-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.panel-nav a { padding: 9px 13px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; white-space: nowrap; color: rgba(255,255,255,.78); }
.panel-nav a:hover { background: rgba(255,255,255,.1); }
.panel-nav a[aria-current="page"] { background: var(--blue-600); color: #fff; }
.nav-count { display: inline-block; margin-left: 6px; padding: 0 6px; background: var(--orange-500); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 800; }
.panel-main { padding: 18px 14px 60px; background: var(--wash); }
.panel-head { margin-bottom: 18px; }
.panel-head h1 { margin: 0; font-size: 22px; font-weight: 800; }
.panel-head p { margin: 5px 0 0; color: var(--ink-3); font-size: 13.5px; }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; }
.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px 16px; }
.stat-label { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.stat-value { font-size: 23px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-note { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.stat-save .stat-value { color: var(--green-600); }

.table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; padding: 12px 14px; background: var(--wash);
  border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink-2);
  white-space: nowrap; font-size: 12.5px;
}
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

.tier-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1fr 1.4fr auto; gap: 9px; align-items: end; margin-bottom: 9px; }
.tier-row .field { margin-bottom: 0; }

.stack > * + * { margin-top: 14px; }

/* ============================================================== TABLET */

@media (min-width: 600px) {
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .prow { grid-auto-columns: 31%; }
  .catgrid { grid-template-columns: repeat(6, 1fr); }
  .usps { grid-template-columns: repeat(4, 1fr); }
  .rungs { grid-template-columns: repeat(4, 1fr); }
  .brandrow { grid-template-columns: repeat(6, 1fr); }
  .testi { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .hero-main h1 { font-size: 32px; }
}

/* ============================================================= DESKTOP */

@media (min-width: 992px) {
  .tabbar { display: none; }
  main { padding-bottom: 0; }
  body.has-meter main { padding-bottom: 0; }

  .topstrip { display: block; }
  .barnav { display: flex; }
  .catnav { display: block; }
  .brand-text { display: block; }
  .appbar .wrap { height: 68px; gap: 22px; }
  .searchbar { max-width: 620px; }
  .wrap { padding: 0 24px; }

  .hero { grid-template-columns: 1.7fr 1fr; }
  .hero-side { grid-template-columns: 1fr; }
  .hero-main { padding: 40px 36px; }
  .hero-main h1 { font-size: 38px; }

  .pgrid { grid-template-columns: repeat(5, 1fr); gap: 16px; }
  .prow  { grid-auto-columns: 224px; gap: 16px; }
  .catgrid { grid-template-columns: repeat(8, 1fr); gap: 14px; }

  .section { padding: 38px 0 6px; }
  .section-head h2 { font-size: 24px; }

  .ladderbox { padding: 34px 32px; }
  .ctaband { padding: 34px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .ctaband > div { flex: 1; }

  .meter { bottom: 0; height: 68px; padding: 0 24px; }
  .meter-body { max-width: 1280px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 24px; }
  .meter-body > div:first-child { flex: 1; }
  .wa { bottom: 22px; }
  body.has-meter .wa { bottom: 90px; }

  .panel { grid-template-columns: 244px 1fr; }
  .panel-side { padding: 22px 14px; min-height: 100vh; }
  .panel-nav { flex-direction: column; overflow: visible; }
  .panel-main { padding: 28px 32px 60px; }

  .split { display: grid; grid-template-columns: 1fr 368px; gap: 26px; align-items: start; }
  .split-aside { position: sticky; top: 88px; }
  .shop-layout { display: grid; grid-template-columns: 248px 1fr; gap: 24px; align-items: start; }
  .filter-rail { position: sticky; top: 88px; }
}

@media print {
  .appbar, .topstrip, .catnav, .tabbar, .meter, .wa, footer.site { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   PART TWO — added with the section builder, the inventory grid and OTP
   sign-in. Everything below is additive: nothing above it was changed, so
   the original pages still look exactly as they did.
   ========================================================================== */

/* --------------------------------------------------- section backgrounds */

.bg-wash, .bg-white, .bg-brand, .bg-carbon, .bg-gradient {
  padding: clamp(24px, 4vw, 40px) clamp(14px, 3vw, 28px);
  border-radius: var(--r-xl);
}
.bg-wash   { background: var(--wash); }
.bg-white  { background: var(--paper); box-shadow: var(--sh-1); }
.bg-brand  { background: var(--blue-600); color: #fff; }
.bg-carbon { background: var(--carbon); color: #fff; }
.bg-gradient { background: linear-gradient(160deg, var(--blue-500), var(--blue-700)); color: #fff; }

.bg-brand h2, .bg-carbon h2, .bg-gradient h2,
.bg-brand .eyebrow, .bg-carbon .eyebrow, .bg-gradient .eyebrow { color: #fff; }
.bg-brand .section-sub, .bg-carbon .section-sub, .bg-gradient .section-sub { color: rgba(255,255,255,.82); }

/* A section pinned to one device. Hidden rather than omitted, so the same
   markup can be cached and served to everyone. */
.only-desktop { display: block; }
.only-mobile  { display: none; }
@media (max-width: 760px) {
  .only-desktop { display: none; }
  .only-mobile  { display: block; }
}

/* ------------------------------------------------------------ hero slider */

/* Darken the photo behind the words, or light text on a bright banner is
   unreadable in sunlight. */

/* -------------------------------------------------------------- banners */

@media (max-width: 760px) {
  .banner-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-row:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 460px) {
  .banner-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ product rails */

@media (min-width: 761px) { .prodrail { grid-auto-columns: minmax(200px, 1fr); } }
@media (max-width: 900px) { .prodgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 620px) { .prodgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* --------------------------------------------------------- countdown */

/* ------------------------------------------------------- image + text */
@media (max-width: 720px) {
  .imgtext { grid-template-columns: 1fr; }
  .imgtext.flip .imgtext-media { order: 0; }
}

.rte-wide { max-width: 74ch; }

/* -------------------------------------------------------- testimonials */
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }

/* ----------------------------------------------------------------- FAQ */

/* --------------------------------------------------------- brand strip */

/* ------------------------------------------------ newsletter and CTA */

/* ==========================================================================
   ADMIN — inventory grid
   ========================================================================== */

.invbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; margin-bottom: 14px;
}
.invsearch  { display: flex; gap: 7px; flex: 1 1 260px; max-width: 420px; }
.invactions { display: flex; gap: 7px; flex-wrap: wrap; }

.invgrid td { vertical-align: middle; }
.invsku { font-size: 11.5px; color: var(--ink-3); }
.invdim { font-size: 12.5px; color: var(--ink-2); }

/* The editable cells. They should read as cells, not as a wall of boxes,
   so the border only appears on hover and focus. */
.cell {
  width: 76px; height: 32px; padding: 0 8px; text-align: right;
  border: 1px solid transparent; border-radius: 7px; background: transparent;
  font: inherit; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums;
  color: var(--ink); transition: border-color .12s, background .12s;
}
.cell-text { width: 92px; text-align: left; font-weight: 500; }
.cell:hover { border-color: var(--line); background: var(--paper); }
.cell:focus {
  outline: none; border-color: var(--blue-600); background: #fff;
  box-shadow: 0 0 0 3px rgba(27,92,255,.14);
}
.cell.is-saving { opacity: .55; }
.cell.is-ok  { background: var(--green-050); border-color: var(--green-600); }
.cell.is-bad { background: var(--red-050);   border-color: var(--red-600); }

.invfoot {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: 12px 0 18px;
}
.invstatus { font-size: 13px; color: var(--ink-2); min-height: 20px; }
.invstatus.is-ok    { color: var(--green-600); font-weight: 650; }
.invstatus.is-error { color: var(--red-600);   font-weight: 650; }
.pager { display: flex; gap: 10px; align-items: center; font-size: 13px; }

.invhelp {
  margin: 8px 0 24px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--paper);
}
.invhelp summary { cursor: pointer; font-weight: 650; font-size: 14px; }
.invhelp p { font-size: 13.5px; line-height: 1.65; color: var(--ink-2); max-width: 82ch; }

.applybar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  padding: 16px 18px; margin-bottom: 18px; border-radius: var(--r-lg);
  background: var(--blue-050); border: 1px solid var(--blue-100); font-size: 14px;
}
.applybtns { display: flex; gap: 8px; align-items: center; }

.maprow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.maprow .input { height: 32px; font-size: 12.5px; }
.mapsearch { width: 150px; }
.mappick   { width: 210px; }
.mapnote   { display: block; margin-top: 5px; font-size: 12px; }
.mapnote.is-ok  { color: var(--green-600); }
.mapnote.is-bad { color: var(--red-600); }

.cardtitle { margin: 0 0 10px; font-size: 15.5px; }
.cardsub   { margin: 18px 0 6px; font-size: 13.5px; }
.cardnote  { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.fieldnote { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.checkline { display: flex; gap: 9px; align-items: center; font-size: 14px; padding: 8px 0; }
.formfoot { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 4px; }

/* ==========================================================================
   ADMIN — page builder
   ========================================================================== */

.seclist { display: grid; gap: 8px; }
.secrow {
  display: flex; gap: 12px; align-items: center; padding: 13px 15px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
}
.secrow.is-off { opacity: .58; background: var(--wash); }
.secorder { display: flex; flex-direction: column; gap: 3px; }
.iconbtn {
  width: 26px; height: 22px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--paper); cursor: pointer; font-size: 12px; color: var(--ink-2); line-height: 1;
}
.iconbtn:disabled { opacity: .3; cursor: default; }
.secbody { flex: 1; min-width: 0; }
.sectop  { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin-bottom: 3px; }
.secmeta { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.secactions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.typegrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.typegroup h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--ink-3); }
.typecard {
  display: block; padding: 11px 13px; margin-bottom: 7px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--paper); text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .15s;
}
.typecard:hover { border-color: var(--blue-600); transform: translateY(-1px); }
.typecard b    { display: block; font-size: 14px; margin-bottom: 2px; }
.typecard span { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

.blockrow {
  padding: 14px; margin-bottom: 10px; border: 1px dashed var(--line);
  border-radius: var(--r-md); background: var(--wash);
}
.blockgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --------------------------------------------------------------- menus */
.menutree  { display: grid; gap: 5px; }
.menuitem {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--paper);
  margin-left: calc(var(--depth, 0) * 22px);
}
.menuitem[style*="--depth:1"], .menuitem[style*="--depth:2"] { background: var(--wash); }
.menuinfo { min-width: 0; font-size: 13.5px; }
.menuacts { display: flex; gap: 5px; }
.chipcount {
  display: inline-block; min-width: 17px; padding: 0 5px; margin-left: 4px;
  border-radius: 99px; background: var(--blue-100); color: var(--blue-700);
  font-size: 11px; font-weight: 700; text-align: center;
}

/* --------------------------------------------------------------- media */
.medialib { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.mediacard { border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--paper); overflow: hidden; }
.mediathumb { aspect-ratio: 4 / 3; background: var(--wash); display: grid; place-items: center; }
.mediathumb img { width: 100%; height: 100%; object-fit: contain; }
.mediabody { padding: 10px; display: grid; gap: 7px; }
.mediabody strong { font-size: 13px; }
.mediabody .input { height: 30px; font-size: 12.5px; }
.mediaacts { display: flex; gap: 6px; }

/* ==========================================================================
   SIGN IN
   ========================================================================== */

.authwrap { display: grid; place-items: start center; padding: clamp(20px, 5vw, 52px) 0; }
.authcard {
  width: 100%; max-width: 420px; padding: clamp(22px, 4vw, 34px);
  border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--sh-3);
}
.authhead h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: -.4px; }
.authhead p  { margin: 0 0 20px; font-size: 14px; color: var(--ink-2); line-height: 1.6; }

.authtabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 20px;
  background: var(--wash); border-radius: var(--r-md);
}
.authtab {
  flex: 1; padding: 9px 6px; border: 0; border-radius: 9px; cursor: pointer;
  background: transparent; font: inherit; font-size: 13.5px; font-weight: 650;
  color: var(--ink-2); transition: background .15s, color .15s;
}
.authtab.is-on { background: var(--paper); color: var(--blue-700); box-shadow: var(--sh-1); }

.authpanel { display: none; }
.authpanel.is-on { display: block; }

.phoneinput { display: flex; align-items: stretch; }
.phoneprefix {
  display: grid; place-items: center; padding: 0 12px;
  border: 1px solid var(--line); border-right: 0;
  border-radius: var(--r-md) 0 0 var(--r-md);
  background: var(--wash); font-weight: 700; font-size: 14px; color: var(--ink-2);
}
.phoneinput .input { border-radius: 0 var(--r-md) var(--r-md) 0; }

.otpsent { margin: 0 0 14px; font-size: 13.5px; color: var(--green-600); font-weight: 600; }
.otpcode { text-align: center; font-size: 24px; letter-spacing: 9px; font-weight: 700; height: 54px; }
.otpfoot { display: flex; justify-content: space-between; margin-top: 12px; }
.linkbtn {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--blue-600); text-decoration: underline;
}
.linkbtn:disabled { color: var(--ink-3); cursor: default; text-decoration: none; }

.author { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: 12.5px; }
.author::before, .author::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.authnote  { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.authlegal { margin: 20px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; line-height: 1.6; }

/* Wider tap targets on a phone — a 44px minimum, per Apple's guidance,
   which is also roughly where thumb accuracy stops falling off. */
@media (max-width: 560px) {
  .btn-lg { min-height: 50px; }
  .cell { width: 64px; }
  .secrow { flex-wrap: wrap; }
  .secactions { width: 100%; }
}

/* ==========================================================================
   Mega menu — driven by the menu builder, not hard-coded.
   Opens on hover for a mouse and on focus for a keyboard, so it is
   reachable by tabbing. On a phone the whole row scrolls sideways
   instead, because a hover menu is useless there.
   ========================================================================== */

.navdrop { position: relative; display: inline-flex; }

.navdrop-top { display: inline-flex; align-items: center; gap: 4px; }
.navdrop-top svg { width: 13px; height: 13px; opacity: .6; transition: transform .16s ease; }
.navdrop:hover .navdrop-top svg { transform: rotate(90deg); }

.navdrop-panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  display: flex;
  gap: 22px;
  min-width: 460px;
  padding: 20px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  /* Hidden with opacity rather than display so it can animate and still
     be found by a screen reader while focused. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.navdrop:hover .navdrop-panel,
.navdrop:focus-within .navdrop-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navdrop-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 22px;
  flex: 1;
}

.navdrop-col { display: flex; flex-direction: column; }

.navdrop-head {
  padding: 4px 0 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 4px;
}

.navdrop-leaf {
  padding: 5px 0;
  font-size: 13px;
  color: var(--ink-2);
  border-radius: 6px;
}
.navdrop-leaf:hover { color: var(--blue-600); }

.navdrop-promo { flex: 0 0 190px; border-radius: var(--r-md); overflow: hidden; }
.navdrop-promo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.navbadge {
  margin-left: 5px;
  padding: 1px 6px;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .4px;
  color: #fff;
  background: var(--orange-500);
  border-radius: 20px;
  vertical-align: middle;
}

/* A hover panel cannot work on touch, so it collapses to a plain link. */
@media (max-width: 900px) {
  .navdrop-panel { display: none; }
  .navdrop-top svg { display: none; }
}

/* Sellable is the number that decides whether a shopper can buy, so it
   is the one the eye should land on. */
.grid .sellable b,
.data .sellable b { font-variant-numeric: tabular-nums; }
.row-low .sellable b,
tr.row-low td.sellable b { color: var(--red-600); }

/* Bulk-break hint on a product card. Replaces the old bunch strip:
   a concrete second price does more work than a slogan. */
.pcard-bulk {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 6px 0 2px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue-700);
  background: var(--blue-050);
  border-radius: 7px;
}
.pcard-bulk svg { width: 13px; height: 13px; flex: none; }

.pill-bulk { background: var(--blue-600); color: #fff; }

/* Bulk price ladder on the product page. The main event on a wholesale
   shop, so it sits right under the price and reads like a table. */
.ladder {
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ladder-head {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue-600);
}
.ladder-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--line-2);
}
.ladder-row:last-child { border-bottom: 0; }
.ladder-row:nth-child(even) { background: var(--wash); }
.ladder-row span { color: var(--ink-2); }
.ladder-row b { font-variant-numeric: tabular-nums; }
.ladder-off {
  margin-left: 6px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green-600);
}

/* Shown when a CMS page has no sections built yet. */
.emptypage { padding: 64px 20px; text-align: center; max-width: 520px; margin: 0 auto; }
.emptypage h1 { font-size: 22px; margin: 0 0 10px; }
.emptypage p { color: var(--ink-2); line-height: 1.6; margin: 0 0 18px; }

/* Store credit opt-in at checkout. */
.walletbox {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 4px 0 0;
  padding: 11px 13px;
  background: var(--green-050);
  border: 1px solid var(--green-050);
  border-radius: var(--r-md);
}
.walletbox .hint { display: block; margin-top: 3px; }

/* Password reveal. The button sits inside the field rather than beside
   it so it cannot be mistaken for a submit control. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 62px; width: 100%; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-600);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.pw-toggle:hover { background: var(--blue-050); }
.pw-toggle:focus-visible { outline: 2px solid var(--blue-600); outline-offset: 1px; }

/* Drag-to-reorder in the page builder. */
.sechandle {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1;
  color: var(--ink-3);
  cursor: grab;
  user-select: none;
  text-align: center;
}
.sechandle:active { cursor: grabbing; }
.secrow.is-dragging { opacity: .45; outline: 2px dashed var(--blue-600); }
.secrow { transition: opacity .12s ease; }

/* Favourite heart, now a button rather than a form. */
.pcard-wish.is-on svg { fill: var(--red-600); stroke: var(--red-600); }

/* Cancellation page. A destructive action gets a red button rather than
   a hidden link: if we are going to allow it, allow it honestly. */
.btn-danger {
  color: #fff;
  background: var(--red-600);
  border: 1px solid var(--red-600);
}
.btn-danger:hover { background: #9B2A22; }

.radioline {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
  font-size: 14px;
}
.radioline:last-of-type { border-bottom: 0; }
.radioline input { flex: none; }

.wrap.narrow { max-width: 680px; }

/* File picker previews with a remove control on each thumbnail. */
.filepreview { display: none; }
.filepreview.has-files {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-top: 10px;
}
.filecard {
  position: relative;
  width: 84px;
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--wash);
}
.filecard img { display: block; width: 100%; height: 66px; object-fit: cover; }
.filecard-doc {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-3);
}
.filecard-meta {
  display: block;
  padding: 3px 5px;
  font-size: 10.5px;
  color: var(--ink-3);
  text-align: center;
}
.filecard-x {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 20px;
  height: 20px;
  font-size: 15px;
  line-height: 1;
  color: #fff;
  background: rgba(16, 19, 34, .72);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.filecard-x:hover { background: var(--red-600); }
.filepreview-clear { align-self: center; }

/* Bulk ladder rungs. The markup changed from the old three-part rung
   (qty / pct / lbl) to quantity, label and price, so these name the
   parts that actually exist now. */
.rung-n {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
}
.rung-l {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .85;
  margin: 2px 0 6px;
}
.rung-d {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--amber-400);
}
.rung-top { background: linear-gradient(135deg, var(--amber-400), var(--orange-500)); border-color: transparent; }
.rung-top .rung-d { color: #fff; }

@media (max-width: 620px) {
  .rungs { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   HOMEPAGE — marketplace layout
   ---------------------------------------------------------------------
   The brief asks for Flipkart/Amazon, so this follows that vernacular
   deliberately: a light grey page with white section slabs, dense
   compact cards, and rails that scroll sideways rather than wrap. That
   density is the point — an Indian marketplace shopper expects to see
   many options at once, not three generous cards with lots of air.

   Everything below is mobile-first. The base rules describe the phone
   and the media queries add columns, because the phone is where most
   of this traffic will be.
   ===================================================================== */

.cms { margin: 0 0 10px; }

/* Section slabs: white content on the grey page, edge to edge on a
   phone, rounded once there is room at the sides. */
.cms-category_grid,
.cms-product_rail,
.cms-product_grid,
.cms-deal_countdown,
.cms-brand_strip,
.cms-faq,
.cms-testimonials,
.cms-banner_strip {
  background: var(--paper);
  padding: 16px 12px 18px;
}

@media (min-width: 760px) {
  .cms { margin-bottom: 14px; }
  .cms-category_grid,
  .cms-product_rail,
  .cms-product_grid,
  .cms-deal_countdown,
  .cms-brand_strip,
  .cms-faq,
  .cms-testimonials,
  .cms-banner_strip {
    padding: 20px 20px 24px;
    border-radius: var(--r-md);
  }
}

/* ---- section headings ---------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 14px;
}
.section-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.2px;
  line-height: 1.25;
}
.section-head .section-sub {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.section-head .seeall {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  background: var(--blue-600);
  border-radius: 5px;
  white-space: nowrap;
}
.section-head .seeall svg { width: 12px; height: 12px; }
.section-head .seeall:hover { background: var(--blue-700); }

@media (min-width: 760px) {
  .section-head h2 { font-size: 21px; }
}

/* ---- hero carousel -------------------------------------------------- */

.hero-slider { position: relative; overflow: hidden; border-radius: 0; }
@media (min-width: 760px) { .hero-slider { border-radius: var(--r-md); } }

.hero-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.hero-slide {
  position: relative;
  flex: 0 0 100%;
  display: block;
  aspect-ratio: 16 / 7;
  background: var(--blue-800);
}
/* Phones get a taller crop so the copy in the artwork stays legible. */
@media (max-width: 620px) { .hero-slide { aspect-ratio: 16 / 11; } }

.hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The banner art already carries its copy, so the overlay only appears
   when a slide has text of its own to show. */
.hero-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 16px;
  background: linear-gradient(transparent, rgba(8, 27, 77, .82));
  color: #fff;
}
.hero-copy h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.hero-copy p  { margin: 0; font-size: 13px; opacity: .9; }
.hero-badge {
  display: inline-block;
  margin-bottom: 7px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--amber-400);
  border-radius: 3px;
}
.hero-copy .btn-cta { margin-top: 11px; }

.hero-dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.hero-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
}
.hero-dot.is-on { background: #fff; width: 18px; border-radius: 4px; }

/* ---- category tiles -------------------------------------------------- */

/* Scrolls sideways on a phone, exactly like the app versions do, then
   becomes a grid once every tile fits without scrolling. */
.catgrid {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin: 0 -12px;
  padding: 0 12px 4px;
  scrollbar-width: none;
}
.catgrid::-webkit-scrollbar { display: none; }

.catpill {
  flex: 0 0 76px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.catpill-img {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--blue-050);
  font-size: 24px;
}
.catpill-img img { width: 100%; height: 100%; object-fit: cover; }
.catpill b {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.catpill:hover b { color: var(--blue-600); }

@media (min-width: 760px) {
  .catgrid {
    display: grid;
    grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr));
    gap: 14px 8px;
    overflow: visible;
    margin: 0;
    padding: 0;
  }
  .catpill { flex: none; }
  .catpill-img { width: 82px; height: 82px; }
  .catpill b { font-size: 12.5px; }
}

/* ---- product rails and grids ---------------------------------------- */

.prodrail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  margin: 0 -12px;
  padding: 2px 12px 6px;
  scrollbar-width: thin;
}
.prodrail::-webkit-scrollbar { height: 0; }
.prodrail > * {
  flex: 0 0 46%;
  scroll-snap-align: start;
}

.prodgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (min-width: 560px) {
  .prodrail > * { flex-basis: 31%; }
  .prodgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .prodrail { margin: 0; padding: 2px 0 6px; gap: 12px; }
  .prodrail > * { flex-basis: 22%; }
  .prodgrid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 12px; }
}
@media (min-width: 1200px) {
  .prodrail > * { flex-basis: 18.4%; }
}

/* ---- deal countdown -------------------------------------------------- */

.cms-deal_countdown .section-head { margin-bottom: 10px; }

.countdown {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 6px 12px;
  background: var(--red-050);
  border-radius: 6px;
}
.cd-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cd-clock { display: flex; gap: 3px; font-variant-numeric: tabular-nums; }
.cd-clock b {
  min-width: 26px;
  padding: 3px 5px;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--red-600);
  border-radius: 4px;
  text-align: center;
}

/* ---- banner rows ----------------------------------------------------- */

.banner-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.banner-tile {
  position: relative;
  display: block;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--wash);
}
.banner-img { display: block; width: 100%; height: auto; }
.banner-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  background: linear-gradient(transparent, rgba(16,19,34,.72));
  color: #fff;
}
.banner-copy b { display: block; font-size: 13.5px; }
.banner-copy span { font-size: 11.5px; opacity: .88; }

@media (min-width: 760px) {
  .banner-row { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 14px; }
}

.wide-banner { display: block; position: relative; border-radius: var(--r-md); overflow: hidden; }
.wide-img { display: block; width: 100%; height: auto; }

/* ---- trust strip ------------------------------------------------------ */

/* Four across even on the narrowest phone: these are reassurance, not
   reading, so they can be small. */
.usps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 12px;
  background: var(--paper);
}
.usp { display: flex; gap: 9px; align-items: center; }
.usp-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
}
.usp-ic svg { width: 17px; height: 17px; }
.usp b    { display: block; font-size: 12.5px; line-height: 1.3; }
.usp span { font-size: 11px; color: var(--ink-3); }

@media (min-width: 620px) {
  .usps { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 16px 20px; border-radius: var(--r-md); }
}

/* ---- brand strip ------------------------------------------------------ */

.brandrow {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -12px;
  padding: 0 12px;
  scrollbar-width: none;
}
.brandrow::-webkit-scrollbar { display: none; }
.brandchip {
  flex: 0 0 116px;
  display: grid;
  place-items: center;
  height: 58px;
  padding: 8px;
  background: var(--wash);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
}
.brandchip img { max-width: 100%; max-height: 40px; object-fit: contain; }
.brandchip span { font-size: 12px; font-weight: 700; color: var(--ink-2); }

@media (min-width: 760px) {
  .brandrow { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; gap: 12px; }
  .brandchip { flex: 1 1 130px; }
}

/* ---- questions --------------------------------------------------------- */

.faqlist { display: grid; gap: 8px; }
.faqitem {
  background: var(--wash);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.faqitem summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faqitem summary::-webkit-details-marker { display: none; }
.faq-plus {
  flex: none;
  position: relative;
  width: 14px; height: 14px;
}
.faq-plus::before,
.faq-plus::after {
  content: '';
  position: absolute;
  background: var(--ink-3);
  transition: transform .18s ease;
}
.faq-plus::before { inset: 6px 0 auto 0; height: 2px; }
.faq-plus::after  { inset: 0 6px auto 6px; width: 2px; height: 14px; }
.faqitem[open] .faq-plus::after { transform: scaleY(0); }
.faqitem .rte { margin-top: 9px; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }

/* ---- newsletter and CTA bands ------------------------------------------ */

.newsbox,
.ctaband {
  display: grid;
  gap: 14px;
  padding: 22px 16px;
  background: var(--carbon);
  color: #fff;
  border-radius: 0;
}
@media (min-width: 760px) {
  .newsbox, .ctaband {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 26px 24px;
    border-radius: var(--r-md);
  }
}
.newsbox h2, .ctaband h2 { margin: 0 0 5px; font-size: 19px; font-weight: 800; }
.newsbox p,  .ctaband p  { margin: 0; font-size: 13.5px; opacity: .82; }

.newsform { display: flex; gap: 8px; }
.newsform input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  font-size: 14px;
  border: 0;
  border-radius: var(--r-sm);
}
.newsform .btn { flex: none; }

.cms-cta_banner .ctaband { background: var(--blue-700); }

/* ---- image beside text -------------------------------------------------- */

.imgtext { display: grid; gap: 16px; align-items: center; }
.imgtext-media img { width: 100%; border-radius: var(--r-md); }
@media (min-width: 760px) {
  .imgtext { grid-template-columns: 1fr 1fr; gap: 32px; }
  .imgtext.flip .imgtext-media { order: 2; }
}

/* ---- backgrounds -------------------------------------------------------- */

.bg-wash   { background: var(--wash); }
.bg-white  { background: var(--paper); }
.bg-brand  { background: var(--blue-700); color: #fff; }
.bg-carbon { background: var(--carbon); color: #fff; }
.bg-brand .section-head h2,
.bg-carbon .section-head h2 { color: #fff; }

/* ---- device visibility --------------------------------------------------- */

.only-desktop { display: none; }
@media (min-width: 760px) {
  .only-desktop { display: block; }
  .only-mobile  { display: none; }
}

/* =====================================================================
   LAYERING
   ---------------------------------------------------------------------
   One scale, declared once, so nothing has to guess a number again.
   The gaps are deliberate: room to slot something between two layers
   without renumbering the rest.

   10  page furniture that overlaps content (sticky filters, badges)
   20  dropdowns hanging off the header
   30  the header itself
   40  fixed bottom furniture (tab bar, cart bar)
   50  floating buttons (help)
   60  drawers and their backdrop
   70  modals and sheets
   80  toasts
   90  skip link — must beat everything, it is the accessibility escape
   ===================================================================== */

:root {
  --z-raised:   10;
  --z-dropdown: 20;
  --z-header:   30;
  --z-fixed:    40;
  --z-float:    50;
  --z-drawer:   60;
  --z-modal:    70;
  --z-toast:    80;
  --z-skip:     90;
}

.appbar        { z-index: var(--z-header); }
.navdrop-panel { z-index: var(--z-dropdown); }
.catnav        { z-index: var(--z-raised); }
.tabbar        { z-index: var(--z-fixed); }
.meter         { z-index: var(--z-fixed); }
.cartbar       { z-index: var(--z-fixed); }
.helpfab       { z-index: var(--z-float); }
.drawer,
.drawer-back   { z-index: var(--z-drawer); }
.sheet,
.sheet-back    { z-index: var(--z-modal); }
.skip-link     { z-index: var(--z-skip); }

/* The old WhatsApp button is replaced by the help centre. */
.wa { display: none !important; }

/* =====================================================================
   ICON SIZING
   ---------------------------------------------------------------------
   Inline SVGs inherit font-size and will render at 100% of their
   viewBox if nothing constrains them, which is why a few came out
   enormous. This caps every icon and lets specific places opt up.
   ===================================================================== */

svg { flex: none; }

.btn svg,
.seeall svg,
.crumbs svg,
.navdrop-top svg,
.usp-ic svg,
.pcard-bulk svg,
.chiprow svg,
.tag svg {
  width: 1em;
  height: 1em;
}

.appbar svg   { width: 21px; height: 21px; }
.tabbar svg   { width: 22px; height: 22px; }
.catnav svg   { width: 15px; height: 15px; }
.usp-ic svg   { width: 17px; height: 17px; }
.faq-plus     { width: 14px; height: 14px; }

/* An icon on its own inside a link or button, with no text beside it,
   should not stretch to fill the box. */
a > svg:only-child,
button > svg:only-child { width: 20px; height: 20px; }

/* =====================================================================
   NAVIGATION — phone first
   ---------------------------------------------------------------------
   The category bar used to wrap and push the page down on a phone.
   It now scrolls sideways, which is what every shopping app does and
   what a thumb expects.
   ===================================================================== */

.catnav { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); }
.catnav .wrap {
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px;
}
.catnav .wrap::-webkit-scrollbar { display: none; }
.catnav a,
.catnav .navdrop-top {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 11px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}
.catnav a:hover,
.catnav .navdrop-top:hover { color: var(--blue-600); }
.catnav .hot { color: var(--orange-600); }

/* The hover mega panel is a desktop affordance. On a touch screen the
   top-level link just navigates, and the drawer covers browsing. */
@media (max-width: 899px) {
  .navdrop-panel { display: none !important; }
  .navdrop-top svg { display: none; }
}

@media (min-width: 900px) {
  .catnav .wrap { overflow: visible; padding: 0 20px; gap: 2px; }
  .navdrop-panel { z-index: var(--z-dropdown); }
}

/* =====================================================================
   MOBILE DRAWER
   ---------------------------------------------------------------------
   Full-height slide-in with an accordion, built from the same menu rows
   the desktop mega menu uses. Closes on backdrop, on Escape, and on
   choosing a link.
   ===================================================================== */

.drawer-back {
  position: fixed;
  inset: 0;
  background: rgba(8, 19, 46, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.drawer-back.is-on { opacity: 1; visibility: visible; }

.drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: min(86vw, 360px);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  transform: translateX(-100%);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  overscroll-behavior: contain;
}
.drawer.is-on { transform: none; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--blue-700);
  color: #fff;
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
.drawer-head b { font-size: 15px; }
.drawer-close {
  width: 32px; height: 32px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: rgba(255,255,255,.16);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.drawer-body { flex: 1; overflow-y: auto; padding-bottom: 28px; }

.drawer-item { border-bottom: 1px solid var(--line-2); }
.drawer-item > a,
.drawer-item > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}
.drawer-item .caret { transition: transform .18s ease; color: var(--ink-3); }
.drawer-item.is-open .caret { transform: rotate(90deg); }

.drawer-sub { display: none; background: var(--wash); padding: 2px 0 8px; }
.drawer-item.is-open .drawer-sub { display: block; }
.drawer-sub a {
  display: block;
  padding: 10px 16px 10px 30px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.drawer-sub a:hover { color: var(--blue-600); }

@media (min-width: 900px) {
  .drawer, .drawer-back { display: none; }
}

/* Bottom bar: price on the left, empty-basket on the right. The clear
   control is deliberately quiet — destructive, so it should not compete
   with the button that takes you to checkout. */
.meter-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.meter-clear {
  width: 30px; height: 30px;
  font-size: 19px;
  line-height: 1;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.14);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.meter-clear:hover { background: rgba(255,255,255,.26); color: #fff; }

/* The drawer trigger sits in the category bar and looks like its links. */
.catnav-menu {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}
.catnav-menu:hover { color: var(--blue-600); }

/* =====================================================================
   HELP CENTRE
   ---------------------------------------------------------------------
   Replaces the chat button. A chat widget implies somebody is sitting
   there right now; a form that promises a reply within a working day is
   a promise you can actually keep.

   On a phone it opens as a bottom sheet, which is where a thumb is. On
   desktop it is a panel in the corner.
   ===================================================================== */

.helpfab {
  position: fixed;
  right: 14px;
  bottom: calc(var(--tabbar-h, 62px) + 14px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  background: var(--blue-600);
  border: 0;
  border-radius: 30px;
  box-shadow: var(--sh-blue);
  cursor: pointer;
}
.helpfab svg { width: 17px; height: 17px; }
.helpfab:hover { background: var(--blue-700); }

/* The cart bar sits above the tab bar, so the button lifts clear. */
body.has-meter .helpfab {
  bottom: calc(var(--tabbar-h, 62px) + var(--meter-h, 58px) + 14px + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
  .helpfab { bottom: 22px; right: 22px; }
  body.has-meter .helpfab { bottom: calc(var(--meter-h, 58px) + 22px); }
}

.sheet-back {
  position: fixed;
  inset: 0;
  background: rgba(8, 19, 46, .5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.sheet-back.is-on { opacity: 1; visibility: visible; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  transform: translateY(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  overscroll-behavior: contain;
}
.sheet.is-on { transform: none; }

@media (min-width: 640px) {
  .sheet {
    left: auto;
    right: 20px;
    bottom: 20px;
    width: 400px;
    max-height: 80vh;
    border-radius: var(--r-lg);
    box-shadow: var(--sh-3);
    transform: translateY(16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .sheet.is-on { opacity: 1; visibility: visible; transform: none; }
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.sheet-head b     { display: block; font-size: 15.5px; }
.sheet-head small { font-size: 12.5px; color: var(--ink-3); }
.sheet-close {
  width: 30px; height: 30px;
  font-size: 20px;
  line-height: 1;
  color: var(--ink-2);
  background: var(--wash);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 12px;
}
.sheet-body .field { margin: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.sheet-note {
  padding: 11px 13px;
  font-size: 13px;
  border-radius: var(--r-sm);
  background: var(--green-050);
  color: var(--green-600);
}
.sheet-note.is-bad { background: var(--red-050); color: var(--red-600); }

/* Printing a policy page should not print the furniture. */
@media print {
  .helpfab, .sheet, .sheet-back, .tabbar, .meter, .appbar, .catnav { display: none !important; }
}

/* Refer a friend. The code is the whole point of the page, so it is
   set large and monospaced — a code you read aloud to someone should
   not be in a proportional face where 1 and l look alike. */
.refbox { margin-bottom: 14px; }
.refcode { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.refcode b {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--blue-600);
}
.refcopy { display: flex; gap: 8px; }
.refcopy .input { flex: 1; min-width: 0; font-size: 13px; }
.refshare { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.refstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.refstats .card { text-align: center; padding: 14px 10px; }
.refstats b    { display: block; font-size: 20px; font-weight: 800; }
.refstats span { font-size: 11.5px; color: var(--ink-3); }
@media (min-width: 620px) { .refstats { grid-template-columns: repeat(4, 1fr); } }

.walletrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 13.5px;
}
.walletrow:last-child { border-bottom: 0; }
.walletrow small { display: block; font-size: 11.5px; }
.walletrow .pos { color: var(--green-600); }
.walletrow .neg { color: var(--ink-2); }

/* =====================================================================
   BASKET
   ---------------------------------------------------------------------
   Two columns on desktop with a sticky summary; one column on a phone
   with the summary underneath and the real total already visible in the
   bottom bar. Nothing here uses inline styles, so the whole page can be
   restyled from this block.
   ===================================================================== */

.cart-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 18px 0 12px;
}
.cart-head h1 { margin: 0; font-size: 21px; font-weight: 800; }
.cart-keep { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--blue-600); white-space: nowrap; }
.cart-keep svg { width: 12px; height: 12px; }

/* The saving is the reason they are here, so it gets colour and space. */
.cart-saving {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--green-600);
  background: var(--green-050);
  border-radius: var(--r-md);
}
.cart-saving svg { width: 18px; height: 18px; }

.cart-nudge {
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--blue-050);
  border-radius: var(--r-md);
}
.cart-nudge-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--blue-800);
  margin-bottom: 8px;
}
.cart-nudge-pct { font-weight: 800; }
.cart-bar { height: 6px; background: var(--blue-100); border-radius: 4px; overflow: hidden; }
.cart-bar span {
  display: block;
  height: 100%;
  background: var(--blue-600);
  border-radius: 4px;
  transition: width .4s ease;
}

.cart-layout { display: grid; gap: 16px; align-items: start; }
@media (min-width: 900px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
}

/* ---- a line ---------------------------------------------------------- */

.cart-lines {
  background: var(--paper);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cart-line {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--line-2);
}
.cart-line:last-child { border-bottom: 0; }

.cart-thumb { display: block; }
.cart-thumb img {
  width: 76px; height: 76px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--wash);
}

.cart-info { min-width: 0; }
.cart-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
.cart-name:hover { color: var(--blue-600); }

.cart-price { display: flex; align-items: baseline; gap: 7px; margin-top: 5px; font-size: 14px; }
.cart-price b { font-size: 16px; font-weight: 800; }
.cart-price s { color: var(--ink-3); font-size: 12.5px; }
.cart-off { font-style: normal; font-size: 12px; font-weight: 800; color: var(--green-600); }

.cart-tier {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--blue-700);
  background: var(--blue-050);
  border-radius: 4px;
}
.cart-tier svg { width: 12px; height: 12px; }

/* The strongest prompt on the page: a concrete better price, one tap. */
.cart-bumpform { margin-top: 7px; }
.cart-bump {
  padding: 7px 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--blue-700);
  background: #fff;
  border: 1px dashed var(--blue-500);
  border-radius: 6px;
  cursor: pointer;
}
.cart-bump:hover { background: var(--blue-050); }

.cart-low { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 700; color: var(--orange-600); }

.cart-actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.cart-total { font-size: 15px; font-weight: 800; margin-left: auto; }
.cart-remove {
  padding: 0;
  font-size: 12.5px;
  color: var(--ink-3);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.cart-remove:hover { color: var(--red-600); }

.qtybox { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.qtybtn {
  width: 32px; height: 32px;
  font-size: 16px;
  color: var(--ink-2);
  background: var(--wash);
  border: 0;
  cursor: pointer;
}
.qtybtn:hover { background: var(--blue-050); color: var(--blue-600); }
.qtynum {
  width: 42px; height: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  border: 0;
  -moz-appearance: textfield;
}
.qtynum::-webkit-outer-spin-button,
.qtynum::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

@media (min-width: 560px) {
  .cart-line { grid-template-columns: 92px minmax(0, 1fr) auto; }
  .cart-thumb img { width: 92px; height: 92px; }
  .cart-actions {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 0;
  }
  .cart-total { margin-left: 0; }
}

/* ---- summary --------------------------------------------------------- */

.cart-summary { display: grid; gap: 12px; }
@media (min-width: 900px) {
  .cart-summary { position: sticky; top: 76px; }
}

.cart-card { background: var(--paper); border-radius: var(--r-md); padding: 16px; }
.cart-card h2 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }

.t-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.t-save { color: var(--green-600); }
.t-free { color: var(--green-600); }
.t-total {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 17px;
  font-weight: 800;
}
.t-tax { margin: 2px 0 14px; font-size: 11.5px; color: var(--ink-3); }
.t-note { margin: 10px 0 0; font-size: 12px; color: var(--green-600); }
.t-reject { margin: 8px 0 0; font-size: 12px; color: var(--orange-600); }

.couponform { display: flex; gap: 7px; margin-top: 14px; }
.couponform .input { flex: 1; min-width: 0; text-transform: uppercase; }

.cart-trust { list-style: none; margin: 0; padding: 14px 16px; background: var(--wash); border-radius: var(--r-md); }
.cart-trust li {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.cart-trust svg { width: 15px; height: 15px; color: var(--blue-600); }

.cart-empty { text-align: center; padding: 60px 20px; }
.cart-empty-ic {
  display: grid;
  place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--blue-050);
  color: var(--blue-600);
}
.cart-empty-ic svg { width: 32px; height: 32px; }
.cart-empty h1 { margin: 0 0 8px; font-size: 20px; }
.cart-empty p { margin: 0 auto 22px; max-width: 42ch; color: var(--ink-2); }
.cart-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.cart-more { margin-top: 18px; }

/* =====================================================================
   BULK LADDER — rebuilt
   ---------------------------------------------------------------------
   The old version was four flat boxes that said the same thing four
   times. This is a real ladder: each rung wider and cheaper than the
   last, so the idea is legible before you read a word of it.
   ===================================================================== */

.ladderbox {
  position: relative;
  padding: 26px 16px 30px;
  background: linear-gradient(135deg, var(--blue-900), var(--blue-700));
  color: #fff;
  border-radius: 0;
  overflow: hidden;
}
@media (min-width: 760px) { .ladderbox { padding: 34px 28px 38px; border-radius: var(--r-md); } }

.ladderbox::after {
  content: '';
  position: absolute;
  right: -70px; top: -70px;
  width: 260px; height: 260px;
  background: var(--blue-500);
  opacity: .16;
  border-radius: 50%;
}
.ladderbox > * { position: relative; }
.ladderbox h2 { margin: 0 0 6px; font-size: 21px; font-weight: 800; }
.ladderbox > p { margin: 0 0 20px; font-size: 14px; color: rgba(255,255,255,.82); max-width: 54ch; }

.rungs { display: grid; gap: 8px; margin-bottom: 20px; }

.rung {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px 15px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
}

/* Each rung sits a little wider than the one above it, so the stack
   reads as a descending staircase rather than a list. */
.rung:nth-child(1) { margin-right: 18%; }
.rung:nth-child(2) { margin-right: 12%; }
.rung:nth-child(3) { margin-right: 6%; }
.rung:nth-child(4) { margin-right: 0; }

.rung-top {
  background: linear-gradient(135deg, var(--amber-400), var(--orange-500));
  border-color: transparent;
  color: var(--ink);
}

.rung-n { font-size: 20px; font-weight: 800; line-height: 1; }
.rung-l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  opacity: .8;
}
.rung-d {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--amber-400);
}
.rung-top .rung-d { color: var(--ink); }

@media (max-width: 560px) {
  .rung { grid-template-columns: 56px minmax(0, 1fr) auto; padding: 11px 12px; gap: 9px; }
  .rung:nth-child(1) { margin-right: 12%; }
  .rung:nth-child(2) { margin-right: 8%; }
  .rung:nth-child(3) { margin-right: 4%; }
  .rung-n { font-size: 17px; }
  .rung-d { font-size: 13.5px; }
}

/* Used all over the app and somehow never defined. */
.muted { color: var(--ink-3); }
.muted.block, .block { display: block; }
.small { font-size: 12px; }
.warn { color: var(--orange-600); }

/* A category we have not stocked yet. Says so honestly rather than
   pretending a filter went wrong, and offers a way to be told later. */
.soon {
  text-align: center;
  padding: 44px 20px 40px;
  background: var(--blue-050);
  border-radius: var(--r-md);
  margin-bottom: 16px;
}
.soon-badge {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue-600);
  border-radius: 20px;
}
.soon h2 { margin: 0 0 8px; font-size: 20px; }
.soon p  { margin: 0 auto 20px; max-width: 46ch; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.soon-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; }
.soon-form .input { flex: 1; min-width: 0; }
@media (max-width: 520px) {
  .soon-form { flex-direction: column; }
}

/* Stragglers the coverage check found: used in views, never styled. */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.filterbar .input { flex: 1 1 180px; min-width: 0; }
.filterbar .btn { flex: none; }

.gridnote {
  padding: 11px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--blue-050);
  border-radius: var(--r-sm);
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* Section types that had markup but no styles. */
.wide-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 18px 16px;
  background: linear-gradient(transparent, rgba(8,27,77,.8));
  color: #fff;
}
.wide-copy h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.wide-copy p  { margin: 0 0 10px; font-size: 13px; opacity: .9; }

.imgtext-copy h2 { margin: 0 0 10px; font-size: 21px; font-weight: 800; }
.imgtext-copy .rte { color: var(--ink-2); line-height: 1.7; margin-bottom: 14px; }

.quotes { display: grid; gap: 12px; }
@media (min-width: 760px) { .quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quote {
  margin: 0;
  padding: 18px;
  background: var(--wash);
  border-radius: var(--r-md);
}
.quote blockquote {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}
.quote figcaption { display: flex; gap: 10px; align-items: center; }
.quote figcaption img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.quote figcaption b { display: block; font-size: 13px; }
.quote figcaption small { font-size: 11.5px; color: var(--ink-3); }
.quote-initial {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  font-weight: 800;
  font-size: 14px;
}

/* =====================================================================
   The classes the coverage sweep found unstyled.
   btn-save appears on 14 screens including every admin form and the
   sign-in page, so until now those buttons rendered as bare text.
   ===================================================================== */

.btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--blue-600);
  border: 1px solid var(--blue-600);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.btn-save:hover { background: var(--blue-700); border-color: var(--blue-700); }
.btn-save:disabled { background: var(--ink-3); border-color: var(--ink-3); cursor: not-allowed; }

.brand-mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-right: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  background: var(--blue-600);
  border-radius: 7px;
}

/* Sign-in: the OTP flow moves between steps in place. */
.otpstep { display: none; }
.otpstep.is-on { display: block; }
.otpsend, .otpverify { width: 100%; }
.otpback, .otpresend {
  margin-top: 12px;
  padding: 0;
  font-size: 13px;
  color: var(--blue-600);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
.otpresend:disabled { color: var(--ink-3); cursor: not-allowed; text-decoration: none; }

/* Stock sheet: linking an unmapped supplier code to a product. */
.mappack { width: 72px; }
.mapsave { white-space: nowrap; }

/* Page builder: the row a dragged section will land on. */
.rowdrop {
  height: 3px;
  margin: 2px 0;
  background: var(--blue-600);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .12s ease;
}
.rowdrop.is-on { opacity: 1; }

/* =====================================================================
   SUPPLIER PORTAL
   ---------------------------------------------------------------------
   Deliberately unlike the shop: dark bar, no basket, no offers. A
   supplier should never be unsure which side of the business they are
   looking at.
   ===================================================================== */

.vportal { background: var(--wash); }

.vbar { background: var(--carbon); color: #fff; position: sticky; top: 0; z-index: var(--z-header); }
.vbar-in {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 11px 16px;
}
.vbrand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #fff; }

.vnav { display: flex; gap: 4px; margin-left: 10px; }
.vnav a {
  padding: 8px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,.76);
  border-radius: 6px;
}
.vnav a:hover, .vnav a.is-on { color: #fff; background: rgba(255,255,255,.12); }

.vbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.vwho { font-size: 13px; color: rgba(255,255,255,.7); }
.vnav-toggle {
  display: none;
  font-size: 19px;
  color: #fff;
  background: none;
  border: 0;
  cursor: pointer;
}

@media (max-width: 820px) {
  .vnav-toggle { display: block; order: 3; margin-left: auto; }
  .vbar-right .vwho { display: none; }
  .vnav {
    display: none;
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    margin: 6px 0 4px;
  }
  .vnav.is-open { display: flex; }
  .vbar-in { flex-wrap: wrap; }
}

.vmain { padding: 18px 0 60px; }
.vwrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

.vnotice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  padding: 13px 15px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: #7A4A07;
  background: var(--orange-050);
  border-left: 3px solid var(--orange-500);
  border-radius: var(--r-sm);
}
.vnotice .btn { margin-left: auto; }

.vfoot { padding: 18px 0; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.vfoot .vwrap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* Forms in the portal and the QC screen share this grid. */
.vform { background: var(--paper); border-radius: var(--r-md); padding: 18px; margin-bottom: 16px; }
.vform-h {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vform .vform-h:not(:first-child) { margin-top: 22px; }

.vgrid { display: grid; gap: 14px; }
@media (min-width: 680px) {
  .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vgrid .vspan { grid-column: 1 / -1; }
}

.vdoc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  background: var(--paper);
  border-radius: var(--r-md);
}
.vdoc .input { flex: 1 1 200px; min-width: 0; }

/* Live margin hint on the listing form. */
.vhint { margin: 4px 0 0; font-size: 13px; font-weight: 600; }
.vhint.is-ok   { color: var(--green-600); }
.vhint.is-warn { color: var(--orange-600); }
.vhint.is-bad  { color: var(--red-600); }

/* Sign-in cards, shared by supplier and customer. */
.authbox { display: grid; place-items: center; min-height: 80vh; padding: 30px 16px; }
.authcard {
  width: 100%;
  max-width: 400px;
  padding: 28px;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
}
.authcard .brand-mark { margin-bottom: 14px; }
.authcard h1 { margin: 0 0 4px; font-size: 21px; }
.authcard > p { margin: 0 0 20px; }
.authnote { margin-top: 18px; font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
.btn-block { width: 100%; }

/* =====================================================================
   OFFER TICKETS
   ---------------------------------------------------------------------
   Shared by the shop (offers page, homepage band) and the admin preview,
   so it lives here rather than in storefront.css. A coloured stub with
   the value, a tear line, and the paper side with the details. The
   notches are cut with a mask so they show the page behind them
   whatever colour that page is.
   ===================================================================== */

.oticket {
  --oc: #1B5CFF;
  --stub: 96px;
  position: relative;
  display: grid;
  grid-template-columns: var(--stub) minmax(0, 1fr);
  min-height: 132px;
  background: var(--paper);
  border-radius: 16px;
  -webkit-mask:
    radial-gradient(circle 9px at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 9px at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask:
    radial-gradient(circle 9px at var(--stub) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 9px at var(--stub) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.oticket-stub {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 14px 8px; text-align: center;
  color: #fff;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 6px, transparent 6px 14px),
    var(--oc);
}
.oticket-stub::after {
  content: ""; position: absolute; right: -1px; top: 14px; bottom: 14px;
  border-right: 2px dashed rgba(255,255,255,.55);
}
.oticket-big {
  font-family: "Bricolage Grotesque", var(--sans);
  font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em;
  word-break: break-word;
}
.oticket-big:where(:not(:empty)) { max-width: 100%; }
.oticket-small { font-size: 12.5px; font-weight: 700; opacity: .92; text-transform: lowercase; }

.oticket-body { display: flex; flex-direction: column; gap: 5px; padding: 14px 14px 13px 16px; min-width: 0; }
.oticket-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ink); font-family: var(--sans); letter-spacing: 0; }
.oticket-cond { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }

.oticket-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 6px; flex-wrap: wrap; }
.oticket-code {
  display: inline-flex; align-items: stretch; overflow: hidden; max-width: 100%;
  padding: 0; border: 1.5px dashed var(--oc); border-radius: 9px;
  background: color-mix(in srgb, var(--oc) 7%, #fff);
  cursor: pointer; font: inherit;
}
.oticket-code-txt {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 6px 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--ink);
}
.oticket-code-act {
  display: grid; place-items: center; flex: none; padding: 0 10px;
  background: var(--oc); color: #fff; font-size: 12px; font-weight: 800;
}
.oticket-code:hover .oticket-code-act { filter: brightness(1.08); }
.oticket-code.is-copied .oticket-code-act { background: var(--green-600); }
.oticket-auto {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--green-600);
}
.oticket-auto::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px var(--green-050);
}
.oticket-ends { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.oticket-ends.is-soon { color: var(--red-600); font-weight: 800; }

.oticket-terms { font-size: 12px; color: var(--ink-3); }
.oticket-terms summary { cursor: pointer; width: fit-content; font-weight: 600; }
.oticket-terms p { margin: 4px 0 0; line-height: 1.5; }

/* Featured: a wide card with the artwork. */
.oticket-wide { grid-template-columns: var(--stub) minmax(0, 1fr); grid-template-rows: auto 1fr; }
.oticket-wide .oticket-art { grid-column: 1 / -1; aspect-ratio: 5 / 2; overflow: hidden; background: var(--oc); }
.oticket-wide .oticket-art img { width: 100%; height: 100%; object-fit: cover; }
.oticket-wide {
  -webkit-mask: none; mask: none;
}
@media (min-width: 760px) {
  .oticket-wide { --stub: 150px; grid-template-columns: minmax(0, 1.25fr) var(--stub) minmax(0, 1fr); grid-template-rows: 1fr; }
  .oticket-wide .oticket-art { grid-column: auto; aspect-ratio: auto; min-height: 220px; }
  .oticket-wide .oticket-big { font-size: 42px; }
  .oticket-wide .oticket-title { font-size: 19px; }
  .oticket-wide .oticket-body { padding: 22px; }
}

/* =====================================================================
   ADMIN — offers
   ===================================================================== */

.offadm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.offadm-stat { margin-left: auto; text-align: right; line-height: 1.2; }
.offadm-stat b { display: block; font-size: 20px; }
.offadm-stat span { font-size: 12px; color: var(--ink-3); }
.offadm-tabs { margin-bottom: 12px; }
.offadm-n { margin-left: 4px; opacity: .7; font-weight: 700; }
.offadm-table tr.is-dim td { opacity: .6; }
.offadm-name { display: flex; gap: 10px; align-items: flex-start; min-width: 220px; }
.offadm-name small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }
.offadm-name .tag { margin-left: 6px; }
.offadm-dot { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 4px; }
.offadm-code { padding: 2px 7px; border-radius: 6px; background: var(--wash); font-size: 12.5px; font-weight: 800; letter-spacing: .04em; }
.offadm-dates { white-space: nowrap; font-size: 12.5px; }
.offadm-actions { white-space: nowrap; }
.offadm-actions form { display: inline; }
.offadm-empty { text-align: center; padding: 40px 20px; }
.offadm-empty h2 { margin: 0 0 6px; font-size: 18px; }
.offadm-empty p { margin: 0 0 16px; color: var(--ink-3); }

.offform .card + .card { margin-top: 14px; }
.offform-h { margin: 0 0 14px; font-size: 16px; }
.offform-h .hint { font-weight: 400; font-size: 12px; color: var(--ink-3); }
.offform-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 16px; }
.offform-type { position: relative; }
.offform-type input { position: absolute; opacity: 0; }
.offform-type span {
  display: block; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; text-align: center;
}
.offform-type input:checked + span { border-color: var(--blue-600); background: var(--blue-050); color: var(--blue-700); }
.offform-type input:focus-visible + span { outline: 3px solid var(--blue-500); outline-offset: 2px; }
.offform-colour { display: flex; align-items: center; gap: 10px; min-height: 46px; }
.offform-colour input { width: 52px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; cursor: pointer; }
.offform-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.offform-switch input { width: 18px; height: 18px; accent-color: var(--blue-600); }
.offform-pick {
  display: block; columns: 3 190px; column-gap: 18px;
  max-height: 240px; overflow-y: auto; padding: 12px; margin-bottom: 14px;
  background: var(--wash); border-radius: 10px; font-size: 13.5px;
}
.offform-pick label { display: flex; align-items: center; gap: 8px; padding: 3px 0; break-inside: avoid; }
.offform-pick label.depth-0 { font-weight: 700; margin-top: 6px; }
.offform-pick label.depth-1 { padding-left: 16px; }
.offform-pick label.depth-2, .offform-pick label.depth-3 { padding-left: 32px; color: var(--ink-2); }
.offform-pick .hint { column-span: all; margin: 8px 0 0; }
.offform-warn {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px; margin-bottom: 4px;
  border-radius: 10px; background: var(--orange-050); color: #7A3A0A; font-size: 13px;
}
.offform-codebox { display: flex; gap: 8px; }
.offform-codebox .input { flex: 1; min-width: 0; }
.offform-current { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 13px; }
.offform-current img { width: 200px; max-width: 100%; border-radius: 10px; }
.offform-preview { padding: 14px; border-radius: 14px; background: #EEF2F9; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 13px; }
[hidden] { display: none !important; }
.flash-ok { background: var(--green-050); color: var(--green-600); }

/* The admin column was a plain 1fr, which grows to fit a wide table and
   pushes the page sideways. min-width: 0 lets the table scroll instead. */
.panel-main { min-width: 0; }
.offadm-actions { display: flex; flex-wrap: wrap; gap: 5px; min-width: 170px; }
.offadm-actions .btn-sm { height: 32px; padding: 0 10px; font-size: 12.5px; }

/* Offers master switch (Admin > Offers & coupons) */
.offmaster {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  margin: 0 0 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper);
}
.offmaster.is-on  { border-color: #9fdcbf; background: #effaf4; }
.offmaster.is-off { border-color: #f3b4a8; background: #fff3f0; }
.offmaster-state { display: flex; gap: 12px; align-items: center; }
.offmaster-state b { display: block; font-size: 16px; }
.offmaster-state small { display: block; color: var(--ink-2); font-size: 13px; max-width: 62ch; }
.offmaster-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; background: #0e8a52; box-shadow: 0 0 0 5px rgba(14,138,82,.15); }
.offmaster.is-off .offmaster-dot { background: #d6402b; box-shadow: 0 0 0 5px rgba(214,64,43,.15); }

/* Admin > Categories */
.catadm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 14px; }
.catadm-stats div { padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; }
.catadm-stats b { display: block; font-size: 22px; }
.catadm-stats span { font-size: 12.5px; color: var(--ink-3); }
.catadm-stats .is-hot { border-color: #f5b98f; background: #fff6ef; }
.catadm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.catadm-mode { display: flex; gap: 8px; align-items: center; margin-left: auto; font-size: 13px; font-weight: 600; }
.catadm-mode select { width: auto; min-width: 260px; }
.catadm-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.catadm-tools .input { max-width: 320px; }
.catadm-tools .chiprow { margin: 0; }
.catadm .catadm-tog { width: 22px; height: 22px; margin-right: 4px; border: 0; border-radius: 6px; background: var(--wash); cursor: pointer; font-size: 11px; line-height: 1; }
.catadm .catadm-tog-gap { display: inline-block; width: 26px; }
.catadm .catadm-name { font-weight: 600; color: var(--ink); }
.catadm .catadm-d0 .catadm-name { font-weight: 800; font-size: 15px; }
.catadm .catadm-d0 { background: #f7f9fd; }
.catadm tr.is-draft { opacity: .6; }
.catadm .catadm-wait { font-weight: 800; color: #c0510e; }
.catadm .catadm-crumb { display: none; font-size: 11.5px; color: var(--ink-3); }
.catadm.is-flat .catadm-crumb { display: block; margin-left: 26px; }
.catadm.is-flat .catadm-tog { visibility: hidden; }
.catadm.is-flat td:first-child { padding-left: 12px !important; }
.catwait { max-height: 320px; overflow: auto; font-size: 13px; }
.catwait div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cattile { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; border: 1px solid var(--line); display: block; margin-bottom: 8px; }

/* Order status badges: one colour per step, the same in the admin and the customer's account */
.ost { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: #EEF0F5; color: #4B5563; }
.ost i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ost-awaiting { background: #FFF6DB; color: #8A5A00; }
.ost-placed { background: #EEF0F5; color: #4B5563; }
.ost-confirmed { background: #E7EEFF; color: #1B4FD6; }
.ost-packed { background: #EFE9FF; color: #5B35C9; }
.ost-shipped { background: #E5F4FB; color: #0B6E99; }
.ost-out_for_delivery { background: #FFEFE3; color: #C2410C; }
.ost-delivered { background: #E3F6EA; color: #15803D; }
.ost-cancelled { background: #FDE8E8; color: #B91C1C; }
.ost-returned, .ost-closed { background: #F1EDE8; color: #6B4F35; }
.ost-requested { background: #FFF6DB; color: #8A5A00; }
.ost-approved, .ost-picked, .ost-received { background: #E7EEFF; color: #1B4FD6; }
.ost-rejected { background: #FDE8E8; color: #B91C1C; }
.ost-refunded { background: #E3F6EA; color: #15803D; }
.ost-out_for_delivery i, .ost-shipped i { animation: ostPulse 1.6s ease-in-out infinite; }
@keyframes ostPulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ost i { animation: none !important; } }