/*
Theme Name: Draag voor dieren — Bridge
Theme URI: https://draagvoordieren.nl
Author: MyCreatief
Description: Warm, rustig theme voor Draag voor dieren: sage, sand, warm wit, brown-black, subtiel goud. Letterlijke implementatie van het ontwerp.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
License: Proprietary
Text Domain: dierenhart-bridge
*/

/* ============================================================
   Draag voor dieren — 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:        #6f7e5c;
  --warm-white:  #fcfbf8;   /* page-bg: near-white met subtiele warme tint */
  --sand:        #ece3d3;   /* warm cream voor hero-panel / causes / footer */
  --sand-deep:   #e0d6c2;
  --gold:        #b5934e;

  /* --- Derived --- */
  --ink:         #2c2820;
  --ink-soft:    #6c655a;
  --ink-faint:   #9a9183;
  --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);
  --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;
}

/* ---------------- Donation card (single product) ---------------- */
.dhs-donation-card{
  margin: 18px 0 22px;
  padding: 18px 20px;
  border: 1px solid var(--sand-deep);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--sand) 50%, var(--surface));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dhs-donation-card__head{
  display: flex;
  align-items: center;
  gap: 14px;
}
.dhs-donation-card__icon{
  width: 32px;
  height: 32px;
  color: var(--sage);
  flex: none;
}
.dhs-donation-card__head-text{
  display: flex;
  flex-direction: column;
}
.dhs-donation-card__amount{
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 500;
  line-height: 1;
  color: var(--sage);
  margin: 0;
}
.dhs-donation-card__label{
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 2px 0 0;
}
.dhs-donation-card__body{
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* ---------------- 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;
  color: var(--ink-faint); 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; }

/* Donatie-band (homepage tussen hero en steps) */
.dhs-donation-band{ padding-block: clamp(40px, 6vw, 72px); }
.dhs-donation-totals{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 48px);
  max-width: 760px;
  margin: clamp(28px, 4vw, 48px) auto 0;
}
.dhs-donation-total{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(20px, 2.5vw, 32px) clamp(16px, 2vw, 28px);
  background: var(--sand);
  border-radius: var(--radius);
  border: 1px solid var(--sand-deep);
}
.dhs-donation-total__label{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.dhs-donation-total__value{
  font-family: var(--serif);
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 400;
  line-height: 1;
  color: var(--sage);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dhs-donation-band__note{
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
  max-width: 56ch;
  margin: clamp(24px, 3vw, 36px) auto 0;
  line-height: 1.55;
}
@media (max-width: 540px){
  .dhs-donation-totals{ grid-template-columns: 1fr; gap: 16px; }
}

.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; flex-wrap: wrap; }
.single-thumbs img{ width: 72px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.single-thumb{ padding: 0; border: 1px solid var(--line-soft); border-radius: 12px; background: #fffdfa; cursor: pointer; overflow: hidden; line-height: 0; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.single-thumb:hover{ border-color: var(--accent, #c9772f); transform: translateY(-1px); }
.single-thumb.is-active{ border-color: var(--accent, #c9772f); box-shadow: 0 0 0 2px var(--accent, #c9772f) inset; }
.single-thumb:focus-visible{ outline: 2px solid var(--accent, #c9772f); outline-offset: 2px; }
.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); }
.woocommerce-error{ border-left: 4px solid var(--gold); background: #fbf3e6; border-radius: 10px; }

.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; }
.dhs-donation-compact{
  max-width: 760px;
  margin: 38px auto 0;
  padding: clamp(24px, 4vw, 38px);
  background: #eee5d6;
  border: 1px solid #ded3c0;
  border-radius: 8px;
  text-align: center;
}
.dhs-donation-compact h3{
  font-size: clamp(24px, 3vw, 34px);
  margin: 8px 0 24px;
}
.dhs-donation-compact .dhs-donation-totals{
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 0;
}
.dhs-donation-compact .dhs-donation-total{
  background: #fffdfa;
  padding: 16px;
}
.dhs-donation-compact .dhs-donation-total__value{
  font-size: clamp(26px, 3vw, 34px);
}

@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/draag-hero-generated-clean.png") 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: 650; }
.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: 650;
  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: 650; font-size: 13px; }
.dhs-fselect summary b{ font-weight: 450; 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; } }

/* ---------------- Maak zelf promo (homepage) ---------------- */
.maakzelf-panel{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.maakzelf-photo{
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  background: color-mix(in oklab, var(--sand) 80%, #fff);
}
.maakzelf-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.maakzelf-copy{ max-width: 46ch; }
@media (max-width: 880px){
  .maakzelf-panel{ grid-template-columns: 1fr; gap: 28px; }
  .maakzelf-photo{ aspect-ratio: 4 / 3; }
}

/* --- Soorten: de eerste laag van de winkel --------------------------------
   Vijf rustige keuzes in plaats van 32 bijna gelijke miniaturen. De kaart is
   bewust groter dan een productkaart: hier kiest de bezoeker een richting, en
   dat mag meer ruimte hebben dan het kiezen van een ontwerp.                */
.dhs-soortkop{
  font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500;
  color: var(--ink); margin: 0 0 clamp(20px, 2.4vw, 28px);
}
.dhs-soorten{
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 30px); margin-bottom: clamp(32px, 4vw, 48px);
}
.dhs-soort{
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--sand-deep);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dhs-soort:hover{
  transform: translateY(-3px); border-color: var(--sage);
  box-shadow: 0 1px 2px rgba(44,40,32,.04), 0 22px 44px -30px rgba(44,40,32,.4);
}
.dhs-soort:focus-visible{ outline: 2px solid var(--sage); outline-offset: 3px; }
.dhs-soort__beeld{
  display: block; aspect-ratio: 1 / 1; background: var(--sand);
  border-bottom: 1px solid var(--line-soft); overflow: hidden;
}
.dhs-soort__foto{ width: 100%; height: 100%; object-fit: cover; display: block; }
.dhs-soort__body{ display: block; padding: clamp(18px, 2vw, 24px); }
.dhs-soort__naam{
  display: block; font-family: var(--serif); font-size: 20px; font-weight: 500;
  color: var(--ink); margin-bottom: 4px;
}
.dhs-soort__meta{ display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-soft); }
.dhs-soort__meta .amount{ color: var(--ink); font-weight: 600; }

/* Terug naar de soortkeuze, boven de filterbalk. */
.dhs-soort-terug{ margin-bottom: clamp(16px, 2vw, 22px); }
.dhs-terug-link{
  font-family: var(--sans); font-size: 14px; color: var(--ink-soft);
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
.dhs-terug-link:hover{ color: var(--sage); }

@media (max-width: 900px){
  .dhs-soorten{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px){
  .dhs-soorten{ grid-template-columns: 1fr; }
}