/* ═══════════════════════════════════════════════════════════
   CheckoutBD — Complete Frontend Design System
   Islamic Brain Development E-commerce · Bangladesh
   ═══════════════════════════════════════════════════════════ */

/* ── Design tokens ──────────────────────────────────────── */
:root {
  --brand:        #1B6B4A;
  --brand-dark:   #0F4730;
  --brand-mid:    #2E8B5A;
  --brand-light:  #E8F5EE;
  --brand-xlight: #F0FAF5;
  --accent:       #D4A017;
  --accent-dark:  #B88A10;
  --accent-light: #FEF3C7;
  --text:         #1A1A18;
  --text-2:       #4B4B48;
  --text-muted:   #7A7A75;
  --text-xmuted:  #ADADAA;
  --bg:           #F9F7F2;
  --bg-2:         #F2EFE8;
  --white:        #FFFFFF;
  --border:       rgba(0,0,0,.1);
  --border-2:     rgba(0,0,0,.18);
  --radius-sm:    6px;
  --radius:       12px;
  --radius-lg:    18px;
  --radius-xl:    24px;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.06);
  --shadow:       0 2px 12px rgba(0,0,0,.08);
  --shadow-lg:    0 8px 32px rgba(0,0,0,.12);
  --shadow-xl:    0 20px 60px rgba(0,0,0,.16);
  --transition:   .22s ease;
}

/* ── Reset & base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { transition: color var(--transition); }

/* ── Announcement bar ───────────────────────────────────── */
.announce-bar {
  background: var(--theme-primary-color, var(--brand));
  color: #fff;
  text-align: center;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.announce-bar a { color: var(--accent-light); text-decoration: underline; }

/* ── Navigation ─────────────────────────────────────────── */
.navbar-main {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0;
  box-shadow: var(--shadow-sm);
  z-index: 1000;
}
.navbar-main .container {
  display: flex;
  align-items: center;
  height: 60px;
  gap: 12px;
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
}
/* Shared by both the theme header and the legacy layout header, so they
   can't drift apart again the way they did when only one was updated to
   60px. Capped smaller on mobile (see the 991px media query below) —
   full 60px there made the mobile bar balloon to 84px tall, since the
   .navbar-main .container switch to height:auto gives it nowhere to
   clip, and nothing constrained the logo's width on a narrow screen. */
.navbar-logo {
  max-height: 60px;
  width: auto;
}
.brand-arabic {
  font-family: 'Amiri', serif;
  font-size: 24px;
  color: var(--brand);
  line-height: 1;
}
.brand-text {
  font-weight: 800;
  font-size: 20px;
  color: var(--text);
  letter-spacing: -.02em;
}
.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  display: flex;
  align-items: center;
  list-style: none;
  gap: 2px;
  margin: 0 auto;
  padding: 0;
}
.nav-item { position: relative; }
.nav-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px !important;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-2) !important;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  white-space: nowrap;
}
.nav-link:hover {
  background: var(--brand-light);
  color: var(--theme-primary-color, var(--brand)) !important;
}
.nav-link.active {
  background: var(--brand-light);
  color: var(--theme-primary-color, var(--brand)) !important;
}
/* .nav-link.active (same specificity, !important) must never win the text
   color here — otherwise this pill is green-on-green and unreadable on
   the one page where both classes land on this link: /subscribe itself.
   Matching .nav-link.active's own two-class specificity (and sitting
   later in the cascade) is what makes this always win instead. */
.nav-link.nav-subscribe {
  background: var(--theme-primary-color, var(--brand)) !important;
  color: #fff !important;
  border-radius: 20px !important;
  padding: 8px 18px !important;
}
.nav-link.nav-subscribe:hover {
  background: var(--brand-dark) !important;
  color: #fff !important;
}
.dropdown-menu {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 220px;
  margin-top: 8px;
}
.dropdown-item {
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}
.dropdown-item:hover {
  background: var(--brand-light);
  color: var(--theme-primary-color, var(--brand));
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  text-decoration: none;
  font-size: 20px;
  transition: var(--transition);
  position: relative;
}
.nav-icon:hover { background: var(--bg-2); color: var(--theme-primary-color, var(--brand)); }
.cart-badge {
  position: absolute;
  top: 2px; right: 2px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.btn-nav-login {
  border: 1.5px solid var(--border-2);
  background: var(--white);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.btn-nav-login:hover { border-color: var(--brand); color: var(--brand); }
.btn-nav-register {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: var(--transition);
}
.btn-nav-register:hover { background: var(--brand-dark); color: #fff; }

/* ── Flash alerts ───────────────────────────────────────── */
.alert-flash {
  border-radius: 0;
  border: none;
  border-left: 4px solid;
  font-weight: 600;
  font-size: 14px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-flash.alert-success { border-left-color: var(--brand); }
.alert-flash.alert-danger   { border-left-color: #DC2626; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-brand {
  background: var(--theme-primary-color, var(--brand));
  color: #fff;
  border: none;
  border-radius: var(--theme-border-radius, var(--radius-sm));
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* justify-content (2026-10-14) — a flex container with no explicit
     justify-content defaults to flex-start, invisible on every auto-width
     .btn-brand (the box always shrinks to fit its own content) but left-
     aligning the label the moment the button is stretched wider than its
     content — .btn-brand.w-100, used on 30+ full-width CTAs site-wide
     (login/register/reset-password submit, checkout/cart "Place Order",
     most admin "Save"/"Create" buttons), rendered its label hugging the
     left edge instead of centered. Reported live: "login likha ta center
     e thakle valo but now it's left side." Centering here fixes every
     one of them from this single shared rule. */
  justify-content: center;
  gap: 6px;
}
.btn-brand:hover {
  background: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27,107,74,.25);
}
.btn-outline-brand {
  background: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 700;
  transition: var(--transition);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-outline-brand:hover {
  background: var(--brand);
  color: #fff;
}
.btn-hero-primary {
  background: var(--theme-accent-color, var(--accent));
  color: #fff;
  border: none;
  padding: 15px 36px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  box-shadow: 0 4px 20px rgba(212,160,23,.35);
}
.btn-hero-primary:hover {
  background: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(212,160,23,.45);
}
.btn-hero-secondary {
  /* Driven by CSS custom properties (set inline per-slide when a banner
     has its own text_color) so this translucent/outline button stays
     legible against whatever's behind it, the same way the badge/title/
     subtitle/stats already do — falls back to the original white values
     when a slide has no custom text_color. */
  background: var(--btn-secondary-bg, rgba(255,255,255,.15));
  color: var(--btn-secondary-color, #fff);
  border: 2px solid var(--btn-secondary-border, rgba(255,255,255,.5));
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.btn-hero-secondary:hover {
  background: var(--btn-secondary-bg-hover, rgba(255,255,255,.25));
  border-color: var(--btn-secondary-border-hover, #fff);
  color: var(--btn-secondary-color, #fff);
}

/* ── Section helpers ─────────────────────────────────────── */
.section-pad {
  padding: 48px 0;
}
.section-pad + .section-pad {
  border-top: 1px solid rgba(0,0,0,.04);
}
@media (max-width: 768px) {
  .section-pad { padding: 32px 0; }
}

.section-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--theme-primary-color, var(--brand));
  margin-bottom: 8px;
  display: block;
}
.section-title {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.section-subtitle {
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1.65;
  max-width: 560px;
}

/* ── Hero section ────────────────────────────────────────── */
.hero {
  background-color: #0F4730;
  background-image: var(--hero-bg-desktop, none), linear-gradient(135deg, #082B1C 0%, #0F4730 40%, #1B6B4A 75%, #2E8B5A 100%);
  background-size: cover;
  background-position: center;
  color: #fff;
  padding: 28px 0 6px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 575px) {
  .hero { background-image: var(--hero-bg-mobile, var(--hero-bg-desktop, none)), linear-gradient(135deg, #082B1C 0%, #0F4730 40%, #1B6B4A 75%, #2E8B5A 100%); }
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(212,160,23,.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.04) 0%, transparent 50%);
  pointer-events: none;
}
.hero-pattern {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero h1 {
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin-bottom: 12px;
  /* Carousel slides swap title text of varying length — clamping to 2
     lines and reserving that height either way keeps the hero the same
     height across every slide instead of growing/shrinking on rotation. */
  min-height: 2.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero h1 .highlight { color: #F8D56A; }
.hero-desc {
  font-size: 16px;
  opacity: .88;
  max-width: 480px;
  line-height: 1.6;
  margin-bottom: 20px;
  /* Same reasoning as .hero h1 above — reserved, clamped height so the
     subtitle's length doesn't change the hero's overall height per slide. */
  min-height: 3.2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.15);
}
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-num { font-size: 22px; font-weight: 800; line-height: 1; }
.hero-stat-label { font-size: 11px; opacity: .7; margin-top: 3px; }
.hero-visual {
  /* Was rgba(255,255,255,.1) — fine when every banner sat behind a
     uniform dark-green tint, but now that real (untinted) images show
     through, a near-transparent panel let busy image detail bleed
     through the backdrop-blur and compete with the gold/white text.
     A darker, more opaque panel keeps this card legible regardless of
     what's behind it, while still reading as glass over any banner. */
  background: rgba(8,43,28,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-xl);
  padding: 28px;
  backdrop-filter: blur(16px);
}
.hero-ayah {
  font-family: 'Amiri', serif;
  font-size: 42px;
  color: #F8D56A;
  text-align: center;
  margin-bottom: 8px;
  line-height: 1.3;
}
.hero-ayah-trans {
  text-align: center;
  opacity: .75;
  font-size: 13px;
  font-style: italic;
  margin-bottom: 24px;
}
.hero-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
  position: relative;
  z-index: 1;
}
.hero-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.35);
  padding: 0;
  cursor: pointer;
  transition: var(--transition);
}
.hero-dot:hover { background: rgba(255,255,255,.6); }
.hero-dot.active { background: #F8D56A; width: 24px; border-radius: 5px; }
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12);
  color: #fff;
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition), opacity .25s ease;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.hero-arrow:hover { background: rgba(255,255,255,.25); }
.hero-arrow-prev { left: 20px; }
.hero-arrow-next { right: 20px; }
@media (min-width: 992px) {
  .hero-arrow { display: flex; }
  /* Arrows only appear while hovering (or keyboard-focusing into) the
     hero, rather than sitting on screen permanently. */
  .hero:hover .hero-arrow,
  .hero:focus-within .hero-arrow {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── Hero: Ecommerce Banner mode ───────────────────────────
   Own namespace (not .hero) so it never inherits that section's
   background/padding/color rules — this is a clean, edge-to-edge
   clickable image, not an overlay-on-background-image hero. Reuses
   .hero-dot/.hero-dot.active as-is (not ancestor-dependent). */
.hero-banner-carousel {
  position: relative;
  overflow: hidden;
  background: #F3F4F6;
}
.hero-banner-slide {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 5;
}
.hero-banner-slide img {
  width: 100%;
  height: 100%;
  /* contain, not cover — there's no control over what aspect ratio an
     admin actually uploads (no stored width/height, no forced crop on
     upload), so a fixed box + cover silently cuts off whatever text or
     content a banner happens to have near its edges. Confirmed live:
     a real "Happy Children — Celebrate our kids" banner had both words
     cropped at the left/right edges on mobile. contain always shows
     the whole image, at the cost of neutral letterboxing when a
     banner's own ratio doesn't match the box. */
  object-fit: contain;
  display: block;
}
@media (max-width: 575px) {
  .hero-banner-slide { aspect-ratio: 2 / 1; }
}
.hero-banner-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hero-banner-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.25);
  color: #fff;
  backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 2;
  transition: var(--transition), opacity .25s ease;
  opacity: 0;
  pointer-events: none;
}
.hero-banner-arrow:hover { background: rgba(0,0,0,.4); }
.hero-banner-arrow-prev { left: 20px; }
.hero-banner-arrow-next { right: 20px; }
@media (min-width: 992px) {
  .hero-banner-arrow { display: flex; }
  .hero-banner-carousel:hover .hero-banner-arrow,
  .hero-banner-carousel:focus-within .hero-banner-arrow {
    opacity: 1;
    pointer-events: auto;
  }
}
.hero-banner-pause {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  font-size: 15px;
}
.hero-banner-pause:hover { background: rgba(0,0,0,.5); }

/* ── Trust strip ─────────────────────────────────────────── */
.trust-strip {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.trust-item i { font-size: 20px; color: var(--brand); }

/* ── Product cards ───────────────────────────────────────── */
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--theme-border-radius, var(--radius));
  overflow: hidden;
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(27,107,74,.2);
}
.product-card-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg);
}
.product-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.product-card:hover .product-card-img img { transform: scale(1.06); }
.product-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  background: linear-gradient(135deg, var(--brand-xlight), var(--brand-light));
}
.badge-sale {
  position: absolute; top: 10px; left: 10px;
  background: var(--theme-accent-color, var(--accent)); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-radius: 4px;
  letter-spacing: .03em; text-transform: uppercase;
}
.badge-digital {
  position: absolute; top: 10px; left: 10px;
  background: #2563EB; color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-radius: 4px;
}
.btn-wishlist {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  background: rgba(255,255,255,.9);
  border-radius: 50%;
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 16px;
  transition: var(--transition);
  backdrop-filter: blur(4px);
}
.btn-wishlist:hover { background: #fff; color: var(--theme-accent-color, #e53e3e); transform: scale(1.1); }
.product-card-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card-cat {
  font-size: 11px;
  color: var(--theme-primary-color, var(--brand));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 5px;
}
.product-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  flex: 1;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-name a { text-decoration: none; color: inherit; }
.product-card-name a:hover { color: var(--theme-primary-color, var(--brand)); }
.product-card-age {
  font-size: 11px;
  font-weight: 700;
  color: var(--theme-primary-color, var(--brand));
  background: color-mix(in srgb, var(--theme-primary-color, var(--brand)) 12%, white);
  border-radius: var(--theme-border-radius, 999px);
  padding: 3px 9px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
}
.product-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.product-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--theme-primary-color, var(--brand));
}
.product-price-original {
  font-size: 12px;
  color: var(--text-xmuted);
  text-decoration: line-through;
  margin-left: 4px;
}
.btn-add-cart {
  background: var(--theme-primary-color, var(--brand));
  color: #fff;
  border: none;
  border-radius: var(--theme-border-radius, var(--radius-sm));
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.btn-add-cart:hover {
  background: var(--brand-dark);
  transform: scale(1.08);
}

/* ── Subscription plan cards ─────────────────────────────── */
.plan-card {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}
.plan-card.featured { border-color: var(--theme-primary-color, var(--brand)); }
.plan-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -13px; left: 50%;
  transform: translateX(-50%);
  background: var(--theme-primary-color, var(--brand));
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .04em;
}
.plan-age-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
}
.plan-name { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.plan-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.6; }
.plan-pricing { margin-bottom: 6px; }
.plan-price { font-size: 38px; font-weight: 800; color: var(--brand); line-height: 1; }
.plan-period { font-size: 14px; color: var(--text-muted); margin-left: 2px; }
.plan-billing-tabs {
  display: flex;
  gap: 6px;
  margin: 12px 0 18px;
}
.plan-billing-tab {
  flex: 1;
  padding: 8px 6px;
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--border);
  transition: var(--transition);
  background: var(--bg);
}
.plan-billing-tab.active {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand);
}
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.plan-features li {
  font-size: 13px;
  color: var(--text-2);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.plan-features li::before {
  content: '✓';
  color: var(--brand);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 0px;
}
.btn-plan {
  display: block;
  width: 100%;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 13px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}
.btn-plan:hover {
  background: var(--brand-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(27,107,74,.3);
}
.plan-card.featured .btn-plan {
  background: var(--theme-accent-color, var(--accent));
}
.plan-card.featured .btn-plan:hover {
  background: var(--accent-dark);
  box-shadow: 0 4px 16px rgba(212,160,23,.35);
}

/* ── Category cards ─────────────────────────────────────── */
.category-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--theme-border-radius, var(--radius));
  padding: 22px 16px;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  height: 100%;
}
.category-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  color: var(--text);
}
.category-icon {
  width: 60px; height: 60px;
  border-radius: var(--theme-border-radius, 16px);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  transition: var(--transition);
}
.category-card:hover .category-icon { transform: scale(1.1); }
.category-name { font-weight: 700; font-size: 14px; line-height: 1.3; }
.category-count { font-size: 12px; color: var(--text-muted); }

/* Homepage "Shop by Category" — horizontal-scrolling row at every
   viewport width (2026-10-15, second pass: previously mobile-only,
   wrapping into a 6-per-row grid on desktop; the category count is no
   longer capped at 8, so a grid stops making sense past a handful of
   cards — now it scrolls everywhere instead). Card width is fluid
   (clamp()), scaling smoothly from phone to desktop instead of a fixed
   px that only ever suited one end. Scroll-shadow fade on both edges
   (same technique already proven on admin tables, Micro Task #215) is
   the discoverability cue, plus desktop-only prev/next arrow buttons
   since a mouse doesn't swipe as naturally as a touch screen. Pure CSS
   + one small vanilla-JS block (toggles .at-start/.at-end and calls
   scrollBy()) — no library, no new image/request, so this adds no
   Google PageSpeed cost. */
.category-scroll-wrap {
  position: relative;
}
.category-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  position: relative;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.category-scroll-row::-webkit-scrollbar { display: none; }
.category-scroll-item {
  flex: 0 0 auto;
  width: clamp(112px, 22vw, 190px);
  scroll-snap-align: start;
}
.category-scroll-row::before,
.category-scroll-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 36px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .15s ease;
}
.category-scroll-row::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), rgba(249, 247, 242, 0));
}
.category-scroll-row::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), rgba(249, 247, 242, 0));
}
.category-scroll-row:not(.at-start)::before { opacity: 1; }
.category-scroll-row:not(.at-end)::after { opacity: 1; }
.category-scroll-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 16px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.category-scroll-arrow:hover { border-color: var(--brand); color: var(--brand); }
.category-scroll-arrow:disabled { opacity: 0; pointer-events: none; }
.category-scroll-arrow-prev { left: -4px; }
.category-scroll-arrow-next { right: -4px; }
@media (min-width: 768px) {
  .category-scroll-arrow { display: flex; }
}

/* Homepage "Flash Sale" section (2026-10-15) — placed above "Shop by
   Category" (urgency content before evergreen browsing). Reuses the
   existing product-card classes for the image/name/price block (same
   visual family as every other product card sitewide) but kept as its
   own scroll-row/shadow/arrow block rather than sharing the category
   section's, since a product-sized card needs a wider clamp() range
   than a category tile — see flash_sale_section.blade.php's own
   docblock for why this wasn't generalized into one shared component. */
.flash-sale-section .section-eyebrow i { margin-right: 4px; }
.flash-sale-max-badge {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--theme-accent-color, var(--accent));
  border-radius: 999px;
  padding: 3px 12px;
  margin-left: 10px;
  vertical-align: middle;
}
.flash-sale-ends-badge {
  font-size: 12px;
  font-weight: 700;
  color: #B91C1C;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 999px;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.flash-sale-scroll-wrap { position: relative; }
.flash-sale-scroll-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  position: relative;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.flash-sale-scroll-row::-webkit-scrollbar { display: none; }
.flash-sale-scroll-item {
  flex: 0 0 auto;
  width: clamp(160px, 42vw, 240px);
  scroll-snap-align: start;
}
.flash-sale-scroll-item a.product-card { text-decoration: none; color: inherit; }
.flash-sale-scroll-row::before,
.flash-sale-scroll-row::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 36px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .15s ease;
}
.flash-sale-scroll-row::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), rgba(249, 247, 242, 0));
}
.flash-sale-scroll-row::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), rgba(249, 247, 242, 0));
}
.flash-sale-scroll-row:not(.at-start)::before { opacity: 1; }
.flash-sale-scroll-row:not(.at-end)::after { opacity: 1; }
.flash-sale-scroll-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text);
  font-size: 16px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.flash-sale-scroll-arrow:hover { border-color: var(--brand); color: var(--brand); }
.flash-sale-scroll-arrow:disabled { opacity: 0; pointer-events: none; }
.flash-sale-scroll-arrow-prev { left: -4px; }
.flash-sale-scroll-arrow-next { right: -4px; }
@media (min-width: 768px) {
  .flash-sale-scroll-arrow { display: flex; }
}

/* ── Age group cards ─────────────────────────────────────── */
.age-card {
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  color: #fff;
  text-decoration: none;
  display: block;
  transition: var(--transition);
  height: 100%;
  position: relative;
  overflow: hidden;
}
.age-card::after {
  content: '';
  position: absolute;
  bottom: -20px; right: -20px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
}
.age-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-xl); color: #fff; }
.age-card-emoji { font-size: 44px; margin-bottom: 14px; display: block; }
.age-card-range { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.age-card-label { font-size: 16px; font-weight: 700; margin: 4px 0 8px; }
.age-card-desc { font-size: 13px; opacity: .85; line-height: 1.5; }

/* ── Testimonials ─────────────────────────────────────────── */
.testimonial-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  height: 100%;
  position: relative;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: 14px; right: 20px;
  font-family: 'Amiri', serif;
  font-size: 64px;
  color: var(--brand-light);
  line-height: 1;
  pointer-events: none;
}
.testimonial-stars { color: #F59E0B; font-size: 16px; margin-bottom: 12px; }
.testimonial-text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
  margin-bottom: 16px;
  font-style: italic;
}
.testimonial-author { font-weight: 700; font-size: 14px; }
.testimonial-location { font-size: 12px; color: var(--text-muted); }

/* ── Blog cards ──────────────────────────────────────────── */
.blog-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--theme-border-radius, var(--radius));
  overflow: hidden;
  transition: var(--transition);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.blog-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }
.blog-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.blog-card-cat {
  font-size: 11px; color: var(--theme-primary-color, var(--brand));
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: 7px;
}
.blog-card-title {
  font-size: 16px; font-weight: 700;
  line-height: 1.4; margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.blog-card-title a { text-decoration: none; color: var(--text); }
.blog-card-title a:hover { color: var(--theme-primary-color, var(--brand)); }
.blog-card-meta { font-size: 12px; color: var(--text-muted); margin-top: auto; padding-top: 12px; }

/* ── Page hero ───────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0F4730, #1B6B4A);
  color: #fff;
  padding: 52px 0;
}
.page-hero h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; margin-bottom: 8px; }
.page-hero p { opacity: .85; font-size: 15px; max-width: 520px; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 11px 0;
}
.breadcrumb { margin: 0; background: none; padding: 0; }
.breadcrumb-item { font-size: 13px; }
.breadcrumb-item a { color: var(--theme-primary-color, var(--brand)); text-decoration: none; }
.breadcrumb-item a:hover { text-decoration: underline; }
.breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-xmuted); }

/* ── Forms ───────────────────────────────────────────────── */
.form-label { font-weight: 600; font-size: 13px; margin-bottom: 5px; color: var(--text-2); }
.form-control, .form-select {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  transition: var(--transition);
  background: var(--white);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(27,107,74,.1);
  outline: none;
}
.form-control.is-invalid { border-color: #DC2626; }
.invalid-feedback { font-size: 12px; color: #DC2626; margin-top: 4px; }

/* /shop/search's search box (#search-box-wrap) keeps overflow:hidden on
   its .input-group wrapper for a clean, gap-free rounded pill around the
   input+button — but that means the input's own .form-control:focus
   ring above would get clipped at the wrapper's edge the moment it's
   focused. Suppressed just for this input and replaced with a ring on
   the wrapper itself, via :focus-within: a box-shadow is never clipped
   by overflow:hidden on the same element that casts it (only a
   *child's* overflow would be clipped), so this one has nothing left to
   cut it off. */
#search-box-wrap {
  /* Moved here from an inline style attribute deliberately — an inline
     style always outranks any stylesheet rule regardless of selector
     specificity, which silently defeated the :focus-within override
     below (box-shadow stayed frozen at the inline value no matter what). */
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
#search-input:focus {
  box-shadow: none;
}
#search-box-wrap:focus-within {
  box-shadow: 0 0 0 3px rgba(27, 107, 74, .15), var(--shadow);
}

/* ── Cart ────────────────────────────────────────────────── */
.cart-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: var(--transition);
}
.cart-item:hover { box-shadow: var(--shadow-sm); }
.cart-img {
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--bg);
  flex-shrink: 0;
}
.qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: fit-content;
}
.qty-btn {
  width: 34px; height: 36px;
  background: var(--bg);
  border: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.qty-btn:hover { background: var(--brand-light); color: var(--theme-primary-color, var(--brand)); }
.qty-input {
  width: 44px; height: 36px;
  border: none;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  outline: none;
}

/* ── Order summary ───────────────────────────────────────── */
.order-summary {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky;
  top: 90px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.summary-row:last-child { border-bottom: none; font-weight: 800; font-size: 18px; }
.summary-row.discount { color: var(--theme-primary-color, var(--brand)); }

/* ── Stars ───────────────────────────────────────────────── */
.stars-filled { color: #F59E0B; }
.stars-empty  { color: #D1D5DB; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: #121210;
  color: #C4C2BB;
  margin-top: auto;
}
.footer-brand { display: flex; align-items: center; gap: 6px; }
.footer-brand .brand-arabic { color: var(--theme-primary-color, #4CAF80); }
.footer-brand .brand-text { color: #fff; }
.footer-tagline { font-size: 13px; color: #888; line-height: 1.6; margin-top: 10px; }
.footer-heading { color: #fff; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-links a { color: #888; text-decoration: none; font-size: 13px; transition: var(--transition); display: flex; align-items: center; gap: 5px; }
.footer-links a:hover { color: var(--theme-primary-color, #4CAF80); }
.footer-contact li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #888; margin-bottom: 8px; }
.footer-contact i { color: #4CAF80; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.social-links { display: flex; gap: 8px; margin-top: 16px; }
.social-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  color: #C4C2BB;
  text-decoration: none;
  font-size: 18px;
  transition: var(--transition);
}
.social-btn:hover { background: var(--theme-primary-color, var(--brand)); color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 16px 0;
}
.payment-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.payment-badge {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: #C4C2BB;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}

/* ── Product page ─────────────────────────────────────────── */
.product-gallery-main {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--bg);
  cursor: zoom-in;
}
.product-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-gallery-main:hover img { transform: scale(1.04); }
.product-thumb {
  width: 72px; height: 72px;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
}
.product-thumb:hover, .product-thumb.active { border-color: var(--brand); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.product-price-main { font-size: 38px; font-weight: 800; color: var(--theme-primary-color, var(--brand)); line-height: 1; }
.product-price-original { font-size: 20px; color: var(--text-xmuted); text-decoration: line-through; margin-left: 10px; }
.product-badge-sale {
  background: #FEF3C7; color: #92400E;
  padding: 3px 10px; border-radius: 20px;
  font-size: 12px; font-weight: 700; margin-left: 8px;
}
.product-meta-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.product-meta-badge.in-stock { background: #D1FAE5; border-color: transparent; color: #065F46; }
.product-meta-badge.out-of-stock { background: #FEE2E2; border-color: transparent; color: #991B1B; }
.product-meta-badge.digital { background: #DBEAFE; border-color: transparent; color: #1E40AF; }
.btn-add-cart-main {
  background: var(--theme-primary-color, var(--brand));
  color: #fff;
  border: none;
  border-radius: var(--theme-border-radius, var(--radius-sm));
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex: 1;
  /* Keeps pace with .btn-buy-now's own height:100% — on a narrow phone
     "Pre-order & Pay" can wrap to two lines while "Pre-order Now" stays
     on one, and without this the shorter button would sit top-aligned
     inside a column stretched taller by its wrapped sibling. */
  height: 100%;
}
.btn-add-cart-main:hover {
  background: var(--brand-dark);
  box-shadow: 0 4px 16px rgba(27,107,74,.3);
}
/* PDP wishlist heart — same circular pattern as .btn-wishlist (product
   cards), sized to sit in-line next to .btn-add-cart-main instead of
   absolutely positioned over a card image. */
.btn-wishlist-pdp {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: var(--white, #fff);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--text, #111827);
  transition: var(--transition);
}
.btn-wishlist-pdp:hover { background: #FEF2F2; border-color: #FCA5A5; color: #DC2626; }
/* Buy Now — deliberately a distinct dark neutral, not the brand green
   .btn-add-cart-main already owns, so the two read as separate actions
   at a glance rather than two identical-looking buttons side by side. */
.btn-buy-now {
  background: #1F2937;
  color: #fff;
  border: none;
  border-radius: var(--theme-border-radius, var(--radius-sm));
  padding: 14px 28px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  /* Matches .btn-add-cart-main's own height exactly — both sit in a
     .row.g-2 together, and without this a sibling that happens to
     fit on one line (e.g. "Add to Cart") ends up visibly shorter
     than one that wraps to two (e.g. "Pre-order & Pay" on a narrow
     screen), even though the Bootstrap column around each already
     stretches to match. */
  height: 100%;
}
.btn-buy-now:hover { background: #111827; box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.btn-buy-now:disabled { opacity: .6; cursor: not-allowed; }
/* Order on WhatsApp / Call for Order — same pill/button footprint as
   .btn-buy-now, each in its own recognizable brand color (WhatsApp
   green already used by the floating chat button elsewhere; a calm
   blue for the phone action, distinct from both WhatsApp green and
   the storefront's own brand green).

   height:100% fixes a real bug reported live: "Order on WhatsApp" is
   long enough to wrap to two lines on a narrow phone while "Call for
   Order" stays on one, and without this the two ended up visibly
   different heights side by side in the same row — one button looked
   broken/mismatched next to the other. The mobile font-size/padding
   trim below reduces how often the wrap happens in the first place. */
.btn-order-whatsapp, .btn-call-order {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--theme-border-radius, var(--radius-sm));
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: var(--transition);
  height: 100%;
}
.btn-order-whatsapp { background: #25D366; color: #fff; }
.btn-order-whatsapp:hover { background: #1DA851; color: #fff; }
.btn-call-order { background: #2563EB; color: #fff; }
.btn-call-order:hover { background: #1D4ED8; color: #fff; }
@media (max-width: 575px) {
  .btn-order-whatsapp, .btn-call-order {
    padding: 10px 10px;
    font-size: 13px;
    gap: 6px;
  }
}
/* Standalone themed CTA button (Submit Question/Review, Notify Me) —
   same theme-token color as .btn-add-cart-main but without its
   display:flex/flex:1 sizing, which is specifically meant for sharing a
   flex row with the quantity stepper. Reusing .btn-add-cart-main outside
   that one layout stretched the button to fill unrelated flex rows, or
   wrapped its text onto two lines inside a shrunk flex item — both
   produced an oversized/misshapen button. This class sizes to its own
   content instead. */
.btn-theme-primary {
  display: inline-block;
  background: var(--theme-primary-color, var(--brand));
  color: #fff;
  border: none;
  border-radius: var(--theme-border-radius, var(--radius-sm));
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.btn-theme-primary:hover {
  background: var(--brand-dark);
  box-shadow: 0 4px 16px rgba(27,107,74,.3);
}
.product-trust-items { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.product-trust-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.product-trust-item i { color: var(--theme-primary-color, var(--brand)); font-size: 15px; }

/* ── Tabs ────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 2px solid var(--border); }
.nav-tabs .nav-link { color: var(--text-muted); font-weight: 600; font-size: 14px; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 10px 18px; transition: var(--transition); }
.nav-tabs .nav-link.active { color: var(--theme-primary-color, var(--brand)); border-bottom-color: var(--theme-primary-color, var(--brand)); background: none; }
.nav-tabs .nav-link:hover { color: var(--theme-primary-color, var(--brand)); }
.tab-content { background: var(--white); border: 1px solid var(--border); border-top: none; border-radius: 0 0 var(--theme-border-radius, var(--radius)) var(--theme-border-radius, var(--radius)); padding: 24px; }

/* Rich-text product description (Quill editor output, sanitized by
   RichTextSanitizer — the exact tag set below matches its allowlist).
   Without this, each <p>/<h2>/<h3> falls back to the browser's own
   default margins, which don't collapse against .tab-content's own
   padding — the first/last element's margin stacks on top of the
   padding instead, making the description look uneven against the
   box border it sits inside, especially compared to the plain
   (single-block, no-inherent-spacing) text this replaced. */
.product-description { font-size: 15px; line-height: 1.85; color: var(--text-2); }
.product-description > *:first-child { margin-top: 0; }
.product-description > *:last-child { margin-bottom: 0; }
.product-description p { margin: 0 0 14px; }
.product-description h2, .product-description h3 { margin: 20px 0 10px; font-weight: 800; color: var(--text); }
.product-description h2 { font-size: 20px; }
.product-description h3 { font-size: 17px; }
.product-description ul, .product-description ol { margin: 0 0 14px; padding-left: 22px; }
.product-description li { margin-bottom: 4px; }
/* No border/color accent here (deliberately, unlike a typical blockquote
   style) — in practice, content pasted into the editor from AI tools/
   external sources very often lands as a <blockquote> per line rather
   than <p> (a Quill paste-handling quirk, not something this editor's
   own toolbar can produce directly), so a loud per-line accent would
   turn an entire normal-looking description into a wall of colored
   bars instead of highlighting an actual, intentional quote. */
.product-description blockquote { margin: 0 0 14px; font-style: italic; }
.product-description a { color: var(--theme-primary-color, var(--brand)); text-decoration: underline; }

/* ── Checkout ─────────────────────────────────────────────── */
.checkout-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}
.checkout-section h5 { font-weight: 700; font-size: 16px; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.checkout-section h5 i { color: var(--theme-primary-color, var(--brand)); font-size: 20px; }
.address-option {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 8px;
}
.address-option:hover, .address-option.selected { border-color: var(--theme-primary-color, var(--brand)); background: var(--brand-xlight); }
.payment-option {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  transition: var(--transition);
}
.payment-option:hover, .payment-option.selected { border-color: var(--theme-primary-color, var(--brand)); background: var(--brand-xlight); }
.payment-option-name { font-weight: 700; font-size: 14px; }
.payment-option-desc { font-size: 12px; color: var(--text-muted); }

/* ── Account ──────────────────────────────────────────────── */
.account-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  transition: var(--transition);
}
.account-nav-link:hover { background: var(--bg-2); color: var(--brand); }
.account-nav-link.active { background: var(--brand-light); color: var(--brand); font-weight: 700; }
.account-nav-link i { font-size: 18px; }
.subscription-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* ── Pagination overrides ────────────────────────────────── */
.pagination { gap: 4px; }
.page-link { border-radius: var(--radius-sm) !important; border: 1.5px solid var(--border); color: var(--text-2); font-weight: 600; font-size: 14px; padding: 7px 14px; }
.page-link:hover { background: var(--brand-light); border-color: var(--brand); color: var(--brand); }
.page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 991px) {
  .navbar-main .container { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 12px; }
  .navbar-logo { max-height: 44px; }
  .navbar-collapse { width: 100%; padding: 12px 0; border-top: 1px solid var(--border); margin-top: 10px; }
  /* !important needed here — the base .navbar-nav rule forces row
     !important (to beat Bootstrap's own column default, since this
     navbar doesn't use .navbar-expand-*) and a plain declaration here
     can never win that fight. Without it, every nav item (Shop, Age
     Groups, Subscribe, Blog, About, search/cart/account) crams into one
     unscrollable row that overflows the screen on mobile — this was
     never actually broken on the legacy layout's own #mainNav, only on
     the theme header's #themeMainNav, because a previous fix for this
     exact bug was scoped to the wrong ID and silently never applied
     there. Fixed generically via the shared class instead, so it can't
     happen again if the id changes a third time. */
  .navbar-nav { flex-direction: column !important; gap: 2px; width: 100% !important; }
  .nav-item { width: 100%; }
  .nav-link { width: 100%; }
  .nav-actions { order: -1; margin-left: auto; }
  /* Kept natural-width (not stretched to 100% like other nav-links) —
     previously only applied via the legacy layout's own #mainNav-scoped
     rule further down, so it only ever worked there, not on the theme
     header. That ID-scoped block is left as-is (harmless, redundant for
     the legacy layout, inert for the theme header) rather than touched. */
  .nav-subscribe { width: auto !important; align-self: flex-start; margin: 8px 16px; }
  .hero { padding: 24px 0 6px; }
  .hero-stats { gap: 18px; }
  .hero h1 { font-size: 30px; }
}
@media (max-width: 575px) {
  .hero { padding: 20px 0 5px; }
  .hero-cta { flex-direction: column; align-items: flex-start; }
  .btn-hero-primary, .btn-hero-secondary { width: 100%; justify-content: center; }
  .product-price-main { font-size: 28px; }
}

/* ── Utility ──────────────────────────────────────────────── */
.text-brand { color: var(--brand) !important; }
.bg-brand   { background: var(--brand) !important; }
.bg-brand-light { background: var(--brand-light) !important; }
.rounded-brand { border-radius: var(--radius) !important; }
.shadow-brand { box-shadow: 0 4px 20px rgba(27,107,74,.15) !important; }
.border-brand { border-color: var(--brand) !important; }
.fw-800 { font-weight: 800 !important; }
.cursor-pointer { cursor: pointer !important; }
.aspect-1 { aspect-ratio: 1; }
.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }


/* ── Mobile overflow fix ─────────────────────────────────── */
html, body {
  overflow-x: clip;
}
img, video, iframe {
  max-width: 100%;
}
@media (max-width: 640px) {
  /* Bootstrap g-5 gutter too wide for mobile — causes 24px overflow */
  .row.g-5 {
    --bs-gutter-x: 1rem;
  }
  .row.g-4 {
    --bs-gutter-x: 0.75rem;
  }
  .hero-stats {
    flex-wrap: wrap;
    gap: 16px;
  }
  .hero h1 {
    font-size: 28px;
  }
  .hero-cta {
    flex-wrap: wrap;
  }
  .section-title {
    font-size: 22px;
  }
  .announcement-bar, .topbar {
    font-size: 11px;
    padding-left: 8px;
    padding-right: 8px;
  }
}


/* ── Mobile nav collapse fix ─────────────────────────────── */
@media (max-width: 991px) {
  #mainNav {
    display: none !important;
    width: 100%;
  }
  #mainNav.show {
    display: block !important;
    background: #fff;
    padding: 8px 0 16px;
    border-top: 1px solid #E5E7EB;
  }
  #mainNav .navbar-nav {
    flex-direction: column !important;
    width: 100%;
    gap: 2px;
  }
  #mainNav .nav-item {
    width: 100%;
  }
  #mainNav .nav-link {
    padding: 10px 16px;
    display: block;
  }
  #mainNav .nav-subscribe {
    display: inline-block;
    width: auto !important;
    align-self: flex-start;
    margin: 8px 16px;
  }
  #mainNav ~ .navbar-icons,
  #mainNav .navbar-icons {
    border-top: 1px solid #F3F4F6;
    padding-top: 10px;
    margin-top: 6px;
  }
}


/* ── Sticky shop filter (desktop) ────────────────────────── */
@media (min-width: 992px) {
  #filterForm {
    position: sticky;
    top: 90px;
  }
}


/* ── Theme Engine design tokens (Design Tokens → CSS gate) ──
   Previously-unstyled Theme Engine markup only (.theme-header/
   .theme-footer/#pdpPrice/.pdp-thumb/.pdp-swatch) — none of these
   selectors existed anywhere else in this file before this block, so
   nothing already-live is touched. `--theme-*` custom properties are
   emitted per-tenant/request by themes/layouts/base.blade.php; the
   var() fallback here is the same static default already used
   throughout this file's own --brand value, so a page rendered before
   that inline <style> block loads (or with it absent/empty) still
   renders identically to today. Deliberately does not touch this
   file's existing --brand/--text/etc. :root variables or any selector
   defined above — tenant-driven tokens are additive only.

   Theme visual differentiation extension (8-theme catalog, Tier 2):
   .section-eyebrow/.product-card/.product-card-age/.category-card/
   .category-icon/.btn-add-cart (all defined above, pre-existing
   selectors) now read --theme-primary-color/--theme-border-radius as
   their FIRST preference, falling back to this file's own existing
   --brand/--radius/etc. values exactly as before when a tenant/theme
   has no override configured — a tenant with no design-token override
   renders byte-identical to before this change. This is the only
   currently-live per-theme visual differentiation mechanism:
   PlatformThemeVersion.component_manifest/layout_definition are not
   consumed by any Blade view (confirmed by direct inspection), so
   design tokens (sourced from TenantThemeOverride.settings only —
   PlatformThemeVersion itself has no token-default mechanism today)
   are the only lever available without touching ThemeManager/
   BladeThemeRenderer/Blade templates. */
/* "Skip to main content" (themes/layouts/base.blade.php) never had
   accompanying CSS — the standard WCAG skip-link pattern moves it
   off-screen until it receives keyboard focus (Tab), at which point it
   should become visible; with no CSS at all it instead rendered as
   plain always-visible text at the very top of every themed page. Not
   present in the legacy frontend.layouts.app at all — this is
   Theme-Engine-only markup that was left half-implemented. Theme-token
   color so it, like everything else theme-colored, adapts per tenant. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  background: var(--theme-primary-color, var(--brand));
  color: #fff;
  padding: 10px 18px;
  z-index: 2000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--theme-border-radius, 8px) 0;
  transition: transform 0.2s ease;
}
.skip-link:focus {
  transform: translateY(0);
}

.theme-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 20px;
}
.theme-header__brand {
  font-family: var(--theme-font-family, 'Nunito'), system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--theme-primary-color, #1B6B4A);
  text-decoration: none;
}
.theme-footer {
  padding: 20px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
}
#pdpPrice {
  color: var(--theme-primary-color, #1B6B4A);
  font-weight: 800;
  font-size: 1.4rem;
}
.pdp-thumb.active {
  border: 2px solid var(--theme-primary-color, #1B6B4A);
  border-radius: var(--theme-border-radius, 8px);
}
.pdp-swatch[aria-pressed="true"]:not(.pdp-swatch-color) {
  background: var(--theme-primary-color, #1B6B4A);
  border-color: var(--theme-primary-color, #1B6B4A);
  color: #fff;
}
/* Color swatches keep their actual color at all times — selection is
   shown as a ring around the circle, not by overriding the fill
   (which the generic rule above would do, hiding the real color). */
.pdp-swatch-color {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #D1D5DB;
  padding: 0;
  cursor: pointer;
}
.pdp-swatch-color[aria-pressed="true"] {
  border-color: var(--theme-primary-color, #1B6B4A);
  box-shadow: 0 0 0 2px rgba(27,107,74,.2);
}

/* ── Floating action buttons (Compare bubble, WhatsApp) ──────────────────
   Positioning lives here (not inline) so the mobile-bottom-nav media
   query below can raise them above the new bar without !important. */
.floating-compare-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1050;
}
/* WhatsApp (56px circle, bottom:24px) sits in the same corner by default
   — stacked clears its top edge (24+56=80) with a 12px gap instead of
   overlapping it. Only applied when WhatsApp is actually visible there
   (see the Blade condition at each call site); if WhatsApp is configured
   to bottom-left instead, Compare stays in its normal solo position. */
.floating-compare-btn--stacked {
  bottom: 92px;
}
.floating-whatsapp-btn {
  position: fixed;
  bottom: 24px;
  right: 20px;
}
.floating-whatsapp-btn--left {
  right: auto;
  left: 20px;
}

/* ── Mobile bottom navigation bar ─────────────────────────────────────── */
.mobile-bottom-nav {
  display: none;
}
@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    background: #fff;
    border-top: 1px solid #E5E7EB;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .06);
  }
  .mobile-bottom-nav .mbn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: #6B7280;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 0;
    /* #categoryDrawerToggle is a real <button> (the other items are
       <a> tags) — without this reset it keeps the UA's default button
       chrome (grey background, outset border), which reads as
       permanently "pressed" regardless of which page is active. */
    background: none;
    border: none;
    appearance: none;
  }
  .mobile-bottom-nav .mbn-item i {
    font-size: 20px;
    line-height: 1;
  }
  .mobile-bottom-nav .mbn-item.active {
    color: var(--theme-primary-color, var(--brand, #0F4730));
  }
  .mobile-bottom-nav .mbn-icon-wrap {
    position: relative;
    display: inline-flex;
  }
  .mobile-bottom-nav .mbn-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
  }

  /* Content and other floating elements must clear the new bar. */
  body {
    padding-bottom: 58px;
  }
  .floating-compare-btn {
    bottom: 70px;
  }
  .floating-compare-btn--stacked {
    bottom: 142px;
  }
  .floating-whatsapp-btn {
    bottom: 74px;
  }

  /* Cart and Account already live in the bottom nav bar above — showing
     them again in the top navbar's icon row is pure duplication on a
     small screen. Wishlist stays: the bottom bar has no wishlist item,
     so hiding it here would remove the only way to reach it on mobile. */
  .navbar-main .cart-icon,
  .navbar-main .nav-account-wrap {
    display: none;
  }
}

/* Password show/hide toggle (resources/js/password-toggle.js) — wraps
   every <input type="password"> in-place, so this just needs to make
   room for the button and center it without disturbing the input's own
   block-level layout inside its existing .mb-3/.col-* container. */
.pwd-toggle-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.pwd-toggle-input {
  padding-right: 2.5rem;
}
.pwd-toggle-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: #9CA3AF;
  cursor: pointer;
}
.pwd-toggle-btn:hover {
  color: #4B5563;
  background: rgba(0, 0, 0, .04);
}
.pwd-toggle-btn:focus-visible {
  outline: 2px solid var(--brand, #1B6B4A);
  outline-offset: 1px;
}
.pwd-toggle-btn i {
  font-size: 16px;
}

/* Mobile nav drawer (2026-10-15) — #mainNav/#themeMainNav (the SAME
   markup that renders as the normal inline desktop nav) becomes a
   full-screen slide-in panel below the lg breakpoint; #mobileNavBackdrop
   /#themeMobileNavBackdrop dims the page behind it. Desktop (>=992px)
   is completely untouched by this block. */
#mobileNavBackdrop, #themeMobileNavBackdrop, #categoryDrawerBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  z-index: 1049;
}
#mobileNavBackdrop.show, #themeMobileNavBackdrop.show, #categoryDrawerBackdrop.show {
  display: block;
}
/* #categoryDrawer (the bottom nav's "Categories" drawer, shared across
   both layouts since mobile_bottom_nav.blade.php itself already is) has
   no desktop counterpart at all — the bottom nav bar it lives in is
   mobile-only already — so it's display:none outside the drawer media
   query below, unlike #mainNav/#themeMainNav which stay visible as a
   normal inline row on desktop. */
#categoryDrawer {
  display: none;
}
.mobile-drawer-close {
  display: none;
}
.mobile-drawer-search {
  display: none;
}
@media (max-width: 991.98px) {
  #mainNav, #themeMainNav, #categoryDrawer {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 320px;
    background: #fff;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform .3s ease;
    overflow-y: auto;
    padding: 20px;
    box-shadow: -8px 0 24px rgba(0, 0, 0, .18);
  }
  #mainNav.open, #themeMainNav.open, #categoryDrawer.open {
    transform: translateX(0);
  }
  .mobile-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: auto;
    margin-bottom: 8px;
    background: none;
    border: none;
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
  }
  .mobile-drawer-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg, #F4F1EA);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    color: var(--text-muted, #6B7280);
    font-size: 14px;
  }
  .mobile-drawer-search input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 14px;
    font-family: inherit;
  }
  #mainNav .navbar-nav, #themeMainNav .navbar-nav {
    width: 100%;
  }
  #mainNav .nav-item, #themeMainNav .nav-item {
    width: 100%;
  }
  #mainNav .nav-link, #themeMainNav .nav-link {
    display: flex;
    align-items: center;
    padding: 14px 4px;
    font-size: 15px;
    border-bottom: 1px solid #F3F4F6;
  }
  #mainNav .nav-link.nav-subscribe, #themeMainNav .nav-link.nav-subscribe {
    background: #F0FBF6;
    border-radius: 10px;
    padding-left: 10px;
    border-bottom: none;
    margin-bottom: 4px;
  }
  /* Bootstrap's dropdown JS (Popper) sets inline position/transform on
     .dropdown-menu when it opens — a plain stylesheet rule can't beat
     an inline style, but !important can, so the "Age Groups" submenu
     renders as a static in-place accordion section here instead of a
     floating popover, without touching its desktop behavior at all. */
  #mainNav .dropdown-menu, #themeMainNav .dropdown-menu {
    position: static !important;
    transform: none !important;
    inset: auto !important;
    border: none;
    box-shadow: none;
    background: #FAFAF9;
    margin: 0 0 4px 12px;
    padding: 0;
  }
  #mainNav .dropdown-menu .dropdown-item, #themeMainNav .dropdown-menu .dropdown-item {
    padding: 10px 8px;
    font-size: 14px;
  }
  #mainNav > div.ms-lg-auto, #themeMainNav > div.ms-lg-auto {
    margin-top: 16px !important;
    padding-top: 16px;
    border-top: 1px solid #F3F4F6;
    justify-content: flex-start !important;
    gap: 20px !important;
  }
  /* Reported live: "first e search box then shop after then search icon
     beside wishicobn" — the drawer's own search box at the top (added
     with this drawer) made the pre-existing search icon in this row a
     second, redundant way to search, right next to wishlist. Hidden
     here only (desktop still needs it — there's no search box there). */
  .navbar-main .search-icon {
    display: none;
  }
}

/* Categories drawer content (2026-10-15) — only ever rendered inside
   #categoryDrawer, itself already display:none outside the mobile
   breakpoint above, so these don't need their own media-query guard. */
.cat-drawer-list {
  margin-top: 6px;
}
.cat-node {
  display: block;
}
.cat-node summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 4px;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  list-style: none;
}
.cat-node summary::-webkit-details-marker {
  display: none;
}
.cat-node.cat-leaf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 4px;
  border-bottom: 1px solid #F3F4F6;
  text-decoration: none;
}
.cat-name {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #141413);
  text-decoration: none;
}
.cat-count {
  font-size: 12px;
  color: #9CA3AF;
}
.cat-chevron {
  display: inline-block;
  color: #9CA3AF;
  font-size: 13px;
  transition: transform .15s ease;
}
.cat-node[open] > summary .cat-chevron {
  transform: rotate(90deg);
}
.cat-node .cat-children {
  padding-left: 18px;
  background: #FAFAF8;
  border-radius: 8px;
  margin: 2px 0 6px;
}
.cat-node .cat-children .cat-node summary,
.cat-node .cat-children .cat-node.cat-leaf {
  padding: 11px 4px;
  border-bottom-color: #F0EEE7;
}
.cat-node .cat-children .cat-name {
  font-size: 14px;
  font-weight: 500;
}