/* =========================================================
   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__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 { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--wit); border: 1px solid var(--lijn);
    color: var(--inkt); text-decoration: none; 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__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; }
}

.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-galerij { display: grid; gap: 12px; }
.st-galerij__groot { border-radius: 18px; overflow: hidden; background: var(--wit); box-shadow: 0 30px 60px -30px rgba(20, 6, 10, 0.55); }
.st-galerij__groot img { display: block; width: 100%; height: auto; }
.st-galerij__duim { display: flex; gap: 10px; }
.st-galerij__duim button { width: 72px; padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: var(--wit); cursor: pointer; }
.st-galerij__duim button[aria-current="true"] { border-color: var(--thema-accent); }
.st-galerij__duim img { display: block; width: 100%; height: auto; }
.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; }
}