/* Crazy Shop | tema 2026 | Made for Web Studios */

:root{
  --nero:#000000;
  --carbone:#161616;
  --bianco:#FFFFFF;
  --pietra:#F0EFED;
  --linea:#DEDCD8;
  --rosso:#A8161E;
  --rosso-scuro:#84111A;
  --verde:#4E8D2F;
  --verde-scuro:#3D7124;
  --oro:#C9A66B;
  --testo:#1C1C1C;
  --tenue:#5E5E5E;
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bianco); color:var(--testo);
  font-family:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-optical-sizing:auto;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
p{margin:0 0 1em;}
:focus-visible{outline:3px solid var(--oro); outline-offset:3px; border-radius:2px;}

h1,h2,h3{
  font-weight:700; letter-spacing:-0.025em;
  line-height:1.02; margin:0 0 .45em; text-wrap:balance;
}
h1{font-size:clamp(2.7rem,7.2vw,6.2rem);}
h2{font-size:clamp(2rem,4.4vw,3.4rem);}
h3{font-size:1.2rem; line-height:1.2; letter-spacing:-0.01em;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.lead{font-size:1.15rem; max-width:54ch;}
.muted{color:var(--tenue);}
.skip{position:absolute; left:-999px; top:8px; background:#fff; padding:8px 14px; z-index:100;}
.skip:focus{left:8px;}

/* ---------- Header ---------- */
.site-header{position:sticky; top:0; z-index:50; background:var(--nero); color:#fff; border-bottom:1px solid #222;}
.site-header .bar{display:flex; align-items:center; gap:28px; height:72px;}
.brand{flex:none; display:block;}
.brand img{height:36px; width:auto; max-width:none;}
.mainnav{display:flex; gap:26px; margin-left:auto;}
.mainnav a{text-decoration:none; color:#BDBDBD; font-weight:600; font-size:.95rem; padding:6px 0; position:relative; transition:color .2s; white-space:nowrap;}
.mainnav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
.mainnav a:hover, .mainnav a[aria-current="page"]{color:#fff;}
.mainnav a:hover::after, .mainnav a[aria-current="page"]::after{transform:scaleX(1);}
.header-status{font-size:.85rem; color:#BDBDBD; white-space:nowrap;}
.burger{display:none; margin-left:auto; background:none; border:0; color:#fff; width:44px; height:44px; cursor:pointer;}
.burger span{display:block; width:24px; height:2px; background:#fff; margin:5px auto; transition:transform .25s, opacity .25s;}
.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);}
.site-header .btn{flex:none;}
@media(max-width:1400px){.site-header .header-status{display:none;}}
@media(max-width:980px){
  .site-header .btn{display:none;}
  .burger{display:block;}
  .mainnav{display:none; position:absolute; top:72px; left:0; right:0; flex-direction:column; gap:0; background:var(--nero); padding:8px 24px 24px; border-bottom:1px solid #222;}
  .mainnav.open{display:flex;}
  .mainnav a{font-size:1.25rem; padding:14px 0; border-bottom:1px solid #222; color:#fff;}
  .mainnav a::after{display:none;}
}
@media(max-width:420px){.brand img{height:28px;}}

/* ---------- Status dot ---------- */
.status{display:inline-flex; align-items:center; gap:8px;}
.status::before{content:""; width:9px; height:9px; border-radius:50%; background:#8a8a8a; flex:none;}
.status.is-open::before{background:#5FC236; box-shadow:0 0 0 4px rgba(95,194,54,.18);}
.status.is-closed::before{background:#D4453B;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-weight:700; font-size:1rem; line-height:1; text-decoration:none;
  padding:16px 28px; border-radius:999px; border:2px solid transparent; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .2s ease, color .25s ease, border-color .25s ease;
}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-101%); transition:transform .4s cubic-bezier(.7,0,.3,1);}
.btn:hover{transform:translateY(-2px);}
.btn:hover::before{transform:translateX(0);}
.btn svg{width:18px; height:18px; flex:none;}
.btn-rosso{background:var(--rosso); color:#fff;}
.btn-rosso::before{background:var(--rosso-scuro);}
.btn-verde{background:var(--verde); color:#fff;}
.btn-verde::before{background:var(--verde-scuro);}
.btn-chiaro{background:transparent; color:#fff; border-color:rgba(255,255,255,.55);}
.btn-chiaro::before{background:#fff;}
.btn-chiaro:hover{color:var(--nero); border-color:#fff;}
.btn-scuro{background:transparent; color:var(--nero); border-color:var(--nero);}
.btn-scuro::before{background:var(--nero);}
.btn-scuro:hover{color:#fff;}
.btn-oro{background:var(--oro); color:var(--nero);}
.btn-oro::before{background:#fff;}
.btn-sm{padding:11px 18px; font-size:.9rem;}
@media(prefers-reduced-motion:reduce){.btn,.btn::before{transition:none;}}

/* ---------- Hero ---------- */
.hero{background:var(--nero); color:#fff; padding:84px 0 0; overflow:hidden;}
.hero h1 .line{display:block; overflow:hidden;}
.hero h1 .line span{display:inline-block; transform:translateY(105%); animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards;}
.hero h1 .line:nth-child(2) span{animation-delay:.12s;}
.hero h1 .line:nth-child(2) span{color:var(--oro);}
@keyframes rise{to{transform:translateY(0);}}
.hero h1{max-width:none; font-size:clamp(3.2rem,8.4vw,7.6rem); line-height:.95; letter-spacing:-0.035em; margin-bottom:48px;}
.hero .lead{color:#CFCFCF; margin-bottom:34px;}
.hero-bottom{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px 72px; align-items:end; margin-bottom:64px;}
.hero-bottom .lead{margin:0; max-width:44ch;}
.hero-bottom .hero-actions{margin-bottom:20px;}
.hero-bottom .hero-meta{margin-bottom:0;}
@media(max-width:980px){.hero-bottom{grid-template-columns:1fr; gap:30px; margin-bottom:52px;}}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px;}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px 28px; color:#BDBDBD; font-size:.95rem; margin-bottom:64px;}
.hero-meta a{text-decoration:none;}
.hero-meta a:hover{color:#fff;}
.hero-meta .pin{display:inline-flex; align-items:center; gap:8px;}
.hero-meta svg{width:16px; height:16px;}
@media(prefers-reduced-motion:reduce){.hero h1 .line span{animation:none; transform:none;}}

/* the endless shelf */
.shelf{display:grid; gap:12px; padding-bottom:12px;}
.shelf-row{overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.shelf-track{display:flex; gap:12px; width:max-content; animation:shelfL 70s linear infinite;}
.shelf-row.rev .shelf-track{animation-name:shelfR; animation-duration:80s;}
.shelf-row:hover .shelf-track{animation-play-state:paused;}
@keyframes shelfL{from{transform:translateX(0);} to{transform:translateX(-50%);}}
@keyframes shelfR{from{transform:translateX(-50%);} to{transform:translateX(0);}}
.tile{height:230px; flex:none; border-radius:4px; overflow:hidden; position:relative;}
.tile img{height:100%; width:auto; max-width:none; object-fit:cover;}
.tile.photo{width:190px;}
.tile.photo img{width:100%;}
.tile.word{display:flex; align-items:flex-end; padding:22px; min-width:210px; font-weight:800; font-size:1.7rem; line-height:1.05; letter-spacing:-0.01em;}
.tile.w-oro{background:var(--oro); color:var(--nero);}
.tile.w-rosso{background:var(--rosso); color:#fff;}
.tile.w-verde{background:var(--verde); color:#fff;}
.tile.w-bianco{background:#fff; color:var(--nero);}
.tile.w-carbone{background:var(--carbone); color:#fff; border:1px solid #2a2a2a;}
@media(max-width:700px){.tile{height:160px;} .tile.photo{width:132px;} .tile.word{min-width:150px; font-size:1.2rem; padding:16px;}}
@media(prefers-reduced-motion:reduce){.shelf-track{animation:none;}}

/* ---------- Ticker ---------- */
.ticker{background:var(--rosso); color:#fff; overflow:hidden; padding:18px 0; border-top:1px solid var(--rosso-scuro);}
.ticker-track{display:flex; width:max-content; animation:shelfL 38s linear infinite;}
.ticker-track span{display:flex; align-items:center; white-space:nowrap; font-weight:800; font-size:clamp(1.3rem,2.4vw,2rem); letter-spacing:-0.01em;}
.ticker-track span::after{content:"✦"; font-size:.7em; margin:0 34px; color:var(--oro);}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;}}

/* ---------- Sections ---------- */
.sec{padding:112px 0;}
.sec-sm{padding:72px 0;}
.bg-pietra{background:var(--pietra);}
.bg-nero{background:var(--nero); color:#fff;}
.sec-head{display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:end; margin-bottom:48px;}
.sec-head p{margin:0; color:var(--tenue); max-width:46ch;}
@media(max-width:860px){.sec{padding:80px 0;} .sec-head{grid-template-columns:1fr; gap:12px;}}

/* ---------- Category mosaic (home) ---------- */
.mosaic{
  display:grid; gap:10px;
  grid-template-columns:repeat(4,1fr); grid-auto-rows:210px;
  grid-template-areas:
    "prof prof abb reg"
    "prof prof make lav"
    "inti elet casa cart"
    "deter snack altro altro";
}
.cat{position:relative; overflow:hidden; border-radius:4px; text-decoration:none; color:#fff; display:flex; align-items:flex-end; padding:20px; background:var(--carbone);}
.cat img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1);}
.cat::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78));}
.cat .cat-txt{position:relative; z-index:1;}
.cat h3{font-size:1.25rem; margin:0 0 4px;}
.cat small{display:block; font-size:.88rem; line-height:1.35; opacity:.85; max-width:30ch;}
.cat:hover img{transform:scale(1.05);}
.cat.type::after{display:none;}
.cat.type{padding:24px;}
.cat.t-verde{background:var(--verde);}
.cat.t-pietra{background:var(--pietra); color:var(--nero);}
.cat.t-rosso{background:var(--rosso);}
.cat.t-nero{background:var(--nero);}
.cat.noimg::after{display:none;}
.cat.big h3{font-size:clamp(1.6rem,2.6vw,2.4rem);}
.a-prof{grid-area:prof;} .a-abb{grid-area:abb;} .a-reg{grid-area:reg;} .a-make{grid-area:make;}
.a-lav{grid-area:lav;} .a-inti{grid-area:inti;} .a-elet{grid-area:elet;} .a-casa{grid-area:casa;}
.a-cart{grid-area:cart;} .a-deter{grid-area:deter;} .a-snack{grid-area:snack;} .a-altro{grid-area:altro;}
.cat.a-altro h3{font-size:clamp(1.4rem,2.2vw,2rem);}
@media(max-width:860px){
  .cat{padding:14px;} .cat h3{font-size:1rem;} .cat small{font-size:.8rem;}
  .cat:not(.big):not(.a-altro) small{display:none;}
  .mosaic{grid-template-columns:1fr 1fr; grid-auto-rows:170px;
    grid-template-areas:"prof prof" "prof prof" "abb reg" "make lav" "inti elet" "casa cart" "deter snack" "altro altro";}
}
.mosaic-foot{margin-top:28px;}

/* ---------- Perfume ---------- */
.perfume{background:var(--nero); color:#fff; overflow:hidden;}
.perfume-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:72px; align-items:center;}
@media(max-width:900px){.perfume-grid{grid-template-columns:1fr; gap:48px;}}
.stage{position:relative; display:flex; justify-content:center;}
.posters{position:relative; width:min(380px,86%); aspect-ratio:4/5; border-radius:4px; overflow:hidden; z-index:2; box-shadow:0 30px 80px -30px rgba(201,166,107,.45);}
.posters img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.4s ease;}
.posters img.on{opacity:1;}
.puff{position:absolute; border-radius:50%; background:radial-gradient(circle,rgba(201,166,107,.5),rgba(201,166,107,0) 70%); opacity:0; top:18%; z-index:1;}
.puff.p1{width:120px; height:120px; left:12%; animation:puff 4.2s ease-out infinite;}
.puff.p2{width:170px; height:170px; right:6%; animation:puff 4.2s ease-out infinite 1.4s;}
.puff.p3{width:220px; height:220px; left:28%; animation:puff 4.2s ease-out infinite 2.8s;}
@keyframes puff{0%{opacity:0; transform:translateY(60px) scale(.4);} 15%{opacity:.9;} 100%{opacity:0; transform:translateY(-140px) scale(1.5);}}
@media(prefers-reduced-motion:reduce){.puff{animation:none;}}
.perfume h2{color:#fff;}
.perfume p{color:#CFCFCF;}
.switch{display:inline-flex; background:#1b1b1b; border:1px solid #2c2c2c; border-radius:999px; padding:5px; margin:10px 0 24px;}
.switch button{font:inherit; font-weight:700; font-size:.95rem; color:#BDBDBD; background:none; border:0; padding:11px 22px; border-radius:999px; cursor:pointer; transition:background .25s,color .25s;}
.switch button[aria-selected="true"]{background:var(--oro); color:var(--nero);}
.switch-panel{min-height:7.5em;}
.switch-panel[hidden]{display:none;}
.switch-panel p{font-size:1.08rem; max-width:48ch;}
.bottles{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(180px,1fr); gap:12px; margin-top:80px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:#333 transparent;}
.bottles figure{margin:0; scroll-snap-align:start;}
.bottles img{width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:4px;}
.bottles figcaption{font-size:.9rem; color:#BDBDBD; margin-top:10px;}

/* ---------- Pillars ---------- */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:48px;}
.pillars div{border-top:2px solid var(--nero); padding-top:22px;}
.pillars p{color:var(--tenue); margin:0;}
@media(max-width:860px){.pillars{grid-template-columns:1fr; gap:32px;}}

/* ---------- Reviews ---------- */
.reviews-frame{width:100%; height:520px; border:0; display:block; background:#fff; border-radius:4px;}
@media(max-width:760px){.reviews-frame{height:660px;}}
.reviews-actions{margin-top:28px; display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- Visit / hours ---------- */
.visit{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start;}
@media(max-width:900px){.visit{grid-template-columns:1fr; gap:36px;}}
.address{font-weight:700; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.25; margin:0 0 18px;}
.visit-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
.hours{background:#fff; border:1px solid var(--linea); border-radius:4px; padding:30px;}
.hours h3{margin-bottom:6px;}
.hours .status{font-weight:600; margin-bottom:18px;}
.hours table{width:100%; border-collapse:collapse;}
.hours th, .hours td{text-align:left; vertical-align:top; padding:14px 0; border-top:1px solid var(--linea); font-size:.98rem;}
.hours th{font-weight:600; padding-right:16px; width:44%;}
.hours tr.today th, .hours tr.today td{color:var(--rosso); font-weight:700;}
.hours .note{font-size:.85rem; color:var(--tenue); margin:14px 0 0;}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{background:var(--nero); color:#fff; padding:88px 0 72px;}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.8rem); max-width:14ch;}
.page-hero .lead{color:#CFCFCF; margin:0;}

/* ---------- Categorie page ---------- */
.finder{margin-top:36px; max-width:560px;}
.finder label{display:block; font-weight:600; margin-bottom:10px; color:#fff;}
.finder-box{position:relative;}
.finder input{
  width:100%; font:inherit; font-size:1.05rem; color:var(--nero); background:#fff;
  border:2px solid #fff; border-radius:999px; padding:16px 22px 16px 52px;
}
.finder input:focus{outline:none; border-color:var(--oro);}
.finder svg{position:absolute; left:20px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:#777;}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.chips a{font-size:.88rem; font-weight:600; text-decoration:none; color:#fff; border:1px solid #3a3a3a; padding:8px 14px; border-radius:999px; transition:background .2s,border-color .2s;}
.chips a:hover{background:#fff; color:var(--nero); border-color:#fff;}
.catlist{display:grid; gap:0;}
.catrow{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:64px 0; border-bottom:1px solid var(--linea); scroll-margin-top:90px;}
.catrow:nth-child(even) .catrow-media{order:2;}
@media(max-width:860px){.catrow{grid-template-columns:1fr; gap:24px; padding:48px 0;} .catrow:nth-child(even) .catrow-media{order:0;}}
.catrow-media{aspect-ratio:4/3; border-radius:4px; overflow:hidden; background:var(--carbone); position:relative;}
.catrow-media img{width:100%; height:100%; object-fit:cover;}
.catrow-media.type{display:flex; align-items:flex-end; padding:28px; color:#fff; font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.05;}
.catrow-media.t-verde{background:var(--verde);}
.catrow-media.t-rosso{background:var(--rosso);}
.catrow-media.t-oro{background:var(--oro); color:var(--nero);}
.catrow-media.t-nero{background:var(--nero);}
.catrow-media.duo{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:none;}
.catrow-media.duo img{border-radius:4px;}
.catrow h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.catrow p{color:var(--tenue); max-width:50ch;}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:18px 0 26px; padding:0; list-style:none;}
.tags li{font-size:.85rem; background:var(--pietra); padding:6px 12px; border-radius:999px;}
.empty{padding:72px 0; text-align:left;}
.empty[hidden]{display:none;}
.catrow[hidden]{display:none;}

/* ---------- Chi siamo ---------- */
.story{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
@media(max-width:900px){.story{grid-template-columns:1fr; gap:40px;}}
.story p{font-size:1.08rem; max-width:56ch;}
.photo-stack{display:grid; grid-template-columns:1.2fr 1fr; gap:10px;}
.photo-stack img{width:100%; height:100%; object-fit:cover; border-radius:4px; background:var(--carbone);}
.photo-stack .tall{grid-row:span 2; aspect-ratio:3/4;}
.photo-stack .sq{aspect-ratio:1/1;}

/* ---------- Contatti ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:stretch;}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.block{padding:30px; background:#fff; border:1px solid var(--linea); border-radius:4px;}
.block + .block{margin-top:16px;}
.block h3{margin-bottom:10px;}
.block p{margin:0 0 6px;}
.block .row{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
.map{width:100%; height:100%; min-height:420px; border:0; border-radius:4px; background:var(--pietra);}
.social{display:flex; gap:10px; margin-top:18px; list-style:none; padding:0;}
.social a{width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--linea); transition:background .2s,border-color .2s;}
.social a:hover{background:var(--nero); border-color:var(--nero);}
.social svg{width:19px; height:19px; fill:var(--nero); transition:fill .2s;}
.social a:hover svg{fill:#fff;}
form.contact{display:grid; gap:18px; max-width:640px;}
form.contact label{font-weight:600; font-size:.95rem; display:block; margin-bottom:6px;}
form.contact input, form.contact textarea{width:100%; font:inherit; padding:14px 16px; border:1.5px solid var(--linea); border-radius:4px; background:#fff;}
form.contact input:focus, form.contact textarea:focus{outline:none; border-color:var(--nero);}
form.contact .consent{display:flex; gap:10px; align-items:flex-start; font-size:.92rem; font-weight:400;}
form.contact .consent input{width:18px; height:18px; margin-top:3px; flex:none;}
form.contact .btn{justify-self:start;}

/* ---------- Legal ---------- */
.legal{max-width:70ch;}
.legal h2{font-size:1.4rem; margin-top:40px; }
.legal p, .legal li{color:#333;}

/* ---------- Footer ---------- */
.site-footer{background:var(--nero); color:#CFCFCF; padding:80px 0 32px; font-size:.95rem;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:40px;}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr;}}
.site-footer .brand img{height:auto; width:min(300px,100%);}
.site-footer h2{font-size:1rem; color:#fff; margin:0 0 16px; letter-spacing:0;}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:10px;}
.site-footer ul.social{display:flex; gap:10px; margin-top:22px;}
.site-footer a{text-decoration:none; color:#CFCFCF;}
.site-footer a:hover{color:#fff; text-decoration:underline;}
.site-footer .social a{border-color:#333;}
.site-footer .social svg{fill:#fff;}
.site-footer .social a:hover{background:#fff; border-color:#fff;}
.site-footer .social a:hover svg{fill:var(--nero);}
.foot-bottom{border-top:1px solid #262626; margin-top:56px; padding-top:24px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:.84rem; color:#8f8f8f;}
.foot-bottom a{color:#8f8f8f;}

/* ---------- Floating WhatsApp (desktop) + action bar (mobile) ---------- */
.wa-float{position:fixed; right:24px; bottom:24px; z-index:60; width:60px; height:60px; border-radius:50%; background:var(--verde); display:flex; align-items:center; justify-content:center; box-shadow:0 14px 34px -10px rgba(0,0,0,.45); transition:transform .2s;}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:30px; height:30px; fill:#fff;}
.actionbar{display:none;}
@media(max-width:760px){
  .wa-float{display:none;}
  .actionbar{display:grid; grid-template-columns:1fr 1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--nero); border-top:1px solid #262626; padding-bottom:env(safe-area-inset-bottom,0px);}
  .actionbar a{display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 12px; color:#fff; text-decoration:none; font-size:.78rem; font-weight:600;}
  .actionbar a.wa{background:var(--verde);}
  .actionbar svg{width:22px; height:22px; fill:#fff;}
  body{padding-bottom:68px;}
}

/* ---------- Cookie banner ---------- */
.cookie{position:fixed; left:16px; right:16px; bottom:16px; max-width:560px; margin:0 auto; z-index:70; background:#fff; color:var(--testo); border:1px solid var(--linea); border-radius:4px; box-shadow:0 20px 50px -20px rgba(0,0,0,.4); padding:20px; display:none;}
.cookie.show{display:block;}
.cookie p{margin:0 0 14px; font-size:.92rem;}
.cookie .row{display:flex; gap:10px; flex-wrap:wrap;}
@media(max-width:760px){.cookie{bottom:84px;}}

/* hours table stacks on small phones */
@media(max-width:560px){
  .hours th,.hours td{display:block; width:auto; padding:4px 0;}
  .hours th{padding-top:14px;}
  .hours td{border-top:0; padding-bottom:14px;}
}
/* graceful fallback when a photo cannot load */
.catrow-media.noimg{display:flex; align-items:flex-end; padding:28px; background:var(--rosso); color:#fff;}
.catrow-media.noimg::before{content:attr(data-label); font-weight:800; font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.05;}
.cat.noimg{background:var(--carbone);}

/* ---------- FAQ ---------- */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start;}
@media(max-width:900px){.faq-grid{grid-template-columns:1fr; gap:24px;}}
.faq details{border-top:1px solid var(--linea);}
.faq details:last-child{border-bottom:1px solid var(--linea);}
.faq summary{list-style:none; cursor:pointer; padding:22px 44px 22px 0; font-weight:700; font-size:1.08rem; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:6px; top:50%; width:12px; height:12px; border-right:2px solid var(--nero); border-bottom:2px solid var(--nero); transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq details p{margin:0 0 22px; color:var(--tenue); max-width:60ch;}

/* ---------- Cosa ti serve oggi ---------- */
.needs{list-style:none; margin:0; padding:0; border-top:1px solid var(--linea);}
.need{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 150px; gap:32px; align-items:center; padding:22px 0; min-height:141px; border-bottom:1px solid var(--linea); text-decoration:none; color:var(--testo); transition:padding .3s ease, background .3s ease;}
.need-t{font-weight:700; font-size:clamp(1.5rem,2.6vw,2.2rem); letter-spacing:-0.025em; line-height:1.1; transition:color .25s ease, transform .3s ease;}
.need-d{color:var(--tenue); font-size:1rem;}
.need-i{width:150px; height:96px; object-fit:cover; border-radius:4px; justify-self:end; filter:grayscale(1); opacity:.55; transition:filter .35s ease, opacity .35s ease, transform .35s ease;}
.need:hover .need-t, .need:focus-visible .need-t{color:var(--rosso); transform:translateX(8px);}
.need:hover .need-i, .need:focus-visible .need-i{filter:none; opacity:1; transform:scale(1.08);}
@media(max-width:760px){
  .need{grid-template-columns:minmax(0,1fr) 84px; gap:6px 16px; padding:18px 0; min-height:121px;}
  .need-t{grid-column:1; font-size:1.35rem;}
  .need-d{grid-column:1; grid-row:2; font-size:.92rem;}
  .need-i{grid-column:2; grid-row:1 / span 2; width:84px; height:84px; filter:none; opacity:1;}
}
@media(prefers-reduced-motion:reduce){.need-t,.need-i{transition:none;}}