/*
Theme Name:   Britt Jacobs
Theme URI:    https://brittjacobsstyle.com
Description:  Childthema van Hello Elementor voor Britt Jacobs — Personal Stylist. Merkletters lokaal (geen Google Fonts), de merkgids als CSS-variabelen, en de omschakeling tussen de dames- en de mannentak.
Author:       Alina Design Studio
Author URI:   https://alinadesign.be
Template:     hello-elementor
Version:      1.9.49
Text Domain:  brittjacobs
Tags:         elementor
*/

/* ---------------------------------------------------------------
   1 · Merkletters — lokaal geladen
   De bestanden staan in /fonts/ van dit thema. Niets wordt bij
   Google opgehaald, dus er gaat geen IP-adres van een bezoeker
   naar een server buiten de EER.
   --------------------------------------------------------------- */

@font-face{font-family:"Cormorant Garamond";src:url("fonts/cg-300.woff2")  format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cg-300i.woff2") format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cg-400.woff2")  format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cg-400i.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cg-500.woff2")  format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("fonts/jost-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------------------------------------------------------------
   2 · Merkgids
   Exact dezelfde namen en waarden als in de opgeleverde site, zodat
   CSS die daaruit overgenomen wordt hier zonder aanpassing werkt.
   Geen kleuren buiten deze lijst.
   --------------------------------------------------------------- */

:root{
  /* vast — overal gelijk */
  --pearl:#F8F7F4;        /* hoofdgrond */
  --wit:#FFFFFF;          /* plaatjes, kaarten, specregel */
  --greige:#E6DFD6;       /* haarlijnen, grond van voet en banen */
  --charcoal:#2E2D2B;     /* alle tekst, labels */

  /* vast — de twee takken expliciet, voor waar de kleur niet mag wisselen */
  --rose-ink-vast:#8E6A69;
  --blue-ink-vast:#5F7494;
  --deep-rose-vast:#B08585;
  --deep-blue-vast:#7B8CA6;
  --ballerina-vast:#E8D5D2;
  --powder-vast:#D3DCE8;

  /* van de tak — damesversie is de standaard */
  --rose-ink:#8E6A69;     /* knoppen, links, lijnen, bovenkoppen */
  --ballerina:#E8D5D2;    /* accentvlakken */
  --deep-rose:#B08585;    /* cijfers van de stappen, kleine accenten */

  /* letters */
  --ff-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ff-text:"Jost","Helvetica Neue",Arial,sans-serif;

  /* graad */
  --t-titel:clamp(38px,4.6vw,56px);
  --t-pagina:clamp(30px,3.1vw,40px);
  --t-sectie:clamp(23px,2.2vw,28px);
  --t-body:clamp(16px,1.2vw,18px);
  --t-klein:16px;
  --t-label:14px;

  /* maat */
  --maxw:1280px;
  --gutter:clamp(20px,5vw,80px);
  --measure:63ch;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------------
   3 · De mannentak
   Drie variabelen wisselen van waarde; de rest van de opmaak blijft
   letterlijk hetzelfde. De klasse komt uit functions.php — zet daar
   de slugs van de mannenpagina's in.
   --------------------------------------------------------------- */

body.tak-heren{
  --rose-ink:#5F7494;     /* Blue Ink */
  --ballerina:#D3DCE8;    /* Powder */
  --deep-rose:#7B8CA6;    /* Deep Blue */

  /* En dezelfde omslag voor Elementor zelf. «Accent» is een van de vier
     vaste kleurvariabelen van Elementor; alles wat in Site Settings op
     Accent staat — knoppen, links, lijnen — wisselt hiermee mee, zonder
     dat er één element aangeraakt wordt.

     Dit stond tot nu in Aanvullende CSS van de Customizer. Nu het hier
     staat: dat veld leeghalen, anders staat dezelfde regel op twee
     plekken en is over een maand niet meer te zien welke geldt. */
  --e-global-color-accent:#5F7494;
}

/* ---------------------------------------------------------------
   4 · Basis
   Alleen wat Elementor niet zelf zet. Graad en kleur van koppen en
   knoppen horen in Site Settings — anders staan er straks twee
   plekken waar hetzelfde geregeld wordt.
   --------------------------------------------------------------- */

body{
  background-color:var(--pearl);
  color:var(--charcoal);
  font-family:var(--ff-text);
  /* Light 300, zoals de huidige opgeleverde vormgeving. De notitie van
     21 september noemt 400; die is door een latere ronde achterhaald. */
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-display);
  font-weight:300;
  color:var(--charcoal);
  text-wrap:balance;
}

/* Browserafstanden weg. dd staat er bewust bij: die heeft een
   margin-inline-start van 40px, waardoor de tekst in de specregel
   naast zijn eigen label komt te staan. */
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dt,dd{margin:0}

.elementor-widget-text-editor p{max-width:var(--measure)}

/* Cijfers: in stapnummers bovenkast, in prijzen onderkast. */
.bj-stapnummer{font-variant-numeric:lining-nums}
.bj-prijs{font-variant-numeric:oldstyle-nums}

a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--charcoal);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------------------------------------------------------------
   5 · Kop en voet
   Overgenomen uit de opgeleverde vormgeving, regel voor regel.
   Alleen wat niet meer kon blijven staan, is aangepast; dat staat
   er met de reden bij. De kleuren komen uit de merkgids hierboven,
   dus op een mannenpagina wisselt de kop mee zonder extra regel.
   --------------------------------------------------------------- */

/* Wat de opgeleverde site boven aan haar stylesheet zette, maar dan
   alleen binnen kop en voet. Buiten die twee blijft Elementor de baas.

   De reden om dit niet aan Site Settings over te laten: een link zonder
   eigen kleur is in elke browser blauw met een streep eronder. Staat de
   linkkleur in Elementor niet ingevuld — of wordt die later per ongeluk
   leeggemaakt — dan staat het hele menu blauw. Hier kan dat niet. */

.site-head *,.drawer *,.site-foot *{box-sizing:border-box}
.site-head a,.drawer a,.site-foot a{color:inherit;text-decoration:none}
.site-head img,.site-foot img{max-width:100%}
.site-foot ul,.drawer ul{list-style:none;padding:0;margin:0}
.site-foot p,.site-foot h3,.site-foot ul,.drawer p{margin:0}

/* ---------------------------------------------------------------
   Elementor buiten de deur houden — ook bij aanwijzen
   ---------------------------------------------------------------
   Site Settings van Elementor stuurt regels uit op `a` én op
   `a:hover`, met een kit-klasse ervoor: `.elementor-kit-9 a:hover`.
   Dat weegt zwaarder dan een gewone `.nav a`, dus bij aanwijzen nam
   Elementor de kleur, de graad én het gewicht over — het menu-item
   werd groter en rose.

   Daarom staat hier per plek wat de letter is, in rust én bij
   aanwijzen, met genoeg gewicht om te blijven staan. Wat wél mag
   veranderen bij aanwijzen — het streepje in het menu, de rose
   kleur in het uitklapmenu en in de voet — staat verderop en
   verandert alleen de kleur, nooit de graad.
   --------------------------------------------------------------- */

.site-head .nav a,.site-head .nav a:hover,.site-head .nav a:focus,
.site-head .mob-cart,.site-head .mob-cart:hover,.site-head .mob-cart:focus{
  font-family:var(--ff-text);font-size:var(--t-label);font-weight:500;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:inherit;
}

/* De winkelmand staat als enige in het menu in rose. `:visited` staat er
   met opzet bij: een bezochte link telt in CSS zwaarder dan een gewone,
   dus zonder deze regel werd de mand zwart zodra je er één keer geweest
   was — en alleen dan. Daarom stond hij op de ene computer rose en op de
   andere zwart. */
.site-head .nav a.cart,.site-head .nav a.cart:link,.site-head .nav a.cart:visited,
.site-head .nav a.cart:hover,.site-head .nav a.cart:focus{color:var(--rose-ink)}

/* De burger is een <button>, en Site Settings van Elementor geeft élke
   knop op de site een vlak, een kleur, binnenruimte en ronde hoeken.
   Daar werd dit drie streepjes in een rose blokje van. */
.site-head .mob-tools .burger,
.site-head .mob-tools .burger:hover,
.site-head .mob-tools .burger:focus{
  background:none;background-color:transparent;border:0;border-radius:0;
  box-shadow:none;padding:0 2px;color:var(--charcoal);
}

.site-head .submenu a,.site-head .submenu a:hover,.site-head .submenu a:focus{
  font-family:var(--ff-text);font-size:13px;font-weight:400;font-style:normal;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
}
.site-head .submenu a{color:var(--charcoal)}
.site-head .submenu a:hover,.site-head .submenu a:focus{color:var(--rose-ink)}
.site-head .sm-foot a,.site-head .sm-foot a:hover,.site-head .sm-foot a:focus{color:var(--rose-ink)}

.drawer nav a,.drawer nav a:hover,.drawer nav a:focus{
  font-family:var(--ff-display);font-size:clamp(28px,8vw,38px);font-weight:300;font-style:normal;
  letter-spacing:normal;text-transform:none;text-decoration:none;color:inherit;
}
.drawer .sub a,.drawer .sub a:hover,.drawer .sub a:focus{
  font-family:var(--ff-text);font-size:13px;font-weight:400;
  letter-spacing:.08em;text-transform:uppercase;
}
.drawer .drawer-cta,.drawer .drawer-cta:hover,.drawer .drawer-cta:focus{
  font-family:var(--ff-text);font-size:var(--t-label);font-weight:400;font-style:normal;
  letter-spacing:.13em;text-transform:uppercase;color:var(--wit);
}

.site-foot .foot-cols a,.site-foot .foot-cols a:hover,.site-foot .foot-cols a:focus{
  font-family:var(--ff-text);font-size:var(--t-klein);font-weight:400;font-style:normal;
  letter-spacing:normal;text-transform:none;text-decoration:none;
}
.site-foot .foot-cols a{color:inherit}
.site-foot .foot-cols a:hover,.site-foot .foot-cols a:focus{color:var(--rose-ink)}

/* Een nog niet bestaande pagina hoort grijs te staan. In de voet werd dat
   verderop weer overschreven door de doorzichtigheid van .foot-cols a,
   waardoor een ontbrekende pagina er precies zo uitzag als een gewone
   link — het tegenovergestelde van de bedoeling. */
.site-foot .foot-cols .is-leeg{opacity:.4}

/* Overslaan naar de inhoud. Stond niet in het concept — daar was
   elke pagina een tabblad. Op een echte site hoort hij erbij. */
.bj-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--charcoal);color:var(--wit);
  font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;padding:12px 20px;
}
.bj-skip:focus{left:0}

/* Pagina's die kop en voet gebruiken staan in de breedte van de
   merkgids; de binnenruimte is dezelfde als in het concept. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- Kop ---------- */

.site-head{
  position:sticky;top:0;z-index:70;background:var(--pearl);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease);
}
.site-head .wrap{position:relative}
.site-head.stuck{border-bottom-color:var(--greige)}

.head-in{
  padding-block:clamp(18px,2.2vw,28px);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}

.woordmerk{display:block;line-height:0}
.wm-lockup{display:block;width:clamp(244px,19vw,268px);height:auto}

/* In het concept stond het kale woordmerk als inline svg. Hier is het
   een los bestand, dus het is een <img> en heeft `height:auto` nodig —
   anders rekt de browser hem op zijn eigen verhouding uit. */
.wm-plain{display:none;width:clamp(132px,11vw,158px);height:auto}

.nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);flex-wrap:wrap}
.nav a,.nav .is-leeg{
  position:relative;font-size:var(--t-label);font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;padding-block:11px;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:7px;height:1px;
  background:var(--rose-ink);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .35s var(--ease);
}
.nav a:hover::after,.nav a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.nav .cart{color:var(--rose-ink)}

/* De pagina waar je op staat houdt zijn streepje. In het concept kon
   dat niet — daar bestond «de huidige pagina» niet. */
.nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}

/* Een pagina die nog niet bestaat staat er als tekst, niet als link.
   Zo komt er nergens een adres dat niets opent, en bij de controle
   valt het op. In de beheeromgeving staat de lijst met slugs. */
.nav .is-leeg,.submenu .is-leeg,.drawer .is-leeg,.foot-cols .is-leeg{
  opacity:.4;cursor:default;
}

/* Mobiel menu. De merkgids toont op mobiel het kale woordmerk plus een burger. */
.mob-tools{display:none;align-items:center;gap:16px}
.burger{
  width:44px;height:44px;display:grid;align-content:center;gap:6px;justify-items:end;
  background:none;border:0;padding:0 2px;cursor:pointer;
}
.burger span{display:block;width:26px;height:1px;background:var(--charcoal);transition:transform .35s var(--ease),width .35s var(--ease)}
.burger span:last-child{width:18px}
.burger[aria-expanded="true"] span{width:26px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

body.locked{overflow:hidden}

/* display:flex zou het hidden-attribuut overschrijven en de hele pagina blokkeren. */
.drawer[hidden]{display:none}
.drawer{
  position:fixed;inset:0;z-index:60;background:var(--pearl);
  display:flex;flex-direction:column;justify-content:flex-start;gap:6px;
  padding:clamp(28px,8vw,56px);padding-top:96px;
  overflow-y:auto;
}
/* 1.9.46 — het menu staat in het midden zolang het past, en begint
   bovenaan zodra het niet past. Met `justify-content:center` schoof
   een te lang menu naar twee kanten uit beeld: de bovenste regel
   («Services») kwam achter de kop te liggen en was niet meer naar
   beneden te rollen. Gemeten op 375 x 667 en 360 x 640 — een iPhone in
   Safari houdt ook maar zo'n 660 punten hoogte over. Een automatische
   marge wordt nooit negatief, dus zo kan er niets meer wegvallen. */
.drawer>:first-child{margin-top:auto}
.drawer>:last-child{margin-bottom:auto}
.drawer nav{display:flex;flex-direction:column}
.drawer nav a,.drawer nav .is-leeg{
  font-family:var(--ff-display);font-size:clamp(28px,8vw,38px);line-height:1.5;
  text-decoration:none;border-bottom:1px solid var(--greige);padding-block:10px;
  opacity:0;transform:translateY(16px);
}
.drawer.open nav a,.drawer.open nav .is-leeg{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.drawer.open nav > :nth-child(1){transition-delay:.06s}
.drawer.open nav > :nth-child(2){transition-delay:.12s}
.drawer.open nav > :nth-child(3){transition-delay:.18s}
.drawer.open nav > :nth-child(4){transition-delay:.24s}
.drawer.open nav > :nth-child(5){transition-delay:.3s}

/* In het concept had het zesde item geen vertraging: de winkelmand
   stond er meteen terwijl de rest nog invloog. Eén regel erbij. */
.drawer.open nav > :nth-child(6){transition-delay:.36s}

.drawer.open nav .is-leeg{opacity:.4}

/* In de lade staat de winkelmand in Cormorant, en die zet cijfers op
   onderkast: «Cart (0)» leest dan als «Cart (o)». Een telling is een
   getal, dus bovenkast — dezelfde regel als bij de stapnummers. */
.drawer .bj-mand-telling{font-variant-numeric:lining-nums}

.drawer-cta{align-self:flex-start;margin-top:clamp(26px,6vw,40px);opacity:0;transform:translateY(16px)}
.drawer.open .drawer-cta{opacity:1;transform:none;transition:opacity .5s var(--ease) .36s,transform .5s var(--ease) .36s}

/* In de mobiele lade staan de zes gewoon onder Services. */
.drawer .sub{display:grid;margin:-2px 0 10px}
.drawer .sub a,.drawer .sub .is-leeg{
  font-family:var(--ff-text);font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  border-bottom:0;padding-block:7px;opacity:.85;
}

/* Servicesmenu. Zes pagina's achter één woord — zonder uitklap moet je
   eerst naar Services om te zien wat er te koop is. */
.has-menu{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:8px}
.nav-top .chev{
  width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);
}
.has-menu.open .nav-top .chev{transform:rotate(-135deg) translate(-1px,-1px)}

.submenu[hidden]{display:none}
.submenu{
  position:absolute;top:calc(100% + 1px);left:50%;transform:translateX(-50%);z-index:40;
  background:var(--pearl);border:1px solid var(--greige);
  box-shadow:0 24px 46px -32px rgba(46,45,43,.5);
  padding:clamp(20px,2vw,28px);width:min(92vw,620px);
  opacity:0;translate:0 -6px;transition:opacity .25s var(--ease),translate .25s var(--ease);
}
.submenu.open{opacity:1;translate:0 0}
.submenu-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px)}

.sm-cat{
  font-family:var(--ff-display);font-size:19px;line-height:1.25;
  min-height:3.1em;padding-bottom:10px;margin-bottom:8px;border-bottom:1px solid var(--greige);
  display:flex;justify-content:space-between;gap:10px;align-items:flex-end;
}
.sm-cat em{
  font-style:normal;font-size:13px;color:var(--rose-ink);
  white-space:nowrap;line-height:1.6;
}
.submenu a,.submenu .is-leeg{
  display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--charcoal);padding-block:7px;
  transition:color .25s var(--ease),transform .25s var(--ease);
}
.submenu a:hover,.submenu a:focus-visible{color:var(--rose-ink);transform:translateX(3px)}
.sm-foot{
  grid-column:1/-1;display:flex;gap:26px;flex-wrap:wrap;
  margin-top:4px;padding-top:14px;border-top:1px solid var(--greige);
}
.sm-foot a{color:var(--rose-ink)}

/* ---------- Knoppen ---------- */
/* Alleen de knop in de mobiele lade heeft deze regels nodig; de knoppen
   op de pagina's komen uit Site Settings van Elementor. */

.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--ff-text);font-size:var(--t-label);font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;text-decoration:none;background:var(--rose-ink);color:var(--wit);
  padding:15px 30px;border:1px solid var(--rose-ink);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--charcoal);border-color:var(--charcoal);color:var(--wit)}
.arw{display:inline-block;transition:transform .35s var(--ease)}
.btn:hover .arw,.btn:focus-visible .arw{transform:translateX(5px)}

/* Voortgangslijn onder de kop — laat zien hoe lang de pagina nog is. */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--rose-ink);opacity:.55;z-index:2}

/* ---------- Voet ---------- */

.site-foot{background:var(--greige);color:var(--charcoal);padding-block:clamp(44px,5vw,70px) clamp(24px,2.6vw,34px)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(28px,4vw,64px);align-items:start}
.foot-mono{display:block;width:clamp(96px,8vw,116px);height:auto;margin-bottom:22px}
.foot-claim{font-size:var(--t-klein);opacity:.8;max-width:30ch}

.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,40px)}
.foot-cols h3{font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink);margin-bottom:14px;font-family:var(--ff-text);font-weight:400}
.foot-cols ul{list-style:none;padding:0;margin:0}
.foot-cols li{padding-block:5px;border-top:1px solid rgba(46,45,43,.14)}
.foot-cols li:first-child{border-top:0}
.foot-cols a,.foot-cols .is-leeg{display:inline-block;font-size:var(--t-klein);text-decoration:none;opacity:.9;transition:opacity .25s var(--ease),transform .3s var(--ease)}
.foot-cols a:hover,.foot-cols a:focus-visible{opacity:1;transform:translateX(3px);color:var(--rose-ink)}

.pay{margin-top:26px}
.pay .lbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink);margin-bottom:10px}
.pay ul{display:flex;gap:10px;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.pay li{display:flex;align-items:center;justify-content:center;background:var(--pearl);border:1px solid rgba(46,45,43,.2);min-width:76px;height:32px;padding-inline:11px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75;white-space:nowrap}

.foot-creds{margin-top:26px;padding-top:18px;border-top:1px solid rgba(46,45,43,.16)}
.foot-creds .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--rose-ink);margin-bottom:10px}
.foot-creds ul{
  display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:var(--wit);padding:12px 16px;list-style:none;margin:0;
}
.foot-creds img{display:block;width:auto}
.foot-creds .b-iasc{height:36px}
.foot-creds .b-sc{height:60px}

.foot-bottom{margin-top:clamp(28px,3.2vw,44px);padding-top:18px;border-top:1px solid rgba(46,45,43,.2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;opacity:.72}

/* ---------- Omslagpunten ---------- */
/* Twee punten, net als in de opgeleverde site. Niet meer: elke extra
   breedte is een extra ding dat kan breken. */

@media (max-width:900px){
  .wm-lockup{display:none}
  .wm-plain{display:block}
  .nav{display:none}
  .mob-tools{display:flex}
  .head-in{flex-wrap:nowrap}
  .foot-top{grid-template-columns:1fr}
}

@media (max-width:560px){
  .foot-cols{grid-template-columns:1fr}
  .head-in{gap:14px}
}

/* ---------------------------------------------------------------
   6 · Hulpklassen voor de dienstpagina's
   Banden over de volle breedte krijgen hun kleur hier, niet in
   Elementor. Reden: een kleur die je in Elementor invult is een
   vaste waarde en wisselt niet mee op een mannenpagina. Via deze
   klassen komt de kleur uit de tak, dus Ballerina wordt vanzelf
   Powder zodra <body> de klasse tak-heren draagt.
   --------------------------------------------------------------- */

.bj-baan-ballerina{background-color:var(--ballerina)}
.bj-baan-greige{background-color:var(--greige)}
.bj-baan-wit{background-color:var(--wit)}
.bj-baan-pearl{background-color:var(--pearl)}

/* Lijn boven een rij, in de kleur van de tak. */
.bj-lijn-accent{border-top:1px solid var(--rose-ink)}
.bj-lijn-greige{border-top:1px solid var(--greige)}

/* Deel 7 — de opmaak van de dienstpagina's — staat in css/opmaak.css. */

/* ---------- Vaste koopbalk ----------
   Onderaan een dienstpagina, en pas zodra de knop in de hero uit beeld
   is. Hij staat in het thema en niet in de pagina: zo is hij er op alle
   zes de pagina's tegelijk, en haalt hij zijn prijs uit hetzelfde
   artikel als de knop erboven. Staat het artikel er nog niet, dan draagt
   de knop de klasse «is-leeg» en is hij zichtbaar inactief — geen dode
   link die wel echt lijkt. */

.stickybuy{position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--pearl);border-top:1px solid var(--greige);
  transform:translateY(101%);visibility:hidden;
  transition:transform .36s var(--ease),visibility 0s linear .36s;
  box-sizing:border-box}
/* 1.9.46 — `visibility` erbij. De balk stond alleen uit beeld geschoven;
   de knop erin bleef met Tab te bereiken terwijl niemand hem zag. */
.stickybuy.on{transform:translateY(0);visibility:visible;
  transition:transform .36s var(--ease),visibility 0s}
.stickybuy *{box-sizing:border-box}
.stickybuy-in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-block:12px;flex-wrap:wrap;
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.stickybuy .what{font-family:var(--ff-text);font-size:var(--t-label);
  font-weight:400;letter-spacing:.1em;text-transform:uppercase}
.stickybuy .right{display:flex;align-items:center;gap:18px}
.stickybuy .p{font-family:var(--ff-display);font-size:24px;line-height:1}
.stickybuy .btn{display:inline-flex;align-items:center;gap:10px;
  padding:12px 24px;background:var(--rose-ink);color:#fff;
  font-family:var(--ff-text);font-size:14px;font-weight:400;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  border:1px solid var(--rose-ink)}
/* Bij het aanwijzen mag alleen de kleur veranderen.
   Site Settings zet in Elementor onder «Link · Hover» ook lettertype,
   korps en gewicht; die gelden dan voor elke <a> op de site, dus ook
   voor deze knop — die sprong bij het aanwijzen van 14 naar 18 px.
   De dubbele klasse weegt zwaarder dan `.elementor-kit-N a:hover`, zodat
   de knop zijn eigen maat houdt wat er in Site Settings ook staat. */
.stickybuy .btn.btn:hover{background:var(--charcoal);border-color:var(--charcoal);
  color:#fff;font-family:var(--ff-text);font-size:14px;font-weight:400;
  line-height:normal;letter-spacing:.13em}
.stickybuy .btn .arw{display:inline-block;transition:transform .35s var(--ease)}
.stickybuy .btn:hover .arw{transform:translateX(5px)}
.stickybuy .btn.is-leeg{opacity:.45;cursor:default}

@media (max-width:560px){
  /* Op een telefoon telt alleen de knop; de naam van de analyse staat
     al bovenaan het scherm. */
  .stickybuy .what{display:none}
  .stickybuy-in{justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  .stickybuy{transition:none}
}

/* ---------------------------------------------------------------
   9 · Winkelmand en afrekenen

   WooCommerce bouwt deze twee pagina's uit blokken, met eigen opmaak
   die los staat van het thema. Letter en tekstkleur erfden al goed —
   wat overbleef zijn de knoppen, de velden en de ronde hoeken.

   De knop «Proceed to Checkout» kwam standaard in leisteengrijs met
   antracietgrijze letters erop: nauwelijks te lezen, en geen kleur uit
   de merkgids. Alle knoppen krijgen hier dezelfde vorm als de rest van
   de site: rechthoekig, kapitaal, met de letterafstand van de knoppen
   op de dienstpagina's.

   De kleuren komen uit de themavariabelen, dus ook hier wisselt alles
   mee naar de blauwe tak.
   --------------------------------------------------------------- */

.wc-block-components-button,
.pwgc-apply-gift-card-button{
  background:var(--rose-ink) !important;
  border:1px solid var(--rose-ink) !important;
  color:#fff !important;
  border-radius:0 !important;
  font-family:var(--ff-text) !important;
  font-size:14px !important;
  font-weight:400 !important;
  letter-spacing:.13em !important;
  text-transform:uppercase !important;
  padding:14px 24px !important;
  box-shadow:none !important;
  /* De knop in de mand is een <a>, dus hij kreeg het onderstreepje
     van gewone links mee. */
  text-decoration:none !important;
  transition:background .32s var(--ease),border-color .32s}

/* De bloktekst zit in een eigen span met een eigen kleur. */
.wc-block-components-button__text{color:inherit !important}

.wc-block-components-button:hover,
.pwgc-apply-gift-card-button:hover{
  background:var(--charcoal) !important;
  border-color:var(--charcoal) !important}

/* Invoervelden: rechte hoeken en een haarlijn in greige, zoals elk
   kader op de site. Bij focus kleurt de lijn mee met de tak. */
.wc-block-components-text-input input,
.wc-block-components-combobox input,
.wc-block-components-textarea{
  border:1px solid var(--greige) !important;
  border-radius:0 !important;
  background:var(--wit) !important;
  font-family:var(--ff-text) !important}

.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus,
.wc-block-components-textarea:focus{
  border-color:var(--rose-ink) !important;
  box-shadow:none !important}

/* De plus-min-kiezer in de mand. */
.wc-block-components-quantity-selector{
  border:1px solid var(--greige) !important;
  border-radius:0 !important}

/* ---------------------------------------------------------------
   10 · De productpagina van de cadeaubon

   Vijf van de zes analyses sturen door naar hun dienstpagina; de
   cadeaubon houdt haar eigen pagina, want daar kiest de klant het
   bedrag. Die pagina komt uit het klassieke sjabloon van WooCommerce
   en niet uit blokken — vandaar een eigen blok regels.

   Wat eruit gaat: de regel «SKU / Category» en het tabblad met
   beoordelingen. Die horen niet bij een persoonlijke dienst.
   --------------------------------------------------------------- */

.single-product .product_meta,
.single-product .woocommerce-tabs{display:none !important}

/* Het klassieke sjabloon zet de galerij en de samenvatting naast
   elkaar met float. Het tabbladenblok eronder was wat die zwevers
   weer opving; nu dat verborgen is, zakte de doos eromheen naar nul
   hoogte en schoof de voettekst dwars door de pagina heen.
   `flow-root` laat de doos haar eigen zwevers weer omsluiten.
   Nagemeten op 1600 px: hoogte 0 → 808, voet van 275 naar 1083. */
.single-product div.product{display:flow-root !important}

.single-product .woocommerce-breadcrumb{
  font-size:13px !important;letter-spacing:.06em;
  color:var(--charcoal) !important;opacity:.55}

.single-product .summary .price,
.single-product .summary .price .amount{
  color:var(--charcoal) !important;
  font-family:var(--ff-display) !important;
  font-size:28px !important}

/* Meldingen van WooCommerce («toegevoegd aan je mand») in de huisstijl
   in plaats van het grijze kader met de groene stip. */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--pearl) !important;
  border:1px solid var(--greige) !important;
  color:var(--charcoal) !important;border-radius:0 !important}
.woocommerce-message::before,.woocommerce-info::before{
  color:var(--rose-ink) !important}

/* De knoppen van het klassieke sjabloon. De dubbele klasse weegt
   zwaarder dan de regels van WooCommerce zelf, die met een
   :where()-selector werken en daardoor nauwelijks gewicht hebben —
   maar de knopkleur komt bij sommige installaties ook uit de
   Site Settings van Elementor; staat hij na het bijwerken nog paars,
   dan zit hij daar. */
.single-product .single_add_to_cart_button.single_add_to_cart_button,
.woocommerce .button.button.alt,
.woocommerce-message .button.button,
.woocommerce-info .button.button{
  background:var(--rose-ink) !important;
  border:1px solid var(--rose-ink) !important;
  color:#fff !important;border-radius:0 !important;
  font-family:var(--ff-text) !important;font-size:14px !important;
  font-weight:400 !important;letter-spacing:.13em !important;
  text-transform:uppercase !important;padding:14px 24px !important;
  box-shadow:none !important;text-decoration:none !important}

.single-product .single_add_to_cart_button.single_add_to_cart_button:hover,
.woocommerce .button.button.alt:hover,
.woocommerce-message .button.button:hover{
  background:var(--charcoal) !important;border-color:var(--charcoal) !important}

.single-product .quantity input,
.single-product .summary select,
.single-product table.variations select{
  border:1px solid var(--greige) !important;border-radius:0 !important;
  font-family:var(--ff-text) !important;padding:10px 12px !important;
  background:var(--wit) !important}

/* De knop «Preview» van de cadeaubon is een tweede keus naast
   «In de mand», dus hij krijgt de open vorm: lijn in greige,
   tekst in antraciet. */
.single-product .pwgc-email-preview-button.pwgc-email-preview-button{
  background:transparent !important;
  border:1px solid var(--greige) !important;
  color:var(--charcoal) !important;border-radius:0 !important;
  font-family:var(--ff-text) !important;font-size:13px !important;
  font-weight:400 !important;letter-spacing:.13em !important;
  text-transform:uppercase !important;padding:12px 20px !important;
  box-shadow:none !important}
.single-product .pwgc-email-preview-button.pwgc-email-preview-button:hover{
  border-color:var(--charcoal) !important}

/* De labels van de bonvelden in de letter van de site. */
.single-product .pwgc-label{
  font-family:var(--ff-text) !important;font-size:13px !important;
  font-weight:500 !important;letter-spacing:.1em !important;
  text-transform:uppercase !important;color:var(--charcoal) !important}
.single-product .pwgc-input-text,
.single-product .pwgc-field-container textarea{
  border:1px solid var(--greige) !important;border-radius:0 !important;
  font-family:var(--ff-text) !important;background:var(--wit) !important}

/* ---------------------------------------------------------------
   11 · Mand en afrekenen op een telefoon
   De blokken van WooCommerce dragen de klasse «alignwide»: die laat
   een blok breder worden dan de tekstkolom, met een negatieve marge
   links. Op een smal scherm is er niets om uit te breken, maar de
   marge bleef staan — gemeten op 393 px: het blok begon op −70 en
   alles erin schoof mee naar links uit beeld. De pagina zelf werd
   niet breder, dus er was ook geen zijdelingse schuifbalk die het
   verraadde; de tekst was gewoon afgesneden.
   --------------------------------------------------------------- */

@media (max-width:900px){
  .wp-block-woocommerce-cart,
  .wp-block-woocommerce-checkout{
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    max-width:100% !important}
}


/* ===============================================================
   1.9.46 · De pagina's die niet in Elementor staan
   ---------------------------------------------------------------
   Mand, afrekenen, Mijn account en «niet gevonden» komen uit het
   sjabloon van Hello Elementor. Dat geeft ze 10 px zijmarge en geen
   ruimte boven of onder: de tekst stond tegen de kop en tegen de
   voet aan, en op de 404-pagina tegen de linkerrand van het scherm.
   Hier krijgen ze dezelfde breedte en dezelfde goot als de rest.
   =============================================================== */
/* `body` en de dubbele klasse staan er om Hello Elementor te overstemmen:
   dat zet de zijmarge met `body:not([class*=elementor-page-]) .site-main`
   en een vaste breedte per schermmaat. */
body.woocommerce-cart .site-main.site-main,
body.woocommerce-checkout .site-main.site-main,
body.woocommerce-account .site-main.site-main,
body.error404 .site-main.site-main{
  max-width:var(--maxw);width:100%;margin-inline:auto;box-sizing:border-box;
  padding:clamp(34px,5vw,72px) var(--gutter) clamp(48px,6vw,90px)}

.bj-404 .lbl{font-size:var(--t-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rose-ink);margin-bottom:14px}
.bj-404 h1{font-size:var(--t-pagina);line-height:1.15;margin-bottom:18px}
.bj-404 .tekst{font-size:var(--t-klein);line-height:1.65;max-width:46ch;
  margin-bottom:clamp(26px,3vw,36px)}
.bj-404 .rij{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.bj-404 .rij a.btn,.bj-404 .rij a.btn:hover,.bj-404 .rij a.btn:focus{
  color:var(--wit);text-decoration:none}
.bj-404 .rij a:not(.btn),.bj-404 .rij a:not(.btn):hover,
.bj-404 .rij a:not(.btn):focus{color:var(--charcoal);text-decoration:none;
  border-bottom:1px solid var(--rose-ink);padding-bottom:3px;
  font-size:var(--t-label);letter-spacing:.08em;text-transform:uppercase}


/* ===============================================================
   1.9.49 · Een analyse die vol zit
   ---------------------------------------------------------------
   De koopknop blijft staan maar doet niets meer, en eronder komt de
   zin van Britt. Zie inc/plaatsen.php.
   =============================================================== */
a[href="#bj-vol"]{pointer-events:none;opacity:.42;cursor:default}
.bj-volregel{font-family:var(--ff-text);font-size:var(--t-klein);line-height:1.5;
  color:var(--rose-ink);letter-spacing:.02em;margin:14px 0 0;max-width:40ch}
.stickybuy .vol{font-family:var(--ff-text);font-size:var(--t-label);line-height:1.35;
  color:var(--rose-ink);letter-spacing:.04em;max-width:28ch;text-align:right}
.wc-block-components-product-low-stock-badge{display:none !important}