/* Light & Shade storefront: product.css
   Kooppaneel van de productpagina (opties, uitklapblokken, levertijd,
   knoppen, merk) en de vergelijkpagina. Laadt na style.css. */

:root{ --ok:#3f8f5a; --warn:#d98a2b; --card:#ffffff; --cardline:#ececec; }

/* galerij links blijft zoals hij was; kolommen iets anders verdeeld */
.product.pb{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3.5rem;align-items:start}
.gallery-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.gallery-thumbs button{width:72px;height:72px;padding:0;background:#fff;border:1px solid rgba(0,0,0,.12);cursor:pointer}
.gallery-thumbs button.is-on{border-color:#111}
.gallery-thumbs img{width:100%;height:100%;object-fit:contain;display:block}

/* kop */
.pb-info{max-width:560px}
.pb-badge{display:inline-block;background:var(--ok);color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;margin-bottom:.9rem}
.pb-brand{display:block;color:var(--accent-dark);font-size:1.7rem;font-weight:500;line-height:1.1}
.pb-brand:hover{color:var(--accent)}
.pb-title{font-size:2.1rem;font-weight:500;margin:.2rem 0 .5rem;line-height:1.15}
.pb-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .6rem;font-size:1.35rem}
.pb-price s{color:#999;font-size:1.05rem}
.pb-price strong{font-weight:500;color:var(--ink)}
.pb-price s + strong{color:var(--ok)}
.pb-price small{font-size:.8rem;color:var(--muted)}
.pb-ref{color:var(--muted);font-size:.82rem;margin:.35rem 0 1.6rem}

/* kaart met opties */
.pb-card,.pb-acc:not(.pb-acc-flat){background:var(--card);border:1px solid var(--cardline);border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.pb-card{padding:1.2rem 1.4rem .4rem;margin-bottom:1rem}
.pb-axis{margin-bottom:1.1rem}
.pb-axis-label{font-size:.82rem;color:var(--ink);margin-bottom:.55rem}
.pb-axis-label span{color:var(--muted);margin-left:.35rem}
.pb-opts{display:flex;flex-wrap:wrap;gap:.45rem}
.pb-opt{padding:.45rem .85rem;border:1px solid var(--line);border-radius:999px;font-size:.88rem;background:#fff;transition:border-color .12s}
.pb-opt:hover{border-color:var(--ink)}
.pb-opt.is-current{border-color:var(--ink);background:var(--ink);color:#fff}
.pb-opt.is-off{color:#bbb;text-decoration:line-through;pointer-events:none}

/* kleurstalen (attribuut met input_type swatch en een hex per waarde) */
.pb-opts.is-swatch{gap:.55rem}
.pb-opts.is-swatch .pb-opt{width:28px;height:28px;padding:0;border-radius:50%;background:var(--sw);border:1px solid rgba(0,0,0,.15);position:relative}
.pb-opts.is-swatch .pb-opt.is-current{outline:1.5px solid var(--ink);outline-offset:3px;background:var(--sw)}
.pb-opts.is-swatch .pb-opt.is-off{opacity:.3;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* uitklapblokken */
.pb-acc{margin-bottom:1rem}
.pb-acc > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:1.1rem 1.4rem;font-size:.98rem}
.pb-acc > summary::-webkit-details-marker{display:none}
.pb-acc-flat{border-top:1px solid var(--cardline);margin:0 -1.4rem}
.pb-acc-flat > summary{padding:1rem 1.4rem}
.pb-plus{margin-left:auto;width:14px;height:14px;position:relative;flex:0 0 auto}
.pb-plus::before,.pb-plus::after{content:"";position:absolute;left:0;top:6px;width:14px;height:1.5px;background:var(--muted);transition:transform .15s}
.pb-plus::after{transform:rotate(90deg)}
.pb-acc[open] > summary .pb-plus::after{transform:rotate(0)}
.pb-acc-body{padding:0 1.4rem 1.2rem}
.pb-ico{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:.85rem;font-weight:600;line-height:1;flex:0 0 auto}
.pb-ico svg{width:20px;height:20px}
.pb-ico-bulb{border:0}
.pb-acc.is-required{border-color:#f0d3b4;background:#fffaf4}
.pb-acc.is-required .pb-ico{border-color:var(--warn);color:var(--warn)}
.pb-help{margin:0 0 .9rem;font-size:.88rem;line-height:1.5;color:#555}
.pb-sub{margin:1rem 0 .4rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.pb-rows{display:flex;flex-direction:column;max-height:360px;overflow:auto;border-top:1px solid var(--cardline)}
.pb-row{display:grid;grid-template-columns:52px 1fr auto;gap:.8rem;align-items:center;padding:.55rem 0;border-bottom:1px solid var(--cardline)}
.pb-row:hover .pb-row-name{color:var(--accent-dark)}
.pb-row-img{width:52px;height:52px;background:var(--soft)}
.pb-row-img img{width:100%;height:100%;object-fit:contain}
.pb-row-name{font-size:.88rem;line-height:1.3}
.pb-row-price{font-size:.88rem;white-space:nowrap}

/* tabel met alle uitvoeringen */
.pb-vtable-wrap{max-height:340px;overflow:auto;border:1px solid var(--cardline)}
.pb-vtable{width:100%;border-collapse:collapse;font-size:.82rem}
.pb-vtable th{position:sticky;top:0;background:var(--soft);text-align:left;font-weight:500;padding:.5rem .6rem;white-space:nowrap}
.pb-vtable td{padding:.45rem .6rem;border-top:1px solid var(--cardline)}
.pb-vtable .num{text-align:right;white-space:nowrap}
.pb-vtable tbody tr{cursor:pointer}
.pb-vtable tbody tr:hover{background:#fafafa}
.pb-vtable tr.is-current{background:#fdf1ec}
.pb-vtable a{text-decoration:underline;text-underline-offset:2px}

/* levertijd met i-knop */
.pb-lead{display:flex;align-items:center;gap:.5rem;margin:1.4rem 0 .7rem;font-size:.92rem}
.pb-check{width:22px;height:22px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:0 0 auto}
.pb-check svg{width:14px;height:14px}
.pb-lead-link{border:0;background:none;padding:0;font:inherit;color:var(--ok);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.pb-i{width:18px;height:18px;border-radius:50%;border:1px solid var(--ok);color:var(--ok);background:none;font:600 .7rem/1 Georgia,serif;cursor:pointer;padding:0}

/* knoppen */
.pb-actions{display:flex;gap:.7rem;align-items:stretch}
.pb-buy{flex:1;display:flex;align-items:center;justify-content:center;gap:.7rem;background:var(--ink);color:#fff;border:0;border-radius:999px;
  padding:1.05rem 1.5rem;font:500 1.1rem/1 inherit;font-family:inherit;cursor:pointer;transition:background .15s}
.pb-buy:hover{background:#1f1f1f}
.pb-buy svg{width:22px;height:22px}
.pb-cmp{width:58px;flex:0 0 58px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink);background:#fff;aspect-ratio:1}
.pb-cmp svg{width:22px;height:22px}
.pb-cmp:hover{border-color:var(--ink)}
.pb-cmp.is-on{background:var(--accent);border-color:var(--accent)}
.pb-quote{width:100%;margin-top:.7rem;padding:.95rem 1.5rem;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font:500 1rem/1 inherit;font-family:inherit;cursor:pointer}
.pb-quote:hover{background:var(--accent);border-color:var(--accent)}

/* voordelen en merk */
.pb-usp{list-style:none;margin:1.6rem 0 0;padding:0;font-size:.9rem;display:flex;flex-direction:column;gap:.4rem}
.pb-usp li{padding-left:1.5rem;position:relative}
.pb-usp li::before{content:"";position:absolute;left:.2rem;top:.3em;width:.45rem;height:.75rem;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pb-brandbox{display:flex;align-items:center;gap:1.2rem;margin-top:1.4rem}
.pb-logo{width:130px;height:130px;border-radius:50%;background:#efede8;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.pb-logo img{width:72%;height:72%;object-fit:contain;mix-blend-mode:multiply}
.pb-logo b{font-size:1.05rem;text-align:center;padding:0 .8rem}
.pb-brandtxt{font-size:.92rem;border-bottom:1px solid var(--line)}
.pb-brandbox:hover .pb-brandtxt{color:var(--accent-dark)}
.to-info{display:inline-block;margin-top:1.6rem;font-size:.92rem;text-decoration:underline;text-underline-offset:3px}

/* omschrijving en details onderaan */
.pinfo{max-width:76rem;margin:3rem auto;padding:0 1.25rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr));gap:2.5rem 4rem;scroll-margin-top:4rem}
.pinfo h2{font-weight:500;font-size:1.45rem;margin:0 0 1.1rem}
.pinfo-text{line-height:1.7;color:#333}.pinfo-text p{margin:0 0 .8rem}
.pinfo-table{width:100%;border-collapse:collapse;font-size:.95rem}
.pinfo-table tr:nth-child(odd){background:#f7f7f5}
.pinfo-table th{text-align:left;font-weight:600;padding:.55rem .7rem;width:45%;vertical-align:top}
.pinfo-table td{padding:.55rem .7rem;vertical-align:top}

/* vensters */
.pb-dlg{border:0;border-radius:8px;padding:2rem 2.2rem;max-width:min(36rem,92vw);box-shadow:0 20px 60px rgba(0,0,0,.25);color:var(--ink)}
.pb-dlg::backdrop{background:rgba(0,0,0,.35)}
.pb-dlg h2{font-size:1.5rem;margin:0 0 1rem}
.pb-dlg p{line-height:1.6;margin:0 0 .9rem;font-size:.95rem}
.pb-dlg-x{position:absolute;top:.6rem;right:.8rem;border:0;background:none;font-size:1.6rem;cursor:pointer;color:#777}
.pb-dlg-form{max-width:min(40rem,94vw)}
.pb-dlg form{display:flex;flex-direction:column;gap:.8rem}
.pb-dlg label{display:flex;flex-direction:column;gap:.3rem;font-size:.85rem}
.pb-dlg input,.pb-dlg textarea{font:inherit;padding:.6rem .7rem;border:1px solid #d6d6d6;border-radius:4px}
.pb-dlg input:focus,.pb-dlg textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.pb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.pb-f-prod{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;background:var(--soft);padding:.7rem .9rem;border-radius:4px;font-size:.9rem}
.pb-f-prod span{color:var(--muted);width:100%;font-size:.75rem}
.pb-f-prod small{color:var(--muted)}
.pb-f-msg{color:#b3261e;min-height:1em;margin:0}
.pb-f-ok{font-size:1rem;color:var(--ok)}
.pb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pb-send{flex:0 0 auto;align-self:flex-start;padding:.95rem 2rem;font-size:1rem}

/* vergelijkbalk */
.pb-cmpbar{position:fixed;right:1.2rem;bottom:1.2rem;z-index:30;background:var(--ink);color:#fff;padding:.8rem 1.3rem;border-radius:999px;font-size:.92rem;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.pb-cmpbar:hover{background:var(--accent);color:var(--ink)}

/* vergelijkpagina */
.cmp-page{max-width:var(--wrap);margin:0 auto;padding:0 2rem 2rem}
.cmp-tools{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin:-.5rem 0 1.5rem;font-size:.9rem;color:var(--muted)}
.cmp-tools a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line)}
.cmp{border-collapse:collapse;width:100%;min-width:640px;font-size:.92rem}
.cmp th,.cmp td{padding:.65rem .9rem;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.cmp tbody th{width:200px;font-weight:500;background:var(--soft);position:sticky;left:0}
.cmp thead td{text-align:center}
.cmp-img{display:block;aspect-ratio:1;max-width:180px;margin:0 auto .6rem;background:var(--soft)}
.cmp-img img{width:100%;height:100%;object-fit:contain}
.cmp-brand{display:block;color:var(--accent-dark);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.cmp-name{display:block;font-weight:500;margin:.2rem 0 .5rem}
.cmp-links{display:flex;justify-content:center;gap:1rem;font-size:.82rem}
.cmp-links a{text-decoration:underline;text-underline-offset:2px}
.cmp tr.is-same{display:none}
.cmp.show-all tr.is-same{display:table-row}

@media(max-width:900px){
  .product.pb{grid-template-columns:1fr;gap:2rem}
  .pb-info{max-width:none}
  .pb-title{font-size:1.7rem}
  .pb-brand{font-size:1.35rem}
  .pb-grid2{grid-template-columns:1fr}
  .pb-dlg{padding:1.6rem 1.3rem}
  .cmp-page{padding:0 1rem 2rem}
  .cmp tbody th{width:130px}
}