/* PLUMBING_V 1 — reset tecnico canonico (Toolkit/boilerplate/plumbing.css) */
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ══════════ CRAZY HAIR — parrucchiere, estetica e solarium, Largo Anselmo Guerrieri Gonzaga 1 ══════════
   Il logo: l'ovale nero col bordo oro e le forbici oro con la corona. L'insegna: «CRAZY HAIR» in serif nero inclinato, la testa di
   donna coi capelli al vento, «Parrucchiere» in corsivo oro. Le foto stanno in ovali col filo oro, come il logo. La firma è la chioma
   al vento (_crh_firma.mjs). Playfair Display per nome e titoli, Allura per il corsivo, Figtree per il testo. */
:root {
  --crema: #F4EFE6;
  --bianco: #FFFFFF;
  --nero: #141210;
  --nero-2: #2A2520;
  --oro: #C9A24B;
  --oro-chiaro: #E6CB8A;
  --oro-scuro: #7A5C17;
  --inchiostro: #1C1916;
  --grigio: #5C554C;
  --linea: #DDD5C7;
  --aperto: #2F9E44;
  /* le cifre da Figtree («CRH Cifre», solo 0–9): Playfair Display ha i numeri in stile antico (zero-check) */
  --f-titoli: 'CRH Cifre', 'Playfair Display', Georgia, serif;
  --f-corsivo: 'Allura', 'Segoe Script', cursive;
  --f-testo: 'Figtree', Arial, sans-serif;
  --gutter: 16px;
  --testata-h: 66px;
}
@media (min-width: 760px) { :root { --gutter: 24px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--inchiostro); font: 400 1.08rem/1.65 var(--f-testo); font-variant-numeric: lining-nums; background: var(--crema); }
a { color: var(--nero); }
b, strong { font-weight: 500; }
.salta { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: #fff; color: #111; text-decoration: none; }
.salta:focus { top: 10px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
section[id] { scroll-margin-top: calc(var(--testata-h) + 14px); }
.intero { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--nero); outline-offset: 2px; }
.capitolo--nero :focus-visible, .frase :focus-visible, .piede :focus-visible, .action-bar :focus-visible, #lightbox :focus-visible { outline-color: var(--oro-chiaro); }
/* finché i caratteri non arrivano il ripiego è più largo: una parola lunga va a capo invece di uscire (riserva-check, #233) */
h1, h2, h3 { overflow-wrap: anywhere; }

/* ── l'occhiello: le maiuscole dell'insegna ── */
.occhiello { margin: 0 0 12px; font: 600 .9rem/1.4 var(--f-testo); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-scuro); }
.capitolo--nero .occhiello { color: var(--oro); }

/* ── la testata ── */
.testata { position: sticky; top: 0; z-index: 50; background: var(--crema); box-shadow: 0 1px 0 var(--linea); }
.testata__dentro { display: flex; align-items: center; gap: 10px; max-width: 1280px; margin: 0 auto; padding: 6px var(--gutter); min-height: 62px; }
.marchio { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--nero); text-decoration: none; }
.marchio__ovale { flex: none; width: 60px; height: 40px; }
.marchio__nome { font: italic 700 1.45rem/1.1 var(--f-titoli); white-space: nowrap; }
.voci { display: none; }
.testata__azioni { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.lingue { display: flex; }
.lingue button { min-width: 34px; min-height: 38px; padding: 1px 5px 0; border: 1px solid var(--nero); background: transparent; color: var(--nero); font: 400 .92rem var(--f-testo); cursor: pointer; }
.lingue button + button { border-left: 0; }
.lingue button.is-on { background: var(--nero); color: #FFFFFF; }
.chiama { display: none; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--nero); color: #FFFFFF; font: 500 1rem var(--f-testo); text-decoration: none; }
.chiama:hover { background: var(--nero-2); }
.burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--nero); background: transparent; cursor: pointer; }
.burger span { display: block; height: 2px; background: var(--nero); transition: transform .2s, opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-mobile { position: fixed; top: var(--testata-h); left: 0; right: 0; z-index: 49; max-height: calc(100vh - var(--testata-h)); overflow-y: auto; padding: 10px var(--gutter) 22px; background: var(--crema); box-shadow: 0 12px 24px rgba(0, 0, 0, .14); }
.menu-mobile a { display: block; padding: 12px 2px 10px; border-bottom: 1px solid var(--linea); color: var(--nero); font: 400 1.3rem/1.25 var(--f-titoli); text-decoration: none; }
.menu-mobile__tel { display: flex !important; justify-content: center; gap: 8px; margin-top: 14px; border: 0 !important; border-radius: 999px; background: var(--nero); color: #FFFFFF !important; padding: 13px 8px !important; font-family: var(--f-testo) !important; }

/* ── l'apertura ── */
.apertura { display: grid; gap: 34px; padding: 38px var(--gutter) 60px; background: var(--crema); }
.apertura__titolo { margin: 0; font: italic 700 clamp(3.4rem, 2rem + 5.6vw, 6.2rem)/1 var(--f-titoli); color: var(--nero); letter-spacing: -.01em; }
.apertura__corsivo { margin: -4px 0 14px; font: 400 clamp(2.4rem, 1.7rem + 2.6vw, 3.6rem)/1.15 var(--f-corsivo); color: var(--oro-scuro); }
.apertura__dove { margin: 0 0 16px; font-size: 1.12rem; color: var(--grigio); }
.apertura__frase { max-width: 32em; margin: 0 0 24px; font-size: 1.16rem; }
/* voto e stato sempre su due righe: lo stato scritto dal JS è più lungo di quello statico (firma-posto) */
.apertura__riga { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.voto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; }
.voto__n { font: 400 2.2rem/1 var(--f-titoli); color: var(--nero); }
.voto__su { font-size: 1.02rem; }
.stato { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 1.02rem/1.4 var(--f-testo); }
.stato::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.stato.is-aperto::before { opacity: 1; background: var(--aperto); box-shadow: 0 0 0 3px rgba(47, 158, 68, .25); }
.apertura__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.bottone { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border: 2px solid var(--nero); border-radius: 999px; background: transparent; color: var(--nero); font: 500 1.04rem/1.1 var(--f-testo); text-align: center; text-decoration: none; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.bottone--pieno { background: var(--nero); color: #FFFFFF; }
.bottone--pieno:hover { background: var(--nero-2); border-color: var(--nero-2); }
.bottone--vuoto:hover { background: var(--nero); color: #FFFFFF; }
.apertura__foto { margin: 0; }
.apertura__foto { max-width: 520px; justify-self: center; }
/* le foto in ovale col filo oro, come il logo */
.ovale { overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 3px var(--oro), 0 0 0 9px var(--crema), 0 0 0 11px var(--nero); }
.apertura__foto figcaption, .storia__foto figcaption { margin-top: 20px; text-align: center; }
figure { margin: 0; }
figcaption { margin-top: 10px; font-size: 1rem; line-height: 1.45; color: var(--grigio); }
.foto { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.foto img { display: block; width: 100%; height: auto; }

/* ── i capitoli ── */
.capitolo { padding: 64px max(var(--gutter), calc((100% - 1180px) / 2)) 62px; }
.capitolo--chiaro { background: var(--crema); }
.capitolo--argento { background: var(--argento); }
.capitolo--nero { background: var(--nero); color: #FFFFFF; }
.capitolo__titolo { max-width: 22em; margin: 0 0 16px; font: 400 clamp(2rem, 1.35rem + 2.3vw, 3.1rem)/1.15 var(--f-titoli); color: var(--nero); text-wrap: balance; }
.capitolo--nero .capitolo__titolo { color: #FFFFFF; }
.capitolo__intro { max-width: 42em; margin: 0 0 28px; font-size: 1.12rem; }
.capitolo__nota { max-width: 46em; margin: 26px 0 0; color: var(--grigio); }

/* i lavori: le chiome viste da dietro */
.lavori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.lavoro { margin: 0; }
.lavoro .foto { border-radius: 999px 999px 10px 10px; overflow: hidden; }
.lavoro .foto img { aspect-ratio: 4 / 5; height: auto; object-fit: cover; }
.lavoro figcaption { text-align: center; font: italic 400 1.04rem/1.4 var(--f-titoli); color: var(--inchiostro); }

/* la chioma */
.chioma { display: grid; gap: 30px; align-items: center; }
.chioma-fig { margin: 0; -webkit-user-select: none; user-select: none; }
.chioma-fig > svg { max-width: 560px; margin: 0 auto; border-radius: 8px; box-shadow: 0 0 0 3px var(--oro), 0 14px 30px rgba(0, 0, 0, .4); }
.chioma__didascalia { max-width: 32em; min-height: 3em; margin: 16px auto 0; font-size: 1rem; line-height: 1.5; text-align: center; color: var(--oro-chiaro); }
.chioma__d { display: none; }
.chioma-fig[data-modo="0"] .chioma__d[data-m="0"], .chioma-fig[data-modo="1"] .chioma__d[data-m="1"] { display: inline; }
.chioma__modi { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.chioma__modi button { min-height: 44px; padding: 0 24px; border: 2px solid var(--oro); border-radius: 999px; background: transparent; color: #FFFFFF; font: 600 1.02rem/1.1 var(--f-testo); cursor: pointer; }
.chioma__modi button:hover { background: rgba(201, 162, 75, .18); }
.chioma__modi button[aria-pressed="true"] { background: var(--oro); color: var(--nero); }
/* senza JS il modo non cambia: i bottoni restano nascosti col loro posto (#240) */
.no-js .chioma__modi { visibility: hidden; }

/* i servizi */
.servizi { display: grid; gap: 18px; }
.servizio { margin: 0; padding: 20px 22px 16px; background: var(--bianco); border-top: 3px solid var(--oro); box-shadow: 0 1px 0 var(--linea); }
.servizio__nome { margin: 0 0 8px; font: italic 700 1.45rem/1.25 var(--f-titoli); color: var(--nero); }
.servizio p { margin: 0; }
.unghie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 640px; margin: 30px 0 0; padding: 0; list-style: none; }
.unghie figure { margin: 0; }
.unghie .foto { border-radius: 50%; overflow: hidden; }
.unghie figcaption { text-align: center; }

/* chi siamo */
.capitolo--bianco { background: var(--bianco); }
.storia { display: grid; gap: 34px; align-items: center; }
.storia__testo > p { max-width: 36em; }
.storia__foto { max-width: 360px; justify-self: center; }
.insegna { margin: 40px 0 0; }
.insegna .foto { border-radius: 6px; overflow: hidden; }

/* recensioni */
.voti { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: -4px 0 28px; }
.voto--sezione { margin: 0; }
.recensioni { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.recensione { margin: 0; padding: 20px 22px 16px; border-left: 3px solid var(--oro); background: var(--bianco); }
.recensione__testo { margin: 0; font-size: 1.04rem; line-height: 1.6; overflow-wrap: anywhere; }
.recensione__chi { margin: 12px 0 0; font-size: 1rem; line-height: 1.4; color: var(--grigio); }
.recensione__chi b { display: block; color: var(--inchiostro); font: italic 700 1.06rem/1.3 var(--f-titoli); }
.dicono__nota { max-width: 48em; margin: 22px 0 0; font-size: 1rem; color: var(--grigio); }

/* orari e strada */
.orari-riga { display: grid; gap: 30px; align-items: start; }
.indirizzo { margin: 0 0 20px; }
.indirizzo div { display: grid; grid-template-columns: 7.4em minmax(0, 1fr); gap: 10px; padding: 9px 0 7px; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.indirizzo dt { font: 400 1rem/1.6 var(--f-testo); color: var(--oro-chiaro); }
.indirizzo dd { margin: 0; overflow-wrap: anywhere; }
.capitolo--nero a { color: #FFFFFF; }
.dove__azioni { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.capitolo--nero .bottone { border-color: #FFFFFF; color: #FFFFFF; }
.capitolo--nero .bottone--pieno { background: var(--oro-chiaro); border-color: var(--oro-chiaro); color: var(--inchiostro); }
.capitolo--nero .bottone--pieno:hover { background: #FBDDB6; border-color: #FBDDB6; }
.capitolo--nero .bottone--vuoto:hover { background: #FFFFFF; color: var(--nero); }
.orario { max-width: 460px; padding: 20px 22px; background: var(--crema); color: var(--inchiostro); }
.orario__titolo { margin: 0 0 8px; font: 400 1.35rem/1.3 var(--f-titoli); color: var(--nero); }
.giorno { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 8px 7px; border-bottom: 1px solid var(--linea); }
.giorno:last-child { border-bottom: 0; }
.giorno__nome { font-size: 1.04rem; }
.giorno__ore { margin-left: auto; white-space: nowrap; font: 500 1rem/1.5 var(--f-testo); }
.giorno.is-today { background: rgba(232, 137, 43, .2); }
.orario .stato { margin-top: 14px; }
.orari__nota { margin: 12px 0 0; color: var(--grigio); }
.cartina { margin-top: 34px; overflow: hidden; background: var(--crema); color: var(--inchiostro); }
.capitolo--nero .cartina a { color: var(--inchiostro); }
.cartina iframe { display: block; width: 100%; height: 380px; border: 0; }
/* in Figtree sotto i 15 px gli accenti di «è» e «ò» spariscono (accenti-check): la nota della mappa a 16 px */
.cartina .mappa-clic__nota { font-size: 1rem; }

/* le domande */
.domande { max-width: 760px; border-top: 1px solid var(--linea); }
.domanda { border-bottom: 1px solid var(--linea); }
.domanda summary { position: relative; padding: 16px 34px 12px 2px; font: 400 1.16rem/1.4 var(--f-titoli); cursor: pointer; list-style: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font: 400 1.6rem/1 Arial, sans-serif; color: var(--nero); }
.domanda[open] summary::after { content: '−'; }
.domanda p { max-width: 40em; margin: 0 0 16px; }

/* ── la chiusura ── */
.piede { background: var(--nero-2); color: #EDE6F3; }
.piede__dentro { max-width: 900px; margin: 0 auto; padding: 50px var(--gutter) 100px; text-align: center; }
.piede__logo { display: grid; justify-items: center; gap: 4px; margin: 0 0 20px; }
.piede__ovale { width: 96px; height: 64px; }
.piede__nome { font: italic 700 2rem/1.1 var(--f-titoli); color: #FFFFFF; }
.piede__sotto { font: 400 2rem/1 var(--f-corsivo); color: var(--oro-chiaro); }
.piede__riga { margin: 0 0 8px; overflow-wrap: anywhere; }
.piede__dove, .piede__orario { margin: 0 0 8px; overflow-wrap: anywhere; }
.piede a { color: #FFFFFF; }
.piede__cred { max-width: 54em; margin: 18px auto 10px; font-size: 1rem; color: #DCD0E6; }
.freccia { font-family: Arial, sans-serif; }

/* ── reveal (plumbing) ── */
.js .reveal { opacity: 0; }
.js .reveal.in-view { opacity: 1; }
html:not(.js) .reveal { opacity: 1; }
.reduced-motion .reveal { opacity: 1 !important; }

/* ── la barra e la lightbox ── */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: 1fr 1fr; background: var(--nero-2); box-shadow: 0 -1px 0 rgba(255, 255, 255, .12); transform: translateY(110%); transition: transform .25s; }
.action-bar.is-visible { transform: translateY(0); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-height: 54px; color: #FFFFFF; font: 500 1.06rem var(--f-testo); text-decoration: none; }
.action-bar a:first-child { background: var(--oro-chiaro); color: var(--inchiostro); }
#lightbox { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(26, 16, 34, .95); }
#lightbox[hidden] { display: none !important; }
#lightbox img { width: auto; max-width: min(1400px, 100%); max-height: 88vh; }
#lightboxClose { position: absolute; top: 14px; right: 16px; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .6); border-radius: 50%; background: transparent; color: #fff; font-size: 32px; line-height: 1; cursor: pointer; }

/* ── le larghezze ── */
@media (max-width: 379px) {
  .testata__dentro { gap: 6px; }
  .lingue button { min-width: 31px; }
  .marchio__ovale { width: 54px; height: 36px; }
  .bottone { padding: 0 16px; }
  .indirizzo div { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
/* sul telefono il nome nella testata toccava i bottoni della lingua: resta l'ovale (il nome è subito sotto, nel titolo) */
@media (max-width: 519px) {
  .marchio__nome { display: none; }
}
@media (min-width: 560px) {
  .chiama { display: inline-flex; }
  .servizi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .action-bar { display: none; }
  .piede__dentro { padding-bottom: 54px; }
  .recensioni { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .lavori { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .storia { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
@media (min-width: 960px) {
  .apertura { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: 56px; padding: 54px max(var(--gutter), calc((100% - 1200px) / 2)) 68px; }
  .servizi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chioma { grid-template-columns: minmax(0, .8fr) minmax(0, 560px); gap: 50px; }
  .recensioni { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .orari-riga { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 50px; }
}
@media (min-width: 1060px) {
  .testata__dentro { gap: 16px; }
  .voci { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-left: 26px; }
  .voci a { padding: 4px 1px 2px; color: var(--nero); font: 400 1.04rem var(--f-titoli); text-decoration: none; }
  .voci a:hover, .voci a[aria-current="true"] { color: var(--nero-2); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; }
  .burger { display: none; }
}

/*CHIOMA*/
/* la chioma — generata da _crh_firma.mjs: non modificare a mano */
.chioma__svg { display: block; width: 100%; height: auto; overflow: hidden; }
.ch-fondo { fill: #F2EFEA; }
.ch-fascia { fill: #DCD7CF; }
.ch-testa { fill: #141210; }
.ch-ciocca { fill: none; stroke: #1E1715; stroke-linecap: round; }
.ch-colore { fill: none; stroke-linecap: round; }
.modo--miele .ch-colore { stroke: #C99A5B; }
.modo--ciliegia .ch-colore { stroke: #C2183A; }
.ch-riflesso { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 2.6; stroke-linecap: round; }
.chioma-fig[data-modo="0"] .modo:not([data-m="0"]) { display: none; }
.chioma-fig[data-modo="1"] .modo:not([data-m="1"]) { display: none; }
.firma-attesa .ch-ciocca, .firma-attesa .ch-colore, .firma-attesa .ch-luce { opacity: 0; }
/*/CHIOMA*/

/*MAPPACLIC*/
/* la mappa Google si carica solo al clic (giro privacy 1/10/2026) */
.mappa-clic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: var(--mappa-h, 320px); box-sizing: border-box; padding: 24px; text-align: center; background: repeating-linear-gradient(0deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, rgba(127, 127, 127, 0.14) 0 1px, transparent 1px 28px); }
.mappa-clic__velo { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 32em; }
.mappa-clic__btn { display: inline-block; padding: 0.75em 1.4em; border: 2px solid currentColor; border-radius: 999px; color: inherit; font: inherit; font-weight: 600; line-height: 1.2; text-decoration: none; background: transparent; cursor: pointer; }
.mappa-clic__btn:hover, .mappa-clic__btn:focus-visible { text-decoration: underline; }
.mappa-clic__nota { margin: 0; font-size: 0.85em; line-height: 1.45; }
/*/MAPPACLIC*/