/* Stuctuur: eigen branche-onderdelen (afwerkingskiezer en de opbouw van beton ciré met Beal Mortex) */
.stc-afw .afw-kaart{background:var(--wit);border-radius:var(--r-kaart);box-shadow:0 24px 50px -24px rgba(var(--ink-rgb),.35);
  padding:clamp(16px,2.6vw,32px);max-width:1120px;margin-inline:auto;text-align:center}
.afw-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(18px,2.4vw,28px)}
.afw-tab{font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:var(--tint);border:1px solid rgba(var(--ink-rgb),.14);
  border-radius:999px;padding:10px 18px;cursor:pointer;transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.afw-tab:hover{border-color:var(--accent)}
.afw-tab.actief{background:var(--ink);color:#fff;border-color:var(--ink)}
.afw-panelen{display:grid}
.afw-paneel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,3.5vw,44px);align-items:center;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s linear .45s}
.afw-paneel.actief{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.afw-beeld{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1000/760;background:var(--tint2)}
.afw-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.afw-staal{position:absolute;right:14px;bottom:14px;width:74px;height:74px;border-radius:50%;border:4px solid #fff;
  box-shadow:0 10px 24px -8px rgba(0,0,0,.45)}
.afw-staal-glad{background:linear-gradient(135deg,#f4f3f0,#dcdad5)}
.afw-staal-spack{background:radial-gradient(circle,rgba(0,0,0,.14) 1px,transparent 1.6px) 0 0/5px 5px,radial-gradient(circle,rgba(255,255,255,.7) 1px,transparent 1.6px) 2px 2px/7px 7px,#e7e5e0}
.afw-staal-sier{background:radial-gradient(circle,rgba(0,0,0,.22) 1.4px,transparent 2px) 0 0/8px 8px,radial-gradient(circle,rgba(255,255,255,.6) 1.5px,transparent 2.2px) 3px 4px/9px 9px,#d9d4ca}
.afw-staal-mortex{background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.35),transparent 55%),radial-gradient(ellipse at 70% 75%,rgba(0,0,0,.18),transparent 60%),#9c9993}
.afw-staal-saus{background:linear-gradient(180deg,#fbfbfa,#efeeec)}
.afw-tekst{text-align:center;min-width:0}
.afw-tekst h3{font-family:'Oswald','Montserrat',Arial,sans-serif;font-size:28px;font-weight:500;color:var(--ink)}
.afw-tekst p{margin-top:10px;color:var(--tekst)}
.afw-punten{list-style:none;padding:0;margin:18px auto 0;width:fit-content;text-align:left;display:grid;gap:9px}
.afw-punten li{display:flex;align-items:flex-start;gap:10px;color:var(--ink);font-weight:600}
.afw-punten li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:#2e9e5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat}
.afw-actie{margin-top:clamp(20px,2.6vw,30px)}
.afw-noot{margin-top:12px;font-size:13.5px;color:var(--tekst)}
@media(max-width:900px){.afw-paneel{grid-template-columns:minmax(0,1fr)}}
@media(max-width:480px){.afw-tab{font-size:13.5px;padding:9px 14px}}

.stc-opbouw .opbouw{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;max-width:1060px;margin-inline:auto}
.opbouw-doorsnede{border-radius:var(--r-kaart);overflow:hidden;box-shadow:0 24px 50px -24px rgba(0,0,0,.45);background:#8a8780}
.opbouw-doorsnede .laag{position:relative;opacity:0;transform:translateY(24px);
  transition:opacity .85s var(--ease),transform .85s var(--ease),filter .45s var(--ease)}
.opbouw.is-open .laag{opacity:1;transform:none}
.opbouw.is-open .laag[data-laag="3"]{transition-delay:0ms}
.opbouw.is-open .laag[data-laag="2"]{transition-delay:260ms}
.opbouw.is-open .laag[data-laag="1"]{transition-delay:520ms}
.opbouw.is-open .laag[data-laag="0"]{transition-delay:780ms}
.laag-coat{height:22px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.12)),#b9b6b0}
.laag-kleur{height:40px;background:radial-gradient(ellipse at 20% 40%,rgba(255,255,255,.25),transparent 50%),radial-gradient(circle,rgba(0,0,0,.08) 1px,transparent 1.4px) 0 0/4px 4px,#a29f98}
.laag-tech{height:46px;background:radial-gradient(circle,rgba(0,0,0,.2) 1.3px,transparent 1.9px) 0 0/7px 7px,radial-gradient(circle,rgba(255,255,255,.35) 1.2px,transparent 1.8px) 3px 3px/9px 9px,#7c7a74}
.laag-onder{height:150px;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 38px),repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 76px),#d9d6cf}
.opbouw-doorsnede.focus .laag{filter:saturate(.4) brightness(.78)}
.opbouw-doorsnede.focus .laag.aan{filter:none}
.opbouw-lijst{list-style:none;padding:0;margin:0;counter-reset:laag;display:grid;gap:10px}
.opbouw-lijst li{counter-increment:laag;background:var(--wit);border-radius:14px;padding:14px 18px;text-align:center;cursor:default;
  border:1px solid transparent;transition:border-color .45s var(--ease),box-shadow .45s var(--ease)}
.opbouw-lijst li::before{content:counter(laag);display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;
  background:var(--accent);color:var(--op-accent);font-weight:700;font-size:14px}
.opbouw-lijst li b{display:block;color:var(--ink)}
.opbouw-lijst li span{display:block;color:var(--tekst);font-size:14.5px;margin-top:2px}
.opbouw-lijst li.aan{border-color:var(--accent);box-shadow:0 10px 26px -12px rgba(var(--accent-rgb),.5)}
@media(max-width:900px){.stc-opbouw .opbouw{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion: reduce){.opbouw-doorsnede .laag{opacity:1;transform:none;transition:none}.afw-paneel{transition:none}}
.no-js .opbouw-doorsnede .laag{opacity:1;transform:none}
@media(max-width:640px){.product-hero .binnen>div{min-width:0}.product-hero h1{font-size:clamp(28px,8.6vw,44px);overflow-wrap:break-word}}