/* Page d'accueil — GÉNÉRÉ, ne pas modifier à la main.
   La source est script/genera_home.py. */

/* ---- Hauteur des bannieres ----------------------------------------------
   Le theme calcule la hauteur de chaque banniere depuis les DIMENSIONS de son
   image : `--slide-height` en vw sur desktop, `--aspect-ratio` sur mobile.
   Resultat, chaque banniere prenait une hauteur differente selon la photo
   qu'on y avait mise -- 822px pour Donna et Uomo, 685px pour Bambino, a 548px
   de large. Une page d'accueil dont les blocs ne s'alignent pas.

   On impose donc la meme hauteur a toutes, et une un peu plus haute pour le
   hero, qui doit dominer. `!important` est obligatoire : ces deux variables
   sont posees EN LIGNE par le theme, sur chaque element.

   Le ciblage evite de coder en dur l'identifiant de section (il vient du
   gabarit aspire et n'a aucun sens) : les trois bannieres de collection ont
   « __slider_ » dans leur id, le hero est la seule section slider qui ne l'a
   pas. `.sf__slide-image` ecarte au passage les vignettes produit, qui
   utilisent la meme variable `--aspect-ratio` mais dans `.sf__pcard-image`. */

/* les trois bannieres de collection : hauteur commune.
   .82 et non .9 : sur telephone la banniere gagne ~10% de hauteur. Le
   rapport est un DIVISEUR (hauteur = largeur / rapport), donc le baisser
   agrandit. */
[id*="__slider_"] .sf__slide-image .sf-image{--aspect-ratio:.82!important}
[id*="__slider_"] .swiper-container{--slide-height:48vw!important}

/* le hero : legerement plus haut que les autres.
   .69 — le rapport est un DIVISEUR, donc le baisser agrandit. Sur un
   iPhone 14 Pro Max le hero passe de 523 (reglage d'origine) a 623px, soit
   67% de l'ecran. C'est le plafond : au-dela, le titre « Nuovi arrivi »
   sort de l'ecran d'accueil et on retombe sur le mur plein ecran corrige
   sur tablette. */
[id^="shopify-section-template--"]:not([id*="__slider_"]) .sf__slide-image .sf-image{
  --aspect-ratio:.69!important;
}

/* Le bouton du hero — « SCOPRI ORA » — sortait a `padding: 11px 2rem`, soit
   32px de cote et 11px de haut. Sur une image plein ecran il paraissait
   timide. On l'elargit et on l'epaissit, avec un `clamp` pour qu'il grandisse
   avec l'ecran sans devenir un pave sur telephone.

   Le selecteur porte sur `.slide__block-link` ET `.sf__btn` : le theme
   reutilise `.sf__btn` pour des dizaines de boutons (recherche, panier,
   filtres...) et un simple `.sf__btn` les aurait tous gonfles. La double
   classe suffit a battre les regles du theme sans recourir a `!important`,
   d'autant que cette feuille est chargee en dernier. */
.slide__block-link.sf__btn{
  padding:15px clamp(2.25rem,4vw,3rem);
  letter-spacing:.06em;
}

/* ---- Le hero sur tablette -----------------------------------------------
   Le theme met le hero en plein ecran : `.sf__slider--fullscreen` lui donne
   `height:100vh`. Sur un ordinateur en paysage c'est l'effet voulu -- 900px
   de haut pour 1440 de large. Sur une tablette en PORTRAIT, la meme regle
   donne un mur : 1366px de haut sur un iPad Pro, soit la totalite de l'ecran.
   Le visiteur n'a plus aucun signe qu'il y a une boutique en dessous.
   Pire, a 768x1024 la slide (1024px) depassait son conteneur (635px) et
   recouvrait le debut de la rangee « Nuovi arrivi ».

   `min(92vh,100vw)` : le hero ne depasse jamais un carre. Le 92 plutot
   que 100 lui retire un cran sur ordinateur — 828px au lieu de 900 sur un
   ecran de 900 de haut — juste assez pour qu'on devine qu'il y a une
   suite sans toucher a la force de l'image. En paysage
   -- donc sur tout ecran d'ordinateur -- 100vh reste le plus petit et RIEN
   ne change. En portrait, la largeur prend le relais et il reste un quart
   d'ecran pour annoncer la suite. Le conteneur recoit la meme hauteur que la
   slide, sinon l'un recouvre l'autre : `:has()` sert a le designer sans coder
   en dur l'identifiant de section, qui vient du gabarit aspire.
   Le hero est la seule banniere en `--fullscreen` ; les trois bannieres de
   collection sont en `--adapt` et ne sont pas touchees. */
@media(min-width:768px){
  .sf__slider--fullscreen .swiper-slide,
  .swiper-container:has(.sf__slider--fullscreen){
    height:min(92vh,100vw)!important;
  }
}

/* ---- Le carrousel de produits ne doit pas elargir la page ---------------
   `.sf__ms-wrapper` porte des marges negatives (la moitie de la gouttiere)
   pour que la premiere et la derniere carte s'alignent sur le bord du texte.
   Sans plafond, ces marges elargissent le bloc au-dela de la page : mesure a
   1446px pour 1440 de large, et jusqu'a 507px pour 390 sur telephone, ou la
   largeur des slides calculee par swiper s'ajoutait au probleme.
   Consequence : la page entiere se decalait lateralement au doigt -- le
   defaut le plus visible du site sur mobile. Le plafond supprime le
   debordement sans toucher au defilement interne du carrousel. */
.sf__ms--slider{max-width:100%}

/* Meme defaut, deux autres endroits du theme : les fleches du carrousel
   (-8px de chaque cote, mesure a 768px) et le pied de page (-32px, donc
   16px de trop des 1024px de large). Ces marges negatives supposent un
   conteneur qui les rattrape par son padding ; il ne le fait pas ici. Le
   plafond les rend inoffensives sans deplacer le contenu, qui reste cale
   par le padding interne des blocs. */
.sf-slider__controls,
.sf-footer__accordion{max-width:100%}

/* ---- l'air au-dessus des titres de rangee --------------------------------
   `.section-my` du theme pose 80px de marge en haut ET en bas de chaque
   rangee de produits ; entre le bas d'une banniere et le titre suivant on
   comptait donc 80px de blanc, avant les 50px qui separent le titre de ses
   cartes. Ramene a 56px : le titre reste detache de l'image au-dessus, la
   rangee se rapproche de ce qu'elle annonce. */
.section-my{margin-top:56px!important;margin-bottom:56px!important}

/* ---- hauteur des bannieres de collection sur ordinateur ------------------
   Mesure : 810px de haut sur un ecran de 1440, soit 56vw — la hauteur
   naturelle des visuels 16:9, que `--slide-height:48vw` ne bridait pas
   (la variable est posee mais le theme ne s'en sert pas a cette taille).
   Une banniere qui prend plus de la moitie de la largeur en hauteur pousse
   la rangee de produits suivante hors de l'ecran.
   45vw : 648px sur 1440, un quart de moins. Les visuels sont en `cover`,
   ils se recadrent sans se deformer.
   Le hero n'est pas concerne : il est en `--fullscreen` et garde son
   plafond `min(100vh,100vw)`. */
@media(min-width:1024px){
  .swiper-container:has(.sf__slider--adapt),
  .sf__slider--adapt .swiper-slide{height:45vw!important}
}

/* ---- le vide sous les bannieres de collection ----------------------------
   Mesure a 390px : la banniere « Donna » occupait 620px de haut alors que
   sa photo n'en fait que 476. Les 144px restants etaient du blanc, entre la
   fin de l'image et le titre de la rangee de produits qui suit — et cela
   trois fois dans la page, une par banniere.
   La cause est la meme que pour le hero corrige plus haut : le conteneur du
   carrousel garde la hauteur que le theme lui calcule (`--slide-height`),
   sans rapport avec celle de la diapositive une fois le rapport d'image
   impose. On lui rend une hauteur automatique : il epouse sa diapositive.
   `:has()` cible les bannieres en `--adapt` sans toucher au hero, qui est
   la seule en `--fullscreen` et garde son plafond `min(100vh,100vw)`. */
@media(max-width:1023px){
  .swiper-container:has(.sf__slider--adapt){height:auto!important}
}

/* ---- la fascia d'annuncio ------------------------------------------------
   MAIUSCOLE, come su tutte le altre pagine. L'accueil est la seule page qui
   porte encore la barre du thème (`.announcement-bar`) ; les fiches, les
   collections et le panier utilisent la nôtre (`.annbar`), déjà en capitales.
   Résultat : le même message se lisait en capitales partout sauf sur la page
   d'accueil, la première que voit le client. */
.announcement-bar__content{text-transform:uppercase;font-weight:500;letter-spacing:.01em}

/* NOTE — agrandir les cartes produit sur telephone.
   Piste explorée puis abandonnée, pour ne pas la refaire : sur mobile les
   deux cartes occupent déjà TOUTE la largeur (2 x 215 = 430px sur un
   iPhone 14 Pro Max, gouttière comprise). Les agrandir suppose donc d'en
   montrer moins de deux, or swiper est initialisé en dur à 2 par écran par
   le thème. Forcer `width:57%` en CSS après coup donne bien des cartes de
   245px, mais le carrousel reste calé sur l'ancienne mesure : la première
   carte se décale de 60px et le bord de la précédente reste à l'écran.
   Ni `swiper.update()` ni `slideToLoop(0,0)` ne le rattrapent (mesuré).
   La seule voie propre serait d'agir sur la config AVANT initialisation. */

@media(min-width:1024px){
  .section-my .sf__ms--slider{
    padding-left:clamp(15px,3vw,40px);
    padding-right:clamp(15px,3vw,40px);
  }
}

/* Sur mobile/tablette, la grille « Nuovi Arrivi » touchait les bords de
   l'ecran (padding 0, mesure a 691 et 390px). Le client a demande un peu
   d'air sur les cotes, SANS changer la gouttiere entre les deux cartes.
   Le padding est pose sur le CONTENEUR, pas sur les cartes : swiper
   recalcule la largeur des slides a partir de la largeur interne, l'ecart
   entre elles ne bouge pas. Borne a 1023px : le padding ordinateur
   ci-dessus reste intact. */
@media(max-width:1023px){
  .section-my .sf__ms--slider{
    padding-left:14px;
    padding-right:14px;
  }
}

/* Titres de banniere : `.w-max` du theme les met sur UNE ligne quoi qu'il
   arrive, plafonnee a 896px, et le swiper ecrete au lieu de laisser defiler.
   Sur iPhone on ne lisait que le milieu du titre — « …E OFFERTE ESCLU… ».
   Borne a 1023px : le rendu PC est intact. */
@media(max-width:1023px){
  .sf__slide-content.w-max{width:100%;max-width:100%}
}

/* 5 produits par rangee a partir de 1280px et non 1024px. En dessous, les
   collections en montrent 3 (`md:w-4/12`) : l'accueil en affichait 5 sur le
   meme iPad, avec des noms haches sur 5 lignes. 1280 est le seuil que
   `griglia-5.css` avait deja retenu pour les collections. */
@media(min-width:1280px){

  /* 5 produits par rangee, comme sur autry-usa.com.
     Swiper dimensionne ses slides en JavaScript, d'apres la largeur du
     conteneur, et retombe a 4 des qu'elle passe sous son palier : la
     gouttière ci-dessus l'y a fait basculer. On impose donc la largeur au
     lieu de la subir. Le `!important` n'est pas de la paresse -- swiper
     ecrit un `width` EN LIGNE sur chaque slide, et rien d'autre ne le bat.

     L'ecart entre cartes passe par le padding interne, pas par la marge de
     swiper : avec une marge, la 5e carte depasserait le conteneur de la
     largeur d'un ecart et serait rognee. */
  .section-my .swiper-slide{
    width:20%!important;
    margin-right:0!important;
    padding:0 8px;
    box-sizing:border-box;
  }
}