/*
 * vp-ui.css · VergelijkParfums (v70)
 *
 * Opmaak van alles wat pas na een klik of scroll verschijnt of van stand wisselt: header verbergen,
 * zoeksuggesties, zoekscherm, vergelijkbalk en fab, gekozen-stand van de vergelijkknop, mobiel menu,
 * de lijst onder het vergelijk-zoekveld. LiteSpeed maakt per pagina "unique CSS" (UCSS) uit wat zijn
 * crawler op de pagina ziet; klassen die JavaScript later zet, vielen daaruit en de onderdelen stonden
 * live zonder opmaak. Dit bestand slaat LiteSpeed over (data-no-optimize + litespeed_optimize_css_excludes,
 * functions.php), dus het komt altijd heel mee. Laadt na style.css; de blokken staan in de oude volgorde.
 *
 * Nieuwe interactieve onderdelen horen hier, niet in style.css.
 */

/* Basis dropdown-styling buiten #vergelijk-top (header-variant is daar gescoped) */
.vp-compare-search { position: relative; }
.vp-compare-search .vp-compare-suggests {
  display: block;
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 200;
  width: 100%; min-width: 280px; box-sizing: border-box;
  list-style: none; margin: 0; padding: 6px;
  background: #fff; border: 1px solid rgba(23,61,68,0.12);
  border-radius: 14px; box-shadow: 0 16px 44px rgba(23,61,68,0.18);
  max-height: 400px; overflow-y: auto; overflow-x: hidden;
}
.vp-compare-search .vp-compare-suggests[hidden] { display: none; }
.vp-compare-search .vp-compare-suggests li { display: block; margin: 0; padding: 0; list-style: none; }
.vp-compare-search .vp-compare-suggests button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; cursor: pointer;
  padding: 8px; border-radius: 10px; text-align: left;
}
.vp-compare-search .vp-compare-suggests button:hover { background: rgba(23,61,68,0.06); }
/* Toetsenbord-highlight (↓/↑ navigatie) — beide dropdown-varianten */
.vp-compare-search .vp-compare-suggests button.is-active { background: rgba(23,61,68,0.12); }

/* v50: het v39-subgrid-board (cmp-*) is vervangen door het vpc-blok onderaan. */

/* #9 — Vergelijk-balk zoek-autocomplete */
.vp-compare-search { position: relative; width: 100%; }
.vp-compare-search-input {
  width: 100%; box-sizing: border-box;
  border: 1px dashed rgba(23,61,68,0.28);
  background: rgba(255,255,255,0.7);
  border-radius: 999px; padding: 10px 14px; font-size: 13px;
  color: var(--vp-text); outline: none; transition: border-color .15s, background .15s;
}
.vp-compare-search-input::placeholder { color: var(--vp-muted); }
.vp-compare-search-input:focus { border-style: solid; border-color: var(--vp-accent); background: #fff; }
/* Het verborgen submit-form nooit tonen (voorkomt lege div onder het zoekveld) */
.vp-compare-add-form { display: none !important; }
.vp-compare-suggests img,
.vp-suggest-noimg {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: 0 0 40px;
  background: linear-gradient(135deg, #faf2e7, #f0dec7);
}
.vp-suggest-txt { display: flex; flex-direction: column; min-width: 0; }
.vp-suggest-brand { font-size: 11px; color: var(--vp-muted); text-transform: uppercase; letter-spacing: .04em; }
.vp-suggest-title { font-size: 13px; color: var(--vp-text); font-weight: 600; line-height: 1.2; }
/* Padding met genoeg specificity om de li-resets (header + vergelijkpagina) te verslaan */
.vp-compare-search .vp-compare-suggests li.vp-compare-empty { padding: 10px 12px !important; }
.vp-compare-empty { color: var(--vp-muted); font-size: 13px; list-style: none; }

.vp-button[disabled],.vp-button.is-disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.compare-inline-toggle.is-full {opacity:.55;cursor:not-allowed} /* v50: vergelijking vol (4/4) */

/* Mobiele ingang (v50): vaste balk onderin zodra er iets in de vergelijking zit */
.vp-compare-fab{display:none}
@media (max-width:768px){
  body.vp-has-fab{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .vp-compare-fab{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#1f2b2c;box-shadow:0 -10px 30px rgba(12,27,31,.28);text-decoration:none;color:#fffaf3} /* v69: donker, zoals de desktopbalk */
  .vp-compare-fab:hover{color:#fffaf3}
  .vp-compare-fab-thumbs{display:flex;align-items:center;flex:0 0 auto}
  .vp-compare-fab-thumbs img{width:34px;height:34px;object-fit:contain;border-radius:50%;background:#fff;border:2px solid #1f2b2c;box-sizing:content-box}
  .vp-compare-fab-thumbs img + img{margin-left:-10px}
  .vp-compare-fab-text{display:flex;flex-direction:column;line-height:1.2;flex:1 1 auto;min-width:0}
  .vp-compare-fab-text b{font-size:13.5px}
  .vp-compare-fab-text small{font-size:11.5px;color:rgba(255,250,243,.72);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vp-compare-fab-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:999px;background:var(--vp-gold);color:var(--vp-text);font-weight:700;font-size:14px;flex:0 0 auto}
}

/* ── #21 Mobiel menu (v20260511.51): knop in de logo-rij, paneel van rechts met dimmer ── */
.vp-menu-toggle,.vp-menu,.vp-menu-backdrop{display:none}
@media (max-width:1099px){ /* v69: was 768px, de compacte header loopt tot 1099px */
  .vp-menu-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;margin-left:auto;padding:0;border:1px solid rgba(23,61,68,.14);border-radius:12px;background:rgba(255,255,255,.7);color:var(--vp-text);cursor:pointer}
  .vp-menu-toggle-bars{display:flex;flex-direction:column;gap:5px;width:20px}
  .vp-menu-toggle-bars i{display:block;height:2px;border-radius:2px;background:currentColor}
  .vp-menu-backdrop{display:block;position:fixed;inset:0;z-index:998;background:rgba(23,61,68,.32);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;transition:opacity .25s}
  .vp-menu-backdrop.is-open{opacity:1}
  .vp-menu-backdrop[hidden],.vp-menu[hidden]{display:none}
  .vp-menu{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:999;width:min(86vw,360px);box-sizing:border-box;background:var(--vp-surface);box-shadow:-12px 0 40px rgba(23,61,68,.18);transform:translateX(100%);transition:transform .28s ease;overflow-y:auto;overscroll-behavior:contain;padding:0 18px calc(18px + env(safe-area-inset-bottom))}
  .vp-menu.is-open{transform:none}
  html.vp-menu-open,html.vp-menu-open body{overflow:hidden}
  .vp-menu-head{display:flex;align-items:center;justify-content:space-between;min-height:64px;margin:0 -18px 6px;padding:0 10px 0 18px;border-bottom:1px solid var(--vp-border)}
  .vp-menu-title{font-family:var(--vp-serif,'Cormorant Garamond',Georgia,serif);font-size:22px;font-weight:700}
  .vp-menu-close{width:44px;height:44px;border:0;background:transparent;border-radius:12px;color:var(--vp-text);font-size:20px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
  .vp-menu-close:hover{background:rgba(23,61,68,.06)}
  .vp-menu-search{display:flex;align-items:center;gap:6px;margin:12px 0 14px;padding:3px 3px 3px 16px;background:#fff;border:1px solid rgba(23,61,68,.14);border-radius:999px}
  .vp-menu-search input{flex:1 1 auto;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;padding:9px 0;color:var(--vp-text);outline:none;box-shadow:none} /* 16px: anders zoomt iOS in bij focus */
  .vp-menu-search input::placeholder{color:var(--vp-muted)}
  .vp-menu-search button{flex:0 0 40px;width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(135deg,var(--vp-text),var(--vp-accent));color:#fffaf3;display:grid;place-items:center;cursor:pointer;padding:0}
  .vp-menu ul.vp-menu-list{list-style:none;margin:0;padding:0}
  .vp-menu .vp-menu-list li{margin:0;padding:0;list-style:none;background:none}
  .vp-menu .vp-menu-list a{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 12px;border-radius:12px;font-size:16px;font-weight:600;color:var(--vp-text);text-decoration:none}
  .vp-menu .vp-menu-list a::after{content:"\203A";font-size:20px;line-height:1;color:rgba(23,61,68,.35)}
  .vp-menu .vp-menu-list a:hover{background:rgba(23,61,68,.06);color:var(--vp-text)}
  .vp-menu .vp-menu-list .current-menu-item > a,.vp-menu .vp-menu-list .current-page-ancestor > a,.vp-menu .vp-menu-list .current_page_item > a{color:var(--vp-accent);background:rgba(199,154,85,.12);box-shadow:inset 3px 0 0 var(--vp-gold)}
  .vp-menu-group{margin-top:14px;padding-top:12px;border-top:1px solid var(--vp-border)}
  .vp-menu-label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--vp-muted);padding:0 12px;margin-bottom:4px}
  .vp-menu .vp-menu-list.is-secondary a{min-height:42px;font-weight:500;font-size:15px}
  .vp-menu-actions{margin-top:auto;padding-top:18px;display:grid;gap:10px}
  .vp-menu-actions .vp-button{width:100%;box-sizing:border-box;min-height:46px;font-size:15px}
  .vp-menu-actions .vp-button:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){.vp-menu,.vp-menu-backdrop{transition:none}}

/* ══════════════════════════════════════════════════════════════
   v69 — Header op één rij, zoekveld met suggesties, vergelijkbalk onderin.
   Ontwerp: Design-canvas WNSCLmKPF2EQmia9Maka4c (Voorstel, Dock, Terug, Mobiel).
   De topbalk, de knop "Vergelijking 0/4" en de vergelijkbalk in de header zijn weg, met hun
   CSS (zo'n 600 regels verspreid over tien plekken). Twee variabelen:
   --vp-header-height  gemeten hoogte (header.php + ckv_header_height_script): 72 / 60 px;
   --vp-header-offset  wat er bovenin bezet is: 0 zodra de header wegschuift
                       (html.vp-hdr-hidden, ckv_header_js), zodat plakkende filters,
                       sidebars en stroken mee omhoog schuiven.
   ══════════════════════════════════════════════════════════════ */
:root { --vp-header-height: 72px; --vp-header-offset: var(--vp-header-height); }
html.vp-hdr-hidden { --vp-header-offset: 0px; }
body #content { padding-top: calc(var(--vp-header-height) + var(--vp-content-gap)) !important; }

#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 999; height: auto; /* rstyle.css zet nog 85px */
  background: var(--vp-surface);
  border-bottom: 1px solid var(--vp-border);
  transition: transform .25s ease, box-shadow .25s ease;
}
html.vp-hdr-scrolled #header { border-bottom-color: transparent; box-shadow: 0 10px 30px rgba(23,61,68,0.12); }
html.vp-hdr-hidden #header { transform: translateY(-100%); box-shadow: none; }
.vp-hdr-row { display: flex; align-items: center; gap: 22px; height: 72px; }
.vp-hdr-logo { display: block; flex: 0 0 auto; line-height: 0; }
.vp-hdr-logo img { display: block; width: auto; height: 35px; }
.vp-hdr-logo .site-logo-mobile { display: none; }

/* Menu: kleur, hover en actief (bordeaux + gouden streep) komen van de bestaande #nav-regels. */
.vp-hdr-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
#nav.vp-hdr-nav ul { gap: 20px; flex-wrap: nowrap; }
#nav.vp-hdr-nav li a { display: block; padding: 6px 0; font-size: 14.5px; letter-spacing: 0; white-space: nowrap; }
#nav.vp-hdr-nav .menu-item-home { display: none; } /* het logo is de link naar home (mockup) */
/* Gemeten (1280 breed, korte menunamen): logo 235 + menu ±530 + zoekveld 210 + inloggen 116 + 3 × 22
   past in de 1200 van .wrap. Tussen 1100 en 1239 eerst kleiner logo, smaller zoekveld en inloggen als
   icoon; daaronder de compacte header. Lange namen ("Parfum Dames") passen op geen enkele breedte. */
@media (min-width: 1100px) and (max-width: 1239px) {
  .vp-hdr-logo img { height: 30px; }
  .header-search { width: 180px; }
  .vp-hdr-row .header-login { width: 40px; padding: 0; justify-content: center; }
  .vp-hdr-row .header-login > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Zoekveld tijdens het typen (.is-open zet ckv_header_js) */
.header-search:focus-within,
.header-search.is-open { background: #fff; box-shadow: 0 0 0 2px var(--vp-accent); }

/* Suggesties onder het zoekveld */
.vp-search-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1000;
  width: 460px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 10px;
  background: #fff; border: 1px solid var(--vp-border); border-radius: 18px;
  box-shadow: 0 22px 50px rgba(12,27,31,0.18); text-align: left; cursor: default;
}
.vp-search-label { display: block; padding: 6px 10px 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--vp-muted); }
.vp-search-panel ul.vp-search-list { list-style: none; margin: 0; padding: 0; max-height: min(420px, calc(100vh - 220px)); overflow-y: auto; }
.vp-search-panel li.vp-search-row { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; border-radius: 12px; background: none; }
.vp-search-panel li.vp-search-row:hover,
.vp-search-panel li.vp-search-row:focus-within { background: var(--vp-bg); }
.vp-search-hit { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 8px 10px; border-radius: 12px; color: var(--vp-text); text-decoration: none; }
.vp-search-hit:hover { color: var(--vp-text); }
.vp-search-hit:focus-visible { outline: 2px solid var(--vp-accent); outline-offset: -2px; }
.vp-search-hit img,
.vp-search-hit .vp-suggest-noimg { width: 44px; height: 44px; flex: 0 0 44px; object-fit: contain; border-radius: 10px; background: var(--vp-surface); }
.vp-search-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vp-search-name { font-size: 14px; font-weight: 500; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vp-search-name b { font-weight: 700; }
.vp-search-sub { font-size: 12px; line-height: 1.3; color: var(--vp-muted); }
.vp-search-add {
  flex: 0 0 36px; width: 36px; height: 36px; margin-right: 10px; padding: 0;
  border: 0; border-radius: 50%; background: #f2ece3; color: var(--vp-text);
  display: grid; place-items: center; font-size: 14px; cursor: pointer;
}
.vp-search-add:hover { background: #e8dccb; }
.vp-search-add.is-active { background: var(--vp-gold); color: var(--vp-text); } /* v70: in de vergelijking = goud */
.vp-search-add.is-active:hover { background: #d4a964; }
.vp-search-add[disabled] { opacity: .45; cursor: not-allowed; }
.vp-search-panel li.vp-search-empty { padding: 10px; list-style: none; font-size: 13.5px; color: var(--vp-muted); }
.vp-search-all {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 6px; padding: 12px 10px 6px; border-top: 1px solid var(--vp-border);
  font-size: 13.5px; font-weight: 600; color: var(--vp-accent); text-decoration: none;
}
.vp-search-all:hover { color: var(--vp-accent-soft); }

/* Vergelijkknop (kaart, parfumpagina): + of vinkje. v70: gekozen = goud, zoals de knop in de
   vergelijkbalk (vergelijken is goud); donkere tekst op goud 6,7:1. */
.compare-inline-toggle i { font-size: 13px; }
.vp-button-ghost.compare-inline-toggle.is-active,
.card-actions-row .compare-inline-toggle.is-active { background: var(--vp-gold) !important; border-color: var(--vp-gold) !important; color: var(--vp-text) !important; }
.vp-button-ghost.compare-inline-toggle.is-active:hover,
.card-actions-row .compare-inline-toggle.is-active:hover { background: #d4a964 !important; border-color: #d4a964 !important; color: var(--vp-text) !important; }
.compare-inline-toggle[aria-busy="true"], .vp-search-add[aria-busy="true"] { opacity: .6; cursor: progress; }
/* v70: de drie teksten liggen over elkaar (archive-product-content.php); de knop is zo breed als de
   langste, dus Bekijk verspringt niet als je kiest */
.compare-label { display: inline-grid; justify-items: center; }
.compare-label > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.compare-inline-toggle .l-on, .compare-inline-toggle .l-full,
.compare-inline-toggle.is-active .l-off, .compare-inline-toggle.is-full .l-off { visibility: hidden; }
.compare-inline-toggle.is-active .l-on, .compare-inline-toggle.is-full .l-full { visibility: visible; }

/* Kaartknoppen iets compacter ("In vergelijking" paste niet op een kaart van 270 px). Op een smalle
   kaart (onder 250 px, bv. drie kolommen tussen 1100 en 1240) wordt de vergelijkknop rond met alleen
   het icoon, zoals op mobiel; de naam blijft in aria-label. */
.premium-perfume-card .card-actions-row .vp-button { padding: 0 14px; }
.premium-perfume-card .card-actions-row .compare-inline-toggle { gap: 6px; }
.premium-perfume-card-inner { container-type: inline-size; }
@container (max-width: 250px) {
  .card-actions-row .compare-inline-toggle { flex: 0 0 44px !important; width: 44px; padding: 0 !important; gap: 0 !important; }
  .card-actions-row .compare-label .l-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Compacte header: logo, vergrootglas (v70: opent het zoekscherm #vp-search-sheet), menu */
.vp-hdr-iconbtn { display: none; }
@media (max-width: 1099px) {
  :root { --vp-header-height: 60px; }
  .vp-hdr-row { height: 60px; gap: 8px; }
  .vp-hdr-nav,
  .vp-hdr-row .header-search,
  .vp-hdr-row .header-login { display: none; }
  .vp-hdr-logo { margin-right: auto; }
  .vp-hdr-logo img { height: 30px; }
  .vp-hdr-iconbtn {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px;
    width: 44px; height: 44px; padding: 0; border: 1px solid rgba(31,27,26,0.14); border-radius: 12px;
    background: var(--vp-surface); color: var(--vp-text); font-size: 18px; cursor: pointer;
  }
  .vp-hdr-row .vp-menu-toggle { margin-left: 0; background: var(--vp-surface); border-color: rgba(31,27,26,0.14); }
  .vp-menu-search { position: relative; }
  .vp-menu-search .vp-search-panel { top: calc(100% + 8px); left: -6px; right: -6px; width: auto; max-width: none; }
}
@media (max-width: 768px) {
  .vp-hdr-logo .site-logo-desktop { display: none; }
  .vp-hdr-logo .site-logo-mobile { display: block; }
}

/* v70: zoekscherm (mobiel en tablet): balk bovenin, suggesties eronder over de volle breedte */
.vp-search-sheet { position: fixed; inset: 0; z-index: 1002; box-sizing: border-box; padding: 10px 12px calc(16px + env(safe-area-inset-bottom)); background: var(--vp-surface); overflow-y: auto; overscroll-behavior: contain; }
html.vp-search-open, html.vp-search-open body { overflow: hidden; }
.vp-sheet-bar { display: flex; align-items: center; gap: 10px; height: 50px; box-sizing: border-box; padding: 0 5px 0 16px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px var(--vp-accent); }
.vp-sheet-bar > .fa { flex: 0 0 auto; font-size: 16px; color: var(--vp-text); }
.vp-sheet-bar input[type="search"] { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; outline: none; box-shadow: none; font: inherit; font-size: 16px; color: var(--vp-text); -webkit-appearance: none; appearance: none; } /* 16px: anders zoomt iOS in */
.vp-sheet-bar input[type="search"]::placeholder { color: var(--vp-muted); opacity: 1; }
.vp-sheet-close { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(31,27,26,0.06); color: var(--vp-text); display: grid; place-items: center; font-size: 16px; cursor: pointer; }
.vp-search-sheet .vp-search-panel { position: static; width: auto; max-width: none; margin-top: 12px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.vp-search-sheet .vp-search-panel ul.vp-search-list { max-height: none; overflow: visible; }

/* Vergelijkbalk onderin (desktop). Open = header weg; ingeklapt = knop rechtsonder (ckv_header_js). */
.vp-dock { display: none; }
@media (min-width: 769px) {
  body.vp-has-dock { padding-bottom: 104px; }
  .vp-dock { display: block; }
  .vp-dock-bar {
    position: fixed; left: 50%; bottom: 20px; z-index: 990;
    width: min(1200px, calc(100% - 48px)); height: 64px; box-sizing: border-box; container-type: inline-size; /* v70: zo breed als .wrap (was 1040), ruimte voor 4 namen */
    display: flex; align-items: center; gap: 10px; padding: 0 10px 0 20px;
    background: #1f2b2c; color: #fffaf3; border-radius: 20px; box-shadow: 0 16px 44px rgba(12,27,31,0.32);
    transform: translateX(-50%); transition: transform .25s ease, opacity .25s ease, visibility .25s;
  }
  .vp-dock[data-state="pill"] .vp-dock-bar { transform: translate(-50%, calc(100% + 40px)); opacity: 0; visibility: hidden; }
  .vp-dock-head { display: flex; flex-direction: column; flex: 0 0 auto; line-height: 1.25; padding-right: 6px; }
  .vp-dock-head b { font-size: 14px; }
  .vp-dock-head span { font-size: 12px; color: rgba(255,250,243,0.72); white-space: nowrap; }
  .vp-dock ul.vp-dock-items { display: flex; gap: 10px; flex: 0 1 auto; min-width: 0; margin: 0; padding: 0; list-style: none; }
  .vp-dock li.vp-dock-item {
    display: flex; align-items: center; gap: 9px; flex: 0 1 222px; width: 222px; min-width: 0;
    height: 46px; box-sizing: border-box; margin: 0; padding: 0 6px 0 5px; list-style: none;
    border-radius: 14px; background: var(--vp-surface); border: 0; /* v70: licht vak op de donkere balk (was 8% wit, viel weg) */
  }
  .vp-dock-item img,
  .vp-dock-item .vp-suggest-noimg { width: 36px; height: 36px; flex: 0 0 36px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--vp-border); }
  .vp-dock-item a {
    flex: 1 1 auto; min-width: 0; font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--vp-text); text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .vp-dock-item a:hover { color: var(--vp-text); text-decoration: underline; }
  .vp-dock-item form { margin: 0; flex: 0 0 auto; }
  .vp-dock-item button {
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(31,27,26,0.08); color: var(--vp-text); display: grid; place-items: center; font-size: 12px; cursor: pointer;
  }
  .vp-dock-item button:hover { background: rgba(31,27,26,0.16); }
  .vp-dock.is-full .vp-dock-head { display: none; } /* vol: de knop zegt al "Vergelijk 4" */
  @container (max-width: 900px) { /* smal (tablet): alleen fotootjes, de namen staan in de tooltip */
    .vp-dock-head, .vp-dock-item a { display: none; }
    .vp-dock li.vp-dock-item { flex: 0 0 auto; width: auto; }
  }
  .vp-dock .vp-dock-search {
    display: flex; align-items: center; gap: 8px; flex: 1 1 150px; width: auto; min-width: 130px;
    height: 46px; box-sizing: border-box; padding: 0 14px;
    border: 1.5px dashed rgba(255,250,243,0.38); border-radius: 14px; color: rgba(255,250,243,0.8);
  }
  .vp-dock .vp-dock-search:focus-within { border-style: solid; border-color: rgba(255,250,243,0.7); }
  .vp-dock-search > .fa { flex: 0 0 auto; font-size: 15px; }
  .vp-dock .vp-dock-search .vp-compare-search-input,
  .vp-dock .vp-dock-search .vp-compare-search-input:focus {
    flex: 1 1 auto; min-width: 0; width: auto; height: 100%; padding: 0;
    border: 0; border-radius: 0; background: transparent; color: #fffaf3; font-size: 13px;
  }
  .vp-dock .vp-dock-search .vp-compare-search-input::placeholder { color: rgba(255,250,243,0.8); }
  .vp-dock .vp-compare-search .vp-compare-suggests { top: auto; bottom: calc(100% + 12px); left: -2px; width: 360px; color: var(--vp-text); }
  .vp-dock-clear { margin: 0; flex: 0 0 auto; }
  .vp-dock-clear button {
    height: 44px; padding: 0 12px; border: 0; background: transparent; color: rgba(255,250,243,0.8);
    font: inherit; font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .vp-dock-clear button:hover { color: #fffaf3; }
  .vp-dock-cta {
    display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto;
    height: 46px; padding: 0 22px; border-radius: 999px; background: var(--vp-gold); color: var(--vp-text);
    font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none;
  }
  .vp-dock-cta:hover { background: #d4a964; color: var(--vp-text); }
  .vp-dock-cta.is-waiting, .vp-dock-cta.is-waiting:hover { background: transparent; color: var(--vp-gold); box-shadow: inset 0 0 0 1.5px var(--vp-gold); cursor: default; } /* v70: met één parfum valt er nog niets te vergelijken */
  .vp-dock-pill {
    position: fixed; right: 28px; bottom: 24px; z-index: 990;
    display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 10px 0 8px;
    border: 0; border-radius: 999px; background: #1f2b2c; color: #fffaf3; font: inherit; cursor: pointer;
    box-shadow: 0 16px 44px rgba(12,27,31,0.32); transition: transform .25s ease, opacity .25s ease, visibility .25s;
  }
  .vp-dock[data-state="open"] .vp-dock-pill { transform: translateY(calc(100% + 40px)); opacity: 0; visibility: hidden; }
  .vp-dock-thumbs { display: flex; align-items: center; }
  .vp-dock-thumbs img,
  .vp-dock-thumbs .vp-suggest-noimg { width: 40px; height: 40px; flex: 0 0 40px; box-sizing: border-box; object-fit: contain; border-radius: 50%; background: #fff; border: 2px solid #1f2b2c; }
  .vp-dock-thumbs > * + * { margin-left: -12px; }
  .vp-dock-pill b { font-size: 14.5px; font-weight: 700; }
  .vp-dock-up { width: 34px; height: 34px; border-radius: 50%; background: var(--vp-gold); color: var(--vp-text); display: grid; place-items: center; font-size: 13px; }
}

/* Gebruiker met "minder beweging": zelfde standen, zonder schuiven */
@media (prefers-reduced-motion: reduce) {
  #header, .header-search, .vp-dock-bar, .vp-dock-pill { transition: none; }
}

.vp-compare-fab-cta.is-waiting { background: transparent; color: var(--vp-gold); box-shadow: inset 0 0 0 1.5px var(--vp-gold); } /* v70: één parfum gekozen */

@media print {
  .vp-dock, .vp-compare-fab { display: none !important; }
}

/* v71 (#61): filterknop op de lijstpagina's. Tot 1024 px staat de filter direct onder de introkaart
   (style.css, v71) en is hij dicht tot je op "Filters" tikt (ckv_header_js, punt 7). Zonder JavaScript
   (geen html.vp-js) blijft hij gewoon open. Het getal op de knop = aantal actieve filters. */
.archive-toolbar .mobile-filter-toggle { display: none; }
.mobile-filter-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; background: var(--vp-gold); color: var(--vp-text); font-size: 12px; font-weight: 700; line-height: 1;
}
@media (max-width: 1024px) {
  .archive-toolbar .mobile-filter-toggle { display: inline-flex; }
  html.vp-js .page-template-archive-parfums-php #sidebar:not(.is-open) { display: none; }
  .archive-toolbar .mobile-filter-toggle[aria-expanded="true"] { border-color: var(--vp-accent) !important; box-shadow: inset 0 0 0 1px var(--vp-accent); }
}