/* The Trace - productkaart met plusje. Hoort bij inc/tt-kaart-plus.php (05-10-2026).
   Alles hangt onder html.tt-kp; zonder die klasse doet dit bestand niets. */

/* >>> thema-kaart: deze regels leunen op het kaartje van Woodmart en vervallen bij de overstap naar Bricks */
/* ---------- de kaart zelf: rustig, foto groot ---------- */
html.tt-kp .products .wd-product.tt-kp-kaart .wd-product-wrapper{background:transparent!important;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;gap:0!important}
html.tt-kp .products .wd-product.tt-kp-kaart .wd-product-card-bg{display:none!important}
html.tt-kp .products .wd-product.tt-kp-kaart .product-element-top{position:relative;border-radius:10px;overflow:hidden;margin:0!important}
html.tt-kp .products .wd-product.tt-kp-kaart .product-element-bottom{padding:10px 0 0!important;margin:0!important;gap:0!important;text-align:left!important}
html.tt-kp .products .wd-product.tt-kp-kaart .wd-product-cats,
html.tt-kp .products .wd-product.tt-kp-kaart .star-rating,
html.tt-kp .products .wd-product.tt-kp-kaart .wd-star-rating,
html.tt-kp .products .wd-product.tt-kp-kaart .wd-add-btn,
html.tt-kp .products .wd-product.tt-kp-kaart .wd-swatches-grid,
html.tt-kp .products .wd-product.tt-kp-kaart form.variations_form{display:none!important}
html.tt-kp .products .wd-product.tt-kp-kaart .wrap-price{min-height:0!important;margin:3px 0 0!important;padding:0!important}
html.tt-kp .products .wd-product.tt-kp-kaart .wd-entities-title{margin:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;line-height:20px;display:block!important;-webkit-line-clamp:unset!important;color:#f2f2f2!important}
html.tt-kp .products .wd-product.tt-kp-kaart .wd-entities-title a{display:inline!important;white-space:nowrap}
/* verhouding naar EME (06-10-2026, wens Martijn): minder lucht tussen de producten; naam, prijs en kleur strak onder elkaar, op elk scherm een regel naam */
html.tt-kp .products.tt-kp-lijst{column-gap:12px!important;row-gap:14px!important}
html.tt-kp .products .wd-product.tt-kp-kaart .product-element-bottom{padding:8px 0 0!important}
html.tt-kp .products .wd-product.tt-kp-kaart .wd-entities-title{font-size:13px;line-height:17px;font-weight:400!important;letter-spacing:.1px}
html.tt-kp .products .wd-product.tt-kp-kaart .wd-entities-title a{font-weight:inherit!important}
html.tt-kp .products .wd-product.tt-kp-kaart .wrap-price{margin:1px 0 0!important}
/* de prijs in de kleur en het gewicht van de naam, zodat hij niet meer de aandacht trekt; alleen een afgeprijsde prijs blijft goud */
html.tt-kp .products .wd-product.tt-kp-kaart .price{font-size:13px;line-height:17px;margin:0!important;color:#f2f2f2!important;font-weight:400!important;letter-spacing:.1px;font-family:Poppins,Arial,Helvetica,sans-serif}
html.tt-kp .products .wd-product.tt-kp-kaart .price .amount,html.tt-kp .products .wd-product.tt-kp-kaart .price bdi{color:inherit!important;font-weight:inherit!important}
html.tt-kp .products .wd-product.tt-kp-kaart .price del,html.tt-kp .products .wd-product.tt-kp-kaart .price del .amount{color:#8f8f8f!important;opacity:1!important}
html.tt-kp .products .wd-product.tt-kp-kaart .price ins,html.tt-kp .products .wd-product.tt-kp-kaart .price ins .amount{color:#cb9500!important;text-decoration:none}
@media (min-width:1025px){
  html.tt-kp .products.tt-kp-lijst{column-gap:16px!important;row-gap:18px!important}
  html.tt-kp .products .wd-product.tt-kp-kaart .product-element-bottom{padding:10px 0 0!important}
  html.tt-kp .products .wd-product.tt-kp-kaart .wd-entities-title{font-size:14px;line-height:19px}
  html.tt-kp .products .wd-product.tt-kp-kaart .price{font-size:14px;line-height:19px}
}
/* <<< thema-kaart */

/* kleurblokjes (variant D, gekozen 05-10-2026): schuin zoals het plusje, alleen om te tonen; de hele rij opent de kiezer, zodat een tik nooit niets doet */
/* 06-10-2026: kleurblokjes 20x12 in plaats van 16x10 (K2), keuze Martijn; tikvlak via ::before blijft 47 px hoog */
html.tt-kp .tt-kp-dots{display:flex!important;align-items:center;justify-content:flex-start!important;text-align:left;gap:6px;width:100%;height:12px;min-height:0!important;margin:6px 0 0!important;padding:0 0 0 2px;position:relative;background:none!important;border:0!important;box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;color:inherit}
html.tt-kp .tt-kp-dots::before{content:"";position:absolute;left:0;right:0;top:-23px;bottom:-12px}
html.tt-kp .tt-kp-dots i{position:relative;z-index:1;display:block;width:20px;height:12px;border-radius:1px;transform:skewX(-18deg);border:1px solid rgba(255,255,255,.4);flex:none;background-size:cover;background-position:center}
html.tt-kp .tt-kp-dots b{position:relative;z-index:1;line-height:12px;font-size:13px;color:#bdbdbd;font-weight:600;margin-left:1px;font-family:inherit}
/* een blokje zonder iets te kiezen (vlag, patch, 06-10-2026): alleen een kleur, geen tikvlak, dus nooit per ongeluk in de winkelwagen */
html.tt-kp .tt-kp-dots-stil{cursor:default}
html.tt-kp .tt-kp-dots-stil::before{content:none}

/* het plusje (variant D in wit, gekozen 05-10-2026): schuine knop zoals onze andere knoppen, wit zoals het hartje; goud blijft voor prijs en koopknoppen; raakvlak 44 bij 44 */
html.tt-kp .tt-kp-plus{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:6;width:44px;height:44px;display:grid;place-items:center;background:none!important;border:0!important;padding:0!important;margin:0!important;min-height:0!important;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:none!important;text-decoration:none!important;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
html.tt-kp .tt-kp-plus span{width:48px;height:30px;background:#fff;color:#0d0d0d;display:grid;place-items:center;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);transition:transform .15s,background .15s}
html.tt-kp .tt-kp-plus:active span{transform:scale(.92)}
html.tt-kp .tt-kp-plus.klaar span{background:#cb9500}
html.tt-kp .tt-kp-plus svg{width:18px;height:18px;display:block}
@media (min-width:768px){ html.tt-kp .tt-kp-plus{bottom:8px} }

/* ---------- computer met muis: geen plusje, de maten verschijnen bij de muis over het product (zoals EME, 06-10-2026) ---------- */
html.tt-kp.tt-kp-muis .tt-kp-plus{display:none!important}
html.tt-kp:not(.tt-kp-muis) .tt-kp-strook{display:none!important}
html.tt-kp.tt-kp-muis .tt-kp-dots i[data-kleur]{cursor:pointer}
html.tt-kp.tt-kp-muis .tt-kp-dots i[data-kleur]::after{content:"";position:absolute;left:-3px;right:-3px;top:-12px;bottom:-12px}
html.tt-kp.tt-kp-muis .tt-kp-dots i.aan{box-shadow:0 5px 0 -3px #f2f2f2}
.tt-kp-strook{position:absolute;left:8px;right:8px;bottom:8px;z-index:6;background:rgba(13,13,13,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:8px;padding:6px 6px 4px;opacity:0;transform:translateY(6px);transition:opacity .16s,transform .16s;pointer-events:none;font-family:Lato,Arial,Helvetica,sans-serif}
.tt-kp-kaart:hover .tt-kp-strook,.tt-kp-kaart:focus-within .tt-kp-strook,.tt-kp-strook.toon{opacity:1;transform:none;pointer-events:auto}
.tt-kp-kaart.tt-kp-open .tt-kp-strook{opacity:0;pointer-events:none}
.tt-kp-strook-kop{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1.3px;text-transform:uppercase;color:#a8a8a8;padding:0 4px 2px;line-height:14px}
.tt-kp-strook-kop b{color:#f2f2f2;letter-spacing:.3px;text-transform:none;font-size:12px;font-weight:600}
.tt-kp-strook-maten{display:flex}
.tt-kp-strook-maat,.tt-kp-strook-een{flex:1 1 0;min-width:0;height:44px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:6px!important;background:transparent!important;color:#f2f2f2!important;font-family:inherit!important;font-weight:700!important;font-size:13px!important;letter-spacing:.2px!important;text-transform:none!important;line-height:44px!important;cursor:pointer;box-shadow:none!important;display:grid;place-items:center;text-decoration:none!important;transition:background .1s,color .1s}
.tt-kp-strook-maat:hover:not(:disabled),.tt-kp-strook-een:hover{background:#f2f2f2!important;color:#0d0d0d!important}
.tt-kp-strook-maat:disabled{color:#6a6a6a!important;text-decoration:line-through!important;cursor:default}
.tt-kp-strook-maat.bezig,.tt-kp-strook-maat.klaar{background:#cb9500!important;color:#0d0d0d!important}
.tt-kp-strook-een{width:100%;text-transform:uppercase!important;letter-spacing:.8px!important;font-size:12px!important;margin-bottom:2px!important}

/* ---------- de kiezer (kleur en maat), gedeeld door blad en paneel ---------- */
.tt-kp-kiezer{font-family:Lato,Arial,Helvetica,sans-serif;color:#f2f2f2}
.tt-kp-label{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#9a9a9a;margin:0 0 4px;min-height:20px}
.tt-kp-label b{color:#fff;letter-spacing:.3px;text-transform:none;font-size:13px;font-weight:600;margin-left:6px}
.tt-kp-gids{letter-spacing:.3px;text-transform:none;color:#cb9500!important;font-size:13px;display:inline-flex;align-items:center;gap:5px;height:44px;margin:-12px 0;text-decoration:none!important}
.tt-kp-gids svg{width:16px;height:16px}
.tt-kp-kleuren{display:flex;flex-wrap:wrap;margin:0 0 10px -9px}
.tt-kp-kleur{width:44px;height:44px;display:grid;place-items:center;background:none!important;border:0!important;padding:0!important;margin:0!important;min-height:0!important;cursor:pointer;box-shadow:none!important}
.tt-kp-kleur i{display:block;width:26px;height:26px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background-size:cover;background-position:center;transition:box-shadow .15s}
.tt-kp-kleur.aan i{box-shadow:0 0 0 2px #141414,0 0 0 3.5px #cb9500}
.tt-kp-kleur:disabled{cursor:default}
.tt-kp-kleur:disabled{position:relative!important}
.tt-kp-kleur:disabled i{opacity:.5}
.tt-kp-kleur:disabled::after{content:"";position:absolute;left:50%;top:50%;width:32px;height:2px;border-radius:1px;background:#cfcfcf;transform:translate(-50%,-50%) rotate(-45deg)}
.tt-kp-paneel .tt-kp-kleur:disabled::after{width:28px}
.tt-kp-maten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tt-kp-maten.lang{grid-template-columns:repeat(2,minmax(0,1fr))}
.tt-kp-maat{position:relative;min-height:46px!important;height:46px!important;max-height:none!important;padding:6px 4px!important;margin:0!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:8px!important;background:transparent!important;color:#fff!important;font-family:inherit!important;font-weight:700!important;font-size:14px!important;line-height:1.2!important;text-transform:none!important;letter-spacing:0!important;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;box-shadow:none!important;transition:border-color .12s,background .12s}
.tt-kp-maten.lang .tt-kp-maat,.tt-kp-maat.met-prijs{height:auto!important;min-height:52px!important}
.tt-kp-maat small{display:block;font-size:11px;font-weight:400;color:#a9a9a9;margin-top:2px}
.tt-kp-maat:hover:not(:disabled){border-color:#fff!important}
.tt-kp-maat:disabled{color:#6d6d6d!important;border-color:rgba(255,255,255,.1)!important;text-decoration:line-through;cursor:default}
.tt-kp-maat.bezig{background:#cb9500!important;border-color:#cb9500!important;color:#0d0d0d!important}
.tt-kp-maat.bezig::after{content:"";position:absolute;right:6px;top:6px;width:10px;height:10px;border-radius:50%;border:2px solid rgba(13,13,13,.35);border-top-color:#0d0d0d;animation:tt-kp-draai .7s linear infinite}
.tt-kp-kiezer.wacht .tt-kp-maat:not(.bezig){opacity:.45;pointer-events:none}
@keyframes tt-kp-draai{to{transform:rotate(360deg)}}
.tt-kp-hint{font-size:12px;color:#8d8d8d;margin-top:10px;text-align:center}
.tt-kp-fout{font-size:13px;color:#ff8a7a;margin-top:10px;text-align:center}
.tt-kp-fout a{color:#cb9500!important;text-decoration:underline}

/* ---------- het blad van onderen (telefoon en tablet) ---------- */
.tt-kp-achter{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:100000;opacity:0;pointer-events:none;transition:opacity .25s}
.tt-kp-blad{position:fixed;left:0;right:0;bottom:0;z-index:100001;background:#141414;border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);max-height:88vh;overflow:auto;padding:8px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.5)}
html.tt-kp-open .tt-kp-achter{opacity:1;pointer-events:auto}
html.tt-kp-open .tt-kp-blad{transform:none}
.tt-kp-greep{width:40px;height:4px;border-radius:2px;background:#444;margin:2px auto 10px}
.tt-kp-kop{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:14px}
.tt-kp-kop img{width:46px;height:61px;object-fit:cover;border-radius:6px;flex:none}
.tt-kp-kop .t{flex:1;min-width:0}
.tt-kp-kop .t div{font-family:Poppins,Arial,sans-serif;font-weight:500;font-size:15px;line-height:20px;color:#fff}
.tt-kp-kop .t span{color:#cb9500;font-weight:600;font-size:14px}
.tt-kp-kop .t span del{color:#8a8a8a;font-weight:400;margin-right:6px}
.tt-kp-kop .t span ins{text-decoration:none}
.tt-kp-sluit{width:44px;height:44px;display:grid;place-items:center;color:#cfcfcf;flex:none;background:none!important;border:0!important;padding:0!important;margin:0!important;min-height:0!important;cursor:pointer;box-shadow:none!important}
.tt-kp-sluit svg{width:20px;height:20px}
@media (min-width:768px){ .tt-kp-blad{left:50%;right:auto;width:520px;margin-left:-260px} }

/* bevestiging in het blad */
.tt-kp-klaar{text-align:center;padding:6px 0 2px}
.tt-kp-klaar .vink{width:52px;height:52px;border-radius:50%;background:#cb9500;color:#0d0d0d;display:grid;place-items:center;margin:4px auto 10px}
.tt-kp-klaar .vink svg{width:26px;height:26px}
.tt-kp-klaar h3{font-family:Poppins,Arial,sans-serif;font-weight:600;font-size:18px;margin:0 0 4px;color:#fff}
.tt-kp-klaar p{margin:0 0 16px;color:#b5b5b5;font-size:14px}
.tt-kp-goud{display:grid!important;place-items:center;height:50px;background:#cb9500!important;color:#0d0d0d!important;font-weight:700;text-transform:uppercase;letter-spacing:.4px;font-size:14px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);width:100%;text-decoration:none!important}
.tt-kp-lijn{display:grid;place-items:center;height:48px;border:1px solid rgba(255,255,255,.3)!important;border-radius:8px!important;margin-top:10px;width:100%;font-weight:600!important;font-size:14px!important;background:transparent!important;color:#fff!important;cursor:pointer;text-transform:none!important;padding:0!important;box-shadow:none!important}
.tt-kp-terug{display:inline-flex;align-items:center;gap:6px;height:44px;color:#9d9d9d!important;font-size:13px!important;margin-top:4px;background:none!important;border:0!important;cursor:pointer;padding:0 6px!important;text-transform:none!important;box-shadow:none!important}
.tt-kp-terug svg{width:15px;height:15px}

/* ---------- paneel over de onderkant van de foto (computer) ---------- */
.tt-kp-paneel{position:absolute;left:0;right:0;bottom:0;z-index:7;background:rgba(13,13,13,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:12px;transform:translateY(102%);transition:transform .28s cubic-bezier(.2,.8,.2,1);border-top:1px solid rgba(255,255,255,.1)}
.tt-kp-kaart.tt-kp-open .tt-kp-paneel{transform:none}
.tt-kp-paneel .tt-kp-sluit{position:absolute;top:2px;right:2px}
.tt-kp-paneel .tt-kp-maten{gap:6px}
.tt-kp-paneel .tt-kp-maat{min-height:44px!important;height:44px!important;font-size:13px!important}
.tt-kp-paneel .tt-kp-maten.lang .tt-kp-maat,.tt-kp-paneel .tt-kp-maat.met-prijs{height:auto!important;min-height:48px!important}
.tt-kp-paneel .tt-kp-kleuren{margin-bottom:6px}
.tt-kp-paneel .tt-kp-kleur i{width:22px;height:22px}

/* ---------- melding na toevoegen (computer, en een vlag op elk scherm) ---------- */
.tt-kp-melding{position:fixed;left:12px;right:12px;bottom:72px;z-index:100002;background:#f2f2f2;color:#0d0d0d;border-radius:10px;padding:8px 8px 8px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);transform:translateY(20px);opacity:0;pointer-events:none;transition:all .25s;font-family:Lato,Arial,sans-serif}
.tt-kp-melding.aan{transform:none;opacity:1;pointer-events:auto}
.tt-kp-melding svg{width:20px;height:20px;color:#2e7d32;flex:none}
.tt-kp-melding .t{flex:1;font-size:13px;line-height:1.3;min-width:0}
.tt-kp-melding .t b{display:block;font-size:14px}
.tt-kp-melding a{background:#0d0d0d;color:#fff!important;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.4px;height:44px;padding:0 14px;display:grid;place-items:center;border-radius:6px;flex:none;text-decoration:none!important}
.tt-kp-melding.fout svg{color:#c0392b}
@media (min-width:1025px){ .tt-kp-melding{left:auto;right:24px;top:96px;bottom:auto;width:380px} }

/* 06-10-2026 (variant A, keuze Martijn): de zijwagen gaat meteen open bij de tik, met onderaan een tijdelijke regel tot de server klaar is;
   opgemaakt als de echte regel van de zijwagen (Poppins 16/22,4 gewicht 500, foto 65x87 met hoek 8, rand wit .15).
   Wit voor het laden, want goud is voor prijs en koopknoppen. */
.tt-kp-zw-regel{display:flex!important;gap:15px;align-items:flex-start;padding:15px!important;margin:0!important;list-style:none!important;border-bottom:1px solid rgba(255,255,255,.15);font-family:Lato,Arial,Helvetica,sans-serif;text-align:left}
.tt-kp-zw-regel img{width:65px!important;height:87px!important;object-fit:cover;border-radius:8px;flex:none;margin:0!important}
.tt-kp-zw-regel .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tt-kp-zw-regel b{font-family:Poppins,Arial,Helvetica,sans-serif;font-weight:500;font-size:16px;line-height:22.4px;color:#fff}
.tt-kp-zw-regel span{font-size:14px;line-height:20px;color:rgba(255,255,255,.8)}
.tt-kp-zw-regel em{font-style:normal;font-size:14px;line-height:20px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:8px;margin-top:6px}
.tt-kp-zw-regel i{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.22);border-top-color:#f2f2f2;flex:none;animation:ttkpzwdraai .8s linear infinite}
.tt-kp-zw-regel.fout em{color:#ff8a7a;display:block}
.tt-kp-zw-regel.fout i{display:none}
.tt-kp-zw-regel a{color:#fff!important;text-decoration:underline!important}
@keyframes ttkpzwdraai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.tt-kp-zw-regel i{animation:none}}