/* Componenten uit het ontwerp van 30-08-2026.
   Het bronbestand staat in stylegids/design-2026-08-30/. Wat hier staat is de
   afgeleide: dezelfde maten en kleuren, maar met onze klassenamen en zonder de
   voorbeelddata. Verander je iets aan het ontwerp, pas dan eerst de stylegids
   aan en daarna dit bestand. */

/* ---------- knoppen ------------------------------------------------------ */
.fsg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ui);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:13px;
  padding:13px 22px;border:1.5px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;
  border-radius:var(--radius);transition:.15s ease;text-decoration:none}
.fsg-btn:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.fsg-btn--lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.fsg-btn--lime:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.fsg-btn--ghost{background:transparent;color:var(--ink)}
.fsg-btn--ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.fsg-btn--onink{background:transparent;color:#fff;border-color:#fff}
.fsg-btn--onink:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.fsg-btn--limeline{background:transparent;color:var(--lime);border-color:var(--lime)}
.fsg-btn--limeline:hover{background:var(--lime);color:var(--ink)}
.fsg-btn--block{width:100%}
.fsg-btn--sm{padding:9px 14px;font-size:11px;letter-spacing:.12em}

/* ---------- sectiekoppen -------------------------------------------------- */
/* De lime streep onder de kop is met de hand getrokken, niet recht: twee
   balkjes onder een kleine hoek. */
.fsg-sec{padding:64px 0}
.fsg-sec--mist{background:var(--mist)}
.fsg-sec--tight{padding:46px 0}
.fsg-sectitle{font-family:var(--display);font-size:clamp(26px,3vw,34px);text-align:center;margin:0 0 8px;text-transform:uppercase}
.fsg-sectitle span{position:relative;z-index:0;display:inline-block;padding:0 4px}
.fsg-sectitle span::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:9px;background:var(--lime);transform:rotate(-.5deg);z-index:-1}
.fsg-sectitle span::before{content:"";position:absolute;left:2px;right:14px;bottom:5px;height:3px;background:var(--lime);opacity:.8;z-index:-1}
.fsg-secsub{text-align:center;color:var(--muted);max-width:52ch;margin:0 auto 28px}
.fsg-seceyebrow{display:block;text-align:center;font-family:var(--ui);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.fsg-sectitle + .fsg-secsub{margin-top:14px}
.fsg-secfoot{display:flex;justify-content:center;margin-top:34px}

/* ---------- hero ---------------------------------------------------------- */
.fsg-hero2{position:relative;background:var(--ink);color:#fff;min-height:480px;display:flex;align-items:center;overflow:hidden}
.fsg-hero2__media{position:absolute;inset:0}
.fsg-hero2__media img{width:100%;height:100%;object-fit:cover;display:block}
.fsg-hero2__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(11,11,11,.94) 0%,rgba(11,11,11,.72) 26%,rgba(11,11,11,.05) 55%,rgba(11,11,11,.25) 100%)}
.fsg-hero2__in{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;padding:64px 28px;
  display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:end}
.fsg-hero2__title{font-family:var(--display);font-size:clamp(46px,5.8vw,74px);line-height:.94;margin:0 0 18px;text-transform:uppercase;color:#fff}
.fsg-hero2__title em{display:block;font-style:normal;color:var(--lime);transform:skewX(-10deg);transform-origin:left;margin-top:2px}
.fsg-hero2__lead{max-width:36ch;font-size:17px;color:#EAEAE5;margin:0 0 34px}
.fsg-hero2__crumbs{margin-bottom:14px;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#B9B9B2}
.fsg-hero2__crumbs a:hover{color:var(--lime)}
.fsg-hero2__crumbs span{margin:0 8px;opacity:.5}

/* De vier badges onder de kop: geen versiering maar de belofte van de pagina. */
.fsg-badges{display:flex;gap:32px;flex-wrap:wrap}
.fsg-badge{display:flex;align-items:center;gap:10px;font-family:var(--ui);font-weight:600;font-size:12px;
  letter-spacing:.08em;line-height:1.15;text-transform:uppercase;color:#EDEDE8}
.fsg-badge svg{color:var(--lime);flex:0 0 auto}
.fsg-badge span{max-width:11ch}

/* Inhoudsopgave rechts in de hero. */
.fsg-onpage{background:rgba(11,11,11,.92);padding:18px 20px}
.fsg-onpage h2{color:var(--lime);font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);margin:0 0 12px}
.fsg-onpage ul{list-style:none;margin:0;padding:0;font-size:13.5px}
.fsg-onpage li{display:flex;align-items:center;gap:12px;padding:5px 0;color:#D6D6D0}
.fsg-onpage li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);margin-left:auto;flex:0 0 auto}
.fsg-onpage a{flex:1;text-decoration:none}
.fsg-onpage a:hover{color:#fff;background:transparent}

/* ---------- beloftebalk --------------------------------------------------- */
/* Wij verzenden niets en nemen niets retour: dit zijn onze eigen beloftes. */
.fsg-promise{background:var(--lime);padding:20px 0}
.fsg-promise__in{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}
.fsg-promise__item{display:flex;align-items:center;gap:14px;padding:4px 40px;border-right:1px solid rgba(11,11,11,.22);max-width:360px}
.fsg-promise__item:last-child{border-right:0}
.fsg-promise__item svg{flex:0 0 auto}
.fsg-promise__item b{display:block;font-family:var(--ui);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.fsg-promise__item span{display:block;font-size:13px;line-height:1.35;color:#2C2C26}

/* ---------- lookkaart ----------------------------------------------------- */
.fsg-looks{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fsg-lookcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;transition:.18s ease}
.fsg-lookcard:hover{transform:translateY(-3px);box-shadow:0 18px 38px rgba(0,0,0,.12);border-color:#D3D3CD}
.fsg-lookcard__media{position:relative;aspect-ratio:3/4;background:#1A1A18;display:block}
.fsg-lookcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fsg-lookcard__num{position:absolute;top:0;left:0;z-index:3;background:var(--lime);color:var(--ink);
  font-family:var(--display);font-size:17px;padding:5px 11px 4px}
.fsg-lookcard__tag{position:absolute;left:12px;bottom:12px;z-index:3;background:var(--lime);color:var(--ink);
  font-family:var(--ui);font-weight:700;font-size:11px;letter-spacing:.14em;padding:4px 9px;text-transform:uppercase}
.fsg-lookcard__pieces{position:absolute;right:12px;bottom:12px;z-index:3;background:rgba(11,11,11,.82);color:#fff;
  font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px}
.fsg-lookcard__body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.fsg-lookcard__name{font-family:var(--display);font-size:19px;margin:0;text-transform:uppercase}
.fsg-lookcard__line{margin:0;font-size:13.5px;line-height:1.45;color:#4A4A45}
.fsg-attrs{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.fsg-attrs li{display:flex;align-items:center;gap:6px;font-family:var(--ui);font-weight:600;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:#3A3A36;border:1px solid var(--line);padding:3px 8px}
.fsg-lookcard__foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.fsg-lookcard__prices{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.fsg-price{font-family:var(--display);font-size:17px;margin:0;text-transform:uppercase}
.fsg-price small{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--muted);margin-right:7px}
.fsg-lookcard__total{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:right}
.fsg-lookcard__total b{display:block;color:var(--ink);font-size:14px}

/* ---------- drieluik: tips, artikel, paklijst ----------------------------- */
.fsg-trio{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:28px;align-items:start;padding-bottom:58px}
.fsg-tips{background:var(--ink);color:#fff;padding:26px 24px}
.fsg-tips h2{font-family:var(--display);font-size:17px;color:var(--lime);margin:0 0 20px;text-transform:uppercase}
.fsg-tip h3{color:#fff}
.fsg-tip{display:flex;gap:12px;margin-bottom:20px}
.fsg-tip svg{color:var(--lime);flex:0 0 auto;margin-top:1px}
.fsg-tip h3{font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 4px}
.fsg-tip p{margin:0;font-size:12.5px;color:#B9B9B2;line-height:1.5}
.fsg-packing{background:var(--mist);padding:24px 22px}
.fsg-packing h2{font-family:var(--display);font-size:17px;margin:0 0 16px;text-transform:uppercase}
.fsg-packing ul{list-style:none;margin:0 0 20px;padding:0}
.fsg-packing li{display:flex;gap:12px;align-items:center;padding:9px 0;font-size:14px}
.fsg-packing svg{color:#4A4A45;flex:0 0 auto}

/* ---------- conditiestrip ------------------------------------------------- */
.fsg-cond{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.fsg-cond > div{background:var(--mist);padding:12px 14px;border-top:4px solid var(--stift,var(--line))}
.fsg-cond dt{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fsg-cond dd{margin:2px 0 0;font-family:var(--display);font-size:15px;text-transform:uppercase}
.fsg-cond > div[data-soort="weer"]{--stift:var(--m-weer)}
.fsg-cond > div[data-soort="ondergrond"]{--stift:var(--m-ondergrond)}
.fsg-cond > div[data-soort="terrein"]{--stift:var(--m-terrein)}
.fsg-cond > div[data-soort="publiek"]{--stift:var(--m-publiek)}

/* ---------- stappen ------------------------------------------------------- */
.fsg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fsg-step{border-top:3px solid var(--ink);padding-top:16px}
.fsg-step__num{font-family:var(--display);font-size:13px;letter-spacing:.16em;color:var(--lime-deep);text-transform:uppercase}
.fsg-step h3{font-family:var(--display);font-size:19px;margin:6px 0 8px;text-transform:uppercase}
.fsg-step p{margin:0;color:#4A4A45;font-size:14px}

/* ---------- usp ----------------------------------------------------------- */
.fsg-usp{background:var(--ink);color:#fff;padding:30px 0}
.fsg-usp__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.fsg-usp__item{display:flex;gap:14px;align-items:flex-start}
.fsg-usp__item svg{color:var(--lime);flex:0 0 auto;margin-top:2px}
.fsg-usp__item h4{font-family:var(--display);font-size:15px;margin:0 0 4px;text-transform:uppercase;color:#fff}
.fsg-usp__item p{margin:0;font-size:13px;color:#B9B9B2;line-height:1.4}

/* ---------- responsief ---------------------------------------------------- */
@media (max-width:1180px){
  .fsg-looks{grid-template-columns:repeat(3,1fr)}
  .fsg-trio{grid-template-columns:1fr}
  .fsg-hero2__in{grid-template-columns:1fr}
  .fsg-onpage{max-width:420px}
  .fsg-usp__grid{grid-template-columns:repeat(2,1fr)}
  .fsg-steps{grid-template-columns:1fr}
}
@media (max-width:900px){
  .fsg-promise__item{padding:0 20px;border-right:0}
  .fsg-promise__in{gap:22px}
}
@media (max-width:680px){
  .fsg-looks{grid-template-columns:repeat(2,1fr);gap:14px}
  .fsg-badges{gap:18px}
  .fsg-cond{grid-template-columns:1fr 1fr}
  .fsg-usp__grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fsg-lookcard,.fsg-btn{transition:none!important}}

/* ---------- hero op de homepage ------------------------------------------- */
/* Het zoekveld staat tussen de lede en de badges, de rechterkolom draagt daar
   het eerstvolgende festival in plaats van de inhoudsopgave. */
.fsg-hero2__zoek{max-width:440px;margin:-18px 0 26px}
.fsg-hero2__zoek .form-control,.fsg-hero2__zoek input{border-radius:var(--radius)}
.fsg-hero2__aside{background:rgba(11,11,11,.92);padding:6px}
.fsg-hero2__aside .fsg-next-card{margin:0}

/* Kaartenrijen van het thema staan in .fsg-sec net zo ruim als daarbuiten. */
.fsg-sec > .container > .row{margin-bottom:-30px}

/* ---------- hero in drie maten -------------------------------------------- */
/* Een lijstpagina hoeft geen halve schermhoogte te vullen; een detailpagina wel. */
.fsg-hero2--sm{min-height:280px}
.fsg-hero2--md{min-height:360px}
.fsg-hero2--lg{min-height:460px}
.fsg-hero2--sm .fsg-hero2__in,.fsg-hero2--md .fsg-hero2__in{padding-top:48px;padding-bottom:48px}
.fsg-hero2--sm .fsg-hero2__title{font-size:clamp(34px,4.2vw,52px)}
/* Zonder foto is er geen verloop nodig en mag de tekst op het vlak zelf staan. */
.fsg-hero2:not(.fsg-hero2--foto) .fsg-hero2__in{align-items:center}
.fsg-hero2__in:has(> :only-child){grid-template-columns:minmax(0,1fr)}

.fsg-hero2__stats{display:flex;flex-wrap:wrap;gap:34px}
.fsg-hero2__stats b{display:block;font-family:var(--display);font-size:26px;line-height:1;color:var(--lime)}
.fsg-hero2__stats span{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#C6C6C0}

.fsg-hero2__chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 0;padding:0}
.fsg-hero2__chips li a,.fsg-hero2__chips li span{display:inline-block;font-family:var(--ui);font-weight:600;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#EDEDE8;
  border:1px solid rgba(255,255,255,.34);padding:5px 11px;text-decoration:none}
.fsg-hero2__chips li a:hover{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.fsg-hero2__credit{margin:20px 0 0;font-size:11.5px;color:#9A9A94}

/* De conditiestrip hangt onder de hero, met de rand van de hero eraan vast. */
.fsg-condstrip{background:var(--paper);padding:0 0 6px}
.fsg-condstrip .fsg-cond{border-top:0}

/* ---------- sectiekop van het thema ---------------------------------------- */
/* SectionHead staat op zeventien pagina's en is links uitgelijnd. In plaats van
   die allemaal om te bouwen krijgt de bestaande markup hier het nieuwe uiterlijk:
   een klein label erboven, de kop in Anton met de lime streep eronder.
   De selector moet .section-head.style-1 .title evenaren, want het thema zet daar
   text-transform:capitalize neer en wint anders op specificiteit. */
.section-head.style-1 .sub-title,.section-head .sub-title{
  display:block;font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted)!important;margin-bottom:6px}
.section-head.style-1 .title,.section-head .title{
  font-family:var(--display);font-weight:400;font-size:clamp(24px,2.6vw,32px);line-height:.98;
  text-transform:uppercase;position:relative;z-index:0;display:inline-block;padding:0 3px}
.section-head.style-1 .title::after,.section-head .title::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:8px;background:var(--lime);
  transform:rotate(-.4deg);z-index:-1}
.section-head.text-center .title{display:inline-block}

/* ---------- seizoenslijstje ------------------------------------------------ */
/* Een genummerde lijst met een breed beeld links. De nummers zijn het punt van
   de pagina: het is een lijstje, geen zoekresultaat. */
.fsg-seizoen{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:seizoen}
.fsg-seizoen__kaart{display:grid;grid-template-columns:74px 220px minmax(0,1fr);gap:0;align-items:stretch;
  background:var(--paper);border:1px solid var(--line);text-decoration:none;transition:.16s ease}
.fsg-seizoen__kaart:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.10)}
.fsg-seizoen__nr{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--lime);
  font-family:var(--display);font-size:26px}
.fsg-seizoen__beeld{position:relative;background:#1A1A18;overflow:hidden}
.fsg-seizoen__beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fsg-seizoen__tekst{display:flex;flex-direction:column;gap:5px;padding:18px 22px}
.fsg-seizoen__naam{font-family:var(--display);font-size:22px;text-transform:uppercase;line-height:1.02}
.fsg-seizoen__plaats{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.fsg-seizoen__feiten{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px;font-family:var(--ui);
  font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#3A3A36}
.fsg-seizoen__feiten b{color:var(--ink)}
.fsg-seizoen__cta{margin-top:auto;padding-top:10px;font-family:var(--ui);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.fsg-seizoen__kaart:hover .fsg-seizoen__cta{box-shadow:inset 0 -8px 0 var(--lime)}
@media (max-width:820px){
  .fsg-seizoen__kaart{grid-template-columns:56px minmax(0,1fr)}
  .fsg-seizoen__beeld{display:none}
}

/* Chips op wit, voor de seizoenslinks op een landenpagina. */
.fsg-chips--ink{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0 0 10px;padding:0}
.fsg-chips--ink li a{display:inline-block;font-family:var(--ui);font-weight:600;font-size:12px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);
  padding:7px 13px;text-decoration:none}
.fsg-chips--ink li a:hover{background:var(--lime);border-color:var(--lime)}

/* De knopregel onder in een lookkaart. Op een festivalpagina springt hij naar
   het blok met de winkels verderop, dus hij moet als knop lezen en niet als
   sluittekst. */
.fsg-lookcard__cta{display:block;margin-top:10px;padding:10px 0;text-align:center;background:var(--ink);color:#fff;
  font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.fsg-lookcard:hover .fsg-lookcard__cta{background:var(--lime);color:var(--ink)}

/* ---------- kaartenraster -------------------------------------------------- */
/* Festivalkaarten stonden in het kolomraster van het thema. Dat is weg, en een
   grid is hier ook gewoon het juiste gereedschap: gelijke hoogtes, één regel
   voor de tussenruimte, en geen negatieve marges. */
.fsg-kaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fsg-kaarten--5{grid-template-columns:repeat(5,1fr)}
.fsg-kaarten--3{grid-template-columns:repeat(3,1fr)}
.fsg-kaart-cel{display:flex}
.fsg-kaart-cel > *{width:100%}
@media (max-width:1080px){
  .fsg-kaarten,.fsg-kaarten--5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .fsg-kaarten,.fsg-kaarten--5,.fsg-kaarten--3{grid-template-columns:repeat(2,1fr);gap:14px}
}

/* ---------- bewaren en prijzen op de lookkaart ---------------------------- */
.fsg-lookcard__save{position:absolute;top:10px;right:10px;z-index:4;width:34px;height:34px;border-radius:50%;
  border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;color:var(--ink);
  opacity:0;transform:translateY(-4px);transition:.18s ease}
.fsg-lookcard:hover .fsg-lookcard__save,.fsg-lookcard__save:focus-visible{opacity:1;transform:none}
.fsg-lookcard__save[aria-pressed="true"]{background:var(--lime);opacity:1;transform:none}
/* Op een aanraakscherm bestaat hover niet, dus daar staat hij altijd aan. */
@media (hover:none){ .fsg-lookcard__save{opacity:1;transform:none} }
.fsg-lookcard__media a{display:block;position:absolute;inset:0}
.fsg-lookcard__name a:hover{color:var(--lime-deep)}
.fsg-lookcard__note{margin:8px 0 0;font-size:11.5px;line-height:1.35;color:var(--muted)}
.fsg-lookcard__note a{border-bottom:1px solid var(--line)}
.fsg-lookcard__note a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- uitgelichte look ---------------------------------------------- */
.fsg-uitgelicht__kop{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.fsg-uitgelicht__titel{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);margin:0;text-transform:uppercase}
.fsg-uitgelicht__titel span{background:linear-gradient(transparent 72%,var(--lime) 72%)}
.fsg-uitgelicht__kop .fsg-lookcard__save{position:static;opacity:1;transform:none;background:var(--mist)}
.fsg-uitgelicht__lede{color:var(--muted);max-width:62ch;margin:0 0 26px}
.fsg-uitgelicht__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:start}

.fsg-galerij__groot{position:relative;aspect-ratio:4/5;background:#111;overflow:hidden}
.fsg-galerij__groot img{width:100%;height:100%;object-fit:cover}
.fsg-galerij__nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--ink)}
.fsg-galerij__nav:hover{background:var(--lime)}
.fsg-galerij__nav--vorige{left:12px}
.fsg-galerij__nav--volgende{right:12px}
.fsg-galerij__strip{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.fsg-galerij__strip button{border:2px solid transparent;aspect-ratio:1;overflow:hidden;background:#111}
.fsg-galerij__strip button[aria-current="true"]{border-color:var(--ink)}
.fsg-galerij__strip img{width:100%;height:100%;object-fit:cover}

.fsg-shopbox{background:#fff;border:1px solid var(--line);padding:18px}
.fsg-shopbox__kop{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.fsg-shopbox__kop h3{font-family:var(--display);font-weight:400;font-size:17px;margin:0;text-transform:uppercase}
.fsg-shopbox__kop span{font-family:var(--ui);font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.fsg-shopbox__intro{margin:0 0 14px;font-size:13.5px;color:#4A4A45}
.fsg-shopitem{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:14px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--line)}
.fsg-shopitem:last-of-type{border-bottom:0}
.fsg-shopitem__thumb{width:44px;height:44px;border:1px solid var(--line);background:var(--mist);overflow:hidden}
.fsg-shopitem__thumb img{width:100%;height:100%;object-fit:contain}
.fsg-shopitem__naam{font-family:var(--ui);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.fsg-shopitem__naam span{display:block;font-family:var(--body);font-weight:400;font-size:12px;letter-spacing:0;
  text-transform:none;color:var(--muted)}
.fsg-shopitem__prijs{font-family:var(--ui);font-weight:700;font-size:14px}
.fsg-shopitem__link{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:1px}
.fsg-shopitem__link:hover{color:var(--ink);border-color:var(--ink)}
.fsg-compleet{display:flex;align-items:center;gap:16px;background:var(--lime);padding:14px 18px;margin-top:16px;flex-wrap:wrap}
.fsg-compleet__label{font-family:var(--ui);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.fsg-compleet__label span{display:block;font-weight:600;letter-spacing:.02em;text-transform:none;font-size:11.5px;opacity:.72}
.fsg-compleet__prijs{font-family:var(--display);font-size:20px;margin-left:auto}
@media (max-width:1000px){ .fsg-uitgelicht__in{grid-template-columns:1fr} }
@media (max-width:520px){
  .fsg-compleet__prijs{margin-left:0}
  .fsg-shopitem{grid-template-columns:40px minmax(0,1fr) auto}
  .fsg-shopitem__link{grid-column:2 / -1}
}

/* ---------- nu bezig ------------------------------------------------------- */
/* Zwart met een kloppend lime stipje: dit is het enige blok op de site dat over
   vandaag gaat, en dat mag je zien. */
.fsg-nu{background:var(--ink);color:#fff;padding:34px 0 38px}
.fsg-nu__kop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.fsg-nu__kop h2{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.2vw,26px);
  text-transform:uppercase;margin:0;color:#fff}
.fsg-nu__kop p{margin:0;color:#9B9B94;font-size:14px}
.fsg-nu__stip{width:10px;height:10px;border-radius:50%;background:var(--lime);flex:0 0 auto;
  align-self:center;animation:fsg-klop 2s ease-in-out infinite}
@keyframes fsg-klop{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){.fsg-nu__stip{animation:none}}
.fsg-nu__rij{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fsg-nu__kaart{position:relative;display:block;min-height:190px;overflow:hidden;background:#1A1A18;
  border:1px solid #2A2A26;transition:.16s ease}
.fsg-nu__kaart:hover{border-color:var(--lime);transform:translateY(-2px)}
.fsg-nu__kaart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.fsg-nu__kaart:hover img{opacity:.7}
.fsg-nu__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px;height:100%;
  padding:14px 16px 16px;background:linear-gradient(180deg,rgba(11,11,11,.1),rgba(11,11,11,.9) 62%)}
.fsg-nu__dag{align-self:flex-start;background:var(--lime);color:var(--ink);font-family:var(--ui);
  font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px}
.fsg-nu__naam{margin-top:auto;font-family:var(--display);font-size:20px;line-height:1.02;text-transform:uppercase}
.fsg-nu__plaats{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#C6C6C0}
.fsg-nu__cta{margin-top:6px;font-family:var(--ui);font-weight:700;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--lime)}
@media (max-width:1080px){ .fsg-nu__rij{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .fsg-nu__rij{grid-template-columns:1fr} }

/* ---------- thema van de editie ------------------------------------------- */
/* Alleen zichtbaar als de organisatie een thema heeft aangekondigd. De bron
   staat erbij, want op een festival waar mensen hun kostuum om het thema heen
   bouwen mag hier niets verzonnen staan. */
.fsg-thema{background:var(--mist);border-top:3px solid var(--lime);padding:16px 0}
.fsg-thema .container{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.fsg-thema__label{font-family:var(--ui);font-weight:700;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.fsg-thema b{font-family:var(--display);font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.01em}
.fsg-thema__over{font-size:14px;color:#4A4A45;max-width:58ch}
.fsg-thema a{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);margin-left:auto}
.fsg-thema a:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:760px){ .fsg-thema a{margin-left:0} }

/* ---------- productkaart --------------------------------------------------- */
/* Kwam eerst uit het Pixio-thema. Zonder vaste verhouding op het beeldvak houdt
   elke productfoto zijn eigen hoogte en lopen de rijen rafelig.
   `cover` en niet `contain`: dit zijn modelfoto's die het kader vullen, en een
   grijze rand eromheen leest als een ontbrekende foto. Voor de losse
   productfoto's in de collage geldt het omgekeerde, die staan wel op contain. */
.shop-card{display:flex;flex-direction:column;height:100%;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.16s ease}
.shop-card:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.10)}
.shop-card .dz-media{position:relative;aspect-ratio:3/4;background:var(--mist);overflow:hidden}
/* Bovenaan uitlijnen: bij een 3:4-kader op een modelfoto snijdt het midden
   precies door het hoofd. Onderaan een stuk been missen valt niemand op, een
   half afgesneden gezicht wel. */
.shop-card .dz-media img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;
  display:block;background:var(--mist)}
.shop-card:hover .dz-media img{transform:scale(1.03)}
.shop-card .dz-media img{transition:transform .4s cubic-bezier(.2,.8,.3,1)}

/* De koopknop hangt over de foto, linksonder, en staat altijd aan. Hem pas bij
   hover tonen scheelt rust maar kost kliks, en dit is de knop waar de site aan
   verdient. Op een aanraakscherm bestaat hover sowieso niet. */
.shop-card .shop-meta{position:absolute;left:10px;bottom:10px;z-index:3}

.shop-card .dz-content{display:flex;flex-direction:column;gap:4px;padding:12px 13px 14px;flex:1}
.shop-card .dz-content .title{font-family:var(--ui);font-weight:600;font-size:13.5px;line-height:1.3;
  letter-spacing:.01em;text-transform:none;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.shop-card .dz-content .price{margin:auto 0 0;font-family:var(--display);font-weight:400;font-size:16px;
  text-transform:none;letter-spacing:.01em}
.shop-card .dz-content .price del{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:400}
.shop-card .product-tag{padding:0 13px 12px}
.shop-card .product-tag .badge{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}

/* ---------- prijsschuif ---------------------------------------------------- */
/* Het thema tekende dit element; zonder eigen regels valt hij terug op het
   blauw van de browser en dat is de enige blauwe vlek op de hele site. */
.fsg-shopfilters input[type="range"],.fsg-filters input[type="range"]{
  -webkit-appearance:none;appearance:none;width:170px;height:4px;background:var(--line);
  border-radius:999px;cursor:pointer;accent-color:var(--ink)}
.fsg-shopfilters input[type="range"]::-webkit-slider-thumb,
.fsg-filters input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--ink);border:3px solid var(--lime);cursor:pointer}
.fsg-shopfilters input[type="range"]::-moz-range-thumb,
.fsg-filters input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--ink);border:3px solid var(--lime);cursor:pointer}
.fsg-shopfilters input[type="range"]:focus-visible,
.fsg-filters input[type="range"]:focus-visible{outline:3px solid var(--lime);outline-offset:4px}

/* ---------- zoekresultaten ------------------------------------------------- */
/* In de hero staat de tekst op wit, en sinds de reset erft een link die kleur.
   Op het witte resultatenblok werd dat wit op wit. Kleur dus expliciet zetten,
   en niet erven: dit blok zweeft over een donkere hero maar is zelf licht. */
.fsg-hits{list-style:none;padding:0;margin:10px 0 0;max-width:640px;position:relative;z-index:5}
.fsg-hits li a{display:block;padding:11px 14px;background:var(--paper);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);margin-bottom:6px;text-decoration:none;
  box-shadow:0 10px 26px rgba(0,0,0,.16)}
.fsg-hits li a:hover{border-color:var(--ink);background:var(--lime)}
.fsg-hits li a strong{display:block;font-family:var(--ui);font-weight:600;font-size:14.5px;color:var(--ink)}
.fsg-hits small{display:block;font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);opacity:1;margin-top:2px}
.fsg-hits li a:hover small{color:#3A3A36}
/* Het "niets gevonden" bericht staat direct in de hero, dus daar juist wel wit. */
.fsg-hero2 .fsg-search > p{color:#EAEAE5}
.fsg-hits-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;max-width:none}
.fsg-hits-grid li a{box-shadow:none}

/* ---------- agenda met beeld ----------------------------------------------- */
/* De foto staat vooraan zodat je de lijst kunt scannen op wat je herkent, in
   plaats van honderd regels tekst te moeten lezen. Vaste breedte, want de
   kolommen moeten door de hele lijst gelijk lopen; zonder foto blijft de plek
   leeg in plaats van dat de regel inspringt. */
.fsg-agenda li{display:grid;grid-template-columns:104px 210px minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:10px 14px 10px 12px;border-left:4px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper)}
.fsg-agenda li:hover{background:var(--mist)}
.fsg-agenda-beeld{display:block;width:104px;aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.fsg-agenda-beeld img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.fsg-agenda li:hover .fsg-agenda-beeld img{transform:scale(1.05)}
.fsg-agenda-date strong{display:block;font-family:var(--ui);font-weight:600;font-size:14.5px;letter-spacing:.02em}
.fsg-agenda-main a{display:block;font-family:var(--display);font-weight:400;font-size:19px;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.05}
.fsg-agenda-main a:hover{color:var(--lime-deep)}
.fsg-agenda-main span{display:block;margin-top:3px;font-family:var(--ui);font-weight:600;font-size:11.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:1}
.fsg-agenda-cta{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--line);padding:8px 14px;border-radius:var(--radius);white-space:nowrap}
.fsg-agenda-cta:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width:900px){
  .fsg-agenda li{grid-template-columns:76px minmax(0,1fr);gap:12px;row-gap:4px}
  .fsg-agenda-beeld{width:76px;grid-row:span 3}
  .fsg-agenda-cta{justify-self:start}
}