/* =========================================================================
   woo.css — WooCommerce en GeneratePress op de tokens van deze site.
   -------------------------------------------------------------------------
   Laadt ná shout.css en site.css. Bevat drie dingen, in deze volgorde:

     1. GeneratePress bijsturen waar zijn eigen wrappers in de weg zitten
     2. de vaste kop (elke pagina behalve de voorpagina, waar de kop over de
        hero zweeft)
     3. WooCommerce' eigen classes op onze componenten zetten

   WooCommerce' stylesheets blijven bewust staan (zie de toelichting in
   inc/woo.php): ze dekken de mand, het afrekenen, de meldingen en de
   accountpagina's, en die uitzetten levert onopgemaakte pagina's op. Hier
   wordt alleen overschreven wat zichtbaar botst.

   DEKKING van dit bestand: winkelarchief, productdetail, winkelmand,
   afrekenen, meldingen, accountpagina's en de vaste kop.
   BUITEN BEREIK: de WooCommerce-blokken (`wp-block-woocommerce-cart` en
   `-checkout`). Die stonden er bij de installatie wél — WooCommerce zet ze
   sinds versie 8 standaard op de mand- en afrekenpagina — en zijn in
   inc/import-producten.php bewust vervangen door de klassieke shortcodes,
   omdat ze hun eigen opmaak meebrengen en 8px buiten het venster liepen.
   Zet iemand een blok-mand terug, dan valt die buiten dit bestand: geen
   regressie, maar onbedekt terrein. Zelfde geldt voor het blok-raster dat
   WooCommerce op een lege mand toont ("New in store"); de regel hieronder
   vangt alleen de overloop af, niet de opmaak.
   ========================================================================= */

/* --- 1. GeneratePress -------------------------------------------------- */

/* GP's paginawrapper mag geen eigen achtergrond of marge toevoegen: de
   secties bepalen hun eigen vlak, van rand tot rand. */
.site.grid-container,
.site-content,
.inside-article,
.entry-content { background: none; }

body .site-content { padding: 0; }

/* GeneratePress' kaartopmaak (`separate-containers`: 40px binnenruimte, 20px
   marge, eigen achtergrond per blok) staat via generate_option_defaults al uit,
   maar een bestaande instelling in de database kan hem terugzetten. Deze regels
   maken dat op de voorpagina en de winkelpagina's onmogelijk — daar lopen de
   vlakken van rand tot rand, gemeten op 1440px in plaats van 1360px. */
/* GeneratePress zet `margin-bottom: 20px` op elk direct kind van .site-main
   (main.min.css: `.page-header,.sidebar .widget,.site-main>*`) en nog eens
   20px rondom .site-main zelf. Bij zeven secties onder elkaar telde dat op:
   gemeten stond de voettekst op y=6719 tegen y=6599 in de opgeschoonde
   referentie — 120px verschil, exact zes keer 20px. De secties in dit ontwerp
   raken elkaar; hun eigen ritme zit in --sm-section-y. */
.home .site-main > *,
.cc-winkelpagina .site-main > * { margin-bottom: 0; }

.home .site-main,
.cc-winkelpagina .site-main,
.home .inside-article,
.cc-winkelpagina .inside-article,
.home .entry-content,
.home .content-area {
  margin: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* Volle breedte voor de voorpagina en alle winkelpagina's.
   ------------------------------------------------------------------------
   Gemeten (meet.js, 1440px, vóór deze regels): `#page.grid-container` was
   1200×5046 op x=120 — GeneratePress' containerbreedte. Daardoor stonden de
   abonnements-, uitgelicht- en nieuwsbriefsectie 120px van beide randen af,
   terwijl ze in de bron van rand tot rand lopen (1440px). De secties bepalen
   hun eigen marge via `--cc-inline`; een container eromheen telt daar bovenop.

   Dit staat in CSS en niet in een GeneratePress-optie omdat de optie in de
   database kan worden teruggezet vanuit de Customizer; deze regels niet. */
.home #page.grid-container,
.cc-winkelpagina #page.grid-container,
.home .site-content,
.cc-winkelpagina .site-content,
.home .content-area,
.cc-winkelpagina .content-area {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

/* GP zet een marge onder .entry-content die onze secties uit elkaar duwt. */
.home .entry-content,
.cc-winkelpagina .entry-content { margin: 0; }

/* --- 2. de vaste kop ---------------------------------------------------
   Op de voorpagina staat de kop absoluut over de hero (site.css). Overal
   elders is er geen hero, dus staat dezelfde kop gewoon in de flow: cream
   vlak, inkt-kleurige tekst, lijn eronder. De maten blijven die van de
   gemeten kop — alleen positie en kleur veranderen. */
.cc-header--vast {
  position: static;
  background: var(--sm-paper);
  color: var(--sm-ink);
  border-bottom: var(--sm-border);
}

/* --- 3. winkelarchief --------------------------------------------------
   Vier kaarten per rij, dezelfde kaartbreedte als de sliders op de
   voorpagina (gemeten: 309/1360 ≈ 22.7%). WooCommerce levert een <ul> met
   floats; die zetten we om naar hetzelfde raster. */
.woocommerce .cc-archief,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(var(--cc-kolommen, 1), minmax(0, 1fr));
  gap: var(--sm-space-6) var(--sm-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 30rem) { .woocommerce ul.products { --cc-kolommen: 2; } }
@media (min-width: 48rem) { .woocommerce ul.products { --cc-kolommen: 3; } }
@media (min-width: 75rem) { .woocommerce ul.products { --cc-kolommen: 4; } }

/* WooCommerce' eigen float-/breedteregels uitschakelen; die vechten met het
   raster hierboven en geven op tablet een halve lege kolom. */
.woocommerce ul.products li.product {
  width: auto;
  float: none;
  margin: 0;
  clear: none;
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after { content: none; }

/* WooCommerce' clearfix op de <ul> zelf (`content:" "; display:table`) is in
   een float-layout onzichtbaar, maar in een grid wordt elk pseudo-element een
   echte cel. Gevolg: de eerste rij begon met een lege kolom en toonde drie
   producten in plaats van vier. Weg ermee — er is hier niets te clearen. */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; display: none; }

/* De kaart zelf komt uit shout.css; alleen het vlak achter de productfoto is
   sitespecifiek (gemeten: productfoto's staan op wit, vierkant vlak). */
.woocommerce ul.products li.product .sm-card__media {
  background: #fff;
  --sm-card-ratio: 1 / 1;
}

/* WooCommerce stijlt de kaarttitel en -prijs met selectors die zwaarder wegen
   dan onze eigen classes (`.woocommerce ul.products li.product .price` telt
   vier delen, `.cc-prijs` één). Daardoor stond de titel op de winkelpagina
   vet en op ~19px terwijl de voorpagina 14px toont, en de prijs idem. Zelfde
   kaart, twee verschillende gezichten — hier rechtgezet met even zware
   selectors in plaats van met !important. */
.woocommerce ul.products li.product .sm-card__title.cc-card__title {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.46px;
  text-transform: none;
  margin: 0;
  padding: 0;
  color: var(--sm-ink);
}
.woocommerce ul.products li.product .sm-price.cc-prijs {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  color: var(--sm-ink);
  margin: 0;
}
.woocommerce ul.products li.product .sm-price.cc-prijs .sm-price__was {
  color: var(--sm-ink-muted);
  text-decoration: line-through;
}
.woocommerce ul.products li.product .sm-price--sale .sm-price__now { color: var(--sm-sale); }
.woocommerce ul.products li.product a img { margin: 0; box-shadow: none; }

.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-notices-wrapper,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce nav.woocommerce-pagination,
.woocommerce .term-description {
  padding-inline: var(--cc-inline);
}

.woocommerce .woocommerce-products-header { padding-top: var(--sm-space-8); }
.woocommerce .woocommerce-products-header__title {
  font-size: 30px;   /* zelfde koptrap als de secties op de voorpagina */
  font-weight: 400;
}
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { font-size: var(--sm-text-sm); color: var(--sm-ink-soft); }

.woocommerce ul.products { padding-inline: var(--cc-inline); padding-bottom: var(--sm-space-9); }

/* --- 4. productdetail --------------------------------------------------- */

.cc-pdp {
  padding: var(--sm-space-8) var(--cc-inline) var(--sm-space-9);
}
/* WooCommerce' woocommerce-layout.css zet `width: 48%; float: left` op beide
   kolommen (selector `.woocommerce div.product div.images`). Dat werkt in hun
   float-layout, maar hier zijn het rastercellen: het beeld werd dan 48% van
   zijn eigen cel, dus 358px in een kolom van 745px (gemeten).

   De eerste poging (`div.product.cc-pdp div.images`, vier classes) hielp niet:
   WooCommerce schrijft dezelfde regel twee keer, en de tweede variant begint
   met `#content` — en dat is precies de id die GeneratePress aan zijn
   inhoudswrapper geeft. Eén id weegt zwaarder dan vier classes. Daarom staat
   `#content` hier ook in, in plaats van naar !important te grijpen. */
.woocommerce div.product.cc-pdp .sm-pdp__media { margin: 0; }
.woocommerce #content div.product.cc-pdp div.images,
.woocommerce #content div.product.cc-pdp div.summary,
.woocommerce #content div.product.cc-pdp .woocommerce-product-gallery,
.woocommerce div.product.cc-pdp div.images,
.woocommerce div.product.cc-pdp div.summary,
.woocommerce div.product.cc-pdp .woocommerce-product-gallery {
  width: 100%;
  float: none;
  margin: 0;
}

.woocommerce div.product h1.product_title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 var(--sm-space-3);
}

/* De tabbladen en het gerelateerde-raster staan binnen `div.product`, dat een
   raster van twee kolommen is (sm-pdp). Zonder deze regel belanden ze naast de
   galerij in kolom 1 in plaats van eronder over de volle breedte. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--sm-ink);
  font-size: 14px;
  letter-spacing: -0.12px;
  text-transform: uppercase;
  margin-bottom: var(--sm-space-5);
}
.woocommerce div.product p.price del { color: var(--sm-ink-muted); }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--sm-sale); }

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--sm-ink-soft);
  margin-bottom: var(--sm-space-5);
}

.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: var(--sm-space-3); align-items: stretch; }
.woocommerce div.product form.cart .quantity { margin: 0; }

/* De aantalkiezer: WooCommerce levert een kaal <input type="number">, wij
   geven het de maten van .sm-qty__input uit shout.css. */
.woocommerce .quantity input.qty {
  width: 4.5rem;
  height: 100%;
  min-height: 2.75rem;
  padding: 0 var(--sm-space-2);
  border: var(--sm-border);
  border-radius: var(--sm-radius-xs);
  background: var(--sm-paper);
  color: inherit;
  font: inherit;
  text-align: center;
}

.woocommerce div.product .product_meta { font-size: var(--sm-text-xs); color: var(--sm-ink-muted); margin-top: var(--sm-space-5); }

/* Tabbladen en gerelateerde producten onder de twee kolommen. Géén eigen
   padding-inline: ze staan binnen .cc-pdp, die de marge al zet — anders telt
   die 40px dubbel. */
.woocommerce div.product .woocommerce-tabs { padding-top: var(--sm-space-7); }
.woocommerce div.product .related.products,
.woocommerce div.product .upsells.products { padding-top: var(--sm-space-8); }
.woocommerce div.product .related.products ul.products,
.woocommerce div.product .upsells.products ul.products { padding-inline: 0; padding-bottom: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 var(--sm-space-5); border-bottom: var(--sm-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: 0; }
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Woo zet hier `margin: 0 -5px`, waardoor de eerste tab links half buiten de
     container viel en zijn label werd afgesneden. */
  margin: 0;
  padding: 0 var(--sm-space-4) var(--sm-space-3) 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after { content: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-size: 12px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--sm-ink-muted);
  font-weight: 400;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--sm-ink); }
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce div.product .woocommerce-tabs h2,
.woocommerce #reviews h2,
.woocommerce #reviews h3 { font-size: 20px; font-weight: 400; margin-bottom: var(--sm-space-4); }

.woocommerce #reviews .comment-form label { font-size: var(--sm-text-sm); color: var(--sm-ink-soft); }
.woocommerce #reviews .comment-form input[type="text"],
.woocommerce #reviews .comment-form input[type="email"],
.woocommerce #reviews .comment-form textarea {
  width: 100%;
  max-width: 34rem;
  border: var(--sm-border);
  border-radius: var(--sm-radius-xs);
  background: var(--sm-paper);
  padding: 0.75em 0.9em;
  font: inherit;
  font-size: var(--sm-text-sm);
}
.woocommerce #reviews .woocommerce-noreviews { color: var(--sm-ink-soft); font-size: var(--sm-text-sm); }

/* --- 5. knoppen ---------------------------------------------------------
   Alles wat WooCommerce of GeneratePress als knop rendert, krijgt de vorm van
   .sm-btn: vierkant (radius 2px), 12px, uppercase, licht gespatieerd — de
   knopstijl zoals op de bron gemeten. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wp-element-button,
button.wp-element-button {
  background: var(--sm-accent);
  color: var(--sm-accent-ink);
  border: 1px solid var(--sm-accent);
  border-radius: var(--sm-radius-xs);
  padding: 0.85em 1.6em;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: background var(--sm-dur-2) var(--sm-ease), color var(--sm-dur-2) var(--sm-ease), transform var(--sm-dur-1) var(--sm-ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.wp-element-button:hover {
  background: var(--sm-ink-soft);
  border-color: var(--sm-ink-soft);
  color: var(--sm-accent-ink);
  transform: translateY(-1px);
}
.woocommerce .button.loading { opacity: 0.6; }
.woocommerce a.added_to_cart { display: none; }   /* de drawer toont al dat het gelukt is */

/* --- 6. meldingen ------------------------------------------------------- */
.woocommerce-notices-wrapper { padding-inline: var(--cc-inline); }
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--sm-paper-alt);
  border-top: 0;
  border-left: 3px solid var(--sm-ink);
  border-radius: var(--sm-radius-xs);
  color: var(--sm-ink);
  font-size: var(--sm-text-sm);
}
.woocommerce-error { border-left-color: var(--sm-sale); }
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { color: var(--sm-ink-muted); }

/* --- 7. winkelmand en afrekenen ----------------------------------------- */
.woocommerce-cart .entry-content,
.woocommerce-checkout .entry-content,
.woocommerce-account .entry-content,
.woocommerce-cart-form,
.woocommerce .cart-collaterals,
.woocommerce-checkout form.checkout,
.woocommerce-account .woocommerce {
  padding-inline: var(--cc-inline);
}
.woocommerce-cart .woocommerce,
.woocommerce-checkout .woocommerce,
.woocommerce-account .woocommerce { padding-block: var(--sm-space-8) var(--sm-space-9); }

.woocommerce table.shop_table {
  border: var(--sm-border);
  border-radius: var(--sm-radius-xs);
  font-size: var(--sm-text-sm);
}
.woocommerce table.shop_table th { font-weight: 550; }
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-top-color: var(--sm-line); }

.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-account h2 { font-size: 20px; font-weight: 400; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
  border: var(--sm-border);
  border-radius: var(--sm-radius-xs);
  background: var(--sm-paper);
  color: var(--sm-ink);
  padding: 0.75em 0.9em;
  font: inherit;
  font-size: var(--sm-text-sm);
  height: auto;
}
.woocommerce form .form-row label { font-size: var(--sm-text-sm); color: var(--sm-ink-soft); }

/* --- 8. de winkelmand-drawer -------------------------------------------- */
.sm-cart-line__title a { color: inherit; text-decoration: none; }
.sm-cart-line__title a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.sm-cart-line__prijs .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }
.cc-cart-knop { position: relative; }

/* Het wholesale-formulier in zijn drawer. */
.cc-zakelijk__drawer .sm-field { gap: var(--sm-space-2); }
.cc-zakelijk__drawer label { margin-top: var(--sm-space-3); }
.cc-zakelijk__drawer .sm-btn { margin-top: var(--sm-space-4); }
.cc-zakelijk__drawer .wpcf7-form p { margin: 0 0 var(--sm-space-3); }
.cc-zakelijk__drawer input[type="text"],
.cc-zakelijk__drawer input[type="email"],
.cc-zakelijk__drawer textarea {
  width: 100%;
  border: var(--sm-border);
  border-radius: var(--sm-radius-xs);
  background: var(--sm-paper);
  padding: 0.75em 0.9em;
  font: inherit;
  font-size: var(--sm-text-sm);
}

/* De paginatitel op winkelpagina's staat in GeneratePress' eigen kop; die
   krijgt dezelfde marge als de rest, anders plakt "Cart" tegen de linkerrand. */
.cc-winkelpagina .entry-header,
.cc-winkelpagina .page-header,
.cc-winkelpagina .woocommerce-account .woocommerce { padding-inline: var(--cc-inline); }
.cc-winkelpagina .entry-title { font-size: 30px; font-weight: 400; }

/* Vangnet voor WooCommerce-blokrasters (zie de dekking bovenaan): die zetten
   `margin: 0 -8px` op de <ul> en duwen de pagina dan 8px breder dan het
   venster. Gemeten: 1448px in een venster van 1440px. */
.wc-block-grid__products { margin-inline: 0; }
.wc-block-grid__product { padding-inline: 0; }

/* Het nieuwsbriefveld in de voettekst.
   GeneratePress zet `padding: 10px` op elk tekstveld; de opgeschoonde
   referentie laat het op de browserstandaard van 1px staan. Gemeten verschil:
   het veld werd 42px hoog in plaats van 34px, en daarmee de hele voettekst
   8px hoger (771 tegen 763). Dat was na de port het enige overgebleven
   verschil in de twaalf gemeten dozen van de voorpagina. */
.cc-footer__nieuwsbrief input { padding: 1px 2px; }

/* --- 8b. aanraakdoelen op WooCommerce-elementen -------------------------
   Gemeten met responsief.js op de productpagina: de vergrootglas-knop op de
   galerij (36×36), de categorielink onder de knop (32×12) en de vijf
   beoordelingssterren (24×24) zijn kleiner dan 40px. Site.css doet dit al voor
   de eigen navigatie en voettekst; deze drie komen uit WooCommerce en vielen
   er nog buiten. Alleen het raakvlak groeit — de opmaak blijft staan. */
@media (pointer: coarse) {
  .woocommerce div.product .woocommerce-product-gallery__trigger {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .woocommerce div.product .product_meta a,
  .woocommerce #reviews .stars a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -0.7rem;
  }
  .woocommerce #reviews .stars a { min-width: 44px; justify-content: center; }
}

/* --- 9. losse WordPress-pagina's ---------------------------------------
   Een gewone pagina (privacybeleid, 404, zoekresultaat) valt terug op
   GeneratePress' eigen opmaak. Die krijgt hier alleen ruimte onder de vaste
   kop en dezelfde marge als de rest. */
body:not(.home) .site-content { padding-block: var(--sm-space-8) var(--sm-space-9); }
body:not(.home):not(.cc-winkelpagina) .site-content .content-area { padding-inline: var(--cc-inline); }
.entry-title { font-weight: 400; }