/* =====================================================================
   RESPONSIVE — Tesserefineart
   ---------------------------------------------------------------------
   Breakpoint:
   - (max-width: 1023px) → tablet + mobile
   - (max-width: 767px)  → solo mobile

   DESKTOP (≥1024px): layout originale invariato (mega menu attivo).
   Burger e drawer attivi solo su mobile/tablet.
   ===================================================================== */


/* =====================================================================
   CART + WISHLIST: stessi cerchi e badge (vale ovunque, anche desktop)
   ===================================================================== */

.header-wishlist,
.header-cart,
.header-cart .cart-icon,
.cart-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Cerchio bordato (entrambi) */
.header-wishlist__circle,
.cart-icon .cart-contents,
.cart-icon a.cart-contents{
  width: 40px;
  height: 40px;
  border: 1px solid #333333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: transparent;
  text-decoration: none;
  color: #333;
  transition: color .25s ease, border-color .25s ease, transform .25s ease;
}

/* Icona dentro al cerchio */
.header-wishlist__icon,
.cart-contents__icon{
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: #333333;
  stroke-width: 1.5;
}

/* Badge contatore (entrambi) */
.header-wishlist__count,
.cart-icon .cart-contents__number{
  position: absolute;
  height: 20px;
  width: 20px;
  line-height: 20px;
  border-radius: 50%;
  text-align: center;
  font-size: 10px;
  right: -5px;
  bottom: -4px;
  top: auto;
  left: auto;
  font-weight: bold;
  background: #fe316d;
  color: #ffffff;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hover */
.header-wishlist:hover .header-wishlist__circle,
.cart-icon:hover .cart-contents,
.cart-icon:hover a.cart-contents{
  border-color: #E05039;
  color: #E05039;
  transform: scale(1.08);
}

.header-wishlist:hover .header-wishlist__icon,
.cart-icon:hover .cart-contents__icon{
  stroke: #E05039;
}

/* Nascondi minicart popup */
.minicart{
  display: none !important;
}


/* =====================================================================
   DESKTOP MEDIO  (1281px – 1650px)
   ===================================================================== */
@media (max-width: 1650px) and (min-width: 1281px){

  /* Shop generico: 4 → 3 colonne */
  .woocommerce ul.products,
  .woocommerce .products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Home featured: 4 → 3 colonne */
  .home .tfa-featured__inner ul.products,
  .home .woocommerce ul.products,
  .home .woocommerce .products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Wishlist: 4 → 3 colonne */
  .tfa-wl-page .woocommerce ul.products,
  .tfa-wl-page .woocommerce .products,
  .tfa-wl-page ul.products,
  main.grid:has(.tfa-wl-page) ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Card: aspect-ratio libero */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    padding: 40px 22px !important;
  }

  /* Immagine: stessa altezza, proporzioni reali (no crop) */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img{
    width: auto !important;
    max-width: 100% !important;
    height: 340px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  /* Footer: il -55px di style.css è tarato sul padding-bottom del desktop
     pieno (80px). Qui il link scende a 40px, quindi quei 55px mangiavano
     15px di foto (misurato a 1440px). Con -20px resta ~20px d'aria tra
     immagine e titolo, come sul desktop grande. */
  .woocommerce ul.products li.product .p-card__footer,
  .tfa-featured ul.products li.product .p-card__footer{
    margin-top: -20px !important;
  }
}


/* =====================================================================
   DESKTOP PICCOLO  (1024px – 1280px)
   ===================================================================== */
@media (max-width: 1280px) and (min-width: 1024px){

  /* Shop generico: 4 → 3 colonne */
  .woocommerce ul.products,
  .woocommerce .products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Home featured: 4 → 3 colonne */
  .home .tfa-featured__inner ul.products,
  .home .woocommerce ul.products,
  .home .woocommerce .products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Wishlist: 5 → 3 colonne */
  .tfa-wl-page .woocommerce ul.products,
  .tfa-wl-page .woocommerce .products,
  .tfa-wl-page ul.products,
  main.grid:has(.tfa-wl-page) ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Card: rimuovi la riga 1fr che sovrascrive aspect-ratio sull'immagine */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
    grid-template-rows: auto auto !important;
    min-height: 0 !important;
    padding: 28px 16px !important;
  }

  /* Immagine: stessa altezza, proporzioni reali (no crop) */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img{
    width: auto !important;
    max-width: 100% !important;
    height: 340px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }

  /* Footer: stesso problema della fascia sopra, qui il link ha solo 28px
     di padding-bottom (il -55px di style.css sconfinava di ~22px sulla
     foto, misurato a 1280px). -8px lascia ~20px d'aria. */
  .woocommerce ul.products li.product .p-card__footer,
  .tfa-featured ul.products li.product .p-card__footer{
    margin-top: -8px !important;
  }
}


/* =====================================================================
   TABLET + MOBILE  (≤ 1023px)
   ===================================================================== */
@media (max-width: 1023px){

  /* ── Announce bar: visibile e responsive su tablet ──────────────── */
  .mc-announce:not(.mc-announce--below-header){
    display: flex !important;
    height: 34px !important;
    min-height: 34px !important;
  }
  .mc-announce__col--text{
    flex: 1 1 auto;
    max-width: 100%;
  }
  .mc-announce__col--social{
    display: none;
  }
  .mc-announce__item{
    font-size: 11px !important;
    letter-spacing: .04em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 12px !important;
  }


  /* ── Desktop nav + mega menu: completamente nascosti ────────────── */
  .header-bottom,
  .tfa-mega,
  .tfa-mega[hidden],
  .tfa-mega-overlay{
    display: none !important;
    visibility: hidden !important;
  }

  /* ─────────────────────────────────────────────────────────────────
     HEADER MOBILE: layout compatto [burger+search+account]–[logo]–[wl+cart]
     ───────────────────────────────────────────────────────────────── */
  .nav-wrap,
  header.nav-wrap{
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: #fff;
  }

  header.nav-wrap .grid.no-pad-menu.header-top{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 18px !important;
    gap: 12px !important;
    min-height: 0 !important;
  }

  /* Le tre col-33 → flex auto */
  header.nav-wrap .header-top > .col-33,
  header.nav-wrap .header-top > div{
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Sinistra: burger + search + account */
  header.nav-wrap .header-left-actions{
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  /* Centro: logo (cresce, centrato) */
  header.nav-wrap .nav-header.header-logo,
  header.nav-wrap .header-logo{
    flex: 1 1 auto !important;
    justify-content: center !important;
    overflow: visible !important;
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Destra: wishlist + cart */
  header.nav-wrap .header-actions{
    justify-content: flex-end !important;
    gap: 12px !important;
  }

  /* LOGO ridimensionato */
  header.nav-wrap .logo,
  header.nav-wrap a.logo{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 2 !important;
    height: auto !important;
  }

  header.nav-wrap .logo img,
  header.nav-wrap a.logo img{
    height: 60px !important;
    width: auto !important;
    max-width: 160px !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  /* Nascondi label testuali */
  .header-account__label,
  .header-cart__label,
  .header-wishlist__label{
    display: none !important;
  }

  /* Search trigger compatto */
  .mc-search-trigger{
    padding: 6px !important;
  }
  .mc-search-trigger svg{
    width: 22px !important;
    height: 22px !important;
  }

  /* Account compatto */
  .header-account{
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px !important;
  }
  .header-account__icon{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ── Cover blocks (testo titolo) ────────────────────────────────── */
  .wp-block-cover .wp-block-heading{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(30px, 6.5vw, 74px);
    line-height: 0.95;
    letter-spacing: 0.04em;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }

  /* ── Cover full-width: rimuovi margin-top sopra all'header ─────── */
  header.nav-wrap + .wp-block-cover.alignfull,
  header.nav-wrap + section .wp-block-cover.alignfull,
  .wp-block-cover.alignfull{
    margin-top: 0;
    padding-top: 0;
  }

  /* ── Star rating nelle card prodotto ────────────────────────────── */
  .p-card__header-row .star-rating{
    display: none;
  }

  /* ── WooCommerce: card più basse e compatte ─────────────────────── */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
    min-height: 0 !important;
    padding: 24px 12px !important;
  }
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img{
    max-width: 200px !important;
  }

  /* ── WooCommerce: griglia prodotti (default 4 → 3 col) ──────────── */
  .woocommerce ul.products,
  .woocommerce .products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* ── WooCommerce: padding e font card ───────────────────────────── */
  .woocommerce ul.products li.product .p-card__footer .add_to_cart_button,
  .woocommerce ul.products li.product .p-card__footer .button{
    padding: 18px 0;
    font-size: 13px;
  }
  .woocommerce ul.products li.product .p-card__footer .price{
    padding: 18px 0;
    font-size: 13px;
  }

  /* ── HOME — Featured products (4 → 2 col) ───────────────────────── */
  .home .tfa-featured__inner{
    padding: 0 24px;
    margin-bottom: 30px;
  }
  .home .tfa-featured__inner ul.products,
  .home .woocommerce ul.products,
  .home .woocommerce .products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* Riduci spazio cover → primo blocco */
  .home .tfa-featured{
    min-height: 0 !important;
    padding-top: 30px !important;
  }
  .newsletter-banner{
    margin-top: 60px !important;
  }

  /* ── Categorie (cerchi) (4 → 2 col) ─────────────────────────────── */
  .wc-cat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* ── Wishlist (4 → 2 col, come featured) ─────────────────────────── */
  .tfa-wl-page .woocommerce ul.products,
  .tfa-wl-page .woocommerce .products,
  .tfa-wl-page ul.products,
  main.grid:has(.tfa-wl-page) ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  /* ── Shop layout: da tablet in giù NIENTE sidebar ────────────────
     Su desktop la colonna di sinistra mostra "Categories" e "Filters /
     Sort by". Da 1023px in giù è nascosta del tutto e i prodotti usano
     tutta la larghezza (`.tfa-wc-main` è `flex:1`, quindi si allarga da
     solo): le categorie restano raggiungibili dal menu hamburger, che in
     questa fascia è già attivo.
     NB: prima veniva solo resa statica sopra ai prodotti, e nascosta a
     partire da 767px; ora il comportamento è lo stesso su tablet. */
  .tfa-shop-layout{
    padding-left: 20px;
    padding-top: 20px;
  }
  .tfa-shop-sidebar{
    display: none;
  }
  .tfa-cat-nav__list{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
  }
  .tfa-cat-nav__item{
    margin-bottom: 0;
  }

  /* ── Heading alignfull has-x-large-font-size (es. "Featured Products") ── */
  .wp-block-heading.alignfull.has-x-large-font-size{
    font-size: clamp(18px, 3.5vw, 36px) !important;
    letter-spacing: 2px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ── Hero 16:9 su tablet: immagini INTERE, niente taglio ──────────
     Prima l'altezza era `60vh`: le proporzioni del box dipendevano
     dall'altezza della finestra, non dalle immagini. Su un tablet in
     verticale (es. 1024×1366 → box 1024×820, rapporto 1.25) le cover
     16:9 venivano tagliate parecchio ai lati.
     Legando l'altezza alla LARGHEZZA (56.25vw = 16:9) il box ha le
     stesse proporzioni delle immagini, che quindi entrano intere e
     senza bande. È lo stesso rimedio già usato su smartphone.
     ⚠️ Vale per le cover 16:9 (Tessere-cover-1, -11, -11-d). La slide
     "rosa" (andrea-piunti...tessere_78.jpg) è VERTICALE 1080×1441:
     avendo proporzioni diverse resta tagliata comunque — va sostituita
     con una versione 16:9, come già annotato nel blocco mobile. */
  .hero-slider.hero-slider--bg .heroSwiper{
    height: 56.25vw !important;   /* 16:9 sulla larghezza piena (100vw) */
    min-height: 0 !important;
  }
  .hero-slider.hero-slider--bg .hero-bg-slide{
    background-size:     cover !important;
    background-position: center !important;
  }
  /* il wrapper deve seguire lo swiper, altrimenti resta spazio vuoto sotto */
  .hero-slider.hero-slider--bg{
    height:     auto !important;
    min-height: 0 !important;
  }

  /* ── La hero non deve più accavallarsi ai blocchi cover sotto ──────
     `.hero-slider--bleed` ha `margin-bottom:-150px`: su desktop serve a
     far salire le card della books-grid sopra il bordo basso della hero,
     ed è un effetto voluto. Su tablet però le card sono molto più basse
     (219px contro 276px), quindi quei 150px fissi ne mangiavano il 68%:
     restava visibile solo la striscia inferiore delle immagini.
     Qui la sovrapposizione viene annullata e le cover si vedono intere. */
  .hero-slider.hero-slider--bleed{
    margin-bottom: 0 !important;
  }

  /* ── Books grid: 4 colonne su tablet ──────────────────────────────── */
  .books-grid{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .books-grid .wp-block-columns{
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
}


/* =====================================================================
   MOBILE  (≤ 767px)
   ===================================================================== */
@media (max-width: 767px){

  /* ── Announce bar: font ancora più piccolo su mobile ────────────── */
  .mc-announce__item{
    font-size: 10px !important;
    letter-spacing: .03em !important;
    padding: 0 8px !important;
  }

  /* ── Header: ulteriore compattezza ──────────────────────────────── */
  header.nav-wrap .grid.no-pad-menu.header-top{
    padding: 12px 20px !important;
    min-height: 100px !important;
    gap: 8px !important;
  }
  .nav-wrap,
  header.nav-wrap{
    min-height: 56px !important;
  }

  header.nav-wrap .logo img,
  header.nav-wrap a.logo img{
    height: 60px !important;
    max-width: 170px !important;
  }

  header.nav-wrap .header-actions{
    gap: 10px !important;
  }
  header.nav-wrap .header-left-actions{
    gap: 2px !important;
  }

  /* Icone search/account più piccole su mobile */
  .mc-search-trigger svg{
    width: 20px !important;
    height: 20px !important;
  }
  .header-account__icon{
    width: 20px !important;
    height: 20px !important;
  }

  /* Cerchi cart/wishlist leggermente più piccoli */
  .header-wishlist__circle,
  .cart-icon .cart-contents,
  .cart-icon a.cart-contents{
    width: 36px !important;
    height: 36px !important;
  }
  .header-wishlist__icon,
  .cart-contents__icon{
    width: 16px !important;
    height: 16px !important;
  }

  /* ── Heading alignfull has-x-large-font-size ─────────────────────── */
  .wp-block-heading.alignfull.has-x-large-font-size{
    font-size: clamp(14px, 4vw, 22px) !important;
    letter-spacing: 1.5px !important;
  }

  /* ── Books grid: 2 colonne su mobile ─────────────────────────────── */
  .books-grid{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
  .books-grid .wp-block-columns{
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }

  /* ── Cover blocks: testo titolo più piccolo ─────────────────────── */
  .wp-block-cover .wp-block-heading{
    font-size: clamp(30px, 6.5vw, 54px);
  }

  /* ── Home button: padding ridotto ───────────────────────────────── */
  .wp-block-button.home-button .wp-block-button__link{
    padding: 12px 16px;
    font-size: 14px;
    letter-spacing: 2px;
  }

  /* ── Home filters: in colonna ───────────────────────────────────── */
  .home-filters{
    flex-direction: column;
    gap: 25px;
    align-items: stretch;
    padding: 5px 20px 20px;
  }
  .home-filter{
    min-width: 100%;
  }

  /* ── Hero mobile (iPhone 17 Pro: 393×852pt) ─────────────────────── */
  .hero-slider.hero-slider--bg .heroSwiper{
    height: 70vh !important;
    min-height: 280px !important;
  }
  .hero-slider.hero-slider--bleed{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* .grid è display:flex (alux) → stira la hero al figlio più alto.
     Su mobile forziamo colonna verticale per tutti i blocchi Gutenberg. */
  body.page-template-gutemberg .grid,
  body.home.page-template-gutemberg .grid{
    display: block !important;
  }
  /* Azzera eventuali margini tra blocchi */
  .grid > *{
    margin-top: 0 !important;
    margin-block-start: 0 !important;
  }
  .home .tfa-featured{
    padding-top: 0 !important;
    margin-top: 0 !important;
    min-height: 0 !important;
  }
  .books-grid,
  .wp-block-group.books-grid{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* ── HOME — Featured products (4 → 2 col) ───────────────────────── */
  .home .tfa-featured__inner{
    padding: 0 18px;
  }
  .home .tfa-featured__inner ul.products,
  .home .woocommerce ul.products,
  .home .woocommerce .products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  /* ── Categorie (cerchi) (2 → 1 col) ─────────────────────────────── */
  .wc-cat-grid{
    grid-template-columns: 1fr;
  }

  /* ── WooCommerce: griglia prodotti (3 → 1 col) ──────────────────── */
  .woocommerce ul.products,
  .woocommerce .products{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Card prodotto: padding minimo su mobile */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
    padding: 16px 12px !important;
  }

  /* ── Wishlist (2 → 1 col) ───────────────────────────────────────── */
  .tfa-wl-page .woocommerce ul.products,
  .tfa-wl-page .woocommerce .products,
  .tfa-wl-page ul.products,
  main.grid:has(.tfa-wl-page) ul.products{
    grid-template-columns: 1fr !important;
  }

  /* ── Newsletter banner: in colonna ──────────────────────────────── */
  .newsletter-banner{
    margin-top: 60px !important;
    flex-direction: column;
    gap: 12px;
    font-size: 16px;
  }
  .newsletter-banner strong,
  .newsletter-banner em,
  .newsletter-banner a{
    width: 100%;
    border-right: 0;
    box-shadow: none;
    text-align: center;
  }
  .newsletter-banner a{
    display: block;
    padding: 14px 12px;
  }

  /* ── Single product: gallery sopra, summary sotto ───────────────── */
  .single-product main#main,
  .single-product #main.grid,
  .single-product #main.no-col{
    padding: 0;
  }
  .tfa-product__grid{
    grid-template-columns: 1fr;
    padding: 24px 0 40px;
    gap: 0;
    width: 100%;
  }
  .tfa-product__summary{
    grid-column: 1;
    grid-row: 2;
    padding: 40px 20px 48px;
  }
  .tfa-product__media{
    grid-column: 1;
    grid-row: 1;
    padding: 0;
  }
  .tfa-product__summary .product_title{
    font-size: 26px;
  }
  .single-product .tfa-accordion{
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .single-product .woocommerce-product-gallery{
    padding: 24px;
  }
  .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2),
  .single-product .woocommerce-product-gallery .woocommerce-product-gallery__image:nth-child(n+2) img{
    width: 56px;
    height: 56px;
    max-height: 56px;
  }

  /* ── Prodotti correlati + cross-sells "You may also like": 2 col ── */
  .single-product .related.products,
  .tfa-crosssells-full{
    padding: 30px 16px 10px !important;
  }
  .single-product .related.products ul.products,
  .tfa-crosssells-full ul.products{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 0 !important;
  }

  /* ── Contact form: 1 colonna ────────────────────────────────────── */
  .tfa-contact-row{
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .tfa-contact-page{
    padding: 140px 20px 80px;
  }
  .tfa-contact-title{
    margin-bottom: 50px;
  }
}


/* =====================================================================
   HOME MOBILE — loop prodotti puliti (featured / CLP / shop)
   Immagini fluide nella colonna, altezza uniforme, nessun crop,
   nessuno scroll orizzontale. Tile ordinati in 2 colonne.
   ===================================================================== */

/* Da tablet in giù: l'immagine non supera MAI la larghezza della colonna */
@media (max-width: 1023px){
  ul.products li.product img,
  .tfa-featured ul.products li.product img,
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img{
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
  }
}

@media (max-width: 767px){

  /* Rete di sicurezza: nessuno scorrimento laterale della pagina */
  body{ overflow-x: hidden; }

  /* Loop prodotti: 2 colonne uniformi */
  .tfa-featured ul.products,
  .home .tfa-featured__inner ul.products,
  .home .woocommerce ul.products,
  .woocommerce ul.products,
  .woocommerce .products,
  ul.products{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  /* Card: link a colonna, senza le righe grid fisse del desktop */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
  .tfa-featured ul.products li.product > a.woocommerce-LoopProduct-link{
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
    padding: 8px !important;
  }

  /* Immagine prodotto: riempi la colonna, altezza uniforme, no crop */
  ul.products li.product img,
  .tfa-featured ul.products li.product img,
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img{
    width: 100% !important;
    max-width: 100% !important;
    height: 190px !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Titolo / prezzo / bottone card: compatti e centrati */
  .p-card__footer{
    padding: 8px 4px 6px !important;
    text-align: center !important;
  }
  .woocommerce ul.products li.product .p-card__footer .price,
  .woocommerce ul.products li.product .p-card__footer .add_to_cart_button,
  .woocommerce ul.products li.product .p-card__footer .button{
    font-size: 12px !important;
    padding: 10px 0 !important;
  }
}


/* =====================================================================
   HOME MOBILE — rifiniture: hero compatta + sotto-nav nascosta
   ===================================================================== */
@media (max-width: 767px){

  /* ── main.grid: forza display:block su mobile ─────────────────────
     Il tema PROVAVA già a farlo con `body.page-template-gutemberg .grid`,
     ma la classe reale del body è `page-template-Gutemberg` (G MAIUSCOLA)
     e i selettori di classe sono case-sensitive → la regola non combaciava
     e `.grid` restava `display:flex`. Da flex, `main.grid` prendeva un
     `margin-left:100vw` che sfalsava tutto (hero, e le pagine About ecc.).
     Con block torna tutto centrato e a piena larghezza.
     Applicato a TUTTE le pagine con template Gutemberg (home, about, …). */
  .page-template-Gutemberg main.grid{
    display: block !important;
  }

  /* ── Titoli pagina con grande padding-top (About/Artist ecc.) ─────
     Su mobile riduco il font (parole lunghe come "Tesserefineart"
     sforavano a 50px) e il padding-top da 250px (eccessivo su smartphone). */
  .page-template-Gutemberg .wp-block-heading.padding__top__250{
    font-size: clamp(28px, 9vw, 50px) !important;
    padding-top: 100px !important;
    overflow-wrap: break-word;
  }

  /* ── Artist ecc.: spacer iniziale enorme (197px) sotto l'header ──── */
  .page-template-Gutemberg main.grid > .wp-block-spacer:first-child{
    height: 40px !important;
  }

  /* ── Blocco Media&Text (Artist): foto e testo AFFIANCATI ─────────
     Il core impila le due colonne sotto i 600px (.is-stacked-on-mobile):
     qui ripristiniamo il layout desktop (39% foto / resto testo) anche su
     smartphone, con l'immagine fluida e il testo verticalmente centrato.
     NB: serve la doppia classe per battere la specificità della regola
     core, che è !important. */
  .wp-block-media-text.is-stacked-on-mobile{
    display: grid !important;
    grid-template-columns: 39% auto !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__media{
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    height: auto !important;
  }
  .wp-block-media-text.is-stacked-on-mobile > .wp-block-media-text__content{
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  /* immagine: proporzioni reali, scala con la colonna */
  .wp-block-media-text__media img{
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* ── Media&Text: colonna testo a piena larghezza + font grandi ridotti ──
     Il testo (nome, citazione, URL) era in colonne annidate strette (250px)
     con font fissi pensati per il desktop (es. URL 28px inline che si
     spezzava a metà parola). Su mobile: colonne impilate, meno padding,
     e i font inline grandi rimpiccioliti. */
  .page-template-Gutemberg .wp-block-media-text__content{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .page-template-Gutemberg .wp-block-media-text__content .wp-block-columns{
    display: block !important;
  }
  /* Padding orizzontali annidati (colonne 20px + paragrafi 20px) che nella
     colonna stretta mangiavano 80px su 237: azzerati, così il testo usa
     tutta la larghezza disponibile accanto alla foto. */
  .page-template-Gutemberg .wp-block-media-text__content .wp-block-column,
  .page-template-Gutemberg .wp-block-media-text__content .wp-block-columns,
  .page-template-Gutemberg .wp-block-media-text__content p{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Il titolo H1 è .alignfull: dentro la colonna stretta sbordava di
     153px a destra (larghezza 393 partendo da x=153). Qui gli allineamenti
     larghi restano dentro la colonna. */
  .wp-block-media-text__content .alignfull,
  .wp-block-media-text__content .alignwide{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Testo nella colonna stretta accanto alla foto: titoli e spaziature
     riscalati sulla larghezza reale (~60% dello schermo). */
  /* NB: le classi .alignfull.has-x-large-font-size servono a superare la
     regola generica dei titoli mobile (più su in questo file). */
  .wp-block-media-text__content h1.wp-block-heading,
  .wp-block-media-text__content h1.wp-block-heading.alignfull.has-x-large-font-size{
    font-size: clamp(17px, 5vw, 26px) !important;
    letter-spacing: 2px !important;
    line-height: 1.2 !important;
  }
  .wp-block-media-text__content h2.wp-block-heading{
    font-size: clamp(13px, 3.6vw, 19px) !important;
    letter-spacing: 2px !important;
    line-height: 1.3 !important;
  }
  .wp-block-media-text__content p{
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .wp-block-media-text__content .wp-block-spacer{
    height: 16px !important;
  }
  /* URL del sito (28px inline da Gutenberg): in colonna stretta si
     spezzava a metà parola ("andreapiu / nti.it"), qui sta su una riga. */
  .page-template-Gutemberg [style*="font-size:28px"]{
    font-size: clamp(12px, 3.6vw, 16px) !important;
    overflow-wrap: anywhere;
  }

  /* ── Hero compatta ────────────────────────────────────────────────
     Il wrapper era 90vh mentre lo swiper è 70vh → 20vh vuoti sotto.
     height:auto fa combaciare il wrapper con lo swiper. */
  .hero-slider.hero-slider--bg{
    height: auto !important;
    min-height: 0 !important;
  }

  /* ── Hero 16:9: box = proporzioni delle immagini ──────────────────
     Le cover sono 16:9. Portando il box hero ESATTAMENTE a 16:9
     (altezza = 56.25% della larghezza piena) le immagini 16:9 riempiono
     senza tagliare NULLA e senza bande. Il testo viene compattato per
     entrare nell'altezza ridotta.
     ⚠️ L'immagine "rosa" (andrea-piunti...tessere_78.jpg) è VERTICALE
     (1080×1441): va sostituita con una versione 16:9 per combaciare come
     le altre — vedi nota. */
  .hero-slider.hero-slider--bg .heroSwiper{
    height: 56.25vw !important;   /* 16:9 sulla larghezza piena (100vw) */
    min-height: 0 !important;
  }
  .hero-slider.hero-slider--bg .hero-bg-slide{
    background-size: cover !important;
    background-position: center !important;
  }

  /* Testo hero compattato per l'altezza 16:9 */
  .hero-slider.hero-slider--bg .hero-bg-slide__content{
    padding: 0 16px !important;
  }
  .hero-slider.hero-slider--bg .hero-bg-slide__artist{
    font-size: 20px !important;
    margin-bottom: 2px !important;
  }
  .hero-slider.hero-slider--bg .hero-bg-slide__title{
    font-size: 30px !important;
    line-height: 1.05 !important;
    margin-bottom: 12px !important;
  }
  .hero-slider.hero-slider--bg .hero-bg-slide__subtitle{
    font-size: 12px !important;
    margin-bottom: 8px !important;
  }
  .hero-slider.hero-slider--bg .hero-bg-slide__ctas{
    gap: 10px !important;
  }
  .hero-slider.hero-slider--bg .hero-btn{
    padding: 9px 16px !important;
    font-size: 11px !important;
  }

  /* ── Sotto-nav "About / Artist / Light Box" nascosta su mobile ─────
     Nascondo l'intera barra "below-header".
     IMPORTANTE: va fatto INSIEME al fix `.grid` qui sopra — da sola,
     con `.grid` ancora flex, nascondere questa barra (flex-sibling di
     main.grid) rimetteva il margin-left:100vw e rompeva la hero. */
  #mc-subnav,
  .mc-subnav{
    display: none !important;
  }
  .mc-announce--below-header{
    display: none !important;
  }
}

/* Icona account: tolta dall'header dove c'è il menu hamburger
   (la voce "Account" è spostata dentro al drawer). Resta su desktop. */
@media (max-width: 1023px){
  .header-account{
    display: none !important;
  }
}


/* =====================================================================
   HOME MOBILE — loop prodotti come CAROSELLO orizzontale
   (come photobookstore): non più griglia 2×2 ma scorrimento laterale
   con "peek" della card successiva. Solo sulla HOME: lo shop resta griglia.
   Tecnica: flex + scroll-snap nativo (swipe fluido, niente JS).
   ===================================================================== */
@media (max-width: 767px){

  .home .tfa-featured ul.products,
  .home .tfa-featured__inner ul.products,
  .home .woocommerce ul.products,
  .home .woocommerce .products{
    display: flex !important;
    grid-template-columns: none !important;   /* annulla la griglia */
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px !important;

    /* FULL-BLEED: entrambi i loop a tutta ampiezza (100vw, edge-to-edge),
       indipendentemente dai padding dei contenitori Gutenberg. */
    width: 100vw !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 0 12px 10px !important;
    scroll-padding-left: 12px;

    scrollbar-width: none;                     /* Firefox: barra nascosta */
  }
  /* nasconde la scrollbar (WebKit) */
  .home .tfa-featured ul.products::-webkit-scrollbar,
  .home .tfa-featured__inner ul.products::-webkit-scrollbar,
  .home .woocommerce ul.products::-webkit-scrollbar,
  .home .woocommerce .products::-webkit-scrollbar{
    display: none;
  }

  /* Ogni prodotto = "slide" a larghezza fissa (~2,2 card visibili + peek) */
  .home .tfa-featured ul.products li.product,
  .home .tfa-featured__inner ul.products li.product,
  .home .woocommerce ul.products li.product,
  .home .woocommerce .products li.product{
    flex: 0 0 55% !important;
    width: 55% !important;
    max-width: 55% !important;
    margin: 0 !important;
    scroll-snap-align: start;
  }

  /* ── Card: layout come DESKTOP (cuore sopra, immagine, footer sotto) ──
     Il link torna a `grid` con padding superiore adeguato (come desktop),
     così il cuore wishlist sta nella fascia sopra l'immagine e il footer
     (titolo/prezzo) va SOTTO, non dentro l'immagine. Valori scalati dal
     desktop (immagine 340→210, padding 28, footer margin -55→-28). */
  .home .tfa-featured ul.products li.product > a.woocommerce-LoopProduct-link,
  .home .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{
    display: grid !important;
    grid-template-rows: 210px 0px !important;
    flex-direction: initial !important;
    padding: 28px 12px !important;
    min-height: 0 !important;
  }
  .home .tfa-featured ul.products li.product img,
  .home .woocommerce ul.products li.product img{
    height: 210px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .home .tfa-featured ul.products li.product .p-card__footer,
  .home .woocommerce ul.products li.product .p-card__footer{
    margin-top: -28px !important;   /* footer subito SOTTO l'immagine */
    padding: 8px 4px 4px !important;
    text-align: center !important;
  }

  /* "LOAD MORE" MOLTO più vicino al carosello: azzero il padding-top e
     tiro su il blocco con un margine negativo che mangia lo spacer VUOTO
     (53px) che lo precede — nessun contenuto lì, quindi nessuna
     sovrapposizione visiva. */
  .wp-block-columns:has(.wp-block-button.home-button){
    padding-top: 0 !important;
    margin-top: -70px !important;
    margin-bottom: 45px !important;   /* più spazio verso il titolo sotto */
  }
  .wp-block-buttons:has(.wp-block-button.home-button){
    padding-bottom: 22px !important;
  }
  /* Le due colonne VUOTE accanto al bottone (su mobile si impilano sopra e
     spingono giù "LOAD MORE"): le nascondo. */
  .wp-block-columns:has(.wp-block-button.home-button) > .wp-block-column:not(:has(.wp-block-button)){
    display: none !important;
  }

  /* (1) Titolo (es. "Featured Products / Best Sellers") più VICINO al
     carosello: riduco lo spacer che sta subito prima del carosello prodotti.
     NB: niente :has() annidato (non valido) → uso il discendente ul.products. */
  .home .wp-block-spacer:has(+ .wp-block-columns ul.products){
    height: 14px !important;
  }

  /* (2)+(3) L'immagine (cover) DOPO il carosello: portata a 16:9 come su
     desktop (aveva min-height:724px inline → verticale su mobile) e
     distanziata dal carosello sopra. È l'unico cover alignfull della home. */
  .home .wp-block-cover.alignfull.is-light{
    min-height: 56.25vw !important;   /* 16:9 sulla larghezza piena */
    aspect-ratio: 16 / 9 !important;
    margin-top: 30px !important;      /* distanza dal carosello */
  }
}


/* =====================================================================
   HOME MOBILE — testi full-width: margini laterali + titoli responsive
   I blocchi testo (titoli/paragrafi) figli diretti di main.grid erano
   larghi 393px senza padding → testo attaccato ai bordi. Aggiungo margini
   e rendo scalabile il titolo "ART PRINTS & LIMITED EDITION WORKS".
   ===================================================================== */
@media (max-width: 767px){
  .home main.grid > .wp-block-heading,
  .home main.grid > p,
  .home main.grid > .wp-block-paragraph{
    padding-left: 22px !important;
    padding-right: 22px !important;
    box-sizing: border-box !important;
  }

  /* Titolo "ART PRINTS & LIMITED EDITION WORKS" (era 48px) */
  .home main.grid > .wp-block-heading.tfa-nunito{
    font-size: clamp(24px, 6.5vw, 38px) !important;
    line-height: 1.15 !important;
  }
}


/* =====================================================================
   FOOTER MOBILE — tutto centrato + blocco social rimosso
   (i social sono ora nel menu hamburger). Solo su mobile.
   ===================================================================== */
@media (max-width: 767px){

  /* "Seguici sui social" + icone: rimossi dal footer (spostati nel drawer) */
  .tfa-foot__social-wrap{
    display: none !important;
  }

  /* Tutto centrato */
  .tfa-foot,
  .tfa-foot__main,
  .tfa-foot__col,
  .tfa-foot__head,
  .tfa-foot__newsletter,
  .tfa-foot__bar{
    text-align: center !important;
  }
  .tfa-foot__brand{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .tfa-foot__logo{
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .tfa-foot__menu{
    list-style: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Newsletter: campo e bottone centrati */
  .tfa-foot__newsletter .wpcf7,
  .tfa-foot__newsletter form{
    text-align: center !important;
  }
  .tfa-foot__newsletter input:not([type="submit"]):not([type="hidden"]){
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Barra copyright: centrata (una colonna) */
  .tfa-foot__bar{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .tfa-foot__copy{
    margin: 0 auto !important;
    color: #444 !important;   /* più scuro: era grigio chiaro poco leggibile */
    font-size: 12px !important;
  }

  /* Spazio in eccesso in fondo: la linea <hr> aveva 40px di margine sopra
     e 40px sotto (+ padding), spingendo il copyright quasi fuori schermo.
     Riduco margini e padding così "© ... P.IVA" resta ben visibile. */
  .tfa-foot__rule{
    margin-top: 18px !important;
    margin-bottom: 16px !important;
  }
  /* Margine di sicurezza in fondo: la barra inferiore del browser mobile
     copre gli ultimi ~50px → senza questo il copyright resta nascosto.
     env(safe-area-inset-bottom) aggiunge lo spazio per i notch. */
  .tfa-foot__inner{
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* =====================================================================
   PAGINE CATEGORIA / SHOP (smartphone)
   NB: la sidebar non si nasconde più qui — ora è già nascosta da tablet
   in giù, nel blocco (max-width:1023px) più sopra.
   ===================================================================== */
@media (max-width: 767px){

  /* ── Card shop/categoria: cuore SOPRA e footer SOTTO l'immagine ──
     Come per i loop della home: link a grid con padding superiore per il
     cuore, immagine contain, footer appena sotto l'immagine (non più
     sovrapposti). */
  .tfa-shop-layout ul.products li.product > a.woocommerce-LoopProduct-link{
    display: grid !important;
    grid-template-rows: 210px 0px !important;
    padding: 28px 12px !important;
    min-height: 0 !important;
  }
  .tfa-shop-layout ul.products li.product img{
    height: 210px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
  }
  .tfa-shop-layout ul.products li.product .p-card__footer{
    margin-top: -28px !important;
    padding: 8px 4px 4px !important;
    text-align: center !important;
  }

  /* ── Lightbox immagini prodotto (tfa-cat-swiper): solo SWIPE ──────
     Su smartphone niente frecce: si sfoglia con lo swipe. */
  .tfa-cat-swiper__prev,
  .tfa-cat-swiper__next,
  .tfa-cat-swiper .swiper-button-prev,
  .tfa-cat-swiper .swiper-button-next{
    display: none !important;
  }
}


/* =====================================================================
   PRODOTTI CORRELATI + CROSS-SELLS (tablet e smartphone)
   ---------------------------------------------------------------------
   PROBLEMA: in questi due loop il footer della card (titolo, categoria,
   prezzo) finiva SOPRA l'immagine.
   Su desktop `.p-card__footer` ha `margin-top:-55px` (style.css) per
   recuperare lo spazio vuoto che l'immagine `object-fit:contain` lascia
   sotto di sé QUANDO è presente `.p-card__header`. In questi due loop
   l'header non viene mai stampato, quindi i -55px mangiavano direttamente
   la foto (misurato: 47px di sovrapposizione a 390px, 31px a 990px).
   Home e shop non ne soffrono perché hanno già il loro blocco mobile
   (vedi "HOME MOBILE" e "PAGINE CATEGORIA / SHOP").

   SOLUZIONE: stesso schema degli altri loop — link a griglia con fascia
   superiore per il cuore wishlist, immagine ad altezza fissa contain e
   footer agganciato subito sotto (il margine negativo annulla solo il
   padding-bottom del link, mai l'immagine).
   ===================================================================== */

/* ── Tablet (768–1023px) ─────────────────────────────────────────────
   Qui il difetto colpiva TUTTI i loop (shop, categoria, home, correlati,
   cross-sells): in questa fascia nessuno aveva regole proprie, quindi
   restavano i valori desktop (immagine 360px, footer -55px) e il footer
   finiva sulla foto. Un unico blocco per tutte le card.               */
@media (max-width: 1023px) and (min-width: 768px){

  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link,
  .tfa-featured ul.products li.product > a.woocommerce-LoopProduct-link{
    display:             grid !important;
    grid-template-rows:  260px 0px !important;
    flex-direction:      initial !important;
    padding:             28px 12px !important;
    min-height:          0 !important;
  }

  /* NB: serve la forma `> a.woocommerce-LoopProduct-link img` per pareggiare
     la specificità di style.css, che impone height:360px !important (misura
     pensata per le colonne larghe del desktop); a parità vince questo file,
     caricato dopo. L'immagine sta 20px sotto l'altezza della riga: resta
     centrata con ~10px di respiro sopra e sotto, come su home e shop. */
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link img,
  .tfa-featured ul.products li.product > a.woocommerce-LoopProduct-link img{
    height:     240px !important;
    width:      auto !important;
    max-width:  100% !important;
    object-fit: contain !important;
    margin:     0 auto !important;
    display:    block !important;
  }

  .woocommerce ul.products li.product .p-card__footer,
  .tfa-featured ul.products li.product .p-card__footer{
    margin-top: -28px !important;   /* annulla il padding del link, non la foto */
    padding:    8px 4px 4px !important;
    text-align: center !important;
  }

  /* Correlati e cross-sells: 3 colonne come lo shop (su desktop sono 4,
     ma qui le card scendevano a ~125px di larghezza) e margini laterali
     ridotti, altrimenti la sezione mangia mezza riga di spazio. */
  .single-product .related.products ul.products,
  .tfa-crosssells-full ul.products{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .single-product .related.products{
    padding: 40px 24px !important;
  }
  /* con 3 colonne la quarta card andrebbe a capo da sola */
  .single-product .related.products ul.products li.product:nth-child(n+4){
    display: none !important;
  }
}

/* ── Smartphone (≤767px) ─────────────────────────────────────────── */
@media (max-width: 767px){
  .related.products ul.products li.product > a.woocommerce-LoopProduct-link,
  .tfa-crosssells-full ul.products li.product > a.woocommerce-LoopProduct-link{
    display:             grid !important;
    grid-template-rows:  210px 0px !important;
    flex-direction:      initial !important;
    padding:             28px 12px !important;
    min-height:          0 !important;
  }
  .related.products ul.products li.product img,
  .tfa-crosssells-full ul.products li.product img{
    height:     210px !important;
    width:      auto !important;
    max-width:  100% !important;
    object-fit: contain !important;
    margin:     0 auto !important;
    display:    block !important;
  }
  .related.products ul.products li.product .p-card__footer,
  .tfa-crosssells-full ul.products li.product .p-card__footer{
    margin-top: -28px !important;
    padding:    8px 4px 4px !important;
    text-align: center !important;
  }

  /* Sezione correlati: margini laterali coerenti col resto del mobile
     (su desktop ha padding 60px/80px, troppo su schermo stretto). */
  .single-product .related.products{
    padding: 40px 16px !important;
  }
}


/* =====================================================================
   SCHEDA PRODOTTO — pulsanti variazione "NO FRAME / WHITE FRAME"
   La griglia che impedisce alle scritte di sbordare è nella regola base
   (style.css, "Pulsanti swatch nella scheda prodotto"), così vale a ogni
   larghezza. Qui restano solo gli adattamenti per schermi stretti.
   ===================================================================== */
@media (max-width: 1023px){
  .single-product .tfa-swatch-wrap{
    width: 100%;            /* il 60% del desktop lascia troppo poco spazio */
  }
  .single-product .tfa-swatch-btn{
    padding: 10px 12px;     /* rientri leggermente più stretti */
  }
}


/* =====================================================================
   HERO SLIDER — tablet in VERTICALE (iPad & co.)
   ---------------------------------------------------------------------
   Un iPad Pro in verticale è 1024px CSS: cade appena FUORI dal
   breakpoint tablet (max-width:1023px), quindi prendeva la regola
   desktop `height:70vh`. Su uno schermo alto e stretto il box diventa
   quasi quadrato (1024×956 → rapporto 1.07) e le cover 16:9 perdevano
   il 40% ai lati — peggio ancora che a 60vh.

   Qui l'altezza segue la LARGHEZZA (56.25vw = 16:9), come nelle fasce
   tablet e smartphone: il box ha le stesse proporzioni delle immagini,
   che entrano intere e senza bande. Limitato a `orientation: portrait`
   così i desktop (sempre landscape) non vengono toccati.
   ===================================================================== */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: portrait){
  .hero-slider.hero-slider--bg{
    height:     auto !important;
    min-height: 0 !important;
  }
  .hero-slider.hero-slider--bg .heroSwiper{
    height:     56.25vw !important;   /* 16:9 sulla larghezza piena */
    min-height: 0 !important;
  }
  .hero-slider.hero-slider--bg .hero-bg-slide{
    background-size:     cover !important;
    background-position: center !important;
  }
  /* niente accavallamento sui blocchi cover sotto (vedi fascia tablet) */
  .hero-slider.hero-slider--bleed{
    margin-bottom: 0 !important;
  }
}


/* =====================================================================
   HERO SLIDER — tablet in ORIZZONTALE
   ---------------------------------------------------------------------
   Un iPad in orizzontale (es. 1180×820) è landscape e sopra i 1023px:
   prendeva la regola desktop `70vh` → box 2.06 di rapporto e cover 16:9
   tagliate del 14% sopra e sotto.
   `pointer: coarse` limita la regola ai dispositivi TOUCH: un laptop
   della stessa larghezza (mouse/trackpad → `pointer: fine`) non viene
   toccato e conserva la hero alta 70vh.
   ===================================================================== */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) and (pointer: coarse){
  .hero-slider.hero-slider--bg{
    height:     auto !important;
    min-height: 0 !important;
  }
  .hero-slider.hero-slider--bg .heroSwiper{
    height:     56.25vw !important;   /* 16:9 sulla larghezza piena */
    min-height: 0 !important;
  }
  .hero-slider.hero-slider--bg .hero-bg-slide{
    background-size:     cover !important;
    background-position: center !important;
  }
  /* niente accavallamento sui blocchi cover sotto (vedi fascia tablet) */
  .hero-slider.hero-slider--bleed{
    margin-bottom: 0 !important;
  }
}


/* =====================================================================
   MOBILE: via la barra grigia fissa in fondo allo schermo
   ---------------------------------------------------------------------
   Il framework Alux (css/alux.min.css, dentro @media max-width:767px)
   disegna uno sfondo per la vecchia nav mobile "a piede di pagina":

     .mobile-footer-menu .grid:after{ position:fixed; bottom:0;
       width:100%; height:70px; background:#1a1a1a }
     .nav-light.mobile-footer-menu .grid:after{ background:#e6e6e6 }

   Serviva quando burger (.tog) e logo (.spotlight) stavano fissi in
   basso. Qui la navigazione mobile e' il drawer #tfa-drawer con il
   burger in alto, quindi resta solo la fascia grigia vuota, incollata
   in fondo alla viewport durante lo scroll. Copriva anche gli ultimi
   70px del banner cookie di Complianz (i link Cookie/Privacy Policy).

   `content: none` elimina lo pseudo-elemento invece di nasconderlo; i
   due selettori replicano quelli di Alux per vincere di specificita'.
   ===================================================================== */
@media (max-width: 767px){
  .nav-light.mobile-footer-menu .grid::after,
  .mobile-footer-menu .grid::after{
    content: none;
  }
}