/* ==========================================================================
   Buispakken.nl — Thema's, seizoenen en groepskorting (oktober 2026)

   Bewust een eigen bestand: editorial.css draagt veel lagen hotfixes, en dit
   werk moet los daarvan te begrijpen en te wijzigen zijn. Alles hier hangt aan
   een .th-wrapper of een eigen klasse, zodat het niets anders raakt.
   ========================================================================== */

.th {
    --th-bg: #FBF8F1;
    --th-fg: #1A1A1A;
    --th-soft: #5A5A5A;
    --th-accent: #F26B1F;
    --th-kaart: #FFFFFF;
    --th-lijn: #E6E2D6;
    background: var(--th-bg);
    color: var(--th-fg);
}

.th-halloween {
    --th-bg: #140B18;
    --th-fg: #F3EDE4;
    --th-soft: #B9A9C4;
    --th-accent: #FF7A1A;
    --th-kaart: #1F1225;
    --th-lijn: #36223F;
}

.th-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.th-narrow { max-width: 760px; }

.th h1, .th h2, .th h3 {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.02em;
    color: inherit;
}
.th h1 em, .th h2 em { font-style: italic; color: var(--th-accent); }
.th a:not(.ed-btn):not(.ed-popular-card):not(.th-tegel):not(.th-kostuum-img):not(.th-kostuum-link):not(.contact-link):not(.th-kaartlink) {
    color: var(--th-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.th-section { padding: 4.5rem 0; }
.th-licht { background: #FBF8F1; color: #1A1A1A; --th-accent: #F26B1F; }

.th-head { text-align: center; margin-bottom: 2.5rem; }
.th-head h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); margin: 0 0 .75rem; }
.th-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0; }
.th-head p { color: var(--th-soft); margin: 0 auto; max-width: 52ch; font-size: 1.1rem; }
.th-head-links { text-align: left; }

.th-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--th-accent);
    margin-bottom: .75rem;
}
.th-lead { font-size: 1.2rem; line-height: 1.7; color: var(--th-soft); margin: 0; }


/* ---------- Hero ---------- */
.th-hero {
    position: relative;
    padding: 6rem 0 5rem;
    text-align: center;
    overflow: hidden;
}
.th-halloween .th-hero {
    background:
        radial-gradient(ellipse at 50% 120%, rgba(255,122,26,.35) 0%, transparent 60%),
        radial-gradient(circle at 15% 20%, rgba(155,77,202,.25) 0%, transparent 40%),
        #140B18;
}
.th-emoji { font-size: 4.5rem; line-height: 1; margin-bottom: 1.25rem; }
.th-halloween .th-emoji { animation: th-zweef 4s ease-in-out infinite; }
@keyframes th-zweef { 50% { transform: translateY(-10px) rotate(-4deg); } }

.th-pill {
    display: inline-block;
    padding: .5rem 1.1rem;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--th-accent);
    margin-bottom: 1.5rem;
}
.th-hero h1 { font-size: clamp(3rem, 9vw, 6.5rem); line-height: .95; margin: 0 0 1.25rem; }
.th-sub { max-width: 46ch; margin: 0 auto 2.25rem; font-size: 1.15rem; line-height: 1.6; color: var(--th-soft); }

.th-intro { padding: 3rem 0 1rem; }
.th-intro h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin: 0 0 1rem; }
.th-intro p { font-size: 1.1rem; line-height: 1.75; color: var(--th-soft); margin: 0; }


/* ---------- Kostuumkaarten ---------- */
.th-kostuums {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}
.th-kostuum {
    background: var(--th-kaart);
    border: 1px solid var(--th-lijn);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .25s, border-color .25s;
}
.th-kostuum:hover { transform: translateY(-4px); border-color: var(--th-accent); }
.th-kostuum-img {
    display: block;
    aspect-ratio: 1;
    background: #FBF8F1;
}
.th-kostuum-img img { width: 100%; height: 100%; object-fit: contain; padding: .75rem; }
.th-kostuum-body { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.th-kostuum h3 { font-size: 1.4rem; margin: 0 0 .5rem; }
.th-kostuum p { font-size: .92rem; line-height: 1.55; color: var(--th-soft); margin: 0 0 .75rem; }
.th-nodig { font-size: .82rem !important; }
.th-nodig strong { color: var(--th-fg); font-weight: 600; }
.th-kostuum-link {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding-top: .9rem;
    border-top: 1px solid var(--th-lijn);
    font-size: .85rem;
    color: var(--th-fg);
    text-decoration: none;
}
.th-kostuum-link span { color: var(--th-accent); font-weight: 600; white-space: nowrap; }


/* ---------- Groepsblok (op themapagina's) ---------- */
.th-groep { background: #F26B1F; color: #1A1A1A; padding: 3.5rem 0; }
.th-halloween .th-groep { background: #FF7A1A; }
.th-groep-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.th-groep .th-eyebrow { color: #1A1A1A; opacity: .7; }
.th-groep h2 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); margin: 0 0 .5rem; }
.th-groep p { margin: 0; max-width: 52ch; font-size: 1.05rem; }
.th-groep .ed-btn-primary { background: #1A1A1A; color: #FFD233; flex-shrink: 0; }


/* ---------- Feitjes (levering, maten, ...) ---------- */
.th-feiten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.th-feiten > div {
    border-top: 2px solid var(--th-accent);
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.th-feiten strong { font-size: 1rem; }
.th-feiten span { font-size: .9rem; line-height: 1.5; color: var(--th-soft); }


/* ---------- Overzicht /themas ---------- */
.th-tegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.th-tegel {
    position: relative;
    min-height: 340px;
    border-radius: 6px;
    overflow: hidden;
    color: #FFFFFF;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
    transition: transform .3s;
}
a.th-tegel:hover { transform: translateY(-4px); }
.th-tegel img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    transition: transform .6s;
}
.th-tegel img[src$=".png"][src*="overall-"] { object-fit: contain; padding: 1.5rem 1.5rem 7rem; }
a.th-tegel:hover img { transform: scale(1.04); }
.th-tegel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.8) 100%);
}
.th-tegel-body { padding: 1.75rem; width: 100%; }
.th-tegel-datum { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; color: #FFD233; }
.th-tegel h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: .4rem 0 .35rem; }
.th-tegel p { margin: 0; opacity: .85; }
.th-tegel-label {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: #FFD233;
    color: #1A1A1A;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .35rem .7rem;
    border-radius: 999px;
}
.th-tegel.is-binnenkort { cursor: default; }
.th-tegel.is-binnenkort img { filter: grayscale(.6) brightness(.7); }
.th-tegel.is-binnenkort .th-tegel-label { background: rgba(255,255,255,.9); }


/* ---------- Groepskortingpagina ---------- */
.th-voorwie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; }
.th-voorwie > div {
    font-size: 1.05rem;
    line-height: 1.55;
    padding: 1.25rem 0;
    border-top: 1px solid var(--th-lijn);
}
.th-voorwie strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; display: block; margin-bottom: .2rem; }

.th-groep-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: start; }
.th-groep-grid h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 0 0 1rem; }
.th-groep-grid p { line-height: 1.7; color: var(--th-soft); }
.th-grap { font-family: var(--font-display); font-size: 1.35rem; font-style: italic; color: var(--th-fg) !important; margin-top: 2rem; }
.th-grap-klein { font-size: .95rem; }

.th-formulier {
    background: #FFFFFF;
    border-radius: 14px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(20,30,10,.06), 0 8px 24px rgba(20,30,10,.06);
}
.th-formulier .form-row textarea { resize: vertical; font: inherit; }
.th-formulier .form-row select { font: inherit; }
.th-verstuur { width: 100%; justify-content: center; margin-top: .5rem; }
.th-klein { font-size: .8rem; color: var(--th-soft); margin: 1rem 0 0; }
.th-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.th-fouten { background: #FDECEC; color: #B42318; border-radius: 6px; padding: .9rem 1.1rem; margin-bottom: 1.25rem; }
.th-fouten p { margin: 0; color: inherit !important; }
.th-gelukt h3 { font-size: 1.6rem; margin: 0 0 .5rem; }
.th-gelukt p { margin: 0; }
.th-voorbeeld {
    margin-top: 1.5rem;
    padding: 1rem;
    border: 2px dashed #F26B1F;
    border-radius: 6px;
    font-size: .85rem;
    background: #FFF8F2;
}


/* ---------- Menu: Thema's met uitklapmenu ---------- */
.header .nav .nav-dd { position: relative; display: flex; align-items: center; }
.header .nav .nav-dd-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 220px;
    padding: .5rem;
    margin-top: .5rem;
    background: #FFFFFF;
    border: 1px solid #E6E2D6;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(20,30,10,.12);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 60;
}
/* Onzichtbare brug tussen menuknop en uitklapmenu, zodat de muis er niet "uit valt" */
.header .nav .nav-dd-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -.75rem; height: .75rem; }
.header .nav .nav-dd:hover .nav-dd-menu,
.header .nav .nav-dd:focus-within .nav-dd-menu { opacity: 1; visibility: visible; transform: none; }
.header .nav .nav-dd-menu a {
    padding: .6rem .75rem;
    border-radius: 4px;
    border-bottom: 0;
    white-space: nowrap;
}
.header .nav .nav-dd-menu a:hover { background: #FBF8F1; }

@media screen and (max-width: 900px) {
    /* In de uitschuiflade: submenu altijd zichtbaar, iets ingesprongen */
    body header.header nav.is-open .nav-dd { display: block; }
    body header.header nav.is-open .nav-dd-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        margin: 0;
        padding: 0 0 .5rem 1rem;
        min-width: 0;
        background: transparent;
    }
    body header.header nav.is-open .nav-dd-menu a {
        font-family: var(--font-body, "Inter", sans-serif) !important;
        font-size: 1rem !important;
        padding: .6rem 0 !important;
        color: #4A4A4A !important;
    }
    /* Alles in één kolom. De basis-.nav heeft flex-wrap: wrap; in een lade van schermhoogte
       schoof het laatste deel (Maatadvies, Kom in contact) daardoor naar een tweede kolom.
       Nu loopt de lijst door naar beneden en scrollt de lade. */
    body header.header nav.is-open { flex-wrap: nowrap !important; }
    body header.header nav.is-open > * { flex-shrink: 0; }
}


/* ---------- Homepage in seizoensstand ---------- */
.ed-seizoen-halloween .ed-headline em { color: #FF9A4D; }
.ed-seizoen-halloween .ed-stamp { color: #FF9A4D; }
.ed-seizoen-halloween .ed-stamp::before { background: #FF9A4D; box-shadow: 0 0 12px #FF7A1A; }
.ed-tile-seizoen-halloween::after { background: linear-gradient(180deg, rgba(155,77,202,.15) 40%, rgba(20,11,24,.9) 100%) !important; }
.ed-tile-seizoen-halloween .ed-tile-kicker { color: #FF9A4D; }


/* ---------- Responsief ---------- */
@media (max-width: 1000px) {
    .th-kostuums { grid-template-columns: repeat(2, 1fr); }
    .th-feiten { grid-template-columns: repeat(2, 1fr); }
    .th-voorwie { grid-template-columns: repeat(2, 1fr); }
    .th-groep-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 640px) {
    .th-section { padding: 3rem 0; }
    .th-hero { padding: 4rem 0 3.5rem; }
    .th-tegels { grid-template-columns: 1fr; }
    .th-tegel { min-height: 280px; }
    .th-groep-inner { flex-direction: column; align-items: flex-start; }
    .th-voorwie { grid-template-columns: 1fr; }
    .th-formulier { padding: 1.25rem; }
}
@media (max-width: 420px) {
    .th-kostuums { grid-template-columns: 1fr; }
    .th-feiten { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .th-halloween .th-emoji { animation: none; }
}


/* ---------- Retourneren & herroepen ---------- */
.th-herroep-blok {
    margin-top: 2.5rem;
    padding: 1.75rem;
    border: 2px solid var(--th-accent);
    border-radius: 6px;
    background: #FFF8F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.th-herroep-blok h2 { font-size: 1.6rem; margin: 0 0 .35rem; }
.th-herroep-blok p { margin: 0; color: var(--th-soft); }
.th-herroep-blok .ed-btn { flex-shrink: 0; }

.th-uitleg h2 { font-size: 1.45rem; margin: 2.5rem 0 .6rem; }
.th-uitleg h2:first-child { margin-top: 0; }
.th-uitleg p, .th-uitleg li { line-height: 1.7; color: #4A4A4A; }
.th-stappen { padding-left: 1.25rem; }
.th-stappen li { margin-bottom: .5rem; }
.th-stappen strong { color: #1A1A1A; }
.th-adres {
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.5rem;
    background: #FFFFFF;
    border-left: 4px solid var(--th-accent);
    border-radius: 4px;
}
.th-adres p { margin: 0; font-size: 1.05rem; color: #1A1A1A !important; }
.th-adres-klein { padding: .75rem 1rem; background: #FBF8F1; border-radius: 4px; }
.th-modelformulier {
    margin-top: 1rem;
    padding: 1.5rem;
    background: #FFFFFF;
    border: 1px dashed #C9C2B0;
    border-radius: 4px;
    font-size: .92rem;
}
.th-modelformulier p { margin: 0 0 .75rem; }

.th-keuze { border: 0; padding: 0; }
.th-keuze legend { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-soft, #4A4A4A); margin-bottom: .5rem; }
.th-keuze label { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1.5rem; font-size: 1rem; text-transform: none; letter-spacing: 0; color: #1A1A1A; }
.th-keuze input { width: auto !important; accent-color: #F26B1F; }

.th-overzicht { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0 0 1.5rem; }
.th-overzicht dt { color: #6A6A6A; font-size: .9rem; }
.th-overzicht dd { margin: 0; font-weight: 500; }
.th-terug { margin-top: .75rem; text-align: center; }
.th-linkknop { background: none; border: 0; color: #4A4A4A; text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; }

@media (max-width: 640px) {
    .th-herroep-blok { flex-direction: column; align-items: flex-start; }
    .th-overzicht { grid-template-columns: 1fr; gap: .1rem; }
    .th-overzicht dd { margin-bottom: .6rem; }
}


/* ---------- Reparatie: mobiele menulade onder de grijze waas ----------
   De header heeft backdrop-filter + z-index 50. Daardoor zit de lade (die in de
   header staat) gevangen onder z-index 50, terwijl de donkere achtergrondlaag
   (body.nav-open::before) op 9998 ligt: de lade kwam onder de waas. Zolang het
   menu open is tillen we de hele header boven de waas uit. */
@media screen and (max-width: 900px) {
    body.nav-open header.header {
        z-index: 10000 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* ---------- Thema: carnaval ---------- */
.th-carnaval .th-hero {
    background:
        radial-gradient(circle at 12% 25%, rgba(216,52,52,.55) 0 3px, transparent 4px) 0 0 / 90px 90px,
        radial-gradient(circle at 70% 60%, rgba(255,210,51,.6) 0 3px, transparent 4px) 0 0 / 110px 110px,
        radial-gradient(circle at 40% 80%, rgba(46,204,113,.5) 0 3px, transparent 4px) 0 0 / 130px 130px,
        linear-gradient(160deg, #0F3D2E 0%, #14633A 55%, #0F3D2E 100%);
    color: #FBF8F1;
    --th-soft: rgba(251,248,241,.85);
    --th-accent: #FFD233;
}
.th-carnaval .th-hero h1 em { color: #FFD233; }
.th-carnaval .th-pill { color: #FFD233; }
.th-carnaval .th-groep { background: #FFD233; }
.ed-seizoen-carnaval .ed-headline em { color: #FFD233; }


/* ---------- Foto's (oktober 2026) ---------- */
.th-hero-foto {
    background-size: cover;
    background-position: center 35%;
    color: #F3EDE4;
}
.th-hero-foto::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 55%, rgba(20,11,24,.6) 0%, rgba(20,11,24,.25) 60%),
        linear-gradient(180deg, rgba(20,11,24,.15) 0%, rgba(20,11,24,.15) 60%, rgba(20,11,24,1) 100%);
}
.th-hero-foto .th-wrap { position: relative; }
.th-hero-foto { padding: 8rem 0 7rem; }

.th-intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 3rem;
    align-items: center;
}
.th-intro-grid img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.th-groep-foto { position: relative; overflow: hidden; isolation: isolate; padding: 6rem 0; }
.th-groep-foto > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: -2;
}
.th-groep-foto::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255,122,26,.97) 0%, rgba(255,122,26,.9) 45%, rgba(255,122,26,.15) 100%);
}

@media (max-width: 900px) {
    .th-intro-grid { grid-template-columns: 1fr; gap: 2rem; }
    .th-groep-foto::before { background: linear-gradient(180deg, rgba(255,122,26,.75) 0%, rgba(255,122,26,.97) 55%); }
    .th-groep-foto { padding-top: 14rem; }
    .th-groep-foto > img { height: 60%; object-position: center 20%; }
}

/* Drukke seizoensfoto achter de homepagekop: links extra donker voor leesbaarheid */
.ed-seizoen-halloween .ed-hero-bg::after {
    background:
        linear-gradient(90deg, rgba(10,5,12,.85) 0%, rgba(10,5,12,.55) 45%, rgba(10,5,12,.15) 75%),
        linear-gradient(180deg, rgba(10,5,12,0) 50%, rgba(10,5,12,.85) 100%);
}

/* Donkere slotstrook direct tegen de donkere footer: iets meer ademruimte onderin. */
.th-tot-footer { padding-bottom: calc(var(--s7) + var(--s5)); }

/* De footer had een vaste marge van 6rem erboven. Elke pagina heeft onderaan al
   eigen ruimte, dus dat gaf een lege (en bij donkere slotstroken lichte) balk. */
.footer { margin-top: 0; }


/* ---------- Categoriepagina's: intro en uitleg (oktober 2026) ---------- */
.cat-feiten { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-feiten li {
    color: #1A1A1A;
    font-size: .8rem;
    font-weight: 600;
    padding: .45rem .8rem;
    border-radius: 999px;
    background: #FFFFFF;
    border: 1px solid #E6E2D6;
    white-space: nowrap;
}
.cat-feiten li:first-child { background: #F26B1F; border-color: #F26B1F; color: #FFFFFF; }
.cat-sub-intro { margin: 1rem 0 0; color: #5A5A5A; line-height: 1.7; grid-column: 1 / -1; }
/* Volgorde per productgroep: oranje kopje, grote kop, tekst, dan de feitjes. */
.cat-feiten-groep { grid-column: 1 / -1; margin-top: 1.25rem; }
/* In de fotokop van de categorie: onder de introtekst. */
.cat-feiten-kop { margin-top: 1.5rem; }
/* Op de foto: doorzichtige labeltjes met witte tekst, het eerste wit en vol. */
.cat-feiten-kop li {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.4);
    color: #FFFFFF;
    backdrop-filter: blur(6px);
}
.cat-feiten-kop li:first-child { background: #FFFFFF; border-color: #FFFFFF; color: #1A1A1A; }

.cat-uitleg { background: #FFFFFF; border-top: 1px solid #E6E2D6; padding: 4.5rem 0 5rem; }
.cat-uitleg h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 3.5vw, 2.6rem); letter-spacing: -0.02em; margin: 0 0 2rem; }
.cat-uitleg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3.5rem; }
.cat-uitleg h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 .5rem; }
.cat-uitleg p { margin: 0; line-height: 1.75; color: #4A4A4A; }
.cat-uitleg a { color: #D14A0A; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
    .cat-uitleg-grid { grid-template-columns: 1fr; }
}


/* ---------- Homepage op de telefoon: eerst de boodschap, dan het pak ----------
   Stond de overall bovenaan (order -1) en schermvullend, dan zag een bezoeker op
   de telefoon bij binnenkomst alleen een pak en geen kop of knop. */
@media (max-width: 900px) {
    .ed-hero-inner { padding-top: 3rem !important; gap: 1.5rem !important; min-height: 0 !important; }
    .ed-hero { min-height: 0 !important; }
    .ed-product-stage { order: 2 !important; max-width: 300px; margin: 0 auto; }
    .ed-product-img { max-width: 230px; margin: 0 auto; }
    .ed-swatches { margin-top: 1rem; gap: .5rem; padding: .75rem 1rem; }
    .ed-swatch { width: 26px; height: 26px; }
}

/* Levertijd in de bovenbalk: tussen 900 en 1000px breed past hij niet meer op één regel. */
@media (max-width: 1000px) {
    .topbar-promise, .topbar-sep { display: none !important; }
}


/* ---------- Uitgelicht kostuum (Halloween) ---------- */
.th-uitgelicht-grid { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 4rem; align-items: center; }
.th-uitgelicht-grid img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    background: #FFFFFF;
    box-shadow: 0 0 0 1px var(--th-lijn), 0 30px 80px rgba(255,122,26,.18);
}
.th-uitgelicht h2 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 1.25rem; line-height: 1; }
.th-uitgelicht .th-lead { margin-bottom: 1rem; }
.th-uitgelicht-product {
    display: flex;
    justify-content: space-between;
    max-width: 420px;
    padding: .9rem 0;
    margin: 1.25rem 0 1.75rem;
    border-top: 1px solid var(--th-lijn);
    border-bottom: 1px solid var(--th-lijn);
    font-size: .95rem;
}
.th-uitgelicht-product strong { color: var(--th-accent); }
@media (max-width: 800px) {
    .th-uitgelicht-grid { grid-template-columns: 1fr; gap: 2rem; }
    .th-uitgelicht-grid img { max-width: 320px; margin: 0 auto; }
}


/* ---------- Ruimte tussen blokken gelijkgetrokken (oktober 2026) ----------
   De oude blokken hadden 7-8rem boven én onder (samen tot 256px wit tussen twee
   blokken), de nieuwe 4,5rem. Op computerschermen nu overal dezelfde maat;
   de telefoonmaten in editorial.css waren al kleiner en blijven zoals ze zijn. */
@media (min-width: 901px) {
    .ed-section, .ed-carousel-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
    .ed-quote, .ed-faq-section { padding-top: 5rem; padding-bottom: 5rem; }
}
/* Laatste productgroep op een categoriepagina: geen extra marge van 5rem eronder. */
.ed-popular-section .container > div[style]:last-child { margin-bottom: 0 !important; }


/* ---------- Groepskorting: "Voor wie?" als lichte kaartjes ---------- */
.th-voorwie { gap: 1.25rem; }
.th-voorwie > div, .th-voorwie > a {
    background: #FFFFFF;
    border: 1px solid #E6E2D6;
    border-radius: 14px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    color: #5A5A5A;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.th-voorwie > div:hover, .th-voorwie > a:hover {
    transform: translateY(-4px);
    border-color: #F26B1F;
    box-shadow: 0 12px 30px rgba(242,107,31,.12);
}
.th-voorwie-ico { display: block; font-size: 2.2rem; line-height: 1; margin-bottom: .9rem; }
.th-voorwie strong { color: #1A1A1A; margin-bottom: .4rem; }

/* "Vijf redenen"-blok onderaan Koningsdag en Oranje: was zwart en liep naadloos over in de
   zwarte footer. Nu een warme zandtint met witte kaartjes, net als "Voor wie?" op groepskorting.
   !important omdat de pagina's de oude donkere kleuren als inline-stijl meegeven. */
.th-tot-footer { background: #F1EBDD !important; color: #1A1A1A !important; }
.th-tot-footer h2, .th-tot-footer h4 { color: #1A1A1A !important; }
.th-tot-footer .feature {
    background: #FFFFFF !important;
    border: 1px solid #E6E2D6 !important;
    border-radius: 14px;
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.th-tot-footer .feature:hover { transform: translateY(-4px); border-color: #F26B1F !important; box-shadow: 0 12px 30px rgba(242,107,31,.12); }
.th-tot-footer .feature p { color: #5A5A5A; }



/* ---------- Foto in een vorm: organisch, met zachte vlek erachter en een badge ----------
   Een losse rechthoek naast tekst oogt geplakt; zo gaat de foto op in de achtergrond. */
.th-blob { position: relative; isolation: isolate; padding: 1.5rem 1.5rem 2rem 2rem; }
.th-blob::before {
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    z-index: -1;
    background: #FFE4D1;
    border-radius: 58% 42% 46% 54% / 47% 58% 42% 53%;
    transform: rotate(-4deg) scale(1.04);
}
.th-blob img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 35%;
    border-radius: 46% 54% 52% 48% / 52% 44% 56% 48%;
    box-shadow: none !important;
}
.th-blob-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: #FFD233;
    color: #1A1A1A;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    line-height: 1.1;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);
    hyphens: manual;
}
@media (max-width: 640px) {
    .th-blob { padding: 1rem 1rem 1.5rem 1.5rem; }
    .th-blob-badge { width: 100px; height: 100px; font-size: .95rem; }
}

/* Donkere variant (Halloween): paarse vlek met oranje gloed, badge in pompoenoranje. */
.th-blob-donker::before {
    background:
        radial-gradient(circle at 30% 80%, rgba(255,122,26,.35) 0%, transparent 55%),
        #3A1F45;
}
.th-blob-donker .th-blob-badge { background: #FF7A1A; color: #1A0E1F; box-shadow: 0 12px 40px rgba(255,122,26,.35); font-size: 1.05rem; }
@media (max-width: 480px) { .cat-feiten li { white-space: normal; } }

/* Zandtint voor een middenblok tussen twee crèmekleurige blokken (zelfde tint als "Vijf redenen"). */
.th-zand { background: #F1EBDD; color: #1A1A1A; --th-accent: #F26B1F; }

/* Groepsfoto tuinbroeken: gezichten zitten op ongeveer 40% van de hoogte. */
.ed-cat-header[style*="tuinbroeken-groep-weiland"] { background-position: center 42%; }
.ed-tile img[src*="tuinbroeken-groep-weiland"] { object-position: 68% center; }
/* Kinderfoto speeltuin: gezichten op ongeveer 43% van de hoogte. */
.ed-cat-header[style*="kinderen-speeltuin-overalls"] { background-position: center 44%; }
.ed-tile img[src*="kinderen-speeltuin-overalls"] { object-position: center 45%; }
/* Magazijnfoto overalls: gezichten rechts, op ongeveer 36% van de hoogte. */
.ed-cat-header[style*="overalls-magazijn-inpakken"] { background-position: center 38%; }
.ed-tile img[src*="overalls-magazijn-inpakken"] { object-position: 78% center; }


/* ---------- Contactpagina ---------- */
.contact-lijst { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; }
.contact-lijst li { display: flex; align-items: center; gap: 1rem; }
.contact-ico {
    flex: 0 0 48px;
    height: 48px;
    border-radius: 50%;
    background: #FFE4D1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}
.contact-lijst small {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: #8A8A8A;
    margin-bottom: .1rem;
}
.contact-link { color: #1A1A1A; text-decoration: none; font-weight: 600; font-size: 1.15rem; }
.contact-link:hover { color: #F26B1F; }
.contact-lijst span { font-size: 1.05rem; color: #1A1A1A; }
/* Magazijnfoto: de inpakkers staan rechts in beeld. */
.th-blob-contact img { object-position: 78% center; }
/* Kaartjes die zelf een link zijn (contact > snel geregeld). */
.th-kaartlink { color: #5A5A5A; text-decoration: none; display: block; }
/* Foto van Thom met hond: vierkant, gezicht en hond in beeld houden. */
.th-blob-thom img { object-position: center 30%; }

/* Voorwaarden: versiedatum onderaan */
.th-uitleg .th-versie { margin-top: 2.5rem; font-size: .85rem; color: #8A8478; }

/* Tekstpagina's (voorwaarden, privacy, retourneren): kop en tekst niet als twee losse eilanden */
.th-section.th-kop { padding-bottom: 1.5rem; }
.th-kop + .th-section { padding-top: 2.5rem; }

/* Logo (Thom, 09-10-2026, mascotte-versie): in de header, stickerversie (witte rand) in de donkere footer */
.brand-logo { display: block; line-height: 0; flex-shrink: 0; }
.brand-logo img { display: block; height: 76px; width: auto; }
.footer-logo { line-height: 0; }
.footer-logo img { display: block; width: 260px; max-width: 100%; height: auto; }
@media (max-width: 900px) {
    .brand-logo img { height: 58px; }
}