/*
Theme Name: Slaapluxe
Theme URI: https://slaapluxe.nl/
Author: Slaapluxe
Description: Blokthema voor de webshop van Slaapluxe, in de ontwerprichting Warm sereen. Creme, zand en taupe, Playfair Display en Montserrat lokaal geladen, en WooCommerce-sjablonen die bij het ontwerp passen.
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: slaapluxe
Tags: full-site-editing, block-patterns, e-commerce, one-column
*/

/* Overgezet uit de demosite (site/assets/css/style.css). Tokens en regels komen uit de
   klant-skill `klant-slaapluxe`. Nooit nieuwe kleuren toevoegen; gebruik de variabelen. */

:root {
  --creme: #F5F1EA;
  --zand: #E5DBC9;
  --taupe: #A89880;
  --taupe-tekst: #6d5f47;
  --warmzwart: #2B2620;
  --wit: #FFFFFF;
  --r-kaart: 8px;
  --r-knop: 4px;
  --knop-h: 50px;
  --vlot: cubic-bezier(.22, .61, .36, 1);
  --schaduw: 0 1px 3px rgba(43, 38, 32, .08);
  --schaduw-l: 0 10px 30px rgba(43, 38, 32, .12);
  --kop-h: 76px;
}

/* ---------- basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kop-h) + 12px); }
body {
  margin: 0;
  background: var(--creme);
  color: var(--warmzwart);
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; line-height: 1.15; letter-spacing: .01em; margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sectie { padding: 96px 0; }
.sectie--zand { background: var(--zand); }
.sectiekop { font-size: 36px; margin-bottom: 12px; }
.sectie-intro { max-width: 560px; color: var(--taupe-tekst); margin: 0 0 40px; }

/* ---------- usp-balk ---------- */
.uspbalk { background: var(--zand); font-size: 13.5px; }
.uspbalk .wrap { display: flex; justify-content: center; gap: 28px; padding-top: 8px; padding-bottom: 8px; }
/* De blokeditor maakt hier <p>'s van; die mogen geen eigen marge houden. */
.uspbalk .wrap > * { white-space: nowrap; margin: 0; }

/* ---------- kopbalk ---------- */
.kop {
  position: sticky; top: 0; z-index: 40;
  background: var(--creme);
  transition: box-shadow .25s var(--vlot);
}
.kop.is-vast { box-shadow: var(--schaduw-l); }
.kop .wrap { display: flex; align-items: center; gap: 28px; height: var(--kop-h); }
.merk { display: flex; align-items: center; text-decoration: none; }
.merk img { height: 56px; width: auto; display: block; }
.kop__acties { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.icoonknop {
  background: none; border: 0; padding: 10px; border-radius: var(--r-knop);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  color: var(--warmzwart);
}
.icoonknop svg { width: 22px; height: 22px; }

/* navigatieblok in het ontwerp trekken */
.kop .wp-block-navigation { font-size: 15px; }
.kop .wp-block-navigation .wp-block-navigation-item__content {
  text-decoration: none; position: relative; padding: 6px 0;
}
.kop .wp-block-navigation .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: var(--taupe); transition: width .25s var(--vlot);
}
.kop .wp-block-navigation .current-menu-item .wp-block-navigation-item__content::after { width: 100%; }
.kop .wp-block-navigation__submenu-container {
  background: var(--wit); border: 0; border-radius: var(--r-kaart);
  box-shadow: var(--schaduw-l); padding: 10px 0; min-width: 240px;
}
.kop .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 9px 22px; }
.kop .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { content: none; }

/* het uitklapmenu van core op mobiel */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--creme) !important;
  padding: 24px !important;
  color: var(--warmzwart);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-family: 'Playfair Display', Georgia, serif; font-size: 28px; padding: 10px 0;
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open { color: var(--warmzwart); }

/* ---------- hero ---------- */
.hero { position: relative; }
/* De blokeditor zet de klasse op de <figure>, niet op de <img>. */
.hero__beeld { margin: 0; }
.hero__beeld img { aspect-ratio: 16 / 7; min-height: 420px; max-height: 640px; width: 100%; object-fit: cover; }
.hero__vlak {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(43, 38, 32, .45), transparent);
  padding: 120px 0 48px;
}
.hero__vlak .wrap { color: var(--wit); }
.hero__kop { font-size: 54px; max-width: 560px; }
.hero__sub { max-width: 440px; margin: 12px 0 24px; font-size: 17px; }

/* gecentreerde hero met wisselende slogan */
.hero__vlak--midden { padding-top: 150px; background: linear-gradient(to top, rgba(43, 38, 32, .55), rgba(43, 38, 32, 0)); }
.hero__vlak--midden .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__vlak--midden .hero__kop { max-width: 820px; display: grid; }
.hero__vlak--midden .hero__sub { max-width: 520px; }

/* De slogan wisselt met CSS, niet met JavaScript: WordPress strookt <script> uit
   blokinhoud, en deze variant overleeft plugin-updates. Alle spans liggen in dezelfde
   grid-cel, zodat de kop de hoogte van de langste slogan houdt en er niets verspringt.
   Pas je het aantal slogans aan, dan moeten drie dingen mee: de animation-duration
   (aantal x 5s), de delay per nth-child, en de percentages in de keyframes. */
.hero__wissel {
  grid-area: 1 / 1;
  opacity: 0;
  animation: sloganwissel 15s infinite var(--vlot);
}
.hero__wissel:nth-child(1) { animation-delay: 0s; }
.hero__wissel:nth-child(2) { animation-delay: 5s; }
.hero__wissel:nth-child(3) { animation-delay: 10s; }
@keyframes sloganwissel {
  0%    { opacity: 0; }
  4%    { opacity: 1; }
  30%   { opacity: 1; }
  35%   { opacity: 0; }
  100%  { opacity: 0; }
}

/* ---------- knoppen ---------- */
.knop, .wp-block-button__link, .wc-block-components-button {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--knop-h); padding: 0 30px;
  background: var(--warmzwart); color: var(--wit);
  border: 1px solid var(--warmzwart); border-radius: var(--r-knop);
  font-size: 15px; font-weight: 500; text-decoration: none;
  transition: transform .2s var(--vlot), box-shadow .2s var(--vlot);
}
.knop--licht { background: var(--wit); color: var(--warmzwart); border-color: var(--wit); }
.knop--rand { background: transparent; color: var(--warmzwart); border-color: var(--warmzwart); }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--warmzwart); }

/* Bij een knop-blok staat de klasse op de wrapper, niet op de link zelf. */
.wp-block-button.knop--licht .wp-block-button__link { background: var(--wit); color: var(--warmzwart); border-color: var(--wit); }
.wp-block-button.knop--rand .wp-block-button__link { background: transparent; color: var(--warmzwart); border-color: var(--warmzwart); }

/* ---------- categorie ---------- */
.cats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.cat { text-decoration: none; display: flex; flex-direction: column; gap: 10px; }
.cat__beeld { border-radius: var(--r-kaart); overflow: hidden; aspect-ratio: 3 / 4; background: var(--zand); }
.cat__beeld img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--vlot); }
.cat__naam { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; text-align: center; }

/* ---------- productkaarten ---------- */
.producten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pk {
  background: var(--wit); border-radius: var(--r-kaart); box-shadow: var(--schaduw);
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  border: 0; text-align: left; color: var(--warmzwart);
  transition: transform .2s var(--vlot), box-shadow .2s var(--vlot);
}
.pk__beeld { border-radius: 5px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--creme); }
.pk__beeld img { width: 100%; height: 100%; object-fit: cover; }
.pk__naam { font-family: 'Playfair Display', Georgia, serif; font-size: 19px; }
.pk__mat { font-size: 13.5px; color: var(--taupe-tekst); }
.pk__voet { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.pk__prijs { font-size: 15px; font-weight: 500; }
a.pk { text-decoration: none; }

/* dezelfde kaartbehandeling voor de WooCommerce-productblokken */
.wc-block-product, .wc-block-grid__product, ul.products li.product {
  background: var(--wit); border-radius: var(--r-kaart); box-shadow: var(--schaduw);
  padding: 12px; text-align: left;
  transition: transform .2s var(--vlot), box-shadow .2s var(--vlot);
}
.wc-block-product img, .wc-block-grid__product-image img, ul.products li.product img {
  border-radius: 5px; aspect-ratio: 1 / 1; object-fit: cover; width: 100%;
}
.wc-block-product .wp-block-post-title,
.wc-block-grid__product-title,
ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Playfair Display', Georgia, serif; font-size: 19px; margin: 8px 0 4px;
}
.wc-block-product .wc-block-components-product-price,
.wc-block-grid__product-price,
ul.products li.product .price {
  font-size: 15px; font-weight: 500; color: var(--warmzwart);
}

/* ---------- materiaal ---------- */
.materiaal { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; }
.materiaal__beeld { border-radius: var(--r-kaart); overflow: hidden; }
.materiaal__beeld img { width: 100%; height: 100%; object-fit: cover; }
.materiaal__tekst { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 24px 0; }
.materiaal__tekst h2 { font-size: 36px; }
.materiaal__punt { display: flex; gap: 12px; align-items: baseline; margin: 0; }
/* Het bolletje is CSS in plaats van een svg, zodat de tekst in de editor
   gewoon een alinea blijft die Eren kan aanpassen. */
.materiaal__punt::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--taupe); flex: none; align-self: center;
}

/* ---------- reviews (voorbeeldweergave tot er echte zijn) ---------- */
.gr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.gr__kaart {
  background: var(--wit); border-radius: var(--r-kaart); box-shadow: var(--schaduw);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.gr__sterren { color: var(--taupe); font-size: 15px; letter-spacing: 2px; }
.gr__balk { height: 10px; border-radius: 999px; background: var(--creme); }
.gr__balk--kort { width: 60%; }
.gr__wie { font-size: 13.5px; color: var(--taupe-tekst); margin-top: 4px; }
.reviews-noot { font-size: 13.5px; color: var(--taupe-tekst); margin-top: 18px; }

/* ---------- nieuwsbrief ---------- */
.nieuwsbrief { background: var(--zand); }
.nieuwsbrief__vlak { max-width: 560px; margin: 0 auto; text-align: center; }
.nieuwsbrief h2 { font-size: 36px; }
.nieuwsbrief p { color: var(--taupe-tekst); margin: 10px 0 26px; }
.nieuwsbrief form { display: flex; gap: 10px; justify-content: center; }
.nieuwsbrief__logo { margin: 0 auto 14px; width: 64px; height: auto; }
.veld {
  height: var(--knop-h); border: 1px solid rgba(43, 38, 32, .25); border-radius: var(--r-knop);
  padding: 0 16px; font: inherit; font-size: 15px; background: var(--wit); color: var(--warmzwart);
  min-width: 0;
}
.nieuwsbrief .veld { flex: 1; max-width: 320px; }
textarea.veld { height: auto; min-height: 130px; padding: 12px 16px; resize: vertical; }
.veld--klein { height: 40px; }

/* ---------- stichting Hart voor Afrika ---------- */
.stichting { background: var(--wit); }
.stichting__vlak { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 640px; margin: 0 auto; }
.stichting__vlak img { width: 220px; height: auto; }
.stichting__vlak h2 { font-size: 36px; }
.stichting__vlak p { color: var(--taupe-tekst); margin: 0; }
.voet__hva { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; font-size: 13px; }
.voet__hva img { width: 150px; height: auto; }

/* ---------- voettekst ---------- */
.voet { background: var(--warmzwart); color: #d9d2c7; font-size: 14px; }
.voet a { color: #f2ede4; text-decoration: none; }
.voet__kolommen { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding: 64px 0 40px; }
.voet h3 { font-size: 16px; color: var(--wit); margin-bottom: 14px; font-family: 'Montserrat', sans-serif; font-weight: 500; }
.voet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.voet__merk { font-family: 'Playfair Display', Georgia, serif; font-size: 22px; color: var(--wit); letter-spacing: .06em; }
.voet__onder { border-top: 1px solid rgba(255, 255, 255, .15); padding: 18px 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.voet__onder > * { margin: 0; }
.voet__beer { margin: 0 auto; padding-top: 48px; }
.voet__beer img { width: 260px; height: auto; margin: 0 auto; }

/* De illustratie staat op elke pagina precies een keer. Heeft een pagina hem al in de
   content staan, dan verbergt deze regel de kopie in de voettekst. Voeg je de
   illustratie aan een nieuwe pagina toe, dan regelt dit zichzelf. */
body:has(.pagina-illustratie) .voet__beer { display: none; }

/* ---------- pagina met illustratie ---------- */
.pagina-illustratie__rij { align-items: start; gap: 32px; }
.pagina-illustratie__rij .wp-block-image { margin: 0; }

/* Zodra de kolommen stapelen staan illustratie en tekst onder elkaar over de volle
   breedte; links uitlijnen laat ze dan los van elkaar ogen. Daarom centreren we ze. */
@media (max-width: 781px) {
  .pagina-illustratie__rij { text-align: center; }
  .pagina-illustratie__rij .wp-block-image img { margin: 0 auto; }
}

/* ---------- pagina- en shopkop ---------- */
.paginakop { padding: 56px 0 8px; }
.paginakop h1 { font-size: 44px; }
.kruimel, .woocommerce-breadcrumb { font-size: 13.5px; color: var(--taupe-tekst); padding-top: 24px; }
.kruimel a, .woocommerce-breadcrumb a { text-decoration: none; }
.shopnoot { font-size: 13.5px; color: var(--taupe-tekst); padding: 26px 0 0; }
.wrap--smal { max-width: 760px; padding-bottom: 96px; }
.wrap--smal h2 { font-size: 24px; margin: 28px 0 8px; }

/* categoriefilters en sorteren van WooCommerce */
.filters { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 24px 0 8px; }
.filters__cats { display: flex; gap: 8px; flex-wrap: wrap; }
/* De knoppen zijn alinea's met een link erin, zodat ze in de editor bewerkbaar blijven.
   Het hele pilletje moet klikbaar zijn, dus de vorm zit op de <a>. */
.filterknop { margin: 0; }
.filterknop a, .wc-block-product-categories-list-item a {
  height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(43, 38, 32, .3); background: transparent; color: var(--warmzwart);
  font-size: 14px; text-decoration: none;
  display: inline-flex; align-items: center;
  transition: background .2s var(--vlot), color .2s var(--vlot);
}
.filterknop.actief a { background: var(--warmzwart); color: var(--wit); border-color: var(--warmzwart); }
.woocommerce-ordering select, .wc-block-components-sort-select__select {
  height: 40px; border: 1px solid rgba(43, 38, 32, .3); border-radius: var(--r-knop);
  background: var(--wit); color: var(--warmzwart); padding: 0 12px; font: inherit; font-size: 14px;
}

/* ---------- winkelwagen (het mini-cart-blok van WooCommerce) ----------
   De demo had een eigen lade rechts in beeld; het mini-cart-blok maakt dezelfde lade,
   dus we geven hem alleen de vormgeving mee. */
.kop__acties .wc-block-mini-cart__button { padding: 10px; border-radius: var(--r-knop); color: var(--warmzwart); }
.kop__acties .wc-block-mini-cart__badge {
  background: var(--warmzwart); color: var(--wit); border-radius: 999px;
  font-size: 11px; min-width: 17px; height: 17px; line-height: 17px;
}
.wc-block-mini-cart__drawer .wc-block-components-drawer {
  background: var(--wit); color: var(--warmzwart); box-shadow: var(--schaduw-l);
}
.wc-block-mini-cart__title { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; }
.wc-block-mini-cart__footer { border-top: 1px solid var(--creme); }
.wc-block-components-product-name { font-size: 14.5px; font-weight: 500; }
.wc-block-components-product-metadata { font-size: 12.5px; color: var(--taupe-tekst); }

/* ---------- productpagina ---------- */
.single-product .entry-summary h1 { font-size: 34px; }
.single-product .price { font-size: 22px; font-weight: 500; }
.woocommerce-product-details__short-description { color: var(--taupe-tekst); }
.variations select, .quantity input {
  height: 44px; border: 1px solid rgba(43, 38, 32, .3); border-radius: var(--r-knop);
  background: var(--wit); color: var(--warmzwart); padding: 0 12px; font: inherit;
}

/* ---------- faq, contact, citaat ---------- */
.citaat {
  margin: 8px 0; padding: 14px 20px; border-left: 3px solid var(--taupe);
  font-family: 'Playfair Display', Georgia, serif; font-size: 19px; font-style: italic;
  color: var(--warmzwart); background: var(--zand); border-radius: 0 var(--r-kaart) var(--r-kaart) 0;
}
.faq { max-width: 760px; }
.faq details { background: var(--wit); border-radius: var(--r-kaart); box-shadow: var(--schaduw); margin-bottom: 12px; }
.faq summary {
  padding: 16px 20px; cursor: pointer; font-weight: 500; font-size: 15.5px;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--taupe); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 20px 16px; margin: 0; color: var(--taupe-tekst); font-size: 15px; }
.contactform { display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.contactform label { font-size: 13.5px; color: var(--taupe-tekst); display: flex; flex-direction: column; gap: 6px; }

/* ---------- verschijnen bij scrollen ---------- */
.ver { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--vlot), transform .5s var(--vlot); }
.ver.zichtbaar { opacity: 1; transform: none; }
html.geen-js .ver { opacity: 1; transform: none; }

/* ---------- hover, alleen met echte muis ---------- */
@media (hover: hover) {
  .kop .wp-block-navigation .wp-block-navigation-item__content:hover::after { width: 100%; }
  .kop .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--creme); }
  .knop:hover, .wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(43, 38, 32, .25); }
  .pk:hover, .wc-block-product:hover, ul.products li.product:hover { transform: translateY(-3px); box-shadow: var(--schaduw-l); }
  .cat:hover .cat__beeld img { transform: scale(1.04); }
  .filterknop:not(.actief) a:hover { background: rgba(43, 38, 32, .06); }
  .icoonknop:hover { background: rgba(43, 38, 32, .06); }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  /* Het navigatieblok klapt in tot een hamburger. Zonder deze twee regels staat die
     pal naast het logo met de iconen ver rechts; nu staan ze samen rechts. */
  .kop .wp-block-navigation { order: 3; }
  .kop__acties { order: 2; margin-left: auto; }
  .producten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .gr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voet__kolommen { grid-template-columns: 1fr 1fr; }
  .hero__kop { font-size: 42px; }
}
@media (max-width: 700px) {
  .sectie { padding: 64px 0; }
  .sectiekop { font-size: 30px; }
  .hero__beeld img { aspect-ratio: 4 / 5; min-height: 0; }
  .hero__kop { font-size: 34px; }
  .hero__vlak { padding-top: 80px; }
  .materiaal { grid-template-columns: 1fr; gap: 20px; }
  .gr { grid-template-columns: 1fr; }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paginakop h1 { font-size: 34px; }
  .nieuwsbrief form { flex-direction: column; align-items: stretch; }
  .nieuwsbrief .veld { max-width: none; }
  .uspbalk .wrap { gap: 4px 14px; font-size: 12.5px; flex-wrap: wrap; }
  .uspbalk span:nth-child(3) { display: none; }
  .voet__beer { width: 200px; }
}
@media (max-width: 420px) {
  .wrap { padding: 0 18px; }
}

/* ---------- beweging uit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .ver { opacity: 1; transform: none; }
  /* zonder animatie blijft alleen de eerste slogan staan */
  .hero__wissel { opacity: 0; }
  .hero__wissel:nth-child(1) { opacity: 1; }
}