/*
Theme Name: Nadie Keramiek
Theme URI: https://nadiekeramiek.nl
Author: Nadie Keramiek
Description: Thema voor Nadie Keramiek — handgeschilderd keramiek uit Andalusië. Gebaseerd op de statische landingspagina, uitgebreid met WooCommerce-ondersteuning.
Version: 3.43.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nadie
Tags: e-commerce, custom-menu, custom-logo, translation-ready
WC requires at least: 8.0
WC tested up to: 11.0
*/

@font-face {
  font-family: 'Oilvare Base';
  src: url('assets/fonts/oilvare/oilvare-base.woff2') format('woff2'),
       url('assets/fonts/oilvare/oilvare-base.woff') format('woff'),
       url('assets/fonts/oilvare/oilvare-base.ttf') format('truetype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* --cream blijft de lichte tekstkleur op donkere vlakken; --zand is de warme
   ondergrond van de pagina. Ze waren eerst hetzelfde, waardoor alle vlakken
   bijna wit oogden. Wil je de ondergrond warmer of koeler: alleen --zand. */
:root { --cream:#fffaf2; --zand:#f7f2ea; --espresso:#40352f; --red:#d71f40; --yellow:#f6e8a4; --blue:#a7d9ff; --pink:#f5d6d8; --green:#c7d9b6; --display:'Oilvare Base','Arial Rounded MT Bold','Arial Black',sans-serif;
  --lijn:rgba(64,53,47,.2); }
* { box-sizing:border-box; }
/* Safari op de iPhone vergroot uit zichzelf de letters in blokken die het te
   smal vindt, en doet dat per blok. In een raster van twee productkaarten werd
   de ene titel daardoor groter dan de andere en liep de rij uit het lood. Ook
   Chrome op iOS doet dit: dat is dezelfde WebKit eronder. */
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { margin:0; color:var(--espresso); background:var(--zand); font-family:Montserrat, Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; }

/* Toegankelijkheid */
.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-9999px; z-index:999; padding:12px 18px; background:var(--espresso); color:var(--cream); font-size:12px; }
.skip-link:focus { left:12px; top:12px; }

/* ---------- Achtergrondpatroon (geschilderde slingerband) ---------- */
/* De tegel is een alpha-masker; de kleur komt hier vandaan, niet uit het bestand.
   Zonder maskerondersteuning zou dit een egaal kleurvlak worden — vandaar @supports. */
.nadie-patroon { display:none; }
@supports ((-webkit-mask-image:none) or (mask-image:none)) {
  .nadie-patroon {
    display:block; position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
    background-color:var(--patroon-kleur,#fffaf2);
    opacity:var(--patroon-dekking,.5);
    -webkit-mask-image:var(--patroon-bron); mask-image:var(--patroon-bron);
    -webkit-mask-repeat:repeat; mask-repeat:repeat;
    -webkit-mask-size:520px auto; mask-size:520px auto;
  }
}
/* `.intro > *` hieronder heeft specificiteit 0,1,1 en zet position:relative op elk
   direct kind — ook op dit patroon, waardoor height:100% naar auto terugvalt en het
   element 0px hoog wordt. Deze selector is 0,2,0 en wint, dus position hoort hier ook. */
/* De helper nadie_patroon() staat nog in functions.php en deze opmaak hoort
   erbij, maar geen enkel blok gebruikt het patroon nog. */
.intro > .nadie-patroon, .collection > .nadie-patroon { position:absolute; z-index:0; }

/* ---------- Hero ---------- */
/* Een band van 500px in plaats van beeldvullend, zodat de categorierij en de
   collectie meteen in beeld staan. De maten van de tekst hieronder zijn daar
   op afgestemd: bij de oude koptekst van 105px past het niet binnen 500px. */
.hero { min-height:580px; position:relative; overflow:hidden; background:var(--yellow); }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(.92) contrast(.96); }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(64,53,47,.25),transparent 34%,rgba(64,53,47,.22)); }
.site-header { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; padding:24px 4.5vw; color:#fffaf2; }
.wordmark { width:142px; height:auto; filter:brightness(0) invert(1); }
.main-nav { display:flex; gap:clamp(16px,2.6vw,48px); align-items:center; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.main-nav ul { display:flex; gap:clamp(16px,2.6vw,48px); align-items:center; margin:0; padding:0; list-style:none; }
.main-nav a:hover { opacity:.7; }
.main-nav .current-menu-item > a { opacity:.7; }

/* ---------- Uitklapmenu ----------
   Opent bij hover én bij toetsenbordfocus: met alleen :hover is het menu niet
   te bereiken met de tab-toets. De ul blijft in de DOM staan en wordt met
   visibility verborgen, zodat de overgang kan animeren. */
.main-nav .menu-item-has-children { position:relative; }
/* Het pijltje op ::before en niet op ::after: dat laatste is in de creme
   kopbalk al bezet door het rode streepje onder een menu-item, en die regel is
   specifieker. Met de link als inline-flex en order:2 komt het ::before-element
   alsnog achter de tekst te staan. */
/* Bewust geen inline-flex hier: zo'n vak bepaalt zijn hoogte uit de inhoud en
   niet uit de regelhoogte, waardoor dit ene item een paar pixels afweek van de
   rest. Het pijltje staat nu absoluut in de link, die verder een doodgewone
   inline link blijft — zelfde metriek als zijn buren. */
.main-nav .menu-item-has-children > a { position:relative; padding-right:15px; }
/* Onzichtbaar strookje onder het item, zodat de muis het gat naar het paneel
   kan oversteken zonder dat het dichtklapt. Als pseudo-element en niet als
   binnenruimte: dat laatste maakte het item hoger, en omdat de menubalk zijn
   items verticaal centreert stond "Keuken gerei" daardoor niet meer op één
   lijn met de rest. */
.main-nav .menu-item-has-children::after {
  content:""; position:absolute; left:0; right:0; top:100%; height:12px;
}
.main-nav .menu-item-has-children > a::before {
  content:""; position:absolute; right:0; top:50%; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-75%) rotate(45deg); transition:transform .18s ease;
}
.main-nav .menu-item-has-children:hover > a::before,
.main-nav .menu-item-has-children:focus-within > a::before { transform:translateY(-25%) rotate(225deg); }
/* Het paneel: links de sublinks, rechts het uitgelichte blok. */
.main-nav .mega-menu {
  position:absolute; z-index:70; top:100%; left:-28px;
  display:grid; grid-template-columns:minmax(250px,1.15fr) minmax(190px,.85fr) minmax(190px,.85fr); align-items:start;
  gap:clamp(20px,2.2vw,34px);
  padding:clamp(18px,2vw,28px); border-radius:14px;
  background:var(--zand); color:var(--espresso); border:1px solid rgba(64,53,47,.1);
  box-shadow:0 26px 50px -30px rgba(64,53,47,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.main-nav .menu-item-has-children:hover > .mega-menu,
.main-nav .menu-item-has-children:focus-within > .mega-menu { opacity:1; visibility:visible; transform:none; }
/* Het hoofditem krijgt hetzelfde rode streepje als de andere menu-items, en
   dat loopt onder de hele link door — tekst én pijltje. Eerder zat er extra
   binnenruimte omheen voor een hover-vlak; daardoor zakte het streepje weg
   onder die ruimte en stond het niet op één lijn met de buren. */
.main-nav .menu-item-has-children:hover > a,
.main-nav .menu-item-has-children:focus-within > a { background:none; }
.site-header.is-solid .main-nav .menu-item-has-children:hover > a::after,
.site-header.is-solid .main-nav .menu-item-has-children:focus-within > a::after { transform:scaleX(1); }

.main-nav ul.sub-menu { display:grid; gap:0; margin:0; padding:0; list-style:none; }
/* Een lijn onder elk item, niet tussen items. Met `li + li` krijgt een lijst
   met maar een subcategorie helemaal geen lijn, en de laatste nooit. De ruimte
   naar de foto zit op de foto zelf, zodat de lijn de volle breedte houdt. */
.main-nav ul.sub-menu li { border-bottom:1px solid rgba(64,53,47,.12); }
.main-nav ul.sub-menu a {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 2px; margin:0; opacity:1; font-size:13px; font-weight:500; letter-spacing:0;
  text-transform:none; white-space:nowrap; transition:color .16s ease;
}
/* De creme kopbalk gebruikt a::after voor het rode streepje onder een menu-item.
   In het submenu willen we dat niet: daar hoort een pijltje. Streepje uit, en
   het pijltje op ::before met order:2, net als bij het hoofditem. */
.site-header .main-nav ul.sub-menu a::after,
.site-header.is-solid .main-nav ul.sub-menu a::after { content:none; display:none; }
.main-nav ul.sub-menu a::before {
  content:""; order:2; flex:0 0 auto; width:6px; height:6px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg); opacity:.45; transition:transform .18s ease, opacity .18s ease;
}
.main-nav ul.sub-menu a:hover { color:var(--red); opacity:1; }
.main-nav ul.sub-menu a:hover::before { opacity:1; transform:rotate(-45deg) translate(2px,2px); }

/* Eerste kolom, met een scheidingslijn naar de subcategorieen ernaast. */
.mega-intro { display:grid; align-content:start; gap:8px; padding-right:clamp(20px,2.2vw,34px); border-right:1px solid rgba(64,53,47,.14); }
/* De foto staat los van de lijst ernaast; alleen de raster-gap was te weinig. */
.mega-media { display:block; margin-left:clamp(8px,1.2vw,22px); aspect-ratio:1.15; overflow:hidden; border-radius:8px; background:var(--pink); }
.mega-media img { width:100%; height:100%; object-fit:cover; display:block; }
.mega-eyebrow { font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
.mega-kop { font-family:var(--display); font-size:clamp(18px,1.5vw,23px); font-weight:800; line-height:1.14; letter-spacing:-.02em; text-transform:none; text-wrap:balance; }
.mega-link {
  display:inline-flex; align-items:center; gap:9px; margin-top:6px; padding-bottom:4px;
  border-bottom:1px solid currentColor; font-size:11px; font-weight:600; letter-spacing:.04em;
  text-transform:none; opacity:1;
}
.mega-link .doodle-icon { width:15px; height:15px; transition:transform .2s ease; }
.mega-link:hover { color:var(--red); }
.mega-link:hover .doodle-icon { transform:translateX(4px); }
.menu-toggle { display:none; border:0; color:inherit; background:none; font:inherit; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:600; cursor:pointer; padding:6px 0; }
.header-tools { display:flex; align-items:center; gap:18px; }
.cart-link { position:relative; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.cart-link .count { display:inline-grid; place-items:center; min-width:18px; height:18px; margin-left:6px; padding:0 5px; border-radius:99px; background:var(--red); color:var(--cream); font-size:10px; font-weight:700; }
.hero-copy { position:absolute; z-index:1; left:4.5vw; bottom:26px; color:#fffaf2; max-width:550px; }
.hero-copy .eyebrow { margin-bottom:14px; }
.hero-copy h1 { color:var(--yellow); font-size:clamp(42px,4.8vw,68px); }
.hero-copy p { margin-top:16px; font-size:14.5px; line-height:1.62; }
/* De ronde knop staat rechts in het tekstblok, niet onder de eerste woorden. */
.hero-copy .circle-link { display:grid; width:110px; height:110px; margin:26px 0 0 auto; font-size:18px; }
.shop-soon { position:absolute; z-index:2; top:118px; left:4.5vw; display:inline-block; padding:10px 15px; border-radius:99px; background:var(--red); color:var(--cream); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow { margin:0 0 24px; font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
h1 { max-width:760px; margin:0; font-family:var(--display); font-size:clamp(52px,6.5vw,105px); font-weight:800; line-height:1; letter-spacing:-.025em; text-wrap:balance; }
.hero-copy p { max-width:46ch; margin:30px 0 0; font-size:15.5px; line-height:1.72; }
/* B2 — geplakte sticker, naar de iconenpagina van het merkdocument. */
.circle-link { display:inline-grid; place-items:center; width:132px; height:132px; margin-top:38px; border:0; border-radius:50%; background:var(--yellow); color:var(--espresso); font-family:var(--display); font-size:21px; font-weight:800; line-height:1; letter-spacing:-.02em; text-align:center; transform:rotate(-7deg); transition:transform .28s cubic-bezier(.34,1.4,.64,1); }
.circle-link:hover, .circle-link:focus-visible { transform:rotate(0deg) scale(1.06); }
@media (prefers-reduced-motion:reduce) { .circle-link { transition:none; } .circle-link:hover, .circle-link:focus-visible { transform:rotate(-7deg); } }

/* ---------- Secties ---------- */
.intro { position:relative; padding:76px 9vw; display:grid; place-items:center; overflow:hidden; background:var(--pink); text-align:center; }
.intro > *, .collection > *, .banner > * { position:relative; z-index:1; }
.intro h2, .collection h2 { font-family:var(--display); font-size:clamp(38px,5vw,76px); line-height:1.05; letter-spacing:-.03em; font-weight:800; margin:0; text-wrap:balance; }
.intro p { margin:0; font-size:15.5px; line-height:1.72; max-width:46ch; }
.quote-copy p { max-width:820px; margin:0; font-family:var(--display); font-size:clamp(34px,4.7vw,68px); font-weight:800; line-height:1.08; letter-spacing:-.03em; text-wrap:balance; }
.quote-copy span { display:block; margin-top:30px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.text-link { display:inline-block; margin-top:12px; padding-bottom:4px; border-bottom:1px solid var(--espresso); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.colour-notes { display:flex; gap:7px; margin-top:17px; }
.colour-notes i { display:block; width:15px; height:15px; border-radius:50%; }
.colour-notes i:nth-child(1) { background:var(--red); } .colour-notes i:nth-child(2) { background:var(--yellow); } .colour-notes i:nth-child(3) { background:var(--blue); } .colour-notes i:nth-child(4) { background:var(--green); }

.collection { position:relative; padding:104px 4.5vw 118px; overflow:hidden; background:var(--blue); }
.collection-head { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:42px; }
.collection-head p { margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }

/* ---------- Productraster van de landingspagina ----------
   Uitsluitend voor `.collection` op de voorpagina: daar is een product een
   <a class="product"> met een <div class="product-image">. WooCommerce gebruikt
   diezelfde namen voor heel andere elementen — `ul.products`, `li.product`, maar
   ook `section class="related products"` en `div class="product"` op de
   productpagina. Ongescoped botsten deze regels daarmee en dat gaf halve
   kolommen en verkeerde uitlijning. De winkel heeft zijn eigen blok verderop. */
.collection .products { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:0; padding:0; list-style:none; }

/* De eerste plek is geen product maar de merkbelofte, met een knop naar de
   categorieen. Vier foto's op een rij zonder tekst werd een muur zonder
   verhaal. De tegel rekt mee met de rij: als grid-item is de hoogte al gelijk
   aan die van de kaarten ernaast. */
.collection-note { display:flex; }
.collection-note-inner {
  display:flex; flex-direction:column; justify-content:center; gap:20px;
  width:100%; padding:clamp(20px,2vw,30px);
  background:var(--zand); box-shadow:inset 0 0 0 1px var(--lijn);
}
.collection-note p { margin:0; font-family:var(--display); font-size:clamp(19px,1.5vw,25px); font-weight:800; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; }
.collection .collection-note .button { align-self:start; width:auto; }

/* Het blok zelf is blauw, dus de blauwe tint uit de kaartencyclus viel weg: de
   band onder de foto en het hovervlak waren niet van de achtergrond te
   onderscheiden. Alleen hier neemt het zachte roze die plek over. */
.collection .products .product:nth-child(4n+4) { --tint:#ffb7cf; }
.collection .product { display:block; margin:0; }
.product-image { aspect-ratio:.76; padding:13px; overflow:hidden; background:var(--pink); position:relative; box-shadow:inset 0 0 0 1px var(--lijn); }
.collection .product:nth-child(6n+1) .product-image { background:var(--pink); }
.collection .product:nth-child(6n+2) .product-image { background:var(--yellow); }
.collection .product:nth-child(6n+3) .product-image { background:var(--red); }
.collection .product:nth-child(6n+4) .product-image { background:var(--green); }
.collection .product:nth-child(6n+5) .product-image { background:#ffb7cf; }
.collection .product:nth-child(6n+6) .product-image { background:#b79ee7; }
.product-image img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.collection .product:hover .product-image img { transform:scale(1.04); }
/* Alleen de prijs mag niet afbreken. Met `span:last-child` raakte deze regel op
   de voorpagina ook de productnaam: die staat in een <a> zonder ondertitel en is
   dan zelf het laatste kind. De naam kon daardoor niet afbreken en liep tegen de
   prijs aan. De > beperkt het tot de prijs, die wel een direct kind is. */
.collection .product-info > span:last-child, .product-info .price { white-space:nowrap; }
.product-info .price del { opacity:.5; margin-right:5px; }
.product-info .price ins { text-decoration:none; }
.product-badge { position:absolute; z-index:1; top:13px; left:13px; padding:6px 11px; border-radius:99px; background:var(--espresso); color:var(--cream); font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }

.quote { padding:105px 9vw; background:var(--yellow); text-align:center; }
.quote .story-copy { text-align:center; }
.quote .story-copy p { max-width:410px; margin:0 auto; font-family:Montserrat, Arial, sans-serif; font-size:14px; line-height:1.55; }
.instagram { position:relative; padding:104px 4.5vw 114px; overflow:hidden; background:var(--zand); }
.instagram-head { display:flex; align-items:end; justify-content:space-between; gap:32px; margin-bottom:40px; }
.instagram h2 { margin:0; font-family:var(--display); font-size:clamp(36px,5vw,69px); font-weight:800; line-height:1.05; letter-spacing:-.03em; text-wrap:balance; }
.instagram a { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--espresso); padding-bottom:5px; }
.instagram-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.instagram-grid img { display:block; width:100%; aspect-ratio:.85; object-fit:cover; border:1px solid var(--lijn); }
.banner { position:relative; min-height:100svh; margin:0; padding:82px 7vw; display:grid; place-content:center; overflow:hidden; background:var(--red); color:var(--cream); text-align:center; }
.doodle { position:absolute; z-index:0; pointer-events:none; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.doodle-sun { top:23px; right:6vw; width:76px; stroke:var(--red); stroke-width:4; }
.doodle-wave { right:3.5vw; bottom:24px; width:170px; stroke:var(--yellow); stroke-width:8; }
.doodle-flower { bottom:8vh; left:6vw; width:110px; stroke:var(--pink); stroke-width:4; }
.sticker { position:absolute; z-index:2; pointer-events:none; }
.sticker-tapita { top:22px; right:19vw; width:clamp(130px,15vw,220px); transform:rotate(-9deg); }
.sticker-tapita img, .sticker-ole img { display:block; width:100%; height:auto; opacity:1; }
.sticker-ole { right:5vw; bottom:28px; width:120px; transform:rotate(-10deg); }
.banner h2 { max-width:760px; margin:0 auto; font-family:var(--display); font-size:clamp(40px,6vw,82px); line-height:1.05; letter-spacing:-.03em; font-weight:800; text-wrap:balance; }
.banner p { max-width:46ch; margin:30px auto 0; font-size:15.5px; line-height:1.75; }
.banner .circle-link { margin-top:36px; }

/* ---------- Categorierij op de voorpagina ---------- */
.category-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(7px,.8vw,12px); padding:clamp(30px,4vw,58px) 4.5vw; background:var(--zand);
}

/* Eerste plek in de rij: geen categorie maar de tekst. Geen vulkleur — de
   gekleurde tegels ernaast dragen de kleur al; hier alleen dezelfde dunne lijn,
   zodat het raster rustig blijft. De hoogte komt van de rij zelf. */
.category-note {
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  padding:clamp(16px,1.6vw,24px); box-shadow:inset 0 0 0 1px var(--lijn);
}
.category-note p { margin:0; font-family:var(--display); font-size:clamp(17px,1.3vw,23px); font-weight:800; line-height:1.15; letter-spacing:-.02em; text-wrap:balance; }
.category-note a {
  align-self:start; display:inline-flex; align-items:center; gap:8px;
  padding:11px 17px; border:1px solid var(--red); border-radius:99px; color:var(--red);
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.category-note a .doodle-icon { flex:0 0 auto; width:13px; height:13px; stroke-width:2.4; transition:transform .2s ease; }
.category-note a:hover { background:var(--red); color:var(--cream); }
.category-note a:hover .doodle-icon { transform:translateX(3px); }
/* Lichte lijn rondom, met de lijnkleur van het thema. Als inset-schaduw en
   niet als border, zodat de tegel geen pixel groter wordt en het raster blijft
   uitlijnen. */
.category-tile { position:relative; display:block; aspect-ratio:.86; overflow:hidden; background:var(--tegel,var(--pink)); box-shadow:inset 0 0 0 1px var(--lijn); }
.category-tile:nth-child(6n+1) { --tegel:var(--pink); }
.category-tile:nth-child(6n+2) { --tegel:var(--yellow); }
.category-tile:nth-child(6n+3) { --tegel:var(--blue); }
.category-tile:nth-child(6n+4) { --tegel:var(--green); }
.category-tile:nth-child(6n+5) { --tegel:var(--yellow); }
.category-tile:nth-child(6n+6) { --tegel:var(--blue); }
.category-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.category-tile:hover img { transform:scale(1.05); }
.category-tile-label {
  position:absolute; z-index:1; left:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:8px; max-width:calc(100% - 20px);
  padding:8px 13px; border-radius:99px; background:var(--zand); color:var(--espresso);
  font-size:11px; font-weight:600; line-height:1.2;
}
.category-tile-label .doodle-icon { flex:0 0 auto; width:13px; height:13px; stroke-width:2.4; transition:transform .2s ease; }
.category-tile:hover .category-tile-label .doodle-icon { transform:translateX(3px); }

/* ---------- Instagram-strook onderaan de voorpagina ---------- */
/* Onderaan bewust weinig lucht: de footer sluit er direct op aan. */
.insta-strip { padding:clamp(34px,4.4vw,64px) 4.5vw clamp(16px,1.8vw,26px); background:var(--zand); }

/* Mozaiek in plaats van een rij gelijke vierkanten. Zes kolommen: de kop vult
   er twee, de grote tegel twee bij twee. De kleine foto's staan staand, want
   dat is hoe de producten gefotografeerd zijn; hun verhouding bepaalt meteen
   de rijhoogte, waar de kop en de grote tegel zich naar voegen. */
.insta-strip-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(8px,.9vw,13px); }

.insta-strip-head {
  grid-column:span 2; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(18px,1.8vw,28px); padding:clamp(22px,2.4vw,42px); background:var(--yellow);
}
.insta-strip-head h2 { margin:0; font-family:var(--display); font-size:clamp(25px,2.5vw,44px); font-weight:800; line-height:1.05; letter-spacing:-.03em; text-wrap:balance; }
.insta-strip-head a {
  align-self:start; display:inline-flex; align-items:center; gap:9px;
  padding:13px 21px; border-radius:99px; background:var(--espresso); color:var(--cream);
  font-size:12px; font-weight:600; letter-spacing:.01em;
  transition:transform .2s ease, background .2s ease;
}
.insta-strip-head a:hover { transform:translateY(-1px); background:var(--red); }
.insta-strip-head .doodle-icon { flex:0 0 auto; width:14px; height:14px; stroke-width:2.4; transition:transform .2s ease; }
.insta-strip-head a:hover .doodle-icon { transform:translateX(3px); }

.insta-strip-grid img { display:block; width:100%; height:100%; aspect-ratio:.74; object-fit:cover; box-shadow:0 5px 0 -1px var(--tint,var(--pink)); }
.insta-strip-grid > img:nth-of-type(4n+2) { --tint:var(--yellow); }
.insta-strip-grid > img:nth-of-type(4n+3) { --tint:var(--green); }
.insta-strip-grid > img:nth-of-type(4n+4) { --tint:var(--blue); }

/* De grote tegel beslaat twee kolommen en twee rijen. Hij krijgt geen eigen
   verhouding: zijn hoogte komt van de twee rijen eronder, en de foto vult die
   met object-fit. */
.insta-groot { position:relative; grid-column:span 2; grid-row:span 2; margin:0; }
.insta-groot img { aspect-ratio:auto; height:100%; box-shadow:none; }
.insta-groot figcaption {
  position:absolute; right:clamp(10px,1vw,18px); bottom:clamp(10px,1vw,18px);
  padding:10px 18px; border-radius:99px; background:var(--zand); color:var(--espresso);
  font-size:12px; font-weight:600;
}

/* ---------- Binnenpagina's: donkere kop op crème ---------- */
.page-header { position:relative; overflow:hidden; padding:46px 4.5vw 40px; background:var(--zand); }
.page-header h1, .page-header h2 { max-width:900px; margin:0; font-family:var(--display); font-size:clamp(38px,5vw,76px); font-weight:800; line-height:1.05; letter-spacing:-.03em; text-wrap:balance; }
.page-header .eyebrow { color:var(--espresso); }
.breadcrumb { margin:0 0 12px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.breadcrumb a:hover { opacity:.6; }
.site-main { padding:0 4.5vw 90px; }
.entry-content { max-width:68ch; font-size:16px; line-height:1.75; }
.entry-content.is-wide { max-width:1120px; }
.entry-content h2 { font-family:var(--display); font-size:clamp(28px,3.4vw,46px); font-weight:800; line-height:1; letter-spacing:-.04em; margin:44px 0 14px; }
.entry-content h3 { font-size:18px; font-weight:700; margin:30px 0 10px; }
.entry-content a { border-bottom:1px solid rgba(64,53,47,.35); }
.entry-content ul, .entry-content ol { padding-left:20px; }
.entry-content img { height:auto; }
.entry-meta { margin:0 0 26px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.65; }
.post-list { display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.post-card h2 { margin:14px 0 8px; font-family:var(--display); font-size:26px; font-weight:800; letter-spacing:-.03em; line-height:1; }
.post-card img { width:100%; aspect-ratio:1.2; object-fit:cover; }
.post-card p { margin:0; font-size:13px; line-height:1.6; }
.pagination { display:flex; gap:12px; margin-top:50px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.pagination .current { color:var(--red); }

/* ---------- WooCommerce ---------- */
.woocommerce-notices-wrapper:empty { display:none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  margin:0 0 28px; padding:15px 18px; border:0; border-left:4px solid var(--red); border-radius:4px;
  background:var(--pink); color:var(--espresso); font-size:13.5px; line-height:1.55; list-style:none;
}
/* WooCommerce zet hier een vinkje uit zijn eigen icoonlettertype neer, absoluut
   gepositioneerd op 1.5em van links. Onze padding is smaller, dus het viel over
   het openingsaanhalingsteken van de productnaam heen. */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content:none; }
.woocommerce-message::after, .woocommerce-info::after, .woocommerce-error::after { content:""; display:table; clear:both; }

/* De knop staat vóór de tekst in de HTML en zweeft naar rechts; met wat lucht
   ernaast en een kleinere maat past hij netjes in de balk. */
.woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button {
  float:right; margin:-3px 0 0 20px; padding:11px 20px; border-radius:99px; font-size:10px;
}

/* De browser tekent hier standaard een blauwe focusring omdat WooCommerce de
   melding focust voor schermlezers. Die blijft — zichtbare focus hoort er te
   zijn — maar dan in de merkkleur. */
.woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus,
.woocommerce-message:focus-visible, .woocommerce-info:focus-visible, .woocommerce-error:focus-visible {
  outline:2px solid var(--espresso); outline-offset:3px;
}

.woocommerce-error { background:color-mix(in srgb, var(--red) 14%, var(--zand)); }

.button, .wp-element-button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt, .woocommerce button.button.alt {
  /* B3 — volvlaks kleurblok, naar de logo-combo's van het merkdocument. */
  display:inline-block; padding:17px 34px; border:0; border-radius:0;
  background:var(--red); color:var(--cream);
  font-family:Montserrat, Arial, sans-serif; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer; transition:background .2s ease;
}
.button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover { background:var(--espresso); color:var(--cream); opacity:1; }
.woocommerce .button.disabled, .woocommerce button.button:disabled { opacity:.45; }

.woocommerce form .form-row { margin:0 0 16px; }
.woocommerce form .form-row label { display:block; margin-bottom:6px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container .select2-selection--single,
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], textarea {
  width:100%; padding:12px 14px; border:1px solid rgba(64,53,47,.3); border-radius:0;
  background:var(--zand); color:var(--espresso); font-family:Montserrat, Arial, sans-serif; font-size:14px;
}
.woocommerce table.shop_table, .woocommerce table.cart, .woocommerce-checkout table {
  width:100%; border:0; border-collapse:collapse; font-size:13px;
}
.woocommerce table.shop_table th, .woocommerce table.shop_table td {
  padding:14px 10px; border:0; border-bottom:1px solid rgba(64,53,47,.18); text-align:left; vertical-align:middle;
}
.woocommerce table.shop_table th { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.woocommerce table.cart img { width:64px; height:auto; }
.woocommerce .cart-collaterals, .woocommerce-cart .cart-collaterals .cart_totals { width:100%; }
.woocommerce .cart_totals h2, .woocommerce-checkout h3, .woocommerce-billing-fields h3, #order_review_heading {
  font-family:var(--display); font-size:clamp(24px,2.6vw,36px); font-weight:800; letter-spacing:-.04em; margin:36px 0 14px;
}
.woocommerce-checkout .col2-set { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.woocommerce-checkout .col2-set .col-1, .woocommerce-checkout .col2-set .col-2 { width:auto; float:none; }
.woocommerce .quantity input.qty { width:70px; padding:10px; text-align:center; }
.woocommerce ul.order_details { padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; }
.woocommerce-MyAccount-navigation ul { margin:0 0 30px; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:18px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.woocommerce-MyAccount-navigation .is-active a { color:var(--red); }

/* Losse productpagina */
.single-product-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:start; }
.single-product-layout .woocommerce-product-gallery { background:var(--pink); padding:16px; box-shadow:inset 0 0 0 1px var(--lijn); }
.single-product-layout .woocommerce-product-gallery img { width:100%; height:auto; }
.single-product-layout .product_title { font-family:var(--display); font-size:clamp(34px,4.4vw,64px); font-weight:800; line-height:1.05; letter-spacing:-.03em; margin:0 0 18px; text-wrap:balance; }
.single-product-layout .price { display:block; margin:0 0 22px; font-size:19px; font-weight:700; }
.single-product-layout .price del { opacity:.5; margin-right:8px; font-weight:500; }
.single-product-layout .price ins { text-decoration:none; }
.single-product-layout .woocommerce-product-details__short-description { font-size:15.5px; line-height:1.75; max-width:46ch; }
.single-product-layout form.cart { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:26px 0; }
.single-product-layout .product_meta { margin-top:24px; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; opacity:.7; line-height:2; }
.woocommerce-tabs { margin-top:70px; }
.woocommerce-tabs ul.tabs { display:flex; flex-wrap:wrap; gap:24px; margin:0 0 22px; padding:0 0 12px; border-bottom:1px solid rgba(64,53,47,.2); list-style:none; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.woocommerce-tabs ul.tabs li.active a { color:var(--red); }
.woocommerce-tabs .panel h2 { font-family:var(--display); font-size:28px; font-weight:800; letter-spacing:-.04em; }
.related.products > h2, .upsells.products > h2 {
  font-family:var(--display); font-size:clamp(28px,3.4vw,48px); font-weight:800; letter-spacing:-.05em; margin:70px 0 24px;
}

/* Archief-toolbar */
.shop-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-bottom:26px; font-size:11px; }
.woocommerce-result-count { margin:0; font-size:12.5px; font-weight:400; letter-spacing:0; text-transform:none; opacity:.6; }
.woocommerce-ordering select { padding:9px 12px; border:1px solid rgba(64,53,47,.3); background:var(--zand); font-family:inherit; font-size:11px; }
/* WooCommerce toont de paginering als grijs omlijnd kadertje met zwevende li's
   en een paarsgrijze actieve pagina (#e9e6ed / #816f98). Die selectors zijn een
   niveau dieper dan de onze, dus hier op hetzelfde niveau overschreven — in de
   merkkleuren, als ronde pillen. */
.woocommerce nav.woocommerce-pagination { margin-top:clamp(34px,4vw,56px); text-align:center; }
.woocommerce nav.woocommerce-pagination ul {
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin:0; padding:0; border:0; list-style:none; white-space:normal;
}
.woocommerce nav.woocommerce-pagination ul li { float:none; display:block; margin:0; border:0; overflow:visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display:grid; place-items:center; min-width:40px; height:40px; padding:0 13px;
  border:1px solid rgba(64,53,47,.22); border-radius:99px;
  background:transparent; color:var(--espresso);
  font-size:12.5px; font-weight:600; line-height:1;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover {
  background:var(--pink); border-color:transparent; color:var(--espresso);
}
.woocommerce nav.woocommerce-pagination ul li span.current {
  background:var(--red); border-color:var(--red); color:var(--cream);
}
.woocommerce nav.woocommerce-pagination ul li a.next,
.woocommerce nav.woocommerce-pagination ul li a.prev { font-size:16px; }
.empty-state { padding:60px 0 40px; max-width:520px; }
.empty-state p { font-size:15px; line-height:1.7; }

@media (max-width:980px) {
  .single-product-layout { grid-template-columns:1fr; }
  .woocommerce-checkout .col2-set { grid-template-columns:1fr; }
  .post-list { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px) {
  .site-header { padding:18px 20px; }
  .wordmark { width:106px; }
  .main-nav { display:none; }
  .main-nav.is-open { display:block; position:absolute; z-index:4; top:100%; left:0; right:0; padding:20px; background:var(--espresso); color:var(--cream); }
  .main-nav.is-open ul { flex-direction:column; align-items:flex-start; gap:16px; }
  .menu-toggle { display:block; }
  .shop-soon { top:104px; left:20px; }
  .hero { min-height:480px; }
  .hero-copy { left:20px; bottom:20px; right:20px; }
  .hero-copy h1 { font-size:42px; }
  .hero-copy .circle-link { width:88px; height:88px; margin:18px 0 0 auto; font-size:15px; }
  h1 { max-width:500px; font-size:56px; line-height:1.02; }
  .circle-link { width:112px; height:112px; margin-top:28px; font-size:18px; }
  .sticker-tapita { top:15px; right:20px; width:125px; }
  .sticker-ole { width:82px; right:20px; bottom:20px; }
  .nadie-patroon { -webkit-mask-size:340px auto; mask-size:340px auto; }
  .intro { grid-template-columns:1fr; padding:62px 24px; gap:26px; }
  .collection { padding:82px 20px; }
  .collection-head { display:block; }
  .collection-head p { margin-top:16px; }
  .product-image { aspect-ratio:1.05; }
  .quote { padding:78px 24px; }
  .instagram { padding:82px 20px; }
  .instagram-head { display:block; }
  .instagram-head a { display:inline-block; margin-top:18px; }
  .instagram-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .banner { padding:78px 24px; }
  .page-header { padding:30px 20px 26px; }
  /* Wat meer lucht naar de schermrand; met 20px raakten de productfoto's
     bijna de rand van het scherm. */
  .site-main { padding:0 26px 70px; }
  .post-list { grid-template-columns:1fr; }
}

/* =========================================================================
   WINKEL — kopbalk, hero, raster en merkblokken (v1.3)
   ========================================================================= */

/* ---------- Kopbalk op crème ---------- */
.shop-topbar { position:sticky; top:0; z-index:60; background:var(--zand); border-bottom:1px solid rgba(64,53,47,.12); }
.site-header.is-solid { position:relative; z-index:auto; padding:14px 4.5vw; color:var(--espresso); gap:clamp(16px,3vw,52px); }
.site-header.is-solid .wordmark { filter:none; }
.site-logo { display:block; flex:0 0 auto; }
.site-header.is-solid .wordmark { width:118px; }

.site-header.is-solid .main-nav { flex:1 1 auto; justify-content:center; }
.site-header.is-solid .main-nav ul { flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.9vw,30px); }
.site-header.is-solid .main-nav a { position:relative; padding-bottom:5px; opacity:1; transition:color .18s ease; }
.site-header.is-solid .main-nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.site-header.is-solid .main-nav a:hover { color:var(--red); }
.site-header.is-solid .main-nav a:hover::after,
.site-header.is-solid .main-nav .current-menu-item > a::after { transform:scaleX(1); }
.site-header.is-solid .main-nav .current-menu-item > a { opacity:1; color:var(--espresso); }

/* Gereedschap rechts */
.header-tools { flex:0 0 auto; gap:14px; }
.tool-button { position:relative; display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:none; color:inherit; cursor:pointer; transition:background .18s ease, color .18s ease; }
.tool-button:hover { background:rgba(64,53,47,.07); color:var(--red); }
.doodle-icon { width:19px; height:19px; }
.tool-count, .cart-link .count {
  position:absolute; top:-1px; right:-2px; display:grid; place-items:center; min-width:17px; height:17px;
  padding:0 4px; border-radius:99px; background:var(--red); color:var(--cream); font-size:9.5px; font-weight:700; letter-spacing:0;
}
/* Het mandje is overal een tasje met een telbolletje — ook in de doorzichtige
   kopbalk op de voorpagina, waar eerst het woord "Mandje" stond. Zo staan het
   vergrootglas, het hartje en het tasje daar als één rij. */
.site-header .cart-link { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; font-size:0; transition:background .18s ease; }
.site-header .cart-link::before {
  content:""; width:19px; height:19px; background:currentColor;
  -webkit-mask:var(--bag-icon) center/contain no-repeat; mask:var(--bag-icon) center/contain no-repeat;
}
.site-header .cart-link .count { margin-left:0; font-size:9.5px; }
.site-header.is-solid .cart-link:hover { background:rgba(64,53,47,.07); color:var(--red); }
/* Over de hero is een lichte hover nodig; een donkere valt daar weg. */
.site-header:not(.is-solid) .cart-link:hover,
.site-header:not(.is-solid) .tool-button:hover { background:rgba(255,250,242,.16); color:#fffaf2; }
:root {
  --bag-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10h20l-2 18H8L6 10Z'/%3E%3Cpath d='M11 13V9a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Zoekbalk en verlanglijst */
.site-search, .wishlist-panel {
  position:absolute; z-index:70; top:100%; right:4.5vw; width:min(340px,calc(100vw - 40px));
  padding:16px; background:var(--zand); border:1px solid rgba(64,53,47,.16); box-shadow:0 14px 34px -22px rgba(64,53,47,.55);
}
.site-search form { display:flex; gap:8px; }
.site-search input[type=search] { flex:1; }
.site-search button { padding:12px 16px; border:0; background:var(--red); color:var(--cream); font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; }
.wishlist-title { margin:0 0 12px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.wishlist-items { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.wishlist-items li { display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; font-size:12px; }
.wishlist-items img { width:44px; height:44px; object-fit:cover; background:var(--pink); }
.wishlist-items .wish-remove { border:0; background:none; color:inherit; font-size:16px; line-height:1; cursor:pointer; opacity:.5; padding:4px; }
.wishlist-items .wish-remove:hover { opacity:1; color:var(--red); }
.wishlist-empty, .wishlist-note { margin:10px 0 0; font-size:11px; line-height:1.5; opacity:.62; }
.wishlist-items:empty + .wishlist-empty { margin-top:0; }

/* ---------- Hero van winkel en categorie ---------- */
/* Compact en commercieel: circa 38% tekst en 62% foto, hoogte 320-420px.
   De foto loopt door tot de rechterrand; de tekst houdt de cremee marge links.
   Bewust een editorial band en geen paginavullende split-screen: de bezoeker
   moet het raster meteen zien. */
.shop-hero {
  position:relative; display:grid; grid-template-columns:minmax(290px,38%) 1fr;
  align-items:stretch; gap:clamp(18px,2.8vw,44px);
  height:320px;
  padding-left:4.5vw; background:var(--zand); overflow:hidden;
}
.shop-hero-copy { position:relative; z-index:2; align-self:center; max-width:32rem; padding:20px 0; }
/* Onder de banner in plaats van erin: daar botste hij met de foto en de kop. */
.breadcrumb-standalone.is-archive { padding:clamp(22px,2.6vw,34px) 4.5vw 0; }
.breadcrumb-sep { display:inline-block; margin:0 7px; opacity:.5; }
/* Losse kruimelpad boven de productpagina: lucht onder de kopbalk en lucht
   naar de galerij eronder, anders plakt hij tegen allebei aan. */
.breadcrumb-standalone { padding:26px 4.5vw 24px; font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:none; opacity:.68; }
.shop-hero-title { margin:0; font-family:var(--display); font-size:clamp(34px,3.8vw,54px); font-weight:800; line-height:.95; letter-spacing:-.03em; text-wrap:balance; }
/* Nu de merkbeloftes uit de banner zijn, past de omschrijving over vier regels
   en mag de kolom breder. Daarmee valt geen enkele categorietekst meer af —
   op Oil & Vinegars na, want daar staat het hele merkverhaal in. */
.shop-hero-intro { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; margin:14px 0 0; max-width:56ch; font-size:14.5px; line-height:1.6; }

.usp-row { display:flex; flex-wrap:wrap; gap:clamp(14px,1.9vw,28px); margin:18px 0 0; padding:0; list-style:none; }
.usp-row li { display:flex; align-items:center; gap:9px; font-size:11.5px; line-height:1.35; }
.usp-row .doodle-icon { flex:0 0 auto; width:23px; height:23px; color:var(--espresso); stroke-width:1.5; }
.usp-row span { display:block; }
.usp-row strong { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

/* De sfeerfoto's zijn staand. Met height:100% in een kolom zonder vaste hoogte
   valt dat terug op auto en rekt de foto de hele hero uit tot beeldvullend —
   vandaar absoluut positioneren: de foto volgt de hero, niet andersom. */
.shop-hero-media { position:relative; z-index:1; align-self:stretch; overflow:hidden; }
.shop-hero-media > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

/* De foto loopt zacht uit in de zandkleur in plaats van met een harde rand
   tegen de tekstkolom te staan. Een masker op de foto zelf, geen kleurlaag
   eroverheen: dan klopt het ook als --zand ooit verandert. Zonder
   maskerondersteuning blijft het gewoon een rechte rand. */
@supports ((-webkit-mask-image:none) or (mask-image:none)) {
  .shop-hero-media > img {
    -webkit-mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 9%, #000 30%);
    mask-image:linear-gradient(to right, transparent 0, rgba(0,0,0,.55) 9%, #000 30%);
  }
}

/* Het enige merkaccent in de hero: de sticker met een klein hartje ernaast. */
.hero-mark { position:absolute; z-index:2; top:clamp(14px,2.4vw,32px); left:clamp(-24px,-1.5vw,-10px); display:block; width:clamp(88px,9.5vw,132px); color:var(--espresso); transform:rotate(-7deg); }
.hero-mark .sticker-ole { display:block; width:100%; height:auto; }
.hero-mark .doodle-heart { position:absolute; right:clamp(-18px,-1.2vw,-10px); bottom:clamp(-4px,.4vw,4px); width:clamp(19px,2vw,27px); height:auto; }
/* `.doodle` is standaard position:absolute voor de losse krabbels op de
   achtergrond. Dit hartje staat in de tekst mee en viel daardoor over de
   woorden heen — hier weer terug in de flow. */
.doodle-heart-small { position:static; width:26px; height:auto; }

/* ---------- Merkbeloftes onder de banner ----------
   Een eigen laag tussen de banner en het kruimelpad. Geen kaarten, kleurvlakken
   of schaduwen: drie gelijke kolommen op de gewone ondergrond, met een haarlijn
   ertussen. De rust komt van de ruimte eromheen, niet van omlijsting. */
/* Iets donkerder dan de pagina, zodat de strip als eigen laag leest zonder een
   kader of schaduw nodig te hebben. */
.usp-strip { padding:clamp(22px,2.6vw,34px) 4.5vw; background:color-mix(in srgb, var(--espresso) 6%, var(--zand)); }
.usp-strip ul {
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,54px);
  margin:0; padding:0; list-style:none;
}
.usp-strip li { display:flex; align-items:center; gap:13px; padding-left:clamp(18px,3vw,54px); }
/* De lijn hoort tussen de kolommen, dus niet voor de eerste. */
.usp-strip li:first-child { padding-left:0; }
.usp-strip li + li { border-left:1px solid rgba(64,53,47,.14); }
.usp-strip .doodle-icon { flex:0 0 auto; width:24px; height:24px; color:var(--espresso); stroke-width:1.4; }
.usp-strip li > span { display:block; font-size:12.5px; line-height:1.4; }
.usp-strip strong { display:block; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.usp-strip .usp-sub { display:block; }

/* ---------- Winkelraamwerk ---------- */
.shop-layout { position:relative; display:grid; grid-template-columns:minmax(168px,19%) 1fr; gap:clamp(22px,2.8vw,44px); align-items:start; padding-top:clamp(22px,2.6vw,34px); }
.shop-content { position:relative; z-index:1; min-width:0; }

/* Grote, lichte bladvormen als kleurvlak achter de pagina — zonder deze staat
   het raster op een kale crème vlakte. Absoluut gepositioneerd, dus ze tellen
   niet mee als cel in de grid hierboven. */
.shop-blad { z-index:0; opacity:.75; }
.shop-blad-groen { left:-2.6vw; bottom:clamp(90px,12vw,200px); width:clamp(130px,15vw,230px); color:var(--green); transform:rotate(-12deg); }
.shop-blad-blauw { right:-1.4vw; top:clamp(220px,26vw,420px); width:clamp(120px,13vw,200px); color:var(--blue); transform:rotate(150deg); }

.shop-sidebar { position:sticky; z-index:1; top:88px; }
.sidebar-title { margin:0 0 14px; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.category-list { margin:0; padding:0; list-style:none; display:grid; gap:2px; }
.category-list a {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; font-size:13.5px; font-weight:500; line-height:1.3;
  transition:background .18s ease, color .18s ease;
}
.category-list a:hover { background:rgba(199,217,182,.4); }
.category-list .doodle-icon { width:13px; height:13px; opacity:.4; stroke-width:2.4; transition:transform .18s ease, opacity .18s ease; }
.category-list a:hover .doodle-icon { opacity:.8; transform:translateX(3px); }
.category-list .is-current > a { background:var(--pink); font-weight:600; }
/* Subcategorieen, ingesprongen onder hun hoofdcategorie. */
.category-children { display:grid; gap:2px; margin:2px 0 6px; padding:0 0 0 14px; list-style:none; border-left:1px solid var(--lijn); }
.category-children a { padding:9px 12px; font-size:12.5px; }
.category-children .doodle-icon { width:11px; height:11px; }
.category-list .is-current .doodle-icon { opacity:.75; }

.sidebar-mark { display:grid; justify-items:center; gap:10px; margin-top:46px; text-align:center; transform:rotate(-5deg); }
.sidebar-mark p { margin:0; max-width:11ch; font-family:var(--display); font-size:22px; font-weight:800; line-height:1.14; letter-spacing:-.01em; }

/* ---------- Productraster ---------- */
/* Het raster van de winkel, los van dat van de landingspagina.
   De kaarten hebben zelf 10px lucht; de gaten mogen daarom krapper. */
.shop-content .products, .related .products, .up-sells .products {
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.4vw,20px) clamp(8px,1vw,16px);
  margin:0; padding:0; list-style:none;
}
.related .products, .up-sells .products { grid-template-columns:repeat(4,1fr); }

/* De merkkleuren zijn ondersteunend: een smalle band onder de foto en een
   zachte tint bij hover. De productfoto blijft het beeld dragen. */
/* min-width:0 is hier geen detail: een `1fr`-kolom krimpt uit zichzelf niet
   verder dan de breedste inhoud van de kaart. Valt Montserrat weg — op de
   iPhone gebeurt dat eerder dan op een desktop — dan wordt de vervangende
   letter breder, rekt de kolom op en loopt het raster buiten het blok. Daar
   knipt `overflow:hidden` op .collection de rechterkaart af. */
.products .product { --tint:var(--pink); display:flex; flex-direction:column; min-width:0; padding:10px 10px 14px; transition:background .25s ease; }
.products .product:nth-child(4n+2) { --tint:var(--yellow); }
.products .product:nth-child(4n+3) { --tint:var(--green); }
.products .product:nth-child(4n+4) { --tint:var(--blue); }
.products .product:hover { background:color-mix(in srgb, var(--tint) 34%, transparent); }
.product-media { position:relative; aspect-ratio:1; overflow:hidden; background:var(--tint,var(--pink)); box-shadow:0 5px 0 -1px var(--tint,var(--pink)); }
.product-media .product-link { display:block; width:100%; height:100%; }
.product-media img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .35s ease; }
.product-image-hover { position:absolute; inset:0; opacity:0; }
.product:hover .product-media img { transform:scale(1.045); }
.product:hover .product-image-hover { opacity:1; }


.wish-toggle {
  position:absolute; z-index:2; top:12px; right:12px; display:grid; place-items:center;
  width:34px; height:34px; padding:0; border:0; border-radius:50%;
  background:rgba(247,242,234,.94); color:var(--espresso); cursor:pointer;
  transition:transform .2s cubic-bezier(.34,1.4,.64,1), color .2s ease, background .2s ease;
}
.wish-toggle .doodle-icon { width:16px; height:16px; fill:none; transition:fill .2s ease; }
.wish-toggle:hover { transform:scale(1.09); color:var(--red); }
.wish-toggle[aria-pressed="true"] { color:var(--red); }
.wish-toggle[aria-pressed="true"] .doodle-icon { fill:var(--red); }

.product .product-badge { top:12px; left:12px; }

.product-info { display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:start; padding-top:14px; }
.product-heading { display:block; min-width:0; overflow-wrap:break-word; font-size:13.5px; line-height:1.4; }
.product-name { display:block; font-weight:600; }
.product-sub { display:block; opacity:.62; font-size:12.5px; }
.product-info .price { grid-column:2; grid-row:1; font-size:14px; font-weight:700; color:var(--red); white-space:nowrap; }
.product-info .price del { opacity:.45; margin-right:5px; font-weight:500; }
.product-info .price ins { text-decoration:none; }
.product-info .price .woocommerce-Price-currencySymbol { margin-right:2px; }

/* De knop hangt onderaan de kaart. Niet elk product heeft een maatregel onder
   de naam, en sommige namen lopen over twee regels — met margin-top:auto staan
   de knoppen in een rij toch allemaal op dezelfde hoogte. */
.product-action { margin-top:auto; padding-top:14px; }
.products .button, .products .added_to_cart {
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:13px 16px; border:1px solid var(--red); border-radius:99px;
  background:transparent; color:var(--red);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-align:center;
  transition:background .2s ease, color .2s ease;
}
.products .button .doodle-icon { width:15px; height:15px; }
.products .button:hover, .products .added_to_cart:hover { background:var(--red); color:var(--cream); }
.products .button.loading { opacity:.6; }
.products .added_to_cart { margin-top:8px; border-style:dashed; }
.product.outofstock .products .button, .products .button.disabled { opacity:.45; }

/* WooCommerce levert zijn eigen float-raster mee en stijlt de foto, de prijs en
   de knop met selectors die specifieker zijn dan de onze (bijvoorbeeld
   `.woocommerce ul.products li.product a img`, vier klassen diep). Binnen onze
   CSS-grid gaf dat smalle, zwevende kolommen met halve foto's. Hieronder staan
   die regels expliciet teruggedraaid, met exact dezelfde specificiteit — onze
   stylesheet laadt na die van WooCommerce, dus deze winnen. */
.woocommerce ul.products,
.woocommerce-page ul.products { margin:0; }
/* De breedte zit bij WooCommerce achter een extra klasse (`ul.products.columns-3`),
   dus die selector moet een niveau dieper om te kunnen winnen. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product { float:none; width:auto; margin:0; }
.woocommerce ul.products li.product a img,
.woocommerce-page ul.products li.product a img { width:100%; height:100%; margin:0; object-fit:cover; }
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price { margin:0; font-size:14px; font-weight:700; }
/* WooCommerce zet een oude clearfix op de lijst (`::before{content:" ";display:table}`).
   In een CSS-grid is zo'n pseudo-element gewoon een rastercel: dat gaf een lege
   plek vooraan, waardoor de eerste rij maar twee producten telde. */
.woocommerce ul.products::before, .woocommerce ul.products::after,
.woocommerce-page ul.products::before, .woocommerce-page ul.products::after { content:none; }

/* De kaartknop is een omlijnde pil, maar `.woocommerce a.button` (een niveau
   specifieker dan `.products .button`) maakte er een dichtgekleurd rood blok van.
   Daarom hier op hetzelfde niveau als WooCommerce zelf. */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .button,
.woocommerce-page ul.products li.product .added_to_cart {
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  margin-top:0; padding:13px 16px; border:1px solid var(--red); border-radius:99px;
  background:transparent; color:var(--red);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover,
.woocommerce-page ul.products li.product .button:hover,
.woocommerce-page ul.products li.product .added_to_cart:hover { background:var(--red); color:var(--cream); }
.woocommerce ul.products li.product .added_to_cart,
.woocommerce-page ul.products li.product .added_to_cart { margin-top:8px; border-style:dashed; }

/* De volledige categorietekst boven het raster; de banner toont alleen de
   opening. Leesbreedte begrensd, want een regel over de volle kolom leest niet. */
.categorie-omschrijving { max-width:70ch; margin:0 0 clamp(24px,3vw,38px); font-size:14.5px; line-height:1.72; }
.categorie-omschrijving p { margin:0 0 14px; }
.categorie-omschrijving p:last-child { margin-bottom:0; }

.shop-toolbar { padding-bottom:14px; border-bottom:1px solid var(--lijn); }

/* ---------- Geel merkblok ---------- */
.promo-band {
  position:relative; display:grid; grid-template-columns:minmax(200px,34%) 1fr auto; align-items:center;
  gap:clamp(20px,3vw,44px); margin-top:clamp(40px,5vw,72px); padding-right:clamp(20px,3vw,44px);
  background:var(--red); color:var(--cream); overflow:hidden;
}
/* De hoogte van de band komt van de tekst, niet van de foto: de foto rekt
   zich naar de rij en wordt bijgesneden. Absoluut gepositioneerd, want
   height:100% valt anders terug op auto en dan bepaalt de staande foto de
   hoogte — dezelfde valkuil als in de hero. */
.promo-media { position:relative; align-self:stretch; min-height:0; overflow:hidden; }
.promo-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.promo-copy { padding:15px 0; }
.promo-copy h2 { margin:0; max-width:16ch; font-family:var(--display); font-size:clamp(21px,2.1vw,31px); font-weight:800; line-height:1.08; letter-spacing:-.03em; }
.promo-copy p { margin:12px 0 20px; max-width:44ch; font-size:14px; line-height:1.65; }
/* De sticker heeft zijn eigen gele cirkel; die staat los op de gele band. */
.promo-sticker { position:relative; z-index:1; display:block; width:clamp(84px,9vw,124px); height:auto; transform:rotate(-6deg); }

.text-arrow { display:inline-flex; align-items:center; gap:9px; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; border-bottom:1px solid currentColor; padding-bottom:5px; }
.text-arrow .doodle-icon { width:16px; height:16px; transition:transform .2s ease; }
.text-arrow:hover .doodle-icon { transform:translateX(4px); }

/* ---------- Productpagina ---------- */
.single-product-layout { display:grid; grid-template-columns:1.08fr .92fr; }

/* Het merkverhaal en de suggesties hangen aan woocommerce_after_single_product_summary
   en zijn dus kinderen van dezelfde tweekolomsgrid als de galerij en de tekst.
   Zonder dit staan ze in een halve kolom in plaats van over de volle breedte. */
.single-product-layout > .story-band,
.single-product-layout > .related,
.single-product-layout > .up-sells,
.single-product-layout > .clear { grid-column:1 / -1; }
.single-product-layout > .clear { display:none; }

/* WooCommerce zet float:left en width:48% op de galerij en op de tekstkolom,
   voor zijn eigen float-opmaak. In deze grid wordt de float genegeerd maar die
   48% niet — daardoor vulde elke kolom zichzelf maar half en stond de foto op
   een derde van de breedte met een gat ernaast.
   Let op de `#content`-varianten hieronder: die staan ook in de selectorgroep
   van WooCommerce en bevatten een id, dus specificiteit (1,2,4). Onze
   productpagina staat in <main id="content">, dus die matcht. Zonder die
   varianten mee te nemen verliest deze correctie het alsnog van die 48%. */
.woocommerce #content div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.woocommerce #content div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary { float:none; width:100%; }

.single-product-layout .woocommerce-product-gallery { position:relative; padding:0; background:transparent; box-shadow:none; }
/* De eerste foto over de volle breedte van de kolom, de rest daaronder naast
   elkaar als miniaturen. Vaste kwartbreedte, niet meegroeiend: bij een product
   met maar een extra foto vulde die anders de hele regel en was het geen
   miniatuur meer maar een tweede hoofdfoto. Vier per regel is ook wat
   WooCommerce zelf aangeeft met --columns-4. */
.single-product-layout .woocommerce-product-gallery__wrapper {
  display:flex; flex-wrap:wrap; gap:10px; background:none;
}
.single-product-layout .woocommerce-product-gallery__image { flex:0 1 calc(25% - 7.5px); min-width:0; }
.single-product-layout .woocommerce-product-gallery__image:first-child { flex:1 1 100%; }
.single-product-layout .woocommerce-product-gallery__image a { display:block; }
.single-product-layout .woocommerce-product-gallery__image img {
  display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover;
}
/* De hoofdfoto staand, want dat is hoe de producten gefotografeerd zijn. */
.single-product-layout .woocommerce-product-gallery__image:first-child img { aspect-ratio:4/5; }
.single-product-layout .woocommerce-product-gallery .wish-toggle { top:16px; right:16px; }
.single-product-layout .woocommerce-product-gallery__trigger { display:none; }

.single-product-layout .summary { position:relative; }
.single-product-layout .product_title { margin-bottom:4px; }
.product-sub.is-single { display:block; margin:6px 0 0; font-family:Montserrat, Arial, sans-serif; font-size:14px; font-weight:500; letter-spacing:0; opacity:.62; }
.single-product-layout .product_title { margin-bottom:18px; }
.single-product-layout .price { color:var(--red); font-size:24px; }
/* Onder elkaar in de rechterkolom: naast elkaar viel de derde belofte op een
   eigen regel en oogde de rij gebroken. */
.single-product-layout .usp-row.is-single { flex-direction:column; flex-wrap:nowrap; gap:14px; margin:26px 0 4px; }
.single-product-layout .usp-row.is-single li { font-size:11.5px; }

/* Varianten als stalen */
.nadie-swatches { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.nadie-swatches button {
  position:relative; width:34px; height:34px; padding:0; border:1px solid rgba(64,53,47,.22); border-radius:50%;
  background:var(--pink); cursor:pointer; transition:transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s ease;
}
.nadie-swatches button:hover { transform:scale(1.08); }
.nadie-swatches button[aria-pressed="true"] { box-shadow:0 0 0 2px var(--cream), 0 0 0 3.5px var(--espresso); }
.nadie-swatches.is-text button { width:auto; height:auto; padding:9px 15px; border-radius:99px; background:transparent; font-family:inherit; font-size:12px; font-weight:600; color:inherit; }
.nadie-swatches.is-text button[aria-pressed="true"] { background:var(--pink); box-shadow:none; border-color:var(--espresso); }
.woocommerce-variation-add-to-cart, .single-product-layout table.variations { width:100%; }
.single-product-layout table.variations td, .single-product-layout table.variations th { padding:0 0 10px; border:0; }
.single-product-layout table.variations label { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
/* WooCommerce verbergt de "Wissen"-link met visibility:hidden. Zo'n element
   blijft wel ruimte innemen — dat was het gat onder het kleurlabel. Met de
   stalen is de link overbodig: nog een keer op een staal tikken zet de keuze
   weer uit. */
/* De "Wissen"-link van WooCommerce blijft overal weg: met de stalen kies je
   altijd een variant, en verborgen met visibility:hidden nam hij ruimte in. */
.woocommerce div.product form.cart .reset_variations,
.single-product-layout .reset_variations { display:none !important; }
.single-product-layout .woocommerce-variation-price { margin-bottom:14px; }
.has-swatches select { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

/* Aantal en bestelknop */
/* Ook dit formulier heeft bij WooCommerce nog een clearfix voor een
   float-opmaak: `form.cart::before` en `::after`. In een flexbox zijn dat
   gewoon twee extra flexitems, en die duwden de bestelknop naar de regel
   onder het aantal. Zelfde oorzaak als de lege cel in het productraster. */
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after { content:none; }
.woocommerce div.product form.cart div.quantity { float:none; margin:0; }

.single-product-layout form.cart { align-items:stretch; gap:14px; margin:24px 0 0; }
.nadie-quantity { display:flex; align-items:center; border:1px solid rgba(64,53,47,.3); border-radius:99px; overflow:hidden; }
.nadie-quantity button { width:42px; height:100%; min-height:52px; border:0; background:none; color:inherit; font-size:18px; line-height:1; cursor:pointer; transition:color .18s ease; }
.nadie-quantity button:hover { color:var(--red); }
.single-product-layout form.cart .quantity input.qty { width:44px; min-height:52px; padding:0; border:0; background:none; text-align:center; font-size:14px; font-weight:600; -moz-appearance:textfield; }
.single-product-layout form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product-layout form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.single-product-layout form.cart .single_add_to_cart_button {
  display:inline-flex; align-items:center; gap:11px; flex:1 1 auto; justify-content:center;
  min-height:52px; padding:14px 34px; border-radius:99px;
}
.single-product-layout form.cart .single_add_to_cart_button::after {
  content:""; width:17px; height:17px; background:currentColor;
  -webkit-mask:var(--bag-icon) center/contain no-repeat; mask:var(--bag-icon) center/contain no-repeat;
}

/* Uitklappanelen */
.product-accordion { margin-top:34px; border-top:1px solid rgba(64,53,47,.16); }
.accordion-item { border-bottom:1px solid rgba(64,53,47,.16); }
.accordion-item summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 2px; font-size:14px; font-weight:500; cursor:pointer; list-style:none; }
.accordion-item summary::-webkit-details-marker { display:none; }
.accordion-item summary:hover { color:var(--red); }
.accordion-mark { position:relative; flex:0 0 auto; width:13px; height:13px; }
.accordion-mark::before, .accordion-mark::after { content:""; position:absolute; background:currentColor; transition:transform .22s ease, opacity .22s ease; }
.accordion-mark::before { top:6px; left:0; width:13px; height:1.5px; }
.accordion-mark::after { top:0; left:6px; width:1.5px; height:13px; }
.accordion-item[open] .accordion-mark::after { transform:rotate(90deg); opacity:0; }
.accordion-body { padding:0 2px 20px; font-size:14px; line-height:1.7; }
.accordion-body > *:first-child { margin-top:0; }
.accordion-body ul { padding-left:18px; }
.accordion-body h2 { display:none; }


/* ---------- Merkverhaal ---------- */
/* Sluit dichter aan op de uitklappanelen erboven; die eindigen al met een
   scheidingslijn, dus een groot gat maakt het alleen leeg. */
.story-band { display:grid; grid-template-columns:1fr 1fr; align-items:stretch; margin:clamp(22px,2.6vw,38px) -4.5vw 0; background:var(--pink); overflow:hidden; }
.story-media { position:relative; min-height:clamp(240px,26vw,340px); overflow:hidden; }
.story-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.story-splash { position:absolute; z-index:2; left:20px; bottom:26px; width:70px; color:var(--red); }
.story-copy { position:relative; padding:clamp(34px,4.4vw,64px) clamp(24px,4vw,60px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.story-copy h2 { margin:0 0 16px; font-family:var(--display); font-size:clamp(28px,3.6vw,52px); font-weight:800; line-height:1.05; letter-spacing:-.03em; }
.story-copy p { margin:0 0 26px; max-width:46ch; font-size:14.5px; line-height:1.72; }
.story-copy .button { display:inline-flex; align-items:center; gap:10px; border-radius:99px; }
.story-copy .button .doodle-icon { width:16px; height:16px; }
.story-mark { position:absolute; z-index:2; top:clamp(24px,4vw,52px); right:clamp(18px,4vw,60px); margin:0; color:var(--red); font-family:var(--display); font-size:clamp(20px,2.4vw,34px); font-weight:800; line-height:1.1; text-align:center; transform:rotate(-8deg); }
.story-frond { position:absolute; z-index:0; right:-34px; bottom:-46px; width:clamp(120px,14vw,200px); color:var(--green); opacity:.75; }

/* ---------- Suggesties ---------- */
.related.products, .upsells.products { margin-top:clamp(46px,5vw,80px); }
.section-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:26px; }
.section-head h2 { margin:0; font-family:var(--display); font-size:clamp(26px,3.2vw,44px); font-weight:800; line-height:1; letter-spacing:-.04em; }
.related.products > h2, .upsells.products > h2 { margin:0 0 26px; }

/* ---------- Footer ---------- */
/* Groene footer: de enige merkkleur die nog nergens als groot vlak stond.
   Rood botst met de promoband erboven, geel met de koptekst in de hero. Met
   een licht vlak wordt de tekst espresso in plaats van crème — alles wat op
   die donkere ondergrond was afgestemd staat hieronder mee omgezet. */
.site-footer { margin-top:clamp(50px,6vw,86px); background:var(--green); color:var(--espresso); }
.footer-main {
  position:relative; display:grid; grid-template-columns:minmax(180px,1.1fr) repeat(3,minmax(120px,.85fr)) minmax(150px,.9fr);
  gap:clamp(24px,3vw,48px); padding:clamp(42px,5vw,72px) 4.5vw clamp(32px,4vw,54px); overflow:hidden;
}
.footer-brand { display:grid; justify-items:start; gap:18px; }
.footer-wordmark { width:clamp(150px,15vw,215px); height:auto; }
.footer-brand .doodle-heart-small { width:34px; color:var(--red); }
.footer-column h2 { margin:0 0 16px; font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.footer-column ul { display:grid; gap:9px; margin:0; padding:0; list-style:none; }
.footer-column a { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; opacity:.88; transition:opacity .18s ease, color .18s ease; }
.footer-column a:hover { opacity:1; color:var(--red); }
.social-icon { width:17px; height:17px; flex:0 0 auto; }

/* Nieuwsbrief onder Volg ons — stond eerst in de rode slotbanner. */
.footer-news { margin:22px 0 14px; max-width:30ch; font-size:13px; line-height:1.65; opacity:.82; }
.footer-news-button {
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 20px; border:1px solid rgba(64,53,47,.4); border-radius:99px;
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  opacity:1; transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-column a.footer-news-button:hover { background:var(--red); border-color:var(--red); color:var(--cream); opacity:1; }
/* Rechtsonder in het footerblok, met lucht tot de randen. */
.footer-sticker { position:absolute; z-index:1; right:clamp(20px,3vw,44px); bottom:clamp(20px,3vw,40px); width:clamp(96px,10vw,142px); height:auto; transform:rotate(-8deg); }
.footer-base {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 22px;
  padding:15px 4.5vw; border-top:1px solid rgba(64,53,47,.18);
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
}
.footer-base ul, .footer-legal { display:flex; flex-wrap:wrap; gap:8px 20px; margin:0; padding:0; list-style:none; }
.footer-base a { opacity:.8; }
.footer-base a:hover { opacity:1; color:var(--red); }

/* ---------- Productpagina: kleuren en telefoon ----------
   De prijs en de bestelknop kregen de standaardkleuren van WooCommerce (een
   olijfgroene prijs en een paarse knop). Die selectors zijn dieper dan de onze,
   dus hier expliciet op merkkleur gezet, diep genoeg om te winnen. */
.woocommerce div.product p.price,
.woocommerce div.product p.price .amount,
.woocommerce div.product p.price ins,
.woocommerce div.product span.price .amount { color:var(--red); }

.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover {
  background:var(--red); color:var(--cream); border:0;
}
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:hover { background:var(--espresso); }
/* Bij een variabel product staat de knop uit tot er een kleur of maat is
   gekozen. Hij mag dan doffer, maar wel in dezelfde kleur. */
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt:disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button.button.alt.disabled {
  background:var(--red); color:var(--cream); opacity:.4;
}

@media (max-width:980px) {
  /* Deze regel stond eerder in het bestand dan de tweekolomsopmaak hieronder
     en verloor het daardoor: op de telefoon bleven het twee kolommen, en de
     lange woorden in de rechterkolom drukten de galerij samen tot een strookje
     van veertig pixels. */
  .single-product-layout { grid-template-columns:1fr; gap:26px; }
  .single-product-layout .woocommerce-product-gallery { width:100%; }
  .single-product-layout .woocommerce-product-gallery__image img { aspect-ratio:1; }

  .single-product-layout .product_title { font-size:clamp(30px,7vw,42px); }

  /* Onder elkaar en over de volle breedte: eerst de kleur of maat, dan het
     aantal, dan de bestelknop. Naast elkaar wordt het op een telefoon te krap
     en valt de knop half buiten beeld. */
  .single-product-layout form.cart { display:grid; gap:16px; }
  .single-product-layout form.cart > * { width:100%; min-width:0; }
  .single-product-layout .variations,
  .single-product-layout .variations tbody,
  .single-product-layout .variations tr,
  .single-product-layout .variations th,
  .single-product-layout .variations td { display:block; width:100%; text-align:left; padding:0; }
  .single-product-layout .variations th.label { margin-bottom:8px; }
  .single-product-layout .woocommerce-variation-add-to-cart { display:grid; gap:12px; }
  .single-product-layout .nadie-quantity { width:100%; justify-content:space-between; }
  .single-product-layout form.cart .single_add_to_cart_button { width:100%; }
  .nadie-swatches { flex-direction:row; flex-wrap:wrap; }
}

/* ---------- Productraster van de blokken ----------
   De winkelmand en de afrekenpagina zijn opgebouwd uit WooCommerce-blokken, en
   die gebruiken heel andere klassen dan het raster in de winkel: geen
   `li.product` maar `wc-block-grid__product`. Zonder deze regels valt het
   terug op de standaardopmaak en staat het gecentreerd tussen onze
   linksuitgelijnde pagina. */
.wp-block-woocommerce-empty-cart-block > h4,
.wp-block-woocommerce-empty-cart-block > h2 {
  font-family:var(--display); font-weight:800; letter-spacing:-.02em; text-align:left;
}
.wp-block-woocommerce-empty-cart-block > h4 { margin:0 0 10px; font-size:clamp(26px,3vw,40px); line-height:1.06; }
.wp-block-woocommerce-empty-cart-block > h2 { margin:clamp(30px,4vw,52px) 0 22px; font-size:clamp(19px,2vw,27px); }
.wp-block-woocommerce-empty-cart-block .wp-block-separator { margin:24px 0 0; border:0; border-top:1px solid var(--lijn); }

.wc-block-grid__products {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px,1.4vw,20px) clamp(8px,1vw,16px); margin:0; padding:0; list-style:none;
}
.wc-block-grid__product { --tint:var(--pink); display:flex; flex-direction:column; margin:0; padding:10px 10px 14px; text-align:left; transition:background .25s ease; }
.wc-block-grid__product:nth-child(4n+2) { --tint:var(--yellow); }
.wc-block-grid__product:nth-child(4n+3) { --tint:var(--green); }
.wc-block-grid__product:nth-child(4n+4) { --tint:var(--blue); }
.wc-block-grid__product:hover { background:color-mix(in srgb, var(--tint) 34%, transparent); }
.wc-block-grid__product-link { display:block; }
.wc-block-grid__products .wc-block-grid__product-image {
  display:block; margin:0; aspect-ratio:1; overflow:hidden;
  background:var(--tint); box-shadow:0 5px 0 -1px var(--tint);
}
.wc-block-grid__products .wc-block-grid__product-image img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.wc-block-grid__product:hover .wc-block-grid__product-image img { transform:scale(1.045); }
.wc-block-grid__product-title { margin:14px 0 0; font-size:13.5px; font-weight:600; line-height:1.4; color:var(--espresso); }
.wc-block-grid__product-price { margin:4px 0 0; font-size:14px; font-weight:700; color:var(--red); }
.wc-block-grid__product-price .woocommerce-Price-currencySymbol { margin-right:2px; }
.wc-block-grid__product-add-to-cart { margin-top:auto; padding-top:14px; }
.wc-block-grid__product-add-to-cart .wp-block-button__link {
  display:flex; align-items:center; justify-content:center; width:100%;
  padding:13px 16px; border:1px solid var(--red); border-radius:99px;
  background:transparent; color:var(--red);
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover { background:var(--red); color:var(--cream); }

/* ---------- Formulieren ---------- */
/* Het honeypot-veld moet voor mensen onzichtbaar zijn maar voor een bot gewoon
   invulbaar; display:none zou het door sommige bots laten overslaan. */
.nadie-honeypot { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }

.formulier-melding {
  margin:0 0 22px; padding:14px 16px; border-left:4px solid var(--red); border-radius:4px;
  background:var(--pink); color:var(--espresso); font-size:13.5px; line-height:1.55;
}
.formulier-melding.is-gelukt { border-left-color:var(--green); background:color-mix(in srgb, var(--green) 40%, var(--zand)); }

.nadie-contact { max-width:560px; }
.nadie-contact .formulier-veld { display:grid; gap:7px; margin:0 0 18px; }
.nadie-contact label { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.nadie-contact textarea { resize:vertical; min-height:150px; }
.nadie-contact .button { border-radius:99px; }

/* In de footer een compacte regel: veld en knop tegen elkaar aan. */
.nadie-nieuwsbrief form { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.nadie-nieuwsbrief input[type=email] {
  flex:1 1 150px; min-width:0; width:auto; padding:11px 14px; border:1px solid rgba(64,53,47,.4);
  border-radius:99px; background:transparent; color:inherit; font-size:12.5px;
}
.nadie-nieuwsbrief input[type=email]::placeholder { color:inherit; opacity:.55; }
.nadie-nieuwsbrief button {
  flex:0 0 auto; padding:11px 20px; border:1px solid var(--espresso); border-radius:99px;
  background:var(--espresso); color:var(--zand); cursor:pointer;
  font-family:inherit; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  transition:background .2s ease, color .2s ease;
}
.nadie-nieuwsbrief button:hover { background:var(--red); border-color:var(--red); color:var(--cream); }
.nadie-nieuwsbrief .formulier-melding { margin:14px 0 0; padding:10px 13px; font-size:12.5px; }

/* ---------- Responsief ---------- */
@media (max-width:1180px) {
  .footer-main { grid-template-columns:1fr 1fr 1fr; }
  .footer-brand { grid-column:1 / -1; }
}
@media (max-width:1024px) {
  .shop-hero { grid-template-columns:1fr; height:auto; padding:clamp(22px,3.4vw,34px) 4.5vw 0; gap:22px; }
  .shop-hero-copy { padding:0; }
  .shop-hero-media { height:clamp(210px,34vw,300px); margin-inline:-4.5vw; }
  .shop-hero-media > img {
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 22%);
    mask-image:linear-gradient(to bottom, transparent 0, #000 22%);
  }
  .hero-mark { left:clamp(10px,3vw,26px); }
  .shop-layout { grid-template-columns:1fr; }
  .shop-sidebar { position:static; }
  .category-list { display:flex; flex-wrap:wrap; gap:8px; }
  .category-list a { border:1px solid rgba(64,53,47,.18); border-radius:99px; padding:9px 15px; font-size:12.5px; }
  .category-list .doodle-icon { display:none; }
  /* Pillen op een rij: subcategorieen doen gewoon mee in plaats van ingesprongen
     op een eigen regel. display:contents haalt de tussenliggende li en ul uit
     de opmaak weg, zodat alle links directe items van dezelfde flexrij worden. */
  .category-list > li,
  .category-children,
  .category-children > li { display:contents; }
  .category-children { margin:0; padding:0; border-left:0; }
  .sidebar-mark { display:none; }
  .related .products { grid-template-columns:repeat(3,1fr); }
  .collection .products { grid-template-columns:repeat(3,1fr); }
  .insta-strip-grid { grid-template-columns:repeat(4,1fr); }
  .promo-band { grid-template-columns:1fr; padding:0 0 clamp(24px,4vw,36px); }
  .promo-copy { padding:clamp(24px,4vw,34px) 5vw 0; }
  .promo-sticker { margin:20px 5vw 0; }
}
@media (max-width:900px) {
  .site-header.is-solid .main-nav { display:none; }
  .site-header.is-solid .main-nav.is-open {
    display:block; position:absolute; z-index:70; top:100%; left:0; right:0;
    padding:22px 4.5vw; background:var(--espresso); color:var(--cream);
  }
  .site-header.is-solid .main-nav.is-open ul { flex-direction:column; align-items:flex-start; gap:16px; }
  /* Uitgeklapt menu op de telefoon: geen zwevend paneel maar ingesprongen.
     Het uitgelichte blok blijft daar weg — dat kost alleen ruimte. */
  .main-nav.is-open .mega-menu {
    position:static; opacity:1; visibility:visible; transform:none;
    display:block; padding:0; margin:14px 0 0 16px; border:0; border-left:1px solid rgba(255,250,242,.28);
    border-radius:0; background:none; color:inherit; box-shadow:none;
  }
  .main-nav.is-open ul.sub-menu { gap:12px; padding-left:14px; }
  .main-nav.is-open ul.sub-menu li + li { border-top:0; }
  .main-nav.is-open ul.sub-menu a { padding:0; font-size:12px; justify-content:flex-start; }
  .main-nav.is-open ul.sub-menu a::after { display:none; }
  .main-nav.is-open ul.sub-menu a:hover { color:var(--yellow); }
  .main-nav.is-open .mega-intro,
  .main-nav.is-open .mega-media { display:none; }
  .main-nav.is-open .menu-item-has-children > a { margin:0; padding:0; background:none; }
  .main-nav.is-open .menu-item-has-children > a::before { display:none; }
  .site-header.is-solid .main-nav.is-open a::after { display:none; }
  .site-header.is-solid .main-nav.is-open a:hover { color:var(--yellow); }
  .menu-toggle { display:block; width:36px; height:36px; padding:0; }
  .menu-toggle-bars { display:grid; gap:4px; justify-items:center; }
  .menu-toggle-bars i { display:block; width:18px; height:1.6px; background:currentColor; }
  .story-band { grid-template-columns:1fr; }
  .story-media { min-height:240px; }
}
@media (max-width:760px) {
  /* Drie kolommen blijven, maar alleen de titels: met de onderregel erbij
     wordt het hier een muur van tekst. Icoon boven de titel, want naast
     elkaar past niet in een derde van een telefoonscherm. */
  .usp-strip { padding:16px 26px; }
  .usp-strip ul { grid-template-columns:repeat(3,1fr); gap:0; }
  .usp-strip li { flex-direction:column; align-items:center; gap:7px; padding:0 8px; text-align:center; }
  .usp-strip li:first-child { padding-left:8px; }
  .usp-strip .doodle-icon { width:19px; height:19px; }
  .usp-strip strong { font-size:9px; letter-spacing:.1em; line-height:1.3; }
  .usp-strip .usp-sub { display:none; }

  .category-row { grid-template-columns:repeat(2,1fr); padding-inline:26px; }
  /* De tekstegel moet binnen dezelfde hoogte blijven als de categorietegels
     ernaast. Op een smal scherm is de cel maar zo'n 150px breed; met de
     bureaubladmaten paste de tekst daar niet in en rekte deze ene cel de hele
     rij op, waardoor de bovenste rij hoger werd dan die eronder. Kleinere
     letters en afbreekstreepjes houden het binnen dezelfde verhouding. */
  .category-note { aspect-ratio:.86; gap:12px; padding:15px; }
  .category-note p { font-size:14px; -webkit-hyphens:auto; hyphens:auto; }
  .category-note a { padding:9px 13px; font-size:9px; letter-spacing:.1em; }
  .insta-strip { padding-inline:26px; }
  /* Twee kolommen: de kop en de grote tegel gaan over de volle breedte, de
     grote tegel als liggende band in plaats van over twee rijen — twee staande
     rijen hoog zou op een telefoon een half scherm vullen. */
  .insta-strip-grid { grid-template-columns:repeat(2,1fr); }
  .insta-strip-head { grid-column:1/-1; }
  .insta-groot { grid-column:1/-1; grid-row:span 1; aspect-ratio:1.25; }
  .shop-content .products, .related .products { grid-template-columns:repeat(2,1fr); gap:14px; }
  /* De collectie op de voorpagina schakelt mee met de winkel: twee per regel,
     een per regel maakt de voorpagina eindeloos lang op een telefoon. De
     kaarten hebben zelf 10px lucht aan de zijkant; die trekken we hier van het
     raster af, anders staan de foto's 10px naar binnen ten opzichte van de kop
     van het blok en is de ruimte tussen de kolommen breder dan de marge naar
     de schermrand. */
  .collection { padding-inline:20px; }
  .collection .products { grid-template-columns:repeat(2,1fr); gap:14px; }
  .collection .products .product { padding-inline:0; }
  .wc-block-grid__products { grid-template-columns:repeat(2,1fr); gap:14px; }
  .shop-hero { padding:22px 20px 0; }
  .shop-hero-media { margin-inline:-20px; }
  .hero-mark { width:86px; left:14px; }
  .single-product-layout .product_title { font-size:34px; }
  .single-product-layout form.cart { flex-wrap:nowrap; }
  .story-band { margin-inline:-20px; }
  .breadcrumb-standalone { padding:18px 26px 16px; }
  .breadcrumb-standalone.is-archive { padding:18px 26px 0; }
  .site-search, .wishlist-panel { right:20px; }
  .footer-main { grid-template-columns:1fr 1fr; padding:38px 20px 30px; }
  .footer-base { padding:14px 20px; }
}
@media (max-width:700px) {
  .site-header.is-solid { padding:12px 20px; }
  .site-header.is-solid .wordmark { width:98px; }
  .header-tools { gap:6px; }
  .shop-layout { padding-top:22px; }
  /* De kaart houdt zijn eigen lucht; kleiner maken drukte de foto tegen
     de rand van de kaart aan. */
  .products .product { padding:10px 10px 14px; }
  .product-media { aspect-ratio:1; }
  /* Naam links, prijs rechts, op een smal scherm zonder dat ze elkaar raken.
     minmax(0,1fr) laat de naamkolom krimpen — een `1fr`-kolom weigert dat uit
     zichzelf zodra de inhoud breder is — terwijl de prijskolom `auto` blijft en
     dus altijd zijn volle breedte houdt. De naam breekt af binnen zijn eigen
     kolom en krijgt hoogstens twee regels.

     Woorden blijven heel: `overflow-wrap:normal` zet het afbreken midden in
     een woord uit, zodat een lang woord op een eigen regel begint. Past het
     dan nog niet in de kolom, dan snijdt `overflow:hidden` het af bij de rand
     — het loopt dus nooit tot over de prijs. */
  .product-info { grid-template-columns:minmax(0,1fr) auto; gap:4px 8px; }
  .product-heading { min-width:0; }
  .product-name { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:normal; word-break:normal; }
  .product-info .price { flex-shrink:0; white-space:nowrap; }
  .product-info .price { font-size:13px; }
  .products .button { min-width:0; padding:12px 10px; font-size:9.5px; letter-spacing:.1em; overflow-wrap:break-word; }
}
@media (prefers-reduced-motion:reduce) {
  .product:hover .product-media img, .wish-toggle:hover, .nadie-swatches button:hover, .text-arrow:hover .doodle-icon { transform:none; }
  .product-media img, .wish-toggle, .nadie-swatches button, .doodle-icon { transition:none; }
}