/* Aanvullingen voor de koppeling (route A). app.css blijft ongewijzigd. */

/* echte productfoto op de kaart */
.card__media .kp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.card__media.kp-has-img > .ph,
.card__media.kp-has-img > .ph2 { display: none; }

/* echte foto's op de productpagina */
.shot.kp-shot { aspect-ratio: 1 / 1; background: #fff; padding: 0; overflow: hidden; }
.shot.kp-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.shot.kp-shot--leeg { display: grid; place-items: center; background: var(--paper-2, #f6f2ea); }
.shot.kp-shot--leeg span { font-family: var(--font-brand); font-weight: 900; font-size: var(--s2, 28px); color: var(--paper-3, #e9e2d4); padding: 10%; text-align: center; }

/* foutmelding bij inloggen */
.kp-err { margin: 0 0 .75rem; padding: .6rem .8rem; border-radius: var(--r-sm, 5px); background: var(--warn-s, #fff4e0); color: var(--ink, #17181c); font-size: var(--s-1, 14px); }

/* Alleen met de schakelaar alleenGekoppeld (config.js): onderdelen zonder backend verbergen */
.kp-alleen-gekoppeld .buy2__note,
.kp-alleen-gekoppeld [data-act="m-ideal"],
.kp-alleen-gekoppeld [data-act="m-melden"],
.kp-alleen-gekoppeld [data-act="devtoggle"] { display: none !important; }

/* melding bij afrekenen */
.kp-note { margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--r-sm, 5px); background: var(--warn-s, #fff4e0); color: var(--ink, #17181c); font-weight: 600; font-size: var(--s-1, 14px); }

/* label: dit is een testversie */
.kp-badge { position: fixed; left: 12px; bottom: 12px; z-index: 9999; padding: 4px 10px; border-radius: 999px; background: #17181c; color: #fff; font: 600 11px/1.4 var(--font-mono, monospace); letter-spacing: .04em; opacity: .85; pointer-events: none; }

/* uitgelichte tegel: foto boven, tekst onder (de verloop-laag van het ontwerp blijft erover) */
.feat__ph.kp-has-img { background: #fff; }
.feat__ph .kp-feat-img { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 72%; object-fit: contain; padding: 6% 8% 0; box-sizing: border-box; }
.feat__ph .kp-feat-img--sfeer { height: 75%; object-fit: cover; padding: 0; }
.feat__ph.kp-has-img::after { z-index: 1; background: linear-gradient(to top, var(--paper) 28%, transparent 50%); }

/* Instellingenpagina (#/instellingen): de huisstijlbalk staat hier in de pagina, niet zwevend. */
.kp-inst .tsw { position: static; box-shadow: none; padding: 0; max-width: none; }
.kp-inst .tsw a { min-height: 32px; padding: .25em .6em; border-radius: var(--r-sm); border: 2px solid var(--line); font-size: var(--s-2); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); }

/* Logo van de klant (config.js: logo) in de kop en op de inlogpagina */
.kp-logo { display: block; height: 44px; width: auto; max-width: 220px; object-fit: contain; mix-blend-mode: multiply; }   /* wit van het logobestand valt weg op lichte achtergronden */
.login .kp-logo { height: 64px; max-width: 260px; }
.kp-logo--preload { height: 72px; max-width: 280px; }

/* Munt-icoon (bijv. het Amsterdamse paaltje) naast de prijs op productkaarten */
.card__pts small.kp-munt { display: inline-flex; vertical-align: -0.08em; margin-left: 0.2em; font-size: inherit; letter-spacing: 0; color: var(--ams-rood, var(--ink-3)); }
.card__pts .kp-munt svg { width: 0.9em; height: 0.9em; }
.card--off .card__pts .kp-munt { color: var(--ink-3); }

/* Keuzes voor sectievarianten horen bij /instellingen, niet op de startpagina */
.secpick { display: none !important; }

/* Punten bijkopen uit (backend of huisstijl): alle knoppen ervoor weg */
.kp-geen-bijkopen [data-act="m-ideal"] { display: none !important; }

/* Sneeuw (knoppen.js) */
.kp-sneeuw { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 70; }
.hero__tag .kp-munt-tag { display: inline-flex; align-items: center; gap: .3em; }
.hero__tag .kp-munt-tag svg { width: 1.3em; height: 1.3em; color: var(--ams-rood, currentColor); }

/* Ontwerpfout: het hintje "Tik om om te draaien" lag over het saldo op het cadeaulabel; naar rechtsboven */
.flip__hint { bottom: auto; top: 10px; }

/* Categorieën in de zijbalk: ruimer, grotere afbeeldingen, geen vinkjes maar een actieve staat.
   Het vinkje blijft onzichtbaar bestaan, zodat toetsenbord en schermlezer gewoon werken. */
.ctree .crow { position: relative; min-height: 56px; padding: .55rem 1.1rem; gap: .8rem; line-height: 1.25; }
.ctree .crow--kid { padding-left: 1.6rem; }
.ctree .crow input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ctree .crow__ico { width: 40px; height: 40px; }
.ctree .crow__ico svg { width: 20px; height: 20px; }
.ctree .crow__ico--img { background: #fff; padding: 3px; }
.ctree .crow__ico img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ctree .crow[aria-current="true"] { background: var(--brand-surf); border-left-color: var(--action); color: var(--brand-text); }
.ctree .crow[aria-current="true"] .crow__n { color: var(--brand-text); }
.ctree .crow:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }

/* Productpagina: geen vaste hoogte en geen eigen scrollbalk per kolom.
   De sectie is zo hoog als de rechterkolom; onder de foto mag witruimte ontstaan. */
@media (min-width: 901px) {
  .pdpbox .pdp2, .pdp2 { height: auto; align-items: start; }
  .pcol-l, .pcol-r { overflow: visible; padding-right: 0; }
}

/* Productfoto's: de eerste over de volle breedte, daaronder de speelse opbouw van het ontwerp */
.shots.kp-shots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.shots.kp-shots > .shot { grid-column: span 2; display: grid; }
.shots.kp-shots > .shot:nth-child(1) { grid-column: 1 / -1; }
.shots.kp-shots > .shot:nth-child(2), .shots.kp-shots > .shot:nth-child(3) { grid-column: span 3; }
.shots.kp-shots > .shot:nth-child(2):last-child { grid-column: 1 / -1; }
.shots.kp-shots > .shot:nth-child(4) { grid-column: 1 / -1; }
button.shot.kp-shot { cursor: zoom-in; }
button.shot.kp-shot img { padding: 4%; box-sizing: border-box; }

/* Vergrootvenster met de echte foto's */
/* De foto krijgt alleen de ruimte tussen kop en miniaturen (geen vaste hoogte), zodat alles altijd in beeld past */
.lb.kp-lb { grid-template-rows: auto minmax(0, 1fr) auto; }
.lb.kp-lb .lb__stage { min-height: 0; padding-block: .25rem; }
.lb.kp-lb .kp-lb__img { position: relative; display: block; background: #fff; aspect-ratio: auto; height: 100%; max-height: 860px; min-height: 0; padding: 0; overflow: hidden; }
@media (max-height: 640px) {
  .lb.kp-lb .lb__hd { padding: .6rem 1rem; }
  .lb.kp-lb .kp-lb__ft { padding: .5rem; }
  .lb.kp-lb .kp-lb__ft button { width: 44px; height: 44px; }
}
/* de foto zelf: vast binnen het witte vak (anders houdt hij zijn eigen hoogte aan en loopt hij eronder door) */
.lb.kp-lb .kp-lb__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; padding: clamp(.75rem, 2vw, 2rem); box-sizing: border-box; }
.lb.kp-lb .kp-lb__ft button { width: 64px; height: 64px; padding: 4px; background: #fff; }
.lb.kp-lb .kp-lb__ft button img { width: 100%; height: 100%; object-fit: contain; display: block; }
.lb.kp-lb .kp-lb__ft button[aria-pressed="true"] { outline: 3px solid var(--gold-2, #fff); outline-offset: 2px; }

/* Productkaarten in de grid: altijd netjes.
   Elke kaart heeft dezelfde vorm; de titel krijgt de ruimte die hij nodig heeft (tot 3 regels)
   en de foto vult wat overblijft. Een lange titel maakt de foto dus iets lager, niet de kaart.
   De foto blijft in verhouding (contain) en wordt nooit afgesneden. Niet voor de kleine
   kaartjes in het cadeaukompas en de "kom je tekort"-melding. */
.grid > .card { aspect-ratio: 5 / 8; }
.kompas__res .grid > .card, .blocker .grid > .card { aspect-ratio: auto; }
.grid > .card .card__media { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
.kompas__res .grid > .card .card__media, .blocker .grid > .card .card__media { aspect-ratio: 1 / 1; flex: none; }
.grid > .card .card__body { flex: none; }
/* titel: volledige regelhoogte (ook bij huisstijlen met krappere koppen), maximaal 3 regels, geen halve regels */
.card .card__title { line-height: 1.3; min-height: 0; -webkit-line-clamp: 3; max-height: calc(3 * 1.3em); }

/* Ribbons (labels uit de backend) op productkaarten en in het filter */
.lb2.kp-rib { width: 32px; height: 32px; padding: 3px; background: var(--action); color: #fff; overflow: hidden; }
.lb2.kp-rib img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Alle labels (ribbons) in één kleur: de actiekleur van de huisstijl (bij Amsterdam blauw).
   De pictogrammen zelf zijn wit zonder achtergrond; de kleuren per label (groen, paars) uit app.css en
   de huisstijl gelden alleen voor de voorbeeldlabels van het ontwerp, niet voor de echte labels. */
:root .lb2.kp-rib, :root .lb2.kp-rib[data-t] { background: var(--action); color: #fff; }
.lb2.kp-rib img + .kp-rib__alt { display: none; }
.lb2.kp-rib .kp-rib__alt { display: grid; place-items: center; width: 100%; height: 100%; }
.lb2.kp-rib .kp-rib__alt b { font-size: 11px; text-transform: lowercase; }
.lb2.kp-rib--klein { width: 26px; height: 26px; flex: none; margin-right: .1rem; box-shadow: none; }
.lbs { gap: 4px; }

/* Eigen beelden van een huisstijl (koppeling.js, TENANTS[...].beelden) */
.kp-heeft-beeld { padding: 0; }
.kp-heeft-beeld::before { display: none; }
.kp-heeft-beeld .kp-beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.login__art--foto.kp-heeft-beeld { padding: 0; }
.bnr__img.kp-heeft-beeld .kp-beeld { object-fit: cover; object-position: center 45%; }
@media (max-width: 760px) { .bnr__img.kp-heeft-beeld .kp-beeld { object-position: 65% center; } }

/* Cadeaulabel in de hero (draaibaar): geen standaardrand van de knop, en bij het draaien niets afsnijden.
   Grotere perspectiefafstand = de kaart komt minder ver naar voren tijdens het draaien. */
.hero__art.flip { overflow: visible; border: 0; padding: 0; perspective: 2600px; outline-offset: 6px; }
.hero__art.flip .flip__f, .hero__art.flip .flip__b { outline: 0; border: 0; }

/* Videoboodschap (iframe van Vimeo/YouTube) */
.kp-video { position: relative; width: 100%; border-radius: var(--r-md); overflow: hidden; background: #000; }
.kp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* tijdens het draaien even 90%: zo komt de kaart nooit buiten zijn vak (zonder krimpen tot ~9% groter) */
.hero__art.flip .flip__in { transition: transform calc(700ms * var(--motion-scale)) var(--ease-inout), scale calc(350ms * var(--motion-scale)) var(--ease-inout); }
.hero__art.flip .flip__in.kp-draait { scale: .9; }

/* Schenken (#/schenken) */
.kp-let { display: flex; gap: .5rem; align-items: flex-start; padding: .7rem .9rem; margin-bottom: 1rem; border-radius: var(--r-sm); background: var(--warn-s); color: var(--warn); font-size: var(--s-1); }
.kp-let svg { flex: none; margin-top: .15rem; }
.kp-schenk { display: grid; gap: .8rem; }

/* Bezorgwijze: vraag bij bezorgen aan huis */
.kp-voordelen { list-style: none; padding: 0; margin: .25rem 0 1rem; display: grid; gap: .6rem; }
.kp-voordelen li { display: flex; gap: .6rem; align-items: flex-start; }
.kp-voordelen svg { flex: none; width: 20px; height: 20px; color: var(--ok); margin-top: .1rem; }
.kp-keuzeknoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.kp-keuzeknoppen .btn { width: 100%; white-space: normal; text-align: center; }
@media (max-width: 520px) { .kp-keuzeknoppen { grid-template-columns: 1fr; } }

/* Afrekenen: "Geef je geschenk cadeau" compacter */
.radiocards--2:has(input[name="gift"]) { max-width: 560px; gap: .5rem; }
.rcard:has(> input[name="gift"]) { padding: .55rem .8rem; min-height: 0; gap: .6rem; align-items: center; }
.rcard:has(> input[name="gift"]) b { font-size: var(--s-1); }
.rcard:has(> input[name="gift"]) span > span { font-size: var(--s-2); }
.kp-cad__kort { display: flex; gap: .8rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: var(--r-sm); font-size: var(--s-1); }
.kp-cad { display: grid; gap: .9rem; }
.kp-cad textarea, .kp-cad input { width: 100%; }

/* Afrekenen: afhaalpunt via Sendcloud */
.kp-sp { display: grid; gap: .6rem; }
.kp-sp__zoek { display: flex; gap: .5rem; flex-wrap: wrap; }
.kp-sp__zoek input { flex: 1 1 200px; max-width: 280px; font: inherit; padding: .65rem .8rem; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); }
.kp-sp__zoek input:focus { border-color: var(--action); outline: none; }
.kp-sp__gekozen { display: grid; gap: .15rem; padding: .9rem 1rem; border: 2px solid var(--action); border-radius: var(--r-sm); background: var(--brand-surf); max-width: 420px; }
.kp-sp__lbl { font-family: var(--font-mono); font-size: var(--s-2); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.kp-sp__wijzig { justify-self: start; margin-top: .3rem; background: none; border: 0; padding: 0; color: var(--brand-text); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--s-1); }

/* Controlescherm: wit blok op de breedte van de kop; blokken als lichte vlakken erin */
.kp-controle { display: grid; gap: .4rem; margin-bottom: 1.25rem; }
.kp-controle .check__grid { margin: .8rem 0 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.kp-controle .check__box { min-width: 0; box-shadow: none; background: var(--paper-2); border: 1px solid var(--line); }
.kp-controle .check__box.kp-ck-breed { grid-column: 1 / -1; }
.kp-controle .check__box :is(b, span) { overflow-wrap: anywhere; word-break: break-word; }
@media (max-width: 640px) { .kp-controle .check__grid { grid-template-columns: minmax(0, 1fr); } }

/* Saldoblok: het (nep)nummer onder "Geldig t/m" is overbodig, overal weg */
.bon__serial { display: none !important; }

/* afrekenen: straat en plaats als losse velden */
.form .field--str { flex: 1 1 16rem; }
.form .field--city { flex: 1 1 12rem; }
.form .field--zip { flex: 0 0 auto; max-width: 9rem; }
.form .field--vnm, .form .field--anm { flex: 1 1 12rem; }

/* afrekenen: gekozen afhaalpunt als overzichtsblokje bij "Jouw gegevens" */
.kp-sp-overzicht { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .8rem; align-items: start; padding: .9rem 1rem; border: 2px solid var(--action); border-radius: var(--r-sm); background: var(--brand-surf); max-width: 560px; }
.kp-sp-overzicht__ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--action); color: var(--action-on, #fff); }
.kp-sp-overzicht__ico svg { width: 18px; height: 18px; }
.kp-sp-overzicht > div { display: grid; gap: .1rem; font-size: var(--s-1); color: var(--ink-2); }
.kp-sp-overzicht > div b { color: var(--ink); font-size: var(--s0); }
.kp-sp-overzicht .eyebrow { margin-bottom: .2rem; }
.kp-sp-overzicht__uitleg { font-size: var(--s-2); margin: -.4rem 0 0; }
.kp-sp__kort { display: block; margin: 0; font-size: var(--s-1); color: var(--ink-2); }
.kp-sp__kort svg { width: 16px; height: 16px; color: var(--action); vertical-align: -3px; margin-right: .3rem; }
.kp-thuis-tip { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: var(--s-1); color: var(--ink-2); }
.kp-thuis-tip svg { flex: none; width: 16px; height: 16px; margin-top: .2rem; color: var(--action); }
.kp-thuis-tip .kp-linkknop { display: inline; margin-left: .3rem; font-size: inherit; }
.form .field--ext { max-width: 9.5rem; }

@media (max-width: 560px) {
  .kp-sp-overzicht { grid-template-columns: auto minmax(0, 1fr); }
  .kp-sp-overzicht .kp-sp__wijzig { grid-column: 2; justify-self: start; margin-top: 0; }
  .kp-sp-overzicht .eyebrow { letter-spacing: .08em; }
}