/* ============================================================
   EMPORIO EDILE — Catalogo: hero, sidebar filtri, risultati
   ============================================================ */

/* ---------------- Hero categoria ---------------- */
.catalog-hero{background:radial-gradient(900px 380px at 85% -60%,rgba(43,63,208,.55),transparent 70%),var(--navy-900);color:#C9D1E8;padding:.4rem 0 2.2rem;position:relative;overflow:hidden}
.catalog-hero::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:repeating-linear-gradient(-45deg,var(--yellow-500) 0 18px,var(--navy-950) 18px 36px);opacity:.85}
.catalog-hero .breadcrumbs{color:#7E89A8;padding:1rem 0 .8rem}
.catalog-hero .breadcrumbs a{color:#B9C2DC}
.catalog-hero .breadcrumbs a:hover{color:var(--yellow-400)}
.catalog-hero .breadcrumbs .current{color:#fff}
.catalog-hero-row{display:flex;align-items:center;gap:1.4rem}
.catalog-hero-icon{flex:none;width:74px;height:74px;display:grid;place-items:center}
.catalog-hero-icon svg{width:100%;height:100%}
.catalog-hero h1{color:var(--yellow-500);margin:0 0 .4rem}
.catalog-hero .hero-desc{color:#D6DCEF;max-width:760px;margin:0;font-size:1.02rem}
.subcat-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.subcat-chip{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#E5EAF8;border-radius:999px;padding:.42rem 1rem;font-size:.84rem;font-weight:600;transition:.15s}
.subcat-chip:hover{background:var(--yellow-500);border-color:var(--yellow-500);color:var(--navy-900)}
.subcat-chip span{background:rgba(255,255,255,.16);border-radius:999px;padding:.05rem .5rem;font-size:.72rem}
.subcat-chip:hover span{background:rgba(11,18,48,.18);color:var(--navy-900)}

/* ---------------- Layout 2 colonne ---------------- */
.catalog-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:2.2rem;align-items:start;padding:2rem 0 1rem}

/* ---------------- Sidebar filtri ---------------- */
.sidebar-head{display:none}
.filter-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.05rem 1.1rem 1.15rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)}
.filter-box h3{font-family:var(--font-display);font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--navy-900);margin:0 0 .75rem;display:flex;align-items:baseline;gap:.4rem}
.filter-box h3 small{font-weight:600;color:var(--slate-400);letter-spacing:.02em;text-transform:none}
.filter-box h3::after{content:"";flex:1;height:2px;background:var(--line);border-radius:2px;align-self:center}

/* Categorie */
.cat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.cat-list a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.45rem .55rem;border-radius:var(--radius-xs);color:var(--slate-700);font-weight:500;font-size:.9rem;line-height:1.3}
.cat-list a:hover{background:var(--blue-100);color:var(--blue-600)}
.cat-list a.current{background:var(--navy-900);color:#fff;font-weight:700}
.cat-list a.current .f-count{background:var(--yellow-500);color:var(--navy-900)}
.cat-sub{list-style:none;margin:.15rem 0 .3rem .7rem;padding:0 0 0 .75rem;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:.1rem}
.cat-sub a{font-size:.86rem;padding:.38rem .55rem}

/* Checkbox / liste opzioni */
.f-options{display:flex;flex-direction:column;gap:.1rem;max-height:232px;overflow:auto;scrollbar-width:thin}
.f-check{display:flex;align-items:center;gap:.55rem;padding:.34rem .45rem;border-radius:var(--radius-xs);font-size:.9rem;color:var(--slate-700);cursor:pointer;user-select:none}
.f-check:hover{background:var(--bg)}
.f-check input{accent-color:var(--blue-600);width:16px;height:16px;margin:0;flex:none;cursor:pointer}
.f-check .f-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.f-count{margin-left:auto;flex:none;font-size:.72rem;font-weight:600;color:var(--slate-400);background:var(--bg);border-radius:999px;padding:.08rem .5rem}

/* Radio a chip (disponibilità + boolean) */
.disp-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.disp-chip{position:relative}
.disp-chip input{position:absolute;opacity:0;pointer-events:none}
.disp-chip span{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .85rem;border:1.5px solid var(--line);border-radius:999px;font-size:.82rem;font-weight:600;color:var(--slate-600);cursor:pointer;transition:.15s;background:#fff}
.disp-chip span em{font-style:normal;font-size:.72rem;color:var(--slate-400)}
.disp-chip span:hover{border-color:var(--blue-500);color:var(--blue-600)}
.disp-chip input:checked + span{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.disp-chip input:checked + span em{color:var(--yellow-400)}
.disp-chip input:focus-visible + span{outline:3px solid rgba(43,63,208,.3);outline-offset:2px}

/* Slider numerico a doppio cursore + -/+ — tutto su una linea (da … a) */
.f-slider{padding:.35rem 2px .1rem}
.rs-line{display:flex;align-items:center;gap:.4rem;flex-wrap:nowrap}
.rs-side{display:inline-flex;align-items:center;gap:.22rem;font-size:.82rem;font-weight:700;color:var(--navy-900);white-space:nowrap;font-variant-numeric:tabular-nums}
.rs-lab{color:var(--slate-400);font-weight:600;font-size:.78rem}
.rs-lo,.rs-hi{min-width:1.4em;text-align:center}
.rs-track{position:relative;height:22px;flex:1 1 70px;min-width:60px;margin:0 1px}
.rs-track::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:5px;border-radius:5px;background:var(--line)}
.rs-fill{position:absolute;top:50%;transform:translateY(-50%);height:5px;border-radius:5px;background:var(--yellow-500)}
.rs-range{position:absolute;top:0;left:0;width:100%;height:22px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.rs-range:focus{outline:none}
.rs-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:17px;height:17px;border-radius:50%;background:var(--navy-900);border:3px solid #fff;box-shadow:0 1px 4px rgba(45,45,67,.4);cursor:grab;transition:transform .1s}
.rs-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.12)}
.rs-range::-moz-range-thumb{pointer-events:auto;width:17px;height:17px;border-radius:50%;background:var(--navy-900);border:3px solid #fff;box-shadow:0 1px 4px rgba(45,45,67,.4);cursor:grab}
.rs-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(251,185,15,.55)}
.rs-btn{width:21px;height:21px;flex:none;border:1.5px solid var(--line);background:#fff;border-radius:5px;font-size:.95rem;line-height:1;color:var(--navy-900);cursor:pointer;display:grid;place-items:center;transition:.12s;font-family:var(--font-body);padding:0}
.rs-btn:hover{border-color:var(--navy-900);background:var(--navy-900);color:#fff}
.rs-btn:active{transform:scale(.92)}

.sidebar-clear{margin:.2rem 0 0}
.sidebar-apply{display:none}

/* ---------------- Toolbar ---------------- */
.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.filters-open{display:none;align-items:center;gap:.5rem;background:var(--navy-900);color:#fff;border:0;border-radius:var(--radius-sm);padding:.6rem 1.05rem;font-family:var(--font-display);font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer}
.fab-badge{background:var(--yellow-500);color:var(--navy-900);border-radius:999px;min-width:20px;height:20px;display:inline-grid;place-items:center;font-size:.72rem;padding:0 .35rem}
.toolbar-sort{display:flex;align-items:center;gap:.6rem;font-size:.86rem;color:var(--slate-600);margin-left:auto}
.toolbar-sort span{white-space:nowrap}
.toolbar-sort select{padding:.55rem .8rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);font-size:.88rem;font-family:var(--font-body);color:var(--ink);background:#fff;cursor:pointer}
.toolbar-sort select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(43,63,208,.12)}

/* ---------------- Risultati ---------------- */
.catalog-results{transition:opacity .18s ease;min-height:240px}
.catalog-results.is-loading{opacity:.45;pointer-events:none}
.catalog-results-head{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin-bottom:1.2rem}
.results-count{margin:0;font-size:.92rem;color:var(--slate-600)}
.results-count strong{font-family:var(--font-display);font-size:1.1rem;color:var(--ink)}
.active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem}
.filter-chip{display:inline-flex;align-items:center;gap:.45rem;background:var(--blue-100);color:var(--blue-600);border-radius:999px;padding:.32rem .45rem .32rem .85rem;font-size:.78rem;font-weight:600;line-height:1.2;transition:.15s}
.filter-chip .x{width:17px;height:17px;flex:none;border-radius:50%;background:rgba(32,48,156,.16);display:grid;place-items:center;font-size:.85rem;line-height:1}
.filter-chip:hover{background:var(--blue-600);color:#fff}
.filter-chip:hover .x{background:rgba(255,255,255,.25)}
.clear-all{font-size:.78rem;font-weight:700;color:var(--slate-600);text-decoration:underline;text-underline-offset:3px}
.clear-all:hover{color:var(--err)}
.pagination .dots{border-color:transparent;color:var(--slate-400)}

/* ---------------- Drawer mobile ---------------- */
.drawer-backdrop{position:fixed;inset:0;background:rgba(7,12,32,.55);opacity:0;visibility:hidden;transition:.25s ease;z-index:130}
.drawer-backdrop.show{opacity:1;visibility:visible}
body.drawer-lock{overflow:hidden}

@media(max-width:980px){
  .catalog-layout{grid-template-columns:1fr;gap:0;padding-top:1.2rem}

  .filters-open{display:inline-flex}
  .catalog-toolbar{position:sticky;top:var(--header-h);z-index:60;background:var(--bg);padding:.65rem 0;margin:0 0 .9rem;box-shadow:0 8px 14px -12px rgba(11,18,48,.25)}

  .catalog-sidebar{position:fixed;top:0;bottom:0;left:0;width:min(420px,94vw);background:var(--bg);z-index:140;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 1rem 1rem;transform:translateX(-105%);transition:transform .3s ease;box-shadow:var(--shadow-pop)}
  .catalog-sidebar.open{transform:none}

  .sidebar-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--navy-900);color:#fff;margin:0 -1rem 1rem;padding:1rem 1.2rem;z-index:5}
  .sidebar-head strong{font-family:var(--font-display);font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em}
  .sidebar-close{background:rgba(255,255,255,.1);border:0;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.3rem;line-height:1;cursor:pointer;display:grid;place-items:center}
  .sidebar-close:hover{background:var(--yellow-500);color:var(--navy-900)}

  .sidebar-apply{display:block;position:sticky;bottom:0;margin:.4rem -1rem 0;padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent)}
}

@media(max-width:620px){
  .catalog-hero-icon{display:none}
  .toolbar-sort span{display:none}
}

/* Albero categorie sidebar a 3 livelli */
.cat-list .cat-sub{list-style:none;margin:.2rem 0 .4rem;padding-left:.9rem;border-left:2px solid var(--line)}
.cat-list .cat-l2 a{font-size:.84rem}

/* Pagina macro: tile categorie figlie */
.macro-cats{margin-top:1.6rem}
.macro-cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1rem}
.macro-cat-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.macro-cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.macro-cat-media{aspect-ratio:16/9;background:var(--navy-900);display:grid;place-items:center;overflow:hidden}
.macro-cat-media img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.macro-cat-card:hover .macro-cat-media img{transform:scale(1.06)}
.macro-cat-body{padding:.85rem 1rem;display:flex;flex-direction:column;gap:.15rem}
.macro-cat-body strong{font-family:var(--font-display);font-size:.95rem;color:var(--ink)}
.macro-cat-count{font-size:.78rem;color:var(--slate-400)}

/* ============ Restyle Figma: fascia gialla + intro categoria ============ */
.cat-hero-img{max-height:380px;overflow:hidden;position:relative}
.cat-hero-img::after{content:"";position:absolute;inset:0;background:rgba(45,45,67,.28)}
.cat-hero-img img{width:100%;height:100%;object-fit:cover;display:block;max-height:380px}
.cat-intro{display:grid;gap:2.4rem;padding:2rem 0 .6rem}
.cat-intro.has-video{grid-template-columns:300px 1fr;align-items:start}
.cat-video{border:8px solid var(--yellow-500);border-radius:12px;overflow:hidden;margin-top:1.2rem;position:relative;z-index:5;background:#000;box-shadow:var(--shadow-card);max-width:300px}
.cat-video video{width:100%;display:block;aspect-ratio:9/16;object-fit:cover}
.cat-intro-text :is(p,ul){color:var(--ink);font-size:.98rem}
@media(max-width:860px){
  .cat-intro.has-video{grid-template-columns:1fr}
  .cat-video{margin-top:.6rem;max-width:260px}
}