@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600&display=swap');

/* =============================================================================
 * YoCo - Custom Yocodex  —  "Foil"
 *
 * Alleen deze winkel gebruikt dit bestand (theme.json: alleen_voor yocodex).
 * Andere klanten draaien op yoco-modern en merken hier niets van. Er is geen
 * regel gedeelde code aangeraakt: dit is puur CSS bovenop de bestaande HTML,
 * dus knoppen, menu's, varianten, verlanglijst, vergelijken, mini-winkelmand en
 * het account-uitklapmenu blijven staan en werken.
 *
 * -----------------------------------------------------------------------------
 * WAAROM STAAT ER OVERAL `html` VOOR?
 * -----------------------------------------------------------------------------
 * render.php laadt dit bestand en zet de gewone winkelstijlen daarna in een
 * <style>-blok. Bij gelijke specificiteit wint de laatste. Een kale
 * `.s-header{}` hier verliest dus van `.s-header{}` daar. De `html` ervoor telt
 * als een element extra en wint daardoor altijd net, zonder !important en
 * zonder gedeelde code te verplaatsen. `!important` staat er alleen waar
 * render.php een inline style="" neerzet; daar wint niets anders van.
 *
 * -----------------------------------------------------------------------------
 * DE VORMTAAL
 * -----------------------------------------------------------------------------
 * Een verzamelkaart is een klein, omkaderd object met een rand, een strip die
 * de zeldzaamheid aangeeft en een folie die oplicht als je hem kantelt. Dat is
 * de hele taal van deze winkel:
 *
 *   - Elk product staat in een KAARTLIJST: een dunne binnenrand op afstand van
 *     de buitenrand, precies zoals de rand van een kaart in een sleeve.
 *   - Boven elke kaart een strip van 3px. Grijs in rust, folie bij aanwijzen.
 *     De strip is nooit versiering: hij markeert wat aanklikbaar is.
 *   - De rechterbovenhoek is afgesneden, als een kaart die uit een pak steekt.
 *   - Folie verschijnt alleen bij beweging, en nooit onder de tekst. Een
 *     glimmende achtergrond leest slecht; een glimmende rand niet.
 *
 * Licht en luchtig, niet de donkere gaminglook die je bij kaartwinkels overal
 * ziet -- die maakt foto's van kaarten juist doods. Koel papier als grond, de
 * kaarten zelf wit, en een enkele stellige blauwe kleur voor alles waar je op
 * kunt drukken.
 *
 * Bricolage Grotesque voor koppen (eigenzinnig, met optische maat) tegenover
 * Instrument Sans voor lopende tekst. Dat verschil doet het meeste werk.
 *
 * De huisstijlkleuren uit de instellingen (--primary, --accent) worden
 * gerespecteerd: zet iemand die om, dan draait dit thema mee.
 * ============================================================================= */


/* =============================================================================
 * 1. Tokens
 * ========================================================================== */
html:root {
  --text:    #16182A;
  --muted:   #6B7089;
  --border:  #E4E7F2;
  --surface: #FFFFFF;
  --bg:      #F6F7FB;

  /* Eigen tokens, met yc- ervoor zodat ze nooit botsen met de winkelstijlen. */
  --yc-inkt:      #16182A;
  --yc-grond:     #F6F7FB;
  --yc-vlak:      #FFFFFF;
  --yc-lijn:      #E4E7F2;
  --yc-lijn-hard: #C9CFE4;
  --yc-actie:     var(--accent, #1B7BFF);   /* het blauw uit het logo */
  --yc-actie-op:  #0B58D8;

  /* De donkere bovenbouw waarin het logo thuishoort. */
  --yc-nacht:     #0B0D18;
  --yc-nacht-op:  #141830;
  --yc-chroom:    #B9C2D9;
  --yc-gloed:     rgba(27,123,255,.55);

  /* Folie, afgeleid van het logo: ijsblauw naar azuur naar blauwviolet. Geen
     amber meer -- dat vocht met het blauw van het logo. */
  --yc-folie: linear-gradient(100deg, #7FD8FF 0%, #1B7BFF 48%, #6A5CFF 100%);

  --yc-hoek:       10px;
  --yc-hoek-klein: 6px;
  --yc-snee:       14px;   /* afgesneden hoek, als een kaart uit een pak */
  --yc-veer:       cubic-bezier(.2, .7, .3, 1);
  --yc-schaduw:      0 1px 2px rgba(22,24,42,.05), 0 8px 24px -12px rgba(22,24,42,.18);
  --yc-schaduw-diep: 0 2px 4px rgba(22,24,42,.06), 0 22px 44px -20px rgba(22,24,42,.30);
}

html body {
  background: var(--yc-grond);
  color: var(--yc-inkt);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv05' 1;
}

html h1, html h2, html h3,
html .s-section-head h2,
html .s-hero-home h1 {
  font-family: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* Cijfers in kolommen -- prijzen, aantallen, voorraad -- moeten uitlijnen. */
html .s-p-card .prijs,
html .s-pd-price,
html .ms-cart-right,
html .ms-info-grid { font-variant-numeric: tabular-nums; }


/* =============================================================================
 * 2. De kaartlijst
 *
 * Het hart van het thema. Een pseudo-element legt een tweede rand binnen de
 * buitenrand -- dat is wat een kaart een kaart maakt. De strip erboven kleurt
 * pas bij aanwijzen, zodat een pagina vol producten rustig blijft.
 * ========================================================================== */
html .s-p-card {
  position: relative;
  background: var(--yc-vlak);
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek);
  box-shadow: var(--yc-schaduw);
  overflow: hidden;
  transition: transform .22s var(--yc-veer), box-shadow .22s var(--yc-veer), border-color .22s;
}

/* De binnenrand. pointer-events uit, anders vangt hij de klik op de kaart. */
html .s-p-card::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek-klein);
  pointer-events: none;
  opacity: .8;
  transition: border-color .22s, opacity .22s;
}

/* De zeldzaamheidsstrip. */
html .s-p-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--yc-lijn-hard);
  z-index: 2;
  transition: background .28s var(--yc-veer);
}

html .s-p-card:hover,
html .s-p-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--yc-schaduw-diep);
  border-color: var(--yc-lijn-hard);
}
html .s-p-card:hover::before,
html .s-p-card:focus-within::before { background: var(--yc-folie); }
html .s-p-card:hover::after { border-color: var(--yc-lijn-hard); opacity: 1; }

/* De afgesneden hoek zit op de afbeelding, niet op de kaart: knip je de kaart
   zelf, dan verdwijnt de rand op die hoek en oogt het als een fout. */
html .s-p-card img {
  clip-path: polygon(0 0, calc(100% - var(--yc-snee)) 0, 100% var(--yc-snee), 100% 100%, 0 100%);
  transition: transform .4s var(--yc-veer);
}
html .s-p-card:hover img { transform: scale(1.03); }

html .s-p-card .prijs,
html .s-p-card .price { font-weight: 700; letter-spacing: -.01em; }


/* =============================================================================
 * 3. Kop en navigatie
 *
 * Licht en luchtig; de winkel gaat over kleurige kaarten en die hebben rust
 * om zich heen nodig. Een dunne foliestreep onder de kop verbindt hem met de
 * rest zonder een zwart blok te worden.
 * ========================================================================== */
html .s-header {
  background: var(--yc-nacht);
  border-bottom: none;
  color: #EEF2FF;
  box-shadow: 0 10px 30px -22px rgba(11,13,24,.9);
}
/* De gloedlijn onder de kop is dezelfde gloed als om het logo: zo hoort de
   bovenbouw bij elkaar in plaats van dat het logo erop geplakt lijkt. */
html .s-header::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--yc-folie);
  box-shadow: 0 0 14px var(--yc-gloed);
}
html .s-header a,
html .s-header .s-nav-item,
html .s-header .s-hbtn { color: #E7ECFB; }
html .s-header .s-hbtn:hover { background: var(--yc-nacht-op); border-color: rgba(185,194,217,.22); }

/* Het logo staat op zwart, dus het mag zijn eigen ruimte houden. */
html .s-logo img { filter: drop-shadow(0 0 10px var(--yc-gloed)); }

/* Zoekveld op de donkere band: chroomrand in plaats van een wit blok. */
html .s-header .s-search,
html .s-header .s-bnav-search {
  background: rgba(255,255,255,.06);
  border-color: rgba(185,194,217,.24);
  color: #EEF2FF;
}
html .s-header .s-search input,
html .s-header .s-bnav-search input { color: #EEF2FF; }
html .s-header .s-search input::placeholder { color: rgba(231,236,251,.5); }
html .s-header .s-search:focus-within,
html .s-header .s-bnav-search:focus-within {
  background: rgba(255,255,255,.10);
  border-color: var(--yc-actie);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yc-actie) 26%, transparent);
}

/* De categoriebalk hoort bij de kop, dus die blijft donker. */
html .s-bnav-item { color: #D7DEF4; }
html .s-bnav-item:hover { color: #fff; }

html .s-logo { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; letter-spacing: -.03em; }

html .s-nav-item,
html .s-bnav-item {
  position: relative;
  font-weight: 500;
  border-radius: var(--yc-hoek-klein);
  transition: color .18s, background .18s;
}
/* Onderstreping van folie in plaats van een blokje: subtieler, en het laat de
   kleur terugkomen op de plek waar je hem verwacht. */
html .s-nav-item::after,
html .s-bnav-item::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 4px;
  height: 2px;
  background: var(--yc-folie);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .24s var(--yc-veer);
}
html .s-nav-item:hover::after,
html .s-bnav-item:hover::after,
html .s-nav-item[aria-current]::after { transform: scaleX(1); }

html .s-hbtn {
  border-radius: var(--yc-hoek-klein);
  border: 1px solid transparent;
  transition: background .18s, border-color .18s;
}
html .s-hbtn:hover { background: var(--yc-grond); border-color: var(--yc-lijn); }

html .s-search,
html .s-bnav-search {
  border: 1px solid var(--yc-lijn);
  border-radius: 999px;
  background: var(--yc-grond);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
html .s-search:focus-within,
html .s-bnav-search:focus-within {
  background: var(--yc-vlak);
  border-color: var(--yc-actie);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yc-actie) 14%, transparent);
}

/* Het megamenu valt uit de donkere kop, dus het krijgt daar een randje van
   dezelfde gloed -- anders zweeft er een wit vlak onder een zwarte balk. */
html .s-mega {
  border: 1px solid var(--yc-lijn);
  border-top: 2px solid transparent;
  background-image: linear-gradient(var(--yc-vlak), var(--yc-vlak)), var(--yc-folie);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: var(--yc-hoek);
  box-shadow: var(--yc-schaduw-diep);
  background: var(--yc-vlak);
}
html .s-nav-group { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -.01em; }


/* =============================================================================
 * 4. Hero en secties
 * ========================================================================== */
html .s-hero-home,
html .s-hero {
  position: relative;
  background: var(--yc-vlak);
  border: 1px solid var(--yc-lijn);
  border-radius: 18px;
  overflow: hidden;
}
/* Folie langs de bovenrand van de hero -- een dunne lijn, geen vlak. Een
   verloop over de hele hero maakt productfoto's vuil. */
html .s-hero-home::before,
html .s-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--yc-folie);
  z-index: 2;
}
html .s-hero-home h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.02; }

html .s-section-head h2 { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
html .s-section-head h2::after {
  content: '';
  display: block;
  width: 48px; height: 3px;
  margin-top: 10px;
  background: var(--yc-folie);
  border-radius: 2px;
}

html .s-cat-card {
  background: var(--yc-vlak);
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek);
  transition: transform .2s var(--yc-veer), border-color .2s, box-shadow .2s;
}
html .s-cat-card:hover {
  transform: translateY(-2px);
  border-color: var(--yc-lijn-hard);
  box-shadow: var(--yc-schaduw);
}

html .s-split-banner {
  border: 1px solid var(--yc-lijn);
  border-radius: 18px;
  overflow: hidden;
  background: var(--yc-vlak);
}


/* =============================================================================
 * 5. Productpagina
 * ========================================================================== */
html .s-pd { background: var(--yc-grond); }

html .s-pd-info {
  background: var(--yc-vlak);
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek);
  box-shadow: var(--yc-schaduw);
}
html .s-pd-price {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  letter-spacing: -.028em;
}

/* Variantknoppen als kleine kaartjes; de gekozen krijgt de foliestrip. */
html .ms-var-pill {
  position: relative;
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek-klein);
  background: var(--yc-vlak);
  font-weight: 500;
  overflow: hidden;
  transition: border-color .18s, transform .18s var(--yc-veer);
}
html .ms-var-pill:hover { border-color: var(--yc-lijn-hard); transform: translateY(-1px); }
html .ms-var-pill[aria-pressed="true"],
html .ms-var-pill.actief,
html .ms-var-pill.geselecteerd {
  border-color: var(--yc-actie);
  box-shadow: inset 0 0 0 1px var(--yc-actie);
}
html .ms-var-pill[aria-pressed="true"]::before,
html .ms-var-pill.actief::before,
html .ms-var-pill.geselecteerd::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--yc-folie);
}

html .s-pd-addcart,
html .ms-pc-btn {
  background: var(--yc-actie);
  color: #fff;
  border: none;
  border-radius: var(--yc-hoek-klein);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  letter-spacing: .005em;
  transition: background .18s, transform .12s var(--yc-veer), box-shadow .18s;
  box-shadow: 0 1px 0 rgba(22,24,42,.06), 0 10px 20px -12px color-mix(in srgb, var(--yc-actie) 70%, transparent);
}
html .s-pd-addcart:hover,
html .ms-pc-btn:hover { background: var(--yc-actie-op); }
/* Een knop die meegeeft voelt betrouwbaarder dan een die alleen van kleur wisselt. */
html .s-pd-addcart:active,
html .ms-pc-btn:active { transform: translateY(1px); box-shadow: none; }

html .ms-info-grid {
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek);
  background: var(--yc-vlak);
  overflow: hidden;
}
html .ms-info-grid > * + * { border-top: 1px solid var(--yc-lijn); }


/* =============================================================================
 * 6. Lades, winkelmand en account
 * ========================================================================== */
html .s-drawer,
html .ms-mini-cart,
html .ms-acc-menu {
  background: var(--yc-vlak);
  border-left: 1px solid var(--yc-lijn);
  box-shadow: var(--yc-schaduw-diep);
}
html .s-drawer-head,
html .ms-acc-nav {
  border-bottom: 1px solid var(--yc-lijn);
  background: var(--yc-grond);
}
html .s-drawer-head { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; }

html .ms-cart-left  { background: var(--yc-vlak); }
html .ms-cart-right {
  background: var(--yc-vlak);
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek);
  box-shadow: var(--yc-schaduw);
}

html .ms-acc-pane,
html .ms-acc-body {
  background: var(--yc-vlak);
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek);
}
html .ms-sug-item { border-radius: var(--yc-hoek-klein); transition: background .14s; }
html .ms-sug-item:hover { background: var(--yc-grond); }

html .ms-ship-opt {
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek-klein);
  transition: border-color .18s, background .18s;
}
html .ms-ship-opt:hover { border-color: var(--yc-lijn-hard); }
html .ms-ship-opt:has(input:checked) {
  border-color: var(--yc-actie);
  background: color-mix(in srgb, var(--yc-actie) 5%, var(--yc-vlak));
}


/* =============================================================================
 * 7. Formulieren
 * ========================================================================== */
html input[type="text"],
html input[type="email"],
html input[type="tel"],
html input[type="number"],
html input[type="password"],
html input[type="search"],
html select,
html textarea {
  border: 1px solid var(--yc-lijn);
  border-radius: var(--yc-hoek-klein);
  background: var(--yc-vlak);
  font-family: inherit;
  transition: border-color .16s, box-shadow .16s;
}
html input:focus,
html select:focus,
html textarea:focus {
  outline: none;
  border-color: var(--yc-actie);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--yc-actie) 14%, transparent);
}
/* Toetsenbordgebruikers moeten zien waar ze zijn -- ook op knoppen en links. */
html a:focus-visible,
html button:focus-visible {
  outline: 2px solid var(--yc-actie);
  outline-offset: 2px;
  border-radius: 3px;
}


/* =============================================================================
 * 8. Voet
 * ========================================================================== */
html .s-footer {
  background: var(--yc-nacht);
  color: #C9CEE6;
  border-top: none;
}
html .s-footer::before {
  content: '';
  display: block;
  height: 3px;
  margin-bottom: 34px;
  background: var(--yc-folie);
  box-shadow: 0 0 14px var(--yc-gloed);
}
html .s-footer a { color: #E7EAF6; text-decoration-color: rgba(231,234,246,.35); }
html .s-footer a:hover { color: #fff; text-decoration-color: currentColor; }
html .s-footer h3,
html .s-footer strong { font-family: 'Bricolage Grotesque', sans-serif; color: #fff; }
html .s-copy { color: #8A90AC; }


/* =============================================================================
 * 9. Beweging
 *
 * De folieglans loopt een keer over de strip als je een kaart aanwijst. Niet in
 * een lus: een winkelpagina met dertig knipperende kaarten is onbruikbaar.
 * ========================================================================== */
@keyframes yc-glans {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
html .s-p-card:hover::before {
  background-size: 200% 100%;
  animation: yc-glans .9s var(--yc-veer);
}

/* Wie beweging heeft uitgezet krijgt dezelfde winkel, alleen stil. */
@media (prefers-reduced-motion: reduce) {
  html *,
  html *::before,
  html *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html .s-p-card:hover { transform: none; }
  html .s-p-card:hover img { transform: none; }
}


/* =============================================================================
 * 10. Kleine schermen
 *
 * De binnenrand en de afgesneden hoek zijn op een telefoon te fijn om te lezen
 * en kosten alleen ruimte; die gaan eruit. De strip blijft: die draagt de
 * betekenis.
 * ========================================================================== */
@media (max-width: 640px) {
  html .s-p-card::after { inset: 5px; opacity: .55; }
  html .s-p-card img { clip-path: none; }
  html .s-hero-home h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  html .s-section-head h2::after { width: 36px; }
}


/* =============================================================================
 * 11. Vormtaal van het logo
 *
 * Afschuining, chroom en gloed. Dit blok staat achteraan zodat het de eerdere
 * afspraken bewust overschrijft -- de basis blijft leesbaar als je dit weghaalt.
 * ========================================================================== */

html:root {
  --yc-schuin: 12px;                                  /* diepte van de afschuining */
  --yc-chroomverloop: linear-gradient(168deg, #A8B4CC 0%, #FFFFFF 34%, #DCE3F2 52%, #93A0BC 78%, #FFFFFF 100%);
  --yc-hel: -6deg;                                    /* de helling uit het logo */
}

/* --- afschuining -----------------------------------------------------------
   Twee tegenoverliggende hoeken, niet vier: zo houdt de vorm een richting, net
   als de letters. */
html .s-p-card,
html .s-cat-card,
html .s-hero-home,
html .s-hero,
html .s-split-banner {
  border-radius: 0;
  clip-path: polygon(
    var(--yc-schuin) 0, 100% 0,
    100% calc(100% - var(--yc-schuin)), calc(100% - var(--yc-schuin)) 100%,
    0 100%, 0 var(--yc-schuin));
}
/* De binnenrand volgt de vorm, anders steekt hij door de schuine hoek heen. */
html .s-p-card::after { border-radius: 0; }
/* De foto had al een schuine hoek; die kan nu weg, anders snijden er twee. */
html .s-p-card img { clip-path: none; }

html .s-pd-addcart,
html .ms-pc-btn,
html .s-pd-info,
html .ms-cart-right {
  border-radius: 0;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

/* --- chroom op de grote koppen ---------------------------------------------
   De kleur staat er los onder: valt de achtergrondclip weg, dan blijft de kop
   gewoon leesbaar in plaats van onzichtbaar. */
html .s-hero-home h1,
html .s-section-head h2 {
  color: var(--yc-inkt);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  html .s-hero-home h1 {
    background: var(--yc-chroomverloop);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Een dunne donkere rand houdt het chroom leesbaar op de lichte grond. */
    paint-order: stroke fill;
    -webkit-text-stroke: .6px rgba(22,24,42,.55);
  }
}
/* Op de donkere kop en voet mag het chroom zonder rand: daar is het contrast er al. */
html .s-footer h3 {
  background: var(--yc-chroomverloop);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- gloed bij aanraking ----------------------------------------------------
   Waar het logo gloeit, gloeit de knop. Alleen bij aanwijzen; in rust zou een
   pagina vol kaarten gaan zoemen. */
html .s-pd-addcart:hover,
html .ms-pc-btn:hover {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--yc-actie) 60%, transparent),
              0 0 22px -2px var(--yc-gloed),
              0 10px 22px -14px rgba(11,13,24,.7);
}
html .s-p-card:hover { box-shadow: var(--yc-schaduw-diep), 0 0 26px -8px var(--yc-gloed); }
html .s-cat-card:hover { box-shadow: var(--yc-schaduw), 0 0 20px -8px var(--yc-gloed); }

/* --- helling in de accenten ------------------------------------------------
   Dezelfde hoek als het logo. De strip zelf blijft recht aan de bovenkant van
   de kaart; het is het label dat helt, want een schuine lijn over de volle
   breedte oogt als een fout. */
html .s-p-card .badge,
html .s-p-card .label,
html .ms-var-pill[aria-pressed="true"]::before,
html .ms-var-pill.actief::before {
  transform: skewX(var(--yc-hel));
}
html .s-section-head h2::after {
  transform: skewX(var(--yc-hel));
  width: 56px;
  box-shadow: 0 0 10px -2px var(--yc-gloed);
}

/* --- de strip krijgt de gloed van het logo --------------------------------- */
html .s-p-card:hover::before,
html .s-p-card:focus-within::before { box-shadow: 0 0 12px var(--yc-gloed); }

/* Op smalle schermen zijn de afschuiningen te fijn en kosten ze alleen ruimte. */
@media (max-width: 640px) {
  html:root { --yc-schuin: 8px; }
  html .s-pd-addcart,
  html .ms-pc-btn { clip-path: none; }
  html .s-hero-home h1 { -webkit-text-stroke: 0; }
}