:root {
  --bg: #faf7f2;
  --surface: #ffffff;
  --text: #241e18;
  --muted: #7a6f62;
  --border: #e7ddd0;
  --accent: #9c6b3f;
  --accent-dark: #7c522f;
  --danger: #b4432f;
  --success: #1f7a4d;
  --btn-text: #ffffff;
  --footer-bg: #211c17;
  --footer-text: #e9e2d8;
  --radius: 10px;
  --whatsapp: #25d366;
  --font-heading: "Georgia", "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  accent-color: var(--accent);
}
/* Form controls (button/input/select/textarea) don't inherit the page's
   font-family by default in any browser - they use the browser's own UI
   font instead, unless told otherwise. Without this, every <button> on the
   site (Add to Cart, Buy It Now, ...) silently rendered in the browser's
   default dialog font regardless of whatever font the store had actually
   chosen. */
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0 0 .4em; font-weight: 700; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
/* Used on both <a> and <button> (JS-driven actions like "Remove" or "Use a
   different address" can't be real links) - <button> carries the browser's
   native chrome (border, background, padding) by default, which silently
   turned every one of these into an ugly bordered box instead of a plain
   text link unless explicitly reset here. */
.link-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; margin: 0; padding: 0;
  font: inherit; font-weight: 600; color: var(--accent-dark);
  cursor: pointer; appearance: none; -webkit-appearance: none;
}
.link-btn:hover { text-decoration: underline; }

/* Zero-specificity base layer (:where) so every plain input/select/textarea
   gets the same depth + focus treatment even outside a .field wrapper (the
   header search box, the footer newsletter field) - more specific rules
   below (e.g. .field input, .newsletter-form input) naturally win wherever
   they also apply, no specificity fights. */
:where(input, textarea, select):not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="range"], [type="hidden"]) {
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit;
  background: var(--surface); color: var(--text); padding: 10px 14px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07), inset 0 -1px 0 rgba(255, 255, 255, .5);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
:where(input, textarea, select):not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="range"], [type="hidden"]):hover {
  border-color: color-mix(in srgb, var(--border) 45%, var(--accent) 55%);
}
:where(input, textarea, select):not([type="checkbox"], [type="radio"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="range"], [type="hidden"]):focus {
  outline: none; border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07), inset 0 -1px 0 rgba(255, 255, 255, .5), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.bg-pattern-overlay {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* One scatter generated to cover this exact element (scatter-pattern.js) -
     no CSS repeat, so nothing ever visibly duplicates across the viewport. */
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ─── Buttons (raised/3D per theming spec) ─────────────────────────────── */
/* A real bevel now, not just a flat drop shadow - a light inset highlight
   along the top edge plus a soft inset shadow along the bottom, the same
   recipe the admin's .card-3d/.wa-btn already use, so a button reads as a
   physically raised, slightly domed surface rather than a flat rectangle. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--radius); border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease, border-color 150ms ease, background 150ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 2px 0 rgba(0,0,0,.18),
    0 4px 10px rgba(0,0,0,.1);
}
.btn:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -2px 3px rgba(0,0,0,.15),
    0 3px 0 rgba(0,0,0,.2),
    0 8px 16px rgba(0,0,0,.14);
}
.btn:active { transform: translateY(1px) scale(.97); box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.15); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-sm { padding: 7px 14px; font-size: 13px; }
.btn-icon { flex-shrink: 0; }
.btn.sold-out .btn-icon, .btn.sold-out .btn-arrow { display: none; }
.btn-arrow { display: inline-block; transition: transform 150ms ease; }
.btn:hover .btn-arrow { transform: translateX(4px); }
.btn-primary { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); color: var(--btn-text); }
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.15),
    0 3px 0 rgba(0,0,0,.2), 0 10px 22px color-mix(in srgb, var(--accent) 45%, transparent);
}
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--accent); background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }
/* Not the true --whatsapp (#25d366) itself, which read as too light/bright
   for a full-width button - a noticeably darker shade top-to-bottom, still
   unmistakably "WhatsApp green" but with real weight to it. */
.btn-whatsapp {
  background: linear-gradient(180deg, var(--whatsapp), color-mix(in srgb, var(--whatsapp) 65%, black));
  color: #f5f5f0; width: 100%; margin-top: 10px; font-size: 15px; font-weight: 700; letter-spacing: .2px;
}
.btn-whatsapp .btn-icon { width: 22px; height: 22px; }
.btn-whatsapp:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 3px rgba(0,0,0,.2),
    0 3px 0 rgba(0,0,0,.2), 0 10px 22px color-mix(in srgb, var(--whatsapp) 55%, transparent);
}
.btn-whatsapp:hover .btn-icon { animation: btn-icon-bounce 500ms ease; }
@keyframes btn-icon-bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.btn-block { width: 100%; }

/* ─── Header / mega-menu ───────────────────────────────────────────────── */
.announce-bar {
  background: var(--accent-dark); color: #fff; text-align: center; font-size: 13px; padding: 7px 36px 7px 12px;
  position: relative;
}
.announce-bar a { text-decoration: underline; }
/* Exactly one copy of the text sweeps across - animated via the Web
   Animations API in announcement-bar.js with measured pixel distances, not
   CSS keyframes (see that file for why). .announce-bar-track is just an
   overflow-safe positioning wrapper; .announce-bar-text is the element
   actually animated. */
.announce-bar-scrolling { overflow: hidden; text-align: left; }
.announce-bar-scrolling .announce-bar-track { display: block; }
.announce-bar-scrolling .announce-bar-text { display: inline-block; white-space: nowrap; }
.announce-bar-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none;
  color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 4px 8px; opacity: .8;
}
.announce-bar-close:hover { opacity: 1; }
/* The announcement bar used to scroll away with the page while the header
   stayed pinned (only .site-header was sticky) - now both are wrapped in
   one sticky group so the announcement bar stays visible and the header
   sits attached right below it, moving together as a unit. */
.sticky-top-group { position: sticky; top: 0; z-index: 40; }
.site-header { background: var(--nav-bg-color, var(--surface)); border-bottom: 1px solid var(--border); overflow: visible; }
/* Height reduced (~1/3 down from its old 14px/44px-brand recipe). */
.header-row { display: flex; align-items: center; gap: 20px; padding: 4px 20px; max-width: 1280px; margin: 0 auto; position: relative; }
.brand {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700; margin-right: auto;
  display: flex; align-items: center; position: relative; min-width: 90px; height: 32px;
}
/* Doubled and taken out of flow so it can overlap past the header's own
   bottom edge (a crest hanging below the band, and past whatever content
   sits right below it too, when there's no banner/pattern there to land
   on) without stretching the header row itself taller to fit it -
   deliberate, not a bug: no clearance is reserved for this on purpose. */
.brand-logo {
  height: 96px; width: auto; max-width: 340px; object-fit: contain;
  position: absolute; top: 4px; left: -14px; z-index: 1;
}
.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn { position: relative; background: none; border: none; cursor: pointer; color: var(--text); padding: 8px; border-radius: 999px; }
/* Scoped to just the header's own icon row - shrinking the shared .icon-btn
   class globally would also shrink it everywhere else that reuses it
   (filter-panel close buttons, the account wishlist's remove button, ...). */
.header-actions .icon-btn { padding: 6px; }
.icon-btn:hover { background: var(--bg); }
.cart-count {
  position: absolute; top: -2px; right: -2px; background: var(--accent-dark); color: var(--btn-text);
  font-size: 10px; line-height: 1; padding: 3px 5px; border-radius: 999px; font-weight: 700;
}
.search-panel { max-width: 1280px; margin: 0 auto; padding: 0 20px 12px; }
.search-panel input { width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius); }

/* NOTE: a previous attempt at handling many categories gave this
   overflow-x:auto to survive a very long list without breaking the header
 - but overflow clips ALL descendant painting, including the
   position:absolute .mega-menu dropdowns nested inside .nav-item below, so
   it silently broke every hover dropdown. Reverted; making room for a
   large category list without clipping the dropdowns needs the scroll
   wrapper and the dropdown panels decoupled (dropdowns positioned outside
   the scrolling element via JS), not a plain overflow property here. */
.main-nav { display: flex; gap: 4px; }
.nav-item { position: relative; }
.nav-trigger {
  background: none; border: none; font: inherit; font-weight: 600; padding: 3px 14px; cursor: pointer; color: var(--nav-text-color, var(--text));
  border-bottom: 2px solid transparent; display: inline-block; transition: transform 150ms ease, border-color 150ms ease;
  /* Its own font/size (admin: Appearance > Category Nav) - not just
     whatever font: inherit picks up from the body, so a long category list
     can be sized independently of the rest of the theme. */
  font-family: var(--nav-font-family, inherit); font-size: var(--nav-font-size, inherit);
}
.nav-item.open .nav-trigger, .nav-trigger:hover { border-bottom-color: var(--accent); }
.nav-trigger:hover { transform: scale(1.08); }
.mega-menu {
  position: absolute; top: 100%; left: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 30px rgba(0,0,0,.12);
  display: flex; gap: 28px; padding: 18px 22px; min-width: 220px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 220ms ease-out, transform 220ms ease-out;
}
.nav-item.open .mega-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mega-col-title { font-weight: 700; display: block; margin-bottom: 8px; white-space: nowrap; }
.mega-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mega-col a:hover { color: var(--accent-dark); }

/* The logo overlaps past the header's own bottom edge on purpose (see
   .brand-logo above) - fine on top of a hero banner, but on any page that
   opens with plain content (a heading right at the top, no banner under
   it) that same overlap cuts through the text instead of just flowing
   over an image. Give those pages just enough top clearance to clear the
   logo; pages that open with .hero keep the original no-clearance flow. */
#main-content { padding-top: 38px; }
#main-content:has(> .hero) { padding-top: 0; }

/* ─── Hero / editorial / carousels ──────────────────────────────────────── */
.hero { padding: 34px 20px; text-align: center; background: linear-gradient(180deg, #f1e9dd, var(--bg)); position: relative; overflow: hidden; }
/* "Huge banner" per spec - roughly a quarter of the viewport tall,
   regardless of how much headline/subtext text it holds (padding alone,
   like the no-image .hero above, wouldn't guarantee that). The text is
   white the instant this class is on (image or not yet loaded, slow
   connection, whatever) - background here is a dark fallback so white
   text is never sitting on the plain light gradient .hero itself uses
   while the actual banner image is still loading in. */
.hero.has-image { padding: 52px 20px; color: #fff; min-height: 32vh; display: flex; align-items: center; justify-content: center; background: #2b2620; }
.hero-bg-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero.has-image::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.48); z-index: 0; }
.hero-copy { position: relative; z-index: 1; }
.hero-copy h1 { font-size: clamp(28px, 5vw, 44px); max-width: 720px; margin: 0 auto .3em; }
.hero.has-image h1 { color: #fff; }
.hero-copy p { max-width: 520px; margin: 0 auto; color: var(--muted); }
.hero.has-image .hero-copy p { color: rgba(255,255,255,.9); }
/* The dark overlay above helps on average, but any one photo can still
   have a bright patch sitting right behind the text - a layered shadow
   (a soft glow plus a tight dark edge right against the glyphs) keeps the
   text readable regardless of what's directly behind it, not just on
   average across the image. */
.hero.has-image .hero-copy h1,
.hero.has-image .hero-copy p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9), 0 2px 12px rgba(0, 0, 0, .55);
}
.home-carousel { max-width: 1280px; margin: 0 auto; padding: 20px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.carousel-scroller {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px;
  scrollbar-color: var(--border) var(--bg);
}
.carousel-scroller::-webkit-scrollbar { height: 8px; }
.carousel-scroller::-webkit-scrollbar-track { background: var(--bg); border-radius: 999px; }
.carousel-scroller::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.carousel-scroller::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.carousel-scroller .product-grid { display: contents; }
.carousel-item { flex: 0 0 220px; scroll-snap-align: start; }
.carousel-item .product-grid { display: block; }

/* ─── Product grid / card ──────────────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.home-carousel .product-grid, .carousel-item .product-grid { padding: 0; }
.product-card { position: relative; }
.product-card-media { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--image-radius, var(--radius)); border: var(--image-border, none); background: var(--border); }
.product-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms ease, transform 200ms ease; }
.product-card-media .img-secondary { opacity: 0; }
.product-card-media:hover img { transform: scale(1.03); }
.product-card-media:hover .img-secondary { opacity: 1; }
.product-card-media:hover .img-primary { opacity: 0; }
.badge { position: absolute; top: 10px; left: 10px; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; }
.badge-new { background: var(--accent); color: var(--btn-text); }
.badge-sold-out { background: #444; color: #fff; }
.badge-discount { top: 40px; background: var(--danger); color: #fff; }
/* The PDP main image never carries a New/Sold-Out badge above it (those
   are grid-card-only), so its discount badge sits at the top rather than
   stacked below a badge that isn't there. */
.main-image-wrap .badge-discount { top: 10px; }

/* Small heart/cart/share icon buttons overlaid on a product image's
   top-right corner (grid cards) - a quicker, lower-commitment action than
   the full "Choose options" bar below, which stays for picking size/color.
   Frosted-glass base (blur + translucency) gives every button *some*
   separation from the photo behind it regardless of color; utils.js's
   applyIconContrast then samples that corner and adds/removes
   .icons-on-dark on the container to flip between a light and dark
   version, so a white icon can never sit invisibly on a white dress and a
   dark icon can never vanish into a dark one. */
.product-card-icons { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.card-icon-btn {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #201c17; display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18); transition: transform 150ms ease, color 150ms ease, background 150ms ease;
}
.card-icon-btn:hover { transform: scale(1.08); }
.card-icon-btn.wishlist-heart-mini.active { color: var(--danger); }
.card-icon-btn.quick-add:disabled { opacity: .5; cursor: not-allowed; }
.icons-on-dark .card-icon-btn {
  background: rgba(20, 18, 15, .62); border-color: rgba(255, 255, 255, .22); color: #fff;
}
.icons-on-dark .card-icon-btn.wishlist-heart-mini.active { color: #ff8a7a; }
/* The card's only quick-add trigger is this small icon - a separate
   full-width "Choose options" hover-bar used to sit over the bottom of the
   image too, but it intercepted clicks meant to open the product (on
   desktop, hovering anywhere on the card revealed it, so the pointer was
   often already over it by the time someone clicked; on touch there's no
   hover at all, so it was invisible yet still tappable). Removed - "click
   the image" now always means "view the product," with no second
   ambiguous target layered on top of it. */
.product-card-media .card-icon-btn.quick-add {
  position: static; opacity: 1; transform: none; padding: 0; width: 32px; height: 32px; font-weight: 400;
}
.product-card-body { padding-top: 10px; }
.product-card-title { display: block; font-weight: 600; margin-bottom: 4px; }
.product-card-price { color: var(--accent); font-size: 14px; font-weight: 600; }
.product-card-variants { color: var(--muted); font-size: 12px; margin-top: 2px; }
.product-card.sold-out .product-card-media { filter: grayscale(.4); }
.empty-state { text-align: center; padding: 80px 20px; color: var(--muted); }

/* ─── Collection page ───────────────────────────────────────────────────── */
.collection-page { max-width: 1280px; margin: 0 auto; padding: 24px 20px 60px; }
.collection-header { margin-bottom: 4px; }
.collection-heading-row h1 { margin: 0 0 4px; }
.collection-header p.muted[data-result-count] { margin: 0; }
.collection-heading-row { display: flex; align-items: center; gap: 10px; }
/* The "(N)" inline count and the truncating title only kick in on mobile
   (see the max-width:900px block below) - desktop keeps its original
   roomy "N results" line underneath instead. */
.collection-count-inline { display: none; }
.collection-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }
/* A grid item defaults to min-width:auto - it refuses to shrink below its
   content's own natural size. .collection-main's nested product-grid (an
   auto-fill grid with a 220px column minimum) has a large natural size at
   full width (as many 220px columns as products, in one row), which without
   this would force the whole layout wider than the viewport instead of
   ever wrapping to fewer columns. */
.collection-main { min-width: 0; }
.filter-sidebar { min-width: 0; }
.filter-toggle { display: none; width: 100%; margin-bottom: 12px; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mobile-toolbar-3 { display: none; }
/* All three bottom sheets (data-sheet="filter"/"sort"/"size") default to
   hidden at every width - only the mobile media query below (which also
   restores their position:fixed slide-up chrome) turns them back on. The
   Filter sheet doubles as the desktop sidebar's own always-visible panel,
   so it alone gets an explicit desktop override right after; Sort and Size
   have no desktop equivalent (desktop already has its own Sort dropdown +
   View toggle in .collection-toolbar) and stay hidden outside mobile.
   Without this, these elements had no CSS at all above 900px and rendered
   as plain unstyled content sitting in the page instead of being hidden. */
[data-sheet] { display: none; }
[data-filter-panel] { display: block; }
.filter-panel-head,
.filter-panel-apply {
  display: none;
}
.filter-group { border: none; padding: 0; margin: 0 0 16px; }
.filter-group legend { font-weight: 700; margin-bottom: 8px; }
.chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none; background: none; color: inherit; font: inherit; margin: 0;
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.chip input { display: none; }
.chip:has(input:checked) { background: var(--text); color: #fff; border-color: var(--text); }
.chip-clear:hover { border-color: var(--text); }
/* Plain-button chips (no checkbox inside, e.g. the address Label toggle)
   drive their own selected look via this class instead of :has(). */
.chip.active { background: var(--text); color: #fff; border-color: var(--text); }
.collection-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sort-select { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }

/* ─── Custom <select> (see custom-select.js) - native dropdown popups
   render with unstyleable OS chrome, so every <select> on the storefront
   (sort-by here, size/qty pickers on the PDP) is progressively enhanced
   into this trigger+listbox pair instead. ────────────────────────────── */
.cs-wrap { position: relative; display: inline-block; }
.cs-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cs-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius); padding: 8px 12px; font: inherit; font-size: 14px; cursor: pointer;
}
.cs-wrap.cs-open .cs-trigger, .cs-trigger:focus-visible { border-color: var(--accent); outline: none; }
.cs-chevron { flex-shrink: 0; color: var(--muted); transition: transform 150ms ease; }
.cs-wrap.cs-open .cs-chevron { transform: rotate(180deg); }
.cs-disabled .cs-trigger { opacity: .5; cursor: not-allowed; }
.cs-listbox {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 100%; width: max-content; max-width: 280px;
  max-height: 320px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 14px 32px rgba(0, 0, 0, .16); padding: 6px;
}
.cs-option {
  display: block; width: 100%; text-align: left; padding: 5px 10px; border: none; background: none;
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; color: var(--text);
}
.cs-option:hover, .cs-option:focus-visible { background: var(--bg); outline: none; }
.cs-option.active { background: var(--text); color: #fff; font-weight: 600; }
.collection-results .product-grid { padding: 0; }

/* Density toggle - how many product cards per row. Applied as a class on
   the [data-collection-results] wrapper (not the .product-grid itself,
   since that node gets replaced wholesale on every filter/sort fetch - 
   see collection-filters.js) so the choice survives AJAX result swaps. */
.density-toggle-group { display: flex; align-items: center; gap: 8px; }
.density-toggle-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.density-toggle { display: flex; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; background: var(--surface); }
.density-btn {
  display: flex; align-items: center; justify-content: center; padding: 0 10px; height: 30px; border: none;
  background: none; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; font-size: 13px;
}
.density-btn:hover { color: var(--text); }
.density-btn.active { background: var(--text); color: #fff; }
/* Big/Medium/Small - deliberately stops at 2 columns on the large end (no
   single giant tile) and 4 on the small end (no dense 5-6 across grid), per
   spec: "don't clutter, not too small." */
.collection-results.density-2 .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.collection-results.density-3 .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.collection-results.density-4 .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.page-link { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.page-link.active { background: var(--text); color: #fff; border-color: var(--text); }

/* ─── PDP ───────────────────────────────────────────────────────────────── */
.pdp { max-width: 1280px; margin: 0 auto; padding: 32px 20px; display: grid; grid-template-columns: 96px 1fr 1fr; gap: 24px; }
.pdp > .back-link { grid-column: 1 / -1; }
.pdp-gallery { grid-column: 1 / 3; display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
.thumb-rail { display: flex; flex-direction: column; gap: 10px; }
.thumb { border: 2px solid transparent; border-radius: 8px; overflow: hidden; padding: 0; cursor: pointer; background: none; }
.thumb.active { border-color: var(--accent); }
.main-image-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--image-radius, var(--radius)); border: var(--image-border, none); background: var(--border); }
/* Desktop: every slide is stacked full-bleed on top of the others (only
   .active shows) - the thumbnail rail on the left drives which one, same
   single-photo-at-a-time feel as before. Mobile overrides this below into
   a real side-by-side scroll-snap carousel. */
.pdp-carousel-track { position: relative; width: 100%; height: 100%; }
.main-image { width: 100%; height: 100%; object-fit: cover; }
.pdp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 200ms ease; }
.pdp-slide.active { opacity: 1; }
.pdp-image-icons { position: absolute; top: 14px; right: 14px; z-index: 2; display: flex; flex-direction: column; gap: 8px; }
.pdp-image-icons .card-icon-btn { width: 40px; height: 40px; }
.pdp-carousel-dots { display: none; }

/* Share fallback menu (browsers without navigator.share - see
   share-button.js) - positioned absolutely in document coordinates,
   appended straight to <body> so it always floats above card/PDP content. */
.share-popover {
  position: absolute; z-index: 100; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 14px 32px rgba(0, 0, 0, .18); padding: 6px; min-width: 180px;
}
.share-popover button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none;
  border-radius: 6px; cursor: pointer; font: inherit; font-size: 14px; color: var(--text); text-align: left;
}
.share-popover button:hover { background: var(--bg); }
.share-popover svg { flex-shrink: 0; color: var(--muted); }
/* A semi-opaque card, not the bare page background - body copy here
   (Product Details, Care Instructions, etc.) is mostly --muted gray, which
   didn't have enough contrast against a busy/textured background pattern
   to stay legible. Still lets the pattern show through faintly (10%),
   rather than fully hiding it, so it doesn't look like an unrelated white
   box dropped on top. */
.pdp-info {
  grid-column: 3;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.back-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600;
  color: var(--muted); margin-bottom: 14px;
}
.back-link:hover { color: var(--accent); }
.pdp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.pdp-breadcrumb a { color: var(--muted); }
.pdp-breadcrumb a:hover { color: var(--accent-dark); text-decoration: underline; }
.pdp-breadcrumb-current { color: var(--text); font-weight: 600; }
.pdp-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pdp-title-row h1 { font-size: 26px; }
.wishlist-heart { background: none; border: none; cursor: pointer; color: var(--text); flex-shrink: 0; }
.wishlist-heart.active { color: var(--danger); }
.pdp-price { font-size: 22px; font-weight: 700; margin-top: 6px; color: var(--accent); }
.pdp-tax-note { font-size: 12px; margin: 2px 0 16px; }
.size-selector { margin-bottom: 16px; }
.size-selector-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.pill-group { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 8px 16px; cursor: pointer; font-weight: 600; }
.pill.active { background: var(--text); color: #fff; border-color: var(--text); }
.pill.disabled, .pill:disabled { color: var(--muted); text-decoration: line-through; cursor: not-allowed; }
.lead-time-line { font-weight: 600; margin: 4px 0; }
.measurements-line { font-size: 13px; margin: 0 0 16px; }
.pdp-cta-row { display: flex; gap: 10px; margin-top: 18px; }
.pdp-cta-row .btn { flex: 1; }
.pdp-accordions { margin-top: 26px; border-top: 1px solid var(--border); }
.accordion-section { border-bottom: 1px solid var(--border); padding: 14px 0; }
.accordion-section summary { cursor: pointer; font-weight: 600; }
.accordion-body { padding-top: 10px; color: var(--muted); font-size: 14px; }
.sku-line { margin-top: 18px; font-size: 12px; }
.recently-viewed, .similar-products { max-width: 1280px; margin: 20px auto 60px; padding: 0 20px; }

@media (max-width: 900px) {
  /* Buttons read noticeably oversized on a phone screen - a smaller size
     and tighter padding here, on top of the already-reduced desktop size
     above. */
  .btn { font-size: 13px; padding: 10px 18px; }
  .btn-whatsapp { font-size: 14px; }

  .pdp { grid-template-columns: 1fr; }
  .pdp-gallery { grid-column: 1; grid-template-columns: 1fr; }
  /* The thumbnail rail is a desktop "click to pick a photo" affordance -
     on mobile it's replaced entirely by the swipeable/auto-advancing
     carousel below (dots instead of thumbnails). */
  .thumb-rail { display: none; }

  /* Mobile carousel - the same slides that stack on desktop (only .active
     visible) instead lay out side by side in a horizontally-scrolling,
     snap-to-slide strip; JS (product-detail.js) auto-advances it and
     stops permanently the moment it sees a scroll it didn't start itself. */
  .pdp-carousel-track {
    display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .pdp-carousel-track::-webkit-scrollbar { display: none; }
  .pdp-slide {
    position: static; opacity: 1; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start;
  }
  .pdp-carousel-dots {
    display: flex; gap: 6px; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 2;
  }
  .pdp-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: background 150ms ease, width 150ms ease; }
  .pdp-carousel-dot.active { background: #fff; width: 16px; border-radius: 3px; }
  .pdp-info { grid-column: 1; }
  .collection-layout { grid-template-columns: 1fr; }
  /* Replaced on mobile by the three-button row below (Filter/Sort/Size) -
     one wide "Filter & Sort" bar plus a separate dropdown wasted space for
     what's really three small, equally-important choices. */
  .filter-toggle { display: none; }
  .collection-toolbar { display: none; }

  .collection-header { margin-bottom: 10px; }
  /* Title + "(N)" + the Filter/Sort/Size triggers share one row. The title
     is the only flexible piece (min-width:0 lets it actually shrink below
     its own text length instead of forcing the row wider); everything else
     - the count and the button group - is flex-shrink:0 so a long category
     name eats into the title's own space (ellipsis) rather than squeezing
     the buttons smaller or wrapping the row. */
  .collection-heading-row h1 {
    font-size: 19px; margin: 0; min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .collection-count-inline { display: inline; flex-shrink: 0; font-size: 13px; font-weight: 400; }
  .collection-header p.muted[data-result-count] { display: none; }

  .mobile-toolbar-3 { display: flex; gap: 6px; margin-left: auto; flex-shrink: 0; }
  .mobile-toolbar-btn {
    appearance: none; font: inherit; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text); font-weight: 600; font-size: 11px; cursor: pointer;
  }
  .mobile-toolbar-btn.has-value { border-color: var(--accent); color: var(--accent); }

  .sheet-option-list { display: flex; flex-direction: column; gap: 2px; }
  .sheet-option-row {
    appearance: none; text-align: left; padding: 12px 10px; border: none; background: none; border-radius: 8px;
    font: inherit; font-size: 14px; color: var(--text); cursor: pointer;
  }
  .sheet-option-row.active { background: var(--bg); font-weight: 700; color: var(--accent); }

  /* Bottom sheet, not inline content - the filter panel used to sit in
     normal document flow and push the toolbar/results down by its own
     (unbounded) height. Fixed positioning means it only ever covers its
     own slide-up sheet, capped at 80% of the viewport with its own
     scrollbar, never displacing anything else on the page. */
  .filter-panel-backdrop {
    display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 69;
  }
  .filter-panel-backdrop.open { display: block; }
  [data-sheet] {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-height: 80vh; overflow-y: auto;
    background: var(--surface); border-radius: 16px 16px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
    padding: 0 18px 18px; transform: translateY(100%); transition: transform 220ms ease-out;
  }
  [data-sheet].open { transform: translateY(0); }
  body.filter-sheet-open { overflow: hidden; }
  .filter-panel-head {
    display: flex; position: sticky; top: 0; background: var(--surface); align-items: center; justify-content: space-between;
    padding: 16px 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  .filter-panel-apply { display: block; position: sticky; bottom: 0; margin-top: 4px; }
  .filter-group { margin-bottom: 16px; }
  .filter-group .chip { padding: 5px 10px; font-size: 12px; }

  .collection-results.density-2 .product-grid { gap: 12px; }
  .collection-results.density-3 .product-grid,
  .collection-results.density-4 .product-grid { gap: 8px; }
  .collection-results.density-3 .product-card-title,
  .collection-results.density-3 .product-card-price,
  .collection-results.density-4 .product-card-title,
  .collection-results.density-4 .product-card-price { font-size: 11px; }
  .collection-results.density-3 .product-card-body,
  .collection-results.density-4 .product-card-body { padding-top: 6px; }

  /* Card action icons - smaller across the board on mobile (not just at
     "Small" density), since three 32px circles stacked in the corner ate a
     disproportionate share of even a Big-tile image on a phone screen. */
  .product-card-icons { top: 6px; right: 6px; gap: 4px; }
  .card-icon-btn { width: 22px; height: 22px; }
  .card-icon-btn svg { width: 11px; height: 11px; }
  .collection-results.density-3 .card-icon-btn,
  .collection-results.density-4 .card-icon-btn { width: 18px; height: 18px; }
  .collection-results.density-3 .card-icon-btn svg,
  .collection-results.density-4 .card-icon-btn svg { width: 9px; height: 9px; }
  .badge { padding: 2px 6px; font-size: 9px; top: 6px; left: 6px; }
}

/* ─── Cart drawer + cart page ───────────────────────────────────────────── */
.cart-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(400px, 100vw); background: var(--surface);
  z-index: 61; display: flex; flex-direction: column; box-shadow: -12px 0 30px rgba(0,0,0,.2);
  transform: translateX(100%); transition: transform 220ms ease-out;
}
.cart-drawer.open { transform: translateX(0); }
.quick-add-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(360px, 92vw);
  background: var(--surface); border-radius: var(--radius); z-index: 61; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.quick-add-modal-body { padding: 16px 18px; }
.cart-drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.cart-drawer-items { flex: 1; overflow-y: auto; padding: 12px 18px; }
.cart-drawer-footer { padding: 16px 18px; border-top: 1px solid var(--border); }
/* The image used to be a fixed 80px tall while the title/meta/discount/qty
   column next to it grows with its content (a wrapped title, a discount
   line, etc.) - on a narrow drawer that column routinely ends up taller
   than 80px, leaving the qty/trash row dangling below the photo's bottom
   edge instead of lining up with it. Both columns now stretch to the
   row's own height (flex's default cross-axis behavior) and the image
   fills that height itself, so the two always end at the same line. */
.cart-line { display: flex; align-items: stretch; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.cart-line > a { flex-shrink: 0; display: block; align-self: stretch; }
.cart-line img { width: 64px; height: 100%; min-height: 80px; max-height: 140px; object-fit: cover; border-radius: 8px; background: var(--border); display: block; }
.cart-line-body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.cart-line-title { font-weight: 600; font-size: 14px; }
.cart-line-meta { font-size: 12px; color: var(--muted); }
.cart-line-controls { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cart-line-discount { font-size: 12px; color: var(--accent); font-weight: 600; margin-top: 2px; }
.cart-line-remove { padding: 6px; color: var(--muted); }
.cart-line-remove:hover { color: var(--danger); background: rgba(211, 47, 47, .08); }
.qty-btn { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.cart-line.sold-out { opacity: .6; }
.cart-line-total { font-weight: 600; white-space: nowrap; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.summary-row.total { font-weight: 700; font-size: 16px; border-top: 1px solid var(--border); padding-top: 10px; }
/* Most fonts (this store's body serif included) give digits slightly
   different widths by default, so right-aligned ₹ amounts of different
   lengths don't actually line up column-by-column even though the row
   itself is aligned. tabular-nums forces every digit to the same width,
   the standard fix for any column of numbers meant to be scanned/compared
   at a glance. */
.summary-row > span:last-child { font-variant-numeric: tabular-nums; }
.summary-row-issue { padding: 8px; margin: 0 -8px 8px; border-radius: 6px; background: rgba(211, 47, 47, .07); }
.summary-issue-note { color: var(--danger); font-size: 12px; font-weight: 600; }
.checkout-blocking-note { color: var(--danger); font-size: 13px; font-weight: 600; margin-top: 10px; }

.cart-page { max-width: 1000px; margin: 0 auto; padding: 32px 20px 60px; }
.cart-page-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; margin-top: 20px; }
.cart-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; align-self: start; }
@media (max-width: 800px) { .cart-page-layout { grid-template-columns: 1fr; } }

/* ─── Checkout / order confirmation ─────────────────────────────────────── */
.checkout-page, .order-confirmation { max-width: 1100px; margin: 0 auto; padding: 32px 20px 60px; }
.checkout-layout { display: grid; grid-template-columns: 1fr 340px; gap: 32px; margin-top: 16px; }
.checkout-section {
  margin-bottom: 22px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.checkout-section h2 { font-size: 17px; margin-bottom: 16px; }
.field { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
/* .field's own `display: flex` ties the browser default [hidden]{display:none}
   on specificity, and author styles win ties - so a hidden .field (e.g. the
   Area field, shown only for a multi-post-office pincode) would silently
   stay visible without this override. */
.field[hidden] { display: none; }
.field-row { display: flex; gap: 16px; flex-wrap: wrap; }
.field-row .field { flex: 1; min-width: 160px; }
.field label { font-size: 13px; font-weight: 600; }
/* Flags a field as mandatory before a shopper ever tries to submit - same
   "*" convention as the admin's bulk-upload template columns, just shown up
   front here instead of only surfacing via the browser's own validation
   message on a failed submit attempt. */
.required-mark { color: var(--danger); margin-left: 2px; }
.field input, .field select, .field textarea {
  padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); font: inherit;
  background: var(--surface); color: var(--text);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07), inset 0 -1px 0 rgba(255, 255, 255, .5);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field input:hover, .field select:hover, .field textarea:hover {
  border-color: color-mix(in srgb, var(--border) 45%, var(--accent) 55%);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .07), inset 0 -1px 0 rgba(255, 255, 255, .5), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: .8; }
.pincode-hint { font-size: 12px; min-height: 15px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.payment-options { display: flex; flex-direction: column; gap: 10px; }
.radio-row {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  transition: border-color 150ms ease;
}
.radio-row:has(input:checked) { border-color: var(--accent); }
.checkout-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; align-self: start; }
@media (max-width: 800px) { .checkout-layout { grid-template-columns: 1fr; } }

/* ─── Static pages ──────────────────────────────────────────────────────── */
.static-page { max-width: 760px; margin: 0 auto; padding: 40px 20px 60px; }
.static-page-content { color: var(--text); }
.static-page-content p { margin: 0 0 1em; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 28px; }
.footer-grid { max-width: 1280px; margin: 0 auto; padding: 26px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.site-footer h4 { color: var(--footer-text); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 .3em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
/* ".site-footer ul" above (1 class + 1 element = higher specificity than a
   single class alone) would otherwise win and silently keep this flex
   column, making `columns` a no-op despite still showing up in computed
   style - scope this to match/beat it. */
.site-footer .footer-links-columns { display: block; columns: 2; column-gap: 24px; }
.footer-links-columns li { break-inside: avoid; margin-bottom: 6px; }
/* More columns on desktop (plenty of width once this section isn't fighting
   the newsletter block for space) - 2-3 links per column instead of 4,
   shortening the footer further. Mobile stays at 2 (already compact, and
   narrower than this would cramp longer link labels). */
@media (min-width: 700px) {
  .site-footer .footer-links-columns { columns: 4; }
}
.site-footer a:hover { text-decoration: underline; }
.newsletter-form { display: flex; gap: 8px; }
.newsletter-form input { flex: 1; padding: 10px; border-radius: var(--radius); border: none; }
.footer-bottom { text-align: center; padding: 10px; border-top: 1px solid rgba(255,255,255,.1); margin: 0; font-size: 12px; }

/* ─── Floating WhatsApp + toasts ────────────────────────────────────────── */
/* The icon graphic (see WHATSAPP_ICON_URL) already has its own circular
   chrome/bevel look baked in, so this wrapper only positions it - no
   background/border-radius/color of its own, just a floor shadow to lift
   it off the page. */
.whatsapp-float {
  position: fixed; bottom: 20px; right: 20px; width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.3)); z-index: 50;
}
.whatsapp-float img { width: 100%; height: 100%; object-fit: contain; }
.whatsapp-float:hover { transform: scale(1.06); transition: transform 150ms ease; }
#toast-root { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: var(--text); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; box-shadow: 0 8px 20px rgba(0,0,0,.2); }

/* iOS has no install prompt API - the button (see #pwa-install-btn) can
   only open a short manual how-to instead. Sits above .whatsapp-float
   rather than the toast row since it needs to stay up until dismissed, not
   vanish after a couple seconds. */
.pwa-install-tip {
  position: fixed; bottom: 90px; right: 20px; z-index: 55; max-width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 14px 30px 14px 16px; font-size: 13px; color: var(--text);
}
.pwa-install-tip p { margin: 0; line-height: 1.5; }
.pwa-install-tip-close {
  position: absolute; top: 4px; right: 6px; background: none; border: none; font-size: 18px;
  line-height: 1; cursor: pointer; color: var(--muted); padding: 6px;
}

.loading { text-align: center; padding: 40px; color: var(--muted); }

@media (max-width: 700px) {
  .main-nav { display: none; }
  .main-nav.mobile-open {
    display: flex; flex-direction: column; width: 100%; order: 10;
    background: var(--surface); border-top: 1px solid var(--border);
  }
  .main-nav.mobile-open .mega-menu { position: static; opacity: 1; transform: none; pointer-events: auto; display: none; box-shadow: none; border: none; }
  .main-nav.mobile-open .nav-item.open .mega-menu { display: flex; }
  /* The trigger itself stays visible in the open vertical list right above
     this panel, so repeating its text here would just duplicate it - see
     the comment on data-repeats-trigger in layout.ts. */
  .main-nav.mobile-open .mega-col-title[data-repeats-trigger] { display: none; }
  .nav-toggle { display: block; }
  .header-row { flex-wrap: wrap; }
}

/* ─── Live Edit mode (see public/store/js/live-edit.js) ──────────────────
   Store-owner-only click-to-navigate overlay, opened from the admin
   panel's "Live Edit" tab - everything here is inert (and [data-edit-href]
   attributes in the markup are invisible/no-op) unless html carries
   .live-edit-active, so an ordinary shopper's page is never affected. */
.live-edit-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 40px;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: #1a1a2e; color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}
.live-edit-bar button {
  background: #4f46e5; color: #fff; border: none; padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; cursor: pointer;
}
.live-edit-bar button:hover { background: #4338ca; }
html.live-edit-active body { padding-top: 40px; }
html.live-edit-active .sticky-top-group { top: 40px; }

html.live-edit-active [data-edit-href] { position: relative; }
html.live-edit-active [data-edit-href]:hover {
  outline: 2px dashed #4f46e5; outline-offset: -2px; cursor: pointer;
}
html.live-edit-active [data-edit-href]:hover::after {
  content: "✏ Edit"; position: absolute; bottom: 6px; left: 6px; z-index: 10;
  background: #4f46e5; color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; pointer-events: none;
}