/*
Theme Name: Feluna
Theme URI: https://feluna.eu
Author: Feluna — Trovato Dario
Author URI: https://feluna.eu
Description: Feluna custom theme — BTS Catalog on Demand. Consistent with Feluna Shopify store style. Default language: English.
Version: 7.47
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: feluna
*/

/* ============================================================
   DESIGN TOKENS — Palette REALE dallo store Shopify (layout-3)
   Rosa corallo / teal, serif Cormorant + Poppins
   ============================================================ */
:root {
  /* Colori principali — dal tema Shopify Feluna */
  --color-coral:       #ff7e8d;   /* rosa corallo — colore brand distintivo */
  --color-coral-dark:  #e8697a;   /* corallo scuro per hover */
  --color-coral-soft:  #ffe7ec;   /* rosa tenue per sfondi/barre */
  --color-blush:       #fff5f7;   /* rosa quasi bianco per sezioni */
  --color-teal:        #01acc2;   /* teal — colore pulsanti principali */
  --color-teal-dark:   #018ea0;   /* teal scuro per hover */
  --color-sale:        #c20101;   /* rosso saldi */
  --color-gold-accent: #bb9457;   /* oro caldo per accenti secondari (raro) */
  --color-dark:        #1f1d24;   /* testo principale */
  --color-mid:         #5a5860;   /* testo secondario */
  --color-light:       #9a98a0;   /* testo terziario */
  --color-white:       #ffffff;
  --color-bg:          #ffffff;   /* sfondo principale bianco */
  --color-bg-alt:      #fff5f7;   /* sfondo alternato rosa tenue */
  --color-border:      #ececec;   /* bordi neutri */
  --color-border-soft: #f3dde2;   /* bordi rosati */
  --color-error:       #fd0d40;
  --color-success:     #2a9d5c;

  /* Compat: alias legacy → nuovi token (così le regole esistenti restano valide) */
  --color-sand:        #ffffff;
  --color-sand-dark:   #fff5f7;
  --color-gold:        #ff7e8d;   /* alias: l'accento brand ora è il corallo */
  --color-gold-light:  #ffe7ec;

  /* Tipografia — font reali dello Shopify (serif elegante + Poppins) */
  --font-display:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:         'Poppins', -apple-system, 'Helvetica Neue', sans-serif;
  --font-ui:           'Poppins', -apple-system, 'Helvetica Neue', sans-serif;

  /* Scale tipografica */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3rem;
  --text-5xl:   4rem;

  /* Spaziature */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* Layout — page width 1400px come Shopify */
  --container-max:  1400px;
  --container-wide: 1400px;
  --radius-sm:      4px;
  --radius-md:      6px;
  --radius-lg:      12px;
  --radius-full:    9999px;

  /* Ombre */
  --shadow-sm:  0 1px 3px rgba(31,29,36,0.08);
  --shadow-md:  0 4px 12px rgba(31,29,36,0.10);
  --shadow-lg:  0 8px 24px rgba(31,29,36,0.14);

  /* Transizioni */
  --transition: 0.2s ease;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* FIX 22/08/2026 (punto G, primo test di esperienza utente): era
     "overflow-x: hidden" — su molti browser (specialmente Safari/mobile)
     un overflow impostato su html/body disattiva silenziosamente
     "position: sticky" sui discendenti, che è esattamente la causa per
     cui .site-header (già sticky) scompariva scrollando. "clip" blocca
     lo scroll orizzontale indesiderato allo stesso modo di "hidden", ma
     senza creare il contesto di scorrimento che rompe lo sticky.
     Verificato dal vivo in Fase 2 del metodo: nessuno scroll orizzontale
     indesiderato introdotto, header resta fisso durante lo scroll. */
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-dark);
  background-color: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* FIX 22/08/2026 (punto G) — vedi commento su html{} poco sopra, stesso motivo. */
  overflow-x: clip;
  max-width: 100%;
}

/* Clamp su sezioni principali (non su tutti i div) */
.hero, .search-section, .feluna-brand-section,
.section, .brand-strip {
  max-width: 100%;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--transition); }
button { cursor: pointer; border: none; background: none; font-family: var(--font-ui); }
input, textarea, select { font-family: var(--font-body); }
ul, ol { list-style: none; }

/* Previene overflow nei grid: tutti i figli possono restringersi */
.hero-layout > *,
.features-layout > *,
.feluna-brand-layout > *,
.footer-grid > *,
.categories-grid > *,
.products-grid > * {
  min-width: 0;
}

/* Tutti i form e input sono sempre dentro al viewport */
input, select, textarea, button {
  max-width: 100%;
  box-sizing: border-box;
}


/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-dark);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p { margin-bottom: var(--space-4); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}

/* ============================================================
   LAYOUT UTILITIES
   ============================================================ */
.container {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
}
.container--wide {
  max-width: var(--container-wide);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section { padding: var(--space-20) 0; width: 100%; box-sizing: border-box; }
.section--alt { background-color: var(--color-sand-dark); }
.section--dark { background-color: var(--color-dark); color: var(--color-sand); }
.section--white { background-color: var(--color-white); }

.text-center { text-align: center; }
.text-gold { color: var(--color-gold); }
.text-teal { color: var(--color-teal); }
.text-mid { color: var(--color-mid); }

/* ============================================================
   BOTTONI
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-8);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  transition: all var(--transition);
  white-space: nowrap;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn--primary {
  background: var(--color-teal);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--color-teal-dark);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn--secondary {
  background: transparent;
  color: var(--color-dark);
  border: 1.5px solid var(--color-border);
}
.btn--secondary:hover {
  border-color: var(--color-gold);
  color: var(--color-gold);
}
.btn--teal {
  background: var(--color-teal);
  color: var(--color-white);
}
.btn--teal:hover {
  background: var(--color-teal-dark);
  transform: translateY(-1px);
}
.btn--outline-white {
  background: transparent;
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--color-white);
}
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-base); }
.btn--sm { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); }

/* ============================================================
   HEADER / NAVIGAZIONE
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 var(--space-6);
}
.site-logo img {
  height: 44px;
  width: auto;
}
.site-logo span {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-dark);
  letter-spacing: 0.04em;
}

.main-nav { display: flex; align-items: center; gap: var(--space-8); }
.main-nav a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-mid);
  letter-spacing: 0.04em;
  transition: color var(--transition);
}
.main-nav a:hover { color: var(--color-dark); }
/* FIX 31/08/2026 (Gruppo 1, bug #18 — correzione dopo test visivo) — il contrasto grigio-medio/quasi-nero usato prima era troppo debole per essere notato. Ora stesso trattamento del menu mobile (corallo, colore brand) più una linea sotto la voce attiva. */
.main-nav a.active { color: var(--color-coral); box-shadow: 0 2px 0 0 var(--color-coral); }
.main-nav .nav-divider {
  width: 1px;
  height: 20px;
  background: var(--color-border);
}

.header-actions { display: flex; align-items: center; gap: var(--space-3); }

/* Language switcher — pulsante con lingua corrente + tendina per le altre.
   Un solo componente condiviso da desktop e mobile: .header-actions non
   viene mai nascosto dalle media query, quindi resta visibile e funzionale
   su ogni larghezza senza bisogno di una seconda copia nel menu mobile. */
.lang-switcher {
  position: relative;
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.lang-switcher-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  color: var(--color-light);
  font: inherit;
  cursor: pointer;
  transition: all var(--transition);
}
.lang-switcher-toggle:hover,
.lang-switcher.open .lang-switcher-toggle {
  color: var(--color-dark);
  background: var(--color-sand-dark);
}
.lang-switcher-caret {
  transition: transform var(--transition);
}
.lang-switcher.open .lang-switcher-caret {
  transform: rotate(180deg);
}
.lang-switcher-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 64px;
  margin: 0;
  padding: var(--space-1) 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: 60;
}
.lang-switcher-menu[hidden] { display: none; }
.lang-switcher-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  color: var(--color-dark);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
.lang-switcher-menu a:hover { background: var(--color-sand-dark); }

/* Mobile hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--space-2);
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-dark);
  border-radius: 2px;
  transition: all var(--transition);
}

/* Mobile nav — pannello laterale (drawer)
   FIX 03/09/2026 (Pacchetto 9, Nitin #28) — prima era un overlay bianco a
   schermo intero con le voci centrate: su schermi alti lasciava molto
   spazio vuoto sopra/sotto, le voci risultavano centrate invece che
   ancorate a un lato, e mancava un vero effetto "pannello". Convertito
   allo stesso pattern già collaudato del drawer carrello (#cart-panel /
   #cart-drawer in main-v2.js): overlay scuro + pannello che scorre da
   destra, larghezza fissa invece di schermo intero. */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.mobile-nav.open { display: block; }
.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.mobile-nav.open .mobile-nav-overlay { opacity: 1; pointer-events: all; }
.mobile-nav-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--color-white);
  box-shadow: -4px 0 24px rgba(0,0,0,0.14);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-5);
  padding: var(--space-16) var(--space-8) var(--space-8);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
}
.mobile-nav.open .mobile-nav-panel { transform: translateX(0); }
.mobile-nav a {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-dark);
  text-align: left;
  transition: color var(--transition);
}
.mobile-nav a:hover { color: var(--color-coral); }
/* FIX 31/08/2026 (Gruppo 1, bug #18) — evidenzia la voce di menu mobile della pagina corrente. */
.mobile-nav a.active { color: var(--color-coral); }

.mobile-nav-close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  font-size: var(--text-2xl);
  cursor: pointer;
  color: var(--color-mid);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  display: flex;
  align-items: center;
  width: 100%;
  background: linear-gradient(135deg, var(--color-blush) 0%, var(--color-coral-soft) 100%);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,126,141,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
  width: 100%;
  min-width: 0;
}
.hero h1 {
  font-size: clamp(var(--text-4xl), 6vw, var(--text-5xl));
  margin-bottom: var(--space-6);
  line-height: 1.1;
}
.hero h1 em {
  font-style: italic;
  color: var(--color-gold);
}
.hero p {
  font-size: var(--text-lg);
  color: var(--color-mid);
  margin-bottom: var(--space-8);
  max-width: 520px;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255,126,141,0.1);
  border: 1px solid rgba(255,126,141,0.3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-6);
}

/* ============================================================
   SEARCH SECTION — Il cuore del tool
   ============================================================ */
.search-section {
  padding: var(--space-16) 0;
  width: 100%;
  overflow: hidden;
  background: var(--color-white);
  border-top: 3px solid var(--color-gold);
}
.search-section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}
.search-section-header h2 { margin-bottom: var(--space-3); }
.search-section-header p {
  color: var(--color-mid);
  font-size: var(--text-lg);
  max-width: 560px;
  margin: 0 auto;
}


/* ============================================================
   SEARCH BAR — input centrato + pulsante sotto
   ============================================================ */

/* Contenitore: colonna verticale, tutto centrato */
.search-bar-wrap {
  position: relative;
  max-width: 680px;
  width: 100%;
  margin: 0 auto var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
}

/* Input: bordo arrotondato, larghezza piena */
.search-input {
  width: 100%;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-dark);
  background: var(--color-blush);
  border: 2px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  outline: none;
  box-sizing: border-box;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.search-input::placeholder { color: var(--color-light); }
.search-input:focus {
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgba(255,126,141,0.10);
}

/* Pulsante sotto: allungato, centrato, colore teal */
.search-btn-below {
  display: block;
  width: 60%;
  min-width: 200px;
  max-width: 340px;
  padding: var(--space-4) var(--space-8);
  background: var(--color-teal);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  text-align: center;
}
.search-btn-below:hover {
  background: var(--color-teal-dark);
  transform: translateY(-1px);
}

/* Autocomplete dropdown */
.search-autocomplete {
  position: absolute;
  top: calc(56px + var(--space-2));
  left: 0; right: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  overflow: hidden;
  display: none;
}
.search-autocomplete.open { display: block; }
.autocomplete-item {
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  transition: background var(--transition);
}
.autocomplete-item:hover { background: var(--color-blush); }

/* Mobile: pulsante a tutta larghezza */
@media (max-width: 600px) {
  .search-input {
    font-size: 16px;
    padding: var(--space-4) var(--space-5);
  }
  .search-btn-below {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   SEARCH DROPDOWNS — Category e Brand affiancati, stile elegante
   ============================================================ */

/* Contenitore principale: due celle affiancate in un unico blocco arrotondato */
.search-dropdowns {
  display: flex;
  align-items: stretch;
  max-width: 680px;
  width: 100%;
  margin: 0 auto var(--space-6);
  background: var(--color-blush);
  border: 1.5px solid var(--color-border-soft);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-sizing: border-box;
  min-height: 60px;
}

/* Divisore verticale tra i due dropdown */
.search-dropdown-divider {
  width: 1px;
  background: var(--color-border-soft);
  align-self: stretch;
  flex-shrink: 0;
}

/* Ogni cella occupa metà del contenitore */
.search-dropdown-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: stretch;
}

/* Riga interna: icona+label a sinistra, select che si espande a destra */
.search-dropdown-inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 0 var(--space-5);
  gap: var(--space-2);
}

/* Label con icona — non interagisce col click, serve solo da etichetta visiva */
.search-dropdown-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

/* Select trasparente sopra tutto — occupa lo spazio rimasto */
.search-dropdown-select {
  flex: 1;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  padding: var(--space-1) var(--space-6) var(--space-1) var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-mid);
  cursor: pointer;
  outline: none;
  box-sizing: border-box;
  height: 100%;
  line-height: 1.4;
}

.search-dropdown-select:focus { outline: none; }

/* Freccia freccia freccia */
.search-dropdown-arrow {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-mid);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Focus sul contenitore */
.search-dropdowns:focus-within {
  border-color: var(--color-coral);
  box-shadow: 0 0 0 3px rgba(255,126,141,0.10);
}

/* Mobile ≤600px: impilati uno sotto l'altro */
@media (max-width: 600px) {
  .search-dropdowns {
    flex-direction: column;
    border-radius: var(--radius-lg);
    min-height: auto;
  }
  .search-dropdown-divider {
    width: auto;
    height: 1px;
    align-self: stretch;
  }
  .search-dropdown-inner {
    padding: var(--space-1) var(--space-4);
    min-height: 52px;
  }
  .search-dropdown-select {
    font-size: 16px !important;
  }
}


/* ============================================================
   TRENDING SEARCHES — ricerche frequenti
   ============================================================ */
.trending-searches {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  max-width: 680px;
  width: 100%;
  margin: 0 auto var(--space-4);
  font-size: var(--text-sm);
}

.trending-searches > span {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.trending-link {
  color: var(--color-teal);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--transition);
  white-space: nowrap;
  position: relative;
}

.trending-link:hover { color: var(--color-coral); }

.trending-link + .trending-link::before {
  content: '·';
  margin-right: var(--space-3);
  color: var(--color-border);
  font-weight: 400;
}

/* Le cat-card usano trending-link solo per il JS — nessun separatore visivo */
.cat-card.trending-link + .cat-card.trending-link::before {
  content: none;
}

/* ============================================================
   RISULTATI RICERCA
   ============================================================ */
#search-results { display: none; padding: var(--space-12) 0; }
#search-results.visible { display: block; }

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-4);
}
.results-count {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-mid);
}
.results-count strong { color: var(--color-dark); }

.results-sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.results-sort select {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-dark);
  font-size: var(--text-sm);
  outline: none;
  cursor: pointer;
}

/* Griglia prodotti */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}

/* Card prodotto */
.product-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  transition: box-shadow var(--transition), transform var(--transition);
  cursor: pointer;
  /* FIX 03/09/2026 (Pacchetto 7, #13) — la card diventa un contenitore
     flessibile a tutta altezza: la griglia (.products-grid, display:grid)
     allunga già ogni card alla stessa altezza della riga; qui basta poterla
     dividere in verticale tra immagine e corpo, così .product-card-footer
     può essere spinto in fondo con margin-top:auto invece di seguire uno
     spazio fisso, che oggi lascia il blocco prezzo/pulsante a un'altezza
     diversa a seconda della lunghezza del nome prodotto sopra. */
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}
.product-card-image {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-sand);
  position: relative;
}
.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-4);
  transition: transform 0.3s ease;
}
.product-card:hover .product-card-image img { transform: scale(1.05); }
/* FIX 03/09/2026 (Pacchetto 7, punto aggiuntivo) — segnaposto per i
   prodotti BTS senza foto ma disponibili: prima il riquadro restava
   completamente vuoto (nessuna icona, nessun testo), dando l'impressione
   di un errore di caricamento più che di un prodotto senza foto. Variante
   scelta da Dario: solo testo, colore brand, sfondo rosa tenue. */
.product-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-4);
  background: var(--color-bg-alt);
  color: var(--color-coral);
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.5;
}
.product-card-badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  background: var(--color-teal);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}
.product-card-badge.out { background: var(--color-light); }
/* FIX 03/09/2026 (Pacchetto 7, #13) — corpo della card in colonna
   flessibile, riempie lo spazio verticale restante sotto l'immagine
   (il contenitore .product-card è ora flex-column, vedi sopra), così il
   footer sottostante può usare margin-top:auto. */
.product-card-body {
  padding: var(--space-4) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.product-card-brand {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-1);
}
.product-card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  color: var(--color-dark);
  margin-bottom: var(--space-3);
  line-height: 1.3;
}
.product-card-variants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.variant-chip {
  padding: 2px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--color-mid);
  cursor: pointer;
  transition: all var(--transition);
}
.variant-chip:hover, .variant-chip.selected {
  border-color: var(--color-gold);
  color: var(--color-gold);
  background: rgba(255,126,141,0.08);
}
/* ── CARD FOOTER: riga su desktop, colonna su mobile ── */
.product-card-footer {
  display: flex;
  flex-direction: column;       /* pulsante SEMPRE sotto il prezzo, ovunque */
  align-items: stretch;
  gap: var(--space-3);
  /* FIX 03/09/2026 (Pacchetto 7, #13) — era margin-top fisso: il footer
     seguiva subito il contenuto sopra (nome, varianti), quindi restava a
     un'altezza diversa da card a card in base alla lunghezza del nome
     prodotto. Con margin-top:auto, dentro un .product-card-body ora
     flex-column, il footer (e il pulsante "Condividi" subito dopo) vengono
     spinti in fondo alla card, alla stessa altezza su tutta la riga. */
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.product-card-price-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.product-price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
}
.product-price-ref {
  font-size: var(--text-sm);
  color: var(--color-light);
  text-decoration: line-through;
}
/* Pulsante CTA — sempre full-width sotto il prezzo, stesso stile in/out stock */
.product-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-dark);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  transition: background var(--transition);
  cursor: pointer;
  border: none;
  min-height: 44px;
}
.product-card-cta:hover:not(:disabled) { background: var(--color-teal); }
.product-card-cta--oos {
  background: #999;
  cursor: not-allowed;
  opacity: 0.85;
}
.product-card-cta--oos:hover { background: #999; }

/* Skeleton loader */
.product-card-skeleton {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.skeleton-block {
  background: linear-gradient(90deg, var(--color-sand) 25%, var(--color-sand-dark) 50%, var(--color-sand) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Loading / errori */
.search-loading {
  text-align: center;
  padding: var(--space-16) 0;
  color: var(--color-mid);
}
.search-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-gold);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto var(--space-4);
}
@keyframes spin { to { transform: rotate(360deg); } }

.search-empty {
  text-align: center;
  padding: var(--space-16) 0;
}
.search-empty h3 { margin-bottom: var(--space-3); color: var(--color-mid); }

/* ============================================================
   SEZIONE BRAND FELUNA (pulsante Shopify)
   ============================================================ */
.feluna-brand-section {
  background: var(--color-dark);
  color: var(--color-white);
  padding: var(--space-20) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.feluna-brand-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,126,141,0.14) 0%, transparent 70%);
  pointer-events: none;
}
.feluna-brand-section .eyebrow { color: var(--color-coral); }
.feluna-brand-section h2 { color: var(--color-white); margin-bottom: var(--space-4); }
.feluna-brand-section p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 0 auto var(--space-8); font-size: var(--text-lg); }

/* ============================================================
   SEZIONE FEATURES / WHY
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.feature-card {
  padding: var(--space-8);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  text-align: center;
  transition: box-shadow var(--transition);
}
.feature-card:hover { box-shadow: var(--shadow-md); }
.feature-icon {
  font-size: 2rem;
  margin-bottom: var(--space-4);
  display: block;
}
.feature-card h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}
.feature-card p { color: var(--color-mid); font-size: var(--text-sm); margin: 0; }

/* ============================================================
   PAGINA PRODOTTO SINGOLO
   ============================================================ */
.product-page { padding: var(--space-12) 0; }
.product-page-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-16);
  align-items: start;
}
.product-gallery {
  position: sticky;
  top: 90px;
}
.product-gallery-main {
  aspect-ratio: 1;
  background: var(--color-sand);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-border);
}
.product-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-8);
}
.product-gallery-thumbs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transition);
}
.gallery-thumb.active { border-color: var(--color-gold); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-info-brand {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-2);
}
.product-info h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-6);
  line-height: 1.1;
}
.product-info-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.price-main {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--color-dark);
}
.price-ref {
  font-size: var(--text-xl);
  color: var(--color-light);
  text-decoration: line-through;
}
.price-saving {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-teal);
  background: rgba(74,158,155,0.1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.product-variants { margin-bottom: var(--space-6); }
.variants-label {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--color-mid);
}
.variants-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.variant-btn {
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-dark);
  cursor: pointer;
  transition: all var(--transition);
  background: var(--color-white);
}
.variant-btn:hover { border-color: var(--color-gold); }
.variant-btn.active {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-white);
}
.variant-btn.unavailable {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.shipping-info {
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-mid);
}
.shipping-info strong { color: var(--color-dark); }

.add-to-cart-btn {
  width: 100%;
  padding: var(--space-5);
  background: var(--color-dark);
  color: var(--color-white);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  margin-bottom: var(--space-3);
}
.add-to-cart-btn:hover {
  background: var(--color-gold);
  transform: translateY(-1px);
}
.add-to-cart-btn:disabled {
  background: var(--color-light);
  cursor: not-allowed;
  transform: none;
}

.product-description {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
  color: var(--color-mid);
  line-height: 1.8;
}

/* ============================================================
   CARRELLO MINI
   ============================================================ */
.cart-icon-btn {
  position: relative;
  padding: var(--space-2);
  color: var(--color-dark);
  font-size: 1.25rem;
}
.cart-count {
  position: absolute;
  top: 0; right: 0;
  min-width: 18px;
  height: 18px;
  background: var(--color-gold);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}
/* FIX 01/09/2026 — sulle pagine checkout (BTS e Feluna Brand) l'icona
   carrello nell'header sparisce: il carrello non è più modificabile "a
   bordo" del checkout (per evitare importi disallineati se il carrello
   viene cambiato senza tornare al checkout). Il pulsante "Modifica il
   carrello" per tornare alla pagina/contesto giusto si trova ora accanto
   al pulsante di pagamento (vedi .checkout-edit-cart-btn più sotto —
   AGGIORNAMENTO 01/09/2026 parte 2, spostato dall'header su richiesta di
   Dario per maggiore visibilità). */
.checkout-edit-cart-btn:hover {
  background: var(--color-sand) !important;
  border-color: var(--color-dark) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-dark);
  color: rgba(245,240,232,0.7);
  padding: var(--space-16) 0 var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-10);
  margin-bottom: var(--space-12);
}
.footer-brand .site-logo span { color: var(--color-sand); }
.footer-brand p {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.7;
  color: rgba(245,240,232,0.55);
}
.footer-col h4 {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-sand);
  margin-bottom: var(--space-5);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-col a {
  font-size: var(--text-sm);
  color: rgba(245,240,232,0.55);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--color-gold); }

.footer-bottom {
  border-top: 1px solid rgba(245,240,232,0.1);
  padding-top: var(--space-8);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.footer-legal {
  font-size: var(--text-xs);
  color: rgba(245,240,232,0.35);
  line-height: 1.7;
}
.footer-legal strong { color: rgba(245,240,232,0.55); }

/* ============================================================
   PAGINA TRACCIAMENTO ORDINE
   ============================================================ */
.tracking-page { padding: var(--space-20) 0; max-width: 560px; margin: 0 auto; text-align: center; }
.tracking-form {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  margin-top: var(--space-8);
  text-align: left;
}
.form-group { margin-bottom: var(--space-5); }
.form-label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: var(--space-2);
}
.form-input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-sand);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-dark);
  outline: none;
  transition: border-color var(--transition);
}
.form-input:focus { border-color: var(--color-gold); }
.tracking-result {
  margin-top: var(--space-8);
  padding: var(--space-6);
  background: var(--color-sand);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  display: none;
}
.tracking-result.visible { display: block; }
.tracking-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
}
.status-shipped { background: rgba(39,174,96,0.1); color: var(--color-success); }
.status-processing { background: rgba(255,126,141,0.1); color: var(--color-gold); }
.status-pending { background: rgba(107,101,96,0.1); color: var(--color-mid); }

/* ============================================================
   PANNELLO ADMIN (wp-admin area)
   ============================================================ */
.feluna-admin-wrap { padding: 24px; }
.feluna-admin-wrap h1 {
  font-family: -apple-system, sans-serif;
  font-size: 23px;
  font-weight: 400;
  color: #1d2327;
  margin-bottom: 20px;
}
.feluna-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.feluna-stat-card {
  background: #fff;
  border: 1px solid #c3c4c7;
  border-radius: 4px;
  padding: 20px;
  border-left: 4px solid var(--color-gold);
}
.feluna-stat-value { font-size: 32px; font-weight: 700; color: #1d2327; }
.feluna-stat-label { font-size: 13px; color: #646970; margin-top: 4px; }
.feluna-orders-table { width: 100%; border-collapse: collapse; background: #fff; }
.feluna-orders-table th {
  text-align: left;
  padding: 12px 16px;
  background: #f0f0f1;
  font-size: 13px;
  font-weight: 600;
  color: #1d2327;
  border-bottom: 1px solid #c3c4c7;
}
.feluna-orders-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f1;
  font-size: 13px;
  color: #1d2327;
}
.feluna-orders-table tr:hover td { background: #f9f9f9; }
.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.status-badge.shipped { background: #d1fae5; color: #065f46; }
.status-badge.processing { background: #fef3c7; color: #92400e; }
.status-badge.paid { background: #dbeafe; color: #1e40af; }
.status-badge.error { background: #fee2e2; color: #991b1b; }

/* ============================================================
   SKELETON LOADING — caricamento percettivo immediato
   ============================================================ */
.products-grid-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
}
.skeleton-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.skeleton-card .sk-image {
  aspect-ratio: 1;
  background: linear-gradient(90deg, var(--color-sand) 25%, var(--color-sand-dark) 50%, var(--color-sand) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skeleton-card .sk-body { padding: var(--space-4) var(--space-5) var(--space-5); }
.skeleton-card .sk-line {
  height: 12px;
  border-radius: 4px;
  margin-bottom: var(--space-3);
  background: linear-gradient(90deg, var(--color-sand) 25%, var(--color-sand-dark) 50%, var(--color-sand) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skeleton-card .sk-line.short { width: 40%; }
.skeleton-card .sk-line.medium { width: 70%; }
.skeleton-card .sk-line.price { width: 50%; height: 24px; margin-top: var(--space-4); }

/* ============================================================
   PRODOTTI SIMILI / CORRELATI
   ============================================================ */
.related-products {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-border);
}
.related-products h2 {
  text-align: center;
  margin-bottom: var(--space-8);
  font-size: var(--text-2xl);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

/* sr-only per accessibilità */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   TRASPARENZA SPEDIZIONE
   ============================================================ */

/* Banner globale spedizione */
.shipping-banner {
  background: var(--color-coral);
  color: var(--color-white);
  text-align: center;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Badge spedizione sotto il prezzo nelle card */
.product-card-shipping {
  font-size: var(--text-xs);
  color: var(--color-mid);
  margin-top: var(--space-1);
  line-height: 1.4;
}
.product-card-shipping .free {
  color: var(--color-teal);
  font-weight: 600;
}

/* Box spedizione nella pagina prodotto */
.shipping-box {
  background: var(--color-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.shipping-box-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
}
.shipping-box-text { font-size: var(--text-sm); color: var(--color-mid); line-height: 1.6; }
.shipping-box-text strong { color: var(--color-dark); display: block; margin-bottom: 2px; }
.shipping-box-text .free { color: var(--color-teal); font-weight: 600; }

/* Barra progresso "manca poco alla spedizione gratuita" */
.free-shipping-progress {
  background: var(--color-white);
  border: 1px solid var(--color-gold-light);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}
.free-shipping-progress.achieved {
  background: rgba(74,158,155,0.08);
  border-color: var(--color-teal);
}
.fsp-text {
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--color-dark);
}
.fsp-text strong { color: var(--color-gold); }
.fsp-text .achieved-text { color: var(--color-teal); font-weight: 600; }
.fsp-bar {
  height: 8px;
  background: var(--color-sand-dark);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.fsp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-light) 100%);
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
}
.free-shipping-progress.achieved .fsp-bar-fill {
  background: linear-gradient(90deg, var(--color-teal) 0%, #6FB5B2 100%);
}

/* ============================================================
   HERO LAYOUT CON IMMAGINE (due colonne)
   ============================================================ */
.hero-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-12);
  align-items: center;
  padding: var(--space-16) 0;
  width: 100%;
  min-width: 0;
}
.hero-layout > * { min-width: 0; }
.hero-image-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  height: 480px;
}
.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero-image-badge {
  position: absolute;
  bottom: var(--space-6);
  left: var(--space-6);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--shadow-md);
}
.hero-image-badge-num {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-coral);
  line-height: 1;
}
.hero-image-badge span:last-child {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-mid);
  font-weight: 600;
}

/* ============================================================
   BRAND STRIP
   ============================================================ */
.brand-strip {
  background: var(--color-dark);
  padding: var(--space-5) 0;
  overflow: hidden;
  /* FIX 31/08/2026 (Gruppo 1, bug #26) — separazione visiva dal footer sottostante, che usa lo stesso sfondo scuro. */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-strip-label {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
  text-align: center;
  margin-bottom: var(--space-3);
}
.brand-strip-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  row-gap: var(--space-3);
}
.brand-strip-logos span {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
  white-space: nowrap;
}
.brand-strip-logos span::after {
  content: '·';
  margin-left: var(--space-6);
  color: rgba(255,255,255,0.2);
  font-weight: 400;
}
.brand-strip-logos span:last-child::after { content: ''; }
.brand-strip-logos span:hover { color: var(--color-coral); }

/* ============================================================
   FEATURES LAYOUT CON IMMAGINE AFFIANCATA
   ============================================================ */
.features-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  width: 100%;
  gap: var(--space-16);
  align-items: center;
}
.features-image-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.features-image {
  width: 100%;
  height: 520px;
  object-fit: cover;
  display: block;
}
.features-text h2 { margin-bottom: var(--space-4); }
.features-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.feature-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.feature-item-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--color-coral-soft);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feature-item h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-1);
}
.feature-item p {
  color: var(--color-mid);
  font-size: var(--text-sm);
  margin: 0;
  line-height: 1.6;
}

/* ============================================================
   CATEGORIE CON IMMAGINI
   ============================================================ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.cat-card {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition);
}
.cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.cat-card-image {
  aspect-ratio: 3/4;
  overflow: hidden;
  position: relative;
}
.cat-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(31,29,36,0.75) 0%, transparent 50%);
}
.cat-card-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.cat-card:hover .cat-card-image img { transform: scale(1.06); }
.cat-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-4) var(--space-5);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 500;
  z-index: 1;
}

/* ============================================================
   BRAND SECTION CON IMMAGINE AFFIANCATA
   ============================================================ */
.feluna-brand-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-width: 0;
  width: 100%;
  gap: var(--space-16);
  align-items: center;
  padding: var(--space-20) 0;
}
.feluna-brand-text .eyebrow { color: var(--color-coral); }
.feluna-brand-text h2 { color: var(--color-white); margin-bottom: var(--space-4); }
.feluna-brand-text p { color: rgba(255,255,255,0.7); font-size: var(--text-lg); max-width: 480px; }
.feluna-brand-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

/* ============================================================
   RESPONSIVE — sistema completo desktop / tablet / mobile
   Principio: nessun elemento esce mai dal viewport.
   html e body hanno overflow-x: hidden.
   ============================================================ */

/* ── TABLET LANDSCAPE (max 1024px) ─────────────────────────── */
@media (max-width: 1024px) {
  .container,
  .container--wide { padding: 0 var(--space-6); }

  .hero-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding: var(--space-10) 0;
  }
  .hero-image-wrap { height: 340px; }
  .features-layout { gap: var(--space-8); }
  .features-image { height: 380px; }
  .categories-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .product-page-inner { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
}

/* ── TABLET PORTRAIT (max 900px) ───────────────────────────── */
@media (max-width: 900px) {
  .hero-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
    padding: var(--space-8) 0;
  }
  .hero-content { order: 2; }
  .hero-image-wrap {
    order: 1;
    height: 240px;
    max-width: 360px;
    margin: 0 auto;
    width: 100%;
  }
  .hero p { max-width: 460px; margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-badge { margin: 0 auto var(--space-4); }

  .features-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .features-image-wrap { max-width: 440px; margin: 0 auto; width: 100%; }
  .features-image { height: 280px; }

  .feluna-brand-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    text-align: center;
    padding: var(--space-10) 0;
  }
  .feluna-brand-text p { margin-left: auto; margin-right: auto; }
  .feluna-brand-image {
    height: 240px;
    max-width: 400px;
    margin: 0 auto;
    order: -1;
    width: 100%;
  }
}

/* ── MOBILE (max 768px) ────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-5xl: 2.25rem;
    --text-4xl: 1.875rem;
    --text-3xl: 1.625rem;
    --text-2xl: 1.375rem;
  }

  .main-nav { display: none; }
  .hamburger { display: flex; }
  .header-inner { height: 64px; }

  .section { padding: var(--space-10) 0; }

  .hero-layout { padding: var(--space-8) 0; }
  /* FIX 03/09/2026 (Pacchetto 9, Nitin #25) — prima l'altezza era fissa a
     190px: con object-fit:cover, un riquadro così basso tagliava gran
     parte della foto in verticale. Altezza fluida (scala con la
     larghezza dello schermo invece di saltare a scatti tra i
     breakpoint) con un minimo più alto di prima. */
  .hero-image-wrap { height: clamp(240px, 38vw, 300px); }
  .hero h1 { font-size: var(--text-4xl); }

  /* Fix barra ricerca mobile — nessun overflow */
  /* Search bar responsive: già gestito nel blocco base */
  /* FIX 31/08/2026 (Gruppo 1, bug #27) — rimossa regola .search-icon: nessun elemento HTML nei template usa questa classe (CSS morto). */
  /* FIX 31/08/2026 (Gruppo 1, bug #27) — ripristinato il padding orizzontale, azzerato per errore in questo blocco e vincente in cascata su tutti gli schermi mobile. */
  .search-input { flex: 1 1 0; min-width: 0; padding: var(--space-3) var(--space-4); }
  .search-btn { flex-shrink: 0; padding: 0 var(--space-4); font-size: 11px; min-height: 44px; white-space: nowrap; }

  /* No zoom su iOS */
  input, select, textarea, .search-input, .form-input { font-size: 16px !important; }

  /* Touch-friendly */
  .btn, .add-to-cart-btn, .variant-btn, button[type="submit"] {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Autocomplete fullscreen */
  .search-autocomplete.open {
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    border-radius: 0;
    max-height: none;
    overflow-y: auto;
    z-index: 150;
  }
  .autocomplete-item { padding: var(--space-4); min-height: 52px; }

  /* Scroll orizzontale filtri */
  .quick-filters, .brand-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  .quick-filters::-webkit-scrollbar, .brand-pills::-webkit-scrollbar { display: none; }
  .quick-filter, .brand-pill { flex-shrink: 0; }

  .categories-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .products-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }

  .brand-strip-logos { gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
  .brand-strip-logos span { font-size: var(--text-xs); }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; }

  .checkout-layout { grid-template-columns: minmax(0, 1fr) !important; gap: var(--space-6) !important; }
  .checkout-form-wrap, .checkout-summary { min-width: 0; }
  .checkout-summary { position: static !important; order: -1; }
  .form-row { grid-template-columns: minmax(0, 1fr) !important; }
  .form-row > *, .form-group { min-width: 0; }
  /* Righe flex telefono/indirizzo: l'input deve potersi restringere sotto la sua larghezza intrinseca */
  .checkout-form-wrap input, .checkout-form-wrap select, .checkout-form-wrap .form-input { min-width: 0; }

  .product-info h1 { font-size: var(--text-2xl); }
  .price-main { font-size: var(--text-3xl); }

  .feluna-toast {
    left: var(--space-4) !important;
    right: var(--space-4) !important;
    bottom: var(--space-4) !important;
    justify-content: center;
    width: auto !important;
  }
  .feluna-orders-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ── MOBILE PICCOLO (max 480px) ────────────────────────────── */
@media (max-width: 480px) {
  .container, .container--wide { padding: 0 var(--space-4); }

  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  /* FIX 03/09/2026 (Pacchetto 9, Nitin #25) — vedi nota nel blocco @768px:
     stesso principio, minimo più alto (200px invece di 160px) e scala
     fluida invece di un valore fisso. */
  .hero-image-wrap { height: clamp(200px, 45vw, 260px); }

  .categories-grid { gap: var(--space-2); }
  .cat-card-label { font-size: var(--text-sm); padding: var(--space-3); }
  .products-grid { gap: var(--space-2); }
  .product-card-name { font-size: var(--text-sm); }
  .product-price { font-size: var(--text-xl); }
  .product-card-body { padding: var(--space-3); }
  /* le regole card-footer sono nella media 768px */

  .hero-badge { font-size: 10px; }
  .footer-grid { grid-template-columns: 1fr; }
  .feluna-brand-text .btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Previene rendering emoji su caratteri accentati nei browser mobile */
.trending-link, .quick-filter, .brand-pill, .hero-badge,
.search-section-header, .btn, .footer-legal {
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
}

/* ============================================================
   MODAL PAGINA PRODOTTO INLINE
   ============================================================ */
#feluna-product-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}
#feluna-product-modal.open {
  display: block;
}
.fpm-overlay {
  position: absolute;
  inset: 0;
  background: rgba(31,29,36,.55);
  backdrop-filter: blur(3px);
}
.fpm-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 12px;
  width: min(920px, 95vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
}
.fpm-close {
  position: sticky;
  top: 0;
  float: right;
  margin: 12px 12px 0 0;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--color-mid);
  z-index: 1;
}
.fpm-close:hover { color: var(--color-dark); }
.fpm-body { padding: 0 0 2rem; clear: both; }
.fpm-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem;
  gap: 1rem;
  color: var(--color-mid);
}
.fpm-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 1.5rem 2rem 2rem;
}
@media (max-width: 640px) {
  .fpm-layout { grid-template-columns: 1fr; }
}
.fpm-image-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-light);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fpm-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
}
/* FIX 04/09/2026 (Pacchetto 10) — prima era solo testo piccolo grigio
   ("No image"), disallineato dallo stile della card (sfondo colorato,
   testo in risalto). Ora stesso trattamento visivo di
   .product-card-image-placeholder, adattato al riquadro quadrato più
   grande del modal. */
.fpm-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-6);
  background: var(--color-bg-alt);
  color: var(--color-coral);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.5;
}
.fpm-details { display: flex; flex-direction: column; gap: .75rem; }
.fpm-brand {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-coral);
}
.fpm-title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
  color: var(--color-dark);
}
.fpm-stock {
  font-size: 13px;
  font-weight: 500;
}
.fpm-stock.in { color: #1a7f4b; }
.fpm-stock.out { color: #b91c1c; }
.fpm-variants { margin: .25rem 0; }
.fpm-variants-label {
  font-size: 12px;
  color: var(--color-mid);
  margin-bottom: .5rem;
  font-family: var(--font-ui);
}
.fpm-price-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: .25rem 0;
}
.fpm-price {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-dark);
}
.fpm-description {
  font-size: 14px;
  color: var(--color-mid);
  line-height: 1.6;
  margin: .25rem 0;
  max-height: 120px;
  overflow-y: auto;
}
.fpm-add-btn {
  margin-top: auto;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* ============================================================
   FIX 22/08/2026 — Gruppo 2, primo test di esperienza utente
   ============================================================ */

/* Punto E — pulsante sandwich nascosto nei contesti dove non serve:
   checkout BTS, checkout Selfnamed, carrello Selfnamed (pagina dedicata),
   carrello BTS (drawer, riconosciuto dalla classe sul body aggiunta/rimossa
   in main-v2.js quando il pannello si apre/chiude — vedi lì per il motivo). */
body.page-template-template-checkout-php .hamburger,
body.page-template-template-checkout-selfnamed-php .hamburger,
body.feluna-sn-cart-page .hamburger,
body.feluna-cart-open .hamburger {
  display: none !important;
}

/* FIX 22/08/2026: stesso trattamento per il badge carrello flottante BTS
   (#bts-cart-badge, footer.php) — segnalato da Dario dopo verifica visiva:
   compariva ancora in checkout e mentre il carrello stesso era aperto,
   ridondante in entrambi i casi (il contenuto del carrello è già visibile
   lì). Il suo "display" è impostato via JS con stile inline (main-v2.js,
   updateCartUI) — serve !important per avere la precedenza, un normale
   "display:none" da foglio di stile non basterebbe. Non serve toccare il
   lato Selfnamed: il suo badge equivalente (#fbc-cart-badge) è già
   limitato al solo catalogo/scheda prodotto nel markup, non compare mai
   in checkout/carrello. */
body.page-template-template-checkout-php #bts-cart-badge,
body.feluna-cart-open #bts-cart-badge {
  display: none !important;
}

/* Punto H — pulsante "torna alla ricerca", creato da main-v2.js.
   Nascosto di default, mostrato via classe "visible" aggiunta in JS
   dopo una soglia di scroll. Stesso stile visivo del resto del sito
   (colore teal principale, forma pillola). */
.feluna-back-to-search {
  position: fixed;
  /* FIX 22/08/2026: spostato da destra a sinistra — il lato destro è
     occupato dal badge carrello flottante BTS (#bts-cart-badge,
     footer.php), che si sovrapponeva a questo pulsante quando entrambi
     erano visibili contemporaneamente (carrello con articoli + scroll
     oltre la soglia). Segnalato da Dario dopo verifica visiva. */
  left: 20px;
  bottom: 24px;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-teal, #01acc2);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.feluna-back-to-search.visible {
  opacity: 1;
  pointer-events: all;
  transform: none;
}
.feluna-back-to-search:hover {
  filter: brightness(0.94);
}
@media (max-width: 480px) {
  .feluna-back-to-search {
    left: 14px;
    bottom: 18px;
    width: 44px;
    height: 44px;
  }
}