/* Lagenco V8 combined stylesheet; no partial old/new CSS states. */

/* ===== style.css ===== */
/* ═══════════════════════════════════════════════════════
   LAGENCO — Soft & Playful Design System (v4)
   Gebaseerd op Concept 3: pastelgroen, perzik, geel, lavendel
   Speels maar elegant — ronde vormen, friendly typography
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Achtergronden — zachte crème */
  --bg:           #FFF8F0;
  --bg-2:         #FFEDD8;
  --bg-3:         #FFE0CC;
  --card:         #FFFFFF;

  /* Tekst — deep forest ink */
  --text:         #2D3A2E;
  --text-muted:   #6B7A6C;
  --text-faint:   #A5B5A7;

  /* Merk — Speels bosgroen */
  --green:        #6BBF7E;
  --green-mid:    #4A9D5E;
  --green-soft:   #8DD3A0;
  --green-light:  #D5EDDA;
  --green-glow:   rgba(107, 191, 126, 0.16);

  /* Accent — Warm perzik (vervangt koper) */
  --warm:         #FFB088;
  --warm-deep:    #FF8B5C;
  --warm-light:   #FFE0CC;
  --warm-glow:    rgba(255, 139, 92, 0.18);

  /* Extra speelse accenten — nieuw in v4 */
  --peach:        #FFB088;
  --peach-deep:   #FF8B5C;
  --peach-soft:   #FFE0CC;
  --yellow:       #FFD56B;
  --yellow-deep:  #D4A24E;
  --yellow-soft:  #FFF3CC;
  --lavender:     #C5B6E5;
  --lavender-deep:#9F8AC9;
  --lavender-soft:#E8DEF8;
  --blue:         #8FCBE5;
  --blue-deep:    #5BA8C9;
  --blue-soft:    #D8EEF6;

  /* Functioneel */
  --danger:       #E06055;
  --danger-light: #FFE0DC;
  --info:         #5BA8C9;
  --info-light:   #D8EEF6;
  --warn:         #D4A24E;
  --warn-light:   #FFF3CC;

  /* Randen — zacht en speels */
  --border:       #FFE0CC;
  --border-2:     #FFD0B0;
  --border-soft:  #FFF0E0;

  /* Schaduwen — zachter, lichter */
  --shadow-xs:    0 2px 4px rgba(74, 122, 78, 0.04);
  --shadow-sm:    0 4px 12px rgba(74, 122, 78, 0.06);
  --shadow-md:    0 12px 32px rgba(74, 122, 78, 0.10);
  --shadow-lg:    0 24px 56px rgba(74, 122, 78, 0.14);
  --shadow-green: 0 12px 32px rgba(107, 191, 126, 0.25);
  --shadow-warm:  0 12px 32px rgba(255, 139, 92, 0.25);

  /* Radii — meer rond */
  --radius-xs:    0.625rem;
  --radius-sm:    0.875rem;
  --radius:       1.25rem;
  --radius-lg:    1.75rem;
  --radius-xl:    2.25rem;
  --radius-2xl:   3rem;

  /* Transities — verfijnd met custom easing */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition:       0.4s var(--ease-out);
  --transition-fast:  0.22s var(--ease-out);
  --transition-slow:  0.6s var(--ease-out);

  /* Layout */
  --nav-h:        72px;
  --max-w:        1200px;

  /* Fonts — speels met Poppins/Nunito/Caveat, Sora/Fraunces/Inter als fallback */
  --font-display: 'Poppins', 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hand:    'Caveat', cursive;
}

/* ─────────────────────────────────────────────
   RESET & BASIS
   ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
  margin: 0;
  padding: 0;
  line-height: 1.65;
  transition: background var(--transition), color var(--transition);
  /* Subtiele speelse gradient blobs achtergrond */
  background-image:
    radial-gradient(ellipse 60% 50% at 10% 0%, rgba(255, 176, 136, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 10%, rgba(107, 191, 126, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 50% 100%, rgba(255, 213, 107, 0.12) 0%, transparent 65%);
  background-attachment: fixed;
  position: relative;
}

/* Subtiele ruis textuur overlay — organische premium grain */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

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

/* Toegankelijkheid — focus ring */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
  box-shadow: 0 0 0 5px var(--green-glow);
}

/* Versterk focus op form-elementen waar outline:none is gebruikt —
   zorgt dat keyboard-gebruikers altijd een zichtbare focus-ring zien. */
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--green-glow);
}
/* Voor inputs die zelf een border-color focus-state hebben — behoud die,
   maar voeg toch een subtiele ring toe voor keyboard-gebruikers. */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--green-glow);
}

/* Premium scrollbar (alleen desktop) */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--bg-2); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--green) 0%, var(--green-mid) 100%);
    border-radius: 100px;
    border: 3px solid var(--bg-2);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--green-mid) 0%, var(--green) 100%);
  }
  * { scrollbar-color: var(--green-mid) var(--bg-2); scrollbar-width: thin; }
}

/* Skip-to-content link */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--green); color: #fff;
  padding: .875rem 1.5rem;
  z-index: 10000;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none;
  font-weight: 600;
  font-size: .875rem;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* Selectie styling */
::selection { background: var(--green); color: var(--bg); }
::-moz-selection { background: var(--green); color: var(--bg); }

/* ─────────────────────────────────────────────
   TYPOGRAFIE — Editorial systeem
   ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .display {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-optical-sizing: auto;
  line-height: 1.15;
  color: var(--text);
}

h1 { font-weight: 600; letter-spacing: -0.035em; }
h2 { font-weight: 600; letter-spacing: -0.030em; }
h3 { font-weight: 600; letter-spacing: -0.020em; }
h4, h5, h6 { font-weight: 600; letter-spacing: -0.015em; }

.hero-title, .display-serif {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.030em;
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 96, 'SOFT' 50;
}
.hero-title em, .display-serif em {
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* Moderne hero titel variant — Fraunces editorial stijl */
.hero-title-modern {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.040em;
  font-optical-sizing: auto;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  line-height: 1.02;
}
.hero-title-modern em {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

.text-balance { text-wrap: balance; }

/* UI labels — Sora voor technische helderheid */
.btn, .nav-icon-btn, .filter-pill, .sort-select, .tag,
.admin-tab, .feature-pill, .badge, .image-counter,
.eyebrow, .label-mono {
  font-family: 'Sora', -apple-system, sans-serif;
}

/* Eyebrow — klein caps label boven secties */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.eyebrow::before {
  content: '';
  width: 1.5rem;
  height: 1px;
  background: var(--green);
  display: inline-block;
}

/* ─────────────────────────────────────────────
   GLASS — Premium glassmorphism
   ───────────────────────────────────────────── */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* ─────────────────────────────────────────────
   NAVIGATIE — Premium glass navbar
   ───────────────────────────────────────────── */
.nav {
  height: var(--nav-h);
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 243, 0.78);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(232, 223, 205, 0.6);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 4px 24px rgba(26, 22, 18, 0.04);
  transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* Logo glow pulse op het blad icoon */
.nav a[href="index.html"] .fa-leaf,
.nav a[aria-label="Lagenco home"] .fa-leaf {
  animation: leafPulse 4s ease-in-out infinite;
}
@keyframes leafPulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 8px rgba(255,255,255,0.5)); transform: scale(1.08); }
}

/* Nav icon buttons — met badge */
.nav-icon-btn {
  position: relative;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.6);
  color: var(--text-muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color var(--transition-fast), border-color var(--transition-fast),
              background var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
}
.nav-icon-btn:hover {
  color: var(--green);
  border-color: rgba(15, 61, 46, 0.25);
  background: var(--green-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 61, 46, 0.16);
}

.nav-badge {
  position: absolute;
  top: -.3rem; right: -.3rem;
  background: var(--warm);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  min-width: 1.15rem; height: 1.15rem;
  border-radius: 100px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 .3rem;
  border: 2px solid var(--bg);
  font-family: 'Sora', sans-serif;
  letter-spacing: 0;
}

/* Premium nav links — animated gradient underline */
.nav-links-desktop a {
  position: relative;
  padding-bottom: .2rem;
  background-image: linear-gradient(90deg, var(--green), var(--green-mid));
  background-size: 0% 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size .4s var(--ease-out), color .25s ease;
}
.nav-links-desktop a:hover,
.nav-links-desktop a[style*="font-weight:700"] {
  background-size: 100% 2px;
  color: var(--text) !important;
}

/* ─────────────────────────────────────────────
   BUTTONS — Premium met depth & shine
   ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: none;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: .875rem;
  letter-spacing: -0.005em;
  border-radius: 100px;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast), opacity var(--transition-fast),
              border-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  will-change: transform;
  padding: .75rem 1.5rem;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }
.btn i { transition: transform var(--transition-fast); }
.btn:hover i { transform: translateX(2px) scale(1.08); }
.btn:hover .fa-arrow-right { transform: translateX(3px) scale(1.08); }

/* Premium shine effect */
.btn-primary::before, .btn-green::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 80%; height: 100%;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%);
  transition: left .8s var(--ease-out);
  pointer-events: none;
}
.btn-primary:hover::before, .btn-green:hover::before { left: 120%; }

/* Primary button — diep bosgroen */
.btn-primary {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color: var(--bg);
  box-shadow:
    0 4px 14px rgba(15, 61, 46, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.btn-primary:hover {
  box-shadow:
    0 10px 28px rgba(15, 61, 46, 0.40),
    0 0 0 1px rgba(74, 138, 110, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
  background: linear-gradient(135deg, var(--green-mid) 0%, var(--green) 100%);
}

/* Green button — dezelfde groene stijl (alias) */
.btn-green {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color: var(--bg);
  box-shadow:
    0 6px 20px rgba(15, 61, 46, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-green:hover {
  box-shadow:
    0 14px 36px rgba(15, 61, 46, 0.42),
    0 0 0 1px rgba(74, 138, 110, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, var(--green-mid) 0%, var(--green) 100%);
}

/* Ghost button — subtle met warmte */
.btn-ghost {
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.btn-ghost:hover {
  background: var(--bg);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-2);
}

/* Icon button — rond */
.btn-icon {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}

/* ─────────────────────────────────────────────
   CARDS — Premium met depth en subtiele gloed
   ───────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  box-shadow:
    0 1px 2px rgba(26,22,18,.03),
    0 8px 24px rgba(26,22,18,.05),
    inset 0 1px 0 rgba(255,255,255,.6);
  position: relative;
  transform-style: preserve-3d;
}
.card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    0 4px 12px rgba(26,22,18,.05),
    0 24px 56px rgba(26,22,18,.12),
    0 0 0 1px rgba(15,61,46,.18);
  border-color: rgba(15, 61, 46, 0.30);
}

/* Premium glow ring op product cards hover */
@media (prefers-reduced-motion: no-preference) {
  .product-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(15,61,46,.40), rgba(192,132,87,.30), rgba(15,61,46,.40));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--transition);
    pointer-events: none;
  }
  .product-card:hover::after { opacity: 1; }
}

/* ─────────────────────────────────────────────
   PRODUCT CARDS
   ───────────────────────────────────────────── */
.product-card { position: relative; height: 100%; display: flex; flex-direction: column; }
.product-card .card-img {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--bg-2) center / cover;
}
.product-card .card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .8s var(--ease-out);
}
.product-card:hover .card-img img { transform: scale(1.08); }

.product-card .badge {
  position: absolute; top: .75rem; left: .75rem;
  padding: .35rem .85rem;
  border-radius: 100px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: .3rem;
  z-index: 2;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.badge-new    { background: rgba(255,255,255,.92); color: var(--green); }
.badge-retour { background: rgba(221,232,242,.92); color: var(--info); }
.badge-used   { background: rgba(245,233,196,.92); color: var(--warn); }
.badge-sale   { background: var(--warm); color: #fff; }

.product-card .card-actions {
  position: absolute; top: .75rem; right: .75rem;
  display: flex; flex-direction: column; gap: .4rem;
  opacity: 0; transform: translateX(8px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 2;
}
.product-card:hover .card-actions { opacity: 1; transform: translateX(0); }
.card-actions .action-btn {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  transition: background var(--transition-fast), transform var(--transition-fast), color var(--transition-fast);
}
.card-actions .action-btn:hover { background: #fff; transform: scale(1.12); }
.card-actions .action-btn.active { background: var(--danger-light); color: var(--danger); }

/* Touch devices — altijd zichtbaar */
@media (hover: none) {
  .product-card .card-actions { opacity: 1; transform: none; }
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─────────────────────────────────────────────
   CAROUSEL
   ───────────────────────────────────────────── */
.carousel-container { position: relative; overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform .65s var(--ease-out);
  will-change: transform;
}
.carousel-item { flex: 0 0 calc(100% - 1.5rem); max-width: 340px; }
@media (min-width: 768px)  { .carousel-item { flex: 0 0 calc(50% - .75rem); } }
@media (min-width: 1024px) { .carousel-item { flex: 0 0 calc(33.333% - 1rem); } }

/* ─────────────────────────────────────────────
   SCROLL REVEAL
   ───────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.985);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; transition:none; } }

.reveal.stagger-1 { transition-delay: .06s; }
.reveal.stagger-2 { transition-delay: .14s; }
.reveal.stagger-3 { transition-delay: .22s; }
.reveal.stagger-4 { transition-delay: .30s; }
.reveal.stagger-5 { transition-delay: .38s; }
.reveal.stagger-6 { transition-delay: .46s; }

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero-gradient {
  position: relative;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(192,132,87,.14) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 85% 0%, rgba(15,61,46,.18) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(221,233,223,.50) 0%, transparent 65%),
    conic-gradient(from 200deg at 50% 30%, rgba(221,233,223,.30), rgba(192,132,87,.10), rgba(15,61,46,.20), rgba(221,233,223,.30)),
    var(--bg);
  isolation: isolate;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.45) 0%, transparent 25%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.25) 0%, transparent 30%);
  pointer-events: none;
  opacity: .85;
}
@media (prefers-reduced-motion: reduce) { .hero-gradient::before { animation: none; } }

/* Floating cards animation */
@keyframes floatA { 0%,100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-10px); } }
@keyframes floatB { 0%,100% { transform: rotate(5deg) translateY(0); } 50% { transform: rotate(5deg) translateY(-12px); } }
.float-a { animation: floatA 5s ease-in-out infinite; }
.float-b { animation: floatB 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .float-a, .float-b { animation: none; } }

/* ─────────────────────────────────────────────
   MODALS
   ───────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(26, 22, 18, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  overscroll-behavior: contain;
}
.modal-backdrop.open { opacity: 1; pointer-events: all; }
.modal-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 120px rgba(26, 22, 18, 0.30);
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  transform: translateY(24px) scale(.96);
  transition: transform .35s var(--ease-out), opacity .3s ease;
  opacity: 0;
  position: relative;
  margin: auto;
}
.modal-backdrop.open .modal-panel { transform: translateY(0) scale(1); opacity: 1; }

.modal-panel { scroll-behavior: smooth; }
.modal-panel::-webkit-scrollbar { width: 6px; }
.modal-panel::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 6px; }

.modal-close-btn {
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--text-muted);
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.modal-close-btn:hover {
  background: var(--bg-3);
  color: var(--text);
  transform: rotate(90deg);
}

/* ─────────────────────────────────────────────
   LOGIN MODAL
   ───────────────────────────────────────────── */
.login-panel {
  max-width: 960px;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .login-panel { grid-template-columns: 1.1fr .9fr; } }

.login-left {
  background:
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(192,132,87,.18) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(255,255,255,.06) 0%, transparent 60%),
    linear-gradient(135deg, var(--green) 0%, #0a2a20 100%);
  padding: 2.5rem;
  color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: 380px;
}
.login-left::before {
  content: '';
  position: absolute;
  width: 320px; height: 320px;
  background: rgba(255,255,255,.06);
  border-radius: 50%;
  top: -80px; right: -80px;
  pointer-events: none;
}
.login-left::after {
  content: '';
  position: absolute;
  width: 220px; height: 220px;
  background: rgba(255,255,255,.04);
  border-radius: 50%;
  bottom: -60px; left: -60px;
  pointer-events: none;
}
.login-left h2, .login-left h3 {
  font-family: 'Fraunces', Georgia, serif;
  letter-spacing: -.025em;
}

.login-right { padding: 2.5rem; background: var(--card); position: relative; }

.login-input {
  width: 100%;
  padding: .875rem 1.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: .875rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.login-input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-glow), 0 0 0 1px var(--green);
  background: var(--card);
}
.login-input:hover { border-color: var(--border-2); }
.login-input.input-error { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(184,69,58,.10); }
.field-error { color: var(--danger); font-size: .75rem; margin-top: .35rem; min-height: 1rem; }

/* ─────────────────────────────────────────────
   PRODUCT DETAIL MODAL
   ───────────────────────────────────────────── */
.product-modal { max-width: 980px; }
.product-modal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 1.5rem;
}
@media (min-width: 768px) { .product-modal-grid { grid-template-columns: 1.4fr .6fr; } }

.zoom-wrap { cursor: zoom-in; overflow: hidden; }
.zoom-wrap img { transition: transform .3s ease; }
.zoom-wrap img.zoomed { transform: scale(1.8); }

.pm-thumb {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: var(--bg-2);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.pm-thumb img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; }
.pm-thumb:hover { transform: translateY(-2px); border-color: var(--green-soft); }
.pm-thumb.active { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-light); }

/* ─────────────────────────────────────────────
   ADMIN PANEL
   ───────────────────────────────────────────── */
.admin-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-top: 2rem;
  box-shadow: var(--shadow-md);
}
.admin-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .75rem;
}
.admin-tab {
  padding: .5rem 1.125rem;
  border-radius: var(--radius-sm);
  font-size: .825rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: background var(--transition-fast), color var(--transition-fast);
  font-family: 'Sora', sans-serif;
}
.admin-tab:hover { color: var(--text); background: var(--bg-2); }
.admin-tab.active { background: var(--green-light); color: var(--green); }

/* Image upload previews */
.img-preview {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid var(--border);
  background: var(--bg-2);
  aspect-ratio: 1;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.img-preview:hover { border-color: var(--green-soft); }
.img-preview img { width: 100%; height: 100%; object-fit: cover; }
.img-preview.drag-over { border-color: var(--green); transform: scale(1.04); }
.img-preview.dragging { opacity: .35; }
.img-main-badge {
  position: absolute;
  top: 0; left: 0;
  background: var(--green);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  padding: .2rem .5rem;
  border-radius: 0 0 var(--radius-sm) 0;
  letter-spacing: .08em;
  font-family: 'Sora', sans-serif;
}
.img-actions {
  position: absolute;
  inset: 0;
  background: rgba(26, 22, 18, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  opacity: 0;
  transition: opacity var(--transition-fast);
  flex-wrap: wrap;
  padding: .5rem;
}
.img-preview:hover .img-actions { opacity: 1; }
.img-actions button {
  width: 2rem; height: 2rem;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.img-actions button:hover:not(:disabled) { background: #fff; transform: scale(1.12); }
.img-actions button:disabled { opacity: .35; cursor: not-allowed; }

.image-counter {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .875rem;
  background: var(--bg-2);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  font-family: 'Sora', sans-serif;
}

/* ─────────────────────────────────────────────
   TOAST NOTIFICATIONS
   ───────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse; /* nieuwe meldingen stapelen BOVEN de vorige */
  gap: .75rem;
  pointer-events: none;
  max-width: calc(100vw - 3rem);
}
.toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .875rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: .875rem;
  font-weight: 500;
  min-width: 240px;
  max-width: 360px;
  pointer-events: all;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .4s var(--ease-out), opacity .35s ease;
  position: relative;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.toast.show { transform: translateX(0); opacity: 1; }
.toast.hide { transform: translateX(120%); opacity: 0; }
.toast-icon {
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: .75rem;
}
.toast-success .toast-icon { background: var(--green-light); color: var(--green); }
.toast-error   .toast-icon { background: var(--danger-light); color: var(--danger); }
.toast-info    .toast-icon { background: var(--info-light); color: var(--info); }
.toast-warn    .toast-icon { background: var(--warn-light); color: var(--warn); }
.toast-close {
  background: none; border: none; cursor: pointer; color: var(--text-faint);
  margin-left: auto; padding: 0; font-size: .75rem;
  transition: color var(--transition-fast);
}
.toast-close:hover { color: var(--text); }
.toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: var(--green);
  border-radius: 0 0 var(--radius) var(--radius);
  animation: toastProgress 3.2s linear forwards;
}
.toast-success .toast-progress { background: var(--green); }
.toast-error .toast-progress { background: var(--danger); }
.toast-info .toast-progress { background: var(--info); }
.toast-warn .toast-progress { background: var(--warn); }
@keyframes toastProgress { from { width: 100%; } to { width: 0%; } }
@media (max-width: 480px) {
  /* Toast-container boven de floating-reviews knop (bottom-left) en backToTop houden */
  #toast-container { left: 1rem; right: 1rem; bottom: 5.5rem; }
  .toast { min-width: auto; max-width: none; }
}
/* Wanneer compareBar zichtbaar is, moet toast-container nog hoger staan (boven compareBar) */
body:has(#compareBar[style*="display: flex"]) #toast-container { bottom: 7rem; }
@media (max-width: 480px) {
  body:has(#compareBar[style*="display: flex"]) #toast-container { bottom: 11rem; }
}

/* ─────────────────────────────────────────────
   SEARCH BAR
   ───────────────────────────────────────────── */
.search-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: .625rem 1.25rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.search-bar:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 4px var(--green-glow), 0 0 0 1px var(--green);
}
.search-bar input {
  border: none; outline: none; background: transparent;
  font-family: inherit; font-size: .875rem;
  color: var(--text);
  flex: 1; min-width: 0;
}
.search-bar input::placeholder { color: var(--text-faint); }

/* ─────────────────────────────────────────────
   FILTERS
   ───────────────────────────────────────────── */
.filter-pill {
  padding: .45rem .95rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text-muted);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
  font-family: 'Sora', sans-serif;
  white-space: nowrap;
}
.filter-pill:hover { transform: translateY(-1px); border-color: var(--green-soft); }
.filter-pill:hover, .filter-pill.active {
  border-color: var(--green);
  background: var(--green-light);
  color: var(--green);
}
.filter-pill.active {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color: var(--bg);
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(15,61,46,.30);
}

/* ─────────────────────────────────────────────
   SHARE BUTTONS
   ───────────────────────────────────────────── */
.share-btn {
  display: flex; align-items: center; gap: .5rem;
  padding: .55rem 1.125rem;
  border-radius: var(--radius-sm);
  font-size: .8rem;
  font-weight: 600;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast), transform var(--transition-fast),
              box-shadow var(--transition-fast);
  text-decoration: none;
}
.share-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.share-wa:hover  { border-color: #25d366; color: #128c7e; background: #f0fdf4; }
.share-fb:hover  { border-color: #1877f2; color: #1877f2; background: #eff6ff; }
.share-em:hover  { border-color: var(--green); color: var(--green); background: var(--green-light); }

/* ─────────────────────────────────────────────
   WISHLIST & MICRO ANIMATIONS
   ───────────────────────────────────────────── */
@keyframes heartPop { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 70% { transform: scale(.9); } 100% { transform: scale(1); } }
.heart-pop { animation: heartPop .35s var(--ease-spring); }

/* Image drag reorder */
.drag-over { border: 2px dashed var(--green) !important; background: var(--green-light) !important; }
.dragging { opacity: .4; }

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .login-left { min-height: 200px; padding: 1.75rem; }
  .login-right { padding: 1.75rem; }
  .modal-backdrop { padding: .5rem; }
  .modal-panel { border-radius: var(--radius); max-height: calc(100vh - 1rem); }
  .product-modal-grid { padding: 1rem; }
}

/* ─────────────────────────────────────────────
   PAGE TRANSITIONS
   ───────────────────────────────────────────── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageIn .7s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .page-enter { animation: none; } }

/* Micro animations */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInDown { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:translateY(0); } }
@keyframes scaleIn    { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
@keyframes pulse      { 0%,100% { opacity:1; } 50% { opacity:.5; } }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.fade-in-up   { animation: fadeInUp .7s var(--ease-out) both; }
.fade-in-down { animation: fadeInDown .55s var(--ease-out) both; }
.scale-in     { animation: scaleIn .45s var(--ease-out) both; }
.pulse-dot    { animation: pulse 2s infinite; }

.stagger-1 { animation-delay: .06s; }
.stagger-2 { animation-delay: .12s; }
.stagger-3 { animation-delay: .18s; }
.stagger-4 { animation-delay: .24s; }
.stagger-5 { animation-delay: .30s; }
.stagger-6 { animation-delay: .36s; }

/* Sort select */
.sort-select {
  padding: .55rem 1.125rem;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-family: 'Sora', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition-fast);
}
.sort-select:focus { border-color: var(--green); }

/* Empty state */
.empty-state { padding: 4rem 2rem; text-align: center; color: var(--text-muted); }
.empty-state i { font-size: 3rem; opacity: .25; margin-bottom: 1rem; display: block; }

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--border-2);
  border-radius: 2px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  box-shadow: 0 0 0 4px var(--green-light);
  transition: transform var(--transition-fast);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  border: none;
  box-shadow: 0 0 0 4px var(--green-light);
}

/* Sidebar filters (legacy) */
.filter-sidebar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: calc(var(--nav-h) + 1.5rem);
}

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .65rem;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: 'Sora', sans-serif;
}

/* Progress bar (reading progress) */
.progress-bar {
  height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-mid) 60%, var(--warm));
  transition: width .25s var(--ease-out);
  border-radius: 0 2px 2px 0;
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  box-shadow: 0 0 14px rgba(74,138,110,.6), 0 0 4px rgba(192,132,87,.4);
}

/* Qty badge (legacy) */
.qty-badge {
  position: absolute; top: -.4rem; right: -.4rem;
  background: var(--warm); color: white;
  font-size: .6rem; font-weight: 800;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif;
}

/* Image upload drop zone */
.drop-zone {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  background: var(--bg-2);
}
.drop-zone:hover, .drop-zone.dragover {
  border-color: var(--green);
  background: var(--green-light);
  transform: translateY(-1px);
}
.drop-zone i { transition: transform var(--transition-fast); }
.drop-zone:hover i { transform: translateY(-3px); }

/* Edit product form (legacy) */
.edit-overlay {
  position: absolute; inset: 0;
  background: rgba(26,22,18,.40);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.product-card:hover .edit-overlay.admin-mode { opacity: 1; }

/* ═══════════════════════════════════════════════════════
   PREMIUM COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* Back to top button */
#backToTop {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 90;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(26,22,18,.12), inset 0 1px 0 rgba(255,255,255,.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(.8);
  transition: opacity .3s, transform .3s, visibility .3s,
              background var(--transition-fast), color var(--transition-fast),
              box-shadow var(--transition-fast);
}
#backToTop::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,138,110,.40) 0%, transparent 70%);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: -1;
  animation: backToTopPulse 2.4s ease-in-out infinite;
}
@keyframes backToTopPulse {
  0%, 100% { transform: scale(.9); opacity: 0; }
  50%      { transform: scale(1.1); opacity: .8; }
}
@media (prefers-reduced-motion: reduce) { #backToTop::before { animation: none; } }
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
#backToTop:hover {
  background: var(--green);
  color: var(--bg);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 36px rgba(15,61,46,.42);
}
#backToTop:hover::before { opacity: 1; }
@media (max-width: 640px) { #backToTop { bottom: 5rem; } }

/* Breadcrumbs */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .8rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  font-family: 'Sora', sans-serif;
}
.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.breadcrumbs a:hover { color: var(--green); }
.breadcrumbs span[aria-current] { color: var(--text); font-weight: 600; }
.breadcrumbs .sep { color: var(--text-faint); }

/* Interactive Timeline (Werkwijze) — Concept 3 stijl: licht met gekleurde cirkels */
.timeline-section {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  overflow: visible;
  position: relative;
  color: var(--text);
}

.timeline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  position: relative;
  z-index: 1;
}
@media (min-width: 768px) {
  .timeline-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
  }
  /* Orange connecting line between steps */
  .timeline-grid::before {
    content: '';
    position: absolute;
    top: 3.5rem;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(90deg, var(--green), var(--peach), var(--yellow), var(--lavender), var(--blue));
    border-radius: 100px;
    z-index: 0;
    opacity: 0.5;
  }
}

.timeline-node {
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
  padding: 0;
  color: var(--text);
  font-family: inherit;
  position: relative;
  z-index: 1;
  transition: transform var(--transition-fast);
}
.timeline-node:hover { transform: translateY(-4px); }
.timeline-node:hover .timeline-num { background: var(--green-mid); border-color: var(--green-mid); }
.timeline-node.active .timeline-num {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-soft) 100%);
  border-color: var(--green-soft);
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(74,138,110,.25), 0 8px 24px rgba(15,61,46,.40);
}

.timeline-num {
  width: 3rem; height: 3rem;
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 1.1rem;
  font-family: 'Sora', sans-serif;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.timeline-info { display: flex; flex-direction: column; gap: .2rem; }
.timeline-title { font-weight: 700; font-size: .9rem; color: #fff; margin: 0; font-family: 'Sora', sans-serif; }
.timeline-short { color: rgba(255,255,255,.55); font-size: .78rem; line-height: 1.4; margin: 0; }

/* Timeline modal */
.timeline-modal-panel {
  max-width: 540px;
  text-align: left;
  padding: 0;
  overflow: hidden;
}
.timeline-modal-head {
  padding: 2rem 2rem 1.5rem;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color: #fff;
  position: relative;
  display: flex; align-items: center; gap: 1rem;
}
.timeline-modal-icon {
  width: 3.5rem; height: 3.5rem;
  background: rgba(255,255,255,.18);
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.timeline-modal-head h3 { font-size: 1.4rem; font-weight: 700; margin: 0; font-family: 'Fraunces', serif; }
.timeline-modal-counter { font-size: .75rem; opacity: .8; margin-top: .15rem; font-family: 'Sora', sans-serif; }
.timeline-modal-body { padding: 1.5rem 2rem 2rem; }
.timeline-modal-body p {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: .95rem;
  margin: 0 0 1.5rem;
}
.timeline-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.timeline-modal-footer button {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  font-size: .8rem;
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
}
.timeline-modal-footer button:hover:not(:disabled) {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  transform: translateY(-1px);
}
.timeline-modal-footer button:disabled { opacity: .35; cursor: not-allowed; }

/* Compare bar */
#compareBar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 80;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 32px rgba(26,22,18,.10);
  padding: 1rem 1.5rem;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.compare-list {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}
.compare-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem .75rem .3rem .3rem;
  background: var(--bg-2);
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  font-family: 'Sora', sans-serif;
}
.compare-item img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.compare-item button {
  background: none; border: none; cursor: pointer; color: var(--text-muted);
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.compare-item button:hover { background: rgba(184,69,58,.15); color: var(--danger); }

/* Recently viewed strip */
.recently-viewed-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
}
.recently-viewed-strip::-webkit-scrollbar { height: 6px; }

/* Legal page */
.legal-page {
  max-width: 800px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}
.legal-page h1 {
  font-size: clamp(1.875rem, 4vw, 2.875rem);
  font-weight: 600;
  letter-spacing: -.030em;
  color: var(--text);
  margin-bottom: .5rem;
  font-family: 'Fraunces', serif;
}
.legal-page .legal-meta {
  color: var(--text-muted);
  font-size: .875rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  font-family: 'Sora', sans-serif;
}
.legal-page h2 {
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text);
  margin: 2rem 0 .75rem;
  font-family: 'Fraunces', serif;
  letter-spacing: -.020em;
}
.legal-page h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.5rem 0 .5rem;
  font-family: 'Sora', sans-serif;
}
.legal-page p, .legal-page li {
  color: var(--text-muted);
  line-height: 1.75;
  font-size: .95rem;
  margin-bottom: .75rem;
}
.legal-page ul, .legal-page ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.legal-page a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--green-mid); }
.legal-page .legal-toc {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 2rem;
}
.legal-page .legal-toc h2 { margin-top: 0; }
.legal-page .legal-toc ul { list-style: none; padding: 0; margin: 0; }
.legal-page .legal-toc li { margin-bottom: .5rem; }
.legal-page .legal-toc a { text-decoration: none; }
.legal-page .legal-toc a:hover { text-decoration: underline; }

/* 404 page */
.error-page, .maintenance-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
}
.error-page .error-code {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: clamp(5rem, 18vw, 10rem);
  letter-spacing: -.045em;
  line-height: 1;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 50%, var(--warm) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
.error-page h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
  letter-spacing: -.025em;
}
.error-page p {
  color: var(--text-muted);
  max-width: 28rem;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.error-actions {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Contact form */
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) { .contact-form-grid { grid-template-columns: 1fr 1fr; } }
.contact-form-grid .full { grid-column: 1 / -1; }
.contact-form label {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .5rem;
  font-family: 'Sora', sans-serif;
}
.contact-form label .req { color: var(--danger); }

/* Footer */
footer .footer-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: .85rem;
  transition: color var(--transition-fast), padding-left var(--transition-fast);
  display: inline-block;
  background-image: linear-gradient(90deg, var(--green), var(--green-mid));
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: left bottom;
}
footer .footer-link:hover {
  color: var(--green);
  padding-left: .25rem;
  background-size: 100% 1.5px;
}

/* Mobile menu */
.mobile-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .5rem .75rem;
  cursor: pointer;
  color: var(--text);
}
@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; align-items: center; gap: .4rem; font-size: .8rem; }
  .nav .nav-links-desktop { display: none; }
  .nav .nav-links-mobile-open {
    display: flex !important;
    position: absolute;
    top: var(--nav-h);
    left: 0; right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: 1rem 1.5rem;
    gap: .5rem;
    box-shadow: var(--shadow-md);
  }
  .nav .nav-links-mobile-open a { padding: .5rem 0; }
}

/* Print */
@media print {
  .nav, footer, #backToTop, #toast-container, #readingProgress, .card-actions, .modal-backdrop { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none !important; }
}

/* Section divider */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 3rem 0;
}

/* Featured badge pill */
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  background: linear-gradient(135deg, rgba(221,233,223,.95), rgba(221,233,223,.85));
  color: var(--green);
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-family: 'Sora', sans-serif;
  border: 1px solid rgba(15, 61, 46, 0.10);
  box-shadow: 0 2px 8px rgba(15, 61, 46, 0.08), inset 0 1px 0 rgba(255,255,255,.7);
}

/* Premium checkbox */
input[type="checkbox"].premium-check,
.contact-form input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  border: 1.5px solid var(--border-2);
  border-radius: .375rem;
  background: var(--card);
  cursor: pointer;
  position: relative;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
  flex-shrink: 0;
}
input[type="checkbox"].premium-check:hover,
.contact-form input[type="checkbox"]:hover { border-color: var(--green-soft); transform: scale(1.05); }
input[type="checkbox"].premium-check:checked,
.contact-form input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  border-color: var(--green);
}
input[type="checkbox"].premium-check:checked::after,
.contact-form input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%; top: 45%;
  width: .3rem; height: .55rem;
  border: 2px solid #fff;
  border-top: 0; border-left: 0;
  transform: translate(-50%,-50%) rotate(45deg) scale(0);
  animation: checkPop .25s var(--ease-spring) forwards;
}
@keyframes checkPop {
  0%   { transform: translate(-50%,-50%) rotate(45deg) scale(0); }
  60%  { transform: translate(-50%,-50%) rotate(45deg) scale(1.2); }
  100% { transform: translate(-50%,-50%) rotate(45deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"].premium-check:checked::after,
  .contact-form input[type="checkbox"]:checked::after {
    animation: none;
    transform: translate(-50%,-50%) rotate(45deg) scale(1);
  }
}

/* Statistic counter (animated) */
.stat-number {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  font-variation-settings: 'opsz' 96;
  background: linear-gradient(135deg, var(--text) 0%, var(--green) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Premium badge refinement */
.product-card .badge {
  font-family: 'Sora', sans-serif;
  box-shadow: 0 4px 12px rgba(26,22,18,.10), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Premium social icons */
footer a[aria-label],
.contact-info-icon {
  transition: transform var(--transition-fast), background var(--transition-fast),
              color var(--transition-fast), box-shadow var(--transition-fast);
}
footer a[aria-label]:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 20px rgba(15, 61, 46, 0.30);
}

/* Compare modal grid */
.compare-grid {
  display: grid;
  grid-template-columns: 140px repeat(3, 1fr);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}
.compare-grid > div { min-width: 0; }
.compare-grid .compare-row-label {
  font-weight: 600;
  font-size: .875rem;
  padding: .75rem 0;
  border-top: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  font-family: 'Sora', sans-serif;
}
.compare-grid .compare-cell {
  padding: .75rem 0;
  border-top: 1px solid var(--border);
  font-size: .85rem;
  color: var(--text-muted);
  word-break: break-word;
}
.compare-grid .compare-head {
  text-align: center;
  padding-bottom: .5rem;
}
.compare-grid .compare-head .compare-head-img {
  aspect-ratio: 4 / 3;
  border-radius: .75rem;
  overflow: hidden;
  margin-bottom: .75rem;
  background: var(--bg-2);
}
.compare-grid .compare-head .compare-head-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.compare-grid .compare-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.compare-grid .compare-actions .btn { font-size: .8rem; padding: .5rem; }
@media (max-width: 767px) {
  .compare-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .compare-grid .compare-row-label,
  .compare-grid .compare-cell { border-top: none; padding: 0; }
  .compare-grid .compare-head {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    background: var(--bg-2);
  }
  .compare-grid .compare-row-label::before {
    content: attr(data-label) " — ";
    color: var(--text-muted);
    font-weight: 500;
    margin-right: .25rem;
  }
}

/* Empty state CTA */
.empty-state-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3.5rem 1.5rem;
  text-align: center;
}
.empty-state-cta .leaf-icon {
  width: 4.5rem; height: 4.5rem;
  border-radius: 50%;
  background: var(--green-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--green);
  font-size: 1.75rem;
  box-shadow: 0 8px 24px rgba(15,61,46,.18);
  animation: leafBreathe 3.5s ease-in-out infinite;
}
@keyframes leafBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .empty-state-cta .leaf-icon { animation: none; } }
.empty-state-cta h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  letter-spacing: -.020em;
}
.empty-state-cta p {
  color: var(--text-muted);
  font-size: .9rem;
  max-width: 28rem;
  margin: 0;
  line-height: 1.6;
}

/* Image processing indicator */
.image-processing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem .875rem;
  margin-top: .5rem;
  background: var(--green-light);
  color: var(--green);
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 600;
  font-family: 'Sora', sans-serif;
}
.image-processing i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .image-processing i { animation: none; } }

/* ═══════════════════════════════════════════════════════
   REVIEWS & TRUST PAGE
   ═══════════════════════════════════════════════════════ */

/* Stars */
.stars {
  display: inline-flex;
  align-items: center;
  gap: .125rem;
  color: var(--warm);
  font-size: .875rem;
  line-height: 1;
}
.stars i { transition: none; }
.stars i.empty { color: var(--border-2); opacity: .6; }
.stars-lg { font-size: 1.125rem; gap: .1875rem; }
.stars-lg i { font-size: 1.125rem; }

/* Reviews section base */
.reviews-section { padding: 4rem 1.5rem; background: var(--bg); }
.reviews-section-alt { background: var(--bg-2); }
.reviews-container { max-width: 1200px; margin: 0 auto; }
.reviews-section-head { text-align: center; margin-bottom: 2.5rem; }
.reviews-section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.025em;
  margin: 0 0 .5rem;
  line-height: 1.2;
}
.reviews-section-title i { color: var(--green); margin-right: .4rem; }
.reviews-section-sub {
  font-size: .95rem;
  color: var(--text-muted);
  max-width: 36rem;
  margin: 0 auto;
  line-height: 1.6;
}

/* Reviews hero */
.reviews-hero {
  background:
    radial-gradient(ellipse at top, rgba(15,61,46,.18), transparent 60%),
    linear-gradient(180deg, var(--green-light) 0%, var(--bg) 100%);
  padding: 3.5rem 1.5rem 4rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.reviews-hero-inner { max-width: 760px; margin: 0 auto; }
.reviews-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .4rem 1rem;
  font-family: 'Sora', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 1.25rem;
}
.reviews-eyebrow i { color: var(--warm); }
.reviews-hero-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--text);
  margin: 0 0 1rem;
  line-height: 1.05;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.reviews-hero-sub {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 2.5rem;
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* Rating display */
.rating-display {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}
.rating-display-score {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  font-family: 'Fraunces', serif;
}
.rating-display-number {
  font-size: 3.5rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
  letter-spacing: -.040em;
  font-variation-settings: 'opsz' 144;
}
.rating-display-divider {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-muted);
}
.rating-display-meta { display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.rating-display-meta .stars-lg { font-size: 1.5rem; }
.rating-display-meta .stars-lg i { font-size: 1.5rem; }
.rating-display-count {
  font-size: .9rem;
  color: var(--text-muted);
  margin: 0;
  font-family: 'Sora', sans-serif;
}
.rating-display-count strong { color: var(--text); }

.reviews-hero-subline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text-muted);
  margin: 0 0 2rem;
  font-family: 'Sora', sans-serif;
}
.reviews-hero-subline i { color: var(--green); font-size: .9rem; }

/* Trust badges */
.trust-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .5rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  font-family: 'Sora', sans-serif;
}
.trust-badge i { color: var(--green); font-size: .875rem; }

/* Live trust indicators */
.live-trust-section { padding-top: 3rem; padding-bottom: 3rem; }
.live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.live-indicator {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.live-indicator:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(15,61,46,.20);
}
.live-indicator-icon {
  position: relative;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--green-light);
  border-radius: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.live-indicator-icon > i { color: var(--green); font-size: 1.125rem; }
.live-indicator-body { min-width: 0; flex: 1; }
.live-indicator-label {
  font-size: .75rem;
  color: var(--text-muted);
  margin: 0 0 .125rem;
  line-height: 1.3;
  font-family: 'Sora', sans-serif;
}
.live-indicator-value {
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.025em;
  font-variation-settings: 'opsz' 96;
}
.live-indicator-product {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
  font-family: 'Sora', sans-serif;
}

/* Live pulse */
.live-pulse {
  position: absolute;
  top: -.125rem;
  right: -.125rem;
  width: .625rem;
  height: .625rem;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--card);
  animation: livePulse 2s ease-in-out infinite;
}
.live-pulse-warm { background: var(--warm); }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15,61,46,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(15,61,46,0); }
}
.live-pulse-warm { animation-name: livePulseWarm; }
@keyframes livePulseWarm {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,132,87,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(192,132,87,0); }
}
@media (prefers-reduced-motion: reduce) {
  .live-pulse, .live-pulse-warm { animation: none; }
}

/* Reviews grid + filters */
.review-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.review-filter {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 100px;
  padding: .55rem 1.125rem;
  font-family: 'Sora', sans-serif;
  font-size: .825rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.review-filter:hover { border-color: var(--green-soft); color: var(--text); }
.review-filter.active {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  border-color: var(--green);
  color: #fff;
  box-shadow: 0 4px 14px rgba(15,61,46,.30);
}
.review-filter i { font-size: .75rem; }
.review-filter.active i { color: #fff; }

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1024px) { .reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .reviews-grid { grid-template-columns: 1fr; } }

.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  position: relative;
}
.review-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(15,61,46,.25);
}
.review-card-head { display: flex; align-items: center; gap: .875rem; }
.review-card-avatar {
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.review-card-name-block { flex: 1; min-width: 0; }
.review-card-name {
  font-family: 'Sora', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.review-card-verified {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: var(--green-light);
  color: var(--green);
  border-radius: 100px;
  padding: .125rem .4rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Sora', sans-serif;
}
.review-card-verified i { font-size: .55rem; }
.review-card-date {
  font-size: .75rem;
  color: var(--text-faint);
  margin: 0;
  font-family: 'Sora', sans-serif;
}
.review-card-rating { display: flex; align-items: center; gap: .5rem; }
.review-card-text {
  font-size: .9rem;
  color: var(--text);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}
.review-card-product {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  color: var(--text-muted);
  background: var(--bg-2);
  border-radius: .625rem;
  padding: .4rem .625rem;
  margin-top: auto;
  font-weight: 500;
  font-family: 'Sora', sans-serif;
}
.review-card-product i { color: var(--green); font-size: .7rem; }
.review-card-product strong { color: var(--text); font-weight: 600; }
.review-card-photo {
  border-radius: .625rem;
  overflow: hidden;
  background: var(--bg-2);
  aspect-ratio: 16 / 9;
}
.review-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Load more */
.reviews-load-more-wrap {
  text-align: center;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.reviews-load-more { padding: .875rem 2rem; font-size: .95rem; }
.reviews-load-more.loading i { animation: spin 1s linear infinite; }
.reviews-count-text {
  font-size: .825rem;
  color: var(--text-muted);
  margin: 0;
  font-family: 'Sora', sans-serif;
}
.reviews-count-text strong { color: var(--text); }

/* Trust cards grid */
.trust-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
}
.trust-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.trust-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trust-card-icon {
  width: 3rem; height: 3rem;
  background: var(--green-light);
  color: var(--green);
  border-radius: .875rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
}
.trust-card-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -.015em;
}
.trust-card-text {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
}

/* UGC grid */
.ugc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .ugc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ugc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ugc-grid { grid-template-columns: 1fr; } }

.ugc-item {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.ugc-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ugc-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg-2);
  overflow: hidden;
}
.ugc-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .5s var(--ease-out);
}
.ugc-item:hover .ugc-photo img { transform: scale(1.08); }
.ugc-verified {
  position: absolute;
  top: .5rem;
  left: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  background: rgba(15, 61, 46, 0.92);
  color: #fff;
  border-radius: 100px;
  padding: .25rem .55rem;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Sora', sans-serif;
  backdrop-filter: blur(4px);
}
.ugc-verified i { font-size: .55rem; }
.ugc-item figcaption {
  padding: .65rem .75rem;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.4;
  font-weight: 500;
  font-family: 'Sora', sans-serif;
}

/* Testimonials */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.testimonial-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.testimonial-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial-quote {
  color: var(--green-light);
  font-size: 1.75rem;
  line-height: 1;
  margin: 0;
}
.testimonial-quote i { color: var(--green-soft); opacity: .4; font-size: 1.75rem; }
.testimonial-text {
  font-size: .95rem;
  color: var(--text);
  line-height: 1.7;
  margin: 0;
  flex: 1;
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-weight: 400;
}
.testimonial-foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}
.testimonial-avatar {
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
}
.testimonial-name {
  font-family: 'Sora', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}
.testimonial-meta {
  font-size: .75rem;
  color: var(--text-muted);
  margin: .125rem 0 0;
  font-family: 'Sora', sans-serif;
}

/* Verification */
.verification-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) { .verification-layout { grid-template-columns: 1fr; } }

.verification-steps { display: flex; flex-direction: column; gap: 1rem; }
.verification-step {
  display: grid;
  grid-template-columns: 2.5rem 1fr 1.5rem;
  gap: 1rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.verification-step:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow-md);
  border-color: rgba(15,61,46,.25);
}
.verification-step-num {
  width: 2.5rem; height: 2.5rem;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-mid) 100%);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(15,61,46,.25);
}
.verification-step-body { min-width: 0; }
.verification-step-title {
  font-family: 'Sora', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .3rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: -.010em;
}
.verification-step-title i { color: var(--green); font-size: .85rem; }
.verification-step-text {
  font-size: .825rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}
.verification-step-check {
  color: var(--green);
  font-size: 1.25rem;
  justify-self: end;
}

.verification-progress-card {
  padding: 1.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.verification-progress-title {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 .25rem;
  letter-spacing: -.020em;
}
.verification-progress-sub {
  font-size: .8rem;
  color: var(--text-muted);
  margin: 0 0 1.5rem;
  font-family: 'Sora', sans-serif;
}
.verification-bar-item { margin-bottom: 1rem; }
.verification-bar-item:last-of-type { margin-bottom: 1.5rem; }
.verification-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  color: var(--text);
  margin-bottom: .4rem;
  font-family: 'Sora', sans-serif;
}
.verification-bar-head span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--text-muted);
  font-weight: 500;
}
.verification-bar-head span i { color: var(--green); font-size: .75rem; }
.verification-bar-head strong {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--text);
}
.verification-bar {
  height: .5rem;
  background: var(--bg-2);
  border-radius: 100px;
  overflow: hidden;
}
.verification-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--green-mid));
  border-radius: 100px;
  width: 0;
  transition: width 1.4s var(--ease-out);
}
.verification-bar-warn { background: var(--warm); }
.verification-bar-info { background: var(--info); }
.verification-progress-foot {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-family: 'Sora', sans-serif;
}
.verification-progress-foot i { color: var(--green); flex-shrink: 0; margin-top: .1rem; }
@media (prefers-reduced-motion: reduce) { .verification-bar-fill { transition: none; } }

/* Trust badge row */
.trust-badge-row-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
@media (max-width: 900px) { .trust-badge-row-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .trust-badge-row-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .trust-badge-row-grid { grid-template-columns: 1fr; } }

.trust-badge-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.trust-badge-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.trust-badge-card > i {
  font-size: 1.5rem;
  color: var(--green);
  width: 3rem; height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-light);
  border-radius: 50%;
}
.trust-badge-card-title {
  font-family: 'Sora', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text);
  margin: .25rem 0 0;
  letter-spacing: -.010em;
}
.trust-badge-card-sub {
  font-size: .7rem;
  color: var(--text-muted);
  margin: 0;
  font-family: 'Sora', sans-serif;
}

/* FAQ accordion */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.faq-item.open {
  border-color: rgba(15,61,46,.30);
  box-shadow: var(--shadow-md);
}
.faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 1.125rem 1.5rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-family: 'Sora', sans-serif;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
  transition: color var(--transition-fast);
  letter-spacing: -.010em;
}
.faq-q:hover { color: var(--green); }
.faq-q span { flex: 1; }
.faq-icon {
  font-size: .85rem;
  color: var(--text-muted);
  transition: transform var(--transition), color var(--transition);
  flex-shrink: 0;
}
.faq-item.open .faq-icon { transform: rotate(180deg); color: var(--green); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition);
}
.faq-a-inner {
  padding: 0 1.5rem 1.25rem;
  font-size: .9rem;
  color: var(--text-muted);
  line-height: 1.7;
}
.faq-a-inner p { margin: 0; }
.faq-a-inner a { color: var(--green); text-decoration: underline; text-underline-offset: 2px; }
.faq-a-inner a:hover { color: var(--green-mid); }
@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
  .faq-icon { transition: none; }
}

/* Final CTA */
.final-cta {
  background:
    radial-gradient(ellipse at top, rgba(15,61,46,.22), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--green-light) 100%);
  padding: 5rem 1.5rem 6rem;
  text-align: center;
}
.final-cta-inner { max-width: 720px; margin: 0 auto; }
.final-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .4rem 1rem;
  font-family: 'Sora', sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 1.5rem;
}
.final-cta-eyebrow i { color: var(--green); }
.final-cta-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 500;
  letter-spacing: -.035em;
  color: var(--text);
  margin: 0 0 1rem;
  line-height: 1.1;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.final-cta-text {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0 0 2.25rem;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.final-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .875rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.final-cta-primary,
.final-cta-secondary {
  padding: .95rem 2rem;
  font-size: .95rem;
  text-decoration: none;
  border-radius: var(--radius);
}
.final-cta-primary { box-shadow: var(--shadow-green); }
.final-cta-trust {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9rem;
  color: var(--text-muted);
  margin: 0;
  font-family: 'Sora', sans-serif;
}
.final-cta-trust i { color: var(--green); }
.final-cta-trust strong { color: var(--text); font-weight: 700; }

/* Mobile tweaks */
@media (max-width: 640px) {
  .reviews-hero { padding: 2.5rem 1.25rem 3rem; }
  .rating-display { padding: 1.25rem 1.25rem; gap: 1rem; }
  .rating-display-number { font-size: 2.75rem; }
  .rating-display-meta .stars-lg,
  .rating-display-meta .stars-lg i { font-size: 1.25rem; }
  .reviews-section { padding: 3rem 1.25rem; }
  .review-card { padding: 1.25rem; }
  .verification-step {
    padding: 1rem 1.125rem;
    grid-template-columns: 2rem 1fr 1.25rem;
    gap: .75rem;
  }
  .verification-step-num { width: 2rem; height: 2rem; font-size: .875rem; }
  .faq-q { padding: 1rem 1.125rem; font-size: .875rem; }
  .faq-a-inner { padding: 0 1.125rem 1rem; font-size: .85rem; }
  .final-cta { padding: 3.5rem 1.25rem 4.5rem; }
  .final-cta-primary,
  .final-cta-secondary { width: 100%; justify-content: center; }
  .testimonial-card { padding: 1.5rem; }
}

/* Reviews reveal */
@media (prefers-reduced-motion: no-preference) {
  .review-card,
  .trust-card,
  .ugc-item,
  .testimonial-card,
  .trust-badge-card,
  .verification-step,
  .live-indicator {
    animation: reviewsFadeUp .55s var(--ease-out) both;
  }
}
@keyframes reviewsFadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .review-card,
  .trust-card,
  .ugc-item,
  .testimonial-card,
  .trust-badge-card,
  .verification-step,
  .live-indicator { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   FLOATING REVIEWS BUTTON
   ═══════════════════════════════════════════════════════ */
.floating-reviews {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem 1rem .625rem .75rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: 0 6px 24px rgba(26,22,18,.10), 0 2px 6px rgba(26,22,18,.05);
  text-decoration: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  transition: transform .3s var(--ease-out), box-shadow .25s, background .25s;
  cursor: pointer;
  animation: fr-fade-in .5s var(--ease-out) both;
  animation-delay: .8s;
}
.floating-reviews:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 32px rgba(15,61,46,.18), 0 4px 10px rgba(26,22,18,.08);
  background: #fff;
}
.floating-reviews:active { transform: translateY(0) scale(.99); }
.floating-reviews:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.fr-stars {
  display: flex;
  gap: .1rem;
  font-size: .7rem;
  color: var(--warm);
  line-height: 1;
}
.fr-stars i { filter: drop-shadow(0 1px 2px rgba(192,132,87,.3)); }
.fr-content {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.fr-rating {
  font-size: .8rem;
  color: var(--text);
  letter-spacing: -.01em;
  font-family: 'Sora', sans-serif;
}
.fr-rating strong {
  font-weight: 800;
  color: var(--text);
  font-size: .9rem;
}
.fr-label {
  font-size: .65rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 1px;
  font-family: 'Sora', sans-serif;
}
@keyframes fr-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.floating-reviews::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 100px;
  background: rgba(15, 61, 46, 0.35);
  z-index: -1;
  opacity: 0;
  animation: fr-pulse 2.5s ease-out 1.5s 2;
  pointer-events: none;
}
@keyframes fr-pulse {
  0%   { opacity: 0; transform: scale(1); }
  35%  { opacity: .55; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.15); }
}

@media (max-width: 640px) {
  .floating-reviews {
    bottom: 1rem;
    left: 1rem;
    padding: .5rem .875rem .5rem .625rem;
    gap: .5rem;
  }
  .fr-stars { font-size: .6rem; }
  .fr-rating { font-size: .75rem; }
  .fr-rating strong { font-size: .825rem; }
  .fr-label { font-size: .6rem; }
}
@media (max-width: 360px) {
  .floating-reviews { transform: scale(.92); transform-origin: bottom left; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-reviews,
  .floating-reviews::after,
  .floating-reviews:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}
body[data-page="reviews"] .floating-reviews { display: none; }

#compareBar:not([style*="display: none"]) ~ .floating-reviews,
body:has(#compareBar[style*="display: flex"]) .floating-reviews { bottom: 5.5rem; }

@media print { .floating-reviews { display: none !important; } }

/* ═══════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════ */
.legal-page main,
.legal-page .legal-toc,
.reviews-grid,
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
.product-card { contain: layout paint style; }
.modal-backdrop,
.toast { will-change: transform, opacity; }

/* Disable transitions during page-enter to avoid jank */
.page-enter * { transition: none !important; }

@media (prefers-reduced-data: reduce) {
  .float-a, .float-b, .pulse-dot, .maintenance-anim, .progress-ring {
    animation: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ─────────────────────────────────────────────
   REDUCED MOTION
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .float-a, .float-b,
  .hero-gradient::before,
  body::after,
  #backToTop::before,
  .pulse-dot,
  .nav a[href="index.html"] .fa-leaf,
  .nav a[aria-label="Lagenco home"] .fa-leaf {
    animation: none !important;
  }
}

@media print {
  body::before, body::after,
  .hero-gradient::before { display: none !important; }
  body { background: #fff !important; }
}

/* ═══════════════════════════════════════════════════════
   BID SYSTEM — bidding UI styles (marktplaats-style)
   ═══════════════════════════════════════════════════════ */

/* Warm button — used for "Doe een bod" CTA */
.btn-warm {
  background: linear-gradient(135deg, var(--warm) 0%, var(--warm-deep) 100%);
  color: #fff;
  box-shadow:
    0 6px 20px rgba(192, 132, 87, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  border: none;
}
.btn-warm:hover {
  box-shadow:
    0 14px 36px rgba(192, 132, 87, 0.45),
    0 0 0 1px rgba(192, 132, 87, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, var(--warm-deep) 0%, var(--warm) 100%);
  transform: translateY(-1px);
}
.btn-warm:active { transform: translateY(0); }

/* ─── Product preview header in bid modal ─── */
.bid-product-preview {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}

/* ─── Form fieldsets ─── */
.bid-fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1rem .875rem;
  margin: 0 0 1rem;
  background: var(--card);
}
.bid-fieldset legend {
  font-family: 'Sora', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 0 .5rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.bid-fieldset legend i {
  color: var(--warm-deep);
  font-size: .7rem;
}

/* ─── Form grid ─── */
.bid-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.bid-field { display: flex; flex-direction: column; gap: .3rem; }
.bid-field.full { grid-column: 1 / -1; }
.bid-field label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--text);
  font-family: 'Sora', sans-serif;
}
.bid-field label .req { color: #dc2626; }
.bid-field input,
.bid-field textarea,
.bid-field select {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: #fff;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
}
.bid-field input:focus,
.bid-field textarea:focus,
.bid-field select:focus {
  outline: none;
  border-color: var(--warm);
  box-shadow: 0 0 0 3px rgba(192, 132, 87, 0.16);
}
.bid-field textarea { resize: vertical; min-height: 2.5rem; }

/* ─── Bid amount input with € prefix ─── */
.bid-amount-input {
  position: relative;
  display: flex;
  align-items: stretch;
}
.bid-amount-prefix {
  display: flex;
  align-items: center;
  padding: 0 .875rem;
  background: var(--warm-light);
  color: var(--warm-deep);
  font-weight: 700;
  border: 1px solid var(--border);
  border-right: none;
  border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  font-family: 'Sora', sans-serif;
}
.bid-amount-input input {
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0 !important;
  flex: 1;
}
.bid-help-text {
  font-size: .72rem;
  color: var(--text-faint);
  margin: .3rem 0 0;
  font-style: italic;
}

/* ─── Shipping method radio cards ─── */
.bid-shipping-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .625rem;
}
.bid-shipping-option {
  cursor: pointer;
  display: block;
}
.bid-shipping-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.bid-shipping-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: .875rem .5rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: all .2s;
  gap: .25rem;
}
.bid-shipping-card i {
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
  transition: color .2s;
}
.bid-shipping-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  font-family: 'Sora', sans-serif;
}
.bid-shipping-sub {
  font-size: .68rem;
  color: var(--text-faint);
  line-height: 1.3;
}
.bid-shipping-option:hover .bid-shipping-card {
  border-color: var(--warm);
  background: var(--warm-light);
}
.bid-shipping-option:hover .bid-shipping-card i { color: var(--warm-deep); }
.bid-shipping-option input[type="radio"]:checked + .bid-shipping-card {
  border-color: var(--warm);
  background: linear-gradient(135deg, var(--warm-light) 0%, #fff 100%);
  box-shadow: 0 0 0 3px rgba(192, 132, 87, 0.18);
}
.bid-shipping-option input[type="radio"]:checked + .bid-shipping-card i {
  color: var(--warm-deep);
}

/* ─── Bids history section (inside product modal) ─── */
.bids-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.bids-title {
  font-family: 'Sora', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.bids-title i { color: var(--warm-deep); }
.bids-count {
  display: inline-block;
  margin-left: .625rem;
  padding: .15rem .55rem;
  background: var(--warm-light);
  color: var(--warm-deep);
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
}
.bids-summary {
  display: flex;
  gap: .625rem;
  flex-wrap: wrap;
}
.bid-summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: .5rem .875rem;
  background: var(--bg-2);
  border-radius: var(--radius-xs);
  border: 1px solid var(--border);
}
.bid-summary-label {
  font-size: .68rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Sora', sans-serif;
}
.bid-summary-value {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  font-family: 'Sora', sans-serif;
  font-variant-numeric: tabular-nums;
}

/* ─── Bids list (per product) ─── */
.bids-list {
  display: flex;
  flex-direction: column;
  gap: .625rem;
}
.bid-item {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: .875rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all .2s;
}
.bid-item:hover { box-shadow: var(--shadow-sm); }
.bid-item-highest {
  background: linear-gradient(135deg, rgba(192, 132, 87, 0.08) 0%, var(--card) 60%);
  border-color: var(--warm);
}
.bid-item-avatar {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--warm), var(--warm-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  font-family: 'Sora', sans-serif;
  letter-spacing: .04em;
}
.bid-item-main { flex: 1; min-width: 0; }
.bid-item-top {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.bid-item-name {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
}
.bid-badge-highest {
  display: inline-flex;
  align-items: center;
  padding: .15rem .5rem;
  background: var(--warm);
  color: #fff;
  border-radius: 100px;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'Sora', sans-serif;
}
.bid-status {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .55rem;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 600;
  font-family: 'Sora', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bid-status i { font-size: .6rem; }
.bid-status-success {
  background: var(--green-light);
  color: var(--green);
}
.bid-status-warn {
  background: var(--warm-light);
  color: var(--warm-deep);
}
.bid-status-danger {
  background: #fee2e2;
  color: #dc2626;
}
.bid-item-meta {
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}
.bid-item-meta i { color: var(--text-faint); font-size: .68rem; margin-right: .15rem; }
.bid-item-address {
  font-size: .75rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: .4rem;
}
.bid-item-address i { color: var(--text-faint); margin-top: .15rem; }
.bid-item-amount {
  font-family: 'Sora', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  white-space: nowrap;
}
.bid-item-highest .bid-item-amount { color: var(--warm-deep); }

/* ─── Empty state ─── */
.bids-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-faint);
}
.bids-empty i {
  font-size: 2rem;
  color: var(--border-2);
  margin-bottom: .75rem;
  display: block;
}
.bids-empty p {
  font-size: .875rem;
  margin: 0;
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
  .bid-form-grid { grid-template-columns: 1fr; }
  .bid-shipping-options { grid-template-columns: 1fr; }
  .bids-summary { width: 100%; }
  .bid-summary-item { flex: 1; align-items: flex-start; }
  .bid-item { flex-direction: column; }
  .bid-item-amount { align-self: flex-end; margin-top: -.5rem; }
}

/* ─── Privacy notice below bids list ─── */
.bids-privacy-notice {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  padding: .65rem .875rem;
  background: var(--green-light);
  border: 1px solid rgba(15, 61, 46, 0.15);
  border-radius: var(--radius-xs);
  font-size: .72rem;
  color: var(--green);
  font-family: 'Inter', sans-serif;
}
.bids-privacy-notice i {
  color: var(--green);
  font-size: .75rem;
  flex-shrink: 0;
}
.bids-privacy-notice span { line-height: 1.5; }

/* ─── Terms checkbox in bid form ─── */
.bid-terms-field {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .875rem 1rem;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all .2s;
}
.bid-terms-field:hover { border-color: var(--warm); }
.bid-terms-field input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .15rem;
  flex-shrink: 0;
  accent-color: var(--warm-deep);
  cursor: pointer;
}
.bid-terms-field label {
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
}
.bid-terms-field label a {
  color: var(--warm-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bid-terms-field label a:hover { color: var(--warm); }

/* ─── Bid count badge on product cards ─── */
.bid-count-badge {
  position: absolute;
  top: .75rem;
  right: .75rem;
  left: auto;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .6rem;
  background: linear-gradient(135deg, var(--warm), var(--warm-deep));
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  border-radius: 100px;
  box-shadow: 0 4px 12px rgba(192, 132, 87, 0.30);
  z-index: 2;
  pointer-events: none;
  letter-spacing: .02em;
}
.bid-count-badge i { font-size: .6rem; }
/* When both discount badge and bid-count badge exist, offset the bid badge */
.card-img .badge[style*="--warm"] + .bid-count-badge,
.card-img .badge ~ .bid-count-badge {
  top: .75rem;
  right: .75rem;
}
/* If discount badge is also at top-right, push bid badge below it */
.card-img .badge[style*="var(--warm)"] ~ .bid-count-badge {
  top: 3rem;
}

/* ═══════════════════════════════════════════════════════
   LIVE BIDS SECTION — homepage
   ═══════════════════════════════════════════════════════ */
.live-bid-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
}
.live-bid-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--warm);
}
.live-bid-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg-2);
  overflow: hidden;
}
.live-bid-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.live-bid-card:hover .live-bid-img-wrap img { transform: scale(1.05); }

.live-bid-pulse {
  position: absolute;
  top: .875rem;
  left: .875rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--warm-deep);
  font-size: .7rem;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  letter-spacing: .02em;
}
.live-bid-pulse .pulse-dot {
  width: .5rem;
  height: .5rem;
  background: var(--warm);
  border-radius: 50%;
  animation: pulse 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: .6; }
}

.live-bid-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}
.live-bid-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -.01em;
  /* clamp 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
}

.live-bid-current {
  background: linear-gradient(135deg, var(--warm-light) 0%, #fff 100%);
  border: 1px solid rgba(192, 132, 87, 0.20);
  border-radius: var(--radius-sm);
  padding: .875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.live-bid-current-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--warm-deep);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: 'Sora', sans-serif;
}
.live-bid-current-amount {
  font-family: 'Sora', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.live-bid-bidder {
  display: flex;
  align-items: center;
  gap: .625rem;
}
.live-bid-avatar {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--warm), var(--warm-deep));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .72rem;
  font-family: 'Sora', sans-serif;
  letter-spacing: .04em;
}
.live-bid-bidder-info { flex: 1; min-width: 0; }
.live-bid-bidder-name {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.live-bid-time {
  font-size: .7rem;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.live-bid-time i { font-size: .65rem; }

.live-bid-asking {
  font-size: .78rem;
  color: var(--text-muted);
  padding-top: .5rem;
  border-top: 1px dashed var(--border);
}
.live-bid-asking strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.live-bid-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: auto;
}
.live-bid-cta {
  width: 100%;
  justify-content: center;
  padding: .875rem 1rem;
  font-size: .88rem;
}
.live-bid-details {
  width: 100%;
  justify-content: center;
  padding: .65rem 1rem;
  font-size: .8rem;
}

@media (max-width: 640px) {
  .live-bid-current-amount { font-size: 1.25rem; }
}

/* ─── Product badge on live-bid-card ─── */
.live-bid-product-badge {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .35rem .7rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 100px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
  z-index: 2;
  pointer-events: none;
}
.live-bid-product-badge i { font-size: .55rem; }

/* ═══════════════════════════════════════════════════════
   COMMUNITY POSTS — admin posts + user reactions
   ═══════════════════════════════════════════════════════ */
.community-post {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.community-post:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-2);
}

.community-post-header {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1.25rem;
}
.community-post-avatar {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .9rem;
  box-shadow: 0 4px 12px rgba(15, 61, 46, 0.20);
}
.community-post-meta {
  flex: 1;
  min-width: 0;
}
.community-post-author {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.community-post-author-name {
  font-family: 'Sora', sans-serif;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.community-post-author-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .15rem .5rem;
  background: var(--green-light);
  color: var(--green);
  border-radius: 100px;
  font-size: .65rem;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  letter-spacing: .04em;
}
.community-post-author-badge i { font-size: .55rem; }
.community-post-time {
  font-size: .75rem;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .2rem;
}
.community-post-time i { font-size: .65rem; }

.community-post-delete {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-faint);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  flex-shrink: 0;
}
.community-post-delete:hover {
  background: #fee2e2;
  color: #dc2626;
  border-color: #fecaca;
}

.community-post-title {
  font-family: 'Sora', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .75rem;
  line-height: 1.3;
  letter-spacing: -.015em;
}
.community-post-body {
  font-size: .925rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0 0 1.25rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.community-post-stats {
  display: flex;
  gap: 1.25rem;
  padding: .75rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.community-post-stat {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  color: var(--text-muted);
  font-weight: 600;
  font-family: 'Sora', sans-serif;
}
.community-post-stat i { color: var(--text-faint); }

/* ─── Comments ─── */
.community-comments {
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin-bottom: 1.25rem;
}
.community-comment {
  display: flex;
  gap: .75rem;
  padding: .875rem 1rem;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.community-comment-avatar {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  font-family: 'Sora', sans-serif;
  letter-spacing: .04em;
}
.community-comment-body { flex: 1; min-width: 0; }
.community-comment-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .25rem;
  flex-wrap: wrap;
}
.community-comment-name {
  font-family: 'Sora', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
}
.community-comment-time {
  font-size: .68rem;
  color: var(--text-faint);
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.community-comment-time i { font-size: .58rem; }
.community-comment-delete {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  font-size: .7rem;
}
.community-comment-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}
.community-comment-text {
  font-size: .85rem;
  color: var(--text);
  margin: 0;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* ─── Comment form ─── */
.community-comment-form {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}
.community-comment-username,
.community-comment-text-input {
  padding: .65rem .875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  background: #fff;
  color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.community-comment-username {
  flex: 0 0 auto;
  min-width: 160px;
  width: 25%;
}
.community-comment-text-input {
  flex: 1;
  min-width: 200px;
}
.community-comment-username:focus,
.community-comment-text-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(15, 61, 46, 0.12);
}
.community-comment-submit {
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  color: #fff;
  border: none;
  width: 2.75rem;
  height: 2.5rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(15, 61, 46, 0.20);
}
.community-comment-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15, 61, 46, 0.30);
}

@media (max-width: 640px) {
  .community-comment-username {
    width: 100%;
    flex: 1 1 100%;
  }
  .community-comment-text-input {
    width: 100%;
    flex: 1 1 100%;
  }
  .community-comment-submit {
    width: 100%;
    height: 2.75rem;
  }
  .community-post {
    padding: 1.25rem;
  }
}

/* ═══════════════════════════════════════════════════════
   CONCEPT 3 OVERRIDES — Soft & Playful
   Wordt onderaan geladen om bestaande stijlen te overschrijven
   met de nieuwe speelse uitstraling
   ═══════════════════════════════════════════════════════ */

/* ── Headings: Poppins i.p.v. Sora/Fraunces ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  color: var(--text);
}
h1 { font-weight: 800 !important; letter-spacing: -.03em !important; }
h2 { font-weight: 800 !important; letter-spacing: -.03em !important; }

/* Specifieke overrides voor inline-style headings (Fraunces) */
[style*="font-family:'Fraunces'"], [style*="font-family: 'Fraunces'"] {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
}
[style*="font-family:'Sora'"], [style*="font-family: 'Sora'"] {
  font-family: var(--font-display) !important;
}

/* ── Display font voor "Fraunces" aliassen ── */
.hero-title,
h1.hero-title {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

/* ── Hoofdletterlabels (uppercase pills) ── */
[style*="letter-spacing:.14em"],
[style*="letter-spacing: .14em"],
[style*="text-transform:uppercase"] {
  font-family: var(--font-display) !important;
}

/* ════ HERO — speelse blob achtergrond ════ */
.hero-gradient {
  background: linear-gradient(135deg, var(--green-light) 0%, var(--peach-soft) 50%, var(--yellow-soft) 100%) !important;
  position: relative;
  overflow: hidden;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  top: 10%; left: -10%;
  width: 50%; height: 60%;
  background: radial-gradient(circle, var(--green-soft), transparent 70%);
  filter: blur(80px);
  opacity: 0.45;
  pointer-events: none;
  animation: heroBlob 20s ease-in-out infinite;
}
.hero-gradient::after {
  content: '';
  position: absolute;
  top: 30%; right: -10%;
  width: 50%; height: 60%;
  background: radial-gradient(circle, var(--peach), transparent 70%);
  filter: blur(80px);
  opacity: 0.40;
  pointer-events: none;
  animation: heroBlob 25s ease-in-out infinite reverse;
}
@keyframes heroBlob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.05); }
}

/* ── Hero title gele highlighter ── */
.hero-title {
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
}

/* ════ FEATURE PILL — speelse witte pill ════ */
.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.1rem !important;
  background: white !important;
  border: 1.5px solid var(--green-light) !important;
  border-radius: 100px !important;
  font-family: var(--font-display) !important;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--green-mid) !important;
  box-shadow: var(--shadow-sm) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* ════ KNOPPEN — ronder, speelser, kleurrijker ════ */
.btn {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  border-radius: 100px !important;
  letter-spacing: -.01em !important;
  transition: all .25s var(--ease-out) !important;
}
.btn-primary {
  background: linear-gradient(135deg, var(--green), var(--green-mid)) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(107, 191, 126, 0.35) !important;
}
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(107, 191, 126, 0.50) !important;
}
.btn-green {
  background: linear-gradient(135deg, var(--green), var(--green-mid)) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(107, 191, 126, 0.35) !important;
}
.btn-green:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(107, 191, 126, 0.50) !important;
}
.btn-warm {
  background: linear-gradient(135deg, var(--peach), var(--peach-deep)) !important;
  color: white !important;
  box-shadow: 0 8px 24px rgba(255, 139, 92, 0.30) !important;
}
.btn-warm:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(255, 139, 92, 0.45) !important;
}
.btn-ghost {
  background: white !important;
  color: var(--text) !important;
  border: 2px solid var(--border) !important;
  box-shadow: var(--shadow-xs) !important;
}
.btn-ghost:hover {
  border-color: var(--peach) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ════ CARDS — zachter, ronder ════ */
.card {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .3s var(--ease-out) !important;
}
.card:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-4px);
}

/* Product cards iets speelser */
.product-card {
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
}
.product-card:hover {
  transform: translateY(-6px) rotate(-.3deg);
  box-shadow: var(--shadow-lg) !important;
  border-color: var(--peach) !important;
}

/* ════ BADGES — speelser ════ */
.badge {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  border-radius: 100px !important;
  padding: .35rem .75rem !important;
  font-size: .68rem !important;
  text-transform: uppercase !important;
}
.badge-new {
  background: var(--green-deep, var(--green-mid)) !important;
  background: var(--green-mid) !important;
  color: white !important;
}
.badge-retour {
  background: var(--peach-deep) !important;
  color: white !important;
}
.badge-used {
  background: var(--lavender-deep) !important;
  color: white !important;
}
.badge-sale {
  background: var(--yellow-deep) !important;
  color: white !important;
}

/* ════ NAV — ronder, zachter ════ */
.nav {
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(255, 248, 240, 0.85) !important;
  border-bottom: 1px solid var(--border) !important;
}
.nav-icon-btn {
  background: white !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 50% !important;
  transition: all .2s !important;
}
.nav-icon-btn:hover {
  border-color: var(--green) !important;
  transform: translateY(-1px) !important;
}
.nav-badge {
  background: var(--peach-deep) !important;
  color: white !important;
}

/* ════ FORMULIEREN — ronde inputs ════ */
.login-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
textarea,
select {
  font-family: var(--font-body) !important;
}
.login-input {
  border: 1.5px solid var(--border) !important;
  border-radius: .75rem !important;
  background: var(--bg) !important;
  transition: all .2s !important;
}
.login-input:focus {
  outline: none !important;
  border-color: var(--green) !important;
  background: white !important;
  box-shadow: 0 0 0 3px rgba(107, 191, 126, 0.15) !important;
}

/* ════ TOASTS — speelser ════ */
.toast {
  font-family: var(--font-body) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
}
.toast-success {
  background: linear-gradient(135deg, var(--green), var(--green-mid)) !important;
  color: white !important;
}
.toast-error {
  background: linear-gradient(135deg, var(--danger), #C04A3F) !important;
  color: white !important;
}
.toast-info {
  background: linear-gradient(135deg, var(--info), var(--blue-deep)) !important;
  color: white !important;
}

/* ════ SECTION HEADINGS — gele highlighter optie ════ */
.section-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem !important;
  background: white !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 100px !important;
  font-family: var(--font-display) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--green-mid) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ════ SPEELSE DECORATIEVE ELEMENTEN — nieuw in v4 ════ */

/* Gele highlighter achter woord */
.highlight-yellow {
  position: relative;
  display: inline-block;
  color: var(--green-mid);
}
.highlight-yellow::after {
  content: '';
  position: absolute;
  left: -.2em; right: -.2em; bottom: .12em;
  height: .35em;
  background: var(--yellow);
  z-index: -1;
  border-radius: 100px;
}
.highlight-peach {
  position: relative;
  display: inline-block;
  color: var(--peach-deep);
}
.highlight-peach::after {
  content: '';
  position: absolute;
  left: -.2em; right: -.2em; bottom: .12em;
  height: .35em;
  background: var(--peach-soft);
  z-index: -1;
  border-radius: 100px;
}

/* Handgeschreven accent (Caveat font) */
.handwritten {
  font-family: var(--font-hand) !important;
  color: var(--peach-deep);
  transform: rotate(-3deg);
  display: inline-block;
}

/* Speelse blob (voor absolute positionering in secties) */
.blob-decor {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.blob-green { background: var(--green-light); }
.blob-peach { background: var(--peach-soft); }
.blob-yellow { background: var(--yellow-soft); }
.blob-lavender { background: var(--lavender-soft); }

/* ════ STATS / VALUE CARDS — speelse rotatie ════ */
.stat-card,
.value-card,
.kernwaarden-card {
  background: white !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all .3s var(--ease-out) !important;
}
.stat-card:hover,
.value-card:hover,
.kernwaarden-card:hover {
  transform: translateY(-6px) rotate(-.5deg) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ════ TIMELINE / WERKWIJZE — kleurrijker ════ */
.timeline-step,
.werkwijze-step {
  background: white !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ════ CAROUSEL — zachter ════ */
.carousel-container {
  border-radius: var(--radius-xl) !important;
}

/* ════ MODALS — ronder ════ */
.modal-panel {
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-close-btn {
  background: var(--bg-2) !important;
  border-radius: 50% !important;
  width: 2.25rem !important;
  height: 2.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid var(--border) !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all .2s !important;
}
.modal-close-btn:hover {
  background: var(--danger-light) !important;
  color: var(--danger) !important;
  transform: rotate(90deg) !important;
}

/* ════ FOOTER — donker bosgroen ════ */
footer {
  background: var(--text) !important;
  color: white !important;
}
footer a {
  color: rgba(255,255,255,0.7) !important;
  transition: color .2s !important;
}
footer a:hover { color: white !important; }

/* ════ BACKGROUND BLOBS — globale subtiele blobs ════ */
body::before {
  content: '';
  position: fixed;
  top: -10%; left: -10%;
  width: 50%; height: 60%;
  background: radial-gradient(circle, var(--green-light), transparent 70%);
  filter: blur(100px);
  opacity: 0.4;
  z-index: -1;
  pointer-events: none;
  animation: globalBlob 30s ease-in-out infinite;
}
@keyframes globalBlob {
  0%, 100% { transform: translate(0,0); }
  50% { transform: translate(50px, -40px); }
}

/* ════ LINKS — groene underline ════ */
a {
  color: var(--green-mid);
  transition: color .2s;
}
a:hover { color: var(--green); }

/* ════ PRINT — behoud ════ */
@media print {
  body::before, body::after, .blob-decor { display: none !important; }
  body { background: #fff !important; }
}

/* ═══════════════════════════════════════════════════════
   V5 ANIMATIE UITBREIDINGEN — speels en levendig
   ═══════════════════════════════════════════════════════ */

/* ── Hero highlight: gele streep onder "tweede leven." ── */
.hero-highlight {
  position: relative;
  display: inline-block;
  color: var(--green-mid);
}
.hero-highlight::after {
  content: '';
  position: absolute;
  left: -.15em;
  right: -.15em;
  bottom: .12em;
  height: .30em;
  background: var(--yellow);
  z-index: -1;
  border-radius: 100px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: drawHighlight 1.2s cubic-bezier(0.65, 0, 0.35, 1) 1s forwards;
}
@keyframes drawHighlight {
  0% { transform: scaleX(0); transform-origin: left center; }
  50% { transform: scaleX(1); transform-origin: left center; }
  50.01% { transform-origin: right center; }
  100% { transform: scaleX(1); transform-origin: right center; }
}
/* Subtle pulse on hover */
.hero-highlight:hover::after {
  animation: highlightPulse 1.5s ease-in-out infinite;
}
@keyframes highlightPulse {
  0%, 100% { opacity: 1; transform: scaleX(1); }
  50% { opacity: 0.7; transform: scaleX(1.02); }
}

/* ── Missie items: slide + scale bij hover ── */
.missie-item {
  transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s, background .3s;
  cursor: default;
}
.missie-item:hover {
  transform: translateX(8px) scale(1.02);
  box-shadow: var(--shadow-md);
  border-color: var(--peach);
  background: linear-gradient(90deg, white 0%, var(--peach-soft) 100%);
}
.missie-item:hover span:first-child {
  transform: scale(1.25) rotate(-8deg);
  transition: transform .3s var(--ease-spring);
}
.missie-item span:first-child {
  transition: transform .3s var(--ease-spring);
  display: inline-block;
}

/* ── Kernwaarden sparkle sterretjes ── */
.kernwaarden-badge { position: relative; }
.sparkle {
  position: absolute;
  font-size: 1rem;
  color: var(--yellow);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 6px var(--yellow);
  animation: sparkleAnim 3s ease-in-out infinite;
}
.sparkle-1 { top: -8px; left: -10px; animation-delay: 0s; }
.sparkle-2 { top: -12px; right: -8px; animation-delay: 0.5s; font-size: .8rem; }
.sparkle-3 { bottom: -10px; left: 30%; animation-delay: 1s; font-size: .9rem; }
.sparkle-4 { top: 50%; right: -14px; animation-delay: 1.5s; font-size: .7rem; }
@keyframes sparkleAnim {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

/* ── Algemene heading hover animatie (pop effect) ── */
h1:hover, h2:hover, h3:hover {
  animation: headingPop .4s var(--ease-spring);
}
@keyframes headingPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ── Section pills: lift + glow bij hover ── */
.section-pill,
[style*="border-radius:100px"][style*="font-family:'Poppins'"]:hover {
  transition: transform .25s var(--ease-spring), box-shadow .25s;
}
.section-pill:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
}

/* ── Cards: levendiger hover ── */
.card {
  transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: var(--shadow-lg);
}

/* ── Kernwaarden value cards: icoon draait bij hover ── */
.value-card:hover [class*="fas"],
[style*="border-radius:50%"][style*="display:flex"][style*="align-items:center"][style*="justify-content:center"]:hover {
  transition: transform .4s var(--ease-spring);
}

/* ── Live bid cards: levendiger ── */
.live-bid-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* ── Buttons: extra pop ── */
.btn {
  transition: all .25s var(--ease-spring) !important;
}
.btn:active {
  transform: translateY(0) scale(.98) !important;
}

/* ── Timeline nodes: extra pop bij hover ── */
.timeline-node:hover .timeline-num {
  transform: scale(1.15) rotate(-5deg);
}

/* ── Section headings: subtiele fade-up bij scroll ── */
section h2 {
  transition: transform .3s var(--ease-spring);
}

/* ── Stat cards: icoon pulse bij hover ── */
[style*="border-radius:1.5rem"][style*="padding:1.5rem 1rem"]:hover [style*="border-radius:50%"] {
  animation: iconBounce .5s var(--ease-spring);
}
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px) scale(1.1); }
}

/* ── Nav links: underline animatie ── */
.nav-links a {
  position: relative;
  transition: color .2s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--green);
  border-radius: 100px;
  transition: width .3s var(--ease-spring);
}
.nav-links a:hover::after {
  width: 100%;
}

/* ── Footer links: slide bij hover ── */
.footer-link {
  display: inline-block;
  transition: transform .2s, color .2s;
}
.footer-link:hover {
  transform: translateX(4px);
}

/* ── Image zoom op product cards ── */
.product-card img,
.live-bid-img-wrap img {
  transition: transform .5s var(--ease-out);
}
.product-card:hover img,
.live-bid-card:hover .live-bid-img-wrap img {
  transform: scale(1.08);
}

/* ── Floating cards in hero: extra tilt bij hover ── */
.float-a > div,
.float-b > div {
  transition: transform .4s var(--ease-spring);
}
.float-a:hover > div {
  transform: rotate(-8deg) scale(1.05) !important;
}
.float-b:hover > div {
  transform: rotate(8deg) scale(1.05) !important;
}

/* ── Form inputs: glow bij focus ── */
.login-input:focus,
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
  transform: translateY(-1px);
}

/* ── Community posts: levendiger ── */
.community-post {
  transition: transform .3s var(--ease-spring), box-shadow .3s, border-color .3s;
}
.community-post:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ── Reduce motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════
   V6 COMMUNITY SNELKOPPELINGEN — rendered links in posts
   ═══════════════════════════════════════════════════════ */
.community-quicklink-rendered {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .8rem;
  background: linear-gradient(135deg, var(--green-light), white);
  border: 1.5px solid var(--green-light);
  border-radius: 100px;
  color: var(--green-mid) !important;
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  margin: .25rem .15rem;
  transition: all .25s var(--ease-spring);
  box-shadow: var(--shadow-xs);
}
.community-quicklink-rendered i {
  font-size: .65rem;
  transition: transform .25s var(--ease-spring);
}
.community-quicklink-rendered:hover {
  transform: translateY(-2px) scale(1.03);
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  color: white !important;
  border-color: var(--green-mid);
  box-shadow: 0 8px 20px rgba(107, 191, 126, 0.30);
}
.community-quicklink-rendered:hover i {
  transform: translateX(3px);
}

/* Community post image styling */
.community-post-image {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}
.community-post-image img {
  transition: transform .5s var(--ease-out);
}
.community-post:hover .community-post-image img {
  transform: scale(1.03);
}

/* Community quicklink toolbar buttons (in admin form) */
.community-quicklink:hover {
  background: var(--green-light) !important;
}

/* ═══════════════════════════════════════════════════════
   V6 LIVE BOD NOTIFICATIE — rechtsonder popup na 15s
   ═══════════════════════════════════════════════════════ */
.live-bid-notification {
  position: fixed;
  top: 5.5rem;
  right: 1.5rem;
  bottom: auto;
  z-index: 95;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 16px 48px rgba(74, 122, 78, 0.18);
  max-width: 340px;
  display: flex;
  align-items: center;
  gap: .875rem;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .5s var(--ease-spring), opacity .4s;
  font-family: 'Poppins', sans-serif;
}
.live-bid-notification.show {
  transform: translateX(0);
  opacity: 1;
}
.live-bid-notification-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--peach), var(--peach-deep));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(255, 139, 92, 0.30);
}
.live-bid-notification-content { flex: 1; min-width: 0; }
.live-bid-notification-title {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin: 0 0 .15rem;
}
.live-bid-notification-text {
  font-size: .82rem;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
  font-weight: 600;
}
.live-bid-notification-text strong {
  color: var(--green-mid);
}
.live-bid-notification-text .bid-amount {
  color: var(--peach-deep);
  font-weight: 700;
}
.live-bid-notification-close {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  transition: all .2s;
  flex-shrink: 0;
}
.live-bid-notification-close:hover {
  background: var(--bg-2);
  color: var(--text);
}
@media (max-width: 640px) {
  .live-bid-notification {
    top: 5rem;
    right: 1rem;
    left: 1rem;
    bottom: auto;
    max-width: none;
  }
}

/* ── Zakelijke samenwerking: blauwe sterretjes ── */
.zakelijk-badge { position: relative; }
.sparkle-blue {
  position: absolute;
  font-size: 1rem;
  color: var(--blue-deep);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 6px var(--blue);
  animation: sparkleBlueAnim 3s ease-in-out infinite;
}
.sparkle-b1 { top: -8px; left: -10px; animation-delay: 0s; }
.sparkle-b2 { top: -12px; right: -8px; animation-delay: 0.5s; font-size: .8rem; }
.sparkle-b3 { bottom: -10px; left: 30%; animation-delay: 1s; font-size: .9rem; }
.sparkle-b4 { top: 50%; right: -14px; animation-delay: 1.5s; font-size: .7rem; }
@keyframes sparkleBlueAnim {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

/* ── Footer link hover: slide effect (donkere achtergrond) ── */
footer .footer-link:hover {
  color: white !important;
  padding-left: 6px;
}

/* ── Werkwijze: paarse sterretjes ── */
.werkwijze-badge { position: relative; }
.sparkle-purple {
  position: absolute;
  font-size: 1rem;
  color: var(--lavender-deep);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 6px var(--lavender);
  animation: sparklePurpleAnim 3s ease-in-out infinite;
}
.sparkle-p1 { top: -8px; left: -10px; animation-delay: 0s; }
.sparkle-p2 { top: -12px; right: -8px; animation-delay: 0.5s; font-size: .8rem; }
.sparkle-p3 { bottom: -10px; left: 30%; animation-delay: 1s; font-size: .9rem; }
.sparkle-p4 { top: 50%; right: -14px; animation-delay: 1.5s; font-size: .7rem; }
@keyframes sparklePurpleAnim {
  0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

/* ── Community: groene duimpjes ── */
.community-badge { position: relative; }
.thumb-green {
  position: absolute;
  font-size: .75rem;
  color: var(--green-mid);
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 6px var(--green);
  animation: thumbAnim 3s ease-in-out infinite;
}
.thumb-1 { top: -10px; left: -12px; animation-delay: 0s; }
.thumb-2 { top: -14px; right: -10px; animation-delay: 0.5s; font-size: .6rem; }
.thumb-3 { bottom: -12px; left: 30%; animation-delay: 1s; font-size: .7rem; }
.thumb-4 { top: 50%; right: -16px; animation-delay: 1.5s; font-size: .55rem; }
@keyframes thumbAnim {
  0%, 100% { opacity: 0; transform: scale(0) rotate(-20deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(15deg); }
}

/* ═══════════════════════════════════════════════════════
   V8 WHEEL SPIN — modal, wheel animatie, notificatie
   ═══════════════════════════════════════════════════════ */

/* ── Community post wheel spin button ── */
.community-wheelspin-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .5rem 1rem;
  background: linear-gradient(135deg, var(--peach), var(--yellow)) !important;
  border: 2px solid var(--peach-deep) !important;
  border-radius: 100px;
  color: var(--peach-deep) !important;
  font-family: 'Poppins', sans-serif;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  margin: .3rem .15rem;
  transition: all .25s var(--ease-spring);
  box-shadow: 0 4px 12px rgba(255, 176, 136, 0.30);
  text-decoration: none;
}
.community-wheelspin-btn i {
  font-size: .75rem;
  transition: transform .4s var(--ease-spring);
}
.community-wheelspin-btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 24px rgba(255, 176, 136, 0.45);
  background: linear-gradient(135deg, var(--peach-deep), var(--yellow-deep)) !important;
  color: white !important;
}
.community-wheelspin-btn:hover i {
  transform: rotate(180deg);
}

/* ── Wheel container ── */
.wheel-container {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
}

/* Pointer (triangle at top) */
.wheel-pointer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 28px solid var(--peach-deep);
  z-index: 10;
  filter: drop-shadow(0 4px 8px rgba(255, 139, 92, 0.40));
}
.wheel-pointer::after {
  content: '';
  position: absolute;
  top: -32px;
  left: -8px;
  width: 16px;
  height: 16px;
  background: var(--peach-deep);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20);
}

/* Wheel itself */
.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  transition: transform 4s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 12px 32px rgba(74, 122, 78, 0.20));
}
.wheel-svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* Center hub */
.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--green-mid));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(107, 191, 126, 0.40), inset 0 1px 0 rgba(255,255,255,0.30);
  border: 3px solid white;
}

/* ── Result display ── */
.wheel-result {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--green-light), var(--peach-soft));
  border: 1.5px solid var(--green-light);
  border-radius: 1.25rem;
  animation: resultPop .5s var(--ease-spring);
}
@keyframes resultPop {
  0% { opacity: 0; transform: scale(.8); }
  60% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}
.wheel-result.hidden { display: none; }
.wheel-result-icon {
  font-size: 3rem;
  margin-bottom: .5rem;
  animation: iconBounce .6s var(--ease-spring);
}
.wheel-result-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 .5rem;
  letter-spacing: -.02em;
}
.wheel-result-text {
  font-family: 'Nunito', sans-serif;
  font-size: .92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 .5rem;
}
.wheel-result-code {
  display: inline-block;
  padding: .75rem 1.5rem;
  background: white;
  border: 2px dashed var(--green-mid);
  border-radius: .75rem;
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--green-mid);
  letter-spacing: .05em;
  margin-top: .5rem;
  user-select: all;
  cursor: pointer;
  transition: all .2s;
}
.wheel-result-code:hover {
  background: var(--green-light);
  transform: scale(1.02);
}
.wheel-result-code.hidden { display: none; }

/* ── Wheel spin notification (top-right, above content) ── */
.wheel-spin-notification {
  position: fixed;
  top: 5.5rem;
  right: 1.5rem;
  bottom: auto;
  z-index: 95;
  background: white;
  border: 1.5px solid var(--peach);
  border-radius: 1.25rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 16px 48px rgba(255, 139, 92, 0.20);
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: .875rem;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .5s var(--ease-spring), opacity .4s;
  font-family: 'Poppins', sans-serif;
}
.wheel-spin-notification.show {
  transform: translateX(0);
  opacity: 1;
}
.wheel-spin-notification-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--peach), var(--yellow));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(255, 176, 136, 0.40);
  animation: wheelIconSpin 3s ease-in-out infinite;
}
@keyframes wheelIconSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}
.wheel-spin-notification-content { flex: 1; min-width: 0; }
.wheel-spin-notification-title {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--peach-deep);
  margin: 0 0 .2rem;
}
.wheel-spin-notification-text {
  font-size: .78rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
}
.wheel-spin-notification-text strong {
  color: var(--peach-deep);
  font-weight: 700;
}
.wheel-spin-notification-action {
  background: linear-gradient(135deg, var(--peach), var(--peach-deep));
  border: none;
  color: white;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
  transition: all .2s var(--ease-spring);
  box-shadow: 0 4px 12px rgba(255, 139, 92, 0.30);
}
.wheel-spin-notification-action:hover {
  transform: scale(1.1) rotate(-10deg);
  box-shadow: 0 6px 16px rgba(255, 139, 92, 0.45);
}
.wheel-spin-notification-close {
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  transition: all .2s;
  flex-shrink: 0;
}
.wheel-spin-notification-close:hover {
  background: var(--bg-2);
  color: var(--text);
}
@media (max-width: 640px) {
  .wheel-spin-notification {
    top: 5rem;
    right: 1rem;
    left: 1rem;
    bottom: auto;
    max-width: none;
  }
  .wheel-container {
    width: 240px;
    height: 240px;
  }
}

/* ── Wheel spin quicklink button in admin form ── */
.community-quicklink-wheelspin:hover {
  background: linear-gradient(135deg, var(--peach), var(--yellow)) !important;
  color: white !important;
  border-color: var(--peach-deep) !important;
  transform: translateY(-1px) scale(1.05);
}

/* ═══════════════════════════════════════════════════════
   V11 NOTIFICATION STACK + BUYER PROTECTION
   ═══════════════════════════════════════════════════════ */

/* Buyer protection box — professionele groene trust-badge stijl */
.buyer-protection-box {
  position: relative;
  background: linear-gradient(135deg, var(--green-mid) 0%, var(--green) 60%, #5cb070 100%);
  border: none;
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .875rem;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-out), filter .25s;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(74, 157, 94, 0.22), 0 2px 4px rgba(74, 157, 94, 0.12);
  color: #fff;
}
/* Subtiel diagonaal glanzend streepje voor premium uitstraling */
.buyer-protection-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  transform: skewX(-20deg);
  transition: left .65s var(--ease-out);
  pointer-events: none;
}
.buyer-protection-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(74, 157, 94, 0.32), 0 4px 8px rgba(74, 157, 94, 0.18);
  filter: brightness(1.04);
}
.buyer-protection-box:hover::before { left: 130%; }
.buyer-protection-box:active { transform: translateY(0) scale(.995); }
.buyer-protection-box:focus-visible {
  outline: 3px solid var(--green-soft);
  outline-offset: 3px;
}
.buyer-protection-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(15, 61, 46, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.buyer-protection-content { flex: 1; min-width: 0; }
.buyer-protection-title {
  font-family: 'Poppins', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .35rem;
  letter-spacing: -.005em;
  text-shadow: 0 1px 2px rgba(15, 61, 46, 0.15);
}
.buyer-protection-title i {
  color: #fff;
  font-size: .75rem;
  opacity: .95;
}
.buyer-protection-link {
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-decoration: none;
  margin: .2rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  letter-spacing: .01em;
}
.buyer-protection-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
}
.buyer-protection-link i {
  font-size: .6rem;
  transition: transform .2s var(--ease-out);
}
.buyer-protection-box:hover .buyer-protection-link i {
  transform: translateX(3px);
}

/* Buyer protection modal */
.buyer-protection-info { padding: 1rem 0; }
.buyer-protection-info-item {
  display: flex;
  gap: .875rem;
  align-items: flex-start;
  padding: .875rem 0;
  border-bottom: 1px solid var(--border);
}
.buyer-protection-info-item:last-child { border-bottom: none; }
.buyer-protection-info-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--green-light);
  color: var(--green-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  flex-shrink: 0;
}
.buyer-protection-info-text h4 {
  font-family: 'Poppins', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 .25rem;
}
.buyer-protection-info-text p {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
  font-family: 'Nunito', sans-serif;
}

/* Notification stack responsive */
@media (max-width: 640px) {
  #notificationStack {
    left: .5rem !important;
    right: .5rem !important;
    bottom: .5rem !important;
    max-width: none !important;
    gap: .5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════
   V12 PRODUCT CONDITION GRADE — moderne pill-weergave
   Geïntegreerd in het soft & playful design system.
   Kleur per grade:
     excellent  → groen (topkwaliteit)
     goed       → blauw (solid)
     redelijk   → geel (acceptable)
     beschadigd → perzik (functioneel, met cosmetische schade)
   ═══════════════════════════════════════════════════════ */
.condition-grade {
  --cg-tint:        var(--green-light);
  --cg-tint-strong: var(--green);
  --cg-ink:         var(--green-mid);
  --cg-star:        #f5b53d;
  --cg-star-empty:  rgba(45, 58, 46, 0.16);

  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .65rem .3rem .5rem;
  background: var(--cg-tint);
  border: 1px solid color-mix(in srgb, var(--cg-tint-strong) 22%, transparent);
  border-radius: 100px;
  font-family: 'Poppins', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
  letter-spacing: -.005em;
  cursor: default;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  white-space: nowrap;
  vertical-align: middle;
}
.condition-grade__stars {
  display: inline-flex;
  gap: .12rem;
  font-size: .65rem;
  line-height: 1;
}
.condition-grade__stars i {
  color: var(--cg-star);
  font-size: inherit;
  filter: drop-shadow(0 1px 1px rgba(245, 181, 61, 0.25));
}
/* Lege sterren (far) = zachte grijze tint, geen gloed */
.condition-grade__stars i.far {
  color: var(--cg-star-empty);
  filter: none;
}
.condition-grade__label {
  font-weight: 700;
  color: var(--cg-ink);
  letter-spacing: .01em;
}
.condition-grade__desc {
  display: none;
  font-weight: 500;
  color: var(--text-muted);
  font-size: .8rem;
}

/* Per-grade kleurpalet — zacht, speels, onderscheidend */
.condition-grade--excellent {
  --cg-tint:        var(--green-light);
  --cg-tint-strong: var(--green);
  --cg-ink:         var(--green-mid);
}
.condition-grade--goed {
  --cg-tint:        var(--blue-soft);
  --cg-tint-strong: var(--blue);
  --cg-ink:         var(--blue-deep);
}
.condition-grade--redelijk {
  --cg-tint:        var(--yellow-soft);
  --cg-tint-strong: var(--yellow);
  --cg-ink:         var(--yellow-deep);
}
.condition-grade--beschadigd {
  --cg-tint:        var(--warm-light);
  --cg-tint-strong: var(--warm);
  --cg-ink:         var(--warm-deep);
}

/* Subtiele hover op productkaarten */
.product-card .condition-grade:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--cg-tint-strong) 25%, transparent);
}

/* Grote variant in product-modal */
.condition-grade--lg {
  padding: .55rem .9rem .55rem .75rem;
  font-size: .85rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--cg-tint-strong) 18%, transparent);
}
.condition-grade--lg .condition-grade__stars { font-size: .8rem; gap: .15rem; }
.condition-grade--lg .condition-grade__label { font-size: .95rem; font-weight: 800; }
.condition-grade--lg .condition-grade__desc {
  display: inline;
  margin-left: .25rem;
  font-weight: 500;
}

/* Donkere-modus verfijning (indien ooit gebruikt) */
@media (prefers-color-scheme: dark) {
  .condition-grade {
    border-color: color-mix(in srgb, var(--cg-tint-strong) 35%, transparent);
  }
}

/* Reduced motion: geen hover-animaties */
@media (prefers-reduced-motion: reduce) {
  .condition-grade,
  .product-card .condition-grade:hover { transition: none; transform: none; }
}

/* Mobiele compacte weergave — pill iets kleiner */
@media (max-width: 640px) {
  .condition-grade { font-size: .68rem; padding: .25rem .55rem .25rem .45rem; }
  .condition-grade__stars { font-size: .6rem; }
}


/* ===== shop-theme.css ===== */
/* Lagenco Storefront 2026 — bespoke blue / yellow hardware & audio theme.
   Original interactions and admin tooling remain in script.js. */
:root {
  --bg:#f2f8fd;--bg-2:#e7f3fc;--bg-3:#e3eff9;--card:#fff;
  --text:#132a40;--text-muted:#5b6978;--text-faint:#8b9dab;
  --green:#075ca9;--green-mid:#064e91;--green-soft:#2280cc;--green-light:#e3f1ff;
  --green-glow:rgba(10,99,179,.15);--warm:#ffd529;--warm-deep:#d49b00;
  --warm-light:#fff6c5;--peach:#ffcf24;--peach-deep:#e5a300;--peach-soft:#fff4c4;
  --yellow:#ffdb27;--yellow-deep:#e7ae00;--yellow-soft:#fff8d4;
  --blue:#095ca9;--blue-deep:#034581;--blue-soft:#e1f1ff;
  --border:#dce7f1;--border-2:#bed2e4;--border-soft:#edf3f8;
  --radius-xs:.35rem;--radius-sm:.5rem;--radius:.7rem;--radius-lg:.95rem;--radius-xl:1.25rem;--radius-2xl:1.5rem;
  --shadow-xs:0 1px 3px rgba(15,52,82,.045);--shadow-sm:0 3px 11px rgba(15,52,82,.065);--shadow-md:0 8px 25px rgba(15,52,82,.09);--shadow-lg:0 16px 38px rgba(15,52,82,.12);
  --shadow-green:0 8px 24px rgba(5,86,159,.2);--font-display:'Inter','Poppins',Arial,sans-serif;--font-body:'Inter','Poppins',Arial,sans-serif;--nav-h:112px;--max-w:1400px;
}
*{box-sizing:border-box}
html{scroll-padding-top:135px}
body{background:#f0f7fd!important;background-image:none!important;color:var(--text);font-family:'Inter','Poppins',sans-serif!important;line-height:1.5}
body:before{display:none!important}
h1,h2,h3,h4,h5,button,a,input,select{font-family:'Inter','Poppins',Arial,sans-serif}
a{text-decoration:none}
.shop-container{width:min(1400px,calc(100% - 64px));margin-left:auto;margin-right:auto}
.shop-usps{background:#064579;color:white;min-height:39px;display:flex;align-items:center;font-size:12px;font-weight:600}
.usp-inner{display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.usp-inner>span{text-align:center;padding:9px 12px;border-right:1px solid rgba(0,0,0,.25);white-space:nowrap}
.usp-inner>span:last-child{border:0}.usp-inner i{margin-right:9px;font-size:14px}
.nav.shop-header{position:sticky!important;top:0;z-index:1100!important;background:#075ba5!important;border-bottom:none!important;box-shadow:0 5px 20px rgba(5,55,100,.12);height:auto!important;backdrop-filter:none!important}
.shop-header-main{display:flex;align-items:center;gap:30px;min-height:80px}
.shop-logo{color:white!important;font-size:23px;font-weight:900;display:flex;align-items:center;gap:10px;letter-spacing:-1px;white-space:nowrap;line-height:1;text-decoration:none!important}
.shop-logo>span:last-child{position:relative}.shop-logo small{display:block;letter-spacing:2.4px;font-size:9px;color:#ffdd38;margin-top:6px;font-weight:800}
.shop-logo-mark{display:flex;align-items:center;justify-content:center;width:43px;height:43px;border:3px solid #ffdc2d;border-radius:12px;font-size:27px;font-weight:900;font-style:italic;color:#ffdb2b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.shop-logo-dot,.shop-footer-logo span{color:#ffdc2c}
.shop-global-search{display:flex;align-items:stretch;flex:1;max-width:695px;margin:0 auto;height:49px;border-radius:100px;overflow:hidden;background:white;border:2px solid rgba(255,255,255,.2)}
.shop-global-search input{width:100%;min-width:0;border:0!important;outline:0!important;box-shadow:none!important;background:#fff!important;color:#223c53!important;padding:0 22px;font-size:14px}
.shop-global-search button{width:60px;flex-shrink:0;border:0;background:#fff;color:#627485;font-size:20px;cursor:pointer}
.shop-global-search button:hover{color:#075ba5;background:#f2f8ff}
.shop-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.shop-header-action{position:relative;border:0;background:none;color:#fff!important;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:500;min-width:73px;padding:6px 2px;text-decoration:none!important;line-height:1.1}
.shop-header-action i{font-size:20px}.shop-header-action:hover{color:#fff4b2!important}.shop-header-action .nav-badge,#shopCartCount{position:absolute;top:0;right:9px;min-width:17px;height:17px;border-radius:20px;background:#ffe03e;color:#173c63;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;padding:0 3px}
.shop-nav-row{background:#fff;color:#182e43;border-top:1px solid rgba(255,255,255,.1)}
.shop-nav-inner{display:flex;align-items:center;gap:28px;min-height:51px}.shop-nav-inner>a,.shop-nav-all{color:#25364b!important;font-size:13px;font-weight:650;text-decoration:none!important;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}.shop-nav-inner>a:hover,.shop-nav-all:hover{color:#075ba5!important}
.shop-nav-all{height:51px}.shop-nav-all .shop-small-icon{font-size:10px;margin-left:2px}.shop-nav-menu{position:relative}.shop-megamenu{display:none;position:absolute;top:100%;left:0;min-width:250px;background:white;box-shadow:0 14px 35px #123b5a30;border:1px solid #d9e6f2;border-radius:0 0 12px 12px;padding:8px;z-index:1500}.shop-nav-menu:hover .shop-megamenu,.shop-nav-menu:focus-within .shop-megamenu{display:flex;flex-direction:column}.shop-megamenu a{padding:12px 11px;border-radius:6px;color:#1d3d56;text-decoration:none;font-size:13px}.shop-megamenu a:hover{background:#e5f3ff;color:#075ba5}.shop-megamenu i{width:24px;color:#075ba5}
.shop-nav-inner .nav-deals{color:#b26300!important}.shop-promo{background:#e8f2fb;color:#24496e;border-bottom:1px solid #d6e7f6}.shop-promo>.shop-container{display:flex;align-items:center;justify-content:center;gap:12px;padding:10px 0;font-size:12px}.shop-promo strong{font-size:12px}.shop-promo a{color:#075ba5;font-weight:750;white-space:nowrap}
.shop-primary-btn,.shop-yellow-btn,.shop-outline-btn{display:inline-flex;gap:14px;align-items:center;justify-content:center;border-radius:7px;padding:14px 23px;font-size:14px;font-weight:800;text-decoration:none!important;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.shop-primary-btn{color:#fff!important;background:#075ba5;box-shadow:0 4px 12px #075ba51f}.shop-primary-btn:hover{background:#03467f;transform:translateY(-2px)}.shop-outline-btn{background:#fff;border:1.5px solid #b8cede;color:#16466e!important}.shop-outline-btn:hover{background:#e6f3ff;transform:translateY(-2px)}.shop-yellow-btn{background:#ffde2a;color:#123253!important}.shop-yellow-btn:hover{background:#f7c500;transform:translateY(-2px)}
.market-hero{background:linear-gradient(115deg,#edf7ff 0%,#e8f4fe 47%,#d7eaf9 100%);overflow:hidden;position:relative}
.market-hero-grid{display:grid;grid-template-columns:48% 52%;min-height:465px;align-items:center;gap:0}
.market-hero-copy{position:relative;z-index:5;padding:62px 0 68px 15px}
.market-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:850;letter-spacing:1.2px;color:#075ba5;margin-bottom:19px}.market-eyebrow i{color:#e8a900}
.market-hero h1{font-size:clamp(42px,4.6vw,73px);font-weight:900;letter-spacing:-3px;line-height:1.06;margin:0 0 18px;color:#142c42}.market-hero h1 span{color:#075ba5}.market-hero-copy>p{max-width:520px;color:#455b6d;font-size:16px;line-height:1.7;margin:0 0 23px}
.market-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}.market-hero-features{display:flex;gap:24px;flex-wrap:wrap;color:#244b6b;font-size:12px;font-weight:650}.market-hero-features i{color:#075ba5;font-size:15px;margin-right:4px}
.market-hero-art{height:430px;position:relative;overflow:visible}.market-art-dot{position:absolute;inset:15px 10px 0 40px;background:radial-gradient(ellipse at 56% 50%,#b7d8f2 0,#d5eafa 58%,transparent 70%);border-radius:50%}.market-art-card{position:absolute;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 21px 45px #31597720;border:4px solid white}.market-art-card img{width:100%;height:100%;object-fit:cover}.market-art-drill{width:54%;height:66%;bottom:38px;left:8%;transform:rotate(-8deg)}.market-art-mic{width:47%;height:67%;top:15px;right:4%;transform:rotate(7deg)}
.market-art-sticker{position:absolute;left:29%;bottom:12px;background:#ffdd2f;color:#163c67;border:5px solid #fff;box-shadow:0 8px 23px #174d7525;font-size:24px;font-weight:950;padding:17px 25px;border-radius:14px;transform:rotate(-3deg);white-space:nowrap}.market-art-sticker span{color:#075ba5}.market-art-sticker small{display:block;font-size:9px;letter-spacing:1.8px;margin-top:3px}.market-art-sale{position:absolute;top:32px;left:0;background:#075ba5;color:#fff;padding:13px 18px;border-radius:10px;font-size:16px;font-weight:900;transform:rotate(-10deg);box-shadow:0 10px 22px #075ba527}.market-art-sale small{display:block;color:#ffda2b;font-size:9px;letter-spacing:1px}
.shop-section{padding-top:52px;padding-bottom:35px}.shop-section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:24px}.shop-section h2,.shop-section-head h2{font-size:clamp(25px,3vw,35px);font-weight:900;color:#162d40;margin:5px 0 6px;letter-spacing:-1px;line-height:1.2}.shop-section-head p{color:#627389;font-size:14px;margin:0}.shop-kicker{display:inline-block;color:#075ba5;font-weight:900;font-size:11px;letter-spacing:1.6px}.shop-text-link{color:#095a9d!important;font-weight:800;font-size:13px;white-space:nowrap}
.shop-category-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.shop-category-card{position:relative;border:1px solid #e0e7ed;border-radius:11px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 9px #22496709;background:#fff;min-width:0;padding-bottom:20px;transition:transform .2s,box-shadow .2s}.shop-category-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px #22496724}.shop-category-card img{width:100%;height:166px;object-fit:cover;margin-bottom:16px}.shop-category-name{font-size:15px;font-weight:850;color:#203b51;padding:0 15px}.shop-category-desc{font-size:12px;color:#6b7c89;padding:3px 15px 0}.shop-category-arrow{position:absolute;right:12px;bottom:16px;width:29px;height:29px;background:#075ba5;color:#fff;display:grid;place-items:center;border-radius:5px;font-size:12px}
.shop-offer-layout{display:grid;grid-template-columns:1.08fr .92fr;gap:16px;padding-top:12px}.shop-offer-main{min-height:350px;border-radius:14px;overflow:hidden;background:#182e46;display:flex;align-items:center;padding:36px;position:relative;color:white!important}.shop-offer-main>div{position:relative;z-index:2;max-width:66%}.shop-offer-main h2{font-size:clamp(30px,3vw,49px);font-weight:900;letter-spacing:-1.6px;line-height:1.1;margin:14px 0;color:white}.shop-offer-main p{font-size:14px;color:#d9e4ec;line-height:1.65;margin-bottom:22px}.shop-offer-tag{color:#ffdb2c;font-size:11px;font-weight:900;letter-spacing:1.3px}.shop-offer-button{display:inline-flex;align-items:center;gap:12px;background:#ffdd28;color:#102e4a;padding:12px 18px;font-size:13px;font-weight:900;border-radius:6px}.shop-offer-main>img{width:47%;height:82%;object-fit:cover;position:absolute;right:-22px;top:9%;border-radius:20px;transform:rotate(-8deg);border:5px solid white;box-shadow:0 10px 25px #0004}.shop-offer-side{display:flex;flex-direction:column;gap:16px}.shop-offer-tile{position:relative;display:flex;align-items:center;padding:22px 28px;flex:1;border-radius:13px;overflow:hidden;min-height:165px}.shop-offer-tile>div{position:relative;z-index:2}.shop-offer-tile span{font-size:10px;letter-spacing:1.4px;font-weight:900}.shop-offer-tile h3{font-size:27px;font-weight:900;margin:5px 0 1px;letter-spacing:-.6px}.shop-offer-tile p{margin:0 0 8px;font-size:12px}.shop-offer-tile b{font-size:12px}.shop-offer-tile img{position:absolute;width:37%;height:110%;right:-10px;top:-3%;object-fit:cover;border-radius:100px 0 0 100px;opacity:.96}.mic-tile{background:#0c65b3;color:#fff!important}.mic-tile span{color:#ffdf44}.outlet-tile{background:#ffdc2b;color:#142f4b!important}.outlet-tile span{color:#805000}.shop-discount-graphic{position:absolute!important;right:25px;bottom:1px;font-size:56px;letter-spacing:-4px;font-weight:1000;transform:rotate(-10deg);color:#0756a1}.shop-discount-graphic span{font-size:85px;color:#df1a31}
.shop-trust-strip{margin-top:32px;margin-bottom:10px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.shop-trust-strip>div{display:flex;align-items:center;gap:12px;padding:17px 20px;background:#fff;border:1px solid #dfe8ef;border-radius:9px}.shop-trust-strip i{color:#075ba5;font-size:25px;width:28px;text-align:center}.shop-trust-strip strong,.shop-trust-strip small{display:block}.shop-trust-strip strong{font-size:13px;color:#162d44}.shop-trust-strip small{font-size:11px;color:#688093}
.shop-featured-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.shop-featured-empty{grid-column:1/-1;background:#fff;min-height:176px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed #aac8e0;border-radius:10px;text-align:center;padding:25px}.shop-featured-empty i{font-size:28px;color:#0c61aa}.shop-featured-empty h3{font-size:18px;font-weight:800;margin:8px 0 3px}.shop-featured-empty p{font-size:13px;color:#62788a;margin:0 0 14px}.shop-featured-empty .shop-primary-btn{font-size:12px;padding:10px 14px}
.shop-featured-grid .card,.shop-featured-grid .product-card,.shop-featured-grid .card-img{border-radius:8px}.shop-featured-grid .card-img{aspect-ratio:1.13}.shop-featured-grid .card-img img{object-fit:contain;background:#fff}.shop-featured-grid .card{background:white;border:1px solid #dae7f1;box-shadow:none}.shop-featured-grid .card>div:last-child{padding:15px!important}.shop-featured-grid h3{font-size:15px!important}.shop-featured-grid p{font-size:12px!important;line-height:1.45}
.shop-sale-strip{display:flex;align-items:center;justify-content:space-between;gap:25px;position:relative;overflow:hidden;margin-top:15px;margin-bottom:24px;padding:27px 45px;background:linear-gradient(105deg,#075ba5,#023e7b);border-radius:12px;color:white}.shop-sale-strip>div,.shop-sale-strip>a{position:relative;z-index:1}.shop-sale-strip span{font-weight:850;font-size:11px;color:#ffde2b;letter-spacing:1.1px}.shop-sale-strip h2{font-size:28px;font-weight:900;letter-spacing:-.5px;margin:4px 0}.shop-sale-strip h2 em{font-style:normal;color:#ffdb2f}.shop-sale-strip .shop-primary-btn{background:#fff;color:#075ba5!important}.shop-sale-watermark{position:absolute;right:24%;font-size:150px;opacity:.07;transform:rotate(-18deg)}
.shop-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.shop-steps article{position:relative;background:#fff;border:1px solid #dce8f1;padding:26px 22px;border-radius:10px;min-height:235px}.shop-steps article>i{display:block;font-size:29px;color:#075ca9;margin:15px 0 12px}.shop-steps h3{font-size:17px;font-weight:850;margin:8px 0}.shop-steps p{font-size:13px;color:#627488;line-height:1.55}.step-no{font-size:11px;font-weight:900;color:#075ba5;background:#e4f2ff;border-radius:20px;padding:6px 10px}
.shop-business-section{background:#073f77;color:white;margin-top:38px;margin-bottom:30px}.shop-business-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:10%;align-items:center;padding-top:57px;padding-bottom:57px}.shop-business-kicker{color:#ffdf38;font-size:11px;font-weight:850;letter-spacing:1.2px}.shop-business-section h2{font-size:clamp(30px,3.8vw,47px);line-height:1.12;color:white;font-weight:900;letter-spacing:-1px;margin:10px 0 18px}.shop-business-section p{font-size:14px;max-width:545px;color:#d8e5f3;line-height:1.8;margin:0 0 24px}.shop-business-benefits{display:flex;flex-direction:column;gap:19px}.shop-business-benefits>div{display:flex;gap:15px;align-items:start}.shop-business-benefits i{color:#ffde31;font-size:19px;margin-top:5px}.shop-business-benefits strong,.shop-business-benefits small{display:block}.shop-business-benefits strong{color:white;font-size:15px}.shop-business-benefits small{color:#cddfee;font-size:12px;margin-top:4px}
.shop-bottom-cta{display:flex;align-items:center;justify-content:space-between;gap:25px;background:#fff;border:1px solid #dce9f3;border-radius:12px;padding:25px 35px;margin-top:30px;margin-bottom:50px}.shop-bottom-cta h2{font-weight:850;font-size:23px;margin:4px 0}.shop-bottom-cta p{font-size:13px;color:#64788c;margin:0}
.shop-footer{background:#092f54!important;color:white!important;margin-top:50px!important}.shop-footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:45px;padding-top:51px;padding-bottom:44px}.shop-footer-grid>div{min-width:0}.shop-footer-logo{font-weight:950;font-size:30px;color:white!important;letter-spacing:-1px;display:inline-block;margin-bottom:10px}.shop-footer-grid p{color:#b8d0e2;font-size:12px;line-height:1.7;max-width:285px}.shop-footer-grid h3{font-size:13px;color:#fff;font-weight:850;margin:7px 0 18px}.shop-footer-grid a:not(.shop-footer-logo){display:block;font-size:12px;color:#c2d7e7;text-decoration:none;margin:0 0 11px}.shop-footer-grid a:hover{color:#ffdc2c}.shop-footer-social{display:flex;gap:15px;margin-top:19px}.shop-footer-social a{font-size:17px!important}.shop-footer-bottom{border-top:1px solid #315470;display:flex;justify-content:space-between;gap:10px;padding-top:18px;padding-bottom:20px;font-size:11px;color:#9fbcd1}
/* Category filters / catalogue */
.shop-catalog-hero{background:linear-gradient(110deg,#e6f3fc,#f5faff);padding:54px 0 46px;border-bottom:1px solid #d9e9f5}.shop-catalog-hero h1{font-size:clamp(31px,4vw,49px);font-weight:900;letter-spacing:-1.7px;color:#142e45;margin:7px 0 12px}.shop-catalog-hero p{font-size:15px;color:#5a6d7d;max-width:580px;line-height:1.6}.shop-type-filters{display:flex;gap:10px;flex-wrap:wrap;max-width:1400px;margin:18px auto 4px;padding:0 32px}.shop-type-filter{cursor:pointer;font-size:12px;font-weight:750;padding:10px 16px;border:1px solid #bbd6e8;border-radius:7px;background:white;color:#1a507b}.shop-type-filter:hover,.shop-type-filter.active{background:#075ba5;color:white;border-color:#075ba5}
.filter-pill{border-radius:6px!important}.filter-pill.active{background:#075ba5!important;color:#fff!important;border-color:#075ba5!important}.sort-select,.search-bar,.login-input{border-radius:6px!important}.search-bar{background:#fff!important}.card.product-card{border-radius:9px!important;overflow:hidden!important;border:1px solid #dce6ef!important;box-shadow:0 2px 8px #0b42611a!important;background:#fff!important}.card.product-card:hover{box-shadow:0 8px 22px #0b426132!important}.product-card .card-img{background:white!important}.product-card .card-img img{object-fit:contain!important;padding:12px}.product-card .btn-primary,.btn-primary,.btn-green{background:#075ba5!important;border-color:#075ba5!important;color:#fff!important;border-radius:6px!important}.product-card .btn-primary:hover,.btn-primary:hover{background:#01467f!important}.badge-sale{background:#ffe24b!important;color:#1f3548!important}
.btn-warm{background:#ffda2d!important;color:#13304a!important;border-color:#e8bb13!important}.nav-badge{border:0}
#adminPanel{background:#fff;border:1px solid #dce7f1;border-radius:12px;padding:20px}.shop-legacy-community{background:white;border:1px solid #dfe9f3;border-radius:14px;padding:26px!important;margin-bottom:30px!important;margin-top:45px!important}
.hero-gradient{background:#e7f3fe!important;box-shadow:none!important}.hero-gradient h1{font-family:'Inter',sans-serif!important;font-weight:900!important;color:#18384e!important}.hero-gradient p{color:#526b7e!important}.hero-gradient img{border-radius:9px}
.legal-page,.contact-page{background:white}.login-left{background:#075ba5!important}.login-left h2{font-family:'Inter',sans-serif!important}.login-panel,.modal-panel{border-radius:12px!important}.product-modal h2{font-family:'Inter',sans-serif!important}
/* Utility fixes: elements that were authored with inline green/peach styles */
[style*="color:var(--green)"]{color:var(--green)!important}
[style*="background:var(--green-light)"]{background:var(--green-light)!important}
/* Old decorative overlays should not obscure new marketing pages */
#floatingReviews{display:none!important}
@media(max-width:1160px){.shop-container{width:min(100% - 36px,1400px)}.usp-inner>span{font-size:10px}.shop-header-main{gap:15px}.shop-header-action{min-width:57px}.shop-nav-inner{gap:15px}.market-hero-grid{grid-template-columns:50% 50%}.shop-category-card img{height:138px}.shop-offer-main>div{max-width:70%}}
@media(max-width:840px){.shop-usps .usp-inner{grid-template-columns:repeat(2,1fr)}.usp-inner>span:nth-child(n+3){display:none}.shop-header-main{flex-wrap:wrap;padding:13px 0;gap:12px}.shop-logo{font-size:18px}.shop-logo-mark{width:34px;height:34px;font-size:21px}.shop-global-search{order:3;max-width:none;flex-basis:100%;height:42px}.shop-header-actions{margin-left:auto}.shop-header-action{font-size:10px;min-width:48px}.shop-header-action i{font-size:18px}.shop-nav-inner{gap:20px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}.shop-nav-inner::-webkit-scrollbar{display:none}.shop-promo>.shop-container{justify-content:space-between}.shop-promo span{display:none}.market-hero-grid{grid-template-columns:1fr 1fr;min-height:380px}.market-hero-copy{padding:44px 0}.market-hero h1{font-size:43px;letter-spacing:-2px}.market-hero-copy>p{font-size:13px}.market-hero-art{height:350px}.market-art-sticker{font-size:15px;padding:10px 14px}.market-art-sale{font-size:12px}.shop-category-grid{grid-template-columns:repeat(3,1fr)}.shop-offer-layout{grid-template-columns:1fr}.shop-offer-main{min-height:300px}.shop-offer-side{flex-direction:row}.shop-offer-tile{min-height:190px}.shop-offer-tile img{width:45%}.shop-trust-strip{grid-template-columns:repeat(2,1fr)}.shop-featured-grid{grid-template-columns:repeat(2,1fr)}.shop-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.shop-container{width:calc(100% - 26px)}.shop-usps{min-height:29px}.usp-inner>span{padding:7px 2px;font-size:9px}.usp-inner i{margin-right:3px;font-size:10px}.shop-header-main{gap:7px}.shop-header-actions{gap:2px}.shop-header-action{min-width:42px}.shop-header-action span:not(.nav-badge){display:none}.shop-header-action i{font-size:18px}.shop-logo{font-size:17px}.shop-logo-mark{width:31px;height:31px;font-size:19px}.shop-logo small{letter-spacing:1px;font-size:7px}.shop-nav-inner{min-height:44px}.shop-nav-all{height:44px}.shop-promo>.shop-container{font-size:9px}.shop-promo strong{font-size:9px}.shop-promo a{font-size:9px}.market-hero-grid{grid-template-columns:1fr;min-height:auto}.market-hero-copy{padding:40px 2px 25px}.market-hero h1{font-size:44px}.market-hero-art{height:310px;margin-bottom:15px}.market-art-card{border-width:3px}.market-art-drill{left:9%;width:54%;bottom:26px;height:68%}.market-art-mic{width:48%;top:10px}.market-art-sale{top:12px}.market-art-sticker{left:26%;bottom:5px}.market-hero-features{gap:13px;font-size:10px}.shop-section{padding-top:36px;padding-bottom:16px}.shop-section-head{align-items:start;gap:12px}.shop-section-head h2{font-size:26px}.shop-section-head p{font-size:12px}.shop-text-link{font-size:11px}.shop-category-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:13px}.shop-category-card{min-width:160px;scroll-snap-align:start}.shop-category-card img{height:120px}.shop-offer-main{padding:22px;min-height:295px}.shop-offer-main>div{max-width:66%}.shop-offer-main h2{font-size:28px}.shop-offer-main p{font-size:12px}.shop-offer-main>img{width:44%;height:64%;top:18%}.shop-offer-side{flex-direction:column}.shop-offer-tile{min-height:150px}.shop-trust-strip{gap:8px}.shop-trust-strip>div{padding:12px 9px;gap:9px}.shop-trust-strip i{font-size:21px;width:22px}.shop-trust-strip strong{font-size:12px}.shop-trust-strip small{font-size:10px}.shop-featured-grid{gap:8px}.shop-sale-strip{padding:22px 19px;gap:10px}.shop-sale-strip h2{font-size:19px}.shop-sale-strip .shop-primary-btn{font-size:11px;padding:10px}.shop-steps{grid-template-columns:repeat(2,1fr);gap:8px}.shop-steps article{min-height:230px;padding:17px 14px}.shop-steps h3{font-size:14px}.shop-steps p{font-size:11px}.shop-business-grid{grid-template-columns:1fr;padding-top:34px;padding-bottom:36px;gap:28px}.shop-business-section h2{font-size:33px}.shop-business-section p{font-size:13px}.shop-bottom-cta{padding:23px 18px;display:block}.shop-bottom-cta h2{font-size:19px}.shop-bottom-cta .shop-primary-btn{margin-top:16px}.shop-footer-grid{gap:20px;padding-top:38px}.shop-footer-grid h3{font-size:12px}.shop-footer-bottom{flex-direction:column}.shop-type-filters{padding:0 13px}.shop-catalog-hero{padding:34px 0}.shop-catalog-hero h1{font-size:32px}#productGrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}#productGrid .p-6{padding:12px!important}#productGrid h3{font-size:14px!important}#productGrid p{font-size:11px!important}}
/* Enquiry basket */
.shop-add-btn{width:calc(100% - 24px);margin:0 12px 13px;background:#075ba5;color:#fff;border:0;border-radius:7px;font-size:12px;font-weight:800;padding:11px 8px;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:10px;transition:background .2s}.shop-add-btn:hover{background:#003e79}.shop-modal-add{width:100%;margin:12px 0 10px;min-height:46px;font-size:14px}.shop-cart-overlay{position:fixed;inset:0;z-index:2998;background:#0c223b88}.shop-cart-overlay[hidden]{display:none}.shop-cart-drawer{position:fixed;top:0;right:0;height:100dvh;width:min(450px,100vw);background:white;z-index:2999;box-shadow:-15px 0 45px #0002;transform:translateX(110%);transition:transform .27s ease;display:flex;flex-direction:column;color:#19334b}.shop-cart-drawer.is-open{transform:translateX(0)}.shop-cart-heading{display:flex;align-items:center;justify-content:space-between;padding:27px 25px 17px;border-bottom:1px solid #e0eaf3}.shop-cart-heading h2{font-size:26px;font-weight:900;margin:4px 0}.shop-cart-close{font-size:29px;background:none;border:0;cursor:pointer;color:#3e5368}.shop-cart-notice{margin:16px 23px;padding:12px 14px;background:#fff8d8;border-left:4px solid #ffdc2d;font-size:12px;line-height:1.6;color:#624d24}.shop-cart-notice i{color:#aa7900;margin-right:5px}#shopCartItems{padding:15px 23px;flex:1;overflow:auto}.shop-cart-line{display:flex;align-items:center;gap:15px;justify-content:space-between;border-bottom:1px solid #e3edf4;padding:15px 0}.shop-cart-line strong{font-size:13px;line-height:1.4;display:block}.shop-cart-line small{display:block;color:#71889a;font-size:12px;margin-top:6px}.shop-qty{display:flex;gap:8px;align-items:center}.shop-qty button{width:28px;height:28px;border:1px solid #bfd4e4;border-radius:5px;background:#e7f2fc;color:#075ba5;font-size:18px;cursor:pointer}.shop-qty span{font-size:13px;font-weight:800}.shop-cart-bottom{border-top:1px solid #dfeaf3;padding:18px 24px 25px}.shop-cart-bottom #shopCartTotal>div{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px}.shop-cart-bottom #shopCartTotal small{display:block;font-size:11px;color:#677f93;margin-bottom:14px}.shop-cart-continue{width:100%;margin-top:12px;border:0;background:none;color:#075ba5;font-size:13px;font-weight:700;cursor:pointer}.shop-cart-empty{text-align:center;padding:65px 15px}.shop-cart-empty i{font-size:45px;color:#7aa8d1}.shop-cart-empty h3{font-size:20px;margin:19px 0 7px}.shop-cart-empty p{color:#6b7d8d;font-size:13px;line-height:1.6}.shop-cart-empty .shop-primary-btn{margin-top:15px}.shop-cart-open{overflow:hidden}
.shop-about-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:75px;align-items:center;padding-top:70px;padding-bottom:48px}.shop-about-intro h2{font-size:40px;line-height:1.18;font-weight:900;letter-spacing:-1px;margin:12px 0}.shop-about-intro p{color:#617588;font-size:15px;line-height:1.85;margin:0 0 17px}.shop-about-intro .shop-primary-btn{margin-top:16px}.shop-about-images{display:flex;align-items:center;gap:14px}.shop-about-images img{width:50%;border-radius:13px;box-shadow:0 10px 25px #15588b15}.shop-contact-note{font-size:12px;color:#5e7286;background:#eaf5fd;padding:14px;border:1px solid #ccdfed;border-radius:7px;margin-top:13px}.shop-legal-notice{padding:18px 20px;margin:20px 0;background:#fff8df;border-left:5px solid #ffcf28;border-radius:7px;color:#4a4128}.shop-legal-notice strong{font-size:14px}.shop-legal-notice p{font-size:12px;margin:6px 0 0}.legal-page{background:transparent!important}
@media(max-width:750px){.shop-about-intro{grid-template-columns:1fr;gap:25px;padding-top:45px}.shop-about-intro h2{font-size:31px}}

/* Preserve original hidden panels even if the Tailwind CDN cannot load. */
.hidden,[hidden]{display:none!important}
.shop-legacy-community{display:none!important}
.shop-footer{min-height:0!important}

.shop-favourites-note{max-width:1400px;margin:15px auto 0;padding:13px 16px;background:#fff6d2;color:#614c14;border:1px solid #f0d98d;border-radius:7px;font-size:13px}
/* Always paint the new footer (older theme deferred its content off-screen). */
footer.shop-footer{content-visibility:visible!important;contain-intrinsic-size:none!important;background:#092f54!important}


/* ===== shop-motion.css ===== */
/* === Lagenco motion & exit-intent experience (v2) === */
/* Reveal motion is opt-in from JS: pages remain fully visible if JS is disabled. */
@media (prefers-reduced-motion: no-preference) {
  html.lagenco-motion .motion-reveal:not(.is-visible) {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  html.lagenco-motion .motion-reveal {
    transition: opacity .64s cubic-bezier(.22, 1, .36, 1),
                transform .64s cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  html.lagenco-motion .motion-reveal.is-visible { opacity: 1; transform: translate3d(0,0,0); }
  .market-hero-copy .market-eyebrow { animation: lagenco-rise .72s .05s backwards; }
  .market-hero-copy h1 { animation: lagenco-rise .8s .12s backwards; }
  .market-hero-copy > p { animation: lagenco-rise .8s .2s backwards; }
  .market-hero-actions { animation: lagenco-rise .8s .31s backwards; }
  .market-hero-features { animation: lagenco-rise .8s .4s backwards; }
  .market-hero-art { animation: lagenco-art-in .95s .2s backwards; }
  @keyframes lagenco-rise {
    from {opacity:0;transform:translateY(24px)}
    to {opacity:1;transform:translateY(0)}
  }
  @keyframes lagenco-art-in {
    from { opacity:0; transform:translate(10px, 22px) scale(.97); }
    to { opacity:1; transform:translate(0,0) scale(1); }
  }
  @media (hover:hover) and (pointer:fine) {
    .market-art-card { transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s; }
    .market-art-card:hover { transform:translateY(-8px) rotate(-1deg); box-shadow:0 18px 35px #143f6530; }
    .shop-offer-main,.shop-offer-tile { transition:box-shadow .3s, transform .3s cubic-bezier(.22,1,.36,1); }
    .shop-offer-main:hover,.shop-offer-tile:hover {transform:translateY(-4px);box-shadow:0 18px 38px #123f6b23;}
    .shop-primary-btn:hover,.shop-yellow-btn:hover,.shop-outline-btn:hover { transform:translateY(-2px);box-shadow:0 8px 24px #08457a20; }
    .shop-category-card:hover img { transform:scale(1.045); }
  }
  .shop-category-card img { transition: transform .4s cubic-bezier(.22,1,.36,1); }
  @media (hover:hover) and (pointer:fine) {
    html.lagenco-motion .motion-reveal.is-visible.shop-category-card:hover,
    html.lagenco-motion .motion-reveal.is-visible.shop-offer-main:hover,
    html.lagenco-motion .motion-reveal.is-visible.shop-offer-tile:hover {
      transform:translateY(-4px);
    }
  }
  .lagenco-exit-backdrop { animation:lagenco-fade-in .22s ease-out; }
  .lagenco-exit-dialog { animation:lagenco-modal-in .4s cubic-bezier(.22,1,.36,1); }
  @keyframes lagenco-fade-in { from {opacity:0} to {opacity:1} }
  @keyframes lagenco-modal-in { from {opacity:0;transform:translateY(20px) scale(.97)} to {opacity:1;transform:translateY(0) scale(1)} }
}
.lagenco-exit-backdrop[hidden] {display:none!important}
.lagenco-exit-backdrop {position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:18px;background:rgba(7,24,43,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lagenco-exit-dialog {position:relative;display:grid;grid-template-columns: 1fr .8fr;width:min(790px,100%);max-height:calc(100dvh - 36px);overflow:auto;box-shadow:0 30px 110px #00192e55;border-radius:18px;background:#fff;color:#183249;font-family:Inter,Poppins,sans-serif;isolation:isolate}
.lagenco-exit-copy {padding:50px 42px 45px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.lagenco-exit-kicker {display:inline-flex;align-items:center;gap:9px;padding:7px 12px;background:#fff2af;color:#715300;border-radius:24px;font-size:11px;letter-spacing:.075em;font-weight:850;text-transform:uppercase}
.lagenco-exit-dialog h2 {color:#12314e;font-size:clamp(30px,3.8vw,43px);line-height:1.13;letter-spacing:-.04em;margin:21px 0 15px;font-weight:900}
.lagenco-exit-dialog h2 span {color:#0861ae}
.lagenco-exit-dialog p {line-height:1.7;font-size:14px;color:#617488;margin:0 0 26px;max-width:360px}
.lagenco-exit-cta {display:inline-flex;align-items:center;justify-content:center;gap:12px;border:0;border-radius:9px;background:#075ba5;padding:14px 21px;color:#fff!important;font-weight:800;font-size:14px;text-decoration:none!important;transition:background .2s,transform .2s}
.lagenco-exit-cta:hover {background:#003e78;transform:translateY(-2px)}
.lagenco-exit-continue {margin-top:18px;border:0;background:transparent;color:#52677a;font-weight:700;font-size:13px;cursor:pointer;padding:9px 2px;text-decoration:underline;text-underline-offset:3px}
.lagenco-exit-close {position:absolute;top:14px;right:14px;z-index:2;border:1px solid #d5e2eb;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-size:24px;line-height:1;background:white;color:#486176;cursor:pointer;transition:background .2s}
.lagenco-exit-close:hover {background:#eaf3fa}
.lagenco-exit-art {background:linear-gradient(145deg,#0963b1,#003c78);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:53px 24px 26px}
.lagenco-exit-art:before {content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:#fff1;top:-190px;right:-140px}
.lagenco-exit-art:after {content:'';position:absolute;width:280px;height:280px;border:1px solid #fff2;border-radius:50%;bottom:-160px;left:-120px}
.lagenco-exit-art-images {display:grid;grid-template-columns:1fr 1fr;gap:14px;transform:rotate(-7deg);width:min(305px,100%);position:relative;z-index:1}
.lagenco-exit-art-card {background:#fff;border-radius:13px;box-shadow:0 15px 30px #001c4055;padding:14px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:9px;aspect-ratio:1/1.15}
.lagenco-exit-art-card:nth-child(2) {transform:translateY(27px) rotate(9deg)}
.lagenco-exit-art-card img {width:100%;height:77%;object-fit:contain}
.lagenco-exit-art-card span {font-weight:850;color:#193a52;font-size:12px}
.lagenco-exit-art-label {position:absolute;bottom:14px;left:14px;right:14px;z-index:1;color:white;font-size:11px;font-weight:800;letter-spacing:.12em;text-align:center}
.lagenco-exit-star {position:absolute;top:35px;left:26px;background:#ffe22b;border-radius:50%;width:57px;height:57px;display:grid;place-items:center;transform:rotate(-14deg);color:#003d76;font-size:29px;z-index:1}
body.lagenco-exit-open {overflow:hidden}
.lagenco-exit-dialog :focus-visible {outline:3px solid #f6b800;outline-offset:3px}
@media(max-width:630px) {
  .lagenco-exit-dialog{grid-template-columns:1fr}
  .lagenco-exit-copy{padding:42px 28px 28px}
  .lagenco-exit-dialog h2{font-size:34px}
  .lagenco-exit-art{display:none}
}
@media(prefers-reduced-motion:reduce) {
  .lagenco-exit-backdrop,.lagenco-exit-dialog,.market-hero-copy *,.market-hero-art{animation:none!important;transition:none!important}
  .motion-reveal {opacity:1!important;transform:none!important;transition:none!important}
}


/* ===== shop-liquid.css ===== */
/* LAGENCO / Liquid UI: presentation only. No inventory, auth or payment logic. */
:root {
  --liquid-ease: cubic-bezier(.19,1,.22,1);
  --liquid-shadow: 0 16px 50px rgba(11,52,94,.095), 0 2px 6px rgba(11,52,94,.03);
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-lg: 1.25rem; --radius-xl: 1.5rem; --radius-2xl: 1.75rem;
}
html {scroll-behavior: smooth;}
body {font-family:var(--font-body)!important;letter-spacing:-.012em; background:radial-gradient(ellipse at 90% 4%,#fafdff,#eff7fe 52%,#f4f9fe)!important;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body :is(h1,h2,h3,h4,h5), .shop-header :is(a,span,input,button), .shop-footer, .shop-primary-btn, .shop-outline-btn, .shop-yellow-btn,
.shop-cart-drawer, .lagenco-exit-dialog {font-family:var(--font-display)!important;}
body h1,body h2 {letter-spacing:-.055em;}
body p {letter-spacing:-.013em;}
::selection {background:#cce8ff;color:#053d78;}
:focus-visible {outline:3px solid #ffd62e!important;outline-offset:3px;}
.shop-header {box-shadow:0 3px 16px rgba(4,55,99,.14)!important;}
.shop-nav-row {background:rgba(255,255,255,.94)!important;backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);}
.shop-global-search {box-shadow:0 8px 18px #0038681c;transition:box-shadow .38s var(--liquid-ease),transform .38s var(--liquid-ease)!important;}
.shop-global-search:focus-within {box-shadow:0 0 0 4px #ffd83382,0 8px 22px #00386829;transform:translateY(-1px);}
.shop-header-action {transition:transform .44s var(--liquid-ease),opacity .3s,color .3s;}
.shop-header-action:hover {transform:translateY(-3px);}
.shop-admin-link {color:#fff!important;opacity:.93;}
.shop-admin-link i {color:#ffdf42!important;}
.shop-checkout-notice{background:#fff9e5;border-bottom:1px solid #f5e1a2;color:#73540d;font-size:12px;position:relative;z-index:6;}
.shop-checkout-notice>.shop-container {padding:9px 0;display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;}
.shop-checkout-notice span{display:inline-flex;align-items:center;gap:7px;font-weight:650;}
.shop-checkout-notice a{font-size:12px;color:#075ba5;font-weight:800;text-decoration:underline;text-underline-offset:2px;display:inline-flex;gap:6px;align-items:center;}
.shop-checkout-notice a:hover {color:#003c79;}
:is(.market-hero,.shop-catalog-hero) {background-image:radial-gradient(ellipse at 84% 24%,rgba(255,255,255,.90),transparent 56%),linear-gradient(112deg,#eaf5ff,#dceffe)!important;}
:is(.shop-category-card,.shop-offer-tile,.shop-offer-main,.shop-steps article,.shop-trust-strip>div,.shop-featured-grid .product-card,#productGrid .product-card,.shop-about-intro img){border-radius:22px!important;}
:is(.shop-category-card,.shop-steps article,.shop-trust-strip>div,.shop-featured-grid .product-card,#productGrid .product-card){box-shadow:0 4px 16px rgba(17,62,101,.055);border-color:#e2edf5!important;transition:box-shadow .54s var(--liquid-ease),transform .54s var(--liquid-ease),border-color .4s ease!important;}
:is(.shop-category-card,.shop-steps article,.shop-trust-strip>div,.shop-featured-grid .product-card,#productGrid .product-card):hover{box-shadow:var(--liquid-shadow);border-color:#bdd9ed!important;}
.shop-category-card {overflow:hidden;}
.shop-category-card img {transition:transform .65s var(--liquid-ease)!important;}
.shop-primary-btn,.shop-yellow-btn,.shop-outline-btn,.shop-add-btn,.shop-buy-btn{border-radius:14px!important;transition:transform .4s var(--liquid-ease),box-shadow .4s var(--liquid-ease),background-color .3s,border-color .3s!important;}
.shop-primary-btn,.shop-yellow-btn {box-shadow:0 6px 18px rgba(5,78,143,.12);}
.shop-primary-btn:active,.shop-yellow-btn:active,.shop-outline-btn:active,.shop-buy-btn:active,.shop-add-btn:active {transform:scale(.965)!important;}
.shop-product-actions{display:flex;gap:8px;padding:0 12px 14px;align-items:stretch;flex-wrap:wrap;}
.shop-product-actions>.shop-add-btn,.shop-product-actions>.shop-buy-btn{margin:0!important;width:auto;flex:1 1 105px;min-height:44px;padding:9px 11px;white-space:nowrap;font-size:12px;}
.shop-buy-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:#ffdb27;color:#143656;border:1px solid #f2c60b;font-weight:800;cursor:pointer;}
.shop-buy-btn:hover {background:#ffca05;box-shadow:0 9px 20px rgba(211,155,0,.20);transform:translateY(-2px);}
.shop-add-btn:hover {transform:translateY(-2px);box-shadow:0 8px 20px #075ba533;}
.shop-modal-buy{width:100%;min-height:46px;margin:0 0 10px;font-size:14px;}
.shop-cart-drawer{box-shadow:-24px 0 90px #082b4733;transition:transform .62s var(--liquid-ease)!important;}
.shop-cart-overlay{backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);}
.shop-cart-heading {background:linear-gradient(135deg,#f8fcff,#f0f8ff);}
.shop-footer {border-radius:26px 26px 0 0;}
.lagenco-exit-dialog{border-radius:24px!important;box-shadow:0 32px 100px #001b3750!important;}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  html.lagenco-motion .motion-reveal.is-visible.shop-category-card:hover,
  html.lagenco-motion .motion-reveal.is-visible.shop-offer-main:hover,
  html.lagenco-motion .motion-reveal.is-visible.shop-offer-tile:hover,
  html.lagenco-motion .motion-reveal.is-visible.shop-trust-strip>div:hover{transform:translateY(-5px)!important;}
  .shop-category-card:hover,.shop-steps article:hover,.shop-featured-grid .product-card:hover,#productGrid .product-card:hover{transform:translateY(-5px);}
}
@view-transition { navigation:auto; }
::view-transition-old(root){animation:liquid-out .20s ease both;}
::view-transition-new(root){animation:liquid-in .48s var(--liquid-ease) both;}
@keyframes liquid-in {from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes liquid-out {from{opacity:1}to{opacity:.6}}
@media (max-width:560px){
  .shop-header-actions{gap:1px;}
  .shop-header-action{min-width:38px;}
  .shop-product-actions{padding:0 8px 12px;gap:6px;}
  .shop-product-actions>.shop-add-btn,.shop-product-actions>.shop-buy-btn{min-height:40px;flex-basis:100%;font-size:11px;}
  .shop-checkout-notice>.shop-container{padding:7px 0;font-size:10px;gap:4px 10px;}
  .shop-checkout-notice a{font-size:10px;}
  .shop-category-card{border-radius:17px!important;}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}*,:before,:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}::view-transition-old(root),::view-transition-new(root){animation:none!important;}}


/* ===== lagenco-brand-i18n.css ===== */
/* LAGENCO 2026: new independent retail logo and accessible language selector */
.shop-logo,.shop-footer-logo{display:inline-flex!important;align-items:center!important;text-decoration:none!important}
.lagenco-brand-image{width:205px;height:auto;display:block;max-width:100%}
.lagenco-footer-image{width:208px;height:auto;display:block;max-width:100%}
.shop-logo .lagenco-brand-image{filter:none!important}
.shop-footer-logo img{opacity:1!important}
.checkout-lagenco-logo{width:198px;height:auto;display:block}
.lagenco-login-logo{max-width:205px;height:auto;display:block}
/* Select is in the upper right of the main site navigation. */
.lagenco-locale{position:relative;display:inline-flex;align-items:center;flex-shrink:0;z-index:1001;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.lagenco-locale-button{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.24);border-radius:15px;background:rgba(255,255,255,.12);color:white;font-size:12px;font-weight:750;padding:10px 11px;cursor:pointer;min-width:94px;justify-content:center;transition:background .22s,transform .22s}
.lagenco-locale-button:hover{background:rgba(255,255,255,.23);transform:translateY(-1px)}
.lagenco-locale-button:focus-visible,.lagenco-locale-option:focus-visible{outline:3px solid #ffd72e;outline-offset:2px}
.lagenco-locale-chevron{font-size:10px;opacity:.85}
.lagenco-locale-menu{position:absolute;right:0;top:calc(100% + 9px);min-width:172px;border-radius:16px;box-shadow:0 18px 48px rgba(10,38,69,.25);border:1px solid #dae6ef;padding:7px;background:#fff;display:none;z-index:10020}
.lagenco-locale[data-open="true"] .lagenco-locale-menu{display:grid;gap:2px;animation:langFade .18s ease-out}
.lagenco-locale-option{border:0;text-align:left;display:flex;align-items:center;gap:10px;border-radius:10px;background:transparent;padding:11px 12px;width:100%;cursor:pointer;font-size:13px;font-family:inherit;color:#153456}
.lagenco-locale-option:hover,.lagenco-locale-option[aria-checked="true"]{background:#eaf4ff;color:#0358a8;font-weight:800}
.lagenco-locale-option .lagenco-check{margin-left:auto}
@keyframes langFade{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
/* fallback positioning on auxiliary pages without the shop header */
body>.lagenco-locale{position:fixed;top:17px;right:20px}
body>.lagenco-locale .lagenco-locale-button{background:#095da9;border-color:#095da9;box-shadow:0 5px 15px rgba(0,60,116,.2)}
.site-nav .lagenco-locale .lagenco-locale-button{background:#eef6ff;color:#095da9;border-color:#c8dcec}
.lp-hero-brand-name .lagenco-login-logo{width:204px}
@media(max-width:900px){.lagenco-brand-image{width:165px}.lagenco-locale-button{min-width:72px;padding:9px 7px;font-size:11px}.lagenco-locale-label{display:none}.lagenco-footer-image{width:170px}}
@media(max-width:560px){.lagenco-brand-image{width:126px}.lagenco-locale-button{min-width:51px;padding:8px 6px}.shop-header-actions .lagenco-locale{margin-right:1px}.checkout-lagenco-logo{width:137px}}
@media(prefers-reduced-motion:reduce){.lagenco-locale-button,.lagenco-locale-menu{animation:none!important;transition:none!important}}

.site-nav .brand{display:inline-flex;align-items:center}
.lp-hero-brand-name{line-height:1!important}
@media(max-width:480px){.site-nav .nav-actions{gap:9px!important}.site-nav .lagenco-locale-button{min-width:55px!important}.site-nav .nav-actions .admin{font-size:11px}}


/* ===== pixel-match.css ===== */
/* LAGENCO Pixel Match — visual reference 29 Oct 2026. Presentation only. */
:root{--pixel-blue:#09599f;--pixel-navy:#08244b;--pixel-deep:#064881;--pixel-yellow:#ffe12d;--pixel-white:#fff;--pixel-surface:#f3faff;}
html{scroll-behavior:smooth}body{background:#f5faff!important;font-family:'Plus Jakarta Sans',Inter,system-ui,sans-serif!important;color:#12254a!important} .shop-container{width:min(100% - 52px,1440px)!important;max-width:1440px!important}
.pixel-topbar{background:#07508d!important;color:#fff;height:37px;min-height:37px!important;position:relative!important;z-index:1005!important}.pixel-top-inner{height:37px;display:flex;align-items:center;justify-content:space-between;gap:12px!important}.pixel-top-inner>a{font-size:11.5px;display:flex;align-items:center;gap:9px;color:#f9fcff;text-decoration:none;white-space:nowrap;transition:opacity .2s ease}.pixel-top-inner>a:hover{opacity:.78}.pixel-top-inner i{font-size:13px;color:#eff8ff}#lagenco-locale-host{display:flex;margin-left:auto}.pixel-topbar .lagenco-locale-button{padding:6px 12px;background:#06457e!important;min-width:110px;border-radius:9px!important;border:none!important}.pixel-topbar .lagenco-locale-menu{top:calc(100% + 7px)!important}
.shop-header.pixel-navbar{position:sticky;top:0;background:#fff!important;z-index:1002!important;box-shadow:0 6px 25px #1239570d!important}.shop-header .pixel-header-main{display:grid!important;grid-template-columns:240px minmax(300px,1fr) auto!important;gap:30px!important;min-height:85px!important;padding:13px 0!important;align-items:center}.shop-header .shop-logo{display:flex!important;align-items:center}.shop-header .shop-logo img{width:216px!important;height:auto!important}.shop-header .shop-global-search{max-width:730px;width:100%;background:#f8fbfd!important;border:1px solid #e1e8ef!important;height:46px!important;border-radius:100px!important;box-shadow:0 1px 4px #16457812!important;overflow:hidden}.shop-header .shop-global-search input{font-size:13px!important;letter-spacing:0!important}.shop-header .shop-global-search button{height:45px!important;width:52px!important;border-radius:100px;background:var(--pixel-blue)!important;color:white!important}.shop-header-actions{display:flex;gap:14px!important;align-items:center}.shop-header .shop-header-action{color:#0f2c54!important;min-width:52px!important;font-size:10px!important;position:relative}.shop-header .shop-header-action i{font-size:20px!important}.shop-header .shop-header-action b{background:var(--pixel-yellow)!important;color:#092d4d!important;right:-6px;top:-6px;border:none!important}.shop-header .shop-admin-link{font-size:10px!important;color:#2d5278!important}.shop-header .shop-admin-link i{color:#315d81!important;font-size:14px!important}
.shop-header .shop-nav-row{background:#f9fcff!important;border-top:1px solid #e9f0f4!important;border-bottom:1px solid #e7eff6!important}.pixel-nav-inner{min-height:45px!important;gap:28px!important;justify-content:flex-start!important}.pixel-nav-inner a{font-size:12px!important;white-space:nowrap;color:#172a49!important;font-weight:650!important;letter-spacing:-.01em!important}.pixel-nav-inner a:hover{color:#045998!important}.pixel-nav-inner .nav-deals{background:var(--pixel-yellow)!important;padding:9px 14px!important;color:#131c27!important;border-radius:7px!important}.pixel-nav-inner .shop-nav-menu{margin-right:12px}
.shop-checkout-notice{background:#fff9e8!important;border-bottom:1px solid #f3e2a0!important}.shop-checkout-notice .shop-container{font-size:11px!important;padding:6px 0!important}
.pixel-hero{background:#061b37!important;color:#fff!important;height:370px;min-height:370px;position:relative;overflow:hidden;border-radius:12px!important;margin:18px auto 0!important;display:grid;grid-template-columns:47% 53%;isolation:isolate;box-shadow:0 9px 25px #07345c1b}.pixel-hero:before{content:'';inset:0;position:absolute;z-index:-1;background:linear-gradient(93deg,#030d20 0%,#051731 43%,#063868 74%,#020a18 100%)}.pixel-hero-left{padding:40px 0 25px 47px;position:relative;z-index:2;display:flex;align-items:flex-start;flex-direction:column}.pixel-overline{font-size:10px;color:#c5dbf1;letter-spacing:.16em;font-weight:800;margin-bottom:13px}.pixel-hero h1{margin:0;font-size:clamp(30px,3.15vw,54px)!important;line-height:1.075!important;letter-spacing:-.052em!important;font-weight:900!important;color:#fff!important;font-family:'Plus Jakarta Sans',Inter,sans-serif!important}.pixel-hero .pixel-yellow{color:var(--pixel-yellow)!important}.pixel-hero-left>p{margin:18px 0 20px;color:#eff6ff!important;font-size:14px!important;line-height:1.4}.pixel-yellow-btn{display:inline-flex;align-items:center;gap:12px;background:var(--pixel-yellow);color:#101d2b!important;padding:11px 19px;border-radius:9px;text-decoration:none!important;font-size:13px!important;font-weight:800;box-shadow:0 5px 22px #0002;transition:transform .35s cubic-bezier(.2,.9,.2,1),box-shadow .35s}.pixel-yellow-btn:hover{transform:translateY(-3px);box-shadow:0 10px 28px #0004}.pixel-hero-highlights{display:flex;flex-wrap:wrap;gap:18px;margin-top:auto;padding-top:20px}.pixel-hero-highlights>span{display:flex;align-items:center;gap:7px;font-size:10px;color:#dae8f8}.pixel-hero-highlights i{font-size:13px}.pixel-hero-photo{position:relative;overflow:hidden;height:100%;min-width:0}.pixel-hero-image{position:absolute;inset:0;background:url('assets/pixel-hero-equipment.jpg') center center / cover no-repeat;filter:saturate(1.02) contrast(1.09);mask-image:linear-gradient(to right,transparent,black 16%);-webkit-mask-image:linear-gradient(to right,transparent,black 16%)}.pixel-hero-bubble{position:absolute;right:20px;bottom:18px;background:#ffffffed;padding:9px 12px;border-radius:10px;color:#072d58;box-shadow:0 6px 22px #0004;font-weight:900;font-size:13px;line-height:1.15}.pixel-hero-bubble small{font-size:8px;font-weight:850;letter-spacing:.22em}
.pixel-categories{padding:14px 0 11px!important}.pixel-categories-scroll{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}.pixel-cat{display:flex;flex-direction:column;align-items:center;gap:9px;color:#1e304b!important;text-decoration:none!important;text-align:center;font-size:11px;line-height:1.35;font-weight:650;transition:transform .35s cubic-bezier(.19,1,.22,1)}.pixel-cat:hover{transform:translateY(-5px)}.pixel-cat-orb{display:grid;place-items:center;border:3px solid #fff;background:#e7eef4;width:94px;height:94px;border-radius:50%;overflow:hidden;box-shadow:0 7px 20px #0a47790d;transition:border-color .25s}.pixel-cat:hover .pixel-cat-orb{border-color:var(--pixel-yellow)}.pixel-cat-orb img{width:100%;height:100%;object-fit:cover;object-position:center}
.pixel-promos{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:17px auto 25px!important}.pixel-promo{position:relative;min-height:143px;border-radius:12px;overflow:hidden;display:flex;align-items:center;background:#07538f;text-decoration:none!important;isolation:isolate;box-shadow:0 8px 22px #0434610b;transition:transform .4s cubic-bezier(.19,1,.22,1)}.pixel-promo:hover{transform:translateY(-4px)}.pixel-promo-tools{background:linear-gradient(100deg,#075ca5,#0a4d88)}.pixel-promo-audio{background:linear-gradient(110deg,#ffe62a,#ffd52b)}.pixel-promo img{position:absolute;right:0;height:100%;width:58%;object-fit:cover;object-position:center;z-index:-1;mask-image:linear-gradient(to right,transparent,black 48%);-webkit-mask-image:linear-gradient(to right,transparent,black 48%)}.pixel-promo-text{padding:20px 28px;position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;max-width:58%}.pixel-promo-text>span:first-child{color:inherit;font-size:15px;font-weight:900;line-height:1.08}.pixel-promo h2{font-size:20px!important;font-weight:900!important;line-height:1.1;margin:2px 0 12px;letter-spacing:-.035em!important}.pixel-promo-tools{color:#fff!important}.pixel-promo-tools h2{color:var(--pixel-yellow)!important}.pixel-promo-audio{color:#10151e!important}.pixel-promo-audio h2{color:#10151e!important}.pixel-small-btn{background:#fff;border-radius:8px;padding:8px 12px;color:#13345a;font-size:11px;font-weight:800;display:inline-flex;align-items:center;gap:8px}
.pixel-products{padding:0 0 28px!important}.pixel-products-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}.pixel-products h2{font-family:'Plus Jakarta Sans',sans-serif!important;font-size:24px!important;color:#102447!important;margin:0 0 3px!important;font-weight:850!important;letter-spacing:-.05em!important}.pixel-products-head p{color:#6b8093;font-size:12px;margin:0}.pixel-see-all{font-size:12px;color:#07569d;text-decoration:none;font-weight:800}.pixel-products .shop-featured-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:11px!important}.pixel-products .shop-featured-grid .product-card{border:1px solid #e8eff5!important;background:#fff!important;border-radius:13px!important;overflow:hidden!important;box-shadow:0 5px 17px #173e5a0d!important;min-width:0!important}.pixel-products .product-card>.card-img{height:174px!important;background:#f8fbff!important}.pixel-products .product-card>.card-img img{width:100%!important;height:100%!important;object-fit:contain!important}.pixel-products .product-card h3{font-size:13px!important;font-weight:800!important;line-height:1.3!important}.pixel-products .product-card .p-6{padding:12px!important}.pixel-products .product-card .text-2xl{font-size:17px!important}.pixel-products .product-card .text-sm{font-size:11px!important;line-height:1.35!important}.pixel-products .product-card .btn-primary{font-size:10px!important;padding:8px!important}.pixel-products .shop-featured-empty{grid-column:1/-1;padding:18px 22px!important;border:1px solid #dfe9f3;border-radius:13px;background:#fff!important;min-height:140px!important}
.shop-footer{background:#072e53!important}.shop-footer a:hover{color:#ffdf2e!important}
/* Keep application modals and admin elements fully operational. */
@media(max-width:1240px){.pixel-nav-inner{gap:16px!important}.shop-header .pixel-header-main{grid-template-columns:195px minmax(220px,1fr) auto!important;gap:12px!important}.shop-header .shop-logo img{width:185px!important}.shop-header-actions{gap:6px!important}.pixel-cat-orb{width:78px;height:78px}.pixel-categories-scroll{gap:5px}.pixel-hero{height:340px;min-height:340px}.pixel-hero h1{font-size:clamp(32px,3.4vw,44px)!important}.pixel-hero-left{padding:32px 0 24px 35px}}
@media(max-width:960px){.pixel-top-inner>a:nth-child(n+3){display:none}.shop-header .pixel-header-main{grid-template-columns:170px minmax(180px,1fr) auto!important;min-height:70px!important}.pixel-nav-inner{overflow:auto;scrollbar-width:none}.pixel-cat-orb{width:72px;height:72px}.pixel-categories-scroll{display:flex;overflow:auto;scroll-snap-type:x mandatory;padding:6px 0 12px;gap:14px;scrollbar-width:none}.pixel-cat{min-width:80px;scroll-snap-align:start}.pixel-hero{grid-template-columns:55% 45%;height:315px;min-height:315px}.pixel-hero-left>p{font-size:12px!important}.pixel-hero-highlights{gap:8px}.pixel-products .shop-featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:640px){.shop-container{width:calc(100% - 26px)!important}.pixel-topbar{height:32px!important;min-height:32px!important}.pixel-top-inner{height:32px}.pixel-top-inner>a{font-size:9px}.pixel-top-inner>a:nth-child(2){display:none}.pixel-topbar .lagenco-locale-button{min-width:49px;padding:4px 6px}.shop-header .pixel-header-main{display:grid!important;grid-template-columns:1fr auto!important;gap:4px 8px!important;padding:9px 0!important}.shop-header .shop-logo img{width:155px!important}.shop-header .shop-global-search{order:3;grid-column:1/-1;height:41px!important;margin-top:5px}.shop-header .shop-global-search button{height:41px!important}.shop-header-actions{gap:5px!important}.shop-header .shop-header-action{min-width:30px!important}.shop-header .shop-header-action i{font-size:17px!important}.shop-header .shop-header-action span{display:none!important}.shop-header .shop-header-action b{top:-5px;right:-3px}.shop-header .shop-admin-link i{font-size:13px!important}.pixel-nav-inner{min-height:37px!important}.pixel-nav-inner a{font-size:10px!important}.shop-checkout-notice .shop-container{font-size:10px!important;gap:6px}.pixel-hero{margin-top:9px!important;grid-template-columns:1fr;min-height:390px;height:390px;border-radius:11px!important}.pixel-hero-left{padding:26px 17px 13px;z-index:2}.pixel-hero h1{font-size:clamp(27px,7.5vw,40px)!important}.pixel-hero-left>p{font-size:12px!important;margin:11px 0 13px}.pixel-overline{font-size:8px;margin-bottom:10px}.pixel-hero-photo{height:auto;position:absolute;inset:0;background:transparent}.pixel-hero-image{inset:auto 0 0 0;height:53%;background-size:cover;background-position:center 44%;opacity:.85;mask-image:linear-gradient(to bottom,transparent,black 30%);-webkit-mask-image:linear-gradient(to bottom,transparent,black 30%)}.pixel-hero-bubble{right:12px;bottom:10px;font-size:9px;padding:5px 8px}.pixel-hero-bubble small{font-size:6px}.pixel-hero-highlights{display:none}.pixel-cat-orb{height:62px;width:62px}.pixel-categories{padding-top:10px!important;padding-bottom:0!important}.pixel-cat{min-width:70px;font-size:10px}.pixel-categories-scroll{gap:11px}.pixel-promos{grid-template-columns:1fr;gap:10px;margin:10px auto 17px!important}.pixel-promo{min-height:128px}.pixel-promo-text{padding:17px 19px}.pixel-promo h2{font-size:17px!important}.pixel-promo-text>span:first-child{font-size:12px}.pixel-small-btn{font-size:10px;padding:7px 10px}.pixel-products h2{font-size:19px!important}.pixel-products-head p{display:none}.pixel-see-all{font-size:10px}.pixel-products .shop-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.pixel-products .product-card>.card-img{height:138px!important}.pixel-products .product-card .p-6{padding:9px!important}.pixel-products .product-card h3{font-size:12px!important}.pixel-products .product-card .text-2xl{font-size:15px!important}}
@media(prefers-reduced-motion:reduce){.pixel-cat,.pixel-promo,.pixel-yellow-btn{transition:none!important}}


/* ===== stock-polish.css ===== */
/* Lagenco verified-inventory polish and centred announcements. */
html{scroll-behavior:smooth}body,button,input,select,textarea{font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
.pixel-topbar .pixel-top-inner{position:relative;justify-content:center!important;padding-right:135px;padding-left:135px;max-width:1380px;width:100%;margin:auto}
.pixel-announcement-content{display:flex;align-items:center;justify-content:center;gap:22px;white-space:nowrap;animation:announcementGlide 11s ease-in-out infinite alternate;will-change:transform}
.pixel-announcement-content>a{font-weight:600;display:inline-flex;gap:7px;white-space:nowrap;font-size:11px!important}
.pixel-topbar #lagenco-locale-host{position:absolute!important;right:0;top:0;bottom:0;margin-left:0!important;display:flex;align-items:center;justify-content:flex-end}
@keyframes announcementGlide{0%,9%{transform:translateX(-12px);opacity:.96}50%{transform:translateX(12px);opacity:1}100%{transform:translateX(-12px);opacity:.96}}
.pixel-cat-orb{display:flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box;overflow:hidden;isolation:isolate;background:#fff!important}
.pixel-cat-orb img{box-sizing:border-box;display:block!important;width:88%!important;height:88%!important;object-fit:contain!important;object-position:50% 50%!important;margin:auto!important;border-radius:50%;transform:translateZ(0)}
.stock-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin:4px 0 38px}
.shop-featured-grid .stock-card{min-width:0}
.stock-card{background:#fff;border:1px solid #dfebf4;border-radius:15px;box-shadow:0 7px 25px rgba(12,55,102,.06);overflow:hidden;min-width:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,border-color .25s ease}
.stock-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(12,55,102,.15);border-color:#b1d0e9}
.stock-picture{height:225px;background:linear-gradient(145deg,#f8fbff,#eef6fe);padding:18px;display:grid;place-items:center;position:relative}
.stock-picture img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:multiply;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.stock-card:hover .stock-picture img{transform:scale(1.055)}
.stock-count{position:absolute;left:13px;top:13px;background:#e7f5eb;color:#197046;font-size:10px;font-weight:750;border-radius:999px;padding:7px 10px}
.stock-body{padding:15px 16px 17px}.stock-brand{font-size:10px;color:#63809a;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:3px}.stock-body h3{font-size:16px!important;line-height:1.27;color:#102447!important;font-weight:850;margin:0 0 8px}.stock-description{font-size:12px!important;line-height:1.55!important;color:#597083;min-height:56px;margin:0 0 11px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.stock-low{font-size:10px;color:#71839a;display:flex;align-items:center;gap:5px}.stock-bullet{width:7px;height:7px;border-radius:50%;background:#15a35a}.stock-price{font-size:13px;color:#103d6a;font-weight:800;margin:13px 0 12px}.stock-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.stock-buttons a,.stock-buttons button,.stock-dialog .stock-buy{display:inline-flex;justify-content:center;align-items:center;text-align:center;border:0;text-decoration:none;cursor:pointer;font-size:11px;font-weight:800;padding:11px 7px;border-radius:9px;transition:transform .2s ease,filter .2s ease}
.stock-detail{background:#e8f3fc;color:#075ba5}.stock-buy{background:#075ba5;color:white!important}.stock-buttons a:hover,.stock-buttons button:hover{filter:brightness(1.08);transform:translateY(-2px)}.stock-zero{grid-column:1/-1;background:#f4f9fd;color:#526d80;padding:24px;border-radius:12px;text-align:center}
.pixel-products .shop-featured-grid .stock-picture{height:160px;padding:12px}.pixel-products .shop-featured-grid .stock-body{padding:11px}.pixel-products .shop-featured-grid .stock-description{min-height:48px;font-size:10px!important}.pixel-products .shop-featured-grid .stock-body h3{font-size:13px!important}.pixel-products .shop-featured-grid .stock-buttons{grid-template-columns:1fr}.pixel-products .shop-featured-grid .stock-buttons a,.pixel-products .shop-featured-grid .stock-buttons button{padding:8px 5px}.pixel-products .shop-featured-grid .stock-price{margin:9px 0 8px;font-size:12px}
.stock-overlay[hidden]{display:none!important}.stock-overlay{position:fixed;inset:0;background:rgba(10,31,54,.64);z-index:99999;display:grid;place-items:center;padding:16px;backdrop-filter:blur(8px)}.stock-dialog{background:#fff;max-width:760px;width:100%;border-radius:24px;display:grid;grid-template-columns:46% 54%;position:relative;overflow:hidden;box-shadow:0 30px 100px #0004}.stock-dialog-image{background:#f1f7fc;min-height:340px;display:grid;place-items:center;padding:26px}.stock-dialog-image img{width:100%;height:100%;max-height:320px;object-fit:contain;mix-blend-mode:multiply}.stock-dialog-content{padding:40px 28px}.stock-dialog-content h2{font-size:27px;font-weight:850;color:#132f50;margin:6px 0 18px}.stock-dialog-content p{color:#60778a;font-size:14px;line-height:1.6}.stock-dialog-content strong{display:inline-block;color:#19814d;background:#eaf7ec;border-radius:100px;padding:6px 12px;font-size:12px;margin-top:7px}.stock-dialog-content h3{font-size:19px;color:#133b61;margin:17px 0}.stock-dialog-content .stock-dialog-note{font-size:11px;margin-bottom:18px}.stock-modal-kicker{color:#076bb5;font-weight:800;font-size:10px;letter-spacing:.08em;text-transform:uppercase}.stock-close{position:absolute;right:15px;top:14px;border-radius:50%;width:36px;height:36px;font-size:25px;border:0;background:#e7f1f8;color:#103e6b;z-index:2;cursor:pointer}.stock-modal-open{overflow:hidden}
@media(max-width:1150px){.pixel-announcement-content>a:nth-child(4){display:none}}@media(max-width:850px){.pixel-topbar .pixel-top-inner{padding-right:105px;padding-left:0}.pixel-announcement-content>a:nth-child(n+3){display:none}.pixel-announcement-content>a{font-size:10px!important}.stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.pixel-topbar .pixel-top-inner{padding-right:92px;padding-left:0}.pixel-announcement-content>a:nth-child(n+2){display:none}.pixel-announcement-content{animation:announcementGlide 11s ease-in-out infinite alternate}.pixel-cat-orb img{width:86%!important;height:86%!important}.stock-grid{gap:10px}.stock-picture{height:150px;padding:10px}.stock-body{padding:10px}.stock-body h3{font-size:13px!important}.stock-description{min-height:65px;font-size:10px!important}.stock-buttons{grid-template-columns:1fr}.stock-dialog{grid-template-columns:1fr;max-width:420px;max-height:91vh;overflow:auto}.stock-dialog-image{min-height:200px;max-height:200px}.stock-dialog-content{padding:20px}.stock-dialog-content h2{font-size:22px}}
@media(prefers-reduced-motion:reduce){.pixel-announcement-content{animation:none}.stock-card,.stock-card img,.stock-buttons>*{transition:none!important}}


/* 2026-10-29 product-image containment fix */
.stock-picture{overflow:hidden!important;align-items:center!important;justify-content:center!important}
.stock-picture img{width:auto!important;height:auto!important;max-width:92%!important;max-height:88%!important;object-fit:contain!important;object-position:center center!important;margin:auto!important;display:block!important;flex:0 0 auto!important}
.stock-card[data-cat="microphones"] .stock-picture img{max-width:88%!important;max-height:84%!important}


/* 2026-10-29 v4 catalogue image sizing + search suggestions */
.stock-picture{height:260px!important;aspect-ratio:4/3;padding:16px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;position:relative!important}
.stock-picture img{width:auto!important;height:auto!important;max-width:96%!important;max-height:96%!important;object-fit:contain!important;object-position:center center!important;display:block!important;margin:auto!important;transform:translateZ(0)!important;mix-blend-mode:multiply}
.stock-card[data-cat="microphones"] .stock-picture img{max-width:94%!important;max-height:94%!important}
.stock-card[data-cat="power-tools"] .stock-picture img,.stock-card[data-cat="audio"] .stock-picture img,.stock-card[data-cat="accessories"] .stock-picture img,.stock-card[data-cat="hand-tools"] .stock-picture img,.stock-card[data-cat="lighting"] .stock-picture img,.stock-card[data-cat="workwear"] .stock-picture img{max-width:95%!important;max-height:95%!important}
.stock-card-preorder{border-color:#f3d696!important;box-shadow:0 8px 24px rgba(169,118,8,.08)!important}
.stock-count.is-preorder{background:#fff0cf!important;color:#9a6a00!important}
.stock-chip-preorder{position:absolute;right:13px;top:13px;background:#fff7e3;color:#9a6a00;font-size:10px;font-weight:800;border-radius:999px;padding:7px 10px;border:1px solid #f0d694}
.stock-bullet-preorder{background:#d38f00!important}
.stock-buy-preorder{background:#b77a05!important}
.pixel-products .shop-featured-grid .stock-picture{height:195px!important;padding:14px!important}
.pixel-products .shop-featured-grid .stock-picture img{max-width:95%!important;max-height:95%!important}
.pixel-products .shop-featured-grid .stock-body h3{font-size:14px!important}
.pixel-products .shop-featured-grid .stock-description{min-height:42px!important;-webkit-line-clamp:2}
.search-bar{position:relative}
.lagenco-search-suggest{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border:1px solid #d9e8f5;border-radius:18px;box-shadow:0 18px 50px rgba(14,55,102,.16);padding:8px;z-index:120;max-height:420px;overflow:auto}
.lagenco-search-item{width:100%;display:grid;grid-template-columns:56px 1fr;align-items:center;gap:12px;padding:10px;border:0;background:transparent;border-radius:14px;cursor:pointer;text-align:left}
.lagenco-search-item:hover{background:#f3f8fd}
.lagenco-search-item img{width:56px;height:56px;object-fit:contain;background:#f5f9fd;border-radius:12px;padding:6px}
.lagenco-search-item strong{display:block;color:#102447;font-size:14px;line-height:1.3;font-weight:800}
.lagenco-search-item small{display:block;color:#688197;font-size:12px;margin-top:3px}
.lagenco-search-empty{padding:14px 12px;color:#6d8296;font-size:13px;text-align:center}
@media(max-width:550px){.stock-picture{height:185px!important}.lagenco-search-suggest{left:-4px;right:-4px}.lagenco-search-item{grid-template-columns:48px 1fr;gap:10px}.lagenco-search-item img{width:48px;height:48px}}

/* Real product photographs (v5): correctly centered and uncropped. */
.stock-picture, .pixel-products .shop-featured-grid .stock-picture {background:#fff !important; isolation:isolate; overflow:hidden !important; min-width:0;}
.stock-picture img, .pixel-products .shop-featured-grid .stock-picture img, .stock-card[data-cat] .stock-picture img {
  width:100%!important; height:100%!important; min-width:0!important; max-width:100%!important; max-height:100%!important;
  box-sizing:border-box!important; padding:12px!important; object-fit:contain!important;object-position:50% 50%!important;
  display:block!important;margin:0!important;mix-blend-mode:normal!important;transform:none!important;transition:opacity .2s ease!important;
}
.stock-card:hover .stock-picture img{transform:none!important;}
.stock-count{z-index:2;}


/* ===== site-refresh.css ===== */
/* Lagenco universal announcement, independent brand catalogues & About page — v5 */
:root{--lag-blue:#075ba5;--lag-deep:#0a2a4b;--lag-yellow:#ffdf28;--lag-surface:#f3f9fe}
body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
.lagenco-shared-announcement{height:41px!important;min-height:41px!important;position:relative!important;z-index:1200!important;background:#084c86!important;color:#fff!important;display:flex!important;align-items:center;justify-content:center;padding:0 140px!important;margin:0!important;overflow:visible!important;font-family:'Plus Jakarta Sans',sans-serif}
.lagenco-announce-center{width:min(100%,1100px);overflow:hidden;display:flex;justify-content:center;align-items:center;pointer-events:auto}
.lagenco-announce-track{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.5vw,38px);white-space:nowrap;animation:lagenco-announcement-glide 13s ease-in-out 1 both alternate;will-change:transform}
.lagenco-announce-track a{display:inline-flex;align-items:center;gap:8px;font-size:11px!important;font-weight:650;text-decoration:none!important;color:#fff!important;opacity:.96;transition:opacity .2s}
.lagenco-announce-track a:hover{opacity:.76}
.lagenco-announce-track i{font-size:12px;color:#fff}
.lagenco-shared-announcement #lagenco-locale-host{position:absolute!important;top:0;bottom:0;right:max(15px,calc((100vw - 1440px)/2 + 12px));display:flex;align-items:center;margin:0!important;z-index:2}
.lagenco-shared-announcement .lagenco-locale-button{min-width:106px;padding:7px 11px!important;background:#063f77!important;color:#fff!important;border:1px solid #ffffff1c!important;border-radius:12px!important;font-size:11px!important}
.lagenco-shared-announcement .lagenco-locale-menu{top:calc(100% + 8px)!important}
@keyframes lagenco-announcement-glide{0%{transform:translateX(-9px)}100%{transform:translateX(9px)}}
@media(max-width:1190px){.lagenco-announce-track a:nth-child(4){display:none!important}}
@media(max-width:890px){.lagenco-shared-announcement{padding-left:105px!important;padding-right:115px!important}.lagenco-announce-track a:nth-child(3){display:none!important}}
@media(max-width:580px){.lagenco-shared-announcement{height:36px!important;min-height:36px!important;padding-left:12px!important;padding-right:95px!important}.lagenco-announce-track{gap:12px;justify-content:flex-start}.lagenco-announce-track a{font-size:10px!important}.lagenco-announce-track a:nth-child(n+2){display:none!important}.lagenco-shared-announcement #lagenco-locale-host{right:8px}.lagenco-shared-announcement .lagenco-locale-button{padding:6px 8px!important;min-width:81px}}
@media(prefers-reduced-motion:reduce){.lagenco-announce-track{animation:none!important;transform:none!important}}
/* Avoid repeating entrance animations for user-facing text. Keep one-time intersection reveals. */
h1,h2,h3,p,.shop-kicker,.pixel-overline,.market-eyebrow,.pixel-hero-left,.shop-bottom-cta{animation-iteration-count:1!important}
/* Dedicated catalogue heading and controls */
.shop-catalog-hero .shop-container h1{font-family:'Plus Jakarta Sans',sans-serif!important;font-weight:850!important;letter-spacing:-.045em!important}
.shop-type-filters{flex-wrap:wrap!important;gap:9px!important}
.shop-type-filters a.catalog-brand-link{padding:10px 15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border:1px solid #cbddec;color:#075ba5;font-weight:750}
.stock-grid:empty{display:none!important}
.stock-card{isolation:isolate}
.stock-picture{position:relative;overflow:hidden!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important}
.stock-picture img{max-height:82%!important;max-width:82%!important;width:auto!important;height:auto!important;object-fit:contain!important;object-position:center!important;display:block!important;flex:none!important}
.stock-card .stock-count{z-index:2}
/* brand page */
.brand-page{padding-top:33px!important;padding-bottom:75px!important}
.brand-page-hero{border-radius:24px;background:linear-gradient(115deg,#071e3f,#075a9d);color:#fff;min-height:255px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(180px,.7fr);gap:28px;align-items:center;padding:40px 54px;position:relative;overflow:hidden}
.brand-page-hero:before{content:'';width:380px;height:380px;border:1px solid #ffffff20;border-radius:50%;position:absolute;right:-100px;top:-165px;box-shadow:0 0 0 50px #ffffff07,0 0 0 100px #ffffff04;pointer-events:none}
.brand-page-hero h1{font-size:clamp(30px,4vw,53px);color:#fff!important;font-weight:900;letter-spacing:-.052em;line-height:1.12;margin:10px 0 16px}
.brand-page-hero p{color:#d9e8f5;font-size:14px;max-width:670px;line-height:1.7;margin:0}
.brand-page-hero .shop-kicker{color:#ffe22a!important;font-size:11px!important}
.brand-hero-accent{display:flex;justify-content:center;align-items:center;gap:15px;font-size:clamp(24px,3vw,44px);font-weight:900;color:#fff;transform:rotate(-5deg)}
.brand-hero-accent b{color:#ffe22a}
.brand-category-section{padding:42px 0 6px}
.brand-section-top{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}
.brand-index{font-size:11px;color:#0b72b6;letter-spacing:.16em;font-weight:850}
.brand-section-top h2{color:#10274d;font-size:clamp(24px,2.5vw,34px);font-weight:850;letter-spacing:-.045em;margin:5px 0 0}
.brand-all{white-space:nowrap;color:#075ba5!important;text-decoration:none;font-weight:800;font-size:12px}
.brand-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.brand-tile{background:#fff;border:1px solid #e0eaf4;border-radius:19px;overflow:hidden;text-decoration:none!important;color:#10274d!important;box-shadow:0 8px 24px #143e5c0b;transition:transform .26s ease,box-shadow .26s ease}
.brand-tile:hover{transform:translateY(-5px);box-shadow:0 16px 42px #143e5c18}
.brand-tile-logo{min-height:185px;background:radial-gradient(circle at 80% 30%,#e6f2fd,#f6faff 60%,#fff);display:flex;justify-content:center;align-items:center;padding:22px}
.brand-tile-logo img{width:min(100%,355px);height:135px;object-fit:contain;object-position:center}
.brand-tile-info{padding:22px 25px 25px;display:flex;justify-content:space-between;gap:18px;align-items:center}
.brand-tile-info strong{display:block;font-size:20px;color:#122b51;letter-spacing:-.04em}
.brand-tile-info small{display:block;color:#0b67b0;font-weight:800;font-size:11px;margin:4px 0 9px}
.brand-tile-info p{margin:0;color:#688096;font-size:12px;line-height:1.55}
.brand-arrow{background:#ffdf28;border-radius:50%;color:#152a46;display:grid;place-items:center;font-weight:850;font-size:20px;min-width:40px;height:40px}
.brand-disclaimer{margin-top:42px;background:#eaf3fc;border-radius:15px;padding:16px 20px;display:flex;align-items:flex-start;gap:12px;color:#51718b;font-size:12px}
.brand-disclaimer p{margin:0;line-height:1.7}.brand-disclaimer i{color:#075ba5;margin-top:4px}
/* New About page */
.about-modern-hero{padding:42px 0 52px!important;display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
.about-hero-copy h1{font-size:clamp(35px,5vw,69px);line-height:1.09;letter-spacing:-.064em;color:#0f284e;font-weight:900;margin:13px 0 21px}
.about-hero-copy p{color:#61768d;font-size:16px;line-height:1.8;max-width:640px;margin:0}
.about-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.about-secondary{padding:13px 20px;border:1px solid #cfdfea;border-radius:10px;text-decoration:none;color:#075ba5;font-weight:750;font-size:13px;background:#fff}
.about-hero-visual{position:relative;height:430px;border-radius:24px;overflow:hidden;background:#0c3357;box-shadow:0 20px 65px #0e47711d}
.about-hero-visual img{width:100%;height:100%;object-fit:cover}
.about-visual-note{position:absolute;left:25px;bottom:25px;background:#fff;padding:13px 17px;border-radius:12px;font-weight:850;color:#14436d;font-size:13px;box-shadow:0 10px 20px #001b3b30}
.about-values{padding:24px 0 55px!important}.about-values>h2{font-size:clamp(24px,3vw,38px);letter-spacing:-.05em;color:#10274d;font-weight:850;margin:9px 0 22px}
.about-value-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.about-value-grid article{padding:27px 24px;border-radius:16px;background:#fff;border:1px solid #e1eaf2;box-shadow:0 9px 28px #143e5c09}.about-value-grid i{font-size:23px;color:#075ba5;background:#e9f4fe;display:grid;place-items:center;width:56px;height:56px;border-radius:14px}.about-value-grid h3{margin:18px 0 10px;color:#143150;font-size:17px;font-weight:850}.about-value-grid p{margin:0;line-height:1.65;color:#62768c;font-size:13px}
.about-feature-strip{padding:32px!important;border-radius:22px;background:#e8f4fe;display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}.about-feature-strip h2{font-size:30px;color:#10274d;letter-spacing:-.045em;margin:8px 0 13px;font-weight:850}.about-feature-strip p{font-size:13px;color:#526f86;line-height:1.7;max-width:650px}.about-specialty-actions{display:grid;gap:9px}.about-specialty-actions a{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 17px;border-radius:11px;background:#fff;color:#075ba5!important;font-weight:800;text-decoration:none;font-size:13px}.about-specialty-actions i{margin-right:9px}
.about-contact-banner{background:#082f55;border-radius:20px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 35px!important;margin-top:34px!important;margin-bottom:70px!important;color:#fff}.about-contact-banner h2{color:#fff!important;font-weight:850;font-size:25px;letter-spacing:-.04em;margin:0 0 9px}.about-contact-banner p{color:#dae8f8;font-size:13px;margin:0}
@media(max-width:850px){.brand-page-hero{grid-template-columns:1fr;padding:35px 25px}.brand-hero-accent{display:none}.about-modern-hero{grid-template-columns:1fr;gap:25px}.about-hero-visual{height:280px}.about-feature-strip{grid-template-columns:1fr}}
@media(max-width:580px){.brand-page{padding-top:17px!important}.brand-page-hero{border-radius:15px;padding:27px 20px}.brand-cards{grid-template-columns:1fr;gap:12px}.brand-category-section{padding-top:28px}.brand-section-top{align-items:center}.brand-section-top h2{font-size:23px}.brand-tile-logo{min-height:137px}.brand-tile-logo img{height:110px}.about-modern-hero{padding:30px 0!important}.about-hero-copy p{font-size:14px}.about-value-grid{grid-template-columns:1fr}.about-feature-strip{padding:23px!important}.about-contact-banner{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.brand-tile{transition:none!important}.lagenco-announce-track{animation:none!important}}


/* ===== v6.css ===== */
/* Lagenco V6 — consistent desktop, tablet and mobile catalogue */
:root{--v6-blue:#095da9;--v6-navy:#112b4c;--v6-yellow:#ffe12b;--v6-bg:#f2f8fd}
html{scroll-behavior:smooth}body{color:var(--v6-navy)}
.shop-catalog-hero,.shop-container{max-width:100%;box-sizing:border-box}
.stock-grid,.pixel-products .shop-featured-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:19px!important;align-items:stretch}
.stock-card{display:flex;flex-direction:column;min-width:0;overflow:hidden!important;border-radius:19px!important;background:#fff;border:1px solid #dceaf4;transform:none!important;box-shadow:0 6px 22px rgba(11,56,101,.045)!important;transition:box-shadow .25s ease,border-color .25s ease!important}
.stock-card:hover{border-color:#b8d7ed!important;box-shadow:0 12px 30px rgba(11,56,101,.10)!important}
.stock-picture,.pixel-products .shop-featured-grid .stock-picture{box-sizing:border-box!important;position:relative;isolation:isolate;display:flex!important;align-items:center!important;justify-content:center!important;height:260px!important;aspect-ratio:auto!important;flex:0 0 260px!important;min-height:0!important;max-height:260px!important;padding:23px!important;margin:0!important;overflow:hidden!important;background:#f4f9fd}
.stock-picture img,.pixel-products .shop-featured-grid .stock-picture img{display:block!important;box-sizing:border-box!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important;object-position:center center!important;margin:0 auto!important;transform:none!important;transition:none!important;mix-blend-mode:multiply}
.stock-card:hover .stock-picture img{transform:none!important}
.stock-card .stock-count{position:absolute;left:14px;top:14px;z-index:2;padding:9px 12px;font-size:11px;border-radius:999px}
.stock-card .stock-chip-preorder{z-index:2;top:14px;right:14px}
.stock-body,.pixel-products .shop-featured-grid .stock-body{display:flex;flex-direction:column;flex:1;min-width:0;padding:18px 17px 17px!important}
.stock-body h3,.pixel-products .shop-featured-grid .stock-body h3{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;font-size:16px!important;line-height:1.38!important;letter-spacing:-.025em!important;min-height:45px}
.stock-brand{font-size:11px!important}
.stock-description,.pixel-products .shop-featured-grid .stock-description{min-height:70px!important;max-height:70px!important;line-height:1.65!important;font-size:12px!important;-webkit-line-clamp:3!important;overflow:hidden!important;word-break:normal}
.stock-low{margin-top:auto;min-height:22px;font-size:11px}
.stock-price,.pixel-products .shop-featured-grid .stock-price{font-size:14px!important;margin:13px 0!important}
.stock-buttons,.pixel-products .shop-featured-grid .stock-buttons{display:grid!important;grid-template-columns:1fr!important;gap:9px!important}
.stock-buttons a,.stock-buttons button,.pixel-products .shop-featured-grid .stock-buttons a,.pixel-products .shop-featured-grid .stock-buttons button{min-height:42px;box-sizing:border-box;font-size:12px!important;padding:11px!important;font-weight:800!important;line-height:1.2!important;text-decoration:none!important}
.stock-card-preorder{border-color:#f5d99e!important}.stock-card-preorder .stock-buy{background:#aa7409!important}
.stock-count.is-preorder{background:#fff0c8!important;color:#966200!important}
.stock-chip-preorder{background:#fff9e6!important;color:#885d04!important;border:1px solid #eed28c!important}
.stock-bullet-preorder{background:#bd8508!important}
.v6-filter-bar{display:flex;align-items:center;gap:14px;justify-content:flex-start;flex-wrap:wrap;padding:13px 0 16px}
.v6-filter-bar label{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;color:#34536b}
.v6-filter-bar select{background:#fff;border:1px solid #cddfeb;border-radius:10px;padding:10px 13px;color:#123253;min-height:40px;font-size:13px}
/* Hide obsolete condition filters and price slider while listed items have no supplied prices */
.filter-pill[data-category],#priceRange,#priceLabel,#priceRange~*,.shop-catalog-hero+div .sort-select{display:none!important}
#products{scroll-margin-top:150px}
.v6-announce{background:#075294;color:#fff;text-align:center;padding:11px 20px;font-size:12px;font-weight:650}
.sr-only{position:absolute!important;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
/* original marketing remains present for backward-compatible scripts but not as busy public UI */
.shop-legacy-community,#wheelSpinModal,.wheel-float,.wheel-spin-btn,.shop-legacy-wheel,.shop-reviews-float{display:none!important}
/* no repeated entrance motions */
.reveal,.motion-reveal,[data-reveal]{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
@media(max-width:1120px){.stock-grid,.pixel-products .shop-featured-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.stock-picture,.pixel-products .shop-featured-grid .stock-picture{height:225px!important;max-height:225px!important;flex-basis:225px!important}}
@media(max-width:790px){.stock-grid,.pixel-products .shop-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.stock-picture,.pixel-products .shop-featured-grid .stock-picture{height:220px!important;max-height:220px!important;flex-basis:220px!important}}
@media(max-width:490px){.stock-grid,.pixel-products .shop-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.stock-picture,.pixel-products .shop-featured-grid .stock-picture{height:160px!important;max-height:160px!important;flex-basis:160px!important;padding:11px!important}.stock-body,.pixel-products .shop-featured-grid .stock-body{padding:12px!important}.stock-body h3,.pixel-products .shop-featured-grid .stock-body h3{font-size:14px!important;min-height:42px}.stock-description,.pixel-products .shop-featured-grid .stock-description{font-size:11px!important;min-height:78px!important;max-height:78px!important}.stock-card .stock-count{padding:7px 9px;font-size:9px}.stock-chip-preorder{display:none}.stock-buttons a,.stock-buttons button,.pixel-products .shop-featured-grid .stock-buttons a,.pixel-products .shop-featured-grid .stock-buttons button{min-height:39px;font-size:11px!important;padding:9px 4px!important}.v6-filter-bar{gap:6px}.v6-filter-bar label{font-size:11px}.v6-filter-bar select{max-width:150px}}
@media(max-width:355px){.stock-grid,.pixel-products .shop-featured-grid{grid-template-columns:1fr!important}.stock-picture,.pixel-products .shop-featured-grid .stock-picture{height:240px!important;max-height:240px!important;flex-basis:240px!important}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Global-search suggestion layers on top of navigation. */
.shop-global-search{overflow:visible!important}.shop-global-search .lagenco-search-suggest{width:min(500px,calc(100vw - 30px));left:0;right:auto;z-index:10000;top:calc(100% + 12px)}
@media(max-width:600px){.shop-global-search .lagenco-search-suggest{width:min(420px,calc(100vw - 30px))}}

/* Product detail uses the same announcement content as the storefront. */
body:has(.detail-wrap) .lagenco-shared-announcement{background:#075294;color:#fff;padding:10px 16px;min-height:38px;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:12px}
body:has(.detail-wrap) .lagenco-announce-center{width:100%;max-width:1180px;margin:auto;display:flex;align-items:center;justify-content:center}
body:has(.detail-wrap) .lagenco-announce-track{display:flex;align-items:center;justify-content:center;gap:26px;white-space:nowrap;flex-wrap:wrap}
body:has(.detail-wrap) .lagenco-announce-track a{color:#fff;text-decoration:none;font-size:12px;font-weight:700}
body:has(.detail-wrap) .lagenco-announce-track i{color:#ffe12b;margin-right:6px}
@media(max-width:650px){body:has(.detail-wrap) .lagenco-announce-track{gap:12px}body:has(.detail-wrap) .lagenco-announce-track a:not(:first-child){display:none}}


/* ===== mobile-safe.css ===== */
/* Lagenco safe mobile refinement — additive CSS only.
   No changes to application JavaScript, authentication or data handling. */
@media(max-width:980px){
  .shop-header .pixel-header-main{grid-template-columns:minmax(0,1fr) auto!important;gap:10px 12px!important}
  .shop-header .shop-global-search{order:3!important;grid-column:1/-1!important;max-width:100%!important;width:100%!important;margin-top:4px!important}
  .shop-header-actions{justify-self:end;gap:6px!important}
  .shop-nav-inner{overflow-x:auto!important;display:flex!important;flex-wrap:nowrap!important;gap:14px!important;scrollbar-width:none;overscroll-behavior-inline:contain;scroll-snap-type:x proximity}
  .shop-nav-inner::-webkit-scrollbar{display:none}
  .shop-nav-inner>a,.shop-nav-inner .shop-nav-all{scroll-snap-align:start;white-space:nowrap}
  .stock-grid,.pixel-products .shop-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stock-card{min-width:0}
  .stock-picture{overflow:hidden!important}
  .stock-picture img{max-width:94%!important;max-height:94%!important;width:auto!important;height:auto!important;object-fit:contain!important;object-position:center!important}
  .story-grid,.supply-process,.brand-visual-grid{grid-template-columns:1fr!important}
  .timeline-steps,.inventory-benefits,.contact-strip,.contact-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:640px){
  .shop-container{width:calc(100% - 24px)!important}
  .shop-header .pixel-header-main{grid-template-columns:minmax(0,1fr) auto!important;gap:7px 9px!important;padding:10px 0!important}
  .shop-header .shop-logo img{width:145px!important;max-width:100%!important;height:auto!important}
  .shop-header-actions{gap:5px!important}
  .shop-header .shop-header-action{min-width:34px!important;min-height:43px!important}
  .shop-header .shop-header-action span{display:none!important}
  .shop-header .shop-global-search{min-width:0!important;height:44px!important}
  .shop-header .shop-global-search input{font-size:16px!important;min-width:0!important}
  .shop-header .shop-global-search button{height:44px!important}
  .shop-nav-inner{gap:10px!important;padding-bottom:4px!important;-webkit-overflow-scrolling:touch}
  .shop-nav-inner>a,.shop-nav-inner .shop-nav-all{min-height:40px!important;display:inline-flex!important;align-items:center;padding:8px 5px!important}
  .shop-checkout-notice .shop-container{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:9px 0}
  .shop-checkout-notice .shop-container span{line-height:1.4}
  .shop-catalog-hero{padding:30px 0!important}
  .shop-catalog-hero h1{font-size:clamp(30px,9vw,42px)!important;line-height:1.08!important;overflow-wrap:anywhere}
  .shop-catalog-hero p{font-size:14px!important;line-height:1.6!important}
  .hero-metrics{grid-template-columns:1fr!important;gap:8px!important}
  .hero-metrics div{padding:12px 14px!important}
  .shop-type-filters{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;padding:10px 12px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .shop-type-filters::-webkit-scrollbar{display:none}
  .shop-type-filter,.catalog-brand-link{flex:0 0 auto!important;white-space:nowrap!important;min-height:43px!important;padding:8px 14px!important}
  .search-bar{min-width:0!important;max-width:100%!important;width:100%!important}
  .search-bar input{min-height:44px!important;font-size:16px!important}
  .sort-select{min-height:44px!important}
  .stock-grid,.pixel-products .shop-featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .stock-picture,.pixel-products .shop-featured-grid .stock-picture{height:172px!important;max-height:172px!important;flex-basis:172px!important;padding:10px!important;overflow:hidden!important}
  .stock-picture img,.pixel-products .shop-featured-grid .stock-picture img{max-width:94%!important;max-height:94%!important;width:auto!important;height:auto!important;object-fit:contain!important}
  .stock-body,.pixel-products .shop-featured-grid .stock-body{padding:12px!important;min-width:0}
  .stock-body h3,.pixel-products .shop-featured-grid .stock-body h3{font-size:14px!important;line-height:1.4!important;overflow-wrap:anywhere}
  .stock-description,.pixel-products .shop-featured-grid .stock-description{font-size:12px!important;line-height:1.5!important;min-height:0!important;max-height:76px!important;overflow:hidden}
  .stock-price{font-size:14px!important}
  .stock-buttons{display:grid!important;grid-template-columns:1fr!important;gap:7px!important}
  .stock-buttons a{display:flex!important;width:100%!important;min-height:43px!important;justify-content:center;align-items:center;text-align:center;font-size:12px!important;padding:10px 6px!important}
  .stock-count{font-size:10px!important;padding:7px 9px!important}
  .stock-chip-preorder{font-size:9px!important;padding:6px 8px!important}
  .contact-form-grid{grid-template-columns:1fr!important}
  .contact-form input,.contact-form select,.contact-form textarea{font-size:16px!important;max-width:100%}
  .timeline-steps,.inventory-benefits,.contact-strip,.contact-quick-grid,.supply-steps{grid-template-columns:1fr!important}
  .story-grid,.brand-visual-grid,.supply-process{grid-template-columns:1fr!important}
  .brand-visual-card{grid-template-columns:1fr!important}
  .story-card,.brand-visual-card,.supply-process{padding:20px!important}
  .brand-page-hero{padding:24px 20px!important}
  .brand-cards{grid-template-columns:1fr!important}
  .brand-tile-info{padding:17px!important}
  .brand-tile-logo{min-height:130px!important}
  .brand-tile-logo img{max-height:105px!important}
  .detail-grid{grid-template-columns:1fr!important}
  .detail-wrap{padding:18px 12px 48px!important}
  .detail-image{min-height:260px!important;padding:18px!important;border-radius:20px!important}
  .detail-image img{max-height:285px!important;object-fit:contain!important}
  .detail-info{padding:22px!important;border-radius:20px!important}
  .detail-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .detail-actions a{width:100%!important;min-height:48px!important;justify-content:center!important;box-sizing:border-box}
  .detail-top{flex-wrap:wrap!important;gap:10px!important}
  .modal-panel{max-width:calc(100vw - 20px)!important;max-height:90dvh!important;overflow-y:auto!important}
  .shop-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:470px){
  .stock-grid,.pixel-products .shop-featured-grid{grid-template-columns:1fr!important;gap:12px!important}
  .stock-picture,.pixel-products .shop-featured-grid .stock-picture{height:230px!important;max-height:230px!important;flex-basis:230px!important}
  .stock-description{max-height:none!important}
  .shop-footer-grid{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){
  .stock-card,.brand-tile,.shop-primary-btn{transition:none!important}
}


/* ===== v7-design.css ===== */
/* Lagenco V7 — additive presentation. Kept separate from the stable store, catalogue and admin styles. */
:root{--v7-ink:#102b46;--v7-blue:#075ea8;--v7-line:#d8e6f1;--v7-muted:#5b7187;--v7-soft:#f4f9fd}
.v7-story,.v7-principles,.v7-benefit-grid,.v7-process-grid,.v7-contact-intro{min-width:0}
.v7-story *, .v7-sell-main *, .v7-contact-intro *{box-sizing:border-box}
.v7-section-head h2,.v7-story-copy h2,.v7-sell-contact h2{font-family:'Plus Jakarta Sans','Sora',system-ui,sans-serif;color:var(--v7-ink);font-weight:800;letter-spacing:-.045em;line-height:1.18}
.v7-section-head h2{font-size:clamp(1.65rem,3.5vw,2.5rem);margin:.6rem 0 1.5rem}
.v7-story{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(18px,3vw,38px);align-items:stretch;margin:30px auto 24px}
.v7-story-copy{background:#fff;padding:clamp(24px,4.5vw,52px);border:1px solid var(--v7-line);border-radius:25px;box-shadow:0 15px 40px rgba(23,61,92,.05)}
.v7-story-copy h2{font-size:clamp(1.9rem,3.6vw,3.05rem);margin:15px 0 22px}
.v7-story-copy p{line-height:1.85;color:#4f6881;font-size:clamp(.9rem,1.2vw,1rem);margin:0 0 17px}
.v7-text-link{display:inline-block;color:var(--v7-blue);font-weight:800;text-decoration:none;padding:10px 0}
.v7-text-link:hover{text-decoration:underline}
.v7-story-art{position:relative;overflow:hidden;border-radius:25px;background:radial-gradient(circle at 78% 20%,#d7e6f1 0,transparent 47%),linear-gradient(145deg,#e7f3fb,#d1e5f2);min-height:455px;border:1px solid #cbdde8;display:flex;align-items:center;justify-content:center;flex-direction:column}
.v7-story-art-label{position:absolute;left:24px;top:22px;z-index:2;color:#275b7f;letter-spacing:.19em;font-size:10px;font-weight:900}
.v7-box-shadow{position:relative;width:min(65%,335px);height:235px;transform:rotate(-7deg);filter:drop-shadow(5px 25px 17px #28445c40)}
.v7-pack-front{position:absolute;top:44px;bottom:0;left:0;width:78%;background:linear-gradient(135deg,#d6a46f 4%,#b97f49 90%);border:1px solid #996037;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;box-shadow:inset 0 1px 1px #f6d0a5}
.v7-pack-front img{width:58%;height:auto;max-height:110px;object-fit:contain;filter:drop-shadow(0 4px 1px #88604455)}
.v7-pack-front span{font-size:9px;letter-spacing:.13em;color:#6e4c2a;font-weight:900;text-align:center}
.v7-pack-top{position:absolute;top:-4px;left:0;width:78%;height:50px;transform:skew(44deg);transform-origin:bottom left;background:linear-gradient(105deg,#e7c192,#b98b5a);border:1px solid #ad8357;border-radius:4px;z-index:1}
.v7-pack-side{position:absolute;top:20px;right:-1px;width:22%;height:calc(100% - 20px);transform:skewY(-38deg);transform-origin:top left;background:linear-gradient(90deg,#a36c3a,#8e5b32);border:1px solid #8b5b32;z-index:-1}
.v7-art-caption{position:absolute;left:24px;bottom:17px;right:24px;font-size:10px;color:#4a6a7f;text-align:center}
.v7-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0 auto 35px}
.v7-principles article{min-width:0;padding:23px;background:white;border:1px solid var(--v7-line);border-radius:20px}
.v7-principles article>span{font-size:15px;color:var(--v7-blue);font-weight:900;display:block;margin-bottom:10px}
.v7-principles h3{font-size:17px;color:var(--v7-ink);font-weight:800;margin:0 0 10px}
.v7-principles p{font-size:13px;color:#60788b;line-height:1.75;margin:0}
/* dedicated business inventory page */
.v7-sell-main{color:var(--v7-ink);background:#f6fafd;padding:0 0 65px}
.v7-sell-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:30px;align-items:center;background:radial-gradient(circle at 78% 15%,#315d80 0,transparent 38%),linear-gradient(115deg,#0c2743 4%,#17466f 97%);border-radius:26px;margin:24px auto 38px;min-height:400px;padding:clamp(25px,5vw,62px);overflow:hidden;color:#fff}
.v7-sell-hero .shop-kicker,.v7-sell-contact .shop-kicker{color:#f9d847!important}
.v7-sell-hero h1{font-family:'Plus Jakarta Sans','Sora',system-ui,sans-serif;color:#fff!important;font-size:clamp(2rem,4.5vw,3.6rem);font-weight:850;line-height:1.12;letter-spacing:-.055em;margin:12px 0 20px}
.v7-sell-hero p{color:#dbeaf5;font-size:clamp(14px,1.4vw,16px);line-height:1.8;max-width:610px}
.v7-sell-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:23px}
.v7-sell-actions a,.v7-sell-contact-cta a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-radius:13px;text-decoration:none;font-weight:800;padding:12px 22px}
.v7-sell-second{color:#fff;border:1px solid #ffffff70}
.v7-sell-visual{position:relative;min-height:280px;display:flex;align-items:center;justify-content:center}
.v7-sell-stack{position:relative;width:290px;height:220px;transform:translateY(14px)}
.v7-sell-stack .v7-stack-box{display:block;position:absolute;background:linear-gradient(145deg,#d9a668,#af7940);border:2px solid #986437;border-radius:5px;box-shadow:8px 13px 0 #06233c33}
.v7-stack-box.one{width:130px;height:95px;bottom:0;left:35px}
.v7-stack-box.two{width:112px;height:125px;bottom:0;left:170px}
.v7-stack-box.three{width:105px;height:95px;bottom:98px;left:61px}
.v7-stack-box.four{width:90px;height:115px;bottom:130px;left:169px}
.v7-warehouse-icon{position:absolute;left:110px;top:-25px;font-size:140px;color:#ffffff15;line-height:1}
.v7-sell-visual-caption{position:absolute;bottom:-2px;left:0;right:0;text-align:center;color:#c7dcec;font-size:12px;font-weight:750}
.v7-sell-benefits,.v7-process{margin:0 auto 39px}
.v7-benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v7-benefit-grid article,.v7-process-grid article{background:#fff;border:1px solid var(--v7-line);padding:23px;border-radius:20px;box-shadow:0 12px 28px #14334b08;min-width:0}
.v7-benefit-icon{height:43px;width:43px;display:grid;place-items:center;border-radius:14px;background:#e5f3fd;color:#075da6;font-weight:900;font-size:22px;margin-bottom:18px}
.v7-benefit-grid h3,.v7-process-grid h3{margin:0 0 10px;font-size:16px;font-weight:850;color:var(--v7-ink)}
.v7-benefit-grid p,.v7-process-grid p{margin:0;color:#5b7287;line-height:1.75;font-size:13px}
.v7-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.v7-process-grid b{display:block;margin-bottom:19px;font-size:21px;color:var(--v7-blue)}
.v7-sell-contact{background:linear-gradient(125deg,#0e3152,#154b75);border-radius:24px;padding:clamp(25px,4.5vw,46px);display:flex;justify-content:space-between;align-items:center;gap:30px;color:#fff}
.v7-sell-contact h2{font-size:clamp(1.5rem,3vw,2.2rem);color:#fff!important;margin:8px 0 12px}
.v7-sell-contact p{color:#d7e8f4;line-height:1.75;max-width:600px;font-size:14px}
.v7-sell-contact-cta{display:grid;gap:12px;min-width:240px}
.v7-sell-contact-cta span{color:#c4ddea;font-size:12px;line-height:1.5;text-align:center}
/* contact info tiles; existing form is preserved */
.v7-contact-intro{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:4px 0 27px}
.v7-contact-way{min-width:0;display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid var(--v7-line);border-radius:19px;padding:20px 21px;color:var(--v7-ink);text-decoration:none;box-shadow:0 9px 22px #153c5c08;transition:transform .2s,box-shadow .2s}
.v7-contact-way:hover{transform:translateY(-3px);box-shadow:0 16px 28px #153c5c15}
.v7-contact-way>span{background:#ecf5fb;color:var(--v7-blue);height:40px;width:40px;border-radius:12px;display:grid;place-items:center;font-size:19px;font-weight:800}
.v7-contact-way strong{font-size:16px}
.v7-contact-way small{font-size:12px;line-height:1.5;color:#698094}
/* distinct catalogue identities; existing product filters and data untouched */
body[data-page="assortiment"] .shop-catalog-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 78% 20%,#d1e8f9 0,transparent 38%),linear-gradient(125deg,#f0f8ff,#e2f1fc);border-bottom:1px solid #d7e8f5}
body[data-page="assortiment"][data-v7-scene="power-tools"] .shop-catalog-hero{background:radial-gradient(circle at 85% 20%,#f2b54450 0,transparent 39%),linear-gradient(115deg,#111f31,#284766)}
body[data-page="assortiment"][data-v7-scene="power-tools"] .shop-catalog-hero h1,body[data-page="assortiment"][data-v7-scene="power-tools"] .shop-catalog-hero p,body[data-page="assortiment"][data-v7-scene="power-tools"] .shop-catalog-hero .shop-kicker{color:#fff!important}
body[data-page="assortiment"][data-v7-scene="microphones"] .shop-catalog-hero{background:radial-gradient(circle at 80% 15%,#b8d7fc 0,transparent 37%),linear-gradient(130deg,#f8fcff,#e6f1fa)}
body[data-page="assortiment"][data-v7-scene="audio"] .shop-catalog-hero{background:radial-gradient(circle at 80% 25%,#8a5be73a,transparent 45%),linear-gradient(115deg,#142336,#314a70)}
body[data-page="assortiment"][data-v7-scene="audio"] .shop-catalog-hero h1,body[data-page="assortiment"][data-v7-scene="audio"] .shop-catalog-hero p,body[data-page="assortiment"][data-v7-scene="audio"] .shop-catalog-hero .shop-kicker{color:#fff!important}
body[data-page="assortiment"][data-v7-scene="outlet"] .shop-catalog-hero{background:radial-gradient(circle at 85% 20%,#fcd25777,transparent 39%),linear-gradient(115deg,#fff8d9,#fff2b8)}
body[data-page="assortiment"][data-v7-scene="hand-tools"] .shop-catalog-hero{background:linear-gradient(115deg,#f4f2ee,#e4dfd5)}
body[data-page="merken"] .brand-page-hero{background:linear-gradient(115deg,#123e66,#0a63a5)!important}
body[data-page="leer-ons-kennen"] .about-modern-hero{background:linear-gradient(120deg,#e9f5ff,#f6fbff);border-radius:24px;padding:20px!important}
body[data-page="contact"] .shop-catalog-hero{background:linear-gradient(118deg,#f3faff,#e8f5fb)}
.shop-type-filter{border-radius:12px!important;min-height:44px}
.shop-type-filter.active{box-shadow:0 4px 14px #1469a420}
#lagenco-stock-grid.stock-grid{align-items:stretch}
#lagenco-stock-grid .stock-card{height:100%;min-width:0}
#lagenco-stock-grid .stock-picture{overflow:hidden!important}
#lagenco-stock-grid .stock-picture img{object-fit:contain!important;max-width:100%!important;max-height:100%!important}
.v7-search-notice{grid-column:1/-1;background:#f1f7fd;border:1px solid #d0e1ed;border-radius:14px;padding:15px 18px;color:#34536f;font-size:13px;line-height:1.6}
.v7-search-note-title{font-size:14px;color:#163757;font-weight:800;display:block;margin-bottom:4px}
.v7-suggested-list{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.v7-suggestion{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid #d7e5ef;background:#fff;border-radius:16px;padding:11px;min-width:0;color:var(--v7-ink)}
.v7-suggestion img{width:70px;height:70px;object-fit:contain;background:#f6fafd;border-radius:10px;flex:0 0 70px}
.v7-suggestion strong{display:block;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.v7-suggestion small{font-size:11px;color:#6a8193;line-height:1.4}
.v7-suggestion:hover{border-color:#87b7dc}
/* leave-page dialog (only for dirty contact forms navigating internally) */
.v7-leave-dialog{border:0;border-radius:20px;padding:0;max-width:min(460px,calc(100% - 28px));width:100%;box-shadow:0 30px 75px #081e3657;background:#fff;color:var(--v7-ink)}
.v7-leave-dialog::backdrop{background:#0a1f36a3}
.v7-leave-inner{padding:28px}.v7-leave-inner h2{margin:0 0 10px;font-size:22px}.v7-leave-inner p{color:#546f85;line-height:1.7;font-size:14px}
.v7-leave-actions{display:flex;gap:10px;margin-top:22px}.v7-leave-actions button{border-radius:12px;min-height:46px;flex:1;padding:10px 13px;font-weight:800;cursor:pointer;border:1px solid #cddde9;background:#fff;color:var(--v7-ink)}
.v7-leave-actions button:last-child{background:var(--v7-blue);color:#fff;border-color:var(--v7-blue)}
/* responsive layouts */
@media(max-width:1100px){.v7-benefit-grid,.v7-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v7-suggested-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.v7-story{grid-template-columns:1fr}.v7-story-art{min-height:345px}.v7-sell-hero{grid-template-columns:1fr}.v7-sell-visual{min-height:180px}.v7-contact-intro{grid-template-columns:1fr 1fr}.v7-sell-contact{flex-direction:column;align-items:stretch}}
@media(max-width:700px){.v7-principles{grid-template-columns:1fr}.v7-story{margin-top:18px}.v7-story-copy{padding:24px}.v7-benefit-grid,.v7-process-grid{grid-template-columns:1fr}.v7-sell-hero{padding:28px 23px;margin-top:12px;border-radius:19px}.v7-sell-hero h1{font-size:clamp(2rem,8.3vw,3rem)}.v7-sell-visual{display:none}.v7-sell-main .shop-container{width:calc(100% - 24px)!important}.v7-contact-intro{grid-template-columns:1fr}.v7-contact-way{padding:17px}.v7-sell-contact{padding:24px}}
@media(max-width:640px){
  body[data-page="assortiment"] .shop-catalog-hero{padding:28px 0!important}
  body[data-page="assortiment"] .shop-catalog-hero h1{font-size:clamp(1.9rem,8.5vw,2.5rem)!important;line-height:1.15!important}
  body[data-page="assortiment"] .shop-catalog-hero p{font-size:14px!important;line-height:1.6}
  body[data-page="assortiment"] .shop-catalog-hero + div[style*="position:sticky"]{position:relative!important;top:auto!important;padding:12px!important;z-index:100}
  body[data-page="assortiment"] .shop-catalog-hero + div[style*="position:sticky"]>div{display:flex!important;gap:10px!important;flex-wrap:wrap!important;max-width:100%}
  body[data-page="assortiment"] .shop-catalog-hero + div[style*="position:sticky"] .search-bar{flex:1 1 100%!important;max-width:none!important;width:100%!important}
  body[data-page="assortiment"] .shop-catalog-hero + div[style*="position:sticky"] select{min-height:44px!important}
  body[data-page="assortiment"] .shop-type-filters{padding:10px 12px!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body[data-page="assortiment"] .shop-type-filter,body[data-page="assortiment"] .catalog-brand-link{flex:0 0 auto!important;min-height:44px!important;padding:9px 12px!important;font-size:12px!important;white-space:nowrap!important}
  body[data-page="assortiment"] #main{padding:17px 12px 50px!important;max-width:100%!important}
  body[data-page="assortiment"] #lagenco-stock-grid.stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body[data-page="assortiment"] #lagenco-stock-grid .stock-body{padding:13px!important}
  body[data-page="assortiment"] #lagenco-stock-grid .stock-body h3{font-size:14px!important;line-height:1.38!important}
  body[data-page="assortiment"] #lagenco-stock-grid .stock-description{font-size:12px!important;line-height:1.5!important;max-height:90px!important}
  body[data-page="assortiment"] #lagenco-stock-grid .stock-buttons a{font-size:12px!important;min-height:44px!important}
  body[data-page="assortiment"] .sort-select{min-height:44px!important}
  body[data-page="assortiment"] #productCollectionMessage{font-size:13px!important}
  .v7-suggestion{padding:8px;gap:9px}.v7-suggestion img{height:55px;width:55px;flex-basis:55px}
  .v7-suggested-list{grid-template-columns:1fr}
  .v7-leave-actions{flex-direction:column}
}
@media(max-width:490px){body[data-page="assortiment"] #lagenco-stock-grid.stock-grid{grid-template-columns:1fr!important;gap:13px!important}
body[data-page="assortiment"] #lagenco-stock-grid .stock-picture{height:215px!important;max-height:215px!important;flex-basis:215px!important}
body[data-page="assortiment"] #lagenco-stock-grid .stock-chip-preorder{display:inline-flex!important}
body[data-page="assortiment"] #lagenco-stock-grid .stock-description{max-height:none!important;min-height:0!important}
}
@media(prefers-reduced-motion:reduce){.v7-contact-way{transition:none!important}}
/* Accessible keyboard focus, inputs and compact product-detail layout without affecting the shop engine. */
:where(.v7-story,.v7-principles,.v7-sell-main,.v7-contact-intro) a:focus-visible,
:where(.v7-story,.v7-principles,.v7-sell-main,.v7-contact-intro) button:focus-visible,
.v7-leave-dialog button:focus-visible{outline:3px solid #f4b52d;outline-offset:3px}
#contactForm{scroll-margin-top:110px}
@media(max-width:720px){
  .detail-top{gap:10px!important;flex-wrap:wrap!important}
  .detail-info h1{font-size:clamp(26px,8vw,36px)!important;line-height:1.2}
  .detail-actions{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .detail-actions a{min-height:48px!important;box-sizing:border-box;width:100%;justify-content:center}
  .detail-image img{width:100%!important;max-width:100%!important;object-fit:contain!important}
  .contact-form input,.contact-form select,.contact-form textarea{font-size:16px!important;max-width:100%!important}
  .v7-story-copy h2{font-size:clamp(26px,7vw,38px)}
}
@media(max-width:410px){
  .detail-info{padding:18px!important}
  .v7-story-art{min-height:300px}
  .v7-box-shadow{transform:scale(.87) rotate(-7deg)}
  .shop-footer-grid{grid-template-columns:1fr!important}
}


/* ===== v8-fixes.css ===== */
/* Lagenco V8: targeted production fixes; one coherent stylesheet bundle. */
:root{--lagenco-blue:#0a5ca5;--lagenco-ink:#142e4a}
html{scroll-padding-top:110px}body{overflow-x:hidden}
[hidden]{display:none!important}
/* Critical state: modals must never paint before their own scripts initialise. */
.modal-backdrop:not(.open){display:none!important}
.lagenco-exit-backdrop[hidden]{display:none!important}
/* Header and the search menu have distinct stacking contexts. The menu is portalled to body. */
.shop-header.pixel-navbar{z-index:1050!important}
.lagenco-shared-announcement{z-index:1051!important}
.shop-header .shop-global-search{overflow:visible!important}
.lagenco-v8-search-panel{position:fixed!important;z-index:2147483000!important;background:#fff!important;border:1px solid #cfe2f1!important;box-shadow:0 22px 60px rgba(8,44,78,.23)!important;border-radius:18px!important;padding:8px!important;overflow:auto!important;overscroll-behavior:contain!important;font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif!important;color:#15334e!important;text-align:left;min-width:0;box-sizing:border-box}
.lagenco-v8-search-top{display:flex;justify-content:space-between;align-items:center;padding:6px 11px 9px;border-bottom:1px solid #e7f0f6;color:#60798b;font-size:12px;font-weight:800}
.lagenco-v8-search-top button{width:34px;height:34px;border:0;background:#eef6fc;color:#275574;font-size:20px;border-radius:9px;cursor:pointer}
.lagenco-v8-result{display:grid;grid-template-columns:56px minmax(0,1fr) 22px;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;min-height:66px;text-decoration:none!important;color:#143450!important;background:#fff}
.lagenco-v8-result:hover,.lagenco-v8-result:focus-visible{background:#eaf5ff;outline:none}
.lagenco-v8-result img{width:54px;height:54px;object-fit:contain;border-radius:9px;background:#f4f9fd}
.lagenco-v8-result span{min-width:0}.lagenco-v8-result strong{font-size:13px;display:block;line-height:1.35}.lagenco-v8-result small{font-size:11px;color:#647d90;line-height:1.55;display:block}.lagenco-v8-open{color:#0b66b3;font-size:18px}
.lagenco-v8-all{display:block;background:#edf6fd;padding:12px 13px;margin-top:5px;color:#0a5ca5!important;text-decoration:none!important;font-weight:800;font-size:12px;border-radius:11px;text-align:center}
.lagenco-v8-search-note{font-size:12px;line-height:1.6;background:#f7fbff;color:#456c86;border-radius:10px;padding:11px}
/* One coherent assortment interface */
body[data-page=assortiment] .shop-catalog-hero{padding:58px 0 54px!important;min-height:250px;display:flex;align-items:center;isolation:isolate}
body[data-page=assortiment] .shop-catalog-hero .shop-container{position:relative;z-index:2}
body[data-page=assortiment] .shop-catalog-hero h1{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif!important;font-weight:900!important;font-size:clamp(35px,4.4vw,58px)!important;letter-spacing:-.048em!important;line-height:1.11!important;margin:12px 0!important;max-width:730px}
body[data-page=assortiment] .shop-catalog-hero p{max-width:660px!important;font-size:15px!important;line-height:1.75!important}
body[data-page=assortiment] .shop-catalog-hero:after{content:'';position:absolute;pointer-events:none;z-index:0;right:clamp(10px,8vw,130px);bottom:18px;width:min(27vw,260px);height:205px;background-position:center;background-repeat:no-repeat;background-size:contain;opacity:.55;filter:drop-shadow(0 18px 22px #0b294d26)}
body[data-page=assortiment][data-v7-scene="power-tools"] .shop-catalog-hero{background:linear-gradient(118deg,#112336 0%,#1c3e5c 78%,#2c5f83 100%)!important}
body[data-page=assortiment][data-v7-scene="power-tools"] .shop-catalog-hero:after{background-image:url('assets/power-tools.svg');opacity:.66}
body[data-page=assortiment][data-v7-scene="audio"] .shop-catalog-hero{background:linear-gradient(118deg,#121d32 0%,#273f65 78%,#354f73 100%)!important}
body[data-page=assortiment][data-v7-scene="audio"] .shop-catalog-hero:after{background-image:url('assets/audio.svg');opacity:.75}
body[data-page=assortiment][data-v7-scene="microphones"] .shop-catalog-hero{background:linear-gradient(118deg,#edf7ff 0%,#dcefff 65%,#cbdbef 100%)!important}
body[data-page=assortiment][data-v7-scene="microphones"] .shop-catalog-hero:after{background-image:url('assets/microphones.svg');opacity:.75}
body[data-page=assortiment][data-v7-scene="outlet"] .shop-catalog-hero{background:linear-gradient(120deg,#fff9e0,#ffedaa 67%,#f9dc76)!important}
body[data-page=assortiment][data-v7-scene="outlet"] .shop-catalog-hero:after{background-image:url('assets/outlet.svg');opacity:.8}
body[data-page=assortiment][data-v7-scene="hand-tools"] .shop-catalog-hero{background:linear-gradient(120deg,#f5f0e6,#e7d5bb)!important}
body[data-page=assortiment][data-v7-scene="hand-tools"] .shop-catalog-hero:after{background-image:url('assets/hand-tools.svg')}
body[data-page=assortiment][data-v7-scene="accessories"] .shop-catalog-hero:after{background-image:url('assets/audio.svg')}
body[data-page=assortiment][data-v7-scene="electronics"] .shop-catalog-hero:after{background-image:url('assets/studio.svg')}
body[data-page=assortiment][data-v7-scene="lighting"] .shop-catalog-hero{background:linear-gradient(115deg,#fffdf1,#ffe7a4)!important}
body[data-page=assortiment][data-v7-scene="workwear"] .shop-catalog-hero{background:linear-gradient(115deg,#e6edf2,#cedae2)!important}
/* CONTRAST FIX: keep text and background in sync, including during partial hydration. */
body[data-page=assortiment][data-v7-scene="power-tools"] .shop-catalog-hero :is(h1,p,.shop-kicker),body[data-page=assortiment][data-v7-scene="audio"] .shop-catalog-hero :is(h1,p,.shop-kicker){color:#fff!important;text-shadow:none!important}
body[data-page=assortiment]:not([data-v7-scene="power-tools"]):not([data-v7-scene="audio"]) .shop-catalog-hero h1{color:#163956!important}
body[data-page=assortiment]:not([data-v7-scene="power-tools"]):not([data-v7-scene="audio"]) .shop-catalog-hero p{color:#4f6e86!important}
body[data-page=assortiment]:not([data-v7-scene="power-tools"]):not([data-v7-scene="audio"]) .shop-catalog-hero .shop-kicker{color:#0a5c9f!important}
body[data-page=assortiment] .shop-catalog-hero + div[style*="position:sticky"]{position:relative!important;top:auto!important;z-index:2!important;box-shadow:none!important}
body[data-page=assortiment] .shop-type-filters{max-width:1250px!important;gap:9px!important;padding:13px 22px!important;margin:0 auto!important}
body[data-page=assortiment] .shop-type-filter{padding:11px 15px!important;font-size:12px!important;border-radius:12px!important;min-height:44px!important}
body[data-page=assortiment] .v6-filter-bar{max-width:1200px;margin:0 auto;padding:15px 24px!important;gap:14px!important}
body[data-page=assortiment] .v6-filter-bar label{display:flex;gap:8px;align-items:center}
body[data-page=assortiment] .v6-filter-bar select{min-width:140px;font-size:13px;min-height:43px;border-radius:10px}
body[data-page=assortiment] .filter-pill[data-category]{display:none!important}
body[data-page=assortiment] div:has(>#priceRange){display:none!important}
body[data-page=assortiment] #productGrid:empty{display:none!important}
body[data-page=assortiment] .stock-card .stock-price{font-size:15px!important}
body[data-page=assortiment] .stock-card .stock-description{font-size:13px!important}
/* More distinctive editorial pages */
body[data-page=merken] .brand-page-hero{background:linear-gradient(120deg,#103255 0%,#0a609e 100%)!important;box-shadow:0 16px 42px #173e5e20}
body[data-page=merken] .brand-page-hero :is(h1,p,.shop-kicker){color:#fff!important}
body[data-page=contact] .shop-catalog-hero{background:linear-gradient(120deg,#e3f5ff 0%,#f9fcff 72%)!important}
body[data-page=contact] .shop-catalog-hero h1{color:#123955!important}
body[data-page=leer-ons-kennen] .about-modern-hero{background:linear-gradient(130deg,#f1f9ff,#eaf4fd)!important;border:1px solid #d6e5f0}
body[data-page=verkoop-je-voorraad] .v7-sell-hero{box-shadow:0 24px 55px #173f6424}
/* Mobile-first touch areas; no overflows */
button,input,select,textarea{max-width:100%}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid #efbc35;outline-offset:3px}
@media(max-width:800px){body[data-page=assortiment] .shop-catalog-hero:after{opacity:.2!important;right:0;width:38vw}}
@media(max-width:640px){
 body[data-page=assortiment] .shop-catalog-hero{min-height:0!important;padding:28px 0 31px!important}
 body[data-page=assortiment] .shop-catalog-hero h1{font-size:clamp(29px,8vw,40px)!important;max-width:100%}
 body[data-page=assortiment] .shop-catalog-hero p{max-width:100%!important;font-size:14px!important}
 body[data-page=assortiment] .shop-catalog-hero:after{opacity:.12!important;width:46vw;height:140px;right:-22px;bottom:8px}
 body[data-page=assortiment] .shop-catalog-hero+div[style*="position:sticky"]{padding:12px!important}
 body[data-page=assortiment] .shop-type-filters{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;scrollbar-width:none;padding:12px 12px!important}
 body[data-page=assortiment] .shop-type-filter{flex:0 0 auto!important;white-space:nowrap!important}
 body[data-page=assortiment] .v6-filter-bar{padding:12px!important;display:grid!important;grid-template-columns:1fr 1fr;gap:10px!important}
 body[data-page=assortiment] .v6-filter-bar label{display:flex;min-width:0;flex-direction:column;align-items:stretch;font-size:12px}
 body[data-page=assortiment] .v6-filter-bar select{min-width:0;width:100%;font-size:13px;padding:10px!important}
 body[data-page=assortiment] #main{padding:17px 12px 44px!important;max-width:100%!important}
 body[data-page=assortiment] #lagenco-stock-grid .stock-card{min-width:0}
 body[data-page=assortiment] #lagenco-stock-grid .stock-picture img{object-fit:contain!important}
 .shop-header .shop-global-search{width:100%!important;max-width:100%!important}
 .lagenco-v8-search-panel{border-radius:14px!important}
 .lagenco-v8-result{grid-template-columns:46px minmax(0,1fr) 18px;gap:10px;padding:8px;min-height:57px}
 .lagenco-v8-result img{width:45px;height:45px}
 .lagenco-v8-search-top{padding:4px 8px 6px}
}
@media(max-width:490px){body[data-page=assortiment] #lagenco-stock-grid.stock-grid{grid-template-columns:1fr!important}body[data-page=assortiment] #lagenco-stock-grid .stock-picture{height:210px!important;max-height:210px!important;flex-basis:210px!important}}