/* =============================================================================
   SPEELSE VOORPAGINA (19-10-2026) -- een LOS bestand, en dat is met opzet.

   Eigenaar: "doe de homepage ook speelser, maar zorg dat je daarmee makkelijk
   terug kan, ook als het me morgen toch niet bevalt". Dus:

   - alles staat in dit ene bestand; style.css is er niet voor aangeraakt;
   - het laadt alleen als de schakelaar aan staat:
       Weergave -> Aanpassen -> Stijl van de voorpagina -> Speelse voorpagina
     (functions.php). Uit = de voorpagina precies zoals hij was;
   - elke regel hangt bovendien aan de body-klasse lm-voorpagina-speels, die
     alleen met de schakelaar aan op de pagina staat.

   Dezelfde taal als About, Sell, Trade fairs en Contact: scheef opgeplakt, een
   strook plakband, een toegangskaartje, een sticker, de markeerstreep -- in het
   felle merkoranje (besluit eigenaar, 19-10-2026).

   MERK-NEUTRAAL: elke kleur komt uit brand.css (var(--brand-...)), ook de
   doorschijnende, via color-mix(). Een merksite met een andere brand.css krijgt
   zo zijn eigen kleur en niet ons oranje. Een browser die color-mix() niet kent
   slaat alleen die ene regel over: geen plakband of markeerstreep, verder niets.
   ========================================================================== */

/* --- de hero ------------------------------------------------------------------ */
/* Het oranje deel van de kop krijgt een golflijn eronder; de regels krijgen
   een fractie meer lucht, anders raakt de golf de regel eronder. */
.lm-voorpagina-speels .distriqo-hero h1 { line-height: 1.12; }
.lm-voorpagina-speels .distriqo-hero h1 span {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--brand-primary);
  text-decoration-thickness: 3px;
  text-underline-offset: .2em;
  text-decoration-skip-ink: none;
}
/* Het chipje bovenaan staat net niet recht. */
.lm-voorpagina-speels .distriqo-hero-chip { transform: rotate(-2deg); }
/* De cijferkaart en de productkaarten als opgeprikte kaartjes: licht scheef,
   met een strook plakband. */
.lm-voorpagina-speels .distriqo-hero-kaart {
  position: relative;
  transform: rotate(2deg);
}
.lm-voorpagina-speels .distriqo-hero-kaart::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 104px;
  height: 24px;
  margin-left: -52px;
  background: color-mix(in srgb, var(--brand-primary) 85%, transparent);
  transform: rotate(-3deg);
  z-index: 1;
}

/* --- de beursbalk als toegangskaartje --------------------------------------- */
/* Een stippellijn met aan de uiteinden een halve uitsparing, zoals bij een
   kaartje dat de controleur afscheurt.

   Daarvoor wordt de balk een raster in plaats van een rij die mag omslaan.
   Sloegen de knoppen om (smal scherm, lange beursnaam, langere taal), dan
   begonnen ze links onder het icoon en liep een scheurlijn er dwars doorheen.
   In een raster ligt vast waar alles staat:

   - vanaf 761 punten is het icoon het strookje, met de lijn van boven naar
     beneden; tot 900 staan de knoppen onder de tekst, daarboven ernaast;
   - op een telefoon staan icoon en tekst boven, de knoppen eronder over de
     volle breedte, en loopt de lijn dwars tussen die twee.

   Maten: binnenmarge 26, icoon 44, kolom 62, tussenruimte 18 -- het midden
   tussen icoon (eindigt op 70) en tekst (begint op 106) ligt op 88. */
.lm-voorpagina-speels .distriqo-beursbanner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
}
.lm-voorpagina-speels .distriqo-beursbanner-icoon { transform: rotate(-8deg); }
@media (max-width: 760px) {
  .lm-voorpagina-speels .distriqo-beursbanner-knoppen {
    grid-column: 1 / -1;
    position: relative;
  }
  /* 9 punten boven de knoppen: het midden van de tussenruimte van 18. */
  .lm-voorpagina-speels .distriqo-beursbanner-knoppen::before {
    content: "";
    position: absolute;
    left: -26px;
    right: -26px;
    top: -20px;
    height: 22px;
    background:
      radial-gradient(circle at 0 50%, var(--brand-bg) 11px, transparent 11.5px),
      radial-gradient(circle at 100% 50%, var(--brand-bg) 11px, transparent 11.5px);
  }
  .lm-voorpagina-speels .distriqo-beursbanner-knoppen::after {
    content: "";
    position: absolute;
    left: -12px;
    right: -12px;
    top: -10px;
    border-top: 2px dashed rgba(255, 255, 255, .22);
  }
}
@media (min-width: 761px) {
  .lm-voorpagina-speels .distriqo-beursbanner {
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 14px 18px;
  }
  .lm-voorpagina-speels .distriqo-beursbanner::before,
  .lm-voorpagina-speels .distriqo-beursbanner::after {
    content: "";
    position: absolute;
    left: 77px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-bg);
  }
  .lm-voorpagina-speels .distriqo-beursbanner::before { top: -11px; }
  .lm-voorpagina-speels .distriqo-beursbanner::after { bottom: -11px; }
  .lm-voorpagina-speels .distriqo-beursbanner-tekst::before {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 87px;
    border-left: 2px dashed rgba(255, 255, 255, .22);
  }
}
@media (min-width: 761px) and (max-width: 899px) {
  .lm-voorpagina-speels .distriqo-beursbanner { grid-template-columns: 62px minmax(0, 1fr); }
  .lm-voorpagina-speels .distriqo-beursbanner-icoon { grid-row: span 2; }
  .lm-voorpagina-speels .distriqo-beursbanner-knoppen { grid-column: 2; }
}

/* --- "Nieuw binnen": het etiket als sticker ---------------------------------- */
.lm-voorpagina-speels .distriqo-newin-label {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--brand-primary) 30%, transparent);
  transform: rotate(-3deg);
}

/* --- de koppen met de markeerstreep, net als op de andere pagina's ---------- */
.lm-voorpagina-speels .lm-inhoud-vol > h2,
.lm-voorpagina-speels .distriqo-categorieen-kop h2 {
  width: fit-content;
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--brand-primary) 26%, transparent) 62% 92%, transparent 92%);
}

/* --- de artikelkaarten ------------------------------------------------------- */
/* "Verkocht per" als sticker op de foto. */
.lm-voorpagina-speels .distriqo-kaartpartij { transform: rotate(-5deg); }

/* --- de categorieën ----------------------------------------------------------- */
/* De fotootjes staan scheef geplakt, om en om; bij aanwijzen gaan ze rechtop.
   Het vak eromheen knipt niet meer af: een scheve foto is breder dan het vak,
   en de hoeken vielen er anders af. Er komt GEEN vlak achter (eigenaar). */
.lm-voorpagina-speels .distriqo-catkaart { position: relative; }
.lm-voorpagina-speels .distriqo-catkaart-beeld { overflow: visible; }
.lm-voorpagina-speels .distriqo-catkaart-beeld img {
  transform: rotate(-6deg);
  transition: transform .25s ease;
}
.lm-voorpagina-speels .distriqo-catkaart:nth-child(even) .distriqo-catkaart-beeld img { transform: rotate(5deg); }

/* --- bewegen bij aanwijzen: alleen met een muis ----------------------------- */
/* Op een telefoon blijft een "aanwijzing" na het tikken hangen; daar dus niet. */
@media (hover: hover) {
  .lm-voorpagina-speels ul.products li.product { transition: transform .18s ease, box-shadow .18s ease; }
  .lm-voorpagina-speels ul.products li.product:hover {
    transform: translateY(-4px) rotate(-.6deg);
    box-shadow: 0 18px 36px color-mix(in srgb, var(--brand-navy) 12%, transparent);
  }
  .lm-voorpagina-speels .distriqo-catkaart:hover { transform: translateY(-3px) rotate(-.8deg); }
  .lm-voorpagina-speels .distriqo-catkaart:nth-child(even):hover { transform: translateY(-3px) rotate(.8deg); }
  .lm-voorpagina-speels .distriqo-catkaart:hover .distriqo-catkaart-beeld img { transform: rotate(0deg) scale(1.1); }
  /* De knop in WE BUY wipt even op. */
  .lm-voorpagina-speels .lm-inhoud-vol > .lm-block-primary a { transition: transform .18s ease, box-shadow .18s ease; }
  .lm-voorpagina-speels .lm-inhoud-vol > .lm-block-primary a:hover {
    transform: translateY(-2px) rotate(-1.5deg);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--brand-navy) 25%, transparent);
  }
  /* Een pijltje dat komt aanschuiven, in de binnenmarge rechts. */
  .lm-voorpagina-speels .distriqo-catkaart::after {
    content: "\2192";
    position: absolute;
    right: 9px;
    top: 50%;
    color: var(--brand-primary);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transform: translate(-6px, -50%);
    transition: opacity .18s ease, transform .18s ease;
  }
  .lm-voorpagina-speels .distriqo-catkaart:hover::after { opacity: 1; transform: translate(0, -50%); }
}

/* --- WE BUY: het etiket "We buy" als navy sticker met een vrachtwagentje ---- */
/* Eerst stond hier de vrachtwagen als groot watermerk, zoals op Sell. Op de
   voorpagina is het blok te vol: hij liep achter de tekst langs. Het etiket
   staat in de pagina-inhoud zonder klasse, vandaar het pad; klopt dat pad
   ooit niet meer, dan gebeurt er gewoon niets. */
.lm-voorpagina-speels .lm-inhoud-vol > .lm-block-primary > div > div:first-child > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-navy);
  color: #fff;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--brand-navy) 30%, transparent);
  transform: rotate(-4deg);
}
.lm-voorpagina-speels .lm-inhoud-vol > .lm-block-primary > div > div:first-child > span:first-child::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --- telefoon ----------------------------------------------------------------- */
@media (max-width: 760px) {
  .lm-voorpagina-speels .distriqo-hero-kaart { transform: rotate(1deg); }
  .lm-voorpagina-speels .distriqo-hero-kaart::before { width: 74px; height: 18px; margin-left: -37px; top: -9px; }
}

/* Wie minder beweging wil, krijgt de kaartjes stil; scheef mag blijven. */
@media (prefers-reduced-motion: reduce) {
  .lm-voorpagina-speels ul.products li.product,
  .lm-voorpagina-speels .distriqo-catkaart,
  .lm-voorpagina-speels .distriqo-catkaart-beeld img,
  .lm-voorpagina-speels .distriqo-catkaart::after,
  .lm-voorpagina-speels .lm-inhoud-vol > .lm-block-primary a { transition: none; }
  .lm-voorpagina-speels ul.products li.product:hover,
  .lm-voorpagina-speels .distriqo-catkaart:hover,
  .lm-voorpagina-speels .distriqo-catkaart:nth-child(even):hover,
  .lm-voorpagina-speels .lm-inhoud-vol > .lm-block-primary a:hover { transform: none; }
}