/* ========================================
   LIORA — Jewelry Ecommerce
   Light, modern, approachable design
   ======================================== */

/* ---------- Reset & Variables ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Phosphor icon defaults — inherit color, size with em ---------- */
.ph, .ph-fill, .ph-light, .ph-thin, .ph-bold, .ph-duotone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: -0.1em;
}

/* The HTML `hidden` attribute must beat author display rules. Without this,
   `display: inline-flex` on .btn (and similar) keeps `<button hidden>` visible. */
[hidden] { display: none !important; }

/* Custom tooltip used by variant pickers (product page + Quick View) to surface
   the attribute-value description on hover/focus. Wider than native title=, and
   styled to match the rest of the UI. Set [data-tip] on any element. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #2c2825;
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  width: max-content;
  max-width: 240px;
  text-align: center;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  z-index: 100;
  box-shadow: 0 6px 20px -8px rgba(0,0,0,.4);
  transition: opacity .15s ease, transform .15s ease;
}
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #2c2825;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tip]:hover::before,
[data-tip]:focus-visible::before { opacity: 1; }
[data-tip=""]::after, [data-tip=""]::before { display: none; }

:root {
  /* Light modern palette */
  --bg-primary: #faf9f7;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f6f3;
  --bg-elevated: #f3f1ee;
  --bg-input: #f5f4f2;
  --border: #e8e5e0;
  --border-strong: #d4d0c9;

  /* Warm accent — dusty rose / terracotta */
  --accent: #c17f59;
  --accent-light: #d4996f;
  --accent-dark: #a86b48;
  --accent-glow: rgba(193, 127, 89, 0.12);
  --accent-gradient: linear-gradient(135deg, #c17f59, #d4996f);
  --accent-subtle: rgba(193, 127, 89, 0.07);

  /* Secondary — soft sage */
  --sage: #8a9a7b;
  --sage-light: #a3b294;

  /* Text hierarchy */
  --text-primary: #2c2825;
  --text-secondary: #6b6560;
  --text-muted: #9e9892;
  --text-on-accent: #ffffff;

  /* Functional */
  --success: #4caf50;
  --error: #e05252;
  --warning: #e6a817;
  --info: #5b8fd4;

  /* Spacing */
  --nav-height: 68px;
  --container-max: 1280px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.1);

  /* Transitions */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* `overflow-x: clip` cuts off horizontal overflow without creating a
   scrolling context the way `overflow-x: hidden` does. Using `hidden` on
   html/body silently breaks every `position: sticky` element on the page —
   the sticky scope becomes html/body instead of the viewport, and the
   element won't stick. `clip` is the modern fix. */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; scrollbar-gutter: stable; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: clip;

  /* Sticky-footer scaffolding. With the body as a flex column the footer
     can use `margin-top:auto` (below) to claim all the leftover vertical
     space — so on short pages it pins to the bottom of the viewport
     instead of floating in the middle. Works regardless of which content
     wrapper sits above it. */
  display: flex;
  flex-direction: column;
}

/* Push every direct-child footer to the bottom of the viewport on short
   pages. Covers both <footer class="footer"> (the storefront convention)
   and any bare <footer>. Flex-shrink:0 protects against the footer being
   squashed when its own content is tall. */
body > .footer,
body > footer {
  margin-top: auto;
  flex-shrink: 0;
}

a { color: var(--accent); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--accent-dark); }

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  outline: none;
}

::selection { background: var(--accent); color: var(--text-on-accent); }

/* ---------- Container ---------- */
/* `width: 100%` is explicit so the container always fills its parent up to
   `max-width`, even when the inner content has a small intrinsic min-size
   (e.g. an empty-state message inside a `minmax(0, 1fr)` grid). Without it,
   the products page visibly collapses toward content width when the grid
   has no items. */
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.container-narrow { width: 100%; max-width: 800px; margin: 0 auto; padding: 0 24px; }

/* ---------- Typography ---------- */
.section-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-subtitle {
  display: block;
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.7;
  text-align: center;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}
.btn-primary:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(193, 127, 89, 0.25);
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--border-strong);
}
.btn-secondary:hover {
  background: var(--accent-subtle);
  border-color: var(--accent);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 16px;
}
.btn-ghost:hover { color: var(--accent); }

.btn-danger {
  background: rgba(224, 82, 82, 0.08);
  color: var(--error);
  border: 1px solid rgba(224, 82, 82, 0.2);
}
.btn-danger:hover { background: rgba(224, 82, 82, 0.15); }

.btn-sm { padding: 8px 18px; font-size: 0.8rem; }
.btn-lg { padding: 16px 40px; font-size: 1rem; letter-spacing: 0.5px; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }

.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  transition: all 0.3s var(--ease);
}

.nav.scrolled {
  box-shadow: var(--shadow-md);
}

/* On-site announcement bar offset. The bar renders in a fixed strip at the very
   top (above the fixed nav); when present, the SiteMessages island adds
   `.has-site-bar` + publishes --site-bar-height so the fixed nav drops below the
   bar and page content is pushed down by the same amount. */
body.has-site-bar {
  padding-top: var(--site-bar-height, 0px);
}
body.has-site-bar .nav {
  top: var(--site-bar-height, 0px);
}

.nav-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-primary);
  letter-spacing: 2px;
  font-weight: 500;
}
.nav-logo span { font-weight: 700; color: var(--accent); }

/* Image logo — the canonical brand mark, rendered server-side in every page's
   HTML so search engines and screen readers see it on first paint with no
   layout shift. Drop a file at /images/logo/logo-2.png (or any path used in the markup)
   and it shows up everywhere. */
.nav-logo img {
  display: block;
  height: 45px;
  margin-left: -9px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  color: var(--text-secondary);
  font-size: 0.85rem;
  letter-spacing: 0.3px;
  font-weight: 500;
  position: relative;
  padding: 4px 0;
  transition: color 0.2s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: width 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--text-primary); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-action-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  position: relative;
  font-size: 1.1rem;
}
.nav-action-btn:hover { color: var(--accent); background: var(--accent-subtle); }

.cart-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mobile menu */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.nav-hamburger span {
  width: 22px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 1px;
  transition: all 0.3s var(--ease);
}

.mobile-menu {
  display: none;
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-secondary);
  z-index: 99;
  padding: 24px;
}
.mobile-menu.open { display: block; }
.mobile-menu a {
  display: block;
  padding: 14px 0;
  font-size: 1rem;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}
.mobile-menu a:hover { color: var(--accent); }

/* ---------- Hero / Slider ---------- */
.hero {
  position: relative;
  height: calc(100vh - var(--nav-height));
  min-height: 500px;
  max-height: 800px;
  margin-top: var(--nav-height);
  overflow: hidden;
}

.hero-slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--ease);
  display: flex;
  align-items: center;
}
.hero-slide.active { opacity: 1; }

.hero-slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Desktop image — set inline via the --hero-bg custom property. */
  background-image: var(--hero-bg);
}
/* On small screens prefer the per-slide mobile image, falling back to the
   desktop one when no mobile image is configured for that slide. */
@media (max-width: 600px) {
  .hero-slide-bg {
    background-image: var(--hero-bg-mobile, var(--hero-bg));
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}

.hero-label {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,255,255,0.85);
  padding: 8px 20px;
  border-radius: 30px;
  margin-bottom: 20px;
  font-weight: 600;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 16px;
  max-width: 600px;
  color: var(--text-primary);
}
.hero-title em {
  font-style: italic;
  color: var(--accent);
}

.hero-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 460px;
  margin-bottom: 32px;
  line-height: 1.7;
}

.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

.hero-nav {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 3;
}
.hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.hero-dot.active {
  background: var(--accent);
  width: 28px;
  border-radius: 5px;
}

.hero-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 3;
  pointer-events: none;
}
.hero-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: all 0.3s var(--ease);
  box-shadow: var(--shadow-sm);
}
.hero-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---------- Hero (Joice-inspired): full-bleed image + animated label ---------- */
.hero-split .hero-slides { height: 100%; }
.hero-split .hero-slide-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  transition: transform 7s var(--ease);
}
.hero-split .hero-slide.active .hero-slide-bg { transform: scale(1); }
.hero-split .hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(20,16,12,0.55) 0%,
    rgba(20,16,12,0.30) 45%,
    rgba(20,16,12,0.05) 80%);
  z-index: 1;
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  margin: 0;
  padding-left: 400px;
  width: 100%;
  height: 100%;
}
.hero-split .hero-content { padding: 0; max-width: 560px; margin: 0; }

/* Eyebrow label — Slider Revolution-style staggered char drop-in */
.hero-split .hero-label {
  display: inline-block;
  background: transparent;
  padding: 0;
  margin-bottom: 22px;
  font-size: 0.78rem;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.92);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}
.rs-char-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.1;
}
.rs-char {
  display: inline-block;
  transform: translateY(-110%) rotate(35deg);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.4s ease;
}
.hero-slide.active .rs-char {
  transform: translateY(0) rotate(0);
  opacity: 1;
}

.hero-split .hero-title {
  font-size: clamp(2.4rem, 5.4vw, 3.9rem);
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1.12;
  text-transform: none;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}
.hero-split .hero-title em {
  font-style: italic;
  color: #fff;
  display: inline-block;
  border-bottom: 2px solid var(--accent-light);
  padding-bottom: 2px;
}
.hero-split .hero-desc {
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 12px rgba(0,0,0,0.18);
}

.hero-slide.active .hero-title,
.hero-slide.active .hero-desc,
.hero-slide.active .hero-buttons {
  animation: heroSlideUp 0.9s var(--ease) both;
}
.hero-slide.active .hero-title    { animation-delay: 0.18s; }
.hero-slide.active .hero-desc     { animation-delay: 0.34s; }
.hero-slide.active .hero-buttons  { animation-delay: 0.50s; }
@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 36px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 1px;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  text-transform: uppercase;
  transition: all 0.35s var(--ease);
}
.btn-hero:hover {
  background: #fff;
  color: var(--text-primary);
}

/* Light dots/arrows over dark image */
.hero-split .hero-dot { background: rgba(255,255,255,0.4); }
.hero-split .hero-dot.active { background: #fff; width: 28px; }
.hero-split .hero-arrow {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.45);
  color: #fff;
  backdrop-filter: blur(8px);
}
.hero-split .hero-arrow:hover {
  background: #fff;
  color: var(--text-primary);
  border-color: #fff;
}

@media (max-width: 860px) {
  .hero-grid { padding: 0 24px; }
  .hero-split .hero-content { max-width: 100%; }
}

/* ---------- Arrivals — modern bento showcase ---------- */
.arrivals {
  position: relative;
  padding: clamp(80px, 11vw, 130px) 0 clamp(70px, 9vw, 110px);
  overflow: hidden;
  background: var(--bg-primary);
}
/* Two large, blurred radial blobs add depth without competing with photos. */
.arrivals-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}
.arrivals-glow-a {
  width: 520px;
  height: 520px;
  top: -160px;
  left: -160px;
  background: radial-gradient(circle, rgba(193,127,89,0.32), transparent 70%);
  animation: arrivalsGlow 14s ease-in-out infinite alternate;
}
.arrivals-glow-b {
  width: 580px;
  height: 580px;
  bottom: -200px;
  right: -180px;
  background: radial-gradient(circle, rgba(138,154,123,0.22), transparent 70%);
  animation: arrivalsGlow 17s ease-in-out -4s infinite alternate-reverse;
}
@keyframes arrivalsGlow {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, -30px) scale(1.08); }
}
.arrivals-shell {
  position: relative;
  z-index: 1;
  max-width: var(--container-max);
  margin: 0 auto;
  /* Min matches `.container`'s 24px gutter so bento cards line up with the
     rest of the page's content edge on mobile. Going below 24px made the
     cards visibly poke past every other section on narrow screens. */
  padding: 0 clamp(24px, 4vw, 48px);
}

/* ----- Heading block ----- */
.arrivals-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.arrivals-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-bottom: 22px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.arrivals-pulse {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.arrivals-pulse::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.45;
  animation: arrivalsPulse 1.8s ease-out infinite;
}
@keyframes arrivalsPulse {
  0%   { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(2.4); opacity: 0;    }
}
.arrivals-title {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin-bottom: 16px;
}
.arrivals-title em {
  font-style: italic;
  font-weight: 400;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.arrivals-sub {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 540px;
  margin: 0 auto;
}

/* ----- Bento grid: 1 feature + 2 small + 1 wide ----- */
.arrivals-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(220px, 25vw, 320px);
  gap: 16px;
}
.arrivals-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --shine-x: 50%;
  --shine-y: 50%;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 22px;
  /* Solid warm placeholder so empty cards read as deliberate design rather
     than blank space against the cream page background. */
  background:
    linear-gradient(135deg, #d4996f 0%, #e9c8b6 55%, #f3dccc 100%);
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  box-shadow: 0 4px 20px -8px rgba(44,40,37,0.15), 0 1px 2px rgba(44,40,37,0.06);
  min-height: 220px;
  /* Default placement: 3-wide tiles fill the rest of the grid. */
  grid-column: span 3;
  grid-row: span 1;
  transition:
    transform 0.5s var(--ease),
    box-shadow 0.4s var(--ease);
  will-change: transform;
}
/* Subtle shimmer placeholder while image hasn't loaded yet. */
.arrivals-card:not(.has-img) .arrivals-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: arrivalsShimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes arrivalsShimmer {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.arrivals-card.has-img .arrivals-img::before { display: none; }
.arrivals-card--feature { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.arrivals-card--wide    { grid-column: 7 / span 6; grid-row: 2 / span 1; }

/* Tilt — CSS vars (--tilt-*/--shine-/*) are written by JS on pointermove. */
.arrivals-card {
  transform:
    perspective(1200px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
}
.arrivals-card:hover {
  box-shadow:
    0 24px 60px -22px rgba(44,40,37,0.32),
    0 8px 20px -10px rgba(44,40,37,0.18);
}

.arrivals-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.arrivals-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
  transform: scale(1.02);
}
.arrivals-card:hover .arrivals-img img { transform: scale(1.08); }

/* Soft bottom gradient so the chip stays legible on every photo. */
.arrivals-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 100%);
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
/* Cursor-tracked specular shine. */
.arrivals-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--shine-x) var(--shine-y), rgba(255,255,255,0.22), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  mix-blend-mode: soft-light;
}
.arrivals-card:hover::after { opacity: 1; }

/* "New In" pill on the feature card. */
.arrivals-badge {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.18);
}
.arrivals-badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(193,127,89,0.25);
}

/* Frosted product chip — name + price + arrow CTA. */
/* Compact pill — sized to content, sits at bottom-left, lets the image
   breathe at rest and crisps up on hover for full legibility. */
.arrivals-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 28px);
  padding: 7px 8px 7px 14px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  box-shadow: 0 8px 24px -16px rgba(0,0,0,0.45);
  transform: translateY(4px);
  opacity: 0.92;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease),
              transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.arrivals-card:hover .arrivals-chip {
  background: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.7);
  transform: translateY(0);
  opacity: 1;
}
.arrivals-chip-name {
  flex: 1;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: #1a1410;                 /* theme-independent — chip bg is always light */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.arrivals-chip-price {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--accent-dark);
  white-space: nowrap;
}
.arrivals-chip-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(26,20,16,0.82);
  color: #fff;
  font-size: 0.78rem;
  line-height: 1;
  transition: background 0.35s var(--ease), transform 0.35s var(--ease);
}
.arrivals-card:hover .arrivals-chip-arrow {
  background: var(--accent);
  transform: translateX(2px);
}

/* ----- CTA pill ----- */
.arrivals-foot {
  margin-top: clamp(40px, 5vw, 56px);
  text-align: center;
}
.arrivals-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid var(--text-primary);
  border-radius: 999px;
  text-decoration: none;
  transition:
    background 0.4s var(--ease),
    color 0.4s var(--ease),
    transform 0.3s var(--ease),
    box-shadow 0.4s var(--ease);
}
.arrivals-cta svg { transition: transform 0.4s var(--ease); }
.arrivals-cta:hover {
  background: var(--text-primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(44,40,37,0.5);
}
.arrivals-cta:hover svg { transform: translateX(5px); }

/* ----- Outline button (used elsewhere on the page) ----- */
.btn-outline {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
  border-radius: 0;
  transition: all 0.35s var(--ease);
}
.btn-outline:hover { background: var(--text-primary); color: #fff; }

/* ----- Tablet ----- */
@media (max-width: 1024px) {
  .arrivals-bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 240px;
  }
  .arrivals-card { grid-column: span 3; }
  .arrivals-card--feature { grid-column: 1 / -1; grid-row: span 2; }
  .arrivals-card--wide    { grid-column: 1 / -1; }
}

/* ----- Mobile ----- */
@media (max-width: 640px) {
  .arrivals-bento {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    gap: 14px;
  }
  .arrivals-card {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 5;
    /* Grid items default min-width: auto, which can exceed the track when
       an image has intrinsic dimensions. Pin it to 0 so cards always fit
       inside the bento's single mobile column. */
    min-width: 0;
    max-width: 100%;
  }
  .arrivals-card--feature { aspect-ratio: 4 / 5; }
  .arrivals-card--wide    { aspect-ratio: 16 / 10; }
  .arrivals-chip { padding: 11px 14px; gap: 10px; border-radius: 12px; }
  .arrivals-chip-name { font-size: 0.85rem; }
  .arrivals-chip-price { font-size: 0.95rem; }
  .arrivals-chip-arrow { width: 28px; height: 28px; }
  .arrivals-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arrivals-glow,
  .arrivals-pulse::after,
  .arrivals-card:not(.has-img) .arrivals-img::before { animation: none; }
  .arrivals-card { transition: box-shadow 0.3s ease; }
  .arrivals-card:hover .arrivals-img img { transform: scale(1.02); }
}

/* ---------- Dual Banners (996dbca) ----------
   Two stagger-boxes share the section. Each one stacks
     eyebrow → h3 → description → button
   in normal flow, plus a tall portrait image absolutely positioned at the OUTER
   edge of the section (left half pulls left, right half pulls right). The wave
   SVG fills the section background beneath both halves. */
.banners {
  position: relative;
  padding: 0;
  overflow: hidden;
  background: var(--bg-primary);
}
/* Background waves are hidden because the full-bleed banner images now
   cover the entire section. Kept in the DOM so the SVG markup doesn't
   need to change — flip back to block to restore the older look. */
.banners-waves { display: none; }

.banners-grid {
  position: relative;
  z-index: 2;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.banner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(580px, 58vw, 760px);
  overflow: hidden;
  isolation: isolate;                            /* scope the overlay z-index to this banner */
  padding: clamp(70px, 8vw, 110px) clamp(28px, 5vw, 80px);
  color: #fff;
}
/* Text gravitates toward the section's center — left banner pins right,
   right banner pins left. Gives the layout a natural inward focal point. */
.banner-l { align-items: flex-end;   text-align: right; }
.banner-r { align-items: flex-start; text-align: left;  }

/* Subtle gradient so light text stays readable across most photos. The
   user picks contrast-friendly images, so we keep the wash light. */
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,12,8,0.18) 0%, rgba(20,12,8,0.42) 100%);
  z-index: -1;
  pointer-events: none;
}
/* Wash sits under the text: left banner darkens its right side,
   right banner darkens its left side. */
.banner-l::after { background: linear-gradient(270deg, rgba(20,12,8,0.45) 0%, rgba(20,12,8,0.10) 70%); }
.banner-r::after { background: linear-gradient(90deg,  rgba(20,12,8,0.45) 0%, rgba(20,12,8,0.10) 70%); }

.banner-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #f4d8c5;
  font-weight: 500;
  margin-bottom: 14px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.banner-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 18px;
  text-transform: none;
  color: #fff;
  max-width: 480px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.banner-desc {
  font-size: 0.98rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 380px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  z-index: -2;
  filter: none;
}

/* Outline button on a photo: light variant so it reads against any image. */
.banner .btn-outline,
.banner .btn-outline:link,
.banner .btn-outline:visited {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.7);
  color: #fff;
  backdrop-filter: blur(2px);
}
.banner .btn-outline:hover {
  background: rgba(255,255,255,0.18);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 860px) {
  .banners-grid { grid-template-columns: 1fr; gap: 0; }
  .banner { min-height: 480px; padding: 70px 22px; align-items: flex-start; text-align: left; }
  .banner-l::after,
  .banner-r::after { background: linear-gradient(180deg, rgba(20,12,8,0.20) 0%, rgba(20,12,8,0.50) 100%); }
}

@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Section Spacing ---------- */
.section {
  padding: 80px 0;
}
.section-header {
  text-align: center;
  margin-bottom: 48px;
}

/* ---------- Category Cards ---------- */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.category-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
.category-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s var(--ease);
}
.category-card:hover .category-card-bg { transform: scale(1.06); }

.category-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44,40,37,0.75) 0%, rgba(44,40,37,0.05) 60%);
}

.category-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px;
}

.category-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 4px;
}
.category-card p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
}
.category-card .arrow {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  opacity: 0;
  transform: translateX(-8px);
  transition: all 0.3s var(--ease);
}
.category-card:hover .arrow { opacity: 1; transform: translateX(0); }

/* ---------- Product Card ---------- */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}
/* Shop page: always 3 per row (overridden in responsive rules below) */
.shop-layout .products-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  perspective: 1200px;        /* enables 3D tilt on cards */
}

/* Wishlist page. The default `.products-grid` rule uses an auto-fill 1fr
   track which means a single saved item stretches edge-to-edge, while four
   items shrink to ~300 px each — the layout visibly "shrinks based on the
   data" the user described. Pinning a 4-column grid (matching the home
   page's New Arrivals rail) keeps the tile width identical regardless of
   how many items the customer has saved. The empty-state placeholder spans
   the whole grid via `grid-column: 1/-1` (already in the HTML). */
.wishlist-page { margin-top: calc(var(--nav-height) + 32px); padding-bottom: 80px; }
.wishlist-page .products-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

/* Shop-page product cards get the same 3D tilt + cursor-shine treatment as
   the New Arrivals section on the home page (matched aspect ratio + tilt) */
.shop-layout .product-card .product-card-image { aspect-ratio: 4/5; }
.shop-layout .product-card {
  transform-style: preserve-3d;
  will-change: transform;
  /* fast, near-linear transition during move = no lag; the longer ease
     for snap-back on leave is set inline by JS via .is-leaving */
  transition: transform 0.08s linear, box-shadow 0.3s var(--ease);
}
.shop-layout .product-card.is-leaving {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s var(--ease);
}
.shop-layout .product-card:hover {
  transform: none;            /* the tilt transform is set inline by JS */
  box-shadow: 0 30px 50px -20px rgba(44,40,37,0.28);
  border-color: transparent;
}
.shop-layout .product-card::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at var(--shine-x, 50%) var(--shine-y, 50%),
              rgba(255,255,255,0.22), transparent 60%);
  mix-blend-mode: overlay;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  z-index: 4;
}
.shop-layout .product-card:hover::after { opacity: 0.35; }

.product-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: all 0.3s var(--ease);
  position: relative;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.product-card-image {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--bg-elevated);
}
/* The anchor wrapping the image needs to actually fill the aspect-ratio
   box; left as an inline element it collapses to zero height and the
   img's height:100% has nothing to resolve against — so the card snaps
   from "tall enough for the anchor's line-box" to "tall enough for the
   loaded image" the moment the image arrives. Block-level + absolute
   inset locks the anchor to the container regardless of image state. */
.product-card-image > a {
  position: absolute;
  inset: 0;
  display: block;
}
.product-card-image .img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), opacity 0.4s var(--ease);
}
.product-card:hover .product-card-image img { transform: scale(1.05); }

/* Hover image swap — second image fades over the primary */
.product-card-image img.product-card-img-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.product-card:hover .product-card-image img.product-card-img-hover { opacity: 1; }
.product-card:hover .product-card-image img.product-card-img-primary { opacity: 0; }

.product-card-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: all 0.3s var(--ease);
}
.product-card:hover .product-card-actions { opacity: 1; transform: translateY(0); }

.product-card-action {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm);
}
.product-card-action:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.product-card-action.wishlisted { color: #e05252; }

.product-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.product-badge.sale { background: var(--error); color: #fff; }
.product-badge.new { background: var(--accent); color: #fff; }
.product-badge.out { background: var(--bg-elevated); color: var(--text-muted); }

.product-card-info { padding: 16px; }

.product-card-category {
  font-size: 0.7rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
  font-weight: 600;
}

.product-card-name {
  font-size: 0.95rem;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-name a { color: var(--text-primary); }
.product-card-name a:hover { color: var(--accent); }

.product-card-price { display: flex; align-items: center; gap: 8px; }
.product-card-price .current { font-weight: 600; font-size: 1.05rem; color: var(--text-primary); }
.product-card-price .compare { font-size: 0.85rem; color: var(--text-muted); text-decoration: line-through; }

.product-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.product-card-rating .stars { color: var(--warning); font-size: 0.75rem; }

/* ---------- Product Detail Page ----------
   Same fixed-width pattern as checkout / cart: pin both columns to pixel
   widths so a product with a long title (info column) or a tall variant
   selector doesn't quietly shrink the gallery on the other side. */
.product-detail {
  --product-gallery-w: 580px;
  --product-info-w: 560px;
  margin-top: calc(var(--nav-height) + 32px);
  padding-bottom: 80px;
}

.product-detail-grid {
  display: grid;
  grid-template-columns: var(--product-gallery-w) var(--product-info-w);
  gap: 48px;
  align-items: start;
  justify-content: center;
}
.product-detail-grid > * { min-width: 0; }

@media (max-width: 1180px) {
  .product-detail { --product-gallery-w: 100%; --product-info-w: 100%; }
  .product-detail-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 32px;
  }
}

.product-gallery {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
}
.product-gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--bg-elevated);
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}
.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 0.25s var(--ease);
  will-change: transform;
}
.product-gallery-main.zooming { cursor: zoom-out; }
.product-gallery-main.zooming img { transform: scale(1.5); transition-duration: 0.08s; }
@media (hover: none) {
  .product-gallery-main { cursor: default; }
  .product-gallery-main.zooming img { transform: none; }
}
.product-gallery-thumbs {
  display: flex;
  gap: 8px;
}
.product-gallery-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s var(--ease);
  opacity: 0.5;
}
.product-gallery-thumb.active, .product-gallery-thumb:hover { border-color: var(--accent); opacity: 1; }
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info { padding-top: 12px; }

.product-info-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.product-info-breadcrumb a { color: var(--text-muted); }
.product-info-breadcrumb a:hover { color: var(--accent); }

.product-info h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 12px;
  line-height: 1.2;
}

.product-info-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.product-info-price .current {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
}
.product-info-price .compare {
  font-size: 1.1rem;
  color: var(--text-muted);
  text-decoration: line-through;
}
.product-info-price .discount {
  background: rgba(224, 82, 82, 0.1);
  color: var(--error);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.product-info-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}
.product-info-rating .stars { color: var(--warning); }
.product-info-rating .count { color: var(--text-muted); }

.product-info-desc {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 28px;
}

.product-info-meta {
  margin: 8px 0 28px;
  border-top: 1px solid var(--border);
}
.product-info-meta:not(:has(.product-meta-item)) { display: none; }
.product-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border);
}
.product-meta-item label {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}
.product-meta-item span {
  font-size: 0.9rem;
  color: var(--text-primary);
  text-align: right;
  word-break: break-word;
}
.product-meta-item .meta-yes,
.product-meta-item .meta-no {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
}
.product-meta-item .meta-yes { color: var(--success, #10b981); }
.product-meta-item .meta-no { color: var(--text-muted); }
.product-meta-item .meta-yes::before { content: "\2713"; font-weight: 700; }
.product-meta-item .meta-no::before { content: "\2014"; font-weight: 700; }

.product-quantity {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.quantity-btn {
  width: 40px;
  height: 40px;
  background: var(--bg-elevated);
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quantity-btn:hover { background: var(--accent-subtle); color: var(--accent); }
.quantity-value {
  width: 48px;
  text-align: center;
  font-weight: 600;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  height: 40px;
}

.product-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}
.product-actions .btn { flex: 1; }

.product-stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.stock-dot.in-stock { background: var(--success); }
.stock-dot.low-stock { background: var(--warning); }
.stock-dot.out-of-stock { background: var(--error); }

/* ---------- Filters Sidebar ---------- */
.shop-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 32px;
  margin-top: calc(var(--nav-height) + 32px);
  padding-bottom: 80px;
}
.shop-layout > main { min-width: 0; }

.filters-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  height: fit-content;
  min-width: 0;
}

/* Mobile-only filter drawer chrome — hidden on desktop, activated below. */
.filters-toggle { display: none; }
.filters-close { display: none; }
.filters-backdrop { display: none; }
.filters-drawer-header { display: none; }

.filter-group {
  margin-bottom: 28px;
}
.filter-group-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-bottom: 12px;
  font-weight: 600;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: color 0.2s;
  user-select: none;
}
.filter-option:hover, .filter-option.active { color: var(--accent); }

.filter-option input[type="checkbox"],
.filter-option input[type="radio"] { display: none; }

.filter-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  font-size: 0.7rem;
  color: transparent;
}
.filter-option.active .filter-check {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Tag chip filters */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.75rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  user-select: none;
}
.filter-tag:hover { border-color: var(--accent); color: var(--accent); }
.filter-tag.active {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 500;
}
.filter-tag-count { font-size: 0.65rem; opacity: 0.7; }

.price-range {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.price-input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.price-input::placeholder { color: var(--text-muted); }

.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.active-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--accent-subtle);
  border: 1px solid rgba(193,127,89,0.2);
  border-radius: 20px;
  font-size: 0.8rem;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--accent);
}
.active-filter button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.shop-count { color: var(--text-muted); font-size: 0.9rem; }

/* Keyword search in the shop toolbar (migration: legacy drove search via a
   ?search= URL param with no visible field). Pairs an input with a submit
   button styled like a nav action. */
.shop-search {
  display: flex;
  align-items: center;
  gap: 6px;
}
.shop-search input {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 12px;
  font-size: 0.85rem;
  min-width: 180px;
}
.shop-search input:focus {
  outline: none;
  border-color: var(--accent);
}

.shop-sort select {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 32px 8px 12px;
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239e9892' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ---------- Cart Page ---------- */
/* Columns are FIXED — see the comment on `.checkout-page` for the rationale.
   Same pattern: pixel widths + `justify-content: center`, collapse via a
   dedicated breakpoint at the bottom of this block. */
.cart-page {
  --cart-items-w: 720px;
  --cart-aside-w: 380px;
  margin-top: calc(var(--nav-height) + 32px);
  padding-bottom: 80px;
}

.cart-layout {
  display: grid;
  grid-template-columns: var(--cart-items-w) var(--cart-aside-w);
  gap: 32px;
  align-items: start;
  justify-content: center;
}
.cart-layout > * { min-width: 0; }

@media (max-width: 1180px) {
  .cart-page { --cart-items-w: 100%; --cart-aside-w: 100%; }
  .cart-layout {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 24px;
  }
}

.cart-items { display: flex; flex-direction: column; gap: 12px; }

.cart-item {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.cart-item-image {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
}
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-details { flex: 1; }
.cart-item-name { font-weight: 500; margin-bottom: 4px; }
.cart-item-name a { color: var(--text-primary); }
.cart-item-name a:hover { color: var(--accent); }
.cart-item-meta { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px; }
.cart-item-bottom { display: flex; align-items: center; justify-content: space-between; }
.cart-item-price { font-weight: 600; color: var(--text-primary); font-size: 1.05rem; }
.cart-item-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.8rem;
  transition: color 0.2s;
}
.cart-item-remove:hover { color: var(--error); }

.cart-summary {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.cart-summary h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin-bottom: 20px;
}
.cart-summary-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.cart-summary-row.total {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 16px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.coupon-input {
  display: flex;
  gap: 8px;
  margin: 16px 0;
}
.coupon-input input {
  flex: 1;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

.cart-summary .btn { width: 100%; margin-top: 16px; }

.cart-empty { text-align: center; padding: 80px 20px; }
.cart-empty h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: 12px; }
.cart-empty p { color: var(--text-secondary); margin-bottom: 24px; }

/* ---------- Checkout ----------
   Columns are FIXED, not fluid (same pattern as the profile page). The
   form column was previously `1fr`, which let intrinsic content (the
   Stripe Payment Element, a long saved-address tile, etc.) push the
   track wider on some steps and narrower on others. With both tracks
   set to concrete pixel widths the layout is identical on every step. */
.checkout-page {
  --checkout-form-w: 720px;
  --checkout-aside-w: 400px;
  margin-top: calc(var(--nav-height) + 32px);
  padding-bottom: 80px;
}

/* ---------- Checkout step indicator ---------- */
.checkout-steps {
  display: flex; align-items: center; gap: 16px;
  font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 32px;
}
.checkout-step { display: inline-flex; align-items: center; gap: 10px; }
.checkout-step-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-secondary); color: var(--text-muted);
  font-family: var(--font-display); font-size: 0.85rem;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0; transition: all 0.3s var(--ease);
}
.checkout-step.is-active { color: var(--text-primary); }
.checkout-step.is-active .checkout-step-num { background: var(--accent); color: #fff; }
.checkout-step.is-done .checkout-step-num { background: var(--accent); color: #fff; }
.checkout-step.is-done .checkout-step-num::before { content: '\2713'; font-family: var(--font-body); font-weight: 700; }
.checkout-step.is-done .checkout-step-num span { display: none; }
.checkout-step-sep { color: var(--text-muted); opacity: 0.5; }

/* Stripe Payment Element container */
#payment-element { margin: 8px 0 16px; min-height: 220px; }
.payment-message {
  color: #d8624a; font-size: 0.85rem; margin-top: 10px;
  min-height: 18px;
}

/* Banner shown when STRIPE_*_KEY isn't set so the admin understands why
   "Continue to Payment" instantly completes the order. */
.stripe-warning {
  background: #fef4e6; border: 1px solid #f0c987; color: #6b4c1f;
  padding: 14px 18px; border-radius: var(--radius);
  font-size: 0.85rem; line-height: 1.5;
  margin-bottom: 24px;
}
.stripe-warning code {
  background: rgba(0,0,0,0.06); padding: 1px 6px; border-radius: 4px;
  font-size: 0.8rem;
}

/* Saved-address picker (radio-card grid) */
.saved-addresses {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.saved-address {
  position: relative; cursor: pointer; user-select: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; background: var(--bg-card);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.saved-address:hover { border-color: var(--accent); }
.saved-address.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(168,88,56,0.12);
  padding-bottom: 30px;
}
.saved-address input[type="radio"] {
  position: absolute; top: 12px; right: 12px;
  width: 16px; height: 16px; accent-color: var(--accent);
  margin: 0; cursor: pointer;
}
.saved-address-body { padding-right: 22px; }
.saved-address-label {
  font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.saved-address-default {
  font-size: 0.65rem; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent);
  background: rgba(168,88,56,0.1); padding: 2px 8px; border-radius: 999px;
}
.saved-address-text {
  font-size: 0.8rem; color: var(--text-muted); line-height: 1.5;
}
.saved-address-del {
  position: absolute; bottom: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: all 0.2s var(--ease);
}
.saved-address:hover .saved-address-del { opacity: 1; }
.saved-address-del:hover { color: #d8624a; background: rgba(216,98,74,0.08); }
.saved-address-edit {
  position: absolute; bottom: 8px; left: 14px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font-size: 0.75rem; font-weight: 500;
  text-decoration: underline; text-underline-offset: 2px;
}
.saved-address-edit:hover { color: var(--accent-hover, var(--accent)); }
.saved-address-new {
  border-style: dashed;
}
.saved-address-new-body {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; color: var(--text-secondary); font-weight: 500;
}
.saved-address-plus {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg-secondary); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 500;
}

/* Collapse the address form when a saved address is selected */
#addressFormWrap.is-collapsed { display: none; }

/* "Save this address" toggle below the form */
.checkout-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 8px; font-size: 0.85rem; color: var(--text-secondary);
  cursor: pointer; user-select: none;
}
.checkout-toggle input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer;
}

.checkout-layout {
  display: grid;
  grid-template-columns: var(--checkout-form-w) var(--checkout-aside-w);
  gap: 40px;
  align-items: start;
  justify-content: center;        /* center the fixed-width grid in the page */
}
/* min-width:0 stops a grid item's intrinsic content (Stripe Payment Element,
   long address tiles) from renegotiating the track widths. */
.checkout-layout > * { min-width: 0; }

/* Collapse to a single full-width column before the fixed 720 + 40 + 400
   layout would start overflowing the container's 24 px gutter. Matches the
   1180px breakpoint used by `.cart-layout` and `.product-detail-grid` so
   all three checkout-adjacent pages collapse together. */
@media (max-width: 1180px) {
  .checkout-page { --checkout-form-w: 100%; --checkout-aside-w: 100%; }
  .checkout-layout {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 24px;
  }
}

.checkout-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.checkout-section h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

/* ---------- Forms ---------- */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
  font-weight: 500;
}
.form-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  transition: border-color 0.2s;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.form-input::placeholder { color: var(--text-muted); }

/* Validation: when a required field is empty on submit, the JS adds
 * .is-invalid → red border pulse + a one-shot shake to draw the eye.
 * The class is removed on the next 'input' so the error clears as the
 * user starts typing. */
.form-input.is-invalid {
  border-color: var(--error);
  animation: formFieldShake 0.4s ease, formFieldPulse 1.2s ease-in-out infinite 0.4s;
}
@keyframes formFieldShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}
@keyframes formFieldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0); border-color: var(--error); }
  50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18); border-color: var(--error); }
}
@media (prefers-reduced-motion: reduce) {
  .form-input.is-invalid { animation: none; }
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.form-error { font-size: 0.8rem; color: var(--error); margin-top: 4px; }

select.form-input {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239e9892' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

textarea.form-input { resize: vertical; min-height: 100px; }

/* Shipping method cards */
.shipping-options { display: flex; flex-direction: column; gap: 10px; }
.shipping-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s;
}
.shipping-option:hover, .shipping-option.selected { border-color: var(--accent); }
.shipping-option.selected { background: var(--accent-subtle); }
.shipping-radio {
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.shipping-option.selected .shipping-radio { border-color: var(--accent); }
.shipping-option.selected .shipping-radio::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.shipping-details { flex: 1; }
.shipping-details .name { font-weight: 500; font-size: 0.9rem; }
.shipping-details .desc { font-size: 0.8rem; color: var(--text-muted); }
.shipping-price { font-weight: 600; color: var(--text-primary); }

/* ---------- Auth Pages ---------- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg-primary);
}

.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}

.auth-header {
  text-align: center;
  margin-bottom: 32px;
}
.auth-header .logo {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--text-primary);
  letter-spacing: 2px;
  margin-bottom: 12px;
  display: block;
}
.auth-header h2 {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.auth-header p { color: var(--text-muted); font-size: 0.9rem; }

.auth-form .btn { width: 100%; margin-top: 8px; }

.auth-divider {
  text-align: center;
  margin: 24px 0;
  position: relative;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }

.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Verification code input */
.verify-code {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 24px 0;
}
.verify-code input {
  width: 48px;
  height: 56px;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--accent);
  transition: border-color 0.2s;
}
.verify-code input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* ---------- Features / Benefits Row ---------- */
.features-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px 0;
}
.feature-item {
  text-align: center;
  padding: 24px;
}
.feature-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--accent-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.2rem;
}
.feature-item h4 { font-size: 0.9rem; margin-bottom: 4px; }
.feature-item p { font-size: 0.8rem; color: var(--text-muted); }

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--accent-subtle);
  padding: 60px 0;
  text-align: center;
}
.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 480px;
  margin: 24px auto 0;
}
.newsletter-form input {
  flex: 1;
  padding: 14px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

/* ---------- Footer ---------- */
.footer {
  background: #2c2825;
  color: #d4d0c9;
  padding: 60px 0 24px;
}
.footer-grid {
  display: grid;
  /* 5 columns: Brand · Shop · Account · Read · Help. The brand column
     stays at 1.5fr so the logo + tagline have room; the four link
     columns share the rest evenly. Gap stays at 40px on desktop. */
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
.footer-brand p {
  color: #9e9892;
  font-size: 0.85rem;
  margin-top: 12px;
  line-height: 1.7;
}
.footer .nav-logo { color: #fff; }
.footer .nav-logo span { color: var(--accent-light); }
.footer h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
  margin-bottom: 16px;
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: #9e9892; font-size: 0.85rem; transition: color 0.2s; }
.footer-links a:hover { color: var(--accent-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 0.8rem;
  color: #6b6560;
}

/* Legal-block disclosure rendered by /js/legal-block.js. Liora is a
   trade name; the line below names the registered entity (Επωνυμία /
   Έδρα) as required by Greek consumer + e-commerce law. Tax identifiers
   (ΑΦΜ / ΔΟΥ / ΓΕΜΗ) appear on the physical receipt/invoice instead.
   Two variants:
     .legal-block            — inline footer disclosure (small, muted).
     .legal-block-full       — expanded card used on returns / shipping /
                               payment / contact info pages.
*/
.footer-bottom .legal-block {
  width: 100%;
  flex-basis: 100%;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #8b857f;
  font-size: 0.72rem;
  line-height: 1.55;
}
.legal-block-full {
  background: var(--bg-secondary, rgba(0, 0, 0, 0.03));
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-md, 10px);
  padding: 18px 22px;
  margin: 22px 0;
  font-size: 0.88rem;
  color: var(--text-secondary, #555);
}
.legal-block-full p { line-height: 1.55; }
.legal-block-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 6px;
  margin: 0;
}
.legal-block-grid dt {
  color: var(--text-muted, #888);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.legal-block-grid dd { margin: 0; }

/* ---------- Static info pages (shipping / returns / contact / payment)
   Shared layout for plain editorial content under the storefront nav. */
.info-page {
  max-width: 880px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 60px) clamp(20px, 4vw, 40px) 80px;
}
.info-head {
  text-align: center;
  margin-bottom: 56px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border);
}
.info-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  font-weight: 500;
}
.info-head h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 14px;
  color: var(--text-primary);
}
.info-lede {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}
.info-section { margin-bottom: 44px; }
.info-section h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}
.info-section h2 i { color: var(--accent); font-size: 1.3rem; }
.info-section p {
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.info-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.info-section ul li {
  position: relative;
  padding-left: 22px;
  color: var(--text-secondary);
  line-height: 1.7;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.info-section ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.info-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 14px;
}
@media (max-width: 640px) { .info-grid-2 { grid-template-columns: 1fr; } }
.info-card {
  padding: 22px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.info-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
  display: flex; align-items: center; gap: 10px;
}
.info-card h3 i { color: var(--accent); }
.info-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}
.info-card .info-card-meta {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.info-cta {
  text-align: center;
  margin-top: 56px;
  padding: 36px 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.info-cta h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.info-cta p { color: var(--text-secondary); margin-bottom: 20px; }
.info-contact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 14px 0;
}
.info-contact-list li {
  padding: 16px 18px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.92rem;
}
.info-contact-list li i {
  color: var(--accent);
  font-size: 1.4rem;
  flex-shrink: 0;
}
.info-contact-list li a { color: var(--text-primary); text-decoration: none; }
.info-contact-list li a:hover { color: var(--accent); }
.info-contact-list li .info-contact-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* ---------- Toast Notifications ---------- */
.toast-container {
  position: fixed;
  top: calc(var(--nav-height) + 16px);
  right: 16px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.toast {
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  min-width: 280px;
  max-width: 400px;
  animation: toastIn 0.3s var(--ease-bounce);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid;
  box-shadow: var(--shadow-md);
}
.toast.success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.toast.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.toast.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.toast.removing { animation: toastOut 0.3s var(--ease) forwards; }

@keyframes toastIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

/* ---------- Loading Spinner ---------- */
.spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 25%, #e8e5e0 50%, var(--bg-elevated) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton { to { background-position: -200% 0; } }

/* ---------- Pagination ---------- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.page-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.85rem;
}
.page-btn:hover, .page-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- Reviews ---------- */
.reviews-section { margin-top: 60px; }

.review-card {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
}
.review-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.review-author { font-weight: 500; }
.review-date { font-size: 0.8rem; color: var(--text-muted); }
.review-stars { color: var(--warning); margin-bottom: 8px; }
.review-body { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.7; }

/* Storefront PDP reviews block (Next.js). */
.product-reviews { margin-top: 48px; }
.review-summary { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.review-summary .review-stars { margin-bottom: 0; font-size: 1.15rem; }
.review-summary-text { color: var(--text-muted); font-size: 0.9rem; }
.review-empty { color: var(--text-muted); margin-bottom: 20px; }
.review-list { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 18px; }
.review-item { border-bottom: 1px solid var(--border); padding-bottom: 18px; }
.review-item:last-child { border-bottom: 0; }
.review-item-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.review-item-head .review-stars { margin-bottom: 0; }
.review-verified {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(76, 175, 80, 0.14); color: #4c9a52;
}
.review-title { font-weight: 600; margin: 0 0 4px; }
.review-form { margin-top: 24px; max-width: 560px; }
.review-form h3 { margin: 0 0 14px; font-size: 1.1rem; }
.review-stars-input { display: inline-flex; gap: 4px; }
.review-star-btn {
  background: none; border: 0; padding: 0; cursor: pointer; line-height: 0; color: inherit;
}
.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--success);
  background: rgba(76,175,80,0.08);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Email verification row under the profile email input. */
.profile-email-status { margin-top: 8px; }
.profile-email-unverified {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(230,168,23,0.08);
  color: #8a6310;
  font-size: 0.85rem;
}
.profile-email-unverified > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.profile-email-unverified .btn { margin-left: auto; }

/* ---------- Admin Panel ---------- */
.admin-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  min-height: 100vh;
  margin-top: var(--nav-height);
}
.admin-layout > * { min-width: 0; }
.admin-content { min-width: 0; }

.admin-sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  padding: 24px 0;
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  overflow-y: auto;
}
.admin-sidebar-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  padding: 0 20px;
  margin-bottom: 12px;
}
.admin-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}
.admin-nav-link:hover { background: var(--accent-subtle); color: var(--text-primary); }
.admin-nav-link.active {
  background: var(--accent-subtle);
  color: var(--accent);
  border-left-color: var(--accent);
}
.admin-nav-badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  letter-spacing: 0;
  transform-origin: center;
}
.admin-nav-badge.is-pulse {
  animation: adminBadgePulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--accent);
}
@keyframes adminBadgePulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0   rgba(168, 88, 56, 0.55); }
  50%  { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(168, 88, 56, 0);    }
  100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(168, 88, 56, 0);    }
}
@media (prefers-reduced-motion: reduce) {
  .admin-nav-badge.is-pulse { animation: none; }
}

/* New-row highlight on the live-updating /admin/orders table. Persists
 * until the admin refreshes the page so a row that arrived during the
 * session stays visually distinct from the rest. */
.admin-table tr.row-new td {
  background: rgba(168, 88, 56, 0.10);
  box-shadow: inset 3px 0 0 var(--accent);
}

.admin-content { padding: 32px; background: var(--bg-primary); }

.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.admin-header h1 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
}

/* Stat cards */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.stat-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.stat-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.stat-card-icon.gold { background: var(--accent-subtle); color: var(--accent); }
.stat-card-icon.green { background: rgba(76,175,80,0.08); color: var(--success); }
.stat-card-icon.blue { background: rgba(91,143,212,0.08); color: var(--info); }
.stat-card-icon.rose { background: rgba(193,127,89,0.08); color: var(--accent); }

.stat-card-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat-card-value { font-size: 1.8rem; font-weight: 600; margin-top: 4px; }
.stat-card-change { font-size: 0.8rem; margin-top: 4px; }
.stat-card-change.up { color: var(--success); }
.stat-card-change.down { color: var(--error); }

/* Admin tables */
.admin-table-wrapper {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
  margin-bottom: 32px;
}
.admin-table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  flex-wrap: wrap;
}
.admin-search {
  padding: 8px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  min-width: 240px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}
.admin-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.admin-table td {
  padding: 12px 16px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.admin-table tr:hover td { background: var(--accent-subtle); }
.admin-table tr:last-child td { border-bottom: none; }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}
.status-badge.pending { background: rgba(230,168,23,0.1); color: var(--warning); }
.status-badge.confirmed, .status-badge.paid { background: rgba(76,175,80,0.08); color: var(--success); }
.status-badge.processing { background: rgba(91,143,212,0.08); color: var(--info); }
.status-badge.shipped { background: rgba(149,117,205,0.1); color: #7c5cbf; }
.status-badge.delivered { background: rgba(76,175,80,0.12); color: var(--success); }
.status-badge.cancelled, .status-badge.refunded { background: rgba(224,82,82,0.08); color: var(--error); }
.status-badge.failed { background: rgba(224,82,82,0.08); color: var(--error); }
.status-badge.cod { background: rgba(120,120,120,0.10); color: var(--text-secondary); letter-spacing: .08em; }

/* ---- Profile → Orders tab: expandable order cards ---- */
.order-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s var(--ease);
}
.order-card:hover { box-shadow: var(--shadow-sm); }
.order-card-head {
  display: grid;
  /* Five cells: main · status badge · payment pill · total · chevron.
     The grid was originally four-wide and the chevron was wrapping onto
     an implicit second row — that's why it looked unaligned. */
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.order-card-head > * { align-self: center; }
.order-card-head:hover { background: var(--accent-subtle); }
.order-card-head-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.order-card-head-main strong { font-size: 0.95rem; }
.order-card-meta { font-size: 0.8rem; color: var(--text-muted); }
.order-card-total { font-weight: 600; color: var(--accent); }
.order-card-chev {
  color: var(--text-muted);
  font-size: 1rem;
  transition: transform 0.2s var(--ease);
}
.order-card.is-open .order-card-chev { transform: rotate(180deg); }
.order-card-body {
  display: none;
  padding: 8px 18px 18px;
  border-top: 1px solid var(--border);
}
.order-card.is-open .order-card-body { display: block; }

.order-items { display: flex; flex-direction: column; }
.order-item-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.order-item-row:last-child { border-bottom: 0; }
.order-item-img {
  width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
  background: var(--bg-secondary); flex-shrink: 0;
}
.order-item-img img { width: 100%; height: 100%; object-fit: cover; }
.order-item-info { min-width: 0; }
.order-item-name {
  font-size: 0.9rem; font-weight: 500; color: var(--text-primary);
  margin-bottom: 4px; line-height: 1.3;
}
.order-item-sub { font-size: 0.78rem; color: var(--text-muted); }
.order-item-total { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }

.order-totals {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
}
.order-totals-row {
  display: flex; justify-content: space-between;
  font-size: 0.85rem; color: var(--text-secondary);
}
.order-totals-row.order-totals-total {
  margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 0.95rem; font-weight: 600; color: var(--text-primary);
}

.order-shipto {
  margin-top: 14px; padding: 12px 14px;
  background: var(--bg-secondary); border-radius: var(--radius);
  font-size: 0.82rem;
}
.order-shipto-label {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px;
}
.order-shipto-text { color: var(--text-secondary); line-height: 1.5; }

.order-card-tracking {
  margin-top: 12px; padding: 10px 14px;
  border: 1px dashed var(--border); border-radius: var(--radius);
  font-size: 0.85rem; color: var(--text-secondary);
  display: flex; align-items: center; gap: 8px;
}
.order-card-tracking i { color: var(--accent); }

.order-payment {
  margin-top: 14px; padding: 14px 16px;
  background: var(--bg-secondary); border-radius: var(--radius);
  font-size: 0.85rem;
}
.order-payment-label {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px;
}
.order-payment-grid { display: flex; flex-direction: column; gap: 6px; }
.order-payment-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  color: var(--text-secondary);
}
.order-payment-row > span:first-child { color: var(--text-muted); }
.order-payment-row > span:last-child {
  color: var(--text-primary); text-align: right;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: flex-end;
}
.order-payment-row i { color: var(--accent); }
.order-payment-ref {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  background: var(--bg-card-hover);
  padding: 2px 8px; border-radius: 6px;
  border: 1px solid var(--border);
}
.order-payment-hint {
  font-style: normal; color: var(--text-muted); font-size: 0.75rem;
}

/* Payment status pill — used in card header and inside the payment block. */
.order-pay-pill {
  display: inline-flex; align-items: center;
  font-size: 0.65rem; font-weight: 500; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  background: rgba(0,0,0,0.04);
  color: var(--text-secondary);
  border: 1px solid transparent;
}
.order-pay-pill.pending  { background: rgba(230,168,23,0.12);  color: #b78410; }
.order-pay-pill.paid     { background: rgba(76,175,80,0.14);   color: #2f7d33; }
.order-pay-pill.refunded { background: rgba(224,82,82,0.12);   color: #a3382f; }
.order-pay-pill.failed   { background: rgba(224,82,82,0.12);   color: #a3382f; }

@media (max-width: 540px) {
  /* Mobile: keep the main info + chevron on the first row, drop the badges
     to a second row, and let the total span the full width on a third.
     Explicit grid areas so the chevron doesn't drift out of alignment. */
  .order-card-head {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'main   chev'
      'status pay'
      'total  total';
  }
  .order-card-head-main { grid-area: main; }
  .order-card-chev      { grid-area: chev; justify-self: end; }
  .order-card-head .status-badge   { grid-area: status; justify-self: start; }
  .order-card-head .order-pay-pill { grid-area: pay;    justify-self: end; }
  .order-card-total                { grid-area: total;  font-size: 0.95rem; }
}

.admin-chart {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.admin-chart h3 {
  font-size: 0.95rem;
  margin-bottom: 20px;
}

/* Chart bars */
.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 200px; padding-top: 20px; }
.bar-chart-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar-chart-bar {
  width: 100%;
  max-width: 40px;
  background: var(--accent-gradient);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.5s var(--ease);
}
.bar-chart-label { font-size: 0.65rem; color: var(--text-muted); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(44, 40, 37, 0.4);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s var(--ease);
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  opacity: 0;
  transform: scale(0.92);
  transform-origin: center center;
  transition: transform 0.3s var(--ease-bounce), opacity 0.2s var(--ease);
  box-shadow: var(--shadow-xl);
}
.modal-overlay.active .modal { opacity: 1; transform: scale(1); }
/* Respect reduced-motion: keep the fade, drop the scale. */
@media (prefers-reduced-motion: reduce) {
  .modal { transition: opacity 0.18s var(--ease); transform: none; }
  .modal-overlay.active .modal { transform: none; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { font-family: var(--font-display); font-size: 1.2rem; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all 0.2s;
}
.modal-close:hover { background: var(--bg-elevated); color: var(--text-primary); }

.modal-body { padding: 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ---------- Tabs ---------- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.tab-btn {
  padding: 12px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---------- Order Success ---------- */
.order-success {
  text-align: center;
  padding: 80px 20px;
  margin-top: var(--nav-height);
}
.order-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(76,175,80,0.08);
  border: 2px solid var(--success);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 2rem;
  color: var(--success);
}

/* Post-purchase guest-claim card. Ported from the inline <style> that lived
   in the legacy order-success.html so the Next.js GuestClaimCard (which
   mirrors this markup) is styled by the shared stylesheet. */
.claim-guest-card {
  max-width: 480px;
  margin: 8px auto 0;
  padding: 24px 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  text-align: left;
  box-shadow: var(--shadow-sm);
}
.claim-guest-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  margin: 0 0 6px;
  color: var(--text-primary);
}
.claim-guest-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 14px;
}
.claim-guest-form { display: flex; gap: 8px; flex-wrap: wrap; }
.claim-guest-form .form-input { flex: 1 1 200px; }
.claim-guest-card--done {
  background: rgba(74,222,128,0.06);
  border-color: rgba(74,222,128,0.25);
  text-align: center;
}
.claim-guest-card--done h3 i { color: var(--success); margin-right: 4px; }

/* ---------- Profile Page ----------
   Columns are FIXED, not fluid. Every tab renders inside an 800 px main
   column next to a 220 px sidebar, so the visual width is identical on
   every section. The whole grid is centered in the page; on narrow
   viewports it collapses to one full-width column. */
.profile-page {
  --profile-aside-w: 220px;
  --profile-main-w: 800px;
  margin-top: calc(var(--nav-height) + 32px);
  padding-bottom: 80px;
}
.profile-grid {
  display: grid;
  grid-template-columns: var(--profile-aside-w) var(--profile-main-w);
  gap: 32px;
  align-items: start;
  justify-content: center;
}
.profile-grid > main {
  min-width: 0;
  width: var(--profile-main-w);
}
.profile-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  height: fit-content;
  width: var(--profile-aside-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-sidebar a {
  display: block;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  transition: all 0.2s;
}
.profile-sidebar a:hover, .profile-sidebar a.active { background: var(--accent-subtle); color: var(--accent); }

/* Each tab fills the fixed right column edge-to-edge. */
.profile-page .tab-content { min-width: 0; width: 100%; }
.profile-page .tab-content.active { display: block; }

/* Collapse to a single full-width column before the fixed 220 + 32 + 800
   layout would start overflowing the container's 24 px gutter. */
@media (max-width: 1100px) {
  .profile-page { --profile-aside-w: 100%; --profile-main-w: 100%; }
  .profile-grid {
    grid-template-columns: 1fr;
    justify-content: stretch;
    gap: 20px;
  }
  .profile-grid > main { width: 100%; }
  .profile-sidebar {
    position: static;
    width: 100%;
    /* Horizontal scroll strip of pill links so the nav doesn't dominate
       the top of the page on mobile. Six items wrap onto two rows in the
       cramped case; the row stays full-bleed inside the gutter either way. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
  }
  .profile-sidebar a {
    flex: 0 1 auto;
    text-align: center;
    padding: 8px 14px;
    font-size: 0.85rem;
  }
}

/* Tighten the admin layout on narrower laptops so the 240px sidebar
   and 32px content gutter don't squeeze the table/form area. */
@media (max-width: 1280px) {
  .admin-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .admin-content { padding: 24px; }
  .admin-nav-link { padding: 10px 16px; font-size: 0.82rem; }
  .admin-sidebar-title { padding: 0 16px; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .products-grid { grid-template-columns: repeat(3, 1fr); }
  .wishlist-page .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .features-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  /* Mobile browsers use overlay scrollbars (no reserved width), so the
     desktop-only `scrollbar-gutter: stable` on <html> just creates a
     phantom gutter on the right. The body content respects that gutter
     and shifts left, while `position: fixed` elements like .nav span the
     full viewport — making the header look offset to the right relative
     to the content below it. Reverting to `auto` on mobile aligns them. */
  html { scrollbar-gutter: auto; }

  .nav-logo { margin-bottom: 10px; }
  .nav-actions { gap: 3px; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }

  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wishlist-page .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  /* Shop layout: products take the full width; filters become a slide-in
     drawer toggled by a button in the toolbar. The sidebar element stays in
     the DOM so its existing event wiring keeps working. */
  .shop-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: calc(var(--nav-height) + 20px);
  }
  .shop-layout .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

  .filters-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(340px, 88vw);
    max-width: 100%;
    /* The desktop rule sets `height: fit-content` so the sticky sidebar
       hugs its filter list. On mobile that defeats the top/bottom 0
       anchoring and makes the drawer taller than the viewport — at which
       point overflow-y: auto never engages because the drawer itself is
       what's overflowing, not its contents. Resetting to auto lets
       top+bottom claim the full viewport height. */
    height: auto;
    background: var(--bg-secondary);
    z-index: 110;
    padding: 0 20px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Prevent the drawer's scroll from chaining to the body (which is
       locked while the drawer is open) — feels stuck without this. */
    overscroll-behavior: contain;
    transform: translateX(-100%);
    transition: transform 0.3s var(--ease);
    box-shadow: 4px 0 24px rgba(0,0,0,0.12);
  }
  .filters-sidebar.open { transform: translateX(0); }

  .filters-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--bg-secondary);
    padding: 18px 0 12px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
    z-index: 1;
  }
  .filters-drawer-header h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0;
  }
  .filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bg-card-hover);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 1.1rem;
  }

  .filters-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 105;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
  }
  .filters-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Hide the desktop "Filters" heading inside the aside on mobile — the
     drawer header already shows the title. Keep the "Clear All" button
     visible so the user can clear filters without leaving the drawer. */
  .filters-desktop-header > h3 { display: none; }
  .filters-desktop-header { justify-content: flex-end; margin-bottom: 16px; }

  /* Toolbar gets a Filters button on the left and the sort dropdown on the
     right. Active filter count badge sits on the button. */
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
  }
  .filters-toggle i { font-size: 1rem; }
  .filters-toggle .filters-toggle-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--text-on-accent, #fff);
    font-size: 0.7rem;
    font-weight: 600;
  }
  .filters-toggle .filters-toggle-badge:empty { display: none; }

  .shop-toolbar { gap: 10px; }
  .shop-toolbar .shop-count { width: 100%; order: 3; }

  /* Body scroll lock when the drawer is open. */
  body.filters-open { overflow: hidden; }

  .product-gallery { position: static; }
  .cart-summary { position: static; }

  /* Cart, checkout, and product-detail layouts collapse via their own
     dedicated `max-width: 1180px` blocks above — keep those in sync if
     you tune this breakpoint. */

  .hero-title { font-size: 2rem; }

  .admin-layout { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: fixed;
    left: -260px;
    top: var(--nav-height);
    bottom: 0;
    width: 260px;
    z-index: 50;
    transition: left 0.3s var(--ease);
  }
  .admin-sidebar.open { left: 0; }

  .stat-cards { grid-template-columns: 1fr; }
  .categories-grid { grid-template-columns: 1fr; }
  .features-row { grid-template-columns: 1fr; }
  .section-title { font-size: 1.8rem; }
  .footer-grid { grid-template-columns: 1fr; }
  /* Profile collapse is handled by the dedicated `max-width: 1100px`
     block above — nothing extra needed here. */
}

/* Phone: collapse product grids to a single column so each image gets the
   full width — easier to tap, no cramped two-up on narrow screens. */
@media (max-width: 600px) {
  .products-grid { grid-template-columns: 1fr; gap: 16px; }
  .wishlist-page .products-grid { grid-template-columns: 1fr; gap: 16px; }
  .shop-layout .products-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-card-info { padding: 14px; }
  .product-card-name { font-size: 0.95rem; }
  .hero-buttons { flex-direction: column; }
  .hero-buttons .btn { width: 100%; }

  /* Tighter shop header on phones so products start higher up. */
  #shopHeader h1 { font-size: 1.4rem !important; }
  #shopHeader p { font-size: 0.85rem !important; }
  .filters-toggle { padding: 8px 12px; font-size: 0.8rem; }
  .shop-sort select { padding: 8px 28px 8px 10px; font-size: 0.85rem; }
}

/* ============================================================
   LANDING PAGE — INTERACTIVE SECTIONS (v2 — premium editorial)
   ============================================================ */

/* ---- 1. The Showcase — cinematic spotlight ---- */
.showcase {
  position: relative; height: 88vh; min-height: 620px; max-height: 900px;
  overflow: hidden; background: #1a1714;
}
.showcase-stage { position: absolute; inset: 0; }
.showcase-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.08);
  transition: opacity 1.4s var(--ease), transform 7s linear;
}
.showcase-slide.is-active { opacity: 1; transform: scale(1); }
.showcase-stage::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 75%);
  pointer-events: none;
}
.showcase-overlay {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 56px max(48px, calc((100vw - 1280px) / 2)); color: #fff;
}
.showcase-meta { display: flex; justify-content: space-between; align-items: center; }
.showcase-label, .showcase-counter { font-size: 0.75rem; letter-spacing: 4px; text-transform: uppercase; opacity: 0.9; }
.showcase-counter-sep { margin: 0 8px; opacity: 0.5; }
.showcase-counter #showcaseCurrent { font-family: var(--font-display); font-size: 1rem; }
.showcase-title {
  align-self: end; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 7vw, 6rem); line-height: 1; letter-spacing: -0.02em;
  margin: 0; max-width: 14ch;
  animation: showcaseRise 0.8s var(--ease);
}
@keyframes showcaseRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.showcase-foot { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-top: 28px; }
.showcase-price-block { display: flex; flex-direction: column; gap: 4px; }
.showcase-price-label { font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; opacity: 0.7; }
.showcase-price { font-family: var(--font-display); font-size: 2rem; }
.showcase-cta { background: #fff; color: #1a1714; border-color: #fff; }
.showcase-cta:hover { background: transparent; color: #fff; border-color: #fff; }
.showcase-thumbs {
  /* Lifted above the foot row so the thumbs no longer collide with the
     Discover button. The foot sits ~56px (overlay padding) + the button's
     own height from the viewport bottom, so we clear it with a clamped
     offset that stays sensible across showcase heights. */
  position: absolute;
  bottom: clamp(140px, 14vh, 180px);
  right: max(48px, calc((100vw - 1280px) / 2));
  display: flex; gap: 10px;
  z-index: 3;
}
.showcase-thumb {
  width: 56px; height: 70px; border-radius: 6px; overflow: hidden;
  border: 2px solid rgba(255,255,255,0.4); padding: 0; background: transparent;
  cursor: pointer; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.showcase-thumb img { width: 100%; height: 100%; object-fit: cover; }
.showcase-thumb:hover { transform: translateY(-4px); }
.showcase-thumb.is-active { border-color: #fff; transform: translateY(-4px); }
.showcase-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,0.15);
}
.showcase-progress-fill { height: 100%; width: 0%; background: #fff; }

/* ---- 2. Worn or Unworn — drag compare ---- */
.worn { padding: 110px 0; }
.worn-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.worn-card { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.worn-frame {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  cursor: ew-resize; user-select: none; touch-action: none;
  background: var(--bg-secondary);
}
.worn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.worn-clip {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(0 calc(100% - var(--clip)) 0 0);
}
.worn-handle {
  position: absolute; top: 0; bottom: 0; left: var(--clip);
  width: 0; pointer-events: none;
}
.worn-handle-bar {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(255,255,255,0.92); box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
  transform: translateX(-50%);
}
.worn-handle-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff; color: var(--accent); font-size: 0.7rem;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  transition: transform 0.2s var(--ease);
}
.worn-frame:hover .worn-handle-grip { transform: translate(-50%, -50%) scale(1.08); }
.worn-tag {
  position: absolute; top: 16px; padding: 6px 12px;
  background: rgba(255,255,255,0.92); color: var(--text-primary);
  border-radius: 999px; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.worn-tag-l { left: 16px; }
.worn-tag-r { right: 16px; }
.worn-info {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; color: var(--text-primary);
}
.worn-info span:first-child { font-weight: 500; }

/* ---- 3. The Story — sticky-scroll cinematic editorial ---- */
.story {
  padding: 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.story-container {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px;
  /* No align-items: stretch (default) lets the grid row equal the right column's height,
     which gives the sticky left column proper room to scroll within. */
}
.story-sticky {
  position: sticky; top: var(--nav-height);
  align-self: start;
  height: calc(100vh - var(--nav-height));
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 0;
}
.story-sticky .section-label { text-align: left; }
.story-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 4.8vw, 3.6rem); line-height: 1.05;
  margin: 14px 0 22px; transition: opacity 0.3s var(--ease);
  letter-spacing: -0.02em;
}
.story-text {
  color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7;
  max-width: 38ch; transition: opacity 0.3s var(--ease);
}
.story-progress { display: flex; gap: 8px; margin-top: 36px; max-width: 320px; }
.story-progress-pip {
  flex: 1; height: 2px; background: var(--border);
  transition: background 0.4s var(--ease);
}
.story-progress-pip.is-active { background: var(--accent); }

.story-stack {
  display: flex; flex-direction: column; gap: 32px;
  padding: 80px 0;
  width: 100%;
}
.story-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;       /* portrait, but smaller than viewport so 2 are visible at once */
  overflow: hidden;
  border-radius: var(--radius-lg); display: block;
  box-shadow: 0 24px 50px -16px rgba(44,40,37,0.3);
  background: var(--bg-card);
  /* subtle slide-up entrance, won't hide the frame even before triggering */
  transform: translateY(24px);
  opacity: 0.6;
  transition: opacity 0.7s var(--ease), transform 0.9s var(--ease);
}
.story-frame.is-visible { opacity: 1; transform: translateY(0); }
/* Subtle staggered offset for an editorial feel — every other frame nudges right */
.story-frame:nth-child(even) { margin-left: 8%; width: 92%; }
.story-frame img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 6s ease-out;
}
.story-frame:hover img { transform: scale(1.04); }
.story-num {
  position: absolute; top: 32px; left: 32px; z-index: 2;
  font-family: var(--font-display); font-size: 5rem; line-height: 1;
  color: #fff; pointer-events: none;
  text-shadow: 0 4px 20px rgba(0,0,0,0.45);
  letter-spacing: -0.03em;
}
.story-tag {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; align-items: end; gap: 16px;
  color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
  padding: 100px 32px 32px;
}
.story-tag span:first-child { font-size: 1rem; font-weight: 500; }
.story-tag span:last-child { font-family: var(--font-display); font-size: 1.3rem; }

/* ---- 5. New Arrivals — 3D tilt cards ---- */
.tilt-section { padding: 110px 0; }
.tilt-grid {
  display: grid;
  /* auto-fit + a hard max on the column width keeps the row centered when
     there are fewer than 4 products (otherwise a fixed 4-track grid leaves
     empty cells on the right, pulling the cards visually left-of-center).
     With 4+ items, the row fills naturally and justify-content has nothing
     to do. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: center;
  gap: 24px;
  perspective: 1200px;
}
.tilt-card {
  display: block; transform-style: preserve-3d;
  /* Grid items default to min-width: auto, which is the cell content's
     intrinsic minimum — that can push the card past a 1fr track when an
     image carries a large natural width or a 3D transform context confuses
     the layout. Pin to 0 (and cap at 100%) so the card always fits the
     grid track on mobile. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.tilt-card-inner {
  background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.08s linear, box-shadow 0.25s var(--ease);
  transform-style: preserve-3d; will-change: transform;
}
.tilt-card-inner.is-leaving {
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s var(--ease);
}
.tilt-card:hover .tilt-card-inner { box-shadow: 0 30px 50px -20px rgba(44,40,37,0.25); }
.tilt-card-img { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--bg-secondary); }
.tilt-card-img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
}
.tilt-card-img-hover { opacity: 0; }
.tilt-card:hover .tilt-card-img-hover { opacity: 1; }
.tilt-card-shine {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: overlay; opacity: 0.35;
  transition: background 0.1s linear;
}
.tilt-card-info { padding: 18px 20px 20px; }
.tilt-card-name {
  font-size: 0.95rem; color: var(--text-primary); font-weight: 500;
  margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tilt-card-price .current { font-weight: 600; }
.tilt-card-price .compare { color: var(--text-muted); text-decoration: line-through; margin-left: 6px; font-size: 0.85rem; }

/* ---- 6. Build Your Set — slot reels ---- */
.build {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.build-stage {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  max-width: 980px; margin: 0 auto 48px;
}
.build-slot {
  display: grid; grid-template-rows: auto 44px 1fr 44px;
  align-items: center; justify-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px 18px;
  position: relative;
}
.build-slot-cat {
  font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--text-muted);
}
.build-arrow {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-secondary); border: 1px solid var(--border);
  cursor: pointer; transition: all 0.2s var(--ease);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--text-primary);
}
.build-arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: scale(1.06); }
.build-window { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); position: relative; }
.build-reel {
  position: absolute; inset: 0; height: 100%;
  display: flex; flex-direction: column;
  transition: transform 0.45s var(--ease-bounce);
}
.build-card {
  flex-shrink: 0; height: 100%; position: relative;
  display: flex; align-items: end; padding: 14px;
  background: var(--bg-secondary);
}
.build-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.build-card-meta {
  position: relative; z-index: 1; color: #fff;
  width: 100%; display: flex; justify-content: space-between; align-items: end;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
  margin: -14px; padding: 60px 14px 14px;
  font-size: 0.85rem; font-weight: 500;
}
.build-total { text-align: center; }
.build-total-label { font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.build-total-amount {
  font-family: var(--font-display); font-size: 2.4rem; color: var(--text-primary);
  margin-bottom: 18px; transition: transform 0.3s var(--ease-bounce);
}

/* ---- 7. Almost Gone — circular SVG progress rings ---- */
.almost { padding: 110px 0; }
.almost-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.almost-card {
  display: block; text-align: center;
  background: var(--bg-card); border-radius: var(--radius-lg); padding: 28px 20px;
  border: 1px solid var(--border);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.almost-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.almost-ring {
  position: relative; width: 130px; height: 130px;
  margin: 0 auto 18px;
}
.almost-ring img {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
}
.almost-name { font-size: 0.95rem; color: var(--text-primary); margin-bottom: 6px; font-weight: 500; }
.almost-stock { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px; }
.almost-stock strong { color: #d8624a; font-size: 0.95rem; }
.almost-price .current { font-weight: 600; }

/* ---- Color Stories — mood swatches ---- */
.moods { padding: 120px 0; transition: background 0.8s var(--ease); }
.moods-feature {
  display: grid; grid-template-columns: 1.4fr 0.8fr; gap: 48px;
  max-width: 1100px; margin: 0 auto 56px; align-items: center;
}
.moods-img-wrap {
  aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl); background: var(--bg-secondary);
}
.moods-img-wrap img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.45s var(--ease), transform 1s var(--ease);
}
.moods-img-wrap:hover img { transform: scale(1.04); }
.moods-info { padding: 0 16px; }
.moods-cat {
  display: block; font-size: 0.7rem; letter-spacing: 4px;
  color: var(--text-muted); margin-bottom: 14px;
}
.moods-info h3 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1;
  letter-spacing: -0.01em; margin: 0 0 12px;
}
.moods-price {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary);
  margin-bottom: 24px;
}
.moods-cta {
  display: inline-block; color: var(--accent);
  font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid currentColor;
}
.moods-palette {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.mood-swatch {
  position: relative;
  width: 110px; height: 110px; border-radius: 50%;
  border: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; letter-spacing: 2px; text-transform: uppercase;
  font-weight: 500;
  transition: transform 0.4s var(--ease-bounce), box-shadow 0.3s var(--ease);
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}
.mood-swatch:hover { transform: translateY(-6px); }
.mood-swatch.is-active {
  transform: translateY(-10px); box-shadow: 0 18px 36px rgba(0,0,0,0.15);
  outline: 1px solid currentColor; outline-offset: 6px;
}

/* ---- The Reveal — scroll-triggered curtains ---- */
.reveal {
  position: relative; height: 80vh; min-height: 600px;
  background: var(--reveal-bg, var(--bg-secondary)) center/cover no-repeat;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.reveal::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
}
.reveal-curtain {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: #1a1714; z-index: 4;
  transition: transform 1.6s cubic-bezier(0.83, 0, 0.17, 1);
}
.reveal-curtain-l { left: 0; transform: translateX(0); }
.reveal-curtain-r { right: 0; transform: translateX(0); }
.reveal.is-revealed .reveal-curtain-l { transform: translateX(-100%); }
.reveal.is-revealed .reveal-curtain-r { transform: translateX(100%); }
.reveal-content {
  position: relative; z-index: 5;
  text-align: center; color: #fff; max-width: 580px; padding: 0 24px;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s var(--ease) 0.7s, transform 1s var(--ease) 0.7s;
}
.reveal.is-revealed .reveal-content { opacity: 1; transform: translateY(0); }
.reveal-content h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05;
  letter-spacing: -0.01em; margin: 14px 0 18px;
}
.reveal-content p { font-size: 1.05rem; opacity: 0.9; margin-bottom: 28px; line-height: 1.6; }

/* ---- Responsive — landing v2 ---- */
@media (max-width: 1024px) {
  .worn-grid { grid-template-columns: 1fr; }
  .story-container { grid-template-columns: 1fr; gap: 48px; }
  .story-sticky { position: static; height: auto; padding: 60px 0 0; }
  .story-stack { padding: 40px 0; }
  .story-frame:nth-child(even) { margin-left: 0; width: 100%; }
  /* `minmax(0, 1fr)` instead of plain `1fr` — without it, the column's
     min-width defaults to its intrinsic content size and can push the
     cards past the grid track on phones. */
  .tilt-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .almost-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build-stage { grid-template-columns: 1fr; max-width: 480px; }
  .showcase { height: auto; padding: 32px 0; }
  .showcase-overlay { padding: 32px 24px; }
  .showcase-thumbs { position: static; margin-top: 24px; right: auto; }
  .moods-feature { grid-template-columns: 1fr; gap: 32px; }
  .moods-info { text-align: center; }
  .reveal { height: 70vh; min-height: 500px; }
}
@media (max-width: 640px) {
  /* Same `minmax(0, 1fr)` reason — plain `1fr` allows the column to
     stretch to intrinsic content width, which is exactly the symptom the
     user reported (card poking past viewport edges on mobile). */
  .tilt-grid   { grid-template-columns: minmax(0, 1fr); }
  .almost-grid { grid-template-columns: minmax(0, 1fr); }
  .showcase-title { font-size: 2.4rem; }
  .showcase-foot { flex-direction: column; align-items: stretch; gap: 16px; }
  .mood-swatch { width: 84px; height: 84px; font-size: 0.75rem; }
  .live-item { grid-template-columns: 44px 1fr; padding: 10px 14px; }
  .live-item-time { grid-column: 2; }
  .live-item img { width: 44px; height: 44px; }
  .reveal-curtain { width: 51%; }
}

/* ============================================================
   QUICK VIEW MODAL
   ============================================================ */
.qv-modal { max-width: 1080px; padding: 0; }
/* Quick View gets a centered zoom + fade entrance instead of the default
   modal slide-up. Overrides .modal's transform/transition (both selectors
   have equal specificity, so these win by coming later in the file). */
.qv-modal {
  transform: scale(0.92);
  opacity: 0;
  transform-origin: center center;
  transition: transform 0.32s var(--ease-bounce), opacity 0.22s var(--ease);
}
.modal-overlay.active .qv-modal {
  transform: scale(1);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .qv-modal { transition: opacity 0.18s var(--ease); transform: none; }
  .modal-overlay.active .qv-modal { transform: none; }
}
.qv-close {
  position: absolute; top: 14px; right: 14px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.92); border: 0;
  font-size: 1.6rem; line-height: 1; color: var(--text-primary);
  cursor: pointer; backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
}
.qv-close:hover { background: #fff; }
.qv-loading { padding: 60px; text-align: center; color: var(--text-muted); }
.qv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
}
.qv-imgs {
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px; background: var(--bg-secondary);
}
.qv-main {
  position: relative;
  flex: 1; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius);
  background: var(--bg-card);
  cursor: zoom-in;
}
.qv-main img {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: center center;
  transition: transform 0.25s var(--ease);
  will-change: transform;
}
.qv-main.zooming { cursor: zoom-out; }
.qv-main.zooming img { transform: scale(1.5); transition-duration: 0.08s; }
@media (hover: none) {
  .qv-main { cursor: default; }
  .qv-main.zooming img { transform: none; }
}
.qv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.qv-thumb {
  width: 56px; height: 56px; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; padding: 0; background: transparent;
  cursor: pointer; transition: border-color 0.2s var(--ease);
}
.qv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.qv-thumb.is-active { border-color: var(--accent); }
.qv-info { padding: 44px 40px; display: flex; flex-direction: column; }
.qv-cat { font-size: 0.7rem; letter-spacing: 3px; color: var(--accent); text-transform: uppercase; margin-bottom: 10px; }
.qv-name {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.8rem; line-height: 1.15; letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.qv-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.qv-price { font-size: 1.5rem; font-weight: 600; color: var(--text-primary); }
.qv-compare { font-size: 1rem; color: var(--text-muted); text-decoration: line-through; }
.qv-desc { color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.qv-meta { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 14px; }
.qv-meta strong { color: var(--text-primary); }
.qv-props { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 14px; }
.qv-prop-row { display: flex; gap: 8px; }
.qv-prop-label { color: var(--text-muted); min-width: 110px; }
.qv-prop-value { color: var(--text-primary); }
.qv-attrs { display: flex; flex-direction: column; gap: 14px; margin: 8px 0 18px; }
.qv-attr-name { font-size: 0.7rem; letter-spacing: 2px; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; }
.qv-attr-values { display: flex; flex-wrap: wrap; gap: 8px; }
.qv-attr-pill {
  padding: 8px 14px; border: 1px solid var(--border); background: var(--bg-card);
  border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-primary); font-size: 0.85rem;
  transition: all 0.2s var(--ease);
}
.qv-attr-pill:hover { border-color: var(--accent); }
.qv-attr-pill.is-selected { background: var(--accent); color: #fff; border-color: var(--accent); }
.qv-attr-swatch {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2px solid var(--border); padding: 0; cursor: pointer;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.qv-attr-swatch:hover { transform: scale(1.08); }
.qv-attr-swatch.is-selected { border-color: var(--accent); transform: scale(1.08); box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--accent); }
.qv-controls { display: flex; gap: 12px; margin-top: auto; padding-top: 18px; }
.qv-qty {
  display: flex; align-items: center; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-card);
}
.qv-qty button {
  width: 40px; height: 44px; border: 0; background: transparent;
  cursor: pointer; font-size: 1rem; color: var(--text-primary);
}
.qv-qty button:hover { color: var(--accent); }
.qv-qty span { min-width: 36px; text-align: center; font-weight: 500; }
.qv-add { flex: 1; }
.qv-full { display: inline-block; margin-top: 14px; font-size: 0.85rem; color: var(--text-muted); }
.qv-full:hover { color: var(--accent); }

@media (max-width: 768px) {
  .qv-grid { grid-template-columns: 1fr; min-height: 0; }
  .qv-info { padding: 24px 20px; }
  .qv-name { font-size: 1.4rem; }
  .qv-price { font-size: 1.25rem; }
}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-drawer {
  position: fixed; inset: 0; z-index: 300; visibility: hidden;
  pointer-events: none;
}
.cart-drawer.open { visibility: visible; pointer-events: auto; }
.cart-drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(20,16,12,0.45); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 0.35s var(--ease);
}
.cart-drawer.open .cart-drawer-backdrop { opacity: 1; }
.cart-drawer-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(440px, 100%);
  background: var(--bg-card); box-shadow: -20px 0 60px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cart-drawer.open .cart-drawer-panel { transform: translateX(0); }
.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--border);
}
.cart-drawer-head h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.4rem;
  display: flex; align-items: baseline; gap: 10px;
}
.cart-drawer-count {
  display: inline-block; min-width: 24px; padding: 0 8px;
  background: var(--bg-secondary); border-radius: 999px;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 500;
  color: var(--text-muted); text-align: center;
}
.cart-drawer-close {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-secondary); border: 0;
  font-size: 1.4rem; cursor: pointer; color: var(--text-primary);
  display: flex; align-items: center; justify-content: center;
}
.cart-drawer-close:hover { background: var(--accent); color: #fff; }
.cart-drawer-items {
  flex: 1; overflow-y: auto; padding: 8px 16px;
}
.cart-drawer-empty {
  padding: 60px 24px; text-align: center; color: var(--text-muted);
  display: flex; flex-direction: column; gap: 16px; align-items: center;
}
.cart-drawer-item {
  display: grid; grid-template-columns: 80px 1fr auto; gap: 14px;
  padding: 16px 8px; border-bottom: 1px solid var(--border);
  align-items: start;
}
.cart-drawer-item:last-child { border-bottom: 0; }
.cart-drawer-item-img {
  aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bg-secondary);
}
.cart-drawer-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer-item-info { display: flex; flex-direction: column; gap: 4px; }
.cart-drawer-item-name { font-size: 0.95rem; font-weight: 500; color: var(--text-primary); line-height: 1.3; }
.cart-drawer-item-name:hover { color: var(--accent); }
.cart-drawer-item-variant { font-size: 0.75rem; color: var(--text-muted); }
.cart-drawer-item-price { font-size: 0.85rem; color: var(--text-muted); }
.cart-drawer-qty {
  display: inline-flex; align-items: center; margin-top: 6px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  width: fit-content;
}
.cart-drawer-qty button {
  width: 28px; height: 28px; border: 0; background: transparent;
  cursor: pointer; font-size: 0.9rem; color: var(--text-primary);
}
.cart-drawer-qty button:hover { color: var(--accent); }
.cart-drawer-qty span { min-width: 28px; text-align: center; font-size: 0.85rem; }
.cart-drawer-item-side {
  display: flex; flex-direction: column; align-items: end; justify-content: space-between;
  gap: 8px; height: 100%;
}
.cart-drawer-item-line { font-weight: 600; color: var(--text-primary); }
.cart-drawer-item-remove {
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}
.cart-drawer-item-remove:hover { background: var(--bg-secondary); color: #d8624a; }
.cart-drawer-foot {
  border-top: 1px solid var(--border); padding: 20px 24px 24px;
  background: var(--bg-secondary);
}
.cart-drawer-subtotal {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.cart-drawer-subtotal span { font-size: 0.9rem; color: var(--text-muted); }
.cart-drawer-subtotal strong {
  font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary);
}
.cart-drawer-note { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 16px; }
.cart-drawer-ctas { display: flex; flex-direction: column; gap: 8px; }
.cart-drawer-ctas .btn { width: 100%; }

/* ---------- Smooth Page Transitions ---------- */
.page-enter { animation: fadeIn 0.4s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------- Image placeholder ---------- */
.img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bg-elevated), #e8e5e0);
  color: var(--text-muted);
  font-size: 2rem;
}

.variant-swatch.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-subtle); }
.variant-button.active { border-color: var(--accent); background: var(--accent-subtle); color: var(--accent); }
.variant-swatch:hover, .variant-button:hover { border-color: var(--border-strong); }
/* =========================================================================
   BLOG / EDITORIAL  — listing (/blog), category (/blog/category/:slug),
                       single post (/blog/:slug).
   Loaded only by blog.html + post.html. Inherits the storefront design
   tokens defined in styles.css (--accent, --text-*, --bg-*, --font-*).
   ========================================================================= */

/* ---------- Listing page ----------------------------------------------- */

.blog-list-page { max-width: 1180px; }

.blog-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 0 40px;
}
.blog-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
.blog-cat-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-subtle);
}
.blog-cat-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
.blog-cat-chip .muted {
  color: inherit;
  opacity: 0.65;
  font-size: 0.72rem;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; gap: 24px; }
}

.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.08);
  border-color: var(--border-strong);
}
.blog-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-elevated);
}
.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.blog-card:hover .blog-card-image img { transform: scale(1.03); }

.blog-card-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blog-card-meta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
}
.blog-card-excerpt {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-read {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Skeleton card used while SSR is unavailable or JS is hydrating. */
.skeleton-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.skeleton-card .skeleton {
  background: linear-gradient(90deg, var(--bg-elevated) 0%, #ece9e3 50%, var(--bg-elevated) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 4px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Single post page ------------------------------------------- */

.post-page { padding-bottom: 80px; }

.post-breadcrumb {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 24px;
  text-align: center;
}
.post-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.post-breadcrumb a:hover { color: var(--accent); }
.post-breadcrumb span[aria-hidden] { margin: 0 6px; opacity: 0.5; }

.post-header {
  text-align: center;
  margin: 8px 0 40px;
}
.post-header .post-meta {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.post-cat-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
}
.post-cat-chip:hover {
  background: var(--accent);
  color: var(--text-on-accent);
}

.post-title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 0 0 16px;
}
.post-excerpt {
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 auto 14px;
}
.post-author {
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin: 0;
}

/* Hero figure */
.post-hero {
  margin: 0 0 40px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.post-hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* ---------- Post body typography --------------------------------------- */
/* The HTML in posts.body comes from the admin paste, so we style every
   common tag explicitly. Tight vertical rhythm, generous reading width. */

.post-body {
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--text-primary);
  max-width: 68ch;
  margin: 0 auto;
}

.post-body > * + * { margin-top: 1.1em; }
.post-body p { margin: 0; }
.post-body p.lead {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1.4em;
}

.post-body h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-primary);
  margin-top: 2.2em;
  margin-bottom: 0.6em;
}
.post-body h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--text-primary);
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}
.post-body h4 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-top: 1.6em;
  margin-bottom: 0.3em;
}

.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(193, 127, 89, 0.4);
  transition: text-decoration-color 0.2s var(--ease);
}
.post-body a:hover { text-decoration-color: var(--accent); }

.post-body strong { color: var(--text-primary); font-weight: 600; }
.post-body em { color: var(--text-secondary); font-style: italic; }

.post-body ul,
.post-body ol {
  padding-left: 1.4em;
  margin: 0;
}
.post-body li { margin: 0.45em 0; }
.post-body li::marker { color: var(--accent); }

.post-body blockquote {
  border-left: 3px solid var(--accent);
  background: var(--accent-subtle);
  padding: 18px 22px;
  margin: 1.6em 0;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--text-secondary);
}

.post-body img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 1.6em auto;
}
.post-body figure { margin: 1.6em 0; }
.post-body figcaption {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  font-style: italic;
}

.post-body code {
  font-family: Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--bg-elevated);
  padding: 2px 6px;
  border-radius: 4px;
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* Tables inside posts — used in the materials-comparison article. */
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.94rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.post-body table th,
.post-body table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.post-body table th {
  background: var(--bg-elevated);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.post-body table tr:last-child td { border-bottom: 0; }
.post-body table tr:nth-child(even) td { background: rgba(0, 0, 0, 0.015); }

/* Featured-products block at the bottom of a post. The .products-grid
   class is shared with the shop page so its layout already works; we
   just give the section its own spacing + heading style. */
#postRelatedProducts {
  max-width: 1100px;
  margin: 64px auto 0;
  border-top: 1px solid var(--border);
  padding-top: 48px;
}
#postRelatedProducts h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 24px;
  color: var(--text-primary);
}

/* Pagination on blog list */
#blogPagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 48px;
}
#blogPagination .page-btn {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s var(--ease);
}
#blogPagination .page-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
#blogPagination .page-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}
#blogPagination .page-btn[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- Post layout (products rail + article + TOC) ---------------- */
/* Uses grid-template-areas so the article ALWAYS sits in the "article"
   slot regardless of whether the side rails exist. Without this, when
   either rail has `display: none`, CSS Grid's auto-placement shifts
   the remaining children left and the article ends up in the narrow
   left column. The .has-rail / .has-toc classes are toggled by JS once
   we know there's actually content to put in each rail.
*/

.post-page > .container,
.container.post-page { max-width: 1320px; }

.post-layout {
  display: grid;
  gap: 40px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "article";
}
.post-layout.has-rail {
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas: "products article";
}
.post-layout.has-toc {
  grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-areas: "article toc";
}
.post-layout.has-rail.has-toc {
  grid-template-columns: 280px minmax(0, 1fr) 220px;
  grid-template-areas: "products article toc";
}

.post-products-rail { grid-area: products; display: none; }
.post-main          { grid-area: article; max-width: 780px; margin: 0 auto; width: 100%; }
.post-toc-rail      { grid-area: toc; display: none; }

.post-layout.has-rail .post-products-rail { display: block; }
.post-layout.has-toc  .post-toc-rail      { display: block; }

/* --- Left rail: linked products --------------------------------------- */
/* Sticky so the products stay visible as the reader scrolls the body.
   Max-height + overflow gives the rail its own scrollbar when there
   are more products than fit in the viewport. */
.post-products-rail {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
.post-products-rail::-webkit-scrollbar { width: 4px; }
.post-products-rail .rail-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 14px;
  font-weight: 600;
}
.post-products-rail .rail-items {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Mirrors the .product-card pattern on /products: a single rounded,
   bordered card containing both the image and the info block, so the
   product visually reads as ONE unit. Image is inside the card frame
   (not floating above it) and the info pads the bottom interior. */
.rail-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.3s var(--ease),
              box-shadow 0.3s var(--ease),
              border-color 0.3s var(--ease);
}
.rail-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.rail-card:hover .rail-card-image img { transform: scale(1.05); }
.rail-card-link { display:block; text-decoration:none; color:inherit; }

/* Quick-view button: floats over the image, fades in on hover. Reuses
   the existing QuickView modal pattern from /products. */
.rail-quick-view {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), background 0.2s;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.rail-card:hover .rail-quick-view,
.rail-card:focus-within .rail-quick-view { opacity: 1; transform: translateY(0); }
.rail-quick-view:hover { background: var(--accent); color: var(--text-on-accent); }
/* On touch where hover doesn't fire, keep the button visible. */
@media (hover: none) {
  .rail-quick-view { opacity: 1; transform: none; }
}

/* Rail cards reuse the product-card hover-reveal action stack (quick view +
   add to cart). Anchor it to the card and drive the reveal off the rail
   card's own hover/focus state. */
.rail-card { position: relative; }
.rail-card .product-card-actions { z-index: 2; }
.rail-card:hover .product-card-actions,
.rail-card:focus-within .product-card-actions { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .rail-card .product-card-actions { opacity: 1; transform: none; }
}

.rail-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-elevated);
}
.rail-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.rail-card-image .img-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail-card-body { padding: 14px 16px 16px; }
.rail-card-name {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-primary);
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rail-card-price {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.rail-card-price .current {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
}
.rail-card-price .compare {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* --- In-article featured products ------------------------------------- */
/* The pieces the admin linked to the post, shown as a "shop the story"
   block at the end of the reading column. Reuses .product-card styling for
   the cards themselves; these rules only frame the section + grid. */
.post-featured {
  max-width: 68ch;
  margin: 56px auto 0;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.post-featured-title {
  font-family: var(--font-display, inherit);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 28px;
  color: var(--text-primary);
}
.post-featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 24px;
}
/* Tighten the shared product-card inside the editorial grid a touch. */
.post-featured-grid .product-card-info { padding-top: 12px; }

@media (max-width: 600px) {
  .post-featured { margin-top: 40px; padding-top: 28px; }
  .post-featured-title { font-size: 1.3rem; margin-bottom: 20px; }
  .post-featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* --- Right rail: TOC --------------------------------------------------- */
.post-toc-rail {
  position: sticky;
  top: 96px;
  align-self: start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
.post-toc-rail::-webkit-scrollbar { width: 4px; }

#postToc .toc-title,
.post-toc-mobile-body .toc-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin: 0 0 12px;
  font-weight: 600;
}

#postToc .toc-list,
.post-toc-mobile-body .toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 2px solid var(--border);
}
#postToc .toc-list li,
.post-toc-mobile-body .toc-list li {
  margin: 0;
  padding: 0;
}
#postToc .toc-list a,
.post-toc-mobile-body .toc-list a {
  display: block;
  padding: 6px 0 6px 14px;
  margin-left: -2px;            /* aligns the active border with the list border */
  border-left: 2px solid transparent;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted);
  text-decoration: none;
  transition: all 0.18s var(--ease);
}
#postToc .toc-list a:hover,
.post-toc-mobile-body .toc-list a:hover {
  color: var(--text-primary);
  border-left-color: var(--border-strong);
}
#postToc .toc-list a.active,
.post-toc-mobile-body .toc-list a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}
#postToc .toc-list .toc-h3 a,
.post-toc-mobile-body .toc-list .toc-h3 a {
  padding-left: 26px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* --- Mobile inline TOC (hidden on desktop) ----------------------------- */
.post-toc-mobile {
  display: none;
  margin: 0 0 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0;
}
.post-toc-mobile > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-primary);
  font-weight: 500;
}
.post-toc-mobile > summary::-webkit-details-marker { display: none; }
.post-toc-mobile > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.2s var(--ease);
}
.post-toc-mobile[open] > summary::after { transform: rotate(180deg); }
.post-toc-mobile-body { padding: 0 18px 16px; }

/* On wide screens the rail shows the products, so the duplicate
   bottom-of-article block hides itself to avoid showing the same
   items twice. CSS toggles this — JS always populates both. */
@media (min-width: 1081px) {
  #postRelatedProducts { display: none !important; }
}

/* --- Breakpoint behaviour --------------------------------------------- */

/* Below 1080px: drop both rails. The article gets the full column;
   the inline mobile TOC appears above the body, and the bottom
   featured-products block becomes the products surface again.
   Selectors include .has-rail / .has-toc so they outrank the desktop
   modifier rules above. */
@media (max-width: 1080px) {
  .post-layout,
  .post-layout.has-rail,
  .post-layout.has-toc,
  .post-layout.has-rail.has-toc {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "article";
    gap: 0;
  }
  .post-layout .post-products-rail,
  .post-layout .post-toc-rail { display: none; }
  .post-toc-mobile            { display: block; }
}

/* Below 720px: tighten typography. Single-column already in place. */
@media (max-width: 720px) {
  .post-body { font-size: 1rem; }
  .post-body h2 { font-size: 1.45rem; }
  .post-body h3 { font-size: 1.15rem; }
  .post-body table { font-size: 0.85rem; }
  .post-body table th,
  .post-body table td { padding: 10px 8px; }
  .post-title { font-size: 1.8rem; }
}