/** Shopify CDN: Minification failed

Line 699:0 Unexpected "}"

**/
/* Place any CSS overrides in this file. */




/* --- Custom Footer Refinements (Wools Boutique Uomo) --- */

/* Newsletter: testo sopra, form a capo sotto */
.newsletter-footer--wrapper {
  text-align: center;
}
.newsletter-footer--wrapper .richtext-block {
  margin-bottom: 15px; /* spazio tra descrizione e form */
}
.newsletter-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* spazio tra input e bottone */
}

/* Icone metodi di pagamento */
.payment-icons .payment-icon {
  width: 42px;   /* riduzione dimensione (circa -25%) */
  height: auto;
  filter: grayscale(100%); /* bianco e nero */
  opacity: 0.9;  /* leggera trasparenza */
}

/* Copyright */
.bottom--footer---copyright {
  font-size: 13px;   /* più piccolo */
  font-weight: 400;  /* meno marcato */
  text-align: center;
}

/* Newsletter custom – rifiniture finali */

/* Bottone trasparente proporzionato */
.newsletter-custom__group .footer-email-submit {
  background: transparent !important;
  border: 1px solid #000;
  color: #000;
  height: 44px;
  padding: 0 18px;
  line-height: 44px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* Campo input con bordo nero */
.newsletter-custom__group .footer-email-input {
  border: 1px solid #000 !important;
  color: #000;
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
  box-sizing: border-box;
}

/* Rimuove margini indesiderati in fondo */
.newsletter-custom {
  margin-bottom: 0 !important;
  padding-bottom: 30 !important;
}



/* Footer social icons size */
.footer-main .social-media-footer svg,
.footer-main .social-media-footer img {
  width: 38px;   /* dimensione aumentata (default era ~20–24px) */
  height: 38px;
}

@media (max-width: 768px) {
  .footer-main .social-media-footer svg,
  .footer-main .social-media-footer img {
    width: 38px;   /* leggermente ridotte per mobile */
    height: 38px;
  }
}


/* ===== Footer divider (desktop + mobile) ===== */

/* Desktop / default */
.newsletter-custom {
  padding-top: 0 !important;
  position: relative;
}

.newsletter-custom::before {
  content: "";
  display: block;
  height: 8px;                 /* spessore desktop */
  background: #2c2c2c;
  width: 100vw;                /* full-bleed */
  margin-left: calc(50% - 50vw);
  margin-bottom: 20px;         /* spazio sotto la linea */
}

/* Mobile */
@media (max-width: 768px) {
  .newsletter-custom::before {
    height: 6px;               /* più sottile su mobile */
    margin-bottom: 16px;       /* leggermente meno spazio */
  }
}




/* ——— Fix righina bianca: togli qualunque bordo di default ——— */
.site-header {
  border-bottom: 0 !important;
}

/* ——— Linea inferiore (8px), sempre full bleed ——— */
/* NEUTRAL: sempre visibile */
.site-header.header--neutral::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100vw;           /* Full viewport width */
  height: 8px;
  background: #2c2c2c;
  pointer-events: none;
}

/* TRANSPARENT: visibile solo quando overlay attivo (su scroll) */
.site-header.overlay-header::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100vw;
  height: 8px;
  background: #2c2c2c;
  pointer-events: none;
}

/* ——— Linea centrale (2px) ——— */
/* elemento già inserito in header.liquid: <div class="main-nav-divider" ...> */
/* Full bleed con “break-out” dai padding */
.site-header .main-nav-divider {
  display: none;          /* default: nascosta, la attiviamo sotto */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;           /* full viewport width */
  height: 1px;
  background: #2c2c2c;
  pointer-events: none;
}

/* NEUTRAL: sempre visibile */
.site-header.header--neutral .main-nav-divider {
  display: block;
}

/* TRANSPARENT: visibile solo in overlay (su scroll) */
.site-header.overlay-header .main-nav-divider {
  display: block;
}

/* ——— Mantieni bg grigio quando l’header trasparente diventa sticky/overlay ——— */
.header-section.sticky-header .site-header.overlay-header {
  background-color: rgba(243, 243, 243, var(--header-transparency, 0.95));
}

/* (opzionale) se vuoi forzare il valore senza variabile: */
/* .header-section.sticky-header .site-header.overlay-header { background-color: rgba(243,243,243,0.95); } */



/* Home + header neutral: azzera gli spazi tra prima e seconda sezione */
.template-index #MainContent .shopify-section:first-of-type { margin-bottom: 0 !important; }
.template-index #MainContent .shopify-section:first-of-type + .shopify-section { margin-top: 0 !important; }




/* === Locale & Currency: mantieni la capitalizzazione originale sul valore selezionato === */

/* Desktop (bottone di selezione) */
.site-header .localization-form .disclosure__button,
.site-header .localization-form .disclosure__button .disclosure__label,
.site-header .localization-form .disclosure__button .disclosure__value {
  text-transform: none !important;
  letter-spacing: normal !important; /* spesso i temi aumentano il tracking in uppercase */
}

/* Mobile (drawer) */
.mobile-nav .locale--mobile .disclosure__button,
.mobile-nav .locale--mobile .disclosure__button .disclosure__label,
.mobile-nav .locale--mobile .disclosure__button .disclosure__value {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* In caso il tema usi <select> per questi controlli in qualche breakpoint */
.site-header .localization-form select,
.mobile-nav .locale--mobile select {
  text-transform: none !important;
  letter-spacing: normal !important;
}



/* Forza minuscolo/normal-case SOLO nel widget di localizzazione (lingua + valuta) */
.header-section .localization-form,
.header-section .localization-form * {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Mobile (drawer) */
.mobile-nav .locale--mobile .localization-form,
.mobile-nav .locale--mobile .localization-form * {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Copertura extra per classi usate da Envy */
.header-section .localization-form .disclosure__button,
.header-section .localization-form .disclosure__current,
.header-section .localization-form .disclosure__text,
.header-section .localization-form [data-disclosure-locale] .disclosure__button,
.header-section .localization-form [data-disclosure-locale] .disclosure__current,
.header-section .localization-form [data-disclosure-locale] .disclosure__text {
  text-transform: none !important;
  letter-spacing: normal !important;
}




/* —— Forza Maiuscolo/Minuscolo corretto SOLO sul selettore Lingua/Paese —— */

/* Desktop header */
.site-header .localization-form,
.site-header .localization-form * {
  --nav-text-transform: none; /* alcuni temi usano una var per uppercasing */
}

.site-header .localization-form button,
.site-header .localization-form .disclosure__toggle,
.site-header .localization-form .disclosure__button,
.site-header .localization-form [data-disclosure-locale],
.site-header .localization-form [data-disclosure-locale] *,
.site-header .localization-form [data-disclosure-country],
.site-header .localization-form [data-disclosure-country] *,
.site-header .localization-form .uppercase {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Testo dentro al toggle (spesso è in uno span) */
.site-header .localization-form button > span,
.site-header .localization-form .disclosure__toggle > span,
.site-header .localization-form .disclosure__button > span {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Mobile drawer */
.mobile-nav .locale--mobile .localization-form,
.mobile-nav .locale--mobile .localization-form * {
  --nav-text-transform: none;
}

.mobile-nav .locale--mobile .localization-form button,
.mobile-nav .locale--mobile .localization-form .disclosure__toggle,
.mobile-nav .locale--mobile .localization-form .disclosure__button,
.mobile-nav .locale--mobile .localization-form [data-disclosure-locale],
.mobile-nav .locale--mobile .localization-form [data-disclosure-locale] *,
.mobile-nav .locale--mobile .localization-form [data-disclosure-country],
.mobile-nav .locale--mobile .localization-form [data-disclosure-country] *,
.mobile-nav .locale--mobile .localization-form .uppercase {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* In alcuni layout le voci sono rese come <a> dentro il bottone/toggle */
.site-header .localization-form a,
.mobile-nav .locale--mobile .localization-form a {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/************************************
/* MENU LINGUA PAESE ****************
/************************************

/* 1) Neutralize the uppercase coming from the theme variable */
.site-header localization-form,
.mobile-nav .locale--mobile localization-form {
  --header-font-case: none !important;
}

/* 2) Make Language & Country/Currency look identical (desktop + mobile) */
.site-header localization-form .disclosure_button,
.mobile-nav .locale--mobile localization-form .disclosure_button {
  font-family: var(--navigation-font-stack) !important;
  font-weight: var(--navigation-font-weight) !important;
  font-style: var(--navigation-font-style) !important;
  letter-spacing: var(--navigation-font-letter-spacing) !important;
  font-size: var(--base-font-size) !important;  /* stessa size delle voci */
  line-height: 1.6 !important;
  text-transform: none !important;
}

/* 3) Assicurati che anche il testo interno non venga forzato in maiuscolo */
.site-header localization-form .disclosure_button > span,
.mobile-nav .locale--mobile localization-form .disclosure_button > span {
  text-transform: none !important;
}

/* —— Uniforma Lingua e Paese/Valuta (desktop + mobile) ———————————— */
.site-header localization-form .disclosure_button,
.site-header .localization-form .disclosure_button,
.mobile-nav .locale--mobile localization-form .disclosure_button,
.mobile-nav .locale--mobile .localization-form .disclosure_button {
  /* stessa famiglia del menu di navigazione */
  font-family: var(--navigation-font-stack) !important;
  font-weight: var(--navigation-font-weight) !important;
  font-style: var(--navigation-font-style) !important;

  /* allinea dimensione e spaziatura */
  font-size: var(--base-font-size) !important;   /* es. 15px */
  line-height: 1.6 !important;
  letter-spacing: 0px !important;

  /* niente maiuscolo forzato */
  text-transform: none !important;

  /* stessa imbottitura per entrambi */
  padding: 10px !important;
}

/* assicura che anche lo <span> interno non venga trasformato */
.site-header localization-form .disclosure_button > span,
.site-header .localization-form .disclosure_button > span,
.mobile-nav .locale--mobile localization-form .disclosure_button > span,
.mobile-nav .locale--mobile .localization-form .disclosure_button > span {
  text-transform: none !important;
  letter-spacing: 0px !important;
}


/* ——— Lingua: allinea a Paese/Valuta e disattiva maiuscolo ——— */
.site-header localization-form [aria-controls="LanguageList"] {
  /* spegne il maiuscolo basato su variabile del tema */
  --header-font-case: none !important;

  /* tipografia identica al nav/Paese */
  font-family: var(--navigation-font-stack) !important;
  font-weight: var(--navigation-font-weight) !important;
  font-style: var(--navigation-font-style) !important;
  letter-spacing: var(--navigation-font-letter-spacing, 0px) !important;

  font-size: var(--base-font-size) !important; /* es. 15px */
  line-height: 1.6 !important;
  text-transform: none !important;
  padding: 10px !important;
}

/* assicura che anche lo span interno non venga trasformato */
.site-header localization-form [aria-controls="LanguageList"] > span {
  text-transform: none !important;
  letter-spacing: var(--navigation-font-letter-spacing, 0px) !important;
  font-size: inherit !important;
}


/************************************
/* END MENU LINGUA PAESE ************
/************************************



/* Uniforma lo spazio superiore (Riga 1) a quello inferiore (Riga 3) */
.site-header {
  padding-top: 8px !important;  /* riduci rispetto al valore attuale (es. 20px o più) */
}

/* Per sicurezza, agisci anche sul wrapper interno */
.site-header__wrapper {
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/************************************
/* START MENU UPPERCASE ************
/************************************

/* === Rimuovi MAIUSCOLO dai menu header (desktop) === */
.header-section .site-header .site-nav,
.header-section .site-header .site-nav * {
  text-transform: none !important;     /* stop uppercase */
  letter-spacing: normal !important;    /* tracking regolare */
}

/* Link principali e voci dei dropdown/mega menu */
.header-section .site-header .site-nav a,
.header-section .site-header .nav-link-animated,
.header-section .site-header .site-header__nav a {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Alcuni temi usano una var custom: neutralizziamola */
.header-section {
  --nav-text-transform: none !important;
}

/* (Facoltativo) anche per il menu mobile */
.mobile-nav .mobile-nav__link {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/************************************
/* END MENU UPPERCASE ************
/************************************


/************************************
/* START HEADER MOBILE ************
/************************************

/************************************
 * MOBILE HEADER – RIGA 1 (Logo) + RIGA 1.2 (Icone)
 ************************************/


@media (max-width: 989px) {
  /* Variabili regolabili */
  :root {
    --mobile-logo-width: 230px;          /* ← larghezza logo (regolabile) */
    --mobile-logo-row-height: 48px;      /* ← altezza riga 1 (regolabile) */
    --mobile-icons-row-height: 48px;     /* ← altezza riga 1.2 (regolabile) */
    --mobile-icons-edge-padding: 12px;   /* ← padding ai lati esterni (sx/dx) */
    --mobile-icon-size: 26px;            /* ← dimensione icone */
  }

  /* Stack a righe */
  .mobile-grid--stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* RIGA 1: logo */
  .mobile-row--logo {
    display: flex;
    justify-content: center;    /* centra orizzontalmente */
    align-content: center;        /* centra verticalmente */
    height: var(--mobile-logo-row-height);
    padding-top: 20;
  }

  /* Forza dimensione logo su mobile (override del tema) */
  .mobile-row--logo .logo_image {
    width: var(--mobile-logo-width) !important;
    max-width: none !important;
    height: auto !important;
    display: block;
  }

  /* RIGA 1.2: icone a 4 colonne */
  .mobile-row--icons {
    padding: 0;
  }

  .mobile-icons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 colonne */
    align-items: center;
    height: var(--mobile-icons-row-height);
  }

  .mobile-icons-grid .cell {
    display: flex;
    align-items: center;
    justify-content: center; /* default per le due celle centrali */
  }

  /* Margini simmetrici a sinistra/destra */
  .mobile-icons-grid .cell--left  { justify-content: flex-start; padding-left:  var(--mobile-icons-edge-padding); }
  .mobile-icons-grid .cell--right { justify-content: flex-end;   padding-right: var(--mobile-icons-edge-padding); }

  /* Elimina eventuali sfondi/grigi sui bottoni/icone */
  .mobile-icons-grid button,
  .mobile-icons-grid a {
    background: none !important;
    border: none;
    padding: 0;
  }

  /* Dimensione icone coerente */
  .mobile-icons-grid .standalone-icon--wrapper svg,
  .mobile-icons-grid .icon-fallback-text svg {
    width: var(--mobile-icon-size) !important;
    height: var(--mobile-icon-size) !important;
  }
}


/****** END RIGA 2 ICONE *********/
/*********************************/

/* --- RIGA 2: linea sottile 1px --- */
.mobile-divider-1px {
  height: 1px;
  background: #2c2c2c;   /* stesso colore linea desktop */
  width: 100vw;          /* full bleed */
  margin-left: 50%;
  transform: translateX(-50%);
}

/* --- RIGA 3: quick nav 3 colonne --- */
.mobile-quick-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 10px 6px;
  background: #f3f3f3;     /* sfondo uniforme */
  border-top: none;        /* evita doppia linea sopra */
}

/* Link quick nav */
.mobile-quick-nav a {
  text-align: center;
  text-decoration: none;
  color: var(--nav-text-color);
  font-family: var(--navigation-font-stack);
  font-weight: var(--navigation-font-weight);
  font-style: var(--navigation-font-style);
  font-size: var(--base-font-size);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: normal;
}

/* Pannelli dropdown dei 3 menu */
.mobile-quick-dropdowns,
.mobile-quick-panel {
  background: #f3f3f3;     /* stesso sfondo del nav */
}

.mobile-quick-panel {
  width: 100vw;              /* larghezza piena */
  margin-left: 50%;
  transform: translateX(-50%);
  background: #f3f3f3;
  padding: 10px 12px;
  border-top: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
}

.mobile-quick-panel {
  display: none;
  border-top: 1px solid #2c2c2c;
  border-bottom: 1px solid #2c2c2c;
  padding: 10px 12px;
}
.mobile-quick-panel.active { display: block; }
.mobile-quick-panel .panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.mobile-quick-panel a {
  color: var(--nav-text-color);
  text-decoration: none;
  font-size: var(--base-font-size);
  line-height: 1.6;
  text-transform: none;
  letter-spacing: normal;
}


 /* RIGA 4: linea bold 8px */
  .mobile-divider-8px {
    height: 8px;
    background: #2c2c2c;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
  }


/* MENU TENDINE PER LINK MOBILE ****************/
.mobile-quick-panel {
  position: relative;
}
.mobile-quick-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--nav-text-color);
}


/************************************
/* END HEADER MOBILE ****************
/************************************


/* ===== Footer mobile: fisarmoniche Shop/Information ===== */



/* =========================
   Footer accordion — MOBILE
   ========================= */
@media (max-width: 989px) {
  .footer-acc__btn {
    width: 100%;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: 0;
    padding: 12px 0;
    cursor: pointer;
    color: var(--nav-text-color);
    font-family: var(--navigation-font-stack);
    font-weight: var(--navigation-font-weight);
    font-style: var(--navigation-font-style);
    text-align: left;
    border-top: 1px solid #2c2c2c;
  }
  .footer-acc__btn .footer-acc__icon {
    position: relative;
    width: 24px; height: 24px; display: inline-block;
  }
  .footer-acc__btn .footer-acc__icon::before,
  .footer-acc__btn .footer-acc__icon::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 14px; height: 2px; background: #2c2c2c;
    transform: translate(-50%, -50%);
  }
  .footer-acc__btn .footer-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
  .footer-acc__btn[aria-expanded="true"] .footer-acc__icon::after { display: none; }

  .footer-acc__panel {
    overflow: hidden; transition: max-height 0.3s ease;
    max-height: 2000px; background: #f3f3f3;
  }
  .footer-acc__panel.is-collapsed { max-height: 0; }

  .footer-acc__panel .footer-content { padding: 8px 0 12px; }
}

/* =========================
   Footer accordion — DESKTOP
   (togli “effetto bottone”)
   ========================= */

  /* ===== Footer — Desktop: titoli fisarmoniche come i titoli standard ===== */

  .footer-acc__btn .footer-acc__icon { display: none !important; }

  /* il testo del titolo deve sembrare un .footer-header */
  .footer-acc__btn .footer-acc__label {
    display: block;
    /* replica stile del titolo footer */
    font-size: var(--footer-heading-font-size, 16px);
    font-family: var(--navigation-font-stack);
    font-weight: var(--navigation-font-weight);
    font-style: var(--navigation-font-style);
    letter-spacing: var(--navigation-font-letter-spacing);
    text-transform: none;
    color: inherit;
    padding: 0 0 10px 0; /* come gli altri titoli */
    line-height: 1.3;
  }
}

/* Mobile: hit-area più comoda e tap senza lag */
@media (max-width: 989px) {
  .footer-acc__btn {
    padding: 16px 0;                 /* ↑ più alto di prima */
    touch-action: manipulation;      /* riduce delay su mobile */
    -webkit-tap-highlight-color: transparent;
  }
  /* bordo superiore “pulito”: se la prima fisarmonica non deve avere la riga, togli questa regola o metti :not(:first-child) */
  .footer-acc__btn { border-top: 1px solid #2c2c2c; }
}



/* Riga divisoria sotto la newsletter: sicura su desktop e mobile */
.site-footer .newsletter-footer {
  border-bottom: 1px solid #2c2c2c !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}




/* =========================
   Ordine blocchi — MOBILE:
   Social subito sotto Newsletter
   ========================= */
@media (max-width: 989px) {
  .footer-main--inner { display: flex; flex-direction: column; gap: 0; }
  .newsletter-footer { order: 0; }
  .social-media-footer { order: 1; }            /* subito sotto newsletter */
  .links-footer, .content-footer, .navigation3-block,
  .image-footer, .follow-on-shop { order: 2; }
}

/* =========================
   Icone pagamenti — MOBILE: -20%
   ========================= */
@media (max-width: 989px) {
  .site-footer .payment-icons { gap: 6px; }
  .site-footer .payment-icons svg,
  .site-footer .payment-icons img {
    transform: scale(0.9);
    transform-origin: center;
  }
}


/* =========================
   1) DESKTOP: titoli identici a “Social”
   (niente rettangolo, stesso font/stile)
   ========================= */

   

/* =========================
   DESKTOP: titoli identici a "Social"
   (niente rettangolo, stesso font/stile)
   ========================= */
@media (min-width: 990px) {
  /* vale sia per blocchi menu (.links-footer) che text/address (.content-footer) */
  .links-footer .footer-acc__btn,
  .content-footer .footer-acc__btn{
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: block !important;
    cursor: default !important;
  }
  .links-footer .footer-acc__btn .footer-acc__icon,
  .content-footer .footer-acc__btn .footer-acc__icon{ display:none !important; }

  /* Etichetta = stile dei titoli footer standard (.footer-header) */
  .links-footer .footer-acc__btn .footer-acc__label,
  .content-footer .footer-acc__btn .footer-acc__label{
    font-size: var(--footer-heading-font-size, 16px) !important;
    font-family: var(--header-font-stack) !important;     /* come i titoli */
    font-weight: var(--font-weight-header-bold, 700) !important;
    font-style: normal !important;
    letter-spacing: var(--heading-spacing, 0.01em) !important;
    text-transform: none !important;
    color: inherit !important;
    padding: 0 0 10px 0 !important;
    line-height: 1.3 !important;
    display:block !important;
    background: transparent !important;
  }
}

/* =========================
   Riga divisoria sotto Newsletter (desktop+mobile)
   e fallback se il border è sovrascritto
   ========================= */
.site-footer .newsletter-footer{
  border-bottom: 1px solid #2c2c2c !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}
/* Se qualcuno annulla il border, aggiungo un “clone” sopra il blocco successivo */
.site-footer .newsletter-footer + *{
  position: relative;
}
.site-footer .newsletter-footer + *::before{
  content:"";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: #2c2c2c;
}




/************ FOOTER – MOBILE & DESKTOP (versione pulita) ************/

/* ——— Divider sottile sotto la newsletter (desktop + mobile) ——— */
.site-footer .newsletter-footer {
  position: relative;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
}
.site-footer .newsletter-footer::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: #2c2c2c;
}

/* ——— MOBILE: ordine blocchi (Social subito sotto Newsletter) ——— */
@media (max-width: 989px) {
  .footer-main--inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .newsletter-footer { order: 0; }
  .social-media-footer { order: 1; }
  .links-footer, .content-footer, .navigation3-block, .image-footer, .follow-on-shop { order: 2; }
}

/* ——— MOBILE: riga Social = titolo + icone sulla stessa riga ——— */
@media (max-width: 989px) {
  .social-media-footer {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 !important;
    border-top: 1px solid #2c2c2c; /* separatore tra newsletter e social */
  }
  .social-media-footer .footer-header {
    /* stesso font dei titoli (già lo è) */
    margin: 0 !important;
  }
  /* wrapper icone social generato da 'social-icons' */
  .social-media-footer #sm-icons,
  .social-media-footer .mobile-nav__social-icons,
  .social-media-footer .footer-content #sm-icons {
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
}

/* ——— MOBILE: accordion (Shop / Information / Address Store) ——— */
@media (max-width: 989px) {
  /* bottone header accordion */
  .footer-acc__btn {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    display: flex;                  /* IMPORTANTISSIMO per evitare testo spezzato */
    align-items: center;
    gap: 8px;
    padding: 14px 0;
    cursor: pointer;
    color: var(--nav-text-color);
    font-family: var(--navigation-font-stack);
    font-weight: var(--navigation-font-weight);
    font-style: var(--navigation-font-style);
    letter-spacing: var(--navigation-font-letter-spacing);
    text-transform: none;
    text-align: left;
    border-top: 1px solid #2c2c2c;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  /* icona + a sinistra */
  .footer-acc__icon {
    display: inline-block !important;
    position: relative;
    width: 20px; height: 20px;
    flex: 0 0 20px;
  }
  .footer-acc__icon::before,
  .footer-acc__icon::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 14px; height: 2px; background: #2c2c2c;
    transform: translate(-50%, -50%);
  }
  .footer-acc__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
  .footer-acc__btn[aria-expanded="true"] .footer-acc__icon::after { display: none; } /* diventa "–" */

  /* label (testo) non spezzato a lettere */
  .footer-acc__label {
    flex: 1 1 auto;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-transform: none !important;
    letter-spacing: var(--navigation-font-letter-spacing) !important;
  }

  /* pannello */
  .footer-acc__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    background: #f3f3f3;
  }
  .footer-acc__panel:not(.is-collapsed) { max-height: 2000px; }

  .footer-acc__panel .footer-content { padding: 8px 0 12px; }
  .footer-acc__panel .footer-content a { display: block; padding: 4px 0; }
}

/* ——— DESKTOP: titoli delle fisarmoniche identici a “Social” (niente aspetto bottone) ——— */
@media (min-width: 990px) {
  .links-footer .footer-acc__btn,
  .content-footer .footer-acc__btn {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: block !important;
    cursor: default !important;
  }
  .links-footer .footer-acc__btn .footer-acc__icon,
  .content-footer .footer-acc__btn .footer-acc__icon {
    display: none !important;
  }
  .links-footer .footer-acc__btn .footer-acc__label,
  .content-footer .footer-acc__btn .footer-acc__label {
    font-size: var(--footer-heading-font-size) !important;
    font-family: var(--header-font-stack) !important;
    font-weight: var(--header-font-weight) !important;
    font-style: var(--header-font-style) !important;
    letter-spacing: var(--heading-spacing) !important;
    text-transform: var(--heading-font-case) !important;
    line-height: var(--heading-line-height) !important;
    color: var(--color-scheme-text-color) !important;
    margin: 0 0 .5em !important;
    padding: 0 !important;
  }
}

/* ——— (Opz.) pagamenti mobile più compatti ——— */
@media (max-width: 989px) {
  .site-footer .payment-icons { gap: 6px; }
  .site-footer .payment-icons svg,
  .site-footer .payment-icons img {
    transform: scale(0.9);
    transform-origin: center;
  }
}





/* =========================
   MOBILE – rifiniture footer
   ========================= */
@media (max-width: 989px) {
  /* 1) Accordion: righe compatte e “+” allineato verticalmente */
  .footer-acc__btn {
    position: relative;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    /* altezza/spacing simile alla riga menu mobile */
    padding: 8px 0 8px 28px !important;   /* sinistra = spazio per il “+” */
    min-height: 36px;                     /* compatta ma cliccabile */

    /* font come i link del menu mobile */
    font-family: var(--navigation-font-stack) !important;
    font-weight: var(--navigation-font-weight) !important;
    font-style: var(--navigation-font-style) !important;
    letter-spacing: var(--navigation-font-letter-spacing) !important;
    text-transform: none !important;
    font-size: var(--base-font-size) !important;
    line-height: 1.6 !important;

    border-top: 1px solid #2c2c2c;
    background: transparent !important;
  }
  /* prima voce: niente bordo superiore doppio (se necessario) */
  .footer-acc__btn:first-of-type { border-top: 1px solid #2c2c2c; }

  /* “+ / –” disegnato sul bottone, centrato verticalmente */
  .footer-acc__btn::before,
  .footer-acc__btn::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 12px;
    height: 2px;
    background: #2c2c2c;
    transform: translateY(-50%);
  }
  .footer-acc__btn::after { transform: translateY(-50%) rotate(90deg); }
  .footer-acc__btn[aria-expanded="true"]::after { opacity: 0; }

  /* pannelli: compatti */
  .footer-acc__panel { padding: 0 !important; background: #f3f3f3; }
  .footer-acc__panel .footer-content { padding: 6px 0 10px !important; }
  .footer-acc__panel .footer-content a { padding: 3px 0 !important; }

  /* 2) “Social”: solo icone centrate, niente titolo né linea sopra */
  .social-media-footer {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 10px 0 !important;

    border-top: none !important;                 /* togli eventuale linea */
    text-align: center !important;
  }
  .social-media-footer .footer-header { display: none !important; }  /* nasconde "Social" */

  /* wrapper delle icone (compatibile con il partial del tema) */
  .social-media-footer #sm-icons,
  .social-media-footer .mobile-nav__social-icons,
  .social-media-footer .footer-content #sm-icons {
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
  }
}

/* === Mobile footer: titoli fisarmonica come header menu === */
@media (max-width: 989px) {
  .footer-acc__btn .footer-acc__label {
    font-size: var(--base-font-size) !important;   /* uguale al menu header (≈15px) */
    line-height: 1.6 !important;
    font-family: var(--navigation-font-stack) !important;
    font-weight: var(--navigation-font-weight) !important;
    font-style: var(--navigation-font-style) !important;
    letter-spacing: var(--navigation-font-letter-spacing) !important;
    text-transform: none !important;
  }
}