/*
 * parlion-overrides.css
 *
 * Targeted overrides on top of the Lucciano-template CSS (dist/mainbea6.css).
 * Loaded last so its rules win at equal specificity. Keep this file small —
 * the template file is the source of truth for everything else.
 */

/* De off-brand Lucciano-elementen (mascottes Enzo/Minion, alfajores-beelden en
   de partnerlogo's Jameson/Netflix/Universal) stonden hier met display:none
   verborgen. Ze staan nu niet meer IN de opmaak: de generator bouwt de
   pagina's uit templates/marketing/, en daar zijn ze verwijderd. Deze regels
   zijn daarmee dood en weggehaald — verbergen was de tussenoplossing. */

html,
body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

#main-menu {
  overflow: hidden !important;
}

/* Hard cap on element widths so an absolutely-positioned scrolling element
 * can't push the document past the viewport. */
*,
*::before,
*::after {
  max-width: 100vw;
}

/* =====================================================================
 * Home page — extra breathing room between waffle slides in
 * #featured-icepops. Uses inner padding with border-box so Swiper's
 * inline width on each slide stays intact while content visually
 * shrinks, creating a clear gap between adjacent cards.
 * ===================================================================== */
#featured-icepops .swiper-slide {
  box-sizing: border-box;
  padding: 0 18px;
}

@media (max-width: 639px) {
  #featured-icepops .swiper-slide {
    padding: 0 10px;
  }
}

/* =====================================================================
 * Products page — waffle filter: force exactly 3 cards per row on
 * desktop while preserving Lucciano's natural 240px card width. Done
 * by constraining the .products-list container (which is flex /
 * flex-wrap / justify-center per assets/mainbea6.css) to a width that
 * only fits 3 cards: 3 × 240px ≈ 720px, plus a little breathing room.
 * Body class is set by parlion-products.js applyOwnFilter(). On smaller
 * viewports we let Lucciano's default 50%-width rule run.
 * ===================================================================== */
@media (min-width: 1024px) {
  body.parlion-filter-waffles .products-list.wrapper {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =====================================================================
 * Next.js news routes — these classes are NOT in the Lucciano template,
 * so we style them here. Tokens follow CLAUDE.md: --black: #222,
 * --cream: #F8F8F8, --gold: #D2BE9D, --gray-300: #E5E5E5,
 * --gray-500: #666666. Max border-radius 4px. Calibre font (already
 * loaded by Lucciano template).
 * ===================================================================== */

.main-news,
.main-news-article {
  background: #F8F8F8;
  color: #222;
  font-family: 'Calibre', 'Helvetica Neue', Arial, sans-serif;
  padding-top: 120px;
}

/* De onderruimte hoort tussen de laatste sectie en de footer, niet ónder de
   footer. Hier stond `padding-bottom: 120px` op <main>, en de footer is een
   kind van <main> — dus die 120px kwam er ná te staan: een strook #F8F8F8
   onder een zwarte footer, over de volle breedte. Gemeten op /nl/news:
   main 4750px hoog, footer eindigt op 4630px, verschil 120px (80px onder
   640px). Op de andere pagina's is dat verschil 0; het zat alleen hier.
   De padding verhuist naar de inhoudswikkel, die vóór de footer eindigt. */
.main-news > [data-router-wrapper],
.main-news-article > [data-router-wrapper] {
  padding-bottom: 120px;
}

/* News listing — featured + grid -------------------------------------- */

.section-news-list {
  padding-top: 40px;
}

.section-news-list .wrapper {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.empty-state {
  padding: 80px 20px;
  text-align: center;
  color: #666;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.news-card {
  display: block;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.news-card:hover {
  box-shadow: 0 12px 32px rgba(34, 34, 34, 0.08);
  transform: translateY(-2px);
}

.news-card-image {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #E5E5E5;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.news-card:hover .news-card-image img {
  transform: scale(1.04);
}

.news-card-body {
  padding: 24px 28px 28px;
}

.news-date {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  margin-bottom: 12px;
}

.news-title {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 12px;
  color: #222;
}

.news-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.news-title a:hover {
  color: #D2BE9D;
}

.news-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: #666;
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-read-more {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #222;
  text-decoration: none;
  position: relative;
  padding-right: 18px;
}

.news-read-more::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D2BE9D;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.news-read-more:hover::after {
  transform: translateY(-50%) translateX(4px);
}

/* Featured: full-width hero card -------------------------------------- */

.news-card-featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0;
  margin-bottom: 64px;
  border: none;
  background: #222;
  color: #F8F8F8;
}

.news-card-featured .news-card-image {
  aspect-ratio: auto;
  height: 100%;
  min-height: 420px;
}

.news-card-featured .news-card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 56px;
}

.news-card-featured .news-date {
  color: #D2BE9D;
}

.news-card-featured .news-title {
  font-size: 36px;
  line-height: 1.15;
  color: #F8F8F8;
  margin-bottom: 20px;
}

.news-card-featured .news-title a {
  color: #F8F8F8;
}

.news-card-featured .news-title a:hover {
  color: #D2BE9D;
}

.news-card-featured .news-excerpt {
  color: #C9C9C9;
  font-size: 16px;
  line-height: 1.6;
  -webkit-line-clamp: 5;
  margin-bottom: 24px;
}

.news-card-featured .news-read-more {
  color: #F8F8F8;
}

/* Grid: 3 / 2 / 1 columns --------------------------------------------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 1023px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .news-card-featured {
    grid-template-columns: 1fr;
  }
  .news-card-featured .news-card-image {
    min-height: 280px;
    aspect-ratio: 16 / 9;
  }
  .news-card-featured .news-card-body {
    padding: 32px 28px;
  }
  .news-card-featured .news-title {
    font-size: 28px;
  }
}

@media (max-width: 639px) {
  .news-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .main-news,
  .main-news-article {
    padding-top: 100px;
  }
  .main-news > [data-router-wrapper],
  .main-news-article > [data-router-wrapper] {
    padding-bottom: 80px;
  }
  .news-card-featured .news-title {
    font-size: 24px;
  }
  .news-card-featured .news-card-body {
    padding: 28px 24px;
  }
  .news-title {
    font-size: 20px;
  }
}

/* News article detail page -------------------------------------------- */

.news-article {
  background: #F8F8F8;
}

.wrapper-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.back-link {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.back-link:hover {
  color: #222;
}

.news-article-header {
  margin-bottom: 32px;
}

.news-article-header .news-date {
  margin-bottom: 16px;
}

.news-article-title {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 900;
  color: #222;
  margin: 0 0 20px;
}

.news-article-excerpt {
  font-size: 18px;
  line-height: 1.55;
  color: #444;
  margin: 0 0 8px;
  font-weight: 500;
}

.news-article-image {
  margin: 32px 0;
  border-radius: 4px;
  overflow: hidden;
  background: #E5E5E5;
}

.news-article-image img {
  width: 100%;
  height: auto;
  display: block;
}

.news-article-body {
  font-size: 16px;
  line-height: 1.7;
  color: #222;
}

.news-article-body p {
  margin: 0 0 1.2em;
}

.news-article-body h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  margin: 1.8em 0 0.6em;
  color: #222;
}

.news-article-body h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  margin: 1.6em 0 0.5em;
  color: #222;
}

.news-article-body a {
  color: #222;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.news-article-body a:hover {
  color: #D2BE9D;
}

.news-article-body img {
  max-width: 100%;
  height: auto;
  margin: 1.4em 0;
  border-radius: 4px;
}

.news-article-body ul,
.news-article-body ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}

.news-article-body li {
  margin-bottom: 0.4em;
}

.news-article-body blockquote {
  border-left: 3px solid #D2BE9D;
  margin: 1.4em 0;
  padding: 0.4em 0 0.4em 1.4em;
  font-style: italic;
  color: #444;
}

.news-article-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #E5E5E5;
}

.news-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.news-tag {
  display: inline-block;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #666;
}

@media (max-width: 639px) {
  .news-article-title {
    font-size: 30px;
  }
  .news-article-excerpt {
    font-size: 16px;
  }
  .news-article-body {
    font-size: 15px;
  }
}

/* =====================================================================
 * News overview — kill the white gap below the footer.
 * Root cause: assets/mainbea6.css sets `body, html { background-color:
 * #f8f8f8 }`. Whenever the rendered content (footer included) is shorter
 * than the viewport, that cream bg shows around it. Forcing both layers
 * to #222 (template black) makes any leftover gap invisible. The
 * c-scrollbar element is injected by Locomotive Scroll at runtime; we
 * hide it because main1bce.js may flake on routes that lack the full
 * Lucciano DOM tree, leaving an orphaned scrollbar bar.
 * ===================================================================== */
.main-news ~ footer,
.main-news footer {
  margin-top: 0 !important;
}
html {
  background-color: #222 !important;
}
.c-scrollbar {
  display: none !important;
}

/* ===== Horeca form overrides ===== */
/* VAT placeholder: hidden until focus */
#horeca-vat::placeholder {
  opacity: 0;
  transition: opacity 0.3s ease;
}
#horeca-vat:focus::placeholder {
  opacity: 0.5;
}

/* Business-type radios: even spacing between options.
   Overrides Lucciano's space-between (uneven with 4 items) and the
   first-child margin-right:30px (causes asymmetric gap on item 1↔2). */
#franq-form .container-options {
  flex-wrap: wrap;
  gap: 24px;
  justify-content: flex-start;
}
#franq-form .options-y-n .option-select:first-child {
  margin-right: 0;
}

/* =====================================================================
 * Perzisch — tekst leest van rechts naar links, de opmaak staat stil
 * =====================================================================
 * `dir="rtl"` op <html> doet twee dingen tegelijk. Het laat Perzische tekst
 * van rechts naar links lezen en rechts uitlijnen — dat hoort zo. Maar het
 * spiegelt ook de hele PAGINA-OPMAAK, en dat hoort niet: de opmaak van de
 * Perzische site is met de hand op dezelfde plek gezet als de andere talen.
 *
 * Gemeten op /fa tegen /nl, allebei 1440 breed:
 *
 *   logo in de header        x=1245  tegen  x=100
 *   menuknop (toggle-nav)    x=100   tegen  x=1297
 *   footer .right (بستنی)    x=100   tegen  x=770
 *
 * Op de homepage schoof het zwarte atelierblok ("waar elke bol begint") van
 * links naar rechts, waar het achter de fotocarrousel viel — het blok leek
 * verdwenen.
 *
 * De scheiding hieronder: `direction: ltr` op <body> zet elke plaatsing terug
 * (flex-volgorde, float, absolute left/right, text-align via `start`), en de
 * elementen die tekst DRAGEN krijgen hun leesrichting expliciet terug. Zo
 * blijft de bidi-afhandeling van Perzisch schrift intact zonder dat er iets
 * van plaats wisselt.
 *
 * `dir="rtl"` blijft op <html> staan: schermlezers en de browser leiden er de
 * taalrichting uit af, en de LTR hieronder werkt alleen op de weergave. */

html[dir="rtl"] body {
  direction: ltr;
}

/* Alles wat tekst draagt leest weer van rechts naar links. Blokelementen, dus
   geen `a` of `span`: die zijn in deze template ook opmaak (menu-items,
   knoppen, kolommen) en zouden hun kinderen omdraaien. Perzisch schrift binnen
   een ltr-blok wordt door de browser sowieso van rechts naar links getekend;
   wat deze regel toevoegt is de juiste uitlijning en de juiste volgorde bij
   gemengde tekst. */
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] dd,
html[dir="rtl"] dt,
html[dir="rtl"] label,
html[dir="rtl"] figcaption,
html[dir="rtl"] blockquote,
html[dir="rtl"] address {
  /* `unicode-bidi: plaintext` in plaats van `direction: rtl`. Het bepaalt de
     richting per regel aan de hand van het eerste sterke teken — Perzisch dus
     van rechts naar links, met de uitlijning die daarbij hoort — maar het
     raakt alleen de INLINE-inhoud.

     `direction` doet meer: het keert ook de volgorde van flex- en grid-items
     om. Een aantal koppen in deze template is een flex-container. Gemeten in
     fa: H2 in #masters (2 kinderen), H2 in #featured-products (3), H2 in
     #news-home (20), H2 in #form-types (2), H5 in #contact-info (3). De
     nieuws-marquee liep daardoor de verkeerde kant op en liet een gat
     vallen. */
  unicode-bidi: plaintext;
}

/* Een invoerveld heeft geen losse regels om per stuk te bepalen; daar staat
   de richting expliciet. */
html[dir="rtl"] input,
html[dir="rtl"] textarea {
  direction: rtl;
}

/* =====================================================================
 * Persian (fa) — Sahel font
 * =====================================================================
 * Loaded on pages with <html lang="fa">. Sahel CDN-link is in each
 * fa/*.html <head>. This block only swaps font-family. */

html[lang="fa"] body,
html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] h5,
html[lang="fa"] h6,
html[lang="fa"] p,
html[lang="fa"] a,
html[lang="fa"] span,
html[lang="fa"] li,
html[lang="fa"] td,
html[lang="fa"] th,
html[lang="fa"] label,
html[lang="fa"] input,
html[lang="fa"] select,
html[lang="fa"] textarea,
html[lang="fa"] button,
html[lang="fa"] em,
html[lang="fa"] strong,
html[lang="fa"] cite,
html[lang="fa"] blockquote,
html[lang="fa"] figcaption,
html[lang="fa"] address,
html[lang="fa"] .ss,
html[lang="fa"] .big,
html[lang="fa"] .little,
html[lang="fa"] .button span,
html[lang="fa"] .menu-item,
html[lang="fa"] .link-dot,
html[lang="fa"] .a-tag,
html[lang="fa"] .eyebrow,
html[lang="fa"] .tag,
html[lang="fa"] .lang,
html[lang="fa"] input::placeholder,
html[lang="fa"] textarea::placeholder {
  font-family: 'Sahel', Tahoma, sans-serif !important;
}


/* =====================================================================
 * Chinees: geen woordafstand in de paginakoppen
 * ---------------------------------------------------------------------
 * De h1 van contact, products en atelier is opgebroken in losse woorden,
 * elk een eigen element, zodat ze na elkaar binnenkomen. De woordafstand
 * staat als inline margin op die elementen, want de binnenkomstanimatie
 * van de template werkt met flex en slikt de spatie tussen de elementen.
 *
 * Chinees schrijft zonder spaties tussen woorden. Op /zh/contact werd
 * "我们能为你做些什么？" daardoor getoond als vijf losse stukken met vier
 * gaten van 13 pixels; op /zh/products gebeurde hetzelfde met 探索 我们的.
 * Hier gaat die marge weer op nul. `!important` omdat de marge inline
 * staat en er anders niet overheen te komen is.
 *
 * Er zijn drie bronnen van ruimte en ze moeten alle drie weg.
 *
 *   1. De inline marge op de woorden zelf (10px op contact en products,
 *      15px op atelier).
 *   2. De witruimte die in de opmaak tussen de elementen staat: de rij is een
 *      blok met inline-block kinderen, dus die regelovergang telt als spatie.
 *      Die hoort bij de rij en de rij staat op 16px, dus hij is 4px breed.
 *      `font-size: 0` op de rij haalt hem weg; de woorden zelf houden hun eigen
 *      maat, die uit de template-CSS komt en niet geërfd wordt.
 *   3. Een marge uit de template zelf: `.h-content .row span` in mainbea6.css
 *      geeft elke span in de geschiedeniskop 10px mee. Die staat niet inline,
 *      dus de regel hieronder pakt álle directe kinderen van de rij en niet
 *      alleen die met een eigen style-attribuut.
 *
 * De vierde bron zat in het sjabloon zelf: daar stond de woordspatie BINNEN het
 * element (`{{t030}} `), waardoor hij de maat van die kop droeg: 12px. Dat is
 * nu het token {{WOORDSPATIE}}, dat de generator voor Chinees leeg laat.
 *
 * De opsplitsing zelf blijft: de vertraagde binnenkomst leest in het
 * Chinees net zo goed, zolang de tekens aaneen staan.
 * ===================================================================== */
html[lang="zh"] h1 .row {
  font-size: 0;
}

html[lang="zh"] h1 .row > * {
  margin-inline-end: 0 !important;
}

/* Eén uitzondering, en die is ook een Chinese regel: tussen Chinese tekens en
 * een westers woord hoort juist wél ruimte, ongeveer een kwart van de
 * letterhoogte. Op /zh/atelier staat "走进幕后的 Parlion" en zonder die ruimte
 * raakt de P bijna het 的 ervoor.
 *
 * Dit is de enige plek op de hele site waar een westers woord in een Chinese
 * kop naast Chinese tekens staat. Komt er later nog zo'n kop bij, dan hoort
 * dat woord dezelfde 0.25em te krijgen; alles wat alleen uit Chinese tekens
 * bestaat, blijft aaneen. */
html[lang="zh"] #locales-title.lab-title h1 .row > strong {
  margin-inline-start: 0.25em;
}


/* =====================================================================
 * FA-only fix: NEWS marquee niet afgesneden bovenaan
 * =====================================================================
 * Lucciano zet height:54px (mobiel 30/32px) op .news-mosaic h2 span/strong.
 * Sahel-glyphs zijn hoger dan Latijnse "NEWS!" → top wordt geclipt.
 * Fix: height auto + extra ruimte boven de mosaic. */

/* FA marquee: alles op één strakke lijn, glyphs volledig zichtbaar */
html[lang="fa"] #news-home {
  overflow: visible;
}
html[lang="fa"] #news-home .news-mosaic {
  overflow: visible;
  padding-top: 60px;
}
html[lang="fa"] #news-home .news-mosaic h2 {
  align-items: center;
  overflow: visible;
}
html[lang="fa"] #news-home .news-mosaic h2 span,
html[lang="fa"] #news-home .news-mosaic h2 strong {
  font-size: 45px;
  white-space: nowrap;
  height: 70px;
  line-height: 70px;
  display: inline-flex;
  align-items: center;
}

/* =====================================================================
 * FA-only positiefixes voor footer
 * ===================================================================== */

/* W2 — h2 "بستنی" rechts uitgelijnd binnen footer .right */
html[lang="fa"] footer .navigation .right a {
  justify-content: flex-end;
}
html[lang="fa"] footer .navigation .right a h2 {
  text-align: right;
}

/* W3 — Newsletter form labels (نام / رایانامه) rechts binnen het input-veld */
html[lang="fa"] footer .newsletter-form .input {
  padding-right: 0;
  padding-left: 35px;
}
html[lang="fa"] footer .newsletter-form .input label {
  left: auto;
  right: 20px;
}

/* W4 — Newsletter form: button links visueel, p.big tekst rechts visueel */
html[lang="fa"] footer .newsletter-form {
  flex-direction: row-reverse;
}
html[lang="fa"] footer .newsletter-form p {
  margin-right: 0 !important;
  margin-left: 60px !important;
  text-align: right;
}

/* W5 — Footer link-kolommen rechts uitgelijnd */
html[lang="fa"] footer .navigation .left .column {
  text-align: right;
}
html[lang="fa"] footer .navigation .left .column a {
  width: 100%;
  text-align: right;
}

/* FIX 1 — Newsletter popup labels rechts uitlijnen */
[dir="rtl"] #popup-subscribe .input label,
[dir="rtl"] #popup-newsletter .input label {
    left: auto;
    right: 20px;
    text-align: right;
}
[dir="rtl"] #popup-subscribe .input.active label,
[dir="rtl"] #popup-newsletter .input.active label {
    left: auto;
    right: 20px;
}
[dir="rtl"] #popup-subscribe .input input,
[dir="rtl"] #popup-newsletter .input input {
    text-align: right;
}
[dir="rtl"] #popup-subscribe h2,
[dir="rtl"] #popup-newsletter h2 {
    text-align: right;
}

/* FIX 2 — "بستنی سرای ما" grote verticale tekst dikker maken */
[dir="rtl"] #new-store h2 .ss {
    font-weight: 700;
    -webkit-text-stroke: 1.5px currentColor;
}

/* FIX 3 — "سرچشمهٔ هر گردولی" rechts uitlijnen */
[dir="rtl"] #new-store p.big {
    text-align: right;
}

/* =====================================================================
 * FA-only fixes — popup labels right-align, atelier h2 thicker, atelier p right
 * ===================================================================== */

/* 1 — Newsletter popup: labels نام/رایانامه + titel "! درود" rechts uitlijnen */
html[lang="fa"] #popup-subscribe .ps-text h6 {
  text-align: right;
}
html[lang="fa"] #popup-subscribe .input label {
  text-align: right;
}
html[lang="fa"] #popup-subscribe .input input {
  text-align: right;
}

/* 2 — "بستنی سرای ما" grote verticale tekst dikker maken */
html[lang="fa"] #new-store h2 .ss {
  font-weight: 700;
  -webkit-text-stroke: 1.5px currentColor;
}

/* 3 — "سرچشمهٔ هر گردولی" rechts uitlijnen */
html[lang="fa"] #new-store p.big {
  text-align: right;
}

/* =====================================================================
 * FA-only — sterkere overrides (newsletter popup labels positioneren,
 * atelier-titel extra dik, atelier-paragraaf gecentreerd).
 * Append-only: bestaande regels blijven onaangetast; deze winnen via
 * source-order + !important waar nodig.
 * ===================================================================== */

/* Newsletter popup: labels نام / رایانامه fysiek aan de rechterkant
 * van het input-veld plaatsen. Lucciano-template zet ze absoluut links;
 * alleen text-align: right is dus niet voldoende. */
html[lang="fa"] #popup-subscribe .input label {
  left: auto !important;
  right: 20px !important;
  text-align: right !important;
}
html[lang="fa"] #popup-subscribe .input.active label {
  left: auto !important;
  right: 20px !important;
}
html[lang="fa"] #popup-subscribe .input input {
  text-align: right !important;
}

/* Newsletter popup titel "! درود" rechts uitlijnen */
html[lang="fa"] #popup-subscribe .ps-text h6 {
  text-align: right !important;
}

/* "بستنی سرای ما" — extra dikker dan de bestaande 1.5px stroke */
html[lang="fa"] #new-store h2 .ss {
  font-weight: 900 !important;
  -webkit-text-stroke: 2.5px currentColor !important;
}

/* "سرچشمهٔ هر گردولی" — gecentreerd (override bestaande right-align) */
html[lang="fa"] #new-store p.big {
  text-align: center !important;
}

/* "شیرینیِ" + "یادگارِ نیاکان" — masters-sectie SS-tekst dikker
 * (zelfde behandeling als de atelier .ss in #new-store) */
html[lang="fa"] #masters h2 .ss {
  font-weight: 900 !important;
  -webkit-text-stroke: 2.5px currentColor !important;
}

/* Extra verticale ruimte tussen "شیرینیِ" en "یادگارِ نیاکان" — die
 * tweede span zit in een .row container direct onder de eerste span. */
html[lang="fa"] #masters h2 .row {
  margin-top: 0.4em !important;
}

[dir="rtl"] #main-menu {
    overflow-x: hidden;
    overflow-y: hidden;
}

/* FA pages hebben geen dir="rtl" attribute, alleen <html lang="fa">.
 * Lucciano-template zet overflow:auto zowel op #main-menu (media-query
 * regel) als op .main-menu-inner — beide veroorzaken de scrollbars die
 * je ziet. Hier worden ze allebei dichtgezet voor lang="fa". */
html[lang="fa"] #main-menu,
html[lang="fa"] #main-menu .main-menu-inner {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* Zelfde scrollbar-fix maar voor ALLE talen (EN/NL/FR/FA). De bovenstaande
 * #main-menu regel (regel 16) dekt alleen het outer panel; .main-menu-inner
 * houdt nog overflow:auto van de Lucciano-template. */
#main-menu .main-menu-inner {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* FA history-menu jaartallen: globale Sahel-override (regel 535+) trekt
 * de cijfers naar het Persische font, waardoor ze er anders uitzien dan
 * in EN. Hier specifiek terug naar Calibre voor #column-4-1. */
html[lang="fa"] #column-4-1 .menu-text {
    font-family: 'Calibre', 'Helvetica Neue', Arial, sans-serif !important;
}

/* FA history-pagina: body-tekst en foto-bijschriften rechts uitlijnen
 * voor Persische leesrichting. Lucciano-template gaat default uit van
 * LTR text-align: left voor .h-text en .photo-name p.
 * direction: rtl is óók nodig — anders worden neutrale tekens (punt,
 * komma, em-dash, dubbele punt) door de bidi-engine aan de LTR-zijde
 * geplaatst en verschijnen ze visueel aan de verkeerde kant van de
 * Persische zin. */
html[lang="fa"] #history-content .h-text p,
html[lang="fa"] #history-content .photo-name p {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
}

/* Footer right-block: h2 op één regel + duwen naar de rechterkant.
 * Lucciano default is justify-content: flex-start (p.big en h2 beide
 * tegen links, h2 wordt door beperkte ruimte over 2 regels gebroken
 * — bv. "Ice Cream"). Met space-between staat p.big links en h2 rechts;
 * white-space: nowrap voorkomt line-break op de h2. */
footer .navigation .right a {
    justify-content: space-between !important;
}
footer .navigation .right h2 {
    white-space: nowrap;
}


/* FA horeca-formulier: labels en vragen stonden links.
 *
 * De oorzaak zit hierboven: `html[dir="rtl"] body { direction: ltr }` houdt de
 * ópmaak ongespiegeld — dat is opzet, anders klapt de hele pagina om. Maar
 * daardoor begint elk tekstblok links, tenzij het hier apart wordt
 * rechtgezet. Voor de popup, de footer en de history-tekst was dat gebeurd,
 * voor #franq-form nooit. Gemeten op /fa/horeca: elk label en elke vraag
 * stond op 30px van de LINKERrand.
 *
 * Alleen deze vier: kop, labels, de vraag boven de keuzerij en de keuzerij
 * zelf. `unicode-bidi: isolate` houdt de sterretjes van verplichte velden
 * aan de Perzische kant van de zin. */
html[lang="fa"] #franq-form .title-step-franq-f,
html[lang="fa"] #franq-form label,
html[lang="fa"] #franq-form .options-y-n > p,
html[lang="fa"] .service-form .s-form label {
    text-align: right !important;
    direction: rtl !important;
    unicode-bidi: isolate !important;
}

/* De labels zijn `position: absolute; left: 0` binnen hun veld. Een
 * text-align alleen verplaatst ze niet: het kadertje is precies zo breed als
 * de tekst en blijft aan de linkerrand plakken. Gemeten: veld 1240px breed,
 * label 207px, rechterrand 1033px van de rechterkant af. Daarom de
 * verankering omdraaien. */
html[lang="fa"] #franq-form .input > label,
html[lang="fa"] .service-form .s-form .input > label {
    left: auto !important;
    right: 0 !important;
}

/* De vraag boven de keuzerij is een flex-kind in een kolom en krimpt tot de
 * breedte van zijn tekst; ook daar doet text-align niets. Naar rechts duwen. */
html[lang="fa"] #franq-form .options-y-n > p {
    align-self: flex-end;
}

/* De keuzerij leest van rechts naar links, net als de vraag erboven. */
html[lang="fa"] #franq-form .container-options {
    direction: rtl !important;
}

/* FA history-titel: spans in .row flowen LTR (default), waardoor de
 * Persische leesvolgorde omgekeerd verschijnt — gebruiker leest "گردولی
 * نهفته در هر هنرِ" terwijl bedoeld is "هنرِ نهفته در هر گردولی".
 * direction: rtl op de .row keert de inline-flow om zodat de eerste
 * span (هنرِ) visueel rechts staat (= start van Persische zin). */
html[lang="fa"] #history-content #locales-title h1 .row {
    direction: rtl !important;
}

/* Zelfde geval in de contact-titel. Gemeten op /fa/contact: het eerste woord
 * uit de bron (چگونه) stond op x=127 en het laatste (کنیم؟) op x=430 — de zin
 * las dus achterstevoren.
 *
 * ALLEEN deze .row. De koppen in #form-types staan er goed bij met de
 * standaard ltr-flow (gemeten: eerste woord telkens rechts); daar direction
 * omzetten draait ze juist óm. */
html[lang="fa"] #contact-title h1 .row {
    direction: rtl !important;
}

/* 13 sep 2026: dezelfde omkering stond er nog op twee pagina's die destijds
 * niet nagekeken zijn. Gemeten op 1440px:
 *
 *   /fa/products  de kop is "فرآورده‌های ما را بشناسید". Het eerste woord stond
 *                 op x=549 en het tweede op x=802, dus links van elkaar in
 *                 plaats van rechts.
 *   /fa/atelier   de kop is "نگاهی به پشتِ صحنهٔ پارلیون". Eerste woord x=387,
 *                 tweede x=606, derde x=891: de zin las volledig achterstevoren.
 *
 * De history-regel hierboven pakt deze twee niet, want die is aan
 * #history-content opgehangen en de atelierpagina heeft datzelfde
 * #locales-title zonder die ouder.
 *
 * Waarom dit niet in één brede regel kan: de koppen in #form-types lezen met
 * de standaard ltr-flow juist wél goed en zouden hier omkeren. Zie de
 * toelichting daar. Vandaar opnieuw per blok. */
html[lang="fa"] #products-overview h1 .row,
html[lang="fa"] #locales-title.lab-title h1 .row {
    direction: rtl !important;
}

/* #form-types: de eyebrow en de alinea stonden links terwijl de kop ernaast
 * rechts staat. Gemeten in een blok van 535px: eyebrow op 31px van links,
 * alinea idem. Alleen uitlijnen — `direction` blijft ltr, want de koppen in
 * dit blok lezen daarmee al goed en zouden anders omkeren. */
html[lang="fa"] #form-types .form-type h5.little {
    display: block;
    text-align: right !important;
}

/* De alinea is een blok met max-width: 344px binnen 473px. text-align duwt
 * de tekst wel naar rechts maar het blok zelf niet; dat gaat met de marge. */
html[lang="fa"] #form-types .form-type p {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

/* De twee koppen hingen nog links: elke .row stond op 31px van de LINKERrand
 * terwijl de eyebrow en de alinea op 31px van de RECHTERrand staan. De rijen
 * zijn smaller dan hun blok (192, 139, 48 en 93px binnen 473px), dus ze
 * schuiven met de marge naar rechts.
 *
 * NIET met `direction: rtl`. De woorden staan in de bron in leesvolgorde en
 * komen met de standaard ltr-flow al goed te staan (eerste woord rechts);
 * direction omzetten draait ze om. Dat is precies wat er eerder misging. */
html[lang="fa"] #form-types .form-type h2 .row {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Het streepje boven de eyebrow staat op `position: absolute; left: 0` en
 * groeit in breedte tijdens de binnenkomstanimatie. Alleen de verankering
 * omdraaien, zodat het vanaf de rechterkant groeit. */
html[lang="fa"] #form-types .form-type h5.little .line {
    left: auto !important;
    right: 0 !important;
}

/* #contact-info: de Perzische kopjes staan rechts in hun kolom, de gegevens
 * eronder links — gemeten 116px, 319px en 402px van de rechterrand af. Dat
 * leest als drie kolommen die niet uitgelijnd zijn. Alleen de uitlijning
 * gaat om: `direction` blijft ltr, zodat het adres, het e-mailadres en de
 * kanalen van links naar rechts leesbaar blijven. */
html[lang="fa"] #contact-info .c-info h5 {
    display: block;
    text-align: right !important;
}

/* De onderste footerregel staat op `justify-content: space-between`: het
 * copyright links, "ontwikkeld door" rechts. In een rtl-pagina hoort het
 * copyright aan de leeskant, dus rechts. Gemeten stonden ze op 0 en 1115px
 * vanaf links. row-reverse wisselt ze om zonder de opmaak aan te raken; de
 * andere zeven talen blijven zoals ze zijn. */
html[lang="fa"] footer .copy {
    flex-direction: row-reverse;
}

/* De kanalenkolom is een `flex-wrap` met `justify-content: space-between`. De
 * drie links zijn samen 519px breed in een kolom van 413px, dus ze vallen om
 * naar twee plus één: Instagram links, Facebook rechts, TikTok eronder weer
 * links. Onder elkaar en tegen de rechterrand staat het gelijk met de twee
 * kolommen ernaast, die hun regels ook stapelen. */
html[lang="fa"] #contact-info .c-info h5 {
    flex-direction: column !important;
    align-items: flex-end !important;
}

/* Onder de 800px staan de drie kolommen onder elkaar, maar de eerste twee
 * houden hun `padding-right: 16.875px` — de tussenruimte die alleen zin heeft
 * als ze naast elkaar staan. De derde heeft die niet. Gemeten op 375px: kolom
 * 1 en 2 eindigen 17px vóór de rechterrand, kolom 3 precies op de rand, dus
 * het kader van "ما را دنبال کنید" steekt uit. Gestapeld hoort er geen
 * tussenruimte te zijn. */
@media screen and (max-width: 800px) {
    html[lang="fa"] #contact-info .c-info {
        padding-right: 0 !important;
    }
}

/* Newsletter popup titel "! درود" gecentreerd net als EN/NL ("Hi!" / "Hallo!").
 * Override de eerdere right-align regels — later in source-order wint bij
 * gelijke specificiteit + !important. */
html[lang="fa"] #popup-subscribe .ps-text h6 {
  text-align: center !important;
}

/* Footer .right (FA): forceer p.big "درباره فرآورده‌ها بیشتر بدانید" aan
 * de LINKERKANT van h2 "بستنی". Lucciano-template zet de <a> op flex met
 * row-direction op desktop. Door direction: ltr te forceren blijft de
 * DOM-volgorde (p, h2) ook visueel in de volgorde [LEFT, RIGHT]. Met
 * space-between worden p (links) en h2 (rechts) tegen de uiteinden
 * van de <a> geduwd, ipv beide samengeklemd aan de rechterkant. */
html[lang="fa"] footer .navigation .right a {
  flex-direction: row !important;
  direction: ltr !important;
  justify-content: space-between !important;
}

/* =====================================================================
 * Defensive fix: ensure menu interaction is never blocked by the
 * page-transition overlay (or any other visual full-screen layer).
 *
 * #page-transition is a purely decorative full-screen panel that animates
 * during route changes (managed by main1bce.js hideLoader + parlion-
 * order-transition.js). It has no interactive children. Forcing
 * pointer-events:none means clicks always pass through to the underlying
 * page — the overlay still renders visually but cannot intercept input
 * even if a transition's hideLoader animation is interrupted or stalls.
 *
 * The two #main-menu rules are explicit `auto` (the browser default),
 * acting as an extra guarantee that menu interactions remain enabled
 * regardless of any inherited or cascading pointer-events:none on a
 * parent element.
 *
 * Locale-agnostic: applies to EN/NL/FR/FA equally. Cannot break working
 * locales because:
 *   - #page-transition has no clickable children to lose
 *   - explicit pointer-events:auto can never be MORE restrictive than the
 *     default
 * ===================================================================== */
#page-transition,
#page-transition *,
#page-transition #pt-1,
#page-transition .logo-loader,
#page-transition .wrapper {
  pointer-events: none !important;
}

/* The .main-menu-images container holds the floating product photos that
 * animate when you hover a menu item. It overlays the entire menu area
 * with `pointer-events: auto` by default, which blocks hover detection
 * on the menu-items underneath (visible as a "dead zone" starting where
 * the images begin and extending right). Make the whole image overlay
 * click-through so hover events reach the .menu-item links beneath it. */
#main-menu .main-menu-images,
#main-menu .main-menu-images *,
#main-menu .menu-images-wrapper,
#main-menu .menu-images-wrapper * {
  pointer-events: none !important;
}

#main-menu {
  pointer-events: auto !important;
}

#main-menu .menu-item {
  pointer-events: auto !important;
}

/* =====================================================================
 * Nieuwsbriefvenster (#popup-subscribe) — met de koe en het schaap
 * ---------------------------------------------------------------------
 * Dit venster stond uit omdat het de mascottes van Lucciano meebracht
 * (enzo.png = pandaijsje, ps-minion.png = minion). Die staan er niet meer
 * in; de koe leunt nu over de linkerbovenhoek en het schaap over de
 * rechteronderhoek.
 *
 * Hun eigen #ps-enzo en #ps-minion sturen op rotatie en vaste breedtes van
 * 250 en 300px, en zetten de minion op top:50% aan de rechterkant. Dat is
 * gemaakt voor een ijsje aan een stokje dat schuin binnenvalt. Onze twee
 * dieren leunen over een rand: ze staan rechtop en horen op een hoek.
 * Vandaar eigen id's in plaats van hun regels overschrijven.
 *
 * De witte kaart is .ps-text::before en groeit in .7s van hoogte 0 naar
 * 100%. De dieren komen daarna, met .45s en .6s vertraging, zodat ze op
 * een kaart leunen die er al is.
 * ===================================================================== */
#popup-subscribe .ps-content .ps-mascotte {
  position: absolute;
  display: block;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.25, .8, .25, 1),
              transform .5s cubic-bezier(.25, .8, .25, 1);
}

#popup-subscribe .ps-content .ps-mascotte img {
  display: block;
  width: 100%;
  height: auto;
}

/* =====================================================================
 * De streep en de punt voor de begroeting
 * ---------------------------------------------------------------------
 * Alles blijft staan zoals in hun CSS: de streep (::after) begint op
 * left:-70px, en dat is exact de linkerrand van de kaart — de padding van
 * .ps-text is 70px. De punt (::before) staat erachter, de tekst staat
 * gecentreerd. Wij korten alleen in.
 *
 * Waarom: hun maten kloppen voor één woord, hun "Hi!". Gemeten op 1440x900,
 * kop-vak 536-905, streep 466-616, punt 641-649:
 *   "Hi!"       begint op 694  -> 45px lucht, zoals bedoeld
 *   "Hallo!"    begint op 647  -> de punt ligt 2px ÓP de tekst
 *   "Bonjour !" begint op 614  -> de tekst loopt onder punt én streep door
 * Hoe langer het woord, hoe verder het vanuit het midden naar links groeit.
 *
 * Het langste woord van de acht is "Bonjour !" en dat begint op 78px in het
 * kop-vak. De punt eindigt nu op 58 en de streep op 26, dus er blijft 20px
 * lucht over bij de langste taal en meer bij de kortere. De streep begint
 * onveranderd op de linkerrand van de kaart.
 * ===================================================================== */
#popup-subscribe .ps-content .ps-text > h6::after {   /* de streep */
  width: 96px;
}

#popup-subscribe .ps-content .ps-text > h6::before {  /* de punt */
  left: 50px;
}

/* Engels is de taal waarvoor hun venster gemaakt is: "Hi!" begint op 694 en
   laat hun streep van 150px en hun punt op 105px ongemoeid staan, met de 45px
   lucht die zij bedoeld hebben. Daar korten we dus niets in. */
html[lang="en"] #popup-subscribe .ps-content .ps-text > h6::after {
  width: 150px;
}

html[lang="en"] #popup-subscribe .ps-content .ps-text > h6::before {
  left: 105px;
}

/* Naar de compositie die Parham aanleverde: de koe hangt met haar gevouwen
   handen over de BOVENrand en staat verder helemaal boven de kaart; het schaap
   staat tegen de RECHTERrand, net onder het midden, met maar een paar pixels
   over het wit.
   De verhoudingen komen uit zijn beeld, omgerekend naar onze kaart van
   550x483: koe 44% van de kaartbreedte, handen 28px over de bovenrand, 12px
   links uitstekend; schaap 41% breed, 6px over de rechterrand, onderkant 59px
   boven de onderrand.
   Alles is aan de kaart geknoopt in plaats van in vaste pixels gezet, zodat het
   ook klopt als de kaart per taal iets hoger wordt (Perzisch is 25px hoger dan
   Nederlands).
   De maat is met vh begrensd omdat de kaart midden in beeld staat: op 1440x900
   is er 232px boven de kaart en op 1280x800 nog 182px. Met 25vh houdt de koe
   daar 34px respectievelijk 9px vrij; zonder die grens valt haar kop eraf. */
#popup-subscribe .ps-content #ps-koe {
  width: min(244px, 25vh);
  left: -12px;
  top: auto;
  bottom: calc(100% - 28px);
  transform: translateY(22px);
}

/* Het schaap staat ACHTER de kaart: z-index -1 zet hem in de negatieve laag
   van .ps-content, en die wordt geschilderd vóór .ps-text met zijn witte vlak.
   Wat over de kaart valt is daardoor niet zichtbaar — geen pixel wol over het
   wit, en de rechterrand snijdt hem netjes af. Hij steekt 40px achter de kaart,
   want zonder die overlap raakt hij de rand alleen aan en lijkt hij ernaast te
   zweven in plaats van erachter te staan. */
#popup-subscribe .ps-content #ps-schaap {
  width: min(226px, 25vh);
  left: 100%;
  right: auto;
  margin-left: -40px;
  bottom: 59px;
  z-index: -1;
  transform: translateY(-22px);
}

/* Op een laag venster (laptop met browserbalken, ~700px werkhoogte) is er maar
   132px boven de kaart. 25vh geeft daar een koe die er 20px bovenuit steekt; op
   21vh houdt ze 8px vrij. Boven 780px blijft het 25vh, want daar is de ruimte
   er wel. */
@media screen and (max-height: 780px) {
  #popup-subscribe .ps-content #ps-koe { width: min(244px, 21vh); }
}

#popup-subscribe.active .ps-content #ps-koe {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .45s;
}

#popup-subscribe.active .ps-content #ps-schaap {
  opacity: 1;
  transform: translateY(0);
  transition-delay: .6s;
}

@media (prefers-reduced-motion: reduce) {
  #popup-subscribe .ps-content .ps-mascotte { transition: none; transform: none; }
}

/* Onder 800px verbergt de template alle beelden in het venster
   (mainbea6.css r6695) — de kaart is daar 95% breed en er is geen ruimte
   naast. Wij doen hetzelfde met de <picture> eromheen. */
@media screen and (max-width: 800px) {
  #popup-subscribe .ps-content .ps-mascotte { display: none; }
}

/* Fase 2A — herkomststrook (vervangt nep-partnerlogos) */
#partners .parlion-origins{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center}
#partners .parlion-origins span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9a8a6a}
[dir="rtl"] #partners .parlion-origins span{letter-spacing:normal}
/* Lucciano's enter-x reveal triggert hier niet altijd op de statische pagina's,
   waardoor de strook opacity:0 bleef (leek "verwijderd"). We forceren de tekst
   zichtbaar — de Lucciano-stijl (vorm/kleur/font) blijft volledig ongemoeid. */
#partners h5.little,
#partners h5.little span,
#partners .parlion-origins span{opacity:1!important;transform:none!important}

/* =====================================================================
 * Hero-video — vult het scherm weer volledig
 * ---------------------------------------------------------------------
 * assets/mainbea6.css zet de video in twee media-queries als PAAR op:
 *
 *   @media (max-width: 800px)   { width: 110%; margin-left:  -5% }
 *   @media (min-height: 700px)  { width: 122%; margin-left: -11% }
 *
 * De bedoeling: de video hangt links en rechts buiten het kader, zodat de
 * parallax geen randen laat zien. Maar de `width` wordt elders teruggezet
 * naar 100% terwijl de negatieve `margin-left` blijft staan. Netto schoof de
 * video 11% naar links en bleef er rechts een lege strook van 11% over — op
 * 1440px precies 158px, over de volle hoogte.
 *
 * We laten de video simpelweg het kader vullen. De parallax zit op
 * .hero-video-wrap (data-scroll-speed="-3.5") en beweegt verticaal, dus de
 * horizontale overhang is niet nodig. `.hero-video-wrap` heeft
 * overflow:hidden, dus er is niets dat kan uitsteken.
 *
 * !important is nodig om de media-query-regels te verslaan. De
 * Lucciano-template zelf blijft ongemoeid.
 * ===================================================================== */
.hero-video-wrap video {
  width: 100% !important;
  min-width: 100% !important;
  margin-left: 0 !important;
}

/* ==========================================================================
   CONTACT — leeuw met meebewegende ogen
   ==========================================================================
   Het varken (Tonio) van de Lucciano-template is vervangen door de
   Parlion-leeuw. De mechaniek van de template is NIET overgenomen: tonioEyes()
   in main1bce.js pakt het middelpunt van één oog (`t[1]`), rekent daar één
   hoek uit en legt die op álle .eye-elementen. Twee ogen die tien centimeter
   uit elkaar staan kijken dan naar hetzelfde punt vanuit hetzelfde middelpunt,
   en het oog waar niet vanuit gerekend is, kijkt scheef.

   Daarom heten de ogen hier `.lion-eye` — die klasse zoekt de template niet op,
   dus er is geen tweede schrijver op dezelfde transform. parlion-lion-eyes.js
   rekent per oog vanuit het eigen middelpunt en schuift de pupil binnen een
   ellips in plaats van het oogdoosje te roteren; dat laatste werkt alleen bij
   een rond oog.

   Het beeld is parlion-leeuw.png (1400x1268), met een echt alfakanaal. De
   voorganger was een JPG die op wit was uitgesneden, met een ingebakken
   transparantie-dambord onder de poten. De opgemeten oogposities staan
   hieronder bij de twee eye-regels.
   mainbea6.css en main1bce.js blijven ongemoeid (zie CLAUDE.md).
   ========================================================================== */

/* De template geeft .tonio-wrapper geen eigen positioneringscontext; zonder
   deze regel hangen de ogen aan een voorouder verderop. `line-height: 0` haalt
   de regelafstand onder de <img> weg — anders staat het beeld een paar pixels
   hoger dan de doos en klopt elk percentage hieronder net niet.
   `z-index` tilt de leeuw boven de zwarte sectie eronder; hij steekt daar
   overheen (zie de negatieve marge hieronder). */
#contact-title .tonio-wrapper {
  position: relative;
  z-index: 2;
  line-height: 0;
}

/* De doos van het beeld is precies zo hoog als het lichaam tot de kaderlijn;
   de poten steken er onderuit. Zo bepaalt de kaderlijn de onderrand van de
   sectie, in plaats van dat een negatieve marge hem er ongeveer op probeert te
   krijgen. Dat laatste stond hier eerst en gaf op de gebouwde site 50px
   verschil, omdat de sectiehoogte daar anders uitvalt dan op de dev-server.

   Hoogte = beeldverhouding x kaderlijn = 1268/1400 x 0.9235 = 83.64% van de
   breedte. `padding-bottom` op een percentage rekent op de breedte van het
   element zelf, dus dit schaalt mee zonder dat er ergens een vaste pixelmaat
   bij hoeft. */
#contact-title .tonio-wrapper picture {
  display: block;
  position: relative;
  height: 0;
  padding-bottom: 83.64%;
}

/* De handen op de kader.
   ----------------------
   In parlion-leeuw.png eindigt het lichaam op een rechte lijn en hangen alleen
   de twee poten daaronder door. Opgemeten in het bronbestand (4800x3584): op
   y=3144 valt het aantal zichtbare pixels van 3438 naar 1693 — daar houdt het
   lichaam op. Na bijsnijden op de alfa-rand en schalen naar 1400x1268 ligt die
   lijn op 92.35% van de beeldhoogte.

   Die lijn moet samenvallen met de bovenkant van het zwarte vlak eronder, zodat
   de poten over dat zwart hangen. Het beeld steekt er dus voor 7.65% van zijn
   hoogte onderuit. Een procentuele marge rekent op de BREEDTE van het
   bovenliggende blok — dat is hier de wrapper, en het beeld is daar 100% van.
   7.65% van de hoogte is 7.65% x 1268/1400 = 6.93% van de breedte.

   Het beeld hangt absoluut in die doos en steekt er onderuit: de poten vallen
   zo over het zwarte vlak dat direct onder de sectie begint.

   Dit kon niet met het vorige bestand: dat was een JPG zonder alfakanaal,
   uitgesneden op wit. Over een zwarte sectie hangen leverde een wit blok op —
   precies de witte rand rond de pootjes. */
#contact-title .tonio-wrapper picture img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* De template trekt de volgende sectie tien pixels omhoog
   (assets/mainbea6.css). Dat dichtte een naadje toen de leeuw nog binnen de
   sectie bleef; nu bepaalt de kaderlijn de onderrand en moeten die twee exact
   op elkaar aansluiten. */
#form-types {
  margin-top: 0;
}

/* De sectie klipt op haar eigen onderrand, dus de poten die eronder uitsteken
   zouden worden afgesneden. `body` en `html` staan al op `overflow-x: hidden`
   (gemeten: scrollWidth blijft gelijk aan clientWidth met deze regel erbij),
   dus de horizontale overloop van .bg-word wordt daar al opgevangen en deze
   sectie hoeft niet zelf te klippen. */
#contact-title {
  overflow: visible;
}

/* De oude .tonio-eyes-doos wordt niet meer gebruikt; mocht een gecachte pagina
   hem nog serveren, dan blijft hij onzichtbaar in plaats van dubbel te staan.
   Hetzelfde geldt voor de twee lege .eye-elementen die tonioEyes() in
   main1bce.js opzoekt — zie de toelichting in templates/marketing/contact.html. */
#contact-title .tonio-wrapper .tonio-eyes,
#contact-title .tonio-wrapper > .eye {
  display: none;
}

/* De ogenlaag ligt exact over het beeld: even breed als de wrapper en met
   dezelfde verhouding als parlion-leeuw.png (1400x1268). Ze kan niet de hoogte
   van de wrapper aanhouden — die is door de negatieve marge hierboven korter
   dan het beeld, en dan zouden alle percentages hieronder verschuiven.

   `display: block` heft het `hidden`-attribuut op dat in de template op de
   laag staat. Zolang dit stylesheet niet geladen is (of een browser een
   kapotte versie ervan vasthoudt), blijven de losse ooglagen dus onzichtbaar
   in plaats van als bollen en sikkels op ware grootte over de pagina te
   vallen — de leeuw kijkt dan gewoon met zijn ingebakken lege ogen. */
#contact-title .tonio-wrapper .lion-eyes {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1400 / 1268;
  pointer-events: none;
}

/* Elk oog bestaat uit drie lagen. Alleen de middelste beweegt.
   ---------------------------------------------------------------
   De kas (.lion-oog) staat op de plek van het oude oog en is even groot als
   de uitsnede uit de kop van de chef-leeuw (295x265 bronpixels). Daarbinnen:
     oogwit   staat stil, onderop
     .lion-eye  de iris, schuift met --dx/--dy en wordt geklipt op het oogwit
     ooglid   staat stil, bovenop, zodat de iris eronder verdwijnt
   Dat laatste is wat het echt maakt: een oog waarvan de iris tegen een rand
   loopt leest als een schijfje, een iris die onder het ooglid glijdt niet.

   De maat is gekozen op het beeld zelf: het ingebakken oogwit van de leeuw is
   140px breed (gemeten: x 455-595 op het bronbeeld van 1400). De zichtbare
   oogopening van de uitsnede is 177/295 van de kasbreedte; met een kas van
   16.65% = 233px komt die opening op precies die 140px uit. Op 15.2% was de
   opening 128px en oogden de ogen te klein (Parham, 27 aug). */
#contact-title .tonio-wrapper .lion-oog {
  position: absolute;
  left: calc(var(--oog-x) * 1%);
  top: calc(var(--oog-y) * 1%);
  width: 16.65%;
  aspect-ratio: 295 / 265;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#contact-title .tonio-wrapper .lion-oog > img,
#contact-title .tonio-wrapper .lion-oog > .oog-venster,
#contact-title .tonio-wrapper .oog-venster > .lion-eye {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#contact-title .tonio-wrapper .lion-oog .oog-wit { z-index: 1; }

/* Het masker hoort op een laag die STILSTAAT. Stond het op de iris zelf, dan
   schoof het masker mee met de iris en klipte het dus nooit: de iris liep het
   oogwit uit en kwam over het gezicht te liggen. Nu maskeert dit venster, en
   beweegt de iris erbinnen. */
#contact-title .tonio-wrapper .lion-oog > .oog-venster {
  z-index: 2;
  overflow: hidden;
  -webkit-mask-image: url(../assets/img/contacto/oog-wit.png);
  mask-image: url(../assets/img/contacto/oog-wit.png);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

#contact-title .tonio-wrapper .oog-venster > .lion-eye {
  transform: translate(var(--dx, 0px), var(--dy, 0px));
  /* Geen transition. Een overgang begint opnieuw bij elke muisbeweging en komt
     dus nooit aan; dat is het schokken. Het script laat de iris zelf per frame
     naar zijn doel toe lopen, zie parlion-lion-eyes.js. */
}

#contact-title .tonio-wrapper .lion-oog .oog-lid { z-index: 3; }

/* --oog-x/-y plaatsen de kas. --eye-x/-y zijn dezelfde punten; het script
   leest die om te weten waar de ogen staan, en erft ze hier vandaan. */
#contact-title .tonio-wrapper .lion-oog[data-eye='left']  { --oog-x: 37.71; --oog-y: 42.54; --eye-x: 37.71; --eye-y: 42.54; }
#contact-title .tonio-wrapper .lion-oog[data-eye='right'] { --oog-x: 62.00; --oog-y: 42.54; --eye-x: 62.00; --eye-y: 42.54; }

/* Hoever de iris elke kant op mag, in procent van de breedte van de ogenlaag.

   13 sep 2026: de schijf is van 130 naar 161 canvaspixels gegaan, op verzoek van
   Parham. Aanleiding: de pupil vulde 60,7% van de oogopening terwijl de tekenaar
   in de bron 75,2% aanhoudt. Gemeten in bronbestanden/mascotes/par_leeuw.png,
   waar deze drie lagen 1-op-1 uit geknipt zijn; 75,0% is ook de mediaan over de
   zeven ogen van leeuw, cheeta, schaap en koe. De schijf is niet opnieuw uit die
   bron gesneden maar geschaald uit het bestaande bestand: de bron heeft de
   sikkel oogwit nog vast aan de iris en zet de lichtvlek zeven pixels hoger, en
   op het scherm is de schijf hoogstens 109 apparaatpixels tegen 130 echte
   bronpixels, dus opblazen kost daar niets.

   ALLE GETALLEN HIERONDER OP EEN DREMPEL VAN ALFA >= 128, en in twee maten:
     BINNEN    = de schijf valt helemaal binnen oog-wit.png
     ZICHTBAAR = wat erbuiten valt telt alleen mee als oog-lid.png het niet dekt
   Die twee lopen ver uiteen, want het ooglid dekt links en boven veel af. De
   keuze hieronder staat op ZICHTBAAR: wat je niet ziet, is geen fout.

     oogwit     214 x 194, midden (145,5, 149,5)
     schijf oud 130 x 131, midden (149,5, 146,0) = 60,7% van de oogwitbreedte
     schijf nu  161 x 163, midden (149,0, 146,0) = 75,2%

     vrije ruimte per as, links/rechts/omhoog/omlaag:
       oud  binnen 39/35/28/33   zichtbaar 54/37/49/33
       nu   binnen 20/19/12/14   zichtbaar 35/22/33/14

   De schijf blijft staan waar hij stond. Hem in het midden van het oogwit zetten
   levert zichtbaar 22/26/37/9: horizontaal even bruikbaar (22) maar verticaal
   nog 9 in plaats van 14, en met gelijke waarden per as telt het kleinste getal.

   De twee assen los toetsen is niet genoeg. Het script rekent dx = rx * uit-x en
   dy = ry * uit-y met rx^2 + ry^2 <= 1, dus de bereikbare standen vormen een
   ELLIPS met die twee als halve assen, geen rechthoek. De schuine standen zijn
   krapper dan de assen: op 1.09 / 0.69 bleef er vijf pixels over bij (-10, +10),
   schuin linksomlaag. Getoetst door de hele ellips af te lopen op een raster van
   een canvaspixel:

     1.09 -> 18,9 canvaspixels horizontaal
     0.63 -> 10,9 canvaspixels verticaal
     ergste stand op die ellips: nul zichtbaar afgesneden pixels

   Met de oude 2.71 / 1.58 en de oude schijf was dat 581 pixels bij (+47, +1):
   de iris werd toen bij volle blik naar rechts plat afgesneden over 16 bij 84
   canvaspixels. Naar links gebeurde hetzelfde maar dekte het ooglid het af.

   Omgerekend naar het scherm (295 canvaspixels worden 100 in de kas, de ogenlaag
   loopt vast op 600 breed): 6,4 en 3,7 schermpixels per kant. Dat is minder blik
   dan eerst; dat is de prijs van een grotere pupil in dezelfde opening, en die
   ruil is met Parham doorgenomen voor hij 161 koos.

   Draai je ooit aan deze vier waarden, loop dan opnieuw de hele ellips af en niet
   de vier assen. Het krappe kwadrant is linksomlaag; daar zit nog 3,9% speling,
   in de andere drie richtingen aanzienlijk meer. De vier waarden mogen namelijk
   ook ongelijk: het script leest links, rechts, omhoog en omlaag apart. Per
   kwadrant gemeten is 1.15 / 1.27 / 1.90 / 0.63 nog spilvrij en geeft dat ruim
   het dubbele aan verticale blik. Het is niet gedaan omdat een leeuw die veel
   verder omhoog kijkt dan omlaag anders leest, en dat is een keuze van Parham.

   Hoe de schijf ooit op 130 kwam: in de oorspronkelijke uitsnede zat aan de
   linkerkant een sikkel oogwit aan de iris vast, 26% van de meebewegende vlek,
   helderheid 246 tegen 81 voor het bruin. Daardoor stond het bruin scheef in de
   opening en verscheen er een witte rand zodra hij naar links keek. De sikkel is
   er op 27 aug uit gehaald en de schijf is toen gecentreerd; wat overbleef was
   130 in plaats van 135 canvaspixels, en als aandeel van het oogwit 60,7% in
   plaats van 63,1%. Dat verschil is wat Parham zag. */
#contact-title .tonio-wrapper .lion-eye {
  --uit-links: 1.09;
  --uit-rechts: 1.09;
  --uit-omhoog: 0.63;
  --uit-omlaag: 0.63;
}

@media (prefers-reduced-motion: reduce) {
  #contact-title .tonio-wrapper .lion-eye {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Nieuwsoverzicht — het uitgelichte artikel
   ---------------------------------------------------------------------------
   De kop van het uitgelichte artikel was een tweede <h1> op de pagina, naast
   de <h1> van de rubriek zelf. Twee <h1>'s laten een crawler raden waar de
   pagina over gaat, dus hij is een <h2> geworden (scripts/marketing/cards.mjs).

   `h2 strong` staat in mainbea6.css op 41px en `h2` op `display:flex`; deze
   regels zetten hem terug op de maat en het gedrag van de oorspronkelijke
   `h1 strong` (67px, 39px onder 800px). Het breekpunt van 800px is dat van de
   template, niet dat van het ontwerpsysteem — het moet gelijk lopen met de
   regel die het overneemt. */
.featured-new-text h2 {
  display: block;
}

.featured-new-text h2 strong {
  font-size: 67px;
  line-height: 1;
  letter-spacing: -1px;
  font-weight: 900;
  text-transform: uppercase;
  display: inline-block;
}

@media screen and (max-width: 800px) {
  .featured-new-text h2 strong {
    font-size: 39px;
    line-height: 0.85;
    margin-top: 3px;
  }
}

/* =====================================================================
 * Perzisch — compensaties die niet meer nodig zijn
 * =====================================================================
 * Hierboven staan regels die de spiegeling van dir="rtl" ongedaan maakten:
 * een formulier terug op row-reverse, een label van left naar right, een
 * marge van rechts naar links. Nu de opmaak niet meer kantelt (zie het blok
 * "Perzisch — tekst leest van rechts naar links, de opmaak staat stil")
 * duwen die compensaties de elementen juist de verkeerde kant op.
 *
 * Gemeten na het wegnemen van de spiegeling: de knop van het
 * nieuwsbriefformulier stond op x=100 tegen x=1140 in het Nederlands.
 *
 * Ze worden hier teruggezet in plaats van hierboven weggehaald, zodat in de
 * geschiedenis zichtbaar blijft waarvoor ze bedoeld waren. ===================================================================== */











/* Onder 800px stapelt de template het nieuwsbriefformulier (flex-direction:
   column, gecentreerd) en centreert ze de footerkolommen. De fa-regels
   hierboven staan buiten elke media-query en hielden daar `row` en
   `text-align: right` vast.

   Gemeten op 768 en 390px, fa tegen nl: het formulier stond naast elkaar waar
   het gestapeld hoort, en de kolommen rechts waar ze gecentreerd horen. */
@media (max-width: 800px) {
  html[lang="fa"] footer .newsletter-form {
    flex-direction: column;
  }

  html[lang="fa"] footer .navigation .left .column,
  html[lang="fa"] footer .navigation .left .column a {
    text-align: center;
  }
}


/* =====================================================
   HUISREGEL — onderaan de smakenpagina, na het smakenraster
   =====================================================
   Beslissing Parham 7 aug 2026 (vraag 9). Vorm volgt het goedgekeurde
   voorstel in docs/taak5-huisregel.md: label met goud accentstipje, de regel
   in leesbreedte, en het kassabordje als zwart vlak met de grap in goud.

   Perzisch krijgt dit blok niet — de generator schermt het af tot de
   fa-ronde, dus er is hier bewust geen html[lang="fa"]-regel. */
.parlion-huisregel {
  max-width: 760px;
  margin: 48px auto 0;
  padding: 48px 24px 0;
  border-top: 1px solid #E5E5E5;
  text-align: center;
}

.parlion-huisregel .huisregel-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666666;
}

.parlion-huisregel .huisregel-stip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #D2BE9D;
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.parlion-huisregel:hover .huisregel-stip {
  transform: translateX(4px);
}

.parlion-huisregel p {
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.7;
  color: #222222;
}

.parlion-huisregel .huisregel-bordje {
  display: inline-block;
  margin-top: 24px;
  padding: 16px 24px;
  background: #222222;
  color: #F8F8F8;
  border-radius: 4px;
  font-size: 15px;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 32px rgba(34, 34, 34, 0.08);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.parlion-huisregel:hover .huisregel-bordje {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(34, 34, 34, 0.12);
}

.parlion-huisregel .huisregel-bordje b {
  color: #D2BE9D;
  font-weight: 700;
}

@media (max-width: 639px) {
  .parlion-huisregel {
    margin-top: 32px;
    padding: 32px 24px 0;
  }

  .parlion-huisregel p {
    font-size: 15px;
  }
}


/* =====================================================
   DOORLINK OP DE PRODUCTTEGEL — smakenpagina
   =====================================================
   Beslissing Parham 7 aug 2026 (vraag 7). De tegel zelf blijft een <div>
   met klasse .product-thumb, want main1bce.js filtert, animeert en bindt op
   die klasse; die bundel blijft ongemoeid. De link is een absoluut
   gepositioneerd laatste kind. `.product-thumb { position: relative }` staat
   al in assets/mainbea6.css, dus er is hier geen extra positieregel nodig. */
/* =====================================================================
 * Voettekst: het copyright en de twee wettelijke links terug op mobiel
 * ---------------------------------------------------------------------
 * mainbea6.css zet in zijn blok voor schermen onder 800px de eerste regel
 * van .copy op display:none. Gemeten op 375px en op 639px: breedte 0,
 * hoogte 0. Daarmee verdwijnen op een telefoon niet alleen het copyright,
 * maar ook de enige twee links naar de algemene voorwaarden en het
 * privacybeleid. Precies de twee die er horen te staan.
 *
 * De twee regels die er in datzelfde blok boven staan (margin-bottom 20px,
 * text-align center, en de links als display:block) zijn wel bedoeld voor
 * die smalle weergave; die blijven dus gewoon staan en zetten alles netjes
 * onder elkaar. Alleen het verbergen draaien we terug.
 *
 * Gemeten na deze regel op 375px: het blok gaat van 0 bij 0 naar 218 bij
 * 91 pixels, de twee links staan onder elkaar, en er ontstaat geen
 * horizontale schuifbalk (scrollBreedte blijft 375).
 *
 * mainbea6.css zelf blijft ongemoeid (zie CLAUDE.md); dit is de override.
 * ===================================================================== */
@media screen and (max-width: 800px) {
  footer .copy p:first-child {
    display: block;
  }
}

/* =====================================================================
 * Productpagina: de drie verwante producten plakten aan elkaar
 * ---------------------------------------------------------------------
 * `relatedBlock()` in scripts/marketing/product-page.mjs zet de links met
 * .join('') achter elkaar en er stond nergens een regel voor
 * .product-related-links. Gemeten op /nl/products/nauthy-pure-choco:
 * Bueno eindigt op x=563 en "Saffraan & Rozenwater" begint op x=563, dus nul
 * pixels ertussen. Een bezoeker las "BuenoSaffraan & RozenwaterPistache".
 * Dat staat zo op 35 producten maal acht talen.
 *
 * De oplossing is het patroon dat de site zelf al gebruikt voor een groep
 * .link-dot's: in de voettekst staan ze onder elkaar als blok met 20px lucht
 * erboven (gemeten: x gelijk, 42px uit elkaar). Hier dus hetzelfde, zodat het
 * puntje dat bij hover op -35px verschijnt ook de ruimte heeft die het nodig
 * heeft.
 *
 * Let op: dit repareert alleen deze ene onleesbaarheid. De productpagina heeft
 * verder nog helemaal geen eigen opmaak (.product-facts, .product-hero-img en
 * .product-related staan alle drie op nul marge en nul padding). Dat is een
 * ontwerpvraag die nog bij Parham ligt.
 * ===================================================================== */
.product-related-links .link-dot {
  display: block;
  padding-top: 20px;
}

.product-thumb .product-thumb-link {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  border-radius: 4px;
  text-decoration: none;
  /* Focus zichtbaar voor toetsenbordgebruikers; de tegel zelf toont niets. */
  outline-offset: -2px;
}

.product-thumb .product-thumb-link:focus-visible {
  outline: 2px solid #D2BE9D;
}

/* =====================================================================
 * Mascottes bij de IcePops-carrousel: maat en plaats
 * ---------------------------------------------------------------------
 * De figuren staan in de markup en het inschuiven komt uit de template
 * zelf (.icepops-figures in assets/mainbea6.css r1259-1295). Twee dingen
 * kloppen daar niet voor ons.
 *
 * 1. Hun maat rekent in BREEDTE van de sectie: 45% voor Enzo, 31% voor de
 *    Minion. Dat werkt bij hen omdat hun beeld op natuurlijke grootte
 *    blijft (gemeten op hun eigen home: Enzo 400x584, Minion 397x839).
 *    Onze leeuw is 620x1289 en zou op 45% breedte 1218px hoog worden.
 *    Daarom sturen wij op hoogte; de breedte volgt de verhouding, en het
 *    inschuiven (translateX in procenten van de eigen breedte) blijft
 *    daardoor kloppen. 720px hoog geeft een leeuw van 346px breed — even
 *    groot als hun Minion, hun grootste figuur.
 *
 * 2. Hun `bottom` rekent in procenten van de carrousel. Hun IcePops-
 *    carrousel is 367px hoog, onze wafelcarrousel 164px (gemeten, beide
 *    op dezelfde pagina-opbouw). Met -20% en -80% zweven onze figuren
 *    daardoor midden in het wit: gemeten stond er onder de leeuw nog
 *    232px lege ruimte voordat de sectie werd afgeknipt.
 *    De ruimte onder de carrousel tot aan de kniprand van #featured-
 *    products is op beide pagina's 314px; de figurenband eindigt 265px
 *    voor die rand. Met -250px staan ze dus met hun voeten op de onderrand
 *    van het witte vlak, en is de hele mascotte in beeld.
 * ===================================================================== */
#featured-icepops .icepops-figures .figure,
#featured-icepops .icepops-figures .figure:last-child {
  width: auto;
  bottom: -250px;
}
#featured-icepops .icepops-figures .figure img {
  display: block;
  width: auto;
  height: 730px;
  /* Nooit hoger dan het scherm: anders is de mascotte tijdens de twee
     tellen dat hij staat nooit in zijn geheel te zien. */
  max-height: 80vh;
}
#featured-icepops .icepops-figures .figure:last-child img {
  height: 650px;
  max-height: 72vh;
}

/* ---------------------------------------------------------------------
 * De zwaai zelf.
 *
 * De template zet op .figure een `transition: all 1s` en verschuift met een
 * klasse. Op onze pagina blijft die overgang hangen: gemeten met
 * getAnimations() staat er permanent een "transform: running" op het
 * element, en die houdt de waarde op translateX(-100%) — sterker nog dan een
 * inline !important. Vandaar hier een eigen keyframe: die kent geen
 * beginwaarde die kan blijven plakken.
 *
 * Het verloop volgt hun timing: ruim een seconde inschuiven, twee tellen
 * blijven staan, weer weg. De rechter figuur start iets later, net als bij
 * hen (.2s tegen .4s).
 * ------------------------------------------------------------------- */
#featured-icepops .icepops-figures .figure {
  transition: none;
}
/* Zij laten 30% van de figuur buiten beeld hangen. Dat kan bij een ijsje;
   bij een mascotte met een zwaaiende hand snijdt het de arm eraf. Op 15%
   blijft het "van opzij binnenkomen" en is de hele figuur te zien. */
@keyframes parlion-mascotte-links {
  0%   { transform: translateX(-100%); }
  22%  { transform: translateX(-15%); }
  78%  { transform: translateX(-15%); }
  100% { transform: translateX(-100%); }
}
@keyframes parlion-mascotte-rechts {
  0%   { transform: translateX(100%); }
  22%  { transform: translateX(15%); }
  78%  { transform: translateX(15%); }
  100% { transform: translateX(100%); }
}
#featured-icepops .icepops-figures.show .figure {
  animation: parlion-mascotte-links 4.4s cubic-bezier(.25, .8, .25, 1) both;
}
#featured-icepops .icepops-figures.show .figure:last-child {
  animation: parlion-mascotte-rechts 4.4s cubic-bezier(.25, .8, .25, 1) .2s both;
}

@media (prefers-reduced-motion: reduce) {
  #featured-icepops .icepops-figures.show .figure,
  #featured-icepops .icepops-figures.show .figure:last-child { animation: none; }
}

/* ---------------------------------------------------------------------------
   Geschiedenis — het grote jaartal in de zijbalk

   Het actieve jaar in .h-list wordt door de template groot gezet (176px) en
   de eeuw "20" is een ::before op de lijst die er met een per-jaar `top`
   naast wordt geschoven: top = 46px (één rijhoogte) maal het rijnummer van
   dat jaar. Die per-jaar regels in mainbea6.css zijn geschreven voor
   Lucciano's elf jaren (2011-2024): hun "23" staat op rij 9, de onze op
   rij 2. Gevolg: de "20" zweefde honderden pixels onder het jaar dat hij
   moest aanvullen — "23" in het midden, "20" tegen de onderrand.

   Hier dezelfde formule met ónze rijnummers (21-26 op rij 0-5). De `left`
   is de optische kerning tegen het eerste cijfer van het jaar; de waarden
   voor 21-24 zijn van Lucciano overgenomen (zelfde cijfers), 25 en 26
   volgen 22-24. De transition uit de basisregel blijft werken, dus de "20"
   glijdt mee bij een jaarwissel. */
.h-list[data-year='21']::before { top: 0; left: -30px; }
.h-list[data-year='22']::before { top: calc(46px * 1); left: -48px; }
.h-list[data-year='23']::before { top: calc(46px * 2); left: -48px; }
.h-list[data-year='24']::before { top: calc(46px * 3); left: -48px; }
.h-list[data-year='25']::before { top: calc(46px * 4); left: -48px; }
.h-list[data-year='26']::before { top: calc(46px * 5); left: -48px; }