/* =============================================================================
   TafelStudio — base.css
   Bevat: CSS custom properties, reset-aanpassingen, typografie, layout,
          header, navigatie, footer, knoppen, formulieren, hulpklassen.
   ============================================================================= */

/* ── Huisstijl-font: Bellarose (gelicenseerd, lokaal gehost) ───────────────────
   Eén gewicht (regular), geen echte cursief — daarom staan de vroegere
   cursief-accenten elders op font-style:normal. woff2 eerst (24 KB), ttf als
   terugval; font-display:swap voorkomt onzichtbare tekst tijdens het laden. */
@font-face {
  font-family: 'Bellarose';
  src: url('../fonts/Bellarose.woff2') format('woff2'),
       url('../fonts/Bellarose.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Custom Properties ─────────────────────────────────────────────────────── */
:root {
  --color-bg:         #FAF8F5;
  --color-text:       #2B2520;
  --color-accent:     #9C8466;
  --color-border:     #E5DED5;
  --color-btn-hover:  #7D684F;
  --color-white:      #FFFFFF;
  --color-light:      #F2EDE7;

  --font-heading: 'Bellarose', 'Hanken Grotesk', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radius:       4px;
  --transition:   0.2s ease;
  --max-width:    1280px;
  --gutter:       clamp(1rem, 4vw, 2.5rem);
  --ts-header-h:  90px;   /* hoogte sticky header (col-full 72px + padding); ≤480px = 78px */
}

/* ── Reset / Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  background-color: var(--color-bg);
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

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

/* ── Typografie ────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 0.75em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.75rem); }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1rem; }

/* ── Layout helpers ────────────────────────────────────────────────────────── */
.ts-container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ts-section {
  padding-block: clamp(3rem, 8vw, 6rem);
}

/* ── Geen crèmekleurige balk tussen header en hero ─────────────────────────────
   Storefront zet ruimte tussen header en inhoud via .site-header
   { margin-bottom: 4.24em } én .site-main { padding-top: 4.24em }. Op de
   homepage moet de hero-video direct tegen de navigatie aansluiten (desktop én
   mobiel), dus daar allebei op nul. */
.home .site-header {
  margin-bottom: 0 !important;
}
.home .site-main {
  padding-top: 0 !important;
}
.home .site-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Minder loze ruimte tussen header/broodkruimel en de inhoud ────────────────
   Op alle NIET-home-pagina's (shop, product, losse pagina's zoals de
   interieurstylisten-pagina) stapelde Storefront diezelfde drie marges bovenaan,
   samen goed voor een grote lege band. Hier fors ingekort zodat de inhoud beter
   aansluit op de broodkruimel. !important omdat Storefronts CSS op WordPress.com
   ná de child-CSS wordt ingeladen (anders wint Storefront op gelijke specificiteit). */
.site-header { margin-bottom: 0 !important; }
.site-content { padding-top: 1rem !important; }
.site-main { padding-top: 0 !important; }
/* De broodkruimel zit in een eigen .storefront-breadcrumb-wrapper (vóór .site-content)
   met een forse eigen boven- én ondermarge van Storefront. Dát was de echte lege band. */
.storefront-breadcrumb {
  margin: 0 !important;
  padding-top: 1.25rem !important;
  padding-bottom: 0 !important;
}
.storefront-breadcrumb .col-full { padding-bottom: 0 !important; }
.woocommerce-breadcrumb { margin-bottom: 0 !important; }

/* ── Full-bleed homepagesecties ────────────────────────────────────────────────
   Storefront wikkelt de paginainhoud in een gecentreerde .col-full (±1110px).
   Hierdoor zouden de hero, categorie-tegels, "Op maat", uitgelicht en de USP-balk
   NIET edge-to-edge zijn. Met onderstaande techniek breken die secties uit naar
   volledige schermbreedte; hun interne .ts-container houdt de tekst netjes
   gecentreerd op max. 1280px. */
.ts-front-page .ts-hero,
.ts-front-page .ts-categories,
.ts-front-page .ts-custom-made,
.ts-front-page .ts-featured,
.ts-front-page .ts-reviews,
.ts-front-page .ts-inspiratie,
.ts-front-page .ts-service,
.ts-front-page .ts-nieuwsbrief,
.ts-front-page .ts-atelier,
.ts-front-page .ts-marquee,
.ts-front-page .ts-usp-bar {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Voorkom horizontale scrollbalk door de 100vw-secties (clip breekt geen
   sticky header, in tegenstelling tot overflow:hidden). */
#page {
  overflow-x: clip;
}

/* ── Knoppen ───────────────────────────────────────────────────────────────── */
.ts-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  display: inline-block;
  background-color: var(--color-text);
  color: var(--color-white) !important;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.85em 2em;
  border: 1px solid var(--color-text);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
  text-decoration: none;
}

.ts-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: var(--color-btn-hover) !important;
  border-color: var(--color-btn-hover) !important;
  color: var(--color-white) !important;
}

.ts-btn--outline {
  background-color: transparent;
  color: var(--color-text) !important;
  border-color: var(--color-text);
}
.ts-btn--outline:hover {
  background-color: var(--color-text) !important;
  color: var(--color-white) !important;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.site-header,
.storefront-sticky-add-to-cart {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Iets meer ademruimte bovenin: logo, naam en zoekbalk zakken zo wat naar beneden
     en plakken niet meer tegen de bovenrand. */
  padding-top: 1.1rem;
  padding-bottom: 0;
}

/* Homepage: haal Storefronts lege ruimte boven de content weg, zodat de hero-video
   strak onder de header aansluit (geen cream-strook ertussen). */
.home .site-content {
  padding-top: 0;
}

.site-header .col-full {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 72px;
}

/* Tekstlogo — eigen markup én Storefront's site-title */
.site-logo-text,
.site-branding .site-logo-text,
.site-header .site-title,
.site-header .site-title a {
  font-family: var(--font-heading) !important;
  font-size: 1.6rem !important;
  font-weight: 300 !important;
  letter-spacing: 0.04em;
  color: var(--color-text) !important;
  text-decoration: none;
  margin: 0;
  text-transform: none;
}

.site-logo-text:hover,
.site-header .site-title a:hover { color: var(--color-accent) !important; }

/* Verberg Storefront's tagline onder het logo */
.site-header .site-description { display: none; }

/* Custom-logo afbeelding (header) — als je later een eigen bestand uploadt */
.custom-logo-link {
  display: inline-flex;
  align-items: center;
}
.custom-logo-link img {
  max-height: 48px;
  width: auto;
}

/* ── CSS-logo: TS-monogram in kader + wordmark ─────────────────────────────── */
.ts-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: #161310;          /* zwart (warm), transparante achtergrond */
  text-decoration: none;
  line-height: 1;
}
.ts-logo:hover { color: #161310; }

/* Het vierkante kader met de overlappende T en S */
.ts-logo__mark {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 46px;
  border: 1px solid currentColor;
  flex-shrink: 0;
}
.ts-logo__t,
.ts-logo__s {
  position: absolute;
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1;
}
/* T linksboven (iets kleiner, hoger), S rechtsonder (groter, loopt lager door).
   Ze overlappen elkaar rond het midden — zoals in het originele logo. */
.ts-logo__t { font-size: 27px; left: 33%; top: 42%; transform: translate(-50%, -50%); }
.ts-logo__s { font-size: 35px; left: 61%; top: 57%; transform: translate(-50%, -50%); }

/* Wordmark naast/onder het monogram */
.ts-logo__words {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
}
.ts-logo__name {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ts-logo__tag {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-top: 3px;
}

/* Header-variant: horizontaal, tagline verbergen (te klein in de balk) */
.ts-logo--header .ts-logo__tag { display: none; }

/* Footer-variant: gestapeld, wit op donkere achtergrond, met tagline */
.ts-logo--footer {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  color: var(--color-white);
}
.ts-logo--footer:hover { color: var(--color-white); }
.ts-logo--footer .ts-logo__mark { width: 60px; height: 60px; }
.ts-logo--footer .ts-logo__t { font-size: 35px; }
.ts-logo--footer .ts-logo__s { font-size: 46px; }
.ts-logo--footer .ts-logo__name { font-size: 1.5rem; letter-spacing: 0.18em; }
.ts-logo--footer .ts-logo__tag { display: block; color: #ffffff; }

/* ── Footer-tekst geforceerd wit ───────────────────────────────────────────────
   Storefront kleurt footer-links via #colophon (hogere specificiteit) en zou
   onze witte regels anders overschrijven. Met !important winnen wij altijd. */
.site-footer,
.site-footer p,
.site-footer a,
.ts-footer__tagline,
.ts-footer__contact a,
.ts-footer__col .ts-footer__coltitle,
.ts-footer__col ul li a,
.ts-footer__copy,
.ts-logo--footer,
.ts-logo--footer .ts-logo__name,
.ts-logo--footer .ts-logo__tag,
.ts-logo--footer .ts-logo__t,
.ts-logo--footer .ts-logo__s {
  color: #ffffff !important;
}

/* Subtiele hover: taupe accent (blijft goed leesbaar op donker) */
.site-footer a:hover,
.ts-footer__contact a:hover,
.ts-footer__col ul li a:hover,
.ts-logo--footer:hover {
  color: var(--color-accent) !important;
}

/* Navigatie */
.main-navigation {
  display: flex;
  align-items: center;
}

/* Storefront genereert naast het echte menu (.primary-navigation) een tweede,
   ongewenst paginalijstje <div class="menu"> met Cart/Checkout/Shop/My account.
   Dat hoort niet in de navigatie — overal verbergen. */
.main-navigation > div.menu {
  display: none !important;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2rem;
}

.main-navigation ul li a {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text);
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), color var(--transition);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ── Dropdown-submenu's ────────────────────────────────────────────────────── */
.main-navigation li {
  position: relative;
}

/* Pijltje bij menu-items met een submenu — één schone, zelfgetekende pijl-omlaag.
   De !important + font-family:inherit overrulen Storefronts eigen WooCommerce-
   icoonpijl (die als een "L" naast onze pijl verscheen; Storefronts CSS laadt
   inline ná de onze, vandaar de override). */
.main-navigation ul li.menu-item-has-children > a::after {
  content: '' !important;
  font-family: inherit !important;
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.45em;
  border: 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  vertical-align: middle;
}
/* Eventuele tweede indicator (Storefront ::before-variant) helemaal weg. */
.main-navigation ul li.menu-item-has-children > a::before {
  content: none !important;
}

/* Het submenu zelf (verborgen tot hover) */
.main-navigation ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  flex-direction: column;
  gap: 0;
  min-width: 210px;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.5rem 0;
  margin: 0;
  box-shadow: 0 10px 28px rgba(43, 37, 32, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 200;
}

/* Tonen bij hover of toetsenbordfocus */
.main-navigation li:hover > ul.sub-menu,
.main-navigation li:focus-within > ul.sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-navigation ul.sub-menu li {
  width: 100%;
}

.main-navigation ul.sub-menu li a {
  display: block;
  padding: 0.55rem 1.25rem;
  border-bottom: none;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.main-navigation ul.sub-menu li a:hover {
  color: var(--color-accent);
  border-bottom: none;
  background-color: var(--color-light);
}

/* Cart icon in header */
.site-header-cart .cart-contents {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--color-text);
}

.site-header-cart .cart-contents:hover { color: var(--color-accent); }

/* ── USP topbalk ───────────────────────────────────────────────────────────── */
.ts-topbar {
  background-color: var(--color-text);
  color: var(--color-white);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-align: center;
  padding-block: 0.5rem;
}

.ts-topbar a { color: var(--color-white); }

/* ── Hero sectie ───────────────────────────────────────────────────────────── */
.ts-hero {
  position: relative;
  width: 100%;
  min-height: 90vh;        /* fallback voor oudere browsers */
  min-height: 90dvh;       /* dynamische viewport-hoogte (stabieler op mobiel) */
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Achtergrond = het eerste videoframe (inline gezet in hero.php). Daardoor is
     het beeld vóór het afspelen identiek aan waar de video begint: geen losse
     "oude" afbeelding die nog kort flitst. Donkere terugvalkleur eronder. */
  background-color: #211d19;
  background-size: cover;
  background-position: center;
}

.ts-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Video zacht in laten komen over het identieke posterframe (vloeiende start).
   Standaard zichtbaar; main.js zet 'm even op 0 en fadet naar 1 zodra hij speelt.
   Zonder JS blijft de video gewoon zichtbaar. */
.ts-hero__video {
  transition: opacity 0.7s ease;
}

/* De video ligt over de sectie-achtergrond (het posterframe) en ónder de donkere
   overlay (die het tekstcontrast geeft). Geen z-index nodig — de DOM-volgorde
   regelt de stapeling. */

/* Respecteer de systeeminstelling "verminderde beweging":
   verberg de video → het posterframe als sectie-achtergrond blijft zichtbaar. */
@media (prefers-reduced-motion: reduce) {
  .ts-hero__video { display: none; }
}

.ts-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(43, 37, 32, 0.55) 0%,
    rgba(43, 37, 32, 0.15) 60%,
    transparent 100%
  );
}

.ts-hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 4rem;
  max-width: 560px;
  margin-left: var(--gutter);
}

.ts-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  margin-bottom: 1rem;
}

.ts-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: var(--color-white);
  margin-bottom: 1.5rem;
}

.ts-hero__tagline {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 2.5rem;
  max-width: 360px;
}

/* ── Categorieën grid ──────────────────────────────────────────────────────── */
.ts-categories {
  background-color: var(--color-bg);
}

.ts-categories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* (De desktop-mozaïekregels staan verderop, ná de .ts-cat-tile-basisregels —
   anders wint de basis-aspect-ratio en klapt het raster uit elkaar.) */

/* Slider-stipjes — alleen zichtbaar als de mobiele slider actief is (responsive.css).
   Op desktop staan de tegels in een raster, dus geen stipjes. */
.ts-slider-dots {
  display: none;
}

.ts-cat-tile {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-light);
}

.ts-cat-tile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.ts-cat-tile:hover .ts-cat-tile__img {
  transform: scale(1.06);
}

/* Pijl in het label schuift mee bij hover. */
.ts-cat-tile__pijl {
  display: inline-block;
  transition: transform 0.3s ease;
}
.ts-cat-tile:hover .ts-cat-tile__pijl {
  transform: translateX(4px);
}

/* Desktop: mozaïek-indeling — Tafels (eerste tegel) groot als blikvanger,
   Stoelen boven en Banken onder in de rechterkolom.
   BELANGRIJK: dit blok staat bewust NÁ de .ts-cat-tile-basisregels, zodat
   aspect-ratio:auto hier wint van de basis (3/4) en de tegels hun grid-vak
   volledig vullen. */
@media (min-width: 769px) {
  .ts-categories__grid {
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: repeat(2, minmax(240px, 28vh));
    gap: 1rem;
  }
  .ts-cat-tile {
    aspect-ratio: auto;
    width: 100%;
    height: 100%;
  }
  .ts-cat-tile:nth-child(1) {
    grid-row: 1 / 3;
  }
  .ts-cat-tile:nth-child(1) .ts-cat-tile__name {
    font-size: 2rem;
  }
}

.ts-cat-tile__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(43,37,32,0.55) 0%, transparent 60%);
  transition: background var(--transition);
}

.ts-cat-tile__label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
}

.ts-cat-tile__name {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-white);
  margin-bottom: 0.25rem;
}

.ts-cat-tile__link {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}

.ts-cat-tile:hover .ts-cat-tile__link {
  color: var(--color-white);
  border-bottom-color: var(--color-white);
}

/* ── Op maat sectie ────────────────────────────────────────────────────────── */
.ts-custom-made {
  background-color: var(--color-white);
}

.ts-custom-made__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

.ts-custom-made__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.ts-custom-made__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.ts-custom-made__text {
  color: #5a5248;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  line-height: 1.8;
}

.ts-custom-made__details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.ts-custom-made__detail {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-text);
}

.ts-custom-made__detail::before {
  content: '';
  width: 20px;
  height: 1px;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

/* ── Uitgelichte producten ─────────────────────────────────────────────────── */
.ts-featured {
  background-color: var(--color-bg);
}

.ts-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.ts-section__header h2 { margin-bottom: 0; }

.ts-section__link {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-accent);
  padding-bottom: 2px;
}

.ts-product-grid {
  display: grid;
  /* Drie ruimere, vierkantere kaarten (gebruikerskeuze aug 2026, was 4 × 3:4). */
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

/* ── Product card (homepage + archief) ─────────────────────────────────────── */
.ts-product-card {
  display: flex;
  flex-direction: column;
}

.ts-product-card__img-wrap {
  position: relative;
  overflow: hidden;
  /* Vierkant: de productbronfoto's zijn zelf vierkant, dus 1:1-cover toont ze
     volledig en randloos (Uitgelicht, gebruikerskeuze aug 2026). */
  aspect-ratio: 1 / 1;
  background-color: var(--color-light);
  margin-bottom: 1rem;
}

.ts-product-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.ts-product-card:hover .ts-product-card__img-wrap img {
  transform: scale(1.04);
}

.ts-product-card__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.ts-product-card__name a { color: var(--color-text); }
.ts-product-card__name a:hover { color: var(--color-accent); }

.ts-product-card__price {
  font-size: 0.9rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

/* ── USP-balk ──────────────────────────────────────────────────────────────── */
/* ── Reviews / klantervaringen ─────────────────────────────────────────────── */
.ts-reviews {
  background-color: var(--color-light, #F3EEE7);
}

.ts-reviews__head {
  text-align: center;
  margin-bottom: 3rem;
}

.ts-reviews__eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}

.ts-reviews__title {
  margin-bottom: 0;
}

.ts-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ts-review {
  margin: 0;
  padding: 2rem 1.75rem;
  background-color: var(--color-white, #ffffff);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.ts-review__stars {
  color: var(--color-accent);
  font-size: 1rem;
  letter-spacing: 0.15em;
  margin-bottom: 1.1rem;
}

.ts-review__quote {
  margin: 0 0 1.5rem;
  padding: 0;
  border: none;
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 400;
  font-style: normal; /* Bellarose heeft geen cursief */
  line-height: 1.45;
  color: var(--color-text);
  flex: 1;
}

.ts-review__author {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ts-review__name {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.ts-review__place {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.ts-usp-bar {
  background-color: var(--color-text);
  color: var(--color-white);
  padding-block: 1.25rem;
}

.ts-usp-bar__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ts-usp-bar__item {
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ts-usp-bar__item::before {
  content: '·';
  color: var(--color-accent);
  font-size: 1.2rem;
  line-height: 1;
}

.ts-usp-bar__item:first-child::before { display: none; }

/* Beoordeling (3e USP): deels-gevulde sterren + cijfer en aantal reviews. */
.ts-usp-rating { display: inline-flex; align-items: center; gap: 0.5rem; }
.ts-usp-stars {
  position: relative;
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, 0.28);
}
.ts-usp-stars::before {
  content: '★★★★★';
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ts-star-fill, 100%);
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: inherit;
  color: #e6b84e;
}
.ts-usp-rating-text { white-space: nowrap; }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--color-text);
  color: #ffffff;
  padding-block: 0;
  border-top: none;
}

.ts-footer__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding-block: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.ts-footer__brand .site-logo-text {
  color: var(--color-white);
  font-size: 1.4rem;
  display: inline-block;
  margin-bottom: 1rem;
}

.ts-footer__tagline {
  font-size: 0.85rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.ts-footer__contact a {
  color: #ffffff;
  font-size: 0.875rem;
}
.ts-footer__contact a:hover { color: var(--color-accent); }

.ts-footer__col .ts-footer__coltitle {
  margin-top: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  margin-bottom: 1.25rem;
}

.ts-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ts-footer__col ul li a {
  color: #ffffff;
  font-size: 0.875rem;
  transition: color var(--transition);
}
.ts-footer__col ul li a:hover { color: var(--color-accent); }

.ts-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 1.5rem;
}

.ts-footer__copy {
  font-size: 0.75rem;
  color: #ffffff;
}

.ts-payment-icons {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Betaalmethodes als stille tekstregel (kapitaaltjes met punt-scheiders) in
   plaats van knop-achtige kadertjes — past bij de luxe-taal van de site. */
.ts-payment-icon {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ts-payment-icon:not(:first-child)::before {
  content: '·';
  color: rgba(255, 255, 255, 0.35);
  margin-right: 0.75rem;
}

/* ── Formulieren ───────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.65em 1em;
  width: 100%;
  transition: border-color var(--transition);
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-accent);
}

label {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text);
  display: block;
  margin-bottom: 0.4rem;
}

/* ── Breadcrumbs ───────────────────────────────────────────────────────────── */
.woocommerce-breadcrumb {
  font-size: 0.78rem;
  color: #8a7f75;
  padding-block: 1rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem !important;
}

.woocommerce-breadcrumb a {
  color: #8a7f75;
}
.woocommerce-breadcrumb a:hover {
  color: var(--color-accent);
}

/* ── Notificaties ──────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top: 3px solid var(--color-accent) !important;
  border-radius: var(--radius) !important;
  font-size: 0.9rem;
}

/* ── Hulpklassen ───────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }

.ts-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: 2rem;
}

/* ── Toegankelijkheid: zichtbare focus-states (UX-richtlijn §1 focus-states) ──
   Alleen tonen bij toetsenbordnavigatie (:focus-visible), niet bij muisklik.
   Taupe accent is zichtbaar op zowel lichte als donkere achtergronden. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.ts-btn:focus-visible,
.main-navigation a:focus-visible,
.site-header-cart a:focus-visible,
.ts-footer__col ul li a:focus-visible,
.ts-cfg__opt:focus-visible,
.ts-cfg__swatch:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
.woocommerce ul.products li.product a:focus-visible,
.woocommerce div.product .variable-item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Tap-vertraging van 300ms verminderen op touch (UX-richtlijn §2 tap-delay) */
a, button, [role="button"], input, select, textarea,
.ts-btn, .ts-cfg__opt, .ts-cfg__swatch {
  touch-action: manipulation;
}

/* ── Mobiel menu: hamburger-knop (verborgen op desktop) ────────────────────── */
.ts-menu-toggle {
  display: none;          /* alleen op mobiel zichtbaar (zie responsive.css) */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text);
}
/* Submenu-uitklapknop + sluitknop: alleen op mobiel (zie responsive.css) */
.ts-submenu-toggle,
.ts-nav-close { display: none; }

.ts-menu-toggle__bars { position: relative; display: inline-block; width: 22px; height: 13px; }
.ts-menu-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
}
.ts-menu-toggle__bars span:nth-child(1) { top: 0; }
.ts-menu-toggle__bars span:nth-child(2) { top: 6px; }
.ts-menu-toggle__bars span:nth-child(3) { top: 12px; }
/* Open: hamburger verbergen — sluiten gebeurt via de × in het paneel, de
   backdrop of Escape. Voorkomt een tweede kruisje naast de paneel-sluitknop. */
body.ts-nav-open .ts-menu-toggle { opacity: 0; pointer-events: none; }

/* Backdrop achter het uitschuif-paneel */
.ts-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(43, 37, 32, 0.45);
  z-index: 290;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
body.ts-nav-open .ts-nav-backdrop { opacity: 1; visibility: visible; }
body.ts-nav-open { overflow: hidden; }  /* achtergrond niet scrollen als menu open is */

/* =============================================================================
   HOMEPAGE "WOW" (v1.8.0): scroll-reveal, hero-animaties, teaser, vakmanschap,
   cijfers. Alle beweging respecteert "verminderde beweging".
   ============================================================================= */

/* ── Scroll-reveal (fade-in bij scrollen) ──────────────────────────────────────
   De .ts-reveal-klasse stond al op de secties en main.js zette al .is-visible,
   maar de bijbehorende CSS ontbrak — het effect deed dus nooit iets. De regels
   zijn gescopet op html.ts-anim (gezet door JS in de <head>): zonder JS blijft
   alles gewoon zichtbaar. */
html.ts-anim .ts-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
html.ts-anim .ts-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Hero: gestaffelde tekst-entrance ───────────────────────────────────────── */
@keyframes ts-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.ts-hero__eyebrow,
.ts-hero__title,
.ts-hero__tagline,
.ts-hero__content .ts-btn {
  animation: ts-fade-up 0.9s ease both;
}
.ts-hero__title           { animation-delay: 0.15s; }
.ts-hero__tagline         { animation-delay: 0.30s; }
.ts-hero__content .ts-btn { animation-delay: 0.45s; }

/* ── Hero: trage Ken Burns-zoom op de foto (niet op de video) ──────────────── */
@keyframes ts-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
img.ts-hero__bg { animation: ts-kenburns 16s ease-out both; }

/* ── Hero: scroll-indicator (dun lijntje onderaan) ─────────────────────────── */
.ts-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 2;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  animation: ts-fade-up 0.9s ease 0.8s both;
}
.ts-hero__scroll-line {
  display: block;
  width: 1px;
  height: 52px;
  background: rgba(255, 255, 255, 0.25);
  position: relative;
  overflow: hidden;
}
.ts-hero__scroll-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-white);
  transform: translateY(-100%);
  animation: ts-scroll-hint 2.4s ease-in-out infinite;
}
@keyframes ts-scroll-hint {
  0%   { transform: translateY(-100%); }
  65%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* ── Configurator-teaser (bruine editorial-kaart die van de pagina afsteekt) ─── */
.ts-teaser { background: transparent; }
.ts-teaser__card {
  max-width: 1120px;
  margin-inline: auto;
  background: var(--color-text);                   /* bruin, steekt af tegen de lichte pagina */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;                              /* strakker = kostbaarder (luxe-polish) */
  box-shadow: 0 34px 80px -46px rgba(43, 37, 32, 0.55);
  padding: clamp(2.25rem, 5vw, 4.5rem);
  overflow: hidden;
}

/* Tweeluik: tekst links, beeld rechts (Porsche/Boca do Lobo-patroon).
   Actief zodra er in de Customizer een beeld is gekozen. */
.ts-teaser__card--met-beeld {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  padding: 0;
}
.ts-teaser__card--met-beeld .ts-teaser__body {
  padding: clamp(2.25rem, 5vw, 4.5rem);
}
.ts-teaser__media { position: relative; min-height: 420px; }
.ts-teaser__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 860px) {
  .ts-teaser__card--met-beeld { grid-template-columns: 1fr; }
  .ts-teaser__media { order: -1; min-height: 230px; }
}
.ts-teaser__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 1.1rem;
}
.ts-teaser__title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 5.2vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-white);
  max-width: 18ch;
  margin: 0 0 1.1rem;
}
.ts-teaser__accent { font-style: normal; color: var(--color-accent); } /* Bellarose heeft geen cursief */
.ts-teaser__text {
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 0 2.2rem;
}
.ts-teaser__steps {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
  max-width: 560px;   /* lijnen niet eindeloos laten doorlopen — voller, rustiger blok */
}
.ts-teaser__step {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.ts-teaser__step:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.ts-teaser__step-num {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-accent);
  min-width: 2rem;
}
.ts-teaser__step-text {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.9);
}
.ts-teaser__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
  border-radius: 2px;   /* strak, geen webshop-pil (luxe-polish) */
  padding-inline: 1.9rem;
  background-color: var(--color-bg) !important;    /* lichte knop = achtergrondkleur site */
  color: var(--color-text) !important;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.ts-teaser__btn:hover {
  background-color: #ffffff !important;
  color: var(--color-text) !important;
  transform: translateY(-2px);
}
.ts-teaser__btn-arrow { transition: transform 0.3s ease; }
.ts-teaser__btn:hover .ts-teaser__btn-arrow { transform: translateX(4px); }

/* ── Atelier-teaser (editorial split, homepage) ────────────────────────────── */
.ts-atelier__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* Radius + overflow op de CONTAINER: motion.js schaalt/verschuift het beeld
   (reveal + parallax); de container clipt dat netjes binnen ronde hoeken. */
.ts-atelier__media {
  overflow: hidden;
  border-radius: var(--radius);
}
.ts-atelier__media img,
.ts-atelier__ph {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  will-change: transform;
}
.ts-atelier__ph { background: linear-gradient(150deg, #cfc4b2, #8a7d67); }

/* Gemaskeerde titel-woorden (motion.js schuift ze omhoog het masker in). */
.ts-mw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.ts-mw__in { display: inline-block; }
.ts-atelier__title { font-size: clamp(1.9rem, 4vw, 2.8rem); margin: 0.3rem 0 1.1rem; }
.ts-atelier__text { color: var(--color-text); opacity: 0.78; max-width: 46ch; margin: 0 0 1.5rem; line-height: 1.7; }
@media (max-width: 768px) {
  .ts-atelier__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .ts-atelier__media { order: -1; }
}

/* ── Woord-band (marquee) — eigentijds luxe-rustpunt ───────────────────────── */
.ts-marquee {
  overflow: hidden;
  border-block: 1px solid var(--color-border);
  padding-block: clamp(1rem, 2.5vw, 1.6rem);
  background: var(--color-bg);
}
.ts-marquee__track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: ts-marquee 34s linear infinite;
}
.ts-marquee__word {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: var(--color-text);
  padding: 0 0.25em;
}
.ts-marquee__dot { color: var(--color-accent); font-size: 1.3rem; padding: 0 0.35em; }
@keyframes ts-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ts-marquee__track { animation: none; } }

/* ── Eén groot klantcitaat (i.p.v. drie kaarten) ───────────────────────────── */
.ts-reviews--single { text-align: center; }
.ts-review-single { margin: 0; max-width: 760px; margin-inline: auto; }
.ts-review-single__stars { color: #e6b84e; letter-spacing: 3px; font-size: 0.95rem; margin-bottom: 1rem; }
.ts-review-single__quote {
  font-family: var(--font-heading);
  font-style: normal; /* Bellarose heeft geen cursief */
  /* Bewust bescheidener dan eerst: lange reviews werden anders een muur van
     grote letters (gebruikersfeedback carousel, aug 2026). */
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.4;
  color: var(--color-text);
  margin: 0 0 1.3rem;
}
.ts-review-single__author {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.ts-reviews--single .ts-reviews__google { text-align: center; margin-top: 1.8rem; }

/* Ingesloten 3D-tafelconfigurator (shortcode [tafelstudio_configurator_embed]) */
.ts-configurator-embed {
  width: 100%;
  margin: 0;
}
.ts-configurator-embed iframe {
  display: block;
  width: 100%;
  height: 85vh;
  min-height: 640px;
  border: 0;
}

/* Configurator als eigen, volledige-breedte pagina
   (body.ts-configurator-page = pagina die de shortcode bevat).
   Zijbalk weg, inhoud over de volle breedte, iframe vult het scherm —
   zo voelt het als een echte eigen pagina i.p.v. een ingesloten kadertje. */
.ts-configurator-page #secondary,
.ts-configurator-page .widget-area {
  display: none !important;
}
.ts-configurator-page #primary,
.ts-configurator-page .content-area {
  width: 100% !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
}
/* Titel compacter en gecentreerd boven de tool */
.ts-configurator-page .entry-header {
  text-align: center;
  margin-bottom: 1.25rem;
}
/* Minder lege ruimte rond de inhoud */
.ts-configurator-page .site-content {
  padding-top: 1.5rem;
  padding-bottom: 0;
}
/* Iframe over de volle schermbreedte (breekt uit de container) en hoog */
.ts-configurator-page .ts-configurator-embed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ts-configurator-page .ts-configurator-embed iframe {
  height: calc(100vh - 180px);
  min-height: 620px;
}

/* ── "Bij onze klanten thuis" (shortcode [tafelstudio_klanten]) ───────────── */
.ts-klanten {
  max-width: 1180px;
  margin: 0 auto;
}
.ts-klanten__intro {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 3.5rem;
}
.ts-klanten__eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.ts-klanten__title {
  font-size: clamp(2rem, 4vw, 2.85rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}
.ts-klanten__lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  opacity: 0.85;
  margin: 0;
}

/* Coverkaarten — één foto per klant, klikbaar */
.ts-klanten__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.ts-klant-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-light);
  cursor: pointer;
}
.ts-klant-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.ts-klant-card:hover .ts-klant-card__img,
.ts-klant-card:focus-visible .ts-klant-card__img {
  transform: scale(1.05);
}
.ts-klant-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  text-align: left;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(20, 17, 14, 0.7) 0%, rgba(20, 17, 14, 0) 55%);
}
.ts-klant-card__naam {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-white);
}
.ts-klant-card__hint {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--color-white);
  opacity: 0.85;
  margin-top: 0.35rem;
  transform: translateX(0);
  transition: transform 0.3s ease;
}
.ts-klant-card:hover .ts-klant-card__hint,
.ts-klant-card:focus-visible .ts-klant-card__hint {
  transform: translateX(4px);
}

/* Overlay met de volledige content per klant.
   z-index 90 < header (100): de sticky site-header + zijn onderlijn blijven dus
   bovenaan zichtbaar en bruikbaar over de hele breedte — de overlay valt eronder. */
.ts-klanten-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  /* Onderrand van de zichtbare header (announcement-bar + sticky header) in px.
     JS meet dit bij het openen en zet het exact; deze fallback geldt zonder JS.
     De vaste --ts-header-h (90px) klopt niet voor de hogere desktop-header. */
  --ts-overlay-top: var(--ts-header-h);
  overflow-y: auto;
  background-color: var(--color-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}
.ts-klanten-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.ts-klanten-overlay__scroll {
  max-width: 1180px;
  margin: 0 auto;
  padding: calc(var(--ts-overlay-top) + 1.75rem) 1.5rem 4rem;
}
.ts-klanten-overlay__close {
  position: fixed;
  top: calc(var(--ts-overlay-top) + 1.75rem);
  right: 1.5rem;
  z-index: 1;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ts-klanten-overlay__close:hover {
  background-color: var(--color-text);
  color: var(--color-white);
}
body.ts-noscroll {
  overflow: hidden;
}

.ts-klant {
  margin-bottom: 4.5rem;
}
.ts-klant:last-child {
  margin-bottom: 0;
}
.ts-klant__head {
  max-width: 620px;
  margin-bottom: 1.75rem;
}
.ts-klant__naam {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0 0 0.5rem;
}
.ts-klant__tekst {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  opacity: 0.8;
  margin: 0;
}

/* Redactioneel raster: liggend = 1 cel, staand = 2 rijen hoog (masonry-stijl). */
.ts-klant__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  grid-auto-flow: dense;
  gap: 1rem;
}
.ts-klant__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--color-light);
}
.ts-klant__item--portrait {
  grid-row: span 2;
}
.ts-klant__item img,
.ts-klant__item video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ts-klant__img {
  cursor: zoom-in;
  transition: transform 0.5s ease;
}
.ts-klant__item:hover .ts-klant__img {
  transform: scale(1.04);
}

/* Lightbox voor de foto's */
.ts-klanten-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: rgba(20, 17, 14, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}
.ts-klanten-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.ts-klanten-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.ts-klanten-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ts-klanten-lightbox__close:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 768px) {
  .ts-klant__grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 0.65rem;
  }
  .ts-klant {
    margin-bottom: 3rem;
  }
}
@media (max-width: 430px) {
  .ts-klant__grid {
    grid-auto-rows: 140px;
  }
}

/* ── Vakmanschap (proces in 4 stappen) ─────────────────────────────────────── */
.ts-craft {
  background-color: var(--color-bg);
}
.ts-craft__head {
  margin-bottom: 3rem;
}
.ts-craft__eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.ts-craft__title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 300;
  margin-bottom: 0;
}
.ts-craft__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}
.ts-craft__step {
  border-top: 1px solid var(--color-border);
  padding-top: 1.4rem;
}
/* Stappen schuiven één voor één in beeld */
.ts-craft__step:nth-child(2) { transition-delay: 0.12s; }
.ts-craft__step:nth-child(3) { transition-delay: 0.24s; }
.ts-craft__step:nth-child(4) { transition-delay: 0.36s; }
.ts-craft__num {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: 0.85rem;
}
.ts-craft__step h3 {
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}
.ts-craft__step p {
  font-size: 0.92rem;
  color: var(--color-text);
  opacity: 0.72;
  margin-bottom: 0;
}

/* ── Cijfers (tellen omhoog bij scrollen) ──────────────────────────────────── */
.ts-stats {
  background-color: var(--color-light);
  padding-block: 3.5rem;
}
.ts-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  text-align: center;
}
.ts-stat__value {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums; /* cijfers verspringen niet tijdens het tellen */
  margin-bottom: 0.35rem;
}
.ts-stat__label {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  opacity: 0.7;
}

/* ── Verminderde beweging: alle wow-animaties uit ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html.ts-anim .ts-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ts-hero__eyebrow,
  .ts-hero__title,
  .ts-hero__tagline,
  .ts-hero__content .ts-btn,
  img.ts-hero__bg,
  .ts-hero__scroll,
  .ts-hero__scroll-line::after {
    animation: none;
  }
}

/* =============================================================================
   EXTRA'S v1.29.0 — announcement-bar, inspiratie, stalen/advies, nieuwsbrief,
   WhatsApp-knop, hover-foto in productgrid, FAQ, Google Reviews-link
   ============================================================================= */

/* ── Announcement-bar (boven de header) ────────────────────────────────────── */
.ts-announce {
  background-color: var(--color-text);
  color: #EDE7DE;
  text-align: center;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
  padding: 0.5rem var(--gutter);
  line-height: 1.5;
}

/* ── Generieke sectiekop-hulpstukken ───────────────────────────────────────── */
.ts-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.4rem;
}
.ts-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  font-weight: 300;
  margin: 0;
}
.ts-link-arrow {
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.ts-link-arrow:hover { border-color: var(--color-accent); }

/* ── Inspiratie-mozaïek ────────────────────────────────────────────────────── */
.ts-inspiratie__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.ts-inspiratie__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-auto-rows: 230px;
  gap: 0.8rem;
}
.ts-inspiratie__tile {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
}
.ts-inspiratie__tile:first-child { grid-row: span 2; }
.ts-inspiratie__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.ts-inspiratie__tile:hover img { transform: scale(1.04); }

/* ── Proefstalen + persoonlijk advies ──────────────────────────────────────── */
.ts-service__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.ts-service__card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.ts-service__card h3 {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 400;
  margin: 0 0 0.6rem;
}
.ts-service__card p {
  color: #6b6258;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 1.4rem;
}
.ts-service__swatches {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.ts-service__swatches img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-white);
  box-shadow: 0 0 0 1px var(--color-border);
}
.ts-service__icons {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.ts-service__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-light);
  color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ts-service__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* ── Nieuwsbrief ───────────────────────────────────────────────────────────── */
.ts-nieuwsbrief {
  background-color: var(--color-white);
  border-top: 1px solid var(--color-border);
}
.ts-nieuwsbrief__inner {
  max-width: 620px;
  margin-inline: auto;
  text-align: center;
}
.ts-nieuwsbrief__inner p {
  color: #6b6258;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0.9rem 0 1.5rem;
}
.ts-nieuwsbrief__form form { margin: 0; }
.ts-nieuwsbrief__form .jetpack_subscription_widget,
.ts-nieuwsbrief__form fieldset { border: 0; padding: 0; margin: 0; }
.ts-nieuwsbrief__form input[type="email"] {
  width: min(100%, 340px);
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background-color: var(--color-bg);
}
.ts-nieuwsbrief__form button,
.ts-nieuwsbrief__form input[type="submit"] {
  background-color: var(--color-text) !important;
  color: #fff !important;
  border: none;
  border-radius: var(--radius);
  padding: 0.85rem 1.6rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  margin-left: 0.5rem;
}
.ts-nieuwsbrief__form button:hover,
.ts-nieuwsbrief__form input[type="submit"]:hover {
  background-color: var(--color-btn-hover) !important;
}

/* ── WhatsApp-knop (zwevend, rechtsonder) ──────────────────────────────────── */
.ts-whatsapp {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 250;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(43, 37, 32, 0.22);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ts-whatsapp:hover {
  transform: scale(1.07);
  color: #fff;
  box-shadow: 0 8px 22px rgba(43, 37, 32, 0.3);
}
.ts-whatsapp svg {
  width: 27px;
  height: 27px;
  display: block;
}
/* Rode "1"-badge: nodigt uit om te klikken, zoals een ongelezen bericht. */
.ts-whatsapp__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: #e0342c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(43, 37, 32, 0.3);
}

/* ── Hover-foto in het productoverzicht ────────────────────────────────────── */
.woocommerce ul.products li.product { position: relative; }
.woocommerce ul.products li.product .ts-hover-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
.woocommerce ul.products li.product .ts-hover-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0 !important;
}
.woocommerce ul.products li.product:hover .ts-hover-thumb { opacity: 1; }

/* ── FAQ (accordion via details/summary) ───────────────────────────────────── */
.ts-faq {
  max-width: 760px;
  margin-inline: auto;
}
.ts-faq__item {
  border-bottom: 1px solid var(--color-border);
}
.ts-faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 400;
}
.ts-faq__item summary::-webkit-details-marker { display: none; }
.ts-faq__item summary::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--color-accent);
  line-height: 1;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.ts-faq__item[open] summary::after { transform: rotate(45deg); }
.ts-faq__answer {
  padding: 0 0 1.25rem;
  color: #6b6258;
  line-height: 1.75;
  max-width: 66ch;
}
.ts-faq__answer p { margin: 0; }

/* ── Google Reviews-link onder de reviews ──────────────────────────────────── */
.ts-reviews__google {
  text-align: center;
  margin: 2rem 0 0;
}

/* ── Sticky koopbalk (Storefront sticky add-to-cart) op onze huisstijl ─────── */
.storefront-sticky-add-to-cart {
  box-shadow: 0 4px 14px rgba(43, 37, 32, 0.08);
}
.storefront-sticky-add-to-cart__content-title {
  font-family: var(--font-heading);
}

/* =============================================================================
   MODERN GEVOEL (v1.42.0)
   1. View Transitions — app-achtige pagina-overgangen: zachte cross-fade tussen
      pagina's en de productfoto "morpht" van het overzicht naar de product-
      pagina (main.js geeft de aangeklikte foto zijn transition-naam).
   2. Scroll-animaties — native CSS scroll-driven: productkaarten komen zacht
      omhoog het beeld in; sfeerfoto's zoomen heel subtiel uit tijdens scrollen.
   Beide zijn pure verrijking: oudere browsers en bezoekers met "verminderde
   beweging" zien de site exact zoals voorheen.
   ============================================================================= */

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. Pagina-overgangen: VERWIJDERD (v1.65.0) ──────────────────────────
     De cross-document view-transition (@view-transition{navigation:auto})
     bevroor de oude pagina tot de nieuwe klaar was met renderen — dat voelde
     als een hapering bij élke klik. Vervangen door prerender-bij-hover
     (speculative loading in functions.php): de volgende pagina staat al klaar
     vóór de klik, wat juist instant aanvoelt. */

  /* ── 2. Scroll-animaties (alleen in browsers die het native kunnen) ───── */
  @supports (animation-timeline: view()) {

    /* Productkaarten: zachtjes omhoog + in beeld bij het binnenscrollen. */
    .woocommerce ul.products li.product {
      animation: ts-rise-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }

    /* Sfeerfoto's (inspiratie-mozaïek): heel subtiele zoom tijdens scrollen. */
    .ts-inspiratie__tile img {
      animation: ts-slow-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes ts-rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ts-slow-zoom {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* =============================================================================
   LUXE-POLISH — geïnspireerd op Rolex, Patek Philippe, Porsche, Rolls-Royce,
   Richmond Interiors en Boca do Lobo: rust, hairlines, trage beeldbeweging,
   ingetogen interactie. Bewust ONDERAAN het bestand: bij gelijke specificiteit
   winnen deze regels door bronvolgorde.
   ============================================================================= */

/* Merk-kleurige tekstselectie — klein, uniek detail. */
::selection { background: var(--color-accent); color: var(--color-white); }

/* Labels (eyebrows): de brede, kalme spatiëring van de horlogemerken. */
.ts-eyebrow { letter-spacing: 0.24em; }

/* Knoppen: iets wijdere spatiëring = kalmer en duurder. */
.ts-btn { letter-spacing: 0.16em; }

/* Homepage ademt ruimer op grote schermen (trager tempo, meer wit). */
@media (min-width: 900px) {
  .ts-front-page .ts-section { padding-block: clamp(4rem, 8vw, 6.75rem); }
}

/* Tekstlinks: ingetogen kapitaaltjes met een inkt-onderstreping die uitvloeit
   (Patek-stijl) in plaats van een simpele border-hover. */
.ts-link-arrow {
  color: var(--color-text);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-bottom: none;
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease;
}
.ts-link-arrow:hover {
  background-size: 100% 1px;
  color: var(--color-accent);
  border-bottom: none;
}

/* ── Huisstijl-cursor (v4 — een normale pijl mét merkhint) ─────────────────────
   Geen zwevende JS-elementen meer: gewoon de vertrouwde pijlvorm, maar dan
   getekend in de huisstijl. Standaard inktkleurig met dunne crème-rand
   (leesbaar op crème én op donkere foto's); boven klikbare elementen wisselt
   hij naar de goud-taupe merkkleur. Valt het cursorbestand weg, dan pakt de
   browser vanzelf de systeemcursor (fallback auto/pointer). Invoervelden
   houden hun eigen tekstcursor. */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: url('../img/cursor/ts-pijl.png') 8 2, auto;
  }
  a,
  button,
  [role='button'],
  .ts-btn,
  input[type='submit'],
  summary,
  label,
  select {
    cursor: url('../img/cursor/ts-pijl-accent.png') 8 2, pointer;
  }
}

/* ── 404-pagina (boetiek-stijl) ────────────────────────────────────────────── */
.ts-404__inner { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; }
.ts-404__title { font-size: clamp(2.4rem, 6vw, 4.2rem); margin: 0.4rem 0 1.2rem; }
.ts-404__text {
  max-width: 52ch;
  margin: 0 auto 2rem;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text);
  opacity: 0.78;
}
.ts-404__buttons { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

/* ── Ronde icoon-knoppen: padding hard op nul ──────────────────────────────────
   Storefronts globale button-padding (±14px/32px, inline geladen NÁ onze CSS)
   blies deze cirkels op tot ovalen: width 46px + padding 63px = ellips. Geldt
   voor alle ×-sluitknoppen, submenu-toggles en icoonknoppen. */
.ts-search-overlay__close,
.ts-nav-close,
.ts-filters-close,
.ts-submenu-toggle,
.ts-hicon,
.ts-klanten-overlay__close,
.ts-hero__scroll {
  padding: 0 !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

/* ── 3D-configurator-pagina: schermvullend binnen de eigen navigatie ──────── */
body.page-template-template-configurator {
  overflow: hidden;
}
body.page-template-template-configurator .site-footer,
body.page-template-template-configurator .storefront-breadcrumb,
body.page-template-template-configurator .ts-whatsapp {
  display: none !important;
}
body.page-template-template-configurator .site-content,
body.page-template-template-configurator .site-main {
  padding: 0 !important;
  margin: 0 !important;
}
.ts-cfg-embed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 130px; /* startwaarde; JS meet de echte headerhoogte na */
  background: var(--color-bg);
}
.ts-cfg-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* "Stel zelf samen" in de menu-dropdowns: opvallend in de merkkleur. */
.main-navigation .ts-menu-config > a {
  color: var(--color-accent) !important;
  font-weight: 500;
}

/* ── Compacte desktop-header (afgestemd met The Real Mag): één rij van ±92px —
   logo links, menu-opties ernaast, zoek/tas-iconen rechts. De aparte
   menubalk-rij eronder vervalt; mobiel (hamburger) blijft ongewijzigd. ── */
@media (min-width: 769px) {
  .site-header {
    display: flex;
    align-items: center;
    min-height: 92px;
    padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  }
  /* De col-full-wikkel oplossen zodat logo en iconen directe rij-items worden. */
  .site-header > .col-full {
    display: contents;
  }
  .site-header .site-branding {
    order: 1;
    flex: 0 0 auto;
    margin: 0;
    /* Storefront geeft site-branding op desktop een (procentuele) vaste breedte
       — die duwde menu en iconen de pagina uit. Hier hard terug naar auto. */
    width: auto !important;
    float: none !important;
  }
  .site-header .storefront-primary-navigation {
    order: 2;
    flex: 1 1 auto;
    margin: 0 0 0 3rem;
    padding: 0;
    background: none;
    border: none;
    width: auto;
  }
  .site-header .storefront-primary-navigation .col-full {
    max-width: none;
    margin: 0;
    padding: 0;
    height: auto;
    display: block;
  }
  .site-header .main-navigation {
    margin: 0;
    float: none !important;
    width: auto !important;
  }
  /* Menu rechts uitgelijnd, tegen de zoekfunctie aan (mockup The Real Mag). */
  .site-header .main-navigation ul.menu {
    justify-content: flex-end;
    flex-wrap: nowrap;
  }
  .site-header .ts-header-icons {
    order: 3;
    flex: 0 0 auto;
  }
}

/* ── Review-carousel (homepage): pijlen links en rechts van het citaat ─────── */
.ts-review-slider--nav {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  column-gap: clamp(0.75rem, 3vw, 2rem);
  align-items: center;
  max-width: 900px;
  margin-inline: auto;
}
.ts-review-slider--nav .ts-reviews__eyebrow { grid-column: 1 / -1; grid-row: 1; }
.ts-review-slider--nav .ts-review-slider__spoor { grid-column: 2; grid-row: 2; }
.ts-review-slider--nav .ts-review-slider__prev { grid-column: 1; grid-row: 2; }
.ts-review-slider--nav .ts-review-slider__next { grid-column: 3; grid-row: 2; }
.ts-review-slider--nav .ts-review-slider__teller { grid-column: 1 / -1; grid-row: 3; margin-top: 1.2rem; }
.ts-review-slider__spoor {
  display: grid;
}
.ts-review-slider__spoor > .ts-review-slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.ts-review-slider__spoor > .ts-review-slide.is-actief {
  opacity: 1;
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ts-review-slider__spoor > .ts-review-slide { transition: none; }
}
.ts-review-slider__pijl {
  width: 40px;
  height: 40px;
  padding: 0 !important; /* Storefronts knop-padding blaast ronde knoppen op */
  min-width: 0 !important;
  line-height: 1 !important;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.ts-review-slider__pijl:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}
/* Storefronts paarse focus-ring (laadt ná onze CSS) hard overrulen: bij een
   muisklik géén ring, bij toetsenbord-navigatie een ring in de merkkleur. */
.ts-review-slider__pijl:focus {
  outline: none !important;
  box-shadow: none !important;
}
.ts-review-slider__pijl:focus-visible {
  outline: 2px solid var(--color-accent) !important;
  outline-offset: 2px;
}
.ts-review-slider__pijl svg {
  width: 17px;
  height: 17px;
  display: block;
}
.ts-review-slider__teller {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
/* Mobiel: geen zijkolommen (te krap naast de tekst) — pijlen met de teller
   ertussen in een rij ónder het citaat. */
@media (max-width: 600px) {
  .ts-review-slider--nav {
    grid-template-columns: auto auto auto;
    justify-content: center;
    row-gap: 0;
  }
  .ts-review-slider--nav .ts-review-slider__spoor { grid-column: 1 / -1; }
  .ts-review-slider--nav .ts-review-slider__prev { grid-column: 1; grid-row: 3; margin-top: 1.2rem; }
  .ts-review-slider--nav .ts-review-slider__teller { grid-column: 2; grid-row: 3; margin-top: 1.2rem; min-width: 3.4em; }
  .ts-review-slider--nav .ts-review-slider__next { grid-column: 3; grid-row: 3; margin-top: 1.2rem; }
}

/* Uitgelicht: mobiel (2 koloms) toont 4 kaarten als 2×2-blok; vanaf het
   3-koloms raster verbergen we de vierde, anders staat daar een wees. */
@media (min-width: 769px) {
  .ts-product-grid .ts-product-card:nth-child(4) {
    display: none;
  }
}