/* ═══════════════════════════════════════════════════════════════
   MECIVI — Main Stylesheet
   Light liquid-glass design system
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --white:       #ffffff;
  --cream:       #F9F7F4;
  --sand:        #F0EBE3;
  --bone:        #E5E0D8;

  /* ── COPPER / TERRACOTTA ACCENT (replaces gold) ── */
  --accent:        #C4723A;
  --accent2:       #D4884E;
  --accent-light:  #F2C4A0;
  --accent-dim:    rgba(196,114,58,0.10);
  --accent-border: rgba(196,114,58,0.28);

  /* ── ALIASES so all legacy var(--gold) references keep working ── */
  --gold:        var(--accent);
  --gold2:       var(--accent2);
  --gold-light:  var(--accent-light);
  --gold-dim:    var(--accent-dim);
  --gold-border: var(--accent-border);

  --dark:        #1C1C1E;
  --text:        #1C1C1E;
  --text2:       #3A3A3C;
  --muted:       #6B6869;
  --muted2:      #9A9898;
  --border:      rgba(0,0,0,0.07);
  --border2:     rgba(0,0,0,0.12);
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.10);
  --shadow-xl:   0 24px 80px rgba(0,0,0,0.14);
  --glass-bg:    rgba(255,255,255,0.55);
  --glass-heavy: rgba(255,255,255,0.76);
  --glass-nav:   rgba(249,247,244,0.72);
  --glass-card:  rgba(255,255,255,0.58);

  /* ── LIQUID GLASS TOKENS (libs.cc-style triple tint) ──
     Light-theme: a faint warm white wash; dark-theme overrides below. */
  --glass-tint:        rgba(255,255,255,0.45);
  --glass-tint-md:     rgba(255,255,255,0.62);
  --glass-tint-strong: rgba(255,255,255,0.80);

  /* Inset highlight pairs — "lit from above" edge.
     Light theme: bright top, faint dark base. */
  --glass-inset-top:    rgba(255,255,255,0.85);
  --glass-inset-bottom: rgba(0,0,0,0.04);

  /* Ambient drop shadow with subtle copper warmth */
  --glass-ambient:      0 8px 32px rgba(184,134,11,0.08);
  --glass-ambient-lg:   0 18px 60px rgba(184,134,11,0.10), 0 6px 24px rgba(0,0,0,0.08);
  --glass-ambient-xl:   0 28px 80px rgba(184,134,11,0.12), 0 8px 28px rgba(0,0,0,0.12);

  /* ── LIQUID GLASS — gradient-mask border + signature shadows ── */
  --glass-border-grad: linear-gradient(135deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.18) 18%,
    rgba(255,255,255,0)    50%,
    rgba(196,114,58,0)     50%,
    rgba(196,114,58,0.06)  75%,
    rgba(196,114,58,0.22)  100%);
  --shadow-glass:    0 6px 24px rgba(28,28,30,0.10), inset 0 1px 0 rgba(255,255,255,0.95);
  --shadow-glass-md: 0 12px 40px rgba(28,28,30,0.14), inset 0 1px 0 rgba(255,255,255,0.95);
  --shadow-glass-lg: 0 24px 80px rgba(28,28,30,0.18), inset 0 1px 0 rgba(255,255,255,0.95);

  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:  'Playfair Display', Georgia, serif;
  --nav-h:       72px;
  --bar-h:       40px;
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* ── AMBIENT BACKGROUND ORBS — give glass something to blur over ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 55% 45% at 18% 22%, rgba(196,114,58,0.10), transparent 62%),
    radial-gradient(ellipse 65% 55% at 82% 78%, rgba(212,136,78,0.07), transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(242,196,160,0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 55% 45% at 18% 22%, rgba(212,136,78,0.14), transparent 62%),
    radial-gradient(ellipse 65% 55% at 82% 78%, rgba(196,114,58,0.10), transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(242,196,160,0.04), transparent 70%);
}
/* Note: ambient orb has z-index:0 + pointer-events:none, so normal
   page flow paints above it without needing position:relative on
   every body child (which would break position:sticky on header). */
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--font-sans); cursor: pointer; }
input, textarea, select { font-family: var(--font-sans); }
ul { list-style: none; }

/* ── UTILITY ─────────────────────────────────────────────────── */
.container     { max-width: 1760px; margin: 0 auto; padding: 0 32px; }
.container-sm  { max-width: 960px;  margin: 0 auto; padding: 0 32px; }
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.text-serif { font-family: var(--font-serif); }
.text-muted  { color: var(--muted); }
.text-gold   { color: var(--accent); }
.u-mt8  { margin-top: 8px; }
.u-mt16 { margin-top: 16px; }
.u-mt24 { margin-top: 24px; }
.u-mt32 { margin-top: 32px; }
.u-mt48 { margin-top: 48px; }
.u-mb16 { margin-bottom: 16px; }

/* ── GLOBAL KEYFRAMES ────────────────────────────────────────── */
@keyframes fadeUp    { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn    { from { opacity:0; }                             to { opacity:1; }                          }
@keyframes shakeX    { 0%,100%{transform:translateX(0)} 15%{transform:translateX(-7px)} 30%{transform:translateX(7px)} 45%{transform:translateX(-5px)} 60%{transform:translateX(5px)} 75%{transform:translateX(-3px)} }
@keyframes badgePop  { 0%,100%{transform:scale(1)} 35%{transform:scale(1.5)} 65%{transform:scale(0.88)} }
@keyframes shimmer   { from{background-position:-200% 0} to{background-position:200% 0} }
@keyframes spinCW    { to { transform:rotate(360deg); } }

/* ── GLOBAL ANIMATION UTILITIES ─────────────────────────────── */
.shake  { animation: shakeX  0.45s cubic-bezier(.36,.07,.19,.97) both; }
.fade-up{ animation: fadeUp  0.4s  cubic-bezier(.4,0,.2,1)       both; }
.fade-in{ animation: fadeIn  0.3s  ease                           both; }
.fade-up[data-delay="1"] { animation-delay:.06s; }
.fade-up[data-delay="2"] { animation-delay:.12s; }
.fade-up[data-delay="3"] { animation-delay:.18s; }
.fade-up[data-delay="4"] { animation-delay:.24s; }
.fade-up[data-delay="5"] { animation-delay:.30s; }

/* Cart badge pop */
.cart-badge.pop { animation: badgePop .38s ease; }

/* Header cart button: badge needs to escape the button (overrides .btn-glass overflow:hidden).
   The ::before gradient border still renders fine at inset:0. */
.header-cart { overflow: visible !important; padding: 9px 13px !important; }
.header-cart .cart-badge {
  min-width: 20px; height: 20px; padding: 0 6px; font-size: 0.70rem; font-weight: 800;
  border-radius: 10px; line-height: 1; letter-spacing: 0;
  background: var(--accent); color: #fff;
  display: none; align-items: center; justify-content: center;
  position: absolute; top: -6px; right: -6px;
  box-shadow: 0 2px 8px rgba(196,114,58,0.55), 0 0 0 2px var(--cream);
  z-index: 3; pointer-events: none;
}
[data-theme="dark"] .header-cart .cart-badge { box-shadow: 0 2px 8px rgba(0,0,0,0.6), 0 0 0 2px var(--cream); }

/* ── GLASS MIXIN CLASSES — libs.cc signature glass ──────────── */
/* The core formula: heavy blur + saturate, translucent tint,
   inset highlight on top + faint shadow on bottom, warm ambient drop. */
.glass {
  background: var(--glass-tint);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 var(--glass-inset-bottom),
    var(--glass-ambient);
  border-radius: var(--radius-lg);
}
.glass-heavy {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(60px) saturate(2.0);
  -webkit-backdrop-filter: blur(60px) saturate(2.0);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 var(--glass-inset-bottom),
    var(--glass-ambient-lg);
  border-radius: var(--radius-lg);
}

/* ── HEADER — liquid glass nav ──────────────────────────────── */
/* Scoped to the site's top header (`.glass-bar`) only — without this
   scoping every nested <header> on a page (e.g. contact page section
   heading) inherited the sticky glass styling and ended up sitting on
   a dark glass card. */
header.glass-bar {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass-nav);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border-bottom: 1px solid rgba(196,114,58,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.03),
    0 4px 24px rgba(184,134,11,0.06);
}
.header-inner {
  height: var(--nav-h);
  display: grid;
  grid-template-columns: auto auto minmax(380px, 1fr) auto;
  align-items: center;
  gap: 14px;
}
.header-search input { min-width: 100%; }
.logo {
  display: inline-flex; align-items: center; line-height: 1;
  font-family: var(--font-serif);
  margin-right: 4px;
  text-decoration: none;
}
.logo-img {
  width: 64px; height: 64px;
  display: block;
  transition: transform .2s;
}
.logo:hover .logo-img { transform: translateY(-1px) scale(1.02); }
/* Theme-aware logo swap. The mark renders on a transparent background
   so the cream-M variant disappears on light themes and vice versa.
   Default = light theme (dark-M variant visible). */
.logo-img.logo-light { display: block; }
.logo-img.logo-dark  { display: none; }
[data-theme="dark"] .logo-img.logo-light { display: none; }
[data-theme="dark"] .logo-img.logo-dark  { display: block; }
/* Legacy text-mark — preserved so any deep links to the old markup still render
   if a page hasn't been updated yet. New header uses .logo-img. */
.logo-name { font-size: 2rem; font-weight: 700; color: var(--dark); letter-spacing: -0.01em; }
.logo-name span { color: var(--accent); text-shadow: 0 0 14px rgba(196,114,58,0.75), 0 0 30px rgba(196,114,58,0.35); }
.logo-tag { font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.26em; color: var(--muted); text-transform: uppercase; margin-top: 4px; }

/* Search */
.header-search {
  position: relative;
}
.header-search input {
  width: 100%;
  padding: 12px 48px 12px 22px;
  border: 1px solid var(--border2);
  border-radius: 30px;
  background: var(--white);
  font-size: 0.92rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.header-search input::placeholder { color: var(--muted2); }
.header-search input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.header-search .search-icon {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted); width: 18px; height: 18px; pointer-events: none;
}

/* Header Actions */
.header-actions { display: flex; align-items: center; gap: 8px; }
/* visual order: wishlist · compare · cart · quote · auth · LANGUAGE · CURRENCY · THEME · hamburger */
.header-actions .lang-toggle    { order: 99; }
.header-actions .currency-toggle { order: 100; margin-left: 4px; }
.header-actions .theme-toggle   { order: 101; }
.header-actions .hamburger      { order: 102; }
.hbtn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 14px;
  border: none; background: none;
  color: var(--text2); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: background .2s, color .2s;
  cursor: pointer; position: relative;
}
.hbtn:hover { background: var(--sand); color: var(--dark); }
.hbtn svg { width: 26px; height: 26px; stroke: currentColor; }
.hbtn .badge {
  position: absolute; top: 4px; left: calc(50% + 4px); right: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

/* ── MEGA MENU ───────────────────────────────────────────────── */
.mega-nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
}
.mega-nav-inner {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.mega-item { position: relative; }
.mega-trigger {
  display: flex; align-items: center; gap: 5px;
  padding: 0 14px; height: 48px;
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--text2); border: none; background: none;
  cursor: pointer; white-space: nowrap;
  transition: color .2s;
}
.mega-trigger svg { width: 12px; height: 12px; transition: transform .25s; }
.mega-item:hover .mega-trigger { color: var(--accent); }
.mega-item:hover .mega-trigger svg { transform: rotate(180deg); }

.mega-panel {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 680px;
  background: var(--glass-heavy);
  backdrop-filter: blur(32px) saturate(1.6);
  -webkit-backdrop-filter: blur(32px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xl);
  padding: 28px;
  display: grid; grid-template-columns: 1fr 1fr 220px; gap: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s;
  z-index: 200;
}
.mega-item:hover .mega-panel {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-col-title {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 12px;
}
.mega-link {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: 0.84rem; color: var(--text2);
  transition: background .18s, color .18s;
}
.mega-link:hover { background: var(--sand); color: var(--accent); }
.mega-link-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--bone); flex-shrink: 0; }
.mega-feature {
  border-radius: var(--radius-md); overflow: hidden;
  position: relative; aspect-ratio: 3/4;
  background: var(--sand);
}
.mega-feature img { width: 100%; height: 100%; object-fit: cover; }
.mega-feature-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 16px 14px 14px;
  background: linear-gradient(to top, rgba(28,28,30,0.7), transparent);
  color: #fff; font-size: 0.8rem; font-weight: 600;
}

/* ── HERO BANNER ─────────────────────────────────────────────── */
.hero {
  position: relative; overflow: hidden;
  height: 680px;
  background: var(--dark);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform-origin: center;
  transition: transform 8s ease;
}
.hero.is-visible .hero-bg { transform: scale(1.04); }
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(28,28,30,0.72) 0%, rgba(28,28,30,0.28) 60%, transparent 100%);
}
.hero-content {
  position: relative; z-index: 2;
  height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 72px 0;
  max-width: 620px;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent-light);
  margin-bottom: 18px;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 28px; height: 1px;
  background: var(--accent-light);
}
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 700; line-height: 1.14;
  color: #fff; margin-bottom: 18px;
}
.hero-sub {
  font-size: 1.05rem; color: rgba(255,255,255,0.75);
  line-height: 1.7; margin-bottom: 36px;
  max-width: 480px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-badge {
  position: absolute; top: 40px; right: 60px;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--radius-md);
  padding: 16px 24px; text-align: center;
  animation: badgeFloat 4s ease-in-out infinite;
  will-change: transform; /* keep the infinite float on its own GPU layer (heavy backdrop-filter) */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 18px 48px rgba(0,0,0,0.20),
    0 6px 16px rgba(184,134,11,0.08);
  overflow: hidden;
}
/* Subtle accent-top line on the hero badge (libs.cc signature) */
.hero-badge::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  pointer-events: none;
}
@keyframes badgeFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero-badge .hb-num { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--dark); line-height: 1; }
.hero-badge .hb-label { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 30px; border-radius: 40px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; border: none; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
  white-space: nowrap;
}

.btn-outline-white {
  background: color-mix(in srgb, #fff 18%, transparent);
  backdrop-filter: blur(40px) saturate(1.5);
  -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 4px 20px rgba(0,0,0,0.18);
  color: #fff;
  position: relative; overflow: hidden;
}
.btn-outline-white::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-outline-white:hover {
  background: color-mix(in srgb, #fff 30%, transparent);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    0 8px 28px rgba(0,0,0,0.24);
}
.btn-outline {
  background: color-mix(in srgb, var(--accent) 14%, var(--glass-tint));
  backdrop-filter: blur(50px) saturate(1.6);
  -webkit-backdrop-filter: blur(50px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.03),
    0 4px 16px rgba(196,114,58,0.10);
  border: none;
  color: var(--accent);
  position: relative; overflow: hidden;
}
.btn-outline::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(196,114,58,0.42) 0%,
    rgba(196,114,58,0.14) 20%,
    rgba(196,114,58,0)    40%,
    rgba(196,114,58,0)    60%,
    rgba(196,114,58,0.14) 80%,
    rgba(196,114,58,0.42) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-outline:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--glass-tint));
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.03),
    0 8px 24px rgba(196,114,58,0.22);
}
.btn-dark {
  background: var(--dark); color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.btn-dark:hover { background: #2c2c2e; transform: translateY(-2px); }
.btn-sm { padding: 9px 20px; font-size: 0.75rem; }
.btn-lg { padding: 16px 40px; font-size: 0.88rem; }

/* ── USP BAR ─────────────────────────────────────────────────── */
.usp-bar {
  background: var(--sand);
  border-bottom: 1px solid var(--border);
  padding: 28px 0;
}
.usp-bar-inner {
  display: grid; grid-template-columns: repeat(4,1fr);
  divide-x: var(--border);
}
.usp-item {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 28px;
  border-right: 1px solid var(--border);
}
.usp-item:last-child { border-right: none; }
.usp-icon {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.usp-icon svg { width: 20px; height: 20px; }
.usp-text strong { display: block; font-size: 0.88rem; font-weight: 600; color: var(--dark); }
.usp-text span { font-size: 0.75rem; color: var(--muted); }

/* ── SECTION HEADERS ─────────────────────────────────────────── */
.section-head { margin-bottom: 40px; }
.section-head.centered { text-align: center; }
.section-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px;
}
.section-eyebrow::after {
  content: ''; display: block;
  width: 20px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-head.centered .section-eyebrow::after { display: none; }
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700; color: var(--dark);
  line-height: 1.2; margin-bottom: 12px;
}
.section-sub {
  font-size: 1rem; color: var(--muted); max-width: 520px;
  line-height: 1.7;
}
.section-head.centered .section-sub { margin: 0 auto; }
.section-link {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 6px;
  transition: gap .2s;
}
.section-link:hover { gap: 10px; }

/* ── SECTIONS SPACING ────────────────────────────────────────── */
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.section-lg { padding: 120px 0; }
.section-dark {
  background: var(--dark);
  padding: 80px 0;
}
.section-dark .section-title { color: #fff; }
.section-dark .section-sub { color: rgba(255,255,255,0.6); }
.section-dark .section-eyebrow { color: var(--accent-light); }
.section-sand { background: var(--sand); }

/* ── CATEGORY TILES ──────────────────────────────────────────── */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.cat-tile {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bone);
  aspect-ratio: 3/4;
  cursor: pointer;
  transition: transform .35s, box-shadow .35s;
}
.cat-tile:first-child { grid-row: span 2; aspect-ratio: unset; }
.cat-tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cat-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(28,28,30,0.65) 0%, transparent 55%);
}
.cat-tile-content {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 20px 18px;
}
.cat-tile-name {
  font-family: var(--font-serif);
  font-size: 1.15rem; font-weight: 600; color: #fff;
  margin-bottom: 4px;
}
.cat-tile-count {
  font-size: 0.72rem; letter-spacing: 0.1em; color: rgba(255,255,255,0.65);
  text-transform: uppercase;
}

/* ── PRODUCT CARDS ───────────────────────────────────────────── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.product-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

.product-card {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
  position: relative;
  display: flex; flex-direction: column;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 6px 24px rgba(184,134,11,0.06),
    0 2px 8px rgba(0,0,0,0.04);
}
.product-card:hover {
  /* No transform lift: moving the card shifted the heart/flag/quote and caused
     hover flicker at the card edges (card slides out from under the cursor).
     Lift feel comes from the shadow + border only, so everything stays put. */
  border-color: var(--accent-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 18px 48px rgba(184,134,11,0.16),
    0 6px 16px rgba(0,0,0,0.08);
}

a.product-card-image, .product-card-image {
  position: relative; overflow: hidden;
  aspect-ratio: 4/3;
  min-height: 210px;
  background: var(--sand);
  display: block; text-decoration: none; cursor: pointer;
}
.product-card-image img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 8px;
  transition: transform .35s ease;
}
.product-card:hover .product-card-image img { transform: scale(1.04); will-change: transform; }

.product-card-badges {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 5px;
}
.badge-made {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 20px;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dark);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.03);
}
.badge-made .flag { font-size: 0.85em; }
.badge-sale {
  padding: 3px 8px; border-radius: 20px;
  background: #E53E3E; color: #fff;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.badge-new {
  padding: 3px 8px; border-radius: 20px;
  background: var(--accent); color: #fff;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-card-actions {
  position: absolute; top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 5px;
  opacity: 0; transform: translateX(8px);
  transition: opacity .25s, transform .25s;
}
.product-card:hover .product-card-actions { opacity: 1; transform: translateX(0); }
.pca-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.85);
  display: flex; align-items: center; justify-content: center;
  color: var(--text2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 2px 10px rgba(0,0,0,0.10);
  transition: background .2s, color .2s, border-color .2s;
}
.pca-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.pca-btn svg { width: 15px; height: 15px; }

.product-card-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; flex: 1;
}
.product-card-maker {
  font-size: 0.67rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.product-card-name {
  font-family: var(--font-serif);
  font-size: 1rem; font-weight: 600; color: var(--dark);
  line-height: 1.35; margin-bottom: 8px; flex: 1;
}
.product-card-name a:hover { color: var(--accent); }
.product-card-model {
  font-size: 0.72rem; color: var(--accent); margin-bottom: 12px;
  letter-spacing: 0.04em; font-weight: 600;
}
.product-card-price {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 14px;
}
.price-list {
  font-size: 0.82rem; color: var(--muted2);
  text-decoration: line-through;
}
.price-with-us {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-width: 0;
}
.price-with-us .price-compare { line-height: 1.2; }
.price-with-us .price-current { line-height: 1.2; }
.price-with-us-label {
  font-size: 0.72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.06em;
}
/* Size-variant chips on the card (FMCG: 400g · 750g · 3kg, 330ml …) */
.product-card-sizes {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px;
  margin: -4px 0 14px;
}
.product-card-sizes .pcs-label {
  flex: 0 0 100%;          /* label on its own line; chips wrap underneath it */
  margin-bottom: 5px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}
.product-card-sizes .pcs-chip {
  font-size: 0.68rem; font-weight: 600; color: var(--text2);
  background: var(--sand); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px; line-height: 1.35; white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  transition: color .15s, background .15s, border-color .15s, box-shadow .15s;
}
.product-card-sizes .pcs-chip:hover,
.product-card-sizes .pcs-chip:focus-visible {
  color: var(--accent); background: var(--accent-dim); border-color: var(--accent-border);
  box-shadow: 0 0 0 2px rgba(196,114,58,0.12), 0 2px 9px rgba(196,114,58,0.22);
  outline: none;
}
/* When hovering a chip swaps the price to that variant's, say so quietly —
   a silently changing number reads as a glitch rather than information. */
.price-current.pcs-price-swapped { color: var(--accent); transition: color .18s ease; }
[data-theme=dark] .product-card-sizes .pcs-chip {
  background: var(--bone); border-color: rgba(255,255,255,0.10); color: var(--text);
}
[data-theme=dark] .product-card-sizes .pcs-chip:hover,
[data-theme=dark] .product-card-sizes .pcs-chip:focus-visible {
  color: var(--accent-light); background: rgba(212,136,78,0.18); border-color: var(--accent-border);
}
/* Compound "sizes" collapsed to one range per dimension (e.g. REA racks):
   a compact display chip on a link to the product, not 36 stacked sentences. */
.product-card-sizes-compact { text-decoration: none; }
.product-card-sizes .pcs-dim {
  font-size: 0.68rem; font-weight: 600; color: var(--text2);
  background: var(--sand); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px; line-height: 1.35; white-space: nowrap;
  transition: color .15s, border-color .15s;
}
[data-theme=dark] .product-card-sizes .pcs-dim {
  background: var(--bone); border-color: rgba(255,255,255,0.10); color: var(--text);
}
a.product-card-sizes-compact:hover .pcs-dim { color: var(--accent); border-color: var(--accent-border); }
.price-current {
  font-size: 1.25rem; font-weight: 700; color: var(--dark);
}
.price-old {
  font-size: 0.85rem; color: var(--muted2);
  text-decoration: line-through;
}
.price-save {
  font-size: 0.7rem; font-weight: 600; color: #E53E3E;
  background: rgba(229,62,62,0.09); padding: 1px 6px; border-radius: 4px;
}
.product-card-footer {
  display: flex; gap: 8px; margin-top: auto;
}
/* ── Liquid-glass Add to Cart + Quote buttons (product cards) ── */
.btn-cart {
  position: relative; flex: 1; padding: 10px 16px; border-radius: 30px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  color: #fff;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border: none;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 4px 14px color-mix(in srgb, var(--accent) 26%, transparent);
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn-cart::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.25) 28%,
    rgba(255,255,255,0)    55%,
    color-mix(in srgb, var(--accent) 30%, transparent) 80%,
    color-mix(in srgb, var(--accent) 90%, white) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}
.btn-cart > * { position: relative; z-index: 2; }
.btn-cart::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 75%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none; opacity: 0; mix-blend-mode: overlay; z-index: 1;
}
.btn-cart:hover {
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 8px 22px color-mix(in srgb, var(--accent) 42%, transparent);
}
.btn-cart:hover::after { animation: cardBtnSheen .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; opacity: 1; }
.btn-cart svg { width: 15px; height: 15px; }

.btn-quote {
  position: relative;
  padding: 10px 14px; border-radius: 30px;
  background: var(--glass-tint-md);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  color: var(--text); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  border: none; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 2px 8px rgba(28,28,30,0.06);
  overflow: hidden;
  isolation: isolate;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s;
}
.btn-quote::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.65) 0%,
    rgba(255,255,255,0.18) 30%,
    rgba(255,255,255,0)    55%,
    rgba(196,114,58,0)     55%,
    rgba(196,114,58,0.10)  80%,
    rgba(196,114,58,0.20)  100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; z-index: 1;
}
.btn-quote > * { position: relative; z-index: 2; }
.btn-quote::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    rgba(255,255,255,0) 25%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 75%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none; opacity: 0; mix-blend-mode: overlay; z-index: 1;
}
.btn-quote:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-tint-md));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn-quote:hover::after { animation: cardBtnSheen .9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; opacity: 1; }
.btn-quote svg { width: 14px; height: 14px; }

[data-theme=dark] .btn-quote { background: rgba(255,255,255,0.06); color: var(--text); }
[data-theme=dark] .btn-quote:hover { background: rgba(212,136,78,0.18); color: var(--accent-light); }

@keyframes cardBtnSheen {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(260%)  skewX(-18deg); }
}

/* ── PRODUCT CARD SHIPPING TAG ───────────────────────────────── */
.product-card-ship {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.7rem; color: var(--muted); margin-bottom: 10px;
}
.product-card-origin {
  display: flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--muted);
}
.product-card-meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.product-card-meta-row:has(.product-card-company:only-child) { justify-content: flex-start; }
.product-card-meta-row:has(.product-card-origin:only-child) { justify-content: flex-end; }
.product-card-origin img { box-shadow: 0 0 0 1px rgba(0,0,0,0.1); }
.product-card-ship svg { width: 13px; height: 13px; color: var(--accent); }
.product-card-company {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.72rem; color: var(--accent); text-decoration: none;
  font-weight: 600;
  transition: color .15s ease;
}
.product-card-company:hover { color: var(--accent2, var(--accent)); text-decoration: none; }
.product-card-company:hover .product-card-company-logo { transform: scale(1.06); }
.product-card-company svg { color: var(--accent); opacity: 0.85; flex-shrink: 0; }
.product-card-company span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.product-card-company-logo {
  height: 22px; max-width: 90px; width: auto; object-fit: contain;
  display: block; transition: transform .18s ease;
}
[data-theme=dark] .product-card-company { color: var(--accent); }
[data-theme=dark] .product-card-company-logo { filter: brightness(1.06); }

/* Price-on-request button (replaces Add to Cart when price_eur === 0) */
.btn-cart.btn-cart-inquiry {
  font-size: 0.78rem; line-height: 1.25; text-align: left; gap: 8px;
  padding: 10px 14px;
}
.btn-cart.btn-cart-inquiry svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-cart.btn-cart-inquiry span { display: block; }

/* ── MID BANNER ──────────────────────────────────────────────── */
.mid-banner {
  position: relative; overflow: hidden;
  height: 480px;
  background: var(--dark);
}
.mid-banner-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.45;
}
.mid-banner-content {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  max-width: 560px;
}
.mid-banner h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  color: #fff; font-weight: 700;
  line-height: 1.2; margin-bottom: 18px;
}
.mid-banner p {
  font-size: 1rem; color: rgba(255,255,255,0.72);
  line-height: 1.7; margin-bottom: 32px;
}
.mid-banner-stat {
  display: flex; gap: 40px; margin-bottom: 40px;
}
.stat-item .stat-num {
  font-family: var(--font-serif);
  font-size: 2rem; font-weight: 700; color: var(--accent-light);
  line-height: 1;
}
.stat-item .stat-label {
  font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

/* ── MANUFACTURER LOGOS ──────────────────────────────────────── */
.brands-strip {
  background: transparent;
  border: none;
  padding: 0;
  overflow: visible;
}
.brands-strip > div {
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: var(--glass-tint-md);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30);
  padding: 28px 36px;
  overflow: hidden;
  position: relative;
}
.brands-track {
  display: flex; align-items: center;
  width: max-content;
  animation: brandScroll 35s linear infinite;
  will-change: transform;
}
/* Per-item margin, not flex gap: with gap the two copies don't tile exactly at
   translateX(-50%) (N items = N-1 gaps), so the loop jumps. A trailing margin on
   every logo makes each copy identical width → seamless loop. */
.brands-track > * { margin-right: 60px; }
/* Pause the scroll while hovering so the logo stays under the cursor and
   the per-logo hover animation reads cleanly. */
.brands-track:hover { animation-play-state: paused; }
@keyframes brandScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brand-logo {
  font-family: var(--font-serif);
  font-size: 1.05rem; font-weight: 700;
  color: var(--muted); white-space: nowrap; letter-spacing: 0.04em;
  transition: color .2s;
  flex-shrink: 0;
}
.brand-logo:hover { color: var(--accent); }
.brand-logo-img {
  display: flex; align-items: center; justify-content: center;
}
.brand-logo-img img {
  height: 44px; width: auto; max-width: 130px;
  object-fit: contain;
  filter: grayscale(1) opacity(0.55);
  transition: filter .25s, transform .25s;
}
.brand-logo-img:hover img { filter: grayscale(0) opacity(1); transform: scale(1.06); }
/* Dark band: each logo sits on a frosted "liquid glass" tile so the real,
   full-colour logos stay legible. Greyscale/silhouette treatments made dark
   wordmarks (e.g. Z.MATIK's near-black mark) vanish on the dark band — only
   their coloured bar survived. The light frosted tile gives every logo, dark
   or light, a consistent readable backdrop. Light theme keeps the plain
   ghosted look (dark logos already read on the light band). */
[data-theme="dark"] .brand-logo-img {
  background: linear-gradient(135deg, rgba(236,238,242,0.86), rgba(208,210,218,0.70));
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.7);
  padding: 11px 22px;
  transform: translateY(0) scale(1);
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s cubic-bezier(.22,1,.36,1),
              border-color .4s ease;
  will-change: transform;
}
[data-theme="dark"] .brand-logo-img img { filter: none; opacity: 1; height: 34px; }
[data-theme="dark"] .brand-logo-img:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 16px 38px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.9);
  border-color: rgba(255,255,255,0.6);
}
[data-theme="dark"] .brand-logo-img:hover img { filter: none; opacity: 1; transform: none; }


/* Dark mode — lift text so it's visible on the dark card */
[data-theme="dark"] .brand-logo { color: rgba(255,255,255,0.85); }
[data-theme="dark"] .brand-logo:hover { color: var(--accent2); }
[data-theme="dark"] .brands-strip > div {
  background: rgba(28,24,18,0.55);
  border-color: rgba(255,236,200,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,0.08),
    0 2px 16px rgba(0,0,0,0.35);
}

/* ── WHY US ──────────────────────────────────────────────────── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.why-card {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative; overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    var(--glass-ambient);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.why-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s;
}
.why-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 18px 60px rgba(184,134,11,0.16),
    0 6px 16px rgba(0,0,0,0.08);
}
.why-card:hover::before { transform: scaleX(1); }
.why-icon {
  width: 52px; height: 52px;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 20px;
}
.why-icon svg { width: 24px; height: 24px; }
.why-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem; font-weight: 700;
  color: var(--dark); margin-bottom: 10px;
}
.why-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.7; }

/* ── TESTIMONIALS ────────────────────────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.testi-card {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: var(--radius-md);
  padding: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    var(--glass-ambient);
}
.testi-stars { color: var(--accent); font-size: 0.85rem; letter-spacing: 3px; margin-bottom: 14px; }
.testi-text { font-size: 0.92rem; color: var(--text2); line-height: 1.75; font-style: italic; margin-bottom: 18px; }
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--sand); border: 2px solid var(--bone);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 700;
  font-size: 0.9rem; color: var(--accent);
}
.testi-name { font-weight: 600; font-size: 0.88rem; color: var(--dark); }
.testi-role { font-size: 0.72rem; color: var(--muted); }

/* ── NEWSLETTER ──────────────────────────────────────────────── */
.newsletter-wrap {
  background: var(--dark);
  border-radius: var(--radius-xl);
  padding: 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.newsletter-wrap h2 {
  font-family: var(--font-serif);
  font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 12px;
}
.newsletter-wrap p { font-size: 0.95rem; color: rgba(255,255,255,0.6); line-height: 1.7; }
.newsletter-form { display: flex; gap: 10px; }
.newsletter-input {
  flex: 1; padding: 14px 20px; border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  /* 16px is the minimum that prevents iOS Safari auto-zoom on focus. */
  color: #fff; font-size: 16px; outline: none;
  transition: border-color .2s;
}
.newsletter-input::placeholder { color: rgba(255,255,255,0.35); }
.newsletter-input:focus { border-color: var(--accent-border); }
.newsletter-note { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin-top: 10px; }

/* ── FOOTER ──────────────────────────────────────────────────── */
footer {
  background: var(--dark);
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 72px 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 280px 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 60px;
}
.footer-brand .footer-logo-name {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700;
  color: #fff; margin-bottom: 6px;
}
.footer-brand .footer-logo-name span { color: var(--accent); }
.footer-brand .footer-tag {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 20px;
}
.footer-brand p { font-size: 0.85rem; color: rgba(255,255,255,0.5); line-height: 1.7; margin-bottom: 24px; }
.footer-socials { display: flex; gap: 10px; }
.footer-social {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.45); transition: all .2s;
}
.footer-social:hover { border-color: var(--accent-border); color: var(--accent); }
.footer-social svg { width: 16px; height: 16px; }

.footer-col h4 {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  font-size: 0.88rem; color: rgba(255,255,255,0.55);
  transition: color .18s;
}
.footer-links a:hover { color: var(--accent); }



/* ── PRODUCT CARD — WISHLIST + COMPARE + BADGES ─────────────── */
.product-card { position: relative; }

/* Badges: top-right, compact */
.product-card-badges {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px; z-index: 2;
}
.badge-sale {
  background: #e53935; color: #fff; border-radius: 4px;
  padding: 2px 7px; font-size: 0.7rem; font-weight: 700;
  line-height: 1.4; width: fit-content;
}
.badge-new {
  background: #2e7d32; color: #fff; border-radius: 4px;
  padding: 2px 7px; font-size: 0.7rem; font-weight: 700;
  line-height: 1.4; width: fit-content;
}
.badge-oos {
  background: rgba(0,0,0,0.78); color: #fff; border-radius: 4px;
  padding: 2px 7px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  line-height: 1.4; width: fit-content;
}

/* Heart: top-left image overlay (top-right in RTL) */
.btn-wishlist {
  /* 16px (not 10px) keeps the whole circle clear of the card's 20px rounded
     corner, so overflow:hidden + border-radius can never clip it — including the
     WebKit backdrop-filter corner-clip glitch that flattened its top edge. */
  position: absolute; top: 16px; left: 16px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .2s; color: var(--muted);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 2px 10px rgba(0,0,0,0.16);
}
.btn-wishlist svg { width: 14px; height: 14px; transition: fill .2s; }
.btn-wishlist:hover { background: #fff; color: #e53935; box-shadow: 0 3px 12px rgba(0,0,0,0.22); }
.btn-wishlist.wl-active { color: #e53935; background: #fff; }
.btn-wishlist.wl-active svg { fill: currentColor; }
[data-theme=dark] .btn-wishlist { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.25); }
[data-theme=dark] .btn-wishlist:hover { background: rgba(255,255,255,0.30); color: #e53935; }
[data-theme=dark] .btn-wishlist.wl-active { color: #e53935; background: rgba(255,255,255,0.28); }
[dir="rtl"] .btn-wishlist { left: auto; right: 16px; }

/* Footer: full-width cart, then quote+compare row */
.product-card-footer { display: flex; flex-direction: column; gap: 6px; }
.btn-cart { width: 100%; justify-content: center; }
.pcf-secondary { display: flex; gap: 6px; }
.btn-quote { flex: 1; }
.btn-compare {
  flex: 1; padding: 7px 8px; border-radius: 30px;
  border: 1px solid var(--border2); background: var(--white);
  font-size: 0.72rem; font-weight: 500; color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  gap: 4px; transition: all .2s; white-space: nowrap;
}
.btn-compare:hover, .btn-compare.cmp-active { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); }
[data-theme=dark] .btn-compare { background: var(--bone); }

.price-compare {
  text-decoration: line-through; color: var(--muted);
  font-size: 0.82rem; margin-right: 4px;
}

/* ── LIVE SEARCH AUTOCOMPLETE ────────────────────────────────── */
.search-autocomplete {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: var(--radius-lg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 16px 48px rgba(0,0,0,0.16),
    0 4px 16px rgba(184,134,11,0.08);
  z-index: 2000; overflow: hidden;
}
.sac-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; text-decoration: none; color: inherit;
  transition: background .15s;
}
.sac-item:hover { background: var(--sand); }
.sac-img {
  width: 44px; height: 44px; border-radius: 6px;
  border: 1px solid var(--border); flex-shrink: 0; overflow: hidden;
  background: var(--sand); display: flex; align-items: center; justify-content: center;
}
.sac-img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.sac-img-placeholder { width: 100%; height: 100%; background: var(--bone); }
.sac-name { font-size: 0.85rem; font-weight: 500; color: var(--text); margin-bottom: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sac-meta { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); flex-wrap: wrap; }
.sac-price { color: var(--accent); font-weight: 600; }
.sac-co { display: inline-flex; align-items: center; }
.sac-co-logo { height: 16px; max-width: 80px; width: auto; object-fit: contain; display: block; }
.sac-co-text { font-weight: 600; color: var(--accent); font-size: 0.74rem; }
.sac-country { display: inline-flex; align-items: center; gap: 4px; font-size: 0.74rem; color: var(--muted2); }
.sac-country img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.1); }
[data-theme=dark] .sac-co-logo { filter: brightness(1.06); }
.sac-sale { background: #e53935; color: #fff; border-radius: 3px; padding: 1px 5px; font-size: 0.68rem; }
.sac-all {
  display: block; padding: 10px 14px; font-size: 0.82rem; font-weight: 600;
  color: var(--accent); text-decoration: none; border-top: 1px solid var(--border);
  background: var(--sand); transition: background .15s;
}
.sac-all:hover { background: var(--bone); }
.sac-empty { padding: 16px 14px; font-size: 0.85rem; color: var(--muted); text-align: center; }
[data-theme=dark] .search-autocomplete { background: var(--white); border-color: var(--border2); }
[data-theme=dark] .sac-item:hover { background: var(--bone); }
[data-theme=dark] .sac-all { background: var(--bone); }

/* ── HEADER WISHLIST + COMPARE ICONS ─────────────────────────── */
.hdr-icon-btn {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 3px; background: none; border: none;
  cursor: pointer; padding: 8px 10px; border-radius: var(--radius-md);
  color: var(--text2); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  transition: color .2s, background .2s;
}
.hdr-icon-btn:hover { background: var(--sand); color: var(--dark); }
.hdr-icon-btn svg { width: 26px; height: 26px; stroke: currentColor; }
/* Header icon button: stack badge → heart → label vertically.
   The 72px header is tight — when a badge is present, the
   label hides so badge+heart fit inside without clipping the
   sticky header bottom. The count itself is the state cue. */
.hdr-icon-btn { overflow: visible !important; }
.hdr-icon-badge {
  /* Sit at the heart's top-right corner (like a notification pip) instead of
     stacking above it — a centred badge on a column layout pushed the heart
     visually "below" the number. The cream ring keeps the copper count legible
     against the copper filled heart; --cream flips dark in dark theme. */
  position: absolute; top: -1px; right: 1px;
  min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--accent); color: #fff;
  font-size: 0.6rem; font-weight: 700; line-height: 1;
  display: none; align-items: center; justify-content: center; padding: 0 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22), 0 0 0 2px var(--cream);
  pointer-events: none;
}
.hdr-icon-badge.visible { display: inline-flex; }
[data-theme=dark] .hdr-icon-badge { box-shadow: 0 1px 4px rgba(0,0,0,0.6), 0 0 0 2px var(--cream); }
/* When badge is showing, drop the label and tighten the icon
   so the total button height stays under the 72px header. */
.hdr-icon-btn.has-items { gap: 0; padding-top: 7px; padding-bottom: 7px; }
.hdr-icon-btn.has-items svg { width: 22px; height: 22px; }
.hdr-icon-btn.has-items [data-i18n="nav.wishlist"],
.hdr-icon-btn.has-items [data-i18n="nav.compare"] { display: none; }
/* Filled heart / coloured icon when the button has items */
.hdr-icon-btn.has-items { color: var(--accent); }
.hdr-icon-btn.has-items svg { fill: currentColor; }
[data-theme=dark] .hdr-icon-btn:hover { background: rgba(255,255,255,0.06); color: var(--text); }

/* -- FOOTER WORDMARK --------------------------------------- */
footer { overflow: hidden; }
.footer-wordmark {
  font-family: var(--font-serif);
  font-size: clamp(80px, 17vw, 240px);
  font-weight: 700;
  color: rgba(255,255,255,0.32);
  line-height: 0.82;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  margin-top: 32px;
  user-select: none;
  pointer-events: none;
}
.footer-wordmark .fw-vi {
  color: #c4723a;
  filter: drop-shadow(0 0 30px #c4723a)
          drop-shadow(0 0 70px rgba(196,114,58,0.65))
          drop-shadow(0 0 140px rgba(196,114,58,0.35))
          drop-shadow(0 0 280px rgba(196,114,58,0.15));
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.footer-bottom p { font-size: 0.75rem; color: rgba(255,255,255,0.3); }
.footer-bottom .footer-badges { display: flex; gap: 10px; }
.footer-badge {
  padding: 5px 12px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  cursor: default; transition: color .25s, border-color .25s, box-shadow .25s;
}
.footer-badge:hover {
  color: var(--accent);
  border-color: rgba(196,114,58,0.5);
  box-shadow: 0 0 14px rgba(196,114,58,0.35), inset 0 0 8px rgba(196,114,58,0.08);
}

/* ── CART DRAWER ─────────────────────────────────────────────── */
.cart-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(28,28,30,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.cart-overlay.open { opacity: 1; pointer-events: auto; }
.cart-drawer {
  position: fixed; top: 16px; right: 16px; bottom: 16px;
  width: 420px; z-index: 901;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(60px) saturate(2.0);
  -webkit-backdrop-filter: blur(60px) saturate(2.0);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    -16px 8px 60px rgba(0,0,0,0.20),
    -4px 4px 16px rgba(184,134,11,0.06);
  transform: translateX(calc(100% + 24px));
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cart-drawer.open { transform: translateX(0); }
.cart-drawer.is-empty .cart-subtotal,
.cart-drawer.is-empty a[href="/checkout"] { display: none !important; }
.cart-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px;
  border-bottom: 1px solid var(--border);
}
.cart-drawer-header h3 {
  font-family: var(--font-serif);
  font-size: 1.2rem; font-weight: 700; color: var(--dark);
}
.cart-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border2); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 1.1rem; cursor: pointer;
  transition: all .2s;
}
.cart-close:hover { background: var(--sand); color: var(--dark); }
.cart-items { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 16px; }
.cart-item {
  display: flex; gap: 14px;
  padding: 14px;
  background: var(--glass-tint-md);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: var(--radius-md);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.03);
}
.cart-item-img {
  width: 72px; height: 72px; border-radius: var(--radius-sm);
  background: var(--sand); overflow: hidden; flex-shrink: 0;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name { display: block; font-size: 0.85rem; font-weight: 600; color: var(--dark); margin-bottom: 5px; text-decoration: none; }
a.cart-item-name { cursor: pointer; transition: color .15s; }
a.cart-item-name:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cart-item-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cart-item-brand-logo {
  height: 24px; max-width: 96px; width: auto; object-fit: contain;
  background: #fff; border: 1px solid var(--border, rgba(0,0,0,0.1));
  border-radius: 6px; padding: 3px 6px; box-sizing: border-box; display: block;
}
[data-theme=dark] .cart-item-brand-logo { background: #fff; border-color: rgba(0,0,0,0.18); }
.cart-item-brand-name { font-size: 0.7rem; color: var(--accent); letter-spacing: 0.06em; }
.cart-item-country { display: inline-flex; align-items: center; gap: 5px; font-size: 0.7rem; color: var(--muted); }
.cart-item-country img { border-radius: 2px; flex-shrink: 0; }
.cart-item-price { font-size: 0.95rem; font-weight: 700; color: var(--dark); }
.cart-item-qty {
  display: flex; align-items: center; gap: 8px; margin-top: 6px;
}
/* Qty steppers — liquid glass, works on both themes */
.qty-btn {
  position: relative;
  width: 36px; height: 36px; border-radius: 50%;
  border: none;
  background: var(--glass-tint-md, rgba(255,255,255,0.55));
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 600; line-height: 1;
  cursor: pointer; color: var(--text2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    0 1px 4px rgba(28,28,30,0.06);
  overflow: hidden;
  transition: color .18s, background .2s, transform .12s, box-shadow .2s;
}
.qty-btn::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 22%,
    rgba(255,255,255,0)    45%,
    rgba(255,255,255,0)    55%,
    rgba(196,114,58,0.10)  78%,
    rgba(196,114,58,0.28)  100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.qty-btn > * { position: relative; z-index: 1; }
.qty-btn:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--glass-tint-strong, rgba(255,255,255,0.7)));
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 4px 12px rgba(196,114,58,0.22);
}
.qty-btn:active { transform: scale(0.94); }
[data-theme="dark"] .qty-btn {
  background: rgba(255,255,255,0.05);
  color: var(--text2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 4px rgba(0,0,0,0.32);
}
[data-theme="dark"] .qty-btn::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,0.20) 0%,
    rgba(255,236,200,0.06) 22%,
    rgba(255,255,255,0)    45%,
    rgba(255,255,255,0)    55%,
    rgba(212,136,78,0.14)  78%,
    rgba(212,136,78,0.36)  100%);
}
[data-theme="dark"] .qty-btn:hover {
  color: var(--accent-light, var(--accent));
  background: color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.06));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 14px rgba(212,136,78,0.34);
}
.qty-num { font-size: 0.92rem; font-weight: 700; min-width: 24px; text-align: center; color: var(--text); font-variant-numeric: tabular-nums; }
.cart-item-remove { background: none; border: none; color: var(--muted2); cursor: pointer; padding: 10px; min-width: 36px; min-height: 36px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: color .2s; }
.cart-item-remove:hover { color: #E53E3E; }
.cart-drawer-footer {
  padding: 24px 28px;
  border-top: 1px solid var(--border);
}
.cart-subtotal { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.cart-subtotal span:first-child { font-size: 0.85rem; color: var(--muted); }
.cart-subtotal strong { font-size: 1.1rem; font-weight: 700; color: var(--dark); }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.cart-empty svg { width: 48px; height: 48px; margin: 0 auto 16px; opacity: .35; }
.cart-empty p { font-size: 0.95rem; }

/* ── SEARCH OVERLAY ──────────────────────────────────────────── */
.search-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(249,247,244,0.96);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 140px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s;
}
.search-overlay.open { opacity: 1; pointer-events: auto; }
.search-overlay-input {
  width: 100%; max-width: 680px;
  font-family: var(--font-serif); font-size: 2rem;
  font-weight: 400; color: var(--dark);
  border: none; border-bottom: 2px solid var(--accent);
  background: transparent; padding: 0 0 18px;
  outline: none; text-align: center;
}
.search-overlay-input::placeholder { color: var(--muted2); }
.search-overlay-close {
  position: absolute; top: 28px; right: 36px;
  background: none; border: none; color: var(--muted); font-size: 1.4rem; cursor: pointer;
}

/* ── QUOTE MODAL ─────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(28,28,30,0.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(60px) saturate(1.8);
  -webkit-backdrop-filter: blur(60px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: var(--radius-xl);
  padding: 30px 36px;
  width: 100%; max-width: 520px;
  max-height: 88vh; overflow-y: auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 32px 80px rgba(0,0,0,0.22),
    0 8px 28px rgba(184,134,11,0.10);
  transform: scale(.96) translateY(12px);
  transition: transform .3s;
  position: relative;
  overscroll-behavior: contain;
}
.modal .form-group { margin-bottom: 12px; }
.modal h3 { margin-bottom: 4px; }
.modal > p { margin-bottom: 18px; }
.modal textarea { min-height: 70px; }
@media (max-width: 520px) {
  .modal { padding: 22px 20px; max-height: 92vh; }
}
/* Accent-top line on modal (libs.cc signature) */
.modal::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  pointer-events: none;
  z-index: 2;
}
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-close {
  position: absolute; top: 18px; right: 22px;
  background: none; border: none; color: var(--muted);
  font-size: 1.2rem; cursor: pointer;
}
.modal h3 { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.modal p { font-size: 0.88rem; color: var(--muted); margin-bottom: 28px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text2); margin-bottom: 6px; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 11px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--border2); background: var(--white);
  /* 16px is the minimum that prevents iOS Safari auto-zoom on focus.
     Anything smaller will zoom the page in and not zoom back out. */
  font-size: 16px; color: var(--text); outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-group textarea { resize: vertical; min-height: 90px; }
.form-group .input-locked,
.form-group input.input-locked,
.form-group input[readonly].input-locked {
  background: var(--sand, rgba(196,114,58,0.05));
  color: var(--muted);
  cursor: not-allowed;
  border-color: var(--border, rgba(0,0,0,0.08));
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
[data-theme=dark] .form-group .input-locked { background: rgba(255,255,255,0.04); color: var(--muted); }

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--muted);
  padding: 16px 0;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb-sep { color: var(--muted2); font-size: 0.7rem; }

/* ── PRODUCT DETAIL ──────────────────────────────────────────── */
.product-detail-grid {
  display: grid; grid-template-columns: 1fr 480px;
  /* Row 1 pinned to the gallery's own height (max-content). The info column
     spans both rows; when it is taller than the gallery (e.g. with several
     shipping carriers listed) its overflow flows into row 2 instead of
     inflating row 1, so the Description stays directly under the gallery
     rather than being pushed down by a gap. */
  grid-template-rows: max-content max-content auto;
  grid-template-areas:
    "gallery info"
    "opt     info"
    "desc    info";
  column-gap: 60px; row-gap: 32px;
  align-items: start;
}
.product-detail-grid > .product-gallery { grid-area: gallery; }
.product-detail-grid > .product-info    { grid-area: info; }
.product-detail-grid > #optionalsPriceSection { grid-area: opt; min-width: 0; }
.product-detail-grid > .product-tabs    { grid-area: desc; min-width: 0; margin-top: 0 !important; }
.opt-section { padding: 0; }
.opt-section .accessories-header { margin-bottom: 16px; }
/* No sticky positioning on the gallery: with `top: calc(--nav-h + 64px)` the
   browser shifted the gallery card down ~136px even at scroll=0, leaving the
   title floating high above the photo. Static keeps both columns aligned at
   the row top. */
.product-gallery { position: static; }
.gallery-main {
  aspect-ratio: 4/3; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--sand); margin-bottom: 12px;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumb {
  width: 76px; height: 62px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--sand);
  border: 2px solid transparent; cursor: pointer; flex-shrink: 0;
  transition: border-color .2s;
}
.gallery-thumb.active { border-color: var(--accent); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info { padding-top: 8px; }
.product-info .product-maker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.product-info h1 { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--dark); line-height: 1.2; margin-bottom: 6px; }
.product-info .product-model { font-size: 0.8rem; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 18px; }
.product-price-block { margin-bottom: 24px; }
.product-price-block .price-main { font-size: 2.2rem; font-weight: 700; color: var(--dark); }
.product-price-block .price-note { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
.product-specs-mini {
  background: var(--sand); border-radius: var(--radius-md);
  padding: 20px; margin-bottom: 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.spec-mini-item strong { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.spec-mini-item span { font-size: 0.9rem; color: var(--dark); font-weight: 500; }
.product-add-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.product-qty-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
/* Product-page qty pill: one liquid-glass capsule with embedded steppers */
.qty-control {
  position: relative;
  display: inline-flex; align-items: center; gap: 0;
  padding: 3px;
  border: none; border-radius: 999px;
  background: var(--glass-tint-md, rgba(255,255,255,0.55));
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 2px 10px rgba(28,28,30,0.06);
  overflow: visible;
}
.qty-control::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.65) 0%,
    rgba(255,255,255,0.22) 22%,
    rgba(255,255,255,0)    45%,
    rgba(255,255,255,0)    55%,
    rgba(196,114,58,0.12)  78%,
    rgba(196,114,58,0.30)  100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.qty-control .qty-btn {
  width: 32px; height: 32px;
  border: none; border-radius: 999px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  color: var(--text2);
}
.qty-control .qty-btn::before { display: none; }
.qty-control .qty-btn:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  transform: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}
.qty-control .qty-num { padding: 0 12px; font-weight: 700; color: var(--text); }
[data-theme="dark"] .qty-control {
  background: rgba(255,255,255,0.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 2px 10px rgba(0,0,0,0.36);
}
[data-theme="dark"] .qty-control::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,0.22) 0%,
    rgba(255,236,200,0.08) 22%,
    rgba(255,255,255,0)    45%,
    rgba(255,255,255,0)    55%,
    rgba(212,136,78,0.16)  78%,
    rgba(212,136,78,0.40)  100%);
}
[data-theme="dark"] .qty-control .qty-btn { color: var(--text2); }
[data-theme="dark"] .qty-control .qty-btn:hover {
  background: color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,0.06));
  color: var(--accent-light, var(--accent));
}
.product-trust {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: var(--radius-md);
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    var(--glass-ambient);
}
.product-trust-item { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text2); }
.product-trust-item svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }

/* ── SPEC TABLE ──────────────────────────────────────────────── */
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr { border-bottom: 1px solid var(--border); }
.spec-table tr:last-child { border-bottom: none; }
.spec-table td { padding: 12px 16px; font-size: 0.88rem; }
.spec-table td:first-child { font-weight: 600; color: var(--text2); width: 200px; background: var(--sand); }
.spec-table td:last-child { color: var(--dark); }

/* ── TABS ────────────────────────────────────────────────────── */
.tabs { border-bottom: 2px solid var(--border); margin-bottom: 32px; display: flex; gap: 0; }
.tab-btn {
  padding: 14px 24px; border: none; background: none;
  font-size: 0.85rem; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  cursor: pointer; transition: color .2s, border-color .2s;
}
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-pane { display: none; }
.tab-pane.active {
  display: block;
  animation: tabSlideIn 0.28s cubic-bezier(.4,0,.2,1);
}
@keyframes tabSlideIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.product-tabs { padding-left: 56px; }
@media (max-width: 768px) { .product-tabs { padding-left: 0; } }

/* ── REVEAL ANIMATIONS ───────────────────────────────────────── */

/* ── HERO ENTRANCE ANIMATIONS ────────────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-eyebrow { animation: heroFadeUp 0.6s cubic-bezier(.4,0,.2,1) 0.08s both; }
.hero h1      { animation: heroFadeUp 0.7s cubic-bezier(.4,0,.2,1) 0.22s both; }
.hero-sub     { animation: heroFadeUp 0.6s cubic-bezier(.4,0,.2,1) 0.38s both; }
.hero-actions { animation: heroFadeUp 0.6s cubic-bezier(.4,0,.2,1) 0.52s both; }
.hero-badge   { animation: heroFadeUp 0.5s cubic-bezier(.4,0,.2,1) 0.62s both; }

/* ── SCROLL STAGGER SYSTEM ───────────────────────────────────── */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-stagger > *.in { opacity: 1; transform: none; }
.reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── NEWPAGE HERO — staggered first-paint animation ───────────── */
@keyframes npFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes npFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.np-hero-eyebrow  { animation: npFadeUp .6s cubic-bezier(.4,0,.2,1) .10s both; }
.np-hero-headline { animation: npFadeUp .7s cubic-bezier(.4,0,.2,1) .22s both; }
.np-hero-sub      { animation: npFadeUp .6s cubic-bezier(.4,0,.2,1) .36s both; }
.np-hero-pill     { animation: npFadeUp .6s cubic-bezier(.4,0,.2,1) .48s both; }
.np-hero-dots     { animation: npFadeIn .5s ease .60s both; }
.np-hero-nav      { animation: npFadeIn .5s ease .60s both; }
.np-utility-strip { animation: npFadeIn .4s ease .04s both; }
header.glass-bar { animation: npFadeIn .35s ease .02s both; }

/* ── SECTION REVEAL — fades up as it enters the viewport ──────── */
/* Idle state — hidden, ready to animate */
.np-section { opacity: 0; transform: translateY(24px);
              transition: opacity .65s cubic-bezier(.4,0,.2,1),
                          transform .65s cubic-bezier(.4,0,.2,1); }
.np-section.in-view { opacity: 1; transform: none; }
/* Product cards inside an .in-view row stagger in */
.np-section.in-view .np-product-row > *,
.np-section.in-view .np-mag-list > *,
.np-section.in-view .np-cards > * {
  animation: npFadeUp .55s cubic-bezier(.4,0,.2,1) both;
}
.np-section.in-view .np-product-row > *:nth-child(1),
.np-section.in-view .np-mag-list   > *:nth-child(1),
.np-section.in-view .np-cards      > *:nth-child(1) { animation-delay: .04s; }
.np-section.in-view .np-product-row > *:nth-child(2),
.np-section.in-view .np-mag-list   > *:nth-child(2),
.np-section.in-view .np-cards      > *:nth-child(2) { animation-delay: .10s; }
.np-section.in-view .np-product-row > *:nth-child(3),
.np-section.in-view .np-mag-list   > *:nth-child(3),
.np-section.in-view .np-cards      > *:nth-child(3) { animation-delay: .16s; }
.np-section.in-view .np-product-row > *:nth-child(4),
.np-section.in-view .np-mag-list   > *:nth-child(4),
.np-section.in-view .np-cards      > *:nth-child(4) { animation-delay: .22s; }
.np-section.in-view .np-product-row > *:nth-child(5),
.np-section.in-view .np-cards      > *:nth-child(5) { animation-delay: .28s; }
.np-section.in-view .np-product-row > *:nth-child(6) { animation-delay: .34s; }

/* ── Section headers on narrow screens ───────────────────────────
   .np-title-row is a flex row of [rule] [title] [optional CTA], and the title
   is white-space:nowrap. On a phone a long heading plus a CTA cannot fit, so
   the CTA was pushed past the right edge and clipped by body{overflow-x:hidden}
   — measured 405px of content in a 390px viewport on the homepage, which is
   the "cut off on the right" that got reported. Let the row wrap and let the
   heading break instead. */
@media (max-width: 720px) {
  .np-title-row { flex-wrap: wrap; row-gap: 12px; }
  .np-title { white-space: normal; }
  .np-title-row > .np-line { flex: 1 1 16px; min-width: 16px; }
  .np-title-row .np-cta,
  .np-title-row .np-show-more { margin-left: 0; }
}

/* A flicked carousel used to stop with a card sliced in half at the screen
   edge, which reads as a broken image rather than "there is more to the
   right". Snap to whole cards. */
@media (max-width: 900px) {
  .np-pcr { scroll-snap-type: x proximity; scroll-padding-left: 16px; }
  .np-pcr > * { scroll-snap-align: start; }
}

/* Generic .section (non-newpage pages) — same reveal pattern */
main .section:not(.hero):not(.no-reveal) {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.4,0,.2,1);
}
main .section.in-view { opacity: 1; transform: none; }

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .np-hero-eyebrow, .np-hero-headline, .np-hero-sub, .np-hero-pill,
  .np-hero-dots, .np-hero-nav, .np-utility-strip, header,
  .np-section, .np-section.in-view,
  .np-section.in-view .np-product-row > *,
  .np-section.in-view .np-mag-list > *,
  .np-section.in-view .np-cards > *,
  main .section, main .section.in-view {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── MOBILE NAV ──────────────────────────────────────────────── */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 11px; cursor: pointer;
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--dark); border-radius: 2px; transition: all .3s; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header compact on scroll */
header.glass-bar { transition: box-shadow .3s; }
header.glass-bar.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.09); }
header.scrolled .header-inner { padding-top: 10px; padding-bottom: 10px; }
header.scrolled .logo-tag { display: none; }

.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(320px,90vw);
  z-index: 600;
  background: rgba(252,250,248,0.94);
  backdrop-filter: blur(50px) saturate(1.8); -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border-left: 1px solid rgba(255,255,255,0.7);
  box-shadow: -8px 0 40px rgba(0,0,0,0.12);
  transform: translateX(100%); transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto; padding: 80px 28px 40px;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 599;
  background: rgba(28,28,30,0.4); backdrop-filter: blur(2px);
  transition: opacity .3s;
}
.mobile-nav.open ~ .mobile-nav-overlay,
.mobile-nav-overlay.open { display: block; }
.mobile-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600;
  color: var(--dark);
  text-decoration: none;
  background: none; border-left: none; border-right: none; border-top: none;
  width: 100%; text-align: inherit; cursor: pointer;
}
.mobile-nav-link:hover { color: var(--accent); }
.mobile-nav-link svg { width: 18px; height: 18px; flex: 0 0 18px; opacity: .8; }

/* Mobile nav extras (injected by app.js): wishlist, auth, lang, currency, theme */
.mnav-extras { margin-top: 8px; }
.mnav-divider {
  height: 1px; background: var(--border); margin: 16px 0 4px;
}
.mnav-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.mnav-row-label {
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.mnav-pillgroup { display: flex; flex-wrap: wrap; gap: 6px; }
.mnav-pill {
  padding: 7px 12px; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: transparent; color: var(--text);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.mnav-pill:hover { border-color: var(--accent-border); color: var(--accent); }
.mnav-pill.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff;
}
[data-theme="dark"] .mnav-pill { color: var(--text); }
[data-theme="dark"] .mnav-pill.active { color: #fff; }
.mnav-action {
  background: none; border-left: none; border-right: none; border-top: none;
}

/* ── TOAST NOTIFICATION ──────────────────────────────────────── */
.toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  /* liquid glass — light theme: frosted warm white, dark text */
  background: var(--glass-tint-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.55);
  padding: 13px 28px; border-radius: 40px;
  font-size: 0.82rem; font-weight: 500;
  box-shadow:
    inset 1px 1px 1px -1px rgba(255,255,255,0.9),
    inset 0 0 8px 1px rgba(255,255,255,0.18),
    0 10px 34px rgba(0,0,0,0.18);
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
  z-index: 9999; white-space: normal;
  max-width: min(400px, calc(100vw - 32px));
  text-align: center;
  display: flex; align-items: center; gap: 8px;
}
[data-theme="dark"] .toast {
  background: rgba(22,22,28,0.55);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 1px 1px 1px -1px rgba(255,255,255,0.35),
    inset 0 0 8px 1px rgba(255,255,255,0.06),
    0 10px 34px rgba(0,0,0,0.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast-icon { color: var(--accent); }
.toast img { border-radius: 6px; }

/* ── SCROLL TOP ──────────────────────────────────────────────── */

/* ── WHATSAPP FLOAT BUTTON ───────────────────────────────────── */
.whatsapp-btn {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  transition: transform .2s, box-shadow .2s;
  z-index: 999; text-decoration: none; flex-shrink: 0;
}
.whatsapp-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(37,211,102,0.55); }
.whatsapp-btn svg { width: 22px; height: 22px; fill: currentColor; }

/* ── PRODUCT GRID VIEW TOGGLE ────────────────────────────────── */
.view-toggle { display: flex; gap: 4px; align-items: center; }
.view-btn {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--border2); background: var(--white);
  color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .18s;
}
.view-btn:hover { border-color: var(--accent-border); color: var(--accent); }
.view-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.view-btn svg { width: 15px; height: 15px; }
[data-theme=dark] .view-btn { background: var(--bone); }
[data-theme=dark] .view-btn.active { background: var(--accent); }

/* ── COMPACT GRID (6 per row) ────────────────────────────────── */
#productGrid.compact {
  grid-template-columns: repeat(6, 1fr) !important;
}
#productGrid.compact .product-card-image { min-height: 130px; }
#productGrid.compact .product-card-info { padding: 8px 10px 10px; }
#productGrid.compact .product-card-name { font-size: 0.76rem; }
#productGrid.compact .product-card-maker { font-size: 0.68rem; }
#productGrid.compact .product-card-price { font-size: 0.88rem; }
#productGrid.compact .product-card-ship,
#productGrid.compact .product-card-tags { display: none; }
#productGrid.compact .product-card-actions { padding: 0 8px 8px; }
#productGrid.compact .btn-cart { padding: 7px 8px; font-size: 0.68rem; gap: 4px; }
#productGrid.compact .btn-quote { padding: 7px 8px; font-size: 0.68rem; }
@media (max-width: 900px) {
  #productGrid.compact { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 600px) {
  #productGrid.compact { grid-template-columns: repeat(2, 1fr) !important; }
}
.scroll-top {
  position: fixed; bottom: 24px; right: 76px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 8px 24px rgba(184,134,11,0.12),
    0 2px 10px rgba(0,0,0,0.10);
  color: var(--accent); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: all .3s; z-index: 500;
}
.scroll-top.visible { opacity: 1; pointer-events: auto; }
.scroll-top:hover { background: var(--accent); color: #fff; transform: translateY(-3px); }
.scroll-top svg { width: 18px; height: 18px; }

/* ── PAGINATION ──────────────────────────────────────────────── */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 48px; }
.page-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.55);
  background: var(--glass-tint-md);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.03);
  font-size: 0.85rem; color: var(--text2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.page-btn:hover:not(.active) { border-color: var(--accent-border); color: var(--accent); }

/* ── FILTER SIDEBAR (category page) ─────────────────────────── */
.cat-products-section { padding-top: 36px; }
.category-layout { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: flex-start; }
.filter-sidebar { position: sticky; top: calc(var(--nav-h) + 16px); max-height: calc(100vh - var(--nav-h) - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(196,114,58,0.35) transparent; }
.filter-panel {
  background: rgba(240,232,220,0.72);   /* warm tint, not white (dark theme restored below) */
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: var(--radius-md);
  padding: 24px; margin-bottom: 16px;
  /* No overflow:hidden — the panel must grow to wrap its scrollable
     children (model list, brand list, etc.) so the glass background
     doesn't cut off mid-list. The inner list handles its own scroll. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 4px 18px rgba(184,134,11,0.05);
  display: flex; flex-direction: column;
}
.filter-panel > * { min-height: 0; }
.filter-panel h4 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text2); margin-bottom: 16px; }
.filter-option { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.filter-option input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.filter-option span { font-size: 0.86rem; color: var(--text2); }
.filter-option .filter-count { margin-left: auto; font-size: 0.72rem; color: var(--muted2); }
.filter-clear { font-size: 0.75rem; color: var(--accent); font-weight: 600; background: none; border: none; cursor: pointer; margin-top: 12px; }

/* ── SORT TOOLBAR ────────────────────────────────────────────── */
.sort-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px; padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.sort-toolbar-left { font-size: 0.85rem; color: var(--muted); }
.sort-toolbar-left strong { color: var(--dark); }
.sort-select {
  padding: 7px 12px; border: 1px solid var(--border2); border-radius: var(--radius-sm);
  background: var(--white); font-size: 0.82rem; color: var(--text2); outline: none; cursor: pointer;
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .product-grid { grid-template-columns: repeat(3,1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .cat-grid { grid-template-columns: repeat(3,1fr); }
  .cat-tile:first-child { grid-row: span 1; aspect-ratio: 3/4; }
}
@media (max-width: 900px) {
  .container { padding: 0 20px; }
  .header-inner { grid-template-columns: auto 1fr auto; gap: 16px; }
  .mega-nav { display: none; }
  .hamburger { display: flex; }
  .product-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: repeat(2,1fr); }
  .usp-bar-inner { grid-template-columns: 1fr 1fr; }
  .usp-item { border-right: none; border-bottom: 1px solid var(--border); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-wrap { grid-template-columns: 1fr; gap: 28px; }
  .product-detail-grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "gallery" "info" "opt" "desc"; }
  .product-gallery { position: static; }
  .category-layout { grid-template-columns: 1fr; }
  .filter-sidebar { position: static; }
}
@media (max-width: 600px) {
  .hero { height: 520px; }
  .hero-badge { display: none; }
  .product-grid { grid-template-columns: 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .usp-bar-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .cart-drawer { width: auto; top: 8px; right: 8px; bottom: 8px; left: 8px; border-radius: 18px; transform: translateY(calc(100% + 16px)); }
  .cart-drawer.open { transform: translateY(0); }
  /* Raise the cart-drawer qty steppers + remove button to a 44px touch
     target on mobile (the product-page .qty-control steppers are left
     untouched — this is scoped to the drawer). */
  .cart-item-qty .qty-btn { width: 44px; height: 44px; }
  .cart-item-remove { min-width: 44px; min-height: 44px; }

  /* Header: strip Request Quote and currency — they don't fit */
  .header-actions > a.btn-gold { display: none; }
  .header-actions .currency-toggle { display: none; }
  .header-inner { grid-template-columns: auto 1fr auto !important; gap: 8px !important; }
  .container { padding: 0 16px; }

  /* Cart button: icon only, no text */
  .hbtn { padding: 8px; font-size: 0; gap: 0; }
  .hbtn svg { width: 22px; height: 22px; }
  .hbtn .badge { top: 0; left: calc(50% + 3px); right: auto; }
}

/* ═══════════════════════════════════════════════════════════════
   ENHANCEMENTS — Glass depth · Gradients · Polish
   ═══════════════════════════════════════════════════════════════ */

/* ── GLASS GRADIENT BORDER (::before technique) ──────────────── */
/* Remove flat borders, replace with gradient mask */
.glass       { border: none; position: relative; }
.glass-heavy { border: none; position: relative; }

.glass::before,
.glass-heavy::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.40) 15%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0)    50%,
    rgba(196,114,58,0)     50%,
    rgba(196,114,58,0.06)  75%,
    rgba(196,114,58,0.22)  100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Apply gradient border to key glass elements */
.mega-panel  { border: none; position: relative; }
.cart-drawer { border-left: none; }
.modal       { border: none; position: relative; }
.hero-badge  { position: relative; }

.mega-panel::before,
.cart-drawer::before,
.modal::before,
.hero-badge::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.20) 20%,
    rgba(255,255,255,0)    50%,
    rgba(255,248,220,0)    50%,
    rgba(255,248,220,0.08) 75%,
    rgba(255,245,210,0.30) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* ── COPPER GRADIENT BUTTON — libs.cc signature CTA ─────────── */
.btn-gold {
  background: color-mix(in srgb, var(--accent) 88%, var(--glass-tint));
  color: #fff;
  backdrop-filter: blur(50px) saturate(1.6);
  -webkit-backdrop-filter: blur(50px) saturate(1.6);
  border: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 4px 20px rgba(196,114,58,0.32),
    0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
  position: relative;
  overflow: hidden;
}
/* Top-light + bottom-light 1px gradient-mask border (libs signature) */
.btn-gold::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.12) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.12) 80%,
    rgba(255,255,255,0.42) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-gold:hover {
  background: color-mix(in srgb, var(--accent2) 92%, var(--glass-tint));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.36),
    inset 0 -1px 0 rgba(0,0,0,0.08),
    0 8px 30px rgba(196,114,58,0.50),
    0 0 24px color-mix(in srgb, var(--accent) 32%, transparent);
  transform: translateY(-2px);
}

/* ── UNIFIED FOOTER (np-footer) ───────────────────────────────── */
/* Canonical footer markup used on every page; styles lived inline in
   index.html only, so migrated pages rendered as plain stacked text.
   Keeping them here applies the grid layout everywhere. */
.np-footer { background: #0a0a0a; color: #c8c2b8; padding: 56px 0 0; margin-top: 64px; }
[data-theme="dark"] .np-footer { background: #000; }
.np-footer .container { padding-left: 24px; padding-right: 24px; }
.np-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 40px; }
@media (max-width: 820px) { .np-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 480px) { .np-footer-grid { grid-template-columns: 1fr; } }
.np-footer h4 { color:#fff; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; font-weight: 700; }
.np-footer ul { list-style: none; padding: 0; margin: 0; }
.np-footer li { margin-bottom: 8px; color: #b8b2a8; font-size: .85rem; }
.np-footer a { color: #b8b2a8; text-decoration: none; font-size: .85rem; transition: color .15s; cursor: pointer; }
.np-footer a:hover { color: var(--accent); }
.np-footer-brand { max-width: 320px; }
.np-footer-brand .fb-name { font-family: var(--font-serif); font-size: 1.4rem; font-weight: 800; color: #fff; }
.np-footer-brand .fb-name span { color: var(--accent); }
.np-footer-brand p { font-size: .85rem; line-height: 1.6; margin-top: 8px; color: #b8b2a8; }
.np-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 20px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: .78rem; color: #8a8478; }
.np-footer-bottom .pay-methods { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.np-footer-bottom .pay-pill { background: rgba(255,255,255,0.06); border-radius: 6px; padding: 4px 8px; display: inline-flex; align-items: center; }
.np-footer-bottom .pay-pill img { display: block; }
/* Apple Pay wordmark ships as pure black SVG; invert on the dark footer */
.np-footer-bottom .pay-pill img[alt="Apple Pay"],
.np-footer-bottom .pay-pill img[src*="apple-pay"] { filter: invert(1) brightness(1.05); }
.np-footer-bottom .np-footer-copyright { text-align: center; }

/* ── Footer social icons ──────────────────────────────────────
   Same construction as libs.cc (inline currentColor SVG, lift on hover),
   recoloured to Mecivi: muted on the dark footer, copper glow on hover.
   Scoped to .np-footer-bottom because an older footer design already owns a
   .footer-social component (36px bordered circle, line 1278) and the two were
   fighting over size and border. Adding a platform is one <a> per page. */
.np-footer-bottom .footer-socials {
  display: flex; gap: 14px; align-items: center; justify-content: center;
}
.np-footer-bottom .footer-social {
  width: auto; height: auto; border: 0; border-radius: 0;
  color: #8a8478;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease, filter .2s ease;
}
.np-footer-bottom .footer-social:hover,
.np-footer-bottom .footer-social:focus-visible {
  color: var(--accent);
  transform: translateY(-2px);
  filter: drop-shadow(0 0 6px rgba(196,114,58,.55));
}
.np-footer-bottom .footer-social:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px;
}
.np-footer-bottom .footer-social svg { display: block; width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) {
  .np-footer-bottom .footer-social { transition: color .2s ease; }
  .np-footer-bottom .footer-social:hover,
  .np-footer-bottom .footer-social:focus-visible { transform: none; }
}



/* ── PRODUCT IMAGE PLACEHOLDER ───────────────────────────────── */
.product-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 6%, var(--cream)),
    color-mix(in srgb, var(--accent) 2%, var(--cream)));
  padding: 18px 14px;
  text-align: center;
}
.product-placeholder .pp-mark {
  font-family: var(--font-serif, 'Playfair Display', Georgia, serif);
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--dark);
  line-height: 1;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.product-placeholder .pp-mark .accent { color: var(--accent); }
.product-placeholder .pp-note {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 200px;
  line-height: 1.3;
}
/* Opaque dark base (var(--cream) is dark in this theme) so the placeholder never
   composites with a lighter container behind it (e.g. the optional card's light
   image box) and the "Meci" mark stays readable. */
[data-theme="dark"] .product-placeholder {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 14%, var(--cream)),
    color-mix(in srgb, var(--accent) 6%, var(--cream)));
}
[data-theme="dark"] .product-placeholder .pp-mark { color: var(--text); }
[data-theme="dark"] .product-placeholder .pp-note { color: var(--muted); }

/* ── WHY-CARD GHOST NUMBER ───────────────────────────────────── */
.why-card { overflow: hidden; }
.why-num {
  position: absolute; top: 14px; right: 18px;
  font-family: var(--font-serif);
  font-size: 4.5rem; font-weight: 700; line-height: 1;
  color: var(--dark); opacity: 0.12;
  user-select: none; pointer-events: none;
}

/* ── TESTIMONIAL QUOTE MARK ──────────────────────────────────── */
.testi-card { position: relative; overflow: hidden; }
.testi-card::before {
  content: '\201C';
  position: absolute; top: 8px; right: 18px;
  font-family: var(--font-serif); font-size: 5.5rem;
  color: var(--accent); opacity: 0.09; line-height: 1;
  pointer-events: none;
}

/* ── BRAND STRIP — PILL STYLE (text-only logos) ─────────────── */
.brand-logo:not(.brand-logo-img) {
  padding: 7px 18px;
  border-radius: 30px;
  border: 1px solid var(--border2);
  background: var(--white);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
}
.brand-logo:not(.brand-logo-img):hover { border-color: var(--accent-border); }

/* ── CATEGORY TILE GLASS EDGE ────────────────────────────────── */
.cat-tile {
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255,255,255,0.08);
}
.cat-tile:hover { box-shadow: var(--shadow-lg); }

/* ── SECTION EYEBROW — LEADING LINE ──────────────────────────── */
.section-eyebrow {
  gap: 14px;
}
.section-eyebrow::before {
  content: '';
  display: block;
  width: 20px; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.section-head.centered .section-eyebrow::before { display: none; }

/* ── USP ICON HOVER GLOW ─────────────────────────────────────── */
.usp-item:hover .usp-icon {
  background: var(--accent-dim);
  box-shadow: 0 0 18px rgba(196,114,58,0.18);
  transition: all .3s;
}

/* ── PRODUCT CARD SUBTLE LIFT SHADOW ─────────────────────────── */
.product-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(196,114,58,0.08);
}

/* ── FOOTER BRAND GRADIENT LOGO ──────────────────────────────── */
.footer-logo-name span {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── LOGO WORDMARK SPAN GRADIENT ─────────────────────────────── */
.logo-name span {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR CATEGORY TREE — unitheme.net style
   ═══════════════════════════════════════════════════════════════ */

/* ── SITE BODY WITH SIDEBAR LAYOUT ──────────────────────────── */
.sidebar-layout {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 28px;
  align-items: flex-start;
  max-width: 1380px;
  margin: 0 auto;
  padding: 32px 32px 0;
}

/* ── CATEGORY SIDEBAR ────────────────────────────────────────── */
.cat-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 48px + 12px);
  max-height: calc(100vh - var(--nav-h) - 48px - 40px);
  overflow-y: auto;
  border-radius: var(--radius-md);
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 4px 18px rgba(184,134,11,0.05);
  scrollbar-width: thin;
  scrollbar-color: rgba(196,114,58,0.45) rgba(196,114,58,0.08);
}
.cat-sidebar::-webkit-scrollbar { width: 5px; }
.cat-sidebar::-webkit-scrollbar-track { background: rgba(196,114,58,0.08); border-radius: 10px; }
.cat-sidebar::-webkit-scrollbar-thumb { background: rgba(196,114,58,0.42); border-radius: 10px; }
.cat-sidebar::-webkit-scrollbar-thumb:hover { background: rgba(196,114,58,0.72); }

.cat-sidebar-header {
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.cat-sidebar-header svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.cat-sidebar-header span {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--text2);
}

/* ── CATEGORY TREE ───────────────────────────────────────────── */
.cat-tree { padding: 6px 0; }

.cat-tree-item { position: relative; }

/* Top-level toggle */
.cat-tree-toggle {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 18px;
  background: none; border: none; text-align: left; cursor: pointer;
  font-size: 0.84rem; font-weight: 600; color: var(--text);
  transition: background .15s, color .15s;
  position: relative;
}
.cat-tree-toggle:hover { background: var(--sand); color: var(--accent); }
.cat-tree-toggle .ct-icon { width: 15px; height: 15px; flex-shrink: 0; color: var(--accent); opacity: .7; }
.cat-tree-toggle .ct-chevron {
  width: 12px; height: 12px; margin-left: auto; flex-shrink: 0;
  color: var(--muted2); transition: transform .25s;
}
.cat-tree-item.open > .cat-tree-toggle { color: var(--accent); background: var(--sand); }
.cat-tree-item.open > .cat-tree-toggle .ct-chevron { transform: rotate(180deg); }

/* Left accent bar when open */
.cat-tree-item.open > .cat-tree-toggle::before {
  content: '';
  position: absolute; left: 0; top: 4px; bottom: 4px;
  width: 3px; background: var(--accent); border-radius: 0 3px 3px 0;
}

/* Subcategory list */
.cat-tree-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  background: rgba(249,247,244,0.6);
  border-top: 1px solid transparent;
}
.cat-tree-item.open > .cat-tree-sub {
  max-height: 800px;
  border-top-color: var(--border);
}

/* Sub-level links */
.cat-tree-sub a {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 18px 6px 34px;
  font-size: 0.80rem; color: var(--text2);
  transition: color .15s, background .15s;
}
.cat-tree-sub a::before {
  content: '';
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--muted2); flex-shrink: 0;
  transition: background .15s;
}
.cat-tree-sub a:hover { color: var(--accent); background: var(--sand); }
.cat-tree-sub a:hover::before { background: var(--accent); }

/* Nested sub-sub toggle */
.cat-tree-sub .cat-tree-toggle {
  padding: 6px 18px 6px 26px;
  font-size: 0.80rem; font-weight: 500;
}
.cat-tree-sub .cat-tree-sub a { padding-left: 48px; font-size: 0.76rem; color: var(--muted); }

/* Divider between top-level cats */
.cat-tree-divider { height: 1px; background: var(--border); margin: 4px 12px; }

/* ── SIDEBAR MAIN CONTENT AREA ───────────────────────────────── */
.sidebar-main { min-width: 0; }

/* ── RESPONSIVE — collapse sidebar on mobile ─────────────────── */
@media (max-width: 1024px) {
  .sidebar-layout {
    grid-template-columns: 1fr;
    padding: 20px 20px 0;
  }
  .cat-sidebar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CATEGORIES DROPDOWN — unitheme style
   ═══════════════════════════════════════════════════════════════ */

/* Header grid update */
.header-inner {
  grid-template-columns: auto auto minmax(380px, 1fr) auto !important;
  gap: 14px !important;
}

/* Compare feature archived */
#hdrCompare,
.hdr-icon-btn#hdrCompare,
.btn-compare,
[data-cmp-slug],
.pcf-secondary .btn-compare {
  display: none !important;
}
.pcf-secondary { justify-content: center; }

/* ── Categories button ───────────────────────────────────────── */
.cat-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px; border-radius: 30px;
  background: var(--accent); color: #fff;
  border: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background .2s, box-shadow .2s, transform .15s;
  box-shadow: 0 3px 14px rgba(196,114,58,0.35);
}
.cat-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.cat-btn .cat-btn-chevron { transition: transform .25s; }
.cat-btn:hover { background: var(--accent2); transform: translateY(-1px); box-shadow: 0 5px 18px rgba(196,114,58,0.4); }
.cat-btn.open { background: var(--dark); box-shadow: none; border-radius: 30px; }
.cat-btn.open .cat-btn-chevron { transform: rotate(180deg); }

/* ── Dropdown container ──────────────────────────────────────── */
.cat-dropdown {
  position: fixed;
  top: calc(var(--bar-h) + var(--nav-h) + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  z-index: 500;
  width: min(1060px, calc(100vw - 40px));
  /* Liquid glass */
  background: rgba(252,250,248,0.82);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.08),
              inset 0 1px 0 rgba(255,255,255,0.92);
  max-height: 72vh;
  opacity: 0; pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
  overflow: hidden;
}
/* Gradient border */
.cat-dropdown::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0) 50%,
    rgba(255,245,210,0) 50%, rgba(255,245,210,0.06) 75%, rgba(255,245,210,0.22) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.cat-dropdown.open {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* ── Dropdown inner grid ─────────────────────────────────────── */
.cat-dropdown-inner {
  display: grid;
  grid-template-columns: 220px 1fr;
  max-height: 72vh;
  overflow: hidden;
  position: relative; z-index: 1;
}

/* ── Left: category list ─────────────────────────────────────── */
.cat-dropdown-list {
  border-right: 1px solid rgba(255,255,255,0.55);
  overflow-y: auto;
  /* No distinct sidebar fill — avoids the "extended empty sidebar" below the
     section list when a tall section (Bakery) stretches the dropdown. */
  background: transparent;
  max-height: 72vh;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(196,114,58,0.45) rgba(196,114,58,0.08);
}
.cat-dropdown-list::-webkit-scrollbar { width: 4px; }
.cat-dropdown-list::-webkit-scrollbar-track { background: rgba(196,114,58,0.08); border-radius: 10px; }
.cat-dropdown-list::-webkit-scrollbar-thumb { background: rgba(196,114,58,0.42); border-radius: 10px; }
.cat-dropdown-list::-webkit-scrollbar-thumb:hover { background: rgba(196,114,58,0.72); }

.cat-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  font-size: 0.84rem; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: background .12s, color .12s;
  text-decoration: none;
}
.cat-dropdown-item:hover,
.cat-dropdown-item.active {
  background: var(--white);
  color: var(--accent);
}
.cat-dropdown-item .cdi-icon {
  width: 17px; height: 17px; flex-shrink: 0;
  color: var(--muted); transition: color .12s;
}
.cat-dropdown-item:hover .cdi-icon,
.cat-dropdown-item.active .cdi-icon { color: var(--accent); }
.cat-dropdown-item .cdi-chevron {
  width: 12px; height: 12px;
  margin-left: auto; color: var(--muted2); flex-shrink: 0;
}

/* ── Right: subcat panel ─────────────────────────────────────── */
.cat-dropdown-panel {
  overflow-y: auto;
  max-height: 72vh;
  /* No distinct fill — the whole dropdown is one uniform glass surface, so a
     sparse section's panel (or the area beside a short section) never reads as
     a separate empty block. Content stays top-aligned. */
  background: transparent;
  padding: 28px 40px;
  scrollbar-width: thin;
}

.cat-panel { display: none; }
/* Multi-column, not flex-wrap. Flex-wrap needs the column count decided in JS,
   and any guess that did not match the rendered width pushed the surplus onto a
   second row — which is what left Bakery with a lone "Work Tables" in column
   one and two groups stranded underneath. The browser is the only thing that
   knows the real heights and available width, so let it balance: column-width
   sets the target and `break-inside: avoid` keeps each heading with its links. */
.cat-panel.active {
  display: block;
  column-width: 165px;
  column-gap: 38px;
  orphans: 3; widows: 3;
}
.cat-panel-col {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 20px;
}
.cat-panel-col:first-child h4 { margin-top: 0; }

.cat-panel-col h4 {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.cat-panel-col a {
  display: block; padding: 4px 0;
  font-size: 0.83rem; color: var(--text2);
  transition: color .12s, padding-left .12s;
  text-decoration: none;
}
.cat-panel-col a:hover { color: var(--accent); padding-left: 4px; }
/* A category that has no subcategories renders as a single clickable link.
   Style it like the category <h4> header (uppercase, accent, underline) so it
   reads as a CATEGORY, not an orphaned subcategory. */
.cat-panel-col a.cat-col-lead {
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  padding: 0 0 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
/* A category with no subcategories still reads as a header, so add a trailing
   arrow to signal it's a link you can click through (vs the plain group labels). */
.cat-panel-col a.cat-col-lead::after {
  content: '→'; display: inline-block; margin-left: 6px;
  font-size: 0.9em; opacity: 0.5; transition: transform .15s, opacity .15s;
}
.cat-panel-col a.cat-col-lead:hover { color: var(--accent); opacity: 1; }
.cat-panel-col a.cat-col-lead:hover::after { transform: translateX(3px); opacity: 1; }

/* ── Backdrop overlay ────────────────────────────────────────── */
.cat-dropdown-overlay {
  position: fixed; inset: 0; z-index: 499;
  background: rgba(28,28,30,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.cat-dropdown-overlay.open { opacity: 1; pointer-events: auto; }

/* ── Dark theme: liquid glass for the categories mega-dropdown ───── */
[data-theme="dark"] .cat-dropdown {
  background: rgba(28,22,16,0.32);
  backdrop-filter: blur(80px) saturate(2.2);
  -webkit-backdrop-filter: blur(80px) saturate(2.2);
  box-shadow:
    0 24px 64px rgba(0,0,0,0.55),
    0 4px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,236,200,0.22),
    inset 0 -1px 0 rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,236,200,0.08);
}
[data-theme="dark"] .cat-dropdown-list {
  background: transparent !important;
}
[data-theme="dark"] .cat-dropdown-panel {
  background: transparent !important;
}
[data-theme="dark"] .cat-dropdown::before {
  background: linear-gradient(135deg,
    rgba(255,236,200,0.42) 0%,
    rgba(255,236,200,0.12) 18%,
    rgba(255,255,255,0)    50%,
    rgba(212,136,78,0)     50%,
    rgba(212,136,78,0.10)  75%,
    rgba(212,136,78,0.34)  100%);
}
[data-theme="dark"] .cat-dropdown-list {
  background: transparent;
  border-right: 1px solid rgba(255,236,200,0.10);
}
[data-theme="dark"] .cat-dropdown-list::-webkit-scrollbar-track { background: rgba(212,136,78,0.10); }
[data-theme="dark"] .cat-dropdown-list::-webkit-scrollbar-thumb { background: rgba(212,136,78,0.42); }
[data-theme="dark"] .cat-dropdown-list::-webkit-scrollbar-thumb:hover { background: rgba(212,136,78,0.72); }
[data-theme="dark"] .cat-dropdown-panel {
  background: rgba(40,34,26,0.14);
}
[data-theme="dark"] .cat-dropdown-item:hover,
[data-theme="dark"] .cat-dropdown-item.active {
  background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,0.04));
  color: var(--accent);
}
[data-theme="dark"] .cat-dropdown-overlay {
  background: rgba(0,0,0,0.55);
}

/* ── Hide old mega-nav if any remnant ────────────────────────── */
.mega-nav { display: none !important; }

/* ── Mobile: hide cat-btn on small screens ───────────────────── */
@media (max-width: 900px) {
  .cat-btn { display: none; }
  .header-inner { grid-template-columns: auto 1fr auto !important; }
}


/* ── CATEGORY PAGE HERO ──────────────────────────────────────── */
.cat-page-hero {
  background: #EFE7DB;               /* light theme: warm band, not dark */
  padding: 36px 0 32px;
}
.cat-page-hero .breadcrumb { color: var(--muted); padding: 0 0 14px; }
.cat-page-hero .breadcrumb a { color: var(--text2); }
.cat-page-hero .breadcrumb a:hover { color: var(--accent); }
.cat-page-hero .breadcrumb-sep { color: var(--muted2); }
.cat-page-title { font-family: var(--font-serif); font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cat-page-desc { font-size: 0.95rem; color: var(--text2); max-width: 560px; line-height: 1.65; }

/* In-filter search box */
.filter-search { width: 100%; margin: 0 0 12px; padding: 8px 12px; font-size: 0.82rem;
  border: 1px solid var(--border2); border-radius: 9px; background: rgba(255,255,255,0.55);
  color: var(--text); outline: none; transition: border-color .2s; }
.filter-search::placeholder { color: var(--muted2); }
.filter-search:focus { border-color: var(--accent); }
[data-theme=dark] .filter-search { background: rgba(255,255,255,0.05); }

/* ── SUBCATEGORY PILLS BAR ───────────────────────────────────── */
.cat-pills-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 0; }
.cat-pills { display: flex; gap: 6px; align-items: center; padding: 12px 0; overflow-x: auto; scrollbar-width: none; flex-wrap: wrap; }
.cat-pills::-webkit-scrollbar { display: none; }
.cat-pill {
  display: inline-flex; align-items: center;
  padding: 6px 16px; border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.55);
  background: var(--glass-tint-md);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.03);
  font-size: 0.80rem; font-weight: 500; color: var(--text2);
  white-space: nowrap; cursor: pointer;
  transition: all .18s; text-decoration: none;
}
.cat-pill:hover { border-color: var(--accent-border); color: var(--accent); background: var(--accent-dim); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(196,114,58,0.12); }

/* ── AUTH HEADER ELEMENTS ────────────────────────────────────── */
.auth-signin-btn {
  display: inline-flex; align-items: center; padding: 8px 18px;
  border-radius: 30px; border: 1px solid var(--accent-border);
  background: rgba(196,114,58,0.06); color: var(--accent);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  text-decoration: none; transition: all .18s;
}
.auth-signin-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.header-user { position: relative; }
.header-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px; border-radius: 30px;
  border: 1px solid var(--border2); background: var(--white);
  font-size: 0.83rem; font-weight: 500; color: var(--text2);
  cursor: pointer; transition: all .18s;
}
.header-user-btn:hover { border-color: var(--accent-border); color: var(--accent); }
.header-user-av {
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #fff; font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.header-user-name { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@keyframes dropOut {
  from { opacity: 1; transform: translateY(0)   scale(1);    }
  to   { opacity: 0; transform: translateY(-6px) scale(0.96); }
}
.header-user-dd {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 220px; z-index: 9999;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border-radius: var(--radius-lg); padding: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 24px 64px rgba(0,0,0,0.18),
    0 6px 20px rgba(184,134,11,0.08);
  border: 1px solid rgba(255,255,255,0.70);
  transform-origin: top right;
}
/* RTL: header user pill sits on the left side of the header — flip the
   dropdown anchor so it opens rightward into the viewport, not off-screen. */
[dir="rtl"] .header-user-dd { right: auto; left: 0; transform-origin: top left; }
.header-user-dd.open {
  display: block;
  animation: dropIn 0.2s cubic-bezier(.4,0,.2,1) both;
}
.hud-user-info { padding: 10px 12px 8px; }
.hud-user-name { font-size: 0.86rem; font-weight: 600; color: var(--text); }
.hud-user-email { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }
.hud-sep { height: 1px; background: var(--border); margin: 6px 0; }
.hud-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 0.84rem; color: var(--text2); text-decoration: none;
  transition: background .15s, color .15s; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
}
.hud-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted2); }
.hud-item:hover { background: var(--sand); color: var(--text); }
.hud-item:hover svg { color: var(--accent); }
.hud-signout { color: #e53e3e; }
.hud-signout svg { color: #e53e3e; }
.hud-signout:hover { background: rgba(229,62,62,0.08); color: #c53030; }

/* ── CURRENCY TOGGLE ─────────────────────────────────────── */
.currency-toggle {
  position: relative;
}
.currency-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 20px;
  background: rgba(28,28,30,0.07); border: 1px solid var(--border);
  font-size: 0.75rem; font-weight: 600; color: var(--text2);
  cursor: pointer; transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.currency-btn:hover { background: var(--sand); border-color: var(--bone); }
.currency-btn svg { width: 11px; height: 11px; flex-shrink: 0; transition: transform .2s; }
.currency-btn.open svg { transform: rotate(180deg); }
.currency-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  min-width: 110px; overflow: hidden; z-index: 9999;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
}
.currency-dropdown.open {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.currency-option {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px; font-size: 0.8rem; font-weight: 500;
  color: var(--text2); cursor: pointer;
  transition: background .12s;
}
.currency-option:hover { background: var(--sand); }
.currency-option.active { color: var(--accent); font-weight: 700; }
.currency-option .cur-sym {
  width: 18px; text-align: center; font-weight: 700; color: var(--muted);
}
.currency-option.active .cur-sym { color: var(--accent); }

/* ── LANGUAGE TOGGLE ─────────────────────────────────────── */
.lang-toggle { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 20px;
  background: rgba(28,28,30,0.07); border: 1px solid var(--border);
  font-size: 0.75rem; font-weight: 700; color: var(--text2); letter-spacing: 0.04em;
  cursor: pointer; transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.lang-btn:hover { background: var(--sand); border-color: var(--bone); }
.lang-btn svg { flex-shrink: 0; transition: transform .2s; }
.lang-btn.open svg { transform: rotate(180deg); }
.lang-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.70);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    0 16px 48px rgba(0,0,0,0.16),
    0 4px 16px rgba(184,134,11,0.08);
  min-width: 160px; overflow: hidden; z-index: 9999;
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity .15s, transform .15s;
}
.lang-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.lang-option {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; font-size: 0.85rem; font-weight: 500;
  color: var(--text2); cursor: pointer;
  transition: background .12s;
}
.lang-option:hover { background: var(--sand); }
.lang-option.active { color: var(--accent); font-weight: 700; }
.lang-option img { border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,0.08); flex-shrink: 0; }
[data-theme=dark] .lang-btn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--text); }
[data-theme=dark] .lang-btn:hover { background: rgba(255,255,255,0.1); }
[data-theme=dark] .lang-dropdown { background: #1a1815; border-color: rgba(255,255,255,0.1); }
[data-theme=dark] .lang-option { color: var(--text); }
[data-theme=dark] .lang-option:hover { background: rgba(255,255,255,0.05); }

/* RTL support */
[dir=rtl] .lang-dropdown,
[dir=rtl] .currency-dropdown { right: auto; left: 0; }
[dir=rtl] .product-card-origin,
[dir=rtl] .product-card-company { align-self: flex-start; }
[dir=rtl] .breadcrumb { direction: rtl; }

.cat-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }


/* ── PRODUCT DETAIL PAGE: INFO PANEL ────────────────────── */
.pdp-info-panel {
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: var(--radius-md);
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    var(--glass-ambient);
  overflow: hidden;
  font-size: 0.84rem;
}
.pdp-info-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.pdp-info-row svg { flex-shrink: 0; color: var(--gold); }
.pdp-free-ship {
  font-size: .80rem; font-weight: 600; color: #2e7d32;
  margin-bottom: 8px;
}
.pdp-carrier-label {
  font-size: .76rem; color: var(--muted); margin-bottom: 6px;
}
.pdp-info-icon { flex-shrink: 0; color: var(--gold); margin-top: 2px; }
.pdp-info-content { display: flex; flex-direction: column; flex: 1; }
.pdp-shipping-row { align-items: flex-start !important; }
.pdp-info-carriers { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.pdp-carriers-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
/* Carriers: neutral card style. Deliberately not mimicking the carriers'
   official brand palettes — that needed a partner agreement we don't have.
   Each row is a clean liquid-glass row with a generic transport glyph. */
.pdp-carrier-glyph {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(196,114,58,0.10);
  color: var(--accent, #C4723A);
}
.pdp-carrier-glyph svg { width: 18px; height: 18px; }
.pdp-carrier-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pdp-carrier-name {
  font-size: 0.85rem; font-weight: 700;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.pdp-carrier-meta {
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.pdp-carrier {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  transition: background .15s ease, border-color .15s ease;
}
.pdp-carrier:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}
[data-theme="light"] .pdp-carrier,
:root:not([data-theme="dark"]) .pdp-carrier {
  background: rgba(0,0,0,0.025);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .pdp-carrier:hover,
:root:not([data-theme="dark"]) .pdp-carrier:hover {
  background: rgba(0,0,0,0.05);
  border-color: rgba(0,0,0,0.14);
}
.pdp-info-tax {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 11px 16px; font-size: 0.78rem;
  color: var(--muted); line-height: 1.5;
}
.pdp-info-tax svg { flex-shrink: 0; margin-top: 1px; color: var(--muted2); }

/* ── BULK PURCHASE SECTION ───────────────────────────────── */
.section-bulk { margin: 48px 32px 0; border-radius: 28px; overflow: hidden; }
@media (max-width: 600px) { .section-bulk { margin: 32px 16px 0; border-radius: 20px; } }
.bulk-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
  align-items: center;
}
.bulk-text { display: flex; flex-direction: column; gap: 18px; }
.bulk-desc {
  font-size: 1.02rem; color: var(--text2); line-height: 1.75;
  max-width: 420px;
}
.bulk-features { display: flex; flex-direction: column; gap: 24px; }
.bulk-feature {
  display: flex; align-items: flex-start; gap: 16px;
}
.bulk-feature-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(184,134,11,0.10); border: 1px solid rgba(184,134,11,0.20);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.bulk-feature-icon svg { width: 22px; height: 22px; stroke: var(--gold); }
.bulk-feature-text { display: flex; flex-direction: column; gap: 3px; }
.bulk-feature-text strong { font-size: 0.92rem; color: var(--text); font-weight: 700; }
.bulk-feature-text span { font-size: 0.84rem; color: var(--text2); line-height: 1.5; }

@media(max-width:860px) {
  .bulk-section { grid-template-columns: 1fr; gap: 36px; }
}

/* ── PAYMENT METHOD ICONS ────────────────────────────────── */
/* Matches the footer treatment so the product page payment row reads as the
   same component across the site. Subtle dark-tint pill, no white slab. */
.pay-methods {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px;
}
.pay-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px; overflow: hidden;
}
.pay-pill img {
  height: 20px; width: auto; display: block;
  object-fit: contain;
}
/* On the cream/light side of the auth + checkout pages, the dark pill needs a
   visible substrate so the logos don't sit on raw cream. */
[data-theme="light"] .pay-pill,
:root:not([data-theme="dark"]) .pay-pill { background: rgba(0,0,0,0.04); }

/* Apple Pay ships in black. The FOOTER's pill is always over the dark footer
   surface so the existing footer-scoped invert (further up this file) is enough.
   For the PRODUCT PAGE, the page background flips with the theme, so the glyph
   only needs inverting when the user is in dark mode. In light mode, leave it
   black so it stays readable on the lighter pill. */
[data-theme="dark"] .product-detail-section .pay-pill img[src*="apple-pay"],
[data-theme="dark"] .product-detail-section .pay-pill img[alt="Apple Pay"] {
  filter: invert(1) brightness(1.05);
}

.feat-tabs { display:flex; gap:8px; margin-bottom:32px; flex-wrap:wrap; justify-content:center; }
.feat-tab {
  padding:9px 22px; border-radius:100px;
  border:2px solid var(--border);
  background:transparent; color:var(--muted);
  font-size:.84rem; font-weight:600; cursor:pointer;
  transition:all .2s ease; font-family:var(--font-sans);
  letter-spacing:.01em;
}
.feat-tab:hover { border-color:var(--accent2); color:var(--accent2); }
.feat-tab.active {
  background:var(--accent2); border-color:var(--accent2);
  color:#fff; box-shadow:0 2px 12px rgba(196,114,58,0.25);
}

/* ── Product page tab responsive grids ────────────────────────── */
.tab-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
@media (max-width: 700px) {
  .tab-two-col { grid-template-columns: 1fr; gap: 24px; }
}

/* ── IMAGE UPLOAD AREA ───────────────────────────────────────── */
.img-upload-area {
  border: 2px dashed var(--border2);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.img-upload-area:hover {
  border-color: var(--accent-border);
  background: var(--accent-dim);
}

/* ── ADMIN FORM INPUTS ───────────────────────────────────────── */
.pf-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 5px;
  letter-spacing: 0.04em;
}
.pf-input {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--border2);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.pf-input:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── NEWSLETTER FORM — mobile stack ─────────────────────────── */
@media (max-width: 480px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form input { width: 100%; }
}

/* ── MID-BANNER STATS — wrap on mobile ──────────────────────── */
@media (max-width: 600px) {
  .mid-banner-stat { flex-wrap: wrap; gap: 20px; justify-content: center; }
  .stat-item { min-width: 100px; text-align: center; }
}

/* ── PRODUCT PAGE TABS — horizontal scroll on mobile ─────────── */
@media (max-width: 600px) {
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { white-space: nowrap; flex-shrink: 0; }
}

/* ── HEADER SEARCH — icon-only on mobile ─────────────────────── */
@media (max-width: 600px) {
  .header-search input { display: none; }
  .header-search {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .header-search .search-icon {
    position: static; transform: none;
    pointer-events: auto; cursor: pointer;
    width: 20px; height: 20px;
  }
}

/* ── GLASS ::before TECHNIQUE — full upgrade ─────────────────── */
/* Only apply position:relative to true in-flow glass cards.
   cat-dropdown, cart-drawer are position:fixed — they have their own ::before rules.
   currency-dropdown, modal, search-overlay are position:fixed/absolute — leave them alone. */
.glass,
.glass-heavy {
  border: none;
  position: relative;
  overflow: visible;
}

/* Elements that need overflow:hidden for image clipping */
.product-card,
.cat-tile,
.gallery-main,
.gallery-thumb {
  overflow: hidden;
}

.glass::before,
.glass-heavy::before,
.cat-dropdown::before,
.cart-drawer::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.30) 18%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.30) 82%,
    rgba(255,255,255,0.95) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   DARK THEME — [data-theme=dark]
   Warm dark palette — deep Italian leather aesthetic
   ═══════════════════════════════════════════════════════════════ */

[data-theme=dark] {
  /* Backgrounds */
  --cream:       #0c0b09;
  --sand:        #141210;
  --bone:        #1e1b16;

  /* Card / glass surfaces */
  --white:       #1a1814;
  --glass-bg:    rgba(22,20,15,0.88);
  --glass-heavy: rgba(24,22,17,0.97);
  --glass-nav:   rgba(12,11,9,0.78);
  --glass-card:  rgba(22,20,15,0.90);

  /* ── LIQUID GLASS TOKENS — dark theme overrides ──
     Mirror libs.cc dark values: very faint white tint over dark surface,
     bright top inset, faint dark base, deeper ambient shadow. */
  --glass-tint:        rgba(255,255,255,0.03);
  --glass-tint-md:     rgba(255,255,255,0.05);
  --glass-tint-strong: rgba(255,255,255,0.08);

  --glass-inset-top:    rgba(255,255,255,0.12);
  --glass-inset-bottom: rgba(255,255,255,0.04);

  --glass-ambient:      0 8px 32px rgba(0,0,0,0.35);
  --glass-ambient-lg:   0 18px 60px rgba(0,0,0,0.45), 0 6px 24px rgba(0,0,0,0.30);
  --glass-ambient-xl:   0 28px 80px rgba(0,0,0,0.55), 0 8px 28px rgba(0,0,0,0.35);

  /* Text */
  --text:        #f0e8dc;
  --text2:       #c8bfb0;
  --muted:       #7a7060;
  --muted2:      #4e4638;

  /* Borders */
  --border:      rgba(255,255,255,0.06);
  --border2:     rgba(255,255,255,0.11);

  /* Shadows (deeper on dark) */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.55);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.65);
  --shadow-xl:   0 24px 80px rgba(0,0,0,0.75);

  /* Accent — slightly brighter copper for dark bg */
  --accent:        #D4884E;
  --accent2:       #E09A62;
  --accent-light:  #F2C4A0;
  --accent-dim:    rgba(212,136,78,0.18);
  --accent-border: rgba(212,136,78,0.38);
  --gold:          var(--accent);
  --gold2:         var(--accent2);
  --gold-light:    var(--accent-light);
  --gold-dim:      var(--accent-dim);
  --gold-border:   var(--accent-border);

  /* ── DARK LIQUID GLASS TINTS — warm leather equivalents ── */
  --glass-tint:        rgba(22,20,15,0.72);
  --glass-tint-md:     rgba(24,22,17,0.85);
  --glass-tint-strong: rgba(24,22,17,0.94);
  --glass-inset-top:    rgba(255,236,200,0.06);
  --glass-inset-bottom: rgba(0,0,0,0.30);
  --glass-border-grad: linear-gradient(135deg,
    rgba(255,236,200,0.42) 0%,
    rgba(255,236,200,0.10) 18%,
    rgba(255,255,255,0)    50%,
    rgba(196,114,58,0)     50%,
    rgba(196,114,58,0.08)  75%,
    rgba(212,136,78,0.30)  100%);
  --shadow-glass:    0 8px 28px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-glass-md: 0 16px 48px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.06);
  --shadow-glass-lg: 0 28px 80px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Logo ──────────────────────────────────────────────────────── */
[data-theme=dark] .logo-name         { color: var(--text); }
[data-theme=dark] .logo-name span    { color: var(--accent); }
[data-theme=dark] .logo-tag          { color: var(--muted); }

/* ── Body & base ─────────────────────────────────────────────── */
[data-theme=dark] body               { background: var(--cream); color: var(--text); }
[data-theme=dark] a                  { color: inherit; }

/* ── Header ──────────────────────────────────────────────────── */
[data-theme=dark] header.glass-bar {
  background: var(--glass-nav);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border-bottom-color: rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 4px 24px rgba(0,0,0,0.45);
}
[data-theme=dark] .header-search input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
}
[data-theme=dark] .header-search input::placeholder { color: var(--muted); }
[data-theme=dark] .currency-btn {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: var(--text2);
}
[data-theme=dark] .currency-btn:hover { background: rgba(255,255,255,0.10); }
[data-theme=dark] .currency-dropdown {
  background: #1e1b16;
  border-color: rgba(255,255,255,0.10);
}
[data-theme=dark] .currency-option:hover { background: rgba(255,255,255,0.06); }

/* ── USP bar ─────────────────────────────────────────────────── */
[data-theme=dark] .usp-bar { background: var(--sand); border-bottom-color: rgba(255,255,255,0.06); }
[data-theme=dark] .usp-text strong { color: var(--text); }

/* ── Buttons ─────────────────────────────────────────────────── */
[data-theme=dark] .btn-gold {
  background: color-mix(in srgb, var(--accent) 85%, transparent);
  color: #fff;
  box-shadow: 0 4px 20px rgba(212,136,78,0.30), inset 0 1px 0 rgba(255,255,255,0.25);
  color: #fff;
}
[data-theme=dark] .btn-outline {
  background: rgba(255,255,255,0.06);
  color: var(--accent);
  border: 1px solid rgba(196,114,58,0.35);
}
[data-theme=dark] .btn-outline:hover {
  background: rgba(196,114,58,0.18);
  border-color: var(--accent);
  transform: translateY(-1px);
}
[data-theme=dark] .btn-dark {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

/* ── Category tiles ──────────────────────────────────────────── */
[data-theme=dark] .cat-tile { background: var(--bone); }

/* ── Product cards — dark liquid glass ──────────────────────── */
[data-theme=dark] .product-card {
  background: color-mix(in srgb, var(--surface, #1a1814) 70%, transparent);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 6px 24px rgba(0,0,0,0.35),
    0 2px 8px rgba(0,0,0,0.20);
}
[data-theme=dark] .product-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 18px 48px rgba(0,0,0,0.55),
    0 0 24px color-mix(in srgb, var(--accent) 14%, transparent);
}
[data-theme=dark] .product-card-image { background: var(--bone); }
[data-theme=dark] .product-card-name a { color: var(--text); }
[data-theme=dark] .product-card-maker { color: var(--muted); }

/* ── Glass cards — dark liquid glass ────────────────────────── */
[data-theme=dark] .glass {
  background: var(--glass-tint);
  border-color: rgba(255,255,255,0.06);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    var(--glass-ambient);
}
[data-theme=dark] .glass-heavy {
  background: var(--glass-tint-strong);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    var(--glass-ambient-lg);
}

/* ── Sections ────────────────────────────────────────────────── */
[data-theme=dark] .section-sand   { background: var(--sand); }
[data-theme=dark] .section-title  { color: var(--text); }
[data-theme=dark] .section-sub    { color: var(--text2); }

/* Keep section-dark as-is (already dark), just deepen it */
[data-theme=dark] .section-dark   { background: #060504; }

/* ── Why / Testi cards — dark liquid glass ──────────────────── */
[data-theme=dark] .why-card {
  background: var(--glass-tint);
  border-color: rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    var(--glass-ambient);
}
[data-theme=dark] .why-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    var(--glass-ambient-lg),
    0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
}
[data-theme=dark] .testi-card {
  background: var(--glass-tint);
  border-color: rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    var(--glass-ambient);
}
[data-theme=dark] .testi-author-name { color: var(--text); }

/* ── Category dropdown ───────────────────────────────────────── */
/* NOTE: dark-theme background overrides removed here — handled globally
   in the "Categories mega-dropdown — liquid glass (global)" block below. */
[data-theme=dark] .cat-dropdown-item  { color: var(--text2); }
[data-theme=dark] .cat-dropdown-item:hover,
[data-theme=dark] .cat-dropdown-item.active { background: rgba(212,136,78,0.10); color: var(--accent); }
[data-theme=dark] .cat-panel a        { color: var(--text2); }
[data-theme=dark] .cat-panel a:hover  { color: var(--accent); }
[data-theme=dark] .cat-panel h4       { color: var(--muted); }

/* ── Cart drawer ─────────────────────────────────────────────── */
[data-theme=dark] .cart-drawer {
  background: rgba(20,18,14,0.80);
  border-left-color: rgba(255,255,255,0.09);
}
[data-theme=dark] .cart-header { border-bottom-color: rgba(255,255,255,0.07); }
[data-theme=dark] .cart-item   { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.09); }
[data-theme=dark] .cart-item-name { color: var(--text); }
[data-theme=dark] .cart-footer { border-top-color: rgba(255,255,255,0.07); }

/* ── Filter sidebar ──────────────────────────────────────────── */
[data-theme=dark] .filter-sidebar { background: transparent; }
[data-theme=dark] .filter-panel { background: var(--glass-tint-strong); }
[data-theme=dark] .filter-panel {
  background: rgba(28,24,18,0.65);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-color: rgba(255,236,200,0.08);
  box-shadow: inset 0 1px 0 rgba(255,236,200,0.06), 0 2px 12px rgba(0,0,0,0.35);
}
[data-theme=dark] .filter-panel-title { color: var(--text); }
[data-theme=dark] .filter-option      { color: var(--text2); }
[data-theme=dark] .cat-pill {
  background: var(--white);
  border-color: rgba(255,255,255,0.10);
  color: var(--text2);
}
[data-theme=dark] .cat-pill.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent-border); }

/* ── Search overlay ──────────────────────────────────────────── */
[data-theme=dark] .search-overlay { background: rgba(12,11,9,0.97); }
[data-theme=dark] .search-overlay-input { color: var(--text); border-bottom-color: var(--accent); }
[data-theme=dark] .search-overlay-input::placeholder { color: var(--muted); }

/* ── Mobile nav ──────────────────────────────────────────────── */
[data-theme=dark] .mobile-nav { background: rgba(12,11,9,0.98); }
[data-theme=dark] .mobile-nav-link { color: var(--text2); }

/* ── Forms / Inputs ──────────────────────────────────────────── */
[data-theme=dark] input[type=text],
[data-theme=dark] input[type=email],
[data-theme=dark] input[type=number],
[data-theme=dark] input[type=tel],
[data-theme=dark] input[type=password],
[data-theme=dark] textarea,
[data-theme=dark] select {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.11);
  color: var(--text);
}
[data-theme=dark] input::placeholder,
[data-theme=dark] textarea::placeholder { color: var(--muted); }

/* ── Cat page hero ───────────────────────────────────────────── */
[data-theme=dark] .cat-page-hero { background: #060504; }
[data-theme=dark] .cat-pills-bar { background: var(--sand); border-bottom-color: rgba(255,255,255,0.07); }

/* ── Sort select / form controls on category page ────────────── */
[data-theme=dark] .sort-select { background: var(--white); color: var(--text); border-color: rgba(255,255,255,0.10); }

/* ── Footer ──────────────────────────────────────────────────── */
[data-theme=dark] .site-footer { background: #050403; }
[data-theme=dark] .footer-logo-tag { color: var(--muted); }
[data-theme=dark] .footer-col-title { color: var(--muted); }
[data-theme=dark] .footer-link { color: var(--muted); }
[data-theme=dark] .footer-link:hover { color: var(--text); }
[data-theme=dark] .footer-bottom { border-top-color: rgba(255,255,255,0.06); color: var(--muted2); }
[data-theme=dark] .footer-social a {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  color: var(--muted);
}
[data-theme=dark] .footer-social a:hover { background: var(--accent-dim); color: var(--accent); }

/* ── Theme toggle button ─────────────────────────────────────── */
.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--sand);
  color: var(--text2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  flex-shrink: 0;
  margin-left: 6px;
}
.theme-toggle:hover {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-dim);
}
.theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; }

[data-theme=dark] .theme-toggle {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
}

/* ── Product detail page ─────────────────────────────────────── */
[data-theme=dark] .pdp-title       { color: var(--text); }
[data-theme=dark] .pdp-brand       { color: var(--muted); }
[data-theme=dark] .gallery-thumb   { background: var(--bone); border-color: rgba(255,255,255,0.08); }
[data-theme=dark] .tab-btn         { color: var(--muted); border-bottom-color: transparent; }
[data-theme=dark] .tab-btn.active  { color: var(--accent); border-bottom-color: var(--accent); }
[data-theme=dark] .pdp-spec-row td { border-color: rgba(255,255,255,0.07); color: var(--text2); }

/* ── Account page ────────────────────────────────────────────── */
[data-theme=dark] .acc-nav-item    { color: var(--text2); }
[data-theme=dark] .acc-nav-item:hover,
[data-theme=dark] .acc-nav-item.active { color: var(--accent); background: var(--accent-dim); }
[data-theme=dark] .acc-card        { background: var(--white); border-color: rgba(255,255,255,0.07); }

/* ── Checkout ────────────────────────────────────────────────── */
[data-theme=dark] .co-form-card    { background: var(--white); border-color: rgba(255,255,255,0.07); }
[data-theme=dark] .co-summary-card { background: var(--white); border-color: rgba(255,255,255,0.07); }

/* ── Scrollbar ───────────────────────────────────────────────── */
[data-theme=dark] .cat-sidebar::-webkit-scrollbar-track,
[data-theme=dark] .cat-dropdown-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
[data-theme=dark] .cat-sidebar::-webkit-scrollbar-thumb,
[data-theme=dark] .cat-dropdown-list::-webkit-scrollbar-thumb { background: rgba(212,136,78,0.35); }
[data-theme=dark] .cat-sidebar::-webkit-scrollbar-thumb:hover,
[data-theme=dark] .cat-dropdown-list::-webkit-scrollbar-thumb:hover { background: rgba(212,136,78,0.60); }

/* ── Bulk section ────────────────────────────────────────────── */
[data-theme=dark] .bulk-section    { background: #141210; }
[data-theme=dark] .bulk-feature-icon { background: var(--accent-dim); border-color: var(--accent-border); }

/* ── Newsletter section (already dark) ──────────────────────── */
[data-theme=dark] .newsletter-section { background: #060504; }

/* ── GLOBAL PAGE SCROLLBAR ──────────────────────────────────── */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(196,114,58,0.45) rgba(196,114,58,0.06);
}
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track {
  background: rgba(196,114,58,0.06);
}
::-webkit-scrollbar-thumb {
  background: rgba(196,114,58,0.42);
  border-radius: 10px;
  border: 1px solid rgba(196,114,58,0.08);
}
::-webkit-scrollbar-thumb:hover { background: rgba(196,114,58,0.68); }
::-webkit-scrollbar-corner { background: transparent; }

/* Dark mode global scrollbar */
[data-theme=dark] html,
[data-theme=dark] {
  scrollbar-color: rgba(212,136,78,0.40) rgba(255,255,255,0.03);
}
[data-theme=dark] ::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
[data-theme=dark] ::-webkit-scrollbar-thumb { background: rgba(212,136,78,0.38); border-color: rgba(255,255,255,0.04); }
[data-theme=dark] ::-webkit-scrollbar-thumb:hover { background: rgba(212,136,78,0.62); }

[data-theme=dark] .why-card h3 { color: var(--text); }
[data-theme=dark] .why-card p  { color: rgba(255,255,255,0.52); }
[data-theme=dark] .why-num     { color: rgba(255,255,255,1); opacity: 0.06; }

/* ── COMPANY PROFILE PAGE ───────────────────────────────────── */
.profile-hero {
  background: var(--sand);
  border-bottom: 1px solid var(--border);
  padding: 36px 0 32px;
}
.profile-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--muted); font-weight: 500;
  margin-bottom: 24px; transition: color .2s;
}
.profile-back:hover { color: var(--accent); }
.profile-hero-card {
  display: flex; align-items: center; gap: 28px;
  padding: 28px 32px; border-radius: var(--radius-xl);
  margin-bottom: 16px;
}
.profile-logo-wrap {
  width: 88px; height: 88px; flex-shrink: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border2);
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.profile-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.profile-logo-initials {
  font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700;
  color: var(--accent);
}
.profile-eyebrow {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.profile-name {
  font-family: var(--font-serif); font-size: clamp(1.6rem,3vw,2.4rem);
  font-weight: 700; color: var(--dark); line-height: 1.2; margin-bottom: 6px;
}
.profile-tagline { font-size: 0.95rem; color: var(--muted); margin-bottom: 12px; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.profile-meta-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: 20px;
  background: var(--sand); border: 1px solid var(--border2);
  font-size: 0.75rem; font-weight: 500; color: var(--text2);
}
.profile-meta-link { color: var(--accent); text-decoration: none; }
.profile-meta-link:hover { background: var(--accent-dim); }
.profile-restriction {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 20px; border-radius: var(--radius-md);
  background: rgba(196,114,58,0.08); border: 1px solid var(--accent-border);
  color: var(--text2); font-size: 0.875rem; line-height: 1.6;
}
.profile-restriction svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.profile-layout {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 28px; padding: 32px 0 80px;
}
.profile-sidebar-info { display: flex; flex-direction: column; gap: 16px; }
.profile-section-card {
  padding: 22px 24px; border-radius: var(--radius-lg);
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  border: 1px solid rgba(255,255,255,0.70);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.04),
    var(--glass-ambient);
}
.profile-section-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 14px;
}
.profile-description { font-size: 0.9rem; color: var(--text2); line-height: 1.7; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-detail-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.profile-detail-row:last-child { border-bottom: none; }
.profile-detail-key { color: var(--muted); }
.profile-detail-val { color: var(--text2); font-weight: 500; text-align: right; }
.profile-detail-val a { color: var(--accent); }
.profile-products-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 24px;
}
.profile-products-title {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700; color: var(--dark);
}
/* ── COMPANY PAGE ANIMATIONS ─────────────────────────────────── */
@keyframes profileFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.profile-back     { animation: profileFadeUp 0.35s cubic-bezier(.4,0,.2,1) both; }
.profile-hero-card { animation: profileFadeUp 0.45s cubic-bezier(.4,0,.2,1) 0.06s both; }
.profile-products-header { animation: profileFadeUp 0.4s cubic-bezier(.4,0,.2,1) 0.12s both; }
.profile-animate  { animation: profileFadeUp 0.4s cubic-bezier(.4,0,.2,1) both; }

.profile-count {
  font-size: 0.8rem; color: var(--muted); background: var(--sand);
  padding: 4px 12px; border-radius: 20px; border: 1px solid var(--border2);
}
@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-hero-card { flex-direction: column; text-align: center; }
  .profile-meta { justify-content: center; }
}
[data-theme=dark] .profile-hero { background: var(--sand); }
[data-theme=dark] .profile-name { color: var(--text); }
[data-theme=dark] .profile-products-title { color: var(--text); }
[data-theme=dark] .profile-logo-wrap { background: var(--bone); border-color: rgba(255,255,255,0.08); }

/* ── PRODUCT PAGE — COMPANY BADGE & RESTRICTION ─────────────── */
.product-company-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--accent); font-weight: 600;
  padding: 6px 14px; border-radius: 20px;
  border: 1px solid var(--accent-border); background: var(--accent-dim);
  transition: all .2s;
}
.product-company-link:hover { background: var(--accent); color: #fff; }
/* When the pill holds a company logo image, drop the button styling entirely
   so just the logo shows — the link remains clickable. */
.product-company-link:has(.product-company-logo-img) {
  padding: 0; border: none; background: transparent;
}
.product-company-link:has(.product-company-logo-img):hover {
  background: transparent;
}
.product-company-logo-img {
  height: 64px; max-width: 240px; width: auto; object-fit: contain;
  display: block; transition: transform .18s ease;
}
.product-company-link:hover .product-company-logo-img { transform: scale(1.05); }
[data-theme=dark] .product-company-logo-img { filter: brightness(1.06); }
.product-company-wrap { margin: 10px 0; }
.product-restriction-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--radius-md);
  background: rgba(196,114,58,0.08); border: 1px solid var(--accent-border);
  font-size: 0.82rem; color: var(--text2); margin: 10px 0;
  line-height: 1.5;
}
.product-restriction-badge svg { color: var(--accent); flex-shrink: 0; }

/* ── Regional availability notice (product + company pages) ────
   Replaces the old one-line badge that sat above the price. Same markup on
   both pages; the product page scopes it narrower via .product-info. */
.region-notice {
  border: 1px solid var(--border2); border-radius: var(--radius-md);
  background: var(--sand); padding: 14px 16px; margin: 18px 0;
}
.region-notice .rn-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text);
}
.region-notice.is-exclude .rn-head svg { color: #b4522f; }
.region-notice.is-allow .rn-head svg { color: var(--accent); }
.region-notice .rn-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px;
}
.region-notice .rn-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 6px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--border2);
  font-size: 0.78rem; color: var(--text2); white-space: nowrap;
}
.region-notice .rn-chip img { border-radius: 2px; display: block; flex-shrink: 0; }
.region-notice .rn-chip svg { color: var(--muted); flex-shrink: 0; }
.region-notice .rn-note {
  margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted);
}
/* Inside a profile card the card already supplies the frame. */
.profile-section-card .region-notice {
  border: 0; background: none; padding: 0; margin: 0;
}
[data-theme=dark] .region-notice { background: rgba(255,255,255,0.04); }
[data-theme=dark] .profile-section-card .region-notice { background: none; }
[data-theme=dark] .region-notice .rn-chip { background: rgba(255,255,255,0.05); }
[data-theme=dark] .region-notice.is-exclude .rn-head svg { color: #e08a63; }

/* ── Dark mode: cart/header button hover + user dropdown edges ── */
[data-theme=dark] .hbtn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}
[data-theme=dark] .header-user-dd {
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.10);
}
[data-theme=dark] .hud-item:hover { background: rgba(255,255,255,0.07); }

/* ── Dark mode: testimonial author names ────────────────────── */
[data-theme=dark] .testi-name   { color: var(--text); }
[data-theme=dark] .testi-role   { color: rgba(255,255,255,0.45); }
[data-theme=dark] .testi-text   { color: rgba(255,255,255,0.65); }

/* ── Dark mode: contact page inline-styled panels ────────────── */
[data-theme=dark] .contact-main-grid [style*="background:var(--white)"],
[data-theme=dark] .contact-faq-grid [style*="background:var(--white)"] {
  background: var(--white) !important;
  border-color: var(--border) !important;
}
[data-theme=dark] .contact-main-grid [style*="background:var(--sand)"] {
  background: var(--sand) !important;
  border-color: var(--border) !important;
}


[data-theme=dark] .filter-option span { color: var(--text2); }

/* ── Dark mode: contact form select inline styles ────────────── */
[data-theme=dark] .form-group select {
  background: rgba(255,255,255,0.05) !important;
  color: var(--text) !important;
  border-color: rgba(255,255,255,0.11) !important;
}

/* ── Dark mode: product page company/restriction badges ──────── */
[data-theme=dark] .product-restriction-badge {
  background: rgba(212,136,78,0.10);
  border-color: rgba(212,136,78,0.22);
}

/* ── Dark mode: profile info sidebar panels ──────────────────── */
[data-theme=dark] .profile-sidebar-info .glass,
[data-theme=dark] .profile-layout .glass {
  background: var(--glass-card);
}

/* ── Dark mode: account page panels ─────────────────────────── */
[data-theme=dark] .acc-panel,
[data-theme=dark] .acc-sidebar {
  border-color: var(--border);
}
[data-theme=dark] .acc-nav-item { color: var(--text2); }
[data-theme=dark] .acc-nav-item.active,
[data-theme=dark] .acc-nav-item:hover { color: var(--accent); background: var(--accent-dim); }

/* ── Dark mode: checkout card ────────────────────────────────── */
[data-theme=dark] .co-card {
  border-color: var(--border);
}

/* ── Dark mode: product detail page ──────────────────────────── */
[data-theme=dark] .pdp-tabs-bar { border-bottom-color: var(--border); }
[data-theme=dark] .pdp-tab.active { border-bottom-color: var(--accent); color: var(--accent); }
[data-theme=dark] .pdp-tab { color: var(--muted); }

/* ── Dark mode: footer (always stays dark, no override needed) ── */

/* ── Dark mode: product card prices ─────────────────────────── */
[data-theme=dark] .price-current { color: var(--text); }
[data-theme=dark] .price-list    { color: rgba(255,255,255,0.35); }
[data-theme=dark] .price-old     { color: rgba(255,255,255,0.35); }
[data-theme=dark] .price-with-us-label { color: var(--accent-light); }

/* ── Dark mode: native select dropdown options ───────────────── */
[data-theme=dark] select option {
  background: #1a1814;
  color: #f0e8dc;
}

/* ── Filter sidebar spacing ──────────────────────────────────── */
.filter-panel { margin-bottom: 20px; }
.filter-panel:last-child { margin-bottom: 0; }

/* Category price filter inputs carry an inline font-size:.84rem in the
   markup, which triggers iOS Safari auto-zoom on focus. Force >=16px to
   stop the zoom (!important is required to beat the inline style). */
#filterPriceMin,
#filterPriceMax { font-size: 16px !important; }

/* ── Dark mode: filter price inputs ─────────────────────────── */
[data-theme=dark] #filterPriceMin,
[data-theme=dark] #filterPriceMax {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.15);
  color: var(--text);
}
[data-theme=dark] #filterPriceMin::placeholder,
[data-theme=dark] #filterPriceMax::placeholder { color: var(--muted); }

/* ── Dark mode: remaining black text fixes ───────────────────── */
[data-theme=dark] .product-card-name a { color: var(--text); }
[data-theme=dark] .product-card-maker  { color: var(--muted); }
[data-theme=dark] .product-card-model  { color: var(--accent); }
[data-theme=dark] .section-title       { color: var(--text); }
[data-theme=dark] .section-eyebrow     { color: var(--accent); }
[data-theme=dark] .usp-item-title      { color: var(--text); }
[data-theme=dark] .usp-item-desc       { color: var(--muted); }
[data-theme=dark] .why-card h3         { color: var(--text); }
[data-theme=dark] .why-card p          { color: var(--text2); }
[data-theme=dark] .why-num             { opacity: 0.25; }
[data-theme=dark] .hero-badge .hb-num  { color: var(--text); }
[data-theme=dark] .hero-badge .hb-label{ color: var(--muted); }
[data-theme=dark] .cat-page-hero h1    { color: var(--text); }
[data-theme=dark] .cat-page-hero p     { color: var(--text2); }
[data-theme=dark] .sort-toolbar        { border-bottom-color: var(--border); }
[data-theme=dark] .cat-count-label     { color: var(--muted); }
[data-theme=dark] .bulk-text h2,
[data-theme=dark] .bulk-section h2     { color: var(--text); }
[data-theme=dark] .bulk-desc           { color: var(--text2); }
[data-theme=dark] .bulk-feature-text strong { color: var(--text); }
[data-theme=dark] .bulk-feature-text span   { color: var(--text2); }
[data-theme=dark] .testi-card {
  background: var(--glass-tint);
  border-color: rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    var(--glass-ambient);
}
[data-theme=dark] .testi-text          { color: var(--text2); }
[data-theme=dark] .profile-meta-pill   { color: var(--text2); border-color: var(--border2); background: var(--white); }
[data-theme=dark] .profile-desc        { color: var(--text2); }
[data-theme=dark] .acc-address-name    { color: var(--text); }
[data-theme=dark] .acc-address-lines   { color: var(--muted); }
[data-theme=dark] h1, [data-theme=dark] h2,
[data-theme=dark] h3, [data-theme=dark] h4 { color: var(--text); }

/* ── Dark mode audit fixes ───────────────────────────────────── */
[data-theme=dark] .cart-subtotal strong            { color: var(--text); }
[data-theme=dark] .cart-item-price                 { color: var(--text); }
[data-theme=dark] .product-card-name               { color: var(--text); }
[data-theme=dark] .product-price-block .price-main { color: var(--text); }
[data-theme=dark] .spec-mini-item span             { color: var(--text); }
[data-theme=dark] .modal h3                        { color: var(--text); }
[data-theme=dark] .product-info h1                 { color: var(--text); }
[data-theme=dark] .hamburger span                  { background: var(--text); }
[data-theme=dark] .sort-toolbar-left strong        { color: var(--text); }
[data-theme=dark] .spec-table td:last-child        { color: var(--text); }


/* ── Hide discount/compare-price display sitewide ── */
.price-list                          { display: none !important; }
.price-old                           { display: none !important; }
.price-with-us-label                 { display: none !important; }
[data-theme=dark] .price-list        { display: none !important; }
[data-theme=dark] .price-old         { display: none !important; }
[data-theme=dark] .price-with-us-label { display: none !important; }


/* ═══════════════════════════════════════════════════════════════
   DARK LIQUID-GLASS — surface overrides for libs.cc-style depth
   Adapts every elevated glass surface to dark values.
   ═══════════════════════════════════════════════════════════════ */

/* Soften the gradient-mask border on dark — bright-white edges look wrong */
[data-theme=dark] .glass::before,
[data-theme=dark] .glass-heavy::before,
[data-theme=dark] .cat-dropdown::before,
[data-theme=dark] .cart-drawer::before {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.06) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.06) 80%,
    rgba(255,255,255,0.18) 100%);
}

/* Cards & panels */
[data-theme=dark] .filter-panel,
[data-theme=dark] .cat-sidebar,
[data-theme=dark] .profile-section-card,
[data-theme=dark] .pdp-info-panel,
[data-theme=dark] .product-trust {
  background: var(--glass-tint);
  border-color: rgba(255,255,255,0.07);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    var(--glass-ambient);
}

/* Cart drawer & item */
[data-theme=dark] .cart-drawer {
  background: color-mix(in srgb, #1a1814 70%, transparent);
  border-left-color: rgba(255,255,255,0.07);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,0.08),
    -16px 0 60px rgba(0,0,0,0.55),
    -4px 0 16px rgba(0,0,0,0.30);
}
[data-theme=dark] .cart-item {
  background: var(--glass-tint-md);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}

/* Hero badge — keep light on dark hero photography */
[data-theme=dark] .hero-badge {
  background: color-mix(in srgb, #1a1814 60%, transparent);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 18px 48px rgba(0,0,0,0.55),
    0 6px 16px rgba(0,0,0,0.30);
}

/* Made-in pill — dark glass over photo */
[data-theme=dark] .badge-made {
  background: color-mix(in srgb, #1a1814 65%, transparent);
  color: var(--text);
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.20);
}

/* Modals & dropdowns */
[data-theme=dark] .modal {
  background: color-mix(in srgb, #1a1814 65%, transparent);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    0 32px 80px rgba(0,0,0,0.65),
    0 8px 28px rgba(0,0,0,0.40);
}
[data-theme=dark] .currency-dropdown,
[data-theme=dark] .lang-dropdown,
[data-theme=dark] .header-user-dd,
[data-theme=dark] .search-autocomplete {
  background: color-mix(in srgb, #1a1814 70%, transparent);
  border-color: rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 16px 48px rgba(0,0,0,0.55),
    0 4px 16px rgba(0,0,0,0.30);
}

/* Pills, page buttons, product action buttons */
[data-theme=dark] .cat-pill {
  background: var(--glass-tint-md);
  border-color: rgba(255,255,255,0.10);
  color: var(--text2);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}
[data-theme=dark] .page-btn {
  background: var(--glass-tint-md);
  border-color: rgba(255,255,255,0.10);
  color: var(--text2);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.18);
}
[data-theme=dark] .pca-btn {
  background: color-mix(in srgb, #1a1814 70%, transparent);
  border-color: rgba(255,255,255,0.10);
  color: var(--text2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 2px 10px rgba(0,0,0,0.35);
}
[data-theme=dark] .btn-wishlist {
  background: color-mix(in srgb, #1a1814 65%, transparent);
  border-color: rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 2px 10px rgba(0,0,0,0.35);
}

/* Scroll-top button */
[data-theme=dark] .scroll-top {
  background: color-mix(in srgb, #1a1814 70%, transparent);
  border-color: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 8px 24px rgba(0,0,0,0.45),
    0 2px 10px rgba(0,0,0,0.25);
}

/* Buttons */
[data-theme=dark] .btn-outline {
  background: color-mix(in srgb, var(--accent) 12%, var(--glass-tint));
  color: var(--accent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 4px 16px rgba(0,0,0,0.35);
}
[data-theme=dark] .btn-outline:hover {
  background: color-mix(in srgb, var(--accent) 22%, var(--glass-tint-md));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(0,0,0,0.18),
    0 8px 24px color-mix(in srgb, var(--accent) 28%, transparent);
}
[data-theme=dark] .btn-outline-white {
  background: color-mix(in srgb, #fff 12%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 4px 20px rgba(0,0,0,0.45);
}
[data-theme=dark] .btn-gold {
  background: color-mix(in srgb, var(--accent) 85%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 4px 20px rgba(212,136,78,0.32),
    0 0 18px color-mix(in srgb, var(--accent) 24%, transparent);
}
[data-theme=dark] .btn-gold:hover {
  background: color-mix(in srgb, var(--accent2) 90%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    0 8px 30px rgba(212,136,78,0.45),
    0 0 24px color-mix(in srgb, var(--accent) 36%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS SYSTEM — site-wide reusable classes
   Variables live in :root + [data-theme=dark] at the top of file.
   ═══════════════════════════════════════════════════════════════ */

/* ── .glass-bar — sticky header / sidebar (lighter blur) ────── */
.glass-bar {
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(28,28,30,0.06);
}
header.glass-bar { position: sticky; top: 0; z-index: 100; }
[data-theme="dark"] .glass-bar {
  background: color-mix(in srgb, #16140f 70%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.45);
}

/* ── .glass-modal + .glass-modal-overlay ────────────────────── */
.glass-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(60px) saturate(2.0);
  -webkit-backdrop-filter: blur(60px) saturate(2.0);
  border-radius: 24px;
  box-shadow: var(--shadow-glass-lg), 0 24px 80px rgba(28,28,30,0.18);
  /* scroll long forms (e.g. the quote modal) instead of clipping them.
     overflow:hidden here used to override .modal's overflow-y:auto, cutting
     off every field below the fold. */
  overflow-y: auto;
  overflow-x: hidden;
  transform: translateZ(0);
}
.glass-modal::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.glass-modal > * { position: relative; z-index: 2; }
[data-theme="dark"] .glass-modal {
  box-shadow: var(--shadow-glass-lg), 0 24px 80px rgba(0,0,0,0.75);
}

.glass-modal-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(28,28,30,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity .28s;
}
.glass-modal-overlay.open { opacity: 1; pointer-events: auto; }
[data-theme="dark"] .glass-modal-overlay { background: rgba(0,0,0,0.62); }

/* ── .btn-glass-accent — copper primary button ──────────────── */
.btn-glass-accent {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: color-mix(in srgb, var(--accent) 88%, #ffffff);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.08);
  transition: background .2s, transform .18s, box-shadow .2s, color .18s;
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
}
.btn-glass-accent::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-glass-accent > * { position: relative; z-index: 2; }
.btn-glass-accent:hover {
  background: color-mix(in srgb, var(--accent) 100%, #ffffff);
  color: #ffffff;
  transform: translateY(-1px) translateZ(0);
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}
.btn-glass-accent:active { transform: scale(0.97) translateZ(0); opacity: 0.9; }
[data-theme="dark"] .btn-glass-accent {
  background: color-mix(in srgb, var(--accent) 28%, var(--glass-tint));
  color: var(--accent-light);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,236,200,0.08),
    0 0 22px color-mix(in srgb, var(--accent) 32%, transparent);
}
[data-theme="dark"] .btn-glass-accent::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,0.34) 0%,
    rgba(255,236,200,0.10) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,236,200,0.10) 80%,
    rgba(255,236,200,0.34) 100%);
}
[data-theme="dark"] .btn-glass-accent:hover {
  background: color-mix(in srgb, var(--accent) 42%, var(--glass-tint-md));
}

/* ── .btn-glass — neutral secondary button ──────────────────── */
.btn-glass {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--glass-tint-md);
  backdrop-filter: blur(50px);
  -webkit-backdrop-filter: blur(50px);
  color: var(--text);
  border: none;
  border-radius: 12px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.02em;
  box-shadow:
    4px 4px 4px rgba(0,0,0,0.03),
    inset 0 1px 1px rgba(255,255,255,0.55);
  transition: background .2s, transform .18s, color .18s, box-shadow .2s;
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
}
.btn-glass::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.btn-glass > * { position: relative; z-index: 2; }
.btn-glass:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--glass-tint-strong) 90%, var(--accent) 6%);
  transform: translateY(-1px) translateZ(0);
}
.btn-glass:active { transform: scale(0.97) translateZ(0); }
[data-theme="dark"] .btn-glass {
  color: var(--text);
  box-shadow:
    0 4px 14px rgba(0,0,0,0.45),
    inset 0 1px 1px rgba(255,236,200,0.06);
}
[data-theme="dark"] .btn-glass::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,0.30) 0%,
    rgba(255,236,200,0.08) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,236,200,0.08) 80%,
    rgba(255,236,200,0.30) 100%);
}
[data-theme="dark"] .btn-glass:hover {
  color: var(--accent);
  background: color-mix(in srgb, var(--glass-tint-strong) 80%, var(--accent) 12%);
}

/* ── .glass-input — solid bg with glass-style focus ─────────── */
.glass-input {
  width: 100%;
  background: rgba(255,255,255,0.60);
  border: 1px solid rgba(28,28,30,0.08);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.glass-input::placeholder { color: var(--muted2); }
.glass-input:focus {
  border-color: rgba(196,114,58,0.50);
  background: rgba(255,255,255,0.85);
  box-shadow: 0 0 0 3px rgba(196,114,58,0.12);
}
[data-theme="dark"] .glass-input {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
}
[data-theme="dark"] .glass-input::placeholder { color: var(--muted); }
[data-theme="dark"] .glass-input:focus {
  border-color: rgba(212,136,78,0.55);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 3px rgba(212,136,78,0.18);
}

/* ── .glass-toast — with .ok / .warn / .error modifiers ─────── */
.glass-toast {
  position: relative;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border-radius: 14px;
  padding: 14px 18px;
  color: var(--text);
  font-size: 0.9rem; font-weight: 500;
  box-shadow:
    0 16px 48px rgba(28,28,30,0.18),
    inset 0 1px 0 rgba(255,255,255,0.90);
  border-left: 3px solid var(--accent);
  overflow: hidden;
  transform: translateZ(0);
}
.glass-toast::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.glass-toast > * { position: relative; z-index: 2; }
.glass-toast.ok    { border-left-color: #22c55e; }
.glass-toast.warn  { border-left-color: #f0b429; }
.glass-toast.error { border-left-color: #ef4444; }
[data-theme="dark"] .glass-toast {
  color: var(--text);
  box-shadow:
    0 18px 56px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,236,200,0.08);
}

/* ── .glass-drawer — cart drawer (slide in from right) ──────── */
.glass-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  z-index: 901;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  box-shadow:
    -16px 0 48px rgba(28,28,30,0.18),
    inset 0 1px 0 rgba(255,255,255,0.90);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  overflow: hidden;
}
.glass-drawer::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0)    50%,
    rgba(196,114,58,0)     60%,
    rgba(196,114,58,0.08)  85%,
    rgba(196,114,58,0.22)  100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.glass-drawer > * { position: relative; z-index: 2; }
.glass-drawer.open { transform: translateX(0); }
[data-theme="dark"] .glass-drawer {
  box-shadow:
    -16px 0 56px rgba(0,0,0,0.70),
    inset 0 1px 0 rgba(255,236,200,0.06);
}
[data-theme="dark"] .glass-drawer::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,0.34) 0%,
    rgba(255,236,200,0.10) 20%,
    rgba(255,255,255,0)    50%,
    rgba(196,114,58,0)     60%,
    rgba(196,114,58,0.10)  85%,
    rgba(212,136,78,0.32)  100%);
}

/* ── .glass-chip — small pill/badge ─────────────────────────── */
.glass-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--glass-tint-md);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.80),
    0 4px 14px rgba(28,28,30,0.08);
  overflow: hidden;
  transform: translateZ(0);
}
.glass-chip::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.15) 30%,
    rgba(255,255,255,0)    55%,
    rgba(196,114,58,0)     55%,
    rgba(196,114,58,0.10)  80%,
    rgba(196,114,58,0.28)  100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.glass-chip > * { position: relative; z-index: 2; }
.glass-chip.size-lg { padding: 12px 22px; font-size: 0.8rem; border-radius: 18px; }
.glass-chip.accent  { color: var(--accent); }
[data-theme="dark"] .glass-chip {
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255,236,200,0.08),
    0 4px 14px rgba(0,0,0,0.45);
}
[data-theme="dark"] .glass-chip::before {
  background: linear-gradient(135deg,
    rgba(255,236,200,0.40) 0%,
    rgba(255,236,200,0.10) 30%,
    rgba(255,255,255,0)    55%,
    rgba(196,114,58,0)     55%,
    rgba(196,114,58,0.10)  80%,
    rgba(212,136,78,0.32)  100%);
}

/* ═══════════════════════════════════════════════════════════════
   REFINEMENTS — existing partial-glass elements upgraded
   (Header / cart drawer / quote modal already have ::before from
    earlier "GLASS ::before TECHNIQUE" block. These only refine
    blur / shadow / radius to match the new system.)
   ═══════════════════════════════════════════════════════════════ */

/* Subtle 1px copper-tinted edge under sticky header */
header { overflow: visible; }
header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196,114,58,0.22) 30%,
    rgba(196,114,58,0.22) 70%,
    transparent 100%);
  pointer-events: none;
}
[data-theme="dark"] header::after {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212,136,78,0.30) 30%,
    rgba(212,136,78,0.30) 70%,
    transparent 100%);
}

/* Quote modal: align with new system */
.modal {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(60px) saturate(2.0);
  -webkit-backdrop-filter: blur(60px) saturate(2.0);
  border-radius: 24px;
  box-shadow: var(--shadow-glass-lg), 0 24px 80px rgba(28,28,30,0.18);
  /* scroll long modals (e.g. the quote form) instead of clipping them. This
     block loads after .glass-modal, so its overflow wins — it must be auto, or
     the quote modal gets cut off below the fold (only the last field shows). */
  overflow-y: auto;
  overflow-x: hidden;
  transform: scale(.96) translateY(12px) translateZ(0);
}
.modal-overlay.open .modal { transform: scale(1) translateY(0) translateZ(0); }
.modal-overlay {
  background: rgba(28,28,30,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Cart drawer: align with new system (already has ::before edge) */
.cart-drawer {
  background: var(--glass-tint-strong);
  backdrop-filter: blur(50px) saturate(1.8);
  -webkit-backdrop-filter: blur(50px) saturate(1.8);
  box-shadow:
    -16px 0 48px rgba(28,28,30,0.18),
    inset 0 1px 0 rgba(255,255,255,0.90);
  overflow: hidden;
  will-change: transform;
}
.cart-overlay {
  background: rgba(28,28,30,0.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"] .cart-overlay { background: rgba(0,0,0,0.62); }

/* Product cards: promote to liquid glass with gradient border */
.product-card {
  position: relative;
  border-radius: 20px;
  background: var(--glass-tint-md);
  backdrop-filter: blur(28px) saturate(1.5);
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  border: none;
  box-shadow: var(--shadow-glass);
  transform: translateZ(0);
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.product-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  /* above the children (incl. the image, which has its own opaque bg) so the
     hairline glass border wraps the ENTIRE card — photo included — not just
     the text body and the exposed rounded corners. */
  z-index: 3;
}
.product-card > *:not(.btn-wishlist) { position: relative; z-index: 2; }
.product-card:hover {
  /* Lift via shadow only — no transform, so the card (and the heart/flag/quote
     on it) never shifts or flickers on hover. */
  box-shadow: var(--shadow-glass-md), 0 4px 16px rgba(196,114,58,0.10);
}
[data-theme="dark"] .product-card {
  background: var(--glass-tint-md);
  box-shadow: var(--shadow-glass);
}
[data-theme="dark"] .product-card:hover {
  box-shadow: var(--shadow-glass-md), 0 6px 20px rgba(212,136,78,0.18);
}

/* Why-card: glass treatment via ::after so the existing ::before
   (copper top-accent line) is preserved */
.why-card {
  position: relative;
  background: var(--glass-tint-md);
  backdrop-filter: blur(40px) saturate(1.7);
  -webkit-backdrop-filter: blur(40px) saturate(1.7);
  border: none;
  border-radius: 20px;
  box-shadow: var(--shadow-glass);
  transform: translateZ(0);
}
.why-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.why-card > * { position: relative; z-index: 2; }
.why-card:hover {
  transform: translateY(-4px) translateZ(0);
  box-shadow: var(--shadow-glass-md);
}
[data-theme="dark"] .why-card {
  background: var(--glass-tint-md);
  box-shadow: var(--shadow-glass);
}

/* Hero badge: stronger glass-chip-style card */
.hero-badge {
  position: absolute;
  background: var(--glass-tint-strong);
  backdrop-filter: blur(40px) saturate(1.8);
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  border: none;
  border-radius: 18px;
  box-shadow: var(--shadow-glass-md);
}

/* Search overlay: warm glass wash */
.search-overlay {
  background: color-mix(in srgb, var(--cream) 60%, transparent);
  backdrop-filter: blur(36px) saturate(1.6);
  -webkit-backdrop-filter: blur(36px) saturate(1.6);
}
[data-theme="dark"] .search-overlay {
  background: color-mix(in srgb, #0c0b09 75%, transparent);
}

/* Testimonial card: subtle glass */
.testi-card {
  position: relative;
  background: var(--glass-tint-md);
  backdrop-filter: blur(32px) saturate(1.5);
  -webkit-backdrop-filter: blur(32px) saturate(1.5);
  border: none;
  border-radius: 18px;
  box-shadow: var(--shadow-glass);
  transform: translateZ(0);
}
.testi-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: var(--glass-border-grad);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}
.testi-card > * { position: relative; z-index: 2; }
[data-theme="dark"] .testi-card {
  background: var(--glass-tint-md);
  box-shadow: var(--shadow-glass);
}

/* Footer badge: subtle glass pill */
.footer-badge {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ── Reduced-motion accommodation ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .glass, .glass-heavy, .glass-modal, .glass-drawer, .cart-drawer,
  .modal, .product-card, .why-card, .testi-card, .glass-chip,
  .glass-toast, .glass-bar, .btn-glass, .btn-glass-accent {
    transition-duration: .01ms !important;
  }
}

/* Mobile drawer style is handled by the .cart-drawer rule at the 600px
   breakpoint (top/right/bottom/left:8px + border-radius:18px). Don't
   force 100vw here — it would flatten the bottom-sheet into a full-bleed
   rectangle and override the rounded inset on the smallest phones. */

/* ════════════════════════════════════════════════════════════════
   HEADER LIQUID GLASS PASS — applies the same recipe as .btn-glass
   to every interactive header control: Categories, Search, Wishlist,
   Compare, Currency, Language, Theme. Cart button already glass.
   ════════════════════════════════════════════════════════════════ */

/* Shared base: every header control overrides its old solid bg with
   tinted glass and grows the gradient-mask border on ::before. */
.cat-btn,
.header-search,
.hdr-icon-btn,
.currency-btn,
.lang-btn,
.theme-toggle,
#headerAuthBtn > .auth-btn,
#headerAuthBtn > button {
  position: relative !important;
  background: var(--glass-tint-md) !important;
  backdrop-filter: blur(40px) saturate(1.6);
  -webkit-backdrop-filter: blur(40px) saturate(1.6);
  border: none !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.55),
    0 2px 6px rgba(28,28,30,0.05);
  transition: background .18s, color .18s, transform .18s, box-shadow .18s;
  overflow: hidden;
  transform: translateZ(0);
}
.cat-btn::before,
.header-search::before,
.hdr-icon-btn::before,
.currency-btn::before,
.lang-btn::before,
.theme-toggle::before,
#headerAuthBtn > .auth-btn::before,
#headerAuthBtn > button::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
/* Make sure content stacks above the ::before mask */
.cat-btn > *,
.header-search > *,
.hdr-icon-btn > *,
.currency-btn > *,
.lang-btn > *,
.theme-toggle > *,
#headerAuthBtn > .auth-btn > *,
#headerAuthBtn > button > * { position: relative; z-index: 2; }
/* ...except the count pip, which must stay pinned to the heart's top-right
   corner (absolute) while still sitting above the glass ::before mask. */
.hdr-icon-btn > .hdr-icon-badge { position: absolute; z-index: 3; }

/* Hovers: subtle accent tint, lift, glow */
.cat-btn:hover,
.header-search:hover,
.hdr-icon-btn:hover,
.currency-btn:hover,
.lang-btn:hover,
.theme-toggle:hover,
#headerAuthBtn > .auth-btn:hover,
#headerAuthBtn > button:hover {
  background: color-mix(in srgb, var(--glass-tint-strong) 92%, var(--accent) 8%) !important;
  color: var(--accent);
  transform: translateY(-1px) translateZ(0);
}

/* Categories — keep accent identity via copper text/icon, pill shape preserved */
.cat-btn {
  color: var(--accent) !important;
  border-radius: 30px !important;
  padding: 10px 22px !important;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.55),
    0 4px 18px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}
.cat-btn:hover {
  background: color-mix(in srgb, var(--accent) 14%, var(--glass-tint-strong)) !important;
}
.cat-btn.open {
  background: color-mix(in srgb, var(--accent) 22%, var(--glass-tint-strong)) !important;
  color: var(--accent) !important;
}

/* Search bar — bigger pill with glass tint, input stays transparent */
.header-search {
  border-radius: 30px !important;
  padding: 0;
}
.header-search input {
  background: transparent !important;
  border: none !important;
  padding: 12px 48px 12px 22px !important;
  position: relative; z-index: 2;
  box-shadow: none !important;
}
.header-search input:focus { box-shadow: none !important; }
.header-search:focus-within {
  background: var(--glass-tint-strong) !important;
}

/* Wishlist / Compare — column layout preserved, glass behind it */
.hdr-icon-btn {
  border-radius: 14px !important;
  padding: 8px 12px !important;
}

/* Currency + Language pills — keep small radius, tighten padding */
.currency-btn, .lang-btn {
  border-radius: 22px !important;
  padding: 7px 13px !important;
  color: var(--text2) !important;
}

/* Theme toggle — keep round, glass-tinted */
.theme-toggle {
  width: 38px; height: 38px;
  border-radius: 50% !important;
  margin-left: 6px;
}

/* Auth button (injected via JS as .auth-btn or generic button inside #headerAuthBtn) —
   already mostly tan; tighten the glass recipe so it matches the others. */
#headerAuthBtn > .auth-btn,
#headerAuthBtn > button {
  border-radius: 22px !important;
  padding: 6px 12px !important;
  color: var(--text) !important;
}

/* Dark theme highlight tweaks — the inset highlight uses very light
   white which is fine on dark surfaces; just nudge the hover blend so
   accent isn't washed out. */
[data-theme="dark"] .cat-btn,
[data-theme="dark"] .header-search,
[data-theme="dark"] .hdr-icon-btn,
[data-theme="dark"] .currency-btn,
[data-theme="dark"] .lang-btn,
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] #headerAuthBtn > .auth-btn,
[data-theme="dark"] #headerAuthBtn > button {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.10),
    0 2px 6px rgba(0,0,0,0.30);
}
[data-theme="dark"] .cat-btn::before,
[data-theme="dark"] .header-search::before,
[data-theme="dark"] .hdr-icon-btn::before,
[data-theme="dark"] .currency-btn::before,
[data-theme="dark"] .lang-btn::before,
[data-theme="dark"] .theme-toggle::before,
[data-theme="dark"] #headerAuthBtn > .auth-btn::before,
[data-theme="dark"] #headerAuthBtn > button::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,.34) 0%,
    rgba(255,236,200,.10) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(212,136,78,.10) 80%,
    rgba(212,136,78,.34) 100%);
}


/* ── Dark filter sidebar: keep only panels carded; sidebar transparent ─── */
[data-theme=dark] .filter-sidebar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
[data-theme=dark] .filter-panel {
  background: var(--glass-tint);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 18px;
  box-shadow:
    inset 0 1px 0 var(--glass-inset-top),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    var(--glass-ambient);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — final overrides
   Applied on top of all prior @media blocks to fix:
   header overflow, oversized hero, payment-pill wrapping,
   tab-bar scroll, category filter drawer, card padding,
   touch-target sizing, and tables blowing out widths.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Global: prevent any horizontal overflow leaking the cart drawer
     or any wide grid into the viewport. */
  html, body { overflow-x: hidden; max-width: 100vw; }

  /* Containers tighter on mobile so cards don't get pinched */
  .container { padding-left: 16px; padding-right: 16px; }

  /* ── HEADER: [logo · search · wishlist · cart · hamburger] ────── */
  .header-inner {
    grid-template-columns: auto 1fr auto !important;
    gap: 8px !important;
    height: 56px;
  }
  /* Selectively hide what doesn't fit on mobile.
     Wishlist + cart stay visible because users need one-tap access. */
  .header-actions > .currency-toggle,
  .header-actions > .lang-toggle,
  .header-actions > .theme-toggle,
  .header-actions > #headerAuthBtn,
  .header-actions > a.btn-gold { display: none !important; }
  .header-actions { gap: 4px !important; }
  .hamburger { display: flex !important; }
  /* Slim logo */
  .logo-name { font-size: 1.45rem; }
  .logo-img { width: 50px; height: 50px; }
  .logo-tag { display: none; }
  /* Header search becomes icon-only button (full-screen overlay on tap) */
  .header-search {
    width: 40px; height: 40px; justify-self: end;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer; margin-left: auto;
    padding: 0 !important;
  }
  .header-search input { display: none; }
  .header-search .search-icon {
    position: static; transform: none; pointer-events: auto;
    cursor: pointer; width: 20px; height: 20px;
  }
  /* Wishlist + cart: icon-only, 40×40 to match the search button */
  .header-actions .hdr-icon-btn {
    width: 40px; height: 40px; padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .header-actions .hdr-icon-btn [data-i18n="nav.wishlist"],
  .header-actions .hdr-icon-btn [data-i18n="nav.compare"] { display: none !important; }
  .header-actions .hdr-icon-btn svg { width: 20px; height: 20px; }
  /* Badge → absolute top-right corner on circular buttons */
  .header-actions .hdr-icon-btn .hdr-icon-badge {
    position: absolute; top: -3px; right: -3px;
    order: 0; margin: 0;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; font-size: 0.58rem;
  }
  .header-cart {
    width: 40px !important; height: 40px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .header-cart svg { width: 20px; height: 20px; }
  .header-cart .cart-badge {
    top: -3px !important; right: -3px !important;
    min-width: 16px !important; height: 16px !important;
    font-size: 0.58rem !important;
  }
  /* Cat button hidden on mobile (categories live in hamburger menu) */
  .cat-btn { display: none !important; }

  /* ── HERO: shrink height + text ── */
  .hero { height: auto; min-height: 460px; }
  .hero-content { padding: 56px 0 48px; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); margin-bottom: 14px; }
  .hero-sub { font-size: 0.95rem; margin-bottom: 24px; }
  .hero-badge { display: none; }
  .hero-actions .btn,
  .hero-actions .btn-glass,
  .hero-actions .btn-gold,
  .hero-actions .btn-glass-accent { padding: 12px 18px; font-size: 0.84rem; min-height: 44px; }

  /* ── PAYMENT PILLS: keep on one row, scroll if needed ── */
  .pay-methods {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding-bottom: 2px;
  }
  .pay-methods::-webkit-scrollbar { display: none; }
  .pay-pill {
    flex-shrink: 0;
    height: 28px; padding: 3px 8px;
  }
  .pay-pill img { height: 18px; }

  /* ── PRODUCT-PAGE TABS: horizontal scroll-snap ── */
  .tabs,
  .feat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    gap: 6px;
    padding-bottom: 4px;
    justify-content: flex-start;
  }
  .tabs::-webkit-scrollbar,
  .feat-tabs::-webkit-scrollbar { display: none; }
  .tab-btn,
  .feat-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
    white-space: nowrap;
    min-height: 44px;
    padding: 9px 16px;
    font-size: 0.82rem;
  }

  /* ── CATEGORY: filter sidebar collapses (toggled by JS) ── */
  .category-layout { gap: 16px; }
  .filter-sidebar {
    position: static !important;
    max-height: none !important;
    width: 100%;
    margin-bottom: 12px;
  }
  /* "Show filters" full-width pill is rendered by category.html JS */
  #mobileFilterToggle { min-height: 44px; }

  /* ── PRODUCT CARDS: tighter on mobile ── */
  .product-card-actions { padding: 0 10px 10px; }
  .btn-cart, .btn-quote { min-height: 44px; padding: 10px 12px; font-size: 0.78rem; }

  /* ── COMPANY-PROFILE / BRANDS: keep tight 2-up ── */
  .np-mfr-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* ── WISHLIST PAGE: stack header actions ── */
  .wishlist-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .wishlist-header > div[style*="display:flex"] { flex-wrap: wrap; gap: 8px !important; }

  /* ── TABLES: wrap in scroll container ── */
  .specs-table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ── TOUCH TARGETS: bump small interactives to ≥44px ── */
  .btn, .btn-glass, .btn-gold, .btn-glass-accent, .btn-outline,
  .pagination .page-btn,
  .auth-signin-btn, .header-user-btn,
  .cat-pill {
    min-height: 44px;
  }

  /* ── Company page: stack two-column hero ── */
  .company-header,
  .company-detail-grid,
  .company-profile-grid { grid-template-columns: 1fr !important; }
}

/* ── Cookie banner — keep it from blocking the product CTA stack ── */
@media (max-width: 900px) {
  #cookieBanner,
  .cookie-banner {
    left: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    max-width: calc(100vw - 16px);
    padding: 14px 16px !important;
    border-radius: 14px;
  }
}

/* ── Extra-small: 480 and under ── */
@media (max-width: 480px) {
  .product-grid { grid-template-columns: 1fr !important; }
  .cat-grid { grid-template-columns: 1fr !important; }
  .np-mfr-grid { grid-template-columns: repeat(2, 1fr); }
  /* "You may also need" recommendation grid on PDP — 2-up stays scannable */
  .pdp-recs-grid,
  .pdp-related-grid { grid-template-columns: repeat(2, 1fr) !important; }
  /* Wishlist heading smaller */
  .wishlist-title { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   Skip link, focus-visible, touch targets, cookie banner contrast
   ═══════════════════════════════════════════════════════════════ */

/* ── Skip to main content link ── */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100000;
  padding: 10px 18px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Visible focus ring for keyboard users ──
   Replaces the various `outline:none` rules that strip default focus.
   Inputs keep their existing border/box-shadow focus styles; this
   provides a uniform ring for buttons, links, and other interactive
   controls when navigated via keyboard. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Inputs/selects/textareas already have border-color + box-shadow on
   :focus, so suppress the duplicate ring on those. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
}

/* ── 44px minimum touch target for icon close buttons ──
   WCAG 2.5.5 target size. Centred glyph, no layout change. */
.cart-close,
.modal-close,
.search-overlay-close,
.adm-modal-close,
.addr-modal-close {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Cookie banner contrast + less obtrusive on desktop ──
   The JS-injected banner uses light-on-dark colours, but the Decline
   button text was only 60% opacity which falls below WCAG AA contrast
   on the dark background. Lift it to full opacity and brighten the
   border so it reads cleanly. */
#cookieBanner .cookie-decline {
  color: #fff !important;
  border-color: rgba(255,255,255,0.55) !important;
}
#cookieBanner .cookie-decline:hover {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.8) !important;
}
#cookieBanner .cookie-text {
  color: rgba(255,255,255,0.92) !important;
}

/* Desktop: shrink the banner to a corner pill so it doesn't dominate
   the full-bleed bottom edge. Mobile rule above (max-width:900px)
   still wins for small screens. */
@media (min-width: 901px) {
  /* Pin to the bottom-LEFT corner. The product page's buy box, Delivery list
     and Payment panel all sit in the RIGHT column, so a bottom-right banner
     covered them; bottom-left only overlaps the gallery's empty corner. */
  #cookieBanner {
    left: 20px !important;
    right: auto !important;
    bottom: 20px !important;
    max-width: 400px;
    padding: 14px 18px !important;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
  }
  /* RTL mirrors: the product column is on the left, so pin bottom-RIGHT. */
  [dir="rtl"] #cookieBanner {
    left: auto !important;
    right: 20px !important;
  }
  #cookieBanner .cookie-inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  #cookieBanner .cookie-text {
    font-size: 0.82rem;
    min-width: 0;
    flex: 1 1 100%;
  }
}

/* ── SITE-WIDE ANNOUNCEMENT BANNER ────────────────────────────
   Rendered by initAnnouncementBar() — floating liquid-glass pill.
   Desktop: pinned to bottom-right, sits above the cookie banner
   (the JS lifts it via inline `bottom` when #cookieBanner is up).
   Mobile (≤900px): pinned to the top, full-width minus 16px. */
.site-banner {
  --sb-accent: #3b9eff;
  position: fixed;
  right: 20px; bottom: 92px;
  z-index: 10010;            /* above #cookieBanner (10000) */
  width: min(380px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 16px;
  font-family: var(--font-sans);
  color: var(--text);
  background: color-mix(in srgb, var(--surface, #ffffff) 70%, transparent);
  backdrop-filter: blur(50px) saturate(1.6);
  -webkit-backdrop-filter: blur(50px) saturate(1.6);
  border-radius: 14px;
  border-left: 4px solid var(--sb-accent);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.18),
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.4);
  animation: bannerSlideIn .35s cubic-bezier(.34,1.3,.64,1) both;
  will-change: transform, opacity;
}

/* Liquid-glass gradient-mask border (same recipe as .btn-glass-accent::before).
   The colored left edge above stays; this adds the subtle highlight ring on
   the remaining three sides. */
.site-banner::before {
  content: '';
  position: absolute;
  inset: 0; pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.18) 80%,
    rgba(255,255,255,0.55) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:         linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.site-banner-icon {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-top: 1px;
  color: var(--sb-accent);
}
.site-banner-icon svg { display: block; }

.site-banner-msg {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem; font-weight: 500; line-height: 1.4;
  color: var(--text);
  cursor: pointer;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  transition: -webkit-line-clamp .2s;
}
.site-banner-expanded .site-banner-msg {
  -webkit-line-clamp: unset;
  display: block;
}

.site-banner-close {
  flex-shrink: 0;
  background: none; border: none; cursor: pointer;
  color: var(--muted, #8b8275);
  width: 28px; height: 28px;
  margin: -2px -2px 0 0;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, transform .15s;
}
.site-banner-close:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text);
}
.site-banner-close:active { transform: scale(0.92); }
[data-theme=dark] .site-banner-close:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

/* Type accents — coloured edge + matching icon stroke. No full bleeds. */
.site-banner-info    { --sb-accent: #3b9eff; }
.site-banner-update  { --sb-accent: #805ad5; }
.site-banner-success { --sb-accent: #48bb78; }
.site-banner-warning { --sb-accent: #f6ad55; }
.site-banner-alert   { --sb-accent: #e53e3e; }

/* Dark theme — darker translucent fill, brighter highlight ring. */
[data-theme=dark] .site-banner {
  background: color-mix(in srgb, var(--surface, #1a1814) 78%, transparent);
  box-shadow:
    0 14px 38px rgba(0,0,0,0.55),
    0 2px 10px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
}
[data-theme=dark] .site-banner::before {
  background: linear-gradient(180deg,
    rgba(255,236,200,0.34) 0%,
    rgba(255,236,200,0.10) 20%,
    rgba(255,255,255,0)    40%,
    rgba(255,255,255,0)    60%,
    rgba(255,236,200,0.10) 80%,
    rgba(255,236,200,0.34) 100%);
}

.site-banner-hide {
  animation: bannerSlideOut .35s cubic-bezier(.4,0,.7,.5) both !important;
}

@keyframes bannerSlideIn {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes bannerSlideOut {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

/* Mobile: pin to top, full-width minus 16px. Slide in from the top. */
@media (max-width: 900px) {
  .site-banner {
    /* Reset inline `bottom` from JS — top-pinned on mobile. */
    top: 12px;
    bottom: auto !important;
    left: 8px; right: 8px;
    width: auto;
    max-width: calc(100vw - 16px);
    animation: bannerSlideInTop .35s cubic-bezier(.34,1.3,.64,1) both;
  }
  .site-banner-hide {
    animation: bannerSlideOutTop .3s cubic-bezier(.4,0,.7,.5) both !important;
  }
  @keyframes bannerSlideInTop {
    from { transform: translateY(-120%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
  @keyframes bannerSlideOutTop {
    from { transform: translateY(0);     opacity: 1; }
    to   { transform: translateY(-120%); opacity: 0; }
  }
  .site-banner-msg { font-size: 0.82rem; }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .site-banner,
  .site-banner-hide { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   TOP UTILITY STRIP — GLOBAL (every page)
   Same look as homepage; hosts currency / lang / theme widgets.
   ════════════════════════════════════════════════════════════════ */
.np-utility { background: #0a0a0a; color: #d9d4cc; font-size: 0.74rem; letter-spacing: 0.02em; }
.np-utility-inner { display:flex; align-items:center; justify-content:space-between; height: 32px; }
.np-utility-loc { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; opacity:.85; }
.np-utility-loc:hover { opacity:1; color:var(--accent); }
.np-utility-right { display:flex; gap:18px; align-items: center; }
.np-utility-right a { color:inherit; text-decoration:none; opacity:.78; transition:opacity .15s, color .15s; }
.np-utility-right a:hover { opacity:1; color:var(--accent); }

/* Bulk and Used are counters, not service links, so they don't sit at the same
   weight as Delivery or Support. Copper, full opacity, a lit pip and a slow
   breathing glow, enough for the eye to catch them without the strip turning
   into an advert. */
.np-utility-right a.np-utility-hot {
  color: var(--accent); opacity: 1; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  animation: npHotGlow 3.4s ease-in-out infinite;
}
.np-utility-right a.np-utility-hot::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 8px currentColor;
}
.np-utility-right a.np-utility-hot:hover {
  color: color-mix(in srgb, var(--accent) 62%, #fff);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 70%, transparent);
}
@keyframes npHotGlow {
  0%, 100% { text-shadow: 0 0 7px  color-mix(in srgb, var(--accent) 28%, transparent); }
  50%      { text-shadow: 0 0 15px color-mix(in srgb, var(--accent) 62%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .np-utility-right a.np-utility-hot { animation: none; }
}

.np-utility-sep { display:inline-block; width:1px; height:14px; background: rgba(255,255,255,0.14); margin: 0 4px; }
.np-utility-widgets { display: flex; align-items: center; gap: 6px; }
[data-theme="dark"] .np-utility { background:#000; color:#a8a39a; }

/* Restyle currency/lang/theme widgets when they live inside the dark utility strip.
   Beats the global !important rules from the header-glass pass. */
.np-utility #currencyToggle .currency-btn,
.np-utility #langToggle .lang-btn {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  padding: 4px 8px !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: #d9d4cc !important;
  height: 24px !important;
  letter-spacing: 0.02em !important;
  transition: color .15s, background .15s !important;
  transform: none !important;
}
.np-utility #currencyToggle .currency-btn:hover,
.np-utility #langToggle .lang-btn:hover {
  background: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
.np-utility #currencyToggle .currency-btn::before,
.np-utility #langToggle .lang-btn::before { display: none !important; }
.np-utility .theme-toggle {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  color: #d9d4cc !important;
  transition: color .15s, background .15s !important;
  transform: none !important;
}
.np-utility .theme-toggle:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--accent) !important;
}
.np-utility .theme-toggle::before { display: none !important; }
.np-utility .theme-toggle svg { width: 13px; height: 13px; }
.np-utility .currency-btn svg,
.np-utility .lang-btn svg { width: 9px; height: 9px; opacity: 0.7; }
.np-utility .currency-dropdown,
.np-utility .lang-dropdown { z-index: 10000; top: calc(100% + 4px) !important; }

/* Hide the original header-actions slots — widgets are relocated by JS. */
.header-actions > #currencyToggle,
.header-actions > #langToggle,
.header-actions > #themeToggle { display: none !important; }

@media (max-width: 720px) {
  .np-utility-right a { display: none; }
  .np-utility-sep { display: none; }
  /* The three service links still go on a phone, but the two counters are the
     reason the strip exists now, so they stay. */
  .np-utility-right a.np-utility-hot { display: inline-flex; }
  .np-utility-right { gap: 14px; }
}
@media (max-width: 560px) {
  /* "Shipped from Europe" wrapped to two lines once the counters joined the
     row, which doubled the strip's height. It is the least useful thing here,
     so on a narrow phone it keeps only its pin. */
  .np-utility-loc span { display: none; }
  .np-utility-right { gap: 12px; }
}

/* ════════════════════════════════════════════════════════════════
   Categories mega-dropdown — liquid glass (global, all pages)
   Promoted from index.html scoped overrides.
   ════════════════════════════════════════════════════════════════ */
.cat-dropdown {
  background: color-mix(in srgb, var(--cream) 48%, transparent) !important;
  backdrop-filter: blur(80px) saturate(2.0) !important;
  -webkit-backdrop-filter: blur(80px) saturate(2.0) !important;
  box-shadow:
    0 32px 80px rgba(28,28,30,0.22),
    0 8px 20px rgba(28,28,30,0.10),
    inset 0 1px 0 rgba(255,255,255,0.95) !important;
}
.cat-dropdown-list {
  background: color-mix(in srgb, var(--sand, #f0ebe4) 38%, transparent) !important;
  border-right: 1px solid rgba(28,28,30,0.06);
}
.cat-dropdown-panel {
  background: color-mix(in srgb, #ffffff 28%, transparent) !important;
  position: relative;
}
.cat-dropdown-overlay {
  background: rgba(28,28,30,0.25) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

[data-theme="dark"] .cat-dropdown {
  background: rgba(22,20,15,0.48) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.65),
    0 8px 20px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,236,200,0.08) !important;
}
[data-theme="dark"] .cat-dropdown-list {
  background: rgba(12,11,9,0.30) !important;
  border-right: 1px solid rgba(255,236,200,0.08);
}
[data-theme="dark"] .cat-dropdown-panel {
  background: rgba(22,20,15,0.14) !important;
}
[data-theme="dark"] .cat-dropdown-overlay {
  background: rgba(0,0,0,0.45) !important;
}

/* ── Liquid glass (iOS-style refraction) — progressive enhancement ─────────
   .liquid-glass refracts the backdrop via the #mecivi-liquid SVG filter
   (Chromium). Safari/Firefox ignore url() backdrop-filters and keep the plain
   translucent + blur fallback, so the element is always visible. */
.liquid-glass { position: relative; isolation: isolate; overflow: hidden;
  background: rgba(255,255,255,0.12); }
[data-theme="dark"] .liquid-glass { background: rgba(255,255,255,0.07); }
.liquid-glass::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  backdrop-filter: blur(3px) saturate(1.5);
  -webkit-backdrop-filter: blur(3px) saturate(1.5);
}
@supports ((backdrop-filter: url("#mecivi-liquid")) or (-webkit-backdrop-filter: url("#mecivi-liquid"))) {
  .liquid-glass::before {
    backdrop-filter: blur(2px) url('#mecivi-liquid');
    -webkit-backdrop-filter: blur(2px) url('#mecivi-liquid');
  }
}
.liquid-glass::after {
  content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset 1.5px 1.5px 1px -1px rgba(255,255,255,0.9),
    inset -1.5px -1.5px 1px -1px rgba(255,255,255,0.55),
    inset 0 0 8px 2px rgba(255,255,255,0.16),
    0 0 14px rgba(255,255,255,0.10),
    0 6px 20px rgba(0,0,0,0.16);
}
.liquid-glass > * { position: relative; z-index: 2; }

/* ── Section CTA / "show more" pills — frosted liquid glass, SITE-WIDE ──────
   The hero "Explore →" pill is the reference. app.js adds .liquid-glass to
   every .np-show-more / a.np-cta on every page, which supplies the frost +
   Chromium refraction; these rules supply the pill geometry and theme-aware
   border/text so they render correctly even before/without the glass layer. */
.np-show-more, a.np-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px; border-radius: 999px;
  border: 1px solid rgba(28,28,30,0.14);
  color: var(--text); font-weight: 600; font-size: 0.82rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color .18s, color .18s, transform .18s;
}
.np-show-more:hover, a.np-cta:hover {
  border-color: var(--accent); color: var(--accent); transform: translateY(-1px);
}
[data-theme="dark"] .np-show-more, [data-theme="dark"] a.np-cta {
  border-color: rgba(255,255,255,0.18);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — site-wide refraction
   Promotes the existing frosted-glass surfaces to true iOS liquid glass by
   adding the #mecivi-liquid SVG displacement to their backdrop-filter. Gated
   behind @supports url() so only Chromium applies the refraction; Safari/
   Firefox keep their current blur (they ignore url() backdrop-filters). The
   #mecivi-liquid filter is injected once per page by app.js.
   ══════════════════════════════════════════════════════════════════════════ */
@supports (backdrop-filter: url("#mecivi-liquid")) or (-webkit-backdrop-filter: url("#mecivi-liquid")) {
  .glass, .glass-heavy, .glass-nav, .mega-panel, .modal, .glass-modal,
  .btn-glass, .product-card, .filter-sidebar, .cart-drawer, .np-cta-card,
  .header-cart, .hdr-icon-btn, .search-wrap, .auth-signin-btn {
    backdrop-filter: blur(8px) saturate(1.7) url('#mecivi-liquid') !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.7) url('#mecivi-liquid') !important;
  }
  /* the signature liquid-glass edge highlight on the key surfaces */
  .glass::after, .glass-heavy::after, .modal::after, .product-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
    box-shadow: inset 1.5px 1.5px 1px -1px rgba(255,255,255,0.85),
                inset -1.5px -1.5px 1px -1px rgba(255,255,255,0.5),
                inset 0 0 7px 2px rgba(255,255,255,0.12);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ALL BUTTONS → LIQUID GLASS
   The solid copper CTAs (add-to-cart, quote, contact, All-promotions, notify,
   newsletter) become translucent copper glass so the #mecivi-liquid refraction
   shows through; the already-glass / outline / link buttons just get the
   refraction added. Chromium renders the refraction; others keep the frosted
   blur. Keeps each button's existing border/sheen pseudo-elements & white text.
   ══════════════════════════════════════════════════════════════════════════ */
.btn-gold, .btn-cart, .btn-quote, .btn-cart-inquiry,
.np-deals-left .dl-cta, .notify-btn, .np-newsletter-form button {
  background: color-mix(in srgb, var(--accent) 62%, transparent) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.7);
  backdrop-filter: blur(10px) saturate(1.7);
}
@supports (backdrop-filter: url("#mecivi-liquid")) or (-webkit-backdrop-filter: url("#mecivi-liquid")) {
  .btn, .btn-gold, .btn-cart, .btn-quote, .btn-cart-inquiry, .np-deals-left .dl-cta,
  .notify-btn, .np-newsletter-form button, .btn-glass, .btn-glass-accent,
  .np-hero-pill, .np-cta, .np-show-more, .btn-outline {
    -webkit-backdrop-filter: blur(7px) saturate(1.6) url('#mecivi-liquid') !important;
    backdrop-filter: blur(7px) saturate(1.6) url('#mecivi-liquid') !important;
  }
}

/* ── Liquid-glass buttons v2: glossy COPPER (the flat 62% fill read muddy) ──
   Rich copper gradient + the iOS glass bevel/highlight so the CTAs look like
   wet glass, not washed-out tan. Refraction (from the @supports block) still
   applies at the edges. Overrides the earlier translucent-fill rule. */
.btn-gold, .btn-cart, .btn-quote, .btn-cart-inquiry,
.np-deals-left .dl-cta, .notify-btn, .np-newsletter-form button {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent2) 92%, transparent),
      color-mix(in srgb, var(--accent) 94%, transparent)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.28) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 1px 1px 1px -0.5px rgba(255,255,255,0.75),
    inset -1.5px -1.5px 1px -1px rgba(0,0,0,0.22),
    inset 0 0 10px 2px rgba(255,255,255,0.10),
    0 6px 20px rgba(196,114,58,0.42) !important;
}
.btn-gold:hover, .btn-cart:hover, .btn-quote:hover, .btn-cart-inquiry:hover,
.np-deals-left .dl-cta:hover, .notify-btn:hover, .np-newsletter-form button:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.7),
    inset 1px 1px 1px -0.5px rgba(255,255,255,0.85),
    inset -1.5px -1.5px 1px -1px rgba(0,0,0,0.25),
    inset 0 0 12px 2px rgba(255,255,255,0.14),
    0 9px 26px rgba(196,114,58,0.5) !important;
}

/* ── Quote button → frosted "Shop cold line" glass pill (neutral, NOT copper) ──
   Reference iOS liquid-glass: smoky translucent frost, bright hairline border,
   white text + arrow. Distinct from the solid-copper ADD TO CART. Appended last
   so it overrides the copper v2 fill for .btn-quote only. */
.btn-quote {
  background: linear-gradient(135deg,
      rgba(58,46,40,0.42),
      rgba(34,27,23,0.30)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    inset 0 -1px 1px rgba(0,0,0,0.18),
    0 4px 14px rgba(28,28,30,0.18) !important;
}
.btn-quote::before {
  background: linear-gradient(135deg,
    rgba(255,255,255,0.70) 0%,
    rgba(255,255,255,0.25) 35%,
    rgba(255,255,255,0)    60%,
    rgba(255,255,255,0.15) 100%) !important;
}
.btn-quote svg { color: #fff; }
.btn-quote:hover {
  filter: brightness(1.08);
  color: #fff !important;
  background: linear-gradient(135deg,
      rgba(70,56,48,0.48),
      rgba(44,35,29,0.36)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 1px rgba(0,0,0,0.20),
    0 7px 20px rgba(28,28,30,0.24) !important;
}
[data-theme=dark] .btn-quote {
  background: linear-gradient(135deg,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.05)) !important;
  color: #fff !important;
}

/* ── Product photos always on WHITE (both themes) ──────────────────────────
   Transparent / studio product shots should sit on a clean white surface, not
   the dark card/gallery background. Forces the image containers white in light
   AND dark mode (the photo's info/body area stays themed). */
.product-card-image,
[data-theme=dark] .product-card-image,
.gallery-main,
[data-theme=dark] .gallery-main,
.gallery-thumb,
[data-theme=dark] .gallery-thumb,
#galleryMainImg,
[data-theme=dark] #galleryMainImg { background: #ffffff !important; }

/* ── Accessory groups (required / optional picks on the PDP) ──── */
.acc-group { margin-bottom: 22px; }
.acc-group .acc-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.acc-group .acc-head h3 {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text);
}
.acc-badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 20px;
  background: var(--sand); border: 1px solid var(--border2); color: var(--muted);
}
.acc-badge.is-need { background: rgba(180,82,47,.10); border-color: rgba(180,82,47,.30); color: #b4522f; }
.acc-badge.is-ok { background: rgba(46,125,74,.10); border-color: rgba(46,125,74,.28); color: #2e7d4a; }
.acc-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.acc-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px; border: 1px solid var(--border2); border-radius: var(--radius-md);
  background: var(--bg); cursor: pointer; text-align: center; font: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.acc-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.acc-card.is-on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim) inset; }
.acc-card img, .acc-card .acc-noimg {
  width: 100%; aspect-ratio: 1/1; object-fit: contain; border-radius: 6px; background: var(--sand);
}
.acc-card .acc-name { font-size: .8rem; line-height: 1.3; color: var(--text2); }
.acc-card .acc-price { font-size: .84rem; font-weight: 700; color: var(--accent); }
.btn-add-cart.acc-blocked, #vpAddBtn.acc-blocked { opacity: .55; }
[data-theme=dark] .acc-card { background: rgba(255,255,255,0.04); }

/* ══ COUNTER GATEWAY ══════════════════════════════════════════════
   The three doors, shown over the homepage on a first visit. Same design as
   /test, rebuilt with its own prefix so nothing here can collide with the shop
   underneath it. Injected by gateway.js after load, never present in the HTML,
   so it cannot delay the homepage's own paint. */
html.mcg-open, html.mcg-open body { overflow: hidden; }

.mcg {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  background: #0A0A0C; color: #F3EEE2;
  opacity: 0; transition: opacity .5s ease;
}
.mcg.mcg-in  { opacity: 1; }
.mcg.mcg-out { opacity: 0; pointer-events: none; }

.mcg-doors { flex: 1; display: flex; min-height: 0; }

.mcg-door {
  position: relative; flex: 1 1 0; min-width: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 0 22px; text-decoration: none; color: inherit;
  border-right: 1px solid rgba(243,238,226,.10);
  transition: flex-grow .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.mcg-door:last-child { border-right: 0; }

/* Hover pulls the plate back rather than pushing into it, so every door means
   the same thing: you see more of the machine, not less. */
.mcg-shot {
  position: absolute; inset: 0;
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
  transform: scale(1.12); filter: brightness(.60) contrast(1.02);
  transition: filter .6s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.mcg-scrim {
  position: absolute; inset: 0; transition: opacity .5s ease;
  background: linear-gradient(180deg, rgba(10,10,12,.80) 0%, rgba(10,10,12,.30) 26%,
                                      rgba(10,10,12,.74) 54%, rgba(10,10,12,.58) 100%);
}
.mcg-wash {
  position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease;
  background: radial-gradient(90% 62% at 50% 100%,
              color-mix(in srgb, var(--a) 42%, transparent), transparent 72%);
}
.mcg-seam {
  position: absolute; top: 0; left: 50%; width: 0; height: 2px;
  background: var(--a); transform: translateX(-50%);
  box-shadow: 0 0 18px var(--a);
  transition: width .55s cubic-bezier(.22,.61,.36,1);
}
.mcg-door:hover .mcg-shot,  .mcg-door:focus-visible .mcg-shot  { filter: brightness(1) contrast(1.04); transform: scale(1); }
.mcg-door:hover .mcg-scrim, .mcg-door:focus-visible .mcg-scrim { opacity: .82; }
.mcg-door:hover .mcg-wash,  .mcg-door:focus-visible .mcg-wash  { opacity: 1; }
.mcg-door:hover .mcg-seam,  .mcg-door:focus-visible .mcg-seam  { width: 100%; }
.mcg-door:hover, .mcg-door:focus-visible { flex-grow: 1.45; }
.mcg-door:focus-visible { outline: none; }
.mcg-doors:hover .mcg-door { opacity: .5; }
.mcg-doors .mcg-door:hover, .mcg-doors .mcg-door:focus-visible { opacity: 1; }

.mcg-body {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 13px;
}
.mcg-mark { height: 54px; width: auto; display: block; }
.mcg-rule { display: flex; align-items: center; gap: 11px; width: min(230px, 66%); }
.mcg-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--a)); opacity: .75; }
.mcg-rule i + i { background: linear-gradient(90deg, var(--a), transparent); }
.mcg-rule svg { flex: none; color: var(--a); }

.mcg-word {
  font-family: 'Playfair Display', Georgia, serif; font-weight: 500;
  font-size: clamp(26px, 3.5vw, 54px); line-height: 1;
  letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
  text-shadow: 0 2px 34px rgba(0,0,0,.75);
}
.mcg-desc { max-width: 25ch; font-size: clamp(11.5px, .92vw, 13.5px); line-height: 1.7; color: #A9A196; }
.mcg-enter {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 2px;
  font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--a); opacity: 0; transform: translateY(9px);
  transition: opacity .4s ease, transform .4s ease;
}
.mcg-door:hover .mcg-enter, .mcg-door:focus-visible .mcg-enter { opacity: 1; transform: none; }

.mcg-tag {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  font-size: 8.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--a); border: 1px solid color-mix(in srgb, var(--a) 55%, transparent);
  background: rgba(10,10,12,.5); border-radius: 20px; padding: 4px 11px;
}

/* Never a trap. Esc works too. */
.mcg-skip {
  flex: none; border: 0; background: transparent; cursor: pointer;
  border-top: 1px solid rgba(243,238,226,.10);
  padding: 14px; width: 100%; color: #8E877D;
  font-family: inherit; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  transition: color .2s ease;
}
.mcg-skip:hover { color: #E5A067; }

@media (max-width: 820px) {
  .mcg-doors { flex-direction: column; }
  .mcg-door { border-right: 0; border-bottom: 1px solid rgba(243,238,226,.10); padding: 0 18px; }
  .mcg-door:hover, .mcg-door:focus-visible { flex-grow: 1.2; }
  .mcg-doors:hover .mcg-door { opacity: 1; }
  .mcg-shot { transform: none; }
  .mcg-body { gap: 9px; }
  .mcg-mark { height: 30px; }
  .mcg-word { font-size: clamp(22px, 6.6vw, 34px); }
  .mcg-desc, .mcg-enter { display: none; }
  .mcg-rule { width: 140px; }
  .mcg-skip { padding: 11px; font-size: 9.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mcg, .mcg-door, .mcg-shot, .mcg-scrim, .mcg-wash, .mcg-seam, .mcg-enter { transition: none; }
}