/* ==========================================================================
divi-skin.css — past de Vindjeparfum-tokens toe op Divi's EIGEN elementen.
Geladen met priority 100 (ná Divi's kern-CSS).
Regel (playbook §6): geen globale koptgroottes met !important — zet die per kop
in de markup, zodat handmatige builder-instellingen van de gebruiker blijven winnen.
Hier alleen: fonts, kleuren, links, knop-accent.
========================================================================== */
/* Body & koppen volgen het designsysteem. */
.et-db #et-boc .et-l body,
body.et-tb-has-template,
body {
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
}
/* Divi zet vaak een eigen heading-font; laat onze display-serif winnen op koppen
die géén expliciete builder-font hebben (geen !important, alleen specificiteit). */
.et_pb_module h1,
.et_pb_module h2,
.et_pb_module h3,
.et_pb_text h1,
.et_pb_text h2,
.et_pb_text h3 {
font-family: var(--font-display);
font-weight: 400;
letter-spacing: -0.02em;
}
/* Links & accent. Sluit onze eigen componenten uit (knoppen/chips/logo/vjp-*),
anders overrulet deze generieke regel hun eigen tekstkleur (bv. knoptekst
onzichtbaar op de accentknop). */
.et_pb_module a:not(.btn):not(.chip):not([class*="vjp-"]) { color: var(--accent); }
.et_pb_module a:not(.btn):not(.chip):not([class*="vjp-"]):hover { color: var(--accent-hover); }
/* Primaire knop-accent voor Divi-knoppen die de default-stijl gebruiken. */
.et_pb_button {
border-radius: var(--r-pill);
font-family: var(--font-body);
font-weight: 700;
}
/* Onze eigen shortcode-mounts krijgen nette ademruimte binnen Divi-secties. */
.vjp-mount { margin: 0 auto; max-width: var(--page-max); }
/* Mono voor prijzen/percentages die we met .vjp-mono markeren. */
.vjp-mono { font-family: var(--font-mono); }
/* --- Hero-zoekbalk (shortcode [vjp_search]) --------------------------------- */
.vjp-hero-search { max-width: 680px; margin: 0 auto; }
.vjp-hero-search .search__icon { font-size: 20px; color: var(--ink-3); line-height: 1; }
.vjp-examples {
display: flex; flex-wrap: wrap; gap: 9px;
justify-content: center; margin-top: 18px;
}
.vjp-examples .chip { cursor: pointer; }
/* Skeleton-kaarten (shortcode [vjp_card_grid]) tonen ademende placeholder-lijnen. */
.vjp-mount[data-vjp="card-grid"] { margin-top: 8px; }
/* Zorg dat onze grids binnen een Divi-code-module de volle breedte pakken. */
.et_pb_code .grid-4, .et_pb_code .grid-3 { width: 100%; }
/* ==========================================================================
Header / footer (shortcodes [vjp_header] / [vjp_footer])
Bij site-brede injectie (body.vjp-chrome) verbergen we Divi's eigen chrome.
========================================================================== */
body.vjp-chrome #main-header,
body.vjp-chrome #main-footer,
body.vjp-chrome #et-secondary-nav,
body.vjp-chrome .et_fixed_nav #main-header { display: none !important; }
body.vjp-chrome #page-container { padding-top: 0 !important; }
/* Logo -------------------------------------------------------------------- */
.vjp-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.vjp-logo__fp { height: 22px; width: 26px; gap: 3px; }
.vjp-logo__fp .fp__bar { min-height: 3px; border-radius: 2px; }
.vjp-logo__word {
font-family: var(--font-display);
font-size: 23px;
color: var(--ink);
letter-spacing: -0.01em;
line-height: 1;
}
.vjp-logo:hover .vjp-logo__word { color: var(--accent); }
/* Header ------------------------------------------------------------------ */
.vjp-header {
position: sticky; top: 0; z-index: 900;
background: oklch(0.975 0.008 85 / 0.85);
-webkit-backdrop-filter: saturate(1.4) blur(12px);
backdrop-filter: saturate(1.4) blur(12px);
border-bottom: 1px solid var(--line);
}
.vjp-header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 24px; height: 68px;
}
.vjp-nav__list {
display: flex; align-items: center; gap: 26px;
list-style: none; margin: 0; padding: 0;
}
.vjp-nav__list a {
font-size: var(--text-ui); font-weight: 500; color: var(--ink-2);
}
.vjp-nav__list a:hover { color: var(--ink); }
.vjp-header__collapse { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; }
.vjp-header__actions { display: flex; align-items: center; gap: 14px; }
/* Hamburger (alleen mobiel) */
.vjp-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 9px; background: none; border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; }
.vjp-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.2s ease, opacity 0.2s ease; }
.vjp-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.vjp-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.vjp-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.vjp-mijn-geuren {
display: inline-flex; align-items: center; gap: 7px;
background: none; border: 0; cursor: pointer;
font-size: var(--text-ui); font-weight: 500; color: var(--ink-2);
}
.vjp-mijn-geuren:hover { color: var(--accent); }
.vjp-count {
font-family: var(--font-mono); font-size: 11px;
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-pill); padding: 2px 7px; color: var(--ink-3);
}
/* Footer ------------------------------------------------------------------ */
.vjp-footer { background: var(--dark); color: var(--on-dark); margin-top: var(--section-gap); }
.vjp-footer .vjp-page { padding-top: 54px; padding-bottom: 40px; }
.vjp-footer__top {
display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 40px;
padding-bottom: 34px; border-bottom: 1px solid var(--dark-line);
}
.vjp-footer__nl-lead { color: var(--on-dark-2); font-size: 13px; line-height: 1.5; margin: 12px 0; max-width: 34ch; }
.vjp-nl__row { display: flex; gap: 8px; margin-top: 4px; }
.vjp-nl__email { flex: 1; min-width: 0; padding: 10px 16px !important; border: 1px solid var(--dark-line); border-radius: var(--r-pill); font: inherit; font-size: 14px; background: var(--surface); color: var(--ink); }
.vjp-nl__consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12px; color: var(--on-dark-2); line-height: 1.45; max-width: 36ch; }
.vjp-nl__consent input { margin-top: 2px; }
.vjp-nl__msg { margin: 8px 0 0; font-size: 12.5px; color: var(--on-dark); }
.vjp-nl__msg:empty { display: none; }
.vjp-nl__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vjp-nl .btn:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 900px) { .vjp-footer__top { grid-template-columns: 1fr; } }
.vjp-footer .vjp-logo__word { color: var(--on-dark); }
.vjp-footer__tag { color: var(--on-dark-2); margin-top: 14px; max-width: 320px; }
.vjp-footer__col .kicker { color: var(--on-dark-2); }
.vjp-footer__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.vjp-footer__chips .chip {
background: var(--dark-2); border-color: var(--dark-line); color: var(--on-dark-2);
}
.vjp-footer__chips .chip:hover { border-color: var(--accent-light); color: var(--on-dark); }
.vjp-footer__legal {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap; padding-top: 22px;
font-size: var(--text-sm); color: var(--on-dark-2);
}
.vjp-footer__nav { display: flex; flex-wrap: wrap; gap: 18px; }
.vjp-footer__nav a { color: var(--on-dark-2); }
.vjp-footer__nav a:hover { color: var(--accent-light); }
.vjp-footer__disclosure {
margin-top: 22px; font-size: var(--text-sm); color: var(--on-dark-2);
max-width: 640px; line-height: 1.5;
}
@media (max-width: 900px) {
.vjp-burger { display: flex; }
/* Alle nav-items + acties in het hamburger-paneel onder de header. */
.vjp-header__collapse {
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px;
background: var(--bg); border-bottom: 1px solid var(--line);
padding: 14px 20px 20px; box-shadow: var(--shadow-pop);
max-height: calc(100vh - 60px); overflow-y: auto;
display: none;
}
.vjp-header__collapse.is-open { display: flex; }
.vjp-header { position: sticky; }
.vjp-nav__list { flex-direction: column; align-items: stretch; gap: 4px; }
.vjp-nav__list a { display: block; padding: 11px 4px; font-size: 16px; border-bottom: 1px solid var(--line-soft); }
.vjp-header__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 8px; }
.vjp-header__actions .btn { width: 100%; text-align: center; }
.vjp-mijn-geuren { justify-content: flex-start; padding: 8px 4px; }
}
@media (max-width: 720px) {
.vjp-header__inner { height: 60px; }
.vjp-footer__top { grid-template-columns: 1fr; gap: 26px; }
.vjp-footer__legal { flex-direction: column; align-items: flex-start; gap: 12px; }
}
/* ==========================================================================
Parfumdetail-template ([vjp_perfume_detail] / auto op vjp_perfume)
========================================================================== */
.vjp-detail { max-width: var(--page-max); margin: 0 auto; }
.vjp-breadcrumb { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 11px; margin-bottom: 22px; flex-wrap: wrap; }
.vjp-breadcrumb a { color: var(--ink-3); }
.vjp-breadcrumb a:hover { color: var(--accent); }
.vjp-breadcrumb__sep { color: var(--line-strong); }
.vjp-detail__head { display: grid; grid-template-columns: 420px 1fr; gap: 44px; align-items: start; }
.vjp-detail__media { aspect-ratio: 4 / 5; border-radius: var(--r-lg); border: 1px solid var(--line); }
.vjp-detail__brand { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin-bottom: 8px; }
.vjp-detail__name { font-size: var(--text-h1); line-height: 1.02; margin: 0 0 12px; }
.vjp-detail__meta { color: var(--ink-2); font-size: var(--text-sm); margin-bottom: 20px; }
.vjp-detail__accords { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.vjp-detail__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.vjp-detail__block { margin-top: var(--section-gap); }
.vjp-detail__h2 { font-size: var(--text-h2); margin-bottom: 22px; }
.vjp-detail__fp { display: grid; grid-template-columns: 60px 1fr; gap: 30px; align-items: center; max-width: 620px; }
.vjp-detail__note { color: var(--ink-3); font-size: var(--text-sm); }
/* Notenpiramide */
.vjp-notes { display: flex; flex-direction: column; gap: 20px; }
.vjp-notes__row { display: grid; grid-template-columns: 110px 1fr; gap: 20px; align-items: start; }
.vjp-notes__label { padding-top: 4px; }
.vjp-notes__set { display: flex; flex-wrap: wrap; gap: 10px; }
.vjp-note { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-ui); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 8px 14px; }
.vjp-note__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
/* Prijsvergelijking (skeleton) */
.vjp-offers { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.vjp-offer-row { display: grid; grid-template-columns: 1.4fr 0.7fr 0.7fr auto; gap: 20px; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line-soft); }
.vjp-offers .vjp-detail__note { padding: 16px 24px; margin: 0; }
.vjp-sk { display: inline-block; height: 0.9em; border-radius: 6px; background: var(--line-soft); }
@media (max-width: 900px) {
.vjp-detail__head { grid-template-columns: 1fr; gap: 26px; }
.vjp-detail__media { max-width: 320px; }
.vjp-detail__name { font-size: var(--text-h1-m); }
}
@media (max-width: 720px) {
.vjp-notes__row { grid-template-columns: 1fr; gap: 8px; }
.vjp-offer-row { grid-template-columns: 1fr auto; gap: 10px; }
}
/* ==========================================================================
Zoekresultaten ([vjp_results]) — filtersidebar + grid
========================================================================== */
.vjp-results { display: grid; grid-template-columns: 256px 1fr; gap: 40px; align-items: start; max-width: var(--page-max); margin: 0 auto; }
/* Sticky filterkolom met eigen scroll: langer dan het scherm mag niet de onderste
filters afsnijden. De kolom scrollt intern i.p.v. mee met de pagina. */
.vjp-filters { position: sticky; top: 90px; max-height: calc(100vh - 108px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; }
.vjp-filters::-webkit-scrollbar { width: 8px; }
.vjp-filters::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.vjp-filters__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; }
.vjp-filters__title { font-size: 15px; font-weight: 700; color: var(--ink); }
.vjp-filters__clear { background: none; border: 0; cursor: pointer; color: var(--accent); font-size: var(--text-sm); font-weight: 600; }
.vjp-filter-group { padding: 18px 0; border-top: 1px solid var(--line-soft); }
.vjp-filter-group__title { margin-bottom: 14px; }
.vjp-chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.vjp-chipset .chip { padding: 8px 12px; font-size: var(--text-sm); }
.vjp-checks { display: flex; flex-direction: column; gap: 11px; }
.vjp-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-ui); color: var(--ink-2); }
.vjp-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.vjp-check__label { flex: 1; }
.vjp-check__count { color: var(--ink-4); font-size: var(--text-xs); }
.vjp-price__track { height: 6px; border-radius: var(--r-pill); background: var(--line-soft); position: relative; margin: 6px 0 10px; }
.vjp-price__fill { position: absolute; left: 18%; right: 34%; top: 0; bottom: 0; background: var(--accent); border-radius: var(--r-pill); }
.vjp-price__labels { display: flex; justify-content: space-between; color: var(--ink-3); font-size: var(--text-xs); }
.vjp-results__toolbar { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.vjp-results__title { font-size: var(--text-h2); margin: 0; }
.vjp-results__count { color: var(--ink-3); font-size: var(--text-sm); }
.vjp-sort { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--ink-3); }
.vjp-sort__select { border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 9px 14px; background: var(--surface); color: var(--ink); font-size: var(--text-sm); }
.vjp-results__filterbtn { display: none; }
.vjp-active-filters { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 22px; }
.chip--active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.chip__x { color: var(--ink-3); font-weight: 700; }
.vjp-active-filters__clear { background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: var(--text-sm); text-decoration: underline; }
.vjp-results__more { display: flex; justify-content: center; margin-top: 34px; }
.vjp-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin-top: 36px; }
.vjp-pager__btn { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.vjp-pager__btn:hover:not(:disabled) { border-color: var(--accent); }
.vjp-pager__btn.is-current { background: var(--dark); color: var(--on-dark); border-color: var(--dark); cursor: default; }
.vjp-pager__btn:disabled { opacity: 0.4; cursor: default; }
.vjp-pager__gap { padding: 0 4px; color: var(--ink-3); }
@media (max-width: 900px) {
.vjp-results { grid-template-columns: 1fr; }
.vjp-filters { display: none; }
.vjp-results__filterbtn { display: inline-flex; }
}
/* ==========================================================================
SEO-landingstemplate ([vjp_seo_landing] / auto op vjp_landing)
========================================================================== */
.vjp-seo { max-width: var(--page-max); margin: 0 auto; }
.vjp-seo__head { max-width: 760px; margin: 0 auto 8px; text-align: center; }
.vjp-seo__title { font-size: var(--text-h1); line-height: 1.02; margin: 12px 0 18px; }
.vjp-seo__intro { color: var(--ink-2); font-size: var(--text-lead); line-height: 1.55; display: flex; flex-direction: column; gap: 12px; }
.vjp-seo__block { margin-top: var(--section-gap); }
.vjp-seo__h2 { font-size: var(--text-h2); margin-bottom: 22px; }
/* Feitenkaart */
.vjp-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-top: 40px; }
.vjp-fact { background: var(--surface); padding: 24px 22px; display: flex; flex-direction: column; gap: 6px; }
.vjp-fact__value { font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--ink); }
.vjp-fact__label { font-size: var(--text-sm); color: var(--ink-3); }
/* FAQ */
.vjp-faq { display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.vjp-faq__item { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 0 18px; }
.vjp-faq__q { cursor: pointer; padding: 16px 0; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.vjp-faq__q::-webkit-details-marker { display: none; }
.vjp-faq__q::after { content: "+"; font-family: var(--font-mono); color: var(--ink-3); font-size: 18px; }
.vjp-faq__item[open] .vjp-faq__q::after { content: "\2212"; }
.vjp-faq__a { padding: 0 0 18px; color: var(--ink-2); line-height: 1.6; }
/* Gerelateerd + interne links */
.vjp-seo__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.vjp-seo__links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 40px; max-width: 820px; }
.vjp-seo__links a { display: flex; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-weight: 500; }
.vjp-seo__links a:hover { color: var(--accent); }
@media (max-width: 900px) {
.vjp-facts { grid-template-columns: repeat(2, 1fr); }
.vjp-seo__title { font-size: var(--text-h1-m); }
.vjp-seo__links { grid-template-columns: 1fr; }
}
/* ==========================================================================
Merkpagina ([vjp_brand])
========================================================================== */
.vjp-brand { max-width: var(--page-max); margin: 0 auto; }
.vjp-brand__head { display: grid; grid-template-columns: 160px 1fr; gap: 34px; align-items: center; }
.vjp-brand__logo { width: 160px; height: 160px; border-radius: var(--r-md); border: 1px solid var(--line); }
.vjp-brand__name { font-size: var(--text-hero); line-height: 1; margin: 8px 0 14px; }
.vjp-brand__desc { color: var(--ink-2); font-size: var(--text-lead); max-width: 620px; margin-bottom: 20px; }
.vjp-brand__stats { display: flex; flex-wrap: wrap; gap: 34px; }
.vjp-brand__stat { display: flex; flex-direction: column; gap: 3px; }
.vjp-brand__stat-v { font-family: var(--font-display); font-size: 24px; color: var(--ink); }
.vjp-brand__stat-l { font-size: var(--text-sm); color: var(--ink-3); }
.vjp-brand__block { margin-top: var(--section-gap); }
.vjp-brand__h2 { font-size: var(--text-h2); margin-bottom: 20px; }
.vjp-brand__lines { display: flex; flex-wrap: wrap; gap: 10px; }
/* ==========================================================================
Seizoenslanding ([vjp_season])
========================================================================== */
.vjp-season { max-width: var(--page-max); margin: 0 auto; }
.vjp-season__hero { text-align: center; border: 1px solid; border-radius: var(--r-lg); padding: 66px 30px; }
.vjp-season__title { font-size: var(--text-hero); line-height: 0.98; margin: 10px 0 14px; }
.vjp-season__lead { color: var(--ink-2); font-size: var(--text-lead); max-width: 560px; margin: 0 auto 26px; }
.vjp-season__hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.vjp-season__block { margin-top: var(--section-gap); }
.vjp-season__h2 { font-size: var(--text-h2); margin-bottom: 22px; }
.vjp-season__featured { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.vjp-season__featured-media { aspect-ratio: 4 / 3; height: 100%; }
.vjp-season__featured-body { padding: 34px 40px 34px 0; }
.vjp-season__featured-name { font-size: var(--text-h3); margin: 8px 0 12px; }
.vjp-season__featured-desc { color: var(--ink-2); margin-bottom: 18px; }
.vjp-season__notes { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
@media (max-width: 900px) {
.vjp-brand__head { grid-template-columns: 1fr; gap: 20px; }
.vjp-brand__name { font-size: var(--text-hero-m); }
.vjp-season__title { font-size: var(--text-hero-m); }
.vjp-season__featured { grid-template-columns: 1fr; }
.vjp-season__featured-body { padding: 0 26px 30px; }
.vjp-season__featured-media { aspect-ratio: 16 / 9; }
}
/* ==========================================================================
Vergelijken ([vjp_compare])
========================================================================== */
.vjp-compare { max-width: var(--page-max); margin: 0 auto; }
.vjp-compare__head { margin-bottom: 30px; }
.vjp-compare__title { font-size: var(--text-h1); margin: 0 0 12px; }
.vjp-compare__lead { color: var(--ink-2); font-size: var(--text-lead); max-width: 620px; }
.vjp-cmp { overflow-x: auto; }
.vjp-cmp__grid { display: grid; grid-template-columns: 150px repeat(var(--cmp-cols), minmax(200px, 1fr)) 200px; min-width: 640px; }
.vjp-cmp__cell { padding: 14px 18px; border-bottom: 1px solid var(--line-soft); font-size: var(--text-ui); color: var(--ink); display: flex; align-items: center; }
.vjp-cmp__cell--label { color: var(--ink-3); }
.vjp-cmp__cell--muted { background: var(--surface-sunken); }
.vjp-cmp__head { position: relative; flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 22px; padding-bottom: 20px; background: var(--surface); }
.vjp-cmp__remove { position: absolute; top: 10px; right: 12px; background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: 18px; }
.vjp-cmp__media { width: 100%; height: 150px; border-radius: var(--r-sm); background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vjp-cmp__media img { max-width: 86%; max-height: 86%; object-fit: contain; }
.vjp-cmp__brand { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); margin: 0; }
.vjp-cmp__name { font-size: 16px; font-weight: 600; margin: 0; }
.vjp-cmp__add { background: var(--surface-sunken); }
.vjp-cmp__add-btn { width: 100%; height: 100%; min-height: 160px; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: none; cursor: pointer; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 22px; }
.vjp-cmp__add-btn span { font-size: var(--text-sm); }
/* ==========================================================================
Mijn geuren ([vjp_favorites])
========================================================================== */
.vjp-favorites { max-width: var(--page-max); margin: 0 auto; }
/* ── Kop: titel + tabs links, profielkaart rechts (1:1 mijn-geuren.html) ── */
.vjp-favorites .favtop { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: start; margin-bottom: 40px; }
.vjp-favorites .favtop h1 { font-family: var(--font-display); font-weight: 400; font-size: 56px; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 14px; }
.vjp-favorites .favtop__intro { margin: 0 0 26px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 560px; text-wrap: pretty; }
.vjp-favorites .vjp-tabs, .vjp-favorites .favtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.vjp-favorites .vjp-tabs__tab { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); cursor: pointer; padding: 12px 20px; font-size: 14.5px; font-weight: 600; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); }
.vjp-favorites .vjp-tabs__tab:hover { color: var(--ink); border-color: var(--line-strong); }
.vjp-favorites .vjp-tabs__tab--active { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.vjp-favorites .vjp-tabs__count { font-family: var(--font-mono); font-style: normal; font-size: 11.5px; opacity: 0.7; }
/* ── Profielkaart uit de collectie ── */
.vjp-favorites .profilecard { background: var(--accent-soft); border: 1px solid oklch(0.9 0.03 80); border-radius: 24px; padding: 28px; }
.vjp-favorites .profilecard .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.5 0.05 60); margin-bottom: 14px; }
.vjp-favorites .profilecard .t { font-family: var(--font-display); font-size: 26px; line-height: 1.15; margin-bottom: 16px; color: var(--ink); }
.vjp-favorites .profilecard .bars { margin-bottom: 20px; }
.vjp-favorites .profilecard .bars .fp { display: flex; width: 100%; gap: 6px; }
.vjp-favorites .profilecard__btn { display: block; width: 100%; text-align: center; background: var(--dark); color: var(--on-dark); border: none; border-radius: var(--r-pill); padding: 15px; font-size: 14.5px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.vjp-favorites .profilecard__btn:hover { background: oklch(0.2 0.02 60); color: var(--on-dark); }
.vjp-favorites .profilecard__suggest { margin-top: 22px; }
.vjp-favorites .profilecard__suggest-head { margin-bottom: 12px; }
.vjp-favorites .profilecard__suggest-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
/* ── Grid met bewaarde parfums (.favcard) ── */
.vjp-favorites .favgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vjp-favorites .favcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; }
.vjp-favorites .favcard:hover { border-color: var(--line-strong); box-shadow: 0 20px 40px -28px oklch(0.4 0.03 60 / 0.6); }
.vjp-favorites .favcard__shot { position: relative; display: block; height: 190px; background-image: repeating-linear-gradient(135deg, oklch(0.945 0.012 82) 0 9px, oklch(0.915 0.016 82) 9px 18px); }
.vjp-favorites .favcard__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vjp-favorites .favcard__heart { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-strong); background: oklch(1 0 0 / 0.9); color: var(--accent); font-size: 14px; cursor: pointer; line-height: 1; }
.vjp-favorites .favcard__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.vjp-favorites .favcard__brand { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 4px; }
.vjp-favorites .favcard__name { font-size: 17px; font-weight: 600; margin-bottom: 12px; color: var(--ink); }
.vjp-favorites .favcard__fp { margin-bottom: 14px; }
.vjp-favorites .favcard__fp .fp { display: flex; width: 100%; gap: 4px; }
.vjp-favorites .favcard__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.vjp-favorites .favcard__prow { display: flex; align-items: center; justify-content: space-between; }
.vjp-favorites .favcard__price { font-size: 14px; font-weight: 600; color: var(--ink); }
.vjp-favorites .favcard__brow { display: flex; gap: 8px; }
.vjp-favorites .favcard__buy { flex: 1; text-align: center; background: var(--accent); color: oklch(0.98 0.01 85) !important; border-radius: 999px; padding: 11px; font-size: 13px; font-weight: 700; text-decoration: none; }
.vjp-favorites .favcard__buy:hover { color: oklch(0.98 0.01 85) !important; background: var(--accent-hover); }
/* ── Statuskiezer (JS injecteert 'Bewaren als …' in de kaartbody) ── */
.vjp-favstatus { padding: 0 14px 14px; }
.vjp-favorites .favcard__body .vjp-favstatus { padding: 12px 0 0; }
.vjp-favstatus__label { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.vjp-favstatus__opts { display: flex; gap: 4px; }
.vjp-favstatus__opt { flex: 1; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 7px 4px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); cursor: pointer; font-family: var(--font-body); transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; }
.vjp-favstatus__opt:hover { border-color: var(--line-strong); color: var(--ink); }
.vjp-favstatus__opt.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* ── Mijn geuren: profielkaart-swatches, geurprofiel-uitleg, aanbevelingen, opslaan ── */
.profilecard__swatches { display: flex; gap: 8px; margin: 4px 0 18px; }
.profilecard__sw { flex: 1; height: 40px; border-radius: 10px; }
.favprofile { margin: 56px 0 0; border-top: 1px solid var(--line); padding-top: 44px; }
.favprofile__intro { max-width: 680px; margin-bottom: 32px; }
.favprofile__h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 4vw, 38px); line-height: 1.08; letter-spacing: -0.01em; margin: 8px 0 12px; color: var(--ink); }
.favprofile__lead { font-size: 16px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.favprofile__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.favpanel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; }
.favpanel__insight { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.favnotes { display: flex; flex-direction: column; gap: 12px; }
.favnote { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; text-decoration: none; color: inherit; }
a.favnote:hover .favnote__name { color: oklch(0.5 0.12 var(--hue, 60)); }
.favnote__name { font-weight: 600; color: var(--ink); }
.favnote__count { font-size: 12.5px; color: var(--ink-3); }
.favnote__bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: var(--surface-sunken); overflow: hidden; }
.favnote__bar i { display: block; height: 100%; border-radius: 6px; background: oklch(0.74 0.11 var(--hue, 60)); }
.favseasons { display: flex; flex-direction: column; gap: 12px; }
.favseason { display: grid; grid-template-columns: 68px 1fr; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.favseason__label { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.favseason.is-top .favseason__label { color: var(--ink); }
.favseason__bar { height: 8px; border-radius: 8px; background: var(--surface-sunken); overflow: hidden; }
.favseason__bar i { display: block; height: 100%; border-radius: 8px; background: oklch(0.72 0.06 60); }
.favseason.is-top .favseason__bar i { background: var(--accent); }
/* "Wanneer je het draagt": donker paneel zoals in het design. */
.favpanel--season { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.favpanel--season .k { color: oklch(0.75 0.03 70); }
.favpanel--season .favseason__label { color: oklch(0.82 0.02 80); }
.favpanel--season .favseason.is-top .favseason__label { color: var(--on-dark); }
.favpanel--season .favseason__bar { background: oklch(0.34 0.02 60); }
.favpanel--season .favseason__bar i { background: oklch(0.7 0.06 70); }
.favpanel--season .favseason.is-top .favseason__bar i { background: var(--accent); }
.favpanel--season .favpanel__insight { color: oklch(0.78 0.02 80); }
a.favseason:hover .favseason__label { color: var(--accent); }
/* Geel AI-uitlegkader. */
.favbox--ai { background: oklch(0.96 0.06 92); border: 1px solid oklch(0.86 0.09 92); border-radius: 20px; padding: 26px 28px; max-width: none; }
.favbox--ai .k { color: oklch(0.5 0.09 80); }
.favexplain { margin-top: 4px; }
.favexplain p { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin: 0 0 12px; }
.favbox__btn { margin-top: 14px; background: var(--dark); color: var(--on-dark); border: none; border-radius: var(--r-pill); padding: 12px 22px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.favbox__btn:hover { background: oklch(0.2 0.02 60); }
.favrecos { margin-top: 44px; }
.favrecos__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.favrecos__sub { font-size: 13px; color: var(--ink-3); }
.favrecos__lead { max-width: 640px; margin: 8px 0 24px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.favrecos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.favreco { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.favreco__shot { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--surface-sunken); }
.favreco__shot img { width: 100%; height: 100%; object-fit: contain; }
.favreco__pct { position: absolute; top: 10px; left: 10px; background: var(--dark); color: var(--on-dark); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }
.favreco__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.favreco__brand { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.favreco__name { font-family: var(--font-display); font-size: 20px; line-height: 1.1; color: var(--ink); }
.favreco__reason { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.favreco__tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; margin-right: 8px; vertical-align: 1px; }
.favreco__tag--match { background: oklch(0.92 0.05 150); color: oklch(0.4 0.09 150); }
.favreco__tag--new { background: var(--accent-soft); color: var(--accent); }
.favreco__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 6px; }
.favreco__price { font-size: 15px; font-weight: 600; color: var(--ink); }
.favreco__btn { background: var(--dark); color: var(--on-dark) !important; border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 700; text-decoration: none; }
.favreco__btn:hover { background: oklch(0.2 0.02 60); color: var(--on-dark) !important; }
.favsave { margin: 48px 0 0; }
.favsave__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; background: var(--accent-soft); border: 1px solid oklch(0.9 0.03 80); border-radius: 24px; padding: 32px; }
.favsave__lead { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.favsave__form { display: flex; flex-direction: column; gap: 12px; }
.favsave__row { display: flex; gap: 10px; }
.favsave__email { flex: 1; padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font: inherit; font-size: 15px; background: var(--surface); }
.favsave__email:disabled { opacity: 0.55; }
.favsave__msg { font-size: 13.5px; margin: 2px 0 0; min-height: 1.2em; }
.favsave__msg.is-ok { color: oklch(0.5 0.09 150); }
.favsave__msg.is-err { color: oklch(0.55 0.16 25); }
.favsave__restore { align-self: flex-start; background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.vjp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.vjp-consent { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.vjp-consent input { margin-top: 2px; flex: none; }
@media (max-width: 860px) {
.favprofile__panels { grid-template-columns: 1fr; }
.favrecos__grid { grid-template-columns: 1fr 1fr; }
.favsave__inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.favrecos__grid { grid-template-columns: 1fr; }
.favsave__row { flex-direction: column; }
.favsave__row .btn { width: 100%; }
}
@media (max-width: 1180px) {
.vjp-favorites .favtop { grid-template-columns: 1fr; gap: 30px; }
.vjp-favorites .favgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
.vjp-favorites .favgrid { grid-template-columns: 1fr; }
.vjp-favorites .favtop h1 { font-size: 34px; }
}
.vjp-favorites__empty { align-items: center; text-align: center; max-width: 460px; margin: 30px auto; }
.vjp-favorites__empty .empty__icon { margin: 0 auto 18px; }
.vjp-favorites__empty-title { font-size: var(--text-h3); margin: 0 0 10px; }
.vjp-favorites__empty-text { color: var(--ink-2); margin-bottom: 22px; }
.vjp-favorites__empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
/* ==========================================================================
Geurtest-quiz ([vjp_quiz])
========================================================================== */
.vjp-quiz { max-width: 720px; margin: 0 auto; }
.vjp-quiz__panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 40px; }
.vjp-quiz__progress { display: flex; align-items: center; gap: 16px; margin-bottom: 30px; }
.vjp-quiz__progress-track { flex: 1; height: 6px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.vjp-quiz__progress-fill { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); }
.vjp-quiz__q { font-size: var(--text-h2); margin: 0 0 8px; }
.vjp-quiz__hint { color: var(--ink-3); margin-bottom: 26px; }
.vjp-quiz__options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 30px; }
.vjp-quiz__option { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; transition: border-color var(--dur) var(--ease); }
.vjp-quiz__option:hover { border-color: var(--accent); }
.vjp-quiz__swatch { width: 34px; height: 34px; border-radius: 50%; }
.vjp-quiz__option-label { font-size: var(--text-ui); font-weight: 500; color: var(--ink); }
.vjp-quiz__nav { display: flex; justify-content: space-between; }
/* ==========================================================================
Cadeauzoeker ([vjp_gift])
========================================================================== */
.vjp-gift { max-width: var(--page-max); margin: 0 auto; }
.vjp-gift__head { max-width: 640px; margin: 0 auto 34px; text-align: center; }
.vjp-gift__title { font-size: var(--text-h1); margin: 10px 0 14px; }
.vjp-gift__lead { color: var(--ink-2); font-size: var(--text-lead); }
.vjp-gift__form { max-width: 680px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; display: flex; flex-direction: column; gap: 24px; }
.vjp-gift__field { display: flex; flex-direction: column; gap: 12px; }
.vjp-gift__chips { display: flex; flex-wrap: wrap; gap: 9px; }
.vjp-gift__input { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 13px 15px; background: var(--surface-sunken); font-size: var(--text-ui); }
.vjp-gift__submit { display: flex; gap: 12px; padding-top: 8px; }
.vjp-gift__results { margin-top: var(--section-gap); }
.vjp-gift__h2 { font-size: var(--text-h2); margin-bottom: 22px; text-align: center; }
@media (max-width: 720px) {
.vjp-quiz__panel { padding: 26px; }
.vjp-quiz__options { grid-template-columns: repeat(2, 1fr); }
.vjp-gift__title { font-size: var(--text-h1-m); }
}
/* ==========================================================================
Editorial artikel ([vjp_article]) + leesbare prose (.vjp-prose)
========================================================================== */
.vjp-article { max-width: 760px; margin: 0 auto; }
.vjp-article__head { text-align: center; margin-bottom: 26px; }
.vjp-article__title { font-size: var(--text-h1); line-height: 1.04; margin: 12px 0 14px; }
.vjp-article__meta { color: var(--ink-3); font-size: var(--text-sm); }
.vjp-article__hero { aspect-ratio: 16 / 9; border-radius: var(--r-lg); margin-bottom: 40px; }
.vjp-article__foot { margin-top: var(--section-gap); }
.vjp-article__foot-title { font-size: var(--text-h3); margin-bottom: 20px; }
.vjp-prose { max-width: 720px; margin: 0 auto; font-size: 17.5px; line-height: 1.75; color: var(--ink); }
.vjp-prose > * + * { margin-top: 22px; }
.vjp-prose__lead { font-size: var(--text-lead); color: var(--ink-2); }
.vjp-prose h2 { font-size: var(--text-h3); margin-top: 44px; }
.vjp-prose h3 { font-size: 22px; margin-top: 32px; }
.vjp-prose ul, .vjp-prose ol { padding-left: 22px; }
.vjp-prose li + li { margin-top: 8px; }
.vjp-prose blockquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); font-family: var(--font-display); font-size: 24px; line-height: 1.4; color: var(--ink); }
.vjp-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
/* ==========================================================================
Geurwiel ([vjp_scent_wheel])
========================================================================== */
.vjp-wheel { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; max-width: var(--page-max); margin: 0 auto; }
.vjp-wheel__title { font-size: var(--text-h2); margin: 10px 0 14px; }
.vjp-wheel__text { color: var(--ink-2); font-size: var(--text-lead); max-width: 420px; }
.vjp-wheel__chart { display: flex; justify-content: center; }
.vjp-wheel__svg { width: 100%; max-width: 420px; height: auto; }
.vjp-wheel__seg { cursor: pointer; transition: opacity var(--dur) var(--ease); stroke: var(--bg); stroke-width: 1; }
.vjp-wheel__svg a:hover .vjp-wheel__seg { opacity: 0.82; }
.vjp-wheel__label { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: oklch(0.28 0.02 60); pointer-events: none; }
.vjp-wheel__hub { font-family: var(--font-display); font-size: 20px; fill: var(--ink); }
/* ==========================================================================
Autocomplete demo ([vjp_autocomplete]) + staten ([vjp_states])
========================================================================== */
.vjp-ac-demo { max-width: 560px; margin: 0 auto; }
.ac__thumb { width: 40px; height: 40px; border-radius: var(--r-xs); flex: none; overflow: hidden; background: var(--surface-sunken); }
.ac__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ac__text { display: flex; flex-direction: column; }
.ac__title { font-weight: 600; color: var(--ink); font-size: var(--text-ui); }
.ac__sub { font-size: var(--text-sm); color: var(--ink-3); }
.vjp-states { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: var(--page-max); margin: 0 auto; }
.vjp-state-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: left; }
.vjp-state-card__title { font-size: 18px; margin: 0 0 8px; }
.vjp-state-card__text { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; margin-bottom: 18px; }
.vjp-state-card__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
@media (max-width: 900px) {
.vjp-wheel { grid-template-columns: 1fr; gap: 26px; }
.vjp-states { grid-template-columns: 1fr; }
.vjp-article__title { font-size: var(--text-h1-m); }
}
/* Echte parfumkaarten: .card is nu een link. */
.card { text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease); }
a.card:hover { border-color: var(--line-strong); }
a.card .card__name { color: var(--ink); }
.card__accords { text-transform: capitalize; }
.vjp-detail__desc { color: var(--ink-2); font-size: var(--text-lead); line-height: 1.55; margin: 0 0 22px; max-width: 620px; }
/* Term-index (Merken / Geurnoten) */
.vjp-index { max-width: var(--page-max); margin: 0 auto; }
.vjp-index__title { font-size: var(--text-h1); margin: 0 0 12px; }
.vjp-index__intro { color: var(--ink-2); font-size: var(--text-lead); max-width: 640px; margin-bottom: 28px; }
.vjp-index__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.vjp-term__count { color: var(--ink-4); font-size: var(--text-xs); margin-left: 4px; }
/* Autocomplete-dropdown netjes onder de hero-zoekbalk. */
.vjp-hero-search .ac { margin-top: -1px; }
/* Resultaten-grid vult zich via JS. */
.vjp-results__grid { min-height: 200px; }
@media (max-width: 720px) { .vjp-results__grid.grid-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
/* Similar-kaarten (recommendation): link-wrapper + waarom-toggle in de kaart. */
.card__link { display: block; text-decoration: none; color: inherit; }
a.card, .card__link { transition: border-color var(--dur) var(--ease); }
.vjp-simcard { position: relative; }
.vjp-simcard .card__media { position: relative; }
.vjp-simcard .why { border-top: 1px solid var(--line-soft); }
.vjp-simcard .why__toggle { margin: 0; border: 0; border-radius: 0; background: none; text-transform: none; font-size: 12px; padding: 12px 16px; list-style: none; }
.vjp-simcard .why__toggle::-webkit-details-marker { display: none; }
.vjp-simcard .why__toggle::after { content: '+'; color: var(--ink-3); font-family: var(--font-mono); }
.vjp-simcard details[open] .why__toggle::after { content: '\2212'; }
.vjp-simcard .why__panel { border: 0; padding: 0 16px 14px; }
/* Kaart relatief zodat het hartje (favoriet) rechtsboven kan staan. */
.card { position: relative; }
.btn-heart { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: oklch(1 0 0 / 0.9); color: var(--ink-2); font-size: 16px; line-height: 1; cursor: pointer; transition: color 0.12s ease, border-color 0.12s ease; }
.btn-heart:hover { color: var(--accent); border-color: var(--accent); }
/* Homepage-cards zijn -wrappers: hartknop als sibling in een relatieve wrapper. */
.hpcard-wrap { position: relative; display: flex; min-width: 0; max-width: 100%; }
.hpcard-wrap > a { flex: 1; min-width: 0; }
.hpcard-wrap img { max-width: 100%; }
.btn-heart[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
/* Quiz- en cadeau-resultaten. */
.vjp-quiz__results, .vjp-gift__results { margin-top: 36px; }
.vjp-quiz__results-title { font-size: var(--text-h3); text-align: center; margin-bottom: 22px; }
.vjp-favorites__grid { margin-bottom: 30px; }
.vjp-favorites__grid:empty { margin: 0; }
/* Vergelijken v2: dynamische kolommen (toevoeg-kolom alleen als er ruimte is). */
.vjp-cmp__grid { grid-template-columns: 140px repeat(var(--cmp-cols), minmax(180px, 1fr)) var(--cmp-add-w, 0px); }
.vjp-compare__empty { max-width: 560px; margin: 24px auto; text-align: center; }
.vjp-compare__empty-text { color: var(--ink-2); margin-bottom: 18px; }
.vjp-cmp-search { max-width: 340px; margin: 0 auto; }
.vjp-cmp-search .search { padding: 6px 6px 6px 16px; box-shadow: none; }
.vjp-cmp-search .search__input { font-size: 15px; padding: 8px 0; }
.vjp-cmp__add { padding: 10px; align-items: flex-start; }
.vjp-cmp__name a, .vjp-cmp__media { text-decoration: none; color: inherit; }
.vjp-cmp__name a:hover { color: var(--accent); }
/* ============================ HOMEPAGE (prototype) ============================ */
.vjp-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.vjp-kicker--light { color: var(--on-dark-2); }
.btn--gold { background: var(--accent-light); color: var(--ink); font-weight: 700; }
.btn--gold:hover { background: oklch(0.84 0.1 78); }
.chip--lg { padding: 12px 20px; font-size: 14.5px; }
/* Alle homepage-secties delen dezelfde ritmische verticale marge. */
.vjp-hp-hero, .vjp-hp-sec, .vjp-hp-finder { margin: 0 0 72px; }
.vjp-hp-sec__head { margin-bottom: 24px; }
.vjp-hp-sec__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.vjp-hp-sec__title { font-size: var(--text-h2); margin: 0; }
.vjp-hp-sec__sub { color: var(--ink-2); font-size: var(--text-lead); margin: 8px 0 0; }
.vjp-hp-sec__link { color: var(--accent); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }
/* Hero */
.vjp-hp-hero__grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.vjp-hp-hero__title { font-size: clamp(44px, 6vw, 64px); line-height: 1.0; margin: 0 0 18px; }
.vjp-hp-hero__lead { color: var(--ink-2); font-size: var(--text-lead); line-height: 1.55; max-width: 520px; margin: 0 0 26px; }
.vjp-hp-hero__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-search); }
.vjp-hp-fp { display: flex; gap: 16px; align-items: stretch; margin-bottom: 16px; }
.vjp-hp-fp__media { width: 68px; flex: none; border-radius: var(--r-sm); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; color: var(--ink-4); font-size: 9px; }
.vjp-hp-fp__rows { flex: 1; }
.vjp-hp-fp__note { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.5; margin: 0 0 16px; }
.vjp-hp-fp__link { color: var(--accent); font-weight: 600; font-size: var(--text-sm); }
/* Waar heb je zin in? — richtingkaarten */
.vjp-directions { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.vjp-dir { display: flex; flex-direction: column; gap: 6px; padding: 20px 18px; border-radius: var(--r-md, 18px); border: 1px solid oklch(0.9 0.02 var(--hue)); background: oklch(0.975 0.02 var(--hue)); text-decoration: none; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.vjp-dir:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -20px oklch(0.4 0.05 var(--hue) / 0.6); }
.vjp-dir__swatch { width: 28px; height: 28px; border-radius: var(--r-pill); background: oklch(0.72 0.13 var(--hue)); margin-bottom: 8px; }
.vjp-dir__label { font-weight: 700; color: var(--ink); font-size: 15px; }
.vjp-dir__notes { color: var(--ink-2); font-size: 12.5px; }
/* Waarvoor zoek je een geur? */
.vjp-occasions { display: flex; flex-wrap: wrap; gap: 10px; }
/* AI Parfum Finder — donker paneel */
.vjp-hp-finder { background: oklch(0.24 0.018 60); border-radius: var(--r-lg); padding: 44px; }
.vjp-hp-finder__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.vjp-hp-finder__title { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; color: var(--on-dark); margin: 0 0 22px; }
.vjp-hp-finder__demo { display: block; width: 100%; background: oklch(0.29 0.018 60); border: 1px solid oklch(0.36 0.02 60); border-radius: var(--r-sm); padding: 18px 20px; font-family: inherit; font-size: 15px; line-height: 1.6; margin-bottom: 18px; resize: vertical; min-height: 128px; outline: none; }
/* Kleur hard forceren: overrulet Divi's donkere input-kleur en late :focus-regels op elke browser (-webkit-text-fill-color wint visueel van color). */
.vjp-hp-finder__demo,
.vjp-hp-finder__demo:focus,
.vjp-hp-finder__demo:hover { color: var(--on-dark) !important; -webkit-text-fill-color: var(--on-dark) !important; caret-color: var(--on-dark); }
.vjp-hp-finder__demo::placeholder { color: var(--on-dark-2) !important; -webkit-text-fill-color: var(--on-dark-2) !important; opacity: 1; }
.vjp-hp-finder__demo:focus { border-color: var(--accent-light); }
.vjp-hp-finder__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vjp-hp-finder__count { color: var(--on-dark-2); font-size: 11.5px; }
.vjp-hp-finder__rhead { color: var(--on-dark-2); font-size: var(--text-sm); margin: 0 0 14px; }
.vjp-hp-finder__empty { color: var(--on-dark-2); }
.vjp-hp-match { display: block; background: oklch(0.29 0.016 60); border: 1px solid oklch(0.34 0.018 60); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; text-decoration: none; transition: border-color 0.12s ease; }
.vjp-hp-match:hover { border-color: var(--accent-light); }
.vjp-hp-match__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.vjp-hp-match__badge { font-family: var(--font-mono); font-size: 11px; color: var(--accent-light); font-weight: 600; }
.vjp-hp-match__brand { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--on-dark-2); }
.vjp-hp-match__name { color: var(--on-dark); font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.vjp-hp-match__fp { margin-bottom: 12px; }
.vjp-hp-match__cta { color: var(--on-dark-2); font-size: 12.5px; font-weight: 600; }
/* De geur van deze zomer */
.vjp-hp-season { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: stretch; }
.vjp-hp-season__feature { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; min-height: 420px; text-decoration: none; border: 1px solid var(--line); }
.vjp-hp-season__feature .vjp-hp-season__media { position: absolute; inset: 0; height: 100%; display: flex; align-items: flex-start; justify-content: flex-start; padding: 16px; color: var(--ink-4); font-size: 9px; }
.vjp-hp-season__fcard { position: absolute; left: 20px; right: 20px; bottom: 20px; background: var(--surface); border-radius: 18px; padding: 24px; box-shadow: 0 24px 50px -28px oklch(0.4 0.04 60 / 0.55); }
.vjp-hp-season__ftitle { font-size: 26px; line-height: 1.12; margin: 4px 0 4px; }
.vjp-hp-season__fbrand { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin: 0 0 10px; }
.vjp-hp-season__fdesc { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.55; margin: 0 0 18px; }
.vjp-hp-season__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.vjp-hp-scard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; text-decoration: none; }
.vjp-hp-scard:hover { border-color: var(--line-strong); }
.vjp-hp-scard__media { height: 130px; display: flex; align-items: flex-start; padding: 12px; color: var(--ink-4); font-size: 9px; }
.vjp-hp-scard__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.vjp-hp-scard__brand { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 3px; }
.vjp-hp-scard__name { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.vjp-hp-scard__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.vjp-hp-scard__pct { font-size: 12px; color: var(--ink-3); }
@media (max-width: 900px) {
.vjp-hp-hero__grid { grid-template-columns: 1fr; gap: 28px; }
.vjp-hp-finder__grid { grid-template-columns: 1fr; gap: 28px; }
.vjp-hp-season { grid-template-columns: 1fr; }
.vjp-directions { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.vjp-hp-finder { padding: 28px 22px; }
.vjp-directions { grid-template-columns: repeat(2, 1fr); }
.vjp-hp-season__grid { grid-template-columns: repeat(2, 1fr); }
.vjp-hp-sec__head--row { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* AI Parfum Finder */
.vjp-finder { max-width: 820px; margin: 0 auto; }
.vjp-finder__head { text-align: center; margin-bottom: 26px; }
.vjp-finder__badge {
display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600;
color: var(--accent); background: var(--accent-soft); border-radius: var(--r-pill); padding: 6px 14px; margin-bottom: 16px;
}
.vjp-finder__title { font-size: var(--text-h1); margin: 0 0 12px; }
.vjp-finder__lead { color: var(--ink-2); font-size: var(--text-lead); max-width: 600px; margin: 0 auto; line-height: 1.55; }
.vjp-finder__bar {
display: flex; gap: 10px; align-items: stretch; background: var(--surface); border: 1px solid var(--line-strong);
border-radius: var(--r-lg); padding: 12px; box-shadow: var(--shadow-search); margin-bottom: 16px;
}
.vjp-finder__input {
flex: 1; border: 0; resize: none; background: transparent; color: var(--ink); font: inherit; font-size: 17px;
line-height: 1.4; padding: 10px 12px; outline: none;
}
.vjp-finder__input::placeholder { color: var(--ink-4); }
.vjp-finder__submit { white-space: nowrap; align-self: stretch; }
.vjp-finder__submit:disabled { opacity: 0.6; cursor: default; }
.vjp-finder__turnstile { display: flex; justify-content: center; margin: 4px 0 12px; }
.vjp-finder__turnstile:empty { display: none; }
/* ---------- 404 "Deze geur bestaat niet" ---------- */
.vjp-404 { max-width: 1160px; margin: 0 auto; padding: 56px 24px 72px; }
.vjp-404__grid { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 56px; align-items: start; }
.vjp-404__main .kicker { display: block; margin-bottom: 16px; }
.vjp-404__title { font-family: var(--font-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.01em; font-size: clamp(40px, 5.4vw, 66px); color: var(--ink); margin: 0 0 18px; }
.vjp-404__lead { color: var(--ink-2); font-size: 17px; line-height: 1.6; max-width: 48ch; margin: 0 0 18px; }
.vjp-404__path { display: inline-block; color: var(--ink-3); font-size: 13.5px; background: var(--line-soft); border-radius: 8px; padding: 6px 12px; margin: 0 0 22px; word-break: break-all; }
.vjp-404__search { margin: 0 0 18px; max-width: 460px; }
.vjp-404__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 34px; }
.vjp-404__popular .kicker { display: block; margin: 0 0 12px; }
.vjp-404__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vjp-404__report { color: var(--ink-3); font-size: 14px; line-height: 1.55; margin: 30px 0 0; max-width: 46ch; }
.vjp-404__report a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.vjp-404__aside { position: relative; }
.vjp-404card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-pop); }
.vjp-404card.is-hidden { display: none; }
.vjp-404card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.vjp-404card__counter { color: var(--ink-3); font-size: 12.5px; letter-spacing: 0.02em; }
.vjp-404card__fp { margin: 0 0 20px; }
.vjp-404card__fp .fp { height: 44px; }
.vjp-404card__brand { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; font-weight: 700; color: var(--ink-3); margin: 0 0 6px; }
.vjp-404card__name { font-family: var(--font-display); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--ink); margin: 0 0 12px; }
.vjp-404card__desc { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin: 0 0 22px; }
.vjp-404card__price { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line-soft); padding-top: 18px; margin: 0 0 20px; }
.vjp-404card__price-label { color: var(--ink-3); font-size: 13.5px; }
.vjp-404card__price-val { color: var(--ink); font-weight: 700; font-size: 15px; text-align: right; }
.vjp-404card__price-val .card__price-amount { font-size: 19px; }
.vjp-404card__price-val .card__price-vol { display: block; color: var(--ink-3); font-weight: 500; font-size: 12px; }
.vjp-404card__actions { display: flex; gap: 10px; }
.vjp-404card__actions .btn { flex: 1; justify-content: center; text-align: center; }
.vjp-404__foot { text-align: center; color: var(--ink-3); font-size: 13px; margin: 48px 0 0; }
.vjp-404__empty { color: var(--ink-2); }
@media (max-width: 860px) {
.vjp-404 { padding: 36px 20px 56px; }
.vjp-404__grid { grid-template-columns: 1fr; gap: 32px; }
.vjp-404__title { font-size: clamp(34px, 10vw, 46px); }
.vjp-404card__actions { flex-direction: column; }
}
/* ---------- Bevestigingspagina prijsalert (double opt-in) ---------- */
.vjp-confirm { max-width: 640px; margin: 0 auto; padding: 72px 24px 90px; }
.vjp-confirm__card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-pop); padding: 44px 40px; text-align: center; }
.vjp-confirm__card .kicker { display: block; margin-bottom: 14px; }
.vjp-confirm__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 38px); line-height: 1.12; color: var(--ink); margin: 0 0 14px; }
.vjp-confirm__lead { color: var(--ink-2); font-size: 16px; line-height: 1.6; max-width: 44ch; margin: 0 auto 26px; }
@media (max-width: 600px) { .vjp-confirm { padding: 44px 18px 64px; } .vjp-confirm__card { padding: 32px 22px; } }
/* ---------- Match-meldingen opt-in (/mijn-geuren/) ---------- */
.vjp-matchoptin { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px 30px; margin: 30px 0 0; box-shadow: var(--shadow-search); }
.vjp-matchoptin__text { flex: 1 1 320px; }
.vjp-matchoptin__text .kicker { display: block; margin-bottom: 8px; }
.vjp-matchoptin__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; color: var(--ink); margin: 0 0 8px; }
.vjp-matchoptin__lead { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; margin: 0; max-width: 46ch; }
.vjp-matchoptin__form { flex: 1 1 300px; max-width: 400px; position: relative; }
.vjp-matchoptin__row { display: flex; gap: 8px; }
.vjp-matchoptin__email { flex: 1; min-width: 0; padding: 12px 18px !important; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 14px; background: var(--bg); color: var(--ink); }
.vjp-matchoptin .btn:disabled { opacity: .5; cursor: not-allowed; }
.vjp-matchoptin__consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.vjp-matchoptin__consent input { margin-top: 2px; }
.vjp-matchoptin__msg { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.vjp-matchoptin__msg:empty { display: none; }
.vjp-matchoptin__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 700px) { .vjp-matchoptin { padding: 22px; } .vjp-matchoptin__form, .vjp-matchoptin__text { flex-basis: 100%; max-width: none; } }
/* ---------- Voorkeurencentrum (/voorkeuren/) ---------- */
.vjp-prefs { max-width: 720px; margin: 0 auto; padding: 64px 24px 84px; }
.vjp-prefs__inner .kicker { display: block; margin-bottom: 14px; }
.vjp-prefs__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 4vw, 38px); line-height: 1.12; color: var(--ink); margin: 0 0 12px; }
.vjp-prefs__lead { color: var(--ink-2); font-size: 16px; line-height: 1.55; margin: 0 0 28px; }
.vjp-prefs__list { display: flex; flex-direction: column; gap: 14px; }
.vjp-prefs__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; }
.vjp-prefs__row-head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.vjp-prefs__row-title { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0; }
.vjp-prefs__row-desc { color: var(--ink-2); font-size: 14px; line-height: 1.5; margin: 0; max-width: 48ch; }
.vjp-prefs__note { color: var(--ink-3); font-size: 12.5px; margin: 6px 0 0; }
.vjp-prefs__state { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.vjp-prefs__state--on { background: #e3efe0; color: #2f6b3f; }
.vjp-prefs__state--off { background: var(--line-soft); color: var(--ink-3); }
.vjp-prefs__row-action { flex-shrink: 0; }
@media (max-width: 600px) {
.vjp-prefs { padding: 44px 18px 64px; }
.vjp-prefs__row { flex-direction: column; align-items: flex-start; gap: 14px; }
.vjp-prefs__row-action { width: 100%; }
.vjp-prefs__row-action .btn { width: 100%; justify-content: center; }
}
.vjp-prefs__alerts { margin-top: 10px; }
.vjp-prefs__alerts > summary { cursor: pointer; color: var(--ink); font-size: 13.5px; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.vjp-prefs__alerts > summary::-webkit-details-marker { display: none; }
.vjp-prefs__alerts > summary::before { content: '\25B8'; font-size: 11px; color: var(--ink-3); transition: transform .15s; }
.vjp-prefs__alerts[open] > summary::before { transform: rotate(90deg); }
.vjp-prefs__alert-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 460px; }
.vjp-prefs__alert { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; }
.vjp-prefs__alert-name { color: var(--ink); font-size: 13.5px; text-decoration: none; }
.vjp-prefs__alert-name:hover { text-decoration: underline; }
.vjp-prefs__alert-x { background: none; border: none; color: var(--ink-3); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 2px 0; white-space: nowrap; }
.vjp-prefs__alert-x:hover { color: var(--ink); }
.vjp-finder__examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-bottom: 8px; }
.vjp-finder__examples-label { color: var(--ink-3); font-size: var(--text-sm); }
.vjp-finder__examples .chip { cursor: pointer; }
.vjp-finder__results { margin-top: 32px; }
.vjp-finder__summary { font-size: var(--text-lead); color: var(--ink); text-align: center; margin: 0 auto 24px; max-width: 620px; }
.vjp-finder__note { text-align: center; color: var(--ink-4); font-size: var(--text-xs); margin-top: 28px; }
@media (max-width: 720px) {
.vjp-finder__bar { flex-direction: column; }
.vjp-finder__submit { width: 100%; }
}
/* Productfoto's (bootstrap OBF + later merchant): passen in de media-vlakken, packshot-stijl. */
.card__media { overflow: hidden; }
.card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.vjp-detail__media { position: relative; overflow: hidden; }
.vjp-detail__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.vjp-detail__mediawrap { display: flex; flex-direction: column; gap: 8px; }
.vjp-imgcredit { font-size: 10px; color: var(--ink-4); margin: 0; }
.vjp-imgcredit a { color: var(--ink-4); text-decoration: underline; }
/* Echte productfoto's op de homepage-zomerkaarten + "parfums zoals X". */
.vjp-hp-scard__media { position: relative; }
.vjp-hp-scard__media img,
.vjp-hp-season__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); display: block; }
/* Geurtest: geselecteerde optie zichtbaar markeren (klik toggelt aria-pressed). */
.vjp-quiz__option[aria-pressed="true"] {
border-color: var(--accent);
background: var(--accent-soft);
box-shadow: inset 0 0 0 1px var(--accent);
}
.vjp-quiz__option[aria-pressed="true"] .vjp-quiz__option-label { color: var(--accent); font-weight: 600; }
/* Knop-LINKS (bv. affiliate koopknop ) mogen hun tekstkleur niet
verliezen bij hover — Divi's generieke a:hover overrulet anders de witte tekst. */
a.btn--primary, a.btn--primary:hover, a.btn--primary:focus,
.et_pb_module a.btn--primary, .et_pb_module a.btn--primary:hover { color: oklch(0.98 0.01 85); }
a.btn--gold, a.btn--gold:hover, .et_pb_module a.btn--gold:hover { color: var(--ink); }
a.btn--dark, a.btn--dark:hover, .et_pb_module a.btn--dark:hover { color: var(--on-dark); }
a.btn--ghost, a.btn--ghost:hover, .et_pb_module a.btn--ghost:hover { color: oklch(0.3 0.015 60); }
/* Prijsvergelijking-lijst (detailpagina, enkel bij >1 merchant) */
.vjp-offers { display: flex; flex-direction: column; gap: 10px; }
/* Verborgen ml-blok echt verbergen: .vjp-offers{display:flex} zou anders het
HTML [hidden]-attribuut overschrijven en alle maten tegelijk tonen. */
.vjp-offers[hidden] { display: none; }
.vjp-offer { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; transition: border-color 0.12s ease; }
.vjp-offer:hover { border-color: var(--accent); }
.vjp-offer__merchant { font-weight: 600; color: var(--ink); }
.vjp-offer__price { margin-left: auto; font-size: 16px; color: var(--ink); }
.vjp-offer__cta { color: var(--accent); font-weight: 600; font-size: var(--text-sm); }
.vjp-offer__perml { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }
.vjp-pricebox { display: flex; flex-direction: column; gap: 12px; }
/* "Ook verkrijgbaar bij" (affiliate-offers zonder prijs, bv. Amazon). */
.vjp-pricebox__extra { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.vjp-pricebox__extra-label { display: block; font-size: var(--text-sm); color: var(--ink-3); margin-bottom: 8px; }
.vjp-offer--noprice .vjp-offer__cta { margin-left: auto; }
.vjp-volsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vjp-volsel__label { font-size: var(--text-sm); color: var(--ink-3); margin-right: 2px; }
.vjp-volsel__opt { padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vjp-volsel__opt:hover { border-color: var(--accent); }
.vjp-volsel__opt.is-active { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
@media (max-width: 600px) { .vjp-offer__perml { font-size: 11.5px; } }
/* Voordeligste prijs per ml over alle maten/winkels: uitgelichte balk bovenaan de prijsbox. */
.vjp-pricebox__bestpm { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 14px; text-decoration: none; background: var(--accent-soft); border: 1px solid oklch(0.86 0.05 145); border-radius: var(--r-md, 14px); padding: 13px 18px; }
.vjp-pricebox__bestpm:hover { border-color: var(--accent); }
.vjp-pricebox__bestpm-label { grid-column: 1; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.vjp-pricebox__bestpm-val { grid-column: 2; grid-row: 1 / span 2; font-size: 22px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.vjp-pricebox__bestpm-sub { grid-column: 1; font-size: 13.5px; color: var(--ink-2); }
.vjp-pricebox__bestpm .vjp-offer__cta { display: none; }
/* Vergelijk-lade: knop op kaart (naast hartje), knop op detail, en de zwevende balk. */
.btn-compare{position:absolute;top:52px;right:10px;z-index:2;width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--line);border-radius:50%;background:oklch(1 0 0 / 0.9);color:var(--ink-2);font-size:15px;line-height:1;cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.btn-compare:hover{color:var(--accent);border-color:var(--accent)}
.btn-compare.is-active,.btn-compare[aria-pressed="true"]{color:var(--on-dark);background:var(--accent);border-color:var(--accent)}
.vjp-cmp-add.is-active,.vjp-cmp-add[aria-pressed="true"]{background:var(--accent);color:var(--on-dark);border-color:var(--accent)}
.vjp-cmptray{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));pointer-events:none}
.vjp-cmptray__inner{pointer-events:auto;max-width:500px;margin:0 0 0 auto;display:flex;align-items:center;gap:10px;background:var(--dark);color:var(--on-dark);border-radius:16px;padding:9px 10px 9px 18px;box-shadow:0 10px 30px rgba(0,0,0,.28);transform:translateY(170%);opacity:0;transition:transform .28s ease,opacity .28s ease}
.vjp-cmptray.is-visible:not(.is-min) .vjp-cmptray__inner{transform:translateY(0);opacity:1}
.vjp-cmptray__count{font-weight:700;white-space:nowrap}
.vjp-cmptray__names{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;opacity:.75}
.vjp-cmptray__go{white-space:nowrap;text-decoration:none}
.vjp-cmptray__go.is-disabled{opacity:.5;pointer-events:none}
.vjp-cmptray__min,.vjp-cmptray__clear{background:none;border:0;color:inherit;cursor:pointer;line-height:1;padding:0 5px;opacity:.75}
.vjp-cmptray__min{font-size:14px}.vjp-cmptray__clear{font-size:20px}
.vjp-cmptray__min:hover,.vjp-cmptray__clear:hover{opacity:1}
.vjp-cmptray__handle{position:absolute;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));pointer-events:auto;display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:var(--on-dark);border:0;border-radius:999px;padding:9px 15px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translateY(170%);opacity:0;transition:transform .28s ease,opacity .28s ease}
.vjp-cmptray.is-visible.is-min .vjp-cmptray__handle{transform:translateY(0);opacity:1}
.vjp-cmptray__hcount{display:inline-flex;min-width:20px;height:20px;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:999px;font-size:12px;padding:0 6px}
/* Mobiel: balk én handvat gecentreerd. */
@media(max-width:560px){
.vjp-cmptray__names{display:none}
.vjp-cmptray__inner{margin:0 auto;max-width:100%}
.vjp-cmptray__handle{right:auto;left:0;margin-inline:auto;width:-moz-fit-content;width:fit-content}
}
/* Geurnoot 3-standen-filter: uit / met (toevoegen) / zonder (uitsluiten). */
.vjp-filter-hint{font-size:12px;color:var(--ink-3);margin:0 0 10px}
.vjp-chips3{display:flex;flex-wrap:wrap;gap:8px}
.chip--note3{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.chip--note3 .chip3__mark{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--line-strong);display:inline-flex;align-items:center;justify-content:center;font-size:10px;line-height:1;color:#fff;flex:none}
.chip--note3.is-include{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.chip--note3.is-include .chip3__mark{background:var(--accent);border-color:var(--accent)}
.chip--note3.is-include .chip3__mark::before{content:"\2713"}
.chip--note3.is-exclude{background:#f6e7e1;border-color:#c96f4a;color:#8a3f22;text-decoration:line-through}
.chip--note3.is-exclude .chip3__mark{background:#c96f4a;border-color:#c96f4a;text-decoration:none}
.chip--note3.is-exclude .chip3__mark::before{content:"\2715"}
.chip--active.chip--ex{background:#f6e7e1;color:#8a3f22;border-color:#e3b9a6}
/* Laagste prijs op de kaarten */
.card__price { font-weight: 600; color: var(--ink); }
.vjp-hp-scard__price { color: var(--ink); font-weight: 600; }
.vjp-hp-match__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 2px; }
.vjp-hp-match__price { color: var(--on-dark); font-weight: 600; font-size: 14px; }
/* Prijsalert-formulier (detailpagina) */
.vjp-alert { margin-top: 16px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px; max-width: 460px; }
.vjp-alert__lead { color: var(--ink-2); font-size: var(--text-sm); margin: 0 0 12px; }
.vjp-alert__row { display: flex; gap: 8px; }
.vjp-alert__email { flex: 1; border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 10px 16px 10px 20px !important; font: inherit; background: var(--surface); color: var(--ink); }
.vjp-alert .btn:disabled { opacity: .5; cursor: not-allowed; }
.vjp-alert__consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: var(--text-sm); color: var(--ink-2); cursor: pointer; }
.vjp-alert__msg:not(:empty) { margin-top: 10px; font-size: var(--text-sm); color: var(--accent); font-weight: 600; }
/* Klikbare noten (link i.p.v. span) — behoud pill-uiterlijk */
a.vjp-note { text-decoration: none; cursor: pointer; }
a.vjp-note:hover { border-color: var(--accent); color: var(--ink); }
/* Statuskiezer op favorietenkaart: duidelijk label + knoppenrij */
.vjp-favstatus { flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-top: 1px solid var(--line-soft); }
.vjp-favstatus__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.vjp-favstatus__opts { display: flex; gap: 4px; }
/* ============================ Overzichtspagina's (merken / geurnoten) ============================ */
.vjp-idx { max-width: var(--page-max); margin: 0 auto; }
.vjp-idx h1, .vjp-idx h2, .vjp-idx h3 { font-family: var(--font-display); font-weight: 400; margin: 0; }
.vjp-idx .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); margin-bottom: 18px; }
.vjp-idx .crumbs a { color: var(--ink-3); }
.vjp-idx .is-hidden { display: none !important; }
.idx-hero { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: start; padding: 8px 0 40px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.idx-hero h1 { font-size: clamp(40px, 6vw, 60px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 18px; }
.idx-hero .lead { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 640px; margin: 0 0 14px; }
.idx-hero .lead-2 { font-size: 15.5px; line-height: 1.6; color: var(--ink-3); max-width: 640px; margin: 0 0 24px; }
.vjp-idx .searchbar { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 9px 9px 9px 20px; max-width: 480px; box-shadow: var(--shadow-search); }
.vjp-idx .searchbar span { font-size: 16px; color: var(--ink-4); }
.vjp-idx .searchbar input { flex: 1; border: none; outline: none; font: inherit; font-size: 15px; color: var(--ink); background: transparent; }
.vjp-idx .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.vjp-idx .panel .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.vjp-idx .facts { display: flex; flex-direction: column; gap: 13px; }
.vjp-idx .facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.vjp-idx .facts span:first-child { font-size: 14px; color: var(--ink-2); }
.vjp-idx .facts span:last-child { font-size: 16px; font-weight: 600; }
.vjp-idx .panel__foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line-soft); font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.idx-block { padding: 34px 0 0; }
.vjp-idx .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.vjp-idx .sec-head h2 { font-size: clamp(24px, 3vw, 32px); }
.vjp-idx .sec-head span { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }
.vjp-idx .filterbar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 14px 0; border-bottom: 1px solid var(--line-soft); margin-top: 44px; }
.vjp-idx .pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vjp-idx .pills .lbl { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.vjp-idx .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--r-pill); padding: 9px 15px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.vjp-idx .pill i { width: 9px; height: 9px; border-radius: 999px; }
.vjp-idx .pill[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.vjp-idx .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.vjp-idx .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vjp-idx .brand-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md, 18px); overflow: hidden; color: inherit; text-decoration: none; }
.vjp-idx .brand-card:hover { border-color: var(--line-strong); box-shadow: 0 20px 40px -28px oklch(0.4 0.03 60 / 0.6); }
.vjp-idx .brand-card .plate { display: flex; align-items: center; justify-content: center; height: 96px; background-image: repeating-linear-gradient(135deg, oklch(0.955 0.01 82) 0 9px, oklch(0.928 0.014 82) 9px 18px); }
.vjp-idx .brand-card .plate span { font-family: var(--font-display); font-size: 25px; color: var(--ink); text-align: center; padding: 0 12px; }
.vjp-idx .brand-card .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.vjp-idx .brand-card .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vjp-idx .brand-card .row span:first-child { font-size: 13px; color: var(--ink-2); }
.vjp-idx .brand-card .row span:last-child { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.vjp-idx .brand-card .top { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.vjp-idx .alpha { display: flex; flex-wrap: wrap; gap: 4px; }
.vjp-idx .alpha button { min-width: 30px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: 6px 0; font-family: var(--font-mono); font-size: 12.5px; cursor: pointer; }
.vjp-idx .alpha button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--on-dark); }
.vjp-idx .alpha button[disabled] { background: var(--surface-sunken); color: var(--ink-4); cursor: default; }
.az-wrap { display: flex; flex-direction: column; gap: 34px; margin-top: 30px; }
.vjp-idx .az-group { display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; }
.vjp-idx .az-group > .letter { font-family: var(--font-display); font-size: 46px; line-height: 0.9; color: var(--ink-4); position: sticky; top: 130px; }
.vjp-idx .az-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; }
.vjp-idx .az-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 12px; border: 1px solid transparent; color: inherit; text-decoration: none; }
.vjp-idx .az-item:hover { background: var(--surface); border-color: var(--line); }
.vjp-idx .az-item b { font-size: 15px; font-weight: 500; }
.vjp-idx .az-item em { font-family: var(--font-mono); font-style: normal; font-size: 12px; color: var(--ink-3); }
.fam-wrap { display: flex; flex-direction: column; gap: 46px; margin-top: 34px; }
.vjp-idx .family { display: grid; grid-template-columns: 0.62fr 1fr; gap: 40px; align-items: start; }
.vjp-idx .family > div:first-child { position: sticky; top: 78px; }
.vjp-idx .fam-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.vjp-idx .fam-title i { width: 30px; height: 30px; border-radius: 999px; }
.vjp-idx .fam-title h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.05; }
.vjp-idx .fam-meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.vjp-idx .fam-blurb { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 380px; margin: 0; }
.vjp-idx .note { display: flex; flex-direction: column; gap: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 15px 16px; color: inherit; text-decoration: none; }
.vjp-idx .note:hover { border-color: var(--line-strong); }
.vjp-idx .note .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vjp-idx .note b { font-size: 15px; font-weight: 600; }
.vjp-idx .note span.d { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.vjp-idx .two-col { display: grid; grid-template-columns: 1fr 0.85fr; gap: 40px; padding-top: 44px; margin-top: 60px; border-top: 1px solid var(--line); }
.vjp-idx .two-col h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; }
.vjp-idx .explain { display: flex; flex-direction: column; gap: 14px; }
.vjp-idx .explain > div { display: flex; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.vjp-idx .explain--stack > div { flex-direction: column; gap: 6px; }
.vjp-idx .explain .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); width: 86px; flex-shrink: 0; padding-top: 3px; }
.vjp-idx .explain--stack .tag { width: auto; }
.vjp-idx .explain b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.vjp-idx .explain p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.vjp-idx .cta-warm { background: oklch(0.945 0.025 20); border: 1px solid oklch(0.86 0.04 25); border-radius: var(--r-lg); padding: 26px; }
.vjp-idx .cta-warm .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.48 0.06 30); margin-bottom: 12px; }
.vjp-idx .cta-warm .t { font-family: var(--font-display); font-size: 27px; line-height: 1.15; margin-bottom: 12px; }
.vjp-idx .cta-warm p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: oklch(0.42 0.03 40); }
.vjp-idx .btn-accent { display: inline-block; background: var(--accent); color: oklch(0.98 0.01 85); border: none; border-radius: var(--r-pill); padding: 13px 22px; font-size: 14px; font-weight: 700; text-decoration: none; }
@media (max-width: 1080px) { .vjp-idx .grid-4 { grid-template-columns: repeat(2, 1fr); } .vjp-idx .az-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
.idx-hero { grid-template-columns: 1fr; gap: 28px; }
.vjp-idx .family { grid-template-columns: 1fr; gap: 18px; }
.vjp-idx .family > div:first-child { position: static; }
.vjp-idx .grid-3 { grid-template-columns: 1fr; }
.vjp-idx .grid-4 { grid-template-columns: repeat(2, 1fr); }
.vjp-idx .two-col { grid-template-columns: 1fr; gap: 30px; }
.vjp-idx .az-group { grid-template-columns: 1fr; gap: 8px; }
.vjp-idx .az-group > .letter { position: static; font-size: 32px; }
.vjp-idx .az-list { grid-template-columns: 1fr; }
}
/* Zoekbalk bovenaan /ontdekken + lege-resultaten-CTA */
.vjp-results-top { max-width: var(--page-max); margin: 0 auto 22px; }
.vjp-results-top .search { max-width: none; box-shadow: none; }
.vjp-results-top .search .btn { padding: 10px 26px; }
.vjp-results__empty { text-align: center; max-width: 560px; margin: 26px auto; padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.vjp-results__empty-title { font-size: 22px; margin: 0 0 10px; font-family: var(--font-display); }
.vjp-results__empty-text { color: var(--ink-2); margin: 0 0 20px; line-height: 1.55; }
/* Volumes op de detailpagina */
.vjp-detail__vols { color: var(--ink-3); font-size: var(--text-sm); margin: -12px 0 22px; }
/* Geurtest: parfums toevoegen */
.vjp-quiz__perfumes { margin: 6px 0 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.vjp-quiz__sub { color: var(--ink-2); font-size: var(--text-sm); margin: 0 0 12px; }
.vjp-quiz__chosen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vjp-quiz__chosen .chip { cursor: pointer; }
/* Juridische links onder de copyright */
.vjp-footer__legal-left { display: flex; flex-direction: column; gap: 8px; }
.vjp-footer__legalnav { display: flex; gap: 16px; flex-wrap: wrap; }
.vjp-footer__legalnav a { color: var(--on-dark-2); }
.vjp-footer__legalnav a:hover { color: var(--accent-light); }
/* ============================ Over ons ============================ */
.vjp-about__intro { color: var(--ink-2); font-size: var(--text-lead); max-width: 640px; margin: 0 0 22px; }
.vjp-about__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.vjp-about__step { display: flex; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.vjp-about__num { font-size: 13px; color: var(--accent); font-weight: 700; flex: none; }
.vjp-about__step b { display: block; font-size: 16px; margin-bottom: 6px; color: var(--ink); }
.vjp-about__step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.vjp-about__princ { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vjp-about__princ > div { display: block; }
.vjp-about__body { font-size: 15px; line-height: 1.7; color: var(--ink-2); }
/* ============================ Blog ============================ */
.vjp-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.vjp-blogcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; }
.vjp-blogcard:hover { border-color: var(--line-strong); box-shadow: 0 20px 40px -28px oklch(0.4 0.03 60 / 0.6); }
.vjp-blogcard__media { aspect-ratio: 16 / 10; }
.vjp-blogcard__body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.vjp-blogcard .kicker, .vjp-idx .kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.vjp-blogcard__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--ink); margin: 2px 0; }
.vjp-blogcard__excerpt { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.vjp-blogcard__meta { font-size: 11.5px; color: var(--ink-3); margin-top: 4px; }
/* Single post: leesbare prose in editorial breedte */
.vjp-article--single { max-width: 760px; margin: 0 auto; }
.vjp-article--single .vjp-article__meta { margin: 0 0 24px; color: var(--ink-3); }
.vjp-article--single .vjp-article__meta a { color: var(--accent); }
@media (max-width: 860px) {
.vjp-about__steps { grid-template-columns: 1fr; }
.vjp-about__princ { grid-template-columns: 1fr; }
.vjp-blog__grid { grid-template-columns: 1fr; }
}
/* btn-accent (links, bv. Over ons e-mail + merken-CTA): tekst wit houden, ook bij hover. */
.vjp-idx a.btn-accent, .vjp-idx a.btn-accent:hover, .vjp-idx a.btn-accent:focus { color: oklch(0.98 0.01 85) !important; }
.vjp-idx a.btn-accent:hover { background: var(--accent-hover); }
/* Geurtest-wizard (5 stappen) */
.vjp-quiz__skip { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--ink-3); font-size: var(--text-sm); text-decoration: underline; }
.vjp-quiz__step { min-height: 200px; }
.vjp-quiz__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.vjp-quiz__added { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.vjp-quiz__sub { color: var(--ink-3); font-size: var(--text-xs); margin: 20px 0 10px; text-transform: uppercase; letter-spacing: 0.08em; }
.vjp-quiz__pchips { display: flex; flex-wrap: wrap; gap: 10px; }
.vjp-quiz__pchip { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 9px 16px; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--ink); cursor: pointer; }
.vjp-quiz__pchip[aria-pressed="true"], .vjp-quiz__pchip:disabled { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); cursor: default; }
.vjp-quiz__spacer { flex: 1; }
.vjp-quiz__nav { display: flex; align-items: center; gap: 12px; margin-top: 30px; }
/* Divi zet display:block op ; forceer dat [hidden] wint in de wizard. */
.vjp-quiz__step[hidden], .vjp-quiz__results[hidden], .vjp-idx section[hidden] { display: none !important; }
/* Kaartprijs: prijs + volume onbreekbaar, inline met · of gestapeld bij weinig plaats. */
.card__price, .vjp-hp-scard__price, .vjp-hp-match__price { display: inline-flex; flex-wrap: wrap; align-items: baseline; }
.card__price-amount, .card__price-vol { white-space: nowrap; }
.card__price-vol { color: var(--ink-2); font-weight: 400; }
.card__price-amount::after { content: "·"; margin: 0 5px; color: var(--ink-3); font-weight: 400; }
/* ============================================================================
Artikels — 1:1 naar ontwerp artikels.html (overzicht) + artikel.html (detail).
Gescoped onder .vjp-artikels / .vjp-artikel. Token-aliassen mappen het ontwerp
op onze eigen tokens.
========================================================================== */
.vjp-artikels, .vjp-artikel {
--card: var(--surface); --paper: var(--bg); --line-2: var(--line-soft);
--serif: var(--font-display); --sans: var(--font-body); --mono: var(--font-mono);
}
.vjp-artikels h1, .vjp-artikels h2, .vjp-artikels h3,
.vjp-artikel h1, .vjp-artikel h2 { text-wrap: balance; margin: 0; font-weight: 400; font-family: var(--serif); }
.vjp-artikels .mono { font-family: var(--mono); }
/* ── overzicht: lede ── */
.vjp-artikels .lede { position: relative; border-bottom: 1px solid var(--line); overflow: hidden; border-radius: var(--r-lg); }
.vjp-artikels .lede .bg { position: absolute; inset: 0; background: linear-gradient(148deg, oklch(0.95 0.022 82) 0%, oklch(0.975 0.008 85) 60%, oklch(0.955 0.02 175) 100%); }
.vjp-artikels .lede .inner { position: relative; max-width: var(--page-max); margin: 0 auto; padding: 40px 44px 44px; }
.vjp-artikels .lede h1 { font-size: 62px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 16px; }
.vjp-artikels .lede p { font-size: 17.5px; line-height: 1.6; color: oklch(0.36 0.02 63); max-width: 620px; text-wrap: pretty; margin: 0; }
.vjp-artikels .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); margin-bottom: 22px; }
.vjp-artikels .crumbs a { color: var(--ink-3); text-decoration: none; }
.vjp-artikels__body { max-width: var(--page-max); margin: 0 auto; padding: 40px 44px 0; }
/* ── overzicht: uitgelicht ── */
.vjp-artikels .feature { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 34px; align-items: stretch; margin: 40px 0 54px; }
.vjp-artikels .feature .shot { position: relative; border-radius: 24px; overflow: hidden; min-height: 400px; background-image: repeating-linear-gradient(115deg, oklch(0.94 0.02 82) 0 12px, oklch(0.915 0.025 82) 12px 24px); display: block; }
.vjp-artikels .feature .txt { display: flex; flex-direction: column; justify-content: center; }
.vjp-artikels .feature .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.5 0.04 60); margin-bottom: 16px; }
.vjp-artikels .feature h2 { font-size: 46px; line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 16px; }
.vjp-artikels .feature h2 a { color: inherit; text-decoration: none; }
.vjp-artikels .feature h2 a:hover { color: var(--accent); }
.vjp-artikels .feature p { margin: 0 0 22px; font-size: 17px; line-height: 1.65; color: oklch(0.36 0.02 63); text-wrap: pretty; }
.vjp-artikels .feature .foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); }
/* ── overzicht: filterbar ── */
.vjp-artikels .filterbar { position: static; background: var(--paper); padding: 14px 0; border-bottom: 1px solid oklch(0.93 0.01 78); margin-bottom: 26px; }
.vjp-artikels .pills { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vjp-artikels .pills > span.lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.vjp-artikels .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line-strong); color: oklch(0.34 0.02 62); border-radius: 999px; padding: 9px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
.vjp-artikels .pill i { width: 9px; height: 9px; border-radius: 999px; }
.vjp-artikels .pill[aria-pressed="true"] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.vjp-artikels .pills .mono { margin-left: auto; font-size: 12px; color: oklch(0.52 0.02 68); }
/* ── overzicht: grid ── */
.vjp-artikels .agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vjp-artikels .acard { background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.vjp-artikels .acard:hover { border-color: oklch(0.72 0.05 60); box-shadow: 0 22px 44px -30px oklch(0.4 0.03 60 / 0.6); }
.vjp-artikels .acard .th { height: 176px; background-image: repeating-linear-gradient(115deg, oklch(0.94 0.02 82) 0 10px, oklch(0.915 0.025 82) 10px 20px); }
.vjp-artikels .acard .b { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.vjp-artikels .acard .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 12px; }
.vjp-artikels .acard h3 { font-family: var(--sans); font-weight: 700; font-size: 18.5px; line-height: 1.25; margin: 0 0 10px; }
.vjp-artikels .acard p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: oklch(0.46 0.02 66); text-wrap: pretty; }
.vjp-artikels .acard .f { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
/* ── overzicht: twee kolommen ── */
.vjp-artikels .two-col { display: grid; grid-template-columns: 1fr 0.85fr; gap: 40px; padding-top: 44px; margin-top: 66px; border-top: 1px solid var(--line); }
.vjp-artikels .two-col h2 { font-size: 34px; margin-bottom: 18px; }
.vjp-artikels .explain { display: flex; flex-direction: column; gap: 14px; }
.vjp-artikels .explain > div { display: flex; gap: 16px; background: var(--card); border: 1px solid oklch(0.92 0.012 75); border-radius: 18px; padding: 18px 20px; }
.vjp-artikels .explain .tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); width: 86px; flex-shrink: 0; padding-top: 3px; }
.vjp-artikels .explain b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.vjp-artikels .explain p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.vjp-artikels .rank { display: flex; flex-direction: column; gap: 10px; }
.vjp-artikels .rank a { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid oklch(0.92 0.012 75); border-radius: 16px; padding: 14px 16px; color: inherit; text-decoration: none; }
.vjp-artikels .rank a:hover { border-color: oklch(0.72 0.05 60); }
.vjp-artikels .rank .n { font-family: var(--serif); font-size: 22px; color: oklch(0.6 0.03 62); width: 24px; }
.vjp-artikels .rank .t { flex: 1; }
.vjp-artikels .rank .t b { display: block; font-size: 15px; font-weight: 600; }
.vjp-artikels .rank .t span { display: block; font-size: 12.5px; color: oklch(0.52 0.02 68); margin-top: 2px; }
.vjp-artikels .cta-dark { background: var(--dark); border-radius: 22px; padding: 26px; color: var(--on-dark); }
.vjp-artikels .cta-dark .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.72 0.03 70); margin-bottom: 12px; }
.vjp-artikels .cta-dark .t { font-family: var(--serif); font-size: 27px; line-height: 1.15; margin-bottom: 12px; }
.vjp-artikels .cta-dark p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: oklch(0.82 0.02 78); text-wrap: pretty; }
.vjp-artikels a.btn-accent { display: inline-block; background: var(--accent); color: oklch(0.98 0.01 85); border-radius: 999px; padding: 13px 22px; font-size: 14px; font-weight: 700; text-decoration: none; }
.vjp-artikels a.btn-accent:hover, .vjp-artikels a.btn-accent:focus { color: oklch(0.98 0.01 85); }
.vjp-artikels .is-hidden { display: none !important; }
@media (max-width: 1080px) {
.vjp-artikels .agrid { grid-template-columns: repeat(2, 1fr); }
.vjp-artikels .two-col { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 860px) {
.vjp-artikels__body { padding: 24px 20px 0; }
.vjp-artikels .lede .inner { padding: 24px 20px 28px; }
.vjp-artikels .lede h1 { font-size: 36px; }
.vjp-artikels .feature { grid-template-columns: 1fr; gap: 20px; margin: 24px 0 34px; }
.vjp-artikels .feature .shot { min-height: 220px; }
.vjp-artikels .feature h2 { font-size: 28px; }
.vjp-artikels .agrid { grid-template-columns: 1fr; }
.vjp-artikels .two-col h2 { font-size: 26px; }
}
/* ── detail: verberg Divi-standaardtitel (titel staat nu in de hero) ── */
body.single-post .et_post_meta_wrapper { display: none; }
/* ── detail: hero ── */
.vjp-artikel .ahero { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--r-lg); background-image: repeating-linear-gradient(115deg, oklch(0.86 0.02 82) 0 12px, oklch(0.83 0.025 82) 12px 24px); margin-bottom: 8px; }
.vjp-artikel .ahero .veil { position: absolute; inset: 0; background: linear-gradient(oklch(0.2 0.02 60 / 0.1) 0%, oklch(0.2 0.02 60 / 0.55) 62%, oklch(0.2 0.02 60 / 0.85) 100%); }
.vjp-artikel .ahero .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px; }
.vjp-artikel .ahero .cap .in { max-width: 900px; margin: 0 auto; color: oklch(0.98 0.01 85); }
.vjp-artikel .ahero .meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; color: oklch(0.88 0.05 80); }
.vjp-artikel .ahero h1 { font-size: 60px; line-height: 1; letter-spacing: -0.02em; margin: 0; max-width: 760px; text-wrap: pretty; color: oklch(0.98 0.01 85); font-family: var(--serif); font-weight: 400; }
/* ── detail: layout ── */
.vjp-artikel .alayout { max-width: 1180px; margin: 0 auto; padding: 48px 0 20px; display: grid; grid-template-columns: 1fr 300px; gap: 64px; align-items: start; }
.vjp-artikel .standfirst { margin: 0 0 30px; font-size: 21px; line-height: 1.55; color: oklch(0.28 0.02 62); text-wrap: pretty; }
.vjp-artikel .abody { display: flex; flex-direction: column; gap: 26px; }
.vjp-artikel .abody h2 { font-size: 34px; line-height: 1.1; margin: 14px 0 0; scroll-margin-top: 100px; font-family: var(--serif); font-weight: 400; }
.vjp-artikel .abody h3 { font-size: 22px; line-height: 1.25; margin: 8px 0 0; font-family: var(--sans); font-weight: 700; }
.vjp-artikel .abody p { margin: 0; font-size: 17px; line-height: 1.7; color: oklch(0.32 0.02 63); text-wrap: pretty; }
.vjp-artikel .abody ul, .vjp-artikel .abody ol { margin: 0; padding-left: 22px; font-size: 17px; line-height: 1.7; color: oklch(0.32 0.02 63); }
.vjp-artikel .abody li + li { margin-top: 8px; }
.vjp-artikel .abody a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.vjp-artikel .abody blockquote { margin: 10px 0; padding: 26px 0; border-top: 1px solid oklch(0.9 0.012 75); border-bottom: 1px solid oklch(0.9 0.012 75); font-family: var(--serif); font-size: 30px; font-style: italic; line-height: 1.25; color: oklch(0.34 0.03 60); text-wrap: pretty; }
.vjp-artikel .quizcta { background: var(--dark); color: oklch(0.96 0.01 85); border-radius: 24px; padding: 34px; margin-top: 40px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.vjp-artikel .quizcta .t { font-family: var(--serif); font-size: 30px; line-height: 1.1; margin-bottom: 8px; }
.vjp-artikel .quizcta p { margin: 0; font-size: 15px; line-height: 1.55; color: oklch(0.8 0.015 75); }
.vjp-artikel .quizcta a { background: var(--accent-light); color: var(--dark); border-radius: 999px; padding: 16px 26px; font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; }
/* ── detail: zijbalk ── */
.vjp-artikel .arail { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.vjp-artikel .rbox { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.vjp-artikel .rbox .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.vjp-artikel .rbox .toc { display: flex; flex-direction: column; gap: 11px; }
.vjp-artikel .rbox .toc a { font-size: 14px; line-height: 1.4; color: oklch(0.4 0.02 65); text-decoration: none; }
.vjp-artikel .rbox .toc a.on { color: var(--accent); font-weight: 600; }
.vjp-artikel .rbox .more { display: flex; flex-direction: column; gap: 14px; }
.vjp-artikel .rbox .more a { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: oklch(0.28 0.02 62); text-decoration: none; }
.vjp-artikel .rbox .more a:hover { color: var(--accent); }
.vjp-artikel .rbox .more a span { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: oklch(0.58 0.02 70); margin-top: 4px; }
.vjp-artikel .mailbox { background: oklch(0.96 0.025 82); border: 1px solid oklch(0.9 0.03 80); border-radius: 20px; padding: 22px; }
.vjp-artikel .mailbox b { display: block; font-size: 15.5px; margin-bottom: 8px; font-family: var(--sans); }
.vjp-artikel .mailbox p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: oklch(0.42 0.025 62); }
.vjp-artikel .mailbox__btn { display: block; text-align: center; background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 13px; font-size: 14px; font-weight: 700; text-decoration: none; }
.vjp-artikel .mailbox__btn:hover { color: var(--on-dark); background: oklch(0.2 0.02 60); }
@media (max-width: 1080px) {
.vjp-artikel .alayout { grid-template-columns: 1fr; gap: 34px; }
.vjp-artikel .arail { position: static; }
}
@media (max-width: 860px) {
.vjp-artikel .ahero { min-height: 320px; }
.vjp-artikel .ahero .cap { padding: 20px; }
.vjp-artikel .ahero h1 { font-size: 32px; }
.vjp-artikel .alayout { padding: 28px 0 20px; }
.vjp-artikel .abody h2 { font-size: 25px; }
.vjp-artikel .abody blockquote { font-size: 22px; }
.vjp-artikel .quizcta { padding: 24px; }
}
/* ============================================================================
Blog-fixes: full-width, hero full-bleed zonder afronding, knop wit, sticky-offset
========================================================================== */
/* Volledige breedte (breekt uit de Divi-contentkolom, overflow-veilig: geen expliciete 100vw). */
.vjp-artikels, .vjp-artikel { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
/* Hero: geen afronding, sectie-brede achtergrond. */
.vjp-artikels .lede { border-radius: 0; }
.vjp-artikel .ahero { border-radius: 0; margin-bottom: 0; }
/* Detailpagina: dezelfde warme paginakleur onder de hero. */
.vjp-artikel { background: var(--bg); }
.vjp-artikel .alayout { max-width: 1180px; margin: 0 auto; padding-left: 44px; padding-right: 44px; }
/* "Lees het artikel"-knop wit (incl. hover/focus), Divi-linkkleur overschrijven. */
.vjp-artikels a.btn-accent, .vjp-artikels a.btn-accent:hover, .vjp-artikels a.btn-accent:focus,
#left-area .vjp-artikels a.btn-accent, .et_pb_module .vjp-artikels a.btn-accent { color: oklch(0.98 0.01 85) !important; }
/* Sticky zijbalk + ankers niet onder de sticky header (68px). */
.vjp-artikel .arail { top: 88px; }
.vjp-artikel .abody h2 { scroll-margin-top: 96px; }
@media (max-width: 860px) {
.vjp-artikel .alayout { padding-left: 20px; padding-right: 20px; }
}
/* Blog-detail: "In dit artikel genoemd" (echte producten). */
.vjp-artikel .mentioned { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; margin: 34px 0; }
.vjp-artikel .mentioned .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.vjp-artikel .mentioned .items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vjp-artikel .mentioned a { display: flex; align-items: center; gap: 14px; background: var(--surface-sunken); border: 1px solid oklch(0.92 0.012 75); border-radius: 16px; padding: 14px; color: inherit; text-decoration: none; }
.vjp-artikel .mentioned a:hover { border-color: oklch(0.72 0.04 65); }
.vjp-artikel .mentioned .th { width: 46px; height: 60px; flex: none; border-radius: 8px; background-image: repeating-linear-gradient(135deg, oklch(0.945 0.012 82) 0 7px, oklch(0.915 0.016 82) 7px 14px); }
.vjp-artikel .mentioned .mtxt { flex: 1; min-width: 0; }
.vjp-artikel .mentioned .brand { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.vjp-artikel .mentioned .name { display: block; font-size: 15.5px; font-weight: 600; margin: 2px 0 4px; }
.vjp-artikel .mentioned .note { display: block; font-size: 12.5px; color: oklch(0.5 0.02 66); }
.vjp-artikel .mentioned em { font-family: var(--font-mono); font-style: normal; font-size: 13px; white-space: nowrap; }
@media (max-width: 860px) { .vjp-artikel .mentioned .items { grid-template-columns: 1fr; } }
/* ============================================================================
Batch: content-achtergrond #f9f6f1, blog/detail-fixes, merken/geurnoten-updates
========================================================================== */
/* Content-achtergrond op de overzicht-/blogpagina's. */
.vjp-idx, .vjp-artikels, .vjp-artikel { background: #f9f6f1; }
.vjp-artikel .ahero, .vjp-artikels .lede { background-color: #f9f6f1; }
/* Blog-overzicht: uitgelicht artikel krijgt hover zoals de kaarten. */
.vjp-artikels .feature { border-radius: 24px; transition: box-shadow .18s ease; }
.vjp-artikels .feature:hover { box-shadow: 0 22px 44px -30px oklch(0.4 0.03 60 / 0.55); }
.vjp-artikels .feature .shot { transition: transform .3s ease; }
.vjp-artikels .feature:hover .shot { transform: scale(1.012); }
.vjp-artikels a.btn-accent { transition: background .16s ease; }
.vjp-artikels a.btn-accent:hover { background: var(--accent-hover) !important; }
/* Blog-overzicht: "Doe de geurtest"-knop donkerbruin, witte tekst, hover. */
.vjp-artikels .cta-dark a.btn--testcta,
.vjp-artikels .cta-dark a.btn--testcta:hover,
.vjp-artikels .cta-dark a.btn--testcta:focus { color: oklch(0.98 0.01 85) !important; }
.vjp-artikels .cta-dark a.btn--testcta { display: inline-block; background: var(--accent); border-radius: 999px; padding: 13px 22px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .16s ease; }
.vjp-artikels .cta-dark a.btn--testcta:hover { background: var(--accent-hover); }
/* Blog-detail: Divi post-wrapper padding weg. */
.single:not(.et-fb) .post { padding-bottom: 0 !important; }
/* Blog-detail breadcrumb. */
.vjp-artikel .vjp-crumbs { max-width: 1180px; margin: 0 auto; padding: 20px 44px 0; display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); }
.vjp-artikel .vjp-crumbs a { color: var(--ink-3); text-decoration: none; }
.vjp-artikel .vjp-crumbs a:hover { color: var(--accent); }
@media (max-width: 860px){ .vjp-artikel .vjp-crumbs { padding: 16px 20px 0; } }
/* Merken/geurnoten: hero full-width (breekt uit de contentkolom, overflow-veilig). */
.vjp-idx { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.vjp-idx .idx-hero { display: block; position: relative; border-bottom: 1px solid var(--line); border-radius: 0; overflow: hidden; }
.vjp-idx .idx-hero__bg { position: absolute; inset: 0; z-index: 0; }
.vjp-idx .idx-hero > * { position: relative; z-index: 1; }
.vjp-idx .idx-hero, .vjp-idx .idx-block, .vjp-idx .filterbar, .vjp-idx .az-wrap, .vjp-idx .fam-wrap, .vjp-idx .two-col, .vjp-idx main { max-width: var(--page-max); margin-left: auto; margin-right: auto; padding-left: 44px; padding-right: 44px; }
.vjp-idx .idx-hero { max-width: none; padding: 34px 0 40px; }
.vjp-idx .idx-hero__inner { max-width: var(--page-max); margin: 0 auto; padding: 0 44px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: start; }
/* Zoekknop in de searchbar. */
.vjp-idx .searchbar { padding-right: 9px; }
.vjp-idx .searchbar .btn-dark { background: var(--dark); color: var(--on-dark); border: none; border-radius: 999px; padding: 11px 20px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: var(--font-body); white-space: nowrap; }
.vjp-idx .searchbar .btn-dark:hover { background: oklch(0.2 0.02 60); }
/* Geurnoten: meest gezochte noten (grid-6), familie-fingerprint, note-count. */
.vjp-idx .grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.vjp-idx .note-top { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; color: inherit; text-decoration: none; }
.vjp-idx .note-top:hover { border-color: oklch(0.72 0.05 60); box-shadow: 0 18px 34px -26px oklch(0.4 0.03 60 / 0.6); }
.vjp-idx .note-top i { display: block; width: 26px; height: 26px; border-radius: 999px; margin-bottom: 16px; }
.vjp-idx .note-top b { display: block; font-size: 16.5px; font-weight: 600; margin-bottom: 3px; }
.vjp-idx .note-top em { display: block; font-family: var(--font-mono); font-style: normal; font-size: 11.5px; color: var(--ink-3); }
.vjp-idx .fam-fp { display: flex; align-items: flex-end; gap: 4px; height: 34px; width: 120px; margin-top: 12px; }
.vjp-idx .fam-fp i { flex: 1; border-radius: 3px; }
.vjp-idx .note .row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vjp-idx .note em { font-family: var(--font-mono); font-style: normal; font-size: 11.5px; color: var(--ink-3); }
/* Twee kolommen onderaan: explain + taglinks + cta. */
.vjp-idx .two-col { display: grid; grid-template-columns: 1fr 0.85fr; gap: 40px; padding-top: 44px; margin-top: 66px; border-top: 1px solid var(--line); }
.vjp-idx .two-col h2 { font-size: 34px; margin-bottom: 18px; }
.vjp-idx .explain { display: flex; flex-direction: column; gap: 14px; }
.vjp-idx .explain > div { display: flex; gap: 16px; background: var(--surface); border: 1px solid oklch(0.92 0.012 75); border-radius: 18px; padding: 18px 20px; }
.vjp-idx .explain .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); width: 96px; flex-shrink: 0; padding-top: 3px; }
.vjp-idx .explain b { display: block; font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.vjp-idx .explain p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.vjp-idx .explain--stack { }
.vjp-idx .taglinks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.vjp-idx .taglinks a { background: oklch(0.97 0.012 80); border: 1px solid oklch(0.9 0.014 75); border-radius: 999px; padding: 9px 15px; font-size: 13.5px; font-weight: 500; color: oklch(0.34 0.02 62); text-decoration: none; }
.vjp-idx .taglinks a:hover { border-color: oklch(0.72 0.05 60); }
.vjp-idx .cta-dark { background: var(--dark); border-radius: 22px; padding: 26px; color: var(--on-dark); }
.vjp-idx .cta-dark .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.72 0.03 70); margin-bottom: 12px; }
.vjp-idx .cta-dark .t { font-family: var(--font-display); font-size: 27px; line-height: 1.15; margin-bottom: 12px; }
.vjp-idx .cta-dark p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: oklch(0.82 0.02 78); text-wrap: pretty; }
.vjp-idx .cta-dark a.btn-cta { display: inline-block; background: var(--accent-light); color: var(--dark); border-radius: 999px; padding: 13px 22px; font-size: 14px; font-weight: 700; text-decoration: none; }
.vjp-idx .cta-dark a.btn-cta:hover { background: oklch(0.82 0.1 82); color: var(--dark); }
.vjp-idx .cta-warm { background: oklch(0.945 0.025 20); border: 1px solid oklch(0.86 0.04 25); border-radius: 22px; padding: 26px; }
.vjp-idx .cta-warm .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: oklch(0.48 0.06 30); margin-bottom: 12px; }
.vjp-idx .cta-warm .t { font-family: var(--font-display); font-size: 27px; line-height: 1.15; margin-bottom: 12px; }
.vjp-idx .cta-warm p { margin: 0 0 20px; font-size: 14px; line-height: 1.6; color: oklch(0.42 0.03 40); text-wrap: pretty; }
.vjp-idx a.btn-accent { display: inline-block; background: var(--accent); color: oklch(0.98 0.01 85); border-radius: 999px; padding: 13px 22px; font-size: 14px; font-weight: 700; text-decoration: none; }
.vjp-idx a.btn-accent:hover { background: var(--accent-hover); color: oklch(0.98 0.01 85); }
@media (max-width: 1080px) { .vjp-idx .grid-6 { grid-template-columns: repeat(3, 1fr); } .vjp-idx .two-col { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 900px) { .vjp-idx .idx-hero__inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 860px) {
.vjp-idx .idx-block, .vjp-idx .filterbar, .vjp-idx .az-wrap, .vjp-idx .fam-wrap, .vjp-idx .two-col, .vjp-idx main, .vjp-idx .idx-hero__inner { padding-left: 20px; padding-right: 20px; }
.vjp-idx .grid-6 { grid-template-columns: repeat(2, 1fr); }
}
/* Merken/geurnoten: sectie-spacing + panel-CTA. */
.vjp-idx .idx-block { padding-top: 46px; }
.vjp-idx .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.vjp-idx .filterbar { margin-top: 44px; }
.vjp-idx .fam-wrap { display: flex; flex-direction: column; gap: 46px; margin-top: 34px; }
.vjp-idx .panel__cta { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.vjp-idx .panel__cta p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.vjp-idx .panel__cta a.btn-dark { display: block; text-align: center; background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 12px; font-size: 13.5px; font-weight: 700; text-decoration: none; }
.vjp-idx .panel__cta a.btn-dark:hover { background: oklch(0.2 0.02 60); color: var(--on-dark); }
/* Detail: community-indruk (Sprint B, §2.8) — kwalitatief, met bronvermelding. */
.vjp-community { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.vjp-community__row { display: grid; grid-template-columns: 110px 1fr auto; gap: 14px; align-items: center; }
.vjp-community__k { font-size: 13.5px; color: var(--ink-2); }
.vjp-community__track { height: 7px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.vjp-community__track i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.vjp-community__row em { font-family: var(--font-mono); font-style: normal; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.vjp-community__season { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.vjp-community__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.vjp-community__chips .chip { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; color: var(--ink-2); }
.vjp-community__src { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); max-width: 560px; }
/* ============================================================================
Sprint C — /parfums// ontdekkingspagina's (.vjp-plp)
========================================================================== */
.vjp-plp { max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); background: #f9f6f1; }
.vjp-plp h1, .vjp-plp h2 { font-family: var(--font-display); font-weight: 400; margin: 0; }
.vjp-plp .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
.vjp-plp .crumbs a { color: var(--ink-3); text-decoration: none; }
.vjp-plp .crumbs a:hover { color: var(--accent); }
/* Hero (full-width, gradient-bg, gecentreerde inner). */
.vjp-plp .idx-hero { display: block; position: relative; border-bottom: 1px solid var(--line); overflow: hidden; padding: 34px 0 40px; }
.vjp-plp .idx-hero__bg { position: absolute; inset: 0; z-index: 0; }
.vjp-plp .idx-hero > * { position: relative; z-index: 1; }
.vjp-plp .idx-hero__inner { max-width: var(--page-max); margin: 0 auto; padding: 0 44px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 56px; align-items: start; }
.vjp-plp .seo-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vjp-plp .seo-kicker i { width: 12px; height: 12px; border-radius: 999px; }
.vjp-plp .seo-kicker span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.vjp-plp .idx-hero h1 { font-size: clamp(40px, 6vw, 60px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 16px; }
.vjp-plp .idx-hero .lead { font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 620px; margin: 0; text-wrap: pretty; }
.vjp-plp .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; }
.vjp-plp .panel .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.vjp-plp .facts { display: flex; flex-direction: column; gap: 13px; }
.vjp-plp .facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.vjp-plp .facts span:first-child { font-size: 14px; color: var(--ink-2); }
.vjp-plp .facts span:last-child { font-size: 15px; font-weight: 600; text-align: right; }
/* Main + toolbar + grid. */
.vjp-plp__main { max-width: var(--page-max); margin: 0 auto; padding: 34px 44px 0; }
.vjp-plp .toolbar { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 20px; }
.vjp-plp__count { font-size: 12px; color: var(--ink-3); }
.vjp-plp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.vjp-plp .card__media-wrap { position: relative; }
.vjp-plp__match { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--font-mono); font-size: 11px; background: var(--dark); color: var(--on-dark); border-radius: 999px; padding: 5px 9px; }
.vjp-plp__more { margin-top: 28px; display: flex; justify-content: center; }
.vjp-plp__empty { color: var(--ink-2); padding: 20px 0; }
.vjp-plp__related { margin-top: 60px; padding-top: 34px; border-top: 1px solid var(--line); }
.vjp-plp__related .label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.vjp-plp .taglinks { display: flex; flex-wrap: wrap; gap: 8px; }
.vjp-plp .taglinks a { background: oklch(0.97 0.012 80); border: 1px solid var(--line); border-radius: 999px; padding: 9px 15px; font-size: 13.5px; font-weight: 500; color: oklch(0.34 0.02 62); text-decoration: none; }
.vjp-plp .taglinks a:hover { border-color: oklch(0.72 0.05 60); }
.vjp-plp__pad { max-width: var(--page-max); margin: 0 auto; padding: 44px; }
.vjp-plp__pad .lead { color: var(--ink-2); }
.vjp-plp__index { margin-top: 20px; }
@media (max-width: 1080px) { .vjp-plp__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .vjp-plp .idx-hero__inner { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 760px) {
.vjp-plp .idx-hero__inner, .vjp-plp__main, .vjp-plp__pad { padding-left: 20px; padding-right: 20px; }
.vjp-plp__grid { grid-template-columns: 1fr 1fr; }
}
/* Homepage: laatste artikels (kaartstijl van het blogoverzicht). */
.vjp-hp-blog .vjp-hp-sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.vjp-hp-blog__all { font-size: 14px; font-weight: 600; color: var(--accent); white-space: nowrap; text-decoration: none; }
.vjp-hp-blog__all:hover { color: var(--accent-hover); }
.vjp-hp-blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; }
.vjp-hp-blog .acard { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.vjp-hp-blog .acard:hover { border-color: oklch(0.72 0.05 60); box-shadow: 0 22px 44px -30px oklch(0.4 0.03 60 / 0.6); }
.vjp-hp-blog .acard .th { height: 176px; background-image: repeating-linear-gradient(115deg, oklch(0.94 0.02 82) 0 10px, oklch(0.915 0.025 82) 10px 20px); background-size: cover; background-position: center; }
.vjp-hp-blog .acard .b { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.vjp-hp-blog .acard .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; margin-bottom: 12px; }
.vjp-hp-blog .acard h3 { font-family: var(--font-body); font-weight: 700; font-size: 18.5px; line-height: 1.25; margin: 0 0 10px; color: var(--ink); }
.vjp-hp-blog .acard p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.vjp-hp-blog .acard .f { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
@media (max-width: 900px) { .vjp-hp-blog__grid { grid-template-columns: 1fr; } }
/* Homepage-blogsectie staat standalone (na de Divi-content) → zelf centreren. */
.vjp-hp-blog { max-width: var(--page-max); margin: 8px auto 0; padding: 46px 44px 10px; }
@media (max-width: 760px) { .vjp-hp-blog { padding: 30px 20px 8px; } }
/* ---- Contactpagina (/contact/) + juridische noot ------------------------- */
.vjp-contact { max-width: 980px; margin: 0 auto; padding: 8px 4px 20px; }
.vjp-contact__lead { font-size: 1.05rem; line-height: 1.6; color: #4a423b; max-width: 60ch; margin: 0 0 26px; }
.vjp-contact__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.vjp-contact__aside { background: #fff; border: 1px solid #ece5db; border-radius: 14px; padding: 22px 24px; }
.vjp-contact__aside h2 { margin: 0 0 10px; font-size: 1.05rem; }
.vjp-contact__aside p { margin: 0 0 12px; line-height: 1.55; color: #4a423b; }
.vjp-contact__note { font-size: 0.85rem; color: #7a7168; border-top: 1px solid #ece5db; padding-top: 12px; }
/* Contact Form 7 velden een nette, bij het ontwerp passende stijl geven. */
.vjp-contact .wpcf7-form p { margin: 0 0 16px; }
.vjp-contact .wpcf7-form label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; color: #3a332d; }
.vjp-contact .wpcf7-form input:not([type=submit]), .vjp-contact .wpcf7-form textarea {
width: 100%; padding: 12px 14px; border: 1px solid #d9d0c4; border-radius: 10px;
background: #fff; font: inherit; color: #2b2620; }
.vjp-contact .wpcf7-form input:focus, .vjp-contact .wpcf7-form textarea:focus {
outline: none; border-color: #7a5c3a; box-shadow: 0 0 0 3px rgba(122,92,58,.15); }
.vjp-contact .wpcf7-form input[type=submit] {
background: #4a382a; color: #fff; border: 0; border-radius: 999px;
padding: 13px 30px; font-weight: 600; cursor: pointer; transition: background .15s; }
.vjp-contact .wpcf7-form input[type=submit]:hover { background: #63482f; }
.vjp-legal-note { margin-top: 34px; padding: 20px 22px; background: #f4efe7; border: 1px solid #e5ddd0; border-radius: 12px; }
.vjp-legal-note h2 { margin: 0 0 8px; font-size: 1.05rem; }
.vjp-legal-note p { margin: 0; line-height: 1.6; color: #4a423b; }
.vjp-footer__company { display: block; margin-top: 2px; opacity: .8; font-size: .85em; }
@media (max-width: 760px) { .vjp-contact__grid { grid-template-columns: 1fr; gap: 26px; } }
/* ---- /ontdekken/ filters: beter leesbare labels (fase 6) ----------------- */
.vjp-filters .vjp-filter-group__title { font-size: 14px; letter-spacing: .05em; color: var(--ink-2); }
.vjp-filters .vjp-check { font-size: 15px; color: var(--ink); gap: 11px; }
.vjp-filters .vjp-check input { width: 17px; height: 17px; }
.vjp-filters .vjp-check__count { font-size: 13px; }
.vjp-filters .vjp-chipset .chip { font-size: 14px; padding: 9px 14px; }
.vjp-filters .vjp-filters__title { font-size: 16px; }
/* ---- Artikel app-flow CTA (gidsen ↔ applicatie, fase 6) ------------------ */
.vjp-artikel .vjp-flow { background: linear-gradient(150deg, #efe7db 0%, #f7f2ea 70%); border: 1px solid #e5ddce; border-radius: 16px; padding: 22px 24px; margin: 30px 0; }
.vjp-artikel .vjp-flow__label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #7a5c3a; margin-bottom: 12px; }
.vjp-artikel .vjp-flow__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 18px; font-size: 14.5px; color: #4a423b; }
.vjp-artikel .vjp-flow__steps b { background: #fff; border: 1px solid #e2d8c8; border-radius: 999px; padding: 5px 13px; font-weight: 600; }
.vjp-artikel .vjp-flow__steps span { color: #b09a7c; font-weight: 700; }
.vjp-artikel .vjp-flow a.vjp-flow__cta { display: inline-block; background: #4a382a; color: #fff; border-radius: 999px; padding: 12px 26px; font-weight: 600; text-decoration: none; transition: background .15s; }
.vjp-artikel .vjp-flow a.vjp-flow__cta:hover { background: #63482f; color: #fff; }
.vjp-artikel .vjp-flow--split { display: flex; flex-wrap: wrap; gap: 10px; }
.vjp-artikel .vjp-flow .vjp-flow--split a.vjp-flow__cta.alt { background: #fff; color: #4a382a; border: 1px solid #d9cdb8; }
.vjp-artikel .vjp-flow .vjp-flow--split a.vjp-flow__cta.alt:hover { color: #4a382a; }
.vjp-artikel .vjp-inline-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.vjp-artikel .vjp-inline-links a { background: #f1ece3; border: 1px solid #e5ddce; border-radius: 999px; padding: 6px 13px; font-size: 13.5px; text-decoration: none; color: #4a382a; }
.vjp-artikel .vjp-inline-links a:hover { background: #e8e0d3; }
/* ---- /ontdekken/ nieuwe filters: merk-zoekbox + scroll (fase 6) ---------- */
.vjp-filters .vjp-brand-search { width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: 9px; font: inherit; font-size: 14px; margin-bottom: 10px; background: var(--surface); }
.vjp-filters .vjp-brand-search:focus { outline: none; border-color: #7a5c3a; box-shadow: 0 0 0 3px rgba(122,92,58,.14); }
.vjp-filters .vjp-checks--scroll { max-height: 230px; overflow-y: auto; padding-right: 4px; }
.vjp-filters .vjp-chipset .chip[aria-pressed="true"] { background: var(--dark, #4a382a); color: #fff; border-color: var(--dark, #4a382a); }
/* ---- Landing editorial intro (AI, uniek per term) ------------------------ */
.vjp-plp__editorial { max-width: 720px; margin: 40px 0 8px; }
.vjp-plp__editorial h2 { font-size: 1.35rem; margin: 0 0 14px; }
.vjp-plp__editorial p { line-height: 1.65; color: #4a423b; margin: 0 0 14px; }
/* ---- Artikel full-width (geen zijbalk) ----------------------------------- */
.vjp-artikel .alayout { max-width: 820px; margin: 0 auto; padding: 44px 0 12px; display: block; grid-template-columns: none; gap: 0; }
.vjp-artikel .afurther { max-width: 820px; margin: 6px auto 44px; }
.vjp-artikel .afurther .rbox { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 26px; }
.vjp-artikel .afurther .rbox .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.vjp-artikel .afurther .more { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vjp-artikel .afurther .more a { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: oklch(0.28 0.02 62); text-decoration: none; }
.vjp-artikel .afurther .more a:hover { color: var(--accent); }
.vjp-artikel .afurther .more a span { display: block; font-family: var(--mono); font-size: 11px; font-weight: 400; color: oklch(0.58 0.02 70); margin-top: 4px; }
@media (max-width: 720px) { .vjp-artikel .afurther .more { grid-template-columns: 1fr; } }
/* ---- Blogpost: Divi's rechter sidebar uitschakelen (full-width artikel) --- */
.single-post #main-content .container { width: 100%; max-width: 1080px; }
.single-post #left-area { width: 100% !important; max-width: none !important; padding-right: 0 !important; float: none !important; }
.single-post #sidebar { display: none !important; }
/* ---- Blogpost: no-sidebar layout paddings wegnemen ----------------------- */
.single-post #left-area { padding-bottom: 0 !important; }
.single-post #main-content .container { padding-top: 0 !important; }
.single-post .et_pb_post .entry-content { padding-top: 0 !important; }
/* Blogpost: hele content-zone beige (voorkomt wit doorschijnen onder de beige .vjp-artikel). */
.single-post #main-content, .single-post #content-area, .single-post #left-area { background: #f9f6f1; }
.single-post .et_pb_section { background-color: #f9f6f1; }
/* ---- Landing mini-FAQ (accordeon) --------------------------------------- */
.vjp-plp__faq { max-width: 720px; margin: 34px 0 8px; }
.vjp-plp__faq h2 { font-size: 1.35rem; margin: 0 0 12px; }
.vjp-faq__item { border-bottom: 1px solid #e5ddce; }
.vjp-faq__item summary { cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 1.02rem; color: #3a332d; list-style: none; }
.vjp-faq__item summary::-webkit-details-marker { display: none; }
.vjp-faq__item summary::after { content: '+'; float: right; color: #b09a7c; font-weight: 700; font-size: 1.2rem; line-height: 1; }
.vjp-faq__item[open] summary::after { content: '\2212'; }
.vjp-faq__item p { margin: 0 0 16px; line-height: 1.6; color: #4a423b; }
/* ---- Mobiele aanpassingen (<=600px) -------------------------------------- */
@media (max-width: 600px) {
/* Hero-koppen kleiner */
.vjp-hp-hero__title { font-size: 34px; line-height: 1.06; }
.vjp-hp-hero__lead { font-size: 17px; }
/* Zoekbalken als "finder"-kaart: input full-width bovenaan, knop full-width eronder. */
.search { flex-wrap: wrap; row-gap: 10px; border-radius: 16px; padding: 12px; }
.search .search__icon { display: none; }
.search .search__input { min-width: 0; flex: 1 1 100%; border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px; background: var(--surface); }
.search .btn { flex: 1 0 100%; justify-content: center; padding: 13px; }
/* Homepage: max 3 voorbeeld-chips */
.vjp-examples .chip:nth-child(n+4) { display: none; }
/* Breadcrumbs: starten op 1 lijn, wrappen indien te lang */
.vjp-plp .crumbs, .vjp-idx .crumbs, .vjp-artikels .crumbs, .vjp-breadcrumb { flex-wrap: wrap; }
/* /ontdekken/: sorteren links uitlijnen */
.vjp-sort { margin-left: 0; }
/* Parfumdetail: ademruimte + geurprofiel-icoon gecentreerd boven de waarden */
.vjp-detail { padding: 25px 25px 40px; }
.vjp-detail__fp { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.vjp-detail__fp .fp-rows { width: 100%; }
/* Community-indruk: bar onder de tekst (label + kwalificatie op regel 1, balk eronder) */
.vjp-community__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vjp-community__k { flex: 1 1 auto; }
.vjp-community__track { flex: 1 0 100%; order: 3; }
/* Blogdetail: zijmarges bij de tekst */
.vjp-artikel .alayout, .vjp-artikel .afurther { padding-left: 25px; padding-right: 25px; }
}
/* Geurtest-CTA-knop: witte tekst op donkere knop (ook desktop) */
.vjp-idx a.btn-dark, .vjp-idx a.btn-dark:hover, .vjp-idx a.btn-dark:focus,
.vjp-idx .panel__cta a.btn-dark, .vjp-idx .panel__cta a.btn-dark:hover { color: var(--on-dark) !important; }
/* Mijn geuren: actieve filter-tab witte tekst */
.vjp-favorites .vjp-tabs__tab--active, .vjp-favorites .vjp-tabs__tab--active * { color: var(--on-dark) !important; }
/* Mobiele filter-bottomsheet (/ontdekken/) */
@media (max-width: 720px) {
body.vjp-filters-open { overflow: hidden; }
body.vjp-filters-open .vjp-filters { display: block; position: fixed; left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; background: var(--surface); z-index: 1000; border-radius: 22px 22px 0 0; padding: 22px var(--page-pad-m) 26px; box-shadow: 0 -12px 40px rgba(40,30,20,.24); }
#vjp-filters-scrim { position: fixed; inset: 0; background: rgba(30,25,20,.45); z-index: 999; }
.vjp-filters__done { width: 100%; margin-top: 18px; justify-content: center; }
}
/* Mobiel: familie-filterpills compact (1 rij, horizontaal scrollen i.p.v. 50% scherm) + FAQ-ruimte */
@media (max-width: 600px) {
.vjp-idx .filterbar .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.vjp-idx .filterbar .pills::-webkit-scrollbar { display: none; }
.vjp-idx .filterbar .pills .pill { flex: 0 0 auto; }
.vjp-artikel .abody h2 { margin-top: 24px; }
}
/* Mobiel: geurnoten/merk hero 25px zijmarge (rechts touchte het scherm) */
@media (max-width: 600px) {
.vjp-idx .idx-hero__inner, .vjp-idx .idx-block, .vjp-idx .filterbar, .vjp-idx .az-wrap, .vjp-idx .fam-wrap, .vjp-idx .two-col, .vjp-idx main { padding-left: 25px; padding-right: 25px; }
}
.vjp-hp-fp__media { padding: 0; overflow: hidden; }
.vjp-hp-fp__media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--r-sm); }
/* Honeypot voor het prijsalert-formulier (onzichtbaar voor mensen) */
.vjp-alert__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Toegankelijkheid: skiplink naar de hoofdinhoud (zichtbaar bij toetsenbord-focus). */
.vjp-skip { position: absolute; left: -9999px; top: 0; z-index: 100000; background: var(--dark); color: var(--on-dark); padding: 12px 20px; border-radius: 0 0 10px 0; font-weight: 700; text-decoration: none; }
.vjp-skip:focus { left: 0; outline: 2px solid var(--accent); outline-offset: 2px; }
/* Prijs in het donkere finder-teaser-blok: licht i.p.v. donker (WCAG-contrast). */
.vjp-hp-finder .card__price-amount, .vjp-hp-finder .card__price-vol { color: oklch(0.85 0.02 82); }
/* Geurtest: laadstaat met geanimeerd hartje-logo + uitgeschakelde "matches"-knop. */
.vjp-quiz__loading { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 48px 20px; text-align: center; color: var(--ink-2); }
.vjp-quiz__heart { font-size: 46px; line-height: 1; color: var(--accent); animation: vjp-heartbeat 1s ease-in-out infinite; }
.vjp-quiz__loading p { margin: 0; font-size: 15px; }
@keyframes vjp-heartbeat { 0%,100% { transform: scale(1); opacity: .85; } 25% { transform: scale(1.18); opacity: 1; } 40% { transform: scale(1); } 60% { transform: scale(1.12); opacity: 1; } }
.btn.is-loading { opacity: .6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .vjp-quiz__heart { animation: none; } }
/* Mobiel: "nieuwe matches"-optin → knop onder de input (niet naast, anders te breed). */
@media (max-width: 600px) {
.vjp-matchoptin__row { flex-direction: column; }
.vjp-matchoptin__row .btn { width: 100%; }
}
/* Detail-beschrijving: mobiel kleiner font + inklapbaar (Lees meer). */
.vjp-detail__desc-more { display: none; }
.vjp-detail__pricelink { display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; }
.vjp-detail__pricelink:hover { text-decoration: underline; }
#vjp-prices { scroll-margin-top: 88px; }
@media (max-width: 700px) {
.vjp-detail__desc { font-size: 14px; line-height: 1.6; }
.vjp-detail__desc-wrap:not(.is-open) .vjp-detail__desc { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.vjp-detail__desc-more { display: inline-block; margin-top: 6px; background: none; border: none; padding: 4px 0; color: var(--accent); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
}
/* "Ruikt zoals"-pagina's (dupe/alternatieven-pilot) */
.vjp-alt .idx-hero__inner { align-items: stretch; }
.vjp-alt__anchor { display: flex; gap: 16px; align-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px; min-width: 240px; max-width: 340px; }
.vjp-alt__anchor-media { flex: 0 0 84px; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 10px; overflow: hidden; }
.vjp-alt__anchor-media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vjp-alt__anchor-body .label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.vjp-alt__anchor-brand { font-size: 12.5px; opacity: .85; margin-top: 4px; }
.vjp-alt__anchor-name { font-weight: 700; line-height: 1.2; margin: 2px 0; }
.vjp-alt__anchor-accords { font-size: 12.5px; opacity: .8; }
.vjp-alt__anchor-price { font-weight: 700; margin: 8px 0; }
.vjp-alt__anchor .btn { padding: 7px 14px; font-size: 13px; }
.vjp-alt__budget { margin: 22px 0; padding: 18px 20px; background: #fff7e6; border: 1px solid #f0dca8; border-radius: 14px; }
.vjp-alt__budget .label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #9a7b1f; font-weight: 700; }
.vjp-alt__budget p { margin: 6px 0 0; }
@media (max-width: 720px) { .vjp-alt__anchor { max-width: none; } }
/* "X vs Y"-vergelijkpagina's (pilot #2) */
.vjp-vs__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 8px 0 26px; }
.vjp-vs__col { background: #fff; border: 1px solid #ece7de; border-radius: 16px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.vjp-vs__media { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.vjp-vs__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.vjp-vs__brand { font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.vjp-vs__name { font-weight: 700; font-size: 17px; line-height: 1.25; margin: 3px 0 6px; }
.vjp-vs__name a { color: inherit; text-decoration: none; }
.vjp-vs__accords { font-size: 13px; opacity: .8; margin-bottom: 8px; }
.vjp-vs__price { font-weight: 700; margin-bottom: 12px; }
.vjp-vs__col .btn { padding: 8px 16px; font-size: 13.5px; }
.vjp-vs__tablewrap { margin: 26px 0; overflow-x: auto; }
.vjp-vs__table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.vjp-vs__table th, .vjp-vs__table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid #ece7de; vertical-align: top; }
.vjp-vs__table thead th { font-size: 15px; }
.vjp-vs__table tbody th { font-weight: 600; color: #6b6355; width: 30%; }
.vjp-vs__table td { width: 35%; }
@media (max-width: 600px) { .vjp-vs__name { font-size: 15px; } .vjp-vs__media { width: 92px; height: 92px; } .vjp-vs__table th, .vjp-vs__table td { padding: 9px 10px; font-size: 13px; } }
/* "Beste ..."-listicles (pilot #3) */
.vjp-list__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.vjp-list__item { position: relative; }
.vjp-list__rank { position: absolute; top: -8px; left: -8px; z-index: 3; width: 30px; height: 30px; border-radius: 50%; background: #2b2622; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
@media (max-width: 980px) { .vjp-list__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .vjp-list__grid { grid-template-columns: repeat(2, 1fr); } }
/* Finder-loader: geanimeerde skeleton-kaarten (bewegende strepen = duidelijk "aan het zoeken") */
.card--sk .ph { animation: vjp-sk-shimmer 1.05s linear infinite; }
.card--sk .card__brand.ph { height: 12px; width: 55%; border-radius: 5px; margin-bottom: 8px; }
.card--sk .card__name.ph { height: 17px; width: 85%; border-radius: 5px; color: transparent; }
@keyframes vjp-sk-shimmer { to { background-position: -25.46px 0; } }
/* Ingebedde YouTube-Short op pilotpagina's (facade -> iframe na klik) */
.vjp-video{margin:36px 0}
.vjp-video>h2{font-size:22px;margin:0 0 14px}
.vjp-yt{position:relative;max-width:340px;margin:0 auto;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:#2B2620}
.vjp-yt__btn{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer}
.vjp-yt__btn img{width:100%;height:100%;object-fit:cover;display:block}
.vjp-yt__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(20,18,16,.6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;padding-left:4px}
.vjp-yt iframe{width:100%;height:100%;border:0;display:block}
.vjp-yt video{width:100%;height:100%;object-fit:cover;display:block;background:#2B2620}
/* Social-iconen in de footer */
.vjp-social{display:flex;gap:16px;margin-top:16px}
.vjp-social__link{display:inline-flex;color:inherit;opacity:.72;transition:opacity .15s ease,transform .15s ease}
.vjp-social__link:hover,.vjp-social__link:focus-visible{opacity:1;transform:translateY(-2px)}
.vjp-social__link svg{display:block}
/* Parfum-prijsindex (datapagina) */
.vjp-pi__kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:8px 0 28px}
.vjp-pi__kpi{background:#FFFDF8;border:1px solid #E6DFD0;border-radius:14px;padding:20px 18px;text-align:center}
.vjp-pi__num{display:block;font-family:'Playfair Display',Georgia,serif;font-size:34px;font-weight:700;color:#2B2620;line-height:1.1}
.vjp-pi__lbl{display:block;margin-top:6px;font-size:13px;color:#6F665C;text-transform:uppercase;letter-spacing:.04em}
.vjp-pi__block{margin:34px 0}
.vjp-pi__block>h2{font-size:24px;margin:0 0 6px}
.vjp-pi__note{color:#6F665C;margin:0 0 16px}
.vjp-pi__tablewrap{overflow-x:auto}
.vjp-pi__table{width:100%;border-collapse:collapse;font-size:15px}
.vjp-pi__table th,.vjp-pi__table td{padding:12px 14px;text-align:left;border-bottom:1px solid #E6DFD0;white-space:nowrap}
.vjp-pi__table th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#8A7658}
.vjp-pi__pname{white-space:normal;min-width:220px}
.vjp-pi__diff{font-weight:700;color:#4F9A48}
.vjp-pi__pop{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.vjp-pi__pop li{display:flex;align-items:center;gap:12px;background:#FFFDF8;border:1px solid #E6DFD0;border-radius:12px;padding:12px 16px}
.vjp-pi__rank{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-size:22px;color:#B4589B;min-width:26px}
.vjp-pi__pop .vjp-pi__price{margin-left:auto;color:#6F665C;font-size:14px}
.vjp-pi__press{background:#F4EFE4;border-radius:16px;padding:24px 26px}
@media(max-width:640px){.vjp-pi__kpis{grid-template-columns:repeat(2,1fr)}.vjp-pi__num{font-size:28px}}
/* Review-CTA (Google/Trustpilot) na een tevredenheidsmoment (geurtest-uitslag, geurkast opgeslagen). */
.vjp-reviewcta{margin-top:22px}
.vjp-reviewcta__btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.favsave__review{margin-top:20px}
/* Prijsmonitor: maand-trend + balkenchart van de grootste prijsverschillen. */
.vjp-pm__trend{margin:8px 0 22px;font-size:15px;color:#6F665C}
.vjp-pm__bars{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vjp-pm__bar{display:grid;grid-template-columns:minmax(0,1fr) 2.2fr auto;align-items:center;gap:14px}
.vjp-pm__bname{font-weight:600;color:#2B2620;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vjp-pm__bname span{color:#8A7658;font-weight:400;font-size:13px}
.vjp-pm__track{position:relative;height:22px;background:#EFE8DA;border-radius:11px;overflow:hidden}
.vjp-pm__fill{position:absolute;left:0;top:0;height:100%;background:linear-gradient(90deg,#7CC074,#4F9A48);border-radius:11px}
.vjp-pm__val{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:15px;color:#4F9A48;font-weight:600;white-space:nowrap}
.vjp-pm__facts{margin:14px 0;padding-left:20px;display:grid;gap:6px;color:#3A342C}
@media(max-width:640px){.vjp-pm__bar{grid-template-columns:1fr auto;gap:6px 12px}.vjp-pm__track{grid-column:1 / -1;order:3}}
/* AI Finder: deelbare resultaten. */
.vjp-finder__share{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.vjp-finder__sharemsg{font-size:14px;color:#4F9A48;font-weight:600}
/* Vergelijker: noten als chips met gedeeld/uniek-onderscheid. */
.vjp-cmp__notes{display:flex;flex-wrap:wrap;gap:6px}
.vjp-cmp__note{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;line-height:1;padding:5px 10px;border-radius:999px;text-decoration:none;border:1px solid var(--line);color:var(--ink-2);background:var(--surface);transition:.15s}
.vjp-cmp__note:hover{border-color:var(--line-strong);color:var(--ink)}
.vjp-cmp__note.is-shared{border-color:transparent;background:oklch(0.94 0.06 var(--hue));color:oklch(0.34 0.08 var(--hue));font-weight:600}
.vjp-cmp__note.is-shared:hover{background:oklch(0.91 0.07 var(--hue));color:oklch(0.3 0.09 var(--hue))}
.vjp-cmp__dot{width:7px;height:7px;border-radius:50%;background:oklch(0.62 0.13 var(--hue,60));display:inline-block;flex:none}
.vjp-cmp__shared{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:var(--accent-soft);border:1px solid var(--line);border-radius:16px;padding:14px 18px;margin:0 0 18px}
.vjp-cmp__shared-label{color:var(--ink-2);white-space:nowrap}
.vjp-cmp__shared-none{margin:0;color:var(--ink-2);font-size:14px}
.vjp-cmp__legend{display:flex;gap:18px;margin:14px 2px 0;font-size:12px;color:var(--ink-2)}
.vjp-cmp__lg{display:inline-flex;align-items:center;gap:6px}
.vjp-cmp__lg--shared .vjp-cmp__dot{--hue:60}
.vjp-cmp__lg--uniq::before{content:"";width:9px;height:9px;border:1px solid var(--line-strong);border-radius:50%;display:inline-block}
.vjp-cmp__vname{display:none}
/* Prijs-cel in de vergelijker: prijs + prijs per ml onder elkaar. */
.vjp-cmp__pricecell{display:flex;flex-direction:column;gap:2px;align-items:flex-start}
.vjp-cmp__price{font-weight:600;color:var(--ink)}
.vjp-cmp__pvol{color:var(--ink-3);font-weight:400}
.vjp-cmp__perml{font-size:12.5px;color:var(--accent);font-weight:600}
/* Vergelijker mobiel: GESTACKT. Foto's als strip bovenaan, dan per onderdeel de parfums onder elkaar
(elke waarde voorafgegaan door de parfumnaam) zodat het verschil meteen duidelijk is. */
@media (max-width:560px){
.vjp-cmp{overflow:visible}
.vjp-cmp__grid{display:block;min-width:0;grid-template-columns:none}
.vjp-cmp__add,.vjp-cmp__cell--muted{display:none}
.vjp-cmp__grid>.vjp-cmp__cell--label:first-child{display:none} /* lege hoekcel boven de foto's */
/* elke waarde op een eigen regel, met de parfumnaam ervoor */
.vjp-cmp__cell{display:flex;gap:10px;align-items:baseline;padding:5px 0;border-bottom:0;font-size:14px}
.vjp-cmp__vname{display:block;flex:none;width:100px;font-size:11px;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vjp-cmp__notes{gap:5px}
/* attribuut-kop = sectietitel over de volle breedte */
.vjp-cmp__grid>.vjp-cmp__cell--label{display:block;border-top:1px solid var(--line);padding:16px 0 4px;margin-top:6px;font-weight:700;color:var(--ink);font-size:11px;letter-spacing:.09em}
/* parfum-koppen naast elkaar als compacte strip (child-selector wint van .vjp-cmp__cell) */
.vjp-cmp__grid>.vjp-cmp__head{display:inline-block;width:31%;margin:0 2% 6px 0;vertical-align:top;padding:6px 4px 12px;background:none}
.vjp-cmp__grid>.vjp-cmp__head:last-of-type{margin-right:0}
.vjp-cmp__head .vjp-cmp__media{height:92px}
.vjp-cmp__head .vjp-cmp__brand{font-size:9px}
.vjp-cmp__head .vjp-cmp__name{font-size:12px}
.vjp-cmp__head .vjp-cmp__remove{top:0;right:2px;font-size:16px}
/* uitgebreide fingerprint-rij (label + waarden) verbergen: staat al compact in de kop */
.vjp-cmp__grid>.vjp-cmp__r-geurprofiel{display:none}
}