/* Brand variables — swap these for a tenant whose look/feel should differ from the default.
   2026-10-08 (direct user request: "use Green and Blue .. more Modern"): moved off the coral/
   rainbow palette onto a single cohesive blue+green family — one primary blue (CTAs, prices,
   links) and --accent-1..4 varying only within blue/green/teal, so category pills and
   decorative touches read as one modern palette instead of a scattered rainbow. */
:root {
  --brand-color: #2563eb;
  --brand-color-dark: #1d4ed8;
  --brand-ink: #0f172a;
  --brand-bg: #f5faf9;
  --accent-1: #38bdf8; /* sky blue */
  --accent-2: #10b981; /* emerald */
  --accent-3: #0ea5e9; /* cyan blue */
  --accent-4: #22c55e; /* green */
  --accent-green: #16a34a;
  --accent-blue: #2563eb;
  /* Playful rounded display stack for the Home page's headlines (2026-10-07 from-scratch
     redesign) — system-font only, no new network dependency; wherever a rounded face isn't
     installed this just falls back to the same body stack already used site-wide. */
  --font-display: ui-rounded, "SF Pro Rounded", "Baloo 2", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--brand-ink);
  background: var(--brand-bg);
}
a { color: inherit; text-decoration: none; }

/* Two-row header (direct user request: "menu buttons below the logo, like most websites have"):
   .store-nav-top (logo/back/search/cart/hamburger) stacks above .store-nav-links (the real,
   always-VISIBLE primary nav links — not hidden behind the hamburger). On screens narrow enough
   that a full link row won't fit, .store-nav-links hides and the hamburger takes over instead —
   same real responsive split nidcrm.com itself uses (checked via screenshot: full link row on
   desktop, hamburger only on mobile), just applied here as "visible row vs. hamburger" instead
   of "visible row vs. hidden". */
.store-nav {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
  position: sticky;
  top: 0;
  z-index: 10;
}
.store-nav-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
}
/* Logo left + bigger (direct user request): brand no longer centers (flex:1/justify-center
   removed) — it sits first, left-aligned, and margin-right:auto pushes every icon/button after
   it to the right edge as one group, same "logo far left, actions far right" layout as
   hotelexcella.in and NIDCRM OS's own dashboard topbar. */
.store-nav .brand {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--brand-color-dark);
}
/* Logo slot — direct user request ("keep space for Logo" / "increase the size"), same pattern as
   NIDCRM OS's own dashboard sidebar brand slot (dashboard/js/shell.js's loadBranding(),
   dashboard/css/style.css's .brand-logo): an <img> at a fixed max-height when the tenant has set
   logo_url via the Developer Hub, replacing the text brand name entirely — never shown alongside
   invented placeholder art. brand.js wires this in; empty/hidden until a real logo_url exists. */
.store-nav .brand-logo { max-height: 80px; max-width: 320px; display: none; }

/* Back + Search — direct user request ("add back button" / "few more button"): small neutral
   bordered circle icon buttons, deliberately NOT brand-color-filled like Cart/Menu, so the nav
   reads as "two primary pink actions (Cart, Menu) + a couple of quieter utility icons" rather
   than a row of identical pink blobs. Back uses real browser history (never a fake "always go to
   home" link) — on a page reached directly with no history it's a harmless no-op, same as any
   browser's own back button in that situation. */
.nav-icon-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--brand-ink);
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 150ms cubic-bezier(0.4,0,0.2,1), background-color 150ms cubic-bezier(0.4,0,0.2,1);
}
.nav-icon-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.nav-icon-btn:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 1px; }

.store-nav .cart-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--brand-color);
  color: #fff;
}
.store-nav .cart-link #cart-count {
  background: #fff;
  color: var(--brand-color-dark);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 5px;
}

/* Visible nav-link row, below the logo row — the primary destinations (Search/Cart stay as icons
   in the top row; policy pages stay footer-only), centered, shown only once there's real room
   for a full horizontal row. The hamburger stays exactly as it was alongside it (direct user
   request: "keep previous Right side drop down also") — the two are NOT exclusive here, a wide
   screen shows both the centered link row and the top-right hamburger/dropdown at once. */
.store-nav-links {
  display: none;
  justify-content: center;
  gap: 28px;
  padding: 0 24px 12px;
  margin-top: -2px;
}
.store-nav-links a { font-weight: 600; font-size: 14px; padding: 6px 2px; white-space: nowrap; border-bottom: 2px solid transparent; }
.store-nav-links a:hover { color: var(--brand-color-dark); }
.store-nav-links a[aria-current="page"] { color: var(--brand-color-dark); border-bottom-color: var(--brand-color); }
@media (min-width: 860px) {
  .store-nav-links { display: flex; }
}

/* Menu button — direct user request ("bring menu button like we have in NIDCRM.com"): nidcrm.com's
   own hamburger is a plain minimal icon (thin lines, no filled background/circle/border) — not a
   filled color block. Restyled to match: transparent button, no border/shadow, just the three
   bars, same footprint/behavior (aria-expanded X-morph, dropdown unchanged) as before. */
.menu-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  flex-shrink: 0;
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1);
}
.menu-toggle:hover { background: #f1f5f9; }
.menu-toggle:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 2px; }
.menu-toggle span { width: 18px; height: 2px; background: var(--brand-ink); border-radius: 2px; transition: transform 150ms ease, opacity 150ms ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Bug found via a real screenshot (2026-10-07): an unconditional `display: flex` below beats the
   browser's default `[hidden] { display: none }` UA rule, so the dropdown rendered open on every
   page load regardless of the `hidden` attribute menu.js sets/clears — the toggle itself worked
   (hidden was true/false correctly), only the CSS ignored it. This rule must stay ABOVE/more
   specific than `.menu-dropdown`'s own `display: flex` so `[hidden]` wins while present. */
.menu-dropdown[hidden] { display: none; }
.menu-dropdown {
  position: absolute;
  top: 100%;
  right: 16px;
  margin-top: 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 2px 6px -2px rgba(15,23,42,0.10), 0 14px 28px -12px rgba(15,23,42,0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 20;
  transform-origin: top right;
  animation: menu-dropdown-in 220ms cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes menu-dropdown-in {
  from { opacity: 0; transform: scale(0.96) translateY(-4px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.menu-dropdown a {
  padding: 9px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  min-height: 40px;
  display: flex;
  align-items: center;
  transition: background-color 150ms cubic-bezier(0.4,0,0.2,1);
}
.menu-dropdown a:hover { background: #f1f5f9; }
.menu-dropdown a[aria-current="page"] { color: var(--brand-color-dark); }
/* Redesigned dropdown (direct user request): grouped sections instead of one flat 11-item list —
   a divider between "shop" links and "info/legal" links, and each link gets a small leading
   icon (plain emoji, no icon font dependency) for faster scanning. */
.menu-dropdown .menu-divider { height: 1px; background: #eee; margin: 6px 8px; }

.store-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px;
}

#brand-tagline {
  display: none;
  text-align: center;
  color: #6b6b6b;
  font-size: 15px;
  margin: 0 0 24px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}
.product-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product-card {
  position: relative;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.product-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateY(-2px); }
.product-card:focus-within { outline: 2px solid var(--brand-color); outline-offset: 2px; }
.product-card .card-link { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.product-card .quick-view-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 4px 10px -4px rgba(26,26,26,0.3);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease, background-color 150ms ease;
  z-index: 2;
}
.product-card:hover .quick-view-btn,
.product-card:focus-within .quick-view-btn { opacity: 1; transform: none; }
.product-card .quick-view-btn:hover { background: var(--brand-color); color: #fff; }
.product-card .quick-view-btn:focus-visible { opacity: 1; transform: none; outline: 2px solid var(--brand-color); outline-offset: 2px; }
@media (hover: none) {
  /* No hover on touch — the button must stay visible, not depend on a hover state that never fires. */
  .product-card .quick-view-btn { opacity: 1; transform: none; }
}
.product-card .thumb {
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
.product-card .thumb.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .body { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.product-card .name { font-weight: 600; font-size: 15px; }
.product-card .price { font-weight: 700; color: var(--brand-color-dark); }
.product-card .stock-note { font-size: 12px; color: #b45309; }

.badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 1;
}
.badge-out-of-stock { background: rgba(26,26,26,0.85); color: #fff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  background: var(--brand-color);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-align: center;
}
.btn:hover { background: var(--brand-color-dark); }
.btn:focus-visible { outline: 2px solid var(--brand-color-dark); outline-offset: 2px; }
.btn:disabled { background: #ccc; cursor: not-allowed; }
.btn.secondary { background: #fff; color: var(--brand-ink); border: 1px solid #ddd; }
.btn.secondary:hover { background: #f5f5f5; }

.qty-control { display: flex; align-items: center; gap: 8px; }
.qty-control button {
  width: 40px; height: 40px; border-radius: 6px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-size: 16px;
}
.qty-control button:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 1px; }

.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.product-detail .title { font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.product-detail .price { font-size: 20px; font-weight: 700; margin-bottom: 16px; color: var(--brand-color-dark); }
.product-detail .description { color: #444; line-height: 1.6; margin-bottom: 20px; }

.cart-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #eee;
  gap: 12px;
}
.cart-line .name { font-weight: 600; }
.cart-line .remove { color: #b91c1c; font-size: 13px; cursor: pointer; background: none; border: none; padding: 0; }

.cart-summary {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 2px solid var(--brand-color);
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 18px;
}

.form-field { margin-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }
.form-field label { font-size: 13px; font-weight: 600; }
.form-field input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
}
.form-field input:focus { outline: none; border-color: var(--brand-color); }

.status-line { margin-top: 10px; font-size: 14px; }
.status-line.error { color: #b91c1c; }
.status-line.ok { color: #15803d; }

.empty-state { text-align: center; color: #777; padding: 60px 20px; }

.qr-block { text-align: center; padding: 20px; background: #fff; border: 1px solid #eee; border-radius: 12px; }
.qr-block img { width: 220px; height: 220px; }

/* Hero — index.html only, built from real /store/info data (name/tagline), never invented copy.
   Soft multi-color wash (not a single flat tint) echoing the accent palette, playful but kept
   pale enough that dark hero text/buttons still read clearly on top. */
.hero {
  text-align: center;
  padding: 56px 20px 40px;
  margin: -24px -24px 32px;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent-1) 18%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent-4) 16%, transparent) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--accent-3) 14%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, #fff 0%, var(--brand-bg) 100%);
  border-bottom: 1px solid #eee;
}
.hero h1 { font-size: 32px; margin: 0 0 10px; color: var(--brand-color-dark); }
.hero p { font-size: 16px; color: #6b6b6b; margin: 0 0 20px; max-width: 480px; margin-left: auto; margin-right: auto; }

/* Category pills — derived client-side from the already-fetched product list's `categories`
   field, no extra backend call. Horizontal scroll on mobile instead of a hamburger drawer: this
   is a single-page catalog, not a multi-level nav. Direct user request ("make menu button
   neat"): edge fade masks signal there's more to scroll (a bare cut-off row read as unfinished),
   and each pill cycles through the accent palette instead of one flat color, so the row itself
   reads as the colorful, playful "menu" for the site.  */
/* Wraps the Category pill row + the Age dropdown (direct user request: "when particular age is
   selected from Dropdown, only that to appear") side by side on wide screens, stacked on
   narrow ones — the dropdown never fights the pill row's own horizontal scroll/fade mask. */
.catalog-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.catalog-filters .category-row { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.age-filter {
  flex: 0 0 auto;
  padding: 9px 14px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.age-filter:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 1px; }

.category-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 2px 18px;
  margin: 0 -4px 8px;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.category-pill {
  flex: 0 0 auto;
  padding: 9px 18px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--pill-color, #ddd);
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  color: var(--pill-color, var(--brand-ink));
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 150ms ease, color 150ms ease;
}
/* First pill ("All") always uses the primary brand color; the rest cycle through the accent
   palette so the row itself feels like a colorful menu rather than a flat filter list. */
.category-pill:first-child { --pill-color: var(--brand-color); }
.category-pill:nth-child(4n+2) { --pill-color: var(--accent-1); }
.category-pill:nth-child(4n+3) { --pill-color: var(--accent-2); }
.category-pill:nth-child(4n+4) { --pill-color: var(--accent-3); }
.category-pill:nth-child(4n+5) { --pill-color: var(--accent-4); }
.category-pill:hover { background: color-mix(in srgb, var(--pill-color, #ddd) 10%, #fff); }
.category-pill:focus-visible { outline: 2px solid var(--pill-color, var(--brand-color)); outline-offset: 1px; }
.category-pill[aria-pressed="true"] { background: var(--pill-color, var(--brand-color)); border-color: var(--pill-color, var(--brand-color)); color: #fff; }

/* Breadcrumbs — product.html, built from the product's own category + name (real data). */
.breadcrumbs { font-size: 13px; color: #888; margin-bottom: 16px; }
.breadcrumbs a:hover { color: var(--brand-color-dark); }
.breadcrumbs .sep { margin: 0 6px; }

/* Gallery thumbnail strip — only shown when a product has more than one photo. */
.gallery-main { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #f0f0f0; margin-bottom: 10px; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery-thumbs img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px; cursor: pointer;
  border: 2px solid transparent; opacity: 0.7;
}
.gallery-thumbs img:hover, .gallery-thumbs img:focus-visible { opacity: 1; }
.gallery-thumbs img.active { border-color: var(--brand-color); opacity: 1; }

/* Age badge + Size Chart link (direct user request: "so customers can choose right products"). */
.age-sizechart-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.age-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-color-dark);
  background: color-mix(in srgb, var(--brand-color) 10%, #fff);
  padding: 4px 10px;
  border-radius: 999px;
}
.size-chart-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-color-dark);
  text-decoration: underline;
}

/* Trust line — one honest, verified fact (fabric/wash), not a generic invented badge row. */
.trust-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
  margin: 14px 0;
  padding: 10px 12px;
  background: #faf6f3;
  border-radius: 8px;
}

/* Toast — add-to-cart confirmation, replaces a plain inline status line so the
   customer gets real-time feedback without navigating away (product-details.md's
   "stay on product page, show success feedback" pattern). */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--brand-ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }

/* Quick-view panel — shared by the home bento grid and the full catalog grid
   (js/quickview.js). Slides in from the right over a dim overlay; markup is injected once
   into <body>, not duplicated per card. */
.quickview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,0.4);
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 150;
}
.quickview-overlay.visible { opacity: 1; }
.quickview-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(380px, 100vw);
  background: #fff;
  box-shadow: -12px 0 32px -16px rgba(26,26,26,0.35);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.16,1,0.3,1);
  z-index: 151;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.quickview-panel.visible { transform: translateX(0); }
.quickview-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 4px 10px -4px rgba(26,26,26,0.3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}
.quickview-photo {
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 13px;
  flex-shrink: 0;
}
.quickview-photo.loading {
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
.quickview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quickview-body { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.quickview-name { font-size: 18px; font-weight: 700; }
.quickview-price { font-size: 17px; font-weight: 700; color: var(--brand-color-dark); }
/* :not([hidden]) — same reasoning as .menu-dropdown[hidden] above: an unconditional
   `display: inline-block` here would beat the browser's default [hidden]{display:none}
   UA rule on specificity, showing the badge even while the oosEl.hidden=true JS state
   says it shouldn't. */
#quickview-oos.badge:not([hidden]) { position: static; display: inline-block; width: fit-content; }
.quickview-body .btn { width: 100%; }
@media (max-width: 420px) {
  .quickview-panel { width: 100vw; }
}

/* Action bar (cart page checkout button, checkout page place-order). Plain right-aligned
   block on desktop; becomes a sticky bottom bar on mobile — env(safe-area-inset-bottom)
   keeps it clear of the iOS home indicator. */
.sticky-mobile-bar { margin-top: 20px; text-align: right; }
@media (max-width: 420px) {
  /* Back + logo + search + Cart + Menu is five elements in one row — tighten spacing/sizing on
     narrow phones (e.g. 360px Android) so it never overflows. */
  .store-nav { gap: 6px; padding: 12px 14px; }
  .nav-icon-btn { width: 34px; height: 34px; font-size: 14px; }
  .store-nav .brand-logo { max-height: 56px; max-width: 220px; }
  .store-nav .cart-link { padding: 8px 10px; gap: 4px; }
}

@media (max-width: 700px) {
  .sticky-mobile-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    margin: 20px -24px -24px;
    text-align: initial;
  }
  .sticky-mobile-bar .btn { width: 100%; }
}

/* Lookbook — styled editorial photography (Canva-generated, image-to-image from real product
   photos), each tile linking through to its real product page. */
.lookbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.lookbook-item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.lookbook-item:hover, .lookbook-item:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.14); }
.lookbook-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lookbook-item span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 16px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 100%);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

/* Footer — js/footer.js injects this into a <div id="site-footer"> on every page.
   Only real, verified content: brand name/tagline from /store/info, the one
   confirmed fabric fact, UPI payment note, copyright. No invented contact details,
   social links, or legal pages that don't exist. */
.site-footer {
  margin-top: 48px;
  border-top: 1px solid #eee;
  padding: 32px 24px;
  text-align: center;
  color: #888;
  font-size: 13px;
}
.site-footer .footer-brand { font-weight: 700; color: var(--brand-color-dark); font-size: 15px; margin-bottom: 4px; }
.site-footer .footer-tagline { margin-bottom: 12px; }
.site-footer .footer-note { margin-bottom: 4px; }
.site-footer a:hover { color: var(--brand-color-dark); }
.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  margin: 4px 0 20px;
}
.site-footer .footer-links a { padding: 6px 0; min-height: 32px; display: inline-flex; align-items: center; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-color);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* Content pages — About/FAQ/Shipping & Returns/Privacy/Terms. Plain prose, narrower measure than
   the catalog's 1080px (long paragraphs at full width are hard to read), standard heading rhythm. */
.content-page { max-width: 720px; }
.content-page h1 { font-size: 28px; margin: 0 0 8px; }
.content-page .page-subtitle { color: #6b6b6b; margin: 0 0 32px; }
.content-page h2 { font-size: 18px; margin: 32px 0 10px; }
.content-page p { line-height: 1.7; color: #333; margin: 0 0 14px; }
.content-page ul { line-height: 1.7; color: #333; padding-left: 20px; margin: 0 0 14px; }
.content-page .updated-note { color: #999; font-size: 13px; margin-top: 40px; }

/* FAQ — plain <details>/<summary> accordion, no JS needed for the open/close behavior itself. */
.faq-item { border-bottom: 1px solid #eee; padding: 4px 0; }
.faq-item summary {
  font-weight: 600;
  font-size: 15px;
  padding: 14px 4px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 20px; color: var(--brand-color-dark); flex-shrink: 0; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { padding: 0 4px 16px; margin: 0; }

/* Contact page — form reuses .form-field, plus a textarea variant. */
.form-field textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}
.form-field textarea:focus { outline: none; border-color: var(--brand-color); }
.contact-alt {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  font-size: 14px;
  color: #555;
}
.contact-alt a { color: var(--brand-color-dark); font-weight: 600; }

/* Review page — a plain 5-button star picker (post-delivery feedback form,
   storefront/review.html). .filled is toggled up through the clicked value,
   not just on the one star, so "3 stars" visually fills stars 1-3. */
.review-stars { display: flex; gap: 6px; }
.review-star {
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  padding: 2px;
  cursor: pointer;
  color: #ddd;
}
.review-star.filled { color: var(--brand-color, #c9a24b); }

/* Search — reuses .product-grid for results; own styles only for the input + no-query state. */
.search-form { display: flex; gap: 8px; margin-bottom: 24px; }
.search-form input {
  flex: 1;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #ddd;
  font-size: 15px;
}
.search-form input:focus { outline: none; border-color: var(--brand-color); }

/* 404 */
.not-found { text-align: center; padding: 60px 20px; }
.not-found .code { font-size: 15px; font-weight: 700; color: var(--brand-color); letter-spacing: 0.08em; }
.not-found h1 { font-size: 24px; margin: 12px 0 10px; }
.not-found p { color: #6b6b6b; margin: 0 0 24px; }

/* The Rack — a dedicated page (direct user request: "create separate page for this") inspired by
   a reference video of a horizontal hanging-garment-rail landing experience: a cream backdrop, a
   horizontal scrollable row of garments shown hanging on hangers (the Canva-generated photos in
   images/rail/), a thin scroll-position indicator beneath, and a click-to-focus interaction where
   the tapped garment scales up and its neighbours blur/dim. Kept entirely separate from the real
   index.html catalog, per the same instruction — this is a showcase, not a replacement storefront. */
.rack-hero {
  text-align: center;
  padding: 40px 20px 8px;
}
.rack-hero h1 { font-size: 28px; margin: 0 0 8px; color: var(--brand-color-dark); }
.rack-hero p { color: #6b6b6b; margin: 0; font-size: 15px; }

.rack-track-wrap {
  position: relative;
  padding: 32px 0 16px;
}
/* Next/Previous — direct user request ("for The Rack also add next and previous button"),
   same round-overlay idiom as the home page hero's .home-hero-nav. Vertically centered on the
   track itself (not the whole wrap, which also includes the progress bar below it). */
.rack-nav {
  position: absolute; top: 50%; z-index: 3; transform: translateY(-60%);
  width: 40px; height: 40px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.85); color: #222; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.rack-nav:hover { background: #fff; }
.rack-nav.prev { left: 4px; }
.rack-nav.next { right: 4px; }
@media (max-width: 640px) {
  .rack-nav { display: none; } /* swipe/scroll is the natural gesture at this width; avoid crowding narrow items */
}
.rack-track {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding: 8px 48px 24px;
  scrollbar-width: none;
}
.rack-track::-webkit-scrollbar { display: none; }
.rack-item {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: center;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  transition: transform 280ms cubic-bezier(0.4,0,0.2,1), filter 280ms cubic-bezier(0.4,0,0.2,1), opacity 280ms cubic-bezier(0.4,0,0.2,1);
}
.rack-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: 8px;
  display: block;
  background: #f7f2ea;
}
.rack-item:focus-visible { outline: 2px solid var(--brand-color); outline-offset: 4px; }
/* Click-to-focus: rail.js toggles .rack-focused on the track; the clicked/scrolled-to-center
   item scales up, every other item blurs and dims — same "centered, neighbours blurred" moment
   as the video reference. This is active continuously from page load (rail.js seeds an initial
   centered item), not just after an explicit click. */
.rack-track.rack-has-focus .rack-item { filter: blur(3px); opacity: 0.45; transform: scale(0.94); }
.rack-track.rack-has-focus .rack-item.rack-focused { filter: none; opacity: 1; transform: scale(1.08); z-index: 2; }
/* Mouse-hover motion — direct user request ("motion effect when mouse over"): a lift + slight
   hanger-sway + deepening shadow. Written at equal-or-higher specificity than the blur/dim rule
   above (same 2-class-plus-pseudo weight, later in source) so hovering a currently-blurred,
   non-focused item still overrides its blur/dim/scale-down and gives it motion feedback —
   the earlier :not(.rack-has-focus)-scoped attempt never fired in practice, since the focus
   system is active essentially all the time, not just after a click. */
.rack-item img { transition: transform 280ms cubic-bezier(0.34,1.56,0.64,1), box-shadow 280ms ease; }
.rack-item:hover,
.rack-item:focus-visible,
.rack-track.rack-has-focus .rack-item:hover,
.rack-track.rack-has-focus .rack-item:focus-visible {
  filter: none;
  opacity: 1;
  transform: translateY(-6px) scale(1.06) rotate(-1.5deg);
  z-index: 3;
}
.rack-item:hover img,
.rack-item:focus-visible img {
  box-shadow: 0 18px 30px -14px rgba(26,26,26,0.35);
}
@media (prefers-reduced-motion: reduce) {
  .rack-item, .rack-item img { transition: none; }
}

.rack-progress {
  height: 3px;
  background: #e8e2d8;
  border-radius: 999px;
  margin: 0 48px 28px;
  position: relative;
  overflow: hidden;
}
.rack-progress-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 20%;
  background: var(--brand-color);
  border-radius: 999px;
  transition: transform 100ms linear;
}

.rack-caption {
  text-align: center;
  min-height: 72px;
  padding: 0 20px;
}
.rack-caption .name { font-size: 18px; font-weight: 700; margin: 0 0 4px; opacity: 0; transition: opacity 200ms ease; }
.rack-caption .price { font-weight: 600; color: var(--brand-color-dark); opacity: 0; transition: opacity 200ms ease; }
.rack-caption .cta { opacity: 0; transition: opacity 200ms ease; display: inline-block; margin-top: 10px; }
.rack-caption.visible .name,
.rack-caption.visible .price,
.rack-caption.visible .cta { opacity: 1; }
.rack-caption .hint { color: #999; font-size: 14px; }
.rack-caption.visible .hint { display: none; }

.rack-more { text-align: center; padding: 8px 20px 56px; }

@media (max-width: 700px) {
  .product-detail { grid-template-columns: 1fr; }
  .hero { padding: 36px 16px 28px; }
  .hero h1 { font-size: 24px; }
  .rack-item { width: 160px; }
}

/* ============================================================================
   Home page. 2026-10-07: rebuilt from scratch as a "sticker scrapbook" (hero +
   picks + tag-strip + hang-rail + lookbook sections). 2026-10-08: that was
   restructured again into the .bento-grid below (single asymmetric tile grid,
   same real-data precedent carried over). .catalog-wrap keeps the original
   .store-main metrics so the reused #category-row/#product-grid (js/products.js,
   unmodified beyond the quick-view button) look the same as on every other page.
   ============================================================================ */
.catalog-wrap { max-width: 1080px; margin: 0 auto; padding: 64px 24px 24px; }
.catalog-head { text-align: center; margin: 0 0 30px; }
.catalog-head h2 {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  display: inline-block;
  position: relative;
}
.catalog-head h2::after {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: -8px;
  height: 7px;
  background: var(--accent-1);
  border-radius: 999px;
  transform: rotate(-1deg);
  z-index: -1;
  opacity: .65;
}

/* ---- Scroll-reveal entrance — IntersectionObserver in home.js toggles .in-view ---- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 750ms cubic-bezier(0.16,1,0.3,1), transform 750ms cubic-bezier(0.16,1,0.3,1); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal-stagger > * { opacity: 0; transform: translateY(22px) rotate(var(--rot, 0deg)); transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1); }
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 450ms; }
.reveal-stagger.in-view > * { opacity: 1; transform: rotate(var(--rot, 0deg)); }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > *, .quickview-overlay, .quickview-panel { transition: none !important; }
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Home page. 2026-10-08 PM: restructured from the single .bento-grid into this
   multi-section one-page layout, modeled structurally on a real reference project
   the user supplied — section lineup kept, dark/cinematic mood NOT kept (stays
   light/playful, same blue-green palette as the rest of the site). See the plan
   file for the full section-by-section mapping and why several reference sections
   (milestones, testimonials, a 3D visualizer, a visitor counter) aren't here.
   ============================================================================ */

/* ---- Hero ---- */
.home-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 24px;
  background: var(--brand-bg);
}
.home-hero-mesh {
  position: absolute;
  inset: -60px -24px;
  z-index: 0;
  background:
    radial-gradient(42% 38% at 12% 18%, color-mix(in srgb, var(--accent-blue) 26%, transparent) 0%, transparent 70%),
    radial-gradient(38% 34% at 88% 8%, color-mix(in srgb, var(--accent-2) 22%, transparent) 0%, transparent 70%),
    radial-gradient(46% 40% at 70% 90%, color-mix(in srgb, var(--accent-green) 20%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  animation: bento-mesh-drift 18s ease-in-out infinite alternate;
}
@keyframes bento-mesh-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(1.5%, -2%) scale(1.06); }
  100% { transform: translate(-1.5%, 1.5%) scale(0.98); }
}
.home-hero-grid {
  position: relative;
  z-index: 2;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.home-hero-inner { max-width: 560px; }
.home-hero-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-color-dark);
  margin: 0 0 14px;
}
.home-hero-eyebrow .rule { width: 26px; height: 2px; background: var(--brand-color); }
.home-hero-headline { margin: 0 0 14px; }
.home-hero-headline .line {
  font-family: var(--font-display);
  font-size: clamp(40px, 6.4vw, 68px);
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}
.home-hero-headline .accent { color: var(--accent-green); }
.home-hero-sub { font-size: 16.5px; line-height: 1.55; color: #4b5563; max-width: 44ch; margin: 0 0 24px; }
.home-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Framed, smaller sliding photo panel — direct user request ("make it small and use slide 1
   by 1 like DRDrealtors.com"): a fixed-size rounded card, not a full-bleed background, with a
   push/slide transition across a flex track (transform: translateX on the track, the same
   technique the reference site itself uses) instead of the previous opacity crossfade. */
.home-hero-photo {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: 0 24px 48px -24px rgba(15,23,42,0.3);
  background: #f0f0f0;
}
.home-hero-slides-track {
  display: flex;
  height: 100%;
  /* No explicit width (direct bug fix: this used to be hardcoded "600%" for exactly 6 slides
     — staff can now add/remove slides from the Dashboard's Storefront Hero tab, so a fixed
     slide count in CSS silently breaks the position math the moment the real count differs,
     which is exactly what was reported, "not auto slideing"). A block-level track with no
     width set auto-fills its parent (.home-hero-photo's content box, responsive already via
     that element's own max-width) — each slide below is 100% of THAT, i.e. exactly one frame-
     width, and overflows the track horizontally in a row (flex-shrink:0 stops them being
     squeezed to fit); .home-hero-photo's own overflow:hidden clips everything except whichever
     one home.js's translateX(-${active * 100}%) currently brings into view. Works for any
     slide count, any frame width, with no magic numbers anywhere. */
  transition: transform 700ms cubic-bezier(0.65,0,0.35,1);
}
.hero-slide {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.home-hero-dots { position: absolute; z-index: 2; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.home-hero-dots button {
  width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(255,255,255,0.55);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08); cursor: pointer; padding: 0; transition: background-color 200ms ease, width 200ms ease;
}
.home-hero-dots button.active { background: #fff; width: 20px; }
/* Next/Previous — direct user request ("add next and previous button"). Plain overlaid
   round buttons, same visual idiom as .home-hero-dots (semi-opaque white on the photo). */
.home-hero-nav {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 999px; border: none; cursor: pointer;
  background: rgba(255,255,255,0.75); color: #222; font-size: 16px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.home-hero-nav:hover { background: #fff; }
.home-hero-nav.prev { left: 10px; }
.home-hero-nav.next { right: 10px; }
@media (max-width: 860px) {
  .home-hero-grid { grid-template-columns: 1fr; }
  .home-hero-photo { max-width: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-mesh, .hero-slide.active { animation: none; }
}

/* ---- Marquee ---- */
.home-marquee { background: var(--brand-color); padding: 12px 0; overflow: hidden; }
.home-marquee-track {
  display: flex; white-space: nowrap; width: max-content;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: 0.04em;
  color: #fff; text-transform: uppercase;
  animation: marquee-scroll 22s linear infinite;
}
.home-marquee-track span { padding: 0 6px; }
.home-marquee-track .dot { opacity: 0.55; padding: 0 14px; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .home-marquee-track { animation: none; }
}

/* ---- Stats band ---- */
.stats-band {
  max-width: 1080px; margin: 0 auto; padding: 48px 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center;
}
.stat-value { font-family: var(--font-display); font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--brand-color-dark); margin-bottom: 4px; }
.stat-label { font-size: 12.5px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Shared section heading bits (eyebrow + rule), reused across several sections ---- */
.eyebrow {
  display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.22em;
  font-size: 12px; font-weight: 700; color: var(--brand-color-dark); margin-bottom: 10px;
}
.rule { width: 46px; height: 2px; background: var(--brand-color); margin: 14px 0; }

/* ---- Shop by Print: sticky heading + live carousel ---- */
.print-section { max-width: 1160px; margin: 0 auto; padding: 56px 24px; }
.print-section-inner { display: flex; gap: 48px; align-items: flex-start; }
.print-sticky { width: 260px; flex-shrink: 0; position: sticky; top: 90px; }
.print-sticky h2 { font-family: var(--font-display); font-size: 32px; font-weight: 800; margin: 0; line-height: 1.08; }
.print-sticky p { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0 0 20px; }
.print-carousel-wrap { flex: 1; min-width: 0; }
.print-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.print-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 12px; transition: transform 150ms ease, box-shadow 150ms ease;
}
.print-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(15,23,42,0.25); }
.print-card .thumb { aspect-ratio: 1 / 1; border-radius: 10px; background: #f0f0f0; overflow: hidden; position: relative; }
.print-card .thumb.loading { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.print-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.print-card-name { font-weight: 700; font-size: 14.5px; }
.print-card-count { font-size: 12px; color: #8a8a8a; }
.print-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.print-nav-count { font-size: 12.5px; color: #8a8a8a; }
.print-nav-btns { display: flex; gap: 8px; }
.print-nav-btns button {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--brand-color); background: #fff;
  color: var(--brand-color-dark); font-size: 16px; cursor: pointer; transition: background-color 150ms ease;
}
.print-nav-btns button:hover:not(:disabled) { background: color-mix(in srgb, var(--brand-color) 10%, #fff); }
.print-nav-btns button:disabled { border-color: #ddd; color: #ccc; cursor: not-allowed; }

/* ---- Shop the Look ---- */
.look-section { max-width: 1160px; margin: 0 auto; padding: 24px 24px 56px; text-align: center; }
.look-head h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin: 0; }
.look-head .rule { margin-left: auto; margin-right: auto; }
.look-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 30px; }
.look-item { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1; background: #f0f0f0; }
.look-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 300ms ease; }
.look-item:hover img, .look-item:focus-visible img { transform: scale(1.06); }
.look-item span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 8px 8px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, transparent 100%);
  color: #fff; font-weight: 700; font-size: 12.5px;
}
.look-more { margin-top: 22px; }
.look-more a { font-weight: 700; font-size: 13.5px; color: var(--brand-color-dark); }

/* ---- Shop by Collection: hover-reveal cards ---- */
.help-section { max-width: 1160px; margin: 0 auto; padding: 24px 24px 56px; }
.help-head { text-align: center; margin-bottom: 30px; }
.help-head h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin: 0; }
.help-head .rule { margin-left: auto; margin-right: auto; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.help-card {
  position: relative; display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 3 / 4;
  background: #f0f0f0; border: 1px solid #eee;
}
.help-card-thumb { position: absolute; inset: 0; background: #f0f0f0; }
.help-card-thumb.loading { background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.help-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms ease; }
.help-card:hover .help-card-thumb img { transform: scale(1.08); }
.help-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px;
  background: linear-gradient(0deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.15) 65%, transparent 100%);
  color: #fff;
}
.help-card .tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.85; }
.help-card h3 { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin: 4px 0 0; }
.help-card-reveal { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 350ms ease, opacity 350ms ease, margin-top 350ms ease; }
.help-card:hover .help-card-reveal, .help-card:focus-within .help-card-reveal { max-height: 120px; opacity: 1; margin-top: 10px; }
.help-card-reveal p { font-size: 13px; line-height: 1.5; margin: 0 0 8px; color: #f1f5f9; }
.help-card-cta { font-weight: 700; font-size: 12.5px; color: var(--accent-1); }
@media (hover: none) {
  /* No hover on touch — keep the description visible so there's no dead-end tap target */
  .help-card-reveal { max-height: 120px; opacity: 1; margin-top: 10px; }
}

/* ---- Why choose: numbered facts over a dimmed real photo ---- */
.why-section { position: relative; padding: 64px 24px; overflow: hidden; }
.why-bg { position: absolute; inset: 0; z-index: 0; }
.why-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.why-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, var(--brand-bg) 0%, color-mix(in srgb, var(--brand-bg) 88%, transparent) 50%, var(--brand-bg) 100%); }
.why-inner { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; }
.why-head { text-align: center; margin-bottom: 36px; }
.why-head h2 { font-family: var(--font-display); font-size: 32px; font-weight: 800; margin: 0; line-height: 1.1; }
.why-head .rule { margin-left: auto; margin-right: auto; }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; max-width: 760px; margin: 0 auto; }
.why-item { display: flex; gap: 16px; align-items: flex-start; }
.why-num { font-family: var(--font-display); font-size: 34px; font-weight: 800; color: color-mix(in srgb, var(--brand-color) 55%, transparent); flex-shrink: 0; line-height: 1; }
.why-item h3 { font-size: 15.5px; font-weight: 800; margin: 2px 0 6px; }
.why-item p { font-size: 14px; line-height: 1.55; color: #5b5b5b; margin: 0; }

/* ---- Customer Reviews: real, verified-purchase, staff-approved reviews only ---- */
.reviews-section { max-width: 1160px; margin: 0 auto; padding: 56px 24px; text-align: center; }
.reviews-head h2 { font-family: var(--font-display); font-size: 32px; font-weight: 800; margin: 0; line-height: 1.1; }
.reviews-head .rule, .reviews-head .eyebrow { margin-left: auto; margin-right: auto; }
.reviews-summary { font-size: 14.5px; color: #5b5b5b; margin-top: 8px; }
.reviews-stars { color: #f5a623; letter-spacing: 1px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; text-align: left; }
.review-card { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 18px; }
.review-card-stars { color: #f5a623; font-size: 15px; letter-spacing: 1px; }
.review-card-comment { font-size: 14px; line-height: 1.55; color: #3f3f3f; margin: 10px 0; }
.review-card-name { font-size: 12.5px; font-weight: 700; color: #8a8a8a; }
@media (max-width: 860px) { .reviews-grid { grid-template-columns: 1fr; } }

/* ---- About ---- */
.about-section {
  max-width: 1080px; margin: 0 auto; padding: 56px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.about-text h2 { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin: 0; line-height: 1.1; }
.about-text p { font-size: 15px; line-height: 1.65; color: #4b5563; margin: 0 0 20px; }
.about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }
.about-facts div { background: #fff; border: 1px solid #eee; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; font-weight: 600; }
.about-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.about-photos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; display: block; }
.about-photos img:nth-child(2) { margin-top: 24px; }

/* ---- How it works: horizontal scroll-snap track (same idiom as rail.html's .rack-track) ---- */
.process-section { padding: 56px 0; background: #fff7ee; }
.process-head { text-align: center; padding: 0 24px 28px; }
.process-head h2 { font-family: var(--font-display); font-size: 28px; font-weight: 800; margin: 6px 0 0; }
.process-track-wrap { padding: 0 0 8px; }
.process-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity;
  max-width: 1160px; margin: 0 auto; justify-content: center;
  padding: 4px 24px 20px; scrollbar-width: none;
}
.process-track::-webkit-scrollbar { display: none; }
.process-step {
  flex: 0 0 auto; width: 240px; scroll-snap-align: center;
  background: #fff; border-radius: 16px; padding: 24px 20px; box-shadow: 0 10px 24px -16px rgba(26,26,26,0.2);
}
.process-num { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: color-mix(in srgb, var(--brand-color) 50%, transparent); }
.process-step h3 { font-size: 16px; font-weight: 800; margin: 10px 0 6px; }
.process-step p { font-size: 13px; line-height: 1.5; color: #5b5b5b; margin: 0; }
.process-progress { height: 3px; background: #e8e2d8; border-radius: 999px; margin: 0 24px; position: relative; overflow: hidden; max-width: 1080px; margin-left: auto; margin-right: auto; }
.process-progress-bar { position: absolute; top: 0; left: 0; bottom: 0; width: 20%; background: var(--brand-color); border-radius: 999px; transition: transform 100ms linear; }

/* ---- Final CTA ---- */
.final-cta { padding: 64px 24px; text-align: center; }
.final-cta-inner { max-width: 560px; margin: 0 auto; }
.final-cta h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 800; margin: 0; line-height: 1.1; }
.final-cta .rule { margin-left: auto; margin-right: auto; }
.final-cta p { font-size: 15px; color: #5b5b5b; margin: 0 0 24px; }
.final-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

@media (max-width: 860px) {
  .print-section-inner { flex-direction: column; gap: 24px; }
  .print-sticky { width: 100%; position: static; }
  .print-grid { grid-template-columns: repeat(2, 1fr); }
  .look-grid { grid-template-columns: repeat(3, 1fr); }
  .help-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .about-section { grid-template-columns: 1fr; }
  .about-photos img:nth-child(2) { margin-top: 0; }
}
@media (max-width: 560px) {
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
  .look-grid { grid-template-columns: repeat(2, 1fr); }
  .print-grid { grid-template-columns: 1fr; }
  .home-hero { min-height: 70vh; padding: 0 16px 40px; }
}

/* ---- Category overview page (categories.html) ---- */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.category-card {
  position: relative;
  display: block;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: #f0f0f0;
}
.category-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 200ms ease; }
.category-card:hover img, .category-card:focus-visible img { transform: scale(1.05); }
.category-card .label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 16px 12px;
  background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
  color: #fff;
}
.category-card .label .name { font-weight: 700; font-size: 15px; }
.category-card .label .count { font-size: 12px; opacity: 0.85; }

/* ---- Frequently bought together (product.html) — direct user request ("Bundule option"):
   a real cross-sell pattern (checkboxes over other real products, one combined add-to-cart),
   not fabricated bundle pricing — checkout still recomputes every line's real price server-side,
   same discipline as everywhere else in this codebase; this UI just adds several real items to
   the cart in one click, it never invents a discount. ---- */
.fbt-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid #eee; }
.fbt-section h2 { font-size: 18px; margin: 0 0 16px; }

/* ---- "Similar items" (product.html) — direct user request: clicking a product should show
   related items below. Reuses .product-grid/.product-card verbatim (same cards/quick-view-less
   styling as the catalog grid), just a different section wrapper. ---- */
.similar-section { margin-top: 48px; padding-top: 32px; border-top: 1px solid #eee; }
.similar-section h2 { font-size: 18px; margin: 0 0 16px; }
.fbt-items { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.fbt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 10px;
  min-width: 220px;
  flex: 1 1 220px;
}
.fbt-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; background: #f0f0f0; flex-shrink: 0; }
.fbt-item .name { font-size: 13px; font-weight: 600; }
.fbt-item .price { font-size: 13px; color: var(--brand-color-dark); font-weight: 700; }
.fbt-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; }
.fbt-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fbt-footer .fbt-total { font-weight: 700; }

/* ---- "You might also like" suggestions (cart.html) ---- */
.suggest-section { margin-top: 40px; padding-top: 28px; border-top: 1px solid #eee; }
.suggest-section h2 { font-size: 18px; margin: 0 0 16px; }
.suggest-row { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.suggest-card { flex: 0 0 auto; width: 150px; }
.suggest-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #f0f0f0; display: block; margin-bottom: 8px; }
.suggest-card .name { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.suggest-card .price { font-size: 12.5px; color: var(--brand-color-dark); font-weight: 700; margin-bottom: 6px; }
.suggest-card button { width: 100%; min-height: 34px; font-size: 12.5px; padding: 6px 10px; }