/*
 * Il tema di base dei negozi, nato per Ferrashop.
 *
 * Un negozio che vuole altri colori non tocca questo file — `shop:risorse`
 * lo riscrive a ogni aggiornamento del motore — ma aggiunge un foglio suo in
 * `storefront.brand.fogli`, che arriva dopo e vince.
 *
 * Riproduce l'impianto di Beauticlo — eroe a tutta fascia, marchi in riga,
 * mosaico di banner, categorie tonde, griglie di schede, fascia delle
 * garanzie — con il nero come colore dominante al posto del corallo.
 *
 * Perché scritto da noi e non quello del tema: il foglio originale è di 652 KB
 * minificati, costruito attorno alla griglia Bootstrap e ai moduli di
 * PrestaShop. Ogni pagina che faremo dopo — categoria, scheda, carrello,
 * cassa — dovrebbe combattere con regole pensate per un negozio che non è il
 * nostro. Qui ci sono le stesse proporzioni, in poche centinaia di righe che
 * si leggono e si cambiano.
 *
 * Del tema restano il carattere (Jost), le misure e le fotografie.
 */

/* ------------------------------------------------------------- caratteri */

@font-face { font-family: 'Jost'; src: url('/tema/fonts/jost/Jost-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/tema/fonts/jost/Jost-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/tema/fonts/jost/Jost-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/tema/fonts/jost/Jost-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ---------------------------------------------------------------- valori */

:root {
    --ink: #111;
    --ink-soft: #3a3a3a;
    --muted: #7b7772;
    --line: #e8e5e1;
    --surface: #f6f4f2;
    --surface-2: #efebe7;
    --white: #fff;
    /* Il tema segna le offerte in corallo; qui il segnale è il nero, e il
       corallo non compare da nessuna parte. */
    --flag: #111;
    --shell: min(100% - 36px, 1400px);
    --font: 'Jost', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* ----------------------------------------------------------------------
       Le variabili del foglio precedente, ridette in chiave tema.

       Le pagine che vengono da prima — carrello, cassa, area riservata, blog,
       moduli — sono scritte con classi che chiedono `var(--brand)` e compagnia:
       centotrentadue punti vogliono il rosso, trentasei l'antracite. Quelle
       variabili nel tema non esistevano, e senza queste righe ogni pagina
       portata qui si sarebbe tinta di corallo dove il tema vuole il nero.

       Si ridefiniscono qui invece di correggere duecentosettanta regole
       nell'altro foglio: quattordici righe contro duecentosettanta modifiche,
       e l'altro foglio resta quello che è — se un giorno lo si abbandona, si
       cancella e basta. */
    --brand: #111;
    --brand-strong: #000;
    --brand-soft: #efebe7;
    --brand-pale: #f6f4f2;
    --accent: #111;
    --green: #168a51;
    --anthracite: #111;
    --panel: #fff;
    --radius: 0px;
    --shadow-soft: 0 8px 22px rgba(17, 17, 17, .06);
    --shadow: 0 14px 34px rgba(17, 17, 17, .10);

    /* L'altezza della testata, che qui è appiccicata in alto per intero:
       fascia nera, riga del marchio, riga del menu. Serve a tutto quello che
       si appiccica sotto — il menu dell'area riservata, il sommario della
       cassa, l'indice di un articolo — che senza finirebbe coperto. */
    --header-h: 92px;
    --header-total: 180px;
}

@media (max-width: 991px) {
    /* Senza la riga del menu e con la fascia ridotta a una voce sola. */
    :root { --header-h: 84px; --header-total: 124px; }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--white);
    color: var(--ink);
    font: 400 15px/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.15; }

.shell { width: var(--shell); margin-inline: auto; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Il pulsante: nero pieno, angoli appena smussati, maiuscoletto spaziato.
   È la firma del tema, e vale per tutti i tasti della pagina. */
.t-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    background: var(--ink); color: var(--white); border: 1px solid var(--ink);
    padding: 14px 32px; border-radius: 2px;
    font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    transition: background .15s, color .15s;
}
.t-btn:hover { background: var(--white); color: var(--ink); }
.t-btn.is-light { background: var(--white); color: var(--ink); }
.t-btn.is-light:hover { background: var(--ink); color: var(--white); }
.t-btn.is-small { padding: 11px 22px; font-size: 11px; }

/* L'occhiello sopra ogni titolo di sezione, e il titolo. */
.t-eyebrow {
    margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .2em;
    text-transform: uppercase; color: var(--muted);
}
.t-title { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.01em; }
.t-section-head { text-align: center; margin-bottom: 34px; }
.t-section { padding: 64px 0; }

/* ------------------------------------------------------------- testata */

.t-topbar {
    background: var(--ink); color: rgba(255, 255, 255, .82);
    font-size: 12.5px; letter-spacing: .02em;
}
.t-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 0; }
.t-topbar a:hover { color: var(--white); }

.t-header { position: sticky; top: 0; z-index: 30; background: var(--white); border-bottom: 1px solid var(--line); }
.t-header-main {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 20px; padding: 18px 0;
}
.t-logo { justify-self: center; }
.t-logo img { width: 210px; height: auto; }

/* La ricerca: filetto sotto, nessuna cornice. Nel tema è una riga sottile a
   sinistra del marchio, e regge bene anche stretta. */
.header-search { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; max-width: 320px; }
.header-search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; outline: 0; }
.header-search input::placeholder { color: #a7a29c; }
.header-search button { border: 0; background: none; padding: 0; color: var(--ink); display: flex; }

.t-actions { justify-self: end; display: flex; align-items: center; gap: 22px; }
.t-action { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; position: relative; }
.t-action:hover { color: var(--muted); }
.t-count {
    position: absolute; top: -6px; right: -12px; min-width: 18px; height: 18px;
    border-radius: 999px; background: var(--ink); color: var(--white);
    font-size: 10px; line-height: 18px; text-align: center; letter-spacing: 0;
}

.t-nav { border-top: 1px solid var(--line); }
.t-nav ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 30px; list-style: none; margin: 0; padding: 14px 0; }
.t-nav a { font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.t-nav a:hover { border-color: var(--ink); }
.t-nav .nav-offers { background: var(--ink); color: var(--white); padding: 7px 18px; border: 0; }
.t-nav .nav-offers:hover { background: var(--ink-soft); }

/* ---------------------------------------------------------------- eroe */

/*
 * L'impianto del tema, misure comprese.
 *
 * È la fotografia a dare l'altezza alla fascia — sta nel flusso, non in
 * posizione assoluta — e il testo le si appoggia sopra in assoluto, ancorato
 * al 13% e centrato in verticale. Mettendo in assoluto anche la fotografia la
 * sezione sarebbe collassata a zero, perché non sarebbe rimasto niente a
 * darle un'altezza.
 *
 * Il testo non passa dal guscio centrato del sito: nel tema parte dal 13%
 * della fascia, e da lì prende le sue proporzioni.
 */
.t-hero { position: relative; isolation: isolate; background: var(--surface); }

.t-hero-photo { display: block; width: 100%; height: auto; }

/* Il `picture` che porta le fonti AVIF e WebP non deve contare nel disegno:
   senza, diventa lui il figlio del riquadro, e le regole scritte per l'`img`
   — il flex della testata sul telefono, l'assoluto sopra i 992 pixel, il
   riempimento della scheda — si applicherebbero a una scatola dentro una
   scatola. Il selettore porta anche il tag per pesare quanto la vecchia
   regola `.hero-slide picture`, che lo farebbe tornare un blocco. */
picture.t-picture { display: contents; }

.t-hero-inner {
    position: absolute; z-index: 1;
    top: 0; bottom: 0; left: 13%; right: auto;
    display: flex; align-items: center;
    max-width: 800px;
}
.t-hero-text { width: 100%; }

/* Il sopratitolo è in tondo e grande come il testo, non un maiuscoletto
   spaziato: nel tema è una riga normale che introduce il titolo. */
.t-hero-eyebrow {
    margin: 0; font-size: 20px; font-weight: 500;
    letter-spacing: normal; text-transform: none; color: var(--muted);
}

.t-hero-title {
    font-size: 58px; line-height: 68px; font-weight: 500;
    text-transform: capitalize; margin: 10px 0 30px;
}

.t-hero-lead { margin: 0 0 25px; font-size: 20px; line-height: 26px; color: var(--ink-soft); }

/* Nel tema l'invito è un testo sottolineato, non un tasto pieno. */
.t-hero-cta {
    display: inline-block; font-size: 20px; color: var(--ink);
    text-decoration: underline; text-underline-offset: 5px;
}
.t-hero-cta:hover { opacity: .65; }

/* Gli stessi scalini del tema, larghezza per larghezza. */
@media (max-width: 1449px) { .t-hero-title { font-size: 50px; line-height: 60px; } }
@media (max-width: 1199px) { .t-hero-title { font-size: 40px; line-height: 50px; } }
@media (max-width: 991px) {
    .t-hero-eyebrow { font-size: 16px; }
    .t-hero-title { font-size: 34px; line-height: 44px; }
    .t-hero-lead { font-size: 16px; line-height: 24px; }
}

/*
 * Sul telefono la fotografia va sotto, non dietro.
 *
 * Il tema tiene il testo sopra anche lì, spostato al 4%: su una fascia alta
 * 740 pixel ridotta a 400 di larghezza restano poche decine di pixel di
 * fondo, e il titolo finisce addosso al soggetto. Qui si impila.
 */
@media (max-width: 760px) {
    .t-hero { display: flex; flex-direction: column-reverse; }
    .t-hero-inner {
        position: static; display: block; max-width: none;
        padding: 26px 18px 30px;
    }
    .t-hero-eyebrow { font-size: 15px; }
    .t-hero-title { font-size: 24px; line-height: 32px; margin: 6px 0 14px; }
    .t-hero-lead { font-size: 15px; line-height: 23px; margin-bottom: 18px; }
    .t-hero-cta { font-size: 16px; }
}

/* -------------------------------------------------------------- marchi */

.t-brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px clamp(24px, 5vw, 60px); padding: 30px 0; border-bottom: 1px solid var(--line); }
.t-brands a { font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: #a39e98; white-space: nowrap; }
.t-brands a:hover { color: var(--ink); }

/* ------------------------------------------------------------- mosaico */

.t-mosaic { display: grid; gap: 14px; padding: 44px 0 0; grid-template-columns: 1fr; }
@media (min-width: 880px) { .t-mosaic { grid-template-columns: 1.04fr 1fr; } }

.t-tile { position: relative; overflow: hidden; display: block; background: var(--surface); min-height: 220px; }
.t-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.t-tile:hover img { transform: scale(1.04); }
.t-tile-body { position: relative; z-index: 1; padding: 30px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.t-tile small { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.t-tile strong { font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; }
@media (min-width: 880px) { .t-tile.is-tall { min-height: 460px; } }

/* --------------------------------------------------- categorie tonde */

.t-circles { display: grid; gap: 24px 12px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 720px) { .t-circles { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1080px) { .t-circles { grid-template-columns: repeat(10, 1fr); gap: 20px 8px; } }
.t-circles a { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.t-circle { width: 100%; max-width: 128px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--surface); margin-bottom: 10px; }
.t-circle img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.t-circles a:hover .t-circle img { transform: scale(1.07); }
.t-circles strong { font-size: 14px; font-weight: 500; }
.t-circles small { font-size: 12px; color: var(--muted); }

/* ------------------------------------------------------ schede prodotto
 *
 * Semplici come quelle di Hair Gallery: la fotografia su bianco senza cornice,
 * il nome, il prezzo. Niente riquadro attorno — è la fotografia a delimitare
 * la scheda — e lo sconto è una piccola etichetta sull'angolo.
 */

.t-grid { display: grid; gap: 28px 20px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .t-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .t-grid { grid-template-columns: repeat(4, 1fr); } }

.t-card { position: relative; display: flex; flex-direction: column; background: var(--white); }
/* La fotografia è anche il riferimento dell'etichetta dello sconto: l'angolo
   che le appartiene è quello dell'immagine, non quello della scheda intera. */
.t-card-media { display: block; position: relative; aspect-ratio: 1; background: var(--white); overflow: hidden; }
.t-card-media img {
    width: 100%; height: 100%; object-fit: contain;
    /* Un margine interno perché il prodotto non tocchi i bordi del riquadro,
       come nelle schede del tema. */
    padding: 14px;
    transition: transform .4s ease;
}
.t-card:hover .t-card-media img { transform: scale(1.04); }

/* Lo sconto: etichetta piccola, in basso a destra sulla fotografia. */
.t-flag {
    position: absolute; right: 0; bottom: 0; z-index: 2;
    background: var(--ink); color: var(--white);
    font-size: 12px; font-weight: 600; padding: 3px 9px;
}

.t-card-body { padding: 14px 4px 0; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.t-card-brand { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.t-card h3 { font-size: 14px; font-weight: 400; line-height: 1.45; }
.t-card h3 a:hover { text-decoration: underline; }
.t-card-price { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
.t-card-price s { font-size: 13px; font-weight: 400; color: #a9a49e; margin-left: 8px; }

/* Il tasto non sta sempre in pagina: compare sulla fotografia al passaggio
   del mouse. Dove il mouse non esiste resta sotto, sempre visibile. */
.t-card-action { padding: 12px 0 0; }
.t-card-action button, .t-card-action a {
    display: block; width: 100%; text-align: center; border: 1px solid var(--ink);
    background: transparent; color: var(--ink); padding: 10px 8px;
    font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.t-card-action button:hover, .t-card-action a:hover { background: var(--ink); color: var(--white); }
@media (hover: hover) and (min-width: 760px) {
    .t-card-action { opacity: 0; transition: opacity .2s ease; }
    .t-card:hover .t-card-action { opacity: 1; }
}

/* ------------------------------------------------------------ garanzie */

.t-usp { background: var(--ink); color: rgba(255, 255, 255, .72); }
.t-usp-inner { display: grid; gap: 20px; grid-template-columns: repeat(2, 1fr); padding: 34px 0; }
@media (min-width: 900px) { .t-usp-inner { grid-template-columns: repeat(4, 1fr); } }
.t-usp strong { display: block; color: var(--white); font-size: 14px; font-weight: 500; margin-bottom: 3px; }
.t-usp span { font-size: 13px; }

/* ------------------------------------------------------------- inviti */

.t-invites { display: grid; gap: 16px; }
@media (min-width: 880px) { .t-invites { grid-template-columns: 1fr 1fr; } }
.t-invite { position: relative; overflow: hidden; min-height: 280px; display: flex; align-items: center; background: var(--surface); }
.t-invite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.t-invite::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .93), rgba(255, 255, 255, .6) 52%, transparent 84%); }
.t-invite-body { position: relative; z-index: 1; padding: 34px 32px; max-width: 64%; }
.t-invite small { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.t-invite h3 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 20px; }

/* --------------------------------------------------------- piè di pagina */

.t-footer { background: var(--surface); border-top: 1px solid var(--line); margin-top: 70px; padding: 56px 0 0; }
.t-footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; padding-bottom: 44px; }
@media (min-width: 760px) { .t-footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.t-footer h4 { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.t-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.t-footer li, .t-footer address, .t-footer p { font-size: 14px; color: var(--ink-soft); font-style: normal; }
.t-footer a:hover { color: var(--ink); text-decoration: underline; }
.t-footer-brand img { width: 190px; height: auto; margin-bottom: 16px; }
.t-footer-bottom { border-top: 1px solid var(--line); padding: 18px 0 26px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ------------------------------------------------ condizioni d'acquisto
 *
 * La striscia è il componente `service-strip`, che porta dentro la nota sulla
 * spedizione del paese scelto. Qui prende la forma del tema: fondo nero, una
 * riga sola, un filetto fra una condizione e l'altra.
 */
.service-strip { background: var(--ink); color: rgba(255, 255, 255, .72); margin-top: 8px; }
.service-strip-inner {
    display: grid; gap: 22px 0; grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 34px 0;
}
.service-item {
    display: flex; align-items: center; gap: 14px;
    padding: 0 clamp(12px, 2vw, 28px);
    background: transparent; border: 0; color: inherit; text-align: left; min-width: 0;
}
.service-item svg { width: 26px; height: 26px; flex: none; color: var(--white); }
.service-item strong { display: block; color: var(--white); font-size: 14px; font-weight: 500; }
.service-item span { display: block; margin-top: 2px; font-size: 13px; color: rgba(255, 255, 255, .62); }
@media (min-width: 900px) {
    .service-strip-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .service-item + .service-item { border-left: 1px solid rgba(255, 255, 255, .16); }
}

/* ------------------------------------------------------ domande frequenti */

.t-faq { display: grid; gap: 10px; max-width: 900px; margin-inline: auto; }
@media (min-width: 860px) { .t-faq { grid-template-columns: 1fr 1fr; gap: 10px 24px; } }
.t-faq details { border: 1px solid var(--line); background: var(--white); }
.t-faq summary { cursor: pointer; list-style: none; padding: 14px 18px; font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; gap: 12px; }
.t-faq summary::-webkit-details-marker { display: none; }
.t-faq summary::after { content: '+'; color: var(--muted); }
.t-faq details[open] summary::after { content: '−'; }
.t-faq p { margin: 0; padding: 0 18px 16px; font-size: 14px; color: var(--ink-soft); }

/* ----------------------------------------------------------- assistenza
 *
 * Il riquadro fisso in basso a destra: un tasto che apre l'elenco dei canali.
 * Senza queste regole le icone uscivano alla dimensione naturale del disegno
 * — mezzo schermo l'una — perché il componente veniva dal foglio precedente e
 * qui non aveva nessuno stile.
 */

.support { position: fixed; right: 20px; bottom: 20px; z-index: 41; }

.support-button {
    display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
    background: var(--ink); color: var(--white); border: 0; border-radius: 999px;
    padding: 10px 20px 10px 11px; font: inherit; font-size: 13px; font-weight: 500;
    letter-spacing: .06em; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.support-button:hover { background: var(--ink-soft); }
.support-button-mark {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(255, 255, 255, .16); flex: none;
}
.support-button-mark svg { width: 17px; height: 17px; }

/* Il pallino di stato: verde quando c'è qualcuno che risponde adesso. */
.support-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .45); flex: none; }
.support-dot.is-on { background: #4ade80; }

.support-panel {
    position: absolute; right: 0; bottom: calc(100% + 12px); width: min(92vw, 330px);
    max-height: min(70vh, 520px); display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--line);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
}
.support-panel[hidden] { display: none; }

.support-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; }
.support-head h2 { font-size: 16px; font-weight: 500; }
.support-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }

.support-close { width: 30px; height: 30px; flex: none; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; }
.support-close:hover { color: var(--ink); }
.support-close svg { width: 16px; height: 16px; }

.support-channels { padding: 0 12px 14px; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overscroll-behavior: contain; }

.support-channel {
    display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left;
    padding: 11px 12px; border: 1px solid transparent; background: transparent;
    font: inherit; color: var(--ink);
}
.support-channel:hover { border-color: var(--line); background: var(--surface); }

.support-icon {
    width: 36px; height: 36px; flex: none; border-radius: 50%;
    display: grid; place-items: center; background: var(--surface); color: var(--ink);
}
.support-icon svg { width: 18px; height: 18px; }
/* Il verde di WhatsApp resta il suo: è un marchio, non una scelta di gusto. */
.support-icon.is-whatsapp { background: #e7f7ec; color: #128c4a; }

.support-text { display: block; min-width: 0; }
.support-text strong { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; }
.support-text em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.support-value { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }

/* ------------------------------------------------------- scheda prodotto
 *
 * Due colonne: la fotografia a sinistra resta ferma mentre la destra scorre.
 * È `position: sticky` e non uno script — si sgancia da sola quando la colonna
 * destra finisce, che è esattamente il comportamento del modello.
 */

.t-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    padding: 18px 0; font-size: 13px; color: var(--muted); }
.t-crumbs a { color: var(--muted); }
.t-crumbs a:hover { color: var(--ink); }
.t-crumbs [aria-current] { color: var(--ink); }

.t-pdp { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; }

.t-pdp-media { min-width: 0; }
/* Il riquadro è quadrato qualunque sia la fotografia: l'immagine sta dentro in
   posizione assoluta. Con la griglia di prima una foto verticale — 654×961 —
   allungava il riquadro fino a 945 pixel, la colonna superava l'altezza dello
   schermo e non poteva più restare ferma accanto alla scheda. */
.t-pdp-photo { background: #fff; border: 1px solid var(--line); aspect-ratio: 1;
    position: relative; overflow: hidden; }
.t-pdp-photo img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px);
    object-fit: contain; }

.t-pdp-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.t-pdp-thumbs .pdp-thumb { width: 66px; height: 66px; padding: 5px; background: #fff;
    border: 1px solid var(--line); cursor: pointer; }
.t-pdp-thumbs .pdp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.t-pdp-thumbs .pdp-thumb.is-current { border-color: var(--ink); }

.t-pdp-info { min-width: 0; }
.t-pdp-info h1 { font-size: 26px; font-weight: 500; line-height: 1.25; margin: 0 0 10px; }

.t-pdp-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px;
    color: var(--muted); margin: 0 0 14px; }
.t-pdp-meta a { color: var(--ink); text-decoration: underline; }

.t-pdp-price { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.t-pdp-price strong { font-size: 30px; font-weight: 500; }
.t-pdp-price s { color: var(--muted); font-size: 16px; }

.t-pdp-vat { font-size: 12.5px; color: var(--muted); margin: 0 0 14px; }

.t-pdp-stock { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0 0 18px; }
.t-pdp-stock span { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.t-pdp-stock.is-in span { background: #1b9c57; box-shadow: 0 0 0 3px rgba(27,156,87,.16); }
.t-pdp-stock.is-out span { background: #b4b4b4; box-shadow: 0 0 0 3px rgba(0,0,0,.07); }
.t-pdp-stock.is-out { color: var(--muted); }

.t-pdp-intro { font-size: 14px; color: var(--muted); margin-bottom: 18px; }

.t-pdp-badges { list-style: none; margin: 0 0 18px; padding: 0; display: flex;
    flex-wrap: wrap; gap: 14px; }
.t-pdp-badges li { display: flex; flex-direction: column; align-items: center;
    gap: 4px; width: 70px; text-align: center; font-size: 11px; color: var(--muted); }
.t-pdp-badges img { width: 40px; height: 40px; object-fit: contain; }

.t-pdp-variant { display: block; margin-bottom: 14px; }
.t-pdp-variant > span { display: block; font-size: 13px; margin-bottom: 6px; }
.t-pdp-variant select, .t-atc-variant select {
    width: 100%; padding: 11px 12px; border: 1px solid var(--line);
    background: #fff; font: inherit; font-size: 14px; border-radius: var(--radius, 5px);
}

.t-pdp-tiers { border: 0; margin: 0 0 18px; padding: 0; }
.t-pdp-tiers legend { font-size: 13px; margin-bottom: 8px; padding: 0; }
.t-pdp-tier { display: flex; align-items: center; gap: 10px; padding: 11px 13px;
    border: 1px solid var(--line); margin-bottom: 8px; cursor: pointer; font-size: 14px; }
.t-pdp-tier:has(input:checked) { border-color: var(--ink); background: var(--surface); }
.t-pdp-tier-text { flex: 1; }
.t-pdp-tier-text em { font-style: normal; color: #1b9c57; }
.t-pdp-tier-price { display: flex; align-items: baseline; gap: 7px; }
.t-pdp-tier-price s { color: var(--muted); font-size: 12.5px; }
.t-pdp-tier-offer { font-weight: 500; font-size: 11px; text-transform: uppercase; }

.t-pdp-buy { display: flex; gap: 10px; align-items: stretch; margin-bottom: 16px; }
.t-pdp-cta { flex: 1; }

.qty-stepper.t-qty { display: flex; align-items: center; border: 1px solid var(--line); flex: none; }
.qty-stepper.t-qty button { width: 38px; align-self: stretch; border: 0; background: transparent;
    font: inherit; font-size: 17px; cursor: pointer; color: var(--ink); }
.qty-stepper.t-qty input { width: 48px; text-align: center; border: 0; font: inherit;
    font-size: 14px; padding: 10px 0; -moz-appearance: textfield; }
.qty-stepper.t-qty input::-webkit-outer-spin-button,
.qty-stepper.t-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.t-pdp-ship { list-style: none; margin: 0 0 16px; padding: 14px; border: 1px solid var(--line);
    display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; }
.t-pdp-ship li { display: flex; gap: 10px; align-items: center; }
.t-pdp-ship svg { width: 18px; height: 18px; flex: none; }

.t-pdp-help { display: flex; gap: 11px; align-items: center; padding: 13px 14px;
    background: var(--surface); margin-bottom: 26px; color: var(--ink); }
.t-pdp-help svg { width: 20px; height: 20px; flex: none; }
.t-pdp-help strong { display: block; font-size: 14px; font-weight: 500; }
.t-pdp-help small { display: block; font-size: 12.5px; color: var(--muted); }

.t-pdp-block { margin-bottom: 26px; }
.t-pdp-block h2 { font-size: 17px; font-weight: 500; margin: 0 0 12px; }

.t-pdp-bundle { list-style: none; margin: 0; padding: 0; display: flex;
    flex-direction: column; gap: 10px; }
.t-pdp-bundle li { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.t-pdp-bundle img { width: 52px; height: 52px; object-fit: contain; flex: none;
    background: #fff; border: 1px solid var(--line); padding: 4px; }
.t-pdp-bundle em { font-style: normal; color: var(--muted); margin-left: 6px; }

.t-pdp-accordion details { border-top: 1px solid var(--line); }
.t-pdp-accordion details:last-child { border-bottom: 1px solid var(--line); }
.t-pdp-accordion summary { cursor: pointer; padding: 15px 0; font-size: 16px;
    list-style: none; display: flex; align-items: center; justify-content: space-between; }
.t-pdp-accordion summary::-webkit-details-marker { display: none; }
.t-pdp-accordion summary::after { content: '+'; font-size: 19px; color: var(--muted); }
.t-pdp-accordion details[open] summary::after { content: '−'; }
.t-pdp-accordion details > *:not(summary) { padding-bottom: 18px; font-size: 14px; }

.t-pdp-specs { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.t-pdp-specs dt { color: var(--muted); }
.t-pdp-specs dd { margin: 0; }

/* -------------------------------------------------- la barra d'acquisto */

.t-atc {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(0,0,0,.09);
    transform: translateY(100%); transition: transform .28s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.t-atc.is-shown { transform: translateY(0); }

.t-atc-inner { display: flex; align-items: center; gap: 16px; padding: 10px 0; }

.t-atc-product { display: none; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.t-atc-product img { width: 48px; height: 48px; object-fit: contain; flex: none; }
.t-atc-text { min-width: 0; }
.t-atc-text strong { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-atc-text span { font-size: 14px; }

.t-atc-form { display: flex; align-items: center; gap: 9px; flex: 1; }
.t-atc-form .t-btn { flex: 1; }
.t-atc-variant { flex: 1; min-width: 0; max-width: 160px; }
.t-atc-variant select { padding: 9px 10px; }

@media (min-width: 700px) {
    .t-atc-form { flex: none; }
    .t-atc-form .t-btn { flex: none; }
}

@media (min-width: 960px) {
    .t-pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 46px; }

    /* Il punto in cui si ferma: sotto la testata, che è anch'essa ferma e alta
       147 pixel, non sotto il bordo dello schermo — o la fotografia finirebbe
       mezza coperta dal menu.

       E deve starci: una colonna più alta dello schermo non può restare
       ferma, scorre e basta. Il riquadro quadrato non supera quindi l'altezza
       che resta tolti testata, miniature e margini. */
    .t-pdp-media { position: sticky; top: 163px; align-self: start; }
    .t-pdp-photo { max-width: max(360px, calc(100vh - 270px)); margin-inline: auto; }
    .t-pdp-thumbs { max-width: max(360px, calc(100vh - 270px)); margin-inline: auto; }

    .t-atc-product { display: flex; }
}

/* ----------------------------------------------- tabella delle varianti
 *
 * Una riga per tonalità, con la sua quantità: chi compra tinte ne prende sei
 * diverse in un ordine solo. La fotografia è la stessa su ogni riga — è quella
 * del prodotto — e serve a riconoscere la scheda, non la tonalità.
 */

.t-variants { margin: 0 0 30px; }
.t-variants-head { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 12px; }
.t-variants-head h2 { font-size: 19px; font-weight: 500; margin: 0; }
.t-variants-head p { font-size: 13px; color: var(--muted); margin: 0; }

.t-variants-scroll { overflow-x: auto; border: 1px solid var(--line); }
.t-variants table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
.t-variants th { text-align: left; font-weight: 500; font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.t-variants td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.t-variants tr:last-child td { border-bottom: 0; }
.t-variants tr.is-out td { color: var(--muted); }

.t-variants img { width: 44px; height: 44px; object-fit: contain; display: block; }
.t-variant-name { font-weight: 500; }
.t-variant-stock { font-size: 12.5px; white-space: nowrap; }
.t-variant-stock.is-in { color: #1b9c57; }

.t-variants .qty-stepper { width: max-content; }
.t-variants .qty-stepper input { width: 44px; padding: 7px 0; }
.t-variants .qty-stepper button { width: 30px; font-size: 15px; }

.t-variants-foot { display: flex; justify-content: flex-end; padding: 14px 12px 0; }

/* -------------------------------------------------------- le recensioni */

.t-reviews { display: grid; gap: 16px; grid-template-columns: 1fr; }
.t-review { border: 1px solid var(--line); padding: 16px 17px; background: #fff; }
.t-review-stars { color: #f5a623; letter-spacing: 1px; margin: 0 0 8px; font-size: 14px; }
.t-review h3 { font-size: 15px; font-weight: 500; margin: 0 0 6px; }
.t-review p { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; color: var(--muted); }
.t-review footer { font-size: 12.5px; }
.t-review footer strong { font-weight: 500; }

.t-reviews-score { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
    margin: 0 0 18px; font-size: 14px; }
.t-reviews-score strong { font-size: 17px; font-weight: 500; }
.t-reviews-score a { text-decoration: underline; }

@media (min-width: 640px) {
    .t-reviews { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
    .t-reviews { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------- il carrello dentro la riga variante
 *
 * Quantità e tasto sulla stessa riga: sono un gesto solo — quante ne voglio,
 * le prendo — e separarli metterebbe in mezzo uno spazio che si legge come un
 * passaggio in più.
 */

.t-variant-add { display: flex; align-items: center; gap: 8px; }

.t-variant-cart {
    width: 38px; height: 38px; flex: none; border: 0; cursor: pointer;
    background: var(--ink); color: #fff; display: grid; place-items: center;
    border-radius: var(--radius, 5px); padding: 0;
}
.t-variant-cart:hover { opacity: .86; }
.t-variant-cart svg { width: 17px; height: 17px; }

/* ------------------------------------------- le recensioni, ripulite */

.t-reviews-score { justify-content: center; text-align: center; }
.t-review {
    border: 1px solid var(--line); padding: 22px 20px; background: #fff;
    display: flex; flex-direction: column; gap: 2px;
}
.t-review-stars { color: #f5a623; letter-spacing: 2px; font-size: 15px; margin: 0 0 10px; }
.t-review h3 { font-size: 15.5px; font-weight: 500; margin: 0 0 8px; line-height: 1.35; }
.t-review p {
    font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin: 0 0 16px;
    /* Le recensioni lunghe non sfondano la scheda: quattro righe e poi
       si va su Trustpilot, che è il posto dove stanno per intero. */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.t-review footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }

.t-reviews-more { text-align: center; margin: 26px 0 0; }

/* Il tasto vuoto: porta fuori dal sito, e un pieno nero accanto a
   «aggiungi al carrello» si prenderebbe la stessa attenzione. */
.t-btn.is-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.t-btn.is-ghost:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------ la testata che ruota
 *
 * Le diapositive stanno impilate nello stesso posto, non in fila: così la
 * pagina sotto non salta quando ne cambia una, e l'altezza è sempre quella
 * della fotografia. Restano tutte nel documento — le trova un motore di
 * ricerca — e sono le classi a dire quale si vede.
 */

.t-hero-slider { position: relative; }

.t-hero-slider .hero-slide { display: none; }
.t-hero-slider .hero-slide.is-current { display: block; }
/* Senza JavaScript non arriva nessuna classe: si vede la prima, che è
   esattamente quello che serve. */
.t-hero-slider .hero-slide:first-child { display: block; }
.t-hero-slider .hero-slide:first-child:not(.is-current):has(~ .is-current) { display: none; }

/* I pallini con le misure del tema: tondi da tredici, quello acceso lungo
   trentacinque. Restano scuri e non bianchi come i loro, perché le nostre
   fotografie hanno il fondo chiaro e dei pallini bianchi sparirebbero. */
.t-hero-dots {
    position: absolute; left: 0; right: 0; bottom: 30px; z-index: 2;
    display: flex; justify-content: center; gap: 7px;
}
.t-hero-dots button {
    width: 13px; height: 13px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(17, 17, 17, .26); transition: width .2s, background .2s;
}
.t-hero-dots button[aria-selected="true"] { width: 35px; background: var(--ink); }

/* ------------------------------------------------ mosaico, come nel tema
 *
 * Sull'immagine solo la pastiglia bianca col nome, centrata in basso.
 */

.t-tile-label {
    position: absolute; z-index: 1; left: 50%; bottom: 26px; transform: translateX(-50%);
    background: #fff; color: var(--ink);
    padding: 13px 30px; white-space: nowrap;
    font-size: 14px; font-weight: 500;
    transition: background .15s, color .15s;
}
.t-tile:hover .t-tile-label { background: var(--ink); color: #fff; }

@media (max-width: 520px) {
    /* Su schermo stretto una pastiglia lunga uscirebbe dal riquadro. */
    .t-tile-label { max-width: calc(100% - 28px); white-space: normal; text-align: center; padding: 11px 20px; }
}

/* ------------------------------------------- le tendine a colonne del menu
 *
 * Si aprono al passaggio del mouse e all'arrivo del fuoco, senza JavaScript.
 * Il pannello è largo quanto la fascia e non ancorato alla voce: attaccato
 * sotto l'ultima voce a destra uscirebbe dallo schermo, e la pagina
 * scorrerebbe in orizzontale anche a menu chiuso, perché un elemento nascosto
 * con `visibility` occupa spazio lo stesso.
 */

.t-nav { position: relative; }
.t-nav-item { position: static; }

.t-nav-panel {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 28;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .07);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.t-nav-item:hover > .t-nav-panel,
.t-nav-item:focus-within > .t-nav-panel {
    opacity: 1; visibility: visible; transform: none;
}

.t-nav-cols {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 26px 34px; padding: 40px 0 44px; align-items: start;
}

/* L'intestazione di colonna è maiuscoletto e nera: è il nome del ramo, e
   dev'essere distinguibile a colpo d'occhio dalle voci che le stanno sotto. */
.t-nav-col-head {
    display: block; margin-bottom: 14px;
    font-size: 13px; font-weight: 500; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink);
}
.t-nav-col-head:hover { text-decoration: underline; text-underline-offset: 4px; }

.t-nav-col ul { list-style: none; margin: 0; padding: 0; }
.t-nav-col li a {
    display: block; padding: 5px 0;
    font-size: 14px; font-weight: 400; letter-spacing: normal;
    text-transform: none; color: var(--ink-soft);
}
.t-nav-col li a:hover { color: var(--ink); }

.t-nav-all {
    grid-column: 1 / -1;
    font-size: 13px; font-weight: 500; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink);
}
.t-nav-all:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Sotto i 991px la testata passa al pannello del telefono: una tendina che
   si apre al passaggio del mouse non ha senso dove il mouse non c'è. */
@media (max-width: 991px) {
    .t-nav-panel { display: none; }
}

/* Il pannello non eredita le regole della barra.
 *
 * `.t-nav ul` e `.t-nav a` valgono anche qui dentro: la prima porta
 * `display: flex` e metterebbe le voci di colonna in riga, la seconda ha
 * specificità maggiore di `.t-nav-col-head` e le imporrebbe corpo e filetto
 * della barra. Si riscrivono sotto `.t-nav-panel`, così la cosa non dipende
 * dall'ordine in cui i fogli finiscono uno sull'altro. */
.t-nav .t-nav-panel ul {
    display: block; justify-content: normal; flex-wrap: nowrap;
    gap: 0; margin: 0; padding: 0; list-style: none;
}
.t-nav .t-nav-panel a {
    border-bottom: 0; padding-bottom: 0;
}
.t-nav .t-nav-panel .t-nav-col-head {
    font-size: 13px; font-weight: 500; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink);
}
.t-nav .t-nav-panel .t-nav-col li a {
    font-size: 14px; letter-spacing: normal; text-transform: none;
    color: var(--ink-soft); padding: 5px 0;
}
.t-nav .t-nav-panel .t-nav-col li a:hover { color: var(--ink); }
.t-nav .t-nav-panel .t-nav-all {
    font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}

/* Il blocco dei rami senza figli si divide da sé: diciotto voci in una
   colonna sola sarebbero un pannello alto quanto lo schermo. */
.t-nav-col.is-flat { grid-column: span 2; }
.t-nav .t-nav-panel .t-nav-col.is-flat ul {
    columns: 2; column-gap: 34px;
}
@media (min-width: 1200px) {
    .t-nav-col.is-flat { grid-column: span 3; }
    .t-nav .t-nav-panel .t-nav-col.is-flat ul { columns: 3; }
}
.t-nav .t-nav-panel .t-nav-col.is-flat li { break-inside: avoid; }

/* =======================================================================
   IL LISTATO: categoria, pagina di filtro, marchio
   =======================================================================

   Il tema Beauticlo non ha un listato con i filtri in colonna — le sue
   pagine di categoria sono una griglia e basta. Queste regole sono nostre,
   scritte con le misure e i colori del tema: nero al posto del corallo,
   nessun angolo arrotondato, il Jost ovunque.

   I nomi delle classi dei filtri non si potevano scegliere: lo script del
   cursore dei prezzi cerca `.filter-panel`, inserisce le maniglie dopo
   `.filter-price` e marca il contenitore con `has-slider`. Qui cambia il
   vestito, non l'ossatura. */

.t-listing { display: grid; gap: 22px; align-items: start; padding-bottom: 20px; }
@media (min-width: 960px) {
    .t-listing { grid-template-columns: 250px minmax(0, 1fr); gap: 36px; }
}

/* La griglia dentro il listato ha una colonna in meno che in home: lì è a
   tutta fascia, qui divide lo spazio con i filtri, e quattro schede in
   settecento pixel diventano quattro francobolli. */
.t-listing-main .t-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .t-listing-main .t-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1360px) { .t-listing-main .t-grid { grid-template-columns: repeat(4, 1fr); } }

/* ------------------------------------------------------- la testata --- */

.t-cat-head { padding: 4px 0 26px; }
.t-cat-head .t-title { margin-bottom: 4px; }

.category-unfilter { margin: 10px 0 0; font-size: 13px; }
.category-unfilter a { color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.category-unfilter a:hover { color: var(--ink); }

/* Le sottocategorie come pastiglie: sono navigazione, non testo, e in riga
   si contano con un'occhiata invece di leggerle una per una. */
.category-children { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.category-children a {
    padding: 8px 16px; border: 1px solid var(--line); background: var(--white);
    font-size: 13px; color: var(--ink-soft);
}
.category-children a:hover { border-color: var(--ink); color: var(--ink); }

/* Sul telefono le sottocategorie stanno su una riga che scorre: a capo, nove
   pulsanti occupavano mezzo schermo prima del primo prodotto. */
@media (max-width: 767px) {
    .category-children { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
        margin-right: -18px; padding-right: 18px; -webkit-overflow-scrolling: touch; }
    .category-children::-webkit-scrollbar { display: none; }
    .category-children a { flex: none; white-space: nowrap; }
}

/* Il testo si limita in altezza, non nel contenuto: c'è tutto nel documento
   anche da chiuso, ed è quello che conta per chi lo legge a macchina. */
/* A tutta larghezza, come la griglia dei prodotti sotto: stretta a 900 pixel
   lasciava metà pagina vuota accanto al testo che presenta la categoria. */
.category-intro { position: relative; margin-top: 16px; max-width: none; }
.category-intro .prose { max-width: none; }
.category-intro .prose { overflow: hidden; max-height: 9em; transition: max-height .2s; }
.category-intro input:checked ~ .prose { max-height: none; }
.category-intro .prose::after {
    content: ''; position: absolute; left: 0; right: 0; top: 6em; height: 3em;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--white));
    pointer-events: none;
}
.category-intro input:checked ~ .prose::after { display: none; }
.category-intro > label {
    display: inline-block; margin-top: 10px; cursor: pointer;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    border-bottom: 1px solid var(--ink);
}
.category-intro > label .when-open { display: none; }
.category-intro input:checked ~ label .when-closed { display: none; }
.category-intro input:checked ~ label .when-open { display: inline; }
/* Il testo sta tutto nello spazio: niente sfumatura e niente pulsante. */
.category-intro.is-intera > label,
.category-intro.is-intera .prose::after { display: none; }

/* Il testo lungo del catalogo. Il tema non aveva una classe per il testo
   scritto a mano dal pannello: questa è la sola. */
.prose { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); }
.prose p { margin: 0 0 .7rem; }
.prose :is(h2, h3) { font-size: 17px; font-weight: 500; margin: 20px 0 8px; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 .8rem 1.2rem; padding: 0; }
.prose li { margin-bottom: .3rem; }
.prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.category-footer { padding: 10px 0 8px; }
.category-long { max-width: none; }

/* ------------------------------------------------------- i filtri --- */

.filter-panel { border: 1px solid var(--line); background: var(--white); }
.filter-panel > summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; cursor: pointer; list-style: none;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.filter-panel > summary::-webkit-details-marker { display: none; }
.filter-chevron { font-size: 16px; color: var(--muted); }
.filter-panel[open] .filter-chevron { transform: rotate(45deg); }
.filter-body { padding: 0 16px 16px; }

.filter-group { border-top: 1px solid var(--line); padding: 12px 0 10px; }
.filter-group > summary {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; list-style: none; font-size: 13px; font-weight: 500;
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-symbol { color: var(--muted); }
.filter-group:not([open]) .filter-symbol::after { content: '+'; }
.filter-group[open] .filter-symbol { font-size: 0; }
.filter-group[open] .filter-symbol::after { content: '−'; font-size: 13px; }

.filter-options { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; max-height: 270px; overflow-y: auto; }
.filter-options label {
    display: flex; align-items: center; gap: 9px; padding: 6px 6px;
    cursor: pointer; font-size: 13px; color: var(--ink-soft);
}
.filter-options label:hover { background: var(--surface); }
.filter-options input[type='checkbox'] { flex: 0 0 auto; accent-color: var(--ink); }
.filter-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-options small { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

/* Il campione di colore: un rettangolo, non un cerchio — il tema non ha
   angoli tondi da nessuna parte e uno qui si noterebbe. */
.filter-colour .product-swatch {
    width: 22px; height: 15px; flex: 0 0 auto;
    border: 1px solid var(--line); background-size: cover; background-position: center;
}

.filter-more > summary {
    cursor: pointer; list-style: none; margin-top: 8px;
    font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
}
.filter-more > summary::-webkit-details-marker { display: none; }

.filter-price { display: flex; align-items: flex-end; gap: 6px; }
.filter-price label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.filter-price input {
    font: inherit; font-size: 13px; width: 100%; height: 34px; padding: 0 8px;
    border: 1px solid var(--line); background: var(--white); color: var(--ink);
}
.filter-price input:focus { outline: 0; border-color: var(--ink); }
.filter-price-sep { padding-bottom: 8px; color: var(--muted); }

/* Il cursore a due maniglie, costruito dallo script sopra le due caselle.
   Le maniglie sono quelle native: funzionano da tastiera e sotto le dita
   senza che nessuno debba reinventarle. */
.filter-slider { position: relative; height: 30px; margin: 14px 2px 2px; }
.filter-slider-track {
    position: absolute; left: 0; right: 0; top: 13px; height: 3px;
    background: var(--surface-2);
}
.filter-slider-fill { position: absolute; top: 0; bottom: 0; background: var(--ink); }
.filter-slider-input {
    position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 30px;
    margin: 0; background: transparent; -webkit-appearance: none; appearance: none;
    pointer-events: none;
}
.filter-slider-input:focus { outline: 0; }
.filter-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 16px; height: 16px; border-radius: 50%; cursor: grab;
    background: var(--white); border: 2px solid var(--ink);
}
.filter-slider-input::-moz-range-thumb {
    pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; cursor: grab;
    background: var(--white); border: 2px solid var(--ink);
}
.filter-slider-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--surface-2); }
.filter-slider-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--surface-2); }

/* Con il cursore acceso le caselle diventano l'etichetta del cursore, e si
   possono ancora correggere a mano: serve a chi ha un budget preciso. */
.filter-options-price.has-slider .filter-price input { background: var(--surface); border-color: transparent; }
.filter-options-price.has-slider .filter-price input:focus { background: var(--white); border-color: var(--ink); }

.filter-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.filter-actions .t-btn { flex: 1; text-align: center; }
.filter-reset { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.filter-reset:hover { color: var(--ink); }

/* ------------------------------------------- la barra e l'ordinamento --- */

.listing-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}
.listing-toolbar > strong { font-size: 13px; font-weight: 500; color: var(--muted); }
.listing-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.listing-sort label { color: var(--muted); }
.listing-sort select {
    font: inherit; font-size: 13px; height: 34px; padding: 0 8px;
    border: 1px solid var(--line); background: var(--white); color: var(--ink);
}

/* ------------------------------------------------------ la paginazione --- */

/* Numeri veri e non «carica altro»: una pagina che si allunga con JavaScript
   non ha un indirizzo, e quello che non ha un indirizzo non si può mandare a
   qualcuno né far indicizzare. */
.listing-pagination {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px; margin-top: 36px; font-size: 13px;
}
.listing-pagination a, .listing-pagination span {
    min-width: 38px; height: 38px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); background: var(--white);
}
.listing-pagination a:hover { border-color: var(--ink); }
.listing-pagination .is-current { background: var(--ink); border-color: var(--ink); color: var(--white); }
.listing-pagination .is-off { color: #bdb9b4; }

/* ---------------------------------------------------- quando non c'è niente --- */

.empty-note {
    border: 1px solid var(--line); background: var(--white);
    padding: 34px 26px; text-align: center;
}
.empty-note strong { display: block; font-size: 16px; font-weight: 500; }
.empty-note p { margin: 8px 0 18px; font-size: 14px; color: var(--muted); }

/* ------------------------------------------------ la pagina di un marchio --- */

/* Altezza fissa e larghezza libera: i loghi arrivano in proporzioni diverse,
   e un riquadro fisso li schiaccerebbe tutti allo stesso modo sbagliato. */
.brand-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand-logo { width: auto; height: 54px; max-width: 170px; object-fit: contain; flex: 0 0 auto; }

/* =======================================================================
   QUANDO I DUE FOGLI CONVIVONO
   =======================================================================

   Il foglio precedente si carica prima di questo, e porta con sé qualche
   regola che il tema deve disdire per nome: non basta che il tema arrivi
   dopo, perché su queste il tema non diceva niente e il silenzio lasciava
   vincere l'altro. */

/* I titoli con le grazie.
   L'altro foglio impone «Playfair Display» a h1 e h2, e la regola del tema
   sui titoli tocca margine, peso e interlinea ma non il carattere: senza
   questa riga ogni h1 portato qui diventava con le grazie in mezzo a una
   pagina scritta in Jost. */
h1, h2, .display { font-family: var(--font); letter-spacing: -.01em; }

/* Il collegamento che al passaggio del mouse diventava rosso. */
a:hover { color: inherit; }

/* I pulsanti del negozio precedente, nella forma del tema: squadrati, neri,
   maiuscoletto spaziato. Sono la cosa che si vede di più fra quelle che
   arrivano da prima — ogni modulo ne ha uno. */
.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 28px; border: 1px solid var(--ink); border-radius: 0;
    font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
    background: var(--white); color: var(--ink); cursor: pointer;
    transition: background .15s, color .15s;
}
.button-primary { background: var(--ink); color: var(--white); }
.button-primary:hover { background: var(--ink-soft); color: var(--white); }
.button-secondary, .button-quiet { background: var(--white); color: var(--ink); }
.button-secondary:hover, .button-quiet:hover { background: var(--ink); color: var(--white); }

/* ------------------------------------------------- il tasto del menu --- */

/* Menu e lente compaiono solo dove le tendine non si aprono: sopra i 992 il
   menu è in riga e la casella è in testata, e questi due tasti sarebbero
   doppioni. Le regole della testata del telefono stanno più in basso, sotto
   «La testata del telefono». */
.t-head-start .t-burger, .t-head-start .t-search-mobile { display: none; }

/* La testata spoglia della cassa: il marchio al centro e nient'altro. */
.bare-header {
    display: flex; justify-content: center; align-items: center;
    padding: 20px 0; border-bottom: 1px solid var(--line); background: var(--white);
}
.bare-header img { width: 190px; height: auto; }

/* Lo stacco in fondo alla pagina.

   Il foglio precedente lo aggancia a «#main-content», che è il nome che il
   suo impianto dà al contenuto; qui il contenuto si chiama «#contenuto», e
   senza questa riga ogni pagina portata dal vecchio finiva attaccata al piè
   di pagina — una fascia bianca che sembra un pezzo mancante. */
#contenuto { padding-bottom: 52px; }

/* Tranne dove l'ultima sezione ha già il suo fondo pieno: lì il riempimento
   la farebbe crescere invece di staccarla. */
#contenuto:has(> .section.is-tinted:last-child),
#contenuto:has(> .value-band:last-child),
#contenuto:has(> .t-section:last-child) { padding-bottom: 0; }

/* =======================================================================
   TRE COSE CHE IL FOGLIO PRECEDENTE RIVERNICIAVA
   =======================================================================

   Non basta che il tema arrivi dopo: vince solo sulle proprietà che
   dichiara. Dove il tema tace, il foglio di prima parla — ed è esattamente
   quello che è successo qui. */

/* ------------------------------------------------- la ricerca in testata --- */

/* Il foglio precedente la disegna come una pastiglia — bordo, sfondo, ombra,
   altezza fissa — in due punti diversi, e in più dipinge una seconda lente
   dentro il tasto con una maschera. Il tema la vuole come una riga sottile
   con il filetto sotto, e dichiarava solo il filetto: pastiglia e seconda
   lente sopravvivevano, una sopra l'altra.

   Qui si disdice per nome tutto quello che il tema non dice altrove. */
.t-header .header-search {
    height: auto; min-height: 0;
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    background: transparent; box-shadow: none;
    padding: 0 0 8px; gap: 10px;
    display: flex; align-items: center;
    width: auto; max-width: 320px; justify-self: start;
}
.t-header .header-search button {
    width: auto; height: auto; padding: 0; margin: 0;
    border: 0; border-radius: 0; background: none;
    font-size: inherit; color: var(--ink); display: flex; place-items: normal;
}
/* La seconda lente: quella vera è l'icona dentro il tasto, che il markup
   scrive da sé. */
.t-header .header-search button::after { content: none; }
.t-header .header-search svg { width: 19px; height: 19px; color: inherit; }

/* ------------------------------------------------------ la fila dei marchi --- */

/* Il markup dichiara height="38" come attributo, ma il foglio precedente ha
   «img { height: auto }» e il CSS batte sempre l'attributo: i loghi
   uscivano alla dimensione naturale, e il più grande è cinquemila pixel.
   Altezza vincolata e larghezza libera, con un tetto: le proporzioni vanno
   da 1:1 a 3:1, e un riquadro fisso ne schiaccerebbe metà. */
.t-brands img {
    height: 34px; width: auto; max-width: 150px;
    object-fit: contain; filter: grayscale(1); opacity: .75;
    transition: filter .2s, opacity .2s;
}
.t-brands a:hover img { filter: none; opacity: 1; }

/* ------------------------------------------------------------- la testata --- */

/* Su schermo largo la fotografia riempie una fascia alta, invece di dettare
   lei l'altezza con le sue proporzioni: un'immagine panoramica lasciata a
   «height: auto» faceva una striscia bassa in cui il titolo non respirava.
   Il minimo va sulla sezione perché la foto, diventata assoluta, non fa più
   altezza da sola — senza, la fascia collasserebbe a zero. */
@media (min-width: 992px) {
    .t-hero { min-height: 550px; }
    .t-hero-photo {
        position: absolute; inset: 0;
        width: 100%; height: 100%; object-fit: cover;
    }
}

/* ------------------------------------------------------- gli angoli tondi --- */

/* Il tema è squadrato: il bottone ha due pixel di smusso e tutto il resto
   spigoli vivi. Il foglio precedente però arrotonda a mano — dodici pixel,
   tredici, novecentonovantanove — su componenti che adesso compaiono anche
   qui: il pannello dei filtri, la paginazione, il riquadro dell'assistenza,
   la fascia delle garanzie. Non usano `var(--radius)`, quindi ridefinirla
   non bastava: vanno disdette per nome.

   Restano tondi solo i pochi che devono esserlo — i contatori e i pallini —
   e per quelli non c'è nessuna riga qui sotto. */
.filter-panel,
.filter-panel > summary,
.filter-price input,
.empty-note,
.listing-sort select,
.listing-pagination a,
.listing-pagination span,
.service-item,
.support-panel,
.support-channel,
.support-close,
.icon-button,
.panel,
.search-panel-bar input,
.cart-drawer-panel,
.qty-stepper {
    border-radius: 0;
}

/* L'ombra morbida attorno ai riquadri: nel tema lo stacco lo fa il filetto,
   non un alone. */
.filter-panel,
.support-panel,
.service-item {
    box-shadow: none;
}

/* Il contorno del fuoco da tastiera: quadrato come il resto, e nero. */
:focus-visible { border-radius: 0; outline: 2px solid var(--ink); outline-offset: 3px; }

/* La fascia delle garanzie respira come le sezioni del tema. */
.service-strip { padding: 28px 0; }

/* Le miniature della galleria: il foglio precedente le arrotonda di dodici
   pixel e il tema, che ne ridefinisce misura e sfondo, sul raggio taceva. */
.t-pdp-thumbs .pdp-thumb { border-radius: 0; }

/* =======================================================================
   CARRELLO E CASSA
   =======================================================================

   Tutte le loro regole stanno nel foglio precedente e nessuna qui: per
   questo avevano ancora angoli da venti pixel e ombre in un tema che è
   squadrato ovunque. Qui si rivestono, senza toccarne l'ossatura — le due
   colonne e il sommario appiccicato ci sono già e funzionano. */

.cart-page, .checkout-page { padding-bottom: 40px; }
.cart-page > h1, .checkout-page > h1 { font-size: clamp(26px, 3vw, 34px); font-weight: 500; margin: 6px 0 4px; }

/* La riga in cima: il titolo a sinistra, il ritorno al negozio a destra.
   Sta accanto al titolo e non sotto i prodotti, perché chi cambia idea lo
   fa prima di leggere il totale, non dopo. */
.cart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cart-head a { font-size: 14px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.cart-head a:hover { color: var(--muted); }

/* Le intestazioni della tabella: minute e spaziate, come nel resto del
   tema. Spariscono sul telefono, dove le righe diventano schede e una
   riga di etichette senza colonne sotto non dice niente. */
.cart-columns {
    display: none; gap: 20px; padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
@media (min-width: 760px) {
    .cart-columns { display: grid; grid-template-columns: minmax(0, 1fr) 190px 120px; }
    .cart-columns > :last-child { text-align: right; }
}

/* La riga: niente cornice, solo un filetto sotto. Il riquadro con ombra
   faceva sembrare ogni articolo una scheda a sé; qui è un elenco. */
.cart-lines { gap: 0; }
.cart-line {
    border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
    box-shadow: none; background: transparent; padding: 22px 0;
}
.cart-line.is-new { border-color: var(--line); box-shadow: none; }
.cart-line-photo img { border-radius: 0; border: 1px solid var(--line); background: var(--white); }
.cart-line-body h2 { font-size: 15px; font-weight: 500; }
.cart-line-body h2 a:hover { color: var(--muted); }
.cart-line-total { font-size: 15px; font-weight: 500; }

/* Il selettore della quantità e il cestino, in riga. */
.cart-qty-form { display: flex; align-items: center; gap: 12px; }
.cart-qty-form .qty-stepper { border: 1px solid var(--line); border-radius: 0; }
.cart-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; border: 0; background: none;
    color: var(--muted); cursor: pointer;
}
.cart-remove:hover { color: var(--ink); }
.cart-remove svg { width: 18px; height: 18px; }

/* ------------------------------------------------------- il sommario --- */

.cart-summary-inner {
    border: 1px solid var(--line); border-radius: 0; box-shadow: none;
    background: var(--surface); padding: 22px 24px;
}
.cart-summary-inner h2 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pdp-grand { border-top: 1px solid var(--line); padding-top: 14px; }
.pdp-grand strong { font-size: 20px; font-weight: 500; }
.pdp-cta { width: 100%; }
.coupon-box, .coupon-form input, .checkout-block, .field input, .field select, .field textarea,
.pdp-kind, .checkout-switch { border-radius: 0; }
.checkout-block { border: 1px solid var(--line); background: var(--white); box-shadow: none; }

/* Le righe del riepilogo con la fotografia e il numero sopra. */
.checkout-line-photo { position: relative; flex: 0 0 auto; }
.checkout-line-photo img {
    width: 56px; height: 56px; object-fit: contain;
    border: 1px solid var(--line); background: var(--white);
}
.checkout-line-badge {
    position: absolute; top: -7px; right: -7px; z-index: 1;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: var(--ink); color: var(--white);
    font-size: 11px; font-style: normal; line-height: 20px; text-align: center;
}
.checkout-lines li { display: flex; align-items: center; gap: 12px; }
.checkout-line-name { flex: 1; min-width: 0; }

/* Il selettore della quantità: nel foglio precedente è una pastiglia da
   novecentonovantanove pixel. Vale ovunque compaia — scheda prodotto,
   tabella delle tonalità, cassetto, carrello — e in un tema squadrato si
   disdice una volta sola invece che in quattro posti. */
.qty-stepper { border-radius: 0; }

/* ------------------------------------------- gli schemi del mosaico
   Cinque disposizioni fra cui il cliente sceglie dal pannello. Le tessere
   sono figlie dirette della griglia — nessun involucro — così la stessa
   marcatura serve tutti e cinque gli schemi e il ritaglio lo fa `object-fit`,
   che regge qualunque immagine gli si dia.

   Sotto gli ottocentottanta pixel non c'è schema che tenga: si impilano, ed
   è la regola di base di `.t-mosaic` a farlo. */
@media (min-width: 880px) {
    .t-mosaic.is-grande-sinistra { grid-template-columns: 1.04fr 1fr; }
    .t-mosaic.is-grande-sinistra > :first-child { grid-column: 1; grid-row: 1 / span 2; }

    /* Speculare, e la grande resta la prima tessera: cambia il posto, non
       quale. La colonna larga passa a destra. */
    .t-mosaic.is-grande-destra { grid-template-columns: 1fr 1.04fr; }
    .t-mosaic.is-grande-destra > :first-child { grid-column: 2; grid-row: 1 / span 2; }
    .t-mosaic.is-grande-destra > :nth-child(2) { grid-column: 1; grid-row: 1; }
    .t-mosaic.is-grande-destra > :nth-child(3) { grid-column: 1; grid-row: 2; }

    .t-mosaic.is-tre-colonne { grid-template-columns: repeat(3, 1fr); }
    .t-mosaic.is-tre-colonne .t-tile { min-height: 340px; }

    .t-mosaic.is-due-meta { grid-template-columns: repeat(2, 1fr); }
    .t-mosaic.is-due-meta .t-tile { min-height: 330px; }

    .t-mosaic.is-quattro { grid-template-columns: repeat(2, 1fr); }
}

/* L'etichetta di uno scaglione — «Più scelto», «Consigliato» — scelta in
   pannello. Sta a cavallo del bordo in alto, come una linguetta: si vede senza
   spostare il prezzo, che resta dove l'occhio lo cerca. */
.t-pdp-tier { position: relative; }
.t-pdp-tier-label {
    position: absolute; top: 0; right: 12px; transform: translateY(-50%);
    background: var(--ink); color: #fff;
    font-size: 10.5px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 9px; line-height: 1.3; white-space: nowrap;
}
.t-pdp-tiers .t-pdp-tier + .t-pdp-tier { margin-top: 10px; }

/* ------------------------------------------------------------ registrati

   Le due strade per farsi un conto, sotto il modulo d'accesso e in cima alla
   pagina di registrazione. Riquadri a filo nero come il resto del tema: quello
   scelto si riempie, l'altro resta un collegamento. */
.register-paths { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.register-paths h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.register-path, .register-kind a {
    display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
    border: 1px solid var(--line); background: var(--white); color: var(--ink);
    text-decoration: none; transition: border-color .15s, background .15s;
}
.register-path:hover, .register-kind a:hover { border-color: var(--ink); }
.register-path strong, .register-kind strong { font-size: 15px; font-weight: 600; }
.register-path span, .register-kind span { font-size: 13px; color: var(--muted); line-height: 1.45; }

.register-page { max-width: 760px; padding: 26px 0 60px; }
.register-kind { display: grid; gap: 10px; margin: 0 0 22px; }
@media (min-width: 560px) { .register-kind { grid-template-columns: 1fr 1fr; } }
.register-kind a.is-active { background: var(--ink); border-color: var(--ink); color: var(--white); }
.register-kind a.is-active span { color: rgba(255, 255, 255, .72); }

.register-form { display: grid; gap: 4px; }
.register-block { margin: 0 0 18px; padding: 18px 18px 20px; border: 1px solid var(--line); min-width: 0; }
.register-block legend {
    padding: 0 6px; margin-left: -6px;
    font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.register-form .checkout-switch { margin-top: 8px; }
.register-form .checkout-switch a { color: var(--ink); }
.register-form > .field-error { margin-left: 26px; }
.register-submit { margin-top: 18px; justify-self: start; min-width: 220px; }
.register-page .cart-alert { margin: 0 0 18px; }
.register-received p { font-size: 15px; line-height: 1.6; }
.register-received .button { margin-top: 18px; }

@media (max-width: 559px) {
    .register-block { padding: 14px 12px 16px; }
    .register-submit { width: 100%; justify-self: stretch; }
}

/* =======================================================================
   IL TELEFONO: testata, menu, filtri e ricerca
   =======================================================================

   Il negozio si compra soprattutto da qui, e la testata di prima sul
   telefono era la versione del computer impilata: la fascia nera, la riga
   del marchio, la casella di ricerca e il menu a voci che andava a capo su
   quattro righe — duecentocinquanta pixel appiccicati in cima su
   ottocentododici, con due ricerche e due menu uno sopra l'altro. Qui ogni
   cosa c'è una volta sola, e quello che non ci sta sta nel menu laterale. */

/* Un tasto a sola icona, grande quanto un polpastrello: quarantaquattro
   pixel, la misura sotto la quale si comincia a sbagliare bersaglio. */
.t-icon {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 44px; height: 44px; padding: 0; border: 0; background: none;
    color: var(--ink); cursor: pointer;
}
.t-icon svg { width: 22px; height: 22px; }
.t-icon[hidden] { display: none; }

/* Con un pannello aperto la pagina sotto sta ferma: il pollice che scorre
   deve muovere il pannello, non la categoria che ci sta dietro. */
html.is-bloccato, html.is-bloccato body { overflow: hidden; }

.t-head-start { display: flex; align-items: center; justify-self: start; width: 100%; min-width: 0; }

/* ------------------------------------------------ la testata del telefono --- */

@media (max-width: 991px) {
    :root { --header-h: 60px; --header-total: 61px; }

    /* La fascia nera resta, sottile e con una frase sola: la spedizione
       gratuita è l'unica delle tre che cambia una decisione. Non è
       appiccicata, quindi scorrendo se ne va e non ruba spazio alla pagina. */
    .t-topbar { font-size: 12px; }
    .t-topbar-inner { justify-content: center; padding: 6px 0; text-align: center; }
    .t-topbar-inner > :not(:first-child) { display: none; }

    /* Una riga sola: menu e lente a sinistra, marchio al centro, conto e
       carrello a destra. Le due colonne laterali sono larghe uguali, così il
       marchio sta al centro dello schermo e non al centro dello spazio
       avanzato. */
    .t-header-main {
        grid-template-columns: 1fr auto 1fr; gap: 4px;
        min-height: 60px; padding: 8px 0;
    }
    .t-head-start { margin-left: -10px; }
    .t-head-start .t-burger, .t-head-start .t-search-mobile { display: inline-flex; }
    .t-header .header-search { display: none; }
    .t-logo img { width: 132px; }

    .t-actions { gap: 0; margin-right: -10px; }
    .t-action { width: 44px; height: 44px; justify-content: center; }
    .t-action span { display: none; }
    .t-action svg { width: 22px; height: 22px; }
    .t-count { top: 3px; right: 1px; }

    /* Il menu a voci del computer non c'è: le categorie stanno nel menu
       laterale, e due menu nella stessa testata sono una domanda su quale
       usare. */
    .t-nav { display: none; }
}

/* Fra i 992 e i 1200 pixel il menu a voci andava a capo su due righe, e la
   testata appiccicata diventava alta un quarto dello schermo: le voci si
   stringono quanto basta per stare su una. */
@media (min-width: 992px) and (max-width: 1199px) {
    .t-nav ul { gap: 4px 16px; }
    .t-nav a { font-size: 11.5px; letter-spacing: .08em; }
    .t-nav .nav-offers { padding: 6px 14px; }
}

@media (min-width: 600px) and (max-width: 991px) {
    .t-logo img { width: 160px; }
}

@media (max-width: 359px) {
    .t-logo img { width: 112px; }
}

/* ------------------------------------------------- il menu laterale --- */

.t-drawer { position: fixed; inset: 0; z-index: 70; }
.t-drawer[hidden] { display: none; }

.t-drawer-veil {
    position: absolute; inset: 0; background: rgba(17, 17, 17, .45);
    opacity: 0; transition: opacity .26s ease;
}
.t-drawer-panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 400px);
    display: flex; flex-direction: column; background: var(--white);
    box-shadow: 12px 0 40px rgba(0, 0, 0, .14);
    transform: translateX(-100%); transition: transform .26s ease;
}
.t-drawer.is-aperto .t-drawer-veil { opacity: 1; }
.t-drawer.is-aperto .t-drawer-panel { transform: none; }

.t-drawer-head {
    display: flex; align-items: center; gap: 2px; min-height: 60px;
    padding: 8px 8px; border-bottom: 1px solid var(--line);
}
.t-drawer-title {
    flex: 1; min-width: 0; margin: 0; padding-left: 12px;
    font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t-drawer-back:not([hidden]) + .t-drawer-title { padding-left: 0; }

.t-drawer-levels { flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.t-drawer-level { padding: 6px 0 32px; }
.t-drawer-level.is-current.da-destra { animation: t-livello-destra .24s ease both; }
.t-drawer-level.is-current.da-sinistra { animation: t-livello-sinistra .24s ease both; }
@keyframes t-livello-destra { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes t-livello-sinistra { from { transform: translateX(-32px); opacity: 0; } to { transform: none; opacity: 1; } }

.t-drawer-list { list-style: none; margin: 0; padding: 0; }
.t-drawer-link {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 52px; padding: 12px 20px;
    border: 0; border-bottom: 1px solid var(--line); background: none;
    font: inherit; font-size: 16px; text-align: left; color: var(--ink);
}
.t-drawer-link:active { background: var(--surface); }
.t-drawer-link svg { width: 18px; height: 18px; flex: none; color: var(--muted); }

/* Le offerte a pastiglia, in cima: la stessa forma che hanno nella barra
   del computer, perché è lo stesso richiamo. */
.t-drawer-offers {
    display: inline-flex; align-items: center; min-height: 44px; margin: 12px 20px 10px;
    padding: 0 24px; border-radius: 999px; background: var(--ink); color: var(--white);
    font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
}
.t-drawer-offers:hover { color: var(--white); background: var(--ink-soft); }

.t-drawer-all {
    display: flex; align-items: center; min-height: 52px; padding: 12px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px;
}
.t-drawer-group {
    margin: 24px 20px 4px; font-size: 12px; font-weight: 500;
    letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

.t-drawer-list.is-service { margin-top: 22px; padding-top: 8px; border-top: 8px solid var(--surface); }
.t-drawer-list.is-service .t-drawer-link {
    justify-content: flex-start; min-height: 48px; border-bottom: 0;
    font-size: 15px; color: var(--ink-soft);
}
.t-drawer-list.is-service .t-drawer-link svg { color: var(--ink); }
.t-drawer-count {
    margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center; background: var(--ink); color: var(--white);
    font-size: 11px; font-style: normal;
}

@media (min-width: 992px) { .t-drawer { display: none; } }

/* ------------------------------------------ i filtri: barra e pannello --- */

.t-filterbar { display: none; }

/* Il pannello a tutta altezza esiste solo con lo script: `has-sheet` lo mette
   lui. Senza, la colonna dei filtri resta dov'era, sopra la griglia. */
.filter-sheet-head, .filter-sheet-foot, .filter-sort-group { display: none; }
.filter-sort-group { border: 0; margin: 0; padding: 12px 0; min-width: 0; }
.filter-sort-group legend { padding: 10px 0 2px; font-size: 13px; font-weight: 500; }

@media (max-width: 959px) {
    /* La barra resta appiccicata sotto la testata mentre si scorre la
       griglia: i filtri servono a metà pagina, non solo in cima. */
    .t-filterbar {
        display: block; position: sticky; top: var(--header-h); z-index: 25;
        margin-bottom: 16px; background: var(--white);
        border-bottom: 1px solid var(--line);
    }
    .t-filterbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; }
    .t-filterbar-open {
        display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
        border: 1px solid var(--ink); background: var(--white);
        font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    }
    .t-filterbar-open svg { width: 18px; height: 18px; }
    .t-filterbar-open em, .sx-filters-open em {
        min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
        display: inline-grid; place-items: center; background: var(--ink); color: var(--white);
        font-size: 11px; font-style: normal; letter-spacing: 0;
    }
    .t-filterbar-count { font-size: 13px; color: var(--muted); text-align: right; }

    .t-listing { gap: 0; }
    .filter-panel.has-sheet:not(.is-sheet) { display: none; }
    /* Il conteggio e l'ordine stanno già nella barra e nel pannello. */
    .t-listing:has(.filter-panel.has-sheet) .listing-toolbar { display: none; }

    .filter-panel.is-sheet {
        position: fixed; inset: 0; z-index: 72; display: block;
        overflow-y: auto; overscroll-behavior: contain;
        border: 0; background: var(--white);
        transform: translateY(100%); transition: transform .28s ease;
    }
    .filter-panel.is-sheet.is-aperto { transform: none; }
    .filter-panel.is-sheet > summary { display: none; }

    .filter-panel.is-sheet .filter-sheet-head {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: 0; z-index: 2; min-height: 60px;
        padding: 8px 8px 8px 20px; background: var(--white); border-bottom: 1px solid var(--line);
    }
    .filter-sheet-title { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

    .filter-panel.is-sheet .filter-body {
        display: flex; flex-direction: column;
        min-height: calc(100vh - 61px); min-height: calc(100dvh - 61px);
        padding: 0 20px;
    }
    .filter-panel.is-sheet .filter-sort-group { display: block; }
    .filter-panel.is-sheet .filter-actions { display: none; }

    .filter-panel.is-sheet .filter-group { padding: 0; }
    .filter-panel.is-sheet .filter-group > summary { min-height: 54px; font-size: 15px; }
    .filter-panel.is-sheet .filter-sort-group legend { font-size: 15px; padding-top: 16px; text-transform: uppercase; letter-spacing: .05em; }
    .filter-panel.is-sheet .filter-options { max-height: none; margin: 0 0 14px; }
    .filter-panel.is-sheet .filter-options label { min-height: 44px; font-size: 15px; gap: 12px; }
    .filter-panel.is-sheet .filter-options input[type='checkbox'],
    .filter-panel.is-sheet .filter-options input[type='radio'] { width: 20px; height: 20px; accent-color: var(--ink); }
    .filter-panel.is-sheet .filter-price input { height: 44px; font-size: 16px; }
    .filter-panel.is-sheet .filter-slider-input::-webkit-slider-thumb { width: 26px; height: 26px; }
    .filter-panel.is-sheet .filter-slider-input::-moz-range-thumb { width: 26px; height: 26px; }

    /* Il piede resta in fondo allo schermo anche quando i filtri sono pochi,
       e sopra l'elenco quando sono tanti. */
    .filter-panel.is-sheet .filter-sheet-foot {
        display: flex; align-items: center; gap: 14px;
        position: sticky; bottom: 0; margin: auto -20px 0;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--white); border-top: 1px solid var(--line);
        box-shadow: 0 -8px 20px rgba(0, 0, 0, .05);
    }
    .filter-sheet-show { flex: 1; min-height: 50px; }
    .filter-sheet-show.is-caricando { opacity: .7; }
    .filter-sheet-reset {
        min-height: 44px; padding: 0 6px; border: 0; background: none; font: inherit;
        font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
    }
}

/* I filtri accesi, sopra la griglia: ognuno si toglie con un tocco. */
.t-chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.t-chips a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
    background: var(--ink); color: var(--white); font-size: 13px;
}
.t-chips a:hover { color: var(--white); background: var(--ink-soft); }
.t-chips svg { width: 14px; height: 14px; }
.t-chips a.t-chips-reset { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------ la ricerca a tutto schermo --- */

/* Sotto il cassetto del carrello (60–61): chi aggiunge dal pannello deve
   vedere il carrello aprirsi sopra, non dietro. Sopra tutto il resto. */
.sx {
    position: fixed; inset: 0; z-index: 58;
    display: flex; flex-direction: column; background: var(--white);
    opacity: 0; transition: opacity .18s ease;
}
.sx[hidden] { display: none; }
.sx.is-aperto { opacity: 1; }

.sx-bar { flex: none; background: var(--white); border-bottom: 1px solid var(--line); }
.sx-bar-inner { display: flex; align-items: center; gap: 14px; min-height: 76px; }

.sx-form {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px;
    height: 52px; padding: 0 4px 0 16px; border: 1px solid var(--ink); background: var(--white);
}
.sx-lens { width: 20px; height: 20px; flex: none; margin-right: 8px; color: var(--muted); }
/* Sedici pixel almeno: sotto, Safari su iPhone ingrandisce la pagina appena
   si tocca la casella, e il pannello esce dallo schermo. */
.sx-form input {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 17px; color: var(--ink); -webkit-appearance: none; appearance: none;
}
.sx-form input::placeholder { color: #a7a29c; }
.sx-form input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.sx-clear, .sx-mic {
    width: 44px; height: 44px; flex: none; display: inline-grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); cursor: pointer;
}
.sx-clear[hidden], .sx-mic[hidden] { display: none; }
.sx-clear svg { width: 18px; height: 18px; color: var(--muted); }
.sx-mic svg { width: 22px; height: 22px; }
.sx-mic:hover, .sx-clear:hover { background: var(--surface); }

/* Il microfono che ascolta: rosso, e un'onda che pulsa. Chi ha premuto deve
   capire a colpo d'occhio che il telefono lo sta sentendo. */
.sx-mic[aria-pressed='true'] { background: #c62828; color: var(--white); animation: sx-pulsa 1.3s ease-out infinite; }
@keyframes sx-pulsa {
    0% { box-shadow: 0 0 0 0 rgba(198, 40, 40, .45); }
    70% { box-shadow: 0 0 0 14px rgba(198, 40, 40, 0); }
    100% { box-shadow: 0 0 0 0 rgba(198, 40, 40, 0); }
}

.sx-close {
    display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
    border: 0; background: none; color: var(--ink);
    font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.sx-close svg { width: 22px; height: 22px; }

.sx-voice {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 0; padding: 10px 18px; background: var(--surface); font-size: 15px; text-align: center;
}
.sx-voice[hidden] { display: none; }
.sx-voice.is-errore { background: #fdecea; color: #8a1f11; }
.sx-voice-wave { display: inline-flex; align-items: center; gap: 3px; height: 18px; flex: none; }
.sx-voice-wave i { display: block; width: 3px; height: 100%; border-radius: 2px; background: #c62828; animation: sx-onda .9s ease-in-out infinite; }
.sx-voice-wave i:nth-child(2) { animation-delay: .15s; }
.sx-voice-wave i:nth-child(3) { animation-delay: .3s; }
.sx-voice.is-errore .sx-voice-wave { display: none; }
@keyframes sx-onda { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }

.sx-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sx-body:focus { outline: 0; }
.sx-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 22px 0 56px; align-items: start; }
.sx-main { min-width: 0; }
.sx.is-caricando .sx-content { opacity: .5; transition: opacity .2s ease .15s; }

/* Le faccette: una colonna sul computer, un pannello da sinistra sul
   telefono. Senza risultati non c'è niente da restringere, e spariscono. */
.sx-senza-filtri .sx-facets { display: none; }
.sx-facets-head, .sx-facets-foot { display: none; }

.sx-group { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.sx-group > summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 48px;
    list-style: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.sx-group > summary::-webkit-details-marker { display: none; }
.sx-group > summary::after { content: '+'; font-size: 16px; font-weight: 400; color: var(--muted); }
.sx-group[open] > summary::after { content: '−'; }
.sx-facet-list { list-style: none; margin: 0; padding: 0; }
.sx-group:not(.is-tutte) .is-extra { display: none; }

.sx-facet {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px;
    padding: 6px 4px; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 14px; text-align: left; color: var(--ink-soft);
}
.sx-facet:hover { background: var(--surface); }
.sx-facet[aria-checked='true'] { color: var(--ink); font-weight: 500; }
.sx-facet-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-facet small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sx-box { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border: 1.5px solid #a39e98; background: var(--white); }
.sx-box.is-round { border-radius: 50%; }
.sx-facet[aria-checked='true'] .sx-box { background: var(--ink); border-color: var(--ink); }
.sx-facet[aria-checked='true'] .sx-box::after {
    content: ''; width: 9px; height: 5px; margin-top: -2px;
    border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg);
}
.sx-facet[aria-checked='true'] .sx-box.is-round::after { width: 6px; height: 6px; margin: 0; border: 0; border-radius: 50%; background: var(--white); transform: none; }

.sx-link {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none;
    font: inherit; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.sx-show-all { margin: 4px 0 6px; }

@media (min-width: 900px) {
    .sx-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 40px; }
    .sx-senza-filtri .sx-layout { grid-template-columns: minmax(0, 1fr); }
    .sx-facets { position: sticky; top: 22px; }
}

@media (max-width: 899px) {
    .sx-facets {
        position: fixed; inset: 0; z-index: 5; display: flex; flex-direction: column;
        background: var(--white); visibility: hidden;
        transform: translateX(-100%); transition: transform .22s ease, visibility 0s linear .22s;
    }
    .sx-facets.is-aperto { visibility: visible; transform: none; transition: transform .22s ease; }
    .sx-facets-head {
        display: flex; align-items: center; justify-content: space-between; min-height: 60px;
        padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--line);
    }
    .sx-facets-head p { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
    .sx-facets-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px; }
    .sx-facets-foot {
        display: flex; align-items: center; gap: 14px;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line);
    }
    .sx-facets-done { flex: 1; min-height: 50px; }
    .sx-facets-reset {
        min-height: 44px; padding: 0 6px; border: 0; background: none; font: inherit;
        font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
    }
    .sx-facets-reset[hidden] { display: none; }
    .sx-facet { min-height: 46px; font-size: 15px; }
    .sx-box { width: 20px; height: 20px; }
}

/* La testa dei risultati: quanti, i filtri accesi, l'ordine. */
.sx-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.sx-head:empty { display: none; }
.sx-count { margin: 0; font-size: 15px; color: var(--ink-soft); }
.sx-count strong { color: var(--ink); font-weight: 600; }
.sx-tools { display: flex; align-items: center; gap: 10px; }
.sx-filters-open { display: none; }
.sx-sort select {
    height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 0;
    background: var(--white); font: inherit; font-size: 14px; color: var(--ink);
}
.sx-active { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sx-active button[data-togli] {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px;
    border: 0; background: var(--ink); color: var(--white); font: inherit; font-size: 13px; cursor: pointer;
}
.sx-active svg { width: 14px; height: 14px; }

@media (max-width: 899px) {
    .sx-count { width: 100%; }
    .sx-tools { width: 100%; }
    .sx-filters-open {
        display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
        border: 1px solid var(--ink); background: var(--white); color: var(--ink);
        font: inherit; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    }
    .sx-filters-open svg { width: 18px; height: 18px; }
    .sx-sort { flex: 1; min-width: 0; }
    .sx-sort select { width: 100%; font-size: 16px; }
}

/* Le schede: quelle della categoria, con il tasto sempre visibile — nel
   pannello non c'è un passaggio del mouse da aspettare. */
.sx-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
@media (min-width: 600px) { .sx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 18px; } }
@media (min-width: 1200px) { .sx-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .sx-senza-filtri .sx-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.sx .t-card-action { opacity: 1; margin-top: auto; }
.sx-card .t-card-media img { padding: 10px; }
.sx-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sx-card.is-attivo { outline: 2px solid var(--ink); outline-offset: 6px; }
.sx-card .t-card-price { font-size: 15px; }
.sx-card .t-card-action button, .sx-card .t-card-action a {
    display: flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 6px; letter-spacing: .08em;
}
.sx-stock {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    margin: 0; font-size: 12px; color: var(--muted);
}
.sx-stock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #bdb8b2; }
.sx-stock.is-in { color: #16753f; }
.sx-stock.is-in::before { background: #22a05a; }

.sx-block { margin-bottom: 32px; }
.sx-block > h2, .sx-block > h3, .sx-block-head h3 { margin: 0 0 14px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sx-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

.sx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sx-chips button, .sx-chips a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px;
    border: 1px solid var(--line); background: var(--white); cursor: pointer;
    font: inherit; font-size: 14px; color: var(--ink-soft); white-space: nowrap;
}
.sx-chips button:hover, .sx-chips a:hover { border-color: var(--ink); color: var(--ink); }
.sx-chips svg { width: 15px; height: 15px; color: var(--muted); }

/* Categorie e guide sopra i risultati: una riga che scorre di lato, per non
   spingere le schede sotto lo schermo del telefono. */
.sx-inline { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; }
.sx-inline > span { flex: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sx-inline .sx-chips { flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.sx-inline .sx-chips::-webkit-scrollbar { display: none; }

.sx-none { padding: 8px 0 28px; }
.sx-none p { margin: 0 0 8px; color: var(--ink-soft); }
.sx-none .sx-none-title { font-size: 20px; font-weight: 500; color: var(--ink); }
.sx-none-fix button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.sx-more, .sx-end { margin-top: 30px; text-align: center; }

@media (max-width: 599px) {
    .sx-bar-inner { min-height: 64px; gap: 4px; }
    .sx-form { height: 48px; padding-left: 12px; }
    .sx-lens { display: none; }
    .sx-close span { display: none; }
    .sx-close { width: 44px; justify-content: center; margin-right: -8px; }
    .sx-layout { padding-top: 16px; }
}

/* ------------------------------------------ la pagina dei risultati --- */

.search-head { padding: 28px 0 18px; }
.search-links .category-children a { font-weight: 400; }
.search-links .category-children.is-guides a { border-style: dashed; }
/* Sul telefono categorie e guide scorrono di lato, una riga ciascuna: un
   titolo di guida lungo tre righe spingeva le schede fuori dallo schermo. */
@media (max-width: 760px) {
    .search-links .category-children { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -18px; padding-right: 18px; }
    .search-links .category-children::-webkit-scrollbar { display: none; }
    .search-links .category-children a { flex: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.search-page-form { display: flex; gap: 8px; max-width: 640px; margin-top: 16px; }
.search-page-form input {
    flex: 1; min-width: 0; height: 48px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 0;
    font: inherit; font-size: 16px; background: var(--white); color: var(--ink);
}
.search-page-form .t-btn { min-height: 48px; }
.search-suggestion { margin: 14px 0 0; font-size: 15px; }
.search-suggestion a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.search-links .category-children { margin-top: 14px; }
.search-empty { margin-bottom: 30px; }
.search-empty a { text-decoration: underline; }
.search-restart { padding-top: 6px; }

/* ---------------------------------------------- il carrello sul telefono --- */

/* Prezzo, prezzo unitario, quantità e cestino stanno in una riga sola sotto
   la foto: con un totale a due cifre il cestino andava a capo da solo, lontano
   dalla riga che toglie. «pz» accanto alla quantità lo dice già il prezzo
   «cad.», e sul telefono è lo spazio che mancava. */
@media (max-width: 759px) {
    .cart-line-side { gap: 6px 10px; }
    .cart-qty-form > .cart-line-unit { display: none; }
}

/* ------------------------------------------------ i moduli sul telefono --- */

/* Sedici pixel nei campi, sempre: sotto quella misura Safari su iPhone
   ingrandisce la pagina appena si tocca una casella — in cassa, a ogni campo
   dell'indirizzo — e poi la lascia ingrandita. È l'unico caso in cui serve
   `!important`: i campi della cassa e dell'area riservata hanno ciascuno la
   sua misura scritta con classi più pesanti di questa. */
@media (max-width: 759px) {
    main input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='hidden']),
    main select,
    main textarea { font-size: 16px !important; }

    /* Le spunte della cassa: più grandi, e con tutta la riga da toccare. */
    .checkout-switch { align-items: center; min-height: 44px; margin-top: 6px; }
    .checkout-switch input, .pdp-kind input[type='radio'] { width: 20px; height: 20px; margin-top: 0; flex: none; }
    .checkout-line-remove { width: 40px; height: 40px; display: inline-grid; place-items: center; }
}

/* ------------------------------------------------ le briciole sul telefono --- */

/* Una riga sola che scorre di lato, invece di tre righe impilate prima della
   fotografia: sul telefono le briciole si leggono per ultime, e non devono
   spingere il prodotto sotto lo schermo. */
@media (max-width: 760px) {
    .t-crumbs {
        flex-wrap: nowrap; overflow-x: auto; white-space: nowrap;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .t-crumbs::-webkit-scrollbar { display: none; }
    .t-crumbs a { display: inline-flex; align-items: center; min-height: 36px; }
}

/* ------------------------------------------- la barra d'acquisto sul telefono --- */

@media (max-width: 699px) {
    .t-atc-inner { gap: 10px; padding: 8px 0; }
    /* Una riga sola: «Aggiungi al carrello» su due righe raddoppiava la barra
       e con lei lo spazio rubato alla pagina. */
    .t-atc .t-btn { padding: 0 12px; min-height: 48px; font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
    .t-atc .qty-stepper { flex: none; }
}

/* Con la barra accesa il fondo della pagina si alza di quanto è alta: senza,
   l'ultima riga del piè di pagina restava sotto la barra, irraggiungibile.
   E il tasto dell'assistenza sale con lei invece di finirci sotto. */
body:has(.t-atc.is-shown) { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
body:has(.t-atc.is-shown) .support { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
body:has(.t-atc.is-shown) .printy-pill { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }

/* Mentre l'avviso dei cookie aspetta una risposta, la barra si fa da parte:
   stanno nello stesso posto, e due riquadri uno sopra l'altro in fondo allo
   schermo non si leggono. */
body:has(.consenso:not([hidden])) .t-atc { transform: translateY(110%); }

@media (prefers-reduced-motion: reduce) {
    .t-drawer-panel, .t-drawer-veil, .filter-panel.is-sheet, .sx, .sx-facets { transition: none; }
    .t-drawer-level.is-current.da-destra, .t-drawer-level.is-current.da-sinistra { animation: none; }
    .sx-mic[aria-pressed='true'], .sx-voice-wave i { animation: none; }
}

/* La promozione a righe («3x2», «−10% da 200 €»): nell'angolo opposto allo
   sconto, in verde come gli sconti del carrello, perché può valere insieme. */
.t-flag.is-promo { right: auto; left: 0; background: var(--green); }

/* ------------------------------------------------------------ il marchio */

/* Il nome del negozio al posto del logo, finché il negozio non ne sceglie
   uno (`storefront.brand.logo`). */
.brand-name {
    font-family: var(--font);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink);
    white-space: nowrap;
}