/* =====================================================================
   BYITALY STORE - responsive.css
   Adattamenti tablet e mobile per TUTTI i componenti custom
   ---------------------------------------------------------------------
   Tema:   byitaly (child di Classic) - PrestaShop 8.2.6
   Autore: Francesco Fiore - www.fiorefrancesco.com - Licenza MIT
   Riferimenti: ANALISI.md §9 [M - nessuna vista mobile fornita:
   regole dichiarate, non dedotte da immagini]
   ---------------------------------------------------------------------
   Strategia: i file componente definiscono il layout desktop; qui
   SOLO riduzioni per max-width. Breakpoint Bootstrap del Classic:
   1199 / 991 / 767 / 575. Caricato con priorità 90: vince sui
   file componente senza bisogno di !important.
   Lezione appresa (progetti nbstore/byitaly precedenti): nessuna
   larghezza fissa che possa creare overflow orizzontale < 768px.
   ===================================================================== */

/* =====================================================================
   ≤ 1199px - DESKTOP PICCOLO
   ===================================================================== */
@media (max-width: 1199.98px) {
  /* Hero: colonna testo più stretta, tasti overlay più compatti */
  .ff-hero__inner { grid-template-columns: minmax(380px, 48%) 1fr; }
  .ff-hero__keys a { width: 80px; height: 70px; }

  /* Griglie 4 -> 3 colonne */
  #products .products,
  .featured-products .products,
  .ffb-grid--cols-4 { grid-template-columns: repeat(3, 1fr); }

  /* Card informative scheda servizio: 5 -> 3 (le ultime 2 a capo) */
  .ff-service-info { grid-template-columns: repeat(3, 1fr); }

  /* USP a 5: -> 3 */
  .ff-usp--cols-5 { grid-template-columns: repeat(3, 1fr); }
  .ff-usp--divided .ff-usp__item + .ff-usp__item { border-left: none; padding-left: 0; }
}

/* =====================================================================
   ≤ 991px - TABLET
   ===================================================================== */
@media (max-width: 991.98px) {
  :root { --ff-section-y: 56px; }

  /* --- Header: il Classic passa al layout mobile (burger) sotto 992.
     Ereditiamo il suo comportamento; qui solo armonizzazione. */
  #header .header-top > .container { min-height: 68px; gap: 16px; }
  #header #_desktop_logo img { max-height: 42px; }
  #header #menu-icon { color: var(--ff-navy); }
  /* Topbar: solo claim, selettori passano nel menu mobile Classic */
  #header .header-nav .right-nav { display: none; }
  .ff-topbar-claim { text-align: center; width: 100%; font-size: 0.75rem; }
  /* Ricerca: sempre campo pieno nel layout mobile Classic */
  #header #search_widget input[type="text"] {
    width: 100%; opacity: 1; padding: 9px 14px;
    border: 1px solid var(--ff-border); border-radius: var(--ff-radius-sm);
  }

  /* --- Hero: impilato. Testo sopra, media sotto, tasti in griglia. */
  .ff-hero { min-height: 0; background-position: 70% center; }
  .ff-hero__inner { grid-template-columns: 1fr; gap: 20px; padding-top: 36px; }
  .ff-hero__content { max-width: 620px; }
  .ff-hero__logo { max-height: 110px; margin-bottom: 20px; }
  .ff-hero__media { min-height: 0; }
  .ff-hero__label { position: static; max-width: none; margin-bottom: 14px; }
  .ff-hero__label::after { margin-left: 0; }
  .ff-hero__keys {
    position: static;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: transparent;
    backdrop-filter: none;
    padding: 0;
  }
  .ff-hero__keys a { width: auto; }
  .ff-hero__band .container-fluid,
  .ff-hero__band-inner { grid-template-columns: 1fr; }
  .ff-hero__band-item + .ff-hero__band-item {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }

  /* --- Blocchi CMS */
  .ffb-split { grid-template-columns: 1fr; gap: 28px; }
  .ffb-values { grid-template-columns: repeat(2, 1fr); }
  .ffb-counters { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .ffb-counter:nth-child(odd) { border-left: none; }
  .ffb-grid--cols-4, .ffb-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
  .ffb-cta { flex-wrap: wrap; }
  .ffb-cta .ff-btn { width: 100%; }

  /* --- Servizi */
  .ff-services #products .products { grid-template-columns: repeat(2, 1fr); }
  .ff-service { grid-template-columns: 1fr; gap: 28px; }
  .ff-service-info { grid-template-columns: repeat(2, 1fr); }

  /* --- Shop: la colonna sinistra Classic scende sopra il contenuto.
     La compattiamo: categorie come blocco collassabile nativo. */
  #left-column { margin-bottom: 20px; }

  /* --- Contatti: colonne impilate (info -> form -> mappa) */
  .ff-contact { grid-template-columns: 1fr; }
  #ff-map { height: 380px; }

  /* --- USP e footer */
  .ff-usp--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .ff-hero__usp { grid-template-columns: repeat(2, 1fr); }
  .footer-container .ff-footer-grid { grid-template-columns: 1fr 1fr; }
  .ff-footer-brand {
    grid-column: 1 / -1;
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 28px;
  }
}

/* =====================================================================
   ≤ 767px - MOBILE
   ===================================================================== */
@media (max-width: 767.98px) {
  :root { --ff-section-y: var(--ff-section-y-m); --ff-gap: 18px; }

  /* Griglie prodotto/card: 2 colonne compatte */
  #products .products,
  .featured-products .products,
  .ff-services #products .products { grid-template-columns: repeat(2, 1fr); }
  .product-miniature .product-description { padding: 12px 14px 16px; }
  .product-miniature .price, .product-miniature .unit-price { font-size: 1rem; }

  /* Barra filtri Shop: pill su riga scrollabile senza overflow layout */
  #js-product-list-top {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 14px;
  }
  #js-product-list-top .total-products { display: none; }

  /* Scheda servizio */
  .ff-service-info { grid-template-columns: 1fr; }
  .ff-service__cta .ff-btn { width: 100%; min-width: 0; }
  .ff-service-tabs a { padding: 14px 14px; }
  .ff-service-info__card, .ff-faq { scroll-margin-top: 84px; }

  /* Hero */
  .ff-hero__cta .ff-btn { width: 100%; }
  .ff-hero__keys { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .ff-hero__usp { gap: 14px; }

  /* Contatori: 1 colonna con divider orizzontali */
  .ffb-counters { grid-template-columns: 1fr; }
  .ffb-counter + .ffb-counter {
    border-left: none;
    border-top: 1px solid var(--ff-border);
    padding-top: 24px;
  }
  .ffb-values { grid-template-columns: 1fr; }
  .ffb-grid--cols-4, .ffb-grid--cols-3, .ffb-grid--cols-2 { grid-template-columns: 1fr; }

  /* USP: 1 colonna, variante inline mantiene icona a sinistra */
  .ff-usp--cols-3, .ff-usp--cols-4, .ff-usp--cols-5 { grid-template-columns: 1fr; }

  /* Form contatti: riga doppia -> singola */
  .ff-form-row { grid-template-columns: 1fr; gap: 0; }
  .ff-contact__where { margin: -50px 10px 0; }

  /* Footer: colonne singole */
  .footer-container { padding-top: 44px; }
  .footer-container .ff-footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .ff-subfooter .container {
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    padding-bottom: 16px;
    text-align: center;
  }
}

/* =====================================================================
   ≤ 575px - MOBILE PICCOLO
   ===================================================================== */
@media (max-width: 575.98px) {
  /* Prodotti a 1 colonna sui display più stretti? NO: la grafica
     e-commerce moderna tiene 2 colonne; sotto i 360px però le card
     respirano meglio a colonna singola. */
  #products .products { grid-template-columns: repeat(2, 1fr); }

  .ff-hero__title { letter-spacing: 0; }
  .ff-hero__usp { grid-template-columns: repeat(2, 1fr); }
  #ff-map { height: 320px; }
}
@media (max-width: 359.98px) {
  #products .products,
  .ff-services #products .products,
  .ff-hero__keys { grid-template-columns: 1fr; }
}