/* =========================================================
   Haeswijk-Digital Store (haeswijk-digital.store)
   Bovenop style.css: dezelfde letter en knoppen, met een eigen kleur per seizoen.
   ========================================================= */

:root {
    /* dezelfde kleuren als de PDF's van Lentewijk, Zomerwijk, Herfstwijk en Kerstwijk */
    --lente: #3d3463; --lente-licht: #f1e5ea; --lente-accent: #eaa2b9;
    --zomer: #0e4966; --zomer-licht: #f5e8cf; --zomer-accent: #efab2b;
    --herfst: #55301b; --herfst-licht: #f0e0cc; --herfst-accent: #e8a54a;
    --winter: #1e3a2b; --winter-licht: #efe4d0; --winter-accent: #c9a24a;
}

.pagina-store { background: var(--papier); }

/* Kop: het woord Store naast het merk */
.st-merk__store {
    margin-left: 8px; padding: 3px 9px 4px; border-radius: 999px; background: var(--goud); color: var(--inkt);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
.st-kop .menu a[aria-current="page"] { color: var(--goud); }

/* ---------- Held ---------- */
.st-held {
    position: relative; overflow: hidden; isolation: isolate; color: var(--wit);
    padding: calc(150px + env(safe-area-inset-top, 0px)) var(--rand) clamp(90px, 10vw, 130px);
    background:
        radial-gradient(40% 60% at 12% 18%, rgba(47, 125, 74, 0.55), transparent 70%),
        radial-gradient(40% 60% at 88% 22%, rgba(246, 178, 26, 0.45), transparent 70%),
        radial-gradient(45% 60% at 85% 95%, rgba(180, 71, 26, 0.55), transparent 70%),
        radial-gradient(45% 60% at 10% 95%, rgba(29, 58, 107, 0.75), transparent 70%),
        var(--nacht);
}
.st-held__binnen { max-width: var(--breedte); margin: 0 auto; display: grid; justify-items: start; gap: 24px; }
.st-held h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); font-stretch: 110%; max-width: 15ch; }
.st-held .held__intro { margin-top: 0; }
.st-held--lente { background: radial-gradient(60% 80% at 85% 10%, rgba(234, 162, 185, 0.45), transparent 65%), linear-gradient(160deg, #221c3d, var(--lente)); }
.st-held--zomer { background: radial-gradient(60% 80% at 85% 15%, rgba(239, 171, 43, 0.55), transparent 65%), linear-gradient(160deg, #062a3c, var(--zomer)); }
.st-held--herfst { background: radial-gradient(60% 80% at 85% 15%, rgba(209, 140, 44, 0.55), transparent 65%), linear-gradient(160deg, #2c170b, var(--herfst)); }
.st-held--winter { background: radial-gradient(60% 80% at 85% 15%, rgba(201, 162, 74, 0.4), transparent 65%), linear-gradient(160deg, #0f2219, var(--winter)); }
.st-held--zomer h1 em, .st-held--herfst h1 em { color: var(--wit); -webkit-text-fill-color: currentColor; background: none; }

/* Momenten als chips */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; max-width: 46rem; }
.st-chip {
    display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.24);
    color: var(--wit); font-weight: 600; font-size: 0.92rem; text-decoration: none;
    transition: background-color 0.25s, transform 0.3s var(--zacht-uit);
}
a.st-chip:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-2px); }
.st-chip::before { content: ""; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--goud); }
.st-chip--lente::before { background: var(--lente-accent); }
.st-chip--zomer::before { background: var(--zomer-accent); }
.st-chip--herfst::before { background: var(--herfst-accent); }
.st-chip--winter::before { background: #8fb8e8; }
.st-chips--vast .st-chip::before { background: currentColor; opacity: 0.6; }

/* ---------- De vier seizoenen ---------- */
.st-seizoenen { padding: 0 var(--rand); margin-top: clamp(-70px, -6vw, -44px); position: relative; z-index: 2; }
.st-seizoenen__binnen { max-width: var(--breedte); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-seizoen {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 300px;
    padding: 26px; border-radius: var(--rond-groot); color: var(--wit); text-decoration: none;
    box-shadow: 0 30px 60px -36px rgba(20, 6, 10, 0.55);
    transition: transform 0.45s var(--zacht-uit), box-shadow 0.45s var(--zacht-uit);
}
.st-seizoen:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(20, 6, 10, 0.65); }
.st-seizoen::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; right: -60px; top: -60px; border-radius: 50%; opacity: 0.3; }
.st-seizoen--lente { background: linear-gradient(160deg, #5a4d8c, var(--lente)); isolation: isolate; }
.st-seizoen--lente::after { background: var(--lente-accent); }
.st-seizoen--zomer { background: linear-gradient(160deg, #1a6f96, var(--zomer)); isolation: isolate; }
.st-seizoen--zomer::after { background: var(--zomer-accent); }
.st-seizoen--herfst { background: linear-gradient(160deg, #8a4a26, var(--herfst)); isolation: isolate; }
.st-seizoen--herfst::after { background: var(--herfst-accent); }
.st-seizoen--winter { background: linear-gradient(160deg, #2f5a43, var(--winter)); isolation: isolate; }
.st-seizoen--winter::after { background: var(--winter-accent); }
.st-seizoen--sport { grid-column: 1 / -1; min-height: 0; background: linear-gradient(160deg, #1d1d2b, #3a3550); isolation: isolate; }
.st-seizoen--sport::after { background: var(--goud); }
.st-seizoen__maanden { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.st-seizoen h2 { font-size: clamp(1.9rem, 2.6vw, 2.5rem); font-stretch: var(--breed); letter-spacing: -0.035em; }
.st-seizoen p { font-weight: 600; }
.st-seizoen ul { display: grid; gap: 4px; margin-top: auto; font-size: 0.92rem; opacity: 0.9; }
.st-seizoen li::before { content: "· "; }
.st-seizoen__pijl { position: absolute; right: 22px; bottom: 22px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wit); color: var(--inkt); transition: transform 0.4s var(--zacht-uit); }
.st-seizoen__pijl .icoon { width: 18px; height: 18px; }
.st-seizoen:hover .st-seizoen__pijl { transform: rotate(45deg); }
@media (max-width: 1000px) { .st-seizoenen__binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) {
    .st-seizoenen__binnen { grid-template-columns: 1fr; }
    .st-seizoen { min-height: 0; padding: 22px 22px 76px; }
}

/* ---------- Zo werkt het ---------- */
.st-zo { padding: clamp(64px, 8vw, 104px) var(--rand); }
.st-zo__binnen { max-width: var(--breedte); margin: 0 auto; display: grid; gap: 24px; }
.st-zo h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.st-zo ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.st-zo li { display: flex; gap: 14px; align-items: flex-start; color: var(--zacht); }
.st-zo li b { color: var(--inkt); }
.st-zo li p { padding-top: 6px; }
.st-zo li span { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--nacht); color: var(--goud); font-weight: 800; }
@media (max-width: 760px) { .st-zo ol { grid-template-columns: 1fr; } }

/* ---------- Seizoenpagina ---------- */
.st-collectie { padding: 0 var(--rand) clamp(64px, 8vw, 104px); margin-top: clamp(-60px, -5vw, -36px); position: relative; z-index: 2; }
.st-collectie__binnen {
    max-width: var(--breedte); margin: 0 auto; display: grid; gap: 24px; padding: clamp(24px, 4vw, 48px);
    background: var(--wit); border-radius: var(--rond-groot); box-shadow: 0 30px 60px -36px rgba(20, 6, 10, 0.45);
}
.st-collectie h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.st-binnenkort { display: grid; gap: 12px; justify-items: start; padding: clamp(22px, 3vw, 36px); border-radius: var(--rond); border: 2px dashed var(--lijn); }
.st-binnenkort__label { padding: 5px 12px; border-radius: 999px; background: var(--goud); color: var(--inkt); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.st-binnenkort h3 { font-size: 1.5rem; font-stretch: var(--breed); }
.st-binnenkort p { color: var(--zacht); max-width: 44rem; }
.st-binnenkort a { color: var(--rood); font-weight: 700; }
.st-binnenkort__lijst { display: grid; gap: 8px; margin-top: 6px; }
.st-binnenkort__lijst li { display: grid; gap: 2px; padding: 12px 16px; border-radius: 14px; background: var(--papier); }
.st-binnenkort__lijst span { color: var(--zacht); font-size: 0.95rem; }
.st-ander { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--lijn); }
.st-ander > span { margin-right: 4px; color: var(--zacht); font-weight: 600; }
.st-ander .st-chip { background: var(--papier); border-color: var(--lijn); color: var(--inkt); }
.st-ander .st-chip:hover { background: var(--wit); border-color: var(--inkt); }
.st-pagina--lente .st-binnenkort { border-color: var(--lente); }
.st-pagina--zomer .st-binnenkort { border-color: var(--zomer); }
.st-pagina--herfst .st-binnenkort { border-color: var(--herfst); }
.st-pagina--winter .st-binnenkort { border-color: var(--winter); }
.st-kop .merk__naam { white-space: nowrap; }
@media (max-width: 420px) {
    .st-kop .merk__naam { font-size: 1rem; }
    .st-merk__store { margin-left: 6px; padding: 2px 7px 3px; font-size: 0.64rem; }
}
.st-binnenkort .st-binnenkort__label { color: var(--inkt); }

/* ---------- Collecties: kaarten, pakketten, categorieën ---------- */
.st-pagina { --thema: var(--winter); --thema-licht: var(--winter-licht); --thema-accent: var(--winter-accent); }
.st-pagina--lente { --thema: var(--lente); --thema-licht: var(--lente-licht); --thema-accent: var(--lente-accent); }
.st-pagina--zomer { --thema: var(--zomer); --thema-licht: var(--zomer-licht); --thema-accent: var(--zomer-accent); }
.st-pagina--herfst { --thema: var(--herfst); --thema-licht: var(--herfst-licht); --thema-accent: var(--herfst-accent); }

.st-seizoen__aantal { position: absolute; left: 26px; bottom: 30px; font-size: 0.82rem; font-weight: 700; opacity: 0.95; }
.st-seizoen ul { margin-bottom: 34px; }

.st-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-raster > * { min-width: 0; }
@media (max-width: 1000px) { .st-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .st-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

.st-kaart { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--wit); border: 1px solid var(--lijn);
    transition: transform 0.4s var(--zacht-uit), box-shadow 0.4s var(--zacht-uit); }
.st-kaart:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(20, 6, 10, 0.45); }
.st-kaart__link { display: flex; flex-direction: column; flex: 1; color: var(--inkt); text-decoration: none; }
.st-kaart__beeld { display: block; aspect-ratio: 396 / 560; background: var(--papier); overflow: hidden; border-bottom: 1px solid var(--lijn); }
.st-kaart__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.st-kaart__tekst { display: grid; gap: 4px; padding: 12px 14px 14px; }
.st-kaart__label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--zacht); }
.st-kaart__titel { font-weight: 700; line-height: 1.25; }
.st-kaart__onder { font-size: 0.84rem; color: var(--zacht); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.st-kaart__prijs { margin-top: 4px; font-weight: 800; color: var(--rood); }
.st-kaart--gratis .st-kaart__prijs { color: var(--groen, #2f7d4a); }

.st-catnav { display: flex; flex-wrap: wrap; gap: 8px; }
.st-catnav a { padding: 9px 16px; border-radius: 999px; background: var(--papier); border: 1px solid var(--lijn); color: var(--inkt); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.st-catnav a:hover { border-color: var(--inkt); }
.st-cat { display: grid; gap: 18px; padding-top: 28px; border-top: 1px solid var(--lijn); scroll-margin-top: 90px; }
.st-cat__kop h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.st-cat__kop p { color: var(--zacht); max-width: 44rem; margin-top: 6px; }

.st-pakket { position: relative; display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); padding: 18px clamp(18px, 3vw, 28px);
    border-radius: 22px; background: var(--thema, var(--nacht)); color: var(--wit); text-decoration: none; overflow: hidden;
    transition: transform 0.4s var(--zacht-uit); }
.st-pakket:hover { transform: translateY(-3px); }
.st-pakket__stapel { position: relative; flex: none; width: 150px; height: 112px; }
.st-pakket__stapel img { position: absolute; top: 0; width: 76px; height: auto; border-radius: 6px; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.6); }
.st-pakket__stapel img:nth-child(1) { left: 0; transform: rotate(-8deg); }
.st-pakket__stapel img:nth-child(2) { left: 36px; z-index: 1; }
.st-pakket__stapel img:nth-child(3) { left: 72px; transform: rotate(8deg); z-index: 2; }
.st-pakket__tekst { display: grid; gap: 6px; flex: 1; min-width: 0; }
.st-pakket .st-kaart__label { color: var(--thema-accent, var(--goud)); }
.st-pakket__titel { font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 800; font-stretch: var(--breed); line-height: 1.2; }
.st-pakket__prijs b { font-size: 1.3rem; }
.st-pakket__prijs s { opacity: 0.6; margin-left: 6px; }
.st-pakket__prijs small { margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-weight: 700; white-space: nowrap; }
.st-pakket__pijl { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--wit); color: var(--inkt); }
.st-pakket__pijl .icoon { width: 18px; height: 18px; }
@media (max-width: 600px) {
    .st-pakket { flex-wrap: wrap; padding-right: 70px; }
    .st-pakket__stapel { width: 112px; height: 84px; }
    .st-pakket__stapel img { width: 56px; }
    .st-pakket__stapel img:nth-child(2) { left: 26px; }
    .st-pakket__stapel img:nth-child(3) { left: 52px; }
    .st-pakket__tekst { flex-basis: 100%; }
    .st-pakket__pijl { position: absolute; right: 16px; top: 16px; }
    .st-pakket__prijs small { display: inline-block; margin: 6px 0 0; }
    .st-gratisband { grid-template-columns: 110px 1fr; gap: 14px; }
}

/* De gratis PDF en 071 Clothing als banner, in dezelfde vorm als het voordeelpakket */
.st-pakket + .st-pakket { margin-top: 14px; }
.st-pakket--kleding { background: linear-gradient(120deg, #7a1020, #c8102e); }
.st-pakket--kleding .st-kaart__label { color: #f1be1a; }
.st-pakket--kleding .st-pakket__stapel img { background: #fff; }
.st-gratisband { display: grid; grid-template-columns: 140px 1fr; gap: 20px; align-items: center; padding: 14px; border-radius: 20px; background: var(--thema-licht, var(--papier)); }
.st-gratisband .st-kaart__onder { display: none; }
.st-gratisband p { color: var(--inkt); }

.st-rij { padding: clamp(48px, 6vw, 80px) var(--rand) 0; }
.st-rij--gratis { padding-bottom: 0; }
.st-rij__binnen { max-width: var(--breedte); margin: 0 auto; display: grid; gap: 20px; }
.st-rij__kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.st-rij__kop h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }

/* ---------- Productpagina ---------- */
.st-product { padding: calc(120px + env(safe-area-inset-top, 0px)) var(--rand) 0; background: linear-gradient(180deg, var(--thema) 0, var(--thema) 260px, transparent 260px); }
.st-product__binnen { max-width: var(--breedte); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.st-product__binnen > .kruimel { grid-column: 1 / -1; color: rgba(255, 255, 255, 0.75); }
.st-product__info { display: grid; gap: 14px; padding: clamp(22px, 3vw, 36px); background: var(--wit); border-radius: var(--rond-groot); box-shadow: 0 30px 60px -36px rgba(20, 6, 10, 0.45); }
.st-product__info h1 { font-size: clamp(2rem, 4vw, 3rem); font-stretch: var(--breed); line-height: 1; letter-spacing: -0.035em; }
.st-product__onder { font-size: 1.05rem; color: var(--zacht); font-style: italic; }
.st-product__feiten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.st-product__feiten li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--thema-licht); }
.st-product__feiten span { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--zacht); }
.st-product__feiten b { font-size: 0.95rem; }
.st-product__intro { color: var(--tekst); line-height: 1.6; }
.st-product__koop { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.st-product__prijs { font-size: 2rem; font-weight: 800; color: var(--inkt); display: flex; align-items: baseline; gap: 8px; }
.st-product__prijs small { font-size: 0.8rem; font-weight: 500; color: var(--zacht); }
.st-product__prijs s { font-size: 1rem; color: var(--zacht); font-weight: 600; }
.st-product__wat { display: grid; gap: 6px; color: var(--zacht); font-size: 0.95rem; }
.st-product__wat li { display: flex; gap: 8px; align-items: flex-start; }
.st-product__wat .icoon { width: 16px; height: 16px; flex: none; margin-top: 4px; color: var(--thema); stroke-width: 2.6; }
@media (max-width: 860px) {
    .st-product__binnen { grid-template-columns: 1fr; }
    .st-galerij { max-width: 420px; }
    .st-product__feiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pagina-store main > :last-child { padding-bottom: clamp(64px, 8vw, 104px); }
@media (max-width: 600px) {
    .st-gratisband { grid-template-columns: 84px 1fr; }
    .st-gratisband .st-kaart__tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Per gelegenheid, vragen en voorwaarden ---------- */
.st-gelegenheden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.st-gelegenheden > * { min-width: 0; }
.st-gelegenheid { display: grid; gap: 6px; align-content: end; min-height: 150px; padding: 22px; border-radius: 22px; color: var(--wit); text-decoration: none;
    transition: transform 0.4s var(--zacht-uit); }
.st-gelegenheid:hover { transform: translateY(-4px); }
.st-gelegenheid span { font-size: 1.2rem; font-weight: 800; font-stretch: var(--breed); line-height: 1.2; }
.st-gelegenheid small { opacity: 0.85; font-weight: 600; }
@media (max-width: 860px) { .st-gelegenheden { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .st-gelegenheden { grid-template-columns: 1fr; } .st-gelegenheid { min-height: 110px; } }
.st-tekst { display: grid; gap: 14px; max-width: 70ch; color: var(--tekst); line-height: 1.65; }
.st-vragen { display: grid; gap: 4px; }
.st-vragen > h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 8px; }
.st-vragen .vraag summary h2, .st-vragen .vraag summary h3 { font-size: 1.08rem; }
.st-voorwaarden section { display: grid; gap: 8px; }
.st-voorwaarden h2 { font-size: 1.25rem; margin-top: 10px; }
.st-held .held__intro a { color: var(--goud); }

/* ---------- Winkelwagen ---------- */
.st-kop .kop__binnen { justify-content: flex-start; }
.st-kop .merk { margin-right: auto; }
.st-kop .menu { order: 2; }
.st-wagenknop { order: 3; position: relative; display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--lijn-licht); background: rgba(255, 255, 255, 0.06); color: var(--wit); }
.st-wagenknop:hover { background: rgba(255, 255, 255, 0.14); }
.st-wagenknop .icoon { width: 22px; height: 22px; }
.st-wagenknop__teller { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--goud); color: var(--inkt); font-size: 0.78rem; font-weight: 800; display: grid; place-items: center; }
.st-wagenknop__teller[hidden] { display: none; }
.st-kop .menuknop { order: 4; }

.st-kaart__wagen { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 14px 14px; padding: 9px 12px; border-radius: 999px;
    border: 1.5px solid var(--inkt); background: var(--wit); color: var(--inkt); font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
    transition: background-color 0.25s, color 0.25s; }
.st-kaart__wagen .icoon { width: 16px; height: 16px; }
.st-kaart__wagen:hover { background: var(--inkt); color: var(--wit); }
.st-kaart__wagen.is-erin, .pil.is-erin { background: #e6f2e8; border-color: #2f7d4a; color: #1f5a33; }
.pil.is-erin .pil__rond { background: #2f7d4a; color: var(--wit); }
.st-product__koop .tekstlink { font-weight: 700; }

.st-melding { position: fixed; left: 50%; bottom: 20px; z-index: 70; display: flex; align-items: center; gap: 16px; width: min(560px, calc(100% - 32px));
    padding: 14px 14px 14px 20px; border-radius: 20px; background: var(--nacht); color: var(--wit); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, 140%); transition: transform 0.45s var(--zacht-uit); }
.st-melding.is-zichtbaar { transform: translate(-50%, 0); }
.st-melding p { flex: 1; font-size: 0.95rem; }
.st-melding .pil { flex: none; }

/* ---------- Afrekenen ---------- */
.st-afr__kop { padding: calc(120px + env(safe-area-inset-top, 0px)) var(--rand) 28px; background: var(--nacht); color: var(--wit); }
.st-afr__binnen { max-width: var(--breedte); margin: 0 auto; }
.st-afr__kop h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-top: 18px; }
.st-stappen { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.9rem; color: var(--licht-zacht); }
.st-stappen li { display: inline-flex; align-items: center; gap: 8px; }
.st-stappen span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--lijn-licht); font-weight: 800; font-size: 0.8rem; }
.st-stappen .is-actief { color: var(--wit); font-weight: 700; }
.st-stappen .is-actief span { background: var(--goud); border-color: var(--goud); color: var(--inkt); }
.st-afr { padding: 28px var(--rand) clamp(64px, 8vw, 104px); }
.st-afr__raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.st-afr__raster > * { min-width: 0; }
.st-afr__links { display: grid; gap: 18px; }
.st-afr__blok { padding: clamp(20px, 3vw, 30px); background: var(--wit); border-radius: var(--rond-groot); box-shadow: 0 30px 60px -36px rgba(20, 6, 10, 0.45); }
.st-afr__blokkop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.st-afr__blok h2 { font-size: 1.4rem; }
.st-afr__blokkop span { color: var(--zacht); font-weight: 600; }
.st-wagen { display: grid; }
.st-wagen__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 14px; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.st-wagen__item img { grid-row: span 2; width: 56px; height: 79px; object-fit: cover; object-position: top; border-radius: 8px; border: 1px solid var(--lijn); }
.st-wagen__item > div { display: grid; gap: 2px; }
.st-wagen__titel { color: var(--inkt); font-weight: 700; text-decoration: none; }
.st-wagen__titel:hover { color: var(--rood); }
.st-wagen__item small { color: var(--zacht); font-size: 0.82rem; }
.st-wagen__prijs { font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-wagen__weg { grid-column: 2 / 4; justify-self: start; padding: 0; border: 0; background: none; color: var(--zacht); font: inherit; font-size: 0.82rem;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.st-wagen__weg:hover { color: var(--rood); }
.st-wagen__item.is-in-pakket { opacity: 0.6; }
.st-wagen__leeg { display: grid; gap: 12px; padding: 10px 0; }
.st-wagen__leeg[hidden], .st-tip[hidden], .st-afr__klaar[hidden] { display: none; }
.st-wagen__collecties { display: flex; flex-wrap: wrap; gap: 8px; }
.st-wagen__collecties .st-chip { background: var(--papier); border-color: var(--lijn); color: var(--inkt); }
.st-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 16px; padding: 16px 18px; border-radius: 18px; background: #fdf4dc; }
.st-tip p { flex: 1 1 240px; }
.st-tip .pil { border: 1.5px solid var(--inkt); cursor: pointer; font: inherit; }
.st-zeker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 4px; }
.st-zeker li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.92rem; color: var(--zacht); }
.st-zeker b { color: var(--inkt); }
.st-zeker .icoon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #2f7d4a; stroke-width: 2.6; }
.st-afr__form { position: sticky; top: 96px; display: grid; gap: 14px; }
.st-afr__form label { display: grid; gap: 5px; font-weight: 700; font-size: 0.92rem; }
.st-afr__form label small { font-weight: 500; color: var(--zacht); }
.st-afr__form input[type="text"], .st-afr__form input[type="email"] { padding: 12px 14px; border: 1px solid var(--lijn); border-radius: 12px; font: inherit; font-weight: 500; background: var(--papier); }
.st-afr__form input:focus-visible { outline: 2px solid var(--goud); outline-offset: 1px; }
.st-afr__form .bestel__akkoord { font-weight: 500; font-size: 0.86rem; line-height: 1.45; }
.st-totaal { display: grid; gap: 6px; padding: 4px 0 12px; border-bottom: 1px solid var(--lijn); }
.st-totaal div { display: flex; justify-content: space-between; gap: 12px; color: var(--zacht); }
.st-totaal dd { font-variant-numeric: tabular-nums; }
.st-totaal__eind { color: var(--inkt) !important; font-size: 1.3rem; font-weight: 800; padding-top: 6px; }
.st-afr__knop { width: 100%; justify-content: space-between; border: 0; cursor: pointer; font: inherit; }
.st-afr__knop:disabled { opacity: 0.5; cursor: not-allowed; }
.st-afr__klein { font-size: 0.8rem; color: var(--zacht); }
.st-afr__klaar { display: grid; gap: 12px; }
@media (max-width: 900px) {
    .st-afr__raster { grid-template-columns: 1fr; }
    .st-afr__form { position: static; }
}
@media (max-width: 560px) {
    .st-zeker { grid-template-columns: 1fr; }
    .st-stappen li:nth-child(n+3) { display: none; }
}
@media (max-width: 560px) {
    .st-kaart__wagen { margin: 0 10px 10px; padding: 8px 10px; gap: 6px; font-size: 0.8rem; white-space: nowrap; }
    .st-kaart__wagen .icoon { width: 14px; height: 14px; }
    .st-melding { gap: 10px; padding: 12px 12px 12px 16px; }
    .st-melding p { font-size: 0.88rem; }
}

.st-wagen__badge { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 79px; border-radius: 8px; background: #1d6b3a; color: var(--wit);
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; }
.pagina-afrekenen .st-afr__kop { padding-top: calc(120px + env(safe-area-inset-top, 0px)); }

/* Kortingscode op de afrekenpagina */
.st-korting { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 4px 0 6px; }
.st-korting > label { font-weight: 600; }
.st-korting small { font-weight: 400; opacity: .7; }
.st-korting__rij { display: flex; gap: 8px; }
.st-korting__rij input { flex: 1; min-width: 0; width: 100%; text-transform: uppercase; letter-spacing: .04em; }
.st-korting__rij .pil { flex: none; min-height: 44px; }
.st-korting__melding { margin: 0; font-size: .9rem; }
.st-korting__melding.is-goed { color: #2f6b45; }
.st-korting__melding.is-fout { color: #a3262c; }
.st-totaal__korting dd { color: #2f6b45; font-weight: 600; }

/* ---------- Held met 3D-ring (startpagina) ---------- */
.st-held--3d { background: var(--nacht); padding-bottom: clamp(110px, 11vw, 150px); }
.st-held__twee { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(20px, 4vw, 56px); justify-items: stretch; }
.st-held__tekst { display: grid; justify-items: start; gap: 22px; }
.st-held--3d h1 { perspective: 600px; font-size: clamp(2.5rem, 4.8vw, 4.6rem); max-width: 12ch; }
.st-held--3d h1 em .woord { background: var(--verloop-goud); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.st-held__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
@media (max-width: 960px) {
    .st-held__twee { grid-template-columns: 1fr; }
    .draairing { --kaart: clamp(120px, 34vw, 170px); margin-top: 8px; }
}

/* ---------- Rij als carrousel ---------- */
.st-rij__rechts { display: flex; align-items: center; gap: 18px; }
.st-rij__schuif { --dia: minmax(200px, calc((100% - 3 * 18px) / 4)); margin: 0 -4px; }
@media (max-width: 900px) { .st-rij__schuif { --dia: minmax(180px, 42%); } }
@media (max-width: 560px) {
    .st-rij__schuif { --dia: 64%; }
    .st-rij__rechts .schuif__pijlen { display: none; }
}

/* ---------- Productpagina: slideshow ---------- */
.st-galerij { display: grid; gap: 12px; }
.st-galerij__baan { --dia: 76%; gap: 0; padding: 10px 12% 18px; scroll-padding-inline: 12%; }
.st-galerij__dia { margin: 0; padding: 0 3%; }
.st-galerij__dia img { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--wit);
    box-shadow: 0 34px 60px -30px rgba(20, 6, 10, 0.6); }
.st-galerij__balk { display: flex; align-items: center; justify-content: center; gap: 12px; }
.st-galerij__duim { display: flex; gap: 10px; }
.st-galerij__duim button { width: 58px; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: var(--wit);
    cursor: pointer; opacity: 0.6; transition: opacity 0.2s, border-color 0.2s, transform 0.2s; }
.st-galerij__duim button:hover { opacity: 1; transform: translateY(-2px); }
.st-galerij__duim button[aria-current="true"] { border-color: var(--thema-accent, var(--goud)); opacity: 1; }
.st-galerij__duim img { display: block; width: 100%; height: auto; }
.st-galerij:not(.is-klaar) .st-galerij__balk .schuif__pijl { display: none; }

/* ---------- Afrekenen: strakker ---------- */
.st-stappen--lijn { gap: 0; }
.st-stappen--lijn li { position: relative; padding-right: 46px; }
.st-stappen--lijn li:not(:last-child)::after { content: ""; position: absolute; right: 10px; top: 50%; width: 26px; height: 2px; border-radius: 2px;
    background: var(--lijn-licht); }
.st-stappen--lijn li.is-actief:not(:last-child)::after { background: var(--goud); }
.st-stappen--lijn .is-actief span { box-shadow: 0 0 0 4px rgba(241, 190, 26, 0.18); }
.st-afr__blok { border: 1px solid var(--lijn); }
.st-afr__form { gap: 12px; grid-template-columns: minmax(0, 1fr); }
.st-afr__knop span:first-child { white-space: normal; text-align: left; }
.st-afr__sub { margin-top: 10px; font-size: 1.05rem; }
.st-afr__form input[type="text"], .st-afr__form input[type="email"] {
    min-height: 48px; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; background-color: var(--papier);
    background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.st-afr__form input[type="text"]:focus, .st-afr__form input[type="email"]:focus { outline: none; border-color: var(--inkt); background-color: var(--wit);
    box-shadow: 0 0 0 4px rgba(241, 190, 26, 0.35); }
/* ingevuld en goed: een groen vinkje */
.st-afr__form input[required]:not(:placeholder-shown):valid {
    border-color: rgba(47, 125, 74, 0.55); padding-right: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7d4a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4 10-10'/%3E%3C/svg%3E"); }
.st-afr__form .bestel__akkoord { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; padding: 12px 14px; border-radius: 14px;
    background: var(--papier); cursor: pointer; transition: background 0.2s; }
.st-afr__form .bestel__akkoord:has(input:checked) { background: #e9f3ec; }
.st-afr__form .bestel__akkoord input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #2f7d4a; }
.st-totaal__eind dd { font-size: 1.6rem; letter-spacing: -0.02em; }
.st-afr__knop { min-height: 60px; font-size: 1.05rem; transition: transform 0.2s var(--zacht-uit), box-shadow 0.3s; }
.st-afr__knop:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(200, 16, 46, 0.7); }
.st-betaal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.st-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--lijn);
    font-size: 0.8rem; font-weight: 700; color: var(--zacht); background: var(--wit); }
.st-badge .icoon { width: 14px; height: 14px; }
.st-badge--ideal { color: #cc0066; border-color: rgba(204, 0, 102, 0.3); letter-spacing: 0.02em; }
.st-wagen__item.is-nieuw { animation: item-in 0.55s var(--zacht-uit) both; }
.st-wagen__item.is-nieuw:nth-child(2) { animation-delay: 0.06s; }
.st-wagen__item.is-nieuw:nth-child(3) { animation-delay: 0.12s; }
.st-wagen__item.is-nieuw:nth-child(n+4) { animation-delay: 0.18s; }
@keyframes item-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.st-wagen__item img, .st-wagen__badge { transition: transform 0.3s var(--zacht-uit); }
.st-wagen__item:hover img { transform: rotate(-3deg) scale(1.04); }
/* mobiel: betaalbalk onderin */
.st-betaalbalk { display: none; }
@media (max-width: 900px) {
    .st-betaalbalk:not([hidden]):not([data-leeg="ja"]) {
        position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px;
        background: var(--nacht); color: var(--wit); box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.6); animation: balk-op 0.4s var(--zacht-uit);
    }
    .st-betaalbalk div { display: grid; line-height: 1.15; }
    .st-betaalbalk small { color: var(--licht-zacht); font-size: 0.78rem; }
    .st-betaalbalk b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
    .st-betaalbalk .pil { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
    body:has(.st-betaalbalk:not([hidden]):not([data-leeg="ja"])) .chat-knop { bottom: 92px; }
}
@keyframes balk-op { from { transform: translateY(120%); } to { transform: none; } }
.st-korting__rij .pil { border: 1.5px solid var(--inkt); cursor: pointer; font: inherit; font-weight: 700; }