/*
Theme Name: Praatdeurtje — Bridge
Theme URI: https://praatdeurtje.nl
Author: MyCreatief
Description: Warm, rustig theme voor Praatdeurtje: handgemaakte houten deurtjes en een wekelijks slaapverhaaltje. Afgeleid van het draagvoordieren-thema, zonder donaties. Sage / sand / warm-wit / brown-black / subtiel goud.
Version: 0.1.2
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
License: Proprietary
Text Domain: dierenhart-bridge
*/

/* ============================================================
   Praatdeurtje — warm brand system
   Calm, mature, hopeful. Sage / sand / warm-white / brown-black / gold.
   Lettertypes worden ge-enqueued via functions.php — geen @import hier.
   ============================================================ */

:root{
  /* --- Brand tokens --- */
  --sage:        #66755a;  /* iets donkerder dan #6f7e5c: knoptekst haalde 4,17:1, nu 4,72:1 */
  --warm-white:  #fcfbf8;   /* paginagrond: bijna wit met een warme ondertoon */
  --sand:        #ece3d3;   /* warm cream voor hero-panel / causes / footer */
  --sand-deep:   #e0d6c2;
  --gold:        #b5934e;

  /* --- Derived --- */
  --ink:         #2c2820;
  --ink-soft:    #6c655a;
  --ink-faint:   #786f61;
  --surface:     #ffffff;
  --sage-soft:   color-mix(in oklab, var(--sage) 16%, var(--warm-white));
  --sage-tint:   color-mix(in oklab, var(--sage) 9%, var(--warm-white));
  --sage-hover:  color-mix(in oklab, var(--sage) 82%, #000);

  /* Fout: een eigen kleur, want goud las als een tip in plaats van een probleem. */
  --error:       #9c3f2b;
  --error-tint:  #f7ece7;
  --line:        color-mix(in oklab, var(--ink) 12%, transparent);
  --line-soft:   color-mix(in oklab, var(--ink) 7%, transparent);

  /* --- Type --- */
  --serif: 'Spectral', Georgia, 'Times New Roman', serif;
  --sans:  'Mulish', system-ui, -apple-system, sans-serif;

  /* --- Layout --- */
  --maxw: 1200px;
  --pad:  clamp(20px, 5vw, 56px);
  --radius: 14px;
  --radius-sm: 10px;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width: 100%; display: block; height: auto; }

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p{ margin: 0; }
a{ color: inherit; text-decoration: none; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }

.eyebrow{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage);
}

.section-kicker{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.lead{ color: var(--ink-soft); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7; }

/* ---------------- Buttons ---------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn--primary{ background: var(--sage); color: #fbfaf5; }
.btn--primary:hover{ background: var(--sage-hover); }
.btn--ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover{ border-color: var(--sage); color: var(--sage); }
.btn--small{ padding: 11px 20px; font-size: 14px; }
.btn--block{ width: 100%; }
.btn svg{ width: 17px; height: 17px; }

/* ---------------- Header ---------------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--warm-white) 88%, transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner{ display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.nav{ display: flex; align-items: center; gap: 30px; }
.nav a{ font-size: 15px; font-weight: 500; color: var(--ink); position: relative; padding: 4px 0; }
.nav a::after{ content:''; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background: var(--sage); transition: right .25s ease; }
.nav a:hover{ color: var(--sage); }
.nav a:hover::after{ right: 0; }
.nav a[aria-current="page"]{ color: var(--sage); }
.nav a[aria-current="page"]::after{ right: 0; }
.header-actions{ display: flex; align-items: center; gap: 16px; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:999px; color:var(--ink); border:1px solid transparent; background:transparent; cursor:pointer; transition: background .2s ease; }
.icon-btn:hover{ background: var(--sage-soft); }
.icon-btn svg{ width: 21px; height: 21px; }
.nav-toggle{ display: none; }

/* ---------------- Logo ---------------- */
.logo{ display: flex; align-items: center; gap: 11px; }
.logo .mark{ width: 34px; height: 34px; color: var(--sage); flex: none; }
.logo .wordmark{ display: flex; flex-direction: column; line-height: 1; }
.logo .wordmark b{ font-family: var(--serif); font-weight: 500; font-size: 21px; letter-spacing: .01em; color: var(--ink); }
.logo .wordmark span{ font-family: var(--sans); font-weight: 600; font-size: 9.5px; letter-spacing: .34em; color: var(--ink-soft); text-transform: uppercase; margin-top: 3px; }

/* ---------------- Section rhythm ---------------- */
section{ position: relative; }
.band{ padding-block: clamp(56px, 9vw, 104px); }
.band--sand{ background: var(--sand); }
.band--tint{ background: var(--sage-tint); }
.center{ text-align: center; }
.stack-sm > * + *{ margin-top: 14px; }

/* ---------------- Product card (loop) ---------------- */
.product{ display: flex; flex-direction: column; background: transparent; }
.product .ph{
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius);
  background: var(--sand); overflow: hidden;
  border: 1px solid var(--line-soft);
}
.product .ph img{ width: 100%; height: 100%; object-fit: cover; }
.product .meta{ padding-top: 16px; }
.product h3{ font-family: var(--serif); font-size: 19px; font-weight: 500; line-height: 1.2; }
.product .desc{ color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; margin-top: 8px; }
.product .price{ font-family: var(--sans); font-weight: 700; font-size: 17px; margin-top: 12px; color: var(--ink); }
.product .donation{ display: flex; align-items: center; gap: 8px; color: var(--sage); font-size: 13.5px; font-weight: 500; margin-top: 8px; }
.product .donation svg{ width: 16px; height: 16px; flex: none; }
.product .btn{ margin-top: 16px; }

/* ---------------- Footer ---------------- */
.site-footer{ background: var(--sand); border-top: 1px solid var(--sand-deep); }
.values{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-block: clamp(40px, 6vw, 64px); }
.value h4{ font-family: var(--serif); font-size: 17px; font-weight: 500; margin-bottom: 8px; }
.value p{ color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.value .vico{ width: 30px; height: 30px; color: var(--sage); margin-bottom: 14px; }
.footer-base{ border-top: 1px solid var(--sand-deep); display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 28px; flex-wrap: wrap; }
.footer-base small{ color: var(--ink-soft); font-size: 13px; }
.footer-links{ display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a{ font-size: 13px; color: var(--ink-soft); }
.footer-links a:hover{ color: var(--sage); }
.footer-legal{ flex-basis: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--sand-deep); padding-top: 18px; margin-top: 4px; }
.footer-legal a{ font-size: 12px; color: var(--ink-soft); }
.footer-legal a:hover{ color: var(--sage); }
.footer-legal .sep{ color: var(--sand-deep); font-size: 12px; }

/* ---------------- Misc shared ---------------- */
.note-line{ display: flex; align-items: center; gap: 9px; color: var(--ink-soft); font-size: 14px; }
.note-line svg{ width: 17px; height: 17px; color: var(--sage); flex: none; }

/* ---------------- Free shipping progress (cart + checkout) ---------------- */
.dhs-free-ship-progress{
  background: color-mix(in oklab, var(--sand) 40%, var(--surface));
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 0 0 22px;
}
.dhs-free-ship-progress__msg{
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-soft);
}
.dhs-free-ship-progress__msg--reached{
  color: var(--sage);
  font-weight: 600;
}
.dhs-free-ship-progress__bar{
  position: relative;
  height: 8px;
  background: var(--sand);
  border-radius: 999px;
  overflow: hidden;
}
.dhs-free-ship-progress__fill{
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--sage);
  transition: width .3s ease;
}

/* ---------------- Mobile nav ---------------- */
.mobile-nav{ display: none; flex-direction: column; gap: 6px; padding: 8px var(--pad) 18px; border-bottom: 1px solid var(--line-soft); background: var(--warm-white); }
.mobile-nav.open{ display: flex; }
.mobile-nav a{ padding: 10px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--line-soft); }
.mobile-nav a:last-child{ border-bottom: 0; }

/* ---------------- Homepage layout ---------------- */
/* Hero is een full-width cream-band (sand goes edge-to-edge). Content
   blijft binnen .wrap max-width centered. */
.hero{
  background: var(--sand);
  padding-block: clamp(48px, 7vw, 96px);
  margin-bottom: 0;
}
.hero-panel{
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: clamp(20px, 4vw, 64px);
  align-items: center;
}
.hero-copy{ display: flex; flex-direction: column; justify-content: center; }
.hero-title{ font-size: clamp(44px, 5.6vw, 82px); font-weight: 400; line-height: .98; }
.hero-lead{ max-width: 34ch; }
.hero-cta{ display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.hero-note{ margin-top: 22px; }
.hero-photo{ position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: clamp(14px, 1.6vw, 22px); overflow: hidden; background: color-mix(in oklab, var(--sand) 80%, #fff); }
.hero-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo__placeholder{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  /* --ink-faint haalde op deze zandtint maar 3,74:1; dit is een boodschap, geen decoratie. */
  color: var(--ink); font-size: 14px; padding: 24px; text-align: center;
}

.h-section{ font-size: clamp(30px, 4.4vw, 46px); font-weight: 400; }
.h-closing{ font-size: clamp(34px, 5.4vw, 60px); font-weight: 400; line-height: 1.04; }

.steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 64px); margin-top: clamp(40px, 6vw, 64px); }
.step{ text-align: center; }
.step-ico{ display: inline-flex; align-items: center; justify-content: center; color: var(--sage); margin-bottom: 16px; }
.step-ico svg{ width: 32px; height: 32px; }
.step h3{ font-family: var(--serif); font-size: 20px; font-weight: 500; margin-bottom: 10px; }
.step p{ color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 26ch; margin-inline: auto; }
.steps-foot{ color: var(--ink-soft); font-size: 15px; margin-top: clamp(36px, 5vw, 52px); max-width: 56ch; margin-inline: auto; }

.collection-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.6vw, 30px); margin-top: clamp(40px, 6vw, 60px); }

.causes{ display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 48px); margin-top: clamp(40px, 6vw, 64px); }
.cause{ text-align: center; }
.cause-ico{ display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; color: var(--gold); margin-bottom: 8px; }
.cause-ico svg{ width: 54px; height: 54px; }
.cause h4{ font-family: var(--serif); font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.cause p{ color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; max-width: 24ch; margin-inline: auto; }

/* ---------------- Shop layout ---------------- */
.shop-head-band{ padding-bottom: clamp(32px, 4vw, 48px); }
.shop-title{ font-size: clamp(38px, 6vw, 60px); font-weight: 400; }
.shop-intro{ max-width: 60ch; }

.support-banner{
  display: flex; align-items: center; gap: clamp(16px, 3vw, 28px);
  background: var(--sand); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px); margin-top: 28px;
}
.support-ico{ flex: none; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); }
.support-ico svg{ width: 48px; height: 48px; }
.support-text{ flex: 1 1 auto; min-width: 0; }
.support-kicker{ font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.support-text h2{ font-family: var(--serif); font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; margin: 4px 0 6px; }
.support-sub{ color: var(--ink-soft); font-size: 14.5px; line-height: 1.5; }
.support-link{ flex: none; }

.shop-grid-band{ padding-top: clamp(28px, 3vw, 40px); }
.filters{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(32px, 4vw, 48px); }
.chip{
  font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 18px; cursor: pointer; transition: all .18s ease; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center;
}
.chip:hover{ border-color: var(--sage); color: var(--sage); }
.chip.is-active{ background: var(--sage); border-color: var(--sage); color: #fbfaf5; }

.shop-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 30px); }
.shop-grid .product{
  background: var(--surface); border: 1px solid var(--sand-deep); border-radius: var(--radius);
  overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.shop-grid .product:hover{ transform: translateY(-3px); box-shadow: 0 1px 2px rgba(44,40,32,.04), 0 22px 44px -30px rgba(44,40,32,.4); }
.shop-grid .product .ph{ border-radius: 0; border: 0; border-bottom: 1px solid var(--line-soft); aspect-ratio: 1 / 1; background: var(--sand); }
.shop-grid .product .meta{ padding: clamp(18px, 2vw, 24px); }
.grid-empty{ text-align: center; color: var(--ink-soft); padding: 40px 0; font-size: 16px; }

@media (max-width: 920px){
  .collection-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
  .causes{ grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}
@media (max-width: 900px){
  .shop-grid{ grid-template-columns: repeat(2, 1fr); }
  .support-banner{ flex-wrap: wrap; }
  .support-link{ width: 100%; justify-content: center; }
}
@media (max-width: 860px){
  .nav, .header-actions .btn{ display: none; }
  .nav-toggle{ display: inline-flex; }
  .values{ grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (max-width: 760px){
  .hero-panel{ grid-template-columns: 1fr; gap: 28px; }
  .hero-photo{ order: -1; aspect-ratio: 4 / 3; }
  .steps{ grid-template-columns: 1fr; gap: 40px; max-width: 360px; margin-inline: auto; }
}
@media (max-width: 540px){
  .shop-grid{ grid-template-columns: 1fr; max-width: 360px; margin-inline: auto; }
  .support-ico{ display: none; }
}
@media (max-width: 520px){
  .values{ grid-template-columns: 1fr; }
}
@media (max-width: 480px){
  .collection-grid{ grid-template-columns: 1fr; gap: 28px; max-width: 340px; margin-inline: auto; }
  .causes{ grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; gap: 32px; }
}

/* ── Single product ─────────────────────────────────────────── */
.single-crumb{ font-size: 13px; color: var(--ink-soft); margin-bottom: 22px; }
.single-crumb a{ color: var(--ink-soft); text-decoration: none; }
.single-crumb a:hover{ color: var(--sage); }
.single-crumb span{ margin: 0 6px; opacity: .6; }
.single-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.single-media{ border-radius: 16px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--sand); aspect-ratio: 1 / 1; }
.single-media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.single-thumbs{ display: flex; gap: 10px; margin-top: 12px; }
.single-thumbs img{ width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-soft); }
.single-info{ padding-top: 4px; }
.single-info h1{ font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; line-height: 1.12; margin: 6px 0 12px; }
.single-price{ font-family: var(--sans); font-weight: 700; font-size: 24px; color: var(--ink); margin-bottom: 16px; }
.single-price del{ color: var(--ink-soft); font-weight: 500; margin-right: 8px; }
.single-short{ color: var(--ink-soft); font-size: 16px; line-height: 1.6; margin-bottom: 18px; }
.single-info .donation{ display: flex; align-items: center; gap: 8px; color: var(--sage); font-size: 14px; font-weight: 500; margin: 14px 0; }
.single-info .donation svg{ width: 17px; height: 17px; flex: none; }
.single-info form.cart{ display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 20px 0 14px; }
.single-info form.cart .quantity input{ width: 76px; padding: 13px 10px; border: 1px solid var(--line); border-radius: 10px; text-align: center; font-size: 15px; background: #fff; }
.single-info form.cart button,
.single-info form.cart .single_add_to_cart_button{ background: var(--sage); color: #fbfaf5; border: 0; border-radius: 999px; padding: 15px 34px; font-family: var(--sans); font-weight: 600; font-size: 15px; cursor: pointer; transition: background .15s ease; }
.single-info form.cart button:hover{ background: var(--sage-hover); }
.single-note{ display: flex; align-items: center; gap: 8px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin-top: 14px; }
.single-note svg{ color: var(--gold); flex: none; }
.single-details-grid{ display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.single-desc{ color: var(--ink-soft); font-size: 16px; line-height: 1.75; }
.single-desc h2{ margin-bottom: 14px; }
.single-desc p{ margin-bottom: 14px; }
.single-attrs h3{ font-family: var(--serif); font-size: 19px; font-weight: 500; margin-bottom: 8px; }
.attr-row{ display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 14.5px; }
.attr-key{ color: var(--ink-soft); }
.attr-val{ color: var(--ink); text-align: right; }
@media (max-width: 860px){
  .single-grid{ grid-template-columns: 1fr; gap: 28px; }
  .single-details-grid{ grid-template-columns: 1fr; gap: 28px; }
  .single-media{ max-width: 460px; }
}

/* ── WooCommerce: winkelwagen / afrekenen / account ─────────── */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; padding: 12px 24px; font-family: var(--sans); font-weight: 600;
  font-size: 14.5px; cursor: pointer; transition: all .15s ease; text-transform: none; line-height: 1.4;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover{ border-color: var(--sage); color: var(--sage); }
.woocommerce .button.alt, .woocommerce button.button.alt, .woocommerce #place_order,
.woocommerce .checkout-button, .woocommerce .wc-proceed-to-checkout .button{
  background: var(--sage); color: #fbfaf5; border-color: var(--sage);
}
.woocommerce .button.alt:hover, .woocommerce #place_order:hover, .woocommerce .checkout-button:hover{ background: var(--sage-hover); border-color: var(--sage-hover); color: #fbfaf5; }

.woocommerce table.shop_table{ border: 1px solid var(--line-soft); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; background: #fff; }
.woocommerce table.shop_table th{ font-family: var(--sans); font-weight: 600; color: var(--ink); background: var(--sand); }
.woocommerce table.shop_table td, .woocommerce table.shop_table th{ padding: 16px; border-top: 1px solid var(--line-soft); }
.woocommerce table.cart img{ width: 64px; border-radius: 8px; }
.woocommerce .quantity input.qty{ width: 70px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; text-align: center; }

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"], .woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"], .woocommerce-checkout textarea, .woocommerce-checkout select,
.select2-container .select2-selection--single{
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; font-size: 15px;
  background: #fff; color: var(--ink); min-height: 48px; box-shadow: none;
}
.woocommerce form .form-row label{ color: var(--ink-soft); font-size: 14px; margin-bottom: 4px; }

.cart_totals, .woocommerce-checkout-review-order, #order_review{ background: var(--sand); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(18px,2.4vw,28px); }
.woocommerce .cart-collaterals .cart_totals h2, #order_review_heading{ font-family: var(--serif); font-weight: 500; }
#payment{ background: transparent; }
#payment ul.payment_methods{ background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; }

.woocommerce-message, .woocommerce-info, .woocommerce-noreviews, .cart-empty{
  border-top: none; border-left: 4px solid var(--sage); background: var(--sage-tint);
  border-radius: 10px; padding: 16px 20px; color: var(--ink); font-size: 15px;
}
.woocommerce-message::before, .woocommerce-info::before{ color: var(--sage); }
/* Stond in goud, dezelfde tint als de rest van het accent, waardoor een mislukte
   betaling eruitzag als een tip. Nu een eigen foutkleur. */
.woocommerce-error{ border-left: 4px solid var(--error); background: var(--error-tint); border-radius: 10px; color: var(--ink); }
.woocommerce-error::before, .woocommerce-error a{ color: var(--error); }

.woocommerce .entry-content .wc-empty-cart-message, .woocommerce-cart .cart-empty{ text-align: left; }
.woocommerce-cart .return-to-shop .button.wc-backward{ background: var(--sage); color: #fbfaf5; border-color: var(--sage); }

/* ---------------- Homepage design alignment ---------------- */
body{
  background: #efeee9;
  font-size: 14px;
}
.site-header,
.site-footer{
  max-width: none;
  margin-inline: 0;
  box-shadow: none;
}
.site-main{
  max-width: none;
  margin-inline: 0;
  box-shadow: none;
}
.site-header{
  height: 64px;
  background: rgba(252,251,248,.94);
  border-bottom: 1px solid rgba(44,40,32,.08);
}
.header-inner{ height: 64px; }
.logo .mark{ width: 28px; height: 28px; }
.logo .wordmark b{ font-size: 18px; }
.logo .wordmark span{ font-size: 8px; }
.nav{ gap: 26px; }
.nav a{ font-size: 13px; }
.btn{ font-size: 13px; padding: 11px 22px; }
.btn--small{ padding: 10px 18px; font-size: 12px; }
.icon-btn{ width: 36px; height: 36px; }

.hero{
  background: #f4efe5;
  padding-block: clamp(42px, 5vw, 72px);
}
.hero-panel{
  min-height: 420px;
  grid-template-columns: .86fr 1.36fr;
  gap: clamp(24px, 4vw, 62px);
}
.hero-title{
  font-size: clamp(43px, 5vw, 68px);
  line-height: .96;
}
.hero-lead{
  max-width: 36ch;
  font-size: 15px;
  line-height: 1.65;
}
.hero-photo{
  align-self: stretch;
  aspect-ratio: auto;
  min-height: 420px;
  border-radius: 0;
  background: #eee4d4;
  border: 0;
}
.hero-photo img{
  object-fit: cover;
  object-position: center;
}

.band{ padding-block: clamp(38px, 6vw, 72px); }
.h-section{ font-size: clamp(28px, 3.4vw, 40px); }
.section-kicker,
.eyebrow{
  font-size: 10px;
  letter-spacing: .18em;
}
.steps{
  margin-top: 24px;
  gap: clamp(24px, 5vw, 72px);
}
.step-ico svg{ width: 34px; height: 34px; }
.step h3{ font-size: 17px; }
.step p,
.steps-foot,
.cause p,
.value p{ font-size: 13px; }

.collection-grid{
  gap: 24px;
  margin-top: 34px;
}
.product .ph{
  border-radius: 7px;
  background: #eee5d6;
}
.product h3{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.product .meta{ padding-top: 12px; }
.product .price{ font-size: 14px; margin-top: 8px; }
.product .donation{ font-size: 12px; }

.band--sand{ background: #f0eadf; }
.causes{ margin-top: 34px; }
.cause-ico{
  width: 62px;
  height: 62px;
  color: var(--gold);
}
.cause-ico svg{ width: 48px; height: 48px; }
.cause h4{ font-size: 16px; }

@media (max-width: 760px){
  .site-header,
  .site-footer{
    max-width: none;
    box-shadow: none;
  }
  .hero-panel{
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .hero-photo{
    order: -1;
    min-height: 280px;
    aspect-ratio: 4 / 3;
  }
}

.home .hero{
  min-height: clamp(520px, 62vw, 720px);
  display: flex;
  align-items: center;
  background-image:
    linear-gradient(90deg, rgba(244,239,229,.98) 0%, rgba(244,239,229,.94) 38%, rgba(244,239,229,.36) 62%, rgba(244,239,229,.02) 100%),
    var(--hero-bg);
  background-size: cover;
  background-position: center right;
}
.home .hero .wrap{
  max-width: none;
  width: 100%;
  padding-left: clamp(48px, 7vw, 96px);
  padding-right: var(--pad);
}
.home .hero-panel{
  display: block;
  min-height: 0;
}
.home .hero-copy{
  max-width: 410px;
  margin-left: 0;
}
.home .hero-photo{
  display: none;
}

@media (max-width: 760px){
  .home .hero{
    min-height: 620px;
    align-items: end;
    background-image:
      linear-gradient(180deg, rgba(244,239,229,.08) 0%, rgba(244,239,229,.72) 48%, rgba(244,239,229,.98) 100%),
      var(--hero-bg);
    background-position: center top;
  }
  .home .hero-copy{
    max-width: none;
  }
}

.logo-img{
  display: block;
  width: auto;
  height: auto;
}
.logo-img--header{
  width: 52px;
  max-height: 52px;
}
.logo-img--footer{
  width: 94px;
  max-width: 100%;
}
.site-header .logo{
  min-width: 64px;
}
.site-header .wrap{
  max-width: 1180px;
}
.header-actions{
  flex: 0 0 auto;
}
.header-actions .btn{
  box-shadow: 0 8px 18px rgba(111,126,92,.18);
}
.site-header .nav a{
  color: #3f392f;
}

.home .site-main > section:nth-of-type(2){
  background: #fffdfa;
  padding-block: clamp(34px, 5vw, 58px);
}
.home .site-main > section:nth-of-type(3){
  background: #f3eee6;
  padding-block: clamp(38px, 5.5vw, 64px);
}
.home .site-main > section:nth-of-type(4){
  background: #fffdfa;
  padding-block: clamp(40px, 5.8vw, 68px);
}
.home .steps{
  margin-top: 26px;
}
.home .steps-foot{
  margin-top: 26px;
}
.home .collection-grid{
  max-width: 980px;
  margin-inline: auto;
}
.home .product{
  background: #fffdfa;
  border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  border-radius: 8px;
  overflow: hidden;
}
.home .product .ph{
  border: 0;
  border-radius: 0;
  aspect-ratio: 1 / 1;
}
.home .product .meta{
  padding: 12px;
}
.home .band--sand .lead{
  max-width: 62ch;
  margin-inline: auto;
}
.home .causes{
  max-width: 980px;
  margin-inline: auto;
  margin-top: 30px;
}
.home .cause{
  padding-inline: 18px;
  border-right: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
}
.home .cause:last-child{
  border-right: 0;
}

.site-footer{
  background:
    radial-gradient(circle at 12% 10%, rgba(220,166,64,.10), transparent 24%),
    linear-gradient(180deg, #eee5d6 0%, #e9dfcf 100%);
  box-shadow: none;
}
.site-footer .wrap{
  max-width: 1120px;
}
.values{
  padding-block: clamp(34px, 5vw, 52px);
  gap: clamp(22px, 4vw, 44px);
}
.value .vico{
  width: 38px;
  height: 38px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,253,250,.54);
  border: 1px solid rgba(111,126,92,.18);
}
.value h4{
  font-size: 18px;
}
.footer-base{
  padding-block: 30px 24px;
  align-items: center;
}
.footer-base > .logo{
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(255,253,250,.34);
  border: 1px solid rgba(111,126,92,.12);
}
.footer-links{
  gap: 26px;
}
.footer-links a{
  font-size: 14px;
}
.footer-legal{
  padding-top: 16px;
  opacity: .82;
}
.footer-base small{
  flex-basis: 100%;
  display: block;
  margin-top: 16px;
  padding: 14px 18px;
  text-align: center;
  color: #fbfaf5;
  background: var(--sage);
  border: 1px solid rgba(111,126,92,.22);
  border-radius: 8px;
}

/* ---------------- Static pages ---------------- */
.page-hero{
  background:
    linear-gradient(180deg, #f4efe5 0%, #fffdfa 46%, #fffdfa 100%);
  padding-block: clamp(72px, 9vw, 128px);
}
.page-card{
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px);
  background: rgba(255,253,250,.86);
  border: 1px solid rgba(44,40,32,.08);
  border-radius: 10px;
  box-shadow: 0 24px 60px -48px rgba(44,40,32,.42);
}
.page-title{
  font-size: clamp(40px, 5.8vw, 70px);
  margin: 8px 0 28px;
}
.page-content{
  color: #514b42;
  font-size: 17px;
  line-height: 1.85;
}
.page-content > * + *{
  margin-top: 12px;
}
.page-content h2,
.page-content h3{
  margin-top: 26px;
  color: var(--ink);
}
.page-content h2{
  font-size: clamp(26px, 3vw, 34px);
}
.page-content h3{
  font-size: clamp(22px, 2.4vw, 28px);
}
.page-content em:first-child{
  display: inline-block;
  color: var(--sage);
  background: #eee5d6;
  border: 1px solid #ded3c0;
  border-radius: 999px;
  padding: 7px 14px;
  font-style: normal;
  font-size: 14px;
  margin-bottom: 8px;
}
.page-content a{
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-quicklinks{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid rgba(44,40,32,.10);
}
.page-quicklinks a{
  border: 1px solid rgba(111,126,92,.22);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--ink-soft);
  background: #fffdfa;
  font-size: 13px;
}
.page-quicklinks a:hover{
  color: #fffdfa;
  background: var(--sage);
}

/* ---------------- Story detail pages ---------------- */
.single-post .dhs-single-head{
  background:
    radial-gradient(circle at 82% 18%, rgba(220,166,64,.12), transparent 24%),
    linear-gradient(180deg, #f4efe5 0%, #fffdfa 100%);
  padding-block: clamp(54px, 8vw, 96px) clamp(34px, 5vw, 58px);
}
.single-post .dhs-single-head .wrap{
  max-width: 900px;
}
.single-post .dhs-single-title{
  max-width: 18ch;
  font-size: clamp(42px, 6vw, 72px);
}
.single-post .dhs-single-meta{
  color: var(--sage);
}
.single-post .dhs-single-hero-img{
  background: #fffdfa;
  padding-block: clamp(28px, 4vw, 52px);
}
.single-post .dhs-single-hero-img .wrap{
  max-width: 940px;
}
.single-post .dhs-single-hero-img__inner{
  border-radius: 10px;
  border: 0;
  box-shadow: 0 24px 70px -52px rgba(44,40,32,.55);
}
.single-post .dhs-single-article{
  background: #fffdfa;
  padding-bottom: clamp(54px, 7vw, 92px);
}
.single-post .dhs-single-body{
  max-width: 68ch;
  padding: clamp(22px, 4vw, 42px);
  background: #fffdfa;
  border-left: 1px solid rgba(111,126,92,.18);
  border-right: 1px solid rgba(111,126,92,.18);
}
.single-post .dhs-single-body p{
  font-size: 17px;
  line-height: 1.9;
  color: #4f493f;
}
.single-post .dhs-single-body img{
  border-radius: 8px;
  margin-block: 24px 10px;
}
.single-post .dhs-single-back{
  text-align: center;
}
.single-post .dhs-related{
  background: #eee5d6;
}
.single-post .dhs-related-card{
  border-radius: 8px;
  border: 1px solid rgba(44,40,32,.09);
}
.single-post .dhs-related-card__body{
  padding: 18px;
}

/* ---------------- Shop and product refresh ---------------- */
.post-type-archive-product .shop-head-band,
.tax-product_cat .shop-head-band{
  background:
    radial-gradient(circle at 86% 12%, rgba(220,166,64,.14), transparent 24%),
    linear-gradient(180deg, #f4efe5 0%, #fffdfa 100%);
  padding-block: clamp(54px, 8vw, 94px) clamp(34px, 5vw, 54px);
}
.shop-head-band .wrap{
  max-width: 1080px;
}
.shop-title{
  max-width: 12ch;
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1;
}
.shop-intro{
  max-width: 56ch;
}
.support-banner{
  margin-top: 32px;
  border-radius: 10px;
  background: #fffdfa;
  border: 0;
  box-shadow: 0 22px 60px -50px rgba(44,40,32,.5);
}
.shop-grid-band{
  background: #fffdfa;
}
.filters{
  justify-content: center;
}
.chip{
  background: #fffdfa;
  border-color: transparent;
  box-shadow: 0 1px 0 rgba(44,40,32,.06);
}
.shop-grid{
  align-items: stretch;
}
.shop-grid .product{
  border-radius: 8px;
  background: #fffdfa;
  border: 0;
  box-shadow: 0 14px 40px -34px rgba(44,40,32,.42);
}
.shop-grid .product:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 54px -38px rgba(44,40,32,.58);
}
.shop-grid .product .ph{
  background: #f1eadf;
  border-bottom: 0;
}
.shop-grid .product .ph img{
  mix-blend-mode: normal;
}
.chip:hover{
  border-color: transparent;
  background: #f4efe5;
}
.shop-grid .product .meta{
  display: flex;
  flex-direction: column;
  flex: 1;
}
.shop-grid .product .desc{
  flex: 1;
}
.shop-grid .product .btn{
  margin-top: 18px;
}

.single-product .single-hero{
  background:
    radial-gradient(circle at 82% 12%, rgba(220,166,64,.08), transparent 24%),
    linear-gradient(180deg, #fffdfa 0%, #fffdfa 100%);
  padding-block: clamp(48px, 7vw, 88px);
}
.single-product .single-grid{
  grid-template-columns: minmax(0, .95fr) minmax(340px, .75fr);
  align-items: center;
}
.single-product .single-media{
  border-radius: 10px;
  border: 0;
  background: #fffdfa;
  box-shadow: 0 24px 70px -50px rgba(44,40,32,.55);
}
.single-product .single-info{
  background: #f4efe5;
  border: 0;
  border-radius: 10px;
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 0 22px 60px -50px rgba(44,40,32,.55);
}
.single-product .single-info h1{
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.02;
}
.single-product .single-price{
  color: var(--sage);
  font-size: 26px;
}
.single-product .single-info .donation,
.single-product .single-note{
  background: #fffdfa;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(111,126,92,.10);
  padding: 12px 14px;
}
.single-product .single-details{
  background: #fffdfa;
}
.single-product .single-details-grid{
  background: #f4efe5;
  border: 0;
  border-radius: 10px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 16px 44px -38px rgba(44,40,32,.34);
}
.single-product .single-desc,
.single-product .single-attrs{
  color: #514b42;
}
.single-product .attr-row{
  background: rgba(255,253,250,.62);
  border-bottom: 0;
  border-radius: 7px;
  padding: 12px 14px;
  margin-top: 8px;
}
.single-product .band--sand:last-of-type{
  background: #fffdfa;
}

@media (max-width: 920px){
  .home .cause{
    border-right: 0;
  }
}
@media (max-width: 760px){
  .logo-img--header{
    width: 48px;
  }
  .home .product{
    border-radius: 8px;
  }
}

/* --- Gratis-verzending-balk bovenaan --- */
.dhs-topbar{
  background: var(--sage);
  color: #fbfaf5;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
}
.dhs-topbar .wrap{ padding: 8px 20px; }
.dhs-topbar__msg{ display: inline-block; }
@media (max-width: 560px){
  .dhs-topbar{ font-size: 12px; }
  .dhs-topbar .wrap{ padding: 7px 14px; }
}

/* --- Cart-icoon met live aantal-badge --- */
.icon-btn--cart{ position: relative; overflow: visible; }
.dhs-cart-count{
  position: absolute;
  top: -7px; right: -7px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--warm-white);
}
.dhs-cart-count.is-empty{ display: none; }

/* --- Toevoegen-feedback (AJAX) --- */
.single_add_to_cart_button.loading{ opacity: .6; cursor: progress; }
.dhs-added-note{
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--sage-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}
.dhs-added-note.show{ opacity: 1; transform: none; }
.dhs-added-note a{ color: var(--sage); font-weight: 600; text-decoration: underline; }

/* --- Mijn impact (donatie-totaal) --- */
.dhs-impact{
  text-align: center;
  padding: 28px 24px;
  margin: 28px 0 0;
  border-radius: 10px;
  background: #f4efe5;
  border: 0;
}
.dhs-impact__heart{ width: 40px; height: 40px; margin: 0 auto 6px; color: var(--sage); }
.dhs-impact__heart svg{ width: 40px; height: 40px; }
.dhs-impact__eyebrow{
  font-size: 12px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sage); margin-bottom: 6px;
}
.dhs-impact__amount{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(38px, 7vw, 56px); line-height: 1; color: var(--ink);
}
.dhs-impact__sub{ color: var(--ink-soft); font-size: 15px; margin-top: 10px; }
.dhs-impact__note{ color: var(--ink-soft); font-size: 14px; margin-top: 14px; }
.dhs-impact__note a{ color: var(--sage); font-weight: 600; text-decoration: underline; }

/* --- WooCommerce Mijn account in brand-stijl --- */
/* Grid (navigatie + content) ALLEEN als je ingelogd bent; anders wordt het
   login/registratie-formulier in de smalle 250px-kolom geknepen. */
.woocommerce-account.logged-in .woocommerce{
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: start;
}
/* Het lege notices-blok is het 1e grid-kind; laat het de volle breedte pakken
   zodat navigatie (kolom 1) en content (kolom 2) netjes op dezelfde rij staan. */
.woocommerce-account.logged-in .woocommerce > .woocommerce-notices-wrapper{ grid-column: 1 / -1; }
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation{
  grid-column: 1;
  grid-row: 2;
}
.woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content{
  grid-column: 2;
  grid-row: 2;
}
/* WooCommerce-core zet float:left/right + width:35%/65% op nav/content.
   In onze grid moet dat weg, anders wordt de kolombreedte genegeerd. */
.woocommerce-account.logged-in .woocommerce-MyAccount-navigation,
.woocommerce-account.logged-in .woocommerce-MyAccount-content{
  float: none;
  width: auto;
  margin: 0;
}
/* Uitgelogd: login + registratie naast elkaar, gecentreerd. */
.woocommerce-account:not(.logged-in) .woocommerce{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}
.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper{ flex: 1 0 100%; }
.woocommerce-account:not(.logged-in) .woocommerce-form-login,
.woocommerce-account:not(.logged-in) .woocommerce-form-register{
  flex: 1 1 360px;
  max-width: 460px;
  margin: 0;
}
.woocommerce-account .page-card{
  max-width: 1060px;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 0;
}
.woocommerce-account .page-title{
  text-align: center;
  font-size: clamp(46px, 5.8vw, 72px);
  margin-bottom: 10px;
}
.woocommerce-account .page-title::after{
  content: 'Welkom terug! Fijn dat je er bent.';
  display: block;
  margin-top: 10px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-soft);
}
.woocommerce-account .page-card > .section-kicker{ text-align: center; }
.woocommerce-account .page-content{ font-size: 15px; }
.woocommerce-account .woocommerce{
  background: #fffdfa;
  border-radius: 16px;
  padding: clamp(18px, 3vw, 30px);
  box-shadow: 0 26px 72px -54px rgba(44,40,32,.45);
}
.woocommerce-MyAccount-navigation{
  background: #fffdfa;
  border: 1px solid rgba(44,40,32,.10);
  border-radius: 10px;
  padding: 14px;
}
.woocommerce-MyAccount-navigation ul{ list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li{ margin: 0 0 6px; }
.woocommerce-MyAccount-navigation li a{
  display: block; padding: 11px 14px; border-radius: 8px;
  color: var(--ink); font-weight: 500; transition: background .2s ease, color .2s ease;
}
.woocommerce-MyAccount-navigation li a:hover{ background: rgba(255,253,250,.72); color: var(--sage); }
.woocommerce-MyAccount-navigation li.is-active a{ background: var(--sage); color: #fbfaf5; }
.woocommerce-MyAccount-content{
  min-width: 0;
  background: #fffdfa;
  border-radius: 10px;
  width: 100%;
}
.woocommerce-account .woocommerce-MyAccount-content > p{ display: none; }
.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type{
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.8;
}
.woocommerce-account .dhs-impact{
  max-width: none;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 20px;
  align-items: center;
  padding: 28px;
}
.woocommerce-account .dhs-impact__heart{
  grid-row: span 3;
  margin: 0;
}
.woocommerce-account .dhs-impact__amount{
  font-size: clamp(38px, 5vw, 54px);
}
.woocommerce-account .dhs-impact__sub{
  max-width: 32ch;
}
.woocommerce-MyAccount-navigation::after{
  content: 'Hulp nodig? \A We helpen je graag — neem gerust contact op.';
  white-space: pre-line;
  display: block;
  margin-top: 28px;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid rgba(44,40,32,.10);
  color: var(--ink-soft);
  line-height: 1.8;
  background: #fffdfa;
}
.dhs-account-welcome{
  position: relative;
  overflow: hidden;
  padding: 30px 34px;
  border-radius: 10px;
  background:
    linear-gradient(90deg, #fffdfa 0%, rgba(255,253,250,.94) 38%, rgba(255,253,250,.25) 66%),
    url("assets/account-pets.png") right center / cover no-repeat;
  border: 1px solid rgba(44,40,32,.08);
  min-height: 220px;
  display: flex;
  align-items: center;
}
.dhs-account-welcome div{ max-width: 360px; position: relative; z-index: 1; }
.dhs-account-welcome p{ margin: 0 0 4px; color: var(--ink-soft); }
.dhs-account-welcome strong{ display:block; font-size: 17px; margin-bottom: 18px; }
.dhs-account-welcome span{ display:block; color: var(--ink-soft); line-height: 1.6; margin-bottom: 20px; }
/* Knoppen in paginacontent mogen de sage-linkkleur NIET erven
   (anders sage tekst op een sage knop = onzichtbaar). */
.page-content a.btn{ text-decoration: none; }
.page-content a.btn--primary{ color: #fbfaf5; }
.page-content a.btn--ghost{ color: var(--ink); }
.dhs-account-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 24px;
}
.dhs-account-cards a{
  min-height: 130px;
  padding: 22px;
  border-radius: 10px;
  background: #fffdfa;
  border: 1px solid rgba(44,40,32,.10);
  color: inherit;
}
.dhs-account-cards b{ display:block; font-family: var(--serif); font-size: 20px; margin-bottom: 8px; }
.dhs-account-cards span{ color: var(--ink-soft); font-size: 14px; }
.dhs-account-title{ font-family: var(--serif); font-size: 26px; margin-bottom: 18px; }
.woocommerce-account .woocommerce-MyAccount-content h2,
.woocommerce-account .woocommerce-MyAccount-content h3{ font-family: var(--serif); }
.woocommerce-account table.woocommerce-orders-table,
.woocommerce-account table.shop_table{
  width: 100%; border-collapse: collapse; font-size: 14.5px;
}
.woocommerce-account table.shop_table th,
.woocommerce-account table.shop_table td{
  padding: 12px 10px; border-bottom: 1px solid var(--line-soft); text-align: left;
}
.woocommerce-account .woocommerce-button,
.woocommerce-account .button{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: 999px; background: var(--sage);
  color: #fbfaf5; font-weight: 600; font-size: 14px; border: 0; cursor: pointer;
}
.woocommerce-account .woocommerce-button:hover,
.woocommerce-account .button:hover{ background: var(--sage-hover); }
.woocommerce-account form .input-text,
.woocommerce-account input[type="text"],
.woocommerce-account input[type="email"],
.woocommerce-account input[type="password"],
.woocommerce-account input[type="tel"]{
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: #fff; font: inherit; color: var(--ink);
}
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register{
  max-width: 460px; padding: 26px; border: 1px solid var(--line);
  border-radius: var(--radius); background: #fff;
}
.woocommerce-account .woocommerce-form-row{ margin-bottom: 14px; }

/* Community-totaal in het impact-paneel */
.dhs-impact__community{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--sage);
  font-size: 14.5px;
  font-weight: 600;
}

@media (max-width: 760px){
  .woocommerce-account.logged-in .woocommerce{ grid-template-columns: 1fr; gap: 24px; }
  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-navigation,
  .woocommerce-account.logged-in .woocommerce > .woocommerce-MyAccount-content{
    grid-column: 1;
    grid-row: auto;
  }
  .dhs-account-cards{ grid-template-columns: 1fr; }
  .icon-btn--account{ display: inline-flex; }
}

/* --- Over mij: foto's van Mylene + haar dieren --- */
.dhs-about-photos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0;
}
.dhs-about-photos img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
}
@media (max-width: 600px){
  .dhs-about-photos{ grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* --- Pagina-hero (beeld + titel-overlay links) --- */
.dhs-phero{
  position: relative;
  background-image:
    linear-gradient(90deg, var(--warm-white) 0%, rgba(252,251,248,.86) 34%, rgba(252,251,248,.35) 58%, rgba(252,251,248,0) 80%),
    var(--phero);
  background-size: cover, cover;
  background-position: center, center right;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line-soft);
}
.dhs-phero .wrap{ padding-block: clamp(54px, 8vw, 104px); }
.dhs-phero__copy{ max-width: 540px; }
.dhs-phero__title{
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.4vw, 66px); line-height: 1.05; letter-spacing: -0.01em;
}
.dhs-phero__sub{ max-width: 46ch; }
@media (max-width: 760px){
  .dhs-phero{
    background-image:
      linear-gradient(180deg, var(--warm-white) 0%, rgba(252,251,248,.80) 46%, rgba(252,251,248,.30) 100%),
      var(--phero);
    background-position: center, center bottom;
  }
  .dhs-phero .wrap{ padding-block: clamp(36px, 9vw, 64px); min-height: 320px; }
  .dhs-phero__copy{ max-width: 100%; }
}

/* Pagina met hero-banner: het content-blok eronder lichter, minder top-ruimte */
.page-hero--has-banner{ background: var(--warm-white); padding-block: clamp(28px, 4vw, 52px) clamp(40px, 6vw, 80px); }
.page-hero--has-banner .page-card{ box-shadow: 0 18px 50px -44px rgba(44,40,32,.35); }

/* --- Shop-filters (gegroepeerd: Soort / Dier / Materiaal / Prijs) --- */
.shop-hero{
  min-height: clamp(330px, 39vw, 520px);
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, #fffdfa 0%, rgba(255,253,250,.96) 34%, rgba(255,253,250,.56) 56%, rgba(255,253,250,0) 72%),
    url("assets/hero-shop.jpg") right center / cover no-repeat;
}
.shop-hero .wrap{ width: 100%; }
.shop-hero__copy{ max-width: 470px; padding-block: clamp(58px, 8vw, 104px); }
.shop-hero .shop-title{ max-width: 11ch; margin-bottom: 20px; font-size: clamp(48px, 6.4vw, 78px); }
.shop-hero .shop-intro{ color: #5f584e; font-size: 17px; line-height: 1.75; }
.shop-grid-band{ padding-top: 34px; }
.dhs-filters{
  position: relative;
  z-index: 2;
  margin: -8px auto clamp(28px, 4vw, 42px);
  padding: 22px 24px 24px;
  border-radius: 12px;
  background: #fffdfa;
  border: 1px solid rgba(44,40,32,.11);
  box-shadow: 0 22px 70px -58px rgba(44,40,32,.55);
}
.dhs-filters__head,
.dhs-filters__foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.dhs-filters__foot{ margin-top: clamp(22px, 3vw, 34px); }

/* Dropdown-inhoud als nette lijst (i.p.v. losse pillen) */
.dhs-fmenu{ flex-direction: column; flex-wrap: nowrap; min-width: 224px; gap: 2px; padding: 8px; }
.dhs-fmenu .chip{
  display: flex; align-items: center; gap: 10px;
  width: 100%; border: 0; background: transparent; border-radius: 8px;
  padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--ink); text-align: left;
}
.dhs-fmenu .chip:hover{ background: var(--sage-soft); color: var(--sage); }
.dhs-fmenu .chip.is-active{ background: var(--sage-soft); color: var(--sage); font-weight: 600; }
.dhs-fcount{ margin-left: auto; color: var(--ink-faint); font-size: 12px; font-weight: 500; }
.dhs-fmenu .chip.is-active .dhs-fcount{ color: var(--sage); }

/* Multi-select (Dier/Materiaal): checkbox-indicator links */
.dhs-fmenu--multi .chip::before{
  content: ""; flex: 0 0 17px; width: 17px; height: 17px;
  border: 1.7px solid rgba(44,40,32,.28); border-radius: 5px; background: #fff;
}
.dhs-fmenu--multi .chip.is-active{ color: var(--ink); }
.dhs-fmenu--multi .chip.is-active::before{
  border-color: var(--sage);
  background: var(--sage) url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 8.4l3 3 6-6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* AJAX-laadstatus van de productlijst */
.shop-grid-band .wrap.is-loading{ opacity: .45; transition: opacity .15s ease; pointer-events: none; }
.dhs-filters__head h2{
  margin: 0;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.dhs-filters__head h2::before{
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  vertical-align: -5px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 5h16l-6 7v5l-4 2v-7L4 5z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
.dhs-filters__head div,
.dhs-sort{
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink-soft);
  font-size: 13px;
}
.dhs-filters__head a{ color: var(--sage); text-decoration: none; }
.dhs-filters__row{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.dhs-fselect{ position: relative; }
.dhs-fselect summary{
  list-style: none;
  cursor: pointer;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(44,40,32,.13);
  background: #fffdfa;
  color: var(--ink);
}
.dhs-fselect summary::-webkit-details-marker{ display: none; }
.dhs-fselect summary::after{
  content: "⌄";
  margin-left: auto;
  color: var(--sage);
  font-size: 18px;
  line-height: 1;
}
.dhs-fselect summary span{ font-weight: 600; font-size: 13px; }
.dhs-fselect summary b{ font-weight: 500; color: var(--ink-soft); }
.dhs-fmenu{
  position: absolute;
  inset: calc(100% + 8px) 0 auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  border-radius: 12px;
  background: #fffdfa;
  border: 1px solid rgba(44,40,32,.11);
  box-shadow: 0 18px 46px -34px rgba(44,40,32,.45);
}
.dhs-active-filters{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--ink-soft);
  font-size: 13px;
}
.dhs-active-filters::before{
  content: "♣";
  color: var(--sage);
  font-size: 17px;
}
.dhs-active-filters em{ font-style: normal; color: #9a9287; }
.dhs-sort .woocommerce-ordering{ margin: 0; }
.dhs-sort select{
  min-width: 150px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(44,40,32,.13);
  background: #fffdfa;
  color: var(--ink);
  padding: 0 34px 0 16px;
  font: inherit;
}
.dhs-fclear{
  align-self: flex-start; margin-top: 4px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--sage); text-decoration: underline; text-underline-offset: 3px;
}
.dhs-fclear:hover{ color: var(--sage-hover); }
.dhs-filters .chip{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #f0f4eb;
  color: var(--ink);
  border: 1px solid rgba(111,126,92,.13);
  box-shadow: none;
  font-size: 13px;
}
.dhs-filters .chip.is-active{ background: #e8eee1; color: var(--sage); }
.shop-support-band{ background: #fffdfa; padding-top: 8px; }
.shop-support-band .support-banner{ max-width: 1000px; margin-inline: auto; }
@media (max-width: 900px){
  .dhs-filters__row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px){
  .shop-hero{ background-position: 62% center; }
  .dhs-filters__row{ grid-template-columns: 1fr; }
  .dhs-fmenu{ position: static; margin-top: 8px; }
  .dhs-sort{ width: 100%; justify-content: space-between; }
}

/* --- Footer: social + andere projecten --- */
.footer-connect{
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 28px; padding-block: clamp(22px, 3vw, 32px);
  border-top: 1px solid var(--sand-deep);
}
.footer-social__label,
.footer-projects__label{
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 12px;
}
.footer-social__icons{ display: flex; gap: 10px; }
.footer-social__icons a{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--sand-deep); color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social__icons a:hover{ background: var(--sage); border-color: var(--sage); color: #fbfaf5; }
.footer-social__icons svg{ width: 19px; height: 19px; }
.footer-projects{ display: flex; flex-direction: column; gap: 6px; }
.footer-projects a{ color: var(--ink-soft); font-size: 14px; }
.footer-projects a:hover{ color: var(--sage); }
@media (max-width: 560px){ .footer-connect{ flex-direction: column; } }

/* ---- Kopje koffie voor de maker ---- */
.cmpl-koffie { display: flex; gap: 18px; align-items: center; justify-content: center; max-width: 640px; margin: 0 auto 34px; padding: 18px 22px; background: #fffdf8; border: 1px solid #e3dacd; border-radius: 14px; box-shadow: 0 6px 18px rgba(24,48,38,.06); }
.cmpl-koffie__kopje { flex: 0 0 auto; }
.cmpl-koffie__tekst { margin: 0 0 10px; font-size: .95rem; line-height: 1.5; color: #2d4037; }
.cmpl-koffie__form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cmpl-koffie__euro { font-weight: 700; color: #bd8940; }
.cmpl-koffie__bedrag { width: 72px; padding: 7px 10px; border: 1px solid #d4c8b8; border-radius: 8px; text-align: right; font-size: .95rem; }
.cmpl-koffie__knop { padding: 8px 16px; border: 0; border-radius: 999px; background: #426a50; color: #fff; font-weight: 600; cursor: pointer; }
.cmpl-koffie__knop:hover { background: #31523e; }
@media (max-width: 560px) { .cmpl-koffie { flex-direction: column; text-align: center; } .cmpl-koffie__form { justify-content: center; } }

/* Bos-variant van het koffieblok (praatdeurtje: kruidige thee bij Mosjes deurtje) */
.cmpl-koffie--bos { background: var(--surface); border-color: var(--line); }
.cmpl-koffie--bos .cmpl-koffie__tekst { color: var(--ink-soft); }
.cmpl-koffie--bos .cmpl-koffie__euro { color: var(--gold); }
.cmpl-koffie--bos .cmpl-koffie__knop { background: var(--sage); }
.cmpl-koffie--bos .cmpl-koffie__knop:hover { background: var(--sage-hover); }

/* Responsieve YouTube-embed in verhaalposts (was vaste 560px -> overliep op mobiel) */
.pd-video { position: relative; width: 100%; max-width: 720px; margin: 0 auto 1.4em; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #1a1626; box-shadow: 0 1px 2px rgba(44,40,32,.06), 0 22px 48px -30px rgba(44,40,32,.5); }
.pd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ============================================================
   Toegankelijkheid en aanraakbediening
   Toegevoegd 30 aug 2026 na een audit van dit stylesheet. Wat hier
   stond ontbrak volledig: er was nergens een focusstijl, er was geen
   rem voor mensen die minder beweging willen, en op mobiel waren de
   knoppen 32 tot 36 pixels hoog.
   ============================================================ */

/* --- Focus -------------------------------------------------
   Er stond nul :focus in dit thema. De standaardring van de browser
   bleef dus staan (beter dan outline:none, dat hier gelukkig nergens
   voorkwam), maar die botst met het palet en is op de ronde knoppen
   nauwelijks te zien. Deze ring hoort bij het merk en heeft ruimte
   om zich heen, zodat hij ook op een donkere foto opvalt.
   Alleen :focus-visible, dus een muisklik laat geen ring achter. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Op een sage vlak zou een sage ring wegvallen. */
:where(.btn--primary, .cmpl-koffie__knop):focus-visible {
  outline-color: var(--ink);
  outline-offset: 3px;
}

/* --- Minder beweging ---------------------------------------
   Er staan een stuk of twaalf transities en zestien transforms in dit
   bestand, plus scroll-behavior: smooth op html. Dat laatste is voor
   mensen met evenwichtsklachten de vervelendste van de drie. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Aanraakdoelen -----------------------------------------
   Alleen op een aanraakscherm, zodat de compacte knoppen op een
   bureaublad blijven zoals ze zijn. 44 pixels is de ondergrens waar
   zowel Apple als de WCAG-richtlijn op uitkomt. */
@media (pointer: coarse) {
  .btn,
  .btn--small,
  .dhs-story-chip,
  .chip {
    min-height: 44px;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }
}

/* De foutkleur zelf staat bij de WooCommerce-meldingen hierboven,
   zodat die regels op één plek blijven staan. */

/* ============================================================
   Goed om te weten: verzendkosten, levertijd en hoe het verstuurd wordt.
   Staat onder de bestelknop op de productpagina.
   ============================================================ */

.pd-bezorginfo {
  margin-top: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in oklab, var(--sand) 35%, transparent);
}

.pd-bezorginfo__kop {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.pd-bezorginfo ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pd-bezorginfo li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
}

.pd-bezorginfo li + li {
  margin-top: 4px;
}

.pd-bezorginfo li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .68em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
}