/* ============================================================================
   Hype Heroes, eigen laag boven de BEWISE-basis.

   De kleuren en de fontnamen staan als tokens in base.ctp, zodat stylesheet.css
   ze ook gebruikt en checkout, account en productkaarten vanzelf meekleuren.
   Hier staan de fonts zelf en alles wat eigen is aan dit thema.

   Opbouw volgens ITCSS, alle media queries in sectie 15.
   ========================================================================= */

/* 0. PALET -----------------------------------------------------------------
   Deze tokens voeden ook stylesheet.css, dus checkout, account en de
   productkaarten kleuren hiermee vanzelf mee. Ze staan hier en niet in
   base.ctp: die zet ze in een inline <style> boven de stylesheets, en
   verliest daardoor van de terugvalwaarden in stylesheet.css.
   ------------------------------------------------------------------------- */

:root {
    --c-primary: #f2a7b8;
    --c-primary-dark: #f3b6c4;
    --c-accent: #e8917a;
    --c-bg: #141016;
    --c-surface: #221a22;
    --c-text: #ecebe3;
    --c-header-bg: #141016;
    --c-footer-bg: #2c1b2a;

    --c-paneel: #2c1b2a;
    --c-groen: #232720;
    --c-roze: #f2a7b8;
    --c-blush: #f3b6c4;
    --c-rose: #e9d9de;
    --c-mauve: #d9c9d0;
    --c-gedempt: #b59aa8;
    --c-open: #7fc47f;
    --c-dicht: #b3563f;

    --font-heading: 'Big Shoulders', 'Archivo', system-ui, sans-serif;
    --font-body: 'Archivo', system-ui, -apple-system, sans-serif;
    --font-accent: 'Cormorant Garamond', Georgia, serif;

    /* De basis kiest hiervoor waarden die bij een lichte pagina horen. Op een
       bijna zwarte achtergrond trekt --c-border een lichte streep door het
       hele thema (60 plekken) en valt --c-muted bijna weg (44 plekken). */
    --c-border: rgba(255, 255, 255, .12);
    --c-muted: #b59aa8;
    /* De basis gebruikt op elf plekken --c-text-muted en definieert hem
       nergens. Een ongedefinieerde custom property maakt de hele declaratie
       ongeldig, dus die elf kleuren vielen terug op de erfkleur. */
    --c-text-muted: #b59aa8;
    --c-sale: #e8917a;
    --c-success: #7fc47f;
    --c-warning: #e8917a;

    --c-footer-text: #ecebe3;
    --c-footer-muted: #b59aa8;
    --c-footer-border: rgba(255, 255, 255, .12);
    --c-footer-input-bg: #221a22;

    /* 1C heeft rechte hoeken, overal */
    --c-btn-radius: 0;
    --c-card-radius: 0;
    --c-input-radius: 0;
        }

/* 0. FONTS ------------------------------------------------------------------
   Lokaal, geen Google Fonts. Versmald tot latin plus de pijl en het
   driehoekje die het ontwerp gebruikt. Big Shoulders is variabel met een
   optische as: de browser kiest per lettergrootte de juiste vorm. Zijn
   standaardgewicht is 100, dus overal een font-weight meegeven.
   ------------------------------------------------------------------------- */

@font-face {
    font-family: 'Big Shoulders';
    src: url('../webfonts/big-shoulders/big-shoulders-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('../webfonts/archivo/archivo-400.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('../webfonts/archivo/archivo-500.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo';
    src: url('../webfonts/archivo/archivo-600.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../webfonts/cormorant-garamond/cormorant-garamond-400-italic.woff2') format('woff2');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../webfonts/cormorant-garamond/cormorant-garamond-500-italic.woff2') format('woff2');
    font-style: italic;
    font-weight: 500;
    font-display: swap;
}

/* 1. EIGEN COMPONENTEN ------------------------------------------------------
   De basis zet a op de primaire kleur en geeft koppen marges. Binnen onze
   eigen componenten willen we dat niet: daar erft een link de kleur van zijn
   omgeving en zetten de koppen hun eigen maat. Gescoped op het voorvoegsel,
   zodat checkout en account de basis houden.
   ------------------------------------------------------------------------- */

/* Een knop is geen link die zijn omgeving volgt: die houdt de kleuren uit
   sectie 5. Zonder die uitzondering erfde een roze knop in een eigen blok
   de cremekleur van het paneel eromheen en kreeg hij witte tekst. */
[class*="hh-"] a:not(.btn),
a[class*="hh-"]:not(.btn) {
    color: inherit;
}

[class*="hh-"] h1,
[class*="hh-"] h2,
[class*="hh-"] h3 {
    margin: 0;
    color: inherit;
}


/* 2. DE BASIS BIJGESTELD ----------------------------------------------------
   De header, de footer en de USP-balk komen uit de BEWISE-basis en werken
   goed. Ze hoeven niet vervangen te worden, alleen bijgekleurd naar 1C. Wat
   hieronder staat is dus bewust klein: alleen waar de basis een kleur of een
   vorm hardcodeert die bij een lichte winkel hoort.
   ------------------------------------------------------------------------- */

/* Voor tekst die alleen voor schermlezers is. Bestaat niet in de basis. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-header {
    border-bottom: 1px solid var(--c-border);
}

/* Het hoofdmenu in kapitalen met wat letterafstand, zoals in het ontwerp */
.site-header__nav .menu-item > a {
    font: 500 13px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* De tas is in dit thema een icoon en geen gevulde knop; de maatvoering en
   het rondje met het aantal staan verderop in sectie 6. */
.hh-tas {
    width: 22px;
    height: 22px;
}

/* Het aantal als rondje op de tas in plaats van als los getal ernaast */
.site-header__cart-btn .shopping-cart-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font: 600 11px/1 var(--font-body);
}

/* De knoppen staan bij elkaar in sectie 5. */

.site-footer__col-title {
    color: var(--c-text);
}

/* Een footerkolom is een lijstje links, geen catalogus. Wijst de kolom naar
   een categoriemenu in plaats van naar een plat menu, dan rendert SW-Retail
   de hele boom: op hypeheroes.com kwamen daar 145 links en 24 niveaus uit.
   Alleen het bovenste niveau dus. */
.site-footer__col-body ul ul {
    display: none;
}

/* Het logo staat in de eerste footerkolom op de plek van de kop, dus het
   krijgt dezelfde onderruimte als een kop. */
.site-footer__logo {
    display: block;
    height: 38px;
    width: auto;
    margin-bottom: 20px;
}

.site-header__logo-image {
    height: 38px;
    width: auto;
}

/* De basis geeft header, footer en USP-balk een eigen wrapper met max-width
   1400 in plaats van .container, dus die moeten apart mee naar de breedte
   van het ontwerp. */
@media (min-width: 1200px) {
    .site-header__inner,
    .site-footer__inner,
    .site-footer__bottom-inner,
    .usp-bar__inner {
        max-width: 1620px;
    }
}

/* De hoogte van de balk komt van de menu-links, die 29px boven en onder
   krijgen zodat de muis zonder gat naar het megamenu kan. De basis zet daar
   nog 18px padding bovenop, wat de balk 107px maakt waar het ontwerp 72
   heeft. Alleen vanaf lg, want daaronder is het menu verborgen en moet die
   padding de balk juist op hoogte houden. */
@media (min-width: 992px) {
    .site-header__inner {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* "den bosch" naast het logo, in het schreeffont zoals in het ontwerp */
.hh-plaats {
    margin-left: 14px;
    font: 400 italic 17px/1 var(--font-accent);
    color: var(--c-roze);
}

/* Zoeken staat er als woord, niet als vergrootglas */
.hh-zoeklabel {
    font: 500 13px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.site-header__logo a {
    display: flex;
    align-items: center;
}

/* De openingstijden in de eerste footerkolom staan als dl naast elkaar */
.hh-hours--footer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 16px;
    margin: 0 0 20px;
}

.hh-hours--footer dt,
.hh-hours--footer dd {
    margin: 0;
    font: 400 13px/1.6 var(--font-body);
}

/* De basis rekent op drie footerkolommen, dit thema heeft er vier. Alleen
   boven de breekpunten van de basis (767 en 480), zodat die het daaronder
   gewoon overnemen. */
@media (min-width: 768px) {
    .site-footer__columns {
        grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
        gap: 48px;
    }
}

/* Ook hier zet de basis de tekst hard op wit, op roze leest donker beter */
.site-footer__newsletter-btn {
    color: var(--c-bg);
    font-weight: 600;
    letter-spacing: .06em;
}

.site-footer__social a + a {
    margin-left: 14px;
}

/* ============================================================================
   Concept 1C, "Dark greenhouse".

   Zelfde aanpak als concept-1a.css: alles hangt onder of onder een class
   die de js op de pagina zet, zodat niets naar de rest van de shop lekt.
   Layout via Bootstrap 4, deze css doet kleur, typografie en beeldverhouding.

   Het palet komt uit het oorspronkelijke ontwerp: bijna zwart met een paarse
   zweem, creme tekst, roze en koraal als accent, en donkergroen voor de
   kassierdere vlakken.

   Opbouw volgens ITCSS, alle media queries in sectie 15.
   ========================================================================= */

html {
    scroll-behavior: smooth;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
    overflow: clip;
}

.lenis [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

/* min-width: 0 omdat de kolom een flex-item is: zonder max-width rekt hij
   anders mee met zijn breedste inhoud, en een strook die opzij schuift (de
   soorten op het overzicht, de foto's op de productpagina) duwt de hele
   pagina dan breder dan een telefoonscherm. */

p {
    margin: 0;
}

img {
    max-width: 100%;
}

/* 2b. BIJSTELLINGEN NA DE EERSTE RONDE OP SCHERM ---------------------------
   Vijf dingen die pas opvielen toen het thema echt draaide.
   ------------------------------------------------------------------------- */

/* De basis zet de container met !important op 1400. Het ontwerp rekent op
   1620, dus hier moet !important tegenover. */
@media (min-width: 1200px) {
    .container {
        max-width: 1620px !important;
    }

    /* De basis zet #main-wrapper.container apart op 1400 met !important, dus
       die moet met hetzelfde gewicht mee naar de breedte van het ontwerp. */
    main#main-wrapper.container {
        max-width: 1620px !important;
    }
}

/* Pagina's met een blok dat van rand tot rand loopt breken uit de container.
   De secties die wel ingekaderd horen te zijn brengen hun eigen container
   mee, dus dit raakt alleen de volle blokken. Zo hoeft het niet per
   page_type geregeld te worden: de homepage, Over ons en Contact hebben
   allemaal zo'n blok, een servicepagina niet.

   De selector heeft het id erbij omdat de basis #main-wrapper.container met
   !important op 1400 zet; zonder dat id wint die regel. */
main#main-wrapper.container:has(.hh-vlak) {
    max-width: none !important;
    padding-left: 0;
    padding-right: 0;
}

/* Het eerste blok begint direct onder de header, met alleen de naad ertussen. */
main#main-wrapper.container:has(.hh-vlak) #main_content {
    padding-top: 0;
}

main#main-wrapper.container:has(.hh-vlak) #content > section:first-child {
    margin-top: 0;
}

/* Een editor laat in een CMS-pagina makkelijk een lege alinea achter, en
   stylesheet.css geeft die met .row.cms_content p nog 12px marge mee ook.

   Een echt lege alinea levert geen tekst op maar wel marge. */
#content p:empty {
    display: none;
}

/* Geen onderstreping bij het aanwijzen van eigen componenten. De tegels van
   de verdiepingen zijn een link om een hele lap tekst heen; die lap hoort
   niet in zijn geheel te onderstrepen. */
[class*="hh-"]:hover,
[class*="hh-"] a:hover,
a[class*="hh-"]:hover,
a[class*="hh-"]:hover * {
    text-decoration: none;
}

/* De productkaart dichter bij het ontwerp: geen kader, en het beeld vult de
   kaart in plaats van er met witruimte omheen te passen. */
.product-card {
    border: 0;
}

/* Alle kaarten even hoog met de prijs onderaan, ook als de ene naam over
   vier regels loopt en de andere over een. De basis zet wel height 100% op
   de kaart maar maakt de keten eronder niet tot kolom. */
.article_item_small {
    display: flex;
}

.product-card,
.product-card__link,
.product-card__info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.product-card__link {
    flex: 1 1 auto;
}

.product-card__info {
    flex: 1 1 auto;
}

.product-card__pricing {
    margin-top: auto;
    padding-top: 10px;
}

/* De basis zet 24px padding om de foto, waardoor er een donker kader om
   elke productfoto stond: het vlak eromheen is net iets donkerder dan de
   kaart zelf en tekende zich dus af als een lijst. In het ontwerp loopt de
   foto tot de rand van de tegel. De 10px marge houdt de tegel wel los van
   de rand van de kaart. */
.product-card__image-wrap {
    margin: 10px 10px 0;
    padding: 0;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--c-bg);
}

.product-card__image {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
}

/* De tas in de header is geen knop maar een icoon, net als zoeken en account.
   De basis zet bij het aanwijzen een roze vlak achter de knop; dat gaf een
   roze blok om de tas heen. Alleen het icoon kleurt mee. */
.site-header__cart-btn {
    background: transparent;
    color: var(--c-text);
    padding: 8px 10px;
}

.site-header__cart-btn:hover,
.site-header__cart-btn:focus,
.site-header__cart-btn:active {
    background: transparent;
    color: var(--c-roze);
}

.site-header__cart-btn .shopping-cart-number {
    position: relative;
    top: -8px;
    left: -8px;
    background: var(--c-roze);
    color: var(--c-bg);
}

/* Wat meer lucht in het hoofdmenu, zoals in het ontwerp */
.site-header__nav .menu-item > a {
    padding-left: 14px;
    padding-right: 14px;
}

/* De instagramstrook */
.hh-social__handles a {
    font: 500 13px/1 var(--font-body);
    letter-spacing: .04em;
    color: var(--c-roze);
}

.hh-social__handles a + a {
    margin-left: 18px;
}

#instafeed {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

#instafeed > div {
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
}

@media (max-width: 991px) {
    #instafeed {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* 4. TYPOGRAFIE ------------------------------------------------------------ */

.hh-eyebrow {
    font: italic 500 20px/1.3 var(--font-accent);
}

.hh-eyebrow--roze { color: var(--c-roze); }
.hh-eyebrow--coral { color: var(--c-accent); }
.hh-eyebrow--blush { color: var(--c-blush); }

.hh-sectionhead__title {
    font: 700 34px/1 var(--font-heading);
    text-transform: uppercase;
}

/* Een regel onder de sectiekop. De #content ervoor is nodig omdat
   stylesheet.css onder 767px alle alinea's op .9rem zet. */
#content .hh-sectionhead__text {
    margin-top: 12px;
    font: 400 15px/1.6 var(--font-body);
    color: var(--c-mauve);
    max-width: 52ch;
}

.hh-sectionhead__link {
    font: 500 13px/1 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-roze);
    border-bottom: 1px solid;
    white-space: nowrap;
}

/* 4b. SERVICEPAGINA'S ------------------------------------------------------
   Verzendkosten, retourneren, privacy, voorwaarden: CMS-pagina's met gewone
   tekst in plaats van blokken. Die hadden geen enkele opmaak: koppen op de
   maat van de browser, regels over de volle breedte en tabellen zoals ze
   uit Excel kwamen.

   Alles hangt aan de wikkel .hh-tekst, zodat deze regels nooit in de weg
   zitten bij de pagina's die wel met blokken werken. Zet in het CMS dus:

       <div class="hh-tekst"> ... </div>

   De tabelregels staan daarbuiten, want geen enkel eigen component gebruikt
   een table; die mogen overal in de winkel gelden.
   ------------------------------------------------------------------------- */

.hh-tekst {
    max-width: 68ch;
    padding: 8px 0 56px;
}

.hh-tekst h1 {
    font: 700 46px/1 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0 0 20px;
}

.hh-tekst h2 {
    font: 700 28px/1.1 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 44px 0 14px;
}

.hh-tekst h3 {
    font: 600 14px/1.3 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-roze);
    margin: 32px 0 10px;
}

/* De #content ervoor is nodig omdat stylesheet.css onder 767px alle
   alinea's op .9rem zet, wat hier 14,4px zou geven. */
#content .hh-tekst p,
#content .hh-tekst li {
    font: 400 16px/1.7 var(--font-body);
    color: var(--c-rose);
    margin: 0 0 16px;
}

.hh-tekst ul,
.hh-tekst ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

#content .hh-tekst li {
    margin-bottom: 8px;
}

.hh-tekst li::marker {
    color: var(--c-roze);
}

.hh-tekst a {
    color: var(--c-roze);
    border-bottom: 1px solid rgba(242, 167, 184, .4);
}

.hh-tekst a:hover {
    color: var(--c-blush);
    border-bottom-color: var(--c-blush);
}

.hh-tekst b,
.hh-tekst strong {
    color: var(--c-text);
    font-weight: 600;
}

/* Een tabel die een pagina breed is past niet in een leeskolom */
.hh-tekst--breed {
    max-width: none;
}

/* Tabellen in gewone tekst. Komen meestal uit Excel geplakt, met width,
   cellpadding en xl65-achtige classes erin; die worden hier overstemd. */
#content .cms_content table {
    width: 100%;
    max-width: 720px;
    border-collapse: collapse;
    margin: 8px 0 28px;
    font: 400 15px/1.5 var(--font-body);
}

#content .cms_content table td,
#content .cms_content table th {
    width: auto;
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    vertical-align: top;
    color: var(--c-rose);
}

/* De eerste rij als kop, ook als er geen thead omheen staat */
#content .cms_content table tr:first-child td,
#content .cms_content table th {
    font: 600 12px/1.3 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
    border-bottom-color: rgba(255, 255, 255, .22);
}

#content .cms_content table tr:first-child td b,
#content .cms_content table th b {
    font-weight: 600;
    color: var(--c-gedempt);
}

#content .cms_content table tr:last-child td {
    border-bottom: 0;
}

/* 5. KNOPPEN ---------------------------------------------------------------
   Twee gezichten, meer niet: gevuld roze met donkere tekst is de
   hoofdactie, omlijnd creme staat ernaast. De markup gebruikt vijf
   Bootstrap-varianten door elkaar (de eigen blokken btn-light en
   btn-outline-light, de basis btn-primary, btn-secondary en
   btn-outline-primary), dus die moeten alle vijf op die twee gezichten
   uitkomen.

   Bootstrap kleurt niet alleen rust en hover maar ook focus en ingedrukt,
   elk met een eigen selector en een eigen blauw. De basis overschrijft
   alleen rust en hover, dus sprong een knop die je ingedrukt hield terug
   naar het blauw van Bootstrap, inclusief de blauwe gloed eromheen.
   Daarom staan hieronder alle toestanden, met precies dezelfde
   :not(:disabled):not(.disabled) als Bootstrap zelf: het gewicht is dan
   gelijk en hype.css wint omdat hij als laatste geladen wordt.
   ------------------------------------------------------------------------- */

.btn {
    padding: 14px 22px;
    font: 600 13px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 0;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Gevuld, in rust */
.btn-primary,
.btn-light {
    background-color: var(--c-roze);
    border-color: var(--c-roze);
    color: var(--c-bg);
}

/* Gevuld, aangewezen, met de focus erop of ingedrukt */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.btn-light:hover,
.btn-light:focus,
.btn-light.focus,
.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show > .btn-light.dropdown-toggle {
    background-color: var(--c-blush);
    border-color: var(--c-blush);
    color: var(--c-bg);
}

/* Omlijnd, in rust */
.btn-secondary,
.btn-outline-primary,
.btn-outline-light {
    background-color: transparent;
    border: 1px solid var(--c-rose);
    color: var(--c-rose);
}

/* Omlijnd keert om bij het aanwijzen, de gewone route voor zo'n knop, maar
   dan naar creme in plaats van naar het wit van Bootstrap. */
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light.focus,
.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show > .btn-outline-light.dropdown-toggle {
    background-color: var(--c-text);
    border-color: var(--c-text);
    color: var(--c-bg);
}

/* De gloed om een knop met de focus erop, in het roze van het thema */
.btn:focus,
.btn.focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus,
.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-light.dropdown-toggle:focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-primary.dropdown-toggle:focus,
.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 2px rgba(242, 167, 184, .35);
}

/* 5a. NERGENS WIT OP ROZE --------------------------------------------------
   Het roze van dit palet is licht: witte tekst erop haalt de contrastnorm
   niet en leest slecht. De basis zet op een paar plekken buiten .btn toch
   hard wit op de primaire kleur. Die staan hier, elk met dezelfde selector
   als de basis zodat het gewicht klopt.
   ------------------------------------------------------------------------- */

/* De bevestiging na het in de wagen of op de verlanglijst leggen */
#cart_putin_confirmation button:last-child,
#wishlist_putin_confirmation button:last-child {
    background-color: var(--c-roze);
    color: var(--c-bg);
}

#cart_putin_confirmation button,
#wishlist_putin_confirmation button {
    padding: 13px 20px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 0;
}

#cart_putin_confirmation button:first-child,
#wishlist_putin_confirmation button:first-child {
    background-color: transparent;
    border: 1px solid var(--c-rose);
    color: var(--c-rose);
}

/* De cookiemelding */
#cookie-message button {
    padding: 11px 22px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--c-roze);
    border-radius: 0;
    color: var(--c-bg);
}

#cookie-message button:hover {
    background: var(--c-blush);
    color: var(--c-bg);
}

/* Het telrondje bij het hartje in de header */
.site-header__icon .badge {
    color: var(--c-bg);
    font-weight: 700;
}

/* De verstuurknop van het contactformulier. De basis maakt hier een gevulde
   knop van, anders dan de andere formulieren in de winkel. */
#sw-form-contactform .sw-form-submit {
    padding: 14px 28px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--c-roze);
    color: var(--c-bg);
    border-radius: 0;
}

#sw-form-contactform .sw-form-submit:hover {
    background: var(--c-blush);
    color: var(--c-bg);
}

/* 5b. DE REST VAN HET BLAUW ------------------------------------------------
   Bootstrap en de basis laten op meer plekken dan de knoppen een blauw
   achter: de gloed om een veld met de focus erop, en het vinkje en het
   bolletje die de browser zelf tekent.
   ------------------------------------------------------------------------- */

.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: var(--c-roze);
    box-shadow: 0 0 0 2px rgba(242, 167, 184, .25);
}

/* Een aanvinkvakje en een keuzerondje worden door de browser getekend en
   staan standaard in het blauw van het besturingssysteem. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--c-roze);
}

/* 6. HEADER ---------------------------------------------------------------- */

.hh-header {
    background: var(--c-bg);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hh-header__bar {
    min-height: 72px;
}

.hh-logo {
    height: 38px;
    width: auto;
}

/* Op telefoon en tablet staat het logo in het midden van de balk, los van
   het menu-icoon ernaast. De kolommen zijn al static (zie het megamenu),
   dus de balk zelf is het ankerpunt; alleen hier, want op desktop moet het
   megamenu aan de header hangen. */
@media (max-width: 991.98px) {
    .hh-header__bar {
        position: relative;
    }

    .hh-logolink {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* De winkeltas als icoon, met het aantal als rondje erop. concept-1a.js
   zet is-leeg zolang de tas leeg is. */
.hh-tas {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.hh-tas__icoon {
    display: block;
    width: 24px;
    height: 24px;
}

.hh-cart-count {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--c-roze);
    color: var(--c-bg);
    font: 600 10px/17px var(--font-body);
    letter-spacing: 0;
    text-align: center;
}

.hh-cart-count.is-leeg {
    display: none;
}

.hh-plaats {
    font: italic 500 18px/1 var(--font-accent);
    color: var(--c-roze);
    margin-left: 14px;
}

/* 6b. HET HOOFDMENU --------------------------------------------------------
   De basis heeft al een megamenu: het eerste submenuniveau wordt bij hover
   een paneel over de volle breedte met de groepen als kolommen. Alleen de
   maatvoering week af van het ontwerp. De regels die hier eerst stonden
   waren meegekomen uit het concept en hingen aan markup die in dit thema
   niet bestaat; die zijn vervallen.
   ------------------------------------------------------------------------- */

.site-header__nav .menu-level-0 {
    gap: 26px;
}

/* 13px in plaats van 0.95rem, en de link vult de hoogte van de balk zodat de
   muis zonder gat van Heren naar het paneel kan. */
.site-header__nav .menu-level-0 > li > a {
    padding: 29px 0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
}

.site-header__nav .menu-level-0 > li:hover > a,
.site-header__nav .menu-level-0 > li:focus-within > a {
    color: var(--c-roze);
}

/* Een pijltje onder de items die een paneel hebben */
.site-header__nav .menu-level-0 > li.menu-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 0 3px 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.site-header__nav .menu-level-1 {
    padding: 32px 0 40px;
    gap: 32px;
    border-top: 1px solid var(--c-border);
    box-shadow: none;
}

.site-header__nav .menu-level-1 > li > a {
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-roze);
}

.site-header__nav .menu-level-2 li a {
    font-size: 14px;
    color: var(--c-mauve);
}

.site-header__nav .menu-level-2 li a:hover {
    color: var(--c-text);
}

/* 6b. HET RASTER -----------------------------------------------------------
   In het ontwerp staan de blokken niet tegen elkaar aan: er loopt overal een
   smalle naad tussen waar de paginakleur doorheen komt, en rondom ook. Dat is
   hier een halve tussenruimte op elke kolom, zodat het tussen twee blokken op
   acht pixels uitkomt en aan de buitenrand op dezelfde maat.
   ------------------------------------------------------------------------- */

/* style.css zet .col-12 op padding 0, bedoeld voor het winkelwagenscherm.
   Dat raakt hier elke kolom die voor mobiel col-12 meekrijgt: de gutter
   ernaast valt weg en het blok staat 15px verder naar links dan de koppen
   van de secties eromheen. Hier zetten we de maat van Bootstrap terug.
   De volle blokken hebben geen container, dus die houden hun eigen naad. */
.container > .row > .col-12 {
    padding-left: 15px;
    padding-right: 15px;
}

/* Een rij met dezelfde smalle naad als tussen de volle blokken, 8px, in
   plaats van de gutter van 30px. De marge van 11px vangt het verschil op
   tussen de 15px van Bootstrap en de 4px hier, zodat de buitenrand van de
   tegels precies onder de kop van de sectie blijft liggen. */
.row.hh-naad {
    margin-left: 11px;
    margin-right: 11px;
}

.row.hh-naad > [class*="col-"] {
    padding: 4px;
}

.hh-vlak {
    padding: 0 8px;
}

.hh-vlak:first-of-type {
    padding-top: 4px;
}

.hh-vlak .row {
    margin-left: -4px;
    margin-right: -4px;
}

.hh-vlak .row > [class*="col-"] {
    padding: 4px;
}

/* de twee gestapelde tegels naast de tekst, met dezelfde naad ertussen */
.hh-stapel {
    margin-left: 0;
    margin-right: 0;
}

.hh-stapel > [class*="col-"] {
    padding: 0;
}

.hh-stapel > [class*="col-"]:first-child {
    padding-bottom: 8px;
}

/* 7. HERO ------------------------------------------------------------------
   Drieluik: beeld, paneel, beeld. Het paneel is twee van de vier kolommen.
   ------------------------------------------------------------------------- */

.hh-hero__beeld {
    position: relative;
    height: 620px;
    overflow: hidden;
    background: var(--c-groen);
}

.hh-hero__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-hero__label {
    position: absolute;
    left: 16px;
    bottom: 16px;
    font: 500 12px/1 var(--font-body);
    letter-spacing: .04em;
    color: var(--c-text);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.hh-hero__paneel {
    height: 620px;
    padding: 64px;
    background: var(--c-paneel);
}

.hh-hero__titel {
    font: 900 104px/.88 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.hh-hero__tekst {
    font: 400 15px/1.55 var(--font-body);
    color: var(--c-mauve);
    max-width: 44ch;
}

.hh-status {
    font: 500 13px/1 var(--font-body);
    color: var(--c-mauve);
}

.hh-status__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--c-gedempt);
}

.hh-status.is-open .hh-status__dot { background: var(--c-open); }
.hh-status.is-closed .hh-status__dot { background: var(--c-dicht); }

/* 8. VERDIEPINGEN ---------------------------------------------------------- */

.hh-floor {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 620px;
    padding: 40px;
    overflow: hidden;
    background: var(--c-groen);
}

.hh-floor__img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.hh-floor__scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 35%, rgba(10, 12, 10, .85));
}

.hh-floor__body {
    position: relative;
}

.hh-floor__titel {
    font: 900 92px/.9 var(--font-heading);
    text-transform: uppercase;
}

.hh-floor__tekst {
    font: 400 14px/1.5 var(--font-body);
    color: var(--c-rose);
    max-width: 340px;
}

/* 9. TWEE WERELDEN --------------------------------------------------------- */

.hh-werelden {
    background: var(--c-bg);
}

.hh-eyebrow--kapitaal {
    font: 600 12px/1.4 var(--font-body);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hh-werelden__titel {
    font: 900 64px/.92 var(--font-heading);
    text-transform: uppercase;
}

.hh-werelden__tekst {
    font: 400 15px/1.7 var(--font-body);
    color: var(--c-mauve);
    max-width: 44ch;
}

/* Vaste hoogte, anders bepaalt de foto zelf hoe hoog de tegel wordt en loopt
   de sectie op tot het dubbele van de bedoeling. Eén maat voor alle tegels,
   zodat twee tegels naast of onder elkaar altijd even hoog zijn. */
.hh-tegel {
    position: relative;
    display: block;
    height: 240px;
    overflow: hidden;
    background: var(--c-groen);
}

.hh-tegel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-tegel__scrim {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .7));
}

.hh-tegel__label--coral { color: var(--c-accent); }
.hh-tegel__label--roze { color: var(--c-roze); }

.hh-tegel__label {
    position: absolute;
    right: 24px;
    bottom: 18px;
    font: 600 14px/1 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* 10. PRODUCTEN ------------------------------------------------------------
    De kaart komt uit article_list_small.ctp van de basis en is al grotendeels
    goed: hij gebruikt de tokens, dus kleur en hoeken kloppen vanzelf. Hier
    staat alleen wat eigen is aan dit thema.

    De vorige versie van dit blok stond nog tegenover de oude kaart van
    hypeheroes (article_item, article-price). Die markup bestaat hier niet
    meer en die regels zijn vervallen.
    ------------------------------------------------------------------------ */

/* De basis geeft de kaart de paginakleur; in dit ontwerp staan kaarten op
   een eigen vlak. */
.product-card {
    background: var(--c-surface);
}

/* Het merk is een accent, geen bijzaak */
.product-card__brand {
    color: var(--c-roze);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.product-card__name {
    font-family: var(--font-body), sans-serif;
    font-weight: 500;
}

/* Zes op een rij in de strook op de homepage. Dat is een etalage, geen
   overzicht, dus de kaarten mogen kleiner. Onder lg drie, zodat zes
   artikelen twee volle rijen blijven. */
.hh-uitgelicht .row > .article_item_small {
    padding: 0 7px;
    margin-bottom: 14px;
}

@media (min-width: 1200px) {
    .hh-uitgelicht .row > .article_item_small {
        flex: 0 0 16.6667%;
        max-width: 16.6667%;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .hh-uitgelicht .row > .article_item_small {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

/* Een artikel zonder foto geeft een lege kaart. Een gestreept vlak laat zien
   dat er een foto hoort te staan in plaats van dat er niets is. */
.product-card__image-wrap:not(:has(img)) {
    background: repeating-linear-gradient(135deg, var(--c-groen) 0 10px, var(--c-surface) 10px 20px);
    min-height: 220px;
}


/* 11. DE WINKEL ------------------------------------------------------------ */

/* De foto groeit mee met het paneel ernaast: 620px is de bodem, niet de
   hoogte. Stond de hoogte vast, dan bleef er onder de foto een gat staan
   zodra de tekst in het paneel langer werd. Het rekken zelf staat in
   sectie 15, want dat hoort bij lg en hoger. */
.hh-winkel__beeld {
    min-height: 620px;
    overflow: hidden;
    background: var(--c-groen);
}

.hh-winkel__beeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-winkel__paneel {
    padding: 64px;
    background: var(--c-paneel);
}

.hh-winkel__titel {
    font: 900 56px/.95 var(--font-heading);
    text-transform: uppercase;
}

.hh-winkel__tekst {
    font: 400 15px/1.6 var(--font-body);
    color: var(--c-mauve);
    max-width: 44ch;
}

.hh-hours {
    margin: 0;
    font: 400 14px/1.5 var(--font-body);
    color: var(--c-mauve);
}

/* De dagen en de tijden staan als Bootstrap-kolommen in een row, en zo'n
   kolom heeft 15px padding links. Bij de dd houdt dat de tijden netjes van
   de dag af, maar bij de dt zette het de hele lijst 15px in ten opzichte
   van de kop erboven. */
.hh-hours dt {
    font-weight: 600;
    color: var(--c-text);
    padding-left: 0;
}

.hh-hours dd {
    margin: 0;
}

.hh-ps {
    padding: 24px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(242, 167, 184, .25);
}

.hh-ps__titel {
    font: 700 24px/1 var(--font-heading);
    text-transform: uppercase;
}

.hh-ps__tekst {
    font: 400 14px/1.5 var(--font-body);
    color: var(--c-mauve);
}

/* 12. TEAM, MERKEN EN KAARTEN ---------------------------------------------- */

.hh-portret {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background: var(--c-groen);
}

.hh-portret img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.hh-portret:hover img {
    transform: scale(1.03);
}

.hh-member__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--c-groen);
    flex: none;
    overflow: hidden;
}

.hh-member__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-member__name {
    display: block;
    font: 600 16px/1.3 var(--font-body);
}

.hh-member__role {
    display: block;
    font: 400 12px/1.4 var(--font-body);
    color: var(--c-gedempt);
}

.hh-merkenwand {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.hh-merk {
    display: block;
    text-align: center;
}

.hh-merk__tegel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 16px;
    background: #fff;
}

.hh-merk__tegel img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    mix-blend-mode: multiply;
    transition: transform .3s ease;
}

.hh-merk:hover .hh-merk__tegel img {
    transform: scale(1.05);
}

.hh-merk__naam {
    display: block;
    margin-top: 8px;
    font: 500 11px/1.4 var(--font-body);
    letter-spacing: .04em;
    color: var(--c-gedempt);
}

.hh-kaart {
    background: var(--c-surface);
    padding: 28px;
}

.hh-kaart__tekst {
    font: 400 16px/1.7 var(--font-body);
    color: var(--c-text);
    margin-bottom: 12px;
}

.hh-kaart__tekst a {
    border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.hh-kaart__tekst--klein {
    font-size: 14px;
    color: var(--c-gedempt);
}

/* 13. FORMULIER ------------------------------------------------------------ */

.hh-formulier {
    font: 500 12px/1.4 var(--font-body);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--c-gedempt);
}

.hh-formulier .row {
    margin-left: -8px;
    margin-right: -8px;
}

.hh-formulier .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.hh-formulier input.form-control,
.hh-formulier select.form-control,
.hh-formulier textarea.form-control {
    display: block;
    width: 100%;
    font: 400 15px/1.5 var(--font-body);
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-text);
    background-color: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    box-shadow: none;
    padding: 12px 14px;
    margin-top: 6px;
}

.hh-formulier input.form-control:focus,
.hh-formulier textarea.form-control:focus {
    border-color: var(--c-roze);
    box-shadow: none;
    outline: none;
}

.hh-formulier textarea.form-control {
    height: 170px;
}

.hh-formulier .sw-form-submit {
    margin-top: 16px;
    padding: 14px 26px;
    font: 600 13px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-bg);
    background: var(--c-roze);
    border: 0;
}

.hh-formulier .sw-form-submit:hover {
    opacity: .85;
}

/* 13b. OVERZICHT -----------------------------------------------------------
   Blok hype_c1c_overzicht. De kaarten zijn dezelfde als op de homepage
   (sectie 10), hier alleen de kop, de soorten en de band onderaan.
   Linkkleuren staan met #content ervoor: a zet ze anders op inherit
   met een id-selector, en die weegt zwaarder dan een losse class.
   ------------------------------------------------------------------------- */

/* style.css zet .row shopbreed op marge 0, waardoor de kolommen 15px
   inspringen ten opzichte van alles wat niet in een rij staat (kruimelpad,
   soorten, het raster). Hier de marges van Bootstrap terug. */
.hh-paskamer .row,
.hh-pdp .row {
    margin-left: -15px;
    margin-right: -15px;
}

/* p en h1 zetten de marges op 0 en wegen zwaarder dan een losse
   class; vandaar voor de regels hieronder die een marge zetten. */

.hh-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
    font: 500 12px/1.4 var(--font-body);
    color: var(--c-gedempt);
}

#content .hh-crumbs a:hover {
    color: var(--c-roze);
}

.hh-listhead {
    padding: 32px 0 0;
}

.hh-listhead__title {
    font: 700 64px/.95 var(--font-heading);
    text-transform: uppercase;
    color: var(--c-text);
}

/* direct onder de titel, op dezelfde linkerlijn als kruimelpad en soorten */
.hh-listhead__text {
    max-width: 520px;
    margin-top: 16px;
    font: 400 15px/1.55 var(--font-body);
    color: var(--c-mauve);
}

/* 13b2. FILTERS -----------------------------------------------------------
   Blok hype_c1c_filters, de werking zit in concept-1a.js (3f). Bovenaan de
   soorten als knoppenrij, daaronder een balk met merk, prijs, sale en
   sorteren. Op desktop klappen merk en prijs uit als paneeltje, op telefoon
   en tablet staan ze in een lade achter de knop Filters.
   ------------------------------------------------------------------------- */

/* De soorten en de pillen zijn knoppen met een kader. De filters zelf staan
   bewust anders, als tekst in een werkbalk (zie verderop), zodat soort en
   filter niet op elkaar lijken. */
.hh-filters__soorten button,
.hh-filters__pil {
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0;
    background: transparent;
    font: 500 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-rose);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease;
}

.hh-filters__soorten button:hover {
    border-color: var(--c-roze);
}

/* de werkbalk: tekst zonder kader, tussen twee dunne lijnen */
.hh-filters__open,
.hh-filter > summary,
.hh-filter--sale,
.hh-sorteer__select {
    padding: 16px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font: 600 14px/1 var(--font-body);
    color: var(--c-text);
    cursor: pointer;
    transition: color .2s ease;
}

.hh-filters__open:hover,
.hh-filter > summary:hover,
.hh-filter--sale:hover,
.hh-sorteer__select:hover {
    color: var(--c-roze);
}

.hh-filters__soorten {
    display: flex;
    gap: 8px;
    padding: 28px 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.hh-filters__soorten::-webkit-scrollbar {
    display: none;
}

.hh-filters__soorten button {
    flex: 0 0 auto;
}

.hh-filters__soorten button.is-actief {
    background: var(--c-roze);
    border-color: var(--c-roze);
    color: var(--c-bg);
}

.hh-filters__soorten button:disabled {
    opacity: .3;
    cursor: default;
}

.hh-filters__balk {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 8px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.hh-filters__open {
    display: none;
}

.hh-filters__paneel {
    display: flex;
    align-items: center;
    gap: 28px;
}

.hh-filters__paneelkop,
.hh-filters__paneelvoet,
.hh-filters__dimmer {
    display: none;
}

.hh-filter {
    position: relative;
    margin: 0;
}

.hh-filter > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.hh-filter > summary::-webkit-details-marker {
    display: none;
}

.hh-filter > summary::after {
    content: '';
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}

.hh-filter[open] > summary {
    color: var(--c-roze);
}

.hh-filter[open] > summary::after {
    margin-top: 3px;
    transform: rotate(225deg);
}

.hh-filter__opties {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    z-index: 30;
    min-width: 240px;
    max-height: 320px;
    padding: 10px 16px;
    overflow-y: auto;
    background: var(--c-surface);
    border: 1px solid rgba(242, 167, 184, .25);
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .8);
}

.hh-filter__opties label,
.hh-filter--sale {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.hh-filter__opties label {
    padding: 7px 0;
    font: 400 14px/1.3 var(--font-body);
    color: var(--c-text);
    white-space: nowrap;
}

.hh-filter__opties label.is-leeg {
    opacity: .4;
}

.hh-filter__n {
    margin-left: auto;
    padding-left: 12px;
    color: var(--c-gedempt);
    font-size: 12px;
}

.hh-filters input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--c-roze);
}

.hh-filters__rechts {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.hh-filters__aantal {
    font: 400 13px/1 var(--font-body);
    color: var(--c-gedempt);
    white-space: nowrap;
}

.hh-sorteer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.hh-sorteer__label {
    font: 400 14px/1 var(--font-body);
    color: var(--c-gedempt);
    white-space: nowrap;
}

/* de opties van een select krijgen de achtergrond van de select zelf */
.hh-sorteer__select {
    padding-right: 4px;
    background: var(--c-bg);
}

.hh-filters__actief {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hh-filters__actief:not(:empty) {
    padding-bottom: 20px;
}

.hh-filters__pil {
    padding: 8px 12px;
    background: var(--c-paneel);
    border-color: var(--c-paneel);
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    color: var(--c-text);
}

.hh-filters__pil:hover {
    border-color: var(--c-roze);
}

.hh-filters__pil--wis {
    background: transparent;
    border-color: transparent;
    color: var(--c-roze);
    text-decoration: underline;
}

/* kaarten die niet passen; weegt zwaarder dan #content .article_item */
#content .article_item.is-weg {
    display: none;
}

.hh-filters__leeg {
    padding: 40px 0;
    font: 400 15px/1.5 var(--font-body);
    color: var(--c-mauve);
}

.hh-filters__wis {
    margin-left: 6px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--c-roze);
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 991.98px) {
    .hh-filters__open {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .hh-filters__aantal,
    .hh-sorteer__label {
        display: none;
    }

    .hh-filters__paneel {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1060;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: min(380px, 88vw);
        padding: 0 20px;
        overflow-y: auto;
        background: var(--c-bg);
        border-left: 1px solid rgba(255, 255, 255, .08);
        transform: translateX(100%);
        transition: transform .3s ease;
    }

    .hh-filters.is-open .hh-filters__paneel {
        transform: none;
    }

    .hh-filters__dimmer {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(0, 0, 0, .6);
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }

    .hh-filters.is-open .hh-filters__dimmer {
        opacity: 1;
        pointer-events: auto;
    }

    .hh-filters__paneelkop {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 18px 0;
        background: var(--c-bg);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        font: 600 13px/1 var(--font-body);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--c-text);
    }

    .hh-filters__sluit {
        padding: 0 4px;
        border: 0;
        background: none;
        font-size: 26px;
        line-height: 1;
        color: var(--c-text);
        cursor: pointer;
    }

    .hh-filter {
        border-bottom: 1px solid rgba(255, 255, 255, .1);
    }

    .hh-filter > summary,
    .hh-filter--sale {
        justify-content: space-between;
        padding: 18px 0;
        border: 0;
    }

    .hh-filter__opties {
        position: static;
        min-width: 0;
        max-height: none;
        padding: 0 0 12px;
        border: 0;
        box-shadow: none;
        background: none;
    }

    .hh-filter--sale {
        flex-direction: row-reverse;
    }

    .hh-filters__paneelvoet {
        display: block;
        position: sticky;
        bottom: 0;
        margin-top: auto;
        padding: 16px 0 20px;
        background: var(--c-bg);
    }

    .hh-filters__toon {
        display: block;
        width: 100%;
    }

    body.hh-lade-open {
        overflow: hidden;
    }

    body.hh-lade-open .whatsapp-button {
        display: none;
    }
}

/* Het overzicht op vier kolommen in plaats van de zes van de homepage, op
   tablet drie. De mobiele regel van het thema (twee, met !important) blijft. */
.hh-listing .article-list.mini {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 991.98px) {
    .hh-listing .article-list.mini {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Een kaart binnen de container in de stijl van .hh-ps, met ruimte eronder,
   zodat hij los van de footer staat in plaats van erin over te lopen. */
.hh-paskamer {
    padding: 0 0 64px;
}

.hh-paskamer__kaart {
    padding: 32px;
    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(242, 167, 184, .25);
    color: var(--c-text);
}

.hh-paskamer__title {
    font: 700 32px/1 var(--font-heading);
    text-transform: uppercase;
}

/* 13c0. DE GALERIJ ---------------------------------------------------------
   Zoals in het concept: alle foto's groot, twee naast elkaar, en de kolom
   met de naam, de maat en de winkelwagenknop blijft rechts staan terwijl je
   er langs scrolt.

   De basis toonde een grote foto met een rijtje miniaturen eronder. Die
   grote foto is een kopie van de eerste uit de lijst, dus die gaat weg; de
   lijst zelf wordt het raster. hype.js (stap 5) zet daar de volle foto in
   de src, want SW-Retail levert ze als miniaturen van 66x100.
   ------------------------------------------------------------------------- */

@media (min-width: 992px) {
    /* Het ontwerp heeft 7 om 5, niet half om half */
    .pd__grid {
        grid-template-columns: 7fr 5fr;
        align-items: start;
    }

    .pd__sidebar {
        position: sticky;
        top: 96px;
    }
}

.pd__main-image {
    display: none;
}

.pd__thumbnails .article_images_all {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pd__thumbnails .article_images_all li {
    margin: 0;
    background: var(--c-groen);
}

.pd__thumbnails .article_images_all img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    cursor: default;
}

/* In het concept liep de eerste foto over beide kolommen. Dat is hier niet
   overgenomen: SW-Retail levert maximaal 600px breed en over de volle
   kolom wordt dat op een gewoon scherm al 775px, dus 1,3x uitvergroot en
   zichtbaar zachter. Twee naast elkaar is 383px uit een bron van 600 en
   blijft scherp, ook op een scherm met dubbele pixeldichtheid.

   Komen er ooit grotere bronbestanden, dan is dit de regel om terug te
   zetten:
       .article_images_all li:first-child { grid-column: 1 / -1; } */

/* 13c. PRODUCTPAGINA ------------------------------------------------------
    De basis levert de werking: galerij met zoom, maatkeuze, voorraad,
    winkelwagen en verlanglijst. Hier staat de maatvoering van het ontwerp
    eroverheen. De regels die hier eerst stonden hingen aan de mockup uit het
    concept (.hh-pdp) en zijn vervallen; die markup bestaat niet meer.
    ------------------------------------------------------------------------ */

.pd__label {
    margin-bottom: 8px;
    font: 500 12px/1.2 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-roze);
}

.pd__name {
    margin-bottom: 14px;
    font: 700 44px/.98 var(--font-heading);
    text-transform: uppercase;
}

.pd__price,
.pd__pricing {
    font: 500 20px/1.2 var(--font-body);
}

.pd__price--old {
    font-size: 15px;
    color: var(--c-gedempt);
}

/* Maatknoppen. De backend rendert deze bij de instelling "knoppen naast
   elkaar"; uitverkochte maten krijgen een streep. */
.pd__sizes .size_select_buttons,
.pd__size-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 6px 0 18px;
}

.pd__sizes .size_select_buttons > *,
.pd__size-buttons > * {
    min-width: 56px;
    padding: 12px 10px;
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text);
    font: 500 14px/1 var(--font-body);
    text-align: center;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.pd__sizes .size_select_buttons > *:hover,
.pd__size-buttons > *:hover {
    border-color: var(--c-roze);
    color: var(--c-roze);
}

.pd__sizes .size_select_buttons > .selected,
.pd__sizes .size_select_buttons > [class*="active"],
.pd__size-buttons > .selected {
    border-color: var(--c-text);
    background: var(--c-text);
    color: var(--c-bg);
}

.pd__sizes .size_select_buttons > [disabled],
.pd__sizes .size_select_buttons > .disabled {
    position: relative;
    color: var(--c-gedempt);
    cursor: default;
}

/* De USP's als vinkjes, niet als iconenrij */
.pd__usp-box {
    margin: 18px 0 20px;
    padding: 0;
    background: transparent;
    border: 0;
}

.pd__usp-item {
    position: relative;
    padding: 3px 0 3px 22px;
    font: 400 13px/1.5 var(--font-body);
    color: var(--c-mauve);
}

.pd__usp-icon {
    display: none;
}

.pd__usp-item::before {
    content: '';
    position: absolute;
    top: 9px;
    left: 2px;
    width: 10px;
    height: 5px;
    border-left: 1.5px solid var(--c-roze);
    border-bottom: 1.5px solid var(--c-roze);
    transform: rotate(-45deg);
}

/* Het winkelpaneel: waar het artikel hangt en of de winkel open is */
.pd__winkel {
    margin: 18px 0;
    padding: 16px 18px;
    background: var(--c-groen);
    font: 400 14px/1.5 var(--font-body);
    color: var(--c-mauve);
}

.pd__winkel .hh-status {
    margin-bottom: 6px;
}

#content .pd__winkel a {
    color: var(--c-roze);
    border-bottom: 1px solid;
}

/* De winkelwagenknop over de volle breedte, zoals in het ontwerp */
.pd__add-to-cart {
    width: 100%;
    padding: 14px 22px;
    font: 600 13px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* 13d. BLOG ----------------------------------------------------------------
    De tekst van een blog komt uit de CMS-pagina, dus de opmaak kan niet aan
    eigen classes hangen: die moet werken op de kale h2, p, figure en
    blockquote die de editor oplevert. Alles hangt daarom onder
    .hh-blog__body.

    De leeskolom is 720px. Dat is rond de 75 tekens per regel, de breedte
    waarop lopende tekst het prettigst leest; de beelden mogen daar met
    --breed buiten treden.
    --------------------------------------------------------------------- */

/* De leeskolom staat gecentreerd onder het beeld dat van rand tot rand
   loopt. Links uitlijnen zoals de rest van 1C laat op een breed scherm een
   half lege pagina achter; bij een lopend verhaal leest het midden beter. */
.hh-blog__kolom {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.hh-blog__kop {
    padding: 48px 0 40px;
}

.hh-blog__titel {
    font: 900 52px/1.04 var(--font-heading);
    color: var(--c-text);
}

/* De #content ervoor is nodig: stylesheet.css zet onder 767px met
   "#content p, .block p" alle alinea's op .9rem, en die ID-selector wint van
   een losse class. Bij een stuk van duizend woorden is 14px te klein. */
#content .hh-blog__intro {
    font: 400 19px/1.6 var(--font-body);
    color: var(--c-mauve);
}

.hh-blog__auteur {
    font: 500 13px/1.4 var(--font-body);
    letter-spacing: .04em;
    color: var(--c-gedempt);
}

.hh-blog__hero {
    margin: 0 0 56px;
}

/* Zonder bovengrens wordt 16:9 op een breed scherm 900px hoog en staat de
   tekst volledig onder de vouw. */
.hh-blog__hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Zolang de foto's nog niet geschoten zijn staat de omschrijving van Rosa in
   het vak, zodat in één oogopslag te zien is wat er nog moet komen. */
.hh-blog__plaatshouder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    padding: 32px;
    background: repeating-linear-gradient(135deg, var(--c-groen) 0 10px, var(--c-surface) 10px 20px);
    font: 400 italic 14px/1.5 var(--font-accent);
    color: var(--c-gedempt);
    text-align: center;
}

.hh-blog__hero .hh-blog__plaatshouder {
    min-height: 360px;
}

/* De lopende tekst */
#content .hh-blog__body p {
    font: 400 17px/1.75 var(--font-body);
    color: var(--c-rose);
    margin: 0 0 24px;
}

.hh-blog__body h2 {
    font: 700 32px/1.12 var(--font-heading);
    color: var(--c-text);
    margin: 56px 0 18px;
}

.hh-blog__body h3 {
    font: 600 20px/1.3 var(--font-body);
    color: var(--c-text);
    margin: 36px 0 12px;
}

.hh-blog__body > *:first-child {
    margin-top: 0;
}

.hh-blog__body strong,
.hh-blog__body b {
    font-weight: 600;
    color: var(--c-text);
}

.hh-blog__body ul,
.hh-blog__body ol {
    font: 400 17px/1.75 var(--font-body);
    color: var(--c-rose);
    margin: 0 0 24px;
    padding-left: 22px;
}

.hh-blog__body li {
    margin-bottom: 8px;
}

/* Een losse link in de tekst, niet de CTA-balk hieronder */
#content .hh-blog__body p > a {
    color: var(--c-roze);
    border-bottom: 1px solid;
}

/* Beeld in de tekst */
.hh-blog__figuur {
    margin: 40px 0;
}

.hh-blog__figuur img {
    display: block;
    width: 100%;
    height: auto;
}

.hh-blog__figuur figcaption {
    margin-top: 10px;
    font: 400 13px/1.5 var(--font-body);
    color: var(--c-gedempt);
}

/* Een citaat van degene die aan het woord is */
.hh-blog__quote {
    margin: 44px 0;
    padding-left: 26px;
    border-left: 2px solid var(--c-accent);
    font: 500 italic 26px/1.35 var(--font-accent);
    color: var(--c-roze);
}

.hh-blog__quote cite {
    display: block;
    margin-top: 12px;
    font: 500 12px/1.4 var(--font-body);
    font-style: normal;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
}

/* De doorverwijzing naar een categorie of merk, midden in het verhaal */
.hh-blog__cta {
    margin: 36px 0;
}

#content .hh-blog__cta a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: var(--c-paneel);
    color: var(--c-text);
    font: 600 15px/1.35 var(--font-body);
    transition: background-color .2s ease;
}

#content .hh-blog__cta a::after {
    content: "\2192";
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--c-roze);
}

#content .hh-blog__cta a:hover {
    background: var(--c-surface);
}

.hh-blog__terug {
    padding: 8px 0 56px;
}

/* Het overzicht. De kop erboven heeft geen onderruimte, want op het
   productoverzicht volgen daar de filters op. */
.hh-bloglijst {
    padding-top: 28px;
}

.hh-blogkaart {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--c-surface);
}

.hh-blogkaart__beeld {
    display: block;
    overflow: hidden;
}

.hh-blogkaart__beeld img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform .4s ease;
}

.hh-blogkaart:hover .hh-blogkaart__beeld img {
    transform: scale(1.03);
}

.hh-blogkaart .hh-blog__plaatshouder {
    min-height: 0;
    aspect-ratio: 3 / 2;
}

.hh-blogkaart__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 22px 24px 26px;
}

.hh-blogkaart__datum {
    display: block;
    margin-bottom: 10px;
    font: 500 11px/1.2 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-roze);
}

.hh-blogkaart__titel {
    display: block;
    margin-bottom: 12px;
    font: 700 24px/1.15 var(--font-heading);
    color: var(--c-text);
}

.hh-blogkaart__intro {
    display: block;
    margin-bottom: 20px;
    font: 400 15px/1.6 var(--font-body);
    color: var(--c-mauve);
}

/* Onderaan de kaart, zodat de link bij elke kaart op dezelfde hoogte staat */
.hh-blogkaart__link {
    display: block;
    margin-top: auto;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-accent);
}

/* De winkelwagenknop over de volle breedte, met het aantalveld en het hartje
   op de regel erboven. Of dat aantalveld er staat is een beheerinstelling,
   dus de rij moet allebei aankunnen. */
.pd__cart-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.pd__quantity {
    flex: 0 0 auto;
    width: 72px;
}

.pd__wishlist-wrap {
    margin-left: auto;
}

.pd__add-to-cart {
    flex: 1 1 100%;
    order: 3;
}

/* De basis zet de tekst op gevulde knoppen op wit. Op dit roze leest donker
   beter; dezelfde keuze als bij .btn-primary. */
#content .pd__add-to-cart,
#content .pd__add-to-cart:hover,
#content .pd__add-to-cart:focus {
    color: var(--c-bg);
}

.pd__sizes-label {
    margin: 0 0 8px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* De pasvormregel onder de titel, uit het artikelveld maat_advies */
.pd__fit {
    margin: 0 0 14px;
    font: 400 14px/1.5 var(--font-body);
    color: var(--c-mauve);
}

/* De uitklapblokken */
.pd__details {
    border-top: 1px solid var(--c-border);
}

.pd__details:last-of-type {
    border-bottom: 1px solid var(--c-border);
}

.pd__details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    list-style: none;
}

.pd__details summary::-webkit-details-marker {
    display: none;
}

.pd__details summary::after {
    content: '+';
    font-size: 18px;
    font-weight: 400;
    color: var(--c-roze);
}

/* Een minteken, als CSS-escape geschreven zodat het niet van een
   tekencodering afhangt. Hier stond een kapot teken gevolgd door een 2;
   dat is wat je als "2" op de productpagina zag. */
.pd__details[open] summary::after {
    content: '\2212';
}

/* De maatknoppen en het hartje op een regel, met de winkelwagenknop strak
   daaronder. In de markup zitten de knop en het hartje samen in een eigen
   div; display: contents haalt die laag weg zodat alle drie in hetzelfde
   raster vallen, en order bepaalt de volgorde. */
.pd__sizes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
}

.pd__sizes-label {
    flex: 0 0 100%;
}

.pd__sizes .size_select_buttons {
    order: 1;
    flex: 1 1 auto;
}

.pd__cart-row--no-qty:not(.hide) {
    display: contents;
}

.pd__cart-row--no-qty .pd__wishlist-wrap {
    order: 2;
    margin-left: auto;
}

.pd__cart-row--no-qty .pd__add-to-cart {
    order: 3;
    flex: 0 0 100%;
    margin-top: 14px;
}

.pd__details-body {
    padding-bottom: 18px;
    font: 400 14px/1.6 var(--font-body);
    color: var(--c-mauve);
}

.pd__details-body p {
    margin: 0 0 12px;
}

.pd__details-body p:last-child {
    margin-bottom: 0;
}


/* 14. FOOTER --------------------------------------------------------------- */

.hh-footer {
    background: var(--c-paneel);
    color: var(--c-rose);
    font: 400 14px/1.7 var(--font-body);
}

.hh-footer a:hover {
    color: var(--c-roze);
}

.hh-footer h3 {
    font: 700 22px/1 var(--font-heading);
    text-transform: uppercase;
    color: var(--c-text);
    margin-bottom: 14px;
}

.hh-footer__col a {
    display: block;
}

.hh-footer__logo {
    height: 50px;
    width: auto;
    margin-bottom: 20px;
}

.hh-hours--footer {
    color: var(--c-rose);
}

.hh-hours--footer dt {
    color: var(--c-text);
}

.hh-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, .12);
    font: 400 12px/1.5 var(--font-body);
    color: var(--c-gedempt);
}

.hh-footer__pay img {
    height: 20px;
    width: auto;
    margin-left: 10px;
}

/* 13e. HET OVERZICHT -------------------------------------------------------
   Zoals op de conceptpagina: de subcategorieen als knoppen eronder, de
   filters in een balk boven het raster in plaats van in een kolom opzij, en
   het raster over de volle breedte.

   De markup van de filters komt van SW-Retail en ligt vast: een div
   .filter-block met als directe kinderen een li .filter-block-header en een
   div .filter-block-options. De webshop-JS hangt daaraan (closest("div.
   filter-block"), children("li")) en zet bij een klik op de kop de class
   filter-open op allebei. Die class was nergens gestyled; hier wordt het
   het open- en dichtzetten van het paneel.
   ------------------------------------------------------------------------- */

.hh-lijstkop {
    margin-bottom: 20px;
}

.listing-page__title {
    font: 700 46px/1 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0;
}

/* De rij knoppen. auto_categories levert een Bootstrap-row met kolommen;
   display: contents haalt die laag weg zodat de kolommen zelf de knoppen
   in de rij worden, naast Alles. */
.hh-subcats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

/* Staat er geen enkele subcategorie, dan blijft alleen Alles over en dat
   is een knop naar de pagina waar je al bent. Dan maar helemaal weg. */
.hh-subcats:not(:has(.auto_categories_url)) {
    display: none;
}

.hh-subcats .auto_categories {
    display: contents;
}

.hh-subcats .auto_categories > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

.hh-subcat,
.hh-subcats .auto_categories_url {
    display: block;
    padding: 9px 16px;
    border: 1px solid var(--c-border);
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-rose);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.hh-subcat:hover,
.hh-subcats .auto_categories_url:hover {
    border-color: var(--c-rose);
    color: var(--c-text);
    text-decoration: none;
}

/* Alles is waar je nu staat zolang je geen subcategorie hebt gekozen */
.hh-subcat.is-actief {
    background: var(--c-roze);
    border-color: var(--c-roze);
    color: var(--c-bg);
}

.hh-subcats .auto_categories_name {
    display: block;
}

/* De balk zelf */
.hh-balk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 28px;
    padding: 12px 0;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.hh-balk__rechts {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.hh-balk__telling,
.hh-balk__label {
    font: 500 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
    margin: 0;
}

/* "24 artikelen uit 85" brak over drie regels en duwde de keuzelijsten
   ernaast in de knel. */
.hh-balk__telling {
    margin-right: 8px;
    white-space: nowrap;
}

.hh-balk select {
    padding: 8px 12px;
    border: 1px solid var(--c-border);
    border-radius: 0;
    background: var(--c-surface);
    color: var(--c-text);
    font: 500 12px/1 var(--font-body);
    letter-spacing: .04em;
}

/* De langste keuze is "Prijs aflopend"; zonder maat sneed de lijst die af */
.hh-balk #sort_order {
    min-width: 150px;
}

.hh-balk #item_amount {
    min-width: 72px;
}

/* Onder lg past de balk niet op een regel: de sorteerlijst liep van het
   scherm af en "Tonen" kwam er helemaal niet meer bij. */
@media (max-width: 991.98px) {
    .hh-balk {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hh-balk__rechts {
        margin-left: 0;
        flex-wrap: wrap;
    }

    .hh-balk #sort_order,
    .hh-balk #item_amount {
        flex: 1 1 120px;
        min-width: 0;
    }
}

/* Vanaf lg staan de filters in de balk. Daaronder blijven ze de la die over
   de pagina schuift, want vijf uitklappanelen naast elkaar passen niet op
   een telefoon. */
@media (min-width: 992px) {
    .listing-page__filter {
        position: static;
        flex: 0 1 auto;
        padding: 0;
    }

    /* De kop "Filters" en de sluitknop horen bij de la, niet bij de balk */
    .listing-page__filter-title,
    .listing-page__filter-close {
        display: none;
    }

    .filter {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .filter-block {
        position: relative;
        margin: 0;
        padding: 0;
        border-bottom: 0;
    }

    .filter-block-header {
        display: flex;
        align-items: center;
        /* Het pijltje is een gedraaid vierkantje: de schuine stand maakt
           zijn omhullende doos breder dan de 7px, vandaar de ruimere gap. */
        gap: 11px;
        padding: 9px 14px;
        border: 1px solid var(--c-border);
        font: 600 12px/1 var(--font-body);
        letter-spacing: .06em;
        color: var(--c-rose);
        cursor: pointer;
        margin: 0;
        transition: border-color .2s ease, color .2s ease;
    }

    .filter-block-header:hover {
        border-color: var(--c-rose);
        color: var(--c-text);
    }

    /* Een pijltje omlaag dat omklapt als het paneel open staat */
    .filter-block-header::after {
        content: '';
        width: 7px;
        height: 7px;
        border-right: 1px solid currentColor;
        border-bottom: 1px solid currentColor;
        transform: translateY(-2px) rotate(45deg);
        transition: transform .2s ease;
    }

    .filter-block-header.filter-open {
        border-color: var(--c-roze);
        color: var(--c-roze);
    }

    .filter-block-header.filter-open::after {
        transform: translateY(1px) rotate(-135deg);
    }

    /* SW-Retail zet zelf een style-blok in de pagina dat vanaf 768px een
       Font Awesome-pijltje (\f078, omgeklapt \f077) absoluut op 30px van
       rechts aan elke li in het filter hangt. In de kolom van de basis
       stond dat netjes rechts, maar in de balk valt het over de tekst van
       de knop. Dat blok staat na hype.css in de pagina, dus dezelfde
       selector verliest; de id van de aside geeft het benodigde gewicht.
       Alleen vanaf lg: tussen 768 en 992 is het filter nog de la en is dat
       pijltje het enige dat er staat. */
    #category-filter form.filter > .filter-block li::before {
        content: none;
    }

    /* Het paneel hangt onder de knop in plaats van in de kolom te staan.
       Zonder filter-open staat het dicht; die class zet de webshop-JS.
       Hetzelfde style-blok van SW-Retail regelt dit ook al, en wint omdat
       het later in de pagina staat; deze regels staan er voor het geval
       dat verdwijnt. Vandaar ook block en niet flex: anders zou het
       verschillen van wat er nu gebeurt. */
    .filter-block-options {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        z-index: 30;
        min-width: 240px;
        max-width: 340px;
        max-height: 320px;
        overflow-y: auto;
        padding: 14px 16px;
        background: var(--c-surface);
        border: 1px solid var(--c-border);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    }

    .filter-block-options.filter-open {
        display: block;
    }

    .filter-block-item {
        padding: 5px 0;
    }
}

/* De vrije velden onder de productnaam: pasvorm, maatserie en wat het model
   draagt. Een label van vaste breedte ervoor, zodat de drie regels onder
   elkaar uitlijnen als een klein tabelletje. */
.pd__pasvorm {
    margin: 14px 0 22px;
    padding: 14px 16px;
    background: var(--c-surface);
}

/* Staat "Maat advies" op nee, dan rendert het blok wel maar komt er geen
   enkele regel in. Zonder dit slot zou elk artikel zonder maatadvies een
   leeg grijs vlak onder de naam krijgen. */
.pd__pasvorm:not(:has(.pd__pasvorm-regel)) {
    display: none;
}

#content .pd__pasvorm-regel {
    display: flex;
    gap: 12px;
    margin: 0;
    font: 400 14px/1.6 var(--font-body);
    color: var(--c-rose);
}

.pd__pasvorm-label {
    flex: 0 0 92px;
    font: 500 12px/1.9 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
}

#content .pd__duurzaam {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px;
    font: 500 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-open);
}

.pd__duurzaam::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-open);
}

/* 14b. SYSTEEMPAGINA'S -----------------------------------------------------
   Winkelwagen, afrekenen, inloggen, account en bedankt. De markup van deze
   pagina's komt van SW-Retail en ligt grotendeels vast, dus hier staat
   alleen wat de basis anders kleurt dan het ontwerp: de keuzeblokken in de
   zijkolom zijn geen knoppen maar divs en missen daardoor alles uit sectie
   5, en de omlijnde varianten keerden om naar wit.

   De plantenschetsen keren hier terug. Op de homepage en de conceptpagina's
   dragen ze de sfeer; aan deze kant van de winkel was daar niets van over.
   Elke pagina krijgt een andere schets, zodat het niet hetzelfde behang
   wordt.
   ------------------------------------------------------------------------- */

/* Een schets achter de pagina, vast in beeld zodat hij bij het scrollen
   blijft staan in plaats van met de inhoud mee te lopen. Het vlak eroverheen
   drukt hem terug tot een suggestie; zonder dat vlak vecht de tekening met
   de tekst. Alleen vanaf lg: daaronder is er geen marge om hem in kwijt te
   kunnen en zou hij achter de inhoud vandaan komen. */
/* /checkout rendert eerst een lege schil en haalt de winkelwagen daarna via
   AJAX op. In die schil is {page_type} leeg, dus daar bestaat geen
   body.layout-checkout en valt het kruimelpad ook niet weg via base.ctp.
   Het ajax-hulpblokje kent de url wel. */
body:has(#ajax-helper[data-url^="/checkout"]) .listing-page__breadcrumb {
    display: none;
}

@media (min-width: 992px) {
    body.layout-checkout,
    body:has(#ajax-helper[data-url^="/checkout"]),
    body.layout-customer_login,
    body.layout-customer_reset_password,
    body.layout-customer_modify,
    body.layout-customer_orders,
    body.layout-wishlist,
    body.layout-order_finished {
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    /* Winkelwagen en afrekenen: twee schetsen in tegenoverliggende hoeken.
       De eerste laag is het vlak dat ze allebei terugdringt, de twee
       daaronder zijn de tekeningen. Twee in plaats van een, want de
       afrekenpagina is lang en heeft aan weerskanten lege marge. */
    body.layout-checkout,
    body:has(#ajax-helper[data-url^="/checkout"]) {
        background-image:
            linear-gradient(rgba(20, 16, 22, .72), rgba(20, 16, 22, .72)),
            url("../img/schets/schets-e-licht.svg"),
            url("../img/schets/schets-b-licht.svg");
        background-position: center, left -280px bottom -200px, right -300px top -180px;
        background-size: auto, 840px auto, 780px auto;
    }

    body.layout-customer_login,
    body.layout-customer_reset_password {
        background-image:
            linear-gradient(rgba(20, 16, 22, .76), rgba(20, 16, 22, .76)),
            url("../img/schets/schets-b-licht.svg");
        background-position: center, right -280px top 40px;
        background-size: auto, 860px auto;
    }

    body.layout-customer_modify,
    body.layout-customer_orders {
        background-image:
            linear-gradient(rgba(20, 16, 22, .76), rgba(20, 16, 22, .76)),
            url("../img/schets/schets-a-licht.svg");
        background-position: center, right -340px bottom -200px;
        background-size: auto, 820px auto;
    }

    /* De verlanglijst is meestal een korte lijst op een lange pagina, dus
       daar mag er het meeste te zien zijn. */
    body.layout-wishlist {
        background-image:
            linear-gradient(rgba(20, 16, 22, .72), rgba(20, 16, 22, .72)),
            url("../img/schets/schets-c-licht.svg"),
            url("../img/schets/schets-a-licht.svg");
        background-position: center, left -340px top -100px, right -260px bottom -220px;
        background-size: auto, 900px auto, 780px auto;
    }

    /* Op de bedanktpagina staat weinig, dus daar mag hij groter en wat
       verder naar voren komen. */
    body.layout-order_finished {
        background-image:
            linear-gradient(rgba(20, 16, 22, .76), rgba(20, 16, 22, .76)),
            url("../img/schets/schets-d-licht-135.svg");
        background-position: center, right -300px bottom -380px;
        background-size: auto, 1000px auto;
    }
}

/* De keuzeblokken in de zijkolom zijn divs en geen knoppen, dus sectie 5
   raakt ze niet. Hier krijgen ze dezelfde taal: gevuld roze met donkere
   tekst is de hoofdactie, omlijnd creme staat ernaast. */
.cart-sidebar__checkout-options > .webshop_select_option {
    padding: 14px 22px;
    font: 600 13px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--c-roze);
    color: var(--c-bg);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cart-sidebar__checkout-options > .webshop_select_option:hover {
    background: var(--c-blush);
}

.cart-sidebar__login-options .webshop_select_option {
    padding: 13px 16px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: transparent;
    border-color: var(--c-rose);
    color: var(--c-rose);
}

/* De basis keert deze knop bij het aanwijzen om naar wit, wat op een bijna
   zwarte pagina een wit blok geeft. Hij keert nu om naar creme, net als de
   omlijnde knop in sectie 5. */
.cart-sidebar__login-options .webshop_select_option:hover {
    background: var(--c-text);
    border-color: var(--c-text);
    color: var(--c-bg);
}

/* Verzend- en betaalkeuze: rechte blokjes die bij het aanwijzen oplichten
   en gekozen in het roze staan, met donkere tekst in plaats van wit. */
.cart-sidebar__ship-pay .webshop_select_send_option,
.cart-sidebar__ship-pay .webshop_select_payment_option {
    font: 500 13px/1.3 var(--font-body);
    padding: 10px 14px;
    background: var(--c-surface);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.cart-sidebar__ship-pay .webshop_select_send_option:hover,
.cart-sidebar__ship-pay .webshop_select_payment_option:hover {
    border-color: var(--c-roze);
    color: var(--c-roze);
}

.webshop_select_send_option[is_selected="1"],
.webshop_select_payment_option[is_selected="1"],
.webshop_select_send_option[is_selected="1"]:hover,
.webshop_select_payment_option[is_selected="1"]:hover {
    background: var(--c-roze);
    border-color: var(--c-roze);
    color: var(--c-bg);
}

/* De eigen tekst onder de keuzeblokken: waarom je hier gerust kunt afrekenen */
.cart-trust-bar {
    flex-wrap: wrap;
    row-gap: 6px;
    white-space: normal;
    font: 400 12px/1.5 var(--font-body);
    color: var(--c-gedempt);
}

/* De titel boven de winkelwagen in de koptaal van het thema */
.cart-title {
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
}

/* De verlanglijst draait op hetzelfde template als de winkelwagen, maar dan
   zonder zijkolom. De regel liep daardoor over de volle breedte en de
   knoppen stonden zo ver van de naam dat ze er niet meer bij hoorden. Nu is
   het een kolom kaarten op het vlak uit het ontwerp. */
/* width: 100% hoort erbij: dit is een rastercel, en twee marges op auto
   maken zo'n cel anders zo breed als zijn inhoud in plaats van zo breed
   als het raster toelaat. De lege verlanglijst was daardoor 509px breed
   in plaats van 980. */
.cart-layout:has(#wishlist_cart:not(.hide)) .cart-main {
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.hh-wl-intro {
    margin: -12px 0 28px;
    font: 400 15px/1.6 var(--font-body);
    color: var(--c-gedempt);
}

.wl-item {
    gap: 24px;
    padding: 16px;
    margin-bottom: 2px;
    border-bottom: 0;
    background: var(--c-surface);
    transition: background-color .2s ease;
}

.wl-item:hover {
    background: var(--c-paneel);
}

.wl-item__img {
    flex: 0 0 90px;
    height: 120px;
    overflow: hidden;
    background: var(--c-groen);
}

/* Mist een artikel een foto, dan tekent de browser de alt-tekst in het
   vlak. De naam staat er toch al naast, dus dat voegt niets toe en het
   loopt half afgesneden over de rand. Het lege vlak alleen is rustiger.
   De tekst blijft in de alt staan, dus voor een schermlezer verandert er
   niets. */
.wl-item__img img,
#render_cart_here .checkout_article_img img {
    font-size: 0;
    color: transparent;
}

.wl-item__img img {
    width: 90px;
    height: 120px;
}

.wl-item__info {
    gap: 6px;
}

.wl-item__name {
    font: 700 20px/1.1 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.wl-item__price {
    font: 600 15px/1 var(--font-body);
    color: var(--c-roze);
}

/* De tas is de hoofdactie, de prullenbak staat ernaast en blijft stil tot
   je hem aanwijst. */
.wl-item__cart-btn,
.wl-item__delete-btn {
    padding: 12px 16px;
    font-size: 14px;
}

.wl-item__delete-btn {
    border: 1px solid var(--c-border);
    color: var(--c-gedempt);
}

.wl-item__delete-btn:hover {
    border-color: var(--c-rose);
    color: var(--c-rose);
}

/* Een lege verlanglijst was een lege pagina. De twee staten wisselen met
   :has(): staat er een regel, dan valt de lege staat weg, en andersom.
   SW-Retail zet er zelf ook een zin neer ("Er staan nog geen artikelen op
   je verlanglijstje"), als kale tekst in de div, dus daar valt niet op te
   mikken. Is de lijst leeg, dan gaat die hele div weg; hij blijft in de
   dom staan zodat de ajax-verversing hem kan vullen, en :has() ziet dat
   meteen. */
.cart-main:has(.wl-item) .hh-wl-leeg,
.cart-main:not(:has(.wl-item)) .hh-wl-intro,
.cart-main:not(:has(.wl-item)) #wishlist_cart {
    display: none;
}

.hh-wl-leeg {
    padding: 48px;
    background: var(--c-surface);
    background-image:
        linear-gradient(rgba(34, 26, 34, .82), rgba(34, 26, 34, .82)),
        url("../img/schets/schets-c-licht.svg");
    background-repeat: no-repeat;
    background-position: center, right -220px bottom -260px;
    background-size: auto, 560px auto;
}

.hh-wl-leeg__titel {
    font: 700 28px/1 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0 0 10px;
}

.hh-wl-leeg__tekst {
    max-width: 48ch;
    font: 400 15px/1.7 var(--font-body);
    color: var(--c-gedempt);
    margin: 0 0 24px;
}

/* --- Afrekenen: de regels in de winkelwagen -------------------------------
   Lagen als losse regels met een streep eronder op de paginakleur. Nu
   kaarten op het vlak uit het ontwerp, met dezelfde opbouw als de
   verlanglijst en een vlak op de plek van de foto zodat een artikel zonder
   foto geen kapot icoon meer toont. */
#render_cart_here .row[id^="od_"] {
    gap: 20px;
    padding: 16px;
    margin: 0 0 2px !important;
    border-bottom: 0;
    background: var(--c-surface);
}

#render_cart_here .checkout_article_img {
    background: var(--c-groen);
}

#render_cart_here .checkout_article_img,
#render_cart_here .checkout_article_img img {
    width: 72px !important;
    height: 96px;
}

#render_cart_here .sw_checkout_line > .col-6 {
    font: 700 18px/1.15 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
}

#render_cart_here .pull-right {
    font: 600 15px/1 var(--font-body);
    color: var(--c-roze);
}

/* --- Afrekenen: kortingscode, cadeaubon en tegoedbon ---------------------
   Naast elkaar in plaats van onder elkaar, zodat het paneel even breed is
   als de regels erboven en niet half zo hoog wordt als de winkelwagen zelf.
   auto-fit vouwt de lege kolommen weg: staan er twee vakjes, dan nemen die
   samen de hele breedte, en bij vier worden het er vier. */
.cart-codes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px 32px;
    /* Het paneel is een Bootstrap-kolom, dus zijn eigen padding van 15px
       per kant is hier vervangen door de padding van het paneel zelf. Die
       15px komt met de marge terug en gaat van de basisbreedte af, zodat
       de randen gelijk vallen met de regels erboven. */
    flex-basis: calc(100% - 30px);
    max-width: calc(100% - 30px);
    margin: 0 15px 36px;
    padding: 20px;
    background: var(--c-surface);
}

.cart-codes__item {
    margin-bottom: 0;
}

.cart-codes__input-row input[type="text"] {
    max-width: none;
}

.cart-codes__label {
    font: 500 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
    margin-bottom: 8px;
}

.cart-codes__input-row input[type="text"],
.cart-codes__input-row .sw-form-submit {
    height: 44px;
}

/* De verzendknop van een formulier is geen .btn, dus sectie 5 raakt hem
   niet. Hij krijgt hier hetzelfde gezicht als de omlijnde knop. */
.sw-form-submit {
    padding: 0 20px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--c-rose);
    border-radius: 0;
    color: var(--c-rose);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.sw-form-submit:hover {
    background: var(--c-text);
    border-color: var(--c-text);
    color: var(--c-bg);
}

/* --- Afrekenen: het adresformulier --------------------------------------
   De kolom is ruim 1100px breed en de velden liepen helemaal mee. Een
   invoerveld van die breedte leest niet: je oog raakt de regel kwijt. De
   maat zit op de adresblokken zelf en niet op #checkout_one_page, want dan
   zouden de winkelwagen en het codepaneel erboven meekrimpen. */
#invoice_address_form,
#account_create_form,
#alt_delivery_form {
    max-width: 780px;
}

#invoice_address_form h3,
#alt_delivery_form h3 {
    font: 700 30px/1 var(--font-heading);
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-border);
}

/* Lucht tussen de blokken; het afleveradres plakte tegen de vinkjes aan. */
#account_create_form,
#alt_delivery_form {
    margin-top: 36px;
}

.checkout-form__label {
    font: 500 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
    margin-bottom: 8px;
}

/* Het sterretje stond los voor het label in het template; nu hangt het aan
   de class, zodat het roze kan en op zijn plek blijft. */
.checkout-form__label--verplicht::after {
    content: ' *';
    color: var(--c-roze);
}

.checkout-form__row--checkboxes {
    flex-wrap: wrap;
    row-gap: 12px;
    margin-top: 24px;
}

/* Het adresformulier is lang; zo blijven het totaal en de afrekenknop in
   beeld terwijl je het invult. 96px is de hoogte van de vaste balk plus
   wat lucht. Alleen vanaf lg, want daaronder staat de zijkolom onder het
   formulier en heeft plakken geen zin. */
@media (min-width: 992px) {
    .cart-sidebar {
        position: sticky;
        top: 96px;
    }
}

/* De terugknop heeft geen class in het template */
#sw_customer_options_back {
    margin-bottom: 24px;
}

#sw_customer_options_back button {
    padding: 11px 18px;
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 0;
    color: var(--c-gedempt);
    transition: border-color .2s ease, color .2s ease;
}

#sw_customer_options_back button:hover {
    border-color: var(--c-rose);
    color: var(--c-rose);
}

/* Inloggen. De basis rekent op een foto in de rechterhelft uit het beheer;
   dit thema heeft geen beeldvelden, dus daar staat nu een paneel met een
   schets en de reden om een account te maken. Zonder dat paneel bleef die
   helft leeg en stond het formulier in een halve lege doos. */
.customer-login {
    max-width: 1040px;
    margin: 60px auto 80px;
}

.customer-login__inner {
    border: 0;
    gap: 2px;
    min-height: 0;
}

.customer-login__form {
    background: var(--c-surface);
    padding: 56px 48px;
}

.customer-login__title {
    font-family: var(--font-heading);
    font-size: 44px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin-bottom: 12px;
}

.customer-login__subtitle {
    color: var(--c-gedempt);
    margin-bottom: 28px;
}

.customer-login__form label {
    font: 500 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
    margin-bottom: 8px;
}

.customer-login__actions {
    margin-top: 24px;
}

/* Het paneel naast het formulier. Dezelfde opbouw als de hero: een schets
   met een vlak in de paneelkleur eroverheen. */
.hh-inlogpaneel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
    background-color: var(--c-paneel);
    background-image:
        linear-gradient(rgba(44, 27, 42, .62), rgba(44, 27, 42, .62)),
        url("../img/schets/schets-a-licht.svg");
    background-repeat: no-repeat;
    background-position: center, right -180px bottom -180px;
    background-size: auto, 620px auto;
}

.hh-inlogpaneel__titel {
    font-family: var(--font-heading);
    font-size: 36px;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--c-text);
    margin: 0 0 14px;
}

.hh-inlogpaneel p {
    font: 400 15px/1.7 var(--font-body);
    color: var(--c-rose);
    margin: 0 0 10px;
}

/* Dezelfde pijl als bij de links in de concepten; de glyph zit in de
   uitgesneden Archivo. */
.hh-inlogpaneel__link {
    display: inline-block;
    margin-top: 10px;
    font: 600 13px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-roze);
}

.hh-inlogpaneel__link::after {
    content: ' \2192';
}

.hh-inlogpaneel__link:hover {
    color: var(--c-blush);
}

/* De basis zet een streep van 2px boven de keuzeblokken; dat is in dit
   thema de dikste lijn op de pagina en trok te veel aandacht. */
.cart-sidebar__checkout-options {
    border-top-width: 1px;
}

/* Account, nieuw wachtwoord en bedankt staan in de basis in een smalle doos
   met een rand eromheen. Die doos heeft dezelfde kleur als de pagina, dus
   wat je zag was een lege omlijning. Hier wordt het het vlak uit het
   ontwerp. */
.customer-modify,
.customer-orders,
.customer-reset,
.order-finished {
    background: var(--c-surface);
    border: 0;
    max-width: 920px;
    margin: 60px auto 80px;
    padding: 48px;
}

.customer-reset {
    max-width: 560px;
}

.order-finished {
    max-width: 680px;
}

.customer-modify h1,
.customer-orders h1,
.customer-reset h1,
.order-finished h1 {
    font-family: var(--font-heading);
    font-size: 40px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: .01em;
}

/* Dezelfde labels als op de inlogpagina */
.customer-modify label,
.customer-reset label {
    font: 500 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
    margin-bottom: 8px;
}

.customer-orders th {
    font: 600 12px/1 var(--font-body);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-gedempt);
    border-bottom-width: 1px;
}

.customer-reset__icon,
.order-finished__icon {
    color: var(--c-roze);
}

@media (max-width: 767.98px) {
    .customer-login {
        margin: 24px auto 48px;
    }

    .customer-login__form {
        padding: 32px 22px;
    }

    .customer-login__title {
        font-size: 34px;
    }

    /* Het paneel is sfeer, geen inhoud: op telefoon staat het formulier
       voorop en valt het paneel weg. */
    .hh-inlogpaneel {
        display: none;
    }

    .customer-modify,
    .customer-orders,
    .customer-reset,
    .order-finished {
        margin: 24px auto 48px;
        padding: 28px 22px;
    }

    .customer-modify h1,
    .customer-orders h1,
    .customer-reset h1,
    .order-finished h1 {
        font-size: 30px;
    }
}

/* 15. MEDIA QUERIES -------------------------------------------------------- */

/* Dezelfde maat als in 1A: de container loopt tot 1620px en houdt verder de
   eigen padding en breekpunten van Bootstrap. Alleen de volle blokken, de
   hero, de verdiepingen en de winkel, lopen van rand tot rand met de naad
   ertussen. Eerder stond hier 2000px met een eigen padding, waardoor de
   header en de footer bijna tot de schermrand liepen en de pagina geen
   midden meer had. */
@media (min-width: 1200px) {
    .container {
        max-width: 1620px;
    }
}

/* De plantenschetsen, hier in een lichte variant: op deze bijna zwarte
   pagina valt de donkerbruine versie volledig weg. Dezelfde regels als bij
   1A: niet achter foto's, producten of de merkenwand, groot en over de rand
   heen, en hooguit twee per pagina. De hero staat alleen op de homepage, de
   werelden op de homepage en op over ons, en bereiken alleen op contact. */
@media (min-width: 992px) {
    .hh-hero__paneel,
    .hh-werelden,
    .hh-bereiken {
        background-repeat: no-repeat;
    }

    /* Twee lagen: de schets, en daarover een vlak in de paneelkleur dat hem
       half wegdrukt. Zo blijft het een suggestie en kan de tint in een regel
       bij zonder een nieuw svg-bestand. De schets staat zo ver naar beneden
       dat de titel en de tekst erboven blijven: het beeld is 900 px hoog en
       begint op 320 px vanaf de bovenkant van het paneel van 620 px. */
    .hh-hero__paneel {
        background-image:
            linear-gradient(rgba(44, 27, 42, .62), rgba(44, 27, 42, .62)),
            url("../img/schets/schets-d-licht-135.svg");
        background-position: center, right -400px bottom -600px;
        background-size: cover, 900px auto;
    }

    .hh-werelden {
        background-image: url("../img/schets/schets-a-licht.svg");
        background-position: left -300px center;
        background-size: 820px auto;
    }

    .hh-bereiken {
        background-image: url("../img/schets/schets-a-licht.svg");
        background-position: right -320px bottom -180px;
        background-size: 760px auto;
    }
}

@media (min-width: 992px) {
    .hh-team__col {
        flex: 0 0 20%;
        max-width: 20%;
    }

    /* De tekst houdt extra afstand van de tegels ernaast, boven op de gutter
       van 30px. Onder lg staat hij erboven en vervalt die afstand weer. */
    .hh-werelden__tekstkolom {
        padding-right: 39px;
    }

    /* De foto van de winkel even hoog als het paneel ernaast. De kolom wordt
       zelf een flexkolom, zodat de foto kan rekken; met alleen height: 100%
       zou hij afhangen van of de browser de uitgerekte kolomhoogte als
       basis voor dat percentage wil geven. */
    .hh-winkel > .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }

    .hh-winkel__beeld,
    .hh-winkel__paneel {
        flex: 1 1 auto;
    }
}

@media (max-width: 1199px) {
    .hh-hero__beeld,
    .hh-hero__paneel {
        height: 540px;
    }

    .hh-winkel__beeld {
        min-height: 540px;
    }

    .hh-hero__titel {
        font-size: 80px;
    }

    .hh-tegel {
        height: 200px;
    }

    .hh-hero__titel {
        font-size: 52px;
    }

    .hh-floor__titel {
        font-size: 72px;
    }

    .hh-werelden__titel,
    .hh-winkel__titel {
        font-size: 44px;
    }

    .hh-hero__paneel,
    .hh-winkel__paneel {
        padding: 40px;
    }

    .hh-merkenwand {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .hh-hero__beeld,
    .hh-hero__paneel {
        height: auto;
    }

    /* Onder lg staan de foto en het paneel onder elkaar, dus hoeft de foto
       niets meer te overbruggen en houdt hij zijn eigen verhouding. */
    .hh-winkel__beeld {
        min-height: 0;
    }

    .hh-hero__beeld img,
    .hh-winkel__beeld img {
        aspect-ratio: 4 / 3;
    }

    .hh-floor {
        min-height: 420px;
    }

    .hh-tegel {
        height: auto;
        aspect-ratio: 16 / 9;
    }
}

@media (max-width: 767px) {
    /* Gestapeld heeft de naad geen zin meer: de kolommen lopen dan over de
       volle breedte en lijnen gewoon uit op de kop erboven. */
    .row.hh-naad {
        margin-left: 0;
        margin-right: 0;
    }

    .row.hh-naad > [class*="col-"] {
        padding: 4px 15px;
    }

    .hh-hero__paneel {
        padding: 28px 20px 32px;
    }

    .hh-blog__titel {
        font-size: 34px;
    }

    #content .hh-blog__intro {
        font-size: 17px;
    }

    /* Iets kleiner dan op een breed scherm, maar ruim boven de .9rem die het
       thema hier oplegt: dit is de maat waarop een lang stuk leesbaar blijft
       in een kolom van 360px. */
    #content .hh-blog__body p,
    #content .hh-blog__body ul,
    #content .hh-blog__body ol {
        font-size: 16px;
        line-height: 1.7;
    }

    .hh-blog__body h2 {
        font-size: 26px;
        margin-top: 40px;
    }

    .hh-blog__quote cite {
        font-size: 11px;
    }

    .hh-blog__quote {
        font-size: 21px;
        margin: 32px 0;
        padding-left: 18px;
    }

    .hh-blog__kop {
        padding: 28px 0 24px;
    }

    .hh-hero__titel {
        font-size: 42px;
    }

    .hh-floor {
        padding: 24px 20px;
    }

    .hh-floor__titel {
        font-size: 68px;
    }

    .hh-sectionhead__title {
        font-size: 28px;
    }

    .hh-werelden__titel,
    .hh-winkel__titel {
        font-size: 34px;
    }

    .hh-winkel__paneel {
        padding: 32px 20px 40px;
    }

    .btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 16px;
    }

    .hh-merkenwand {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .hh-merk__tegel {
        height: 84px;
        padding: 12px;
    }

    .hh-member__avatar {
        width: 76px;
        height: 76px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .article_image_list,
    .hh-portret img,
    .btn {
        transition: none !important;
    }
}