/* Skin: Divine (Noir 3) · Divine Manager
 * Enige design van de site. Basis staat in assets/site.css. */
.salon-hp .salon-hp-card{background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 70%,var(--bg)))}
/* Skin: Noir 3 · Salon Manager · Webbreda.nl
 * Erft alles van Noir (parent). Hier alleen de drie verbeteringen:
 *   1. hero: het eigen logo groot in beeld (geen sierwoord in Allura)
 *   2. kleine woorden boven koppen (Prijslijst, De salon, Het team, Vragen, Contact …): gewone, strakke letters, op alle pagina's
 *   3. footer: vier nette blokken, op de telefoon overzichtelijk onder elkaar
 */

/* ---------- 1. Hero: het logo zelf ---------- */
.salon-hp .n3-hero .n3-hero-logo{display:block;line-height:0;margin:0 0 clamp(14px,1.8vw,26px)}
.salon-hp .n3-hero .n3-hero-logo-img{display:block;width:min(clamp(280px,40vw,580px),var(--n3-max,580px))!important;max-width:100%!important;height:auto!important;object-fit:contain;
  filter:drop-shadow(0 0 12px color-mix(in srgb,var(--g) 40%,transparent)) drop-shadow(0 0 40px color-mix(in srgb,var(--g) 20%,transparent)) drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.salon-hp .n3-hero.has-logo .salon-hp-h1{gap:0}
.salon-hp .n3-hero.has-logo .salon-hp-h1-sub{font-size:clamp(28px,3.2vw,48px)}
/* Telefoon: rustig en op één lijn – kleine labels, logo, titel, tekst en twee even brede knoppen */
@media (max-width:760px){
  .salon-hp .n3-hero .salon-hp-hero-in{padding-top:110px;padding-bottom:28px;gap:18px}
  .salon-hp .n3-hero .salon-hp-chips{gap:8px}
  .salon-hp .n3-hero .salon-hp-chip{padding:6px 12px;font-size:13px;gap:7px}
  .salon-hp .n3-hero .n3-hero-logo{margin-bottom:16px}
  .salon-hp .n3-hero .n3-hero-logo-img{width:min(74vw,330px,var(--n3-max,330px))!important}
  .salon-hp .n3-hero .salon-hp-h1-sub{font-size:clamp(27px,7.4vw,32px);line-height:1.12}
  .salon-hp .n3-hero .salon-hp-hero-foot{gap:20px}
  .salon-hp .n3-hero .salon-hp-lead{font-size:16px;line-height:1.6}
  .salon-hp .n3-hero .salon-hp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .salon-hp .n3-hero .salon-hp-actions .salon-hp-btn{width:100%;height:52px;padding:0 12px;font-size:15px}
}

/* ---------- 2. Kleine woorden boven koppen: normaal en strak ---------- */
/* Hoge specificiteit, zodat ook de instelling "Sierletters" of een kleurenset dit niet terugzet. */
html body .salon-hp .salon-hp-kicker,
html body.salon-full .salon-hp-kicker{font:400 16px/1.4 var(--f)!important;letter-spacing:.015em!important;text-transform:none!important;text-shadow:none!important}
html body .salon-hp .salon-hp-kicker::before,
html body.salon-full .salon-hp-kicker::before{content:"";display:inline-block;width:22px;height:1px;margin:0 12px 0 0;vertical-align:middle;background:currentColor;opacity:.6;transform:translateY(-1px)}
.salon-hp .salon-hp-kicker:not(:last-child){margin-bottom:16px}
.salon-hp .salon-hp-prices-intro .salon-hp-kicker,
.salon-hp .salon-sx-hero .salon-hp-kicker,
.salon-hp .salon-bl-head .salon-hp-kicker{margin:0}
.salon-hp .salon-bl-cta .salon-hp-kicker{margin-bottom:10px}
/* Gecentreerde blokken: streepje links én rechts, zodat het woord in het midden blijft */
.salon-hp .salon-sx-cta .salon-hp-kicker::after,.salon-hp .salon-bl-cta .salon-hp-kicker::after,.salon-hp .salon-hp-reviews-in .salon-hp-kicker::after,.salon-hp .salon-stat .salon-hp-kicker::after{content:"";display:inline-block;width:22px;height:1px;margin:0 0 0 12px;vertical-align:middle;background:currentColor;opacity:.6;transform:translateY(-1px)}

/* ---------- Kaarten (zoals Noir) ---------- */
.salon-hp .salon-hp-card{background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--card) 70%,var(--bg)))}

/* ---------- 3. Footer ---------- */
.salon-hp .salon-hp-footer.n3-foot{display:block;margin-top:clamp(48px,6vw,80px);padding-top:clamp(36px,4vw,56px);border-top:1px solid color-mix(in srgb,var(--g) 22%,transparent);font-size:15px;line-height:1.6;color:var(--mut)}
.salon-hp .n3-foot p{margin:0}
.salon-hp .n3-foot-grid{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
.salon-hp .n3-foot-logo{display:inline-block;line-height:0}
.salon-hp .n3-foot .salon-hp-logo-img{max-height:76px;max-width:220px}
.salon-hp .n3-foot .salon-hp-logo-s{font-size:44px}
.salon-hp .n3-foot-status{margin-top:20px!important}
.salon-hp .n3-foot-status .salon-status{display:inline-flex;align-items:center;gap:10px;padding:0;background:none;border:0;border-radius:0;color:var(--tx);font:500 15px/1.3 var(--f);white-space:normal}
.salon-hp .n3-foot-social{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px!important}
.salon-hp .n3-foot nav.n3-foot-col{display:block}
.salon-hp .n3-foot-h{margin:0 0 14px!important;font-size:15px;font-weight:500;color:var(--g2)}
.salon-hp .n3-foot-list{display:flex;flex-direction:column;align-items:flex-start;gap:9px;font-style:normal}
.salon-hp .n3-foot a{color:var(--mut)!important;transition:color .25s}
.salon-hp .n3-foot a:hover{color:var(--tx)!important}
.salon-hp .n3-foot-mail{overflow-wrap:anywhere}
.salon-hp .n3-foot-hours{display:grid;gap:5px;margin:0;padding:0;list-style:none;max-width:300px}
.salon-hp .n3-foot-hours li{display:flex;justify-content:space-between;gap:16px;font-variant-numeric:tabular-nums}
.salon-hp .n3-foot-hours li.is-today{color:var(--tx);font-weight:500}
.salon-hp .n3-foot-hours li.is-closed span:last-child{opacity:.6}
.salon-hp .n3-foot-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;margin-top:clamp(36px,4vw,56px);padding:20px 0 4px;border-top:1px solid color-mix(in srgb,var(--tx) 9%,transparent);font-size:13.5px}
.salon-hp .n3-foot-copy,.salon-hp .n3-foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px}
.salon-hp .n3-foot .salon-hp-credit{flex-basis:auto;text-align:left;font-size:13.5px;opacity:.7}

/* Tablet: twee kolommen */
@media (max-width:1023px){
  .salon-hp .n3-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 32px}
}
/* Telefoon: alles onder elkaar, op één lijn links, met haarlijnen tussen de blokken */
@media (max-width:599px){
  .salon-hp .salon-hp-footer.n3-foot{padding-top:36px;font-size:16px}
  .salon-hp .n3-foot-grid{grid-template-columns:1fr;gap:0}
  .salon-hp .n3-foot-grid>*{padding:26px 0;border-top:1px solid color-mix(in srgb,var(--tx) 9%,transparent)}
  .salon-hp .n3-foot-grid>:first-child{padding-top:0;border-top:0}
  .salon-hp .n3-foot .salon-hp-logo-img{max-height:68px}
  .salon-hp .n3-foot-list{gap:6px}
  .salon-hp .n3-foot-list a{padding:4px 0}
  .salon-hp .n3-foot-hours{max-width:340px;gap:6px}
  .salon-hp .n3-foot-pages{display:grid;grid-template-columns:1fr 1fr;gap:6px 24px;max-width:340px}
  .salon-hp .n3-foot-bar{flex-direction:column;align-items:flex-start;gap:12px;margin-top:0;padding-top:22px}
  .salon-hp .n3-foot-copy{flex-direction:column;gap:2px}
}
/* Ruimte onder de footer voor de vaste actiebalk (Bel / WhatsApp), zodat niets eronder verdwijnt */
@media (max-width:899px){
  .salon-hp .salon-bl-foot:has(.n3-foot){padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}

/* ---------- Telefoon: knoppen in blokken en paginakoppen naast elkaar, even breed ---------- */
@media (max-width:600px){
  .salon-hp .salon-sx-cta .salon-hp-actions,.salon-hp .salon-sx-hero .salon-hp-actions,.salon-hp .salon-bl-cta .salon-hp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .salon-hp .salon-sx-cta .salon-hp-actions .salon-hp-btn,.salon-hp .salon-sx-hero .salon-hp-actions .salon-hp-btn,.salon-hp .salon-bl-cta .salon-hp-actions .salon-hp-btn{width:100%;height:52px;padding:0 10px;font-size:15px}
}