/* Aanvullingen op het Pixio-template, specifiek voor Festival Style Guide. */
.fsg-look-items { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 24px; }
.fsg-look-items li { border-top: 1px solid var(--border-color, #eee); padding: 9px 0; font-size: 15px; line-height: 1.45; }
.fsg-look-items li span.cat { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .55; }
.fsg-look-items li a { font-size: 12px; text-decoration: underline; opacity: .7; }
.fsg-facts { display: flex; flex-wrap: wrap; gap: 10px 34px; margin-top: 20px; }
.fsg-facts b { display: block; font-size: 20px; line-height: 1.15; font-family: var(--meet); font-weight: 500; letter-spacing: -.02em; }
.fsg-facts span { font-size: 13px; opacity: .8; }
.dz-bnr-inr .fsg-facts b, .dz-bnr-inr .fsg-facts span { color: #fff; }
.fsg-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 18px 0 0; list-style: none; }
.fsg-chips a, .fsg-chips span { display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); color: #fff; text-decoration: none; }
.fsg-prose table { width: 100%; font-size: 15px; margin-bottom: 24px; }
.fsg-prose table th, .fsg-prose table td { padding: 10px 14px; border-bottom: 1px solid var(--border-color, #eee); text-align: left; }
.fsg-prose table.kv th { width: 46%; font-weight: 500; background: #faf8f5; }
.fsg-prose ul.checklist { list-style: none; padding: 0; columns: 2 230px; column-gap: 30px; }
.fsg-prose ul.checklist li { break-inside: avoid; padding: 6px 0 6px 26px; position: relative; }
.fsg-prose ul.checklist li::before { content: ''; position: absolute; left: 0; top: 12px; width: 13px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .5; }
.fsg-prose ul.rules, .fsg-prose ul.dont { list-style: none; padding: 0; }
.fsg-prose ul.rules li, .fsg-prose ul.dont li { border-left: 3px solid var(--primary, #e73c3c); padding: 2px 0 2px 16px; margin-bottom: 14px; }
.fsg-prose .ed-note { font-size: 14px; opacity: .75; font-style: italic; }
.fsg-prose .notice { background: #fff7e6; border: 1px solid #ffd68a; border-radius: 10px; padding: 12px 16px; font-size: 15px; }
.fsg-prose .disclosure { font-size: 13px; opacity: .7; border-top: 1px solid var(--border-color,#eee); padding-top: 12px; margin-top: 20px; }
.fsg-side { position: sticky; top: 110px; }
.fsg-toc { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 10px; list-style: none; }
.fsg-toc a { display: inline-block; padding: 6px 14px; border: 1px solid var(--border-color,#e6e6e6); border-radius: 999px; font-size: 14px; text-decoration: none; }
.fsg-toc a:hover { background: #111; color: #fff; }
.fsg-card { display: block; border-radius: 12px; overflow: hidden; color: #fff; min-height: 190px; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; text-decoration: none; transition: transform .18s ease; }
.fsg-card:hover { transform: translateY(-3px); color: #fff; }
.fsg-card .meta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.fsg-card h4 { color: #fff; margin-bottom: 4px; font-size: 20px; }
.fsg-card p { color: rgba(255,255,255,.9); font-size: 14px; margin: 0; }
.fsg-list-cols { columns: 3 230px; column-gap: 34px; list-style: none; padding: 0; }
.fsg-list-cols li { break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--border-color,#f0f0f0); }
.fsg-list-cols a { text-decoration: none; }
.fsg-list-cols small { opacity: .6; display: block; font-size: 12px; }
.scroltop { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #111; color: #fff; align-items: center; justify-content: center; z-index: 900; }
@media (max-width: 991px) { .fsg-side { position: static; } }

/* ---- banner ------------------------------------------------------------- */
.fsg-banner { --dz-banner-height: auto; height: auto !important; min-height: 0 !important; padding: 66px 0 60px; display: block; }
.fsg-banner.dz-bnr-inr-sm { padding: 56px 0 50px; }
.fsg-banner.dz-bnr-inr-lg { padding: 96px 0 88px; }
.fsg-banner .dz-bnr-inr-entry { display: block; height: auto; padding: 0; text-align: left; vertical-align: baseline; }
/* Het thema zet .dz-bnr-inr h1 op capitalize, wat "What To Wear" oplevert.
   v3 wil hoofdletters, dus hier met het bannervak erbij om die regel te
   verslaan, en de regelafstand uit het systeem (0.96). */
.dz-bnr-inr .fsg-banner h1, .fsg-banner h1 { color: #fff; margin-bottom: 14px; max-width: 22ch;
  text-transform: uppercase; line-height: .96; }
.dz-bnr-inr.fsg-banner h1 { text-transform: uppercase; line-height: .96; }
.fsg-banner .fsg-lede { color: rgba(255,255,255,.94); font-size: 18px; line-height: 1.6; max-width: 60ch; margin: 0 0 6px; text-align: left; }
.fsg-banner .breadcrumb-row { background: none; padding: 0; margin-bottom: 14px; }
.fsg-banner .breadcrumb-row ul.breadcrumb { background: none; padding: 0; margin: 0; }
.fsg-banner .breadcrumb li, .fsg-banner .breadcrumb li a { color: rgba(255,255,255,.85); font-size: 13px; }
.fsg-banner .breadcrumb li a:hover { color: #fff; }
.fsg-home-banner h1 { max-width: 16ch; font-size: clamp(2.4rem, 5vw, 4rem); }
.fsg-home-search { max-width: 520px; margin: 22px 0 8px; }

/* ---- logo --------------------------------------------------------------- */
/* Vrije ruimte rondom is de hoogte van één tekstregel; bij de brede variant is
   dat ongeveer de helft van de logohoogte. Het thema zet .logo-header a op
   display:table-cell, knijpt img's op 145px en geeft het vak een vaste 180px:
   alle drie moeten hier weg, anders past de naam er niet in. */
.fsg-logo { --fsg-logo-h: 22px; display: inline-flex; align-items: center; text-decoration: none; }
.fsg-logo img { display: block; height: var(--fsg-logo-h); width: auto; }
@media (min-width: 992px) { .fsg-logo { --fsg-logo-h: 26px; } }
.logo-header { width: auto; }
.logo-header a.fsg-logo, .footer-logo a.fsg-logo { display: inline-flex; align-items: center; }
.logo-header .fsg-logo img { height: var(--fsg-logo-h); max-width: none; object-fit: fill; }
/* In de voet staat het logo over twee regels, dus daar mag hij hoger. */
.footer-logo .fsg-logo img { height: 64px; max-width: none; object-fit: contain; }
.footer-logo .fsg-logo { align-items: flex-start; }

/* ---- kaarten ------------------------------------------------------------ */
.fsg-look-card { display: block; height: 100%; padding: 26px 24px; border: 1px solid var(--border-color, #e9e5df); border-radius: 14px; background: #fff; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.fsg-look-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(0,0,0,.35); }
.fsg-look-card .meta { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary, #e73c3c); margin-bottom: 8px; }
.fsg-look-card h4 { margin-bottom: 6px; font-size: 19px; }
.fsg-look-card p { margin: 0; font-size: 14px; opacity: .78; }
.fsg-look-meta { display: block; margin-top: 12px; font-size: 12px; opacity: .6; }

/* ---- looks op de festivalpagina ---------------------------------------- */
.fsg-look { padding-bottom: 34px; border-bottom: 1px solid var(--border-color, #eee); }
.fsg-look:last-of-type { border-bottom: 0; }
.fsg-look .badge { background: #f3efe9; color: #6b6259; font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; }
.fsg-look .section-head .title a { color: inherit; }
.fsg-pin { background: #e60023 !important; border-color: #e60023 !important; }
.fsg-pin:hover { background: #c8001e !important; }

/* ---- zijbalk ------------------------------------------------------------ */
.fsg-side-links { list-style: none; padding: 0; margin: 0; }
.fsg-side-links li { padding: 7px 0; border-bottom: 1px solid var(--border-color, #f0eeea); font-size: 15px; }
.fsg-side-links li:last-child { border-bottom: 0; }
.fsg-side-links a { text-decoration: none; }
.fsg-side-links small { opacity: .55; margin-left: 6px; }
.fsg-side-links a.active { color: var(--primary, #e73c3c); font-weight: 600; }
.side-bar .widget { margin-bottom: 30px; }
.fsg-side-check ul.checklist { columns: 1; font-size: 14px; }
.fsg-side-check table.kv th, .fsg-side-check table.kv td { padding: 6px 8px; font-size: 14px; }

/* ---- filters ------------------------------------------------------------ */
.fsg-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.fsg-filters .form-control { width: auto; min-width: 165px; flex: 0 1 auto; border-radius: 999px; height: 46px; }
.fsg-filters input[type="search"] { min-width: 240px; }

/* ---- zoeken ------------------------------------------------------------- */
.fsg-search .input-group { max-width: 640px; }
.fsg-hits { list-style: none; padding: 0; margin: 18px 0 0; max-width: 640px; }
.fsg-hits li a { display: block; padding: 10px 14px; border: 1px solid var(--border-color, #eee); border-radius: 10px; margin-bottom: 8px; text-decoration: none; background: #fff; }
.fsg-hits li a:hover { border-color: #111; }
.fsg-hits small { display: block; opacity: .6; font-size: 12px; }
.fsg-hits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; max-width: none; }

/* ---- product ------------------------------------------------------------ */
.fsg-product-img { width: 100%; border-radius: 14px; background: #f6f3ee; }
.shop-card.style-1 .dz-content .title { font-size: 15px; line-height: 1.35; }
.shop-card.style-1 .dz-content .price { font-size: 15px; }
.shop-card.style-1 .dz-media img { background: #f6f3ee; }

/* ---- kaart --------------------------------------------------------------- */
.fsg-map { width: 100%; border-radius: 14px; overflow: hidden; border: 1px solid var(--border-color, #e6e2dc); z-index: 1; }
.fsg-map-loading { display: flex; align-items: center; justify-content: center; background: var(--krijt); color: var(--inkt); }
.fsg-map-count { align-self: center; font-size: 14px; opacity: .7; }
.fsg-popup .leaflet-popup-content-wrapper { border-radius: 12px; }
.fsg-popup .leaflet-popup-content { margin: 14px 16px; }
.fsg-pop { display: block; text-decoration: none; line-height: 1.45; }
.fsg-pop strong { display: block; font-size: 15px; }
.fsg-pop span { display: block; font-size: 13px; opacity: .7; }
.fsg-pop em { display: block; margin-top: 6px; font-size: 12px; font-style: normal; color: var(--primary, #e73c3c); }
.leaflet-container { font: inherit; }

/* ---- agenda -------------------------------------------------------------- */
/* De opmaak van de agendaregel staat in design.css, bij de andere componenten.
   Hier alleen wat er niet bij hoort: de lijst zelf en de twee labels.
   Stond dit hier ook, dan won fsg.css altijd, want dit bestand laadt later. */
.fsg-agenda { list-style: none; padding: 0; margin: 0; }
.fsg-tag-exp, .fsg-tag-conf { display: inline-block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; margin-top: 4px; }
.fsg-tag-exp { background: #fff3d6; color: #8a6300; }
.fsg-tag-conf { background: #dff5e6; color: #1b6b3a; }
.fsg-toc a.on { background: #111; color: #fff; }
/* ---- gidsen -------------------------------------------------------------- */
.fsg-guide-hero { width: 100%; height: auto; border-radius: 14px; margin-bottom: 28px; }
.fsg-guide-card { padding: 0; overflow: hidden; }
.fsg-guide-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.fsg-guide-card .meta { padding: 18px 22px 0; }
.fsg-guide-card h4, .fsg-guide-card p { padding: 0 22px; }
.fsg-guide-card p { padding-bottom: 22px; }

/* ---- citeerbaar antwoordblok (GEO) --------------------------------------- */
.fsg-answer { background: #f7f4ef; border-left: 4px solid var(--primary, #e73c3c); border-radius: 0 12px 12px 0;
  padding: 18px 22px; font-size: 16.5px; line-height: 1.6; margin-bottom: 26px; }
.fsg-pop-city { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; margin-bottom: 8px; }
.fsg-pop-item { display: block; padding: 7px 0; border-top: 1px solid #eee; text-decoration: none; }
.fsg-pop-item:first-of-type { border-top: 0; }
.fsg-pop-item strong { display: block; font-size: 14px; }
.fsg-pop-item span { display: block; font-size: 12px; opacity: .65; }
.fsg-popup .leaflet-popup-content { max-width: 260px; }

/* ---- landenwissel -------------------------------------------------------- */
.fsg-market { position: relative; }
.fsg-market-btn { background: none; border: 1px solid var(--border-color, #e6e2dc); border-radius: 999px;
  padding: 6px 14px; font-size: 13px; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.fsg-market-btn:hover { border-color: #111; }
.fsg-market-menu { position: absolute; right: 0; top: calc(100% + 10px); width: 290px; background: #fff;
  border: 1px solid var(--border-color, #e6e2dc); border-radius: 14px; padding: 16px; z-index: 120;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.35); }
.fsg-market-menu p { font-size: 13px; margin: 0 0 10px; opacity: .7; }
.fsg-market-menu ul { list-style: none; padding: 0; margin: 0; max-height: 260px; overflow: auto; }
.fsg-market-menu button { width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px;
  border-radius: 8px; font-size: 14px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.fsg-market-menu button:hover { background: #f5f2ed; }
.fsg-market-menu button.on { background: #111; color: #fff; }
.fsg-market-menu button small { margin-left: auto; opacity: .55; }
.fsg-market-note { margin-top: 12px !important; font-size: 12px !important; }
@media (max-width: 991px) { .fsg-market-label { display: none; } }

/* ---- festivalfotografie -------------------------------------------------- */
.fsg-fest-hero { max-width: 1320px; margin: -30px auto 0; padding: 0 20px; }
.fsg-fest-hero img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 20px 50px -30px rgba(0,0,0,.5); }
.fsg-photo-credit { font-size: 12px; opacity: .55; margin: 10px 2px 0; }
.fsg-inline-photo { width: 100%; height: auto; border-radius: 14px; margin: 0 0 30px; }

/* ---- festivalkaart met foto ---------------------------------------------- */
.fsg-card { position: relative; overflow: hidden; }
.fsg-card-photo { padding: 0; min-height: 230px; background: #1a1a1a; }
.fsg-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease; }
.fsg-card-photo:hover img { transform: scale(1.05); }
.fsg-card-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,.05) 100%); }
.fsg-card-body { position: relative; z-index: 2; display: block; padding: 22px; margin-top: auto; }
.fsg-card-photo .fsg-card-body { position: absolute; left: 0; right: 0; bottom: 0; }
.fsg-card-title { display: block; font-family: inherit; font-size: 20px; font-weight: 700; color: #fff; margin: 2px 0 4px; }
.fsg-card-sub { display: block; font-size: 13px; color: rgba(255,255,255,.88); }
.fsg-card .meta { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); }

/* ---- vouw, logo, gidsen -------------------------------------------------- */
.fsg-fold { background: #faf8f5; border: 1px solid var(--border-color, #eee); border-radius: 12px; margin: 0 0 30px; }
.fsg-fold summary { cursor: pointer; padding: 14px 20px; font-weight: 600; font-size: 15px; list-style: none; }
.fsg-fold summary::-webkit-details-marker { display: none; }
.fsg-fold summary::after { content: '+'; float: right; color: var(--primary, #e73c3c); font-weight: 700; }
.fsg-fold[open] summary::after { content: '\\2013'; }
.fsg-fold .fsg-prose { padding: 0 20px 6px; }
.fsg-banner-aside { position: absolute; right: 0; top: 0; }
.dz-bnr-inr-entry { position: relative; }
.fsg-fest-logo { display: inline-flex; align-items: center; gap: 12px; background: rgba(255,255,255,.94);
  border-radius: 14px; padding: 10px 16px 10px 10px; text-decoration: none; color: #16110f; box-shadow: 0 10px 30px -18px rgba(0,0,0,.6); }
.fsg-fest-logo img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #fff; }
.fsg-fest-logo-fallback { width: 46px; height: 46px; border-radius: 8px; background: #16110f; color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; }
.fsg-fest-logo strong { display: block; font-size: 13px; }
.fsg-fest-logo small { display: block; font-size: 11px; opacity: .6; }
@media (max-width: 767px) { .fsg-banner-aside { position: static; margin-bottom: 18px; } }

/* ---- banner met festivalfoto erachter ------------------------------------ */
.fsg-banner-photo { background-size: cover; background-position: center 42%; padding: 96px 0 84px; }
.fsg-banner-photo.dz-bnr-inr-lg { padding: 120px 0 96px; }
.fsg-banner-photo h1 { text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.fsg-banner-photo .fsg-lede { text-shadow: 0 1px 14px rgba(0,0,0,.45); max-width: 54ch; }
.fsg-banner .fsg-banner-credit { margin: 26px 0 0 !important; font-size: 11px !important; line-height: 1.5;
  color: rgba(255,255,255,.5); max-width: 46ch; text-align: left; letter-spacing: .01em; }
.fsg-banner-photo .fsg-chips a, .fsg-banner-photo .fsg-chips span { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); backdrop-filter: blur(4px); }
@media (max-width: 767px) {
  .fsg-banner-photo, .fsg-banner-photo.dz-bnr-inr-lg { padding: 64px 0 56px; background-position: center 40%; }
}

/* ---- officiële merch ----------------------------------------------------- */
.fsg-merch { margin-top: 50px; padding: 28px; background: #fff; border: 1px solid var(--border-color,#eee); border-radius: 16px; }
.fsg-merch-head { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; }
.fsg-merch-head .meta { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--primary,#e73c3c); }
.fsg-merch-head h3 { margin: 4px 0 6px; font-size: 22px; }
.fsg-merch-head p { margin: 0; font-size: 14px; opacity: .7; max-width: 60ch; }
.fsg-merch-card { display: block; text-decoration: none; }
.fsg-merch-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 12px; background: #f4f1ec; margin-bottom: 10px; }
.fsg-merch-title { display: block; font-size: 14px; line-height: 1.35; }
.fsg-merch-price { display: block; font-size: 14px; font-weight: 700; margin-top: 2px; }

/* ---- outfitgalerij ------------------------------------------------------- */
.fsg-gallery { margin: 10px 0 0; }
.fsg-gallery .row > [class*='col-'] { margin-bottom: 26px; }
.fsg-shot { margin: 0; }
.fsg-shot img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 14px; background: #f4f1ec; display: block; }
.fsg-shot figcaption { padding: 10px 2px 0; position: relative; }
.fsg-shot-rank { font-size: 11px; letter-spacing: .1em; color: var(--primary, #e73c3c); display: block; }
.fsg-shot figcaption strong { display: block; font-size: 15px; line-height: 1.3; }
.fsg-shot-pieces { display: block; font-size: 12.5px; opacity: .65; line-height: 1.45; margin-top: 2px; }
.fsg-shot-pin { position: absolute; right: 6px; top: -34px; background: #e60023; color: #fff; font-size: 11px;
  font-weight: 700; padding: 5px 12px; border-radius: 999px; text-decoration: none; opacity: 0; transition: opacity .15s; }
.fsg-shot:hover .fsg-shot-pin { opacity: 1; }
@media (hover: none) { .fsg-shot-pin { opacity: .92; } }

/* Taalwissel onder in de footer. Volledige taalnamen, want daar is ruimte voor
   en "Nederlands" is duidelijker dan NL. */
.footer-langs { border-top: 1px solid rgba(255, 255, 255, .1); padding: .9rem 0; }
.fsg-langs { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; list-style: none;
  margin: 0; padding: 0; align-items: center; justify-content: center; }
.fsg-lang { font-size: .82rem; color: inherit; opacity: .6; text-decoration: none; }
.fsg-lang:hover { opacity: 1; text-decoration: underline; }
.fsg-lang.is-current { opacity: 1; font-weight: 600; }

/* Footer. Pixio zet .site-footer.style-1 op een lichte achtergrond (--light is
   crème) terwijl .footer-dark witte letters meebrengt. Twee klassen winnen van
   klasse plus element, dus won de lichte achtergrond en waren de witte letters
   onleesbaar. Hier zetten we de achtergrond expliciet donker, in dezelfde toon
   als de festivalbanners, en zorgen we dat elk stuk tekst genoeg contrast houdt. */
.site-footer.style-1.footer-dark { background-color: #14100d; border-top-color: #14100d; }
.site-footer.footer-dark .footer-top { color: rgba(255, 255, 255, .74); }
.site-footer.footer-dark .footer-title { color: #fff; }
.site-footer.footer-dark p { color: rgba(255, 255, 255, .74); }
.site-footer.footer-dark ul li a,
.site-footer.footer-dark .footer-top p a { color: rgba(255, 255, 255, .8); }
.site-footer.footer-dark ul li a:hover,
.site-footer.footer-dark ul li a:focus { color: #fff; text-decoration: underline; }
.site-footer.footer-dark .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); }
.site-footer.footer-dark .copyright-text,
.site-footer.footer-dark .footer-bottom .fb-inner { color: rgba(255, 255, 255, .66); }
/* Het accent in het logo blijft de merkkleur, niet het gedempte wit hierboven. */
.site-footer.footer-dark .fsg-logo .text-primary { color: var(--primary, #e73c3c); }

/* Eerstvolgende editie, naast de titel op de homepage. Donkere kaart op de
   gekleurde banner, zodat hij leest zonder de titel te beconcurreren. */
.fsg-next { margin-top: 1.5rem; }
.fsg-next-card { display: block; overflow: hidden; border-radius: .9rem; text-decoration: none;
  background: rgba(12, 8, 6, .55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .18); color: #fff; transition: transform .2s ease, border-color .2s ease; }
.fsg-next-card:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .45); color: #fff; }
.fsg-next-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.fsg-next-body { display: block; padding: 1rem 1.15rem 1.15rem; }
.fsg-next-kicker { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  opacity: .75; margin-bottom: .3rem; }
.fsg-next-name { display: block; font-size: 1.25rem; line-height: 1.25; margin-bottom: .3rem; }
.fsg-next-meta { display: block; font-size: .85rem; opacity: .85; }
.fsg-next-meta .fsg-tag-conf, .fsg-next-meta .fsg-tag-exp { margin-left: .45rem; }
.fsg-next-count { display: block; font-size: .85rem; font-weight: 600; margin-top: .35rem; }
.fsg-next-cta { display: inline-block; margin-top: .7rem; font-weight: 600; font-size: .9rem;
  border-bottom: 2px solid currentColor; padding-bottom: 1px; }
@media (max-width: 991px) { .fsg-next { max-width: 26rem; } }

/* Markt zonder aanbod: de productrijen verdwijnen in plaats van dat de bezoeker
   een catalogus ziet waar hij niet kan bestellen. De marktschakelaar zet
   data-shop="off" op <html> zodra de gekozen markt te weinig heeft. */
html[data-shop="off"] .shop-card,
html[data-shop="off"] .fsg-shop-row,
html[data-shop="off"] .widget:has(.shop-card) { display: none; }

/* Koopknop per onderdeel van een look: het stuk dat in de omschrijving staat,
   te koop bij een winkel die aan de markt van de bezoeker levert. */
.fsg-look-items .fsg-buy { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 20px;
  background: var(--primary, #e73c3c); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fsg-look-items .fsg-buy:hover, .fsg-look-items .fsg-buy:focus { background: #111; color: #fff; }

/* Handmatig gekozen producten bij een pagina: redactionele keuze, los van de feed. */
.fsg-curated .title { font-size: 22px; margin-bottom: 14px; }
.fsg-curated-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.fsg-curated-list li { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.09); border-radius: 10px; background: #fff; }
.fsg-curated-list a { font-weight: 600; }
.fsg-curated-list .shop { margin-left: auto; font-size: 12px; color: #6f5e5e; white-space: nowrap; }

/* Shop de look: foto van de outfit links, de onderdelen met thumbnail en
   koopknop rechts. Onder 768px gaat de foto boven de lijst staan. */
.fsg-shoplook { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 22px; align-items: start; }
.fsg-shoplook-shot { margin: 0; border-radius: 14px; overflow: hidden; background: #f4efe9; }
.fsg-shoplook-shot img { display: block; width: 100%; height: auto; }
.fsg-shoplook-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fsg-shoplook-items li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 10px 12px; border: 1px solid rgba(0,0,0,.09); border-radius: 12px; background: #fff; }
.fsg-shoplook-items .thumb { width: 56px; height: 74px; object-fit: cover; border-radius: 8px; background: #f1ece6; }
.fsg-shoplook-items .thumb-empty { display: block; }
.fsg-shoplook-items .what { min-width: 0; display: block; }
.fsg-shoplook-items .what strong { display: block; font-size: 14px; line-height: 1.3; }
.fsg-shoplook-items .prod { display: block; font-size: 12px; color: #6f5e5e; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.fsg-shoplook-buy { white-space: nowrap; }
.fsg-shoplook-buy .p { opacity: .85; margin-left: 4px; }
@media (max-width: 767px) {
  .fsg-shoplook { grid-template-columns: 1fr; }
  .fsg-shoplook-items li { grid-template-columns: 48px minmax(0, 1fr); }
  .fsg-shoplook-buy { grid-column: 1 / -1; text-align: center; }
}

/* Toestemmingsbanner. Onderin, smal, en hij verdwijnt zodra je gekozen hebt. */
.fsg-consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1200;
  max-width: 640px; margin: 0 auto; padding: 16px 18px; border-radius: 14px;
  background: #14100d; color: rgba(255,255,255,.86); box-shadow: 0 10px 40px rgba(0,0,0,.35);
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.fsg-consent p { margin: 0; flex: 1 1 260px; font-size: 14px; line-height: 1.45; }
.fsg-consent-btns { display: flex; gap: 8px; flex: 0 0 auto; }
.fsg-consent .btn-outline-secondary { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.35); }
/* De hoofdknop is in v3 een lime vlak met zwarte tekst. Lime is nooit
   tekstkleur, altijd een vlak. Het thema zet hier zijn eigen rood neer via de
   Bootstrap-variabelen, dus die overschrijven we mee. */
.btn-primary, .fsg-consent .btn-primary {
  --bs-btn-bg: var(--lime); --bs-btn-border-color: var(--lime); --bs-btn-color: var(--inkt);
  --bs-btn-hover-bg: #C3D31C; --bs-btn-hover-border-color: #C3D31C; --bs-btn-hover-color: var(--inkt);
  --bs-btn-active-bg: #C3D31C; --bs-btn-active-border-color: #C3D31C; --bs-btn-active-color: var(--inkt);
  background: var(--lime); border-color: var(--lime); color: var(--inkt);
  font-family: var(--meet); font-weight: 700; text-transform: uppercase; border-radius: 0;
}
.btn-primary:hover, .btn-primary:focus, .fsg-consent .btn-primary:hover {
  background: #C3D31C; border-color: #C3D31C; color: var(--inkt);
}
/* Een tweede knop naast de hoofdknop is een omlijnd zwart vlak, geen kleur. */
.btn-outline-secondary, .btn-secondary { border-radius: 0; font-family: var(--meet); font-weight: 700; text-transform: uppercase; }
.fsg-consent .btn-outline-secondary:hover { color: #14100d; background: #fff; border-color: #fff; }
@media (max-width: 575px) { .fsg-consent { flex-direction: column; align-items: stretch; } .fsg-consent-btns { justify-content: stretch; } .fsg-consent-btns .btn { flex: 1; } }

/* Ruimte tussen de secties. Pixio zet 100px boven en onder elke sectie, dus
   tussen twee blokken staat 200px lucht. Dat is te veel voor een pagina die uit
   veel korte blokken bestaat. Eén afstand per overgang, en alleen de laatste
   sectie houdt ruimte onderaan zodat hij niet tegen de voettekst plakt. */
.content-inner-1, .content-inner-2, .content-inner { padding-top: 56px; padding-bottom: 0; }
.content-inner-1:last-of-type, .content-inner-2:last-of-type, .content-inner:last-of-type { padding-bottom: 56px; }
/* Een sectie met eigen achtergrond heeft de ruimte binnenin wel nodig. */
.content-inner-1.bg-light, .content-inner-2.bg-light, .content-inner.bg-light { padding-bottom: 56px; }
@media (max-width: 767px) {
  .content-inner-1, .content-inner-2, .content-inner { padding-top: 36px; }
  .content-inner-1:last-of-type, .content-inner-2:last-of-type, .content-inner:last-of-type,
  .content-inner-1.bg-light, .content-inner-2.bg-light { padding-bottom: 36px; }
}
/* Binnen de pagina: de blokken zelf stonden ook ruim uit elkaar. */
.fsg-look.m-b50 { margin-bottom: 34px; }
.m-t50 { margin-top: 34px; }
.m-t40 { margin-top: 28px; }

/* Knoppenbalk op het overzicht. De pagina is lang; zonder ingang moet je scrollen
   om te zien wat er is. Blijft boven in beeld staan tijdens het scrollen. */
.fsg-adminnav { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0 14px; margin-bottom: 8px; background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); }
.fsg-navbtn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 22px;
  border: 1px solid rgba(0,0,0,.12); font-size: 13px; font-weight: 600; color: #24262b; background: #fff; }
.fsg-navbtn:hover, .fsg-navbtn:focus { background: #14100d; color: #fff; border-color: #14100d; }
.fsg-navbtn .n { display: inline-flex; align-items: center; justify-content: center; width: 19px; height: 19px;
  border-radius: 50%; background: var(--primary, #e73c3c); color: #fff; font-size: 11px; }
.fsg-navbtn:hover .n, .fsg-navbtn:focus .n { background: #fff; color: #14100d; }
/* Zorgt dat een aangeklikte sectie niet onder de balk verdwijnt. */
.fsg-anchor { position: relative; top: -70px; display: block; height: 0; }

/* Stippen op de outfitfoto. Klikken brengt je bij een vergelijkbaar product.
   Op aanraakschermen blijft de lijst eronder de hoofdingang; de stippen zijn
   daar een extraatje, geen vervanging. */
.fsg-shoplook-shot { position: relative; }
.fsg-spot { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center; z-index: 2; }
.fsg-spot .dot { width: 15px; height: 15px; border-radius: 50%; background: rgba(255,255,255,.92);
  border: 2px solid var(--primary, #e73c3c); box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform .15s; }
.fsg-spot:hover .dot, .fsg-spot:focus .dot { transform: scale(1.35); background: var(--primary, #e73c3c); }
.fsg-spot .tip { position: absolute; left: 50%; bottom: 130%; transform: translateX(-50%);
  min-width: 150px; max-width: 210px; padding: 8px 11px; border-radius: 9px; background: #14100d;
  color: #fff; font-size: 12px; line-height: 1.35; opacity: 0; visibility: hidden; transition: opacity .15s;
  pointer-events: none; text-align: left; }
.fsg-spot .tip strong { display: block; margin-bottom: 2px; }
.fsg-spot:hover .tip, .fsg-spot:focus .tip { opacity: 1; visibility: visible; }
/* Bij de onderste stippen klapt de tekstballon naar boven weg, dus die zetten we eronder. */
.fsg-spot[style*="top: 9"] .tip, .fsg-spot[style*="top: 8"] .tip { bottom: auto; top: 130%; }
@media (max-width: 767px) { .fsg-spot .tip { display: none; } }
.fsg-shoplook-hint { padding: 7px 2px 0; font-size: 12px; color: #6f5e5e; }


/* ---- huisstijl: restjes van het oude thema ------------------------------- */
/* De twee perzikgradients uit skin-1 vervallen. Ze staan alleen op blokken die
   we niet gebruiken, maar zo kunnen ze ook niet terugsluipen. */
:root { --gradient1: var(--krijt); --gradient2: var(--krijt); }

/* De conditiestrip staat in de bannerfoto, dus met een doorschijnende bodem in
   plaats van wit papier. */
.fsg-banner .fsg-condities { margin-top: 22px; max-width: 820px; border-color: var(--papier); }
.fsg-banner .fsg-conditie { background: rgba(10,10,10,.72); border-right-color: var(--papier); color: #fff; }
.fsg-banner .fsg-conditie .label { opacity: .8; }
@media (max-width: 575px) { .fsg-conditie { flex-basis: 50%; } }

/* Een hele kaart is soms één link. De huisstijl zet linktekst op --uv-inkt, maar
   dat is bedoeld voor een link in een zin, niet voor alle tekst in een kaart:
   anders wordt een kaart van boven tot onder magenta. De kaart krijgt dus de
   gewone tekstkleur, alleen het label eroverheen blijft accent. */
a.fsg-look-card, a.fsg-look-card:hover,
a.fsg-merch-card, a.fsg-merch-card:hover,
a.shop-card, a.shop-card:hover { color: var(--inkt); }
/* De eerstvolgende-kaart staat op de zwarte banner, dus die blijft wit. Stond
   hij hierboven, dan werd het zwart op zwart. */
a.fsg-next-card, a.fsg-next-card:hover { color: #fff; }
a.fsg-look-card h4, a.fsg-look-card p { color: inherit; }

/* ---- statistieken ------------------------------------------------------- */
/* Een staafje achter het getal: de verhouding lees je sneller dan de kolom. */
.fsg-balk { display: block; height: 4px; margin-top: 5px; background: var(--lijn); border-radius: 2px; overflow: hidden; }
.fsg-balk span { display: block; height: 100%; border-radius: 2px; }
/* Kliks per dag. Geen kaart met assen: het gaat om het verloop, niet om aflezen. */
.fsg-sparkline { display: flex; align-items: flex-end; gap: 3px; height: 72px; margin: 6px 0 26px;
  padding: 8px 10px; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--papier); }
.fsg-sparkline span { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 3px; }
.fsg-sparkline i { display: block; width: 100%; border-radius: 2px 2px 0 0; }

/* Het thema zet koppen op text-transform: capitalize. In het Engels valt dat
   nog mee, in het Nederlands staat er dan "Wat Levert De Klik" en dat is fout.
   Koppen krijgen de schrijfwijze die de tekst zelf heeft. */
/* Alleen h3 en h4 volgen de tekst; h1 en h2 staan in v3 altijd in hoofdletters.
   Het thema wilde capitalize, dat gaf "Wat Levert De Klik" en dat is fout. */
/* Het thema zet .section-head.style-1 .title op capitalize en op zijn eigen
   lettertype, en dat is specifieker dan een losse h2-regel. Vandaar hier met
   dezelfde klassen erbij, anders staat er "Shop De Coachella Look". */
.section-head.style-1 .title, .section-head.style-2 .title,
.section-head .title, .section-head h2, h1, h2 {
  text-transform: uppercase; font-family: var(--display); font-weight: 400; letter-spacing: -.005em;
}
h3, h4 { text-transform: none; }

/* ---- lookfeed ----------------------------------------------------------- */
/* Per festival een collage van drie of vier outfits met de naam over de foto.
   Het leest als een feed en laat zien dat de looks bij elkaar horen: zelfde
   weer, zelfde terrein, zelfde publiek. */
.fsg-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px; }
.fsg-feed-tegel { border: 2px solid var(--inkt); background: var(--papier); }
.fsg-collage { display: grid; gap: 2px; background: var(--inkt); grid-template-columns: repeat(2, 1fr); }
/* Bij drie looks staat de eerste breed boven twee smalle. Bij vier is het een
   blok van 2x2: met een brede eerste blijft de vierde alleen op een derde rij
   achter en staat er een gat naast. */
.fsg-collage.n3 .fsg-collage-vak:first-child { grid-column: span 2; aspect-ratio: 3 / 2; }
.fsg-collage-vak { position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; text-decoration: none; }
.fsg-collage-vak img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.8,.3,1); }
.fsg-collage-vak:hover img { transform: scale(1.04); }
/* De naam ligt op de foto, met een donkere voet eronder zodat hij leesbaar
   blijft op een lichte foto. */
.fsg-collage-naam { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px;
  font-family: var(--meet); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(to top, rgba(10,10,10,.85), rgba(10,10,10,0)); }
.fsg-collage-vak:hover .fsg-collage-naam { background: linear-gradient(to top, rgba(10,10,10,.92), rgba(10,10,10,.15)); }
.fsg-feed-voet { padding: 14px 16px 16px; }
.fsg-feed-voet h3 { margin: 0 0 2px; font-size: 19px; }
.fsg-feed-voet h3 a { text-decoration: none; }
.fsg-feed-voet p { margin: 0 0 8px; font-family: var(--meet); font-size: 11px; text-transform: uppercase; opacity: .6; }
.fsg-feed-meer { font-family: var(--meet); font-size: 11px; font-weight: 700; text-transform: uppercase;
  text-decoration: none; border-bottom: 3px solid var(--lime); padding-bottom: 1px; }
.fsg-feed-meer:hover { background: var(--lime); }

/* ---- tabs (lijst of kaart) ---------------------------------------------- */
.fsg-tabs { display: flex; gap: 0; margin-bottom: 24px; border: 2px solid var(--inkt); width: fit-content; }
.fsg-tab { border: 0; background: var(--papier); color: var(--inkt); cursor: pointer;
  font-family: var(--meet); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 10px 20px; border-right: 2px solid var(--inkt); }
.fsg-tab:last-child { border-right: 0; }
.fsg-tab.is-open { background: var(--lime); }

/* ---- changelog ---------------------------------------------------------- */
.fsg-log-dag { border-top: 2px solid var(--inkt); padding-top: 18px; margin-bottom: 34px; }
.fsg-log-datum { font-size: 22px; margin-bottom: 16px; display: flex; align-items: baseline; gap: 12px; }
.fsg-log-datum small { font-family: var(--body); font-size: 13px; font-weight: 400; text-transform: none; opacity: .55; }
.fsg-log-item { border-left: 4px solid var(--lime); padding: 2px 0 2px 16px; margin-bottom: 20px; }
.fsg-log-item h3 { font-size: 17px; margin-bottom: 6px; }
.fsg-log-item p { margin: 0 0 6px; font-size: 15px; }
.fsg-log-item ul { margin: 0 0 6px; padding-left: 18px; font-size: 15px; }
.fsg-log-item li { margin-bottom: 3px; }
.fsg-log-meta { font-family: var(--meet); font-size: 11px; text-transform: uppercase; opacity: .5; }

/* ---- notities en huisstijl op /overzicht -------------------------------- */
.fsg-notes form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-bottom: 22px; }
.fsg-notes textarea { width: 100%; max-width: 640px; padding: 12px 14px; border: 2px solid var(--inkt); font-family: var(--body); font-size: 15px; }
.fsg-notelist { list-style: none; padding: 0; display: grid; gap: 12px; }
.fsg-notelist li { border: 2px solid var(--inkt); border-left-width: 6px; padding: 12px 14px; background: var(--papier); }
.fsg-notelist li[data-status="aangevraagd"] { border-left-color: var(--m-ondergrond); }
.fsg-notelist li[data-status="live"] { border-left-color: var(--m-terrein); }
.fsg-notelist li[data-status="afgewezen"] { border-left-color: var(--lijn); opacity: .65; }
.fsg-notelist p { margin: 0 0 8px; font-size: 15px; }
.fsg-note-voet { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.fsg-note-voet span { opacity: .55; }
.fsg-note-voet select, .fsg-note-voet button { font-family: var(--meet); font-size: 11px; text-transform: uppercase;
  border: 1px solid var(--lijn); background: var(--papier); padding: 3px 8px; cursor: pointer; }
.fsg-note-voet button:hover { background: var(--lime); }

.fsg-swatches { list-style: none; padding: 0; margin: 0 0 20px; }
.fsg-swatches li { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--lijn); font-size: 13px; }
.fsg-swatches .vlak { width: 30px; height: 30px; flex: none; }
.fsg-swatches b { font-size: 11px; min-width: 116px; }
.fsg-swatches code { font-size: 11px; opacity: .7; min-width: 62px; }
.fsg-swatches small { opacity: .6; }
.fsg-logolijst { list-style: none; padding: 0; }
.fsg-logolijst li { display: flex; align-items: center; gap: 14px; padding: 10px; border-bottom: 1px solid var(--lijn); }
.fsg-logolijst li.is-donker { background: var(--inkt); }
.fsg-logolijst li.is-donker b, .fsg-logolijst li.is-donker small { color: #fff; }
.fsg-logolijst img { height: 34px; width: auto; max-width: 190px; object-fit: contain; }
.fsg-logolijst b { display: block; font-size: 11px; }
.fsg-logolijst small { opacity: .6; font-size: 12px; }

/* ---- tiktok-rij --------------------------------------------------------- */
.fsg-tiktok { margin-top: 40px; }
.fsg-tiktok h2 { font-size: 26px; margin-bottom: 8px; }
.fsg-tiktok > p { margin-bottom: 18px; }
.fsg-tiktok-rij { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fsg-tiktok-rij a { display: flex; flex-direction: column; gap: 4px; height: 100%;
  border: 2px solid var(--inkt); background: var(--papier); padding: 16px 18px 18px; text-decoration: none; color: var(--inkt);
  transition: background .15s ease; }
.fsg-tiktok-rij a:hover { background: var(--lime); }
.fsg-tiktok-noot { font-size: 20px; line-height: 1; opacity: .5; }
.fsg-tiktok-label { font-family: var(--display); text-transform: uppercase; font-size: 19px; line-height: 1.05; }
.fsg-tiktok-query { font-family: var(--meet); font-size: 11px; text-transform: uppercase; opacity: .6; }

/* ---- shopfilters -------------------------------------------------------- */
.fsg-shopfilters { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end;
  border: 2px solid var(--inkt); padding: 14px 16px; margin-bottom: 16px; background: var(--papier); }
.fsg-shopfilters label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.fsg-shopfilters label > span { font-family: var(--meet); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; opacity: .6; }
.fsg-shopfilters select { border: 1px solid var(--lijn); padding: 5px 8px; font-family: var(--body); font-size: 14px; background: var(--papier); }
.fsg-shopfilters input[type="range"] { width: 150px; accent-color: var(--inkt); }
.fsg-shopfilters b { font-size: 13px; }
.fsg-filter-reset { border: 2px solid var(--inkt); background: var(--papier); cursor: pointer;
  font-family: var(--meet); font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 7px 14px; }
.fsg-filter-reset:hover { background: var(--lime); }
.fsg-shopcount { font-family: var(--meet); font-size: 12px; text-transform: uppercase; margin-bottom: 18px; }
.fsg-shopcount small { opacity: .55; text-transform: none; font-family: var(--body); }


/* ---- hover ------------------------------------------------------------- */
/* tokens.css zet a:hover op een lime vlak. Dat werkt voor een link in een zin,
   maar een kaart is ook een link: dan wordt een foto met witte tekst ineens
   lime met witte tekst, en dat leest niet. Blokken houden hun eigen hover. */
a.fsg-card:hover, a.fsg-look-card:hover, a.fsg-next-card:hover, a.fsg-merch-card:hover,
a.shop-card:hover, a.fsg-collage-vak:hover, a.fsg-logo:hover, a.fsg-navbtn:hover,
.fsg-feed-voet h3 a:hover, .fsg-side-links a:hover, .fsg-list-cols a:hover,
.breadcrumb a:hover, .navbar-nav a:hover, .footer-logo a:hover,
.widget_services a:hover, .fsg-toc a:hover { background: transparent; }
/* Op de kaarten zelf is de hover een lichte lift, geen kleurvlak. */
a.fsg-card:hover .fsg-card-title { text-decoration: underline; text-decoration-color: var(--lime); text-decoration-thickness: 3px; }

/* ---- hero op de homepage ------------------------------------------------ */
.fsg-hero { position: relative; overflow: hidden; background: var(--inkt); }
.fsg-hero-beeld { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 40%; z-index: 0; }
/* Zwart links waar de kop staat, open rechts waar de menigte staat. Zonder dit
   verloop leest witte tekst niet op een lucht van goud. */
.fsg-hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(10,10,10,.94) 0%, rgba(10,10,10,.82) 34%, rgba(10,10,10,.45) 62%, rgba(10,10,10,.30) 100%); }
.fsg-hero > .container { position: relative; z-index: 2; }
@media (max-width: 767px) {
  /* Op een smal scherm staat de tekst over het hele beeld, dus daar mag het
     verloop donkerder. */
  .fsg-hero::after { background: linear-gradient(180deg, rgba(10,10,10,.86) 0%, rgba(10,10,10,.78) 60%, rgba(10,10,10,.9) 100%); }
}

/* ---- productrij bij een gids -------------------------------------------- */
.fsg-guide-shop { margin: 40px 0 10px; border-top: 2px solid var(--inkt); padding-top: 26px; }
.fsg-guide-shop h2 { font-size: 26px; margin-bottom: 8px; }
.fsg-guide-shop > p { margin-bottom: 20px; }

/* ---- zoekcijfers op /overzicht ------------------------------------------ */
.fsg-zoekcijfers { display: flex; flex-wrap: wrap; gap: 0; border: 2px solid var(--inkt); margin-bottom: 18px; }
.fsg-zoekcijfers > div { flex: 1 1 170px; padding: 14px 16px; border-right: 2px solid var(--inkt); }
.fsg-zoekcijfers > div:last-child { border-right: 0; }
.fsg-zoekcijfers b { display: block; font-family: var(--display); font-size: 30px; line-height: 1; }
.fsg-zoekcijfers span { display: block; margin-top: 5px; font-family: var(--meet); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

/* ---- shop de collage ---------------------------------------------------- */
/* Een collage van echte productfoto's. Klik een stuk aan en eronder verschijnt
   waar je het koopt. De achtergrond is krijt zodat productfoto's op wit niet
   in de pagina verdwijnen. */
.fsg-collageshop { margin: 10px 0 40px; }
/* Het aantal kolommen loopt mee met de breedte. Op drie kolommen over de volle
   contentbreedte werd het eerste vak (2x2) bijna 800 px hoog: dan is de collage
   geen overzicht meer maar een productpagina met een vergrootglas. */
.fsg-cs-grid { list-style: none; padding: 18px; margin: 0; background: var(--krijt);
  border: 2px solid var(--inkt); display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr); }
@media (min-width: 576px) { .fsg-cs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .fsg-cs-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 20px; } }
@media (min-width: 1200px) { .fsg-cs-grid { grid-template-columns: repeat(5, 1fr); } }
.fsg-cs-grid > li:first-child { grid-column: span 2; grid-row: span 2; }
.fsg-cs-grid a { position: relative; display: block; height: 100%; background: var(--papier);
  border: 2px solid transparent; text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.fsg-cs-grid a:hover { border-color: var(--inkt); transform: translateY(-2px); background: var(--papier); }
.fsg-cs-grid li.is-open a { border-color: var(--inkt); box-shadow: 0 0 0 4px var(--lime); }
.fsg-cs-grid img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; display: block; padding: 10px; }
.fsg-cs-cat { position: absolute; left: 8px; bottom: 8px; font-family: var(--meet); font-size: 9px;
  text-transform: uppercase; letter-spacing: .06em; background: var(--inkt); color: #fff; padding: 3px 7px; }

/* De sheet onder de collage: uitgelicht stuk, prijs, koopknop, alternatieven. */
.fsg-cs-sheet { position: relative; border: 2px solid var(--inkt); border-top: 0; padding: 22px; background: var(--papier); }
.fsg-cs-sluit { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; }
.fsg-cs-kop { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.fsg-cs-uitgelicht { width: 190px; height: 190px; object-fit: contain; background: var(--krijt);
  border: 2px solid var(--inkt); box-shadow: 0 0 0 5px var(--lime); flex: none; padding: 8px; }
.fsg-cs-kop h3 { margin: 6px 0 4px; font-size: 20px; max-width: 30ch; }
.fsg-cs-prijs { margin: 0 0 12px; }
.fsg-cs-prijs b { font-size: 20px; }
.fsg-cs-prijs span { opacity: .6; font-size: 14px; }
.fsg-cs-ook { margin: 22px 0 10px; font-size: 15px; }
.fsg-cs-alt { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fsg-cs-alt a { display: block; border: 1px solid var(--lijn); background: var(--papier); text-decoration: none; padding: 8px; }
.fsg-cs-alt a:hover { border-color: var(--inkt); background: var(--papier); }
.fsg-cs-alt img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; margin-bottom: 6px; }
.fsg-cs-alt .naam { display: block; font-size: 12px; line-height: 1.3; max-height: 2.6em; overflow: hidden; }
.fsg-cs-alt .meta { display: block; font-family: var(--meet); font-size: 10px; text-transform: uppercase; opacity: .65; margin-top: 4px; }

/* Publiceerscherm voor TikTok (/overzicht/tiktok). De blokken staan bewust als
   losse kaders onder elkaar: de review van TikTok kijkt of elke keuze zichtbaar
   apart gemaakt wordt en niet ergens in een regel verstopt zit. */
.fsg-tiktok h3 { margin: 28px 0 10px; }
.fsg-tt-account { display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--lijn); background: var(--papier); margin-bottom: 8px; }
.fsg-tt-account img { width: 56px; height: 56px; object-fit: cover; border-radius: 50%; }
.fsg-tt-keuze { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-bottom: 14px; }
.fsg-tt-kaart { display: block; width: 100%; text-align: left; padding: 8px; background: #fff;
  border: 1px solid var(--lijn); cursor: pointer; }
.fsg-tt-kaart.aan { border-color: var(--inkt); box-shadow: inset 0 0 0 2px var(--inkt); }
.fsg-tt-kaart .beelden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 8px; }
.fsg-tt-kaart .beelden img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; display: block; }
.fsg-tt-kaart b { display: block; }
.fsg-tt-tekst { border-left: 3px solid var(--lijn); padding-left: 12px; margin-bottom: 14px; }
.fsg-tt-tekst p { margin: 0 0 4px; }
.fsg-tt-blok { border: 1px solid var(--lijn); padding: 12px 14px; margin: 0 0 12px; }
.fsg-tt-blok legend { font-family: var(--meet); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; padding: 0 6px; }
.fsg-tt-blok label { display: block; margin: 4px 0; }
.fsg-tt-blok .ed-note { margin: 6px 0 0; }
.fsg-tt-sub { margin: 8px 0 0 22px; padding-left: 12px; border-left: 2px solid var(--lijn); }
.fsg-tiktok pre { background: var(--papier); border: 1px solid var(--lijn); padding: 10px; overflow-x: auto; font-size: 12px; }
.fsg-tt-code { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fsg-tt-code input { flex: 1 1 320px; padding: 9px 12px; border: 1px solid var(--lijn); font-family: var(--meet); font-size: 13px; }

/* Kaartenmaker op /overzicht/tiktok. Alles staat als losse kaders onder elkaar,
   net als de publiceerinstellingen, zodat je bij het opnemen kunt aanwijzen wat
   welke knop doet. */
.fsg-tt-stijlen { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.fsg-tt-stijl { text-align: left; padding: 10px 12px; background: #fff; border: 1px solid var(--lijn); cursor: pointer; }
.fsg-tt-stijl.aan { border-color: var(--inkt); box-shadow: inset 0 0 0 2px var(--inkt); }
.fsg-tt-stijl b { display: block; margin-bottom: 3px; }
.fsg-tt-stijl .ed-note { margin: 0; font-size: 12px; line-height: 1.35; }
.fsg-tt-blok input[type=text], .fsg-tt-blok textarea { display: block; width: 100%; margin-top: 4px;
  padding: 8px 10px; border: 1px solid var(--lijn); font: inherit; font-size: 14px; }
.fsg-tt-strip { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; }
.fsg-tt-mini { flex: 0 0 auto; width: 78px; padding: 0; border: 2px solid transparent; background: var(--papier); cursor: pointer; }
.fsg-tt-mini.aan { border-color: var(--inkt); }
.fsg-tt-mini img { display: block; width: 78px; height: 104px; object-fit: cover; }
.fsg-tt-uit { display: flex; gap: 16px; align-items: flex-start; margin: 12px 0; }
.fsg-tt-uit img { width: 200px; border: 1px solid var(--lijn); }
.fsg-tt-slides { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.fsg-tt-slide { position: relative; }
.fsg-tt-slide img { display: block; width: 128px; border: 1px solid var(--lijn); }
.fsg-tt-slide .n { position: absolute; left: 0; top: 0; background: var(--inkt); color: #fff;
  font-family: var(--meet); font-size: 12px; padding: 2px 7px; }
.fsg-tt-slide .weg { position: absolute; right: 0; top: 0; border: 0; background: var(--inkt);
  color: #fff; font-size: 12px; line-height: 1; padding: 4px 7px; cursor: pointer; }

/* De blogplanning heeft brede tabellen: laat ze binnen hun eigen kader
   schuiven in plaats van de pagina horizontaal te laten slepen. */
.fsg-tabelrol { overflow-x: auto; margin-bottom: 24px; }
.fsg-tabelrol table { margin-bottom: 0; white-space: nowrap; }
.fsg-tabelrol td:nth-child(3), .fsg-tabelrol td:nth-child(4) { white-space: normal; min-width: 180px; }