/* ===== SCHEDA PRODOTTO — generata da script/genera_schede.py =====
   NON modificare a mano: ogni rigenerazione sovrascrive il file.
   La fonte è prototipo-pdp/assets/style.css.
   ============================================================
/* origine:
   Struttura ripresa da autryofficial.com (porto del tema Foxkit — Jost, bianco/nero).
   Solo le regole della pagina prodotto. Nessun header, footer o chrome del sito.
   ====================================================================== */

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

:root{
  --black:#000;--ink:#000;--muted:#666;--sub:#666;--line:#e6e6e6;
  --bg:#fff;--bg2:#f6f6f6;--sale:#666;--maxw:1500px;--gut:clamp(15px,3vw,40px);
  --header-h:92px;--font:'Jost',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.25,.46,.45,.94);
}

/* base */
*{box-sizing:border-box;margin:0;padding:0}
/* clip e non hidden: `overflow-x:hidden` crea un contenitore di scorrimento
   e romperebbe `position:sticky` su header e colonna prodotto. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;font-weight:400;overflow-x:clip;max-width:100%;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font);font-weight:500;line-height:1.15}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* bottoni — la DA di autry-usa.com, non quella di un banner cookie.
   Il pulsante d'acquisto resta NERO al passaggio del mouse: l'inversione in
   bianco che c'era prima cambiava marchio a metà gesto. Solo una schiaritura
   appena percettibile, e capitali più spaziate (.1em) come sull'ufficiale. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#000;color:#fff;font-weight:500;letter-spacing:.1em;text-transform:uppercase;font-size:13px;line-height:1;min-height:56px;padding:16px 40px;border:1px solid #000;transition:background .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:#242424;border-color:#242424}
.btn--block{width:100%}
.btn:disabled{background:#fff;color:#000;border-color:#ddd;cursor:default}
.btn:disabled:hover{background:#fff;color:#000}

/* ===== testa del sito (fascia + header), come su sito/ ===== */
/* fascia annuncio — nero/bianco 15px peso 500 come sull'ufficiale, ma in
   tondo e non in maiuscolo: il messaggio è lungo e su telefono va a capo.
   min-height (non height) così la fascia cresce su due righe. */
/* Il testo si centra su OGNI riga: `text-align` non bastava perché lo span,
   figlio flex, prende solo la larghezza del contenuto e la seconda riga
   restava a sinistra. `max-width:92ch` gli impone di andare a capo prima del
   bordo, così le due righe hanno una lunghezza simile e la fascia respira.
   Il padding cresce con la larghezza: 10px su telefono, 14px su schermo. */
.annbar{background:#000;color:#fff;text-align:center;padding:clamp(10px,1.4vw,14px) var(--gut);display:flex;align-items:center;justify-content:center}
/* MAIUSCOLE come su autry-usa.com/fr */
.annbar span{display:block;max-width:92ch;text-align:center;font-family:'Jost',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:clamp(12px,1.15vw,15px);font-weight:500;line-height:1.45;text-transform:uppercase;letter-spacing:.01em}

/* header — impaginato come autry-usa.com: logo grande a sinistra, menu
   subito accanto (NON centrato), e a destra lingua + spedizione + icone. */
/* Plus de filet sous le menu : il coupait la page en deux juste sous
   « Nuovi arrivi · Donna · Uomo ». L'en-tete reste collant ; c'est le fond
   blanc plein qui le detache du contenu qui defile dessous. */
.hdr{position:sticky;top:0;z-index:120;background:#fff}
.hdr__in{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);height:var(--header-h);display:flex;align-items:center;gap:clamp(18px,3vw,54px)}
.hdr__logo{flex:0 0 auto;display:block}
/* 42px solo su desktop: sotto i 900px resta 22px (vedi media query) */
.hdr__logo svg{height:42px;width:auto;fill:currentColor;display:block}
.hdr__nav{flex:1 1 auto;display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.hdr__nav a{font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap;padding:6px 0;border-bottom:1px solid transparent;transition:.2s}
.hdr__nav a:hover{border-bottom-color:#000}

.hdr__act{flex:0 0 auto;display:flex;align-items:center;gap:4px}
.hdr__lang{font-size:14px;font-weight:600;letter-spacing:.02em;border-bottom:1px solid currentColor;padding-bottom:1px;margin-right:14px}
.hdr__ship{font-size:14px;font-weight:600;white-space:nowrap;margin-right:12px}
.iconbtn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;position:relative;transition:.2s}
.iconbtn:hover{opacity:.55}
.iconbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5}
/* il contatore è un piccolo esponente accanto all'icona, come sull'ufficiale */
.cartcount{position:absolute;top:6px;right:1px;font-size:11px;font-weight:500;line-height:1;color:var(--ink)}

@media(max-width:1280px){
  .hdr__ship{display:none}
  .hdr__nav a{font-size:15px}
}
@media(max-width:1100px){
  .hdr__lang{display:none}
  .hdr__nav{gap:14px}
  .hdr__nav a{font-size:14px}
}

.burger{display:none;width:42px;height:42px;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger i{display:block;width:20px;height:1.5px;background:#000}

/* menu mobile — senza questo la scheda è un vicolo cieco sul telefono:
   il burger non apriva niente e non si poteva più navigare. */
.mobov{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:170;opacity:0;visibility:hidden;transition:.3s}
.mobov.show{opacity:1;visibility:visible}
.mobnav{position:fixed;inset:0 22% 0 0;background:#fff;z-index:180;transform:translateX(-100%);transition:.4s var(--ease);padding:20px var(--gut);display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.mobnav.show{transform:none}
.mobnav .close{align-self:flex-end;font-size:30px;line-height:1;margin-bottom:10px;color:var(--muted)}
/* Nessun filetto fra le voci: il menu è corto e i tratti lo appesantivano.
   Lo spazio verticale basta a separarle. */
.mobnav a{font-size:18px;font-weight:500;text-transform:uppercase;letter-spacing:.03em;padding:15px 0}

@media(max-width:1100px){
  .hdr__nav a{font-size:13px}
}
@media(max-width:900px){
  /* il flex resta, ma il logo va al centro fra burger e icone */
  .hdr__in{gap:8px}
  .hdr__nav{display:none}
  .burger{display:flex;order:1}
  .hdr__logo{order:2;flex:1 1 auto;text-align:center}
  .hdr__logo svg{height:22px;margin:0 auto}
  .hdr__act{order:3}
  /* niente riduzione qui: la fascia deve leggersi identica su scheda e home */
}

/* briciole di pane — centrate, con chevron, come su sito/ */
/* 32px au-dessus du chemin, c'etait un ecran d'accueil avant d'arriver au
   produit. 14px suffisent a le detacher du menu. */
.crumbs{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:clamp(8px,1vw,14px);font-size:15px;line-height:1.4;padding:clamp(10px,1.1vw,14px) 0 clamp(4px,1vw,10px)}
.crumbs a{color:var(--ink);transition:.2s}
.crumbs a:hover{color:var(--muted)}
.crumbs__sep{width:15px;height:15px;flex:0 0 auto;stroke:#b4b4b4;fill:none;stroke-width:1.5}
/* Pas de `text-transform` ici : le nom arrive deja mis en casse lisible
   par `caso_leggibile()` dans genera_schede.py — « Sneakers Hyperway in
   Mesh e Suede Sand e Cotto ». Un `uppercase` CSS annulerait ce travail
   et rendrait la ligne illisible sur toute sa longueur. */
.crumbs__cur{letter-spacing:.01em;color:var(--muted)}

@media(max-width:600px){
  /* 14px e non 12: a 12 il percorso era illeggibile sul telefono */
  /* padding vertical : la briciola passa da 20 a 36px d'altezza cliccabile
     senza che lo spazio visibile cambi. */
  .crumbs{font-size:14px;gap:7px;justify-content:flex-start}
  .crumbs a{padding:8px 0}
  .crumbs__sep{width:13px;height:13px}
}

/* ===== scheda prodotto ===== */
.pdp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,64px);padding:30px 0 80px}
/* Trois largeurs, trois valeurs, et c'est voulu :
     ordinateur (>1100px) 18px  — regle ci-dessous
     tablette (901-1100)  30px  — la valeur de base, jugee bonne telle quelle
     telephone (<=900)    16px  — plus bas dans la feuille

   La fiche n'a pas de fil d'Ariane : la photo et le nom arrivent directement
   sous l'en-tete. Sur ordinateur, 30px y ouvraient une bande blanche avant la
   seule chose que le visiteur vient voir. La borne est a 1101px, la ou la
   fiche repasse en deux colonnes — au-dessous, la mise en page est celle de
   la tablette, qu'on ne touche pas.

   Demande explicite du client : le gel du rendu ordinateur est leve pour
   cette ligne, et pour elle seule. */
@media(min-width:1101px){
  .pdp{padding-top:18px}
}
/* `min-width:0` NON è decorativo: senza, la scheda sfonda lo schermo del
   telefono. Le colonne di una griglia hanno `min-width:auto`, quindi non
   scendono mai sotto la larghezza minima del loro contenuto — e il contenuto
   qui è un carosello di 7 foto. Risultato misurato a 390px: le colonne si
   allargavano a 590px, la foto usciva dallo schermo di 215px e nome, prezzo
   e taglie finivano tagliati a destra. Vale anche su desktop: una colonna
   non deve mai dettare la larghezza della pagina. */
.pdp>*{min-width:0}

/* galleria — due foto per riga, come su autry-usa.com (misurato: due
   immagini da 443px affiancate, rapporto 1/1,06). Niente colonna di
   miniature: sull'ufficiale le foto sono tutte a vista, impilate. */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.8vw,14px);align-items:start}
/* una sola foto: occupa tutta la larghezza invece di lasciare un buco */
.gallery--sola{grid-template-columns:1fr}
.gshot{aspect-ratio:1/1.06;background:var(--bg2);overflow:hidden}
.gshot img{width:100%;height:100%;object-fit:cover;display:block}
/* i trattini sotto la galleria servono solo su telefono, dove le foto
   scorrono in orizzontale: su desktop sono tutte a vista. */
.gdots{display:none}

/* colonna informazioni */
.pinfo{position:sticky;top:calc(var(--header-h) + 20px);align-self:start}
.pinfo .brand{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pinfo h1{font-size:clamp(22px,2.3vw,30px);font-weight:500;text-transform:uppercase;letter-spacing:.01em;margin:10px 0 16px;line-height:1.2}
/* 28px: lo spazio che teneva la riga "Tasse incluse", ora rimossa */
.pprice{display:flex;gap:13px;align-items:baseline;margin-bottom:28px}
.pprice .now{font-size:23px;font-weight:500}
.pprice .now.on{color:#666}
.pprice .was{color:#666;text-decoration:line-through;font-size:18px}
.pprice .off{font-size:13px;background:#000;color:#fff;padding:4px 10px;border-radius:999px;align-self:center}
.taxnote{font-size:13px;color:var(--muted);margin-bottom:28px}

/* Colori disponibili — UNE seule ligne, quoi qu'il arrive.
   Le catalogue monte jusqu'a 21 variantes pour une meme paire (mediane 12).
   Sur plusieurs lignes, le bloc repousserait la taille ET le bouton d'achat
   sous la ligne de flottaison : on perdrait l'achat pour montrer des couleurs.
   `flex-wrap:nowrap` + defilement horizontal : tout reste atteignable et la
   hauteur du bloc ne bouge jamais, quel que soit le nombre de coloris. */
/* `margin-bottom` AUTANT que `margin-top` : `.sizelabel` n'a pas de marge
   haute, donc sans elle la rangee de pastilles venait toucher « TAGLIA ».
   34px en bas, comme les 28px qui separent deja le prix du bloc au-dessus. */
.colori{margin:28px 0 34px}
/* Meme structure que `.sizelabel` : intitule a gauche, lien a droite. Le lien
   n'apparait que s'il reste des coloris non montres, et il tient sur la ligne
   du titre — donc il n'ajoute jamais de hauteur. */
.colori__lab{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:500;margin-bottom:14px}
/* Le lien est devenu un `<button>` : il ne navigue plus, il deplie la rangee.
   Un `<a>` sans `href` n'est ni focusable ni actionnable au clavier, et un
   `<a href="#">` ajoute une entree d'historique a chaque clic. Le bouton se
   remet a plat — le theme pose un fond et une bordure sur tous les `button`. */
.colori__lab a,
.colori__lab button{font-size:12px;letter-spacing:.07em;font-weight:500;color:var(--muted);border-bottom:1px solid currentColor;padding-bottom:1px;white-space:nowrap}
.colori__lab button{background:none;border-top:0;border-left:0;border-right:0;
  padding:0 0 1px;font-family:inherit;text-transform:uppercase;cursor:pointer}
.colori__lab a:hover,
.colori__lab button:hover{color:var(--ink)}
/* Zone tactile portee a 44px sans rien deplacer, comme dans `piede.css` : le
   pseudo-element est absolu, donc il ne prend pas de place. Il ne recouvre
   rien d'utile — a sa gauche il n'y a que l'intitule, qui n'est pas cliquable. */
.colori__lab button{position:relative}
.colori__lab button::after{content:'';position:absolute;left:50%;top:50%;
  width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
/* Une GRILLE, et non plus une rangee qui defile.

   Le compte de 6 pastilles etait fige, la colonne non : mesuree, elle fait
   554px a 1440, 490 a 1280, mais 963 a 1024 et 290 a 320 — la fiche passe en
   pleine largeur sous 1024. Six ne tenaient donc jamais vraiment : la sixieme
   etait coupee au bord, et au depliage elle sautait a la ligne suivante. Les
   pastilles se reorganisaient sous le doigt au lieu de simplement s'ajouter.

   `auto-fill` + `minmax` laisse la grille compter elle-meme : autant de
   colonnes que la largeur en autorise, chacune etirée a `1fr` pour que la
   ligne soit pleine — plus de pastille coupee, plus de trou a droite. Le
   depliage n'ajoute alors que des lignes, sans jamais deplacer ce qui est
   deja affiche. C'est tout ce que le visiteur doit voir bouger.

   66px de minimum, et non plus 84 : les pastilles pesaient plus lourd que la
   grille des tailles juste en dessous — 90px de cote contre 58 de large pour
   un bouton de taille, mesure a 390px. Deux grilles empilees dans la meme
   colonne, l'une deux fois plus grosse que l'autre : le bloc coloris tirait
   l'oeil au detriment de la taille, qui est le choix obligatoire.

   66 + 8 donne un carre stable autour de 72px a toutes les largeurs (72,3 a
   1440 dans une colonne de 554 ; 71,6 a 390 sur telephone) — legerement plus
   grand que le bouton de taille, jamais du double. La chaussure reste lisible
   la ou 62px la rendait indechiffrable (mesure du premier essai).

   Meme `gap` que `.sizegrid` (8px) : les deux grilles respirent pareil, donc
   l'oeil lit un seul bloc de choix et non deux composants etrangers. */
.colori__row{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));
             gap:8px}
/* `hidden` doit l'emporter sur le `display:block` de `.colori__sw` : sans
   cette ligne l'attribut ne masque rien sur un element qui declare son
   propre `display`. C'est le JS de la fiche qui le pose, rangee fermee. */
.colori__row .colori__sw[hidden]{display:none}
/* Carre, la proportion d'autry-usa.com — mais la largeur vient desormais de
   la grille, plus d'une valeur en dur. `aspect-ratio` tient la hauteur, ce qui
   evite de recalculer quoi que ce soit quand la colonne change de taille. */
.colori__sw{width:auto;min-width:0;aspect-ratio:1;background:var(--bg2);border:1px solid transparent;display:block;transition:border-color .2s}
/* `contain` (et non `cover`) : la paire entière tient dans le carré, centrée,
   sans recadrage qui la coupe ou la décale. Léger retrait pour l'aérer. */
.colori__sw img{width:100%;height:100%;object-fit:contain;object-position:center;display:block;padding:3.5%}
.colori__sw:hover{border-color:#c4c4c4}
.colori__sw--sel{border-color:#000}

/* taglie */
.sizelabel{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:500;margin-bottom:12px}
.sizelabel a{border-bottom:1px solid currentColor;padding-bottom:1px;color:var(--muted)}
.sizegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:8px;margin-bottom:8px}
.sizebtn{border:1px solid var(--line);padding:14px 0;font-size:14px;text-align:center;transition:.13s;background:#fff}
.sizebtn:hover{border-color:#000}
.sizebtn.sel{background:#000;color:#fff;border-color:#000}
.sizebtn.out{opacity:.32;text-decoration:line-through;cursor:not-allowed}
.sizeerr{color:#b11212;font-size:13px;margin:8px 0 10px;display:none}
.pactions{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.soldnote{font-size:13px;color:var(--muted);margin-top:2px}

/* fisarmoniche */
/* Les panneaux fermes sont sortis de l'ecran par `transform` seul : leurs
   liens restent focalisables au clavier, soit une vingtaine d'arrets de
   tabulation invisibles avant d'atteindre le contenu. `visibility` les
   retire du parcours sans changer un pixel du rendu. */
.mobnav:not(.show),.drawer:not(.show){visibility:hidden}
.mobnav.show,.drawer.show{visibility:visible}
.stickybar:not(.show){visibility:hidden}
.stickybar.show{visibility:visible}

.acc{border-top:1px solid var(--line);margin-top:36px}
.acc__item{border-bottom:1px solid var(--line)}
.acc__head{width:100%;display:flex;justify-content:space-between;align-items:center;padding:19px 0;font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;text-align:left}
.acc__body{font-size:14px;color:#555;line-height:1.75;padding:0 0 20px;display:none}
.acc__body.open{display:block}
/* Il segnale d'apertura è un chevron che ruota, non un « + » che diventa
   « − ». Il « + » suggerisce « aggiungi », non « apri »; la freccia dice
   dove guardare, ed è quello che fa autry-usa.com. */
.acc__chev{flex:0 0 auto;display:block}
.acc__chev svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.acc__head.open .acc__chev svg{transform:rotate(180deg)}
.acc__body ul{padding-left:18px}
.acc__body p+p,.acc__body p+ul,.acc__body ul+p{margin-top:12px}
.acc__body strong{color:var(--ink);font-weight:500}

/* ===== barra d'acquisto fissa =====
   Funzione presa da autry-usa.com (taglia + quantità + aggiungi), veste
   grafica presa dal banner di maisonaera.fr: bianco pieno, nessun angolo
   arrotondato, bordi neri netti, maiuscole molto spaziate.
   L'ALTEZZA/BLOCCO è isolata qui: per cambiare la veste basta questo blocco. */
/* Le filet noir en haut de la barre d'achat barrait l'ecran de part en
   part des qu'elle apparaissait. Une ombre douce la detache du contenu
   sans tracer de ligne. */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:150;background:#fff;box-shadow:0 -6px 22px rgba(0,0,0,.08);transform:translateY(101%);transition:transform .35s var(--ease)}
.stickybar.show{transform:none}
/* La barra è fissa, quindi non occupa spazio nel flusso: in fondo alla
   pagina copriva le ultime righe del piede — la riga « © Autry
   International » restava tagliata a metà. Si riserva la sua altezza
   (misurata: 99px su desktop, 73px sotto i 900px) e SOLO quando è a
   schermo, altrimenti si aprirebbe un vuoto bianco in fondo alla pagina.
   L'osservatore mostra la barra quando il bottone d'acquisto esce dallo
   schermo, cioè sempre quando si è in fondo: nessun rischio di oscillazione,
   la riserva sta sotto il bottone e non ne cambia la visibilità. */
/* La riserva per la barra fissa va sul PIEDE, non sul body: sotto il piede
   nero quei pixel restavano bianchi e si vedeva una banda chiara quando si
   tirava la pagina oltre il fondo. */
body:has(.stickybar.show) .pie{padding-bottom:104px}
.stickybar__in{max-width:var(--maxw);margin:0 auto;padding:20px var(--gut);display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.stickybar__thumb{width:58px;height:58px;flex:0 0 auto;background:var(--bg2);overflow:hidden}
.stickybar__thumb img{width:100%;height:100%;object-fit:cover}
.stickybar__id{flex:1 1 auto;min-width:0}
.stickybar__name{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35}
.stickybar__price{font-size:13px;color:#4a4a4a;margin-top:4px;letter-spacing:.02em}

/* selettore taglia */
.sbsize{position:relative;flex:0 0 auto}
.sbsize select{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.09em;color:inherit;background:#fff;border:1px solid #000;padding:16px 44px 16px 18px;width:clamp(200px,21vw,280px);cursor:pointer;border-radius:0;transition:.2s var(--ease)}
.sbsize select:hover{background:#000;color:#fff}
/* Un `outline:none` sans remplacement sur le champ OBLIGATOIRE avant
   l'achat : au clavier, plus aucun reperage. */
.sbsize select:focus-visible{outline:2px solid #000;outline-offset:2px}
.sbsize::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg);pointer-events:none;transition:.2s}
.sbsize:hover::after{border-color:#fff}
.sbsize--err select{border-color:#b11212;color:#b11212}
.sbsize--err:hover select{background:#b11212;color:#fff;border-color:#b11212}

/* quantità */
.sbqty{display:flex;align-items:center;border:1px solid #000;flex:0 0 auto}
.sbqty button{width:42px;height:50px;font-size:16px;line-height:1;color:var(--ink);transition:.2s var(--ease)}
.sbqty button:hover:not(:disabled){background:#000;color:#fff}
.sbqty button:disabled{color:#c4c4c4;cursor:default}
.sbqty span{min-width:32px;text-align:center;font-size:13px;font-weight:500;letter-spacing:.04em}

/* bottone — capitali molto spaziate, come « TOUT ACCEPTER » */
.stickybar .btn{flex:0 0 auto;padding:17px clamp(24px,3vw,46px);font-size:12px;letter-spacing:.12em;white-space:nowrap;min-height:48px}

/* ===== mobile : barre épurée =====
   Sur mobile on ne garde QUE l'essentiel — sélecteur de taille + « Aggiungi
   al carrello » — alignés à la même hauteur. La miniature, le nom, le prix et
   le compteur de quantité sont masqués : c'est eux qui tassaient la barre et
   faisaient passer le nom sur deux lignes. Typo Autry conservée (12px,
   majuscules espacées), CTA noir légèrement plus large que le sélecteur. */
/* DEUX rectangles de MEME largeur, `flex:1 1 0` sur les deux. Le selecteur
   etait cale a 112-134px et le bouton prenait tout le reste : deux blocs de
   taille differente pour deux etapes qui se valent — choisir sa taille, puis
   ajouter. `1 1 0` (base zero, et non `auto`) les fait partir a egalite quel
   que soit le texte qu'ils contiennent ; sans le `min-width:0` le contenu du
   bouton imposerait de nouveau sa largeur. */
@media(max-width:900px){
  .stickybar__thumb,.stickybar__price,.stickybar__id,.sbqty{display:none}
  .stickybar__in{padding:10px var(--gut);gap:10px;align-items:stretch}
  .sbsize{flex:1 1 0;min-width:0}
  .sbsize select{width:100%;min-width:0;height:46px;padding:0 34px 0 14px;font-size:12px;letter-spacing:.09em}
  .sbsize::after{right:16px;width:7px;height:7px;margin-top:-6px}
  .stickybar .btn{flex:1 1 0;min-width:0;height:46px;min-height:46px;padding:0 12px;font-size:12px;letter-spacing:.08em}
  body:has(.stickybar.show) .pie{padding-bottom:70px}
}
@media(max-width:600px){
  /* Barre affinee : 48 -> 44px de haut pour les deux blocs et 8px de marge,
     soit 60px de barre au lieu de 66. Elle reste au-dessus du seuil tactile
     de 44px des recommandations WCAG et Apple — en dessous on rate le bloc
     une fois sur deux, et c'est le dernier geste avant l'achat. */
  .stickybar__in{padding:8px var(--gut);gap:8px}
  .sbsize select{height:44px;padding:0 30px 0 12px;font-size:11px;letter-spacing:.07em}
  .sbsize::after{right:13px}
  .stickybar .btn{height:44px;min-height:44px;padding:0 10px;font-size:11px;letter-spacing:.06em}
  body:has(.stickybar.show) .pie{padding-bottom:64px}
}
/* Petits telephones : a moitie de 330px utiles, « Aggiungi al carrello » ne
   tient plus a 11px. On resserre la typo plutot que de rompre l'egalite des
   deux blocs, qui est ce qu'on vient de gagner. */
@media(max-width:370px){
  .sbsize select{font-size:10px;letter-spacing:.05em;padding:0 26px 0 10px}
  .stickybar .btn{font-size:10px;letter-spacing:.03em;padding:0 8px}
  .sbsize::after{right:11px}
}

/* ===== carrello a tendina — ripreso da autryofficial.com ===== */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);opacity:0;visibility:hidden;transition:.3s;z-index:190}
.overlay.show{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;height:100%;width:430px;max-width:92vw;background:#fff;transform:translateX(100%);transition:.4s var(--ease);z-index:200;display:flex;flex-direction:column}
.drawer.show{transform:none}
.drawer__head{display:flex;justify-content:space-between;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)}
.drawer__head h3{font-size:16px;text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.drawer__close{font-size:26px;line-height:1;color:var(--muted)}
.drawer__close:hover{color:var(--ink)}
.drawer__items{flex:1;overflow-y:auto;padding:8px 24px}
.drawer__count{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;margin-left:4px;background:#000;color:#fff;border-radius:99px;font-size:11px;font-weight:600;vertical-align:2px}
.drawer__count[hidden]{display:none}

.citem{display:grid;grid-template-columns:74px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.citem img{width:74px;height:88px;object-fit:cover;background:var(--bg2)}
.citem .ct{font-size:12px;text-transform:uppercase;font-weight:500;line-height:1.35}
.citem .cs{font-size:12px;color:var(--muted);margin-top:4px}
.citem .qty{display:inline-flex;align-items:center;border:1px solid var(--line);margin-top:9px}
/* 36px et non 27 : a 27px on rate le bouton une fois sur deux et on tape
   sur son voisin. Recommandation WCAG 2.5.8 et Apple HIG : 44px. */
.citem .qty button{width:36px;height:36px;font-size:15px;transition:.15s}
.citem .qty button:hover{background:#000;color:#fff}
.citem .qty span{width:30px;text-align:center;font-size:13px}
/* Graisse 500 comme partout ailleurs : le 600 etait le seul de la page, et
   il faisait ressortir le prix de chaque ligne plus que le total en bas. */
.citem .cp{font-size:13px;font-weight:500;white-space:nowrap}
.citem .rm{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #ccc;margin-top:8px}
.citem .rm:hover{color:var(--ink);border-bottom-color:#000}

/* Le PIED du tiroir est a la MEME echelle que les articles au-dessus.
   Il ne l'etait pas : les lignes d'article sont ecrites en 12 et 13px, le
   pied montait a 16 et 21px, en gras 600. Le meme tiroir tenait donc deux
   typographies, et la moitie basse ecrasait la moitie haute — tres visible
   sur telephone, ou le pied prenait pres d'un tiers de la hauteur.
   Ici tout redescend sur l'echelle du site : 11-13px, capitales espacees,
   graisse 500 (celle de `.btn` et de tous les intitules), une seule valeur
   forte — le montant du total. */
.drawer__foot{padding:14px 18px 16px;border-top:1px solid #e5e5e5;background:#F2F0F0}
/* Total : pas de filet au-dessus. Il respire par des marges — un espace au
   dessus (le code promo) et un espace en dessous (le bouton checkout).
   Libelle a l'echelle des intitules du site, montant un cran au-dessus :
   c'est le seul chiffre que le client cherche a cet endroit. */
.drawer__sub{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;margin:4px 0 10px}
.drawer__sub span:last-child{font-size:16px;font-weight:500;letter-spacing:.01em}
.drawer__ship{font-size:11px;color:var(--muted);text-align:center;margin-bottom:10px}
/* `min-height` AUTANT que `height` : `.btn` pose un plancher a 56px, donc
   regler la seule hauteur ne changeait rien — le bouton restait a 56. */
.drawer__foot .btn--pay{height:46px;min-height:46px;font-size:12px;font-weight:500;letter-spacing:.12em}
.drawer__pays{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:10px}
/* 22->25px : un cran, pas plus. Ces logos rassurent au moment de payer,
   mais s'ils prennent trop de place ils volent la vedette au bouton. */
/* Cadre CSS identique sur les 4 : même taille, même liseré, même rayon —
   sinon l'aplat AMEX paraît plus « plein » que les cartes blanches bordées. */
/* 24 -> 20px : quatre cartes de credit posees sous le bouton de paiement
   n'ont pas a peser autant que le bouton lui-meme. Elles rassurent d'un
   coup d'oeil ; a cette taille elles restent parfaitement reconnaissables. */
.drawer__pays svg{height:20px;width:32px;display:block;border:1px solid #dcdcdc;border-radius:4px}
.drawer__secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-top:6px}
.drawer__secure svg{width:13px;height:13px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6}

.cart-empty{text-align:center;color:var(--muted);padding:64px 20px;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.cart-empty svg{width:34px;height:34px;margin:0 auto 14px;display:block;stroke:#c9c9c9;fill:none;stroke-width:1.4}

/* codice sconto — campo sempre visibile sopra il totale, come su
   autryofficial.com: CODICE a sinistra, APPLICA nero a destra. */
.promo{display:flex;gap:0;margin-bottom:10px}
/* Le champ GARDE ses 16px : en dessous, Safari iOS zoome la page des qu'on
   pose le doigt dedans, et on ressort du tiroir de travers. C'est le
   PLACEHOLDER qu'on redescend a 12px — c'est lui qu'on voit tout le temps,
   le texte a 16px n'apparait que pendant la frappe. Le champ retrouve ainsi
   la meme voix que « TOTALE » juste en dessous, sans le defaut de zoom. */
.promo input{flex:1;min-width:0;background:#fff;border:1px solid var(--line);border-right:none;padding:9px 12px;font:inherit;font-size:16px;letter-spacing:.08em;text-transform:uppercase;outline:none;border-radius:0;-webkit-appearance:none}
.promo input::placeholder{color:#9a9a9a;font-size:12px;letter-spacing:.12em}
.promo input:focus{border-color:#000}
/* `align-items:stretch` du flex donne au bouton la hauteur du champ : sa
   propre graisse ne dicte plus la hauteur de la ligne. */
.promo button{flex:0 0 auto;background:#000;color:#fff;border:1px solid #000;padding:9px 16px;font:inherit;font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:.2s var(--ease)}
.promo button:hover{background:#fff;color:#000}
.promo--err input{border-color:#b11212}
.promo__err{display:none;font-size:12px;color:#b11212;margin:-8px 0 14px}
.promo__err.show{display:block}
.promo__on{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;margin-bottom:14px;padding:13px 16px;background:#fff;border:1px solid #000}
.promo__on b{font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.promo__rm{font:inherit;font-size:11px;color:#888;text-transform:uppercase;letter-spacing:.06em;text-decoration:underline;white-space:nowrap}
.promo__rm:hover{color:#000}

/* ===== mobile : en-tête du tiroir seulement =====
   Le PIED du tiroir (code promo, total, checkout, logos) est désormais défini
   UNE seule fois en base et s'applique à l'identique sur toutes les largeurs —
   plus de surcharge mobile qui créait un écart desktop/mobile. Ici on ne touche
   qu'à l'en-tête et à la liste. Les articles gardent leur taille de base. */
@media(max-width:600px){
  .drawer__head{padding:14px 18px}
  .drawer__close{font-size:23px}
  .drawer__items{padding:4px 18px}
}

/* ===== guida alle taglie (dati ufficiali autry-usa.com/it) ===== */
.sgov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;opacity:0;pointer-events:none;transition:.25s var(--ease)}
.sgov.show{opacity:1;pointer-events:auto}
.sgmodal{position:fixed;z-index:201;top:50%;left:50%;transform:translate(-50%,-46%) scale(.98);width:min(520px,calc(100vw - 32px));max-height:min(86vh,720px);overflow-y:auto;background:#fff;padding:clamp(22px,3vw,34px);opacity:0;pointer-events:none;transition:.28s var(--ease)}
.sgmodal.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.sgmodal__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px}
.sgmodal h2{font-size:17px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
.sgmodal__close{font-size:26px;line-height:1;margin:-6px -4px 0 0;color:var(--muted)}
.sgmodal__close:hover{color:var(--ink)}
.sgmodal__sub{font-size:13px;color:var(--muted);margin-bottom:22px}
.sgtable{width:100%;border-collapse:collapse;font-size:14px}
.sgtable th,.sgtable td{padding:11px 8px;text-align:center;border-bottom:1px solid var(--line)}
.sgtable th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:500;color:var(--muted);border-bottom-color:#000}
.sgtable tbody tr:hover{background:var(--bg2)}
.sgtable tr.on{background:#000}
.sgtable tr.on td{color:#fff;font-weight:500}
.sgnote{font-size:12px;color:var(--muted);line-height:1.7;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}

/* ===== sezioni sotto la scheda ===== */
.section{padding:clamp(48px,6vw,80px) 0}
.section--sm{padding:clamp(34px,4vw,56px) 0}
.section+.section{padding-top:0}
/* Titre CENTRE sur la page, comme sur autry-usa.com — il etait cale a
   gauche. Le lien « Vedi tutto » passe en absolu a droite : dans un flex en
   `space-between`, sa presence decale le titre du centre reel de la page, et
   ce decalage se voit d'autant plus que le lien est court. En le sortant du
   flux, le titre se centre sur le conteneur et non sur l'espace restant.
   Police un cran plus petite : 26px -> 23px au maximum. */
.sec-head{position:relative;display:flex;justify-content:center;align-items:center;margin-bottom:clamp(20px,2.6vw,34px);gap:20px}
.sec-head h2{font-size:clamp(17px,1.8vw,23px);font-weight:500;text-transform:uppercase;letter-spacing:.03em}
.sec-head a,.sec-head__clear{position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:1px solid currentColor;padding-bottom:2px;white-space:nowrap}
/* Sous 600px le lien en absolu chevaucherait un titre long : on le remet
   dans le flux, sous le titre, tous deux centres. */
@media(max-width:600px){
  .sec-head{flex-direction:column;gap:10px}
  .sec-head a,.sec-head__clear{position:static;transform:none}
}
.sec-head a:hover,.sec-head__clear:hover{color:var(--ink)}

/* slider prodotti */
.slider-wrap{position:relative}
.slider{display:flex;gap:clamp(14px,1.4vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;-ms-overflow-style:none;scrollbar-width:none;padding-bottom:4px}
.slider::-webkit-scrollbar{display:none}
/* 5 prodotti per riga, come su autry-usa.com (prima erano 4) */
.slider>.pcard{flex:0 0 calc((100% - 4*clamp(14px,1.4vw,24px))/5);scroll-snap-align:start}
.snav{position:absolute;top:38%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 2px 14px rgba(0,0,0,.12);transition:.2s}
.snav:hover{background:#000;color:#fff;border-color:#000}
.snav svg{width:17px;height:17px}
.snav--prev{left:-10px}.snav--next{right:-10px}
.snav[disabled]{opacity:0;pointer-events:none}

/* scheda prodotto in griglia */
.pcard{position:relative;display:flex;flex-direction:column}
.pcard__img{position:relative;overflow:hidden;background:var(--bg2)}
.pcard__img::before{content:"";display:block;padding-top:100%}
.pcard__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .4s,transform .9s var(--ease)}
.pcard__img .img2{opacity:0}
.pcard:hover .img1{opacity:0}
.pcard:hover .img2{opacity:1}
.pcard__tags{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:7px;z-index:2}
.tag{font-size:11px;font-weight:500;line-height:1;padding:6px 11px;border-radius:999px;letter-spacing:.02em}
.tag--out{background:#fff;color:#000;border:1px solid #000;text-transform:uppercase;letter-spacing:.08em}
.pcard--out .pcard__img img{filter:grayscale(1);opacity:.62}
.pcard--out .pcard__name{color:#767676}
.pcard__content{padding-top:16px;text-align:left}
.pcard__name{font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.01em;line-height:1.4;margin-bottom:7px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:39px}
.pcard:hover .pcard__name{color:#666}
.pcard__price{display:flex;gap:9px;align-items:baseline;font-size:15px}
.pcard__price .now{font-weight:500}
/* Prix plein barre a la suite du prix remise, sur les cartes des
   carrousels (correlati, visti di recente). Discret : gris, plus petit. */
.pcard__price .was{color:#8a8a8a;text-decoration:line-through;font-weight:400;
  font-size:.9em}

/* ===== footer — quello di autryofficial.com =====
   Ricostruito con classi proprie: le pagine non caricano il CSS del tema
   Minimog, quindi le sue classi sf-footer resterebbero senza stile. */
.footer{background:#000;color:#fff;padding:clamp(50px,6vw,78px) 0 30px;margin-top:clamp(40px,5vw,70px)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid #242424}
.footer h4{font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;font-weight:500}
.footer ul{list-style:none}
.footer li{margin-bottom:11px}
.footer a{font-size:13px;color:#b0b0b0;transition:.2s}
.footer a:hover{color:#fff}
.footer .flogo{display:inline-block}
.footer .flogo svg{height:30px;width:auto;margin-bottom:16px;fill:#fff}
.footer .blurb{font-size:13px;color:#969696;max-width:34ch;line-height:1.75}
.nl{display:flex;border:1px solid #3a3a3a;margin-top:16px;max-width:330px}
.nl input{flex:1;min-width:0;background:none;border:none;color:#fff;padding:13px 15px;font-family:inherit;font-size:13px;outline:none}
.nl input::placeholder{color:#7a7a7a}
.nl button{background:#fff;color:#000;padding:0 18px;font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;white-space:nowrap}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:14px}
.footer__bottom p{font-size:12px;color:#767676}
.pays{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.pays svg{height:24px;width:38px;display:block}

@media(max-width:900px){
  .footer__top{grid-template-columns:1fr 1fr;gap:30px}
  .footer__bottom{justify-content:center;text-align:center}
}

/* responsive */
@media(max-width:1100px){
  .pdp{grid-template-columns:1fr;gap:28px}.pinfo{position:static}
  /* Su tablet e telefono DUE prodotti alla volta, grandi, come
     sull'ufficiale: a quattro le foto diventano illeggibili. */
  .slider>.pcard{flex:0 0 calc((100% - 16px)/2)}
}
/* La galerie bascule en carrousel a 1100px et non 900 : `.pdp` passe en une
   colonne des 1100, si bien qu'entre 901 et 1100 — soit exactement l'iPad —
   la grille de photos restait a deux colonnes sur toute la largeur. Il fallait
   faire defiler deux ecrans de photos avant d'atteindre le prix et le bouton
   d'achat. */
@media(max-width:1100px){
  .gallery{display:flex;grid-template-columns:none;gap:0;overflow-x:auto;
           scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
           scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gshot{flex:0 0 100%;scroll-snap-align:start}
  .gdots{display:flex}
}

@media(max-width:900px){
  :root{--header-h:58px}
  .footer__top{grid-template-columns:1fr 1fr;gap:30px}
  /* Su mobile le miniature vanno SOTTO l'immagine grande e si sfogliano in
     orizzontale. Prima restavano incolonnate a sinistra fino a 600px. */
  /* Su telefono le foto scorrono in orizzontale, una alla volta, con i
     trattini sotto: senza indicatore il cliente non sa che ce ne sono altre. */
  .gallery{display:flex;grid-template-columns:none;gap:0;overflow-x:auto;
           scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
           -ms-overflow-style:none;scrollbar-width:none}
  .gallery::-webkit-scrollbar{display:none}
  .gshot{flex:0 0 100%;scroll-snap-align:start}
  .gdots{display:flex;justify-content:center;gap:7px;padding:14px 0 2px}
  .gdot{width:24px;height:2px;background:#d2d2d2;transition:.25s;border-radius:0}
  .gdot.on{background:#000}

  /* Fra l'ultima fisarmonica e « Ti piacerebbe anche » si aprivano 128px di
     bianco: 80 di `padding-bottom` sulla scheda più 48 di `padding-top`
     sulla sezione. Su un telefono è un terzo di schermo vuoto, e il
     carosello dei correlati sembrava appartenere a un'altra pagina.
     48 + 34 = 82px: lo stacco resta netto, senza il buco. */
  /* `padding-top` 30 -> 16px : sul telefono la scheda non ha briciole, la
     foto arriva subito sotto il logo e i 30px del desktop diventavano una
     fascia bianca sotto l'intestazione. Su uno schermo alto 932px sono
     pixel presi alla foto, che è la sola ragione per cui si apre la pagina.
     Il distacco resta — 16px sono la stessa aria che separa gli altri
     blocchi della scheda su telefono. Solo telefono e tablet: il rendering
     su computer resta congelato. */
  .pdp{padding-top:16px;padding-bottom:48px}
  .section{padding:34px 0}
}
@media(max-width:600px){
  .slider>.pcard{flex:0 0 calc((100% - 12px)/2)}
  /* le frecce restano: sono l'invito a scorrere */
  .snav{width:38px;height:38px}
  .snav--prev{left:-6px}.snav--next{right:-6px}
  .pcard__name{font-size:12px;min-height:34px}
}
/* iOS Safari AGRANDIT la page au focus d'un champ de moins de 16px, et elle y
   reste. Le defaut etait masque sur les pages du theme par leur viewport
   verrouille ; maintenant que le zoom est rendu, il faut aussi le prevenir. */
@media(max-width:767px){
  .promo input,.nl input,.sbsize select{font-size:16px}
}

/* ===== telephone : on resserre sous la photo, on grossit d'un cran =======
   Entre le bas de la galerie et « Autry sneakers » il y avait 46px : 16 de
   padding sous les traits de defilement, puis 28 de gouttiere de grille,
   pour deux blocs qui appartiennent au meme produit. On tombe a 24px.

   Le texte monte d'un cran, pas plus : le titre passe de 22 a 24px, le prix
   de 23 a 25, la sur-ligne de 12 a 12.5. Ces trois valeurs sont ecrites en
   dur ici et non en `clamp` : sur telephone la borne basse du clamp
   s'appliquait de toute facon, autant la poser franchement. */
@media(max-width:900px){
  .pdp{gap:14px}
  .gdots{padding:10px 0 0}
  .pinfo .brand{font-size:12.5px}
  .pinfo h1{font-size:24px;margin:9px 0 15px}
  .pprice .now{font-size:25px}
}

/* ---- le coeur sur les vignettes des carrousels -------------------------
   Meme traitement que sur les collections : trait fin noir, sans fond, en
   haut a droite de la photo. Il concerne les cartes de « Ti piacerebbe
   anche » et « Visti di recente », posees par `preferiti.js`. */
.pref__btn{position:absolute;top:12px;right:12px;z-index:3;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  background:none;border:none;padding:0;cursor:pointer;color:#000;
  opacity:.75;transition:opacity .2s,transform .2s}
.pref__btn:hover{opacity:1;transform:scale(1.12)}
.pref__btn svg{width:21px;height:21px;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pref__btn--on{opacity:1}
.pref__btn--on svg{fill:currentColor}
@media(max-width:767px){
  .pref__btn{top:8px;right:8px;width:28px;height:28px}
  .pref__btn svg{width:18px;height:18px}
}


/* Sur telephone la fascia etait a la borne basse de ses `clamp` : 12px de texte et 10px de padding, soit une bande qu'on survole sans la lire. Un cran au-dessus (13.5px, 13px de padding) suffit a la faire exister sans qu'elle prenne la place du menu. */
@media(max-width:900px){.annbar{padding-top:13px;padding-bottom:13px}.annbar span{font-size:13.5px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}
  .pref__btn{transition:none}.pref__btn:hover{transform:none}}

/* fascia annuncio del carrello — stesse regole della fascia in cima alla
   pagina (`.annbar`): fondo nero, testo bianco, maiuscole messe dal CSS.
   Il messaggio resta scritto in tondo nell'HTML, così lo si cambia senza
   toccare lo stile e uno screen reader legge una frase, non delle sigle. */
.drawer__annuncio{background:#000;color:#fff;display:flex;align-items:center;justify-content:center;padding:11px 18px}
.drawer__annuncio span{display:block;text-align:center;font-family:'Jost',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:500;line-height:1.4;text-transform:uppercase;letter-spacing:.02em}
@media(max-width:900px){.drawer__annuncio{padding:10px 14px}.drawer__annuncio span{font-size:12px}}