/* ============================================================
   RIDDHI PRESS — Premium Design System 2026
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  --brand:        oklch(0.51 0.17 162);
  --brand-dark:   oklch(0.42 0.15 162);
  --brand-light:  oklch(0.97 0.04 162);
  --brand-mid:    oklch(0.82 0.10 162);
  --accent:       oklch(0.76 0.17 70);
  --accent-dark:  oklch(0.65 0.17 70);
  --accent-light: oklch(0.98 0.04 70);
  --info:         oklch(0.60 0.19 230);

  /* Dark theme (default) */
  --ink:    oklch(0.93 0.01 250);
  --ink-2:  oklch(0.78 0.02 250);
  --muted:  oklch(0.58 0.03 250);
  --bg:     oklch(0.12 0.025 250);
  --surface:oklch(0.17 0.025 250);
  --line:   oklch(0.26 0.025 250);
  --line-2: oklch(0.20 0.025 250);

  /* Dark palette */
  --dark:      oklch(0.12 0.03 250);
  --dark-2:    oklch(0.17 0.03 250);
  --dark-3:    oklch(0.22 0.03 250);
  --dark-line: oklch(0.28 0.03 250);

  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 1px 4px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 4px 12px rgba(15,23,42,.07),0 2px 4px rgba(15,23,42,.04);
  --shadow-md: 0 8px 24px rgba(15,23,42,.09),0 4px 8px rgba(15,23,42,.05);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.10),0 8px 16px rgba(15,23,42,.05);
  --shadow-xl: 0 24px 64px rgba(15,23,42,.12),0 12px 24px rgba(15,23,42,.06);
  --shadow-brand: 0 8px 32px rgba(5,150,105,.25);

  --r-xs:  4px;
  --r-sm:  8px;
  --r:     12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full:9999px;

  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t:        all .2s var(--ease);
  --t-fast:   all .15s var(--ease);
  --t-slow:   all .35s var(--ease);

  /* Theme mode */
  --hero-bg: var(--dark);
  --hero-color: #fff;
  --hero-gradient: none;
  --hero-mesh: block;

  /* Cart/checkout compat */
  --border: oklch(0.26 0.025 250);
  --fg: oklch(0.93 0.01 250);
  --card-bg: var(--surface);
}

/* Gradient Light Theme */
body.theme-light {
  --ink:    oklch(0.13 0.02 250);
  --ink-2:  oklch(0.30 0.03 250);
  --muted:  oklch(0.52 0.03 250);
  --bg:     oklch(0.985 0.005 250);
  --surface:#ffffff;
  --line:   oklch(0.91 0.01 250);
  --line-2: oklch(0.96 0.008 250);

  --dark:      oklch(0.97 0.01 250);
  --dark-2:    oklch(0.93 0.01 250);
  --dark-3:    oklch(0.88 0.01 250);
  --dark-line: oklch(0.82 0.01 250);

  --hero-bg: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
  --hero-color: #0f172a;
  --hero-gradient: none;
  --hero-mesh: none;

  --border: oklch(0.91 0.01 250);
  --fg: oklch(0.13 0.02 250);
  --card-bg: #ffffff;
}

/* === RESET =================================================== */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }
html,body { margin:0; padding:0; }
body {
  font-family:"Poppins","Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
h1,h2,h3,h4 { margin:0; line-height:1.2; font-weight:700; }
p { margin:0; }

/* === LAYOUT ================================================== */
.container { width:min(1200px,94vw); margin:0 auto; }

/* === SCROLL REVEAL ========================================== */
.reveal {
  opacity:0;
  transform:translateY(24px);
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }

/* === TOPBAR ================================================== */
.topbar {
  background:#0f172a;
  color:oklch(0.75 0.06 162);
  font-size:.78rem;
  font-weight:500;
  padding:.45rem 0;
  letter-spacing:.02em;
}
.topbar .inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
}
.topbar a { color:var(--brand-mid); transition:var(--t-fast); }
.topbar a:hover { color:#fff; }

/* === HEADER ================================================== */
header {
  position:sticky;
  top:0;
  z-index:100;
  background:oklch(0.12 0.025 250 / .92);
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid oklch(0.26 0.025 250 / .8);
  transition:box-shadow .3s, background .3s;
}
header.scrolled {
  background:oklch(0.14 0.025 250 / .97);
  box-shadow:0 4px 24px rgba(15,23,42,.08);
}
body.theme-light header {
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-bottom-color:rgba(226,232,240,.7);
}
body.theme-light header.scrolled {
  background:rgba(255,255,255,.95);
}

.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.9rem 0;
  gap:1rem;
  position:relative;
}

.brand {
  font-family:"Space Grotesk",sans-serif;
  font-size:1.42rem;
  font-weight:800;
  letter-spacing:-.4px;
  color:var(--ink);
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.brand-icon { height:36px; width:auto; object-fit:contain; }
.brand em { color:var(--brand); font-style:normal; }

.nav-links {
  display:flex;
  align-items:center;
  gap:.15rem;
}
.nav-links a {
  padding:.46rem .95rem;
  border-radius:var(--r-full);
  font-size:.875rem;
  font-weight:500;
  color:var(--ink-2);
  transition:var(--t-fast);
  position:relative;
}
.nav-links a:hover { color:var(--brand-mid); background:oklch(0.51 0.17 162 / .15); }
.nav-links a.active {
  color:var(--brand-mid);
  background:oklch(0.51 0.17 162 / .18);
  font-weight:600;
}
body.theme-light .nav-links a:hover { color:var(--brand-dark); background:var(--brand-light); }
body.theme-light .nav-links a.active { color:var(--brand-dark); background:var(--brand-light); }

.nav-actions { display:flex !important; align-items:center; gap:.5rem; visibility:visible; opacity:1; }

.nav-toggle {
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  padding:.45rem;
  border:1.5px solid var(--line);
  background:var(--surface);
  border-radius:var(--r-sm);
  transition:var(--t-fast);
}
.nav-toggle:hover { border-color:var(--brand); background:oklch(0.51 0.17 162 / .15); }
body.theme-light .nav-toggle:hover { background:var(--brand-light); }
.nav-toggle span {
  display:block;
  width:20px;
  height:2px;
  background:var(--ink-2);
  border-radius:2px;
  transition:var(--t);
}
.nav-toggle.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Theme Toggle */
.theme-toggle {
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:2px solid #4a5568;
  background:#2d3748;
  border-radius:8px;
  cursor:pointer;
  font-size:1.2rem;
  transition:all 0.2s;
  flex-shrink:0;
  margin-left:8px;
  opacity:1;
  visibility:visible;
  z-index:10;
}
.theme-toggle:hover { border-color:#0ab26f; background:#4a5568; transform:scale(1.08); }
body.theme-light .theme-toggle {
  border:2px solid #cbd5e0;
  background:#ffffff;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}
body.theme-light .theme-toggle:hover { border-color:#0ab26f; background:#edf2f7; }

/* === HERO ==================================================== */
.hero {
  background:var(--hero-bg);
  color:var(--hero-color);
  overflow:hidden;
  position:relative;
  padding:1.5rem 0;
}
.hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 10% 50%, oklch(0.42 0.17 162 / .35) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 80%, oklch(0.60 0.19 230 / .2) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 80% 10%, oklch(0.76 0.17 70 / .12) 0%, transparent 50%);
  pointer-events:none;
}
body.theme-light .hero::before { display:none; }
.hero-mesh {
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 80%, oklch(0.51 0.17 162 / .06) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, oklch(0.76 0.17 70 / .05) 0%, transparent 40%);
  pointer-events:none;
}
body.theme-light .hero-mesh { display:none; }

.hero-wrap {
  display:grid;
  grid-template-columns:1fr 380px;
  gap:2rem;
  align-items:center;
  position:relative;
  z-index:1;
}
.hero-copy { display:flex; flex-direction:column; gap:0.35rem; }

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.25rem .7rem;
  background:oklch(0.51 0.17 162 / .18);
  border:1px solid oklch(0.51 0.17 162 / .4);
  color:var(--brand-mid);
  border-radius:var(--r-full);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  width:fit-content;
  backdrop-filter:blur(8px);
}
.eyebrow-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--brand-mid);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50% { opacity:.5; transform:scale(.7); }
}

h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:800; letter-spacing:-.6px; line-height:1.1; color:var(--ink); }
h1 .line-muted { color:var(--muted); display:block; }
body.theme-light h1 { color:#0f172a; }
body.theme-light h1 .line-muted { color:var(--muted); }
.gradient-text {
  background:linear-gradient(135deg, var(--brand-mid) 0%, oklch(0.75 0.18 200) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.lead { color:var(--muted); font-size:1rem; line-height:1.75; max-width:500px; }
body.theme-light .lead { color:#475569; }

.hero-cta { display:flex; gap:.75rem; flex-wrap:wrap; padding-top:.25rem; }

.hero-stats {
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  padding-top:0.6rem;
  border-top:1px solid oklch(1 0 0 / .08);
}
body.theme-light .hero-stats { border-top-color:oklch(0.51 0.17 162 / .15); }
.stat { display:flex; flex-direction:column; gap:.1rem; }
.stat b { font-family:"Space Grotesk",sans-serif; font-size:1.6rem; font-weight:800; color:var(--hero-color); line-height:1; }
.stat b em { color:var(--brand-mid); font-style:normal; }
.stat span { font-size:.72rem; color:oklch(0.60 0.03 250); font-weight:500; letter-spacing:.03em; text-transform:uppercase; }

/* Hero Card */
.hero-card-wrap {
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.hero-card {
  background:oklch(1 0 0 / .06);
  border:1px solid oklch(1 0 0 / .12);
  border-radius:var(--r-2xl);
  padding:1rem;
  backdrop-filter:blur(20px);
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
body.theme-light .hero-card {
  background:#ffffff;
  border-color:rgba(255,255,255,.9);
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}
.hero-card h3 {
  font-family:"Space Grotesk",sans-serif;
  color:var(--hero-color);
  font-size:.95rem;
  font-weight:700;
  margin-bottom:1rem;
  margin-top:0;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.step-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; }
.step-list li {
  display:flex;
  align-items:center;
  gap:.75rem;
  font-size:.85rem;
  color:oklch(0.80 0.03 250);
}
body.theme-light .step-list li { color:#333333; }
.step-num {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--brand), oklch(0.51 0.19 200));
  font-size:.7rem;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
  box-shadow:0 2px 8px oklch(0.51 0.17 162 / .4);
}

.hero-trust {
  display:flex;
  align-items:center;
  gap:.75rem;
  background:oklch(1 0 0 / .05);
  border:1px solid oklch(1 0 0 / .10);
  border-radius:var(--r-xl);
  padding:.5rem .75rem;
  backdrop-filter:blur(12px);
}
body.theme-light .hero-trust {
  background:rgba(255,255,255,.8);
  border-color:#f0f0f0;
}
.trust-icon { font-size:1.4rem; }
.trust-text { font-size:.8rem; color:oklch(0.80 0.03 250); line-height:1.5; }
body.theme-light .trust-text { color:#333333; }
.trust-text strong { color:var(--hero-color); display:block; font-size:.85rem; }

/* === BUTTONS ================================================= */
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  border:none;
  border-radius:var(--r);
  padding:.72rem 1.4rem;
  font:600 .88rem/1 "Poppins",sans-serif;
  cursor:pointer;
  transition:var(--t);
  white-space:nowrap;
  text-decoration:none;
}
.btn-primary {
  background:linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  color:#fff;
  box-shadow:0 2px 12px oklch(0.51 0.17 162 / .35);
}
.btn-primary:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 24px oklch(0.51 0.17 162 / .45);
  filter:brightness(1.08);
}
.btn-primary:active { transform:translateY(0); }
.btn-ghost {
  background:oklch(1 0 0 / .08);
  color:#fff;
  border:1px solid oklch(1 0 0 / .2);
  backdrop-filter:blur(8px);
}
body.theme-light .btn-ghost {
  background:oklch(0.95 0.02 250 / .8);
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover { background:oklch(1 0 0 / .15); border-color:oklch(1 0 0 / .35); transform:translateY(-2px); }
body.theme-light .btn-ghost:hover { background:var(--line-2); border-color:#94a3b8; }
.btn-ghost-dark {
  background:var(--surface);
  color:var(--ink-2);
  border:1.5px solid var(--line);
}
.btn-ghost-dark:hover { background:var(--line); border-color:var(--line); transform:translateY(-1px); }
.btn-accent {
  background:linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff;
  box-shadow:0 2px 12px oklch(0.76 0.17 70 / .35);
}
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 6px 24px oklch(0.76 0.17 70 / .45); }
.btn-sm { padding:.5rem .9rem; font-size:.8rem; border-radius:var(--r-sm); }
.btn-lg { padding:.9rem 2rem; font-size:.96rem; border-radius:var(--r-lg); }

/* === SECTIONS ================================================ */
.section { padding:1.25rem 0; }
.section-sm { padding:0.75rem 0; }
.section-dark {
  background:var(--dark);
  color:#fff;
}

.section-label {
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--brand);
  margin-bottom:.35rem;
}
.section-label::before { content:''; display:block; width:20px; height:2px; background:var(--brand); border-radius:2px; }
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  margin-bottom:0.5rem;
}
.section-head h2 {
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(1.5rem,2.8vw,2.2rem);
  font-weight:800;
  letter-spacing:-.4px;
}
.section-head-center { flex-direction:column; align-items:center; text-align:center; }
.section-head a { font-size:.85rem; font-weight:600; color:var(--brand); transition:var(--t-fast); white-space:nowrap; }
.section-head a:hover { color:var(--brand-dark); }
.section-subtitle { color:var(--muted); font-size:.95rem; margin-top:.35rem; }

/* === BENTO CATEGORIES ======================================= */
.bento-grid {
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:auto auto;
  gap:0.4rem;
}
.bento-card {
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  cursor:pointer;
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:130px;
  text-decoration:none;
  color:#fff;
}
.bento-card:hover {
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 24px 48px rgba(0,0,0,.2);
  z-index:2;
}
.bento-card.span-2 { grid-column:span 2; min-height:145px; }
.bento-card.tall { min-height:240px; }
.bento-bg {
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .5s var(--ease);
}
.bento-card:hover .bento-bg { transform:scale(1.05); }
.bento-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.2) 50%, transparent 100%);
  transition:opacity .3s;
}
.bento-card:hover .bento-overlay { opacity:.9; }
.bento-content {
  position:relative;
  z-index:1;
  padding:1rem;
}
.bento-icon {
  width:36px;
  height:36px;
  border-radius:var(--r);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  margin-bottom:.65rem;
  backdrop-filter:blur(8px);
}
.bento-title {
  font-family:"Space Grotesk",sans-serif;
  font-size:1rem;
  font-weight:700;
  line-height:1.25;
  margin-bottom:.25rem;
}
.bento-card.span-2 .bento-title { font-size:1.2rem; }
.bento-sub {
  font-size:.75rem;
  color:rgba(255,255,255,.65);
  line-height:1.4;
}
.bento-arrow {
  position:absolute;
  top:1rem;
  right:1rem;
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  backdrop-filter:blur(8px);
  transition:var(--t);
  z-index:1;
}
.bento-card:hover .bento-arrow { background:rgba(255,255,255,.25); transform:translate(2px,-2px); }

/* === PRODUCT GRID =========================================== */
.grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:1rem;
}
.grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }

/* === CARDS ================================================== */
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  transition:transform .35s var(--ease-spring), box-shadow .35s var(--ease), border-color .2s;
}
.card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-xl);
  border-color:var(--line);
}
.card .media {
  aspect-ratio:4/3;
  background:linear-gradient(135deg, var(--brand) 0%, oklch(0.51 0.19 200) 100%);
  overflow:hidden;
  position:relative;
}
.card .media img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .media img { transform:scale(1.06); }
.card .media-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.4), transparent 50%);
  opacity:0;
  transition:opacity .3s;
  display:flex;
  align-items:flex-end;
  padding:.75rem;
}
.card:hover .media-overlay { opacity:1; }
.card .body { padding:1.1rem 1.15rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.card .body h3 { font-size:.95rem; font-weight:600; letter-spacing:-.1px; line-height:1.35; }

/* === TAGS =================================================== */
.tag {
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  background:var(--brand-light);
  color:var(--brand-dark);
  font-size:.68rem;
  font-weight:700;
  border-radius:var(--r-full);
  padding:.22rem .65rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  width:fit-content;
}
.tag-amber { background:var(--accent-light); color:var(--accent-dark); }
.tag-blue { background:oklch(0.95 0.04 230); color:oklch(0.35 0.12 230); }

/* === PRICE ================================================== */
.price { color:var(--brand-dark); font-weight:700; font-size:1.05rem; font-family:"Space Grotesk",sans-serif; }
.price-badge {
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--brand-light);
  border-radius:var(--r);
  padding:.75rem 1rem;
  font-weight:700;
  color:var(--brand-dark);
}

/* === MUTED ================================================== */
.muted { color:var(--muted); font-size:.85rem; }

/* === PROCESS SECTION ======================================== */
.process-track {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  position:relative;
}
.process-track::before {
  content:'';
  position:absolute;
  top:28px;
  left:calc(12.5% + 14px);
  right:calc(12.5% + 14px);
  height:2px;
  background:linear-gradient(90deg, var(--brand), oklch(0.51 0.19 200));
  opacity:.3;
}
.process-step {
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 0.75rem;
}
.process-num {
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:1.1rem;
  font-weight:800;
  margin-bottom:0.65rem;
  position:relative;
  z-index:1;
  transition:transform .3s var(--ease-spring);
}
.process-step:hover .process-num { transform:scale(1.1); }
.process-num-1 { background:linear-gradient(135deg, var(--brand), oklch(0.51 0.19 200)); color:#fff; box-shadow:0 8px 24px oklch(0.51 0.17 162 / .3); }
.process-num-2 { background:linear-gradient(135deg, oklch(0.51 0.19 200), oklch(0.60 0.19 230)); color:#fff; box-shadow:0 8px 24px oklch(0.60 0.19 230 / .3); }
.process-num-3 { background:linear-gradient(135deg, oklch(0.60 0.19 230), oklch(0.55 0.15 260)); color:#fff; box-shadow:0 8px 24px oklch(0.60 0.19 230 / .3); }
.process-num-4 { background:linear-gradient(135deg, oklch(0.76 0.17 70), var(--accent-dark)); color:#fff; box-shadow:0 8px 24px oklch(0.76 0.17 70 / .3); }
.process-step h4 { font-size:.95rem; font-weight:700; margin-bottom:.4rem; }
.process-step p { font-size:.82rem; color:var(--muted); line-height:1.6; }

/* === FEATURES =============================================== */
.features-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0.75rem;
}
.feature-card {
  padding:0.75rem 0.65rem;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  transition:var(--t-slow);
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 0 oklch(1 0 0 / .04) inset;
}
.feature-card::before {
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg, var(--brand), oklch(0.51 0.19 200));
  opacity:0;
  transition:opacity .3s;
}
.feature-card:hover { box-shadow:var(--shadow-lg); transform:translateY(-4px); }
.feature-card:hover::before { opacity:1; }
.feature-icon {
  width:40px;
  height:40px;
  border-radius:var(--r);
  background:var(--brand-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  margin-bottom:1rem;
}
.feature-card h4 { font-size:.95rem; font-weight:700; margin-bottom:.4rem; }
.feature-card p { font-size:.83rem; color:var(--muted); line-height:1.65; }

/* === CTA BANNER ============================================= */
.cta-banner {
  background:linear-gradient(135deg, oklch(0.51 0.17 162) 0%, oklch(0.42 0.15 162) 100%);
  border-radius:var(--r-2xl);
  padding:1.75rem 1.5rem;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:2rem;
  position:relative;
  overflow:hidden;
}
.cta-banner::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, oklch(0.51 0.17 162 / .9) 0%, oklch(0.42 0.15 162 / .95) 100%);
  pointer-events:none;
}
.cta-banner-overlay {
  display:none;
}
.cta-banner-content {
  position:relative;
  z-index:1;
}
.cta-banner h2 {
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(1.5rem,2.5vw,2.1rem);
  font-weight:800;
  color:#fff;
  letter-spacing:-.3px;
  margin-bottom:.5rem;
}
.cta-banner p { color:oklch(0.68 0.03 250); font-size:.95rem; line-height:1.7; }
.cta-banner-actions { display:flex; gap:.75rem; flex-wrap:wrap; position:relative; z-index:1; }

/* === WhatsApp =============================================== */
.wa-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  background:#25D366;
  color:#fff;
  border-radius:var(--r-lg);
  padding:.78rem 1.25rem;
  font-weight:700;
  font-size:.88rem;
  transition:var(--t);
  border:none;
  cursor:pointer;
  text-decoration:none;
  box-shadow:0 4px 20px rgba(37,211,102,.35);
}
.wa-btn:hover { background:#1db954; transform:translateY(-2px); box-shadow:0 8px 28px rgba(37,211,102,.5); }
.wa-btn svg { width:18px; height:18px; fill:#fff; flex-shrink:0; }

.wa-float {
  position:fixed;
  bottom:1.75rem;
  right:1.75rem;
  z-index:999;
  width:56px;
  height:56px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 20px rgba(37,211,102,.45);
  transition:var(--t);
}
.wa-float:hover { transform:scale(1.12) translateY(-2px); box-shadow:0 8px 32px rgba(37,211,102,.6); }
.wa-float svg { width:28px; height:28px; fill:#fff; }

/* === PANEL ================================================== */
.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
}

/* === FORMS ================================================== */
.filter-bar {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:1rem 1.25rem;
  display:flex;
  gap:.75rem;
  align-items:center;
  margin-bottom:2rem;
  box-shadow:var(--shadow-sm);
  flex-wrap:wrap;
}
.filter-bar input { flex:2; min-width:180px; }
.filter-bar select { flex:1; min-width:150px; }

input,select,textarea {
  width:100%;
  border:1.5px solid var(--line);
  background:var(--surface);
  border-radius:var(--r);
  padding:.72rem 1rem;
  font:.875rem/1.5 "Poppins",sans-serif;
  color:var(--ink);
  transition:var(--t-fast);
  outline:none;
  -webkit-appearance:none;
  appearance:none;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--brand);
  box-shadow:0 0 0 3px oklch(0.51 0.17 162 / .12);
}
input::placeholder,textarea::placeholder { color:#94a3b8; }
select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .75rem center;
  background-size:1rem;
  padding-right:2.5rem;
  cursor:pointer;
}
label { display:block; font-size:.8rem; font-weight:600; color:var(--ink-2); margin-bottom:.35rem; }

/* === PRODUCT PAGE =========================================== */
.product-wrap {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  align-items:start;
}
.product-image-wrap {
  border-radius:var(--r-2xl);
  overflow:hidden;
  aspect-ratio:4/3;
  border:1px solid var(--line);
  box-shadow:var(--shadow-xl);
  background:linear-gradient(135deg, var(--brand), oklch(0.51 0.19 200));
  background-size:cover;
  background-position:center;
  position:relative;
}
.product-image-badge {
  position:absolute;
  top:1rem;
  left:1rem;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(8px);
  border-radius:var(--r-full);
  padding:.3rem .8rem;
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-2);
  display:flex;
  align-items:center;
  gap:.35rem;
}
.product-box { padding:2rem 1.75rem; display:flex; flex-direction:column; gap:1rem; }
.product-box h1 { font-family:"Space Grotesk",sans-serif; font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:800; letter-spacing:-.4px; }
.meta-row { display:flex; gap:.5rem; flex-wrap:wrap; }
.meta-badge {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  background:var(--line-2);
  border-radius:var(--r-full);
  padding:.3rem .75rem;
  font-size:.78rem;
  font-weight:500;
  color:var(--ink-2);
}
.divider { border:none; border-top:1px solid var(--line); margin:.25rem 0; }
.option-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.option-grid .full { grid-column:1/-1; }

/* === BREADCRUMB ============================================= */
.breadcrumb {
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
  color:var(--muted);
  flex-wrap:wrap;
  padding:.75rem 0 1.5rem;
}
.breadcrumb a { color:var(--muted); transition:var(--t-fast); }
.breadcrumb a:hover { color:var(--brand); }
.breadcrumb .sep { color:var(--line); }
.breadcrumb .current { color:var(--ink); font-weight:600; }

/* === PAGE TITLE ============================================= */
.page-title { padding:2rem 0 1.5rem; }
.page-title h1 {
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(1.6rem,3vw,2.4rem);
  font-weight:800;
  letter-spacing:-.5px;
}
.page-title p { color:var(--muted); font-size:.95rem; margin-top:.4rem; }

/* === SUB CHIPS ============================================== */
.sub-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.sub-chip {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:var(--surface);
  border:1.5px solid var(--line);
  color:var(--ink-2);
  border-radius:var(--r-full);
  padding:.38rem 1rem;
  font-size:.8rem;
  font-weight:500;
  transition:var(--t-fast);
  text-decoration:none;
}
.sub-chip:hover, .sub-chip.active { border-color:var(--brand); color:var(--brand-dark); background:var(--brand-light); }

/* === CONTACT ================================================ */
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1.6fr;
  gap:1.5rem;
  margin-top:1.5rem;
}
.contact-info { display:flex; flex-direction:column; gap:1rem; padding:1.75rem; }
.contact-info h2 { font-family:"Space Grotesk",sans-serif; font-size:1.15rem; font-weight:700; margin-bottom:.25rem; }
.contact-item {
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  padding:.9rem;
  background:var(--line-2);
  border-radius:var(--r-lg);
  transition:var(--t-fast);
}
.contact-item:hover { background:var(--brand-light); }
.contact-icon {
  width:40px; height:40px;
  border-radius:var(--r);
  background:var(--brand-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}
.contact-item b { display:block; font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.contact-item p { font-weight:500; font-size:.9rem; margin-top:.15rem; }
.contact-form { padding:1.75rem; display:flex; flex-direction:column; gap:.75rem; }
.contact-form h2 { font-family:"Space Grotesk",sans-serif; font-size:1.15rem; font-weight:700; margin-bottom:.1rem; }

/* === EMPTY STATE ============================================ */
.empty-state { text-align:center; padding:4rem 1rem; color:var(--muted); }
.empty-state h3 { font-size:1.1rem; margin-bottom:.5rem; color:var(--ink); }

/* === NOTICE ================================================= */
.notice {
  padding:.8rem 1rem;
  border-radius:var(--r);
  font-size:.84rem;
  border:1px solid oklch(0.76 0.17 70 / .3);
  background:oklch(0.76 0.17 70 / .1);
  color:var(--accent);
}

/* === FOOTER ================================================= */
footer {
  background:var(--dark);
  color:oklch(0.70 0.03 250);
  margin-top:0;
}
body.theme-light footer {
  background:#0f172a;
  color:oklch(0.70 0.03 250);
}
.footer-inner {
  padding:4rem 0 2.5rem;
  display:grid;
  grid-template-columns:1.8fr 1fr 1fr 1fr;
  gap:2.5rem;
}
.footer-brand .brand {
  color:#f8fafc;
  display:flex;
  margin-bottom:1rem;
  font-size:1.4rem;
}
.footer-brand .brand em { color:var(--brand-mid); }
.footer-brand p { font-size:.83rem; color:oklch(0.55 0.03 250); line-height:1.8; max-width:260px; }
.footer-social { display:flex; gap:.5rem; margin-top:1.25rem; }
.footer-social-btn {
  width:36px; height:36px;
  border-radius:var(--r);
  background:var(--dark-2);
  border:1px solid var(--dark-line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.85rem;
  transition:var(--t-fast);
  cursor:pointer;
}
.footer-social-btn:hover { background:var(--brand); border-color:var(--brand); color:#fff; }
.footer-col h4 {
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#f1f5f9;
  margin-bottom:1.1rem;
}
.footer-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.footer-col ul li a { font-size:.83rem; color:oklch(0.55 0.03 250); transition:var(--t-fast); }
.footer-col ul li a:hover { color:var(--brand-mid); }
.footer-col p { font-size:.83rem; color:oklch(0.55 0.03 250); line-height:1.9; }
.footer-bottom {
  border-top:1px solid var(--dark-line);
  padding:1.25rem 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.footer-bottom p { font-size:.78rem; color:oklch(0.42 0.03 250); }
.footer-bottom a { color:oklch(0.55 0.03 250); transition:var(--t-fast); }
.footer-bottom a:hover { color:var(--brand-mid); }

/* === CAT CARD (home compat) ================================= */
.cat-item { display:flex; align-items:center; gap:.4rem; padding:.2rem 0; font-size:.83rem; }
.cat-item a { color:var(--brand); font-weight:500; transition:var(--t-fast); }
.cat-item a:hover { color:var(--brand-dark); text-decoration:underline; }

/* === ADMIN ================================================== */
.admin-bar {
  background:rgba(15,23,42,.95);
  color:#94a3b8;
  font-size:.75rem;
  padding:.3rem 0;
  text-align:center;
}
.admin-bar a { color:var(--brand-mid); font-weight:600; }

/* === SCROLL REVEAL INIT ===================================== */
[data-reveal] {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .65s var(--ease-out), transform .65s var(--ease-out);
}
[data-reveal].revealed { opacity:1; transform:none; }

/* === RESPONSIVE ============================================= */
@media (max-width:1024px) {
  .grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .features-grid { grid-template-columns:repeat(2,1fr); }
  .process-track { grid-template-columns:repeat(2,1fr); gap:2rem; }
  .process-track::before { display:none; }
  .footer-inner { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .footer-brand p { max-width:none; }
  .bento-grid { grid-template-columns:repeat(2,1fr); }
  .hero-wrap { grid-template-columns:1fr 360px; gap:2rem; }
  .cta-banner { grid-template-columns:1fr; }
  .cta-banner-actions { flex-direction:row; }
}
@media (max-width:768px) {
  .topbar { font-size:.7rem; }
  .topbar .inner { gap:.5rem; }
  .hero-wrap { grid-template-columns:1fr; }
  .hero-card-wrap { display:none; }
  .bento-grid { grid-template-columns:repeat(2,1fr); }
  .bento-card.span-2 { grid-column:span 2; }
  .bento-card.tall { min-height:160px; }
  .product-wrap { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .contact-info { padding:1.25rem; }
  .contact-form { padding:1.25rem; }
  .footer-inner { grid-template-columns:1fr 1fr; gap:1.5rem; }
  header { position:sticky; }
  .nav-actions { position:absolute; right:.75rem; top:.9rem; }
  .nav-links {
    display:none;
    position:absolute;
    top:calc(100% + 1px);
    left:0; right:0;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    padding:.6rem .75rem;
    flex-direction:column;
    align-items:stretch;
    box-shadow:var(--shadow-md);
    gap:.2rem;
    z-index:200;
  }
  body.theme-light .nav-links {
    background:var(--surface);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:.65rem .9rem; border-radius:var(--r-sm); font-size:.93rem; }
  .nav-toggle { display:flex; }
  .theme-toggle { display:flex; }
  .section { padding:1.5rem 0; }
  .eyebrow { font-size:.65rem; padding:.2rem .55rem; }
  .hero-cta { flex-direction:column; }
  .hero-cta .btn { width:100%; }
  .hero-cta .btn-lg { padding:.75rem 1.25rem; }
  .hero-stats { gap:1rem; }
  .stat b { font-size:1.3rem; }
  .section-head { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .section-head a { align-self:flex-start; }
  .process-track { grid-template-columns:1fr 1fr; gap:1.5rem; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .cta-banner { padding:1.5rem 1.25rem; }
  .cta-banner h2 { font-size:1.4rem; }
  .filter-bar { padding:.75rem 1rem; }
  .footer-brand { padding:0; }
  .footer-col h4 { margin-bottom:.75rem; }
  .footer-col ul { gap:.4rem; }
  .footer-col p { font-size:.8rem; }
  .footer-bottom { flex-direction:column; text-align:center; gap:.5rem; }
  .cart-layout { grid-template-columns:1fr; }
  .cart-summary { position:static; }
}
@media (max-width:640px) {
  .grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer-inner { grid-template-columns:1fr; gap:1.25rem; }
  .section-head { flex-direction:column; align-items:flex-start; gap:.5rem; }
  .bento-grid { grid-template-columns:1fr 1fr; }
  .process-track { grid-template-columns:1fr 1fr; }
  .features-grid { grid-template-columns:1fr 1fr; }
  .cta-banner { padding:2rem 1.25rem; }
  .hero-stats { gap:.75rem; }
  h1 { font-size:clamp(1.6rem,5vw,2rem); }
  .cart-layout { gap:1.25rem; }
  .cart-item { padding:.9rem; }
  .cart-item-image { width:60px; height:60px; }
  .cart-summary { padding:1rem; }
  .contact-item { padding:.65rem; }
  .contact-item p { font-size:.82rem; }
  .sub-chips { gap:.35rem; }
  .sub-chip { padding:.3rem .75rem; font-size:.75rem; }
}
@media (max-width:480px) {
  .grid { grid-template-columns:1fr; }
  .bento-grid { grid-template-columns:1fr; }
  .bento-card.span-2 { grid-column:span 1; }
  .bento-card.tall { min-height:130px; }
  .option-grid { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .topbar { font-size:.65rem; }
  .page-title { padding:1.25rem 0 1rem; }
  .page-title h1 { font-size:clamp(1.4rem,5vw,1.8rem); }
  .hero { padding:1rem 0; }
  .hero-copy { gap:.2rem; }
  .lead { font-size:.9rem; }
  .hero-stats { flex-wrap:wrap; }
  .hero-stats .stat { min-width:70px; }
  .process-track { gap:1rem; }
  .process-step { padding:0 .4rem; }
  .process-step h4 { font-size:.85rem; }
  .process-step p { font-size:.75rem; }
  .filter-bar { flex-direction:column; align-items:stretch; }
  .filter-bar input, .filter-bar select { min-width:0; width:100%; }
  .cart-layout { grid-template-columns:1fr; }
  .cart-summary { position:static; }
  .cart-item-image { width:56px; height:56px; flex-shrink:0; }
  .contact-grid { gap:1rem; }
  .section { padding:1.25rem 0; }
  .section-label { font-size:.65rem; }
  .section-head h2 { font-size:clamp(1.3rem,4vw,1.6rem); }
}

/* Search Bar Enhancement */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.search-icon {
  position: absolute;
  left: 0.9rem;
  pointer-events: none;
  font-size: 1rem;
  opacity: 0.5;
}

.search-wrap input {
  padding-left: 2.6rem;
  padding-right: 2.4rem;
  width: 100%;
}

.search-clear {
  position: absolute;
  right: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
}

.search-clear:hover { color: var(--fg); background: var(--border); }

.result-msg {
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 0.4rem;
  min-width: 4rem;
}

/* Filter bar adjustments */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Cart Button & Badge */
.cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  color: var(--fg);
  text-decoration: none;
  transition: background 0.2s;
}

.cart-btn:hover { background: var(--border); }

.cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1rem;
  height: 1rem;
  background: var(--primary, #e74c3c);
  color: #fff;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

.cart-badge:empty,
.cart-badge[style*="display: none"] { display: none; }

/* Cart Page */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

@media (max-width: 768px) {
  .cart-layout { grid-template-columns: 1fr; }
}

.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  background: var(--card-bg, var(--bg));
}

.cart-item-image {
  width: 80px;
  height: 80px;
  border-radius: 0.5rem;
  background: var(--border);
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

.cart-item-info { flex: 1; min-width: 0; }

.cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cart-item-header h3 { margin: 0.2rem 0; font-size: 1rem; }

.cart-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 1rem;
  padding: 0.2rem;
  border-radius: 50%;
}
.cart-remove:hover { color: var(--fg); background: var(--border); }

.cart-item-options {
  display: flex;
  gap: 0.8rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0.3rem 0;
  flex-wrap: wrap;
}

.cart-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
}

.cart-qty-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.cart-qty {
  width: 4rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
  background: var(--bg);
  color: var(--fg);
  text-align: center;
}

.cart-item-price {
  font-weight: 600;
  font-size: 1.1rem;
}

/* Cart Summary */
.cart-summary {
  background: var(--card-bg, var(--bg));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1.4rem;
  position: sticky;
  top: 1rem;
}

.cart-summary h2 { margin-top: 0; font-size: 1.1rem; }

.summary-rows { margin-top: 1rem; }

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  font-size: 0.88rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.summary-row.total {
  font-weight: 700;
  font-size: 1rem;
  color: var(--fg);
  border-bottom: none;
  padding-top: 0.8rem;
}

/* Empty Cart */
.empty-cart {
  text-align: center;
  padding: 4rem 2rem;
}

.empty-icon { font-size: 4rem; margin-bottom: 1rem; }
.empty-cart h2 { margin-bottom: 0.5rem; }
.empty-cart p { color: var(--muted); margin-bottom: 1.5rem; }

/* WhatsApp button */
.btn-whatsapp {
  background: #25d366;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 0.4rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9rem;
}