/* ============================================================
   SEARCH RESULTS PAGE (/serp) — structure

   Theme-neutral: every colour, font and radius here is a token, and each theme
   supplies its own values plus its own gestures. Price Ninja loads
   themes/base/price-ninja/css/serp-skin.css, UnBox Labs
   themes/unboxlabs/css/serp-skin.css.

   Ported from the SERP mockup kept in the page-templates slot
   `generic-product-page-v8` (draft v5), whose notes carry the rules this markup
   depends on: the isolation under one root class, `.telaio` needing its own
   max-width and padding, `.azioni-barra` switching to flex at 992, and
   `.negozio .marca` rather than `.marca` because the reset's `img{height:auto}`
   is more specific.
   ============================================================ */


.serp-pagina, .serp-pagina * {box-sizing:border-box}
.serp-pagina {background:var(--greige);color:var(--testo);color-scheme:light;font-family:var(--testo-font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;padding-bottom:8px}
.serp-pagina h1, .serp-pagina h2, .serp-pagina h3 {font-family:var(--titoli);font-weight:500;margin:0;text-transform:none;letter-spacing:normal}
.serp-pagina a {color:inherit;text-decoration:none}
.serp-pagina button {font:inherit;color:inherit;cursor:pointer;text-transform:none}
.serp-pagina img {max-width:100%;height:auto}
.serp-pagina .telaio {max-width:1560px;margin:0 auto;padding:0 18px 40px}
.serp-pagina .briciole {display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--tenue);padding:14px 0 10px}
.serp-pagina .briciole a {text-decoration:none}
.serp-pagina .briciole a:hover {color:var(--azione);text-decoration:underline}
.serp-pagina .briciole .sep {opacity:.5}
.serp-pagina .briciole [aria-current] {color:var(--testo-2);font-weight:500}
.serp-pagina .intestazione {padding:0 0 6px}
.serp-pagina .intestazione h1 {font-size:clamp(26px,7vw,38px);line-height:1.08;letter-spacing:-.01em}
.serp-pagina .sommario {max-width:62ch;margin:10px 0 0;color:var(--testo-2);font-size:14.5px;line-height:1.55}
.serp-pagina .sommario b {color:var(--testo);font-weight:600}
.serp-pagina .ponti {display:flex;gap:10px;padding:16px 0 4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.serp-pagina .ponti::-webkit-scrollbar {display:none}
.serp-pagina .ponte {flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--divisore);border-radius:var(--pill);padding:7px 18px 7px 7px;font-size:14px;font-weight:500;white-space:nowrap;box-shadow:0 1px 2px rgba(var(--ombra),.05)}
.serp-pagina .ponte:hover {border-color:var(--bordo-tenue);background:var(--fondo-tenue)}
.serp-pagina .barra {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0 0}
.serp-pagina .azioni-barra {display:none}
.serp-pagina .conteggio {font-family:var(--titoli);font-weight:500;font-size:14.5px;color:var(--testo-2)}
.serp-pagina .azioni-barra {align-items:center;gap:4px}
.serp-pagina .azione {display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:var(--r-md);padding:8px 11px;font-size:13.5px;font-weight:500;color:var(--testo-2)}
.serp-pagina .azione:hover {background:var(--superficie);color:var(--testo)}
.serp-pagina .azione[aria-pressed="true"] {background:var(--azione-tenue);color:var(--azione)}
.serp-pagina .azione svg {width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.serp-pagina .azione .freccina {width:12px;height:12px;flex:0 0 auto;color:var(--testo-2)}
.serp-pagina .testa-filtri {display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:2px 0 12px}
.serp-pagina .testa-filtri h2 {font-size:19px}
.serp-pagina .testa-filtri button {border:0;background:transparent;padding:0;font-size:13px;font-weight:500;color:var(--azione);text-decoration:underline;text-underline-offset:3px}
.serp-pagina .usato {background:var(--superficie);color:var(--testo-2);border-radius:var(--pill);padding:2px 8px;font-size:11px;font-weight:600;letter-spacing:.02em}
.serp-pagina .setaccio {position:relative;margin:0 0 4px}
.serp-pagina .setaccio input {width:100%;height:40px;border:1px solid var(--divisore);background:var(--superficie);border-radius:var(--pill);padding:0 14px 0 38px;font:inherit;font-size:14px;color:var(--testo);outline:none}
.serp-pagina .setaccio input::placeholder {color:var(--tenue)}
.serp-pagina .setaccio input:focus-visible {border-color:var(--arancio);background:var(--card)}
.serp-pagina .setaccio svg {position:absolute;left:14px;top:12px;width:16px;height:16px;fill:none;stroke:var(--tenue);stroke-width:1.8;stroke-linecap:round}
.serp-pagina .istogramma {display:flex;align-items:flex-end;gap:3px;height:44px;margin:6px 0 0}
.serp-pagina .istogramma span {flex:1 1 0;background:var(--superficie);border-radius:3px 3px 0 0}
.serp-pagina .istogramma span.dentro {background:var(--barra-attiva)}
.serp-pagina .doppio {position:relative;height:26px;margin:2px 0 10px}
.serp-pagina .binario, .serp-pagina .tratto {position:absolute;top:12px;height:3px;border-radius:2px}
.serp-pagina .binario {left:0;right:0;background:var(--divisore)}
.serp-pagina .tratto {background:var(--arancio)}
.serp-pagina .doppio input[type="range"] {position:absolute;left:0;top:0;width:100%;height:26px;margin:0;background:transparent;pointer-events:none;outline:none;-webkit-appearance:none;appearance:none}
.serp-pagina .doppio input[type="range"]::-webkit-slider-thumb {-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--card);border:2px solid var(--arancio);box-shadow:0 1px 3px rgba(var(--ombra),.28);cursor:grab}
.serp-pagina .doppio input[type="range"]::-moz-range-thumb {pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--card);border:2px solid var(--arancio);cursor:grab}
.serp-pagina .doppio input[type="range"]:focus-visible::-webkit-slider-thumb {border-color:var(--azione);box-shadow:0 0 0 4px rgba(var(--anello-fuoco),.30)}
.serp-pagina .doppio input[type="range"]:focus-visible::-moz-range-thumb {border-color:var(--azione);box-shadow:0 0 0 4px rgba(var(--anello-fuoco),.30)}
.serp-pagina .forbice {display:flex;align-items:center;gap:8px;margin:0 0 12px}
.serp-pagina .forbice input[type="number"] {flex:1 1 0;width:100%;min-width:0;height:38px;border:1px solid var(--divisore);border-radius:var(--r-md);background:var(--card);padding:0 6px;font:inherit;font-size:14px;font-variant-numeric:tabular-nums;text-align:center;color:var(--testo);outline:none;-moz-appearance:textfield;appearance:textfield}
.serp-pagina .forbice input[type="number"]::-webkit-outer-spin-button, .serp-pagina .forbice input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none;margin:0}
.serp-pagina .forbice input[type="number"]:focus-visible {border-color:var(--arancio)}
.serp-pagina .forbice .tratto-fra {color:var(--tenue)}
.serp-pagina .voce {display:flex;align-items:center;gap:10px;padding:7px 8px 7px 0;font-size:14.5px;cursor:pointer;border-radius:8px;transition:background .15s ease,padding-left .15s ease}
.serp-pagina .voce:hover {background:rgba(var(--voce-hover),.75);padding-left:6px}
.serp-pagina .voce input {position:relative;flex:0 0 auto;width:20px;height:20px;margin:0;-webkit-appearance:none;appearance:none;background:var(--card);border:1.6px solid var(--bordo-controllo);border-radius:6px;cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .12s ease}
.serp-pagina .voce input[type="radio"] {border-radius:50%;}
.serp-pagina .voce input:hover {border-color:var(--arancio)}
.serp-pagina .voce input:active {transform:scale(.88)}
.serp-pagina .voce input:checked {background:var(--arancio);border-color:var(--arancio)}
.serp-pagina .voce input:focus-visible {outline:2px solid var(--azione);outline-offset:2px}
.serp-pagina .voce input[type="checkbox"]::after {content:'';position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid var(--etichetta);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transform-origin:center;transition:transform .2s cubic-bezier(.2,1.5,.4,1)}
.serp-pagina .voce input[type="checkbox"]:checked::after {transform:rotate(45deg) scale(1)}
.serp-pagina .voce input[type="radio"]::after {content:'';position:absolute;inset:3.5px;border-radius:50%;background:var(--etichetta);transform:scale(0);transition:transform .2s cubic-bezier(.2,1.5,.4,1)}
.serp-pagina .voce input[type="radio"]:checked::after {transform:scale(1)}
.serp-pagina .voce .quanti {margin-left:auto;color:var(--tenue);font-size:12.5px;font-variant-numeric:tabular-nums}
.serp-pagina .voce.extra {display:none}
.serp-pagina .gruppo.tutte .voce.extra {display:flex}
/* Hidden, not removed from the DOM: the rail search clears `.tutte` when it is
   emptied, and a button that had been deleted could never bring the entries back. */
.serp-pagina .gruppo.tutte .tutti {display:none}
.serp-pagina .tutti {border:0;background:transparent;padding:6px 0 2px;font-size:13.5px;font-weight:500;color:var(--azione);text-decoration:underline;text-underline-offset:3px}
.serp-pagina .lista {display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.serp-pagina .scheda {position:relative;display:flex;flex-direction:column;gap:6px;background:var(--card);border:1px solid rgba(var(--ombra),.06);border-radius:var(--r-xl);padding:10px 12px 14px;box-shadow:0 1px 2px rgba(var(--ombra),.05),0 10px 26px rgba(var(--ombra),.06);transition:transform .18s ease,box-shadow .18s ease}
@media (hover:hover) {
  .serp-pagina .scheda:hover {transform:translateY(-2px);box-shadow:0 2px 4px rgba(var(--ombra),.06),0 18px 36px rgba(var(--ombra),.11)}
}
@media (prefers-reduced-motion:reduce) {
  .serp-pagina .scheda:hover {transform:none}
}
.serp-pagina .copre {-webkit-tap-highlight-color:transparent}
.serp-pagina .copre:focus-visible {outline:2px solid var(--azione);outline-offset:-3px;border-radius:inherit}
.serp-pagina .copre {position:absolute;inset:0;z-index:1;border-radius:inherit}
.serp-pagina .vetrina {position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;padding:4px;overflow:hidden}
.serp-pagina .vetrina img {width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.serp-pagina .targa {position:absolute;top:10px;left:10px;z-index:4;background:var(--arancio);color:var(--etichetta);border-radius:var(--pill);padding:4px 11px;font-family:var(--titoli);font-weight:500;font-size:12px;letter-spacing:.01em;box-shadow:0 2px 8px rgba(var(--ombra-azione),.30)}
.serp-pagina .nome {font-family:var(--titoli);font-weight:500;font-size:clamp(14.5px,1.15vw,17.5px);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.serp-pagina .soldi {display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap;margin-top:2px}
.serp-pagina .ora {display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.serp-pagina .cifra {font-family:var(--titoli);font-weight:500;font-size:22px;color:var(--prezzo);line-height:1}
.serp-pagina .prima {display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.serp-pagina .barrato {font-size:12.5px;color:var(--barrato);text-decoration:line-through}
.serp-pagina .sconto {background:var(--fondo-sconto);color:var(--verde);border-radius:var(--pill);padding:2px 7px;font-size:11px;font-weight:600}
.serp-pagina .meta {display:flex;align-items:center;gap:4px 7px;flex-wrap:wrap;font-size:12.5px;color:var(--tenue)}
.serp-pagina .negozio {display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--testo-2);white-space:nowrap}
.serp-pagina .negozio .marca {width:auto;height:14px;max-width:58px;flex:0 0 auto;object-fit:contain;display:block}
.serp-pagina .meta > * + *::before {content:'\00B7';margin-right:7px;color:var(--separatore)}
.serp-pagina .gratis, .serp-pagina .pagata {display:inline-flex;align-items:center;gap:5px}
.serp-pagina .gratis {color:var(--verde);font-weight:500}
.serp-pagina .camion {width:17px;height:14px;flex:0 0 auto}
.serp-pagina .offerte {font-size:12.5px;color:var(--azione);font-weight:500}
.serp-pagina .lista.tabella {grid-template-columns:1fr;gap:0;background:var(--card);border:1px solid rgba(var(--ombra),.06);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 1px 2px rgba(var(--ombra),.05),0 10px 26px rgba(var(--ombra),.06)}
.serp-pagina .lista.tabella .scheda {display:grid;grid-template-columns:56px minmax(0,1fr) auto auto 32px;align-items:center;column-gap:16px;row-gap:2px;border:0;border-top:1px solid var(--divisore);border-radius:0;box-shadow:none;padding:10px 16px;transform:none}
.serp-pagina .lista.tabella .scheda:first-child {border-top:0}
.serp-pagina .lista.tabella .scheda:hover {transform:none;box-shadow:none;background:var(--fondo-tenue)}
.serp-pagina .lista.tabella .vetrina {grid-column:1;grid-row:1 / span 2;aspect-ratio:1;padding:0}
.serp-pagina .lista.tabella .targa {display:none}
.serp-pagina .lista.tabella .nome {grid-column:2;grid-row:1;-webkit-line-clamp:1;font-size:15px;padding:0;min-height:0}
.serp-pagina .lista.tabella .meta {grid-column:2;grid-row:2;margin:0;flex-wrap:nowrap;overflow:hidden}
.serp-pagina .lista.tabella .soldi {grid-column:3;grid-row:1 / span 2;margin:0;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;flex-wrap:nowrap;min-width:150px}
.serp-pagina .lista.tabella .ora {justify-content:flex-end}
.serp-pagina .lista.tabella .cifra {font-size:21px}
.serp-pagina .lista.tabella .offerte {grid-column:4;grid-row:1 / span 2;text-align:right;min-width:74px}
@media (max-width:599px) {
  .serp-pagina .lista.tabella .scheda {grid-template-columns:52px minmax(0,1fr);column-gap:12px;row-gap:6px;align-items:start;padding:14px 14px 16px}
  .serp-pagina .lista.tabella .vetrina {grid-row:1 / span 3}
  .serp-pagina .lista.tabella .nome {grid-column:2;grid-row:1;-webkit-line-clamp:2;font-size:14.5px}
  .serp-pagina .lista.tabella .meta {grid-column:2;grid-row:2;flex-wrap:wrap;overflow:visible;font-size:12.5px;gap:4px 8px}
  .serp-pagina .lista.tabella .soldi {grid-column:2;grid-row:3;flex-direction:row;align-items:baseline;justify-content:flex-start;flex-wrap:wrap;gap:4px 10px;min-width:0}
  .serp-pagina .lista.tabella .ora {justify-content:flex-start}
  .serp-pagina .lista.tabella .cifra {font-size:20px}
  .serp-pagina .lista.tabella .prima {display:inline-flex}
  .serp-pagina .lista.tabella .offerte {grid-column:2;grid-row:4;min-width:0;text-align:left}
}
.serp-pagina .strumenti {display:flex;gap:9px;position:sticky;top:var(--testa-h);z-index:30;padding:8px 18px 10px;margin:14px -18px 0;background:var(--greige);box-shadow:0 1px 0 var(--divisore);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.serp-pagina .strumenti::-webkit-scrollbar {display:none}
.serp-pagina .chip .freccina, .serp-pagina .azione .freccina {transition:transform .2s ease}
.serp-pagina .chip .ico {width:18px;height:15px;flex:0 0 auto;color:var(--tenue)}
.serp-pagina .chip .camion {color:var(--tenue)}
.serp-pagina .chip.attivo .camion {color:var(--azione)}
.serp-pagina .chip.attivo .ico {color:var(--azione)}
.serp-pagina .chip .freccina {width:13px;height:13px}
.serp-pagina .chip {flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);border:1px solid rgba(255,255,255,.85);border-radius:var(--pill);padding:11px 16px;font-size:14.5px;font-weight:500;line-height:1.2;min-height:44px;box-shadow:0 1px 2px rgba(var(--ombra),.06),inset 0 1px 0 rgba(255,255,255,.9)}
.serp-pagina .chip.attivo {background:rgba(var(--chip-attivo),.72);border-color:var(--bordo-chip-attivo);color:var(--azione)}
.serp-pagina #apri-filtri.attivo {background:rgba(var(--chip-attivo),.55);-webkit-backdrop-filter:blur(20px) saturate(1.9);backdrop-filter:blur(20px) saturate(1.9);border-color:rgba(255,255,255,.92);color:var(--azione);box-shadow:0 1px 2px rgba(var(--ombra-azione),.12),inset 0 1px 0 rgba(255,255,255,.95)}
.serp-pagina #apri-filtri.attivo .freccina {color:var(--azione)}
.serp-pagina .chip[aria-expanded="true"] .freccina {transform:rotate(180deg)}
.serp-pagina .chip .freccina {width:12px;height:12px;flex:0 0 auto;color:var(--testo-2)}
.serp-pagina .filtri-attivi {display:flex;gap:8px;flex-wrap:wrap;padding:14px 0 4px}
.serp-pagina .tag {display:inline-flex;align-items:center;gap:7px;background:var(--azione-tenue);color:var(--azione);border-radius:var(--pill);padding:7px 9px 7px 14px;font-size:13.5px;font-weight:500;min-height:34px}
.serp-pagina .tag button {border:0;background:transparent;color:var(--azione);font-size:15px;line-height:1;padding:0 2px}
.serp-pagina .gruppo {border-top:1px solid var(--divisore)}
.serp-pagina .gruppo:first-of-type {border-top:0}
.serp-pagina .gruppo[open] {padding-bottom:12px}
.serp-pagina .gruppo>summary {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:14px 0 8px;cursor:pointer;list-style:none;font-family:var(--titoli);font-weight:500;font-size:15px;color:var(--testo)}
.serp-pagina .gruppo>summary::-webkit-details-marker {display:none}
.serp-pagina .gruppo>summary:focus-visible {outline:2px solid var(--azione);outline-offset:2px;border-radius:6px}
.serp-pagina .gruppo .gancio {width:14px;height:14px;flex:0 0 auto;color:var(--testo-2);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.serp-pagina .gruppo[open]>summary .gancio {transform:rotate(180deg)}
.serp-pagina .gruppo.spenta {display:none}
.serp-pagina .corpo-gruppo {overflow:hidden}
.serp-pagina .velo {position:fixed;inset:0;background:rgba(var(--ombra),.34);z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.serp-pagina .velo.aperto {opacity:1;pointer-events:auto}
.serp-pagina .maniglia {width:44px;height:4px;border-radius:99px;background:var(--divisore);margin:6px auto 14px}
.serp-pagina .azioni-sheet {display:flex;flex-direction:column;align-items:stretch;gap:8px;padding-top:16px;position:sticky;bottom:-20px;margin-top:8px;background:var(--card);box-shadow:0 -10px 16px -14px rgba(var(--ombra),.5)}
.serp-pagina .applica {display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--arancio);color:var(--etichetta);font-family:var(--titoli);font-weight:500;letter-spacing:.2px;border:0;border-radius:var(--r-md);min-height:48px;padding:12px 18px;font-size:15.5px}
.serp-pagina .applica:hover {background:var(--azione-hover)}
.serp-pagina .applica:active {transform:scale(.99)}
.serp-pagina .testuale {align-self:center;border:0;background:transparent;color:var(--azione);font-weight:500;font-size:13.5px;padding:6px 4px;text-decoration:underline;text-underline-offset:3px}
.serp-pagina .testuale:hover {color:var(--azione-scuro)}
.serp-pagina .pagine {display:flex;gap:4px;justify-content:center;align-items:center;padding:26px 0 10px;flex-wrap:wrap}
.serp-pagina .pagina {width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:50%;font-family:var(--titoli);font-weight:500;font-size:15px;color:var(--testo-2);font-variant-numeric:tabular-nums;transition:background .15s ease,color .15s ease}
.serp-pagina .pagina:hover {background:var(--superficie);color:var(--testo)}
.serp-pagina .pagina.qui {background:var(--arancio);color:var(--etichetta);box-shadow:0 2px 8px rgba(var(--ombra-azione),.24)}
.serp-pagina .pagina.passo {border:1px solid var(--divisore);background:var(--card);color:var(--testo-2)}
.serp-pagina .pagina.passo:hover {border-color:var(--bordo-tenue);background:var(--fondo-tenue);color:var(--azione)}
.serp-pagina .pagina.passo[disabled] {opacity:.4;pointer-events:none}
.serp-pagina .gancio-nav {width:14px;height:14px}
.serp-pagina .gancio-nav.avanti {transform:rotate(-90deg)}
.serp-pagina .gancio-nav.indietro {transform:rotate(90deg)}
.serp-pagina .vuoto {display:none;padding:26px 4px;color:var(--tenue);font-size:14px}
.serp-pagina .vuoto.viva {display:block}
@media (max-width:599px) {
  .serp-pagina .lista:not(.tabella) {grid-template-columns:1fr;gap:10px;padding-top:14px}
  .serp-pagina .lista:not(.tabella) .scheda {display:grid;grid-template-columns:96px 1fr;column-gap:12px;row-gap:5px;align-items:start;padding:11px}
  .serp-pagina .lista:not(.tabella) .vetrina {grid-column:1;grid-row:1 / span 6;align-self:center;padding:0}
  .serp-pagina .lista:not(.tabella) .nome, .serp-pagina .lista:not(.tabella) .soldi, .serp-pagina .lista:not(.tabella) .meta, .serp-pagina .lista:not(.tabella) .offerte {grid-column:2;min-width:0}
  .serp-pagina .lista:not(.tabella) .nome {padding-right:32px;min-height:0}
  .serp-pagina .lista:not(.tabella) .meta > * + *::before {content:none}
  .serp-pagina .lista:not(.tabella) .soldi {margin-top:1px}
  .serp-pagina .lista:not(.tabella) .targa {top:-11px;left:12px;font-size:11.5px;padding:4px 11px}
  .serp-pagina .lista:not(.tabella) .cifra {font-size:23px}
  .serp-pagina .lista:not(.tabella) .scheda {transform:scale(var(--s,1));transform-origin:center;transition:transform .3s cubic-bezier(.22,1,.36,1)}
  @media (prefers-reduced-motion:reduce) {
    .serp-pagina .lista:not(.tabella) .scheda {transform:none;transition:none}
  }
}
@media (min-width:600px) {
  .serp-pagina .strumenti {padding-left:24px;padding-right:24px;margin-left:-24px;margin-right:-24px}
  .serp-pagina .lista {grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .serp-pagina .lista:not(.tabella) .vetrina {aspect-ratio:auto;height:clamp(140px,13vw,196px)}
}
@media (min-width:992px) {
  .serp-pagina .telaio {display:grid;grid-template-columns:296px 1fr;gap:36px;align-items:start;padding-bottom:56px}
  .serp-pagina .telaio > .testata {grid-column:1 / -1}
  .serp-pagina .colonna-filtri {display:block;position:sticky;top:calc(var(--testa-h) + 16px);max-height:calc(100svh - var(--testa-h) - 44px);overflow:auto;background:var(--card);border:1px solid rgba(var(--ombra),.07);border-radius:var(--r-xl);padding:16px 18px 18px;box-shadow:0 1px 2px rgba(var(--ombra),.05),0 16px 34px -24px rgba(var(--ombra),.22)}
  .serp-pagina .colonna-filtri .gruppo {border-top-color:var(--divisore)}
  .serp-pagina .colonna-filtri .maniglia {display:none}
  .serp-pagina .colonna-filtri .azioni-sheet {position:static;background:none;box-shadow:none;padding-top:18px}
  .serp-pagina .colonna-filtri .applica {display:none}
  .serp-pagina .strumenti, .serp-pagina .filtri-attivi.solo-mobile {display:none}
  .serp-pagina .azioni-barra {display:flex}
  .serp-pagina .barra {display:flex;align-items:center;justify-content:space-between;gap:12px;position:static;padding:6px 0 14px;margin:0 0 20px;background:transparent;border-bottom:1px solid var(--divisore);box-shadow:none}
  .serp-pagina .lista {grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
  .serp-pagina .scheda {padding:12px 14px 16px}
  .serp-pagina .cifra {font-size:24px}
}
@media (min-width:1240px) {
  .serp-pagina .telaio {gap:40px}
}
@media (max-width:991px) {
  .serp-pagina .colonna-filtri {display:none}
}
/* ============================================================
   Port corrections. Everything above is the mockup's own CSS, rescoped; what
   follows is what the real page needs and the mockup could not know about.
   ============================================================ */

/* The mockup hid the filter column on a phone and drew a separate bottom sheet, which
   its script built. Cloning the panel here would duplicate every input inside the form
   and send each filter twice, so the one column becomes the sheet instead. */
@media (max-width: 991.98px) {
  .serp-pagina .colonna-filtri {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    max-height: 82svh; overflow: auto;
    background: var(--card);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: 8px 16px 20px;
    transform: translateY(101%);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 -10px 40px rgba(var(--ombra), .22);
  }
  .serp-pagina .colonna-filtri.aperto { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .serp-pagina .colonna-filtri { transition: none; }
}

/* Brand chips: the mockup's .ponte carried a round logo, these carry a count. */
.serp-pagina .ponte { padding: 7px 16px; gap: 8px; }
.serp-pagina .ponte .quanti { color: var(--tenue); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.serp-pagina .ponte.attivo { background: var(--azione-tenue); border-color: var(--bordo-chip-attivo); color: var(--azione); }
.serp-pagina .ponte.attivo .quanti { color: var(--azione); }

/* Count of active filters, on the chip that opens the sheet. */
.serp-pagina .pallino {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px;
  border-radius: var(--pill); background: var(--azione); color: var(--etichetta);
  font-size: 12px; font-weight: 700; line-height: 1;
}

/* A row hidden by the group's search box. The selector matches the depth of
   `.gruppo.tutte .voce.extra`, which would otherwise win and show it again. */
.serp-pagina .gruppo .voce.spenta { display: none; }

/* Merchant logo inside a filter row. */
.serp-pagina .voce .marca {
  width: 18px; height: 18px; flex: 0 0 auto;
  object-fit: contain; border-radius: var(--pill); background: var(--superficie);
}
.serp-pagina .voce .marchio { text-transform: capitalize; }

/* The slot the mockup used for "6 offers" carries availability instead, so it is not
   the action colour any more: green when it can be bought, red when it cannot. */
.serp-pagina .offerte { color: var(--verde); }
.serp-pagina .offerte.esaurito { color: var(--rosso); }

/* Empty state: the mockup toggled `.viva` from its script, the page renders it or not. */
.serp-pagina .vuoto.viva { display: block; }

/* The command band (active filters + count + sort + view) is a row of its own in the
   page grid, above both columns, so the filter column starts on the same line as the
   first row of cards instead of level with the bar. Source order puts the band before
   the aside, and forcing each child into its column makes the aside land on the next
   row. */
@media (min-width: 992px) {
  .serp-pagina .telaio { row-gap: 0; }
  .serp-pagina .telaio > .fascia-comandi { grid-column: 2; }
  .serp-pagina .telaio > .colonna-filtri { grid-column: 1; }
  .serp-pagina .telaio > .colonna-risultati { grid-column: 2; }
}

/* Shop logo inside a header chip. The mockup blended its product photo into the chip
   with mix-blend-mode; a merchant icon is a small square asset with its own background,
   so it sits on the card colour instead. */
.serp-pagina .ponte img {
  width: 22px; height: 22px; flex: 0 0 auto;
  border-radius: 50%; object-fit: contain; background: var(--card);
}
.serp-pagina .ponte:has(img) { padding-left: 7px; }

/* Active-filter tags live inside the filter card, under its heading, next to the
   controls that set them. On a phone that card is the bottom sheet, so the tags are
   behind the "Filter" chip -- which carries the count of what is active. */
.serp-pagina .colonna-filtri .filtri-attivi {
  padding: 4px 0 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--divisore);
}

/* Everything past the third card is skipped until it is near the viewport. The old
   page did this with base.html's .cv-auto, whose 500px placeholder was measured for
   full-width rows; a card in this grid is nearer 340px, and `auto` lets the browser
   remember the real size after the first pass, so the scrollbar does not jump. */
.serp-pagina .lista .scheda.differita { content-visibility: auto; contain-intrinsic-size: auto 340px; }
.serp-pagina .lista.tabella .scheda.differita { contain-intrinsic-size: auto 64px; }

/* The grid <-> table swap runs inside a view transition, and this is the timing the
   mockup gave it. Without the rule the swap is instant, which is what it had become. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-group(*) {
    animation-duration: .36s;
    animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  }
}

/* 8. The library effect: cards ease down in scale with their distance from the middle
   of the screen. Driven from serp.js on scroll, phones only, grid only. */
@media (max-width: 599px) {
  .serp-pagina .lista:not(.tabella) .scheda {
    transform: scale(var(--s, 1));
    transform-origin: center;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .serp-pagina .lista:not(.tabella) .scheda { transform: none; transition: none; }
}

/* 3b. Opening and closing a filter group animates its height rather than snapping.
   <details> cannot be transitioned directly, so serp.js drives the wrapper.

   Matched on .in-transito alone, not on .gruppo.in-transito: serp.js drives the sort
   menu (.ordina) through this same code, and scoping the rule to .gruppo left .ordina
   with no height transition at all. transitionend then never fired, .in-transito was
   never cleared, and the re-entrancy guard turned every later click into a no-op --
   the menu opened once and stayed stuck open. */
.serp-pagina .corpo-gruppo { overflow: hidden; }
.serp-pagina .in-transito > .corpo-gruppo {
  transition: height .28s cubic-bezier(.22, 1, .36, 1), opacity .22s ease;
}

/* 5. Only the pills are glass: the strip behind them carries no band of its own.
   The mockup filled it (its note 5: content passing under a translucent bar shows
   through at half strength) -- here the pills are opaque enough to read on their own. */
.serp-pagina .strumenti { background: transparent; box-shadow: none; }

/* 6. The line under the title, and its expander. Both were dropped in the port for
   having nothing to expand; the second sentence is what they expand to. */
.serp-pagina .altro { display: none; }
.serp-pagina .sommario.aperta .altro { display: block; margin-top: 8px; }
.serp-pagina .piu {
  border: 0; background: transparent; padding: 0;
  color: var(--azione); font-weight: 500; font-size: 14.5px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* 4. The sort menu. "Best match" is a different kind of answer from a price direction,
   so it sits above a rule rather than in the same run of options. The panel animates
   through the same .corpo-gruppo transition the filter groups use. */
.serp-pagina .ordina { position: relative; }
.serp-pagina .ordina > summary {
  display: inline-flex; align-items: center; gap: 7px;
  list-style: none; cursor: pointer;
  border-radius: var(--pill); padding: 8px 12px;
  font-size: 13.5px; font-weight: 500; color: var(--testo-2);
  transition: background .15s ease, color .15s ease;
}
.serp-pagina .ordina > summary::-webkit-details-marker { display: none; }
.serp-pagina .ordina > summary:hover { background: var(--superficie); color: var(--testo); }
.serp-pagina .ordina > summary:focus-visible { outline: 2px solid var(--azione); outline-offset: 2px; }
.serp-pagina .ordina[open] > summary { background: var(--azione-tenue); color: var(--azione); }
.serp-pagina .ordina .ico { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.serp-pagina .ordina .gancio { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .22s cubic-bezier(.22,1,.36,1); }
.serp-pagina .ordina[open] > summary .gancio { transform: rotate(180deg); }

.serp-pagina .ordina > .corpo-gruppo {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 232px;
  background: var(--card);
  border: 1px solid var(--divisore);
  border-radius: var(--r-lg);
  box-shadow: 0 1px 2px rgba(var(--ombra), .05), 0 16px 34px -18px rgba(var(--ombra), .28);
}
.serp-pagina .ordina .voci { padding: 6px; display: flex; flex-direction: column; }
.serp-pagina .voce-ordina {
  display: block; padding: 10px 12px; border-radius: var(--r-md);
  font-size: 14px; font-weight: 500; color: var(--testo-2); white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.serp-pagina .voce-ordina:hover { background: var(--superficie); color: var(--testo); }
.serp-pagina .voce-ordina.qui { background: var(--azione-tenue); color: var(--azione); }
.serp-pagina .riga-ordina { border: 0; border-top: 1px solid var(--divisore); margin: 6px 8px; }

/* The rail's search sits above the groups, so it needs the breathing room the group
   rules used to give it when it lived inside one. */
.serp-pagina .colonna-filtri > .setaccio { margin: 0 0 14px; }

/* Price bands: the same row as a facet entry, without the control -- the whole row is
   the link, so it works with no JavaScript. */
.serp-pagina .fasce { margin: 0 0 10px; }
.serp-pagina .voce.fascia { padding-left: 2px; }
.serp-pagina .voce.fascia:hover { padding-left: 6px; }

/* The two scrolling strips bleed to the edge of the screen instead of stopping at the
   container's padding: a chip cut by the container reads as broken, one cut by the
   screen reads as "there is more, scroll". The padding puts the first and last chip
   back in line with the content, and the mask fades both ends. */
.serp-pagina .ponti,
.serp-pagina .strumenti {
  margin-left: calc(var(--bordo-pagina) * -1);
  margin-right: calc(var(--bordo-pagina) * -1);
  padding-left: var(--bordo-pagina);
  padding-right: var(--bordo-pagina);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
/* The strip is sticky and carries no band of its own, so the pills need their own room
   above: stuck under the header they would otherwise touch it. */
.serp-pagina .strumenti { padding-top: 14px; padding-bottom: 12px; margin-top: 10px; }

.serp-pagina { --bordo-pagina: 18px; }
@media (min-width: 600px) { .serp-pagina { --bordo-pagina: 24px; } }
@media (min-width: 992px) { .serp-pagina { --bordo-pagina: 32px; } }
@media (min-width: 1240px) { .serp-pagina { --bordo-pagina: 48px; } }

/* The old price carries its own drawn stroke instead of text-decoration; the skin
   decides whether to show it. */
.serp-pagina .barrato { position: relative; display: inline-block; text-decoration: none; line-height: 1.2; }
.serp-pagina .barrato-num { position: relative; z-index: 0; }
.serp-pagina .taglio,
.serp-pagina .taglio-stella { display: none; }

/* The pills carry the sticky strip on their own now that it has no band behind it, so
   they have to hold up over a white card scrolling underneath: at the mockup's 60%
   white they vanished against it. More body, a real border and a shadow that lifts
   them off the content -- the blur stays, so they still read as glass. */
.serp-pagina .chip {
  background: rgba(255, 255, 255, .86);
  border-color: var(--divisore);
  box-shadow: 0 2px 10px rgba(var(--ombra), .10), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.serp-pagina .chip.attivo { background: rgba(var(--chip-attivo), .92); }

/* The "i" beside the count, and the ellipsis where the page window stops short. */
.serp-pagina .conteggio .info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--divisore);
  color: var(--tenue); font-family: var(--testo-font); font-size: 9.5px; font-weight: 600;
  vertical-align: 2px; margin-left: 5px; cursor: help;
}
.serp-pagina .salto { color: var(--tenue); padding: 0 2px; letter-spacing: .08em; }

/* Sorting has to be reachable on a phone. The ported rule hid the whole bar of actions
   below 992px, where the desktop control lives, and the strip only carried Filters and
   the view switch -- so there was no way to sort at all. The bar keeps the sort, the
   strip keeps the view switch, and neither is duplicated. */
.serp-pagina .azioni-barra { display: flex; }
@media (max-width: 991.98px) { .serp-pagina .azioni-barra #vista { display: none; } }