/*
 * Ciasa Valongia — foglio di stile principale.
 *
 * Base: il CSS del mockup approvato, riportato senza riscritture. In coda le
 * correzioni necessarie al passaggio in produzione: contrasto, classi di
 * WordPress e accessibilità da tastiera.
 *
 * Nessun framework, nessun preprocessore: si modifica questo file.
 */

/* ============================================================
   CIASA VALONGIA — mockup navigabile
   Direzione: "Enrosadira" — grigi dolomitici freddi, blu notte
   di valle, e il rosa dell'alpenglow come unico accento caldo.
   ============================================================ */
:root{
  --roc:      #18222B;   /* ombra dolomitica: nav, footer, sezioni scure */
  --roc-2:    #223040;   /* superficie scura */
  --nef:      #F3F5F6;   /* neve: fondo pagina */
  --nef-pure: #FFFFFF;
  --pera:     #D7DCDE;   /* pietra: bordi */
  --pera-2:   #EDF0F1;   /* pietra chiara: superfici */
  --scur:     #5C6B75;   /* testo secondario */
  --enros:    #D9536B;   /* enrosadira: accento */
  --enros-d:  #B33F55;
  --larsc:    #8C6B45;   /* larice */
  --bosch:    #2F5145;   /* loden */

  --f-disp: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Inter Tight", -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --wrap: 1180px;
  --r: 4px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--nef); color:var(--roc);
  font-family:var(--f-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;cursor:pointer;}
:focus-visible{outline:2px solid var(--enros); outline-offset:3px;}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums;}

h1,h2,h3,h4{font-family:var(--f-disp); font-weight:700; line-height:1.05; margin:0; letter-spacing:-0.02em;}
h1{font-size:clamp(2.6rem,6.5vw,5rem); font-weight:800;}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem);}
h3{font-size:1.25rem;}
p{margin:0 0 1em 0;}

.eyebrow{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--scur); margin-bottom:14px; display:block;
}
.eyebrow.on-dark{color:#8EA3B2;}
.lead{font-size:1.12rem; color:var(--scur); max-width:60ch;}

/* ---------- barra mockup ---------- */
#mockbar{
  background:var(--roc); color:#B9C7D1; font-family:var(--f-mono);
  font-size:.7rem; letter-spacing:.08em; padding:7px 0; text-align:center;
}
#mockbar b{color:var(--enros); font-weight:500;}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:60; background:rgba(243,245,246,.88);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--pera);
}
.hd{display:flex; align-items:center; gap:28px; height:72px;}
.brand{display:flex; flex-direction:column; text-decoration:none; margin-right:auto;}
.brand .n{font-family:var(--f-disp); font-weight:800; font-size:1.32rem; letter-spacing:-.03em;}
.brand .n em{font-style:normal; color:var(--enros);}
.brand .s{font-family:var(--f-mono); font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--scur); margin-top:1px;}
nav.main{display:flex; gap:26px;}
nav.main a{
  text-decoration:none; font-size:.9rem; font-weight:500; color:var(--roc);
  padding:4px 0; border-bottom:2px solid transparent;
}
nav.main a:hover{border-color:var(--pera);}
nav.main a.active{border-color:var(--enros);}
.hd-act{display:flex; align-items:center; gap:12px;}
.cartbtn{
  position:relative; background:none; border:1px solid var(--pera); border-radius:var(--r);
  padding:9px 14px; font-size:.85rem; font-weight:500; display:flex; align-items:center; gap:8px;
}
.cartbtn:hover{border-color:var(--roc);}
.cartbtn .badge{
  background:var(--enros); color:#fff; font-family:var(--f-mono); font-size:.66rem;
  min-width:19px; height:19px; border-radius:10px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 5px;
}
.burger{display:none; background:none; border:1px solid var(--pera); border-radius:var(--r); padding:9px 12px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--enros); color:#fff; border:1px solid var(--enros); border-radius:var(--r);
  padding:14px 26px; font-weight:600; font-size:.95rem; text-decoration:none;
  transition:background .16s ease, border-color .16s ease;
}
.btn:hover{background:var(--enros-d); border-color:var(--enros-d);}
.btn:disabled{background:var(--pera); border-color:var(--pera); color:#8B979E; cursor:not-allowed;}
.btn.ghost{background:none; color:var(--roc); border-color:var(--roc);}
.btn.ghost:hover{background:var(--roc); color:#fff;}
.btn.ghost.on-dark{color:#fff; border-color:rgba(255,255,255,.45);}
.btn.ghost.on-dark:hover{background:#fff; color:var(--roc);}
.btn.sm{padding:9px 16px; font-size:.84rem;}
.btn.full{width:100%;}

/* ---------- hero + firma "enrosadira" ---------- */
.hero{position:relative; overflow:hidden; background:var(--roc); color:#fff;}
.hero-photo{position:absolute; inset:0; background-size:cover; background-position:center 62%;}
.hero-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(18,26,34,.34) 0%, rgba(18,26,34,.10) 38%, rgba(18,26,34,.72) 100%);}
.sky{position:absolute; inset:0; transition:opacity 1.2s ease, background 1.2s ease; mix-blend-mode:multiply;}
.sky[data-t="di"]{opacity:.30;} .sky[data-t="en"]{opacity:.60;} .sky[data-t="net"]{opacity:.80;}
.sky[data-t="di"]{background:linear-gradient(178deg,#7FA8C4 0%,#AFC9D8 46%,#DCE6EA 100%);}
.sky[data-t="en"]{background:linear-gradient(178deg,#2E3C5A 0%,#7A4A70 42%,#D9536B 74%,#F0A18C 100%);}
.sky[data-t="net"]{background:linear-gradient(178deg,#0C1420 0%,#16273A 55%,#28405A 100%);}
.ridge{opacity:.92; position:absolute; left:0; right:0; bottom:0; width:100%; height:auto; z-index:1;}
.hero-in{position:relative; z-index:2; padding:clamp(70px,11vw,130px) 0 clamp(150px,17vw,210px);}
.hero h1{max-width:14ch; text-shadow:0 2px 34px rgba(10,16,22,.45);}
.hero h1 .thin{font-weight:500; display:block;}
.hero .lead{color:rgba(255,255,255,.9); margin-top:22px; font-size:1.15rem;}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:30px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82);}
.hero-meta span{display:flex; align-items:center; gap:8px;}
.hero-meta span::before{content:""; width:5px; height:5px; background:var(--enros); border-radius:50%;}

/* controllo ora del giorno */
/* Gli stili del selettore ora del giorno sono stati rimossi insieme al
   controllo, tolto su richiesta del committente. */

/* ---------- barra ricerca ---------- */
.searchbar{
  background:var(--nef-pure); border:1px solid var(--pera); border-radius:var(--r);
  box-shadow:0 18px 44px rgba(24,34,43,.13); margin-top:-120px; position:relative; z-index:5;
  display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:0;
}
.searchbar .f{padding:16px 20px; border-right:1px solid var(--pera);}
.searchbar .f:nth-child(3){border-right:0;}
.searchbar label{display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--scur); margin-bottom:5px;}
.searchbar input, .searchbar select{
  border:0; padding:0; font:inherit; font-size:.98rem; width:100%; background:none; color:var(--roc);
}
.searchbar .go{padding:10px;}
.searchbar .go .btn{height:100%;}

/* ---------- offerte ---------- */
/* Le schede sono da una a tre, decise dall'amministrazione: auto-fit le dispone
   senza che il numero vada dichiarato qui né corretto nelle media query. */
.offers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:2px;}
.offer{
  background:var(--nef-pure); border:1px solid var(--pera); border-radius:var(--r);
  padding:26px 24px; display:flex; flex-direction:column;
}
.offer .val{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--enros); display:block; margin-bottom:12px;}
.offer h3{font-size:1.05rem; margin-bottom:7px;}
.offer .per{font-size:.9rem; color:var(--roc); margin:0 0 10px;}
.offer .txt{font-size:.9rem; color:var(--scur);}
.offer .txt p:last-child{margin-bottom:0;}
/* La condizione resta in fondo alla scheda anche quando le descrizioni hanno
   lunghezze diverse: senza margin-top:auto le righe si sfalsano. */
.offer .cond{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--scur);
  margin:auto 0 0; padding-top:16px; border-top:1px solid var(--pera);
}
.offers + .blk-cta{margin-top:36px;}

/* ---------- sezioni ---------- */
section.blk{padding:clamp(64px,8vw,104px) 0;}
section.dark{background:var(--roc); color:#fff;}
section.dark .lead{color:#A9BBC7;}
section.stone{background:var(--pera-2);}
.hdr-2col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:56px; align-items:end; margin-bottom:52px;}

.usp{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--pera);}
.usp .i{padding:30px 26px 30px 0; border-right:1px solid var(--pera);}
.usp .i:last-child{border-right:0; padding-right:0;}
.usp .n{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; color:var(--enros); display:block; margin-bottom:12px;}
.usp h3{font-size:1.05rem; margin-bottom:7px;}
.usp p{font-size:.9rem; color:var(--scur); margin:0;}

/* ---------- griglia spazi ---------- */
.spaces{display:grid; grid-template-columns:repeat(3,1fr); gap:2px;}
.space{position:relative; background:var(--nef-pure); border:1px solid var(--pera); padding:0; overflow:hidden;}
.ph{
  aspect-ratio:4/3; position:relative; display:flex; align-items:flex-end; padding:16px;
  background:
    repeating-linear-gradient(115deg, rgba(140,107,69,.09) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #DFE5E7 0%, #C6D0D4 100%);
}
.ph.w2{background:
    repeating-linear-gradient(115deg, rgba(140,107,69,.14) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #E5E0D6 0%, #C9BEAC 100%);}
.ph.w3{background:
    repeating-linear-gradient(115deg, rgba(24,34,43,.08) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, #D3DCE0 0%, #A9B8C0 100%);}
.ph .tag{
  font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  background:rgba(255,255,255,.82); color:var(--scur); padding:4px 9px; border-radius:2px;
}
.space .txt{padding:20px;}
.space h3{margin-bottom:6px;}
.space p{font-size:.9rem; color:var(--scur); margin:0;}
.space .lvl{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; color:var(--enros); text-transform:uppercase; display:block; margin-bottom:9px;}

/* ---------- lista dotazioni ---------- */
.amen{columns:3; column-gap:44px; margin:0; padding:0; list-style:none;}
.amen li{
  break-inside:avoid; padding:11px 0 11px 22px; border-bottom:1px solid var(--pera);
  font-size:.93rem; position:relative;
}
.amen li::before{content:"—"; position:absolute; left:0; color:var(--enros);}

/* ---------- calendario / booking ---------- */
.book{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr); gap:44px; align-items:start;}
.card{background:var(--nef-pure); border:1px solid var(--pera); border-radius:var(--r); padding:26px;}
.card.dark{background:var(--roc-2); border-color:#31414F; color:#fff;}
.cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px;}
.cal-nav .m{font-family:var(--f-disp); font-weight:700; font-size:1.15rem; text-transform:capitalize;}
.cal-nav button{background:none; border:1px solid var(--pera); border-radius:var(--r); width:34px; height:34px; line-height:1;}
.cal-nav button:disabled{opacity:.35; cursor:not-allowed;}
.cals{display:grid; grid-template-columns:1fr 1fr; gap:30px;}
.cal table{width:100%; border-collapse:collapse;}
.cal caption{
  font-family:var(--f-disp); font-weight:700; font-size:1rem; text-align:left;
  padding-bottom:12px; text-transform:capitalize;
}
.cal th{
  font-family:var(--f-mono); font-size:.6rem; font-weight:400; color:var(--scur);
  padding-bottom:8px; text-transform:uppercase;
}
.cal td{padding:1px; text-align:center;}
.cal td button{
  width:100%; aspect-ratio:1; border:0; background:none; border-radius:2px;
  font-family:var(--f-mono); font-size:.8rem; color:var(--roc); position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
}
.cal td button .pz{font-size:.5rem; color:var(--scur); letter-spacing:-.02em;}
.cal td button:hover:not(:disabled){background:var(--pera-2);}
.cal td button:disabled{color:#BAC4C9; cursor:not-allowed;}
.cal td button:disabled .pz{display:none;}
.cal td button[data-busy="1"]{text-decoration:line-through; color:#C2CBCF;}
.cal td button[data-sel="in"], .cal td button[data-sel="out"]{background:var(--roc); color:#fff;}
.cal td button[data-sel="in"] .pz, .cal td button[data-sel="out"] .pz{color:rgba(255,255,255,.6);}
.cal td button[data-sel="mid"]{background:#E3E9EB;}
.cal td button[data-hi="1"]{box-shadow:inset 0 0 0 1px var(--enros);}
.legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:20px; padding-top:18px; border-top:1px solid var(--pera); font-family:var(--f-mono); font-size:.64rem; letter-spacing:.06em; color:var(--scur);}
.legend i{display:inline-block; width:9px; height:9px; margin-right:6px; vertical-align:middle;}

.quote dl{display:grid; grid-template-columns:1fr auto; gap:11px 16px; margin:0 0 20px 0; font-size:.9rem;}
.quote dt{color:#A9BBC7;}
.quote dd{margin:0; text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums;}
.quote .tot{border-top:1px solid #31414F; padding-top:16px; display:flex; justify-content:space-between; align-items:baseline; margin-bottom:20px;}
.quote .tot .l{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#8EA3B2;}
.quote .tot .v{font-family:var(--f-disp); font-weight:800; font-size:2.1rem;}
.note{font-size:.78rem; color:#8EA3B2; line-height:1.5;}
.warn{
  background:rgba(217,83,107,.12); border:1px solid rgba(217,83,107,.4); color:#FFC6CF;
  padding:11px 13px; border-radius:var(--r); font-size:.82rem; margin-bottom:18px;
}
.empty{color:#8EA3B2; font-size:.9rem;}

/* ---------- shop ---------- */
.shopfilt{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px;}
.chip{
  background:none; border:1px solid var(--pera); border-radius:20px; padding:7px 16px;
  font-size:.82rem; font-weight:500; color:var(--scur);
}
.chip[aria-pressed="true"]{background:var(--roc); border-color:var(--roc); color:#fff;}
.prods{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.prod{background:var(--nef-pure); border:1px solid var(--pera); border-radius:var(--r); display:flex; flex-direction:column; overflow:hidden;}
.prod .im{aspect-ratio:16/10; position:relative;}
.prod .cat{position:absolute; top:12px; left:12px; font-family:var(--f-mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; background:rgba(255,255,255,.9); padding:4px 8px; border-radius:2px; color:var(--scur);}
.prod .bd{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1;}
.prod h3{font-size:1.02rem; margin-bottom:6px;}
.prod .d{font-size:.85rem; color:var(--scur); margin-bottom:16px; flex:1;}
.prod .foot{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.prod .pr{font-family:var(--f-mono); font-weight:500; font-size:1.06rem;}
.prod .pr small{font-size:.68rem; color:var(--scur); display:block; font-weight:400; letter-spacing:.04em;}

/* ---------- recensioni ---------- */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.rev{border-top:2px solid var(--enros); padding-top:20px;}
.rev .st{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; color:var(--scur); margin-bottom:12px;}
.rev p{font-size:.96rem; margin-bottom:14px;}
.rev .who{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; color:var(--scur); text-transform:uppercase;}
.score{display:flex; align-items:baseline; gap:14px; margin-bottom:8px;}
.score .v{font-family:var(--f-disp); font-weight:800; font-size:3.6rem; line-height:1; color:var(--enros);}
.score .l{font-size:.9rem; color:var(--scur);}

/* ---------- mappa/distanze ---------- */
.dist{list-style:none; margin:0; padding:0;}
.dist li{display:flex; justify-content:space-between; gap:20px; padding:13px 0; border-bottom:1px solid var(--pera); font-size:.94rem;}
.dist li b{font-family:var(--f-mono); font-weight:500; color:var(--scur); font-size:.86rem;}
.mapbox{
  aspect-ratio:16/11; border:1px solid var(--pera); position:relative; overflow:hidden;
  background:
    linear-gradient(0deg, rgba(47,81,69,.07) 1px, transparent 1px) 0 0/100% 34px,
    linear-gradient(90deg, rgba(47,81,69,.07) 1px, transparent 1px) 0 0/34px 100%,
    linear-gradient(150deg,#E8EDEE,#D3DDDF);
}
.pin{position:absolute; left:50%; top:52%; transform:translate(-50%,-100%); text-align:center;}
.pin .d{width:15px; height:15px; background:var(--enros); border:3px solid #fff; border-radius:50%; margin:0 auto; box-shadow:0 3px 10px rgba(0,0,0,.28);}
.pin .t{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; background:#fff; padding:4px 9px; margin-top:7px; display:inline-block; border:1px solid var(--pera);}

/* ---------- form ---------- */
.form{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form .full{grid-column:1/-1;}
.field label{display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--scur); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--pera); border-radius:var(--r); padding:12px 14px;
  font:inherit; font-size:.95rem; background:var(--nef-pure); color:var(--roc);
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--roc); outline:none;}
.pay{display:grid; gap:10px;}
.pay label{
  display:flex; gap:13px; align-items:flex-start; border:1px solid var(--pera);
  border-radius:var(--r); padding:15px 17px; background:var(--nef-pure); cursor:pointer;
}
.pay label:has(input:checked){border-color:var(--enros); box-shadow:inset 0 0 0 1px var(--enros);}
.pay .t{font-weight:600; font-size:.95rem;}
.pay .s{font-size:.82rem; color:var(--scur);}

/* ---------- carrello drawer ---------- */
.scrim{position:fixed; inset:0; background:rgba(16,24,31,.5); opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:90;}
.scrim.on{opacity:1; pointer-events:auto;}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--nef-pure);
  z-index:100; transform:translateX(102%); transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(16,24,31,.2);
}
.drawer.on{transform:none;}
.drawer .dh{display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--pera);}
.drawer .dh h3{font-size:1.1rem;}
.drawer .db{flex:1; overflow-y:auto; padding:8px 24px;}
.drawer .df{border-top:1px solid var(--pera); padding:20px 24px;}
.xbtn{background:none; border:0; font-size:1.5rem; line-height:1; color:var(--scur); padding:2px 6px;}
.ci{display:flex; gap:14px; padding:18px 0; border-bottom:1px solid var(--pera);}
.ci .ct{flex:1;}
.ci .cn{font-weight:600; font-size:.94rem;}
.ci .cs{font-size:.8rem; color:var(--scur); margin-top:3px;}
.ci .cp{font-family:var(--f-mono); font-size:.94rem; white-space:nowrap;}
.qty{display:inline-flex; border:1px solid var(--pera); border-radius:var(--r); margin-top:9px;}
.qty button{background:none; border:0; width:27px; height:27px; line-height:1; color:var(--scur);}
.qty span{font-family:var(--f-mono); font-size:.8rem; width:29px; display:grid; place-items:center; border-left:1px solid var(--pera); border-right:1px solid var(--pera);}
.rm{background:none; border:0; padding:0; font-size:.76rem; color:var(--scur); text-decoration:underline; margin-top:9px;}
.drawer .tot{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px;}
.drawer .tot .l{font-family:var(--f-mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--scur);}
.drawer .tot .v{font-family:var(--f-disp); font-weight:800; font-size:1.9rem;}

/* ---------- footer ---------- */
footer{background:var(--roc); color:#93A7B4; padding:70px 0 30px;}
footer h4{color:#fff; font-size:.95rem; margin-bottom:16px;}
.fgrid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px; margin-bottom:52px;}
.fgrid a{display:block; text-decoration:none; font-size:.88rem; padding:5px 0; color:#93A7B4;}
.fgrid a:hover{color:#fff;}
.fbot{border-top:1px solid #2C3B48; padding-top:24px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.08em; color:#6D8091;}
.fbot button{background:none; border:0; color:#93A7B4; text-decoration:underline; font-family:inherit; font-size:inherit; letter-spacing:inherit;}

/* ---------- modale note tecniche ---------- */
.modal{position:fixed; inset:0; z-index:110; display:none; place-items:center; padding:24px; background:rgba(16,24,31,.6);}
.modal.on{display:grid;}
.modal .mc{background:var(--nef-pure); max-width:640px; width:100%; max-height:84vh; overflow-y:auto; border-radius:var(--r); padding:34px;}
.modal h3{margin-bottom:16px;}
.modal table{width:100%; border-collapse:collapse; font-size:.88rem; margin-bottom:18px;}
.modal td{padding:9px 0; border-bottom:1px solid var(--pera); vertical-align:top;}
.modal td:first-child{font-weight:600; width:38%; padding-right:16px;}

/* ---------- routing ---------- */
/* Le regole .page del mockup servivano al suo routing interno, che mostrava
   una schermata alla volta nascondendo le altre. In WordPress non vanno
   riportate: "page" e una classe che WordPress applica al <body> di ogni
   pagina statica, quindi .page{display:none} nasconde l'intero documento.
   E il motivo per cui /prenota/, /ciasa/, /valle/ e /contatti/ apparivano
   bianche mentre la home, che ha classi diverse, si vedeva.
   L'animazione di comparsa resta disponibile per altri usi. */
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%); z-index:120;
  background:var(--roc); color:#fff; padding:13px 22px; border-radius:var(--r);
  font-size:.88rem; transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.toast.on{transform:translate(-50%,0);}


/* ---------- immagini reali ---------- */
.ph img, .prod .im img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.ph.has img{cursor:zoom-in;}
.ph.has .tag{display:none;}
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:2px;}
.gal .g{position:relative; aspect-ratio:1; overflow:hidden;}
.gal .g:first-child{grid-column:span 2; grid-row:span 2;}
.gal .g img{width:100%; height:100%; object-fit:cover; cursor:zoom-in; transition:transform .5s ease;}
.gal .g:hover img{transform:scale(1.04);}
.dropzone{
  border:1px dashed var(--pera); border-radius:var(--r); padding:44px 28px; text-align:center;
  color:var(--scur); background:var(--nef-pure);
}
.dropzone code{font-family:var(--f-mono); font-size:.82rem; background:var(--pera-2); padding:2px 7px; border-radius:2px;}
.lb{position:fixed; inset:0; z-index:130; background:rgba(12,18,24,.94); display:none; place-items:center; padding:28px;}
.lb.on{display:grid;}
.lb img{max-width:100%; max-height:86vh; object-fit:contain;}
.lb .x{position:absolute; top:18px; right:22px; background:none; border:0; color:#fff; font-size:2rem; line-height:1;}
.lb .cap{position:absolute; bottom:20px; left:0; right:0; text-align:center; color:#9FB2BF; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;}
@media (max-width:700px){ .gal{grid-template-columns:1fr 1fr;} }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hdr-2col{grid-template-columns:1fr; gap:20px;}
  .usp{grid-template-columns:1fr 1fr;}
  .usp .i{padding-right:22px;}
  .usp .i:nth-child(2){border-right:0;}
  .spaces{grid-template-columns:1fr 1fr;}
  .amen{columns:2;}
  .book{grid-template-columns:1fr;}
  .cals{grid-template-columns:1fr;}
  .prods{grid-template-columns:1fr 1fr;}
  .revs{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr 1fr;}
  .searchbar{grid-template-columns:1fr 1fr;}
  .searchbar .f:nth-child(2){border-right:0;}
  .searchbar .f:nth-child(3){grid-column:1/-1; border-top:1px solid var(--pera); border-right:0;}
  .searchbar .go{grid-column:1/-1; border-top:1px solid var(--pera);}
}
@media (max-width:700px){
  nav.main{
    position:fixed; top:0; right:0; bottom:0; width:min(300px,86vw); background:var(--nef-pure);
    flex-direction:column; padding:96px 28px; gap:6px; z-index:95; transform:translateX(102%);
    transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-12px 0 40px rgba(16,24,31,.18);
  }
  nav.main.on{transform:none;}
  nav.main a{font-size:1.15rem; font-family:var(--f-disp); font-weight:700; padding:11px 0; border-bottom:1px solid var(--pera);}
  .burger{display:block;}
  .cartbtn span.lbl{display:none;}
  .usp{grid-template-columns:1fr;}
  .usp .i{border-right:0; border-bottom:1px solid var(--pera); padding:24px 0;}
  .spaces, .prods{grid-template-columns:1fr;}
  .amen{columns:1;}
  .form{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr;}
  .daypick{right:12px; bottom:12px;}
  .hero-in{padding-bottom:120px;}
  /* Qui l'hero ha 120px di respiro in fondo: la risalita resta più contenuta
     che su desktop, altrimenti la barra finirebbe sopra i dati della casa. */
  .searchbar{margin-top:-88px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}

/* ══════════════════════════════════════════════════════════════════════════
   CORREZIONI PER LA PRODUZIONE
   Aggiunte in coda, così restano distinguibili dal mockup originale.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Contrasto ─────────────────────────────────────────────────────────────
   Misurato sui token del mockup: --enros (#D9536B) su fondo chiaro dà 3,89:1
   su bianco e 3,56:1 su --nef. Il minimo AA per il testo normale è 4,5:1,
   quindi il rosa non è utilizzabile per il testo piccolo: prezzi, etichette e
   collegamenti. --enros-d (#B33F55) dà 5,59:1 e passa ovunque.
   Il rosa resta dov'era pensato: superfici piene e testo grande.            */

.pz,
.price,
.quote dd,
a:not(.btn),
.note strong,
.eyebrow {
  color: var(--enros-d);
}

/* Testo bianco su fondo --enros dà 3,89:1: sufficiente solo se il testo è
   grande. I pulsanti che restano piccoli usano il tono scuro.               */
.btn-primary,
.btn.primary {
  background: var(--enros-d);
  color: #fff;
}

.btn-primary:hover,
.btn.primary:hover {
  background: #9C3648;
}

/* --larsc su --nef è 4,46:1, appena sotto la soglia: si scurisce di poco
   quando fa da testo, mentre resta invariato come dettaglio decorativo.     */
.legno-testo {
  color: #7A5C3B;
}

/* ── Accessibilità da tastiera ─────────────────────────────────────────────
   Il mockup non definisce un focus visibile. Senza, chi naviga da tastiera
   non sa dove si trova: requisito trasversale di Fase 5.                    */

:focus-visible {
  outline: 3px solid var(--enros-d);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Si rimuove il contorno solo per chi usa il puntatore, mai per la tastiera. */
:focus:not(:focus-visible) {
  outline: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 12px 20px;
  background: var(--roc);
  color: #fff;
  font-family: var(--f-body);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ── Classi richieste da WordPress ─────────────────────────────────────────
   Il tema deve gestirle anche se le pagine principali non usano l'editor:
   compaiono nelle pagine di servizio e nei contenuti inseriti dal cliente.  */

.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  clip-path: none;
  height: auto;
  width: auto;
  left: 8px;
  top: 8px;
  padding: 12px 20px;
  background: var(--roc);
  color: #fff;
  z-index: 100000;
}

.alignleft  { float: left;  margin: 0 22px 14px 0; }
.alignright { float: right; margin: 0 0 14px 22px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
.wp-element-caption {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--scur);
  margin-top: 8px;
}

.sticky, .gallery-caption, .bypostauthor { }

/* Le immagini non devono mai sfondare il contenitore, qualunque cosa carichi
   il cliente dalla libreria media.                                          */
.entry-content img,
.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/* ── Movimento ridotto ─────────────────────────────────────────────────────
   Il mockup rispetta già prefers-reduced-motion; si estende alle transizioni
   introdotte da WordPress e da WooCommerce.                                 */

@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;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINA PRENOTA — elementi non presenti nel mockup
   Il mockup dava per scontato il JavaScript. In produzione servono anche la
   versione senza, l'avviso sulla modalità di conferma e l'antispam.
   ══════════════════════════════════════════════════════════════════════════ */

.tit-prenota { margin-bottom: 20px; }
.lead-prenota { margin-bottom: 48px; }
.nota-cal { color: var(--scur); margin-top: 20px; font-size: .8rem; }

/* Avviso: le date si confermano a mano.
   Non è un errore, quindi non usa il rosso: è un'informazione sul modo in cui
   funziona la prenotazione finché la sincronizzazione non è attiva. */
.avviso-disponibilita {
  background: var(--pera-2);
  border-left: 3px solid var(--larsc);
  border-radius: var(--r);
  padding: 16px 20px;
  margin-bottom: 34px;
}
.avviso-disponibilita p { margin: 0; font-size: .92rem; color: var(--roc); }
.avviso-disponibilita strong { font-weight: 600; }

/* Modulo di richiesta date. Convive con il calendario: quando lo script parte
   resta sotto come alternativa, quando non parte è l'unica via. */
.form-date { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--pera); }
.form-date-tit { font-size: 1.05rem; margin-bottom: 18px; }
.form-date-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.form-date .f { display: flex; flex-direction: column; margin: 0; }
.form-date .f-largo { grid-column: 1 / -1; }
.form-date label {
  font-family: var(--f-mono);
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--scur);
  margin-bottom: 6px;
}
.form-date input,
.form-date select,
.form-date textarea {
  font-family: var(--f-body);
  font-size: .95rem;
  padding: 10px 12px;
  border: 1px solid var(--pera);
  border-radius: var(--r);
  background: var(--nef-pure);
  color: var(--roc);
  width: 100%;
}
.form-date textarea { resize: vertical; min-height: 76px; }
.form-date .hint,
.form-date .opz { font-size: .72rem; color: var(--scur); margin-top: 4px; text-transform: none; letter-spacing: 0; }
.form-date .btn { margin-top: 22px; }

/* Campo trappola per i robot: non deve essere visibile né raggiungibile da
   tastiera, ma nemmeno rimosso dal flusso con display:none, che alcuni robot
   riconoscono. Si sposta fuori dallo schermo. */
.cv-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Preventivo: condizioni economiche sempre visibili, anche senza JavaScript. */
.quote-vuoto { color: rgba(255,255,255,.72); font-size: .92rem; margin-bottom: 22px; }
.quote-cond { margin-top: 20px; }
.quote-cond dt {
  font-family: var(--f-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 14px;
}
.quote-cond dd { margin: 4px 0 0; font-size: .88rem; color: rgba(255,255,255,.92); }

.quote-tot { padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.16); margin-bottom: 18px; }
.quote-tot .v { font-size: 2rem; font-weight: 700; display: block; }
.quote-tot .note { color: rgba(255,255,255,.66); font-size: .8rem; margin-top: 4px; }

.quote-righe { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; }
.quote-righe dt { font-size: .88rem; color: rgba(255,255,255,.82); }
.quote-righe dd { margin: 0; font-family: var(--f-mono); font-size: .88rem; text-align: right; }

.quote-avviso,
.quote .warn {
  background: rgba(217,83,107,.16);
  border-left: 3px solid var(--enros);
  padding: 10px 14px;
  border-radius: var(--r);
  font-size: .86rem;
  margin-bottom: 16px;
  color: #fff;
}

/* I valori non confermati devono restare riconoscibili come tali anche a
   schermo, non solo nei commenti del codice. */
.note-segnaposto {
  margin-top: 18px;
  font-size: .74rem;
  color: rgba(255,255,255,.55);
  font-style: italic;
}
.card:not(.dark) .note-segnaposto { color: var(--scur); }

@media (max-width: 700px) {
  .form-date-griglia { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINE LA CIASA, LA VALLE, CONTATTI
   ══════════════════════════════════════════════════════════════════════════ */

.blk-attaccato { padding-top: 0; }
.wrap-spazio { padding-top: 60px; }
.wrap-centrato { text-align: center; }
.tit-ciasa { max-width: 16ch; }
.lead-ciasa { margin-top: 24px; }
.tit-gal { margin-bottom: 28px; }
.tit-cta { margin-bottom: 18px; }
.lead-centrato { margin: 0 auto 30px; }

/* Due colonne con proporzioni diverse: la mappa e il modulo hanno bisogno di
   piu' spazio dell'elenco che li affianca. */
.valgrid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
.valgrid-contatti { grid-template-columns: 1.2fr .8fr; gap: 56px; }

.mapbox-nota {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center; font-size: .74rem; color: var(--scur);
}

/* ── Galleria ─────────────────────────────────────────────────────────── */

.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gal-i {
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--r); overflow: hidden; display: block;
  aspect-ratio: 3 / 2; position: relative;
}
.gal-i img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.gal-i:hover img { transform: scale(1.04); }

/* Fotografia ingrandita */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(12, 18, 24, .94);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 64px;
}
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: var(--r); }
.lb .cap {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.86); font-size: .9rem; padding: 0 40px;
}
.lb .x, .lb-prev, .lb-next {
  position: absolute; background: rgba(255,255,255,.1); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: var(--r);
  width: 44px; height: 44px; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.lb .x { top: 24px; right: 24px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
.lb .x:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,.22); }

/* Blocca lo scorrimento della pagina sotto il pannello aperto. */
body.lb-aperto { overflow: hidden; }

/* ── Contatti ─────────────────────────────────────────────────────────── */

.recapiti h3 { margin-bottom: 14px; }
.rec-ind { color: var(--scur); font-size: .95rem; }
.rec-tel { font-size: .9rem; }
.rec-orari {
  color: var(--scur); font-size: .88rem;
  border-top: 1px solid var(--pera); padding-top: 18px; margin-top: 18px;
}
.nota-privacy { font-size: .78rem; color: var(--scur); margin-top: 12px; }

.avviso-ok, .avviso-errore {
  border-radius: var(--r); padding: 14px 18px; margin-bottom: 28px;
}
.avviso-ok { background: rgba(47,81,69,.12); border-left: 3px solid var(--bosch); }
.avviso-errore { background: rgba(217,83,107,.12); border-left: 3px solid var(--enros-d); }
.avviso-ok p, .avviso-errore p { margin: 0; font-size: .92rem; }

@media (max-width: 960px) {
  .gal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .valgrid, .valgrid-contatti { grid-template-columns: 1fr; gap: 30px; }
  .gal { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lb { padding: 20px 12px; }
  .lb-prev, .lb-next { width: 38px; height: 38px; }
}

/* Nota sui recapiti: la fascia oraria di reperibilità è un'informazione di
   servizio, non un disclaimer, quindi resta leggibile e non in grigio tenue. */
.rec-nota {
  font-size: .84rem;
  color: var(--scur);
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--pera);
}
.rec-tel a { color: var(--enros-d); text-decoration: none; }
.rec-tel a:hover { text-decoration: underline; }

/* ── Filtri dell'archivio servizi ──────────────────────────────────────────
   Nel mockup erano pulsanti che filtravano nel browser; qui sono collegamenti
   veri agli archivi di categoria, così funzionano senza JavaScript e ognuno ha
   il suo indirizzo. L'aspetto resta quello dei chip del mockup.            */

/* .shopfilt e gia definita sopra, nel foglio del mockup. */

.shopfilt .chip {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chip-n {
  font-family: var(--f-mono);
  font-size: .62rem;
  opacity: .55;
}

.tit-servizi { margin-bottom: 20px; }
.lead-servizi { margin-bottom: 40px; }

/* Paginazione, se un giorno i servizi diventassero molti. */
.wp-block-query-pagination,
.pagination,
.woocommerce-pagination { margin-top: 40px; }
.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--pera);
  border-radius: var(--r);
  margin-right: 6px;
  text-decoration: none;
  color: var(--roc);
  font-family: var(--f-mono);
  font-size: .82rem;
}
.pagination .page-numbers.current,
.woocommerce-pagination .page-numbers.current {
  background: var(--roc);
  border-color: var(--roc);
  color: #fff;
}

/* ── Scheda del singolo servizio ───────────────────────────────────────────
   Pagina non prevista dal mockup, ma esistente perché ogni prodotto ha un suo
   indirizzo. Impaginata con gli stessi elementi delle altre schermate.     */

.torna { margin-bottom: 26px; }
.torna a {
  font-family: var(--f-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--scur);
}
.torna a:hover { color: var(--enros-d); }

.servizio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.servizio-im { aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; }
.servizio-im img { width: 100%; height: 100%; object-fit: cover; display: block; }

.servizio-bd h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 10px 0 18px; }

.servizio-pr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--pera);
  margin-bottom: 20px;
}
.servizio-pr .mono { font-size: 1.6rem; font-weight: 700; color: var(--enros-d); }
.servizio-pr small { font-size: .8rem; color: var(--scur); }

.servizio-txt { color: var(--scur); font-size: .98rem; line-height: 1.62; }
.servizio-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.servizio-nota { margin-top: 18px; color: var(--scur); font-size: .82rem; }

.servizio-altri { margin-top: 72px; padding-top: 44px; border-top: 1px solid var(--pera); }
.tit-altri { font-size: 1.3rem; margin-bottom: 26px; }

@media (max-width: 700px) {
  .servizio { grid-template-columns: 1fr; gap: 26px; }
}

/* ── Fotografia dell'hero ──────────────────────────────────────────────────
   Il mockup usava un'immagine di sfondo, con background-size e
   background-position. Qui la fotografia è un <img> vero, che porta con sé
   srcset, testo alternativo e priorità di caricamento — ma su cui quelle due
   proprietà non hanno alcun effetto. Servono le equivalenti per le immagini,
   altrimenti resta alla sua dimensione naturale e fuori posizione.         */

.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── Segnaposto grafici dei servizi ────────────────────────────────────────
   In attesa delle fotografie vere. Sono icone dichiaratamente disegnate, non
   immagini che fingono di ritrarre il servizio: nessuno può sentirsi ingannato
   da un'icona, mentre una fotografia generata mostrerebbe una cesta di
   benvenuto diversa da quella che l'ospite riceve.

   Ogni categoria ha il suo fondo, così la griglia non è una fila di rettangoli
   identici. I toni sono tenui: devono riempire lo spazio senza competere con
   le fotografie vere, quando arriveranno.                                   */

.cv-ph-icona {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pera-2);
  color: var(--scur);
}

.cv-ph-icona .cv-icona {
  width: 34%;
  max-width: 84px;
  height: auto;
  opacity: .55;
}

/* Un fondo appena diverso per categoria: la pagina Servizi ne mostra dodici
   in fila, e tutti uguali darebbero l'idea di una pagina non finita. */
.cv-ph-icona[data-cat="sci"]       { background: #E7EDF0; color: #4E6B7C; }
.cv-ph-icona[data-cat="cucina"]    { background: #F0EBE3; color: #8C6B45; }
.cv-ph-icona[data-cat="casa"]      { background: #EAEEEC; color: #4A6659; }
.cv-ph-icona[data-cat="benessere"] { background: #EEE9EC; color: #8A5F6C; }
.cv-ph-icona[data-cat="trasporti"] { background: #E9ECEF; color: #5C6B75; }

/* Nella scheda del singolo servizio il riquadro è più grande: l'icona non deve
   diventare enorme, altrimenti sembra un errore. */
.servizio-im .cv-ph-icona .cv-icona { width: 26%; max-width: 110px; }

/* La dicitura "Foto da fornire" resta dove non ci sono categorie: gli spazi
   della casa e i riquadri della valle, dove serve dire al committente che
   manca il materiale. */