/* ============================================================
   VARIETY STORE JA — MAIN STYLESHEET
   Design: Tropical Modern | Fonts: Playfair Display + DM Sans
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ── Variables ── */
:root {
  --primary-900: hsl(318, 85%, 26%);
  --primary-800: hsl(318, 90%, 38%);
  --primary-700: hsl(318, 95%, 50%);
  --primary-600: hsl(318, 100%, 62%);
  --primary-500: #FF6EC7;
  --primary-400: hsl(318, 100%, 80%);
  --primary-100: hsl(318, 100%, 93%);
  --primary-50:  hsl(318, 100%, 97%);

  --accent-500: #eab308;
  --accent-400: #facc15;
  --accent-300: #fde68a;
  --accent-100: #fefce8;

  --white: #ffffff;
  --off-white: #f9f9f5;
  --gray-100: #f2f2ef;
  --gray-200: #e5e5e0;
  --gray-400: #9e9e9a;
  --gray-600: #5c5c58;
  --gray-800: #2a2a28;
  --black: #111110;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  --nav-height: 64px;
  --nav-height-mobile: 64px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.16);

  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  background: var(--off-white);
  color: var(--gray-800);
  line-height: 1.6;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ── Typography ── */
h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }
h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 900; }
h2 { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { color: var(--gray-600); }

/* ── Layout ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.section { padding: 3.5rem 0; border-top: 2px solid var(--primary-500); }
.section:first-of-type,
.about-strip,
.policy-bar,
.policy-section { border-top: none; }
.section[style*="display:none"] { border-top: none; }
.section-header { text-align: center; margin-bottom: 2.5rem; }
.section-header h2 { color: var(--primary-800); margin-bottom: 0.5rem; }
.section-header .underline {
  width: 60px; height: 3px;
  background: var(--accent-500);
  margin: 0.5rem auto 0;
  border-radius: var(--radius-pill);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  padding: 0.7rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary-500);
  color: var(--primary-900);
  box-shadow: 0 2px 8px rgba(196,113,124,0.35);
}
.btn-primary:hover { background: var(--primary-600); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,110,199,0.45); }
.btn-yellow {
  background: linear-gradient(135deg, var(--accent-400) 0%, var(--accent-500) 100%);
  color: var(--primary-900);
  box-shadow: 0 2px 8px rgba(234,179,8,0.35);
}
.btn-yellow:hover { background: linear-gradient(135deg, var(--accent-300) 0%, var(--accent-400) 100%); transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  border: 2px solid var(--primary-700);
  color: var(--primary-700);
}
.btn-outline:hover { background: var(--primary-700); color: var(--white); }
.btn-whatsapp {
  background: #25d366;
  color: var(--white);
  box-shadow: 0 2px 8px rgba(37,211,102,0.35);
}
.btn-whatsapp:hover { background: #1ebe5d; transform: translateY(-1px); }
.btn-block { width: 100%; display: flex; }
/* ── Floating + Button ── */
.btn-quick-add-float {
  position: absolute;
  bottom: 0.6rem;
  right: 0.6rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-500);
  color: var(--primary-900);
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border: none;
  cursor: pointer;
  z-index: 3;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  opacity: 1;
  transform: scale(1);
}
.btn-quick-add-float:hover {
  background: var(--primary-600);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  transform: scale(1.1);
}
.btn-danger { background: #e53935; color: var(--white); }
.btn-danger:hover { background: #c62828; }

/* ── Navigation ── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: var(--white);
  box-shadow: 0 4px 20px rgba(196,113,124,0.1), 0 1px 0 rgba(196,113,124,0.08);
  height: var(--nav-height);
  overflow: visible;
  border: 2px solid var(--primary-500);
  transition: transform 0.32s cubic-bezier(0.4,0,0.2,1), box-shadow 0.32s ease;
}
#main-nav.nav--hidden {
  /* -110% of the bar's own height isn't enough once the bar is also inset from
     the top (e.g. the pill style's top: 0.85rem) — the leftover inset offset
     left a sliver of the bottom edge visible. Clearing by a fixed extra amount
     on top of the percentage guarantees it's fully off-screen for every style. */
  transform: translateY(calc(-100% - 2rem));
  box-shadow: none;
}
/* Push first content element down so content isn't hidden under fixed nav.
   Keeping this off <body> prevents a white gap between the nav border and the hero. */
#hero-carousel,
#page-hero,
.page-no-hero {
  margin-top: var(--nav-height);
}
.nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 1.25rem;
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.nav-logo { display: flex; align-items: center; flex: 0 0 auto; }
.nav-left { display: none; align-items: center; }
.nav-logo img { height: 54px; max-width: 420px; width: auto; object-fit: contain; }
.nav-logo-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary-800);
  letter-spacing: -0.02em;
}
.nav-links {
  display: flex; align-items: center; gap: 0.25rem;
}
.nav-link {
  color: var(--primary-700);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  transition: all var(--transition);
}
.nav-link:hover, .nav-link.active {
  color: var(--primary-800);
  background: var(--primary-100);
}
.nav-link.active { color: var(--primary-800); }
.nav-cart {
  position: relative;
  color: var(--primary-700);
  display: flex; align-items: center;
  padding: 0.4rem;
  border-radius: 50%;
  transition: background var(--transition);
}
.nav-cart:hover { background: var(--primary-100); }
.cart-badge {
  position: absolute; top: -4px; right: -4px;
  background: var(--accent-500);
  color: var(--white);
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
}
.nav-hamburger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 0.4rem;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--primary-700);
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-right {
  display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
}
.nav-close {
  display: none;
  color: var(--primary-700);
  font-size: 1.1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--primary-100);
  align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition);
}
.nav-close:hover { background: var(--primary-100); color: var(--primary-900); }

/* ════════════════════════════════════════════════════════════
   NAVBAR STYLE VARIANTS
   #main-nav gets one of: nav-style-classic | nav-style-transparent |
   nav-style-pill | nav-style-centered | nav-style-minimal
   (set dynamically by js/nav.js based on settings/business.navStyle)
   ════════════════════════════════════════════════════════════ */

/* ── Classic — this is the default look already defined above.
   No extra rules needed; nav-style-classic is the baseline. ── */

/* ── Transparent — overlays the hero, solidifies once scrolled past it ── */
#main-nav.nav-style-transparent {
  background: transparent;
  box-shadow: none;
  border-bottom: 3px solid transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease,
              transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
#main-nav.nav-style-transparent .nav-link,
#main-nav.nav-style-transparent .nav-logo-text,
#main-nav.nav-style-transparent .nav-cart,
#main-nav.nav-style-transparent .nav-account-btn,
#main-nav.nav-style-transparent .nav-account-btn svg {
  color: var(--white);
}
#main-nav.nav-style-transparent .nav-hamburger span {
  background: var(--white);
}
#main-nav.nav-style-transparent .nav-link:hover,
#main-nav.nav-style-transparent .nav-link.active {
  background: rgba(255,255,255,0.18);
  color: var(--white);
}
#main-nav.nav-style-transparent .nav-cart:hover {
  background: rgba(255,255,255,0.18);
}
/* Let the hero sit directly under the transparent bar instead of being pushed down */
#main-nav.nav-style-transparent ~ #hero-carousel,
#main-nav.nav-style-transparent ~ #page-hero {
  margin-top: 0;
}
/* Once scrolled, become a normal solid bar (reuses classic colours) */
#main-nav.nav-style-transparent.nav-scrolled {
  background: var(--white);
  box-shadow: 0 4px 20px rgba(196,113,124,0.1), 0 1px 0 rgba(196,113,124,0.08);
  border-bottom: 3px solid var(--primary-600);
}
#main-nav.nav-style-transparent.nav-scrolled .nav-link,
#main-nav.nav-style-transparent.nav-scrolled .nav-logo-text,
#main-nav.nav-style-transparent.nav-scrolled .nav-cart,
#main-nav.nav-style-transparent.nav-scrolled .nav-account-btn,
#main-nav.nav-style-transparent.nav-scrolled .nav-account-btn svg {
  color: var(--primary-700);
}
#main-nav.nav-style-transparent.nav-scrolled .nav-hamburger span {
  background: var(--primary-700);
}
#main-nav.nav-style-transparent.nav-scrolled .nav-link:hover,
#main-nav.nav-style-transparent.nav-scrolled .nav-link.active {
  background: var(--primary-100);
  color: var(--primary-800);
}
#main-nav.nav-style-transparent.nav-scrolled .nav-cart:hover {
  background: var(--primary-100);
}
/* On pages with no hero, there's nothing to overlay — fall back to solid immediately */
#main-nav.nav-style-transparent:not(:has(~ #hero-carousel)):not(:has(~ #page-hero)) {
  background: var(--white);
  box-shadow: 0 4px 20px rgba(196,113,124,0.1), 0 1px 0 rgba(196,113,124,0.08);
  border-bottom: 3px solid var(--primary-600);
}
#main-nav.nav-style-transparent:not(:has(~ #hero-carousel)):not(:has(~ #page-hero)) .nav-link,
#main-nav.nav-style-transparent:not(:has(~ #hero-carousel)):not(:has(~ #page-hero)) .nav-logo-text,
#main-nav.nav-style-transparent:not(:has(~ #hero-carousel)):not(:has(~ #page-hero)) .nav-cart,
#main-nav.nav-style-transparent:not(:has(~ #hero-carousel)):not(:has(~ #page-hero)) .nav-account-btn,
#main-nav.nav-style-transparent:not(:has(~ #hero-carousel)):not(:has(~ #page-hero)) .nav-account-btn svg {
  color: var(--primary-700);
}
#main-nav.nav-style-transparent:not(:has(~ #hero-carousel)):not(:has(~ #page-hero)) .nav-hamburger span {
  background: var(--primary-700);
}

/* ── Pill — floating, inset, rounded-full bar ── */
#main-nav.nav-style-pill {
  top: 0.85rem;
  left: 0.85rem;
  right: 0.85rem;
  height: calc(var(--nav-height) - 0.8rem);
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(255,255,255,0.5);
  background: transparent;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
}
/* Frosted-glass fill lives on a ::before instead of directly on #main-nav.
   backdrop-filter creates a new containing block for `position: fixed`
   descendants — since the mobile .nav-links drawer is a fixed-position
   child of #main-nav, putting the filter on #main-nav itself hijacked the
   drawer's positioning context and let a sliver of it leak into view even
   while "off-canvas". Keeping the filter off #main-nav avoids that. */
#main-nav.nav-style-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}
#main-nav.nav-style-pill .nav-inner {
  padding: 0 1.5rem;
  height: 100%;
  align-items: center;
}
#main-nav.nav-style-pill .nav-left,
#main-nav.nav-style-pill .nav-logo,
#main-nav.nav-style-pill .nav-right {
  height: 100%;
  align-items: center;
}
/* Keep the logo comfortably inside the shorter pill bar instead of overflowing it.
   (Fixed px, not a percentage — percentage heights through a flex ancestor chain
   are unreliable and were letting the image fall back to its full natural size.) */
#main-nav.nav-style-pill .nav-logo img {
  height: 36px;
  width: auto;
  max-height: none;
}
/* Pill floats fixed above the hero — let the hero start at y:0 like the
   transparent style does, instead of leaving a static white gap that
   scrolls away (which made it look like a "ghost" full-width bar). */
#main-nav.nav-style-pill ~ #hero-carousel,
#main-nav.nav-style-pill ~ #page-hero {
  margin-top: 0;
}
/* Pages with no hero still need clearance so content isn't hidden under the fixed pill */
#main-nav.nav-style-pill ~ .page-no-hero {
  margin-top: calc(var(--nav-height) + 0.05rem);
}

/* ── Centered — logo dead-center, links left of it, icons right ── */
#main-nav.nav-style-centered .nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: stretch;
}
#main-nav.nav-style-centered .nav-links {
  justify-self: end;
}
#main-nav.nav-style-centered .nav-logo {
  justify-self: center;
}
#main-nav.nav-style-centered .nav-right {
  justify-self: start;
}

/* ── Minimal — understated, no pill hover fills, thin underline accents ── */
#main-nav.nav-style-minimal {
  box-shadow: none;
  border-bottom: 1px solid var(--gray-200);
}
#main-nav.nav-style-minimal .nav-link {
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
  position: relative;
}
#main-nav.nav-style-minimal .nav-link::after {
  content: "";
  position: absolute;
  left: 0.7rem; right: 0.7rem; bottom: 0.1rem;
  height: 1px;
  background: var(--primary-700);
  transform: scaleX(0);
  transition: transform var(--transition);
}
#main-nav.nav-style-minimal .nav-link:hover,
#main-nav.nav-style-minimal .nav-link.active {
  background: transparent;
}
#main-nav.nav-style-minimal .nav-link:hover::after,
#main-nav.nav-style-minimal .nav-link.active::after {
  transform: scaleX(1);
}
#main-nav.nav-style-minimal .nav-cart:hover {
  background: var(--gray-100);
}

/* ── Scrolling Banner ── */
#scroll-banner {
  background: var(--primary-500);
  color: var(--primary-900);
  overflow: hidden;
  padding: 0.55rem 0;
  font-size: 0.85rem;
  font-weight: 600;
}
.banner-track {
  display: flex; align-items: center; gap: 1.5rem;
  animation: marquee 12s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.banner-item { flex-shrink: 0; }
.banner-sep { color: rgba(0,0,0,0.4); font-size: 0.7rem; }
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Hero Carousel ──
   #hero-carousel's own sizing/background/slide styles live entirely in
   hero.js (injected at render time, scoped under #hero-carousel), since
   that's the single source of truth for the carousel markup. Nothing
   carousel-specific belongs here anymore — this used to duplicate that
   block and silently lose to it on load order. */

/* ── Page Hero content styles ──
   Shared by #page-hero (below) only. #hero-carousel has its own scoped
   versions of these same class names injected by hero.js, so these
   rules never apply there. */
.slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
  z-index: 2;
}
.slide-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  width: 100%; padding: 2rem 1.5rem;
  color: var(--white);
}
.slide-headline {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--white);
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
  margin-bottom: 1rem;
  line-height: 1.15;
}
.slide-subtext {
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  color: rgba(255,255,255,0.9);
  max-width: 600px;
  margin-bottom: 1.5rem;
}

/* ── Page Hero ── */
#page-hero {
  height: 45vh; min-height: 280px; max-height: 500px;
  background-size: cover; background-position: center;
  background-color: var(--primary-500);
  position: relative; display: flex;
  border-bottom: 4px solid var(--primary-500);
}

/* ── Product Grid ── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.product-card {
  position: relative;
  background: linear-gradient(160deg, #ffffff 0%, #f7f5f0 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  transition: transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.product-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: -1;
  border-radius: calc(var(--radius-lg) + 3px);
  background: linear-gradient(
    90deg,
    var(--primary-500),
    var(--accent-500),
    var(--primary-700),
    var(--accent-500),
    var(--primary-500)
  );
  background-size: 300% 300%;
  animation: card-border-flow 14s linear infinite;
}
.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.13), 0 4px 8px rgba(0,0,0,0.07);
}
.product-card:hover::before {
  animation-duration: 6s;
}
@keyframes card-border-flow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card::before { animation: none; }
}
.product-card--skeleton::before {
  animation: none;
  background: var(--primary-500);
}
.product-img-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: visible;
  background: var(--gray-100);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.product-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
}
.product-card:hover .product-img-wrap img { transform: scale(1.06); }
.product-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gray-400);
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--primary-100) 100%);
}
.product-img-placeholder.large { min-height: 240px; }
.badge-featured {
  position: absolute; top: 0.5rem; left: 0.5rem;
  background: var(--accent-500);
  color: var(--primary-900);
  font-size: 0.65rem; font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.product-info { padding: 0.65rem 0.75rem 0.75rem; border-top: 2px solid var(--accent-500); }
.product-brand {
  font-family: var(--font-body);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-400);
  margin-bottom: 0.15rem;
}
.product-name {
  font-family: var(--font-body);
  font-size: 0.92rem; font-weight: 700;
  color: #fff; margin-bottom: 0.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  line-height: 1.3;
}
.product-price {
  font-size: 1rem; font-weight: 700;
  color: #fff; margin-bottom: 0.5rem;
}

/* ── Product Card Quick-Add Overlay ── */
.product-quick-add {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.35) 70%, transparent 100%);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0.75rem 0.6rem 0.65rem;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.product-card:hover .product-quick-add {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.btn-quick-add {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: var(--primary-500);
  color: var(--primary-900);
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 700;
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  border: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
  width: 100%;
}
.btn-quick-add:hover { background: var(--primary-600); transform: scale(1.03); }
/* On touch devices, always show the quick-add */
@media (hover: none) {
  .product-quick-add {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 80%);
  }
}

/* ── Filter Bar — Accordion ── */
#filter-bar {
  padding: 1rem 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Accordion item wrapper */
.accordion-item {
  border-bottom: 1px solid var(--primary-100);
}
.accordion-item:first-child {
  border-top: 1px solid var(--primary-100);
}

/* T1 header button */
.accordion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0.25rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-800);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--transition);
}
.accordion-head:hover { color: var(--primary-700); }
.accordion-item--open > .accordion-head,
.accordion-item--active > .accordion-head {
  color: var(--primary-700);
}
.accordion-item--active > .accordion-head {
  font-weight: 700;
}

/* ── Brand Filter Dropdown ── */
.brand-filter-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.25rem;
}
.brand-filter-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gray-600);
  white-space: nowrap;
}
.brand-filter-select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--gray-800);
  background: var(--white);
  border: 1px solid var(--primary-100);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  cursor: pointer;
  max-width: 220px;
}
.brand-filter-select:hover,
.brand-filter-select:focus {
  border-color: var(--primary-400);
  outline: none;
}

.accordion-chevron {
  font-size: 0.65rem;
  color: var(--primary-400);
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.accordion-chevron--sm { font-size: 0.55rem; }

/* T2 panel */
.accordion-panel {
  display: flex;
  flex-direction: column;
  padding: 0 0 0.5rem 0.75rem;
  gap: 0;
  animation: accordionIn 0.18s cubic-bezier(0.22,1,0.36,1) both;
}

/* T2 sub-buttons */
.accordion-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0.25rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--gray-600);
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}
.accordion-sub:hover {
  color: var(--primary-700);
  border-left-color: var(--primary-300);
  padding-left: 0.6rem;
}
.accordion-sub--active {
  color: var(--primary-800);
  font-weight: 700;
  border-left-color: var(--primary-500);
  padding-left: 0.6rem;
}

/* T3 nested panel */
.accordion-subpanel {
  display: flex;
  flex-direction: column;
  padding: 0.25rem 0 0.25rem 0.75rem;
  gap: 0;
  animation: accordionIn 0.15s cubic-bezier(0.22,1,0.36,1) both;
}

/* T3 leaf buttons */
.accordion-leaf {
  display: block;
  width: 100%;
  padding: 0.45rem 0.25rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--gray-400);
  background: none;
  border: none;
  border-left: 2px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}
.accordion-leaf:hover {
  color: var(--primary-600);
  border-left-color: var(--accent-400);
  padding-left: 0.6rem;
}
.accordion-leaf--active {
  color: var(--primary-700);
  font-weight: 700;
  border-left-color: var(--accent-500);
  padding-left: 0.6rem;
}

@keyframes accordionIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Empty State ── */
.empty-state {
  text-align: center; padding: 4rem 1rem;
  grid-column: 1 / -1;
}
.empty-icon { font-size: 3rem; margin-bottom: 1rem; }
.empty-state p { color: var(--gray-400); font-size: 1rem; }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease;
  backdrop-filter: blur(4px);
  overflow-y: auto;
}
.modal-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 680px;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  animation: slideUp 0.25s ease;
}
.modal-close {
  position: absolute; top: 1rem; right: 1rem; z-index: 10;
  width: 32px; height: 32px;
  background: var(--gray-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem; color: var(--gray-600);
  transition: all var(--transition);
}
.modal-close:hover { background: var(--gray-200); }
.modal-body {
  display: grid; grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
}
.modal-gallery {}
.modal-main-img img, .modal-main-img video {
  width: 100%; border-radius: var(--radius-md);
  aspect-ratio: 1; object-fit: contain;
  background: #f8f8f8;
}
.modal-thumbs {
  display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;
}
.modal-thumb {
  width: 60px; height: 60px; border-radius: var(--radius-sm);
  object-fit: cover; cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--transition);
}
.modal-thumb.active { border-color: var(--primary-600); }
.video-thumb {
  background: var(--primary-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-700); font-size: 1.2rem;
  border-radius: var(--radius-sm);
}
.modal-details { display: flex; flex-direction: column; gap: 0.75rem; }
.modal-title { font-size: 1.4rem; color: var(--primary-900); }
.modal-brand {
  font-family: var(--font-body);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gray-600);
  margin-top: -0.6rem;
}
.modal-price { font-size: 1.5rem; font-weight: 700; color: var(--primary-600); }
.modal-desc { color: var(--gray-600); font-size: 0.95rem; line-height: 1.7; }

/* ── Modal Variant Selectors ── */
.modal-variants {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.variant-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gray-400);
}
.variant-selected-label {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gray-800);
  margin-left: 0.3rem;
}

/* Size buttons */
.variant-size-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.variant-size-btn {
  min-width: 44px;
  height: 38px;
  padding: 0 0.85rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-800);
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.variant-size-btn:hover {
  border-color: var(--primary-500);
  color: var(--primary-700);
}
.variant-size-btn.active {
  border-color: var(--primary-600);
  background: var(--primary-100);
  color: var(--primary-800);
  box-shadow: 0 0 0 1.5px var(--primary-600);
}

/* Color swatches */
.variant-color-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.variant-color-swatch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 38px;
  padding: 0 0.85rem 0 0.5rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  color: var(--gray-800);
  font-family: var(--font-body);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.variant-color-swatch:hover {
  border-color: var(--primary-500);
}
.variant-color-swatch.active {
  border-color: var(--primary-600);
  background: var(--primary-50);
  box-shadow: 0 0 0 1.5px var(--primary-600);
}
.variant-color-swatch::before {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--swatch-color, #d1d5db);
  border: 1.5px solid rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.variant-color-swatch[data-color="Gold"]::before {
  background: linear-gradient(135deg, #f9e7a1 0%, #d4af37 45%, #a8781f 100%);
}
.variant-color-swatch[data-color="Silver"]::before {
  background: linear-gradient(135deg, #f5f5f5 0%, #c0c0c0 50%, #9a9a9a 100%);
}

/* Stock indicators */
.modal-stock {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  display: inline-block;
  width: fit-content;
}
.modal-stock--low  { background: #fff7ed; color: #c2410c; }
.modal-stock--out  { background: var(--gray-100); color: var(--gray-400); }
.modal-stock--ok   { background: #f0fdf4; color: #15803d; }

/* Variant error message */
.modal-variant-error {
  font-size: 0.82rem;
  color: #e53935;
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  background: #fff5f5;
  border-radius: var(--radius-sm);
  border-left: 3px solid #e53935;
}

/* Card variant hints */
.product-card-variants {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.variant-hint-sizes {
  font-size: 0.72rem;
  color: var(--gray-400);
  letter-spacing: 0.02em;
}
.variant-hint-colors {
  display: flex;
  gap: 0.25rem;
  align-items: center;
}
.variant-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.1);
  display: inline-block;
}
.variant-color-dot[data-color="Gold"] {
  background: linear-gradient(135deg, #f9e7a1 0%, #d4af37 45%, #a8781f 100%) !important;
}
.variant-color-dot[data-color="Silver"] {
  background: linear-gradient(135deg, #f5f5f5 0%, #c0c0c0 50%, #9a9a9a 100%) !important;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideUpSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Cart Toast ── */
.cart-toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--primary-500);
  color: var(--primary-900);
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem; font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 3000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  white-space: nowrap;
}
.cart-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Cart Page ── */
.cart-page { padding: 2rem 0 4rem; min-height: 60vh; }
.cart-header { margin-bottom: 2rem; }
.cart-header h1 { color: var(--primary-800); }
.cart-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.cart-items { display: flex; flex-direction: column; gap: 1rem; }
.cart-item {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--primary-600);
  padding: 1rem;
  display: flex; gap: 1rem; align-items: flex-start;
  box-shadow: var(--shadow-sm);
  min-width: 0; overflow: hidden;
}
.cart-item-img {
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover; flex-shrink: 0;
  background: var(--gray-100);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.2rem; overflow-wrap: break-word; word-break: break-word; }
.cart-item-price { font-size: 0.9rem; color: var(--primary-600); font-weight: 600; }
.qty-control { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.qty-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gray-100);
  font-size: 1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.qty-btn:hover { background: var(--primary-100); }
.qty-num { font-weight: 700; font-size: 0.95rem; min-width: 24px; text-align: center; }
.cart-remove { color: #e53935; font-size: 0.8rem; font-weight: 600; margin-top: 0.3rem; display: inline-block; }
.cart-remove:hover { text-decoration: underline; }
.cart-summary {
  background: var(--white);
  border-radius: var(--radius-md);
  border: 2px solid var(--primary-500);
  padding: 1.25rem 1rem;
  box-shadow: var(--shadow-sm);
  height: fit-content;
  min-width: 0; width: 100%;
}
.cart-summary h2 { font-size: 1.2rem; color: var(--primary-800); margin-bottom: 1.25rem; }
.summary-row { display: flex; justify-content: space-between; margin-bottom: 0.75rem; font-size: 0.95rem; }
.summary-row.total { font-weight: 700; font-size: 1.15rem; color: var(--primary-800); padding-top: 0.75rem; border-top: 2px solid var(--gray-100); }
.empty-cart { text-align: center; padding: 5rem 1rem; }
.empty-cart .empty-icon { font-size: 4rem; margin-bottom: 1rem; }
.empty-cart h2 { color: var(--primary-800); margin-bottom: 0.5rem; }
.empty-cart p { margin-bottom: 1.5rem; }

/* ── Checkout Modal ── */
.checkout-modal-box {
  max-width: 520px;
  padding: 2rem;
}
.checkout-modal-box h2 {
  font-size: 1.5rem; color: var(--primary-800);
  margin-bottom: 1.5rem; text-align: center;
}
.checkout-steps { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }
.checkout-step { display: flex; gap: 0.75rem; align-items: flex-start; }
.step-num {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary-700);
  color: var(--white);
  font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.checkout-step p { font-size: 0.9rem; color: var(--gray-600); padding-top: 0.3rem; }

/* ── Footer ── */
#main-footer {
  background: var(--primary-500);
  color: var(--primary-900);
  padding-top: 3rem;
}
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 1.25rem 2.5rem;
  display: grid; grid-template-columns: 1fr;
  gap: 2rem;
}
.footer-logo-text {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 700;
  color: var(--primary-900);
  margin-bottom: 0.5rem;
}
.footer-tagline { color: var(--primary-900); opacity: 0.85; font-size: 0.9rem; margin-bottom: 1rem; }
.footer-socials { display: flex; gap: 0.75rem; }
.footer-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary-900);
  transition: all var(--transition);
}
.footer-socials a:hover { background: var(--accent-500); color: var(--primary-900); }
.footer-col h4 {
  font-family: var(--font-display);
  font-size: 1rem; color: var(--primary-900);
  margin-bottom: 0.75rem;
}
.footer-col p { font-size: 0.88rem; color: var(--primary-900); opacity: 0.85; margin-bottom: 0.25rem; }
.footer-col a { color: var(--primary-900); opacity: 0.85; transition: color var(--transition); }
.footer-col a:hover { color: var(--accent-500); opacity: 1; }
.footer-bottom {
  border-top: 1px solid rgba(0,0,0,0.15);
  padding: 1.25rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--primary-900);
  max-width: 1200px; margin: 0 auto;
}
.footer-bottom p { color: var(--primary-900); }

/* ── Featured Section ── */
.featured-section { padding: 3rem 0; }
.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1rem;
}

/* ── Responsive — Tablet ── */
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.25rem; }
  .featured-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .modal-body { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .cart-item-img { width: 90px; height: 90px; }
  .cart-summary { padding: 1.5rem; }
}

/* ── Mobile — Cart specific ── */
@media (max-width: 479px) {
  /* Modal — bottom sheet on mobile */
  .modal-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    overflow-y: auto;
  }
  .modal-box {
    width: 100%;
    max-width: 100%;
    max-height: 95vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: slideUpSheet 0.3s cubic-bezier(0.32,0.72,0,1);
  }
  /* Drag handle */
  .modal-box::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    background: var(--gray-200);
    border-radius: 2px;
    margin: 0.75rem auto 0;
  }
  .modal-body {
    padding: 1rem 1rem 1.5rem;
    gap: 1rem;
  }
  .modal-close {
    top: 0.75rem; right: 0.75rem;
  }
  /* Image: smaller, don't dominate the screen */
  .modal-main-img img,
  .modal-main-img video {
    aspect-ratio: 4 / 3;
    max-height: 240px;
    object-fit: contain;
    background: #f8f8f8;
  }
  .modal-thumb {
    width: 48px; height: 48px;
  }
  .modal-title { font-size: 1.15rem; }
  .modal-price { font-size: 1.25rem; }
  .modal-desc  { font-size: 0.88rem; }
  .btn-add-cart-modal { font-size: 0.95rem; padding: 0.85rem; }

  .cart-page { padding: 1.25rem 0 3rem; }
  .cart-item { padding: 0.75rem; gap: 0.75rem; }
  .cart-item-img { width: 60px; height: 60px; flex-shrink: 0; }
  .cart-item-name { font-size: 0.88rem; }
  .cart-item-price { font-size: 0.85rem; }
  .cart-summary { padding: 1rem 0.875rem; }
  .coupon-input { font-size: 0.875rem; }
  .coupon-apply-btn { width: 100%; }
  .coupon-input-row { flex-direction: column; }
  .summary-row { font-size: 0.875rem; }
  .summary-row.total { font-size: 1rem; }
}

/* ── Responsive — Desktop ── */
@media (min-width: 1024px) {
  .nav-hamburger, .nav-close { display: none; }
  .nav-links { display: flex !important; position: static !important; background: none !important; flex-direction: row !important; padding: 0 !important; width: auto !important; height: auto !important; }
  /* Pill nav: stop stretching edge-to-edge — shrink-wrap the whole
     bar around the logo, links, and icons, packed tightly together
     with the logo right beside "Home" and the icons right beside
     "Policies", instead of spread apart with dead space. */
  #main-nav.nav-style-pill {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
  }
  #main-nav.nav-style-pill .nav-inner {
    max-width: none;
    width: fit-content;
    justify-content: flex-start;
    gap: 1.75rem;
  }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.5rem; }
  .featured-grid { grid-template-columns: repeat(4, 1fr); }
  .cart-grid { grid-template-columns: 1fr 340px; }
  .footer-inner { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

/* ── Mobile Nav ── */
@media (max-width: 1023px) {
  #main-nav { height: var(--nav-height-mobile); }
  #hero-carousel,
  #page-hero,
  .page-no-hero { margin-top: var(--nav-height-mobile); }
  .nav-logo img { height: 52px; }
  .nav-hamburger { display: flex; }
  .nav-left { display: flex; }
  .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0; padding: 0 0.75rem; }
  .nav-logo { justify-content: center; }
  .nav-right { justify-content: flex-end; }
  .nav-links-desktop { display: none; }
  .nav-logo-text {
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55vw;
  }

  .nav-links {
    position: fixed; inset: 0 0 0 25%;
    background: var(--white);
    border-left: 3px solid var(--primary-500);
    flex-direction: column;
    gap: 0;
    padding: 0;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    z-index: 1100;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(255,110,199,0.18);
  }
  .nav-links.open { transform: translateX(0); }

  /* Drawer header */
  .nav-links::before {
    content: '';
    display: block;
    height: 4px;
    background: var(--accent-500);
    flex-shrink: 0;
  }

  .nav-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.25rem 1rem;
    border-bottom: 1px solid var(--primary-100);
    flex-shrink: 0;
  }
  .nav-drawer-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-800);
    letter-spacing: -0.01em;
  }
  .nav-close { display: flex; }

  /* Nav links */
  .nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    width: 100%;
    gap: 0.85rem;
    padding: 0.9rem 1.25rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-800);
    border-radius: 0;
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--primary-100);
    transition: all var(--transition);
  }
  .nav-link .nav-icon {
    font-size: 1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity var(--transition);
  }
  .nav-link:hover {
    color: var(--primary-800);
    background: var(--primary-50);
    border-left-color: var(--primary-500);
  }
  .nav-link:hover .nav-icon { opacity: 1; }
  .nav-link.active {
    color: var(--primary-800);
    background: var(--primary-100);
    border-left-color: var(--primary-600);
  }
  .nav-link.active .nav-icon { opacity: 1; }

  /* Drawer footer actions */
  .nav-drawer-footer {
    margin-top: auto;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--primary-100);
    display: flex;
    gap: 0.6rem;
  }
  .nav-drawer-footer .btn {
    flex: 1;
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
    justify-content: center;
  }
}

/* ── Utility ── */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }

/* ============================================================
   SKELETON SCREENS & CARD ENTRANCE ANIMATIONS
   ============================================================ */

/* ── Shimmer keyframe ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ── Skeleton base block ── */
.skeleton-block {
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--gray-100) 25%,
    var(--gray-200) 50%,
    var(--gray-100) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* ── Skeleton card shape — mirrors real .product-card exactly ── */
.product-card--skeleton {
  pointer-events: none;
  /* Suppress the hover lift on skeleton cards */
  cursor: default;
}
.product-card--skeleton:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
}

/* Fill the image area (aspect-ratio: 1 inherited from .product-img-wrap) */
.skeleton-img {
  width: 100%;
  height: 100%;
  border-radius: calc(var(--radius-lg) - 2px) calc(var(--radius-lg) - 2px) 0 0;
}

/* Name line — ~70% width */
.skeleton-name {
  height: 0.82rem;
  width: 70%;
  margin-bottom: 0.55rem;
}

/* Price line — ~45% width */
.skeleton-price {
  height: 1rem;
  width: 45%;
  margin-bottom: 0.75rem;
}

/* Button — full width, matches .btn-add-cart height */
.skeleton-btn {
  height: 2rem;
  width: 100%;
  border-radius: var(--radius-pill);
}

/* ── Staggered card entrance ── */

/*
  Cards start invisible and translated down.
  The IntersectionObserver adds .product-card--visible when
  the card enters the viewport, triggering the transition.
  --card-index is set inline by renderProductGrid() so the
  stagger cap (12 * 80ms = 960ms max) keeps late cards snappy.
*/
.product-card--animate {
  opacity: 0;
  transform: translateY(20px);
  /* No transition yet — wait until visible so off-screen cards
     don't animate before the observer fires. */
}

.product-card--animate.product-card--visible {
  animation: cardEntrance 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* Stagger: clamp to 12 cards max so deep-scroll cards don't wait forever */
  animation-delay: calc(min(var(--card-index, 0), 12) * 80ms);
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* After animation completes, ensure the card is fully visible
   (handles cases where animation-fill-mode: both isn't enough
   in some WebKit versions) */
.product-card--animate.product-card--visible {
  /* keep final state after animation */
  animation-fill-mode: both;
}

/* ============================================================
   PRODUCT CARD — DUAL IMAGE HOVER / TOUCH REVEAL
   ============================================================ */

/* Both images sit stacked in the same grid cell */
.product-img-wrap {
  display: grid;
}
.product-img-primary,
.product-img-alt {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Alt image hidden by default */
.product-img-alt {
  opacity: 0;
}

/* ── Desktop: CSS-only hover swap ── */
.product-card--has-alt:hover .product-img-primary {
  opacity: 0;
}
.product-card--has-alt:hover .product-img-alt {
  opacity: 1;
}

/* ── Mobile: JS-driven class swap ── */
.product-card--show-alt .product-img-primary {
  opacity: 0;
}
.product-card--show-alt .product-img-alt {
  opacity: 1;
}

/* ── Dot indicators ── */
.product-img-dots {
  position: absolute;
  bottom: 0.45rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  z-index: 2;
  pointer-events: none;
}
.product-img-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.3s ease, transform 0.3s ease;
}
.product-img-dot--active {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.2);
}

/* Swap active dot on hover (desktop) */
.product-card--has-alt:hover .product-img-dot--active,
.product-card--show-alt   .product-img-dot--active {
  background: rgba(255, 255, 255, 0.45);
  transform: scale(1);
}
.product-card--has-alt:hover .product-img-dot:last-child,
.product-card--show-alt   .product-img-dot:last-child {
  background: rgba(255, 255, 255, 0.95);
  transform: scale(1.2);
}

/* ── Sale Badge & Price ── */
.badge-sale {
  position: absolute; top: 0.5rem; right: 0.5rem;
  background: #e53935;
  color: var(--white);
  font-size: 0.65rem; font-weight: 800;
  padding: 0.22rem 0.5rem;
  border-radius: var(--radius-pill);
  text-transform: uppercase; letter-spacing: 0.04em;
  z-index: 2;
}
.badge-low-stock,
.badge-out-of-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.35rem;
}
.badge-low-stock::before,
.badge-out-of-stock::before {
  content: "●";
  font-size: 0.5rem;
}
.badge-low-stock {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid #fcd34d;
}
.badge-low-stock::before { color: #f59e0b; }
.badge-out-of-stock {
  background: #fff0f0;
  color: #c0392b;
  border: 1px solid #fca5a5;
}
.product-price-wrap { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.35rem; flex-wrap: wrap; }
.product-price { margin-bottom: 0; }
.product-price--sale { color: #e53935; }
.product-price-original { font-size: 0.82rem; color: var(--gray-400); text-decoration: line-through; font-weight: 500; }
.cart-item-price { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
.cart-item-original { font-size: 0.8rem; color: var(--gray-400); text-decoration: line-through; }

/* ── Coupon Section (Cart) ── */
.coupon-section { margin: 0.75rem 0; padding-top: 0.75rem; border-top: 1px solid var(--gray-100); }
.coupon-input-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.coupon-input {
  flex: 1; padding: 0.6rem 0.9rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 0.9rem;
  color: var(--gray-800); background: var(--white);
  outline: none; transition: border-color var(--transition);
  text-transform: uppercase;
}
.coupon-input:focus { border-color: var(--primary-500); }
.coupon-apply-btn { flex-shrink: 0; padding: 0.6rem 1.1rem; font-size: 0.85rem; }
.coupon-feedback { font-size: 0.8rem; margin-top: 0.4rem; min-height: 1.1rem; }
.coupon-feedback--error { color: #e53935; }
.coupon-feedback--success { color: #16a34a; font-weight: 600; }
.coupon-applied {
  display: flex; align-items: center; justify-content: space-between;
  background: #f0fdf4; border: 1.5px solid #86efac;
  border-radius: var(--radius-pill); padding: 0.45rem 0.75rem;
  margin-top: 0.4rem;
}
.coupon-applied-text { font-size: 0.82rem; font-weight: 600; color: #15803d; }
.coupon-remove-btn {
  background: none; border: none; color: #9ca3af;
  font-size: 0.85rem; cursor: pointer; padding: 0 0.2rem;
  transition: color var(--transition);
}
.coupon-remove-btn:hover { color: #e53935; }
.discount-row { color: #16a34a; }

/* ── AI Recommendations ──────────────────────────────────────── */
.ai-rec-section {
  margin: 1.25rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}

.ai-rec-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.75rem;
}

/* Loading dots */
.ai-rec-loading {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0.5rem 0;
}

.ai-rec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d1b6c8;
  animation: ai-rec-pulse 1.2s ease-in-out infinite;
}

.ai-rec-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-rec-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes ai-rec-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50%       { opacity: 1;   transform: scale(1); }
}

/* Grid of cards */
.ai-rec-grid {
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}
.ai-rec-grid::-webkit-scrollbar { display: none; }

/* Mini card */
.ai-rec-card {
  flex: 0 0 100px;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--primary-100);
  background: #fff;
  transition: border-color 0.2s, transform 0.2s;
  text-align: center;
}

.ai-rec-card:hover {
  border-color: var(--primary-500);
  transform: translateY(-2px);
}

.ai-rec-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--primary-50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-rec-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ai-rec-img-placeholder {
  font-size: 1.5rem;
}

.ai-rec-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #2d2d2d;
  padding: 0.3rem 0.4rem 0.1rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ai-rec-price {
  font-size: 0.68rem;
  color: var(--primary-600);
  font-weight: 700;
  padding: 0 0.4rem 0.4rem;
}

/* ── Share button (storefront modal) ─────────────────────────── */
.btn-share-product {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.6rem;
  width: 100%;
  justify-content: center;
  padding: 0.55rem 1rem;
  background: none;
  border: 1.5px solid var(--primary-200, var(--primary-100));
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--primary-600);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-share-product:hover {
  background: var(--primary-50);
  border-color: var(--primary-500);
}

/* ── Account icon in nav ──────────────────────────────────── */
.nav-account-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: inherit;
  padding: 0 0.25rem;
  margin-right: 0.25rem;
}
.nav-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-400));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Account icon in nav ──────────────────────────────────── */
.nav-account-btn {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: inherit;
  padding: 0 0.25rem;
  margin-right: 0.25rem;
}
.nav-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-600), var(--primary-400));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Map section (renderMap in map.js) ── */
.map-section-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.map-section-grid.has-info {
  grid-template-columns: 1.6fr 1fr;
  align-items: stretch;
}
@media (max-width: 720px) {
  .map-section-grid.has-info { grid-template-columns: 1fr; }
}

.map-border-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.map-border-inner {
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}
.map-border-inner iframe { display: block; }

.map-pin-badge {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  background: var(--white);
  color: var(--primary-800);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.map-info-card {
  background: var(--off-white);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
}
.map-info-card h3 {
  color: var(--primary-800);
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
}
.map-info-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--gray-600);
}
.map-info-icon { flex-shrink: 0; }
.map-directions-btn { align-self: flex-start; margin-top: 0.4rem; }