/* ==========================================================================
   TWS Actie — verjaardagsactie 15%
   Aankondigingsbalk, homepage-sectie en meldingen in het boekingssysteem.
   Mobiel-first opgezet: ~90% van de bezoekers komt via de telefoon.
   ========================================================================== */
:root{
  --tws-a-gold:#d2b77a;
  --tws-a-gold-light:#E8D5A3;
  --tws-a-gold-dark:#A68B4B;
  --tws-a-ink:#2e2216;
  --tws-a-ink-soft:#3d2e1f;
  --tws-a-cream:#FDFBF7;
  --tws-a-sand:#F1EADE;
  --tws-a-gray:#6B6B6B;
  --tws-a-line:rgba(46,34,22,.14);
  --tws-a-display:'Cormorant Garamond',Georgia,serif;
  --tws-a-body:'Montserrat',-apple-system,'Segoe UI',sans-serif;
}

/* ---------- aankondigingsbalk ----------
   De header van de site staat op position:fixed. De balk gaat er als vaste strook bovenop
   en schuift de header met een CSS-variabele omlaag; de header zelf blijft fixed, zodat de
   bestaande layout ongemoeid blijft. */
.tws-actiebalk{
  position:fixed;
  top:0;left:0;right:0;
  z-index:10001;
  display:flex;
  align-items:stretch;
  background:var(--tws-a-ink);
  border-bottom:1px solid rgba(210,183,122,.35);
}
.tws-actiebalk[hidden]{display:none}
.tws-actiebalk__link{
  flex:1 1 auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 12px;
  padding:11px 8px 11px 16px;
  text-decoration:none !important;
  font-family:var(--tws-a-body);
  line-height:1.35;
}
.tws-actiebalk__label{
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tws-a-gold) !important;
}
.tws-actiebalk__tekst{
  font-size:.82rem;font-weight:500;color:#fdfbf7 !important;
}
.tws-actiebalk__cta{
  font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tws-a-ink) !important;background:var(--tws-a-gold);
  padding:6px 12px;white-space:nowrap;
}
.tws-actiebalk__link:hover .tws-actiebalk__cta{background:var(--tws-a-gold-light)}
.tws-actiebalk__sluit{
  flex:0 0 auto;
  width:42px;
  background:none;border:0;cursor:pointer;
  color:rgba(253,251,247,.55);font-size:22px;line-height:1;
  transition:color .2s ease;
}
.tws-actiebalk__sluit:hover{color:#fdfbf7}
.tws-actiebalk__sluit:focus-visible{outline:2px solid var(--tws-a-gold);outline-offset:-3px}
@media (max-width:600px){
  .tws-actiebalk__link{padding:9px 4px 9px 12px;gap:4px 8px}
  .tws-actiebalk__label{font-size:.6rem;letter-spacing:.12em}
  .tws-actiebalk__tekst{font-size:.76rem}
  .tws-actiebalk__cta{font-size:.6rem;padding:5px 9px}
  .tws-actiebalk__sluit{width:36px;font-size:20px}
}

/* Header en mobiel menu schuiven precies de hoogte van de balk omlaag. */
.tws-heeft-actiebalk .tws-header{top:var(--tws-actiebalk-h,0px) !important}
.tws-heeft-actiebalk .tws-mobile-nav{top:calc(80px + var(--tws-actiebalk-h,0px)) !important}
.tws-heeft-actiebalk .tws-header-spacer{height:calc(80px + var(--tws-actiebalk-h,0px)) !important}
@media (max-width:480px){
  .tws-heeft-actiebalk .tws-mobile-nav{top:calc(70px + var(--tws-actiebalk-h,0px)) !important}
  .tws-heeft-actiebalk .tws-header-spacer{height:calc(70px + var(--tws-actiebalk-h,0px)) !important}
}
/* ankers niet onder de balk laten verdwijnen */
.tws-heeft-actiebalk .tws-actie{scroll-margin-top:calc(100px + var(--tws-actiebalk-h,0px))}

/* ---------- homepage-sectie ---------- */
.tws-actie{
  background:var(--tws-a-cream);
  border-top:1px solid var(--tws-a-line);
  border-bottom:1px solid var(--tws-a-line);
  padding:44px 0;
  scroll-margin-top:90px;
}
.tws-actie .tws-actie__binnen{
  max-width:1160px;margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1fr;gap:28px;align-items:center;
}
/* z-index:0 maakt een eigen stapelcontext, zodat de gouden lijn achter de foto
   maar vóór de achtergrond van de sectie valt (zelfde detail als bij de hero). */
.tws-actie .tws-actie__beeld{position:relative;z-index:0}
.tws-actie .tws-actie__beeld img{
  display:block;width:100%;height:auto;
  border:1px solid var(--tws-a-line);
  box-shadow:0 14px 40px rgba(46,34,22,.14);
}
.tws-actie .tws-actie__beeld::after{
  content:'';position:absolute;inset:14px -14px -14px 14px;
  border:1px solid var(--tws-a-gold);z-index:-1;
}
.tws-actie .tws-actie__tekst{font-family:var(--tws-a-body)}
.tws-actie .tws-actie__badge{
  display:inline-block;
  background:var(--tws-a-gold);color:var(--tws-a-ink);
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  padding:8px 14px;margin-bottom:16px;
}
.tws-actie .tws-actie__titel{
  font-family:var(--tws-a-display) !important;
  font-weight:500 !important;
  font-size:clamp(2.1rem,6vw,3.2rem) !important;
  line-height:1.08 !important;letter-spacing:-.01em;
  color:var(--tws-a-ink) !important;
  margin:0 0 14px !important;text-wrap:balance;
}
.tws-actie .tws-actie__intro{
  font-size:1.02rem;line-height:1.65;color:var(--tws-a-ink) !important;
  font-weight:500;margin:0 0 12px !important;max-width:56ch;
}
.tws-actie .tws-actie__body{
  font-size:.95rem;line-height:1.72;color:var(--tws-a-gray) !important;
  margin:0 0 22px !important;max-width:58ch;
}
.tws-actie .tws-actie__periode{
  display:flex;flex-direction:column;gap:3px;
  border-left:3px solid var(--tws-a-gold);
  background:#fff;border-top:1px solid var(--tws-a-line);border-right:1px solid var(--tws-a-line);border-bottom:1px solid var(--tws-a-line);
  padding:14px 18px;margin:0 0 22px;
}
.tws-actie .tws-actie__periode-label{
  font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--tws-a-gray);
}
.tws-actie .tws-actie__periode-datum{
  font-family:var(--tws-a-body);font-size:1.12rem;font-weight:700;color:var(--tws-a-ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.tws-actie .tws-actie__knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.tws-actie .tws-actie__knop{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 28px;
  font-family:var(--tws-a-body) !important;font-size:.78rem !important;font-weight:700 !important;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none !important;
  border-radius:0;transition:background .3s ease,color .3s ease,transform .3s ease;
}
.tws-actie .tws-actie__knop--goud{background:var(--tws-a-gold);color:var(--tws-a-ink) !important;border:1.5px solid var(--tws-a-gold)}
.tws-actie .tws-actie__knop--goud:hover{background:var(--tws-a-gold-light);border-color:var(--tws-a-gold-light);transform:translateY(-2px)}
.tws-actie .tws-actie__knop--rand{background:transparent;color:var(--tws-a-ink) !important;border:1.5px solid var(--tws-a-ink)}
.tws-actie .tws-actie__knop--rand:hover{background:var(--tws-a-ink);color:#fff !important}
.tws-actie .tws-actie__klein{font-size:.78rem;color:var(--tws-a-gray) !important;margin:0 !important}

@media (min-width:860px){
  .tws-actie{padding:64px 0}
  .tws-actie .tws-actie__binnen{grid-template-columns:minmax(0,0.85fr) minmax(0,1fr);gap:56px}
}
@media (max-width:600px){
  .tws-actie{padding:34px 0}
  .tws-actie .tws-actie__binnen{padding:0 18px;gap:22px}
  .tws-actie .tws-actie__beeld::after{display:none}
  .tws-actie .tws-actie__knop{width:100%;padding:15px 20px}
}

/* ---------- boekingssysteem ---------- */
#sln-salon .tws-actie-melding{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--tws-a-cream);
  border:1px solid var(--tws-a-line);
  border-left:3px solid var(--tws-a-gold);
  padding:14px 18px;margin:0 0 22px;
}
#sln-salon .tws-actie-melding__badge{
  flex:0 0 auto;
  background:var(--tws-a-gold);color:var(--tws-a-ink);
  font-family:var(--tws-a-body);font-size:.78rem;font-weight:700;letter-spacing:.02em;
  padding:6px 10px;font-variant-numeric:lining-nums;
}
#sln-salon .tws-actie-melding__tekst{
  font-family:var(--tws-a-body);font-size:.85rem;line-height:1.6;color:var(--tws-a-ink-soft);
}
#sln-salon .tws-actie-melding strong{color:var(--tws-a-ink);font-weight:700}

#sln-salon .tws-actie-melding--kort{padding:10px 14px;margin-bottom:16px}
#sln-salon .tws-actie-melding--kort .tws-actie-melding__badge{padding:4px 8px;font-size:.72rem}
#sln-salon .tws-actie-melding--kort .tws-actie-melding__tekst{font-size:.8rem}

#sln-salon .tws-actie-legenda{
  display:flex;align-items:center;gap:9px;
  font-family:var(--tws-a-body);font-size:.76rem;color:var(--tws-a-gray);
  margin:14px 0 2px;padding:0 4px;
}
#sln-salon .tws-actie-legenda__stip{
  width:9px;height:9px;border-radius:50%;background:var(--tws-a-gold);flex:0 0 auto;
}
/* kortingsregel in het overzicht: goud en met een minteken, zodat het voordeel opvalt */
#sln-salon .sln-summary-row--discount .sln-data-val,
#sln-salon .sln-summary-row--discount #sln_discount_value{
  color:var(--tws-a-gold-dark) !important;
  font-weight:700 !important;
}
#sln-salon .sln-summary-row--discount #sln_discount_value::before{content:'\2212 '}
#sln-salon .sln-summary-row--discount .sln-data-desc .label{color:var(--tws-a-gold-dark) !important}

#sln-salon .tws-actie-gekozen{
  font-family:var(--tws-a-body);font-size:.85rem;line-height:1.6;
  color:var(--tws-a-ink);background:rgba(210,183,122,.16);
  border-left:3px solid var(--tws-a-gold);
  padding:12px 16px;margin:0 0 6px;
}
#sln-salon .tws-actie-gekozen strong{font-weight:700}

@media (max-width:600px){
  #sln-salon .tws-actie-melding{padding:12px 14px;gap:10px}
  #sln-salon .tws-actie-melding__tekst{font-size:.8rem}
}

@media (prefers-reduced-motion:reduce){
  .tws-actie__knop,.tws-actiebalk__cta{transition:none !important}
}