/* =====================================================================
   UsaDill — Core stylesheet (storefront)  ·  v3 "Lumen" design language
   Hand-written CSS. Mobile-first. No frameworks.
   Palette: Emerald + Ember on airy slate-white.
   Type: Outfit (display) + Inter (body).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root {
  /* Brand — Emerald */
  --emerald-950: #052e22;
  --emerald-900: #064e3b;
  --emerald-800: #065f46;
  --emerald-700: #047857;
  --emerald-600: #059669;
  --emerald-500: #10b981;
  --emerald-400: #34d399;
  --emerald-300: #6ee7b7;
  --emerald-100: #d1fae5;
  --emerald-50:  #ecfdf5;

  /* Legacy brand alias — older markup + inline styles */
  --indigo-950: var(--emerald-950);
  --indigo-900: var(--emerald-900);
  --indigo-800: var(--emerald-800);
  --indigo-700: var(--emerald-700);
  --indigo-600: var(--emerald-600);
  --indigo-500: var(--emerald-500);
  --indigo-400: var(--emerald-400);
  --indigo-300: var(--emerald-300);
  --indigo-100: var(--emerald-100);
  --indigo-50:  var(--emerald-50);

  /* Accent — Ember (warm orange) */
  --ember-800: #9a3412;
  --ember-700: #c2410c;
  --ember-600: #ea580c;
  --ember-500: #f97316;
  --ember-400: #fb923c;
  --ember-300: #fdba74;
  --ember-100: #ffedd5;
  --ember-50:  #fff7ed;

  /* Legacy accent alias */
  --coral-700: var(--ember-700);
  --coral-600: var(--ember-600);
  --coral-500: var(--ember-500);
  --coral-400: var(--ember-400);
  --coral-300: var(--ember-300);
  --coral-100: var(--ember-100);
  --coral-50:  var(--ember-50);

  /* Support — Green (success) */
  --mint-700: #15803d;
  --mint-600: #16a34a;
  --mint-500: #22c55e;
  --mint-100: #dcfce7;

  /* Support — Amber (warnings) */
  --amber-700: #b45309;
  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-100: #fef3c7;

  /* Support — Violet (informational) */
  --sky-700: #6d28d9;
  --sky-600: #7c3aed;
  --sky-100: #ede9fe;

  /* Danger */
  --rose-700: #b91c1c;
  --rose-600: #dc2626;
  --rose-100: #fee2e2;

  /* Neutrals — cool slate */
  --ink-900: #0f172a;
  --ink-800: #1e293b;
  --ink-700: #334155;
  --ink-600: #475569;
  --ink-500: #64748b;
  --ink-400: #94a3b8;
  --ink-300: #cbd5e1;
  --ink-200: #e2e8f0;
  --ink-100: #f1f5f9;
  --porcelain:   #f8fafc;
  --porcelain-2: #eef2f7;
  --white: #ffffff;

  /* Semantic */
  --ok-600: var(--mint-600);
  --ok-100: var(--mint-100);
  --warn-600: var(--amber-600);
  --warn-100: var(--amber-100);
  --bad-600: var(--rose-600);
  --bad-100: var(--rose-100);
  --info-600: var(--sky-600);
  --info-100: var(--sky-100);

  /* Legacy aliases — v1 markup carries teal/gold names; keep them rendering
     in the new palette so nothing disappears. */
  --teal-900: var(--emerald-900);
  --teal-800: var(--emerald-800);
  --teal-700: var(--emerald-700);
  --teal-600: var(--emerald-600);
  --teal-500: var(--emerald-500);
  --teal-100: var(--emerald-100);
  --teal-50:  var(--emerald-50);
  --gold-700: var(--ember-700);
  --gold-600: var(--ember-600);
  --gold-500: var(--ember-500);
  --gold-400: var(--ember-400);
  --gold-100: var(--ember-100);
  --cream:    var(--porcelain);
  --cream-2:  var(--porcelain-2);

  /* Type */
  --font-display: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans Bengali', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans Bengali', sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Space */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radius — softer, calmer than v2 */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* Shadow — cool, low-opacity, layered */
  --sh-xs: 0 1px 2px rgba(15,23,42,.04);
  --sh-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 4px 16px rgba(15,23,42,.07), 0 1px 3px rgba(15,23,42,.04);
  --sh-lg: 0 12px 32px rgba(15,23,42,.09), 0 3px 8px rgba(15,23,42,.05);
  --sh-xl: 0 24px 60px rgba(15,23,42,.13), 0 8px 20px rgba(15,23,42,.07);
  --sh-glow: 0 8px 26px rgba(5,150,105,.28);
  --sh-coral: 0 8px 26px rgba(234,88,12,.26);

  /* Glass */
  --glass-bg: rgba(255,255,255,.74);
  --glass-border: rgba(255,255,255,.6);
  --glass-blur: blur(20px) saturate(1.7);

  /* Layout */
  --wrap: 1280px;
  --header-h: 70px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ---------------------------------------------------------------------
   2. RESET
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.68;
  color: var(--ink-700);
  background: var(--porcelain);
  background-image:
    radial-gradient(1100px 520px at 88% -8%, rgba(16,185,129,.07), transparent 62%),
    radial-gradient(900px 460px at -8% 4%, rgba(124,58,237,.05), transparent 60%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--emerald-700); text-decoration: none; transition: color .18s var(--ease); }
a:hover { color: var(--emerald-900); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  color: var(--ink-900);
  margin: 0 0 .5em;
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -.022em;
}
h1 { font-size: clamp(1.9rem, 4.6vw, 3.15rem); }
h2 { font-size: clamp(1.5rem, 3.3vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.06rem; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
hr { border: 0; border-top: 1px solid var(--ink-200); margin: var(--sp-6) 0; }
:focus-visible { outline: 3px solid var(--emerald-400); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--emerald-100); color: var(--emerald-900); }

/* ---------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--sp-4); }
.wrap--narrow { max-width: 780px; }
.wrap--mid { max-width: 1000px; }
.section { padding: clamp(40px, 5.4vw, 76px) 0; }
.section--tight { padding: var(--sp-8) 0; }
.section--cream { background: var(--porcelain-2); }
.section--teal { background: linear-gradient(155deg, var(--emerald-950), var(--emerald-800) 62%, var(--ink-900)); color: #fff; }
.section--teal h2, .section--teal h3 { color: #fff; }

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
/* v3.1: on a phone these 2-up grids squeezed each child to ~179px, and wide
   contents (tables, key-value rows) then pushed the page ~170px wider than
   the viewport. Stacking below 700px fixes that without touching the
   desktop / tablet layout at all. */
@media (max-width: 700px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
.flex { display: flex; }
.flex--between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.flex--center { display: flex; align-items: center; justify-content: center; }
.flex--wrap { flex-wrap: wrap; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.mt-0{margin-top:0}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mb-0{margin-bottom:0}.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.text-center{text-align:center}.text-right{text-align:right}
.text-muted{color:var(--ink-500)}.text-sm{font-size:.85rem}.text-xs{font-size:.76rem}
.text-ok{color:var(--ok-600)}.text-bad{color:var(--bad-600)}.text-warn{color:var(--warn-600)}
.fw-600{font-weight:600}.fw-700{font-weight:700}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------
   4. SECTION HEADINGS
   --------------------------------------------------------------------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-8); flex-wrap: wrap; }
.sec-head__eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--emerald-700); margin-bottom: var(--sp-2);
}
.sec-head__eyebrow::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: var(--emerald-500); }
.sec-head h2 { margin: 0; }
.sec-head p { margin: var(--sp-2) 0 0; color: var(--ink-500); max-width: 62ch; }
.sec-head__link { font-weight: 700; font-size: .88rem; white-space: nowrap; color: var(--emerald-700); display: inline-flex; align-items: center; gap: 6px; }
.sec-head__link::after { content: '\2192'; transition: transform .22s var(--ease); display: inline-block; }
.sec-head__link:hover::after { transform: translateX(5px); }

/* ---------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 12px 24px; border-radius: var(--r-pill);
  font-weight: 650; font-size: .9rem; line-height: 1; letter-spacing: .002em;
  border: 1.5px solid transparent; cursor: pointer;
  transition: transform .18s var(--ease-spring), box-shadow .24s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
  white-space: nowrap; text-align: center; position: relative;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--primary { background: linear-gradient(180deg, var(--emerald-500), var(--emerald-600)); color: #fff; box-shadow: var(--sh-glow); }
.btn--primary:hover { color: #fff; background: linear-gradient(180deg, var(--emerald-500), var(--emerald-700)); box-shadow: 0 12px 34px rgba(5,150,105,.38); transform: translateY(-2px); }
.btn--gold { background: linear-gradient(180deg, var(--ember-500), var(--ember-600)); color: #fff; box-shadow: var(--sh-coral); }
.btn--gold:hover { color: #fff; background: linear-gradient(180deg, var(--ember-500), var(--ember-700)); box-shadow: 0 12px 32px rgba(234,88,12,.38); transform: translateY(-2px); }
.btn--ghost { background: #fff; border-color: var(--ink-300); color: var(--ink-700); box-shadow: var(--sh-xs); }
.btn--ghost:hover { border-color: var(--emerald-500); color: var(--emerald-800); background: var(--emerald-50); }
.btn--light { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); color: #fff; backdrop-filter: blur(10px); }
.btn--light:hover { background: rgba(255,255,255,.28); color: #fff; }
.btn--white { background: #fff; color: var(--ink-900); box-shadow: var(--sh-sm); }
.btn--white:hover { color: var(--emerald-800); box-shadow: var(--sh-md); transform: translateY(-2px); }
.btn--danger { background: var(--rose-600); color: #fff; }
.btn--danger:hover { color: #fff; background: var(--rose-700); }
.btn--sm { padding: 9px 17px; font-size: .82rem; }
.btn--xs { padding: 6px 12px; font-size: .75rem; }
.btn--lg { padding: 16px 34px; font-size: 1rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---------------------------------------------------------------------
   6. FORMS
   --------------------------------------------------------------------- */
.field { margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: .83rem; font-weight: 650; color: var(--ink-700); margin-bottom: 7px; }
.field__label .req { color: var(--rose-600); }
.field__hint { font-size: .76rem; color: var(--ink-500); margin-top: 6px; }
.field__error { font-size: .78rem; color: var(--rose-600); margin-top: 6px; font-weight: 600; }

/* Form grid — shared by storefront forms (register, checkout, reseller apply)
   and dashboard forms. Defined here in the storefront sheet so multi-column
   form rows never collapse on pages that do not load admin.css. */
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.form-grid--2 { grid-template-columns: 1fr; }
.form-grid--3 { grid-template-columns: 1fr; }
.form-grid__full { grid-column: 1 / -1; }
.form-grid .field { margin-bottom: 0; }
@media (min-width: 700px) {
  .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .form-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.input, .select, .textarea {
  width: 100%; padding: 12px 15px;
  border: 1.5px solid var(--ink-200); border-radius: var(--r-md);
  background: #fff; font-size: .93rem; color: var(--ink-800);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-300); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--emerald-500);
  box-shadow: 0 0 0 4px rgba(16,185,129,.14);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-400); }
.textarea { min-height: 110px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; }
.input--error, .select--error, .textarea--error { border-color: var(--rose-600); }
.input--error:focus { box-shadow: 0 0 0 4px rgba(220,38,38,.14); }
.input-group { display: flex; }
.input-group .input { border-radius: var(--r-md) 0 0 var(--r-md); }
.input-group .btn { border-radius: 0 var(--r-md) var(--r-md) 0; }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .88rem; color: var(--ink-600); }
.check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--emerald-600); flex-shrink: 0; }

.radio-card { display: block; cursor: pointer; }
.radio-card input { position: absolute; opacity: 0; }
.radio-card__body {
  border: 1.5px solid var(--ink-200); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3); background: #fff;
  transition: all .18s var(--ease);
}
.radio-card input:checked + .radio-card__body { border-color: var(--emerald-600); background: var(--emerald-50); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.radio-card__body:hover { border-color: var(--emerald-400); }

/* ---------------------------------------------------------------------
   7. ALERTS / BADGES / PILLS
   --------------------------------------------------------------------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 14px 17px; border-radius: var(--r-md); margin-bottom: var(--sp-4);
  font-size: .89rem; border: 1px solid transparent; position: relative;
  animation: slideDown .3s var(--ease-out);
}
.alert__icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; color: #fff; margin-top: 1px; }
.alert__close { margin-left: auto; font-size: 1.2rem; line-height: 1; opacity: .5; padding: 0 2px; }
.alert__close:hover { opacity: 1; }
.alert--success, .alert--ok { background: var(--mint-100); border-color: #bbf7d0; color: #14532d; }
.alert--success .alert__icon, .alert--ok .alert__icon { background: var(--mint-600); }
.alert--error { background: var(--rose-100); border-color: #fecaca; color: #7f1d1d; }
.alert--error .alert__icon { background: var(--rose-600); }
.alert--warning, .alert--warn { background: var(--amber-100); border-color: #fde68a; color: #78350f; }
.alert--warning .alert__icon, .alert--warn .alert__icon { background: var(--amber-600); }
.alert--info { background: var(--sky-100); border-color: #ddd6fe; color: #4c1d95; }
.alert--info .alert__icon { background: var(--sky-600); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .72rem; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
}
.badge--ok { background: var(--mint-100); color: var(--mint-700); }
.badge--warn { background: var(--amber-100); color: var(--amber-700); }
.badge--bad { background: var(--rose-100); color: var(--rose-700); }
.badge--info { background: var(--sky-100); color: var(--sky-700); }
.badge--muted { background: var(--ink-100); color: var(--ink-600); }
.badge--gold { background: var(--ember-100); color: var(--ember-700); }
.badge--teal { background: var(--emerald-100); color: var(--emerald-800); }

.pill { display: inline-block; padding: 5px 13px; border-radius: var(--r-pill); background: var(--ink-100); font-size: .78rem; font-weight: 700; color: var(--ink-600); }
.pill--active { background: var(--emerald-600); color: #fff; }

/* ---------------------------------------------------------------------
   8. CARDS
   --------------------------------------------------------------------- */
.card {
  background: #fff; border-radius: var(--r-lg); border: 1px solid var(--ink-200);
  box-shadow: var(--sh-xs); overflow: hidden;
  transition: box-shadow .28s var(--ease), transform .28s var(--ease), border-color .28s var(--ease);
}
.card--hover:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: var(--emerald-300); }
.card__body { padding: var(--sp-5); }
.card__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ink-200); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.card__head h3, .card__head h4 { margin: 0; }
.card__foot { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--ink-200); background: var(--porcelain); }

/* ---------------------------------------------------------------------
   9. TOPBAR + HEADER + MEGA MENU
   --------------------------------------------------------------------- */
.topbar {
  background: var(--emerald-900);
  color: rgba(255,255,255,.9);
  font-size: .78rem; padding: 9px 0;
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.topbar a { color: rgba(255,255,255,.9); }
.topbar a:hover { color: var(--emerald-300); }
.topbar__links { display: flex; gap: var(--sp-4); align-items: center; }
.topbar__hide-sm { display: none; }
.topbar__marquee { display: flex; align-items: center; gap: 8px; }
.topbar__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald-400); box-shadow: 0 0 0 3px rgba(52,211,153,.25); }

.header {
  position: sticky; top: 0; z-index: 200;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--ink-200);
  transition: box-shadow .28s var(--ease), background .28s var(--ease);
}
.header.is-stuck { box-shadow: var(--sh-md); background: rgba(255,255,255,.92); }
.header__inner { display: flex; align-items: center; gap: var(--sp-4); height: var(--header-h); }
.header__logo { flex-shrink: 0; display: flex; align-items: center; }
.header__logo img { height: 40px; width: auto; }

/* Phones: tighten the header so the logo, burger and action icons all fit
   inside a 360–390px viewport without pushing the Sign In button off-screen. */
@media (max-width: 899px) {
  .header__inner { gap: 6px; }
  .header__logo img { height: 31px; }
  .header__actions { gap: 0; }
  .icon-btn { width: 38px; height: 38px; }
  .header__actions .btn--sm { padding: 8px 12px; font-size: .8rem; margin-left: 2px !important; }
}
@media (max-width: 400px) {
  .header__logo img { height: 27px; }
  .icon-btn { width: 34px; height: 34px; }
  .header__actions .btn--sm { padding: 7px 10px; font-size: .76rem; }
}

.header__search { flex: 1; position: relative; display: none; }
.header__search .input { padding-left: 44px; border-radius: var(--r-pill); background: var(--ink-100); border-color: transparent; }
.header__search .input:focus { background: #fff; border-color: var(--emerald-400); }
.header__search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-400); pointer-events: none; display: flex; }

.header__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.icon-btn {
  position: relative; width: 42px; height: 42px; border-radius: var(--r-md);
  display: grid; place-items: center; color: var(--ink-700);
  flex-shrink: 0;   /* never let the header squeeze an icon down to 0px */
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease-spring);
}
.icon-btn svg { display: block; flex-shrink: 0; }
.icon-btn:hover { background: var(--emerald-50); color: var(--emerald-800); transform: translateY(-1px); }
.icon-btn__count {
  position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--r-pill); background: linear-gradient(180deg, var(--ember-500), var(--ember-600)); color: #fff;
  font-size: .66rem; font-weight: 800; display: grid; place-items: center; line-height: 1;
  border: 2px solid #fff;
}
.icon-btn__count:empty, .icon-btn__count[data-count="0"] { display: none; }

.burger { display: grid; }
.header__nav { display: none; }

/* Mobile search row — the inline header search is desktop-only, so phones
   get their own full-width search bar under the header row. */
.header__search-mobile { display: block; padding-bottom: 12px; }
.header__search-mobile form { position: relative; }
.header__search-mobile .input { padding-left: 44px; border-radius: var(--r-pill); background: var(--ink-100); border-color: transparent; }
.header__search-mobile .input:focus { background: #fff; border-color: var(--emerald-400); }

/* ---------------------------------------------------------------------
   Account dropdown  (v3.1 fix)
   These rules used to live only in dashboard.css, which the storefront
   never loads — so on product/checkout/cart the account menu rendered as
   raw unstyled markup. They now live in the stylesheet every page loads.
   --------------------------------------------------------------------- */
.dropdown { position: relative; }

.dropdown__menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 380;
  min-width: 230px; max-width: calc(100vw - 24px);
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  /* The menu is always click/keyboard reachable, never a dead overlay. */
  pointer-events: none;
}
.dropdown.is-open .dropdown__menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

/* v3.4 fix — the Admin "Add Product" menu is a native <details> element, which
   never receives the .is-open class, so the rule above never matched it and the
   menu could not open. Match the native [open] state instead (no JS needed). */
details.dropdown > summary { list-style: none; cursor: pointer; }
details.dropdown > summary::-webkit-details-marker { display: none; }
details.dropdown[open] > .dropdown__menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }

.dropdown__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: var(--r-sm); font-size: .86rem; font-weight: 500;
  color: var(--ink-700); width: 100%; text-align: left;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.dropdown__item:hover, .dropdown__item:focus-visible { background: var(--emerald-50); color: var(--emerald-800); }
.dropdown__item--danger { color: var(--rose-600); }
.dropdown__item--danger:hover { background: var(--rose-100); color: var(--rose-700); }
.dropdown__sep { height: 1px; background: var(--ink-200); margin: 5px 0; }

/* The header must never sit under page content (sticky/stacking contexts
   on the PDP gallery, checkout summary, filter bars, tabs…). */
.header { z-index: 260; }

/* ---------------------------------------------------------------------
   Reseller pricing panel (PDP)  — v3.1
   Lets a reseller type their own selling price and watch the profit
   update live: wholesale, selling, profit per unit, total, margin.
   --------------------------------------------------------------------- */
.sell-panel {
  border: 1px solid var(--emerald-300);
  background: linear-gradient(160deg, var(--emerald-50), #fff 70%);
  border-radius: var(--r-lg);
  padding: 16px 16px 14px;
  margin: 4px 0 18px;
}
.sell-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.sell-panel__title { font-weight: 800; font-size: .95rem; color: var(--emerald-900); letter-spacing: -.01em; }
.sell-panel__grid {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.sell-panel__cell {
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-md); padding: 10px 12px;
}
.sell-panel__label {
  display: block; font-size: .72rem; font-weight: 700; color: var(--ink-500);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.sell-panel__value { font-size: 1.05rem; font-weight: 800; color: var(--ink-900); }
.sell-panel__input-wrap { position: relative; display: flex; align-items: center; }
.sell-panel__cur {
  position: absolute; left: 12px; font-weight: 700; color: var(--ink-500);
  pointer-events: none; font-size: .95rem;
}
.sell-panel__input-wrap .input { padding-left: 32px; font-weight: 700; }
.sell-panel__profit {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px;
}
.sell-panel__profit-item {
  background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-md); padding: 9px 10px; text-align: center;
}
.sell-panel__profit-item strong { display: block; font-size: .95rem; font-weight: 800; color: var(--emerald-700); }
.sell-panel__error {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--rose-100); color: var(--rose-700); font-size: .82rem; font-weight: 600;
}
.sell-panel__warn {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: var(--amber-100); color: var(--amber-700); font-size: .82rem; font-weight: 600;
}
.sell-panel__hint {
  margin: 10px 0 0; font-size: .76rem; color: var(--ink-500); line-height: 1.5;
}

/* Category nav bar */
.catnav { background: #fff; border-bottom: 1px solid var(--ink-200); display: none; }
.catnav__inner { display: flex; align-items: center; gap: var(--sp-1); height: 52px; overflow-x: auto; scrollbar-width: none; }
.catnav__inner::-webkit-scrollbar { display: none; }
.catnav__link {
  padding: 8px 15px; border-radius: var(--r-pill); font-size: .86rem; font-weight: 600;
  color: var(--ink-600); white-space: nowrap; transition: all .18s var(--ease);
}
.catnav__link:hover, .catnav__link.is-active { background: var(--emerald-50); color: var(--emerald-800); }
.catnav__all { background: var(--emerald-600); color: #fff; }

/* ---------------------------------------------------------------------
   v3.2 — ACTIVE MENU STATE
   Every navigation surface (header bar, category strip, mobile drawer, footer
   columns, dashboard sidebar) now shows which page you are on. The active
   treatment is deliberately LOUDER than :hover — a solid tint plus a
   persistent underline/marker bar — so "the pointer is here" and "you are
   here" can never be mistaken for each other.
   --------------------------------------------------------------------- */
.header__nav-link.is-active,
.catnav__link.is-active,
.footer__list a.is-active,
.drawer__link.is-active { color: var(--emerald-700); font-weight: 700; }

/* Header bar — a filled pill (hover only tints) */
@media (min-width: 900px) {
  .header__nav-link.is-active {
    background: var(--emerald-600);
    color: #fff;
    box-shadow: 0 8px 18px -10px rgba(5,120,90,.6);
  }
}

/* Category strip — tint PLUS an underline bar that hover never shows */
.catnav__link { position: relative; }
.catnav__link.is-active { background: var(--emerald-50); color: var(--emerald-800); }
.catnav__link.is-active::after {
  content: ''; position: absolute; left: 15px; right: 15px; bottom: 3px;
  height: 2px; border-radius: 2px; background: var(--emerald-600);
}
.catnav__all.is-active { background: var(--emerald-700); color: #fff; }

/* Mobile drawer — tint plus a left marker bar */
.drawer__link { position: relative; }
.drawer__link.is-active { background: var(--emerald-50); color: var(--emerald-800); font-weight: 700; }
.drawer__link.is-active::before {
  content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--emerald-600);
}

/* Footer link columns */
.footer__list a.is-active {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------
   v3.2 — TOUCH-DEVICE SAFETY NET
   A phone browsing in "Desktop site" mode reports a WIDE viewport with a
   COARSE pointer. Clamping the floating panels by pointer type (rather than
   by width) keeps dropdowns and mega menus inside the physical screen in
   that mode too, without touching the desktop layout at all.
   --------------------------------------------------------------------- */
@media (pointer: coarse) {
  .dropdown__menu { max-width: calc(100vw - 20px); }
  .mega__panel { max-width: calc(100vw - 20px); }
}
/* ---------------------------------------------------------------------
   v3.2 — DELIVERY METHOD PICKER (checkout)
   The methods offered here come from Admin → Shipping, so the list length is
   not fixed. Cards are used instead of a bare radio list so the charge, the
   description and the estimate stay readable on a phone.
   --------------------------------------------------------------------- */
.ship-pick { margin-top: 14px; }
.ship-pick__title {
  font-size: .78rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-600); margin-bottom: 8px;
}
.ship-pick__opt {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff; margin-bottom: 8px; transition: border-color .15s, box-shadow .15s;
}
.ship-pick__opt:hover { border-color: var(--emerald-300); }
.ship-pick__opt:has(input:checked) {
  border-color: var(--emerald-500); background: var(--emerald-50);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}
.ship-pick__opt input { margin-top: 3px; flex-shrink: 0; accent-color: var(--emerald-600); }
.ship-pick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ship-pick__name { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; align-items: baseline; }
.ship-pick__name strong { color: var(--emerald-700); white-space: nowrap; }
.ship-pick__desc { font-size: .82rem; color: var(--ink-500); line-height: 1.45; }
.ship-pick__eta { font-size: .75rem; color: var(--ink-400); font-weight: 600; }

@media (max-width: 480px) {
  .ship-pick__opt { padding: 11px 12px; }
  .ship-pick__name { font-size: .92rem; }
}

.variation-grid { display: grid; gap: 6px; }

.catnav__all:hover { background: var(--emerald-700); color: #fff; }

/* Mega menu */
.mega { position: relative; }
.mega__panel {
  position: absolute; top: calc(100% + 12px); right: 0; left: auto; z-index: 300;
  width: min(92vw, 720px); max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); box-shadow: var(--sh-xl); padding: var(--sp-5);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all .24s var(--ease-out);
}
.mega:hover .mega__panel, .mega.is-open .mega__panel { opacity: 1; visibility: visible; transform: none; }
.mega__col-title { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-700); margin-bottom: var(--sp-3); }
.mega__link { display: block; padding: 7px 10px; border-radius: var(--r-sm); font-size: .86rem; color: var(--ink-600); }
.mega__link:hover { background: var(--emerald-50); color: var(--emerald-800); }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 400; visibility: hidden; pointer-events: none;
}
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(15,23,42,.5); opacity: 0; transition: opacity .3s var(--ease); backdrop-filter: blur(3px); }
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 350px);
  background: #fff; box-shadow: var(--sh-xl); display: flex; flex-direction: column;
  transform: translateX(-102%); transition: transform .36s var(--ease-out);
}
.drawer.is-open .drawer__panel { transform: translateX(0); }
.drawer__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--ink-200); display: flex; align-items: center; justify-content: space-between; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5) var(--sp-8); }
.drawer__group { margin-bottom: var(--sp-5); }
.drawer__group-title { font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-400); margin-bottom: var(--sp-2); }
.drawer__link { display: flex; align-items: center; gap: var(--sp-3); padding: 11px 12px; border-radius: var(--r-md); color: var(--ink-600); font-weight: 550; font-size: .92rem; }
.drawer__link:hover { background: var(--emerald-50); color: var(--emerald-800); }
.drawer__link svg { flex-shrink: 0; color: var(--ink-400); }

/* ---------------------------------------------------------------------
   10. HERO
   --------------------------------------------------------------------- */
.hero { position: relative; background: var(--emerald-950); overflow: hidden; }
.hero__track { display: flex; transition: transform .7s var(--ease-out); }
.hero__slide { min-width: 100%; position: relative; }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(104deg, rgba(5,46,34,.97) 0%, rgba(6,78,59,.9) 42%, rgba(15,23,42,.5) 100%);
}
.hero__content {
  position: relative; z-index: 2; padding: var(--sp-12) 0;
  min-height: 430px; display: flex; flex-direction: column; justify-content: center;
  max-width: 640px; color: #fff;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  background: rgba(52,211,153,.16); border: 1px solid rgba(52,211,153,.42);
  color: var(--emerald-300); padding: 7px 16px; border-radius: var(--r-pill);
  font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.hero__title { color: #fff; font-size: clamp(2.05rem, 5.6vw, 3.6rem); margin-bottom: var(--sp-3); text-shadow: 0 2px 24px rgba(0,0,0,.3); font-weight: 700; }
.hero__text { color: rgba(255,255,255,.9); font-size: clamp(.95rem, 2.2vw, 1.12rem); max-width: 54ch; margin-bottom: var(--sp-6); }
.hero__cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.hero__dots { position: absolute; bottom: var(--sp-5); left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; }
.hero__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); transition: all .28s var(--ease); }
.hero__dot.is-active { background: var(--emerald-400); width: 32px; border-radius: var(--r-pill); }
.hero__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border-radius: 50%; display: none; place-items: center;
  background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.3); transition: all .22s var(--ease);
}
.hero__arrow:hover { background: rgba(255,255,255,.3); transform: translateY(-50%) scale(1.06); }
.hero__arrow--prev { left: var(--sp-4); }
.hero__arrow--next { right: var(--sp-4); }

/* ---------------------------------------------------------------------
   11. TRUST STRIP
   --------------------------------------------------------------------- */
.trust { background: #fff; border-bottom: 1px solid var(--ink-200); }
.trust__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); padding: var(--sp-6) 0; }
.trust__item { display: flex; align-items: center; gap: var(--sp-3); }
.trust__icon { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--emerald-50); color: var(--emerald-700); display: grid; place-items: center; flex-shrink: 0; transition: all .25s var(--ease); }
.trust__item:hover .trust__icon { background: var(--emerald-600); color: #fff; transform: scale(1.06); }
.trust__title { font-weight: 650; font-size: .88rem; color: var(--ink-900); line-height: 1.3; }
.trust__sub { font-size: .76rem; color: var(--ink-500); }

/* ---------------------------------------------------------------------
   12. CATEGORY TILES
   --------------------------------------------------------------------- */
.cat-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-3); background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-lg); text-align: center;
  transition: all .28s var(--ease);
}
.cat-tile:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--emerald-300); }
.cat-tile__icon {
  width: 60px; height: 60px; border-radius: var(--r-lg);
  background: var(--emerald-50);
  color: var(--emerald-700); display: grid; place-items: center;
  transition: all .28s var(--ease);
}
.cat-tile:hover .cat-tile__icon { background: var(--emerald-600); color: #fff; transform: scale(1.08) rotate(-3deg); }
.cat-tile__name { font-weight: 650; font-size: .88rem; color: var(--ink-900); line-height: 1.3; }
.cat-tile__count { font-size: .74rem; color: var(--ink-500); }

/* ---------------------------------------------------------------------
   13. PRODUCT CARD
   --------------------------------------------------------------------- */
.prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.prod-grid--4 { grid-template-columns: repeat(2, 1fr); }

.prod {
  background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column; position: relative;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.prod:hover { box-shadow: var(--sh-lg); transform: translateY(-5px); border-color: var(--emerald-300); }
.prod__media { position: relative; aspect-ratio: 1/1; background: var(--porcelain-2); overflow: hidden; }
.prod__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-out); }
.prod:hover .prod__media img { transform: scale(1.08); }
.prod__flags { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.prod__flag {
  padding: 4px 10px; border-radius: var(--r-pill); font-size: .66rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--sh-xs);
}
.prod__flag--sale { background: var(--ember-600); color: #fff; }
.prod__flag--new { background: var(--emerald-600); color: #fff; }
.prod__flag--hot { background: var(--amber-600); color: #fff; }
.prod__flag--out { background: var(--ink-600); color: #fff; }

.prod__wish {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.95);
  display: grid; place-items: center; color: var(--ink-500);
  box-shadow: var(--sh-sm); transition: all .22s var(--ease-spring);
}
.prod__wish:hover { color: var(--ember-600); transform: scale(1.12); }
.prod__wish.is-on { color: var(--ember-600); }
.prod__wish.is-on svg { fill: currentColor; }

.prod__quick {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2;
  opacity: 0; transform: translateY(12px);
  transition: all .3s var(--ease);
}
.prod:hover .prod__quick { opacity: 1; transform: translateY(0); }

.prod__body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: flex; flex-direction: column; flex: 1; }
.prod__cat { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--emerald-700); margin-bottom: 5px; }
.prod__name { font-family: var(--font-body); font-size: .9rem; font-weight: 600; line-height: 1.45; color: var(--ink-800); margin: 0 0 var(--sp-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.prod__name a { color: inherit; }
.prod__name a:hover { color: var(--emerald-800); }
.prod__rating { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-2); }
.prod__rating-count { font-size: .72rem; color: var(--ink-500); }
.prod__price { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
.prod__price-now { font-family: var(--font-display); font-size: 1.18rem; font-weight: 700; color: var(--ink-900); }
.prod__price-was { font-size: .82rem; color: var(--ink-400); text-decoration: line-through; }
.prod__price-off { font-size: .72rem; font-weight: 800; color: var(--ember-600); }
.prod__wholesale { font-size: .72rem; color: var(--emerald-800); font-weight: 800; margin-top: 4px; }
.prod__stock { font-size: .72rem; color: var(--ink-500); margin-top: 5px; }
.prod__stock--low { color: var(--amber-600); font-weight: 700; }
.prod__stock--out { color: var(--rose-600); font-weight: 700; }

.stars { display: inline-flex; gap: 1px; font-size: .82rem; line-height: 1; }
.star { color: var(--ink-300); }
.star.is-on { color: var(--amber-500); }

/* ---------------------------------------------------------------------
   14. DEAL / COUNTDOWN
   --------------------------------------------------------------------- */
.deal { background: linear-gradient(145deg, var(--emerald-900), var(--emerald-700) 62%, var(--ink-900)); border-radius: var(--r-xl); padding: var(--sp-6); color: #fff; position: relative; overflow: hidden; }
.deal::before { content: ''; position: absolute; top: -70px; right: -70px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(52,211,153,.3), transparent 70%); }
.deal__inner { position: relative; z-index: 2; display: grid; gap: var(--sp-6); }
.deal__title { color: #fff; margin-bottom: var(--sp-2); }
.deal__text { color: rgba(255,255,255,.85); margin-bottom: var(--sp-4); }
.countdown { display: flex; gap: var(--sp-2); }
.countdown__unit { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-md); padding: 10px 13px; text-align: center; min-width: 60px; backdrop-filter: blur(8px); }
.countdown__num { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; line-height: 1; color: var(--emerald-300); }
.countdown__lbl { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.72); margin-top: 3px; }

/* ---------------------------------------------------------------------
   15. RESELLER CTA
   --------------------------------------------------------------------- */
.reseller-cta { background: linear-gradient(135deg, var(--emerald-900), var(--emerald-700) 58%, var(--ink-900)); border-radius: var(--r-xl); padding: var(--sp-8) var(--sp-6); color: #fff; position: relative; overflow: hidden; }
.reseller-cta::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.16), transparent 55%); }
.reseller-cta__inner { position: relative; z-index: 2; }
.reseller-cta h2 { color: #fff; }
.reseller-cta p { color: rgba(255,255,255,.92); max-width: 60ch; }
.reseller-cta__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin: var(--sp-6) 0; }
.reseller-cta__stat-num { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--emerald-300); }
.reseller-cta__stat-lbl { font-size: .74rem; color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------------
   16. BREADCRUMB / PAGE HEAD
   --------------------------------------------------------------------- */
.crumbs { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--ink-500); padding: var(--sp-4) 0; flex-wrap: wrap; }
.crumbs a { color: var(--ink-500); }
.crumbs a:hover { color: var(--emerald-800); }
.crumbs__sep { color: var(--ink-300); }
.crumbs__current { color: var(--ink-700); font-weight: 600; }

.page-head { background: linear-gradient(140deg, var(--emerald-900), var(--ink-900)); color: #fff; padding: var(--sp-10) 0; position: relative; overflow: hidden; }
.page-head::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 88% 10%, rgba(52,211,153,.24), transparent 55%); }
.page-head .wrap { position: relative; z-index: 2; }
.page-head h1 { color: #fff; margin-bottom: var(--sp-2); }
.page-head p { color: rgba(255,255,255,.85); margin: 0; max-width: 70ch; }

/* ---------------------------------------------------------------------
   17. SHOP LAYOUT / FILTERS
   --------------------------------------------------------------------- */
.shop { display: grid; gap: var(--sp-6); padding: var(--sp-6) 0 var(--sp-12); }
.filters { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: var(--sp-5); align-self: start; }
.filters__group { padding-bottom: var(--sp-4); margin-bottom: var(--sp-4); border-bottom: 1px solid var(--ink-200); }
.filters__group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.filters__title { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-900); margin-bottom: var(--sp-3); }
.filters__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.filters__link { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 7px 10px; border-radius: var(--r-sm); font-size: .87rem; color: var(--ink-600); }
.filters__link:hover { background: var(--emerald-50); color: var(--emerald-800); }
.filters__link.is-active { background: var(--emerald-600); color: #fff; font-weight: 600; }
.filters__count { font-size: .74rem; opacity: .7; }
.price-range { display: flex; align-items: center; gap: var(--sp-2); }
.price-range .input { padding: 9px 11px; font-size: .85rem; }

.shop__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.shop__count { font-size: .87rem; color: var(--ink-500); }
.shop__count strong { color: var(--ink-800); }
.shop__tools { display: flex; align-items: center; gap: var(--sp-2); }
.shop__tools .select { padding: 9px 36px 9px 14px; font-size: .85rem; width: auto; }
.filter-toggle { display: inline-flex; }

.active-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); background: var(--emerald-50); border: 1px solid var(--emerald-100); color: var(--emerald-800); font-size: .8rem; font-weight: 600; }
.chip__x { font-size: 1rem; line-height: 1; opacity: .6; }
.chip__x:hover { opacity: 1; }

/* ---------------------------------------------------------------------
   18. PRODUCT DETAIL
   --------------------------------------------------------------------- */
.pdp { display: grid; gap: var(--sp-8); padding: var(--sp-6) 0 var(--sp-12); }
.gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.gallery__main { position: relative; aspect-ratio: 1/1; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumbs { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.gallery__thumb { width: 76px; height: 76px; flex-shrink: 0; border-radius: var(--r-md); overflow: hidden; border: 2px solid var(--ink-200); background: #fff; transition: border-color .2s var(--ease); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { border-color: var(--emerald-600); }
.gallery__thumb:hover { border-color: var(--emerald-400); }

.pdp__title { margin-bottom: var(--sp-3); }
.pdp__meta { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); font-size: .84rem; color: var(--ink-500); }
.pdp__price-box { background: var(--porcelain-2); border-radius: var(--r-lg); padding: var(--sp-5); margin-bottom: var(--sp-5); }
.pdp__price { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pdp__price-now { font-family: var(--font-display); font-size: 2.15rem; font-weight: 700; color: var(--ink-900); letter-spacing: -.03em; }
.pdp__price-was { font-size: 1.05rem; color: var(--ink-400); text-decoration: line-through; }
.pdp__save { font-size: .82rem; font-weight: 800; color: var(--ember-700); background: var(--ember-100); padding: 4px 12px; border-radius: var(--r-pill); }
.pdp__wholesale { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--emerald-50); border: 1px dashed var(--emerald-400); border-radius: var(--r-md); font-size: .85rem; color: var(--emerald-800); font-weight: 700; }
.pdp__short { color: var(--ink-600); margin-bottom: var(--sp-5); }

.var-group { margin-bottom: var(--sp-4); }
.var-group__label { font-size: .84rem; font-weight: 650; color: var(--ink-700); margin-bottom: var(--sp-2); }
.var-options { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.var-opt { padding: 9px 18px; border: 1.5px solid var(--ink-200); border-radius: var(--r-md); font-size: .86rem; font-weight: 600; background: #fff; transition: all .18s var(--ease); }
.var-opt:hover { border-color: var(--emerald-400); }
.var-opt.is-active { border-color: var(--emerald-600); background: var(--emerald-50); color: var(--emerald-800); }

.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--ink-200); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.qty__btn { width: 42px; height: 46px; display: grid; place-items: center; font-size: 1.15rem; color: var(--ink-600); transition: background .18s var(--ease); }
.qty__btn:hover { background: var(--emerald-50); color: var(--emerald-800); }
.qty__input { width: 54px; height: 46px; border: 0; text-align: center; font-weight: 700; font-size: .95rem; -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pdp__actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin: var(--sp-5) 0; }
.pdp__actions .btn { flex: 1; min-width: 150px; }
.pdp__facts { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--ink-200); }
.pdp__fact { display: flex; align-items: center; gap: var(--sp-3); font-size: .86rem; color: var(--ink-600); }
.pdp__fact svg { color: var(--emerald-700); flex-shrink: 0; }

.tabs { margin-top: var(--sp-8); }
.tabs__nav { display: flex; gap: var(--sp-1); border-bottom: 2px solid var(--ink-200); overflow-x: auto; scrollbar-width: none; }
.tabs__nav::-webkit-scrollbar { display: none; }
.tabs__btn { padding: 12px 21px; font-weight: 650; font-size: .9rem; color: var(--ink-500); border-bottom: 2.5px solid transparent; margin-bottom: -2px; white-space: nowrap; transition: all .2s var(--ease); }
.tabs__btn:hover { color: var(--emerald-800); }
.tabs__btn.is-active { color: var(--ink-900); border-bottom-color: var(--emerald-600); }
.tabs__panel { display: none; padding: var(--sp-6) 0; }
.tabs__panel.is-active { display: block; animation: fadeUp .35s var(--ease-out); }
.tabs__panel h3 { margin-top: var(--sp-5); }
.tabs__panel h3:first-child { margin-top: 0; }

.review { padding: var(--sp-5) 0; border-bottom: 1px solid var(--ink-200); }
.review:last-child { border-bottom: 0; }
.review__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.review__avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(140deg, var(--emerald-500), var(--emerald-800)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex-shrink: 0; }
.review__name { font-weight: 650; font-size: .9rem; color: var(--ink-800); }
.review__date { font-size: .76rem; color: var(--ink-400); }
.review__title { font-weight: 650; color: var(--ink-900); margin-bottom: 4px; }
.review__text { color: var(--ink-600); font-size: .9rem; margin: 0; }

.rating-summary { display: grid; gap: var(--sp-5); padding: var(--sp-5); background: var(--porcelain-2); border-radius: var(--r-lg); margin-bottom: var(--sp-6); }
.rating-summary__score { text-align: center; }
.rating-summary__num { font-family: var(--font-display); font-size: 3.1rem; font-weight: 700; color: var(--ink-900); line-height: 1; letter-spacing: -.03em; }
.rating-summary__bars { display: flex; flex-direction: column; gap: 7px; }
.rating-bar { display: flex; align-items: center; gap: var(--sp-3); font-size: .8rem; }
.rating-bar__track { flex: 1; height: 7px; background: var(--ink-200); border-radius: var(--r-pill); overflow: hidden; }
.rating-bar__fill { height: 100%; background: linear-gradient(90deg, var(--amber-500), var(--amber-600)); border-radius: var(--r-pill); }

/* ---------------------------------------------------------------------
   19. CART DRAWER
   --------------------------------------------------------------------- */
.cart-drawer .drawer__panel { left: auto; right: 0; transform: translateX(102%); width: min(92vw, 430px); }
.cart-drawer.is-open .drawer__panel { transform: translateX(0); }
.cart-item { display: flex; gap: var(--sp-3); padding: var(--sp-4) 0; border-bottom: 1px solid var(--ink-200); }
.cart-item__img { width: 74px; height: 74px; border-radius: var(--r-md); overflow: hidden; background: var(--porcelain-2); flex-shrink: 0; }
.cart-item__img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__body { flex: 1; min-width: 0; }
.cart-item__name { font-weight: 600; font-size: .88rem; line-height: 1.4; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cart-item__var { font-size: .74rem; color: var(--ink-500); margin-bottom: 5px; }
.cart-item__price { font-weight: 700; color: var(--ink-900); font-size: .92rem; }
.cart-item__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
.cart-item__remove { font-size: .76rem; color: var(--rose-600); font-weight: 700; }
.cart-item__remove:hover { text-decoration: underline; }
.qty--sm .qty__btn { width: 32px; height: 34px; font-size: 1rem; }
.qty--sm .qty__input { width: 42px; height: 34px; font-size: .85rem; }

.cart-foot { border-top: 1px solid var(--ink-200); padding: var(--sp-5); background: var(--porcelain); }
.cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-2); font-size: .9rem; }
.cart-total-row--grand { font-size: 1.1rem; font-weight: 700; color: var(--ink-900); padding-top: var(--sp-3); border-top: 1px solid var(--ink-200); margin-top: var(--sp-3); }
.cart-empty { text-align: center; padding: var(--sp-12) var(--sp-4); }
.cart-empty__icon { width: 78px; height: 78px; margin: 0 auto var(--sp-4); border-radius: 50%; background: var(--emerald-50); color: var(--emerald-600); display: grid; place-items: center; }

/* ---------------------------------------------------------------------
   20. TABLES
   --------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); border: 1px solid var(--ink-200); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 620px; }
.table th {
  text-align: left; padding: 13px 16px; background: var(--porcelain-2);
  font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-500); border-bottom: 1px solid var(--ink-200); white-space: nowrap;
}
.table td { padding: 14px 16px; border-bottom: 1px solid var(--ink-100); vertical-align: middle; color: var(--ink-700); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .16s var(--ease); }
.table tbody tr:hover { background: var(--emerald-50); }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.table__actions { display: flex; gap: 6px; flex-wrap: wrap; }
.table--compact th, .table--compact td { padding: 10px 12px; }

/* ---------------------------------------------------------------------
   21. CHECKOUT + PAYMENT GATEWAY CARDS
   --------------------------------------------------------------------- */
.checkout { display: grid; gap: var(--sp-6); padding: var(--sp-6) 0 var(--sp-12); }
.steps { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-6); overflow-x: auto; padding-bottom: 4px; }
.step { display: flex; align-items: center; gap: var(--sp-2); font-size: .82rem; font-weight: 650; color: var(--ink-400); white-space: nowrap; }
.step__num { width: 27px; height: 27px; border-radius: 50%; background: var(--ink-200); color: var(--ink-500); display: grid; place-items: center; font-size: .76rem; font-weight: 800; }
.step.is-active { color: var(--emerald-800); }
.step.is-active .step__num { background: var(--emerald-600); color: #fff; }
.step.is-done .step__num { background: var(--mint-600); color: #fff; }
.step__line { width: 26px; height: 2px; background: var(--ink-200); }

.pay-method { display: grid; gap: var(--sp-2); }
.pay-opt { display: block; cursor: pointer; position: relative; }
.pay-opt input { position: absolute; opacity: 0; }
.pay-opt__body {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4);
  border: 1.5px solid var(--ink-200); border-radius: var(--r-md); background: #fff;
  transition: all .18s var(--ease);
}
.pay-opt__body:hover { border-color: var(--emerald-300); }
.pay-opt input:checked + .pay-opt__body { border-color: var(--emerald-600); background: var(--emerald-50); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.pay-opt__logo { width: 50px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; flex-shrink: 0; letter-spacing: .02em; }
.pay-opt__logo--bkash { background: linear-gradient(135deg, #e2136e, #ff4d94); }
.pay-opt__logo--nagad { background: linear-gradient(135deg, #ec1c24, #ff5a5f); }
.pay-opt__logo--rocket { background: linear-gradient(135deg, #8c3494, #b45cc0); }
.pay-opt__logo--cod { background: linear-gradient(135deg, var(--emerald-700), var(--emerald-500)); }
.pay-opt__name { font-weight: 650; font-size: .9rem; color: var(--ink-800); }
.pay-opt__desc { font-size: .76rem; color: var(--ink-500); }

.pay-instructions { margin-top: var(--sp-3); padding: var(--sp-4); background: var(--emerald-50); border: 1px dashed var(--emerald-400); border-radius: var(--r-md); font-size: .85rem; color: var(--ink-700); }
.pay-instructions__num { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--ink-900); letter-spacing: .04em; }

/* Branded gateway showcase cards */
.pay-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.pay-card {
  border-radius: var(--r-lg); padding: var(--sp-4); color: #fff; position: relative; overflow: hidden;
  min-height: 118px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sh-md); transition: transform .25s var(--ease-spring);
}
.pay-card:hover { transform: translateY(-4px); }
.pay-card::after { content: ''; position: absolute; top: -40px; right: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.14); }
.pay-card--bkash { background: linear-gradient(135deg, #b30f57, #e2136e 60%, #ff4d94); }
.pay-card--nagad { background: linear-gradient(135deg, #b81219, #ec1c24 60%, #ff5a5f); }
.pay-card--rocket { background: linear-gradient(135deg, #6b2672, #8c3494 60%, #b45cc0); }
.pay-card--cod { background: linear-gradient(135deg, var(--emerald-800), var(--emerald-600) 60%, var(--emerald-400)); }
.pay-card__brand { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; position: relative; z-index: 2; }
.pay-card__num { font-family: var(--font-mono); font-size: .95rem; letter-spacing: .06em; position: relative; z-index: 2; }
.pay-card__lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; opacity: .8; position: relative; z-index: 2; }

.summary { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: var(--sp-5); align-self: start; }
.summary__row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 8px 0; font-size: .89rem; }
.summary__row--total { border-top: 2px solid var(--ink-200); margin-top: var(--sp-3); padding-top: var(--sp-4); font-size: 1.15rem; font-weight: 700; color: var(--ink-900); }
.summary__items { max-height: 300px; overflow-y: auto; margin-bottom: var(--sp-4); }
.summary__item { display: flex; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: .84rem; }
.summary__item-img { width: 48px; height: 48px; border-radius: var(--r-sm); overflow: hidden; background: var(--porcelain-2); flex-shrink: 0; }
.summary__item-img img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------
   22. ORDER TIMELINE
   --------------------------------------------------------------------- */
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 2px; background: var(--ink-200); }
.timeline__item { position: relative; padding-bottom: var(--sp-5); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot { position: absolute; left: -32px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2.5px solid var(--ink-300); display: grid; place-items: center; }
.timeline__item.is-done .timeline__dot { border-color: var(--mint-600); background: var(--mint-600); }
.timeline__item.is-done .timeline__dot::after { content: '\2713'; color: #fff; font-size: .64rem; font-weight: 800; }
.timeline__item.is-current .timeline__dot { border-color: var(--emerald-500); background: var(--emerald-500); animation: pulse 2s infinite; }
.timeline__item.is-current .timeline__dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.timeline__title { font-weight: 650; font-size: .9rem; color: var(--ink-800); }
.timeline__item.is-current .timeline__title { color: var(--emerald-800); }
.timeline__meta { font-size: .78rem; color: var(--ink-500); }
.timeline__note { font-size: .82rem; color: var(--ink-600); margin-top: 3px; }

/* ---------------------------------------------------------------------
   23. AUTH PAGES
   --------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.auth__aside { display: none; background: linear-gradient(155deg, var(--emerald-900), var(--emerald-700) 58%, var(--ink-900)); color: #fff; padding: var(--sp-12) var(--sp-10); position: relative; overflow: hidden; }
.auth__aside::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(255,255,255,.14), transparent 55%); }
.auth__aside-inner { position: relative; z-index: 2; max-width: 430px; }
.auth__aside h2 { color: #fff; font-size: 2.1rem; }
.auth__aside p { color: rgba(255,255,255,.88); }
.auth__points { list-style: none; padding: 0; margin: var(--sp-8) 0 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.auth__point { display: flex; gap: var(--sp-3); align-items: flex-start; }
.auth__point-icon { width: 36px; height: 36px; border-radius: var(--r-md); background: rgba(255,255,255,.16); display: grid; place-items: center; flex-shrink: 0; }
.auth__point-title { display: block; font-weight: 700; font-size: .92rem; }
.auth__point-text { display: block; font-size: .82rem; color: rgba(255,255,255,.8); }

.auth__main { display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-4); background: var(--porcelain); }
.auth__card { width: 100%; max-width: 460px; background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: var(--sp-8) var(--sp-6); }
.auth__logo { display: flex; justify-content: center; margin-bottom: var(--sp-6); }
.auth__logo img { height: 46px; }
.auth__title { text-align: center; margin-bottom: var(--sp-2); }
.auth__sub { text-align: center; color: var(--ink-500); font-size: .88rem; margin-bottom: var(--sp-6); }
.auth__foot { text-align: center; margin-top: var(--sp-5); font-size: .87rem; color: var(--ink-500); }
.auth__divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; color: var(--ink-400); font-size: .78rem; }
.auth__divider::before, .auth__divider::after { content: ''; flex: 1; height: 1px; background: var(--ink-200); }

.type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.type-card { cursor: pointer; position: relative; display: block; }
.type-card input { position: absolute; opacity: 0; pointer-events: none; }
.type-card__body {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  border: 1.5px solid var(--ink-200); border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-3); text-align: center;
  transition: all .2s var(--ease); height: 100%;
}
.type-card__body:hover { border-color: var(--emerald-300); }
.type-card input:checked + .type-card__body { border-color: var(--emerald-600); background: var(--emerald-50); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.type-card__icon { width: 42px; height: 42px; margin: 0 0 var(--sp-2); border-radius: var(--r-md); background: var(--emerald-50); color: var(--emerald-700); display: grid; place-items: center; flex-shrink: 0; transition: all .2s var(--ease); }
.type-card input:checked + .type-card__body .type-card__icon { background: var(--emerald-600); color: #fff; }
.type-card__name { display: block; font-weight: 650; font-size: .88rem; color: var(--ink-900); line-height: 1.3; }
.type-card__desc { display: block; font-size: .72rem; color: var(--ink-500); line-height: 1.45; margin-top: 2px; }

/* ---------------------------------------------------------------------
   24. PLANS
   --------------------------------------------------------------------- */
.plans { display: grid; gap: var(--sp-5); }
.plan { background: #fff; border: 1.5px solid var(--ink-200); border-radius: var(--r-xl); padding: var(--sp-6); position: relative; display: flex; flex-direction: column; transition: all .3s var(--ease); }
.plan:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: var(--emerald-400); }
.plan--popular { border-color: var(--emerald-600); box-shadow: 0 12px 40px rgba(5,150,105,.2); }
.plan__ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--emerald-600); color: #fff; padding: 5px 19px; border-radius: var(--r-pill); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.plan__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink-900); margin-bottom: 4px; }
.plan__duration { font-size: .8rem; color: var(--ink-500); margin-bottom: var(--sp-4); }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin-bottom: var(--sp-2); flex-wrap: wrap; }
.plan__amount { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--ink-900); line-height: 1; letter-spacing: -.03em; }
.plan__per { font-size: .82rem; color: var(--ink-500); }
.plan__monthly { font-size: .78rem; color: var(--emerald-800); font-weight: 700; margin-bottom: var(--sp-5); }
.plan__features { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan__feature { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; color: var(--ink-600); }
.plan__feature svg { color: var(--mint-600); flex-shrink: 0; margin-top: 3px; }

/* ---------------------------------------------------------------------
   25. TESTIMONIALS
   --------------------------------------------------------------------- */
.testi-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.testi { background: #fff; border: 1px solid var(--ink-200); border-radius: var(--r-lg); padding: var(--sp-5); position: relative; transition: all .28s var(--ease); }
.testi:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: var(--emerald-300); }
.testi__quote { font-size: 2.6rem; line-height: 1; color: var(--emerald-100); font-family: var(--font-display); position: absolute; top: 12px; right: 18px; }
.testi__text { font-size: .9rem; color: var(--ink-600); line-height: 1.75; margin-bottom: var(--sp-4); position: relative; z-index: 2; }
.testi__who { display: flex; align-items: center; gap: var(--sp-3); }
.testi__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--emerald-500), var(--ember-500)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; flex-shrink: 0; }
.testi__name { font-weight: 650; font-size: .88rem; color: var(--ink-900); }
.testi__role { font-size: .76rem; color: var(--ink-500); }

/* ---------------------------------------------------------------------
   26. BRAND STRIP
   --------------------------------------------------------------------- */
.brand-strip { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.brand-chip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: var(--sp-4); background: #fff; border: 1px solid var(--ink-200);
  border-radius: var(--r-md); font-weight: 650; font-size: .86rem; color: var(--ink-600);
  transition: all .25s var(--ease); text-align: center;
}
.brand-chip:hover { border-color: var(--emerald-400); color: var(--emerald-800); box-shadow: var(--sh-sm); transform: translateY(-2px); }

/* ---------------------------------------------------------------------
   27. FOOTER
   --------------------------------------------------------------------- */
.footer { background: var(--ink-900); color: rgba(255,255,255,.72); padding: var(--sp-12) 0 var(--sp-6); margin-top: var(--sp-12); position: relative; overflow: hidden; }
.footer::before { content: ''; position: absolute; top: -140px; left: 50%; transform: translateX(-50%); width: 720px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.2), transparent 70%); }
.footer .wrap { position: relative; z-index: 2; }
.footer h4 { color: #fff; font-size: .95rem; margin-bottom: var(--sp-4); font-family: var(--font-body); font-weight: 700; }
.footer a { color: rgba(255,255,255,.72); font-size: .87rem; }
.footer a:hover { color: var(--emerald-300); }
.footer__grid { display: grid; gap: var(--sp-8); grid-template-columns: 1fr; }
.footer__about { font-size: .87rem; line-height: 1.8; margin: var(--sp-4) 0; }
.footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.footer__social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.footer__social a { width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(255,255,255,.1); display: grid; place-items: center; transition: all .22s var(--ease); }
.footer__social a:hover { background: var(--emerald-600); color: #fff; transform: translateY(-2px); }
.footer__contact { display: flex; flex-direction: column; gap: var(--sp-3); font-size: .87rem; }
.footer__contact-item { display: flex; gap: 10px; align-items: flex-start; }
.footer__contact-item svg { color: var(--emerald-400); flex-shrink: 0; margin-top: 3px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: var(--sp-8); padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; text-align: center; font-size: .82rem; }
.footer__pay { display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center; }
.footer__pay span { padding: 5px 13px; border-radius: var(--r-sm); background: rgba(255,255,255,.1); font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.88); }
.footer__news { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; }
.footer__news .input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; flex: 1; min-width: 160px; }
.footer__news .input::placeholder { color: rgba(255,255,255,.5); }

/* ---------------------------------------------------------------------
   28. PAGINATION
   --------------------------------------------------------------------- */
.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: var(--sp-8); flex-wrap: wrap; }
.pagination__link { min-width: 42px; height: 42px; padding: 0 13px; border-radius: var(--r-md); border: 1.5px solid var(--ink-200); background: #fff; display: grid; place-items: center; font-size: .87rem; font-weight: 700; color: var(--ink-600); transition: all .18s var(--ease); }
.pagination__link:hover { border-color: var(--emerald-400); color: var(--emerald-800); background: var(--emerald-50); }
.pagination__link.is-active { background: var(--emerald-600); border-color: var(--emerald-600); color: #fff; }
.pagination__dots { color: var(--ink-400); padding: 0 4px; }

/* ---------------------------------------------------------------------
   29. EMPTY STATE
   --------------------------------------------------------------------- */
.empty { text-align: center; padding: var(--sp-12) var(--sp-4); }
.empty__icon { width: 86px; height: 86px; margin: 0 auto var(--sp-5); border-radius: 50%; background: var(--emerald-50); color: var(--emerald-600); display: grid; place-items: center; }
.empty h3 { margin-bottom: var(--sp-2); }
.empty p { color: var(--ink-500); max-width: 44ch; margin: 0 auto var(--sp-5); }

/* ---------------------------------------------------------------------
   30. TOAST
   --------------------------------------------------------------------- */
.toast-stack { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; flex-direction: column; gap: 10px; width: min(92vw, 400px); pointer-events: none; }
.toast {
  background: var(--ink-900); color: #fff; padding: 14px 19px; border-radius: var(--r-md);
  box-shadow: var(--sh-lg); font-size: .88rem; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  animation: toastIn .35s var(--ease-out); pointer-events: auto;
}
.toast--ok { background: var(--mint-600); }
.toast--bad { background: var(--rose-600); }
.toast--gold { background: var(--ember-600); color: #fff; }
.toast--warn { background: var(--amber-600); color: #fff; }
.toast.is-out { animation: toastOut .3s var(--ease) forwards; }

/* ---------------------------------------------------------------------
   31. ANIMATIONS
   --------------------------------------------------------------------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); } 50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

.skeleton { background: var(--ink-100); border-radius: var(--r-md); position: relative; overflow: hidden; }
.skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: shimmer 1.4s infinite; }

.spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------
   32. RESPONSIVE — TABLET
   --------------------------------------------------------------------- */
@media (min-width: 600px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 var(--sp-6); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .prod-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); }
  .prod-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .trust__grid { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
  .topbar__hide-sm { display: inline; }
  .hero__content { padding: var(--sp-16) 0; min-height: 500px; }
  .hero__arrow { display: grid; }
  .rating-summary { grid-template-columns: 210px 1fr; align-items: center; }
  .pdp__facts { grid-template-columns: repeat(2, 1fr); }
  .deal__inner { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .auth__card { padding: var(--sp-10) var(--sp-8); }
  .testi-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-strip { grid-template-columns: repeat(3, 1fr); }
  .pay-cards { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------
   33. RESPONSIVE — DESKTOP
   --------------------------------------------------------------------- */
@media (min-width: 900px) {
  .header__search { display: block; max-width: 540px; }
  .header__search-mobile { display: none; }
  .burger { display: none; }
  .header__nav { display: flex; align-items: center; gap: var(--sp-1); }
  .header__nav-link { padding: 9px 15px; border-radius: var(--r-md); font-size: .88rem; font-weight: 600; color: var(--ink-600); }
  .header__nav-link:hover, .header__nav-link.is-active { background: var(--emerald-50); color: var(--emerald-800); }
  .catnav { display: block; }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
  .prod-grid { grid-template-columns: repeat(4, 1fr); }
  .prod-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
  .shop { grid-template-columns: 272px 1fr; align-items: start; }
  .filters { position: sticky; top: calc(var(--header-h) + 16px); }
  .filter-toggle { display: none; }
  .pdp { grid-template-columns: 1fr 1fr; gap: var(--sp-10); }
  .gallery { position: sticky; top: calc(var(--header-h) + 20px); }
  .checkout { grid-template-columns: 1fr 390px; align-items: start; }
  .summary { position: sticky; top: calc(var(--header-h) + 20px); }
  /* v3.1: the 4-up plan grid moved to the 1200px breakpoint. Forced at 900px
     it squeezed each card to ~226px while a card's own min-content (the
     ৳ amount plus "/ duration" on one line) is ~244px — so the row pushed
     the page ~170px wider than a 1024px viewport. */
  .auth { grid-template-columns: 1fr 1fr; }
  .auth__aside { display: block; }
  .auth__main { padding: var(--sp-10); }
  .reseller-cta { padding: var(--sp-12) var(--sp-10); }
  .testi-grid { grid-template-columns: repeat(3, 1fr); }
  .brand-strip { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1200px) {
  .prod-grid { gap: var(--sp-5); }
  .plans { grid-template-columns: repeat(4, 1fr); }
}

/* Mobile filter drawer behaviour */
@media (max-width: 899px) {
  .filters {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 400;
    width: min(90vw, 350px); border-radius: 0; overflow-y: auto;
    transform: translateX(-102%); transition: transform .36s var(--ease-out);
    box-shadow: var(--sh-xl); border: 0;
  }
  .filters.is-open { transform: translateX(0); }
  .filters__close { display: flex; }
}
@media (min-width: 900px) { .filters__close { display: none; } }

/* ---------------------------------------------------------------------
   34. PRINT
   --------------------------------------------------------------------- */
@media print {
  .header, .footer, .topbar, .catnav, .drawer, .toast-stack, .btn, .no-print { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .card, .table-wrap { box-shadow: none; border-color: #ccc; }
  a { color: #000; text-decoration: none; }
}