/* Pootret-ketting: het samenstelvak in Kwispel-kleuren. Het vak zelf komt uit
   naamketting.css en penningketting.css; die leunen op de atelier-variabelen,
   dus die worden hier op Kwispel gezet. */
.pkw-card{--line:var(--kw-line);--muted:#765d4d;--ink:var(--kw-brown);--red:var(--kw-coral);--mono:var(--kw-body);
  position:relative;z-index:1;padding:18px;border:2px solid var(--kw-burgundy);border-radius:16px;background:var(--kw-paper);color:var(--kw-brown);box-shadow:8px 9px 0 var(--kw-pink)}
.pkw-card .nk-stage{border-radius:10px}
.pkw-card .nk-field label,.pkw-card .nk-chain legend{font-weight:900;letter-spacing:.1em}
.pkw-card .nk-chain input:checked+label.nk-pill{border-color:var(--kw-burgundy);box-shadow:inset 0 0 0 1px var(--kw-burgundy)}
.pkw-secundair{display:inline-block;margin:1rem 0 0 1.2rem;color:var(--kw-cream);font-weight:800;text-underline-offset:4px}
.pkw-wa svg{width:20px;height:20px;margin-right:.5rem;flex-shrink:0}
.pootret-hero__art.pkw-art{min-height:0}
@media (max-width:900px){.pkw-secundair{margin:1rem 0 0}}

/* Samenstellen: voorbeeld links, keuzes rechts. */
.pootret-studio .pkw-card{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:8px 28px;align-items:start}
.pootret-studio .pkw-card .nk-stage{grid-row:span 4}
.pootret-studio .pkw-card .pk-opties{margin-top:0}
.pkw-kaart-knop{display:inline-flex;align-items:center;justify-content:center;min-height:54px;margin-top:6px;text-decoration:none}
@media (max-width:900px){.pootret-studio .pkw-card{grid-template-columns:1fr}.pootret-studio .pkw-card .nk-stage{grid-row:auto}}

/* Fotoplekken. Tijdelijk: elk vak wordt een <img> met dezelfde verhouding. */
.pkw-foto{display:grid;place-content:center;gap:.4rem;width:100%;height:100%;padding:1.2rem;text-align:center;
  background:repeating-linear-gradient(-45deg,#fff7e5,#fff7e5 12px,#f6e8d2 12px,#f6e8d2 24px);border:3px dashed var(--kw-burgundy);border-radius:12px;color:var(--kw-burgundy)}
.pkw-foto strong{font-family:var(--kw-display);font-size:1.6rem;font-weight:400}
.pkw-foto span{font-weight:900}
.pkw-foto small{color:#765d4d;max-width:26ch;margin:0 auto}
.pkw-hero-foto{margin:0 auto;max-width:440px;aspect-ratio:4/5;transform:rotate(2deg);border-radius:14px;box-shadow:12px 14px 0 var(--kw-pink)}
.pootret-real .pkw-foto{border:0;border-radius:0}
.pkw-extra{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,3vw,2rem);max-width:920px;margin:clamp(2rem,5vw,3.5rem) auto 0}
.pkw-extra figure{margin:0;aspect-ratio:3/2;border-radius:12px;box-shadow:8px 9px 0 var(--kw-burgundy)}
@media (max-width:760px){.pkw-extra{grid-template-columns:1fr}}
/* .pootret-real figure > div is bedoeld voor het voor/na-paar; niet voor de extra rij. */
.pootret-real .pkw-extra figure>.pkw-foto{aspect-ratio:auto;border:3px dashed var(--kw-burgundy);border-radius:12px;box-shadow:none;background:repeating-linear-gradient(-45deg,#fff7e5,#fff7e5 12px,#f6e8d2 12px,#f6e8d2 24px)}

/* Voorbeelden: per hond foto → gravure → ketting op één rij. */
.pkw-voorbeelden{display:grid;gap:clamp(2rem,5vw,3.5rem);max-width:1000px;margin:0 auto;padding:0;list-style:none}
.pkw-vb{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:clamp(.6rem,2vw,1.4rem);align-items:center}
.pkw-vb figure{margin:0}
.pkw-vb .pkw-foto{aspect-ratio:1;height:auto;box-shadow:6px 7px 0 var(--kw-burgundy);padding:.8rem}
.pkw-vb .pkw-foto strong{font-size:1.15rem}
.pkw-vb figcaption{margin-top:.8rem;color:var(--kw-burgundy);font-weight:900;text-align:center}
.pkw-vb__pijl{color:var(--kw-burgundy);font-family:var(--kw-display);font-size:clamp(1.4rem,3vw,2.4rem)}
@media (max-width:640px){
  .pkw-vb{grid-template-columns:1fr 1fr 1fr;gap:.5rem}
  .pkw-vb__pijl{display:none}
  .pkw-vb .pkw-foto small{display:none}
  .pkw-vb .pkw-foto strong{font-size:.8rem;word-break:break-all}
}
.pootret-real .pkw-vb figure>.pkw-foto{aspect-ratio:1;border:3px dashed var(--kw-burgundy);border-radius:12px;background:repeating-linear-gradient(-45deg,#fff7e5,#fff7e5 12px,#f6e8d2 12px,#f6e8d2 24px);overflow:visible}

/* 2026-10 redesign: een rustige productroute van verhaal naar samenstellen
   en bestellen. Alles hieronder is bewust pagina-specifiek. */
.pootret-page{--pkw-cream:#fff7e8;--pkw-paper:#fffdf8;--pkw-rose:#f6b8c9;--pkw-wine:#4a001f;--pkw-wine-deep:#2e0013;--pkw-yellow:#ffc928;--pkw-ink:#32141f}
.pootret-page main{background:var(--pkw-cream)}
.pootret-page .pootret-header{border-bottom:1px solid rgb(255 247 232 / 18%)}
.pootret-nav{gap:clamp(.8rem,2vw,1.5rem)}
.pootret-nav a{position:relative;padding-block:.35rem}
.pootret-nav a::after{content:"";position:absolute;right:0;bottom:0;left:0;height:2px;background:var(--kw-yellow);transform:scaleX(0);transform-origin:left;transition:transform .18s ease}
.pootret-nav a:hover::after,.pootret-nav a:focus-visible::after{transform:scaleX(1)}

/* Hero */
.pootret-hero{min-height:720px;grid-template-columns:minmax(0,1fr) minmax(420px,.92fr);gap:clamp(2rem,6vw,6.5rem);padding:clamp(4rem,7vw,7.5rem) max(1.5rem,calc((100% - 1240px)/2));background:
  radial-gradient(circle at 8% 110%,rgb(239 92 127 / 24%) 0 24%,transparent 24.3%),
  linear-gradient(135deg,var(--pkw-wine-deep),var(--pkw-wine) 58%,#67062e);isolation:isolate}
.pootret-hero::before{width:360px;height:360px;left:-210px;bottom:-235px;border-width:68px;opacity:.38}
.pootret-hero::after{width:170px;height:100px;top:44px;right:-24px;opacity:.8}
.pootret-pill{padding:.58rem .9rem;margin-bottom:1.35rem;border:1px solid rgb(255 247 232 / 44%);background:rgb(255 255 255 / 8%);color:var(--pkw-cream);letter-spacing:.12em;transform:none;backdrop-filter:blur(6px)}
.pootret-hero h1{max-width:9ch;font-size:clamp(3.9rem,6.8vw,7.4rem);line-height:.9;text-wrap:balance}
.pootret-hero h1 span{display:inline;color:var(--pkw-yellow);font-style:italic}
.pootret-hero__lead{max-width:55ch;margin:1.6rem 0 1.8rem;color:#f4dfe7;font-size:clamp(1.05rem,1.6vw,1.22rem)}
.pkw-hero-actions{display:flex;flex-wrap:wrap;gap:.75rem 1.2rem;align-items:center}
.pkw-hero-actions .cf-button{box-shadow:0 8px 0 var(--pkw-wine-deep)}
.pkw-secundair{margin:0;padding:.75rem .2rem;color:var(--pkw-cream);text-decoration-color:var(--pkw-rose);text-decoration-thickness:2px}
.pootret-proof{gap:.65rem;margin-top:1.65rem}
.pootret-proof li{padding:.55rem .75rem;border:1px solid rgb(255 247 232 / 18%);border-radius:999px;background:rgb(255 255 255 / 6%)}
.pootret-proof span{margin-right:.2rem}
.pootret-hero__art.pkw-art{position:relative;display:grid;width:100%;min-height:555px;max-width:590px;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:.8rem;align-items:center;padding:2.5rem 0;margin-inline:auto}
.pkw-hero-blob{position:absolute;inset:6% 2% 3% 7%;border-radius:48% 52% 55% 45% / 44% 44% 56% 56%;background:var(--pkw-rose);transform:rotate(-4deg);box-shadow:0 32px 80px rgb(25 0 10 / 35%)}
.pkw-source-photo,.pkw-pendant-card{position:relative;z-index:2;min-width:0;width:auto;margin:0;border:10px solid var(--pkw-paper);background:var(--pkw-paper);box-shadow:0 20px 55px rgb(32 0 13 / 35%)}
.pkw-source-photo{align-self:end;margin-bottom:1.75rem;transform:rotate(-6deg)}
.pkw-source-photo .pkw-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;padding:0;border:0;border-radius:0;object-fit:cover;object-position:center;background:none}
.pkw-source-photo figcaption,.pkw-pendant-card figcaption{padding:.8rem .35rem .25rem;color:var(--pkw-wine);font-size:.69rem;font-weight:900;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.pkw-pendant-card{align-self:start;margin-top:1rem;padding:1rem 1rem .2rem;transform:rotate(5deg)}
.pkw-pendant-card img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 56%}
.pkw-chain{position:absolute;top:-88px;left:50%;width:180px;height:120px;border:4px dotted #d4ad5e;border-width:0 4px 0 4px;border-radius:50%;transform:translateX(-50%)}
.pkw-hero-arrow{position:absolute;z-index:4;top:49%;left:43%;color:var(--pkw-yellow);font-family:var(--kw-display);font-size:4.4rem;line-height:1;filter:drop-shadow(0 4px 0 var(--pkw-wine));transform:rotate(-8deg)}
.pkw-made-note{position:absolute;z-index:4;right:-2%;bottom:4%;display:grid;width:102px;height:102px;place-items:center;padding:.8rem;border:2px solid var(--pkw-wine);border-radius:50%;background:var(--pkw-yellow);color:var(--pkw-wine);font-family:var(--kw-display);font-size:1.1rem;line-height:1;text-align:center;transform:rotate(9deg);box-shadow:5px 6px 0 var(--pkw-wine)}

.pkw-promise-strip{display:grid;grid-template-columns:repeat(4,1fr);padding:0 max(1.25rem,calc((100% - 1240px)/2));border-bottom:1px solid rgb(74 0 31 / 20%);background:var(--pkw-yellow);color:var(--pkw-wine)}
.pkw-promise-strip p{display:grid;gap:.2rem;margin:0;padding:1.35rem clamp(1rem,2.5vw,2rem);border-right:1px solid rgb(74 0 31 / 18%)}
.pkw-promise-strip p:first-child{border-left:1px solid rgb(74 0 31 / 18%)}
.pkw-promise-strip strong{font-family:var(--kw-display);font-size:1.15rem;font-weight:400}
.pkw-promise-strip span{font-size:.72rem;font-weight:800;line-height:1.35}

/* Productkleuren */
.pkw-colors{padding:clamp(5rem,8vw,8rem) max(1.5rem,calc((100% - 1240px)/2));background:#fffaf0}
.pkw-colors__heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(250px,.65fr);gap:clamp(2rem,7vw,6rem);align-items:end;margin-bottom:clamp(2rem,4vw,3.5rem)}
.pkw-colors__heading h2{max-width:11ch;margin:.5rem 0 0;color:var(--pkw-wine);font-family:var(--kw-display);font-size:clamp(3rem,6vw,5.7rem);font-weight:400;letter-spacing:-.04em;line-height:.9}
.pkw-colors__heading h2 em{color:#c94c70;font-style:italic}
.pkw-colors__heading>p{max-width:42ch;margin:0;color:#6f5260;font-size:1rem;line-height:1.7}
.pkw-colors__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.pkw-color-card{position:relative;min-width:0;margin:0;overflow:hidden;border:1px solid rgb(74 0 31 / 18%);border-radius:24px;background:var(--pkw-paper);box-shadow:0 20px 55px rgb(74 0 31 / 10%)}
.pkw-color-card img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pkw-color-card figcaption{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.15rem 1.3rem;color:var(--pkw-wine)}
.pkw-color-card figcaption strong{font-family:var(--kw-display);font-size:1.35rem;font-weight:400}
.pkw-color-card figcaption span{color:#7b5968;font-size:.78rem;font-weight:800;text-align:right}
.pkw-color-card--silver{transform:rotate(-.7deg)}
.pkw-color-card--gold{transform:translateY(1.2rem) rotate(.7deg)}
.pkw-colors__pair{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(230px,.85fr);align-items:center;max-width:960px;margin:clamp(3.5rem,7vw,6rem) auto 0;overflow:hidden;border:1px solid rgb(74 0 31 / 18%);border-radius:28px;background:var(--pkw-wine);box-shadow:0 24px 65px rgb(74 0 31 / 14%)}
.pkw-colors__pair img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pkw-colors__pair figcaption{display:grid;gap:.75rem;padding:clamp(1.75rem,4vw,3.5rem);color:#fffaf0}
.pkw-colors__pair figcaption strong{font-family:var(--kw-display);font-size:clamp(2rem,4vw,3.4rem);font-weight:400;line-height:.95}
.pkw-colors__pair figcaption span{max-width:24ch;color:#f5c9d5;font-size:.9rem;font-weight:800;line-height:1.55}
.pkw-colors__link{display:inline-flex;align-items:center;gap:.45rem;margin-top:clamp(2.3rem,5vw,4rem);color:var(--pkw-wine);font-weight:900;text-decoration-color:#dc6f8e;text-decoration-thickness:2px;text-underline-offset:5px}

/* Uitleg */
.pootret-how{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:clamp(2rem,7vw,7rem);align-items:start;padding:clamp(5rem,9vw,8.5rem) max(1.5rem,calc((100% - 1240px)/2));background:var(--pkw-cream)}
.pootret-how .pootret-section-heading{position:sticky;top:110px;margin:0}
.pootret-section-heading h2{line-height:.93}
.pootret-section-heading>p:last-child{font-size:1rem;line-height:1.65}
.pootret-how__grid{grid-template-columns:1fr;gap:14px}
.pootret-how__grid li,.pootret-how__grid li:nth-child(2),.pootret-how__grid li:nth-child(3){display:grid;grid-template-columns:68px 1fr;column-gap:1.15rem;min-height:0;padding:1.5rem 1.6rem;border:1px solid rgb(74 0 31 / 22%);border-radius:20px;background:var(--pkw-paper);box-shadow:none;transform:none}
.pootret-how__grid li:nth-child(2){background:#fce2e9}
.pootret-how__grid li:nth-child(3){background:#ffe695}
.pootret-how__grid li>span{top:1rem;right:1rem}
.pootret-how__grid li>div{grid-row:1/3;display:grid;width:58px;height:58px;place-items:center;margin:0;border-radius:50%;background:var(--pkw-wine);color:var(--pkw-cream);font-family:var(--kw-display);font-size:1.8rem}
.pootret-how__grid h3{align-self:end;margin:0 0 .35rem;font-size:1.55rem}
.pootret-how__grid p{grid-column:2;margin:0}

/* Configurator */
.pootret-studio{padding:clamp(5rem,8vw,8rem) max(1rem,calc((100% - 1240px)/2));background:#f5c4d2}
#samenstellen{background:linear-gradient(180deg,#f8d2dc,#f2b7c8)}
.pootret-studio__heading{max-width:1120px;margin-bottom:2.25rem;grid-template-columns:1fr .78fr}
.pootret-studio__heading>p{font-size:1rem}
.pkw-card{--line:#d9c7bb;--muted:#735b4c;--ink:var(--pkw-ink);padding:clamp(1rem,2.5vw,2rem);border:1px solid rgb(74 0 31 / 24%);border-radius:28px;background:var(--pkw-paper);box-shadow:0 24px 70px rgb(74 0 31 / 14%)}
.pootret-studio .pkw-card{max-width:1120px;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:12px clamp(1.5rem,3.5vw,3rem)}
.pootret-studio .pkw-card .nk-stage{position:sticky;top:100px;grid-row:1/span 4;border:0;border-radius:20px;background:radial-gradient(circle at 50% 35%,#fff 0,#f3eee7 50%,#ded5ca 100%);box-shadow:inset 0 0 0 1px rgb(74 0 31 / 10%)}
.pkw-live-label{position:absolute;z-index:3;top:14px;left:14px;padding:.48rem .7rem;border-radius:999px;background:rgb(255 253 248 / 88%);color:var(--pkw-wine);font-size:.66rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;box-shadow:0 4px 20px rgb(74 0 31 / 10%);backdrop-filter:blur(5px)}
.pootret-studio .pkw-card .pk-opties{gap:18px}
.pkw-card .nk-field label,.pkw-card .nk-chain legend{margin-bottom:8px;color:var(--pkw-wine);font-size:.7rem;letter-spacing:.09em}
.pkw-card .nk-field input,.pkw-card .nk-field textarea{border:1px solid #cdb8aa;border-radius:12px;background:#fff;box-shadow:0 1px 0 rgb(74 0 31 / 5%)}
.pkw-card .nk-field input:hover,.pkw-card .nk-field textarea:hover{border-color:#9d796a}
.pkw-field-note{display:block;margin-top:.45rem;color:#80695b;font-size:.74rem;line-height:1.4}
.pkw-card .nk-chain div{gap:8px}
.pkw-card .nk-chain label.nk-pill{min-height:46px;padding-inline:13px;border:1px solid #d8c4b6;border-radius:12px;background:#fff;transition:border-color .15s ease,background .15s ease,transform .15s ease}
.pkw-card .nk-chain label.nk-pill:hover{border-color:var(--pkw-wine);transform:translateY(-1px)}
.pkw-card .nk-chain input:checked+label.nk-pill{border-color:var(--pkw-wine);background:#fff3f6;box-shadow:inset 0 0 0 1px var(--pkw-wine)}
.pkw-kaart-knop{width:100%;margin-top:4px;border-radius:12px;box-shadow:0 6px 0 #2e0013}
.pkw-card figcaption{padding-top:14px;color:#765d4d}

/* Bestellen */
#bestellen{background:var(--pkw-cream)}
#bestellen .pootret-studio__heading{border-top:1px solid rgb(74 0 31 / 20%);padding-top:2rem}
.sb-kaart{max-width:1120px;padding:0;overflow:hidden}
.pkw-order-layout{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(0,1.3fr)}
.pkw-order-layout>*{min-width:0}
.pkw-order-summary{display:flex;flex-direction:column;padding:clamp(2rem,4vw,3.3rem);background:linear-gradient(160deg,var(--pkw-wine-deep),var(--pkw-wine));color:var(--pkw-cream)}
.pkw-summary-kicker{margin:0 0 1rem;color:var(--pkw-yellow);font-size:.68rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.pkw-order-summary h3{max-width:10ch;margin:0;color:var(--pkw-cream);font-family:var(--kw-display);font-size:clamp(2rem,3.2vw,3.1rem);font-weight:400;line-height:.98}
.pkw-order-summary ul{display:grid;gap:.75rem;padding:0;margin:2rem 0;list-style:none}
.pkw-order-summary li{display:flex;gap:.55rem;color:#f1dce4;font-size:.9rem;line-height:1.4}
.pkw-order-summary li span{color:var(--pkw-yellow);font-weight:900}
.pkw-summary-price{display:grid;gap:.1rem;margin:auto 0 0;padding-top:1.5rem;border-top:1px solid rgb(255 247 232 / 20%)}
.pkw-summary-price strong{color:var(--pkw-yellow);font-family:var(--kw-display);font-size:2.35rem;font-weight:400}
.pkw-summary-price span{font-size:.74rem;font-weight:800}
.pkw-no-payment{margin:.9rem 0 0;color:#dabeca;font-size:.72rem;line-height:1.45}
.pkw-order-layout .sb-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;width:100%;max-width:none;padding:clamp(1.5rem,4vw,3.3rem)}
.pkw-order-layout .sb-veld>span{color:var(--pkw-wine);font-weight:900}
.pkw-order-layout .sb-veld input{border-color:#d4c0b3;border-radius:10px}
.pkw-order-layout .sb-check{border-color:#d4c0b3;border-radius:12px;background:#fff8fa}
.pkw-order-layout .sb-prijs{padding:.8rem 1rem;border-radius:10px;background:#f7eee8}
.pkw-order-layout .sb-form button{width:100%;min-height:56px;border-radius:10px;box-shadow:0 6px 0 #2e0013}

/* Echte Pootretten: een speelse route van foto naar gravure en ketting. */
.pootret-real{position:relative;padding:clamp(5rem,8vw,7.5rem) max(1.5rem,calc((100% - 1180px)/2));overflow:hidden;background:
  radial-gradient(circle at 5% 95%,rgb(255 207 63 / 58%) 0 115px,transparent 116px),
  radial-gradient(circle at 98% 8%,rgb(247 197 220 / 80%) 0 145px,transparent 146px),
  var(--pkw-cream);color:var(--pkw-ink)}
.pkw-process-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:end;max-width:1120px;margin:0 auto 1.1rem}
.pootret-real .cf-kicker{color:var(--pkw-wine)}
.pkw-process-heading h2{max-width:760px;margin:0;color:var(--pkw-wine);font-size:clamp(2.7rem,5.2vw,5.25rem);line-height:.91;letter-spacing:-.035em}
.pkw-process-heading h2 em{color:var(--pkw-rose);font-style:normal}
.pkw-process-stamp{display:grid;width:108px;height:108px;place-items:center;padding:.8rem;border:2px solid var(--pkw-wine);border-radius:50%;background:var(--pkw-yellow);color:var(--pkw-wine);font-family:var(--kw-display);font-size:1.05rem;line-height:1;text-align:center;transform:rotate(7deg);box-shadow:5px 6px 0 var(--pkw-wine)}
.pkw-process-dogs{display:flex;flex-wrap:wrap;gap:.55rem;max-width:1120px;padding:0;margin:0 auto 1.1rem;list-style:none}
.pkw-process-dogs li{display:flex;align-items:center;gap:.5rem;padding:.38rem .75rem .38rem .38rem;border:1.5px solid var(--pkw-wine);border-radius:999px;background:var(--pkw-paper);color:var(--pkw-wine);font-size:.75rem;font-weight:900}
.pkw-process-dogs li.is-active{background:var(--pkw-wine);color:var(--pkw-cream)}
.pkw-process-dogs img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.pkw-process-board{position:relative;min-height:540px;max-width:1120px;margin:0 auto;border-radius:28px;background:
  linear-gradient(rgb(74 0 31 / 7%) 1px,transparent 1px),
  linear-gradient(90deg,rgb(74 0 31 / 7%) 1px,transparent 1px),
  var(--pkw-rose);background-size:30px 30px}
.pkw-process-card{position:absolute;z-index:2;width:clamp(210px,25.5%,275px);height:auto;min-height:0;box-sizing:border-box;margin:0;overflow:visible}
.pkw-process-card--photo{top:68px;left:7%;transform:rotate(-5deg)}
.pkw-process-card--engraving{z-index:3;top:105px;left:38%;transform:rotate(3deg)}
.pkw-process-card--result{top:57px;right:7%;transform:rotate(5deg)}
.pkw-process-sheet{display:flex;flex-direction:column;width:100%;height:auto;box-sizing:border-box;padding:.7rem .7rem 1rem;margin:0;border:2px solid var(--pkw-wine);border-radius:10px;background:var(--pkw-paper);box-shadow:8px 9px 0 var(--pkw-wine);overflow:hidden}
.pootret-real .pkw-process-sheet>.pkw-process-image-wrap{position:relative;flex:0 0 295px;width:100%;max-width:100%;height:295px;aspect-ratio:auto;box-sizing:border-box;overflow:hidden;border:0;border-radius:5px;background:var(--pkw-cream);box-shadow:none}
.pootret-real .pkw-process-image{display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:none;box-shadow:none;object-fit:cover}
.pootret-real .pkw-process-image--engraving{box-sizing:border-box;padding:10%;object-fit:contain;background:linear-gradient(145deg,#e4e5e3,#aeb4b2);filter:contrast(1.15)}
.pootret-real .pkw-process-image--result{object-position:50% 61%}
.pkw-process-number{position:absolute;z-index:10;top:-18px;left:-16px;display:grid;width:48px;height:48px;place-items:center;border:2px solid var(--pkw-wine);border-radius:50%;background:var(--pkw-yellow);color:var(--pkw-wine);font-family:var(--kw-display);font-size:1.2rem;box-shadow:3px 4px 0 var(--pkw-wine)}
.pootret-real .pkw-process-card figcaption{display:block;flex:0 0 auto;width:100%;min-height:86px;box-sizing:border-box;padding:.9rem .35rem 0;margin:0;overflow-wrap:anywhere;text-align:left}
.pootret-real .pkw-process-card figcaption strong{display:block;color:var(--pkw-wine);font-family:var(--kw-display);font-size:1.18rem;font-weight:400;line-height:1.05}
.pootret-real .pkw-process-card figcaption small{display:block;width:100%;max-width:100%;height:auto;margin:.28rem 0 0;color:#78405b;font-size:.76rem;font-weight:800;line-height:1.45;text-transform:none}
.pkw-process-arrow{position:absolute;z-index:6;color:var(--pkw-yellow);font-family:var(--kw-display);font-size:3.4rem;line-height:1;text-shadow:3px 4px 0 var(--pkw-wine)}
.pkw-process-arrow--one{top:250px;left:31%;transform:rotate(16deg)}
.pkw-process-arrow--two{top:205px;right:28%;transform:rotate(-14deg)}
.pkw-process-note{position:absolute;right:1.5rem;bottom:1.1rem;margin:0;color:var(--pkw-wine);font-size:.68rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

/* FAQ */
.pootret-faq{padding:clamp(5rem,8vw,8rem) max(1.5rem,calc((100% - 1240px)/2));background:#fffaf0}
.pootret-faq details{border-color:rgb(74 0 31 / 18%)}
.pootret-faq summary{font-size:1rem}

@media (max-width:980px){
  .pootret-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .pootret-hero__copy{max-width:720px}
  .pootret-hero__art.pkw-art{width:min(590px,100%);min-height:540px}
  .pkw-promise-strip{grid-template-columns:repeat(2,1fr)}
  .pkw-promise-strip p:nth-child(2){border-right:0}
  .pkw-promise-strip p:nth-child(n+3){border-top:1px solid rgb(74 0 31 / 18%)}
  .pootret-how{grid-template-columns:1fr}
  .pootret-how .pootret-section-heading{position:static;max-width:720px}
  .pootret-studio .pkw-card{grid-template-columns:1fr}
  .pootret-studio .pkw-card .nk-stage{position:relative;top:auto;grid-row:auto}
  .pkw-order-layout{grid-template-columns:1fr}
  .pkw-order-summary h3{max-width:15ch}
  .pkw-summary-price{margin-top:1rem}
}

@media (max-width:680px){
  .pootret-page main,.pootret-hero{width:100%;max-width:100%}
  .pootret-hero{box-sizing:border-box;padding:3.5rem 1rem 2.8rem}
  .pootret-hero__copy{width:100%;max-width:100%;overflow:hidden}
  .pootret-hero h1{max-width:100%;font-size:clamp(2.55rem,10.5vw,3.8rem)}
  .pootret-hero__lead{max-width:100%;overflow-wrap:anywhere}
  .pootret-hero__lead{font-size:1rem}
  .pkw-hero-actions{align-items:stretch;flex-direction:column}
  .pkw-hero-actions .cf-button{justify-content:center;width:100%}
  .pkw-secundair{text-align:center}
  .pootret-proof{gap:.45rem}
  .pootret-proof li{padding:.45rem .58rem;font-size:.69rem}
  .pootret-hero__art.pkw-art{min-height:0;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);padding:2.25rem .25rem 1rem}
  .pkw-source-photo{margin-bottom:1.5rem;border-width:7px}
  .pkw-pendant-card{margin-top:0;padding:.65rem .65rem .1rem;border-width:7px}
  .pkw-source-photo figcaption,.pkw-pendant-card figcaption{padding:.55rem .15rem .15rem;font-size:.56rem}
  .pkw-hero-arrow{top:50%;left:39%;font-size:3.25rem}
  .pkw-made-note{right:0;bottom:1%;width:78px;height:78px;font-size:.82rem;box-shadow:3px 4px 0 var(--pkw-wine)}
  .pkw-promise-strip{grid-template-columns:1fr;padding:0}
  .pkw-promise-strip p,.pkw-promise-strip p:first-child{grid-template-columns:110px 1fr;align-items:center;padding:1rem 1.2rem;border:0;border-bottom:1px solid rgb(74 0 31 / 18%)}
  .pkw-promise-strip p:last-child{border-bottom:0}
  .pkw-promise-strip p:nth-child(n+3){border-top:0}
  .pkw-colors{padding:4.5rem 1rem}
  .pkw-colors__heading{grid-template-columns:1fr;gap:1.2rem}
  .pkw-colors__heading h2{font-size:clamp(2.8rem,14vw,4.2rem)}
  .pkw-colors__grid{grid-template-columns:1fr;gap:1.25rem}
  .pkw-color-card--silver,.pkw-color-card--gold{transform:none}
  .pkw-color-card figcaption{padding:1rem}
  .pkw-colors__pair{grid-template-columns:1fr;margin-top:2.5rem;border-radius:22px}
  .pkw-colors__pair figcaption{padding:1.4rem 1.2rem 1.6rem}
  .pkw-colors__link{margin-top:2rem}
  .pootret-how,.pootret-real{padding:4.5rem 1rem}
  .pootret-how__grid li,.pootret-how__grid li:nth-child(2),.pootret-how__grid li:nth-child(3){grid-template-columns:50px 1fr;padding:1.2rem;column-gap:.85rem}
  .pootret-how__grid li>div{width:46px;height:46px;font-size:1.35rem}
  .pootret-how__grid p{font-size:.9rem}
  .pootret-studio{padding:4.5rem .75rem}
  .pootret-studio__heading{grid-template-columns:1fr;padding-inline:.25rem}
  .pkw-card{padding:.8rem;border-radius:20px}
  .pootret-studio .pkw-card{gap:16px}
  .pootret-studio .pkw-card .nk-stage{border-radius:14px}
  .pkw-live-label{top:9px;left:9px}
  .pkw-card .nk-chain div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pkw-card .nk-chain label.nk-pill{justify-content:flex-start;width:100%;padding-inline:10px;font-size:.82rem}
  .pkw-kaart-knop{font-size:.9rem}
  .sb-kaart{padding:0}
  .pkw-order-summary{padding:2rem 1.3rem}
  .pkw-order-layout .sb-form{grid-template-columns:1fr;padding:1.5rem 1rem}
  .pkw-process-heading{grid-template-columns:1fr;padding-inline:.35rem}
  .pkw-process-heading>div:first-child{padding-right:4.5rem}
  .pkw-process-heading h2{max-width:10ch;font-size:clamp(2.7rem,12vw,4rem)}
  .pkw-process-stamp{position:absolute;top:3.8rem;right:1.1rem;width:78px;height:78px;font-size:.78rem;box-shadow:3px 4px 0 var(--pkw-wine)}
  .pkw-process-dogs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:.35rem}
  .pkw-process-dogs li{min-width:0}
  .pkw-process-board{min-height:815px;border-radius:22px}
  .pkw-process-card{width:min(65%,260px)}
  .pkw-process-card--photo{top:42px;left:7%}
  .pkw-process-card--engraving{top:260px;left:auto;right:7%}
  .pkw-process-card--result{top:482px;right:auto;left:9%}
  .pootret-real .pkw-process-sheet>.pkw-process-image-wrap{flex-basis:182px;height:182px}
  .pootret-real .pkw-process-card figcaption{min-height:78px;padding-top:.65rem}
  .pootret-real .pkw-process-card figcaption strong{font-size:1.02rem}
  .pootret-real .pkw-process-card figcaption small{font-size:.7rem}
  .pkw-process-arrow{font-size:2.6rem}
  .pkw-process-arrow--one{top:240px;left:48%;transform:rotate(76deg)}
  .pkw-process-arrow--two{top:458px;right:44%;transform:rotate(103deg)}
  .pkw-process-note{right:1rem;bottom:.8rem}
  .pootret-faq{padding:4.5rem 1rem}
}

@media (max-width:390px){
  .pootret-hero__art.pkw-art{min-height:0}
  .pkw-made-note{display:none}
  .pkw-card .nk-chain label.nk-pill{font-size:.76rem}
  .pkw-card .nk-chain{min-width:0}
}

/* 2026-10-10 overlapcorrecties. Getest op 360–1440 px; zie docs/pootret-ketting.md.
   1. Kop en inleiding onder elkaar plakten tegen elkaar. */
.pootret-section-heading h2+p{margin-top:1rem}

/* 2. De sticker "naam in een boog?" lag op het bijschrift van de ketting.
      Nu rechtsboven op de foto, waar geen tekst staat. */
.pkw-made-note{top:2%;bottom:auto;right:-3%}
@media (max-width:680px){.pkw-made-note{top:0;bottom:auto;right:-2%}}

/* 3. De drie kaarten stonden los op vaste posities en schoven op sommige
      breedtes over elkaar (de middelste over de tekst van de derde). Nu in een
      raster: ze kunnen elkaar niet meer raken, de scheve stand blijft. */
.pkw-process-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.6rem,4.5vw,4rem);align-items:start;min-height:0;padding:clamp(2.6rem,4vw,3.6rem) clamp(1.3rem,4vw,3.2rem) 1.4rem}
.pkw-process-card,.pkw-process-card--photo,.pkw-process-card--engraving,.pkw-process-card--result{position:relative;inset:auto;width:100%;max-width:275px;justify-self:center}
.pkw-process-card--photo{transform:rotate(-4deg)}
.pkw-process-card--engraving{transform:translateY(1.6rem) rotate(3deg)}
.pkw-process-card--result{transform:rotate(4deg)}
.pootret-real .pkw-process-sheet>.pkw-process-image-wrap{flex:0 0 auto;height:auto;aspect-ratio:4/5}
.pkw-process-arrow--one,.pkw-process-arrow--two{top:42%;right:auto;transform:translateX(-50%) rotate(-8deg)}
.pkw-process-arrow--one{left:calc(33.333% + .6rem)}
.pkw-process-arrow--two{left:calc(66.666% - .6rem)}
.pkw-process-note{position:static;grid-column:1/-1;justify-self:end;margin-top:1.4rem}
@media (max-width:680px){
  .pkw-process-board{grid-template-columns:1fr;gap:2.4rem;min-height:0;padding:2.6rem 1.2rem 1.4rem}
  .pkw-process-card,.pkw-process-card--photo,.pkw-process-card--engraving,.pkw-process-card--result{width:min(100%,280px)}
  .pkw-process-card--engraving{transform:rotate(3deg)}
  .pkw-process-arrow{display:none}
  .pkw-process-note{justify-self:center;text-align:center}
}

/* 4. Op een telefoon paste "naam in een boog? jij kiest" niet in het rondje. */
@media (max-width:680px){.pkw-made-note{width:92px;height:92px;padding:.55rem;font-size:.74rem;line-height:1.05}}

/* 5. Op een smal scherm botsten "Live voorbeeld" en de knop "Voorkant"
      (allebei bovenin het voorbeeld). De knoppen gaan daar naar onderen. */
@media (max-width:440px){.pkw-card .pk-kanten{top:auto;bottom:10px}}

/* 6. Het stapnummer rechtsboven (01–03) liep op smalle schermen in de kop. */
.pootret-how__grid li h3{padding-right:2.4rem}
/* 7. De sticker stak tussen 440 en 680 px net buiten het scherm. */
@media (max-width:680px){.pkw-made-note{right:.25rem}}

/* 8. Het bestelblok is ook een .pootret-studio .pkw-card en erfde zo het
      twee-koloms raster van het samenstelvak; het formulier werd daardoor op
      brede schermen nog geen 110 px breed. Het bestelblok heeft zijn eigen
      indeling (.pkw-order-layout). */
.pootret-studio .pkw-card.sb-kaart{display:block}

/* Foto kiezen in het samenstelvak (assets/pootret-voorbeeld.js) */
.pkw-foto-veld input[type=file]{width:100%;max-width:100%;padding:.7rem;border:2px dashed rgb(74 0 31 / 25%);border-radius:12px;background:#fffdf8;font:inherit;font-size:.85rem;cursor:pointer}
.pkw-foto-veld input[type=file]:hover{border-color:var(--pkw-wine)}
.pkw-tekenen{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.55rem;margin:0;padding:.55rem .9rem;border-radius:999px;background:var(--pkw-wine);color:#fff;font-size:.8rem;font-weight:800;white-space:nowrap;box-shadow:0 6px 20px rgb(74 0 31 / 25%)}
.pkw-tekenen span{width:14px;height:14px;border:2px solid rgb(255 255 255 / 35%);border-top-color:#fff;border-radius:50%;animation:pkw-draai .8s linear infinite}
@keyframes pkw-draai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pkw-tekenen span{animation:none}}
.pkw-tekenen[hidden]{display:none}

/* Wisselen tussen de voorbeeldhonden Noekie en Sammie (assets/penningketting.js) */
/* Voorbeeldhonden: drie ronde fotoknopjes linksonder in het voorbeeld (assets/penningketting.js). */
.pkw-honden{position:absolute;z-index:3;left:14px;bottom:14px;display:flex;gap:8px;padding:5px;border-radius:999px;background:rgb(255 253 248 / 88%);box-shadow:0 4px 16px rgb(74 0 31 / 12%);backdrop-filter:blur(5px)}
.pkw-honden[hidden]{display:none}
.pkw-hondknop{display:grid;place-items:center;width:44px;height:44px;padding:0;overflow:hidden;border:2px solid #fff;border-radius:50%;background:var(--kw-pink-light);color:var(--pkw-wine);font:inherit;font-weight:900;cursor:pointer;box-shadow:0 0 0 1px rgb(74 0 31 / 18%);transition:transform .15s ease,box-shadow .15s ease}
.pkw-hondknop img{display:block;width:100%;height:100%;object-fit:cover}
.pkw-hondknop:hover{transform:translateY(-2px)}
.pkw-hondknop[aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--pkw-wine),0 0 0 5px var(--kw-yellow)}
.pkw-hondknop:focus-visible{outline:3px solid #006eff;outline-offset:3px}
@media (max-width:440px){.pkw-honden{left:10px;bottom:10px;gap:6px}.pkw-hondknop{width:38px;height:38px}}
@media (prefers-reduced-motion:reduce){.pkw-hondknop{transition:none}.pkw-hondknop:hover{transform:none}}
/* De hondenknoppen bij "Zo werkt het" (assets/pootret-honden.js) */
.pkw-process-dogs button{display:flex;align-items:center;gap:.5rem;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.pkw-process-dogs li:has(button:focus-visible){outline:2px solid var(--pkw-yellow);outline-offset:2px}
.pkw-process-dogs li:not(.is-active):hover{background:var(--pkw-cream)}
/* De gekozen foto, als plaatje onder het fotoveld (assets/sieraad-bestellen.js) */
.pkw-duim{display:block;width:96px;height:96px;margin-top:.6rem;border-radius:12px;object-fit:cover;box-shadow:0 4px 14px rgb(74 0 31 / 15%)}
.pkw-duim[hidden]{display:none}
/* Kleurkaarten zijn klikbaar: bij hover komt de kaart iets omhoog en zoomt de foto
   licht in; klikken gaat naar de samensteller met die kleur (pootret-honden.js). */
.pkw-color-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.pkw-color-card img{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pkw-color-link{position:absolute;inset:0;z-index:2;border-radius:inherit}
.pkw-color-link:focus-visible{outline:3px solid var(--pkw-yellow);outline-offset:3px}
.pkw-color-card:hover img{transform:scale(1.04)}
.pkw-color-card:hover{box-shadow:0 28px 60px rgb(74 0 31 / 18%)}
.pkw-color-card--silver:hover{transform:translateY(-8px) rotate(-1.4deg)}
.pkw-color-card--gold:hover{transform:translateY(calc(1.2rem - 8px)) rotate(1.4deg)}
.pkw-color-card:hover figcaption strong{text-decoration:underline;text-decoration-color:#dc6f8e;text-underline-offset:5px}
@media (max-width:680px){.pkw-color-card--silver:hover,.pkw-color-card--gold:hover{transform:none}}
@media (prefers-reduced-motion:reduce){.pkw-color-card,.pkw-color-card img{transition:none}.pkw-color-card:hover img{transform:none}}
/* Plakkende knop op telefoons (assets/pootret-honden.js zet hidden aan en uit) */
.pkw-plakknop{display:none}
@media (max-width:760px){
  .pkw-plakknop{position:fixed;z-index:40;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1.25rem;border:2px solid var(--pkw-wine);border-radius:999px;background:var(--pkw-yellow);color:var(--pkw-wine);font-weight:900;text-decoration:none;box-shadow:0 10px 30px rgb(74 0 31 / 28%)}
  .pkw-plakknop span{font-family:var(--kw-display);font-weight:400;font-size:1.15rem}
  .pkw-plakknop[hidden]{display:none}
}
/* Sammie en Tis: per hond twee kleine schuine kaartjes, foto en ketting, net als
   de grote van Noekie. Ze liggen half onder de grote foto's (die hebben
   z-index 2). Sammie bovenin in het midden, Tis onderin. Klik = "Zo werkt het"
   met die hond. */
.pootret-hero__art.pkw-art{padding-bottom:8rem}
.pkw-hero-meer{position:absolute;inset:0;z-index:1;pointer-events:none}
.pkw-hero-meer__kaarten{position:absolute;inset:0}
.pkw-mini{position:absolute;display:flex;align-items:flex-start;width:clamp(170px,40%,230px);text-decoration:none;pointer-events:auto;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pkw-mini:nth-child(1){left:20%;top:-1.8rem}
.pkw-mini:nth-child(2){left:31%;bottom:-.2rem}
.pkw-mini__kaart{display:block;width:54%;padding:.35rem .35rem .1rem;background:var(--pkw-paper);box-shadow:0 14px 32px rgb(20 0 8 / 45%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.pkw-mini__kaart--foto{position:relative;z-index:1;transform:rotate(-7deg)}
.pkw-mini__kaart--ketting{margin:.9rem 0 0 -10%;transform:rotate(6deg)}
/* Klein geel pijltje van foto naar ketting, zoals bij de grote kaarten. */
.pkw-mini__pijl{position:absolute;z-index:3;left:44%;top:42%;color:var(--pkw-yellow);font-family:var(--kw-display);font-size:1.7rem;line-height:1;filter:drop-shadow(0 2px 0 var(--pkw-wine));transform:rotate(-8deg);pointer-events:none}
.pkw-mini__kaart img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.pkw-mini__kaart--ketting img{object-position:center 68%}
.pkw-mini__naam{display:block;padding:.3rem 0 .15rem;color:var(--pkw-wine);font-size:.56rem;font-weight:900;letter-spacing:.08em;text-align:center;text-transform:uppercase}
.pkw-mini:hover,.pkw-mini:focus-visible{z-index:5;transform:translateY(-8px)}
.pkw-mini:hover .pkw-mini__kaart--foto,.pkw-mini:focus-visible .pkw-mini__kaart--foto{transform:rotate(-3deg)}
.pkw-mini:hover .pkw-mini__kaart--ketting,.pkw-mini:focus-visible .pkw-mini__kaart--ketting{transform:rotate(3deg)}
.pkw-mini:focus-visible{outline:3px solid var(--pkw-yellow);outline-offset:3px}
.pkw-hero-arrow{top:calc(49% - 2.5rem)}
@media (max-width:680px){.pkw-mini__pijl{font-size:1.3rem}.pootret-hero__art.pkw-art{padding-bottom:6rem}.pkw-hero-arrow{top:calc(50% - 2rem)}.pkw-mini{width:150px}.pkw-mini:nth-child(1){left:16%;top:-1.6rem}.pkw-mini:nth-child(2){left:30%}.pkw-mini__naam{font-size:.5rem}}
@media (prefers-reduced-motion:reduce){.pkw-mini,.pkw-mini__kaart{transition:none}}
/* Noekie's ketting-kaart schuiner, zodat Sammie bovenin tussen de grote kaarten past. */
.pkw-pendant-card{transform:rotate(9deg)}

/* Keuzetegels in de samensteller, zoals bij de penning-configurator: een tegel
   met titel en uitleg, een staal of een lettervoorbeeld, en een geel stipje
   bij de gekozen tegel. De radio's en hun name/value blijven het contract
   (docs/pootret-ketting.md); dit is alleen het uiterlijk van de labels. */
.pkw-card .pkw-tegels>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pkw-card .pkw-tegels.pk-letter>div{grid-template-columns:repeat(4,minmax(0,1fr))}
.pkw-card .pkw-tegels--kleur>div{grid-template-columns:repeat(3,minmax(0,1fr))}
.pkw-card .pkw-tegels label.pkw-tegel{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px;width:100%;height:100%;min-height:74px;padding:12px 12px 11px;border:1.5px solid var(--kw-line);border-radius:10px;background:var(--kw-cream);color:var(--kw-burgundy-deep);font-family:inherit;font-size:.9rem;line-height:1.2;text-align:left;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease}
.pkw-card .pkw-tegels label.pkw-tegel:hover{border-color:var(--pkw-wine);box-shadow:0 7px 0 rgb(74 0 31 / 10%);transform:translateY(-2px)}
.pkw-card .pkw-tegels input:checked+label.pkw-tegel{border-color:var(--pkw-wine);background:var(--kw-pink-light);box-shadow:0 0 0 2px rgb(74 0 31 / 8%)}
.pkw-card .pkw-tegels input:checked+label.pkw-tegel::after{content:"";position:absolute;top:9px;right:9px;width:12px;height:12px;border-radius:50%;background:var(--kw-yellow);box-shadow:0 0 0 1.5px var(--pkw-wine)}
.pkw-card .pkw-tegels input:focus-visible+label.pkw-tegel{outline:3px solid #006eff;outline-offset:2px}
.pkw-tegel__titel{display:block;padding-right:16px;font-weight:800}
.pkw-tegel__sub{display:block;color:#604935;font-size:.72rem;line-height:1.35}
.pkw-tegel__meer{margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--pkw-wine);color:var(--kw-cream);font-size:.68rem;font-weight:800;white-space:nowrap}
.pkw-tegel__icoon{display:block;width:34px;height:34px;margin-bottom:6px;color:var(--pkw-wine)}
/* Lettertype: het voorbeeld is het belangrijkste, de naam staat eronder. */
.pkw-card .pkw-tegels label.pkw-tegel--letter{align-items:center;justify-content:center;gap:4px;min-height:82px;padding-inline:6px;text-align:center}
.pkw-tegel--letter .pkw-tegel__titel{padding-right:0;color:#604935;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.pkw-tegel__proef{display:block;max-width:100%;overflow:hidden;color:var(--pkw-ink);font-size:1.3rem;line-height:1.1;white-space:nowrap}
label[for="pk-l-sier"] .pkw-tegel__proef{font-size:1.75rem}
/* Kleur: een groot staal, net als de kleurtegels van de penning. */
.pkw-card .pkw-tegels label.pkw-tegel--kleur{min-height:0;padding:10px 10px 9px}
.pkw-tegel__staal{display:block;width:100%;height:44px;margin-bottom:7px;border:1px solid rgb(21 19 16 / 10%);border-radius:8px;box-shadow:inset 0 -8px 14px rgb(0 0 0 / 11%)}
.pkw-tegel__staal--zilver{background:linear-gradient(135deg,#f4f5f6,#dfe2e3 35%,#8f969a)}
.pkw-tegel__staal--goud{background:linear-gradient(135deg,#f6e3a8,#e7cd87 35%,#a87c35)}
.pkw-tegel__staal--rose{background:linear-gradient(135deg,#f0cfb8,#dcae8e 35%,#956546)}
/* De ketting krijgt schakels over het staal heen. */
.pkw-tegel__staal--ketting-zilver,.pkw-tegel__staal--ketting-goud{background-size:11px 100%,100% 100%}
.pkw-tegel__staal--ketting-zilver{background-image:radial-gradient(ellipse 5.5px 4px at 50% 50%,transparent 48%,rgb(40 44 47 / 45%) 54%,rgb(40 44 47 / 45%) 72%,transparent 80%),linear-gradient(135deg,#f4f5f6,#e7e9ea 35%,#7d8489)}
.pkw-tegel__staal--ketting-goud{background-image:radial-gradient(ellipse 5.5px 4px at 50% 50%,transparent 48%,rgb(60 40 10 / 45%) 54%,rgb(60 40 10 / 45%) 72%,transparent 80%),linear-gradient(135deg,#f6e3a8,#ead18b 35%,#9d742f)}
@media (max-width:760px){
  .pkw-card .pkw-tegels.pk-letter>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pkw-card .pkw-tegels label.pkw-tegel{padding:10px 10px 9px;font-size:.84rem}
}
@media (prefers-reduced-motion:reduce){.pkw-card .pkw-tegels label.pkw-tegel{transition:none}.pkw-card .pkw-tegels label.pkw-tegel:hover{transform:none}}

/* Extra instructies in het bestelformulier. */
.pkw-order-layout .sb-veld textarea{width:100%;min-height:90px;padding:10px 14px;border:1px solid #d4c0b3;border-radius:10px;background:#fff;font:inherit;font-size:1rem;line-height:1.4;color:var(--pkw-ink);resize:vertical}
.pkw-order-layout .sb-veld textarea:focus-visible{outline:3px solid #006eff;outline-offset:2px}
.pkw-order-layout .sb-veld>span small{font-weight:500;text-transform:none;letter-spacing:0}
/* Geen schuine draai bij de achterkant: bij de Pootret-ketting wisselt alleen de gravure. */
.pkw-card [data-pk-view][data-kant="achter"]{transform:none}

/* 3D: de penning draait om zijn eigen as (assets/pootret-3d.js). De ketting
   blijft in het platte voorbeeld hangen; alleen de penning wordt vervangen. */
.pkw-card .pk-kanten{z-index:4}
.pkw-3d{position:absolute;inset:0;z-index:2;perspective:1400px;cursor:grab;touch-action:pan-y;user-select:none}
.pkw-3d[hidden]{display:none}
.pkw-3d:active{cursor:grabbing}
.pkw-3d:focus-visible{outline:3px solid #006eff;outline-offset:-3px}
.pkw-3d__draai{position:absolute;inset:0;transform-style:preserve-3d}
.pkw-3d__draai>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pkw-3d__vlak{backface-visibility:hidden}
.pkw-3d__vlak--voor{transform:translateZ(calc(var(--dikte) / 2))}
.pkw-3d__vlak--achter{transform:rotateY(180deg) translateZ(calc(var(--dikte) / 2))}
.pkw-3d__laag{transform:translateZ(calc(var(--dikte) * var(--diepte)))}
.pkw-3d__hint{position:absolute;z-index:3;left:50%;bottom:16px;margin:0;transform:translateX(-50%);color:#80695b;font-size:.72rem;font-weight:800;white-space:nowrap;pointer-events:none}
.pkw-3d__speel{position:absolute;z-index:3;right:14px;bottom:14px;min-height:36px;padding:0 .9rem;border:1px solid rgb(74 0 31 / 25%);border-radius:999px;background:rgb(255 253 248 / 92%);color:var(--pkw-wine);font:inherit;font-size:.74rem;font-weight:900;cursor:pointer;box-shadow:0 4px 16px rgb(74 0 31 / 10%)}
.pkw-3d__speel:hover,.pkw-3d__speel:focus-visible{background:var(--pkw-yellow)}
@media (max-width:440px){.pkw-3d__hint{display:none}.pkw-3d__speel{right:10px;bottom:10px}}

/* Uitverkochte kleur (assets/pootret-voorraad.js): tegel gedimd, met een lintje. */
.pkw-card .pkw-tegels label.pkw-tegel--op{overflow:hidden;cursor:not-allowed}
.pkw-card .pkw-tegels label.pkw-tegel--op>*:not(.pkw-tegel__op){opacity:.42}
.pkw-card .pkw-tegels label.pkw-tegel--op:hover{transform:none;box-shadow:none;border-color:var(--kw-line)}
.pkw-tegel__op{position:absolute;top:18px;right:-38px;width:150px;padding:3px 0;background:#c4161c;color:#fff;font-size:.58rem;font-weight:800;letter-spacing:.06em;line-height:1.2;text-align:center;text-transform:uppercase;transform:rotate(38deg);pointer-events:none}
/* Link naar het retourbeleid onder de prijs, op bordeaux. */
.pkw-no-payment a{color:var(--pkw-yellow);font-weight:800;text-underline-offset:2px}
/* De zijkant van de penning als band, haaks op de voorkant (assets/pootret-3d.js).
   Rond aan de uiteinden, en donkerder naar boven en onder, zoals een rondje van opzij. */
.pkw-3d__band{position:absolute;width:var(--dikte);border-radius:calc(var(--dikte) / 2);background:linear-gradient(180deg,rgb(0 0 0 / 22%),transparent 18%,rgb(255 255 255 / 18%) 50%,transparent 82%,rgb(0 0 0 / 22%)),var(--rand);transform:rotateY(90deg)}
/* Het knijpoogje in 3D (assets/pootret-3d.js): plakjes van de lus, haaks op de
   penning, naast elkaar over de breedte van het oogje. */
.pkw-3d__oog{position:absolute;transform-style:preserve-3d}
.pkw-3d__oogplak{position:absolute;inset:0;transform:translateX(calc(var(--x) * var(--schaal, 1) * 1px)) rotateY(90deg)}
.pkw-3d__oogplak svg{display:block;width:100%;height:100%;overflow:visible}