/* TOGOPEPTIDE — Design system glow-up · Layer 6 (after components/pages)
   Cluster 02 sprint. Loads sitewide.
   Adds: semantic tokens, card/button/form v2, skeleton-loaders,
         badge-system, focus-visible, scrollbar, selection-color,
         page-transitions, reveal-on-scroll. */

/* ── Semantic tokens (on-weak pattern from MEMORY) ───────────── */
:root {
  --color-success-weak:    rgba(46, 194, 126, 0.12);
  --color-success-on-weak: #4ce39d;
  --color-warning-weak:    rgba(240, 180, 41, 0.12);
  --color-warning-on-weak: #ffd166;
  --color-danger-weak:     var(--color-red-500-a12);
  --color-danger-on-weak:  #ff5e5e;
  --color-info-weak:       rgba(80, 145, 255, 0.12);
  --color-info-on-weak:    #6ba8ff;

  /* Elevation scale */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.3);
  --shadow-md:  0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.4);
  --shadow-xl:  0 24px 64px -12px rgba(0,0,0,0.5);

  /* Motion easings */
  --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);

  /* Durations */
  --dur-fast: 160ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
}

/* ── Selection color: brand-accent instead of default blue ─── */
::selection {
  background: var(--color-accent-soft, rgba(224, 27, 27, 0.25));
  color: var(--color-text, #fff);
}
::-moz-selection {
  background: var(--color-accent-soft, rgba(224, 27, 27, 0.25));
  color: var(--color-text, #fff);
}

/* ── Custom scrollbar (WebKit + Firefox) ────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-8);
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background var(--dur-fast) var(--ease-out);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
  background-clip: content-box;
}

/* ── Focus-visible: keyboard-only premium ring ──────────────── */
:focus-visible {
  outline: 2px solid var(--color-accent, #e01b1b);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Card v2 enhancements ──────────────────────────────────── */
.card {
  transition:
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
  will-change: transform;
}
.card--interactive:hover {
  transform: translateY(-3px);
  border-color: var(--color-border-strong, rgba(255,255,255,0.18));
  box-shadow: var(--shadow-md);
}
.card--interactive:active {
  transform: translateY(-1px);
  transition-duration: var(--dur-fast);
}
.card--interactive:focus-visible {
  outline-offset: 4px;
}

/* Card image zoom on hover (subtle) */
.card--media .card__media img {
  transition: transform 600ms var(--ease-out);
}
.card--interactive.card--media:hover .card__media img {
  transform: scale(1.04);
}

/* ── Button v2: loading + disabled states ──────────────────── */
.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.btn[data-loading="true"] {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--color-text, #fff);
  animation: btn-spin 600ms linear infinite;
}
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* Button hierarchy: destructive variant */
.btn--destructive {
  background: var(--color-danger, #e01b1b);
  color: #fff;
  border-color: transparent;
}
.btn--destructive:hover {
  background: var(--color-accent-hover, #ff3030);
}

/* ── Form-field v2: floating label ─────────────────────────── */
.field--floating {
  position: relative;
}
.field--floating .field__label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 14px;
  color: var(--color-text-muted, #8c8c92);
  background: var(--color-bg-elevated, #0b0b0d);
  padding: 0 6px;
  transition:
    top var(--dur-fast) var(--ease-out),
    font-size var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.field--floating .input:focus + .field__label,
.field--floating .input:not(:placeholder-shown) + .field__label {
  top: 0;
  font-size: 11px;
  color: var(--color-accent, #e01b1b);
}

.field__error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--color-danger-on-weak, #ff5e5e);
  min-height: 16px;
}
.field--invalid .input {
  border-color: var(--color-danger, #e01b1b);
}

/* ── Badge system v2: full state matrix ────────────────────── */
.badge--bestseller {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border: 1px solid var(--color-border-accent);
}
.badge--premium {
  background: rgba(255, 200, 80, 0.1);
  color: #ffd166;
  border: 1px solid rgba(255, 200, 80, 0.2);
}
.badge--new {
  background: var(--color-info-weak);
  color: var(--color-info-on-weak);
  border: 1px solid rgba(80, 145, 255, 0.22);
}
.badge--sale {
  background: var(--color-success-weak);
  color: var(--color-success-on-weak);
  border: 1px solid rgba(46, 194, 126, 0.22);
}
.badge--low-stock {
  background: var(--color-warning-weak);
  color: var(--color-warning-on-weak);
  border: 1px solid rgba(240, 180, 41, 0.22);
}

/* ── Skeleton-loader (shimmer) ─────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--radius-8);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton--text {
  height: 14px;
  width: 100%;
  margin: 6px 0;
  border-radius: var(--radius-xs);
}
.skeleton--title {
  height: 28px;
  width: 70%;
  margin-bottom: 12px;
  border-radius: var(--radius-sm);
}
.skeleton--image {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-12);
}
.skeleton--card {
  padding: 16px;
  background: var(--color-bg-elevated, #0b0b0d);
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  border-radius: var(--radius-12);
}

/* ── Page-transition: fade-in on load ──────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  body.page-transition-ready {
    animation: page-fade-in var(--dur-base) var(--ease-out);
  }
  @keyframes page-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ── Reveal-on-scroll (used by glowup.js IntersectionObserver) ── */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 600ms var(--ease-out),
      transform 600ms var(--ease-out);
  }
  [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Stagger children */
  [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity 500ms var(--ease-out),
      transform 500ms var(--ease-out);
  }
  [data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
  }
  [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
  [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: 70ms; }
  [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: 140ms; }
  [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: 210ms; }
  [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: 280ms; }
  [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: 350ms; }
}

/* ── Smooth-scroll with sticky-nav offset ──────────────────── */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Reduce-motion respect: kill all transforms ────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Touch-target audit fix: 44×44 minimum on mobile ───────── */
@media (max-width: 640px) {
  button,
  .btn,
  a.btn,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
  }
}

/* ── External-link indicator (opt-in via .ext class) ───────── */
a.ext::after {
  content: "↗";
  display: inline-block;
  margin-left: 4px;
  font-size: 0.85em;
  opacity: 0.7;
  transition: transform var(--dur-fast) var(--ease-out);
}
a.ext:hover::after {
  transform: translate(2px, -2px);
  opacity: 1;
}

/* ── Improved details/summary (FAQ accordion enhancement) ──── */
details[open] > summary { color: var(--color-text, #fff); }
details > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 24px;
  transition: color var(--dur-fast) var(--ease-out);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 300;
  transition: transform var(--dur-base) var(--ease-out);
}
details[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
}

/* ── Image with width/height: prevent layout-shift wins ───── */
img:not([width]):not([height]) {
  /* fallback aspect-ratio so untouched images at least don't reflow */
  aspect-ratio: 1 / 1;
}

/* ── Performance: content-visibility lazy below-fold sections ── */
/* Skip rendering work for sections below initial viewport — saves
   significant render time on pages with many sections. */
.section,
.compound-hero {
  contain-intrinsic-size: auto 600px;
}
.section:not(:first-of-type) {
  content-visibility: auto;
}

/* ── Language auto-detect banner (cluster 17) ───────────────── */
.lang-banner{
  position:relative;z-index:54;
  display:flex;align-items:center;gap:14px;
  padding:10px 16px;
  background:linear-gradient(90deg,rgba(80,145,255,0.08),rgba(80,145,255,0.04));
  border-bottom:1px solid rgba(80,145,255,0.18);
  font-size:13px;color:#cbd5e1;
  animation:lang-fade-in 320ms cubic-bezier(0.22,1,0.36,1);
}
.lang-banner__flag{font-size:20px;line-height:1;flex-shrink:0}
.lang-banner__text{flex:1;line-height:1.4}
.lang-banner__text strong{color:#fff;font-weight:600}
.lang-banner__btn{
  background:#fff;color:#0a0a0c;border:0;
  padding:7px 16px;border-radius:7px;
  font-size:12.5px;font-weight:700;cursor:pointer;
  font-family:inherit;letter-spacing:0.02em;
  transition:transform 140ms ease, opacity 140ms ease;
}
.lang-banner__btn:hover{transform:translateY(-1px);opacity:0.92}
.lang-banner__close{
  background:transparent;border:0;color:#9d9da5;
  font-size:18px;line-height:1;cursor:pointer;padding:0 6px;
}
.lang-banner__close:hover{color:#fff}
@keyframes lang-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:560px){
  .lang-banner{padding:8px 12px;gap:10px;font-size:12px}
  .lang-banner__flag{font-size:18px}
}

/* ── Performance: avoid expensive backdrop-filter during scroll ── */
body.is-scrolling .sticky-bar,
body.is-scrolling .cookie-banner,
body.is-scrolling .nav-search__panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Hero aurora glow-up (cluster 05) ──────────────────────── */
.hero--aurora{position:relative;overflow:hidden;isolation:isolate;padding:80px 0 64px}
.hero--aurora .hero__bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 75% 0%, color-mix(in srgb, var(--color-red-500) 20%, transparent), transparent 60%),
    radial-gradient(ellipse 60% 50% at 25% -10%, rgba(140,30,30,0.18), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-red-500) 6%, transparent) 0%, transparent 50%),
    #050505;
}
.hero--aurora .hero__bg::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.4) 100%);
}
.hero--aurora .hero__inner{position:relative;text-align:center;max-width:880px}

/* ── Hero met landscape accent-carousel — ÉÉN consistente layout overal ──
   Side-by-side op alle devices, géén stack, géén per-breakpoint sizing-flips.
   Carousel = ~26vw met clamp om uitschieters op extreme schermen te voorkomen. */
.hero--with-carousel{overflow:hidden} /* lokaal — bleed mag niet body-scroll triggeren */
.hero--with-carousel .hero__inner{
  max-width:none;
  text-align:left;
  display:grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 26vw, 520px);
  gap: clamp(16px, 2.4vw, 44px);
  align-items:center;
}
.hero--with-carousel .hero__text{min-width:0;max-width:820px}
.hero--with-carousel .hero__eyebrow{justify-content:flex-start;text-align:left}
.hero--with-carousel .hero__lead{margin:0 0 28px;max-width:none;text-align:left}
.hero--with-carousel .hero__actions{justify-content:flex-start;margin-bottom:0;flex-wrap:wrap}
/* Trust pills: spannen onder text+carousel (volle breedte), niet meer in tekst-kolom.
   Geeft H1 en lead alle horizontale ruimte op smalle viewports. */
.hero--with-carousel .hero__trust{
  grid-column: 1 / -1;
  margin-top: 28px;
  justify-content:flex-start;
  display:flex !important;
  flex-wrap:wrap;
  gap: 10px 12px;
  grid-template-columns: none;
}
.hero--with-carousel .hero__trust li{min-height:auto}

/* Carousel-wrap: kleine bleed (-8px) — zelfde op alle screens. */
.hero__carousel-wrap{
  position:relative;
  min-width:0;
  margin-right:-8px;
}
.fp-carousel--hero{
  max-width:none;
  margin:0;
  border-radius: var(--radius-md);
}
.fp-carousel--hero .fp-carousel__viewport{
  aspect-ratio: 4 / 3; /* landscape — horizontaal liggend, premium product-photo feel */
}
/* Arrows verbergen op smalle carousel — pas zichtbaar vanaf ~280px breed
   (dus alleen op grotere viewports). Dots + auto-cycle blijven altijd. */
.fp-carousel--hero .fp-carousel__arrow{display:none}
@media (min-width: 1200px){
  .fp-carousel--hero .fp-carousel__arrow{display:flex;width:32px;height:32px}
  .fp-carousel--hero .fp-carousel__arrow svg{width:14px;height:14px}
  .fp-carousel--hero .fp-carousel__arrow--prev{left:8px}
  .fp-carousel--hero .fp-carousel__arrow--next{right:8px}
}
.fp-carousel--hero .fp-carousel__dots{bottom:8px;padding:3px 6px;gap:5px}
.fp-carousel--hero .fp-carousel__dot::before{width:5px;height:5px}

/* Mobile (<640): hero stackt — tekst boven, landscape carousel full-width onder.
   Reden: 375px is te krap voor side-by-side, een echte foto onder de tekst voelt
   netter en geeft de boodschap meer ruimte. */
@media (max-width: 640px){
  .hero--with-carousel .hero__inner{
    grid-template-columns: 1fr; /* stack */
    gap: 22px;
  }
  .hero--with-carousel .hero__text{max-width:none}
  .hero--with-carousel .hero__title{
    font-size:clamp(28px, 7vw, 36px) !important;
    line-height:1.1 !important;
    letter-spacing:-0.02em !important;
    margin-bottom:14px !important;
  }
  .hero--with-carousel .hero__lead{
    font-size:14.5px !important;
    line-height:1.55 !important;
    margin-bottom:20px !important;
  }
  .hero--with-carousel .hero__actions{
    gap:10px;
    margin-bottom:0;
  }
  .hero--with-carousel .hero__actions .btn--lg{
    padding:12px 16px;
    font-size:14px;
  }
  /* Carousel mobile: full-width landscape, géén dots en géén gradient-overlay
     over de foto — schone editorial-photo, auto-cycle doet het werk. */
  .hero__carousel-wrap{margin-right:0}
  .fp-carousel--hero .fp-carousel__viewport{aspect-ratio: 16 / 10}
  .fp-carousel--hero .fp-carousel__dots{display:none}
  .fp-carousel--hero .fp-carousel__slide::after{display:none}
  /* Trust pills: compact, 2 op een rij waar het past */
  .hero--with-carousel .hero__trust{
    margin-top:18px;
    gap:8px;
  }
  .hero--with-carousel .hero__trust li{
    padding:6px 10px;
    font-size:11.5px;
    line-height:1.3;
  }
  .hero--with-carousel .hero__trust li svg{width:12px;height:12px}
}
.hero__eyebrow{display:inline-flex;align-items:center;gap:8px;justify-content:center;margin-bottom:18px}
.hero__eyebrow-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--color-accent, #e01b1b);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--color-red-500) 18%, transparent), 0 0 18px color-mix(in srgb, var(--color-red-500) 45%, transparent);
  animation:hero-pulse 2.4s ease-in-out infinite;
}
@keyframes hero-pulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in srgb, var(--color-red-500) 18%, transparent), 0 0 18px color-mix(in srgb, var(--color-red-500) 45%, transparent)}
  50%   {box-shadow:0 0 0 6px var(--color-red-500-a10), 0 0 26px color-mix(in srgb, var(--color-red-500) 65%, transparent)}
}
.hero__title{
  font-size:clamp(36px, 6vw, 60px) !important;
  line-height:1.05 !important;
  letter-spacing:-0.025em !important;
  margin:0 0 20px !important;
  font-weight:700;
}
.hero__title-em{
  background:linear-gradient(120deg, #fff 0%, #ff5e5e 50%, #fff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  background-size:200% 100%;
  animation:hero-shimmer 6s ease-in-out infinite;
}
@keyframes hero-shimmer{
  0%,100%{background-position:0% 50%}
  50%   {background-position:100% 50%}
}
.hero__lead{
  font-size:clamp(15px, 1.4vw, 18px) !important;
  line-height:1.6 !important;
  color:#cbd5e1 !important;
  max-width:680px;margin:0 auto 28px !important;
}
.hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:32px}
.hero__trust{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;
  font-size:12.5px;color:#aab0bb;
}
.hero__trust li{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  transition:border-color 180ms var(--ease-out, ease), background 180ms var(--ease-out, ease);
}
.hero__trust li:hover{
  border-color:rgba(255,255,255,0.16);
  background:rgba(255,255,255,0.06);
}
.hero__trust li svg{color:var(--color-accent, #e01b1b);flex-shrink:0;opacity:0.9}
.hero__trust li strong{color:#fff;font-weight:600}
@media (max-width:640px){
  /* Hero op mobile: compacter padding + bottom-clearance voor mobile-nav
     zodat hero-CTAs niet meer onder bottom-nav vallen.
     Was 60/48 → 32/calc(nav-height+24) — content schuift omhoog ~28px én
     krijgt 88px bodem-clearance voor 64px mobile-nav + 24px gap. */
  .hero--aurora{padding:32px 0 calc(var(--tgp-mn-height, 64px) + 24px)}
  .hero__title{font-size:36px !important}
  .hero__trust{gap:8px 10px}
  .hero__trust li{padding:6px 11px;font-size:11.5px}
  /* CTAs visueel omhoog trekken (translateY) zodat ze tussen install-card
     (bottom-end ~y666) en bottom-nav (start ~y743) vallen — clear zone.
     Layout-flow blijft intact. Niet van toepassing op de nieuwe with-carousel
     hero, want die heeft compactere flow zonder de oude bottom-nav clash. */
  .hero:not(.hero--with-carousel) .hero__actions{ transform: translateY(-40px); }
}

/* ── Button micro-interactions: ripple on click (opt-in) ──── */
.btn--ripple { position: relative; overflow: hidden; }
.btn--ripple::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%),
              rgba(255,255,255,0.18) 0%,
              transparent 50%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.btn--ripple:active::before { opacity: 1; transition-duration: 0ms; }

/* ── Skip-to-content (a11y) ─────────────────────────────────────
   Auto-injected by glowup.js. Visually hidden until keyboard focus,
   then jumps into view as a high-contrast button. */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--accent, #ff2d2d);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  top: 16px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ── Side-by-side compound comparison (PDP) ─────────────── */
.compound-compare-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.compound-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.compound-compare-table thead th {
  position: relative;
  padding: 14px 14px 16px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  text-align: left;
  vertical-align: top;
  background: var(--color-bg-elevated);
}
.compound-compare-table thead th:first-child {
  font-family: inherit;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.compound-compare-table thead th.is-current {
  background: color-mix(in srgb, var(--color-red-500) 7%, transparent);
  border-bottom-color: var(--color-red-500-a35);
}
.compound-compare-table thead th.is-current::before {
  content: "You're viewing";
  position: absolute;
  top: 6px; left: 14px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-accent-text, #ff5e5e);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: inherit;
}
.compound-compare-table tbody th {
  padding: 12px 14px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-bg-elevated);
  border-right: 1px solid var(--color-border);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
}
.compound-compare-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  vertical-align: middle;
  font-size: var(--text-sm);
}
.compound-compare-table tbody tr:last-child td,
.compound-compare-table tbody tr:last-child th {
  border-bottom: 0;
}
.compound-compare-table tbody td.is-current { background: color-mix(in srgb, var(--color-red-500) 4%, transparent); }
.compound-compare-table .ccmp-name {
  display: block;
  color: var(--color-text);
  text-decoration: none;
  font-weight: var(--weight-semibold);
}
.compound-compare-table .ccmp-name:hover { color: var(--color-accent-text, #ff5e5e); }
.compound-compare-table .ccmp-price-from {
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}
.compound-compare-table .ccmp-cta {
  display: inline-block;
  padding: 6px 12px;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-sm);
  background: var(--color-accent, #e01b1b);
  color: #fff;
  text-decoration: none;
  transition: background 160ms ease;
}
.compound-compare-table .ccmp-cta:hover { background: var(--color-accent-hover, #ff3030); }
.compound-compare-table .ccmp-cta--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.compound-compare-table .ccmp-stock {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}
.compound-compare-table .ccmp-stock--green { background: color-mix(in srgb, #22c55e 14%, transparent); color: #86efac; }
.compound-compare-table .ccmp-stock--amber { background: color-mix(in srgb, #f59e0b 14%, transparent); color: #fcd34d; }
.compound-compare-table .ccmp-stock--red   { background: color-mix(in srgb, var(--color-red-500) 14%, transparent); color: #fca5a5; }
.compound-compare-note {
  margin: 0;
  padding: 10px 14px 12px;
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
@media (max-width: 720px) {
  .compound-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compound-compare-table { min-width: 640px; }
}

/* ── Abandoned-cart resume banner (homepage only) ─────────── */
.togo-cart-resume {
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-red-500) 16%, transparent), color-mix(in srgb, var(--color-red-500) 6%, transparent));
  border-bottom: 1px solid color-mix(in srgb, var(--color-red-500) 22%, transparent);
  color: var(--color-text);
}
.togo-cart-resume__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
}
.togo-cart-resume__icon {
  flex-shrink: 0;
  color: var(--color-accent-text, #ff5e5e);
}
.togo-cart-resume__copy {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-text);
}
.togo-cart-resume__copy strong { color: #fff; }
.togo-cart-resume__cta {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--color-accent, #e01b1b);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-8);
  transition: background 160ms ease;
}
.togo-cart-resume__cta:hover { background: var(--color-accent-hover, #ff3030); }
.togo-cart-resume__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--color-text-muted, #9d9da5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.togo-cart-resume__close:hover {
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
@media (max-width: 720px) {
  .togo-cart-resume__copy { font-size: 13px; }
  .togo-cart-resume__cta { padding: 6px 12px; font-size: 12.5px; }
}

/* ── Persistent compare-mode (shop + category) ─────────── */
/* Per-card toggle: bottom-right of media area, out of the way of the
   top-left badge stack ("Fresh batch" / "New" / etc). On desktop the
   pill stays subtle until the card is hovered or the toggle is checked;
   on touch it's always visible (no hover state). */
.togo-compare-toggle {
  position: absolute;
  /* Top-right cluster: zit LINKS van de wishlist-heart (8px base + 44px heart
     + 8px gap = right:60px). Match wishlist 44x44 size voor visuele symmetrie. */
  top: 8px;
  right: 60px;
  bottom: auto;
  z-index: 5;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(14, 14, 17, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #cbd5e1;
  cursor: pointer;
  user-select: none;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}
/* Show on card hover/focus, when toggle is checked, or on touch devices */
.card:hover .togo-compare-toggle,
.card:focus-within .togo-compare-toggle,
.togo-compare-toggle[data-on],
.togo-compare-toggle:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) and (pointer: coarse) {
  .togo-compare-toggle { opacity: 1; transform: translateY(0); }
}
.togo-compare-toggle:hover,
.togo-compare-toggle:focus-visible {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  outline: none;
}
/* Icon sizing — SVG injected by JS */
.togo-compare-toggle__check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  color: inherit;
  transition: color 140ms ease;
}
.togo-compare-toggle__check svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* Label is decorative-for-AT only — sr-only pattern */
.togo-compare-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.togo-compare-toggle[data-on] {
  background: color-mix(in srgb, var(--color-red-500) 92%, transparent);
  border-color: var(--color-red-500);
  color: #fff;
}
.togo-compare-toggle[data-on]:hover {
  background: rgba(255, 48, 48, 0.95);
}

/* Sticky footer — moet ALTIJD boven de mobile bottom-nav verschijnen.
   z-index naar floater-prompt token (650) zodat hij boven bottom-nav (90) ligt.
   Op mobile (≤880px) springt de bottom-positie omhoog met nav-height + safe-area. */
#togo-compare-footer {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: var(--z-floater-prompt, 650);
  background: #0e0e11;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-14);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  transform: translateY(150%);
  opacity: 0;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
  pointer-events: none;
}
@media (max-width: 880px) {
  #togo-compare-footer {
    bottom: calc(var(--tgp-mn-height, 64px) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}
#togo-compare-footer.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.togo-compare-footer__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.togo-compare-footer__left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.togo-compare-footer__title { color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; }
.togo-compare-footer__count {
  font-size: 11px;
  color: #9d9da5;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}
.togo-compare-footer__chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.togo-compare-footer__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-pill);
  color: #cbd5e1;
  font-size: 12px;
  max-width: 180px;
}
.togo-compare-footer__chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.togo-compare-footer__chip button {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #8e8e98;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.togo-compare-footer__chip button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.togo-compare-footer__right { display: flex; gap: 8px; flex-shrink: 0; }
.togo-compare-footer__clear {
  padding: 7px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-8);
  color: #cbd5e1;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.togo-compare-footer__clear:hover { border-color: rgba(255, 255, 255, 0.22); color: #fff; }
.togo-compare-footer__cta {
  padding: 8px 14px;
  background: var(--color-accent, #e01b1b);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-8);
  font-size: 13px;
  font-weight: 700;
  transition: background 160ms ease;
}
.togo-compare-footer__cta:hover { background: var(--color-accent-hover, #ff3030); }

/* Avoid clash with PWA install prompt — both use bottom corner */
#togo-compare-footer.is-visible ~ #togo-pwa-install,
#togo-pwa-install ~ #togo-compare-footer.is-visible { bottom: 84px; }

@media (max-width: 720px) {
  .togo-compare-footer__chips { display: none; }
  .togo-compare-footer__inner { padding: 10px 12px; gap: 10px; }
}

/* ── PDP polish: scroll progress, prev/next nav, back-to-top ── */
#togo-pdp-progress,
#togo-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent, #e01b1b), #ff5e5e);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 80ms linear;
  pointer-events: none;
}
#togo-reading-progress { height: 2px; opacity: 0.85; }

.togo-pdp-arrows-section { padding-top: 0; }
.togo-pdp-arrows {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}
@media (max-width: 720px) {
  .togo-pdp-arrows { grid-template-columns: 1fr; }
}
.togo-pdp-arrow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.togo-pdp-arrow:hover {
  border-color: color-mix(in srgb, var(--color-red-500) 45%, transparent);
  background: color-mix(in srgb, var(--color-red-500) 4%, transparent);
  transform: translateY(-2px);
}
.togo-pdp-arrow--next { text-align: right; }
.togo-pdp-arrow--empty {
  background: transparent;
  border-style: dashed;
  pointer-events: none;
  opacity: 0.35;
}
.togo-pdp-arrow__hint {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #9d9da5);
  font-weight: 600;
}
.togo-pdp-arrow__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.togo-pdp-arrow:hover .togo-pdp-arrow__name { color: var(--color-accent-text, #ff5e5e); }

#togo-pdp-totop,
#togo-reading-totop {
  position: fixed;
  right: 18px;
  bottom: 80px; /* above sticky add-to-cart bar (PDP); reading override below */
  z-index: var(--z-fab, 600);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(14, 14, 17, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease, transform 200ms ease, color 160ms ease, border-color 160ms ease;
  pointer-events: none;
}
/* Slot 2 of bottom-right FAB stack — sits above feedback FAB (slot 1, bottom:18) */
#togo-reading-totop { bottom: 78px; }
#togo-pdp-totop.is-visible,
#togo-reading-totop.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#togo-pdp-totop:hover,
#togo-reading-totop:hover {
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
@media (max-width: 720px) {
  #togo-pdp-totop { right: 14px; bottom: 70px; }
  #togo-reading-totop { right: 14px; bottom: 70px; }
}

/* ── Homepage "Continue your research" recently-viewed widget ── */
.togo-home-recent__grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}
@media (min-width: 720px) {
  .togo-home-recent__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.togo-home-recent__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.togo-home-recent__card:hover {
  border-color: color-mix(in srgb, var(--color-red-500) 45%, transparent);
  background: color-mix(in srgb, var(--color-red-500) 4%, transparent);
  transform: translateY(-2px);
}
.togo-home-recent__media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
}
.togo-home-recent__media img,
.togo-home-recent__media picture {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.togo-home-recent__body {
  flex: 1;
  min-width: 0;
}
.togo-home-recent__eyebrow {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9d9da5);
}
.togo-home-recent__title {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.togo-home-recent__desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.togo-home-recent__arrow {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-text-muted);
  transition: transform 200ms ease, color 200ms ease;
}
.togo-home-recent__card:hover .togo-home-recent__arrow {
  transform: translateX(3px);
  color: var(--color-accent-text, #ff5e5e);
}

/* ── Cross-category navigation (bottom of category.html) ─── */
.togo-cat-related__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .togo-cat-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.togo-cat-related__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
}
.togo-cat-related__card:hover {
  border-color: color-mix(in srgb, var(--color-red-500) 45%, transparent);
  background: color-mix(in srgb, var(--color-red-500) 4%, transparent);
  transform: translateY(-2px);
}
.togo-cat-related__eyebrow {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9d9da5);
}
.togo-cat-related__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.togo-cat-related__card:hover .togo-cat-related__title {
  color: var(--color-accent-text, #ff5e5e);
}
.togo-cat-related__desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.togo-cat-related__cta {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent-text, #ff5e5e);
}

/* ── Sticky TOC for long content pages (≥1024px viewport) ── */
#togo-toc {
  position: fixed;
  top: 96px;
  right: 24px;
  width: 240px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  z-index: 60;
  padding: 16px 14px 14px;
  background: rgba(14, 14, 17, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-14);
  font-size: 13px;
  scrollbar-width: thin;
}
.togo-toc__title {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted, #9d9da5);
}
.togo-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: toc-item;
}
.togo-toc__item { margin: 0; padding: 0; }
.togo-toc__link {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--radius-8);
  color: #cbd5e1;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  line-height: 1.35;
}
.togo-toc__link:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
}
.togo-toc__link.is-active {
  background: var(--color-red-500-a10);
  border-left-color: var(--color-accent, #e01b1b);
  color: #fff;
}
.togo-toc__num {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px;
  color: var(--color-text-muted, #7d7d85);
  font-weight: 600;
  padding-top: 2px;
}
.togo-toc__link.is-active .togo-toc__num { color: var(--color-accent-text, #ff5e5e); }
.togo-toc__text {
  flex: 1;
  font-size: 12.5px;
}

/* Hide until there is enough right gutter for a fixed rail outside content. */
@media (max-width: 1839px) {
  #togo-toc { display: none !important; }
}
/* On very wide viewports, keep the TOC outside the centered content shell. */
@media (min-width: 1840px) {
  #togo-toc { right: max(24px, calc((100vw - 1280px) / 2 - 264px)); }
}

/* ── Anchor links on headings (GitHub-style #) ──────────── */
.togo-anchor-host { position: relative; }
.togo-anchor-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted, #7d7d85);
  text-decoration: none;
  opacity: 0;
  vertical-align: middle;
  transition: opacity 160ms ease, color 160ms ease, background 160ms ease;
}
.togo-anchor-host:hover .togo-anchor-link,
.togo-anchor-host:focus-within .togo-anchor-link,
.togo-anchor-link:focus-visible {
  opacity: 1;
}
.togo-anchor-link:hover {
  color: var(--color-accent-text, #ff5e5e);
  background: color-mix(in srgb, var(--color-red-500) 8%, transparent);
}

/* Toast notification */
/* Bottom-center toast — gecoordineerd met .acct-toast / .lab-toast /
   .togo-toast-stack via :has()-rules in togo-floater-stack.css.
   `transition: bottom` is toegevoegd zodat verticale push vloeiend tweent.
   Dit is de LAAGSTE prio (bottom 32px); wijkt bij overlap omhoog. */
#togo-anchor-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  z-index: var(--z-toast, 700);
  padding: 10px 18px;
  background: rgba(20, 20, 24, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 200ms ease,
              transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              bottom 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
#togo-anchor-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (hover: none) and (pointer: coarse) {
  /* Touch: always show the # link since there's no hover */
  .togo-anchor-link { opacity: 0.4; }
}

/* ── Smart-404 "did you mean" card ──────────────────────── */
.togo-404-suggest {
  margin: 16px 0 32px;
  padding: 18px 22px;
  background: linear-gradient(135deg, var(--color-red-500-a10), color-mix(in srgb, var(--color-red-500) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-red-500) 32%, transparent);
  border-radius: var(--radius-14);
}
.togo-404-suggest__eyebrow {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-text, #ff5e5e);
}
.togo-404-suggest__link {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px 16px;
  text-decoration: none;
  color: var(--color-text);
  transition: transform 200ms ease;
}
.togo-404-suggest__link:hover { transform: translateX(2px); }
.togo-404-suggest__label {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.togo-404-suggest__url {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
  color: var(--color-text-muted, #9d9da5);
}
.togo-404-suggest__cta {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent-text, #ff5e5e);
  letter-spacing: 0.04em;
}

/* ── Wishlist heart on shop/category cards (top-right corner) ──
   44×44 voor consistentie met compare-toggle in cluster. Was 34×34
   maar werd door mobile-ux tap-target rule naar 44 gepusht op shop;
   nu sitewide expliciet 44 voor symmetrisch 2-icon cluster. */
.togo-wishlist-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(14, 14, 17, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  color: #cbd5e1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}
/* Show on card hover/focus, when saved, or on touch */
.card:hover .togo-wishlist-heart,
.card:focus-within .togo-wishlist-heart,
.togo-wishlist-heart[data-saved],
.togo-wishlist-heart:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (hover: none) and (pointer: coarse) {
  .togo-wishlist-heart {
    opacity: 1;
    transform: translateY(0);
  }
}
.togo-wishlist-heart:hover {
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.togo-wishlist-heart[data-saved] {
  background: color-mix(in srgb, var(--color-red-500) 92%, transparent);
  border-color: var(--color-red-500);
  color: #fff;
}
.togo-wishlist-heart[data-saved] svg { fill: currentColor; }
.togo-wishlist-heart[data-saved]:hover {
  background: rgba(255, 48, 48, 0.95);
}

/* ── PDP image lightbox ────────────────────────────────── */
body.togo-lightbox-open { overflow: hidden; }

#togo-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal, 400);
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
#togo-lightbox[hidden] { display: none; }
#togo-lightbox.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.togo-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 8, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: zoom-out;
}

.togo-lightbox__panel {
  position: relative;
  max-width: min(90vw, 900px);
  max-height: 90vh;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.96);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
#togo-lightbox.is-visible .togo-lightbox__panel { transform: scale(1); }

.togo-lightbox__picture,
.togo-lightbox__picture img {
  display: block;
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-12);
  background: #0a0a0d;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

.togo-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms ease, border-color 160ms ease;
  z-index: 2;
}
.togo-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

@media (max-width: 720px) {
  #togo-lightbox { padding: 12px; }
  .togo-lightbox__close {
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.6);
  }
}