/* ===================================================================
   Lacque Supply — Design System basisstijlen
   Gebruikt op elke pagina. Wijzigingen hier werken site-breed door.
   Zie /assets/css/pages/*.css voor stijlen die maar op één
   paginatype van toepassing zijn.
=================================================================== */

:root{
  --bg:#F8F5F2;
  --accent:#D8B4A0;
  --ink:#2E2A27;
  --light:#EDE7E2;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
/* Vangnet tegen horizontaal scrollen op smalle schermen (bv. door een te
   lange aankondigingsbalk-tekst) — content wordt afgekapt i.p.v. de hele
   pagina breder te maken dan de viewport. */
body{ max-width:100%; overflow-x:hidden; }

/* Merk-logo's (vervangen de typografische naam waar een echt logobestand is
   ingesteld). Losse handgeschreven klassen i.p.v. Tailwind-utility's, omdat
   het gecompileerde tailwind.css bestand alleen de klassen bevat die al bij
   de eerste build gebruikt werden — nieuwe combinaties zoals "h-7" of
   "object-contain" hebben anders geen enkel effect. */
.brand-logo-img{ height:40px; width:auto; max-width:170px; object-fit:contain; display:inline-block; vertical-align:middle; }
/* Homepage-sectie "Merken die wij vertegenwoordigen": logo iets groter binnen het vakje, zodat er minder witruimte omheen overblijft. Alleen hier, andere plekken (productkaarten/paginas) blijven ongewijzigd. */
#merken .brand-logo-img{ height:56px; max-width:230px; }
#merken .brand-logo-img--touch{ height:42px; }
#merken .brand-logo-img--heylove{ height:64px; }
.brand-logo-img-md{ height:20px; width:auto; max-width:140px; object-fit:contain; display:inline-block; vertical-align:middle; }
.brand-logo-img-sm{ height:16px; width:auto; max-width:120px; object-fit:contain; display:inline-block; vertical-align:middle; }

/* HEYLOVE-banner op de homepage (tussen Merken en de 4-koppen-sectie).
   Handgeschreven i.p.v. Tailwind-utility's om dezelfde reden als hierboven. */
.heylove-banner-section{ padding-top:4rem; padding-bottom:4rem; }
@media(min-width:1024px){ .heylove-banner-section{ padding-top:5rem; padding-bottom:5rem; } }
.heylove-banner{ position:relative; display:block; overflow:hidden; border-radius:2rem; height:220px; }
@media(min-width:640px){ .heylove-banner{ height:320px; } }
@media(min-width:1024px){ .heylove-banner{ height:420px; } }
.heylove-banner img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; }
.heylove-banner:hover img{ transform:scale(1.03); }
.heylove-banner-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(46,42,39,.35), rgba(46,42,39,0) 60%); }
.heylove-banner-caption{ position:absolute; left:1.5rem; bottom:1.5rem; }
@media(min-width:1024px){ .heylove-banner-caption{ left:2.5rem; bottom:2rem; } }

/* Shop-grid: 3 kolommen i.p.v. 2 vanaf het punt waar de filter-sidebar
   verschijnt (1024px), i.p.v. pas vanaf 1280px. #product-grid (ID) wint
   altijd van de Tailwind-klassen hierboven, ongeacht laadvolgorde. */
@media(min-width:1024px){ #product-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* Sfeerbeeld op de individuele merkpagina: compacter dan voorheen (was tot
   500px hoog + 96px onderpadding, wat op mobiel/tablet als "te veel wit"
   voor de tekst aanvoelde). */
.brand-hero-photo{ height:200px; }
@media(min-width:640px){ .brand-hero-photo{ height:260px; } }
@media(min-width:1024px){ .brand-hero-photo{ height:320px; } }

/* Footer: social-icoon en "veilig betalen"-badges. */
.footer-social-icon{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; border:1px solid rgba(46,42,39,.15); color:rgba(46,42,39,.65); transition:border-color .2s ease, color .2s ease; }
.footer-social-icon:hover{ border-color:#D8B4A0; color:#2E2A27; }
.footer-payment-badge{ display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 14px; border-radius:8px; border:1px solid rgba(46,42,39,.12); background:#F8F5F2; font-size:12px; letter-spacing:.02em; color:rgba(46,42,39,.65); }
body, body.woocommerce-checkout, body.woocommerce-cart, body.woocommerce-account, body.woocommerce-page{
  background:var(--bg) !important; color:var(--ink); font-family:'Manrope',sans-serif;
}
/* Kadence geeft de hoofdinhoud standaard een eigen (witte) achtergrondkaart
   los van de paginabuitenkant (klasse "content-bg" op het <article>-element,
   en de omliggende site-main/content-container). Dat overschrijft de crème
   kleur precies in het midden — hieronder uitgeschakeld zodat de hele
   pagina, niet alleen de rand, crème is. */
.content-bg, #main, .site-main, .content-container, .entry-content-wrap,
article.content-bg, .entry.content-bg{
  background:transparent !important; box-shadow:none !important;
}
.serif{ font-family:'Fraunces',serif; }
.eyebrow{ letter-spacing:.24em; font-size:11px; text-transform:uppercase; }

/* unify random stock photography into one warm, editorial tone */
.photo{ filter:sepia(.16) saturate(1.05) brightness(1.02) contrast(.96); }

/* scroll reveal */
[data-reveal]{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

.rule{ height:1px; background:linear-gradient(90deg, var(--accent), transparent 75%); }

.underline-link{ position:relative; }
.underline-link::after{
  content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.16,1,.3,1);
}
.underline-link:hover::after{ transform:scaleX(1); }

.focus-ring:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

.brand-logo{ font-family:'Fraunces',serif; letter-spacing:.02em; }
.chip{ transition:background .3s ease, color .3s ease, border-color .3s ease; }
.chip-row{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to right, black calc(100% - 28px), transparent 100%); mask-image:linear-gradient(to right, black calc(100% - 28px), transparent 100%); }
.chip-row::-webkit-scrollbar{ display:none; }

/* productkaart — homepage, shop, merken, nieuw, sale, favorieten, recent bekeken */
.pcard .quick-add{ opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
.pcard:focus-within .quick-add{ opacity:1; transform:translateY(0); }
.pcard:hover .quick-add{ opacity:1; transform:translateY(0); }
/* touchscreens (telefoon/tablet/touch-laptop): knop altijd tonen */
/* touchscreens (telefoon/tablet): compact rond winkelmand-icoon rechtsonder i.p.v. brede knop */
@media (hover: none) and (max-width: 1024px){
  .pcard .quick-add{ opacity:1; transform:none; left:auto; right:.6rem; bottom:.6rem; }
  .pcard .quick-add .js-quick-add{ width:42px; height:42px; padding:0; font-size:0; line-height:0; color:transparent; border-radius:9999px; background:#2E2A27 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F5F2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 7h12l-1 13H7L6 7z'/%3E%3Cpath d='M9 7V6a3 3 0 0 1 6 0v1'/%3E%3Cpath d='M12 11v5M9.5 13.5h5'/%3E%3C/svg%3E") center/21px no-repeat; box-shadow:0 4px 14px rgba(46,42,39,.18); }
}
.pcard .pimg{ transition:transform .8s cubic-bezier(.16,1,.3,1); }
@media (hover: hover){
	.pcard:hover .pimg{ transform:scale(1.045); }
}

/* Kadence (hoofdthema) verandert de linkkleur bij :hover op ALLE links (a:hover, a:focus, a:active
   in global.min.css). Op iOS Safari zorgt zo'n hover-stijl ervoor dat je 2x moet tikken op een link
   voordat hij echt opent (1e tik = hover simuleren). Op apparaten zonder muis neutraliseren we die
   hover-kleur hier zodat 1 tik weer volstaat, sitebreed. */
@media (hover: none){
	body a:hover{ color: inherit; }
	/* Dezelfde 2-tikken-op-Safari kwestie geldt ook voor knoppen met een eigen :hover-stijl
	   (bv. de incl./excl. btw-knop) -- Kadence verandert daar kleur/achtergrond/schaduw bij
	   hover. Hier specifiek teruggezet naar de eigen normale (niet-hover) staat. */
	body .js-btw-toggle:hover{ color: rgba(46,42,39,.75); background: transparent; box-shadow: none; }
}

/* Actieve status van de incl./excl. btw-knop -- werkt via aria-pressed (JS zet dit al),
   dus onafhankelijk van hover/tap-gedrag en identiek op alle apparaten. Zelfde stijl als
   de actieve filter-chip elders op de site (donkere vulling). */
.js-btw-toggle[aria-pressed="true"]{
	background:#2E2A27;
	border-color:#2E2A27;
	color:#F8F5F2;
}
.js-btw-toggle[aria-pressed="false"]{
	background:#D8B4A0;
	border-color:#D8B4A0;
	color:#2E2A27;
}

/* zoekoverlay */
#search-overlay{ opacity:0; visibility:hidden; transition:opacity .35s ease; }
#search-overlay.open{ opacity:1; visibility:visible; }
#search-overlay .search-panel{ transform:translateY(-16px); transition:transform .4s cubic-bezier(.16,1,.3,1); }
#search-overlay.open .search-panel{ transform:translateY(0); }

/* mega menu (Shop) */
.mega-menu{
  z-index:50;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translate(0,6px);
  transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .4s cubic-bezier(.16,1,.3,1), visibility .4s;
}
#shop-menu-wrap:hover .mega-menu,
.mega-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translate(0,0); }
#shop-menu-wrap:hover #shop-chevron,
#shop-trigger[aria-expanded="true"] #shop-chevron{ transform:rotate(180deg); }

/* mobiel navigatiemenu — lade, zelfde mechaniek als mobiele filters op Shop */
#mobile-menu-scrim{ opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s; }
#mobile-menu-scrim.open{ opacity:1; visibility:visible; }
#mobile-menu{ transform:translateX(-100%); transition:transform .45s cubic-bezier(.16,1,.3,1); }
#mobile-menu.open{ transform:translateX(0); }

/* onderlijnde formuliervelden — Checkout, Mijn account, Contact */
.field{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(46,42,39,.22);
  padding:12px 2px; font-size:14px; font-family:'Manrope',sans-serif; color:var(--ink);
  transition:border-color .3s ease;
}
.field:focus{ outline:none; border-bottom-color:var(--ink); }
.field::placeholder{ color:rgba(46,42,39,.35); }
.field-label{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(46,42,39,.45);
  display:block; margin-bottom:6px;
}

/* rustige uitklap-animatie — kortingscode, afwijkend afleveradres, wachtwoord wijzigen, FAQ, filters */
.reveal-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1); }
.reveal-panel.open{ grid-template-rows:1fr; }
.reveal-panel-inner{ overflow:hidden; }

/* accordion-trigger (+  →  ×) — Shop-filters, FAQ */
.acc-trigger{ transition:opacity .25s ease; }
.acc-trigger:hover{ opacity:.7; }
.acc-icon{ transition:transform .35s cubic-bezier(.16,1,.3,1); color:rgba(46,42,39,.4); }
.acc-trigger[aria-expanded="true"] .acc-icon{ transform:rotate(45deg); }

/* dunne-lijn checkbox — Shop-filters, Checkout (afwijkend afleveradres) */
.toggle-check{
  appearance:none; -webkit-appearance:none;
  width:15px; height:15px; border:1px solid rgba(46,42,39,.3);
  border-radius:2px; position:relative; cursor:pointer; shrink:0;
  transition:border-color .25s ease, background .25s ease;
}
.toggle-check:checked{ background:var(--ink); border-color:var(--ink); }
.toggle-check:checked::after{
  content:""; position:absolute; left:4px; top:1px;
  width:4px; height:8px; border:solid var(--bg);
  border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
}
.filter-row{ transition:opacity .25s ease; }
.filter-row:hover{ opacity:.7; }

/* hoeveelheid-stepper — Productpagina, Winkelwagen (afmetingen per pagina, zie pages/*.css) */
.qty-btn{
  display:flex; align-items:center; justify-content:center;
  color:rgba(46,42,39,.6); transition:color .25s ease, background .25s ease;
}
.qty-btn:hover{ color:var(--ink); background:rgba(46,42,39,.04); }
.qty-input{
  text-align:center; background:transparent;
  font-family:'Manrope',sans-serif; font-size:13px; -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* voorraad-/bestelstatus-stipje — Productpagina, Mijn account */
.stock-dot{ width:6px; height:6px; border-radius:50%; display:inline-block; }

/* Juridische/tekstuele pagina's (Privacy, Voorwaarden, Levering & retour) —
   stylet de output van the_content() zodat bewerkbare WordPress-inhoud
   dezelfde typografie krijgt als de rest van het Design System. */
.legal-content{ display:flex; flex-direction:column; gap:40px; max-width:42rem; }
.legal-content h2{ font-family:'Fraunces',serif; font-size:20px; margin-bottom:16px; font-weight:400; }
.legal-content p{ color:rgba(46,42,39,.7); line-height:1.7; }
.legal-content a{ text-decoration:underline; text-underline-offset:3px; }
.legal-content ul, .legal-content ol{ color:rgba(46,42,39,.7); line-height:1.7; padding-left:1.25em; }


/* Incl./excl. btw-prijstoggle — standaard (geen JS/geen keuze) altijd
   incl. btw tonen, want dat is verplicht voor consumenten. Alleen als
   de bezoeker bewust wisselt (en dit onthouden via localStorage) tonen
   we excl. btw i.p.v. incl. btw. Zie header.php (schakelaar + anti-
   flikker-inline-script) en assets/js/main.js (klik-handler). */
.lacque-price .price-excl{ display:none; }
body.price-mode-excl .lacque-price .price-incl{ display:none; }
body.price-mode-excl .lacque-price .price-excl{ display:block; }
/* Terug naar CSS-cascade i.p.v. JS innerHTML-swap voor de prijs -- betrouwbaarder gebleken. */
/* De incl./excl. btw-toggle wordt sinds kort volledig door assets/js/main.js geregeld
   (een zichtbaar element waarvan de TEKST wisselt, i.p.v. twee elementen die om en om
   verborgen worden). De regel die .price-incl verborg op basis van de body-class is
   daarom verwijderd -- die botste ermee en zorgde dat er bij "excl." geen prijs meer
   zichtbaar was. .price-excl blijft standaard verborgen (regel hierboven). */
.border-\[\#2E2A27\]\/8{ border-color:rgba(46,42,39,.08); }
@media(min-width:1024px){ .lg\:pb-12{ padding-bottom:3rem; } }

/* Afrekenen - "Jouw bestelling"-kolom kreeg via een niet te achterhalen
   regel (waarschijnlijk uit WooCommerce/Kadence's eigen checkout-CSS,
   bedoeld voor hun eigen .col2-set-layout) een float:left, waardoor het
   element nog maar de helft van zijn grid-kolombreedte innam en de tekst
   teken-voor-teken moest afbreken. Deze regel overschrijft dat expliciet. */
#order_review{ float:none !important; width:100% !important; }

/* Mijn account - bestellingenlijst: "Bestelling #123" kreeg in de smalle
   accountkolom (naast het account-menu) te weinig ruimte en brak
   woord-voor-woord af. Deze twee Tailwind-klassen ontbraken in de
   gecompileerde tailwind.css (zelfde bekende oorzaak als eerder bij
   border-[#2E2A27]/8 en lg:pb-12). */
.min-w-\[130px\]{ min-width:130px; }
@media(min-width:640px){ .sm\:flex-wrap{ flex-wrap:wrap; } }

/* Proactieve controle (script check-tailwind-classes.py) vond deze 5
   klassen die WEL in de thema-bestanden gebruikt worden maar NIET in het
   gecompileerde tailwind.css zaten - zelfde bekende oorzaak als eerder.
   Dit voorkomt dat ze later als (weer een nieuwe) zichtbare bug opduiken:
   - border-[#2E2A27]/12 en /18: randen om accountpagina-tegels en zoekbalk
   - hover:text-[#6E362C]: hover-kleur op links (contactpagina, verlanglijst)
   - px-3 / py-1.5: padding op de BTW incl/excl-knop in de header */
.border-\[\#2E2A27\]\/12{ border-color: rgba(46,42,39,0.12) !important; }
.border-\[\#2E2A27\]\/18{ border-color: rgba(46,42,39,0.18) !important; }
.hover\:text-\[\#6E362C\]:hover{ color:#6E362C !important; }
.px-3{ padding-left:0.75rem !important; padding-right:0.75rem !important; }
.py-1\.5{ padding-top:0.375rem !important; padding-bottom:0.375rem !important; }

/* Shop-pagina mobiel: 2 producten naast elkaar i.p.v. 1 (verzoek Said).
   grid-cols-2 (zonder voorvoegsel) bestond al toevallig in tailwind.css,
   maar gap-x-4/gap-y-10 (kleinere marge voor de mobiele 2-koloms-weergave)
   niet - zelfde bekende oorzaak, hier los toegevoegd. */
.gap-x-4{ -moz-column-gap:1rem !important; column-gap:1rem !important; }
.gap-y-10{ row-gap:2.5rem !important; }

/* Afrekenen mobiel: "Jouw bestelling"-tabel op smalle schermen.
   Product-naam kreeg te weinig ruimte (kolommen verdeelden zich 50/50,
   ook al is de prijs-kolom veel smaller nodig), waardoor productnamen
   over 3 regels braken. De Totaal-regel ("inclusief X BTW") werd zelfs
   afgekapt buiten beeld. Verhouding 68/32 geeft de naam meer ruimte;
   subtotaal/verzending/totaal-regels mogen weer normaal afbreken i.p.v.
   vast op 1 regel te blijven staan. #order_review ervoor nodig omdat
   een andere, specifiekere WooCommerce-regel anders wint. */
#order_review table.woocommerce-checkout-review-order-table{ table-layout:fixed !important; width:100% !important; }
#order_review table.woocommerce-checkout-review-order-table .product-name{ width:68% !important; }
#order_review table.woocommerce-checkout-review-order-table .product-total{ width:32% !important; text-align:right !important; }
#order_review table.woocommerce-checkout-review-order-table .cart-subtotal td:last-child,
#order_review table.woocommerce-checkout-review-order-table .shipping td:last-child,
#order_review table.woocommerce-checkout-review-order-table .order-total td:last-child{ white-space:normal !important; }


/* Opmaak voor rijke productbeschrijvingen (koppen, opsommingen, genummerde stappen) --
   Tailwind's reset haalt standaard marges en opsommingstekens weg, dus die herstellen
   we hier specifiek binnen de productbeschrijving op de productpagina. */
.product-description-content{ font-size:14px; }
.product-description-content h2,
.product-description-content h3,
.product-description-content h4{
	font-weight:600;
	color:#2E2A27;
	margin-top:1.5em;
	margin-bottom:0.5em;
}
.product-description-content h3{ font-size:1.1em; }
.product-description-content > *:first-child{ margin-top:0; }
.product-description-content p{ margin-bottom:1em; }
.product-description-content ul,
.product-description-content ol{
	margin:0 0 1em 0;
	padding-left:1.25em;
}
.product-description-content ul{ list-style:disc; }
.product-description-content ol{ list-style:decimal; }
.product-description-content li{ margin-bottom:0.35em; }
.product-description-content li::marker{ color:#2E2A27; }