/* ============================================================
   VERBETERINGEN uit de review van 30 september 2026 — stijlen bij verbeteringen.js
   ============================================================ */

/* ---------- Zwevende knoppen: op mobiel ingeklapt achter één knop ---------- */
.kp-fabs__knop { display: none; order: 99; }
@media (max-width: 760px) {
  .kp-fabs__knop { display: grid; }
  .kp-fabs:not(.is-open) .fabwrap { display: none; }
  .fabs { gap: 6px; }
  .fab { width: 44px; height: 44px; }
  .kp-fabs.is-open .fab__lbl { opacity: 1; }
}

/* ---------- Klantenservice in het mobiele menu ---------- */
.kp-nav-help { display: none; }
@media (max-width: 700px) {
  .nav.is-open .kp-nav-help {
    display: block; text-align: left; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: var(--s0); font-weight: 600; color: var(--ink-2); padding: .6em .85em;
    border-top: 1px solid var(--line); margin-top: .3rem; padding-top: .9em;
  }
}

/* ---------- Webshop op mobiel: vaste filterknop ---------- */
.kp-filterfab { display: none; }
@media (max-width: 1000px) {
  .kp-filterfab {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 52;
    display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; padding: .55em 1.2em;
    border: 0; border-radius: var(--r-pill); background: var(--ink); color: var(--paper);
    font: inherit; font-weight: 700; font-size: var(--s-1); cursor: pointer;
    box-shadow: 0 10px 24px -10px #0008;
  }
  .kp-filterfab[hidden] { display: none; }
  .kp-filterfab .pchip__n { background: var(--paper); color: var(--ink); }
  body:has(.side.is-open) .kp-filterfab { display: none; }
}

/* ---------- Inlogscherm ---------- */
.login .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.login .tab { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; text-align: center; }
@media (max-width: 860px) {
  /* beeld als smalle strook, zodat de invulvelden direct in beeld staan */
  .login__art--foto { min-height: 0; height: clamp(120px, 26vw, 200px); order: -1; padding: 0; }
  .login__art--foto:not(.kp-heeft-beeld) > * { display: none; }
  .login__form { padding: 1.25rem 1.1rem 1.5rem; gap: .8rem; }
  .login__form h1 { font-size: var(--s2) !important; }
  .login__form .lead { font-size: var(--s-1) !important; }
}
/* feestelijk: rustig vallende glinsters over het beeld */
.login__art::after {
  content: ""; position: absolute; inset: -40% 0 0; z-index: 2; pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff 60%, transparent 61%),
    radial-gradient(3px 3px at 32% 6%, #ffffffd0 60%, transparent 61%),
    radial-gradient(2px 2px at 54% 28%, #fff 60%, transparent 61%),
    radial-gradient(3px 3px at 76% 12%, #ffffffc0 60%, transparent 61%),
    radial-gradient(2px 2px at 88% 34%, #fff 60%, transparent 61%),
    radial-gradient(2.5px 2.5px at 22% 44%, #ffffffb0 60%, transparent 61%),
    radial-gradient(2px 2px at 66% 52%, #fff 60%, transparent 61%);
  background-size: 100% 50%;
  animation: kp-glinster 14s linear infinite;
  opacity: .85;
}
@keyframes kp-glinster { from { transform: translateY(0); } to { transform: translateY(50%); } }
@media (prefers-reduced-motion: reduce) { .login__art::after { animation: none; } }

/* ---------- Productpagina ---------- */
.kp-pdptop { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; justify-content: space-between; margin-bottom: clamp(.75rem, 2vw, 1.25rem); }
.kp-pdptop .crumbs { margin: 0; min-width: 0; }
.kp-pdpnav { display: inline-flex; gap: .25rem; font-size: var(--s-1); font-weight: 600; }
.kp-pdpnav a { color: var(--ink-2); text-decoration: none; padding: .35em .7em; border-radius: var(--r-pill); }
.kp-pdpnav a:hover { background: var(--paper-2); color: var(--ink); }
.kp-pdpnav a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* rustiger: minder losse kaders en lijnen, meer lucht */
.pdpbox .pblock { border-top: 0; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); padding-top: 0; }
.pdpbox .buy2 > .hr { opacity: .55; }
.pdpbox .speclist .specrow { background: transparent !important; border-bottom: 1px solid var(--line); padding-block: .45rem; }
.pdpbox .speclist .specrow:last-child { border-bottom: 0; }
.pdpbox .clamp { max-height: none; }
.pdpbox .clamp[data-open="0"] { max-height: 14em; }
@media (max-width: 900px) {
  /* mobiel: één kolom, titel en koopblok nooit onder de foto's */
  .pdpbox .pdp2 { display: flex; flex-direction: column; height: auto; gap: 1rem; }
  .pdpbox .pcol-l, .pdpbox .pcol-r { position: static; overflow: visible; max-height: none; }
  .pdpbox .shots, .pdpbox .shots .shot { position: relative; }
  /* foto's als veegbare rij: titel en koopknop staan direct onder de eerste foto */
  .pdpbox .shots, .pdpbox .shots.kp-shots {
    display: flex; gap: .6rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
  }
  .pdpbox .shots::-webkit-scrollbar { display: none; }
  .pdpbox .shots > .shot { flex: 0 0 86%; aspect-ratio: 1 !important; scroll-snap-align: center; grid-column: auto !important; }
  .pdpbox .shots > .shot:only-child { flex-basis: 100%; }
  .pdpbox .buy2 { position: relative; z-index: 1; padding-left: 0; }
  .pdpbox .pcol-r .pblock { padding-left: 0; }
}

/* ---------- Afrekenen ---------- */
.rcard.kp-rcard-logo { align-items: center; }
.rcard .kp-carrier { width: 40px; height: 40px; flex: none; margin-left: auto; border-radius: 8px; object-fit: contain; }
.rcard .ecotag + .kp-carrier { margin-left: .4rem; }
.kp-veldmelding { margin: .3rem 0 0; font-size: var(--s-2); font-weight: 600; color: var(--stop); }
.kp-veldmelding[data-soort="tip"] { color: var(--ink-2); font-weight: 500; }
.kp-linkknop { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--brand-text, var(--ink)); text-decoration: underline; cursor: pointer; }
input[aria-invalid="true"] { border-color: var(--stop) !important; }
.kp-adresfout { margin-top: .35rem; }

/* grotere productfoto's bij "Jouw keuze" (gegevens en controleren) en in Mijn bestelling */
.sumline.kp-sumline, .kp-mijn .sumline { grid-template-columns: 72px minmax(0, 1fr) auto; gap: .9rem; }
.sumline__img.kp-img { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.sumline__img.kp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; }

/* ---------- Mijn bestelling: status bovenaan ---------- */
.kp-ord { display: grid; gap: 1rem; padding: clamp(1rem, 2.5vw, 1.5rem); margin-top: 1.25rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); color: var(--ink); }
.kp-ord__hd { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.kp-ord__hd h2 { font-size: var(--s2); margin-top: .15rem; }
.kp-ord__ft { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: .8rem; font-size: var(--s-1); }
.kp-ord--leeg { justify-items: start; }
.kp-ord--leeg h2 { font-size: var(--s2); }

.kp-route { --stap: calc(100% / (var(--n) - 1)); display: grid; gap: .5rem; padding-inline: 14px; }
.kp-route__baan { position: relative; height: 34px; }
.kp-route__baan::before, .kp-route__vol { content: ""; position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; }
.kp-route__baan::before { right: 0; background: var(--line); }
.kp-route__vol { width: calc(var(--stap) * var(--nu)); background: var(--action); animation: kp-vul 1.4s var(--ease-out, ease-out) both; }
.kp-route__auto {
  position: absolute; top: 50%; left: calc(var(--stap) * var(--nu)); width: 34px; height: 34px; margin: -17px 0 0 -17px;
  display: grid; place-items: center; border-radius: 50%; background: var(--action); color: var(--action-on, #fff);
  box-shadow: 0 0 0 4px var(--paper); animation: kp-rijden 1.4s var(--ease-out, ease-out) both;
}
.kp-route__auto svg { width: 18px; height: 18px; animation: kp-hobbel .5s ease-in-out infinite alternate; }
.kp-route ol { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; font-size: var(--s-2); color: var(--ink-3); }
.kp-route li { flex: 1; text-align: center; }
.kp-route li:first-child { text-align: left; margin-left: -14px; }
.kp-route li:last-child { text-align: right; margin-right: -14px; }
.kp-route li[data-klaar="1"] { color: var(--ink); font-weight: 700; }
@keyframes kp-vul { from { width: 0; } }
@keyframes kp-rijden { from { left: 0; } }
@keyframes kp-hobbel { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@media (prefers-reduced-motion: reduce) { .kp-route__vol, .kp-route__auto, .kp-route__auto svg { animation: none; } }

.kp-saldo { margin-top: 1.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.kp-saldo > summary { cursor: pointer; font-weight: 700; font-family: var(--font-brand); font-size: var(--s1); list-style: none; display: flex; align-items: center; gap: .5rem; }
.kp-saldo > summary::-webkit-details-marker { display: none; }
.kp-saldo > summary::after { content: "+"; margin-left: auto; font-size: 1.3em; line-height: 1; }
.kp-saldo[open] > summary::after { content: "–"; }
.kp-saldo .tblwrap { margin-top: .75rem; }

/* ---------- Veelgestelde vragen ---------- */
.kp-faqzoek { position: relative; max-width: 560px; margin: 0 0 1.5rem; }
.kp-faqzoek svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.kp-faqzoek input { width: 100%; min-height: 48px; padding: .6rem 1rem .6rem 2.6rem; border: 2px solid var(--line); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: inherit; box-sizing: border-box; }
.kp-faqzoek input:focus { outline: none; border-color: var(--ink); }
.kp-faqgeen { margin: -.75rem 0 1.5rem; }
.faq section[id^="g"] { scroll-margin-top: 140px; }
.faq details.qa > summary { cursor: pointer; }
.faqhelp .btn { width: 100%; justify-content: center; }

/* ---------- Sterrenicoon ---------- */
.kp-ster { color: var(--gold-2, #d4a017); vertical-align: -3px; }
.kp-ster__glim { animation: kp-glim 2.6s ease-in-out infinite; transform-origin: 19.5px 4.5px; }
@keyframes kp-glim { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 82% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .kp-ster__glim { animation: none; opacity: 0; } }

/* ---------- Helpdesk altijd zichtbaar, ook op mobiel (aanbesteding Amsterdam, K-1) ---------- */
@media (max-width: 700px) {
  .helpdesk { display: block; top: auto; bottom: 132px; padding: .8rem .4rem; font-size: .75rem; z-index: 46; }
}

/* ---------- Terugknop (terug.js) ---------- */
.kp-terugrij { padding-top: clamp(.75rem, 1.6vw, 1.1rem); margin-bottom: -.4rem; position: relative; z-index: 2; }
.kp-terug {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .35em .9em .35em .7em;
  border: 2px solid var(--ink); border-radius: var(--r-pill, 999px); background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--s-1); font-weight: 700; cursor: pointer;
}
.kp-terug span { font-size: 1.3em; line-height: 1; margin-top: -.1em; }
.kp-terug:hover { background: var(--ink); color: var(--paper); }

/* winkelmand: productfoto in het vakje */
.litem__ph.kp-img { position: relative; overflow: hidden; background: #fff; }
.litem__ph.kp-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6%; box-sizing: border-box; }

/* eigen scrollbalkje naast de zijbalk: alleen op brede schermen */
.kp-zijbalk-balk { display: none; }
/* zijbalk in de webshop: pagina scrolt mee aan het eind, scrollbalkje zichtbaar bij hover, vervaging als er meer is */
@media (min-width: 1001px) {
  #app .side { overscroll-behavior: auto; scrollbar-width: none; }
  #app .side::-webkit-scrollbar { display: none; }
  /* het raakvlak is 20 px breed (makkelijk te pakken), het zichtbare balkje 6 px; bij aanwijzen wordt het breder */
  .kp-zijbalk-balk { display: block; position: fixed; z-index: 30; width: 20px; opacity: 0; pointer-events: none; transition: opacity .2s; touch-action: none; user-select: none; }
  .kp-zijbalk-balk::before { content: ""; position: absolute; top: 0; bottom: 0; left: 8px; width: 6px; border-radius: 3px; background: rgb(0 0 0 / .07); transition: width .15s, left .15s; }
  .kp-zijbalk-balk.is-zichtbaar { opacity: 1; pointer-events: auto; cursor: grab; }
  .kp-zijbalk-balk:active { cursor: grabbing; }
  .kp-zijbalk-balk > span { position: relative; display: block; margin-left: 8px; width: 6px; border-radius: 3px; background: var(--ink-3, #767676); transition: width .15s, margin .15s, background .15s; }
  .kp-zijbalk-balk:hover::before, .kp-zijbalk-balk:active::before { left: 6px; width: 10px; border-radius: 5px; }
  .kp-zijbalk-balk:hover > span, .kp-zijbalk-balk:active > span { margin-left: 6px; width: 10px; border-radius: 5px; background: var(--ink-2, #444); }
  #app .side.kp-meer-onder { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }
  #app .side.kp-meer-onder.kp-meer-boven { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 24px, #000 calc(100% - 36px), transparent); }
  #app .side.kp-meer-boven:not(.kp-meer-onder) { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24px); mask-image: linear-gradient(to bottom, transparent, #000 24px); }
}

/* productpagina: rustiger knoppen zonder kader ("Toon meer", plus/min bij het aantal, hartje) */
.pdpbox .more { border: 0; padding-left: 0; padding-right: 0; background: none; color: var(--brand-text, var(--ink)); text-decoration: underline; text-underline-offset: 3px; }
.pdpbox .more:hover { background: none; color: var(--brand-text, var(--ink)); text-decoration-thickness: 2px; }
.qty button { border: 0; background: var(--paper-2, #f3f3f3); }
.qty button:hover { background: var(--ink); color: var(--paper); }
.buy2 .btn--ghost[data-act="fav"] { border: 0; box-shadow: none; background: transparent; }
.buy2 .btn--ghost[data-act="fav"]:hover { background: var(--paper-2, #f3f3f3); color: var(--ink); }
.buy2 .btn--ghost[data-act="fav"] svg { width: 24px; height: 24px; }
.pdpbox .more:focus-visible, .qty button:focus-visible, .buy2 .btn--ghost[data-act="fav"]:focus-visible { outline: 3px solid var(--focus, #181818); outline-offset: 2px; }

/* zijbalk: geen vervaging als er iets binnen de focus heeft (anders valt de focusrand weg) */
@media (min-width: 1001px) { #app .side:has(:focus-visible) { -webkit-mask-image: none !important; mask-image: none !important; } }
/* zoekveld in de kop: duidelijke focusrand */
.search:focus-within { outline: 3px solid var(--focus, #181818); outline-offset: 2px; }

/* =====================================================================
   TELEFOON (≤ 700 px): alles netjes binnen het scherm, niets onder zwevende knoppen
   ===================================================================== */
/* fieldsets zijn standaard minstens zo breed als hun inhoud: dat maakte het afrekenen breder dan het scherm */
fieldset { min-width: 0; }

@media (max-width: 1000px) {
  /* filtermenu: paneel van boven tot onder, boven de kop */
  #app .side.is-open { top: 0 !important; bottom: 0; max-height: none !important; height: 100%; z-index: 80; align-content: start; grid-auto-rows: max-content; overflow-y: auto; }
}

@media (max-width: 700px) {
  /* kop: saldo, taal en uitloggen op één regel; saldo wordt zo nodig afgekort */
  .util__in { flex-wrap: nowrap !important; gap: .5rem; }
  .util .umeter { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .util .umeter svg { vertical-align: -2px; }
  .util .search--util { display: none; }
  .util__in > a { white-space: nowrap; flex: none; }
  .util .langsw button { padding: .2rem .45rem; }

  /* klantenservice-tab: smaller, en rechts ruimte zodat er niets onder valt */
  .helpdesk { padding: .55rem .2rem !important; font-size: .625rem !important; letter-spacing: .1em; }
  #main .wrap, .ft__in, .ft__bar { padding-right: calc(var(--gut) + 1.4rem); }
  /* zwevende knoppen links: kleiner, en onderaan ruimte zodat de laatste inhoud niet onder de knop valt */
  .kp-fabs__knop, .kp-fabs .fab { width: 40px; height: 40px; }
  #main { padding-bottom: 3.5rem; }

  /* productgrid: 2 kaarten per rij, compacte kaarten */
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: .6rem; }
  .grid > .card { aspect-ratio: auto; --pad: 9px; }
  .grid > .card .card__media { aspect-ratio: 1 / 1; flex: none; }
  .grid > .card .card__body { padding-top: .5rem; }
  .grid > .card .card__title { font-size: .8125rem; }
  .grid > .card .card__pts { font-size: var(--s0); }
  .grid > .card .card__foot { padding-top: .45rem; margin-top: .4rem; }
  .grid > .card .card__add { min-width: 34px; min-height: 34px; }
  .grid > .feat { grid-column: 1 / -1; }
  .card .lb2.kp-rib { width: 24px; height: 24px; padding: 2px; }
  .card .card__fav { width: 26px; height: 26px; }

  /* afrekenen: bezorgkeuze met het CO₂-label en het PostNL-logo onder de tekst */
  .rcard.kp-rcard-logo, .rcard:has(.ecotag) { flex-wrap: wrap; }
  .rcard > span:not(.ecotag) { flex: 1 1 calc(100% - 3rem); min-width: 0; }
  .rcard .ecotag { margin-left: 2rem; }
  .rcard .kp-carrier { width: 32px; height: 32px; margin-left: auto; }
  .radiocards--2 { grid-template-columns: minmax(0, 1fr) !important; }
  .form .row { gap: .6rem; }
  .form .field--vnm, .form .field--anm, .form .field--str, .form .field--city { flex: 1 1 100%; max-width: none; }
  .form .field--nr, .form .field--ext, .form .field--zip { flex: 1 1 0; max-width: none; }

  /* startpagina-tegels: icoon boven de kop in plaats van eroverheen */
  .tile__ico { position: static; width: 36px; height: 36px; margin-bottom: .3rem; }
  .tile__ico svg { width: 18px; height: 18px; }
  .bento .tile { min-height: 0 !important; justify-content: start; padding: 1rem 1.05rem; }

  /* carrousel: pauzeknop boven de kaarten, pijlen en bolletjes eronder (niet over de foto's) */
  .carou { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "pauze pauze pauze" "vp vp vp" "prev dots next"; align-items: center; row-gap: .5rem; }
  .carou .kp-pauze { grid-area: pauze; position: static; justify-self: end; margin: 0; }
  .carou__vp { grid-area: vp; min-width: 0; }
  .carou__b { position: static !important; transform: none !important; width: 40px; height: 40px; }
  .carou__b[data-d="-1"] { grid-area: prev; }
  .carou__b[data-d="1"] { grid-area: next; justify-self: end; }
  .carou__dots { grid-area: dots; margin: 0; flex-wrap: wrap; justify-content: center; }

  /* stappen "Van inloggen tot op de mat": compacter, icoon naast de tekst */
  .steps .step, .stepc { padding: .9rem 1rem; }

  /* kaartenmaker: eerst het formulier; het lege voorbeeldvak pas als er iets te zien is */
  .kk { display: flex; flex-direction: column; }
  .kk .kk__form { order: 1; }
  .kk .kk__canvas { order: 2; width: min(100%, 300px); }
  .kk .kk__canvas[data-state="idle"] { display: none; }

  /* quote: leesbare grootte op een telefoon */
  .quote blockquote { font-size: clamp(1.15rem, 5.2vw, 1.5rem); line-height: 1.3; }

  /* kaartpagina: geen uitlegvak over de kaart; de lijst eronder springt naar het gekozen punt */
  .kp-hot .hot__c { display: none; }
  .kp-hot__lijst li.is-actief a { outline: 3px solid var(--action); outline-offset: -3px; }

  /* webshop: minder ruimte boven de producten (lagere banner, kortere tekst, filter en sortering op één regel) */
  .bnr--beeld { aspect-ratio: auto !important; min-height: 0 !important; height: 150px; }
  .bnr--beeld .bnr__tx { left: .75rem; right: .75rem; top: auto; bottom: .75rem; transform: none; max-width: none; padding: .6rem .8rem; }
  .bnr--beeld .bnr__tx b { font-size: var(--s1); }
  .bnr--beeld .bnr__tx > span:not(.eyebrow) { display: none; }
  .plp .lead, #app h1 + .lead { font-size: var(--s0); }
  .plp__bar { gap: .5rem; }
  .plp__bar select { flex: 1 1 auto; min-width: 0; }

  /* cadeaukompas: geen gestippelde rand */
  .kompas__res, .kompas__leeg { border-style: solid !important; }
}

/* De dichte winkelmand (rechts buiten beeld) wierp een grijze schaduw op de rechterrand van het scherm */
.drawer:not(.is-open) { box-shadow: none; }

/* Prijs en winkelmandknop altijd onderaan de productkaart, ook als de kaart geen merk of een korte titel heeft.
   In app.css stond `margin-top: auto` en direct daarna `margin-top: .7rem` in dezelfde regel, waardoor ze verschoven. */
.card > .card__body > .card__foot { margin-top: auto; padding-top: 1rem; }
@media (max-width: 700px) {
  /* op telefoon is de foto vierkant (vaste hoogte): dan vult het tekstdeel de rest van de kaart */
  .grid > .card > .card__body { flex: 1 1 auto; }
  .grid > .card > .card__body > .card__foot { padding-top: .8rem; }
}