/* Appointment access and contact details. */
.header { flex-wrap:nowrap; }
.header-booking { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.header-booking .header-cta { margin:0; min-height:44px; white-space:nowrap; }
.whatsapp-header { position:relative; display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; color:var(--gold); isolation:isolate; }
.whatsapp-header::before { content:""; position:absolute; inset:0; z-index:-1; border:1px solid var(--plum); border-radius:50%; background:var(--plum); transition:background-color .2s; }
.whatsapp-header:hover::before { background:var(--ink); }
.whatsapp-header svg { width:25px; height:25px; overflow:visible; }
.whatsapp-header:focus-visible { outline:2px solid var(--plum); outline-offset:3px; border-radius:50%; }
.whatsapp-header .whatsapp-bubble,.whatsapp-booking .whatsapp-bubble { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.whatsapp-header .whatsapp-phone,.whatsapp-booking .whatsapp-phone { fill:currentColor; stroke:none; }
.contact-whatsapp { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 36px; align-items:center; width:100%; padding:28px 0; margin:32px 0 0; border-block:1px solid #d9b88e55; scroll-margin-top:14px; }
.contact-whatsapp > div { grid-column:1; grid-row:1 / 3; min-width:0; }
.contact-whatsapp .eyebrow { color:var(--gold); font-size:10px; letter-spacing:.12em; }
.contact-whatsapp h3 { margin:9px 0 10px; font-size:clamp(23px,2.4vw,30px); line-height:1.16; letter-spacing:-.035em; font-weight:500; }
.contact-whatsapp > div > p:not(.eyebrow) { max-width:470px; color:#d5cfd6; font-size:14px; line-height:1.55; }
.contact .button.whatsapp-booking { grid-column:2; grid-row:1; gap:10px; align-self:end; min-height:48px; padding:13px 20px; color:var(--gold); background:transparent; border:1px solid #d9b88e99; font-size:13px; white-space:nowrap; }
.contact .button.whatsapp-booking:disabled { opacity:1; cursor:default; }
.contact .button.whatsapp-booking:disabled:hover { color:var(--gold); background:transparent; border-color:#d9b88e99; transform:none; }
.whatsapp-booking svg { width:22px; height:22px; flex:none; overflow:visible; }
.contact-whatsapp #whatsapp-status { grid-column:2; grid-row:2; align-self:start; margin:0; color:#bdb3be; font-size:11px; line-height:1.45; text-align:center; }
@media(min-width:901px) {
  .header { gap:20px; }
  .header .nav { gap:18px; }
}
@media(max-width:1024px) {
  .header { gap:10px; }
  .header-booking { margin-left:auto; gap:8px; }
  .header .menu-toggle { flex:0 0 44px; width:44px; height:44px; }
}
@media(max-width:760px) {
  .header { gap:6px; padding-inline:16px; }
  .header-booking .button.header-cta { font-size:11px; padding:10px; min-height:44px; }
  .whatsapp-header::before { inset:2px; }
  .whatsapp-header svg { width:24px; height:24px; }
  .contact-whatsapp { grid-template-columns:minmax(0,1fr); gap:8px; padding:22px 0; margin:28px 0 0; }
  .contact-whatsapp > div { grid-column:1; grid-row:1; }
  .contact-whatsapp h3 { max-width:330px; font-size:24px; margin:8px 0; }
  .contact-whatsapp > div > p:not(.eyebrow) { font-size:13px; line-height:1.5; }
  .contact .button.whatsapp-booking { grid-column:1; grid-row:2; width:100%; margin-top:9px; }
  .contact-whatsapp #whatsapp-status { grid-column:1; grid-row:3; }
}
@media(max-width:370px) { .header { padding-inline:10px; } .header-booking .button.header-cta { padding-inline:6px; } }
@media(prefers-reduced-motion:reduce) { .whatsapp-header::before { transition:none; } }

.opening-hours { scroll-margin-top:14px; }
@media(min-width:901px) and (max-width:1024px) {
 .header { height:82px; }
 .header .nav { display:none; position:absolute; top:81px; left:0; right:0; background:var(--paper); padding:20px var(--gutter); border-bottom:1px solid var(--line); max-height:calc(100svh - 82px); overflow:auto; }
 .header .nav.open { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 .header .nav a { font-size:22px; min-height:55px; }
 .header .menu-toggle { display:flex; flex-direction:column; gap:7px; align-items:center; justify-content:center; background:none; border:0; padding:0; cursor:pointer; }
 .header .menu-toggle span { width:23px; height:1px; background:var(--ink); transition:transform .2s; }
 .header .menu-toggle[aria-expanded=true] span:first-child { transform:translateY(4px) rotate(45deg); }
 .header .menu-toggle[aria-expanded=true] span:last-child { transform:translateY(-4px) rotate(-45deg); }
}

.whatsapp-floating { position:fixed; right:24px; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); z-index:25; display:grid; place-items:center; width:54px; height:54px; border:1px solid #d9b88e80; border-radius:50%; background:var(--plum); color:var(--gold); box-shadow:0 5px 20px #26173226; transition:background-color .2s, box-shadow .2s; }
.whatsapp-floating svg { width:29px; height:29px; overflow:visible; }
.whatsapp-floating .whatsapp-bubble { fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
.whatsapp-floating .whatsapp-phone { fill:currentColor; stroke:none; }
.whatsapp-floating:hover { background:var(--ink); box-shadow:0 7px 24px #26173238; }
.whatsapp-floating:focus-visible { outline:2px solid var(--plum); outline-offset:4px; }
.footer { padding-bottom:max(96px,calc(88px + env(safe-area-inset-bottom, 0px))); }
@media(max-width:760px) {
 .whatsapp-floating { right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); width:50px; height:50px; }
 .whatsapp-floating svg { width:27px; height:27px; }
}
@media(prefers-reduced-motion:reduce) { .whatsapp-floating { transition:none; } }

.contact-intro .contact-options { display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin:-6px 0 25px; color:var(--gold); font-size:20px; line-height:1.5; }
.contact-options a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.contact-options span { color:#c9c2c9; }
.contact-options a:hover { color:var(--paper); }
@media(max-width:760px) {
 .contact-intro .contact-options { justify-content:flex-start; font-size:18px; gap:6px; margin:-8px 0 23px; }
 .salon-site .hero-wide .hero-footer { padding-right:58px; }
 .salon-site .hero-wide .hero-footer .hero-scroll-note, .salon-site .hero-wide .hero-footer .hero-address { min-width:0; white-space:normal; line-height:1.4; }
}
