/* La tête du site — GÉNÉRÉ, ne pas modifier à la main.
   La source est prototipo-pdp/assets/style.css, section « testa del
   sito ». Régénérer avec genera_home.py ou genera_schede.py. */
@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{--ink:#000;--line:#e6e6e6;--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)}
/* ===== 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}
  /* 13px et non 14 : un SECOND bloc `@media(max-width:1100px)` existait plus
     bas dans ce fichier et reposait la meme regle a 13px. Meme condition,
     meme selecteur, donc meme specificite : c'est l'ordre qui tranchait, et
     le 14px n'a jamais ete rendu. Qui corrigeait cette ligne ne voyait rien
     changer. Les deux blocs sont fusionnes ici, sur la valeur qui gagnait. */
  .hdr__nav a{font-size:13px}
}

.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: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}
}
@media(max-width:900px){:root{--header-h:58px}}
html{overflow-x:clip}body{overflow-x:clip;max-width:100%}
@media(max-width:1023px){.iconbtn{width:44px;height:44px}.burger{width:44px;height:44px}}.mobnav:not(.show){visibility:hidden}.mobnav.show{visibility:visible}
.annbar a,.hdr a,.mobnav a{text-decoration:none;color:inherit}.hdr button,.mobnav button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}.hdr svg,.mobnav svg{display:block}
@media(max-width:900px){.annbar{padding-top:13px;padding-bottom:13px}.annbar span{font-size:13.5px;line-height:1.4}}