/**
 * Componenten: announce, header, navigatie, zoek-overlay, mini-cart-drawer,
 * footer, banden, kaarten, meldingen, toast.
 */

/* ── aankondigingsbalk ── */
.ww-announce {
  background: var(--ww-forest);
  color: var(--ww-licht);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 9px 16px;
}
.ww-announce p { margin: 0; }

/* ── header ── */
.ww-header {
  background: var(--ww-cream);
  border-bottom: 1px solid var(--ww-lijn);
  padding: 18px 0;
  position: sticky;
  top: 0;
  z-index: 900;
  transition: background var(--ww-overgang), box-shadow var(--ww-overgang-traag), padding var(--ww-overgang-traag);
}
.ww-header.is-compact {
  background: var(--ww-paper);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--ww-lijn);
}
.ww-header > .wp-block-group { gap: 24px; }

.ww-header .wp-block-navigation a {
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-transform: none;
  text-decoration: none;
  position: relative;
  padding-bottom: 4px;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0% 2px;
  transition: background-size 0.25s ease;
}
.ww-header .wp-block-navigation a:hover,
.ww-header .wp-block-navigation a:focus-visible,
.ww-header .wp-block-navigation .current-menu-item > a {
  background-size: 100% 2px;
  text-decoration: none;
}
.ww-header .wp-block-navigation { gap: 26px; }

/* Utilities rechts: zoekknop, account, tas */
.ww-utils { display: flex; align-items: center; gap: 6px; }
.ww-utils a, .ww-utils button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: none; cursor: pointer; color: var(--ww-ink);
  border-radius: var(--ww-r-sm);
}
.ww-utils a:hover, .ww-utils button:hover { background: var(--ww-cream-diep); }
.ww-utils svg { width: 21px; height: 21px; }

/* Mini-cart-blok in dezelfde taal */
.ww-header .wc-block-mini-cart { margin: 0; }
.ww-header .wc-block-mini-cart__button {
  width: 44px; height: 44px; padding: 0; justify-content: center;
  color: var(--ww-ink); border-radius: var(--ww-r-sm); opacity: 1;
}
.ww-header .wc-block-mini-cart__button:hover { background: var(--ww-cream-diep); color: var(--ww-ink); }
.ww-header .wc-block-mini-cart__badge {
  background: var(--ww-clay); color: #fff; border: none;
  left: auto; right: -2px; margin-left: 0;
}

/* Drawer (mini-cart paneel) */
.wc-block-mini-cart__drawer .components-modal__content { background: var(--ww-paper); }
.wc-block-mini-cart__drawer { font-family: var(--ww-sans); }
.wp-block-woocommerce-mini-cart-title-block { font-weight: 700; }
.wc-block-mini-cart__footer { border-top: 1px solid var(--ww-lijn); }

/* ── tekstlogo ── */
.ww-logotekst,
.ww-logotekst a {
  font-family: var(--wp--preset--font-family--coldiac);
  font-weight: 400;
  font-size: 1.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--ww-ink);
  line-height: 1;
  margin: 0;
}
.ww-logotekst a:hover { text-decoration: none !important; color: var(--ww-forest); }
.ww-header .ww-logotekst,
.ww-header .ww-logotekst a { -webkit-text-stroke: 0.55px currentColor; }
.ww-logotekst-voet { color: var(--ww-paper); font-size: 1.45rem; margin-bottom: 14px !important; }
@media (max-width: 600px) {
  .ww-logotekst, .ww-logotekst a { font-size: 1.3rem; }
}

/* ── zoek-overlay ── */
.ww-zoek-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(23, 26, 23, 0.42);
  display: none;
}
.ww-zoek-overlay.is-open { display: block; }
.ww-zoek-paneel {
  background: var(--ww-paper);
  border-bottom: 1px solid var(--ww-lijn);
  padding: clamp(24px, 5vw, 56px) 0;
  box-shadow: var(--ww-schaduw-2);
}
.ww-zoek-paneel .ww-container { display: grid; gap: 18px; max-width: 720px; }
.ww-zoek-vorm { display: flex; gap: 10px; }
.ww-zoek-vorm input[type="search"] {
  flex: 1; font-size: 1.125rem; padding: 14px 18px; min-width: 0;
}
.ww-zoek-populair { font-size: 0.875rem; color: var(--ww-gedempt); }
.ww-zoek-populair a { color: var(--ww-ink); margin-right: 14px; }
.ww-zoek-sluit {
  justify-self: end; background: none; border: none; cursor: pointer;
  font-size: 0.875rem; font-weight: 650; color: var(--ww-gedempt);
  padding: 8px 10px;
}
.ww-zoek-sluit:hover { color: var(--ww-ink); }

/* ── USP-band ── */
.ww-uspband {
  background: var(--ww-paper);
  box-shadow: inset 0 1px 0 var(--ww-lijn), inset 0 -1px 0 var(--ww-lijn);
  border: none;
}
.ww-uspband p { margin: 0; font-size: 0.9rem; }
.ww-uspband .ww-usp-sub { color: var(--ww-gedempt); font-size: 0.8rem; }
.ww-uspband .wp-block-columns { align-items: center; }
.ww-uspband .wp-block-column { text-align: center; }

/* ── categoriekaart (fase 3 vernieuwt de inhoud; basis alvast rustig) ── */
.ww-catkaart {
  border: 1px solid var(--ww-lijn); padding: 30px; background: var(--ww-paper);
  border-radius: var(--ww-r-md);
  transition: border-color var(--ww-overgang);
}
.ww-catkaart:hover { border-color: var(--ww-gedempt); }
.ww-catkaart a { text-decoration: none; }

/* ── statkaart (donkere band) ── */
.ww-statkaart {
  border: 1px solid rgba(241, 239, 231, 0.18);
  background: transparent;
  border-radius: var(--ww-r-md);
  padding: 22px;
}
.ww-statkaart .ww-num {
  font-family: var(--ww-serif);
  font-size: 2.1rem; font-weight: 550; line-height: 1.1;
  color: var(--ww-paper);
}
.ww-statkaart p { margin: 0; }
.ww-statkaart .ww-sub { color: var(--ww-licht-gedempt); font-size: 0.8rem; }

/* ── infokaart (contact/over) ── */
.ww-infokaart {
  background: var(--ww-paper); border: 1px solid var(--ww-lijn);
  border-radius: var(--ww-r-md);
  padding: 26px 28px;
}
.ww-infokaart p { margin: 0 0 10px; }
.ww-infokaart .ww-footkop, .ww-infokaart h3 { margin-top: 0; }

/* ── hero-beeld ── */
.ww-heroimg img {
  border-radius: var(--ww-r-md);
  border: 1px solid var(--ww-lijn);
  background: var(--ww-paper);
}

/* ── footer ── */
.ww-footer {
  background: var(--ww-forest-donker);
  color: var(--ww-licht-gedempt);
  padding-top: 72px !important;
}
.ww-footer a { color: var(--ww-licht); text-decoration: none; opacity: 0.88; }
.ww-footer a:hover { opacity: 1; text-decoration: underline; }
.ww-footer .wp-block-columns { row-gap: 32px; }
.ww-footer .wp-block-list, .ww-footer ul { font-size: 0.95rem !important; }
.ww-footer .has-small-font-size { font-size: 0.9rem !important; }
.ww-footer h4, .ww-footer .ww-footkop {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: #8FA79B; font-weight: 700; margin-bottom: 10px;
}
.ww-footer .ww-merkzin {
  font-family: var(--ww-serif); font-weight: 550; font-size: 1.25rem;
  color: var(--ww-paper); margin: 0 0 18px;
}
.ww-footer .ww-pay span {
  border: 1px solid rgba(241, 239, 231, 0.22); padding: 3px 10px;
  font-size: 0.78rem; font-weight: 650;
  color: var(--ww-licht-gedempt); background: transparent;
  border-radius: var(--ww-r-sm);
  display: inline-block; margin: 0 6px 6px 0;
}
.ww-footer .ww-bottom { border-top: 1px solid rgba(241, 239, 231, 0.14); color: #8FA79B; }
.ww-footer .ww-bottom p { font-size: 0.82rem !important; }
.ww-footer .ww-bottom a { color: #B9C6BE; }

/* ── welkomstkorting ── */
.ww-code {
  display: inline-block;
  background: var(--ww-wit);
  color: var(--ww-ink);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  margin-inline: 2px;
  border: 1px solid var(--ww-lijn);
  border-radius: var(--ww-r-sm);
}
.ww-kortingsmelding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  border: 1px dashed var(--ww-forest);
  background: var(--ww-paper);
  border-radius: var(--ww-r-md);
  padding: 14px 18px;
  margin: 0 0 24px;
  font-size: 0.9rem;
}

/* ── toast ── */
.ww-toast {
  position: fixed; left: 22px; bottom: 22px; z-index: 9999;
  max-width: 320px;
  background: var(--ww-paper);
  border: 1px solid var(--ww-lijn);
  border-radius: var(--ww-r-md);
  box-shadow: var(--ww-schaduw-2);
  padding: 18px 20px;
  font-size: 0.88rem; line-height: 1.5;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ww-toast.is-zichtbaar { opacity: 1; transform: translateY(0); }
.ww-toast p { margin: 0 0 10px; }
.ww-toast-code {
  display: inline-block; cursor: pointer;
  border: 1px dashed var(--ww-forest);
  background: var(--ww-cream);
  border-radius: var(--ww-r-sm);
  font-weight: 700; letter-spacing: 0.12em;
  padding: 7px 14px;
}
.ww-toast-code:hover { background: var(--ww-cream-diep); }
.ww-toast-tip { margin: 8px 0 0; font-size: 0.72rem; color: var(--ww-gedempt); }
.ww-toast-sluit {
  position: absolute; top: 6px; right: 6px;
  background: none; border: 0; cursor: pointer;
  font-size: 1rem; line-height: 1; padding: 6px;
  color: var(--ww-gedempt);
}
.ww-toast-sluit:hover { color: var(--ww-ink); }
@media (max-width: 600px) {
  .ww-toast { left: 14px; right: 14px; bottom: 14px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ww-toast { transition: none; transform: none; }
}

/* ── cookiebanner meekleuren (markup + inline CSS uit mu-plugin; de inline
      <style> staat in de footer en wint anders de cascade) ── */
#ww-cookiebanner {
  background: var(--ww-paper) !important;
  border-color: var(--ww-lijn) !important;
  color: var(--ww-ink) !important;
  border-radius: var(--ww-r-md);
  box-shadow: var(--ww-schaduw-2) !important;
}
.ww-cookie-knoppen button {
  border-radius: 5px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 0.875rem !important;
  font-weight: 650 !important;
  padding: 12px 18px !important;
}
#ww-cookie-ja {
  background: var(--ww-forest) !important;
  border-color: var(--ww-forest) !important;
  color: #fff !important;
}
#ww-cookie-nee {
  background: transparent !important;
  border-color: rgba(23, 26, 23, 0.4) !important;
  color: var(--ww-ink) !important;
}

/* ── mobiel navigatie-overlay ── */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--ww-cream);
  padding: 24px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation a {
  font-size: 1.25rem; font-weight: 650; padding: 10px 0;
  background: none;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: var(--ww-ink); }

/* Hamburger en sluitknop: volwaardige touch-targets */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Mobiel: compactere balk die binnen 375px past */
@media (max-width: 781px) {
  .ww-header { padding: 10px 0; }
  .ww-header > .wp-block-group { gap: 6px; flex-wrap: nowrap; }
  .ww-announce { font-size: 0.7rem; padding: 7px 12px; }
  .ww-utils { gap: 0; }
  .ww-utils a, .ww-utils button { width: 40px; height: 44px; }
  .ww-header .wc-block-mini-cart__button { width: 40px; height: 44px; }
}
@media (max-width: 480px) {
  .ww-utils .ww-account-link { display: none; }
}

/* ═══ Homepage-secties ═══ */

/* Kop-rij: sectiekop links, pijllink rechts */
.ww-koprij {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap;
}
.ww-koprij h2 { margin: 0; }

/* Hairline boven een cream-sectie die op cream volgt */
.ww-hairline-top { box-shadow: inset 0 1px 0 var(--ww-lijn); }

/* Hero */
.ww-hero .ww-proofline {
  font-size: 0.8125rem !important; color: var(--ww-gedempt);
  border-top: 1px solid var(--ww-lijn);
  padding-top: 14px; margin-top: 12px;
}
.ww-heroimg img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

/* Categorie-ontdekking */
.ww-cat figure {
  margin: 0; overflow: hidden;
  border-radius: var(--ww-r-md); border: 1px solid var(--ww-lijn);
  background: var(--ww-wit);
  line-height: 0;
}
/* De link om het beeld is inline-block en laat anders een baseline-gaatje
   (witte streep) onder de afbeelding open. */
.ww-cat figure a { display: block; line-height: 0; height: 100%; }
.ww-cat img {
  width: 100%; display: block; object-fit: cover;
  transition: transform var(--ww-overgang-traag);
}
.ww-cat:hover img { transform: scale(1.02); }
.ww-cat-groot img { aspect-ratio: 3 / 2; }
.ww-cat-klein img { aspect-ratio: 16 / 7; }
.ww-cat-klein { margin-top: 0; }
.ww-cat-klein + .ww-cat-klein { margin-top: 24px; }

/* Desktop: de rechterkolom vult zich exact naar de hoogte van de grote
   kaart links — beide kleine kaarten delen de ruimte, beelden rekken mee.
   Zo lopen onderkanten en linkregels altijd strak gelijk. */
@media (min-width: 782px) {
  .wp-block-column.ww-cat-groot + .wp-block-column {
    display: flex; flex-direction: column; gap: 24px;
  }
  .wp-block-column.ww-cat-groot + .wp-block-column .ww-cat-klein {
    display: flex; flex-direction: column;
    flex: 1 1 0; min-height: 0;
  }
  .wp-block-column.ww-cat-groot + .wp-block-column .ww-cat-klein + .ww-cat-klein { margin-top: 0; }
  .wp-block-column.ww-cat-groot + .wp-block-column .ww-cat-klein figure {
    flex: 1 1 0; min-height: 0;
  }
  .wp-block-column.ww-cat-groot + .wp-block-column .ww-cat-klein img {
    aspect-ratio: auto; height: 100%;
  }
}
.ww-cat-tekst { padding: 14px 2px 0; }
.ww-cat-tekst h3 { margin: 0 0 2px; font-size: 1.15rem; }
.ww-cat-tekst h3 a { text-decoration: none; }
.ww-cat-sub { color: var(--ww-gedempt); font-size: 0.9375rem; margin: 0 0 4px; }

/* Drieluik "waarom Westwood" */
.ww-drieluik { margin-top: 34px; }
.ww-drieluik .wp-block-column { border-top: 1px solid var(--ww-lijn); padding-top: 16px; }
.ww-drie-nr {
  font-family: var(--ww-serif); font-weight: 550;
  color: var(--ww-clay-tekst); font-size: 1.35rem; margin: 0 0 6px;
}
.ww-drieluik h3 { font-size: 1.05rem; margin: 0 0 4px; }
.ww-drieluik .ww-drie-sub { color: var(--ww-gedempt); font-size: 0.9375rem; margin: 0; }

/* Spotlight (forest-band) */
.ww-spotfoto { margin: 0; overflow: hidden; border-radius: var(--ww-r-md); }
.ww-spotfoto img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block;
  border-radius: var(--ww-r-md);
}
.ww-stappen {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 28px; margin: 16px 0 20px;
}
.ww-stappen p { margin: 0; font-size: 0.9375rem; color: var(--ww-licht); }
.ww-stappen strong { color: #C9A48A; font-weight: 650; }
.ww-donkerband .ww-pijllink, .ww-donkerband .ww-pijllink a { color: var(--ww-licht); }
.ww-donkerband .ww-pijllink:hover, .ww-donkerband .ww-pijllink a:hover { border-bottom-color: var(--ww-licht); }

/* Proofband */
.ww-proof-cijfer {
  font-family: var(--ww-serif); font-weight: 550;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  letter-spacing: -0.02em; margin: 0;
}
.ww-proof-sub { color: var(--ww-gedempt); font-size: 0.875rem; margin: 6px 0 0; }
.ww-proof-citaten {
  color: var(--ww-gedempt); font-size: 0.9375rem;
  border-top: 1px solid var(--ww-lijn);
  margin-top: 40px !important; padding-top: 18px;
}

/* Editorial cover */
.ww-editorialcover { border-radius: 0; }
.ww-editorialcover h2 { color: var(--ww-paper); }
.ww-editorialcover p { color: var(--ww-licht); }

/* Journal (open kaarten, geen kaders) */
.ww-journal .wp-block-post-template > li { background: transparent; border: none; padding: 0; }
.ww-journal .wp-block-post-featured-image { overflow: hidden; border-radius: var(--ww-r-md); }
.ww-journal .wp-block-post-featured-image img {
  border: 1px solid var(--ww-lijn); border-radius: var(--ww-r-md);
  transition: transform var(--ww-overgang-traag);
}
.ww-journal .wp-block-post-template > li:hover .wp-block-post-featured-image img { transform: scale(1.02); }
.ww-journal .wp-block-post-title {
  font-family: var(--ww-sans); font-weight: 650; font-size: 1.05rem;
  line-height: 1.35; margin: 12px 0 0;
}
.ww-journal .wp-block-post-title a { text-decoration: none; }

/* Compacte USP-strip */
.ww-strip p { margin: 0; font-size: 0.9rem; }