/* ===== 4 prodotti per riga sulle collezioni =====
   ATTENZIONE: il file si chiama ancora `griglia-5.css`, ma le collezioni
   passano a QUATTRO colonne — c'est la disposition d'autry-usa.com, et à
   cinq les photos devenaient trop petites pour donner envie. Le nom du
   fichier est conservé : il est référencé par 41 pages et par
   `ripara_collezioni.py`, le renommer coûterait plus qu'il ne clarifie.

   Le carrousel de la HOME garde ses cinq slides : ce n'est pas une grille,
   les cartes y défilent et une cinquième amorcée invite à faire glisser.

   Sous 1280px, la disposition du thème reprend la main.
   ===================================================================== */
@media (min-width:1280px){
  /* collezioni : quattro per riga */
  .sf__col-item{width:25%!important;max-width:25%!important;flex:0 0 25%!important}
  /* home — Swiper scrive la larghezza in inline: serve !important */
  .swiper-slide.sf-column{width:20%!important;max-width:20%!important;flex:0 0 20%!important}
}

/* ---- gouttière resserrée entre les photos ------------------------------
   Le thème sépare les cartes de 24px (px-3 = 12px de chaque côté). Les
   photos flottaient chacune sur son île ; sur autry-usa.com elles se
   touchent presque et forment une planche. Ramené à 12px, puis à 6px (3 de
   chaque côté) pour rejoindre le format téléphone : la grille se lit comme
   un ensemble.

   Les marges latérales suivent le même mouvement. Mesuré avant : 52px de
   chaque côté à 1280 comme à 1440, et les photos n'occupaient que 86 à 90%
   de l'écran. C'est la liste seule qui ressort, comme sur téléphone — la
   barre de tri reste alignée sur l'en-tête du site, sinon le logo AUTRY et
   la première photo ne seraient plus sur la même verticale.

   12px au bord et non 1px comme sur téléphone : un écran d'ordinateur se
   regarde de loin et en entier. Une photo qui touche le bord du moniteur
   donne une page qui déborde, là où sur un téléphone tenu en main elle
   donne une page qui remplit. Le `max-width` du thème (1620px) est conservé :
   au-delà, la grille reste centrée plutôt que de s'étirer indéfiniment.

   ⚠ Ce bloc modifie le rendu ordinateur, à la demande expresse du client du
   31 juillet. `reference-desktop.json` doit être regelé une fois le rendu
   validé, sans quoi le garde-fou signalera un écart à chaque passage. */
@media (min-width:1024px){
  /* 5px, comme sur telephone : les deux formats donnent 10px entre les
     colonnes. A 3px, les titres de deux produits voisins se rejoignaient sur
     ordinateur exactement comme ils le faisaient sur telephone — meme cause,
     meme mesure. */
  .sf__col-item{padding-left:5px!important;padding-right:5px!important}
  .sf__product-listing > .flex, .sf__product-listing.flex{
    margin-left:-5px!important;margin-right:-5px!important}
  .sf__product-listing{margin-left:calc((var(--offset-x,1rem) - 12px)*-1);
                       margin-right:calc((var(--offset-x,1rem) - 12px)*-1)}
  .sf__product-listing .sf__col-item{margin-bottom:10px}
}


/* ===== Correctifs d'audit — 30 juillet 2026 ===================== */

/* Le nom du produit n'etait jamais tronque : `--product-title-line-clamp` est
   pose a `unset` dans le <style> de chaque page. Sur telephone, une carte fait
   ~155px de large et « SNEAKERS CLC LOW IN PELLE BIANCA CON STAMPA SNAKE
   DIAMOND » y occupe 5 a 6 lignes : les prix de deux cartes voisines ne
   s'alignent jamais et la grille part en escalier. La fiche produit, elle,
   limite deja son `.pcard__name` a 2 lignes — l'incoherence se voyait d'une
   page a l'autre. On vise l'element et non `:root` : une variable posee dans
   un <style> de page bat celle d'une feuille externe. */
@media (max-width:1023px){
  .sf__pcard-name.truncate-lines{-webkit-line-clamp:2}

  /* L'air sous chaque carte : 30px, pose par `collectiond905.css` avec
     `.sf__product-listing .sf__col-item`. Sur telephone, ou la grille n'a que
     deux colonnes, ces 30px s'ajoutent aux 89px de texte sous l'image et
     repoussent la rangee suivante hors de l'ecran : on ne voit plus que deux
     produits a la fois. Ramene a 16px, puis 10px, puis 8px — le client a
     demande de resserrer a chaque passage.

     8px etait annonce comme le plancher tant que les colonnes etaient
     separees de 16px : a egalite, l'oeil ne sait plus si deux photos voisines
     appartiennent a la meme rangee ou a la meme colonne. Le bord a bord a
     change la donne. Les colonnes ne sont plus separees que de 2px, donc
     8px en vertical restent quatre fois plus grands : la lecture se fait
     toujours par rangee, et le prix reste rattache a sa photo. Descendre
     sous 6px rendrait les deux ecarts comparables et ferait rebasculer le
     regroupement — c'est la, desormais, qu'est la limite.

     Ni `!important` ni selecteur alourdi : les deux regles pesent (0,2,0) et
     `griglia-5.css` est la dixieme feuille chargee, `collectiond905.css` la
     premiere. A poids egal, la derniere ecrite gagne — encore fallait-il le
     verifier plutot que de le supposer, la media query n'ajoutant elle-meme
     aucune specificite.

     Borne a 1023px : le rendu ordinateur est valide et gele. */
  .sf__product-listing .sf__col-item{margin-bottom:8px}

  /* ---- la grille va chercher les bords de l'ecran ----------------------
     Mesure a 430px avant correction : 16px de marge a gauche, 16px entre les
     deux colonnes, 16px a droite. 48px perdus, et les photos n'occupaient que
     89% de la largeur d'un telephone — sur un site ou la photo EST le produit.

     Les 16px viennent de `--offset-x:1rem`, pose par le theme sur
     `.container-fluid`. On ne touche pas a la variable : ce meme conteneur
     porte aussi la barre de tri « In primo piano », et un intitule colle au
     bord de l'ecran se lit mal. C'est la LISTE seule qui ressort, d'exactement
     ce que le conteneur lui impose — d'ou le `calc(… * -1)` plutot qu'un -16px
     en dur, qui se desynchroniserait au premier changement de la variable.

     La rangee, elle, est remise a zero. Elle porte `-mx-2` du theme, soit
     -8px : conservee, la grille depasserait de 8px de chaque cote et
     ouvrirait un defilement horizontal sur toute la page. C'est le genre de
     debordement que `scan.py` compte, et il a raison de le compter.

     Le padding par carte est passe de 1px a 5px : 10px entre les colonnes,
     5px aux bords. A 2px, les deux photos se touchaient presque et surtout
     les TITRES se rejoignaient — « …E FANTA » finissait la ou « SNEAKERS
     CLC… » commencait, et l'oeil ne savait plus quel texte allait avec quelle
     photo. C'est le texte qui a impose la mesure, pas l'image.

     Les bords passent donc de 1 a 5px et les photos de 213 a 205px a 430px.
     Un padding s'applique des deux cotes : garder 1px au bord tout en ouvrant
     10px au milieu demanderait un `nth-child(odd/even)`, qui suppose deux
     colonnes — or a 1023px la grille en compte quatre. La regle serait fausse
     precisement la ou personne ne la relirait. */
  .sf__product-listing{margin-left:calc(var(--offset-x,1rem)*-1);
                       margin-right:calc(var(--offset-x,1rem)*-1)}
  .sf__product-listing > .flex-wrap{margin-left:0;margin-right:0}
  .sf__product-listing .sf__col-item{padding-left:5px;padding-right:5px}
}

/* Le bouton « Filtro » n'ouvre rien. Il est en `xl:hidden`, donc INVISIBLE sur
   ordinateur — d'ou le fait qu'il n'ait jamais ete repere. Cote code, la
   section porte `data-enable-filters="false"`, la barre laterale est en
   `display:none` et `collection.min.js` sort immediatement de `initFilters()`.
   Les tailles viennent de `products.json`, qui n'a pas de cle `variants`.
   On masque tant que la fonction n'est pas alimentee : un bouton mort est pire
   qu'un bouton absent. Retirer cette regle le fera reapparaitre le jour ou les
   filtres seront branches sur `img/catalogo.json`, qui porte deja `taglie`. */
.sf__collection-toolbar .sf__sidebar-open{display:none}

/* Deux `sticky` a `top:0` : l'en-tete (z-index 120) et la barre de tri
   (z-index 11). Une fois l'en-tete redevenu collant, la barre passait
   DERRIERE lui et disparaissait pendant tout le defilement. */
@media (max-width:767px){
  .sf__collection-toolbar{top:var(--header-h,58px);z-index:100}
}

/* ---- l'air entre l'en-tete de collection et la liste ---------------------
   Mesure a 1440px : 88px de blanc entre le bas du bloc titre (« Uomo »,
   « 304 prodotti », le fil d'Ariane) et la ligne de tri « In primo piano ».
   Deux reglages du theme s'additionnaient : 50px de `padding-bottom` sous
   l'en-tete, puis les 24px du `mt-6` pose sur la liste. Sur un grand ecran
   la premiere rangee de produits s'en trouvait repoussee sous la ligne de
   flottaison, alors que c'est elle qu'on vient voir.
   20 + 12 = 32px : le titre reste detache de la liste, sans le trou. */
/* 34px au-dessus du titre au lieu de 50, 2px en dessous au lieu de 8 : sur
   une collection courte comme « Bambino » (17 articles), le blanc au-dessus
   et en dessous du titre pesait plus lourd que la liste elle-même. */
.collection-header{padding-top:34px!important;padding-bottom:2px!important}
.sf__product-listing > .mt-6,
.sf__product-listing.mt-6{margin-top:6px!important}

/* ---- temoin de chargement du defilement continu -------------------------
   Trois points qui pulsent, a la place de la pagination. Ils n'occupent de
   la hauteur que pendant la requete : entre deux chargements le bloc est
   vide et ne creuse pas la page. */
.coll__carica{display:flex;justify-content:center;align-items:center;
  height:64px;margin:24px 0 8px}
.coll__carica span{width:6px;height:6px;border-radius:50%;background:#000;
  opacity:0;transition:opacity .2s;
  box-shadow:14px 0 0 #000,28px 0 0 #000;margin-right:28px}
.coll__carica--attivo span{opacity:1;animation:coll__batte 1s infinite ease-in-out}
@keyframes coll__batte{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .coll__carica--attivo span{animation:none;opacity:.6}
}

/* ---- le menu de tri, aux couleurs de la maison --------------------------
   Le theme le livre en gris a 30% d'opacite, sans cadre, sous une ombre
   floue de 30px : un menu de systeme, pas celui d'une marque. On reprend la
   grammaire du reste du site — filet noir net, capitales espacees, aucun
   angle arrondi — et l'inversion noir/blanc au survol, deja utilisee sur les
   tailles et les boutons des fiches produit. */
.sf__collection-toolbar .select-selected{
  font-size:12px!important;text-transform:uppercase;letter-spacing:.1em;
  font-weight:500;color:#000}

.sf__collection-toolbar .select-items{
  background:#fff!important;border:1px solid #000!important;
  border-radius:0!important;box-shadow:none!important;
  padding:0!important;margin-top:8px;min-width:230px;z-index:60}

.sf__collection-toolbar .select-items > div{
  font-size:12px!important;text-transform:uppercase;letter-spacing:.08em;
  color:#767676!important;padding:13px 16px!important;
  border-bottom:1px solid #ececec;transition:background .15s,color .15s}
.sf__collection-toolbar .select-items > div:last-child{border-bottom:none}
.sf__collection-toolbar .select-items > div:hover{
  background:#000!important;color:#fff!important}

/* l'option en cours : noire, et un filet a gauche pour la reperer sans
   avoir a comparer les gris. */
.sf__collection-toolbar .select-items > div.same-as-selected{
  color:#000!important;font-weight:500;
  box-shadow:inset 3px 0 0 #000}
.sf__collection-toolbar .select-items > div.same-as-selected:hover{
  background:#000!important;color:#fff!important;box-shadow:inset 3px 0 0 #fff}

/* ---- pas de fil d'Ariane sur les collections ---------------------------
   autry-usa.com n'en met pas : le titre et le nombre d'articles suffisent
   à situer le visiteur, « Home > Donna » ne lui apprenait rien que le titre
   ne dise déjà. En le retirant, le titre et la première rangée remontent.
   Masqué et non supprimé du HTML : le balisage reste pour les moteurs de
   recherche, qui s'en servent pour comprendre l'arborescence du site. */
.collection-header__breadcrumb{display:none!important}

/* ---- titre de collection, à la graisse du menu -------------------------
   Le thème le pose en `SF-Heading-font`, 42px, graisse 400 et `capitalize` :
   « Donna » en romain maigre, alors que le menu juste au-dessus est en
   `SF-Body-font`, 600, majuscules. Deux typographies à trois centimètres
   d'écart. autry-usa.com aligne les deux — son titre « SNEAKERS » reprend la
   graisse du menu.
   30px et non 42 : en capitales grasses, le titre pèse déjà plus lourd à
   taille égale. */
.collection-header__title{
  font-family:SF-Body-font,'Jost',system-ui,-apple-system,Helvetica,Arial,sans-serif!important;
  text-transform:uppercase!important;
  font-weight:600!important;
  font-size:clamp(22px,2.4vw,30px)!important;
  letter-spacing:.045em!important;
  line-height:1.2}

/* ---- le cœur sur les visuels produit -----------------------------------
   En haut à droite de la photo, comme sur autry-usa.com. Trait fin noir,
   sans fond : sur les visuels crème du catalogue un bouton plein ferait
   tache. Il se remplit une fois activé. */
.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}
}
@media(prefers-reduced-motion:reduce){
  .pref__btn{transition:none}
  .pref__btn:hover{transform:none}
}

/* ---- le tiroir de tri, sur telephone ------------------------------------
   Il sortait tel quel du theme : libelles en 18px gris #666, titre en
   capitales serif, option active soulignee en couleur d'accent. Rien a voir
   avec le reste du site, dont les menus sont en Jost, noir, capitales
   espacees. Un panneau qui s'ouvre sur la moitie de l'ecran et qui ne
   ressemble pas a la marque, c'est le moment ou le visiteur sent la couture.

   On ne touche pas au mecanisme, uniquement a l'habillage. */
@media(max-width:1023px){
  .sf__sortmb-wrapper .sf__sortmb-list{
    font-family:'Jost',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
    border-radius:0;padding-bottom:8px}

  /* « Ordina per » : meme traitement que les intitules de section du site */
  .sf__sortmb-wrapper .sf__sortmb-list .sf__sortmb-label{
    font-size:12px !important;line-height:1.4 !important;
    letter-spacing:.12em;text-transform:uppercase;color:#767676;
    font-weight:500;padding:22px 20px 4px !important;margin-bottom:0 !important}

  .sf__sortmb-wrapper .sf__sortmb-list ul li{
    font-size:15px !important;line-height:1.4 !important;color:#111 !important;
    letter-spacing:.02em;padding:15px 20px !important;
    border-top:1px solid #f0f0ee}
  .sf__sortmb-wrapper .sf__sortmb-list ul li:first-child{border-top:none}

  /* L'option retenue se marque par la graisse, pas par un souligne colore :
     le site n'utilise aucune couleur d'accent, et un souligne au milieu
     d'une liste se lit comme un lien. */
  .sf__sortmb-wrapper .sf__sortmb-list ul li.active{
    color:#111 !important;text-decoration:none !important;font-weight:600}
  /* La coche remplace le souligne : elle dit « c'est celui-ci » sans crier. */
  .sf__sortmb-wrapper .sf__sortmb-list ul li.active::after{
    content:'';float:right;width:14px;height:8px;margin-top:5px;
    border-left:1.5px solid #111;border-bottom:1.5px solid #111;
    transform:rotate(-45deg)}

  /* La croix de fermeture : alignee sur le titre, pas flottante en coin */
  .sf__sortmb-wrapper .sf__sortmb-list .sf__sortmb-close{
    top:18px !important;right:16px !important;color:#111}
}

/* ===== Promotion : prix barre + prix remise ==========================
   Pose par script/prezzi.py le 1er aout 2026.

   Le theme attribue #666666 a `.text-color-sale-price` et #000000 au
   prix normal. Applique tel quel, cela grise le prix qu'on veut mettre
   en avant et laisse le prix barre en noir plein : exactement l'inverse
   de ce qu'on cherche. On reprend donc la main sur les deux couleurs
   plutot que de renommer les classes, pour que le JS du theme continue
   de reconnaitre ses propres selecteurs. */
.product-prices .prod__price{
  color:#000;
  font-weight:500;
}
.product-prices .prod__compare_price{
  color:#8a8a8a;
  text-decoration:line-through;
  font-size:.875em;
  font-weight:400;
  margin-left:8px;
}
/* Sous 480px la carte est etroite : on resserre l'ecart plutot que de
   laisser le prix barre pousser le prix remise hors de la carte. */
@media (max-width:480px){
  .product-prices{row-gap:2px}
  .product-prices .prod__compare_price{margin-left:6px}
}