/**
 * Topbar, header e ricerca.
 *
 * La struttura viene dalla tavola 2 — topbar sottile, logo a sinistra,
 * navigazione centrata, icone a destra, nessun campo di ricerca in vista — ma
 * **le misure no**: quelle della tavola danno una navigazione da 11 px e una
 * riga alta 70, che a schermo si leggono come un sito rimpicciolito. Qui la
 * proporzione fra le tre zone e' quella del disegno, la scala e' reale.
 *
 *   topbar   44 px, testo 13    (tavola 33 / 11)
 *   header   88 px, nav 15      (tavola 70 / 13)
 *   logo     50 px              (tavola 42)
 *   icone    24 px in 48        (tavola 20 in 40)
 */

/* --- topbar ------------------------------------------------------------
   Avorio, non antracite: la prima cosa che si vede del sito e' una tinta
   calda, non una barra nera. */
.st-topbar {

    color: var(--st-charcoal);
}
.st-topbar__list {

    

    

    
}
.st-topbar__item {

    
    font-size: var(--st-fs-micro, 13px);
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
}
.st-topbar__item .st-icon { color: var(--st-copper); flex: 0 0 auto; }

/* L'header e' `sticky`: chiunque porti qualcosa «in cima» — un'ancora, il fuoco
   che si sposta con il tabulatore — lo consegnerebbe li' sotto, visibile per il
   browser e invisibile per una persona. `scroll-padding-top` dice dove comincia
   davvero la parte libera.
   Da quando le categorie hanno la loro riga la testata e' alta 76 + 52 + il
   filetto, cioe' 129: qui 140, con un margine perche' un'ancora che arriva
   appiccicata al bordo si legge come tagliata. */
html { scroll-padding-top: 140px; }

/* --- header, una riga --------------------------------------------------
   Logo, navigazione al centro, quattro icone. La ricerca sta dietro una lente
   e apre una scena a tutta larghezza: un campo fisso al centro spingeva la
   navigazione su una seconda riga e portava la testata a 142 px, un terzo del
   primo schermo occupato da comandi. */
.st-header {
    position: sticky; top: 0; z-index: 80;

}
/* L'impaginazione della testata sta in `chrome.css`, che si carica dopo e
   vince: qui una `grid-template-columns` sarebbe una riga che sembra decidere
   e non decide. E' lo stesso inciampo gia' annotato li'. */
.st-header__logo {   justify-self: start;  }
.st-logo { display: block; height: 50px; width: auto; }

.st-logo-text {
    font-family: var(--st-font-heading);
    font-size: 1.45rem; font-weight: 700;
    color: var(--st-charcoal); letter-spacing: -.02em; white-space: nowrap;
}
.st-logo-text span { color: var(--st-copper); }

/* --- navigazione ------------------------------------------------------- */
.st-nav { justify-self: center;  }
.st-nav__list {

       flex-wrap: nowrap;
}
.st-nav__link {

    font-size: var(--st-fs-small, 14px);
    font-weight: 600;  
      
    transition: color var(--st-transition);
}
/* Il segno della voce attiva sta in `chrome.css`, che si carica dopo. Qui ce
   n'era una versione con gli stati hover svuotati: restava solo il riposo, che
   e' quello che disegna la barretta collassata — e sotto ogni voce del menu
   c'era un trattino rame largo un pixel. Una regola che nessuno leggeva piu'
   continuava a disegnare. */

/* «Configura» e' il percorso che porta all'acquisto, non una categoria: si
   distingue con il rame e un filo, non con un pulsante — un pulsante dentro la
   navigazione compete con quello della pagina. */
.st-nav__item--azione {
    margin-left: 4px; padding-left: clamp(14px, 2vw, 30px);
    border-left: 1px solid var(--st-border);
}
.st-nav__item--azione .st-nav__link { color: var(--st-copper-text, var(--st-copper)); }

/* --- icone ------------------------------------------------------------- */
.st-header__actions {    justify-self: end; }
.st-iconbtn {

     
      border-radius: 50%;
     text-decoration: none; 
    transition: background var(--st-transition), color var(--st-transition);
}
.st-iconbtn:hover { background: var(--st-ivory);  }
.st-iconbtn__badge {

     
     
    font-size: 11px; font-weight: 700; line-height: 1; 
    box-shadow: 0 0 0 2px var(--st-white);
}
.st-burger { display: none; }

/* =======================================================================
   LA SCENA DELLA RICERCA
   =======================================================================
   Non una tendina: una superficie che prende la larghezza della pagina, con
   la domanda scritta grande e — prima ancora che si digiti — le famiglie del
   catalogo e cinque termini che portano da qualche parte. Una ricerca che si
   apre su un rettangolo bianco chiede di indovinare cosa il sito contiene.
   ======================================================================= */
.st-searchover { position: fixed; inset: 0; z-index: 200; }
.st-searchover__velo {
    position: absolute; inset: 0;
    background: rgba(var(--st-charcoal-rgb, 47, 50, 54), .46);
    animation: st-sfuma .2s ease;
}
.st-searchover__pannello {
    position: relative;
    background: var(--st-white);
    border-bottom: 1px solid var(--st-border-soft, #E9E5DF);
    box-shadow: 0 24px 60px rgba(47, 50, 54, .18);
    max-height: 88vh; overflow-y: auto;
    animation: st-scendi .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes st-sfuma { from {  } }
@keyframes st-scendi { from {   } }

.st-searchover__inner { padding: 34px 0 40px; }
.st-searchover__testa {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--st-space-3); margin-bottom: 20px;
}
.st-searchover__titolo {
    margin: 0;
    font-family: var(--st-font-display);
    font-size: var(--st-fs-h2);
    font-weight: 600; line-height: 1.15; color: var(--st-charcoal);
}
.st-searchover__chiudi {
    display: inline-grid; place-items: center;
    width: 48px; height: 48px;
    border: 1px solid var(--st-border-soft, #E9E5DF); border-radius: 50%;
    background: none; color: var(--st-charcoal); cursor: pointer;
    transition: background var(--st-transition), border-color var(--st-transition);
}
.st-searchover__chiudi:hover { background: var(--st-ivory); border-color: var(--st-copper); }

/* il campo */
.st-searchover__campo { position: relative; }
.st-searchover__campo form { position: relative; display: block; }
.st-searchover__campo .st-search__input {
    width: 100%; height: 72px;
    padding: 0 72px 0 26px;
    font-family: var(--st-font-body);
    font-size: 1.375rem; color: var(--st-charcoal);
    background: var(--st-ivory);
    border: 1.5px solid transparent; border-radius: 6px;
    transition: border-color var(--st-transition), background var(--st-transition), box-shadow var(--st-transition);
}
.st-searchover__campo .st-search__input::placeholder { color: #8A857D; }
.st-searchover__campo .st-search__input:focus {
    background: var(--st-white); border-color: var(--st-copper); outline: none;
    box-shadow: 0 0 0 3px rgba(var(--st-copper-rgb, 180, 90, 23), .18);
}
.st-searchover__campo .st-search__submit {
    position: absolute; top: 50%; right: 12px; transform: translateY(-50%);
    display: grid !important; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
}

/* prima di digitare */
.st-searchover__spunti { display: grid; gap: 26px; margin-top: 28px; }
.st-searchover__etichetta {
    margin: 0 0 12px;
    font-size: var(--st-fs-micro, 13px); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted);
}
.st-searchover__pillole { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-searchover__pillole a,
.st-searchover__pillole button {
    display: inline-flex; align-items: center; gap: 9px;
    min-height: 46px; padding: 0 20px;
    font-family: inherit; font-size: var(--st-fs-small, 14px); font-weight: 600;
    color: var(--st-charcoal); text-decoration: none; cursor: pointer;
    background: var(--st-white);
    border: 1px solid var(--st-border-soft, #E9E5DF); border-radius: 999px;
    transition: border-color var(--st-transition), background var(--st-transition), color var(--st-transition);
}
.st-searchover__pillole a span {
    font-size: 12px; font-weight: 600; color: var(--st-muted);
    padding: 2px 8px; background: var(--st-ivory); border-radius: 999px;
}
.st-searchover__pillole a:hover, .st-searchover__pillole button:hover {
    border-color: var(--st-copper); background: var(--st-copper-soft, #F9F2EC);
    color: var(--st-copper-text, var(--st-copper));
}
.st-searchover__pillole--quiet button { font-weight: 500; color: var(--st-muted); }
.st-searchover__pillole--quiet .st-icon { color: var(--st-copper); }

/* --- i risultati -------------------------------------------------------
   Il pannello lo riempie lo script del plugin: qui si decide solo come
   appare. Righe alte, fotografia grande, prezzo in rame a destra. */
.st-searchover .st-search__panel {
    /* `static`, e non e' un dettaglio: il pannello dei suggerimenti nasce
       `absolute` — nell'header serviva cosi', per scendere sopra la pagina
       senza spingerla. Dentro la scena della ricerca invece **e'** la pagina:
       restando fuori dal flusso non faceva crescere il contenitore, e i
       risultati uscivano dal riquadro bianco tagliati a meta'. */
    position: static;
    margin-top: 26px;
    border: 0;
    border-top: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 0;
    box-shadow: none;
    background: none;
    padding-top: 8px;
    max-height: none;
    overflow: visible;
}
.st-search__group { padding-top: 18px; }
.st-search__group-title {
    margin: 0 0 8px;
    font-size: var(--st-fs-micro, 13px); font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted);
}
.st-search__group ul { margin: 0; padding: 0; list-style: none; }
.st-search__group a {
    display: flex; align-items: center; gap: 16px;
    padding: 12px 14px; margin-inline: -14px;
    border-radius: 8px;
    color: var(--st-charcoal); text-decoration: none;
    transition: background var(--st-transition);
}
.st-search__group a:hover,
.st-search__group li[aria-selected="true"] a { background: var(--st-ivory); }
.st-search__group img,
.st-search__noimg {
    flex: 0 0 auto; width: 64px !important; height: 64px !important;
    object-fit: cover; border-radius: 6px;
    background: var(--st-sand); border: 1px solid var(--st-border-soft, #E9E5DF);
}
.st-search__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.st-search__name {
    font-size: var(--st-fs-ui, 15px); font-weight: 600; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.st-search__cat { font-size: var(--st-fs-micro, 13px); color: var(--st-muted); }
.st-search__price {
    flex: 0 0 auto; font-size: var(--st-fs-small, 14px); font-weight: 700;
    color: var(--st-copper-text, var(--st-copper)); white-space: nowrap;
}
.st-search__price.is-quote { color: var(--st-muted); font-weight: 600; }
.st-search__count {
    font-size: 12px; font-weight: 600; color: var(--st-muted);
    padding: 2px 8px; background: var(--st-ivory); border-radius: 999px;
}
.st-search__more {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 50px; margin-top: 16px; padding: 0 24px;
    font-size: var(--st-fs-small, 14px); font-weight: 700;
    color: var(--st-white); background: var(--st-copper);
    border-radius: 4px; text-decoration: none;
}
.st-search__more:hover { background: var(--st-copper-dark); color: #fff; }

/* nessun risultato — uno stato progettato, non una riga di testo persa */
.st-search__empty { padding: 26px 0 8px; }
.st-search__empty p { margin: 0 0 8px; }
.st-search__empty p strong {
    font-family: var(--st-font-display); font-size: 1.35rem; font-weight: 600;
    color: var(--st-charcoal);
}
.st-search__link {
    display: inline-flex; align-items: center; min-height: 44px;
    font-weight: 600; color: var(--st-copper-text, var(--st-copper));
}

/* attesa — scheletro, non la parola «Cerco...» in mezzo al vuoto */
.st-search__loading { padding: 22px 0 8px; display: grid; gap: 12px; font-size: 0; }
.st-search__loading::before, .st-search__loading::after {
    content: ""; display: block; height: 64px; border-radius: 8px;
    background: linear-gradient(90deg, var(--st-ivory) 25%, #EFEAE3 37%, var(--st-ivory) 63%);
    background-size: 400% 100%;
    animation: st-scheletro 1.4s ease infinite;
}
.st-search__loading::after { width: 72%; }
@keyframes st-scheletro { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* --- il menu del telefono ----------------------------------------------
   Un cassetto che scende da sotto l'header e lascia scoperta la pagina ai
   lati: si capisce di essere sempre sulla stessa pagina, non in un'altra
   schermata. Ancorato all'header e non alla finestra, perche' l'header e'
   `sticky`. Chiuso e' `hidden` nell'HTML: qui si descrive solo com'e' aperto. */
.st-mobilemenu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    height: 100vh;
    z-index: 79;
    background: rgba(var(--st-charcoal-rgb, 47, 50, 54), .42);
}
.st-mobilemenu__panel {
    background: var(--st-white);
    box-shadow: 0 20px 40px rgba(47, 50, 54, .16);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding-bottom: 24px;
    overscroll-behavior: contain;
}

.st-mobilemenu__testa {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--st-space-3);
    padding: 14px var(--st-gutter, 32px);
    background: var(--st-white);
    border-bottom: 1px solid var(--st-border-soft, #E9E5DF);
}
.st-mobilemenu__marchio .st-logo { height: 38px; }
.st-mobilemenu__chiudi {
    display: inline-grid; place-items: center;
    width: 48px; height: 48px;
    margin-right: -10px;
    border: 1px solid var(--st-border-soft, #E9E5DF);
    border-radius: 50%;
    background: none; color: var(--st-charcoal); cursor: pointer;
}
.st-mobilemenu__chiudi:hover { background: var(--st-ivory); border-color: var(--st-copper); }

.st-mobilemenu__list { margin: 0; padding: 0; list-style: none; }
.st-mobilemenu__link {
    display: flex;
    align-items: center;
    gap: 12px;
    /* 60 px di riga: su un telefono queste sono le uniche voci del sito, e un
       elenco di righe da 44 con il testo tutto uguale — com'era — non dice
       dove si e' ne' cosa si sta guardando. */
    min-height: 60px;
    padding: 12px var(--st-gutter, 32px);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--st-charcoal);
    text-decoration: none;
    border-bottom: 1px solid var(--st-border-soft, #E9E5DF);
}
.st-mobilemenu__link > span:first-child { flex: 1; min-width: 0; }
.st-mobilemenu__link .st-icon { color: var(--st-muted); flex: 0 0 auto; }
.st-mobilemenu__link.is-active { color: var(--st-copper-text, var(--st-copper)); }
.st-mobilemenu__link.is-active .st-icon { color: var(--st-copper); }
.st-mobilemenu__link:hover,
.st-mobilemenu__link:focus-visible { background: var(--st-ivory); color: var(--st-copper-text, var(--st-copper)); }
/* Il numero dei prodotti dice quanto c'e' dietro una voce prima di aprirla:
   e' l'unica informazione che un menu puo' dare senza costare un tocco. */
.st-mobilemenu__n {
    flex: 0 0 auto;
    min-width: 26px; padding: 3px 8px;
    font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center;
    color: var(--st-muted);
    background: var(--st-ivory);
    border-radius: 999px;
}

.st-mobilemenu__cta {
    display: flex !important;
    margin: 20px var(--st-gutter, 32px) 4px;
    width: calc(100% - 2 * var(--st-gutter, 32px));
}

.st-mobilemenu__servizi {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 2px;
    margin: 18px var(--st-gutter, 32px) 0; padding: 0;
    list-style: none;
}
.st-mobilemenu__servizi a {
    display: flex; align-items: center; gap: 10px;
    min-height: 52px; padding: 8px 12px;
    font-size: var(--st-fs-small, 14px);
    font-weight: 500;
    color: var(--st-charcoal);
    text-decoration: none;
    background: var(--st-ivory);
    border-radius: 6px;
}
.st-mobilemenu__servizi a:hover { color: var(--st-copper-text, var(--st-copper)); }
.st-mobilemenu__servizi .st-icon { color: var(--st-copper); flex: 0 0 auto; }

.st-mobilemenu__recapiti {
    margin: 22px var(--st-gutter, 32px) 0;
    padding-top: 18px;
    border-top: 1px solid var(--st-border-soft, #E9E5DF);
}
.st-mobilemenu__recapiti p {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 10px;
    font-size: var(--st-fs-ui, 15px);
}
.st-mobilemenu__recapiti p:first-child {
    font-family: var(--st-font-display);
    font-size: 1.15rem; font-weight: 600;
    color: var(--st-charcoal);
    margin-bottom: 14px;
}
.st-mobilemenu__recapiti .st-icon { color: var(--st-copper); flex: 0 0 auto; }
.st-mobilemenu__recapiti a {
    min-height: 44px; display: inline-flex; align-items: center;
    color: var(--st-charcoal); text-decoration: none; font-weight: 500;
}
.st-mobilemenu__recapiti a:hover { color: var(--st-copper-text, var(--st-copper)); text-decoration: underline; }

/* La pagina sotto non scorre mentre il cassetto e' aperto: senza, si perde il
   segno di dov'era rimasta la lettura. */
body.st-menu-open { overflow: hidden; }

/* Le regole dei bottoni di WooCommerce e del tema padre arrivano con una
   specificita' alta e vanno battute una per una: il colore azzurro predefinito
   del `submit` e la spaziatura interna che schiacciava la lente. */
.st-search__submit {
    background: none !important;
    border: 0 !important;
    color: var(--st-charcoal, #2F3236) !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
}
.st-search__submit:hover { color: var(--st-copper-text, #AE4C0B) !important; }

/* --- tablet e telefono -------------------------------------------------
   IL MENU COMPATTO PARTE A 1140.
   Logo 168 + sei voci + quattro icone da 48 non stanno in un contenitore da
   1080: fra i 1024 e i 1140 le icone finivano oltre il bordo. Le voci sono
   gia' alla spaziatura minima — non c'e' niente da comprimere, c'e' da
   passare all'altra testata. */
@media (max-width: 1140px) {
    .st-header__inner {

        min-height: 72px;
    }
    .st-nav {  }
    .st-burger {
         place-items: center;
        width: 48px; height: 48px; margin-left: -12px;
        border: 0; background: none; color: var(--st-charcoal); cursor: pointer;
        border-radius: 50%;
    }
    .st-burger:hover { background: var(--st-ivory); }
    .st-header__logo {  }
    .st-logo { height: 44px; }
    /* Senza la riga delle categorie la testata torna alta 76. */
    html { scroll-padding-top: 88px; }
}

/* La ricerca sul telefono e' a tutto schermo: non un pannello che scende, ma
   la sola cosa che c'e'. Testata con la freccia indietro, campo, risultati a
   scorrimento, bersagli larghi. */
@media (max-width: 900px) {
    .st-searchover__velo { display: none; }
    .st-searchover__pannello {
        min-height: 100%; max-height: none;
        border-bottom: 0; box-shadow: none;
        animation: none;
    }
    .st-searchover__inner { padding: 18px 0 32px; }
    .st-searchover__testa {
        position: sticky; top: 0; z-index: 2;
        margin-inline: calc(-1 * var(--st-gutter, 32px));
        padding: 10px var(--st-gutter, 32px) 14px;
        background: var(--st-white);
        border-bottom: 1px solid var(--st-border-soft, #E9E5DF);
        margin-bottom: 18px;
    }
    .st-searchover__titolo { font-size: var(--st-fs-lead); }
    .st-searchover__campo .st-search__input { height: 58px; font-size: var(--st-fs-body); padding: 0 58px 0 18px; }
    .st-searchover__campo .st-search__submit { width: 42px; height: 42px; right: 8px; }
    .st-searchover .st-search__panel { max-height: none; }
    .st-search__group a { padding: 14px; }
}

@media (max-width: 620px) {
    :root { --st-gutter: 20px; }
    .st-topbar__list { gap: 4px 22px; padding: 6px 18px; min-height: 40px; }
    .st-topbar__item--secondary { display: none; }
    .st-iconbtn { width: 44px; height: 44px; }
    .st-logo { height: 38px; }
    .st-mobilemenu__servizi { grid-template-columns: 1fr; }
    .st-search__group img, .st-search__noimg { width: 56px !important; height: 56px !important; }
}

/* ====================================================================
 * IL PANNELLO DELLE SOTTOVOCI
 *
 * Con una categoria sola il menu e' il sito. «Tende da interno» da sola non
 * dice cosa si vende: sotto ci sono tre tipi che risolvono tre problemi
 * diversi — filtrare la luce, oscurarla, orientarla — e chi non li vede in
 * testata deve andarli a cercare.
 *
 * Si apre al passaggio del mouse **e al fuoco da tastiera**: un pannello che si
 * apre solo col mouse esclude chi naviga con il tasto di tabulazione, che su un
 * sito con quattro voci di menu e' anche il modo piu' veloce di muoversi.
 *
 * Resta ancorato alla sua voce e non attraversa la testata: e' un elenco di
 * tre righe, non un catalogo, e un pannello largo mezza pagina per tre righe
 * sarebbe una scenografia.
 * ==================================================================== */

@media (min-width: 1141px) {
  .st-nav__item--conpannello { position: relative; }

  .st-nav__item--conpannello > .st-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }

  .st-nav__item--conpannello > .st-nav__link .st-icon {
    transition: transform .16s ease;
  }

  .st-nav__pannello {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 60;
    min-width: 232px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid var(--st-p-riga, #DED8D0);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(35, 32, 29, .12);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -4px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
  }

  /*
   * Il pannello resta aperto mentre il puntatore lo attraversa: senza, basta
   * uscire di un pixel dalla voce per farlo sparire prima di averlo raggiunto.
   * Il margine sopra e' il ponte — sei pixel scoperti chiuderebbero il menu a
   * meta' strada.
   */
  .st-nav__item--conpannello:hover .st-nav__pannello,
  .st-nav__item--conpannello:focus-within .st-nav__pannello {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }

  .st-nav__item--conpannello:hover > .st-nav__link .st-icon,
  .st-nav__item--conpannello:focus-within > .st-nav__link .st-icon {
    transform: rotate(180deg);
  }

  .st-nav__sub { margin: 0; padding: 0; list-style: none; }

  .st-nav__sub a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 7px;
    font-size: .9375rem;
    color: var(--st-p-inchiostro, #23201D);
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
  }

  .st-nav__sub a:hover,
  .st-nav__sub a:focus-visible {
    background: var(--st-p-rame-tenue, #FBF1E8);
    color: var(--st-p-rame-testo, #AE4C0B);
  }

  /* «Vedi tutto» chiude l'elenco e si stacca: e' la strada per chi non ha
     trovato nella lista quello che cercava. */
  .st-nav__sub-tutti {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--st-p-riga-chiara, #F2EDE6);
  }

  .st-nav__sub-tutti a {
    font-size: .875rem;
    font-weight: 500;
    color: var(--st-p-rame-testo, #AE4C0B);
  }
}

@media (prefers-reduced-motion: reduce) {
  .st-nav__pannello,
  .st-nav__item--conpannello > .st-nav__link .st-icon { transition: none; }
}

/* ====================================================================
 * IL PANNELLO SU TELEFONO, RIFATTO
 *
 * Com'era: quattro voci di menu alte sessanta pixel, poi un pulsante, poi
 * quattro riquadri grigi pieni — conto, preferiti, carrello, assistenza — e in
 * fondo i recapiti. Occupava una schermata e mezza, e i riquadri grigi
 * pesavano quanto le voci di navigazione pur essendo scorciatoie secondarie.
 *
 * L'errore era di gerarchia, non di spazio: in un pannello **tutto ha lo stesso
 * peso a meno che qualcosa non lo cambi**, e li' non lo cambiava niente. Il
 * risultato e' che «Preferiti» gridava quanto «Tende da interno».
 *
 * Rifatto per ordine di utilita' su un telefono:
 *
 *   1. il telefono, in cima e riconoscibile — sessanta per cento del traffico
 *      arriva da li', e su un prodotto su misura chiamare risolve in due minuti
 *      quello che un modulo non risolve in due giorni;
 *   2. la navigazione, righe piu' corte ma ancora comode da premere;
 *   3. l'azione principale, piena e larga;
 *   4. le scorciatoie, in una riga sola di collegamenti semplici — non piu'
 *      quattro riquadri che sembrano quattro decisioni.
 * ==================================================================== */

@media (max-width: 1140px) {
  /* Le righe scendono da 60 a 52: restano ben oltre i 44 del bersaglio minimo,
     e quattro voci in meno di mezza schermata invece di una schermata piena. */
  .st-mobilemenu__link {
    min-height: 52px;
    font-size: 1rem;
  }

  /*
   * Le scorciatoie perdono il riquadro pieno e diventano collegamenti in fila.
   * Due colonne, testo piccolo, icona accanto: si leggono come «altro», che e'
   * quello che sono.
   */
  .st-mobilemenu__servizi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
    margin: 16px 0 0;
    padding: 14px var(--st-gutter, 20px) 0;
    border-top: 1px solid var(--st-p-riga-chiara, #F2EDE6);
    list-style: none;
  }

  .st-mobilemenu__servizi li { margin: 0; }

  .st-mobilemenu__servizi a {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: .875rem;
    color: var(--st-p-grigio, #6F6A64);
    text-decoration: none;
  }

  .st-mobilemenu__servizi a:hover,
  .st-mobilemenu__servizi a:focus-visible {
    background: none;
    color: var(--st-p-rame-testo, #AE4C0B);
  }

  .st-mobilemenu__servizi .st-icon { color: var(--st-p-debole, #726C64); }

  /* L'azione principale respira sopra e sotto: e' l'unica cosa piena del
     pannello, e deve restare l'unica. */
  .st-mobilemenu__cta {
    margin: 18px var(--st-gutter, 20px) 0;
    min-height: 52px;
  }

  /*
   * I recapiti salgono in cima, sopra la navigazione.
   *
   * `order` su un contenitore flessibile sposta senza toccare il documento:
   * l'ordine di lettura per chi usa un lettore di schermo resta quello scritto,
   * dove i recapiti stanno in fondo insieme alle altre informazioni di
   * servizio. A schermo sale perche' e' la cosa che serve per prima; nel
   * documento resta dove ha senso leggerla.
   */
  .st-mobilemenu__corpo {
    display: flex;
    flex-direction: column;
  }

  .st-mobilemenu__recapiti {
    order: -1;
    margin: 0 0 14px;
    padding: 14px var(--st-gutter, 20px);
    background: var(--st-p-crema, #FAF6F1);
    border-bottom: 1px solid var(--st-p-riga-chiara, #F2EDE6);
  }
}

/* ====================================================================
 * IL PANNELLO SU TELEFONO — `st-drawer`
 *
 * Nomi nuovi, e non e' vezzo: le regole scritte sulle classi precedenti
 * perdevano contro qualcosa che non sono riuscito a individuare, e continuare a
 * cercare chi comandava costava piu' che ripartire da un nome libero.
 *
 * Il pannello e' costruito per ordine di utilita' su un telefono — dove arriva
 * il sessanta per cento del traffico — e non per ordine di importanza
 * aziendale: prima come chiederci aiuto, poi dove andare, poi cosa fare, poi
 * il resto. Ogni blocco ha un peso diverso dal precedente, perche' in un
 * pannello tutto pesa uguale finche' qualcosa non lo cambia.
 * ==================================================================== */

.st-drawer {
  display: flex;
  flex-direction: column;
  /*
   * A tutta larghezza sotto i 520 px, a cassetto sopra.
   *
   * Con il cassetto stretto restava una striscia di trenta pixel in cui si
   * vedeva la pagina sotto: il velo scuro non copriva, e quella striscia si
   * leggeva come un pezzo di sito che spunta da dietro invece che come uno
   * strato sopra. Su un telefono da 390 pixel trenta di striscia non servono a
   * niente — non si torna indietro toccandoli, si torna indietro con la X — e
   * costano l'unica cosa che un pannello deve garantire: essere una schermata
   * intera, non una finestra dentro un'altra.
   */
  width: 100%;
  height: 100%;
  margin-left: auto;
  background: #fff;
  box-shadow: -12px 0 40px rgba(35, 32, 29, .18);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 521px) {
  .st-drawer { width: min(86vw, 400px); }
}

/* --- testa ------------------------------------------------------------ */

.st-drawer__testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--st-p-riga-chiara, #F2EDE6);
}

.st-drawer__eti {
  font-size: var(--st-fs-micro);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-p-debole, #726C64);
}

.st-drawer__chiudi {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -8px;   /* il bersaglio arriva al bordo, il segno no */
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--st-p-inchiostro, #23201D);
  cursor: pointer;
}

.st-drawer__chiudi:hover { background: var(--st-p-crema, #FAF6F1); }

/* --- l'aiuto, in cima --------------------------------------------------
 *
 * Non e' un recapito fra gli altri in fondo alla pagina: e' la prima cosa del
 * pannello. Su una tenda su misura chi ha un dubbio sulla misura non compra
 * finche' non l'ha tolto, e toglierlo per telefono costa due minuti.
 */

.st-drawer__aiuto {
  display: grid;
  gap: 3px;
  padding: 16px 18px;
  background: var(--st-p-rame-tenue, #FBF1E8);
  border-bottom: 1px solid var(--st-p-riga-chiara, #F2EDE6);
}

.st-drawer__aiuto-eti {
  font-size: .8125rem;
  color: var(--st-p-grigio, #6F6A64);
}

.st-drawer__aiuto-num {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.st-drawer__aiuto-num .st-icon { color: var(--st-p-rame, #B45A17); flex: 0 0 auto; }

.st-drawer__numero {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--st-p-inchiostro, #23201D);
  text-decoration: none;
  letter-spacing: .01em;
}

/* --- navigazione ------------------------------------------------------- */

.st-drawer__nav { padding: 6px 0; }
.st-drawer__nav ul { margin: 0; padding: 0; list-style: none; }

.st-drawer__voce {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 18px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--st-p-inchiostro, #23201D);
  text-decoration: none;
}

.st-drawer__voce-testo { flex: 1; min-width: 0; }
.st-drawer__voce .st-icon { color: var(--st-p-debole, #726C64); flex: 0 0 auto; }
.st-drawer__voce.is-active { color: var(--st-p-rame-testo, #AE4C0B); }
.st-drawer__voce:active { background: var(--st-p-crema, #FAF6F1); }

/* Il conteggio dice quanto c'e' dietro la voce: su una categoria sola e' anche
   l'unico modo di far capire che il catalogo non e' piccolo. */
.st-drawer__n {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--st-p-crema, #FAF6F1);
  font-size: var(--st-fs-micro);
  font-weight: 600;
  color: var(--st-p-grigio, #6F6A64);
}

/* Le sottovoci: rientrate, piu' leggere, senza icona. La gerarchia si legge
   dal rientro e dal peso, non da una decorazione in piu'. */
/*
 * Il selettore passa dalla navigazione, e la ragione vale oltre questa riga.
 *
 * Sopra c'e' `.st-drawer__nav ul { padding: 0 }` — una classe piu' un
 * elemento — e qui c'era una classe sola: la regola generale vinceva su quella
 * particolare, e le sottovoci perdevano il rientro finendo a filo del bordo,
 * indistinguibili dalle voci principali.
 *
 * E' l'errore piu' comune quando si azzerano gli elenchi «una volta per
 * tutte»: quel reset e' piu' specifico di quasi tutto quello che si scrivera'
 * dopo.
 */
.st-drawer__nav .st-drawer__sotto {
  margin: 0 0 6px;
  padding: 0 18px 6px 32px;
  list-style: none;
  border-left: 2px solid var(--st-p-riga-chiara, #F2EDE6);
  margin-left: 18px;
}

.st-drawer__nav .st-drawer__sotto a {
  display: flex;
  align-items: center;
  min-height: 42px;
  font-size: .9375rem;
  font-weight: 400;
  color: var(--st-p-grigio, #6F6A64);
  text-decoration: none;
}

.st-drawer__nav .st-drawer__sotto a:active { color: var(--st-p-rame-testo, #AE4C0B); }

/* --- l'azione ---------------------------------------------------------- */

.st-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  margin: 10px 18px 4px;
  border-radius: 8px;
  background: var(--st-p-rame, #B45A17);
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
}

.st-drawer__cta:active { background: var(--st-p-rame-scuro, #944A13); color: #fff; }
.st-drawer__cta .st-icon { color: currentColor; }

/* --- il resto, leggero ------------------------------------------------- */

.st-drawer__servizi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 12px;
  margin: 14px 0 24px;
  padding: 14px 18px 0;
  border-top: 1px solid var(--st-p-riga-chiara, #F2EDE6);
  list-style: none;
}

.st-drawer__servizi a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: .875rem;
  color: var(--st-p-grigio, #6F6A64);
  text-decoration: none;
}

.st-drawer__servizi .st-icon { color: var(--st-p-debole, #726C64); flex: 0 0 auto; }
.st-drawer__servizi a:active { color: var(--st-p-rame-testo, #AE4C0B); }

/* ====================================================================
 * IL BURGER DIVENTA LA CROCE, E IL PANNELLO ENTRA DA SINISTRA
 *
 * Tre cose, e sono la stessa cosa detta in tre modi: il pannello deve sembrare
 * uscire dal pulsante che lo apre.
 *
 * Entrava da destra mentre il pulsante sta a sinistra — il movimento
 * contraddiceva il gesto. Aveva una croce propria in alto a destra, cioe' nel
 * punto piu' lontano dal dito che aveva appena premuto. E compariva di colpo,
 * senza dire da dove venisse.
 *
 * Ora esce da sinistra, il burger stesso si trasforma nella croce, e il
 * movimento dura poco piu' di due decimi: abbastanza per essere seguito,
 * troppo poco per essere aspettato.
 * ==================================================================== */

.st-burger__segno {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--st-p-inchiostro, #23201D);
  transition: background .18s ease;
}

.st-burger__segno::before,
.st-burger__segno::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--st-p-inchiostro, #23201D);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}

.st-burger__segno::before { top: -6px; }
.st-burger__segno::after { top: 6px; }

/*
 * Aperto: il tratto di mezzo sparisce e gli altri due si incrociano dove
 * stava lui. Sono gli stessi tratti di prima — non due icone che si
 * sostituiscono — ed e' per questo che il passaggio si vede come un movimento
 * invece che come uno sfarfallio.
 */
.st-burger[aria-expanded="true"] .st-burger__segno { background: transparent; }
.st-burger[aria-expanded="true"] .st-burger__segno::before { transform: translateY(6px) rotate(45deg); }
.st-burger[aria-expanded="true"] .st-burger__segno::after { transform: translateY(-6px) rotate(-45deg); }

/* --- l'ingresso da sinistra ------------------------------------------- */

.st-drawer {
  margin-left: 0;
  margin-right: auto;
  transform: translateX(-100%);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}

.st-mobilemenu.is-aperto .st-drawer,
.st-mobilemenu__panel.is-aperto .st-drawer,
.st-mobilemenu.is-aperto > .st-drawer {
  transform: translateX(0);
}

/* Il velo scuro si accende con il pannello invece di apparire gia' scuro:
   due cose che entrano insieme si leggono come una sola. */
.st-mobilemenu {
  opacity: 0;
  transition: opacity .26s ease;
}

.st-mobilemenu.is-aperto { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .st-drawer,
  .st-mobilemenu,
  .st-burger__segno,
  .st-burger__segno::before,
  .st-burger__segno::after { transition: none; }
}

/* =======================================================================
 * IL PANNELLO DELLA RICERCA, RIFATTO
 *
 * `.st-search__group a` ha `margin-inline: -14px` per far sbordare
 * l'evidenziazione fino ai bordi — e' il modo giusto di farlo, ma vuole che
 * il contenitore abbia quei 14px da cedere. Il pannello aveva `padding: 0`,
 * quindi le righe uscivano davvero: 586 px dentro 560, tredici per lato, e
 * il pannello scorreva in orizzontale.
 * ===================================================================== */

/* Il pannello e' la cornice e non scorre: dentro, un involucro porta la lista
   e scorre lui. Cosi' il piede puo' stare fermo in fondo senza trucchi. */
.st-search__panel {
    display: flex;
    flex-direction: column;
    padding: 0;
    border-radius: var(--st-r-scheda, 20px);
    overflow: hidden;
}
.st-search__scorre {
    /* La spaziatura che il margine negativo delle righe si riprende. */
    padding: 0 14px 8px;
    /* Scorre solo in verticale: in orizzontale non c'e' niente da vedere, e
       una barra orizzontale in un elenco di risultati e' sempre un errore. */
    overflow-x: hidden;
    overflow-y: auto;
    /* La barra di scorrimento e' quella del sito, non quella del sistema. */
    scrollbar-width: thin;
    scrollbar-color: var(--st-copper, #B65532) transparent;
}
.st-search__scorre::-webkit-scrollbar { width: 6px; }
.st-search__scorre::-webkit-scrollbar-track { background: transparent; }
.st-search__scorre::-webkit-scrollbar-thumb {
    background: var(--st-copper, #B65532);
    border-radius: 999px;
}

.st-search__group { padding-top: 16px; padding-inline: 0; }
.st-search__group:first-child { padding-top: 14px; }

/* Il titolo di gruppo si allinea alle righe: le righe rientrano di 14 con il
   margine negativo, quindi il titolo deve rientrare degli stessi 14 meno la
   sua spaziatura, altrimenti l'etichetta e i nomi partono da due colonne. */
.st-search__group-title { padding-inline: 0; }

/* Il nome su due righe e il prezzo che non gli va addosso: il prezzo si
   prende la larghezza che gli serve e il nome quello che resta. */
.st-search__group a { align-items: flex-start; }
.st-search__price {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 12px;
    white-space: nowrap;
    align-self: center;
}

/* IL CAMPO E LA SUA CORNICE AVEVANO DUE RAGGI DIVERSI
   Il campo era a 3px dentro una cornice a 12: agli angoli si vedeva il
   rettangolo interno spuntare dal tondo esterno. */
.st-search__input { border-radius: inherit; }

/* IL «VEDI TUTTI» STA IN FONDO, MA SEMPRE VISIBILE
 *
 * Il link c'era gia', appeso in coda al contenuto che scorre: cioe' sotto la
 * piega del pannello, invisibile finche' non si scorreva fino in fondo. Il
 * risultato e' che il pannello sembrava tagliato a meta' su una riga a caso,
 * senza fine e senza via d'uscita.
 *
 * `sticky` lo tiene incollato al bordo basso: la lista scorre dietro, lui
 * resta. Il velo sopra dice che sotto c'e' dell'altro senza disegnare una
 * barra. */
.st-search__more {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 15px 18px;
    background: var(--st-white, #fff);
    border-top: 1px solid var(--st-border, #E4DDD2);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--st-copper-text, #B45431);
    text-decoration: none;
}
.st-search__more::after {
    content: "";
    width: 16px; height: 10px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h19M14.5 1L20 6l-5.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 12'%3E%3Cpath d='M1 6h19M14.5 1L20 6l-5.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform .2s;
}
.st-search__more:hover { background: var(--st-p-crema, #FAF6F1); }
.st-search__more:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .st-search__more::after { transition: none; }
    .st-search__more:hover::after { transform: none; }
}

/* L'ultima riga sopra il piede non deve finire sotto di lui. */
.st-search__panel > .st-search__group:last-of-type { padding-bottom: 4px; }

/* SU TELEFONO IL PREZZO VA SOTTO, NON DI FIANCO
 *
 * A 390px «Su preventivo» si prende centoventi pixel sulla destra e al nome
 * ne restano centotrenta: usciva «Tenda alla ve…» su ogni riga, cioe' quattro
 * risultati indistinguibili fra loro. Il prezzo e' un'informazione di
 * contorno mentre si cerca; il nome e' la ragione per cui si guarda l'elenco.
 * Sotto i 600px scende di riga e il nome si riprende la larghezza. */
@media (max-width: 600px) {
    .st-search__group a { flex-wrap: wrap; align-items: center; }
    .st-search__text { flex: 1 1 auto; min-width: 0; }
    .st-search__name {
        -webkit-line-clamp: 2;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .st-search__price {
        flex: 1 0 100%;
        margin-left: 0;
        padding-left: 80px;
        text-align: left;
        align-self: auto;
    }
}

/* ======================================================================
 * IL CASSETTO DEL MENU SU TELEFONO
 *
 * COSA E' STATO MISURATO (390x844, menu aperto)
 * --------------------------------------------
 *   testa «Menu»      50 px
 *   aiuto (telefono) 101 px
 *   navigazione      538 px
 *   «Configura»       52 px   ->  comincia a y=819 su 844: **tagliato a meta'**
 *   servizi          103 px   ->  interamente sotto la piega
 *
 * Il pulsante che porta a comprare — l'unico del pannello — non si vede
 * senza scorrere. E sopra di lui ci sono centocinquantuno pixel spesi per
 * dire «Menu» (che si capisce da solo) e per ripetere un numero di telefono
 * **gia' scritto cento pixel piu' su**, nella barra in cima al sito, visibile
 * nello stesso momento.
 *
 * SUL TELEFONO IN CIMA, CAMBIO IDEA E DICO PERCHE'
 * -----------------------------------------------
 * Il commento di quel blocco dice: «non e' un recapito fra gli altri in fondo
 * alla pagina: e' la prima cosa del pannello. Su una tenda su misura chi ha un
 * dubbio sulla misura non compra finche' non l'ha tolto». Il ragionamento e'
 * giusto e resta valido — il telefono nel cassetto ci sta. Quello che non
 * reggeva era la **posizione**: metterlo primo costa il pulsante d'acquisto,
 * e lo costa per ripetere una cosa che si vede gia' senza aprire il menu.
 *
 * LA DECISIONE
 * ------------
 * La navigazione scorre, l'azione no. Il pulsante «Configura la tua tenda»
 * viene ancorato in fondo al pannello: qualunque cosa succeda all'elenco —
 * una categoria in piu', un nome piu' lungo — resta dov'e' e si vede sempre.
 * E' l'unica disposizione che non si rompe da sola crescendo.
 * ==================================================================== */

@media (max-width: 1140px) {
    /* Il pannello smette di scorrere tutto insieme: scorre solo l'elenco. */
    .st-drawer {
        overflow: hidden;
    }

    /* Cinquanta pixel per la parola «Menu», dentro un pannello che e' un
       menu, aperto premendo un pulsante che dice menu. Resta per chi naviga
       a voce, dove e' il nome della regione. */
    .st-drawer__testa {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .st-drawer__nav {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* `order` e non un rimescolamento del PHP: la sequenza nel documento
       resta quella logica — aiuto, navigazione, azione — e cambia solo come
       si dispone sullo schermo stretto. */
    .st-drawer__cta      { order: 90; flex: 0 0 auto; margin-block: 12px 10px; }
    .st-drawer__aiuto    { order: 91; }
    .st-drawer__servizi  { order: 92; margin-block: 0 18px; }

    /* Il telefono non e' piu' un riquadro colorato: e' una riga come le
       altre. Da primo elemento del pannello era la cosa piu' rumorosa dello
       schermo, e non era la piu' importante. */
    .st-drawer__aiuto {
        gap: 1px;
        padding: 12px 18px;
        background: none;
        border-top: 1px solid var(--st-p-riga-chiara, #F2EDE6);
        border-bottom: 0;
    }

    .st-drawer__numero {
        font-size: var(--st-fs-body);
    }

    /* Quarantadue pixel: sette voci sotto la soglia del pollice, e sono le
       sottovoci, cioe' quelle che si premono davvero per arrivare a un
       catalogo. */
    .st-drawer__nav .st-drawer__sotto a {
        min-height: 44px;
    }
}