/* ==========================================================================
   pdp-borduurvoorbeeld.css — Kiddykado

   Hoort bij assets/js/pdp-borduurvoorbeeld.js. Twee tekenvlakken, ÉÉN
   rekenmodel:

     1. .kk-bv        de laag OVER de hoofdproductfoto in de galerij
     2. .kk-bvc       het COMPACTE voorbeeld in het winkelwagenformulier,
                      direct onder het invulveld Naam

   STRIKT AFGESCHERMD. Dit bestand wordt alleen ingeladen op een product waar
   de productmeta _borduurvoorbeeld_actief op 'ja' staat (zie
   inc/borduurvoorbeeld.php) — op 7-10-2026 is dat uitsluitend het verborgen
   testproduct 48564. Op elke andere productpagina bestaat dit bestand
   simpelweg niet in de pagina, dus de verkoopbare badcapes zien hier niets
   van. Daarom kon de nieuwe opzet zonder extra schakelaar in dit bestand.

   Let op: de WAPF-veldgroep BordurenA (post 35204) hangt via de producttag
   P-BordurenA óók aan de echte badcapes. Daarom wordt er NIETS in die
   veldgroep gewijzigd; de hele nieuwe indeling is CSS + JS die alleen op dit
   ene product wordt ingeladen.

   Raakt met opzet NIETS aan uit pdp-personalisatie.css of uit snippet 35
   ("Font picker system"). Alle selectors hieronder beginnen met .kk-bv, of
   zijn afgeschermd met .kk-bvform — een klasse die het script alleen op DIT
   product op de veldgroep zet.

   De @font-face-regels staan hier nogmaals, zodat dit bestand op zichzelf
   werkt en niet afhangt van de laadvolgorde van pdp-personalisatie.css —
   identieke family+src, de browser haalt het bestand maar één keer op.
   ========================================================================== */

/* ------------------------------------------------- 1. borduurlettertypes */

@font-face{font-family:"LHANDW";   src:url("../fonts/LHANDW.woff2")    format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"MFAWESOME";src:url("../fonts/MFAWESOME.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"BLACKJAR"; src:url("../fonts/BLACKJAR.woff2")  format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"CAVIAR";   src:url("../fonts/CAVIAR.woff2")    format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cookie";   src:url("../fonts/Cookie.woff2")    format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ===========================================================================
   2. DE LAAG OVER DE HOOFDFOTO (ongewijzigd gedrag)
   =========================================================================== */

/* De laag ligt binnen .gal-main (die staat al op position:relative) en vangt
   geen muis- of touchgebeurtenissen af: thumbnails, zoom en de rest van de
   galerij blijven zich exact gedragen zoals ze deden. */
.kk-bv{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  transition:opacity .15s ease;
}

/* De canvas wordt door het script in pixels gepositioneerd, precies over het
   GETEKENDE deel van de foto (object-fit:cover wordt meegerekend). Hier staat
   alleen wat niet van de afmeting afhangt. */
.kk-bv canvas{
  position:absolute;
  display:block;
  pointer-events:none;
}

/* Niets ingevuld of nog geen lettertype gekozen: laag onzichtbaar, maar wel
   in de DOM — dan hoeft er bij de eerste toets niets opgebouwd te worden. */
.kk-bv[hidden],
.kk-bv.kk-bv--leeg{
  opacity:0;
  visibility:hidden;
}

/* ===========================================================================
   3. HET COMPACTE VOORBEELD IN HET FORMULIER (nieuw, 7-10-2026)
   =========================================================================== */

/* Het blok is een gewoon kind van .wapf-field-group — met opzet GEEN
   .wapf-field-container, zodat de plugin het nooit als veld ziet. Het staat
   in de DOM direct na het naamveld, dus de leesvolgorde is:
   Personaliseren → Naam → voorbeeld → Geboortedatum → Lettertype → Kleur. */
.kk-bvc{
  box-sizing:border-box;
  flex:0 0 100%;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
  padding:0 5px 15px 5px;
}

.kk-bvc[hidden]{display:none}

.kk-bvc__kop{
  margin:0 0 6px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#8b907c;
}

/* Het kijkgaatje. Vaste verhouding, want het script schaalt de foto zó dat
   er altijd evenveel ECHTE millimeters in beeld staan (zie VENSTER_MM in de
   JS). Daardoor is de maatverhouding hier identiek aan die van het grote
   voorbeeld op de hoofdfoto — er is maar één rekenmodel.

   8-10-2026: van 16/9 naar 3/2. Samen met de ruimere VENSTER_MM (130 -> 320)
   maakt dat de badcape weer herkenbaar: 3/2 ligt dicht bij de verhouding van
   de ondergrondfoto's zelf (1507 x 1044 = ongeveer 1,44), dus er valt boven
   en onder vrijwel niets meer buiten beeld en de kap staat er helemaal op.
   Puur beeld — aan de maten in millimeters verandert dit niets. */
.kk-bvc__raam{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#efece4;
  aspect-ratio:3 / 2;
}

/* De ondergrondfoto wordt door het script in pixels gepositioneerd en
   geschaald. `max-width:none` is nodig omdat de plugin `.wapf img` op
   `max-width:100%` zet; twee klassen winnen van (.wapf + img). */
.kk-bvc__foto,
.wapf .kk-bvc .kk-bvc__foto{
  position:absolute;
  top:0;
  left:0;
  display:block;
  max-width:none;
  width:auto;
  height:auto;
  border-radius:0;
  background:none;
}

.kk-bvc__doek{
  position:absolute;
  top:0;
  left:0;
  display:block;
  pointer-events:none;
  transition:opacity .15s ease;
}

/* Nog geen naam of nog geen lettertype: geen leeg kader, maar een zinnetje.
   Het blok blijft staan, dus de pagina springt niet bij de eerste toets. */
.kk-bvc__leeg{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0 16px;
  text-align:center;
  font-size:13px;
  line-height:1.35;
  color:#5d6350;
  background:rgba(247,245,239,.78);
  transition:opacity .15s ease;
}

.kk-bvc:not(.kk-bvc--leeg) .kk-bvc__leeg{
  opacity:0;
  visibility:hidden;
}

.kk-bvc--leeg .kk-bvc__doek{
  opacity:0;
}

/* --------------------------------------------------- rustige voetnoot

   Staat BINNEN .kk-bvc__kleef, direct onder het kijkgaatje en boven de rij
   "Kleur badcape". Daarmee schuift hij op een telefoon mee met de sticky
   strook en is hij altijd zichtbaar zodra het voorbeeld zichtbaar is — niet
   in een uitklapblok en niet onderaan de pagina.

   Bewust geen kader, geen opvallende kleur en geen eigen achtergrond: dit is
   een voetnoot, geen waarschuwing (vergelijk .kk-bv-tip, die mag wél opvallen).
   De tekst komt uit PHP via het filter 'kk_bv_disclaimer'.

   De marge onder is iets ruimer dan die boven, zodat de regel op
   telefoonbreedte niet tegen de kleurknoppen aankomt. De knop "In winkelwagen"
   staat buiten de veldgroep, dus daar kan hij per constructie niet overheen
   vallen; dat regelt de sticky-opzet in sectie 4 al. */
.kk-bvc__disclaimer{
  box-sizing:border-box;
  display:block;
  width:100%;
  max-width:100%;
  margin:7px 0 10px;
  padding:0;
  border:0;
  background:none;
  font-size:12px;
  line-height:1.4;
  color:#7a8070;
  text-align:left;
  overflow-wrap:break-word;
}

@media (max-width:1099px){
  .kk-bvc__disclaimer{
    margin:6px 0 9px;
    padding:0 2px;
    font-size:11.5px;
  }
}

/* ---------------------------------------------------- kleur van de badcape

   De rij onder het kijkgaatje waarmee de klant de BADCAPEKLEUR kiest. Dit
   zijn <button>-elementen, geen invoervelden: er gaat niets extra's mee naar
   de winkelmand, de order of de ordermail. De keuze bepaalt alleen op welke
   blanco foto het voorbeeld staat.

   Niet te verwarren met "Kleur garen" uit de veldgroep (.kk-bv-kleurnaam,
   verderop): dat blijft een losse keuze en hangt hier niet aan vast. */
.kk-bvc__kleuren{
  display:block;
  margin:8px 0 0;
}

.kk-bvc__kleurkop{
  display:block;
  margin:0 0 5px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#8b907c;
}

.kk-bvc__kleurrij{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.kk-bvc__kleur{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:3px 9px 3px 3px;
  border:1px solid rgba(34,38,28,.18);
  border-radius:999px;
  background:#fff;
  font:inherit;
  font-size:12px;
  line-height:1.2;
  color:#4a5041;
  cursor:pointer;
  transition:box-shadow .12s ease, border-color .12s ease;
}

.kk-bvc__kleur:hover{
  border-color:rgba(92,122,74,.55);
}

.kk-bvc__kleur:focus-visible{
  outline:2px solid var(--groen,#5c7a4a);
  outline-offset:2px;
}

.kk-bvc__kleur.aan{
  border-color:var(--groen,#5c7a4a);
  box-shadow:0 0 0 1px var(--groen,#5c7a4a) inset;
  font-weight:700;
  color:#2f3528;
}

/* Het bolletje is een uitsnede van de ECHTE blanco foto — eerlijker dan een
   verzonnen kleurcode. `max-width:none` omdat de plugin `.wapf img` op
   `max-width:100%` zet. */
.kk-bvc__kleurbol,
.wapf .kk-bvc .kk-bvc__kleurbol{
  display:block;
  flex:0 0 auto;
  width:22px;
  height:22px;
  max-width:none;
  border-radius:50%;
  object-fit:cover;
  background:#efece4;
  box-shadow:0 0 0 1px rgba(34,38,28,.14);
}

.kk-bvc__kleurtekst{
  white-space:nowrap;
}

/* ===========================================================================
   4. SMAL SCHERM — het voorbeeld blijft als strook in beeld
   =========================================================================== */

/* position:sticky op .kk-bvc zelf. Het omhullende blok is dan de VELDGROEP,
   en de knop "In winkelwagen" (.koopregel) staat BUITEN die veldgroep, ná de
   verborgen input wapf_field_groups en de totalenregel. Daarmee is het
   structureel onmogelijk dat de strook over die knop heen valt: hij laat per
   definitie los op de onderrand van de veldgroep, dus boven de knop.

   De strook plakt aan de BOVENkant (onder de vaste header), niet aan de
   onderkant. Zo kan hij ook nooit botsen met de vaste .atcbar onderaan het
   scherm, en blijft het toetsenbord op een telefoon vrij. */
@media (max-width:1099px){
  .wapf .wapf-field-group.kk-bvform > .kk-bvc{
    position:sticky;
    top:calc(var(--kk-hdr-real, 86px) + 8px);
    z-index:20;
  }

  /* De strook blijft COMPACT doordat de kaart zelf begrensd is, niet door
     de uitsnede te verkleinen. Zonder die grens zou het kijkgaatje op een
     brede telefoon of tablet meegroeien tot een halve schermhoogte (3/2 van
     een kaart van 700px is 460px hoog). Met een vaste bovengrens blijft het
     blok op elk toestel ongeveer even hoog, en blijft de uitsnede in
     millimeters overal exact gelijk. */
  .kk-bvc__kleef{
    max-width:330px;
    margin-left:auto;
    margin-right:auto;
    background:#fff;
    border:1px solid #e6e2d6;
    border-radius:16px;
    padding:9px 9px 7px;
    box-shadow:0 8px 20px rgba(32,36,26,.10);
  }

  .kk-bvc__kop{
    padding:0 2px;
  }
}

/* ===========================================================================
   5. BREED SCHERM — twee kolommen, voorbeeld schuift mee
   =========================================================================== */

/* Links de velden, rechts een rail met het voorbeeld erin. De rail is
   absoluut en loopt van boven tot onder OVER de hele veldgroep; het blok
   erbinnen is sticky. Zo schuift het voorbeeld mee zolang er nog een veld
   in te vullen is, en stopt het exact op de onderrand van de veldgroep —
   dus weer gegarandeerd boven de knop "In winkelwagen".

   Pas vanaf 1100px, want daaronder is de buybox-kolom te smal om de velden
   én een voorbeeld naast elkaar te zetten. */
@media (min-width:1100px){
  .wapf .wapf-field-group.kk-bvform{
    position:relative;
    min-height:300px;
    padding-right:var(--kk-bvc-kol, 250px);
  }

  .wapf .wapf-field-group.kk-bvform > .kk-bvc{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    width:var(--kk-bvc-kol, 250px);
    flex:0 0 auto;
    padding:0 0 0 20px;
  }

  .wapf .wapf-field-group.kk-bvform > .kk-bvc > .kk-bvc__kleef{
    position:sticky;
    top:calc(var(--kk-hdr-real, 86px) + 16px);
  }

  .kk-bvc__raam{
    aspect-ratio:3 / 2;
  }
}

/* ===========================================================================
   6. HET FORMULIER ZELF — compacter, gemaakt voor een telefoon
   =========================================================================== */

/* Het oude tekstblok "Voorbeeld" gaat uit beeld: er is nu één voorbeeld, niet
   twee. Het blijft WEL in de DOM staan, want pdp-personalisatie.js schrijft
   daar de garenkleur op #display-field-value en DAAR leest dit script de
   kleur weer uit. Twee klassen winnen van de .wapf-hide van de plugin. */
.wapf .wapf-field-container.kk-bv-weg{
  display:none !important;
}

/* Minder lucht tussen de velden; op een telefoon scheelt dat een halve
   schermhoogte. */
.wapf .wapf-field-group.kk-bvform > .wapf-field-container{
  padding-bottom:14px;
}

.wapf .wapf-field-group.kk-bvform > .wapf-field-container > .wapf-field-description{
  font-size:12.5px;
  line-height:1.4;
  padding-top:4px;
}

/* --- lettertype: rij kleine keuzeknoppen, elk in zijn eigen letter ---------
   De font-family per knop wordt al door pdp-personalisatie.js gezet (op basis
   van data-wapf-label). Hier wordt alleen de MAAT compacter gemaakt, zodat de
   vijf knoppen op een telefoon op één of twee regels passen. De waarde die
   naar de winkelwagen gaat verandert niet: de radio's en hun value blijven
   precies zoals de veldgroep ze levert. */
.wapf .kk-bvform .wapf-field-text-swatch.fonts .wapf-swatch-wrapper{
  gap:7px;
}

.wapf .kk-bvform .wapf-field-text-swatch.fonts .wapf-swatch--text{
  margin:0;
  border-radius:11px;
  border:1px solid rgba(34,38,28,.18);
}

.wapf .kk-bvform .wapf-field-text-swatch.fonts .wapf-swatch--text label{
  font-size:19px;
  line-height:1.1;
  padding:7px 13px;
  white-space:nowrap;
}

/* --- kleur garen: rij gekleurde bolletjes met de kleurnaam eronder -------- */
.wapf .kk-bvform .wapf-field-image-swatch .wapf-image-swatch-wrapper{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(50px, 1fr));
  gap:10px 4px;
  align-items:start;
}

.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image{
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  overflow:visible;
}

.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image.apf-pick-box,
.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image.wapf-checked.apf-pick-box{
  border:0;
}

.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image > label{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  height:auto;
  margin:0;
}

/* Het bolletje. Dat is het naamloze <div> dat WAPF om de swatchfoto zet; de
   tweede div in hetzelfde label is de tooltip-inhoud en moet verborgen
   blijven. */
.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image > label > div:not(.wapf-tt-content){
  width:36px;
  height:36px;
  border-radius:50%;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(34,38,28,.16);
  transition:box-shadow .12s ease, transform .12s ease;
}

.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image > label > div:not(.wapf-tt-content) img{
  display:block;
  width:100%;
  height:100%;
  border-radius:0;
  aspect-ratio:1 / 1;
  object-fit:cover;
}

.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image:hover > label > div:not(.wapf-tt-content){
  box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(92,122,74,.45);
}

.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image.wapf-checked > label > div:not(.wapf-tt-content){
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--groen, #5c7a4a);
  transform:scale(1.04);
}

/* De kleurnaam. Het script zet die er als span bij; staat hij er niet (ouder
   gedrag, of een swatch zonder label), dan verandert er niets. */
.kk-bv-kleurnaam{
  display:block;
  max-width:100%;
  font-size:10.5px;
  line-height:1.2;
  text-align:center;
  color:#6a6f5e;
  overflow-wrap:anywhere;
  hyphens:auto;
}

.wapf .kk-bvform .wapf-field-image-swatch .wapf-swatch--image.wapf-checked .kk-bv-kleurnaam{
  color:#3f4438;
  font-weight:700;
}

/* ===========================================================================
   7. MATEN EN TIP — onder de velden, maten inklapbaar
   =========================================================================== */

/* Eén blok, als laatste kind van de veldgroep. Niet in de smalle
   voorbeeldkolom, zodat de tekst op elke schermbreedte leesbaar blijft. */
.kk-bv-info{
  box-sizing:border-box;
  flex:0 0 100%;
  width:100%;
  min-width:0;
  margin:0;
  padding:0 5px 4px 5px;
}

.kk-bv-info[hidden]{display:none}

/* De maten blijven, maar DICHT bij het openen. */
.kk-bv-maat{
  margin:0;
  font-size:13px;
  line-height:1.4;
  color:#69705c;
}

.kk-bv-maat[hidden]{display:none}

.kk-bv-maat > summary{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 0;
  font-size:12.5px;
  color:#7a8070;
  list-style:none;
  user-select:none;
}

.kk-bv-maat > summary::-webkit-details-marker{display:none}

.kk-bv-maat > summary::after{
  content:"";
  width:7px;
  height:7px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform .15s ease;
}

.kk-bv-maat[open] > summary::after{
  transform:rotate(-135deg) translateY(-1px);
}

.kk-bv-maat > summary:focus-visible{
  outline:2px solid var(--groen,#5c7a4a);
  outline-offset:2px;
  border-radius:6px;
}

.kk-bv-maat__body{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 8px;
  padding:4px 0 2px;
}

/* Het rijtje pilletjes. Naam, geboortedatum en de totale blokhoogte zijn elk
   een eigen pilletje, omdat naam en datum hun eigen schaal hebben. */
.kk-bv-maat__lijst{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 6px;
  min-width:0;
}

.kk-bv-maat__getal{
  font-weight:700;
  color:#3f4438;
  white-space:nowrap;
  background:#f3f1e9;
  border-radius:999px;
  padding:3px 10px;
}

.kk-bv-maat__noot{
  flex:1 1 220px;
  min-width:0;
  margin:0;
}

/* ---------------------------------------------- tip bij lange namen */

/* Verschijnt alleen als de letterhoogte van de NAAM onder de drempel zakt én
   een ander lettertype die naam aantoonbaar groter houdt. Puur tekst: er
   verandert niets aan de keuzevelden, er wordt niets voorgeselecteerd. */
.kk-bv-tip{
  margin:6px 0 0;
  font-size:13px;
  line-height:1.4;
  color:#6b5a2e;
  background:#fbf4e2;
  border:1px solid #efe1bd;
  border-radius:10px;
  padding:7px 11px;
}

.kk-bv-tip[hidden]{display:none}

@media (max-width:480px){
  .kk-bv-maat{font-size:12px}
  .kk-bv-tip{font-size:12px}
  .wapf .kk-bvform .wapf-field-text-swatch.fonts .wapf-swatch--text label{font-size:17px;padding:6px 11px}
}

/* ===========================================================================
   8. VARIATIEMODUS (13-10-2026) — kleurnaam onder "Kleur garen" alleen zolang
   het voorbeeld actief is. Bij een niet-gekoppelde badcapekleur staat de
   veldgroep zonder .kk-bvform en hoort het formulier er exact uit te zien
   zoals zonder dit script.
   =========================================================================== */
.wapf .wapf-field-group:not(.kk-bvform) .kk-bv-kleurnaam{
  display:none;
}