/* ===================================================================
   Marché Rosé — event layer styling.
   Loaded after style.css and reuses its CSS variables (--pink, --accent,
   --ink, --paper, --line, --heading-color, --body-color, --button-bg,
   --button-text) so Customize → "Tea Netherlands Theme" / "Typography"
   still control colours here too.

   "Meer balans" pass (op basis van echte screenshots van marcherose.com,
   zie onder): vier gerichte, puur CSS-only fixes die niets aan de
   homepage-tekst, de footer-widgets of de shop/cart raken — dat blijft
   allemaal precies zoals het nu in WordPress is ingesteld.
     1. Hero-foto/-video: minder extreme uitsnede + verschoven focuspunt,
        zodat de overhangende plant niet meer het hele beeld domineert.
     2. Footer-knop(pen): elke knop in de footer krijgt nu altijd dezelfde
        ronde roze stijl als de rest van de site, ook als een widget-knop
        geen "mr-btn" classe heeft (vandaar de eerder vierkante zwarte knop).
     3. Footer-grid: schaalt nu mee met het werkelijke aantal ingevulde
        widget-kolommen in plaats van vast op 5 kolommen te rekenen — dat
        vaste aantal liet een groot leeg gat ontstaan zodra er minder
        widgets staan ingevuld dan kolommen gedefinieerd zijn.
     4. Merken-kaarten: lichte kleurafwisseling per kaart voor wat meer
        ritme, in plaats van een zee van identieke magenta vlakken.

   "Nieuw ontwerp" pass — gebouwd vanuit een apart goedgekeurd Design-
   mockup (zelfde homepage-content, nieuwe visuele laag). Alleen homepage
   + gedeelde onderdelen (header/footer/kleuren/typografie); de andere
   pagina's erven de nieuwe stijl maar behouden hun eigen opbouw.
     - Koppen: --mr-serif wijst nu naar DM Sans (vet, 800/900) in plaats
       van de systeem-sans-stack — dat is namelijk wat er al bedoeld was
       (de koppen zagen er al "vet sans" uit) maar nooit daadwerkelijk
       naar een geladen lettertype verwees.
     - Lopende tekst (introtekst, throwback-tekst, feiten, aanmeld-tekst,
       footer-tekst) krijgt Lora als leesserif, voor wat warmte naast de
       vette koppen.
     - Nieuw kleuraccent --mr-burgundy (#5c0038) voor de hero-kop en de
       01/02/03-kaarten.
     - Hero, throwback en de aanmeld-CTA krijgen zachte, vervagende
       kleurvlekken op de achtergrond en wat meer schaduw/diepte; de
       hero-foto/video krijgt een "Gratis toegang"-stempel.
     - De merken-muur is nu overal dezelfde donkerroze tint (de eerdere
       magenta/hot-pink-afwisseling is losgelaten — zie onder).
     - De footer heeft een donkerdere bordeaux-tint en een groot, vaag
       "Marché Rosé"-watermerk op de achtergrond.
   Wat NIET 1-op-1 is overgenomen uit het mockup, omdat het echte content
   in de database aanpassen vereist (geen theme-bestand kan dat): de
   titel "Made to mingle" is in het echte front-end-mockup één los stuk
   tekst (geen apart gekleurd/onderstreept woord "mingle" mogelijk zonder
   dat jij dat zelf in de bloktekst aanpast), en de foto naast de
   aanmeld-tekst blijft een echte foto (geen vlak tekstblok) omdat dat nu
   eenmaal een afbeelding-blok is in de pagina-inhoud.
   =================================================================== */

:root{
  /* Matched to the real marcherose.com: bold sans headlines (not serif),
     hot-pink/magenta on soft pink, near-black body text. --ink/--paper/
     --line are redeclared here because the original theme hardcodes them
     in style.css instead of driving them from the Customizer. */
  --mr-serif: "DM Sans", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mr-sans: "DM Sans", Arial, sans-serif;
  /* v1.6.73: op verzoek geen leesserif meer — --mr-read-serif wees naar Lora
     (leesserif) voor lopende tekst zoals .mr-lead, .mr-brand-card-desc,
     .mr-cta-split-copy p e.d. Nu gewoon hetzelfde lettertype als de rest van
     de body copy (DM Sans), zie ook het bredere "geen-serif"-blok onderaan
     dit bestand voor de koppen die nog Georgia/"DM Serif Display" gebruikten. */
  --mr-read-serif: var(--mr-sans);
  --ink:#181219;
  --paper:#f6dddd;
  --line:rgba(24,18,25,.16);
  --mr-magenta:#c81681;
  --mr-hot-pink:#e6007e;
  --mr-burgundy:#5c0038;
  /* v1.6.16: de --tn-footer-* variabelen hier hadden GEEN effect — style.php
     print via wp_head (prioriteit 36, dus NA zowel style.css als dit
     bestand) een eigen <style>:root{--tn-footer-bg:...}</style>-blokje
     gevuld met de Customize-waarden (tn_footer_bg_v167 e.a.). Die wint
     altijd, ongeacht wat hier staat — vandaar het magenta/zwarte footer
     i.p.v. de bedoelde bordeaux. Zie de losse !important-regels bij
     ".tn-footer-main-v167" / ".tn-footer-bottom-v167" verderop, die de
     daadwerkelijke kleur direct forceren i.p.v. via de variabele. */
}

/* v1.6.17: DE kern-ontdekking achter alle "verdwenen/verkeerde kop"-bugs
   tot nu toe. functions.php heeft een Customize-sectie "Lettertypes"
   (Kop-lettertype/Tekst-lettertype) die --mr-serif/--mr-sans zelf OPNIEUW
   zet via een <style>-blokje in wp_head met prioriteit 9999 — dus na
   ALLES, inclusief dit bestand. Op deze site staat "Kop-lettertype"
   kennelijk op "Poppins", dus elke var(--mr-serif) in dit bestand
   resolvede in het echt naar Poppins i.p.v. DM Sans, wat ook verklaart
   waarom de eerdere !important-fix op font-family niets hielp: de
   EIGENSCHAP won wel, maar de VARIABELE zelf wees nog naar Poppins.
   Daarnaast zet style.css élke h1–h6 kleur met !important naar
   var(--heading-color) (Customize-waarde, standaard magenta) — vandaar
   dat de Throwback-kop exact de kleur van zijn eigen magenta achtergrond
   had, en de hero-titel waarschijnlijk ook al die hele tijd magenta was
   i.p.v. de bedoelde bordeaux.
   Oplossing zonder elke var(--mr-serif)-regel handmatig te hoeven
   vervangen: CSS custom properties erven via de DOM-boom, niet via
   bestandsvolgorde. Door --mr-serif/--mr-sans hier opnieuw te zetten op
   ".mr-front"/".mr-page" (de wrapper om alle homepage/pagina-inhoud, dus
   een ECHTE afstammeling van :root, geen andere :root-regel) krijgen ALLE
   var(--mr-serif)-verwijzingen verderop in dit bestand automatisch de
   juiste waarde, ongeacht wat de Customizer-koppelbrug in wp_head doet —
   dat blijft nu gewoon de rest van de site (buiten .mr-front/.mr-page)
   sturen, zoals bedoeld. De losse !important-regels op kleur/font-size
   verderop (hero-titel, h2's, h3) blijven nodig om style.css's eigen
   blanket !important-regels te verslaan — dat is een apart mechanisme
   (cascade-belangrijkheid, niet variabele-overerving). */
.mr-front,.mr-page{
  --mr-serif:"DM Sans",Arial,sans-serif;
  --mr-sans:"DM Sans",Arial,sans-serif;
}

.content.mr-front{padding-top:0}
/* v1.6.44: de regel hierboven was bedoeld om de content-wrapper zonder
   ruimte boven de hero te laten beginnen, maar matchte nooit — in de
   echte DOM staan "content" en "mr-front"/"mr-page" als klassen op
   HETZELFDE element (`<div class="content entry-content mr-front">`),
   niet als twee geneste elementen. Een los-element selector (".content
   .mr-front") vindt dus nooit iets. Daardoor hield de pagina de
   standaard padding-top:48px van het thema aan, zichtbaar als een roze/
   grijze strook tussen het menu en de video-header. De regel met
   ".content.mr-front" (zonder spatie) matcht wel op één element met
   beide klassen, en zet die padding alsnog op 0.
   v1.6.54: ".content.mr-page" stond hier ook bij, met hetzelfde doel
   (geen ruimte boven een hero) — maar ".mr-page" zit niet alleen op de
   homepage, die klasse staat op ELKE eigen pagina-template (Over ons,
   Praktisch info, Aanmelden, Merk aanmelden), puur om ze hetzelfde
   lettertype (DM Sans, zie hierboven) te geven. Die pagina's hebben
   geen hero en tonen gewoon hun <h1 class="entry-title">, maar kregen
   zo WEL de padding-top:0 — de titel stond daardoor zonder enige
   ruimte direct tegen het menu aan geplakt ("een tikje gepropt"). Site-
   eigenaar al bestaande manier om dit per pagina uit te zetten is de
   "Verberg paginatitel"-optie (zet body-class tn-hide-page-title-v2011,
   zie style.css), dus deze blanket-regel hoort alleen nog bij de
   homepage (.mr-front) te horen. */

/* ---------- shared bits ---------- */
.mr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;font:700 12px/1 var(--mr-sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-radius:999px;border:1px solid var(--ink);transition:transform .15s ease,opacity .15s ease,filter .15s ease,background-color .15s ease,box-shadow .15s ease}
/* v1.6.30: ":hover{transform:translateY(-1px)}" alleen was nauwelijks te
   zien — 1px optillen zonder dat er ook kleur/schaduw verandert, valt op
   een knop met een effen roze vlak niet op. Nu een duidelijk verschil per
   variant: primary wordt zichtbaar lichter (filter:brightness, werkt ook
   als de knopkleur via de Customizer verandert) met een dieper schaduw;
   ghost (transparant) krijgt een zachte roze vulling. :focus-visible krijgt
   hetzelfde zodat toetsenbordgebruikers het ook zien. */
.mr-btn:hover,.mr-btn:focus-visible{transform:translateY(-2px)}
.mr-btn-primary{background:var(--button-bg,var(--ink));color:var(--button-text,#fff);box-shadow:0 14px 28px -12px rgba(24,18,25,.45)}
/* v1.6.33-fix: op hover werd de tekst onzichtbaar — niet door deze regels
   zelf, maar door een site-brede basisregel (style.css: "body a:hover{
   color:var(--link-hover)}") die de tekstkleur van ELKE link bij hover
   naar de los ingestelde "link-hover"-kleur trekt (Customize → Tea
   Netherlands Theme / Typography). Omdat deze knop ook gewoon een <a>-tag
   is, greep die algemene regel ook hier in, en die link-hover-kleur blijkt
   (bijna) gelijk aan de knopkleur zelf — vandaar onleesbare tekst. Tekst-
   kleur bij hover nu expliciet vastgezet op dezelfde kleur als in rust. */
.mr-btn-primary:hover,.mr-btn-primary:focus-visible{filter:brightness(1.15);box-shadow:0 18px 34px -10px rgba(24,18,25,.55);color:var(--button-text,#fff)}
.mr-btn-ghost{background:transparent;color:var(--ink)}
.mr-btn-ghost:hover,.mr-btn-ghost:focus-visible{background:rgba(37,36,38,.08);color:var(--ink)}

/* Gutenberg's Button block puts a custom class on the OUTER wrapper
   (.wp-block-button), not on the actual link — so ".mr-btn" styled the
   pill-shaped wrapper correctly, but the link inside it still carried
   the theme's own generic !important button skin (dark, square corners,
   different padding), producing a smaller button-inside-a-button look.
   This neutralises the wrapper and moves the real "mr-btn" look onto the
   inner link instead, so a Button block with class "mr-btn mr-btn-primary"
   (or "mr-btn mr-btn-ghost") looks exactly like a plain <a class="mr-btn">
   used elsewhere in this theme. */
.wp-block-button.mr-btn{background:none;border:0;padding:0;display:inline-block}
.wp-block-button.mr-btn .wp-block-button__link{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px!important;font:700 12px/1 var(--mr-sans)!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;text-decoration:none;border-radius:999px!important;
  border:1px solid var(--ink);transition:transform .15s ease,opacity .15s ease,filter .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.wp-block-button.mr-btn .wp-block-button__link:hover,
.wp-block-button.mr-btn .wp-block-button__link:focus-visible{transform:translateY(-2px)}
.wp-block-button.mr-btn-primary .wp-block-button__link{background:var(--button-bg,var(--ink))!important;color:var(--button-text,#fff)!important;border-color:var(--button-bg,var(--ink));box-shadow:0 14px 28px -12px rgba(24,18,25,.45)}
.wp-block-button.mr-btn-primary .wp-block-button__link:hover,
.wp-block-button.mr-btn-primary .wp-block-button__link:focus-visible{filter:brightness(1.15);box-shadow:0 18px 34px -10px rgba(24,18,25,.55);color:var(--button-text,#fff)!important}
.wp-block-button.mr-btn-ghost .wp-block-button__link{background:transparent!important;color:var(--ink)!important}
.wp-block-button.mr-btn-ghost .wp-block-button__link:hover,
.wp-block-button.mr-btn-ghost .wp-block-button__link:focus-visible{background:rgba(37,36,38,.08)!important;color:var(--ink)!important}
.mr-hero-cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.mr-cta-row-center{justify-content:center;margin:56px 0 8px}
.mr-link-arrow{display:inline-block;font:700 12px var(--mr-sans);letter-spacing:.04em;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}
.mr-section{padding:64px 0;border-top:1px solid var(--line)}
.mr-section:first-of-type{border-top:0}
.mr-section-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:32px}
.mr-section-head-tight{margin:56px 0 28px}
/* v1.6.54: de max-breedte van de clamp() stond hard op 40px, los van de
   Customizer-instelling "H2 size" (--h2-size, standaard 36px) — site-
   eigenaar merkte terecht op dat pagina's de centrale Customizer-
   instellingen niet overnamen. 3vw blijft de ondergrens sturen zodat
   koppen op smalle schermen nog altijd netjes krimpen tot min. 26px. */
.mr-front h2,.mr-page h2{font:800 clamp(26px,3vw,var(--h2-size,40px))/1.05 var(--mr-serif)!important;letter-spacing:-.5px;margin:0;color:var(--heading-color,var(--ink))!important}
/* v1.6.15: style.css zelf heeft een oudere regel die ALLE h1/h2 binnen
   .entry-content met !important naar "DM Serif Display" gewicht 400 trekt
   (een losstaand experiment uit het onderliggende thema, ongebruikt voor
   Marché Rosé). Die regel woog zwaarder dan bovenstaande en overschreef
   dus stilletjes de bedoelde vette DM Sans-koppen door het hele
   front-end — ook de "Throwback"-kop in de terugblik-sectie, die daardoor
   in een veel dunnere, kleinere stijl rendert dan de rest. Hier met gelijke
   !important maar hogere specificiteit teruggedraaid zodat het overal
   weer de bedoelde vette DM Sans-kop wordt. */
.entry-content.mr-front h1,.entry-content.mr-front h2,
.entry-content.mr-page h1,.entry-content.mr-page h2{font-family:var(--mr-serif)!important;font-weight:800!important}
.mr-lead{font:400 clamp(18px,2vw,22px)/1.6 var(--mr-read-serif);max-width:760px;margin:0 0 32px;opacity:.85}
/* v1.6.54: leesparagrafen (.mr-prose, .mr-acc-body, .mr-lookback,
   .mr-cta-split-copy, .mr-cta-dark, .mr-brand-card-desc, .mr-facts-strip,
   de FAQ-pagina) stonden allemaal op vaste pixelwaarden, los van de
   Customizer-instelling "Body font size" (--body-size, standaard 14px) —
   zet de eigenaar die slider hoger of lager, dan veranderde hier niets.
   Nu via calc() aan die variabele gekoppeld, met hetzelfde verschil
   t.o.v. elkaar als voorheen (16px/15px bij de standaard 14px), zodat
   het er bij de standaardinstelling identiek uitziet maar wél meeschaalt. */
.mr-prose p{max-width:760px;font-size:calc(var(--body-size) + 2px);line-height:1.7}

/* v1.7.01: gecentreerde afbeelding (bv. de "xoxo"-foto op Over ons) stond
   links uitgelijnd i.p.v. gecentreerd, ondanks de "aligncenter"-instelling
   in de block-editor. Oorzaak: WordPress' eigen CSS zet margin-left/right:
   auto alleen op .aligncenter wanneer die binnen een element met class
   .is-layout-flow of .is-layout-constrained staat (de normale Gutenberg-
   layout-wrapper) — of op de oudere structuur .wp-block-image .aligncenter
   (los element). Onze eigen .mr-prose-wrapper heeft geen van beide classes,
   dus die regel raakte nooit van toepassing en de figure bleef op zijn
   standaard (links uitgelijnde) positie staan. Hier alsnog expliciet
   gecentreerd, specifiek binnen .mr-prose. */
.mr-prose .aligncenter{margin-left:auto!important;margin-right:auto!important}

/* ---------- hero ---------- */
.mr-hero{max-width:880px;margin:0 auto;padding:72px 0 40px;text-align:center}
.mr-hero-eyebrow{font:700 11px var(--mr-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#c81681);margin-bottom:18px}
.mr-hero-title{font:800 clamp(56px,10vw,132px)/.92 var(--mr-serif)!important;letter-spacing:-2px;margin:0 0 14px;color:var(--heading-color,var(--ink))!important}
.mr-hero-tagline{font:400 clamp(20px,2.6vw,30px)/1.2 var(--mr-serif);margin:0 0 10px}
.mr-hero-sub{font:400 15px/1.6 var(--mr-sans);opacity:.8;margin:0 0 28px}
.mr-hero .mr-hero-cta-row{justify-content:center}

/* ---------- event ticket ---------- */
.mr-ticket{display:grid;grid-template-columns:1.6fr 1fr;background:#fff;color:var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 30px 60px rgba(24,18,25,.14);position:relative}
/* Simple dashed tear-line between the two ticket halves. (A punch-hole/perforation
   effect was tried here with radial-gradient notches, but it rendered as jagged
   white artifacts poking out past the rounded corners in real browsers — a plain
   dashed line reads as a ticket edge just as well, without the glitch.) */
.mr-ticket:before{content:"";position:absolute;top:24px;bottom:24px;left:calc(61.5% - 1px);width:0;border-left:2px dashed rgba(24,18,25,.28);z-index:2}
.mr-ticket-main{padding:44px 40px;background:var(--paper,#f6dddd)}
.mr-ticket-eyebrow{font:700 11px var(--mr-sans);letter-spacing:.1em;text-transform:uppercase;opacity:.65;margin-bottom:10px}
.mr-ticket-title{font:800 clamp(34px,4.5vw,58px)/1 var(--mr-serif);letter-spacing:-1px;margin:0 0 6px}
.mr-ticket-tagline{font:400 18px/1.4 var(--mr-read-serif);margin:0 0 26px;opacity:.85}
.mr-ticket-facts{display:grid;gap:14px}
.mr-ticket-facts div{font:400 14px/1.5 var(--mr-sans)}
.mr-ticket-facts span{display:block;font:700 10px var(--mr-sans);letter-spacing:.1em;text-transform:uppercase;opacity:.6;margin-bottom:2px}
/* v1.6.21 ("Deelnemers" upgrade, vervolg): de ticket-stub kreeg de nieuwe
   bordeaux in plaats van effen magenta — zelfde donkere kaart-kleur als de
   01/02/03-feiten op de homepage, voor meer samenhang — met een
   omgekeerde (witte) cta-knop die er bovenop opvalt. */
.mr-ticket-stub{padding:44px 34px;background:var(--mr-burgundy,#5c0038);color:#fff;display:flex;flex-direction:column;gap:20px}
.mr-ticket-stub-label{font:700 10px var(--mr-sans);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.mr-ticket-brands{list-style:none;margin:0;padding:0;font:700 20px/1.5 var(--mr-serif)}
.mr-ticket-brands li{border-bottom:1px solid rgba(255,255,255,.18);padding:4px 0}
.mr-ticket-brands li:last-child{border-bottom:0}
.mr-ticket-cta{margin-top:auto;align-self:flex-start;padding:13px 24px;background:#fff;color:var(--mr-burgundy,#5c0038);text-decoration:none;border-radius:999px;font:700 11px var(--mr-sans);letter-spacing:.06em;text-transform:uppercase;box-shadow:0 14px 28px -12px rgba(0,0,0,.4);transition:transform .15s ease}
.mr-ticket-cta:hover{transform:translateY(-1px)}

@media(max-width:780px){
  .mr-ticket{grid-template-columns:1fr;border-radius:18px}
  .mr-ticket:before{display:none}
  .mr-ticket-main,.mr-ticket-stub{padding:32px 26px}
}

/* ---------- intro / facts ---------- */
.mr-intro-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:start}
.mr-intro-facts{display:grid;gap:22px;background:var(--paper,#f6dddd);border-radius:18px;padding:30px}
.mr-fact{display:grid;gap:4px}
.mr-fact-label{font:700 10px var(--mr-sans);letter-spacing:.1em;text-transform:uppercase;opacity:.6}
.mr-fact-value{font:400 17px/1.4 var(--mr-serif)}
/* v1.6.24: "visuele consistentie site-breed" — Over ons / Praktisch info /
   Aanmelden gebruikten nog de kale, platte eerste-versie afwerking (vlakke
   kleurvlakken, dunne lijntjes, geen schaduw) terwijl de homepage en
   Deelnemers al kaarten-met-schaduw gebruiken. Dezelfde taal hier
   doortrekken maakt die pagina's bij elkaar horen i.p.v. "ouder" aanvoelen. */
.mr-facts-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;background:#fff;border-radius:16px;padding:26px 28px;margin:0 0 28px;box-shadow:0 14px 32px -18px rgba(92,0,56,.25);border-top:3px solid var(--mr-magenta,#c81681)}
.mr-facts-strip-wide{grid-template-columns:repeat(4,1fr)}
.mr-facts-strip div{font:400 calc(var(--body-size) + 1px)/1.5 var(--mr-sans)}
/* v1.6.76: labels in de witte feiten-blokken (Over ons / Praktisch info)
   op verzoek ook in het handgeschreven Caveat-lettertype, zoals op de
   homepage — maar hier roze op wit (i.p.v. wit op roze), dus de bestaande
   magenta kleur blijft staan. De bijbehorende vraagtekens staan nu in de
   labels zelf in page-over-ons.php/page-praktisch-info.php. */
/* v1.6.79: zelfde kleine streepje onder de Caveat-labels als bij de
   roze feiten-kaarten op de homepage (.mr-facts-numbered .mr-fact-label),
   op verzoek ook hier — maar dan in de magenta tekstkleur i.p.v. wit,
   passend bij roze-op-wit i.p.v. wit-op-roze. */
.mr-facts-strip span{display:block;font:700 22px/1.1 'Caveat',Georgia,cursive;letter-spacing:normal;text-transform:none;color:var(--mr-magenta,#c81681);opacity:1;margin-bottom:8px;position:relative}
.mr-facts-strip span:after{content:"";display:block;width:28px;height:3px;margin-top:4px;background:var(--mr-magenta,#c81681);opacity:.45;border-radius:999px}
@media(max-width:780px){.mr-intro-grid{grid-template-columns:1fr}.mr-facts-strip-wide{grid-template-columns:repeat(2,1fr)}}

/* ---------- brand badges / cards ---------- */
/* Badges hold each brand's own logo file. In practice most brands supply
   a white/light logo (transparent PNG meant for a dark background), so
   the badge itself needs to BE a dark-enough surface — a light "paper"
   badge made those logos nearly invisible (white-on-near-white). Uses the
   theme's pink accent colour (Customize → Tea Netherlands Theme →
   Accent pink) so it stays in sync if that's ever changed. */
.mr-brand-badge{width:100%;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;background:var(--accent,#c81681);border-radius:14px;overflow:hidden}
.mr-brand-badge img{max-width:72%;max-height:60%;object-fit:contain}
.mr-brand-badge-text{font:800 22px var(--mr-serif);letter-spacing:-.5px;text-align:center;padding:0 12px;color:#fff}
.mr-brand-teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.mr-brand-teaser{display:block;text-decoration:none;color:inherit;text-align:center;padding:20px 14px;border-radius:14px;background:#fff;box-shadow:0 10px 24px -16px rgba(92,0,56,.22);transition:transform .2s ease,box-shadow .2s ease}
.mr-brand-teaser:hover,
.mr-brand-teaser:focus-visible{transform:translateY(-3px);box-shadow:0 16px 30px -16px rgba(92,0,56,.32)}
.mr-brand-teaser-tagline{display:block;margin-top:10px;font:400 13px/1.4 var(--mr-read-serif);opacity:.75;text-align:center}
.mr-brand-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:36px 0}
/* v1.6.20 ("Deelnemers" upgrade, CSS-only — merken/teksten blijven gewoon
   via Customizer/widgets aanpasbaar, alleen de uitstraling van de kaart
   wordt rijker): schaduw + subtiele bordeaux accentbalk bovenaan + lichte
   hover-lift, in lijn met de diepte die de homepage al kreeg. */
.mr-brand-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;
  position:relative;overflow:hidden;
  box-shadow:0 20px 44px -30px rgba(24,18,25,.25);
  transition:transform .2s ease,box-shadow .2s ease;
}
.mr-brand-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--mr-burgundy,#5c0038)}
.mr-brand-card:hover{transform:translateY(-4px);box-shadow:0 28px 54px -28px rgba(24,18,25,.32)}
.mr-brand-card-badge{aspect-ratio:16/9;margin-bottom:16px}
.mr-brand-card h3{font:800 24px var(--mr-serif)!important;margin:0 0 6px}
.mr-brand-card-tagline{font:400 15px var(--mr-read-serif);font-style:italic;opacity:.75;margin:0 0 10px;color:var(--mr-magenta,#c81681)}
.mr-brand-card-desc{font:400 calc(var(--body-size) + 1px)/1.65 var(--mr-read-serif);margin:0;opacity:.85}
@media(max-width:980px){.mr-brand-teaser-grid,.mr-brand-card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mr-brand-teaser-grid,.mr-brand-card-grid{grid-template-columns:1fr}}

/* "Nieuw ontwerp": terug naar één uniforme donkerroze tint voor alle
   merk-badges (geen magenta/hot-pink-afwisseling meer, zoals expliciet
   gevraagd) — .mr-brand-badge valt hiermee gewoon terug op --accent. */

/* ---------- homepage: two-column hero with photo (matches real homepage) ---------- */
.mr-hero-split{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:56px 0 64px;position:relative}
/* "Nieuw ontwerp": twee zachte, vervagende kleurvlekken achter de hero —
   puur decoratief, via ::before/::after zodat er geen extra opmaak in de
   paginatekst nodig is. z-index:-1 houdt ze achter de echte inhoud. */
.mr-hero-split:before,
.mr-hero-split:after{content:"";position:absolute;border-radius:999px;pointer-events:none;z-index:-1}
.mr-hero-split:before{top:-120px;left:-80px;width:420px;height:420px;background:radial-gradient(circle,rgba(200,22,129,.2),rgba(200,22,129,0) 70%)}
.mr-hero-split:after{bottom:-160px;right:4%;width:360px;height:360px;background:radial-gradient(circle,rgba(230,0,126,.14),rgba(230,0,126,0) 70%)}
.mr-hero-split .mr-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;text-align:left;margin-bottom:18px;padding:7px 16px 7px 7px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(24,18,25,.12);color:var(--ink);opacity:1}
.mr-hero-split .mr-hero-eyebrow:before{content:"";width:20px;height:20px;border-radius:999px;background:var(--mr-magenta,#c81681);flex:0 0 auto}
.mr-hero-split .mr-hero-title{font-size:clamp(44px,7vw,92px)!important;letter-spacing:-2px;text-align:left;color:var(--mr-burgundy,#5c0038)!important}
.mr-hero-split .mr-hero-sub{font:700 14px/1.6 var(--mr-sans);text-transform:uppercase;letter-spacing:.03em;opacity:.85;max-width:420px}
.mr-hero-split .mr-hero-cta-row{justify-content:flex-start}
.mr-hero-split .mr-hero-cta-row .mr-btn-primary{box-shadow:0 14px 28px -10px rgba(200,22,129,.55)}
/* v1.6.11: iets minder extreem portret-formaat (was 4/5) zodat de video/
   poster-foto minder zwaar uitgesneden hoeft te worden, en het focuspunt
   is verschoven naar iets onder het midden — op de live homepage-foto
   hing een plant zo ver over de bovenkant dat die het beeld domineerde
   en de sfeer (mensen, ruimte) er grotendeels onder verdween. Als de
   bron-foto/video ooit vervangen wordt, mag object-position gerust weer
   terug naar "center" (of op maat ingesteld worden voor die nieuwe foto). */
.mr-hero-photo{border-radius:20px;overflow:hidden;aspect-ratio:5/6;position:relative;box-shadow:0 36px 70px -24px rgba(24,18,25,.28)}
.mr-hero-photo img,
.mr-hero-photo video{width:100%;height:100%;object-fit:cover;object-position:center 68%;display:block;background:var(--paper,#f6dddd)}
/* "Nieuw ontwerp": een ronde "Gratis toegang"-stempel die over de hoek
   van de hero-foto/video hangt — puur decoratief (CSS-tekst via
   content), dus geen wijziging aan de pagina-inhoud zelf nodig. */
.mr-hero-photo:after{
  content:"Gratis\A toegang";white-space:pre;text-align:center;
  position:absolute;z-index:2;left:-26px;bottom:28px;width:88px;height:88px;
  border-radius:999px;background:var(--mr-magenta,#c81681);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:700 10px/1.3 var(--mr-sans);letter-spacing:.06em;text-transform:uppercase;
  transform:rotate(-12deg);box-shadow:0 18px 30px -12px rgba(24,18,25,.5);
}
@media(max-width:860px){.mr-hero-split{grid-template-columns:1fr}.mr-hero-photo{order:-1;aspect-ratio:16/10}}
@media(max-width:560px){.mr-hero-photo:after{width:72px;height:72px;font-size:9px;left:-14px;bottom:16px}}

/* v1.6.42: full-width video header for the homepage, requested in place
   of the split hero above (text column + small rounded video box). The
   old .mr-hero-split/.mr-hero-photo rules are left in place (harmless,
   unused) rather than deleted, in case that layout is ever reused.
   Note: .mr-hero-photo:after's "Gratis toegang" badge goes away with it
   — that text was already stale (admission is no longer free, see the
   Praktisch info / "Toegang" changes), so good riddance.
   .mr-hero-full breaks out of .shell/.content's max-width with the
   100vw + negative-margin trick so the video spans the full browser
   width, not just the (width-capped) content column it sits inside. */
.mr-hero-full{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;aspect-ratio:16/9;max-height:88vh;min-height:360px;background:var(--ink)}
.mr-hero-full-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.mr-hero-full-overlay{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px;background:linear-gradient(180deg,rgba(24,18,25,.38) 0%,rgba(24,18,25,.22) 16%,rgba(24,18,25,.16) 42%,rgba(24,18,25,.62) 100%);color:#fff}
/* v1.6.45: de oude gradient begon bovenaan al zacht (.15) en werd rond
   42% zelfs nóg lichter (.08) — precies waar de video het hoogst/vlakst
   in beeld is (plafond/tegelwand), zonder veel textuur. Daardoor oogde
   die strook, afhankelijk van welk frame van de loop net speelde, als
   "leeg"/wit i.p.v. als getinte video — wat meerdere keren als een gat
   tussen het menu en de video werd gemeld, terwijl de layout zelf al
   klopte (geen echte marge/padding meer). Nu begint de overlay meteen
   duidelijk donkerder (.38) en blijft ook in het midden donker genoeg
   (.16 i.p.v. .08), zodat de bovenkant van de video altijd als vlak met
   een tint leest, ongeacht welk frame van de loop toevallig toont.

   v1.6.46 — de ECHTE boosdoener: deze overlay is het tweede blok in een
   Gutenberg-group (.mr-hero-full, is-layout-flow). WordPress' eigen
   block-library CSS zet standaard een margin-top (block-gap, hier 24px)
   op elk flow-kind ná het eerste — ook als dat kind position:absolute +
   inset:0 heeft, want een expliciete margin wordt NIET genegeerd door
   position:absolute (alleen margin:auto heeft daar speciaal gedrag).
   Resultaat: de video (1e kind) begon wél direct onder het menu, maar
   déze donkere overlay begon 24px lager — precies die 24px liet de rauwe,
   ongetinte video zien als een lichte streep, hoe donker de gradient
   hierboven ook werd gemaakt. "margin:0" hieronder forceert 'm naar 0 en
   lost het definitief op, los van gradient-sterkte. */
.mr-hero-full-overlay .mr-hero-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;padding:7px 16px 7px 7px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;opacity:1}
.mr-hero-full-overlay .mr-hero-eyebrow:before{content:"";width:20px;height:20px;border-radius:999px;background:var(--mr-magenta,#c81681);flex:0 0 auto}
.mr-hero-full-overlay .mr-hero-title{font-size:clamp(44px,8vw,110px)!important;letter-spacing:-2px;color:#fff!important;text-shadow:0 8px 30px rgba(0,0,0,.4)}
/* v1.6.43: de losse "Made to mingle" titel-tekst is vervangen door het
   echte logo (incl. de "made to mingle" tagline die er al in zit) — zie
   homepage-content. .mr-hero-title blijft als wrapper staan (voor de h1/
   SEO-structuur), maar toont nu een <img> i.p.v. tekst, vandaar deze
   losse regel die alleen het logo-plaatje zelf stuurt. */
.mr-hero-full-overlay .mr-hero-logo{display:flex;justify-content:center;margin-bottom:4px}
.mr-hero-full-overlay .mr-hero-logo-img{width:100%;max-width:460px;height:auto;display:block;filter:drop-shadow(0 10px 28px rgba(0,0,0,.45))}
@media(max-width:560px){.mr-hero-full-overlay .mr-hero-logo-img{max-width:280px}}
.mr-hero-full-overlay .mr-hero-sub{font:700 15px/1.6 var(--mr-sans);text-transform:uppercase;letter-spacing:.03em;color:#fff;opacity:.92;max-width:480px}
.mr-hero-full-overlay .mr-hero-cta-row{justify-content:center}
.mr-hero-full-overlay .wp-block-button.mr-btn-ghost .wp-block-button__link{border-color:rgba(255,255,255,.6)!important;color:#fff!important}
.mr-hero-full-overlay .wp-block-button.mr-btn-ghost .wp-block-button__link:hover,
.mr-hero-full-overlay .wp-block-button.mr-btn-ghost .wp-block-button__link:focus-visible{background:rgba(255,255,255,.16)!important;color:#fff!important}
@media(max-width:560px){.mr-hero-full{aspect-ratio:4/5;max-height:none}}

/* ---------- homepage: intro copy (three paragraphs + "lees meer") ---------- */
.mr-intro-simple{max-width:820px}
.mr-intro-simple h2{margin-bottom:22px;color:var(--mr-magenta,#c81681)!important}
.mr-intro-simple p{font:400 18px/1.75 var(--mr-read-serif);margin:0 0 18px;max-width:none}

/* ---------- homepage: feiten-strip ----------
   v1.6.90: de oude roze "01/02/03"-kaarten (.mr-facts-numbered e.a., hier
   eerder gedefinieerd) zijn vervangen door het witte .mr-facts-strip-blok
   dat Over ons/Praktisch info ook gebruiken (zie functions.php,
   marche_rose_event_facts_block()) — nu in de 4-koloms variant
   (.mr-facts-strip-wide, zie "intro / facts" hierboven), dus geen eigen
   CSS hier meer nodig. De oude regels zijn verwijderd: niets anders
   gebruikte de .mr-facts-numbered/.mr-fact-num-*-classes nog. */

/* ---------- homepage: "A look back" video section ---------- */
/* "Nieuw ontwerp": de hele sectie krijgt een vol roze vlak (donkere
   kleur eerst, nu effen accentroze — zie :before verderop) i.p.v. een
   witte/papieren achtergrond, voor contrast tussen de secties. */
/* v1.6.19: deze sectie zit net als de rest van de homepage binnen ".content"
   (max-width:1440px + 28px zijpadding), dus het effen roze vlak liep niet
   tot de randen van het scherm door — links/rechts bleef de lichtroze
   pagina-achtergrond zichtbaar. "width:100vw" + negatieve zijmarges breekt
   de sectie uit die beperking (edge-to-edge, ongeacht schermbreedte); de
   eigen padding hieronder zet de TEKST/video-inhoud weer precies even ver
   van de rand als ".content" elders doet, zodat alleen de achtergrondkleur
   full-bleed wordt en de inhoud netjes uitgelijnd blijft met de rest van
   de pagina. */
.mr-section-lookback{
  background:var(--mr-magenta,#c81681);color:#fff;border-top:0;position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:max(28px,calc((100vw - 1440px)/2 + 28px));
  padding-right:max(28px,calc((100vw - 1440px)/2 + 28px));
}
.mr-section-lookback:before{content:"";position:absolute;top:-160px;right:-140px;width:420px;height:420px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.18),rgba(255,255,255,0) 70%);pointer-events:none;z-index:0}
.mr-section-lookback .mr-lookback{position:relative;z-index:1}
.mr-section-lookback h2{color:#fff!important;margin:0 0 20px}
.mr-lookback{display:grid;gap:24px}
.mr-lookback-eyebrow{display:inline-flex;font:700 11px var(--mr-sans);letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:6px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.3)}
.mr-lookback p{font:400 calc(var(--body-size) + 2px)/1.7 var(--mr-read-serif);max-width:640px;margin:0;opacity:.85}
.mr-lookback-video{border-radius:20px;overflow:hidden;background:#000;box-shadow:0 40px 80px -30px rgba(0,0,0,.5)}
.mr-lookback-video video{display:block;width:100%;height:auto}
/* v1.6.48: zelfde "video-kaart"-look als .mr-lookback-video hierboven
   (afgeronde hoeken, schaduw, zwarte achtergrond als fallback tijdens
   laden), maar los/herbruikbaar voor een staande video ergens los in de
   paginatekst (zie page-praktisch-info.php) i.p.v. alleen naast een
   Columns-blok op de homepage. */
.mr-practical-video{max-width:340px;margin:40px auto;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 30px 60px -24px rgba(0,0,0,.4)}
.mr-practical-video video{display:block;width:100%;height:auto}
/* v1.6.49: generiek 2-koloms patroon — tekst/inhoud links, staande video
   rechts die blijft "staan" (sticky) terwijl je links doorscrolt, net als
   de sticky productgalerij op een productpagina (zie .single-product
   .woocommerce div.product div.images in style.css). Bewust NIET pagina-
   specifiek genoemd (".mr-about-...") zodat dezelfde klassen herbruikt
   kunnen worden op elke pagina met een video naast tekst — gebruikt op
   Over ons (naast de lopende tekst) én Praktisch info (naast de FAQ-
   accordion). .mr-practical-video (hierboven, v1.6.48) deed een
   gecentreerde video TUSSEN twee secties i.p.v. ernaast; die opzet bleek
   niet gewenst en is op Praktisch info vervangen door dit patroon. De
   class blijft ongebruikt staan i.p.v. verwijderd, zoals eerder bij
   vervangen hero-stijlen ook is gedaan. */
/* v1.6.50: op feedback van de site-eigenaar ("iets meer in balans, de video
   iets breder") de kolomverhouding aangepast van een vaste 320px-kolom naar
   een flexibele ~43%-breedte, en de "kaart"-styling (ronde hoeken, schaduw)
   losgetrokken van de sticky-wrapper in een eigen .mr-text-video-card, zodat
   er een bijschrift (.mr-text-video-caption) ONDER de kaart kan staan zonder
   door de overflow:hidden van de kaart zelf afgesneden te worden. */
.mr-text-video-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr);gap:48px;align-items:start}
.mr-text-video{position:sticky;top:28px}
.mr-text-video-card{border-radius:20px;overflow:hidden;background:#000;box-shadow:0 30px 60px -24px rgba(0,0,0,.4)}
.mr-text-video-card video{display:block;width:100%;height:auto}
/* v1.6.52: het bijschrift had alleen ruimte BOVEN zich (richting de video) —
   geen ruimte ERONDER, waardoor het op Over ons bovenop de witte feiten-kaart
   erna leek te "plakken" (vooral zichtbaar op mobiel, waar beide direct
   onder elkaar staan). Nu ook margin onderaan. */
.mr-text-video-caption{font-family:'Caveat',Georgia,cursive;font-weight:700;font-size:30px;line-height:1.1;text-align:center;color:var(--mr-magenta,#c81681);margin:14px 0 32px}
/* v1.6.92: variant van .mr-text-video-card voor een ingesloten YouTube-video
   (iframe) i.p.v. de eigen .mp4-sfeervideo's elders — gebruikt op de
   homepage naast "Geen beurs, wel persoonlijk..." (was daar lege ruimte, op
   verzoek). Een iframe heeft geen eigen hoogte zoals <video>, dus hier een
   vaste 16:9-verhouding (liggende YouTube-video, i.t.t. de staande 9:16
   .mr-lookback-video-embed hierboven voor YouTube Shorts). */
.mr-text-video-card-embed{position:relative;aspect-ratio:16/9}
.mr-text-video-card-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
@media(max-width:900px){
  .mr-text-video-layout{grid-template-columns:1fr}
  /* v1.6.96: bugfix — op mobiel verdween de YouTube-embed-video naast "Geen
     beurs, wel persoonlijk, overzichtelijk en gezellig!" op de homepage
     volledig (0×0px). Oorzaak: deze regel zette hier alleen max-width+margin:0
     auto (geen expliciete width), wat voor een normaal <video>-element geen
     probleem is (die heeft z'n eigen intrinsieke breedte/hoogte als basis),
     maar voor de nieuwe .mr-text-video-card-embed (v1.6.92 — een lege div met
     alleen aspect-ratio:16/9, gevuld door een losstaande position:absolute
     iframe die NIET meetelt voor intrinsieke afmetingen) betekende margin:0
     auto zonder width dat de browser deze kolom moest "shrink-to-fit"-en op
     basis van de inhoud — en die inhoud had, buiten de losstaande iframe om,
     geen eigen breedte, dus kromp alles naar 0. Met expliciete width:100% ligt
     de breedte al vast (100% van de grid-kolom, met max-width:380px als cap),
     waardoor de aspect-ratio daarna gewoon een hoogte kan berekenen. Geen
     effect op de bestaande .mp4-video's elders (die hadden al width:100% op
     het <video>-element zelf staan, zie regel hierboven). */
  .mr-text-video{position:static;width:100%;max-width:380px;margin:0 auto 32px}
  /* v1.6.51: op Over ons stond de video op mobiel pas HELEMAAL onderaan de
     lange lopende tekst (die tekst staat als eerste in de HTML, en zonder
     deze regel volgt de mobiele volgorde gewoon de broncode-volgorde) — op
     Praktisch info staat de video nu al vroeg (vlak na de feiten-strip) dus
     die laten we ongemoeid. Alleen hier, via de pagina-specifieke klasse
     .mr-page-over-ons, de video vóór de tekst zetten op mobiel. */
  .mr-page-over-ons .mr-text-video{order:-1}
}
/* v1.6.14: de echte content hier is een YouTube SHORT (staand, 9:16) naast
   de kop+tekst in een Gutenberg Columns-blok ("are-vertically-aligned-
   center"). 9/16 is dus de juiste verhouding — het probleem zat 'm erin
   dat de video-kolom de volle kolombreedte kreeg (~halve sectiebreedte),
   waardoor de staande video honderden pixels hoger uitviel dan de
   tekstkolom; de kolommen centreren zich daardoor t.o.v. elkaar, met als
   gevolg een groot leeg roze vlak boven de (nu laag-in-beeld gecentreerde)
   kop/tekst en een opgerekte, korrelige video. Twee gerichte fixes:
   1) de video krijgt een realistische, telefoon-achtige max-breedte in
      plaats van de volle kolom, zodat 9:16 een redelijke hoogte oplevert;
   2) de kolommen lijnen voortaan boven uit i.p.v. te centreren, zodat kop
      en tekst meteen naast (het bovenste deel van) de video staan. */
.mr-section-lookback .wp-block-columns.are-vertically-aligned-center{align-items:flex-start}
.mr-lookback-video-embed{position:relative;aspect-ratio:9/16;max-width:320px;margin:0 auto}
.mr-lookback-video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
/* v1.6.24: klik-om-af-te-spelen voorbeeld i.p.v. de YouTube-iframe meteen
   volledig te laden (zie marche-rose.js) — scheelt laadtijd op elke
   pagina met deze video, en ziet er bovendien verzorgder uit dan een
   iframe die in-page meteen "aan staat". */
.mr-video-facade{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;background-size:cover;background-position:center;background-color:var(--ink);border-radius:inherit}
.mr-video-facade-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.45);transition:transform .2s ease,background .2s ease}
.mr-video-facade-play:before{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--mr-magenta,#c81681);margin-left:4px}
.mr-video-facade:hover .mr-video-facade-play,
.mr-video-facade:focus-visible .mr-video-facade-play{background:#fff;transform:translate(-50%,-50%) scale(1.08)}

/* ---------- homepage: final two-column CTA with photo ---------- */
.mr-cta-split{display:grid;grid-template-columns:1fr 1fr;gap:2px;align-items:stretch;border-radius:22px;overflow:hidden;background:rgba(24,18,25,.06)}
/* "Nieuw ontwerp": de teksthelft wordt een witte kaart (i.p.v. los op de
   pagina-achtergrond te staan), zodat hij als duidelijk blok naast de
   foto staat — net als in het goedgekeurde mockup. */
.mr-cta-split-copy{background:#fff;padding:clamp(40px,6vw,64px);display:flex;flex-direction:column;justify-content:center}
.mr-cta-split-copy h2{margin-bottom:14px}
.mr-cta-split-copy p{font:400 calc(var(--body-size) + 2px)/1.7 var(--mr-read-serif);margin:0 0 24px;max-width:480px}
.mr-cta-split-photo{overflow:hidden;aspect-ratio:4/5}
.mr-cta-split-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:860px){.mr-cta-split{grid-template-columns:1fr}.mr-cta-split-photo{order:-1;aspect-ratio:16/10}}

/* ---------- dark CTA band ---------- */
.mr-cta-dark{background:var(--ink);color:#fff;border-radius:22px;padding:56px 40px;text-align:center;display:grid;gap:18px;justify-items:center}
.mr-cta-dark h2{color:#fff!important}
.mr-cta-dark p{margin:0;opacity:.8;font:400 calc(var(--body-size) + 1px) var(--mr-sans)}
.mr-cta-dark .mr-btn-primary{background:#fff;color:var(--ink);border-color:#fff}

/* ---------- FAQ accordion (namespaced, does not touch WooCommerce's .acc-*) ---------- */
.mr-accordion{border-top:0;display:grid;gap:12px}
.mr-acc-item{border-bottom:0;background:#fff;border-radius:14px;box-shadow:0 10px 24px -18px rgba(92,0,56,.2);overflow:hidden;transition:box-shadow .2s ease}
.mr-acc-item:has(.mr-acc-title[aria-expanded="true"]){box-shadow:0 14px 30px -16px rgba(92,0,56,.3)}
.mr-acc-title{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;border:0;background:transparent;color:var(--ink);padding:18px 22px;text-align:left;font:700 15px var(--mr-sans);cursor:pointer}
.mr-acc-title b{font-size:20px;font-weight:400;color:var(--mr-magenta,#c81681);flex:0 0 auto;transition:transform .2s}
.mr-acc-title[aria-expanded="true"] b{transform:rotate(45deg)}
/* v1.6.40: the 960px cap tried in v1.6.39 still left a wide empty gap
   on large/wide monitors, since the card itself can grow well past that
   (up to the page's own --max:1440px). This accordion is a single,
   full-width column with nothing competing for space next to it, so
   there's no layout reason to cap the text at all — dropped the
   max-width entirely so the answer just fills the card, at any screen
   width. (Originally 760px, briefly 960px — see v1.6.39 history.) Added
   p+p spacing too, since multiple <p>s (from wpautop()) had zero gap
   between them and ran together as one block. */
.mr-acc-body{padding:0 22px 22px}
.mr-acc-body[hidden]{display:none}
.mr-acc-body p{margin:0;font:400 calc(var(--body-size) + 1px)/1.7 var(--mr-sans);opacity:.9}
.mr-acc-body p+p{margin-top:1em}
/* v2.0.17: "Veelgestelde vragen" (post 288) uses the native Gutenberg wp:details
   accordion so the content stays editable in the block editor, but the default
   look (thin divider lines, small triangle marker) read as too plain next to the
   ".mr-accordion" cards on Praktische info. Re-skin it to match that card look
   (white rounded card, shadow, bold question, +/x toggle) without touching the
   underlying <details>/<summary> markup or losing editability. Scoped to this
   page only so no other use of wp:details elsewhere is affected. */
.page-id-288 .wp-block-details{
  border-top:0;
  border-bottom:0;
  margin:0 0 12px;
  padding:0;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 24px -18px rgba(92,0,56,.2);
  overflow:hidden;
  transition:box-shadow .2s ease;
}
.page-id-288 .wp-block-details:last-child{margin-bottom:0}
.page-id-288 .wp-block-details[open]{box-shadow:0 14px 30px -16px rgba(92,0,56,.3)}
.page-id-288 .wp-block-details summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  list-style:none;
  cursor:pointer;
  padding:18px 22px;
  font:700 15px var(--mr-sans,Arial,sans-serif);
  color:var(--ink);
}
.page-id-288 .wp-block-details summary::-webkit-details-marker{display:none}
.page-id-288 .wp-block-details summary::after{
  content:"+";
  font-size:20px;
  font-weight:400;
  line-height:1;
  color:var(--mr-magenta,#c81681);
  flex:0 0 auto;
  transition:transform .2s;
}
.page-id-288 .wp-block-details[open] summary::after{transform:rotate(45deg)}
.page-id-288 .wp-block-details > :not(summary){
  padding:0 22px 22px;
  max-width:760px;
}
.page-id-288 .wp-block-details p{margin:0;font:400 calc(var(--body-size) + 1px)/1.7 var(--mr-sans,Arial,sans-serif);opacity:.9}

/* ---------- registration form ---------- */
.mr-form{max-width:640px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;display:grid;gap:20px;margin:12px 0 8px;box-shadow:0 18px 40px -22px rgba(92,0,56,.25)}
.mr-form-row,.mr-form-fieldset{display:grid;gap:6px}
.mr-form-row-group{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mr-form label{font:700 11px var(--mr-sans);letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.mr-form input[type=text],.mr-form input[type=email],.mr-form input[type=tel],.mr-form select,.mr-form textarea{border:1px solid var(--line);background:var(--paper,#f6dddd);padding:12px 14px;border-radius:8px;font:400 15px var(--mr-sans);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease}
/* v1.6.24: duidelijke, merk-eigen focusstijl i.p.v. de browser-standaard
   blauwe omtrek, die niet bij de rest van de site past en op sommige
   velden nauwelijks zichtbaar was tegen de roze achtergrond. */
.mr-form input[type=text]:focus,.mr-form input[type=email]:focus,.mr-form input[type=tel]:focus,.mr-form select:focus,.mr-form textarea:focus{outline:none;border-color:var(--mr-magenta,#c81681);box-shadow:0 0 0 3px rgba(200,22,129,.18)}
.mr-form textarea{resize:vertical;min-height:100px;font-family:var(--mr-sans)}
.mr-form fieldset{border:0;padding:0;margin:0}
.mr-form legend{font:700 11px var(--mr-sans);letter-spacing:.04em;text-transform:uppercase;opacity:.75;padding:0;margin-bottom:8px}
.mr-form-radio-row{display:flex;gap:26px;flex-wrap:wrap}
.mr-form-radio-row label{display:flex;align-items:center;gap:8px;font:400 14px var(--mr-sans);text-transform:none;letter-spacing:0;opacity:1}
.mr-form-submit{justify-self:start;margin-top:6px}
.mr-form-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.mr-form-status{padding:14px 18px;border-radius:10px;font:400 14px/1.5 var(--mr-sans);margin-bottom:20px}
.mr-form-status-success{background:#e5f4e6;color:#1e5c22}
.mr-form-status-error{background:#fbe6e6;color:#7a1f1f}
.mr-form-status-info{background:var(--paper,#f8dbe3);color:var(--ink,#252426)}
.mr-vendor-gate{display:grid;gap:14px;align-items:start;margin:24px 0}
.mr-vendor-gate p{margin:0}
.mr-vendor-gate .mr-btn{justify-self:start}
@media(max-width:600px){.mr-form-row-group{grid-template-columns:1fr}}

/* ---------- footer defaults ---------- */
.mr-footer-grid p{font-size:13px;line-height:1.6;margin:0 0 10px}
.mr-footer-grid .nav{display:block;list-style:none;padding:0;margin:0}
.mr-footer-grid .nav li{padding:3px 0}
.mr-footer-grid .nav a{text-decoration:none}
.mr-social-links{display:flex;gap:14px}
.mr-social-links a{text-decoration:none;font:700 11px var(--mr-sans);letter-spacing:.05em;text-transform:uppercase}

/* v1.6.11: het onderliggende tea-shop-thema tekent een Gutenberg Button
   block in de footer alleen als ronde roze pil wanneer die de classe
   "mr-btn mr-btn-primary" meekrijgt (zie ".wp-block-button.mr-btn"
   hierboven) — een knop die via Weergave → Widgets zonder die classe is
   toegevoegd (zoals "IK WIL GRAAG KOMEN!" in de footer) valt terug op het
   onderliggende thema's eigen, vierkante zwarte knop-stijl. Dat gaf twee
   verschillende knopstijlen voor exact dezelfde actie op één pagina. Dit
   dwingt elke knop/link-met-knop-opmaak in de footer naar dezelfde ronde
   roze pil als de rest van de site, ongeacht welke classe hij wel of niet
   heeft — zonder dat er iets in de widget zelf hoeft te veranderen. */
footer .wp-block-button__link,
footer a.button,
.tn-footer-grid-v167 .wp-block-button__link{
  display:inline-flex!important;align-items:center;justify-content:center;gap:8px;
  padding:15px 26px!important;font:700 12px/1 var(--mr-sans)!important;letter-spacing:.06em!important;
  text-transform:uppercase!important;text-decoration:none!important;border-radius:999px!important;
  border:1px solid var(--mr-magenta,#c81681)!important;
  background:var(--mr-magenta,#c81681)!important;color:#fff!important;
  transition:transform .15s ease,opacity .15s ease;
}
footer .wp-block-button__link:hover,
footer a.button:hover{transform:translateY(-1px)}

/* v1.6.11: de footer-grid in style.css rekent vast op 5 kolommen
   (1.35fr + 4×1fr), terwijl footer.php maximaal 3 widget-kolommen plus
   een los sociale-iconen-widgetje rendert — zodra er minder widgets
   staan ingevuld dan er kolommen gedefinieerd zijn, blijft er een groot
   leeg gat in het grid staan (zichtbaar als de brede lege ruimte tussen
   "Praktische info" en de Instagram/TikTok-iconen). auto-fit laat de
   kolommen altijd meeschalen met het werkelijke aantal ingevulde
   widgets, nu en bij een toekomstige wijziging in Widgets. */
.tn-footer-grid-v167{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}

/* ---------- header restructure: logo left, event info + nav + CTA right
   (matches the real marcherose.com header, which has no separate nav row) ---------- */
/* v1.6.23: logo op verzoek groter — de header (.head, uit style.css) had een
   vaste min-height van 105px, precies afgestemd op het oude, kleinere logo;
   die hoogte hier meevergroten zodat het logo lucht houdt t.o.v. de rand in
   plaats van het logo gewoon te laten overlappen/afsnijden. */
.mr-head{display:flex!important;grid-template-columns:none!important;align-items:center;justify-content:space-between;gap:24px;min-height:132px}
.mr-head-logo{display:flex!important;align-items:center;gap:0}
/* The original tea-shop theme hides ".side.left" on desktop (≥981px) as part of its own
   3-column centered-logo header — a leftover rule that was invisibly swallowing our real
   logo, which now lives in that same container. Force it back to visible with a more
   specific selector so the logo actually shows up. */
header .head.mr-head .side.left.mr-head-logo{visibility:visible!important}
.mr-head-logo .custom-logo{max-height:108px;width:auto;display:block}
.mr-logo-link{display:inline-block;line-height:0}
.mr-logo-img{max-height:98px;width:auto;display:block}
.side.right.tn-header-utilities-v1524{display:flex!important;align-items:center;gap:26px;flex-wrap:nowrap;justify-content:flex-end}
/* v1.6.6: this is the menu that's actually visible on screen (the
   theme's other, near-identical nav — id="menu-main" — only exists off-
   screen for the mobile menu; see ".navwrap{display:none}" below). It
   used to be hardcoded and never listened to Customize → Menu &
   Navigation at all — none of those settings (size, colour, spacing,
   gap, uppercase, hover) could ever reach it. It now reads the same
   --tn-menu-* variables that panel writes (see tn_v144_navigation_css()
   in functions.php), with fallbacks matching this menu's original
   hardcoded look so nothing changes until you actually touch a slider. */
.mr-header-nav{display:flex;gap:var(--tn-menu-gap,20px);list-style:none;margin:0;padding:0;font-family:var(--mr-sans);font-size:var(--tn-menu-size,11px);font-weight:var(--tn-menu-weight,700);letter-spacing:var(--tn-menu-spacing,.4px);text-transform:var(--tn-menu-transform,uppercase);white-space:nowrap}
.mr-header-nav li{position:static}
.mr-header-nav a{text-decoration:none;color:var(--tn-menu-color,var(--ink));transition:color .15s ease}
.mr-header-nav a:hover,
.mr-header-nav a:focus-visible{color:var(--tn-menu-hover,var(--ink))}
.mr-header-nav li.current-menu-item>a,
.mr-header-nav li.current-menu-parent>a,
.mr-header-nav li.current-menu-ancestor>a{color:var(--tn-menu-active,var(--ink))}
/* v2.0.15: dropdown for items with children (e.g. "Voor merken" -> "Veelgestelde
   vragen"). This row never had any submenu styling before — depth was capped at 1
   in header.php, which also removed the items from the DOM entirely; see the
   comment there. header has isolation:isolate + z-index in style.css so this
   panel stacks above page content without extra work here. */
.mr-header-nav li.menu-item-has-children{position:relative}
.mr-header-nav .sub-menu{
  display:block;
  position:absolute;
  top:100%;
  left:0;
  /* v2.0.16: was margin-top:14px -- that gap between the link and the panel was
     unreachable by the mouse (nothing in the DOM occupies it), so moving the
     cursor down from "Voor merken" toward the dropdown lost :hover before it
     got there and the panel closed. Flush against the link (plus a border for
     the same visual separation) keeps the hover chain continuous. */
  margin:0;
  padding:10px 0;
  min-width:220px;
  list-style:none;
  background:var(--paper,#fff);
  border:1px solid var(--line,#e5c5d1);
  border-top:0;
  box-shadow:0 18px 35px rgba(0,0,0,.10);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease,visibility 0s linear .15s;
  z-index:10;
}
/* The generic submenu-toggle button (built for the mobile/off-canvas menu) was
   getting cloned into this row too once it had real children, with nothing to
   hide it here the way ".navwrap .tn-submenu-toggle-v142" is hidden on desktop.
   This row is hover-driven, so the click-to-toggle button is redundant on it. */
.mr-header-nav .tn-submenu-toggle-v142{display:none!important}
.mr-header-nav li.menu-item-has-children:hover>.sub-menu,
.mr-header-nav li.menu-item-has-children:focus-within>.sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .15s ease;
}
.mr-header-nav .sub-menu li{padding:0 22px}
.mr-header-nav .sub-menu a{display:block;padding:9px 0;font-weight:600;letter-spacing:.2px;text-transform:none;white-space:nowrap;color:var(--ink)}
.mr-header-nav .sub-menu a:hover,
.mr-header-nav .sub-menu a:focus-visible{color:var(--tn-menu-hover,var(--ink));text-decoration:underline}
.mr-header-cta{padding:11px 22px;font-size:11px;white-space:nowrap}
/* v1.6.47: style.css zet met !important een donkere tekstkleur
   (var(--tn-menu-color)) op ALLE links in de header-utilities-rij — bedoeld
   voor gewone tekstlinks als "Zoeken"/"Account", maar dat raakte ook deze
   "Ik wil graag komen!"-knop, die gewoon een .mr-btn-primary is en dus
   witte tekst hoort te hebben, zoals elke andere primary-knop op de site
   (bijv. "Bestel je kaartje" onderaan de homepage). Twee classes + !important
   nodig om die eerdere !important-regel te verslaan. */
.mr-header-cta.mr-btn-primary{color:var(--button-text,#fff)!important}
.mr-header-cta.mr-btn-primary:hover,
.mr-header-cta.mr-btn-primary:focus-visible{color:var(--button-text,#fff)!important}
/* Nav used to render a second time below the header; it now lives inline above, so hide that row.
   The mobile-menu script still clones its markup regardless of visibility. */
.navwrap{display:none!important}
/* v1.6.72: op de WooCommerce "Mijn account"-pagina verscheen die verborgen
   .navwrap alsnog zichtbaar als een tweede, dubbele menubalk vlak onder de
   header. Oorzaak: style.css bevat een hele reeks regels uit het
   oorspronkelijke tea-shop-thema ("v1.5.15/v1.5.16 — CATALOGUS DROPDOWN
   REGRESSION FIX", rond regel 2932-3063) die specifiek op
   "body.woocommerce-account .navwrap" de dropdown-positionering van hún
   account-pagina repareerden — en die regels zetten daarbij ook gewoon
   "display:revert!important" / "display:block!important" terug, wat de
   browser-standaard voor <nav> is (block), dus zichtbaar. Omdat die selector
   (body.woocommerce-account .navwrap) specifieker is dan de simpele
   ".navwrap" hierboven, won hij alsnog, alleen op precies deze ene pagina.
   Marché Rosé gebruikt die dropdown-positionering niet (de .mr-header-nav
   hierboven regelt de echte desktopmenu's) dus deze regel mag op de
   accountpagina gewoon weer verborgen blijven, met een selector die
   specifiek genoeg is om al die regels alsnog te verslaan. */
body.woocommerce-account header nav.navwrap{display:none!important}
/* De tea-shop header had ook een taalkiezer-icoon dat de echte marcherose.com
   header niet laat zien — verborgen (niet verwijderd); de onderliggende
   GTranslate-functie werkt nog gewoon op zijn eigen pagina.
   v1.6.69: de bijbehorende "ZOEKEN"- en "ACCOUNT"-regels hierboven zijn
   verwijderd. Ze deden toch al niets: style.css's
   "@media(min-width:981px){ header .tn-header-utilities-v1524 > a{
   display:inline-flex!important } }" (hogere specificiteit: element+klasse+
   element i.p.v. hier maar 1 klasse) won altijd van deze display:none, dus
   "ZOEKEN" en "ACCOUNT" stonden in werkelijkheid al die tijd gewoon zichtbaar
   in de balk. Nu dus écht opgelost: de ZOEKEN-link en de losse ACCOUNT-link
   bestaan niet meer in header.php (zie de toelichting daar en bij de
   wp_nav_menu_objects-filter in functions.php), dus hier is niets meer te
   verbergen voor die twee. */
.tn-language-v164{display:none!important}
@media(max-width:1080px){
  .mr-header-nav{display:none!important}
}
@media(max-width:980px){
  .mr-head-logo{display:flex!important}
  .mr-header-nav,.mr-header-cta{display:none!important}
}
@media(max-width:560px){
  .mr-head{min-height:96px}
  .mr-head-logo .custom-logo{max-height:76px!important}
  .mr-logo-img{max-height:68px!important}
}

/* ---------- category/shop loop: plain "In mandje" button, no quantity stepper ----------
   The underlying tea-shop theme adds a −/+ quantity row (tn-archive-order-row) to every
   product card for fast B2B bulk ordering. Marché Rosé doesn't need that on its category
   page, so it's collapsed here to a single full-width button; the hidden qty input still
   submits its default quantity (1), so add-to-cart keeps working exactly the same. */
.tn-archive-order-row{grid-template-columns:1fr!important}
.tn-archive-qbtn,
.tn-archive-order-row .qty{display:none!important}
.tn-archive-add{grid-column:1/-1!important}

/* ---------- header wordmark fallback ----------
   Only used until a real logo image is uploaded via Customize → Site
   identity; brings the text placeholder in line with the handwritten
   "Marché Rosé" logo mark on the live site. */
.site-title{font:800 30px var(--mr-serif,Arial,sans-serif);color:var(--heading-color,#c81681);letter-spacing:-.5px}

/* Scrolling ticker bar: force white text/separators regardless of the
   theme's own ticker text-colour so it always reads on the magenta band.
   "Nieuw ontwerp": ook de achtergrond zelf vastgezet op het effen
   accentroze (zoals in het goedgekeurde mockup), ongeacht wat er in
   Customize → Tea Netherlands Theme voor die band staat ingesteld. */
.service{background:var(--mr-magenta,#c81681);color:var(--tn-ticker-text,#fff)}
.service-separator{opacity:.7}

/* ---------- brand-logo ticker (Deelnemers page, below the header) ----------
   Same infinite-scroll trick as the site's text ticker (.service-track /
   @keyframes marq): the track is the full list of brand logos repeated N
   times back to back, and the animation slides it left by exactly 1/N of
   the track's total width — i.e. exactly one full copy — then jumps back
   to 0%, so the loop never shows a seam. N (mr-ticker-repeats-N) is chosen
   in PHP based on how many brands there are, so the strip always stays
   wider than the screen even with only a few logos. */
/* v1.6.22: logo's waren nauwelijks leesbaar — platte, kleine logo's los op
   een bijna-even-lichte achtergrond, zonder enig kader om ze van elkaar en
   van de ondergrond te onderscheiden (en één brand-logo is een puur-witte
   PNG, zie toelichting onderaan). Oplossing: elk logo krijgt nu een eigen
   witte "kaart" (chip) met een zachte schaduw — een gangbare, robuuste
   afwerking voor dit soort merken-stroken, die ook logo's in allerlei
   kleuren/contrasten netjes leesbaar houdt tegen de roze balk. */
.mr-brand-ticker{
  overflow:hidden;
  background:linear-gradient(180deg,#fff7f3,var(--paper,#fdf6f2));
  border-top:1px solid rgba(92,0,56,.12);
  border-bottom:2px solid var(--mr-magenta,#c81681);
  padding:30px 0;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);
}
.mr-ticker-track{
  display:flex;
  width:max-content;
  align-items:center;
  animation:mrBrandTicker linear infinite;
  animation-duration:36s;
}
.mr-ticker-set{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.mr-ticker-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin:0 12px;
  padding:16px 30px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 22px -12px rgba(92,0,56,.35);
  transition:transform .2s ease,box-shadow .2s ease;
}
.mr-ticker-logo img{
  display:block;
  height:32px;
  width:auto;
  max-width:130px;
  object-fit:contain;
  opacity:1;
  filter:none;
}
.mr-ticker-logo:hover,
.mr-ticker-logo:focus-visible{
  transform:translateY(-3px);
  box-shadow:0 14px 26px -12px rgba(92,0,56,.45);
}
/* Each repeat count needs its own keyframes because "one set width" is a
   different fraction of the total track for each N. */
.mr-ticker-repeats-2{animation-name:mrBrandTicker2;animation-duration:20s}
.mr-ticker-repeats-3{animation-name:mrBrandTicker3;animation-duration:28s}
.mr-ticker-repeats-4{animation-name:mrBrandTicker4;animation-duration:34s}
.mr-ticker-repeats-5{animation-name:mrBrandTicker5;animation-duration:40s}
.mr-ticker-repeats-6{animation-name:mrBrandTicker6;animation-duration:46s}
@keyframes mrBrandTicker2{to{transform:translate3d(-50%,0,0)}}
@keyframes mrBrandTicker3{to{transform:translate3d(-33.3333%,0,0)}}
@keyframes mrBrandTicker4{to{transform:translate3d(-25%,0,0)}}
@keyframes mrBrandTicker5{to{transform:translate3d(-20%,0,0)}}
@keyframes mrBrandTicker6{to{transform:translate3d(-16.6667%,0,0)}}
@media(max-width:560px){
  .mr-brand-ticker{padding:20px 0}
  .mr-ticker-logo{margin:0 8px;padding:12px 20px}
  .mr-ticker-logo img{height:24px;max-width:96px}
}
@media(prefers-reduced-motion:reduce){
  .mr-ticker-track{animation:none!important}
  .mr-brand-ticker{overflow-x:auto}
}

/* ---------- footer titles: follow the chosen kop-lettertype ----------
   The footer's own titles (both the default "Meer weten?" / "Snel naar" /
   "Locatie" headings and any real Appearance → Widgets → Footer titles)
   are plain, unclassed <h4> elements — the original theme's own footer
   title styling only applies to elements carrying its specific
   .tn-footer-title-v167 / .widget-title classes, which these don't have,
   so they fell through to a generic serif default that never followed
   Customize → Lettertypes. This makes them follow the same --mr-serif
   (heading font) variable as the rest of the site. */
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6{
  font-family:var(--mr-serif)!important;
}

/* ---------- footer: groot, vaag watermerk op de achtergrond ----------
   "Nieuw ontwerp": een reusachtige, bijna onzichtbare "Marché Rosé" achter
   de footer-kolommen, net als in het goedgekeurde mockup — puur
   decoratief via ::before/content, dus geen wijziging aan de footer-
   widgets zelf nodig. overflow:hidden op de buitenste footer-wrapper
   voorkomt dat de (expres te brede) tekst een horizontale scrollbalk
   veroorzaakt; z-index op de binnenste wrapper houdt de echte
   footer-inhoud er bovenop. */
.tn-footer-main-v167{position:relative;overflow:hidden}
.tn-footer-main-v167:before{
  content:"Marché Rosé";position:absolute;z-index:0;
  left:50%;bottom:-6%;transform:translateX(-50%);
  width:max-content;white-space:nowrap;pointer-events:none;
  font:800 clamp(90px,16vw,240px)/1 var(--mr-serif);
  color:rgba(255,255,255,.035);
}
.tn-footer-inner-v167{position:relative;z-index:1}

/* ---------- footer: kleur echt forceren (niet via de --tn-footer-*
   variabelen) ----------
   v1.6.16: style.css's eigen footer-CSS leest zijn kleuren uit
   --tn-footer-bg/--tn-footer-text/etc., maar een losse <style>-tag die
   het thema zelf via wp_head print (prioriteit 36 — dus NA zowel
   style.css als dit bestand) vult diezelfde variabelen opnieuw met de
   Customize-waarden (tn_footer_bg_v167 e.a.) en wint daarmee altijd, wat
   hier ook in :root stond. Vandaar het magenta/zwarte footer i.p.v. de
   bedoelde bordeaux. Door de daadwerkelijke achtergrond/tekstkleur hier
   met vaste waarden + !important te zetten (i.p.v. nogmaals via de
   variabele), omzeilen we dat volledig, ongeacht wat er in Customize
   staat ingesteld. */
.tn-footer-main-v167{background:#5c0038!important;color:rgba(255,255,255,.85)!important}
.tn-footer-bottom-v167{background:#4a002c!important;color:rgba(255,255,255,.6)!important}
.tn-footer-v167,.tn-footer-v167 p,.tn-footer-v167 li,.tn-footer-v167 a{color:rgba(255,255,255,.85)!important}
.tn-footer-title-v167{color:#fff!important}
.tn-footer-v167 a:hover{color:#fff!important;opacity:.75}
.tn-footer-copyright-v167,.tn-footer-bottom-v167 a{color:rgba(255,255,255,.6)!important}

/* ---------- single product page: grotere bodytekst + 3-koloms gerelateerde producten ----------
   v1.6.25. De "Beschrijving"-tekst (acc-body, uit style.css) stond op een
   vast 13px — klein voor een leesblok met meerdere alinea's en een
   lijst, zoals nu bij de kraam-producten. Related/upsell producten
   stonden daarnaast op hetzelfde 4-koloms grid als de archiefpagina,
   wat ze vrij smal maakte bij maar 3-4 gerelateerde items; nu een eigen
   3-koloms grid met bijpassende mobiele/tablet-breakpoints (de bestaande
   .woocommerce ul.products-breakpoints gelden niet automatisch mee, dus
   die worden hier losstaand herhaald). */
.single-product .summary .woocommerce-tabs .acc-body{
  font-size:16px!important;
  line-height:1.75!important;
}
.single-product .summary .woocommerce-tabs .acc-body p,
.single-product .summary .woocommerce-tabs .acc-body li{
  font-size:16px;
  line-height:1.75;
}
/* v1.6.26: "Beschrijving" op de productpagina stond vrij laag. Getest en
   gemeten in de browser (niet alleen in de CSS-bron, want een paar van
   deze marges "collapsen" met hun buur en style.css zet de ruimte boven
   het tabblad zelf al bewust op 0 — dat dus met rust gelaten, anders komt
   er juist ruimte BIJ). De echte winst zit in de prijs-marge, de
   goedkeur-melding en de SKU/categorie-rijen iets krapper te zetten;
   scheelt ~29px, geverifieerd door de positie van "Beschrijving" voor/na
   te meten.
   v1.6.29-fix: deze eerste regel (prijs-marge) bleek op de live site
   helemaal niet actief — zelfde ".single-product .woocommerce ..."-fout
   als bij de "Aanbieding!"-badge hieronder (zie die toelichting). Nu
   gecorrigeerd; de drie regels eronder werkten wel al goed. */
.single-product div.product p.price{margin-bottom:14px!important}
.single-product .summary .mr-vendor-gate{margin-top:14px!important;margin-bottom:14px!important}
.single-product .product_meta{padding-top:12px!important}
.single-product .product_meta>span{margin-top:4px!important;margin-bottom:4px!important}

/* Breadcrumb boven de productfoto stond er vrij "gepropt" bij: kleine
   12px tekst met maar 14px lucht tussen huisje/pijltje/productnaam. Hier
   wat meer ademruimte in de breedte (niet in margin-top, dat zou alles
   weer naar beneden duwen). Deze regel is zonder @media dus geldt hij
   ook standaard op telefoonformaat — style.css verkleint de breadcrumb
   juist bewust onder 560px (naar 10px tekst/9px gap, om twee regels op
   een smal scherm te voorkomen); zonder eigen mobiele variant zou mijn
   bredere 13px/16px die verkleining overstemmen en op een telefoon weer
   te krap gaan ogen of omslaan. Daarom hier hetzelfde patroon herhaald,
   alleen net wat ruimer dan het origineel. */
.single-product .tn-breadcrumb-v140 nav{gap:16px;font-size:13px}
.single-product .tn-bc-arrow,
.single-product .tn-home-icon{font-size:15px}
@media(max-width:560px){
  .single-product .tn-breadcrumb-v140 nav{gap:10px;font-size:11px}
  .single-product .tn-bc-arrow,
  .single-product .tn-home-icon{font-size:13px}
}

/* De breadcrumb zelf (style.css, .tn-breadcrumb-v140) heeft alleen een
   margin-top, geen margin-bottom — op de productpagina stond hij daardoor
   vrijwel direct tegen de productfoto/galerij aan geplakt. Hier een eigen
   margin-bottom toegevoegd, alleen voor single-product (de archiefpagina's
   regelen hun eigen afstand al via .tn-archive-intro-v141 margin-bottom
   hierboven in style.css en mogen dus ongemoeid blijven). */
.single-product .tn-breadcrumb-v140{margin-bottom:24px}
@media(max-width:560px){
  .single-product .tn-breadcrumb-v140{margin-bottom:16px}
}

/* Op verzoek: het "X op voorraad"-aantal (WooCommerce's eigen .stock-regel,
   zie style.css regel ~273) niet meer tonen op de productpagina's — bezoekers
   hoeven niet te zien hoeveel plekken/stands er nog over zijn. De regel staat
   bewust hier i.p.v. in style.css verwijderd te worden: style.css is de
   ongewijzigde basis van het originele thema, maatwerk als dit hoort in dit
   bestand. Alleen single-product; de shop/categorie-kaarten blijven
   ongemoeid (die laten sowieso al geen los voorraadaantal zien). */
.single-product .summary .stock{display:none!important}

/* v1.6.70: de footer-menuwidget ("Meer weten?") toont het volledige hoofdmenu,
   inclusief het submenu van "Ik ben een merk" (Welke stand kies jij?,
   Veelgestelde vragen). style.css's generieke reset ".tn-footer-v167 ul{margin:0;
   padding:0}" (bedoeld om de buitenste lijst zijn standaard bullets/marge kwijt
   te raken) raakte per ongeluk ook die geneste <ul class="sub-menu">, waardoor de
   sub-items precies even ver naar links begonnen als "Ik ben een merk" zelf en
   dus niet als submenu te herkennen waren — leek net een los, extra menu-item.
   Hier alsnog een inspringing teruggezet, alleen voor genest submenu in de
   footer (de hoofdlijst zelf blijft ongemoeid).
   v1.6.71: de inspringing alléén loste de regelafstand niet helemaal op — elk
   <li> had dezelfde margin-bottom:12px (style.css, ".tn-footer-v167 li"), dus
   "Welke stand kies jij?" stond zonder enige ruimte direct tegen "Ik ben een
   merk" aan (de <ul> zelf heeft margin:0), terwijl de ruimte daarna, vóór
   "Veelgestelde vragen", gewoon de normale 12px was — exact dezelfde afstand
   als tussen twee hoofdmenu-items. Daardoor oogden de twee sub-items niet als
   bij elkaar horend groepje. Nu: een beetje lucht boven het submenu (zodat het
   niet tegen "Ik ben een merk" plakt), een iets kleinere afstand tússen de
   sub-items onderling (zodat ze wél een herkenbaar groepje vormen — de laatste
   krijgt via margin-collapsing alsnog gewoon 12px ruimte tot het volgende
   hoofditem), en een klein streepje als bullet voor extra duidelijkheid dat
   het om sub-items gaat. */
.tn-footer-v167 .sub-menu{padding-left:18px!important;margin-top:8px!important}
.tn-footer-v167 .sub-menu li{margin-bottom:8px!important;position:relative;padding-left:14px!important}
.tn-footer-v167 .sub-menu li::before{content:"–";position:absolute;left:0;top:0;opacity:.6}

/* v1.6.29-fix: "Aanbieding!"-badge op de productfoto overlapte de
   breadcrumb erboven. Live gemeten: WooCommerce plaatst die ronde badge
   standaard met top/left:-0.5em — dus bewust een stukje BUITEN de
   linkerbovenhoek van de productfoto, in de volle breedte van .product zelf
   (niet van de foto-div zoals je zou verwachten). Omdat er geen eigen
   ruimte tussen de breadcrumb en de foto zit, schuift die -0.5em precies
   over de onderkant van de breadcrumb. Opgelost door de badge een eigen
   positieve inspringing te geven i.p.v. ruimte tussen breadcrumb en foto
   toe te voegen — dat laatste zou de hele foto + beschrijving weer naar
   beneden duwen.
   LET OP: de eerste versie van deze regel gebruikte de selector
   ".single-product .woocommerce div.product span.onsale" — die matchte
   he­lemaal niets, want .single-product én .woocommerce staan allebei op
   <body> zelf, en een CSS "nakomeling"-selector (spatie) vereist dat het
   tweede element ECHT dieper in de boom zit dan het eerste, niet hetzelfde
   element. <body> kan geen nakomeling van zichzelf zijn, dus die regel werd
   altijd overgeslagen — live getest en pas daarna gecorrigeerd (zonder de
   onnodige .woocommerce-stap).
   LET OP #2: die correctie ("…div.product span.onsale", zonder ">") was
   zelf ook nog te breed — een gewone spatie matcht OM HET EVEN HOE DIEP,
   dus ook de "Aanbieding!"-badges in "Deze plekken zijn er ook!" hieronder
   (die zitten via de gerelateerde-producten-kaarten óók ergens binnen
   dezelfde .product-wrapper). Daardoor kregen die kaart-badges ineens een
   links-16px die samen met WooCommerce's eigen "right:0" (voor de kaart-
   variant, rechtsboven) de badge over de volle kaartbreedte uitrekte — live
   gezien als een lelijke balk i.p.v. een pil. Nu met ">" (direct kind), dat
   matcht alleen de badge die direct in de hoofd-productfoto zit, niet de
   geneste kaart-badges verderop. */
.single-product div.product>span.onsale{
  top:16px!important;
  left:16px!important;
}

/* v1.6.58: "AI-impressie"-label op de kraam-productfoto's (categorie
   "marche" — de enige producten met AI-gegenereerde beelden). Bewust
   rechtsonder i.p.v. bij de EARLY BIRD-badge (die zit linksboven op de
   productpagina, rechtsboven in de grid — zie marche-rose.css/style.css
   hierboven) zodat de twee badges elkaar nooit overlappen, in geen van
   beide weergaven. Subtiel/informatief (donker, klein) i.p.v. fel zoals
   de aanbiedingsbadge, want dit is geen marketing-label maar een
   transparantiemelding. position:relative op de drie containers hieronder
   bestaat al standaard in WooCommerce (dezelfde aanname waar de
   onsale-badge hierboven al op leunt). */
.mr-ai-badge{
  position:absolute;
  bottom:10px;
  right:10px;
  z-index:5;
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:rgba(37,36,38,.8);
  color:#fff;
  font:700 10px/1 Arial,sans-serif;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 10px 6px 8px;
  border-radius:999px;
  white-space:nowrap;
}
.mr-ai-badge::before{
  content:"✦";
  font-size:10px;
  opacity:.85;
}
.single-product .woocommerce-product-gallery .mr-ai-badge{bottom:16px;right:16px}
.wp-block-woocommerce-product-image .mr-ai-badge{bottom:8px;right:8px;font-size:9px;padding:5px 8px 5px 7px}
.mr-ai-badge-wrap{position:relative;display:block;line-height:0}
.mr-ai-badge-wrap .mr-ai-badge{bottom:8px;right:8px;font-size:9px;padding:5px 8px 5px 7px}

.related.products ul.products,
.upsells.products ul.products{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
@media(max-width:860px){
  .related.products ul.products,
  .upsells.products ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:560px){
  .related.products ul.products,
  .upsells.products ul.products{grid-template-columns:1fr!important}
}

/* v1.6.32: de "Lees verder"-knop op elke productkaart (ook hier in "Deze
   plekken zijn er ook!") had nog vierkante hoeken — de generieke WooCommerce
   knop-stijl (style.css, ".woocommerce a.button"), die nergens de ronde
   "pil"-vorm van de rest van de site (koptekst-knoppen, "Ik wil graag
   komen!") overneemt. Alleen hier in de productkaart-grid aangepast, niet
   de knop-basisstijl zelf (die wordt breder gebruikt, bv. in de cart). */
.woocommerce ul.products li.product>.button{
  border-radius:999px!important;
}

/* v1.6.31: "Deze plekken zijn er ook!" (de hertitelde "Related products"-kop
   op de Marché-productpagina's, zie de gettext-filter in functions.php) in
   hetzelfde handgeschreven lettertype als het logo (Caveat, bold) — alleen
   deze ene kop, niet alle koppen op de site. Het bijbehorende Google Font
   wordt apart geladen (zie marche_rose_enqueue_related_heading_font() in
   functions.php), los van de algemene Customize → Lettertypes-keuze, zodat
   dit blijft werken ongeacht welk kop-lettertype daar straks gekozen wordt.
   Groter gezet dan de standaard 30px: handschriften ogen bij gelijke
   pixelgrootte altijd kleiner/dunner dan een vast lettertype. */
.single-product .related.products>h2,
.single-product .upsells.products>h2{
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:44px!important;
  line-height:1.1!important;
}
@media(max-width:560px){
  .single-product .related.products>h2,
  .single-product .upsells.products>h2{font-size:34px!important}
}

/* v1.6.54: "Volg ons op Instagram" en "Ben je erbij op zondag 24 januari?"
   (homepage, de nieuwe Instagram-sectie resp. de afsluitende ticket-CTA)
   ook in het handgeschreven Caveat-lettertype, zelfde opzet als de
   "Deze plekken zijn er ook!"-kop hierboven. Het lettertype wordt nu ook
   op de homepage geladen (zie marche_rose_enqueue_related_heading_font()
   in functions.php, is_front_page() toegevoegd). Hogere specificiteit dan
   .mr-front h2 (die blijft de rest van de homepage-koppen sturen).
   v1.6.76: .mr-section-cta-simple ("Ben je erbij op zondag 24 januari?" +
   de twee knoppen) staat nu ook onderaan Over ons, op verzoek — selector
   daarom verbreed van alleen .mr-front naar .mr-page (de gedeelde
   wrapper-class van elke paginatemplate).
   v1.6.80: .mr-section-instagram ("Volg ons op Instagram") staat nu ook
   onderaan Contact, op verzoek — zelfde verbreding toegepast. */
.mr-front .mr-section-instagram h2,
.mr-page .mr-section-instagram h2,
.mr-front .mr-section-cta-simple h2,
.mr-page .mr-section-cta-simple h2{
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:44px!important;
  line-height:1.1!important;
}
/* v1.6.81: op Over ons komt deze kop nu uit de editor (content slot) zonder
   de has-text-align-center class die het oorspronkelijke hardcoded blok had
   — gecentreerd via CSS i.p.v. een block-align attribuut, zodat de editor
   geen "invalid block"-melding geeft als de site-eigenaar het blok opent. */
.mr-section-cta-simple h2{text-align:center}
@media(max-width:560px){
  .mr-front .mr-section-instagram h2,
  .mr-page .mr-section-instagram h2,
  .mr-front .mr-section-cta-simple h2,
  .mr-page .mr-section-cta-simple h2{font-size:34px!important}
}
/* v1.6.91: op Praktisch info stond dit even op het gewone serif-lettertype
   i.p.v. het handgeschreven Caveat hierboven — op verzoek (v1.6.93) weer
   teruggedraaid naar gewoon Caveat, net als op de andere pagina's die
   .mr-section-cta-simple gebruiken (homepage, Over ons). Regel bewust
   leeg/weggehaald i.p.v. de losse override hier te laten staan. */

/* v1.6.95: variant van .mr-section-cta-simple voor als het blok NIET als
   eigen volle-breedte sectie staat, maar in de linkerkolom van
   .mr-text-video-layout (zie page-praktisch-info.php) — dus zonder de
   bovenrand/sectiepadding van .mr-section (die is bedoeld voor een
   losstaande sectie, niet voor iets middenin een kolom), en links
   uitgelijnd i.p.v. gecentreerd zodat het netjes doorloopt met "En de
   locatie?" en de bodycopy erboven. Pagina-wrapperklasse ervoor voor
   genoeg specificiteit t.o.v. de generieke .mr-section-cta-simple h2{
   text-align:center}-regel hierboven. */
.mr-page-praktisch-info .mr-section-cta-simple-inline{margin-top:40px}
.mr-page-praktisch-info .mr-section-cta-simple-inline h2{text-align:left}
.mr-page-praktisch-info .mr-section-cta-simple-inline .mr-hero-cta-row{justify-content:flex-start;margin-top:20px}

/* ==========================================================
   v1.6.84 — /welke-stand-kies-jij/: editorial redesign
   ==========================================================
   Vervangt de v1.6.83-regels die hier stonden (die target­ten het
   WooCommerce "Product Collection"-blok via de generieke .wp-block-
   heading/.wp-block-post-title-classes — dat blok bestaat niet meer op
   deze pagina, zie page-welke-stand-kies-jij.php, dus die regels waren
   dode gewicht en zijn vervangen). Alles hieronder gebruikt in plaats
   daarvan eigen .mr-plekken-*-classes, dus geen afhankelijkheid meer van
   hoe WooCommerce Blocks zijn eigen markup toevallig opbouwt.
   Op basis van het eerder goedgekeurde ontwerpvoorstel ("Welke stand kies
   jij? - Wat een leuke opzet zo! dit wil ik"). */

/* -- hero / editorial intro -- */
.mr-plekken-hero{max-width:760px;margin-bottom:56px}
.mr-plekken-eyebrow{font:800 11px/1 var(--mr-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mr-magenta,#c81681);margin-bottom:18px}
/* Specifieke, zware selector + !important: overschrijft zowel de generieke
   h1.entry-title-stijl (style.css/marche-rose.css, elders gedeeld door alle
   pagina's) als de --wp--preset--font-family--editorial-lek die eerder op
   deze pagina speelde (zie de uitleg die hier stond vóór v1.6.84). */
.mr-page-plekken h1.entry-title.mr-plekken-h1{
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:clamp(44px,8vw,76px)!important;
  line-height:.98!important;
  letter-spacing:-1px!important;
  color:var(--mr-magenta,#c81681)!important;
  margin:0 0 22px!important;
}
.mr-plekken-lead{margin:0;font:400 clamp(18px,2vw,22px)/1.55 var(--mr-sans);color:var(--ink)}
.mr-plekken-divider{height:1px;background:rgba(37,36,38,.16);margin:0 0 56px}

/* -- "type finder": genummerde lijst i.p.v. een paragrafenstapel -- */
.mr-plekken-finder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 64px;margin-bottom:40px}
.mr-plekken-finder-item{display:flex;gap:20px}
.mr-plekken-finder-num{font-family:'Caveat',Georgia,cursive;font-weight:700;font-size:40px;line-height:1;color:var(--mr-magenta,#c81681);min-width:52px;flex:0 0 auto}
.mr-plekken-finder-title{font:800 17px/1.3 var(--mr-sans);margin-bottom:6px}
.mr-plekken-finder-desc{font:400 15px/1.55 var(--mr-sans);opacity:.85}
@media(max-width:700px){
  .mr-plekken-finder{grid-template-columns:1fr;gap:28px}
}

/* -- pil + link onder de lijst -- */
.mr-plekken-noterow{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-bottom:88px}
.mr-plekken-pill{display:inline-flex;align-items:center;font:700 10px/1 var(--mr-sans);letter-spacing:.1em;text-transform:uppercase;background:var(--mr-magenta,#c81681);color:#fff;padding:7px 13px;border-radius:999px}
.mr-plekken-link{color:var(--mr-magenta,#c81681)}

/* -- showcase: asymmetrische grid i.p.v. 4 gelijke kaarten -- */
/* v1.6.88: deze kop won het eerder NIET van de generieke ".mr-front h2,
   .mr-page h2{font:...!important}"-regel hierboven (zelfde specificiteit
   als .mr-plekken-h2 zelf, en die regel staat EN heeft !important) — kwam
   dus altijd in gewone sans-serif uit i.p.v. Caveat, ook al zag het er in
   een eerdere (te snelle) visuele check per ongeluk goed uit. Nu met
   !important + de paginawrapper-class ertegenaan geplakt voor hogere
   specificiteit (twee classes i.p.v. één), zelfde aanpak als
   .mr-page-plekken h1.entry-title.mr-plekken-h1 hierboven. */
.mr-page-plekken .mr-plekken-h2{
  margin:0 0 40px!important;
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:44px!important;
  line-height:1.1!important;
  color:var(--ink)!important;
}

.mr-plekken-grid{display:grid;gap:28px;margin-bottom:28px}
/* v1.6.91: top-rij op verzoek van 7fr/5fr (asymmetrisch) naar gelijke
   1/2 + 1/2 kolommen — zelfde verhouding als de onderste rij hieronder. */
.mr-plekken-grid-top{grid-template-columns:repeat(2,minmax(0,1fr))}
.mr-plekken-grid-bottom{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:100px}
@media(max-width:780px){
  .mr-plekken-grid-top,.mr-plekken-grid-bottom{grid-template-columns:1fr;margin-bottom:28px}
  .mr-plekken-grid-bottom{margin-bottom:64px}
}

.mr-plekken-card-photo{position:relative;display:block;border-radius:18px;overflow:hidden;background:var(--mr-magenta,#c81681)}
.mr-plekken-card-photo .mr-plekken-card-img{display:block;width:100%;height:100%;object-fit:cover;position:absolute;inset:0;margin:0}
.mr-plekken-ratio-4x3{aspect-ratio:4/3}
.mr-plekken-ratio-3x4{aspect-ratio:3/4}
.mr-plekken-ratio-5x4{aspect-ratio:5/4}
@media(max-width:780px){
  /* Op mobiel staan de kaarten onder elkaar in volle breedte — een
     staande 3/4-foto (Grand) zou daar onnodig hoog uitvallen, dus alle
     foto's krijgen op smal scherm dezelfde, overzichtelijke verhouding. */
  .mr-plekken-ratio-3x4,.mr-plekken-ratio-5x4{aspect-ratio:4/3}
}
.mr-plekken-badge{position:absolute;top:18px;right:18px;z-index:2;display:inline-flex;align-items:center;font:700 10px/1 var(--mr-sans);letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--mr-magenta,#c81681);padding:7px 13px;border-radius:999px}

.mr-plekken-card-tag{font-family:'Caveat',Georgia,cursive;font-weight:700;font-size:20px;color:var(--mr-magenta,#c81681);margin:14px 0 2px}
.mr-plekken-card-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:8px}
.mr-plekken-card-title{font:800 24px/1.2 var(--mr-sans)}
/* .mr-plekken-card-price omvat WooCommerce's eigen get_price_html()-markup
   (<del>gewone prijs</del> <ins>aanbiedingsprijs</ins>) — bewust niet zelf
   opnieuw opgebouwd, zie de toelichting bij marche_rose_plek_card() in
   functions.php (o.a. zodat de bestaande prijsafscherming voor niet-
   goedgekeurde bezoekers hier automatisch blijft werken). */
.mr-plekken-card-price{display:inline-flex;align-items:baseline;gap:8px;font:800 18px/1 var(--mr-sans);color:var(--mr-magenta,#c81681);white-space:nowrap;text-align:right}
.mr-plekken-card-price del{font:400 14px/1 var(--mr-sans);text-decoration:line-through;opacity:.5;color:var(--ink)}
.mr-plekken-card-price ins{text-decoration:none}
.mr-plekken-card-meta{font:400 14px/1.5 var(--mr-sans);opacity:.7;margin-bottom:14px}
@media(max-width:560px){
  .mr-plekken-card-title{font-size:20px}
  .mr-plekken-card-price{font-size:15px}
}

/* -- afsluitende CTA-band: edge-to-edge, zelfde full-bleed-truc als
   .mr-section-lookback hierboven (homepage "A look back"-sectie) -- */
.mr-plekken-cta{
  background:var(--mr-burgundy,#5c0038);color:#fff;text-align:center;
  padding:96px 28px;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.mr-plekken-cta h2{margin:0 0 18px;font-family:'Caveat',Georgia,cursive;font-weight:700;font-size:48px;line-height:1.1;color:#fff}
.mr-plekken-cta p{margin:0 0 32px;font:400 17px/1.6 var(--mr-sans);opacity:.85;max-width:520px;margin-left:auto;margin-right:auto}
.mr-plekken-cta .mr-btn-primary{background:var(--mr-magenta,#c81681);border-color:var(--mr-magenta,#c81681)}
@media(max-width:560px){
  .mr-plekken-cta{padding:64px 24px}
  .mr-plekken-cta h2{font-size:38px}
}

/* ==========================================================
   v1.6.86 — /merk-aanmelden/: sfeerbeeld van 3 plekken onderaan
   ==========================================================
   Bewust EENVOUDIGER dan de .mr-plekken-card-*-kaarten hierboven: alleen
   foto + naam, geen prijs/badge/knop/link — op uitdrukkelijk verzoek "niet
   als productlinks, maar als visuals". Zie marche_rose_plek_visual() in
   functions.php.
   v1.6.87: de titel kwam niet in Caveat uit — style.css/marche-rose.css
   hebben een generieke ".mr-front h2,.mr-page h2{font:...var(--mr-serif)
   !important}"-regel (verderop in dit bestand) die met !important elke
   h2 binnen .mr-page naar de standaard sans-serif trekt, dus ook deze
   kop (de wrapper-div heeft .mr-page). !important alleen was niet genoeg
   om dat te verslaan: die generieke regel heeft specificiteit (0,0,1,1)
   (klasse + elementselector), en een losse ".mr-stands-teaser-h2" heeft
   maar (0,0,1,0) — bij twee !important-regels wint de hoogste
   specificiteit, niet de volgorde in het bestand. Daarom nu, net als bij
   .mr-plekken-h2, een extra wrapper-class ertegenaan geplakt voor
   specificiteit (0,0,2,0), wat wél wint. Ook meer letter-spacing en
   ademruimte eromheen, op verzoek. */
.mr-stands-teaser{margin-top:72px;padding-top:56px;border-top:1px solid var(--line)}
.mr-page-merk-aanmelden .mr-stands-teaser-h2{
  margin:0 0 48px!important;
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:44px!important;
  line-height:1.1!important;
  letter-spacing:.02em!important;
  color:var(--mr-magenta,#c81681)!important;
  text-align:center;
}
.mr-stands-teaser-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.mr-stands-teaser-photo{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--mr-magenta,#c81681)}
.mr-stands-teaser-img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
.mr-stands-teaser-label{margin-top:14px;text-align:center;font:800 16px/1.3 var(--mr-sans)}
@media(max-width:780px){
  .mr-stands-teaser-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
}
@media(max-width:560px){
  .mr-stands-teaser{margin-top:56px;padding-top:40px}
  .mr-page-merk-aanmelden .mr-stands-teaser-h2{font-size:34px!important;margin-bottom:36px!important}
}

/* ==========================================================
   v1.6.73 — ALGEMEEN: geen serif-lettertype meer, overal de
   standaard sans-serif (DM Sans, dezelfde letter als de body copy).
   .mr-read-serif hierboven was de ene helft (leesparagrafen). Deze
   helft pakt style.css's "FASHION EDITORIAL TYPOGRAPHY"-blok (zoek
   op "DM Serif Display" in style.css): dat zet --tn-font-display op
   'DM Serif Display',Georgia,serif en past het toe op o.a. elke
   paginatitel (.entry-title — dus ook de H1 boven op Over ons,
   Praktisch info, Contact, Meld je merk aan), de WooCommerce
   shop/categorie-titels, de productpagina-titel en de winkelwagen-
   titel. Door de CSS-variabele hier opnieuw te zetten (marche-rose.css
   laadt na style.css, zelfde specificiteit op :root dus wint de latere
   bron) verandert dat in één keer overal, zonder elke losse selector
   te moeten overtikken. --tn-font-serif bestond in style.css zelf
   nergens als eigen definitie (viel terug op Georgia,serif via de
   fallback in var(--tn-font-serif,Georgia,serif) bij de mega-menu
   kop) — hier dus ook maar meteen gedefinieerd.
   Koppen blijven wel vetgedrukt (800), net als alle andere koppen op
   de site (zie .mr-page h2 hierboven) — alleen niet meer serif. */
:root{
  --tn-font-display:var(--mr-sans);
  --tn-font-serif:var(--mr-sans);
}
.entry-title,.woocommerce-products-header__title,.woocommerce div.product .product_title,
.tn-archive-title-v141,.tn-cart-titlebar-v1511 h1,
.woocommerce-account .entry-title{font-weight:800!important}

/* Een handvol koppen/labels had het serif-lettertype niet via de
   variabele maar rechtstreeks hardcoded staan (dus niet gevangen door
   de herdefinitie hierboven) — hier stuk voor stuk expliciet overschreven.
   De meeste van deze selectors horen bij blok-"patterns" die momenteel
   niet op een live pagina worden gebruikt, maar voor de zekerheid toch
   meegenomen zodat ze ook niet alsnog serif tonen zodra ze ooit wél
   ingevoegd worden. */
.tn-gutenberg-products-v181 ul.products li.product h2,
.tn-gutenberg-products-v181 ul.products li.product .woocommerce-loop-product__title,
.tn-about-signoff-v187,
.tn-about-hello-v187{font-family:var(--mr-sans)!important}

/* De roze/zwarte "pilletjes" bij categorie/tags op de productpagina
   (.product_meta .posted_in / .tagged_as) stonden nog in Georgia —
   geen var(--tn-font-display) betrokken, dus los overschreven. */
.single-product .product_meta .posted_in a,
.single-product .product_meta .tagged_as>a{font-family:var(--mr-sans)!important}

/* ==========================================================
   v1.6.73 — Herbruikbaar "kicker"-regeltje: een ingesprongen,
   roze, vetgedrukte subtitel in de standaard sans-serif, direct
   onder een paginatitel (H1) en boven de lopende intro-tekst.
   Gebruikt op Over ons, Praktisch info, Meld je merk aan en Contact.
   ========================================================== */
.mr-page-kicker{
  margin:0 0 16px;
  padding-left:28px;
  font:700 clamp(18px,2vw,22px)/1.4 var(--mr-sans);
  color:var(--mr-magenta,#c81681);
}
@media(max-width:560px){
  .mr-page-kicker{padding-left:18px}
}

/* v1.6.74 — op verzoek: de kicker dichter op de titel erboven (minder
   witruimte ertussen) en met meer inspringing. Geldt voor alle vier
   pagina's, want .mr-page-kicker is overal dezelfde class. De titel zelf
   (h1.entry-title) heeft standaard margin-bottom:28px (style.css) — met
   :has() wordt dat hier specifiek verkleind, maar ALLEEN wanneer er ook
   echt een kicker op volgt (dus andere H1-titels zonder kicker blijven
   ongewijzigd). */
h1.entry-title:has(+ .mr-page-kicker){margin-bottom:6px!important}
.mr-page-kicker{padding-left:48px}
@media(max-width:560px){
  .mr-page-kicker{padding-left:30px}
}

/* v1.6.73 — Praktisch info: "En de locatie?" als eigen kop, zelfde
   visuele gewicht als de paginatitel (H1) erboven, zonder dat er
   een tweede semantische <h1> op de pagina komt (vandaar een <h2>
   met dezelfde .entry-title-opmaak i.p.v. een letterlijke <h1>).
   v1.6.76: op verzoek nu in het handgeschreven Caveat-lettertype i.p.v.
   de vette sans. !important nodig om .mr-front h2,.mr-page h2 (ook
   !important, elders in dit bestand) te verslaan — maar bleek in de
   praktijk NIET genoeg: ".mr-page h2" (klasse+element, specificiteit 0,1,1)
   is specifieker dan de kale ".mr-location-heading" hier (0,1,0), en bij
   twee !important-regels wint de hoogste specificiteit, ongeacht
   bestandsvolgorde. Daarom hieronder verzwaard naar
   ".mr-page-praktisch-info .mr-location-heading" (0,2,0), dat wél wint.
   text-transform:none expliciet erbij, zodat dit zeker niet per ongeluk
   in hoofdletters komt (zoals eerder per abuis gebeurde bij de
   homepage-feiten-labels). */
.mr-page-praktisch-info .mr-location-heading{
  margin:48px 0 18px;
  color:var(--heading-color,var(--ink));
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:56px!important;
  line-height:1!important;
  letter-spacing:-1.5px;
  text-transform:none!important;
}
@media(max-width:560px){
  .mr-page-praktisch-info .mr-location-heading{margin-top:36px;font-size:42px!important}
}

/* v1.6.73 — Over ons: de inleidende lead-paragraaf ("Zin om weer eens
   écht verrast te worden?...") vetgedrukt, los van alle andere
   .mr-lead-paragrafen elders op de site (die blijven gewoon regular).
   v1.6.75: de paragraaf staat niet meer in .mr-prose (zie page-over-ons.php
   — nu los onder de titel, zelfde opzet als Praktisch info), selector
   hierop aangepast zodat de vetgedrukte stijl behouden blijft. */
.mr-page-over-ons .mr-lead{font-weight:700}

/* v1.6.76 — Over ons: "Wie zitten er achter Marché Rosé?" ook in het
   handgeschreven Caveat-lettertype, op verzoek — zelfde opzet als "Goed om
   te weten" op Praktisch info hieronder. !important nodig om .mr-front
   h2,.mr-page h2 (ook !important) te verslaan. Dit is het enige <h2> in
   .mr-prose op deze pagina, dus de selector is veilig niet te breed. */
.mr-page-over-ons .mr-prose h2{
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:44px!important;
  line-height:1.1!important;
  text-transform:none!important;
}
@media(max-width:560px){
  .mr-page-over-ons .mr-prose h2{font-size:34px!important}
}

/* v1.6.73 — Praktisch info: "Goed om te weten" in het handgeschreven
   Caveat-lettertype, zelfde opzet als "Deze plekken zijn er ook!" en
   de homepage-koppen hierboven. Het lettertype wordt nu ook op deze
   pagina geladen, zie marche_rose_enqueue_related_heading_font() in
   functions.php (page-praktisch-info.php toegevoegd aan de check). */
.mr-page-praktisch-info .mr-section-head h2{
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:44px!important;
  line-height:1.1!important;
}
@media(max-width:560px){
  .mr-page-praktisch-info .mr-section-head h2{font-size:34px!important}
}

/* v1.6.73 — Praktisch info: link naar BlueCity in de "En de locatie?"-tekst
   krijgt een duidelijk zichtbare onderstreping (anders valt een link in
   lopende roze tekst nauwelijks op). */
.mr-page-praktisch-info .mr-prose a{text-decoration:underline}

/* v1.6.74 — Homepage: nog twee koppen in het handgeschreven Caveat-
   lettertype, op verzoek, zelfde opzet als de Instagram-/"Ben je erbij"-
   koppen hierboven. Caveat wordt al geladen op de homepage (is_front_page()
   zit al in de check in functions.php), dus hier alleen de CSS. */
.mr-front .mr-lookback h2,
.mr-front .mr-intro-simple h2{
  font-family:'Caveat',Georgia,cursive!important;
  font-weight:700!important;
  font-size:44px!important;
  line-height:1.1!important;
}
@media(max-width:560px){
  .mr-front .mr-lookback h2,
  .mr-front .mr-intro-simple h2{font-size:34px!important}
}