/* ===========================================================================
   Sito Il Mondo delle Erbe — component CSS + adattamenti responsive.

   Le classi .ime-* sono copiate 1:1 dai componenti React del design system
   (components/<Nome>.jsx, dove vivono come stringa CSS iniettata a runtime):
   Button, IconButton, Badge, Card, Price, Rating, Tag, Input, LegalNote.

   ATTENZIONE: non scrivere mai la sequenza asterisco+slash dentro questo
   commento (nemmeno in un glob tipo "doppio-asterisco/"): chiude il commento
   in anticipo e il parser CSS si mangia la prima regola del file.
   Il sito è statico, quindi le serviamo da qui invece che da _ds_bundle.js.
   Tutto il resto arriva dai token (design-system/tokens/*.css, linkati uno
   per uno dalle pagine) e dal kit storefront.
   =========================================================================== */

/* --- Button --------------------------------------------------------------- */
.ime-btn {
  --_bg: var(--action-primary-bg);
  --_bg-h: var(--action-primary-bg-hover);
  --_bg-a: var(--action-primary-bg-active);
  --_fg: var(--action-primary-fg);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-sans); font-weight: var(--weight-semibold);
  letter-spacing: 0.005em; line-height: 1; white-space: nowrap;
  border: 1px solid var(--_bd); border-radius: var(--radius-md);
  background: var(--_bg); color: var(--_fg); cursor: pointer;
  text-decoration: none; -webkit-appearance: none; appearance: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.ime-btn:hover { background: var(--_bg-h); }
.ime-btn:active { background: var(--_bg-a); transform: translateY(1px); }
.ime-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ime-btn[disabled], .ime-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Le icone nei bottoni scalano col testo: 1.15em le tiene otticamente
   allineate alla maiuscola a tutte e tre le taglie (sm/md/lg). Senza
   questa regola cadrebbero sul default generico di .ico (1em). */
.ime-btn svg { width: 1.15em; height: 1.15em; flex: none; }

.ime-btn--sm { height: 36px; padding: 0 var(--space-4); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.ime-btn--md { height: 44px; padding: 0 var(--space-6); font-size: var(--text-base); }
.ime-btn--lg { height: 54px; padding: 0 var(--space-7); font-size: var(--text-lg); }
.ime-btn--full { width: 100%; }

.ime-btn--secondary {
  --_bg: var(--action-secondary-bg); --_bg-h: var(--action-secondary-bg-hover);
  --_bg-a: var(--action-secondary-bg-active); --_fg: var(--action-secondary-fg);
}
.ime-btn--ghost { --_bg: transparent; --_bg-h: var(--bosco-50); --_bg-a: var(--bosco-100); --_fg: var(--bosco-700); }
.ime-btn--outline {
  --_bg: transparent; --_bg-h: var(--bosco-50); --_bg-a: var(--bosco-100);
  --_fg: var(--bosco-700); --_bd: var(--border-strong);
}
.ime-btn--accent {
  --_bg: var(--action-accent-bg); --_bg-h: var(--action-accent-bg-hover);
  /* l'active resta sull'hover: --miele-deep con il testo scuro scende a 2.93:1.
     Il feedback alla pressione lo dà il translateY di .ime-btn:active. */
  --_bg-a: var(--action-accent-bg-hover); --_fg: var(--action-accent-fg);
}
/* ghost su fondo verde (hero) */
.ime-btn--on-dark { --_fg: var(--burro); --_bg-h: rgba(241,243,228,0.12); --_bg-a: rgba(241,243,228,0.2); }

/* --- IconButton ----------------------------------------------------------- */
.ime-iconbtn {
  --_bg: transparent; --_bg-h: var(--bosco-50); --_bg-a: var(--bosco-100);
  --_fg: var(--bosco-700); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--_bd); background: var(--_bg); color: var(--_fg);
  border-radius: var(--radius-md); cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.ime-iconbtn:hover { background: var(--_bg-h); }
.ime-iconbtn:active { background: var(--_bg-a); }
.ime-iconbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.ime-iconbtn svg { width: 1.25em; height: 1.25em; display: block; }
.ime-iconbtn--sm { width: 36px; height: 36px; font-size: 15px; border-radius: var(--radius-sm); }
.ime-iconbtn--md { width: 44px; height: 44px; font-size: 18px; }
.ime-iconbtn--lg { width: 52px; height: 52px; font-size: 21px; }
.ime-iconbtn--solid { --_bg: var(--bosco-700); --_bg-h: var(--bosco-800); --_bg-a: var(--bosco-900); --_fg: var(--action-primary-fg); }
.ime-iconbtn--soft  { --_bg: var(--salvia-100); --_bg-h: var(--salvia-200); --_bg-a: var(--salvia-300); --_fg: var(--bosco-800); }
.ime-iconbtn--outline { --_bd: var(--border-strong); --_bg-h: var(--bosco-50); }
.ime-iconbtn--on-dark { --_fg: var(--burro); --_bd: var(--border-inverse); --_bg-h: rgba(241,243,228,0.12); }

/* --- Badge ---------------------------------------------------------------- */
.ime-badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans);
  font-weight: var(--weight-semibold); font-size: var(--text-xs); line-height: 1;
  padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap;
  border: 1px solid transparent;
}
.ime-badge--md { font-size: var(--text-sm); padding: 5px 11px; }
.ime-badge svg { width: 13px; height: 13px; }
.ime-badge--neutral { background: var(--stone-100); color: var(--stone-700); }
.ime-badge--sage    { background: var(--salvia-100); color: var(--salvia-900); }
.ime-badge--green   { background: var(--bosco-100); color: var(--bosco-800); }
.ime-badge--honey   { background: var(--miele-soft); color: var(--miele-deep); }
.ime-badge--berry   { background: var(--mora-soft); color: var(--mora-deep); }
.ime-badge--danger  { background: var(--danger-soft); color: var(--danger-strong); }
.ime-badge--solid.ime-badge--sage   { background: var(--salvia-500); color: var(--bosco-900); }
.ime-badge--solid.ime-badge--green  { background: var(--bosco-700); color: var(--burro); }
.ime-badge--solid.ime-badge--honey  { background: var(--miele-deep); color: #fff; }
.ime-badge--solid.ime-badge--berry  { background: var(--mora); color: #fff; }
.ime-badge--solid.ime-badge--danger { background: var(--danger); color: #fff; }

/* --- Card ----------------------------------------------------------------- */
.ime-card {
  background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); color: var(--text-body);
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard);
}
.ime-card--p-sm { padding: var(--space-4); }
.ime-card--p-md { padding: var(--space-6); }
.ime-card--p-lg { padding: var(--space-8); }
.ime-card--elevated { border-color: transparent; box-shadow: var(--shadow-card); }
.ime-card--filled { background: var(--salvia-100); border-color: var(--salvia-200); }
.ime-card--interactive { cursor: pointer; }
.ime-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-default); }
.ime-card--interactive:focus-visible { outline: none; box-shadow: var(--ring); }
.ime-card--interactive.ime-card--elevated:hover { box-shadow: var(--shadow-xl); }

/* --- Price ---------------------------------------------------------------- */
.ime-price { display: inline-flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-condensed); color: var(--bosco-700); line-height: 1; }
.ime-price__cur { font-weight: 700; opacity: 0.85; }
.ime-price__val { font-weight: 700; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.ime-price__was { font-family: var(--font-sans); font-weight: var(--weight-medium); color: var(--text-subtle); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ime-price__unit { font-family: var(--font-sans); font-weight: var(--weight-regular); color: var(--text-muted); }
.ime-price--sm { font-size: 1.25rem; }
.ime-price--sm .ime-price__cur { font-size: 0.85em; }
.ime-price--sm .ime-price__was { font-size: 0.85rem; }
.ime-price--sm .ime-price__unit { font-size: 0.78rem; }
.ime-price--md { font-size: 1.875rem; }
.ime-price--md .ime-price__cur { font-size: 0.7em; }
.ime-price--md .ime-price__was { font-size: 1rem; }
.ime-price--md .ime-price__unit { font-size: 0.9rem; }
.ime-price--sale { color: var(--terracotta-deep); }

/* --- Tag ------------------------------------------------------------------ */
.ime-tag {
  display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans);
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1;
  padding: 7px 13px; border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--text-body);
  border: 1px solid var(--border-default); cursor: default;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.ime-tag svg { width: 14px; height: 14px; }
.ime-tag--clickable { cursor: pointer; }
.ime-tag--clickable:hover { border-color: var(--bosco-400); background: var(--bosco-50); }
.ime-tag--clickable:focus-visible { outline: none; box-shadow: var(--ring); }
.ime-tag--selected { background: var(--bosco-700); border-color: var(--bosco-700); color: var(--burro); }
.ime-tag--selected:hover { background: var(--bosco-800); border-color: var(--bosco-800); }

/* --- Input ---------------------------------------------------------------- */
.ime-field { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); text-align: left; }
.ime-field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-strong); }
.ime-input {
  width: 100%; box-sizing: border-box; font-family: var(--font-sans); font-size: var(--text-base);
  color: var(--text-body); background: var(--surface-raised);
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 0 var(--space-4); height: 46px; line-height: 1.4;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
  -webkit-appearance: none; appearance: none;
}
.ime-input::placeholder { color: var(--text-subtle); }
.ime-input:hover { border-color: var(--border-strong); }
.ime-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--ring); }
.ime-field--error .ime-input { border-color: var(--danger); }
.ime-field--error .ime-input:focus { box-shadow: 0 0 0 3px var(--danger-soft); }
.ime-field__hint { font-size: var(--text-xs); color: var(--text-muted); }
.ime-field__hint--error { color: var(--danger-strong); }
.ime-field__hint--ok { color: var(--success-strong); font-weight: var(--weight-semibold); }

/* --- LegalNote ------------------------------------------------------------ */
.ime-legal { font-family: var(--font-sans); color: var(--text-subtle); font-size: 11px; line-height: var(--leading-normal); margin: 0; }
.ime-legal--lg { font-size: var(--text-sm); color: var(--text-muted); }
.ime-legal--boxed {
  display: flex; gap: var(--space-2); background: var(--surface-sunken);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4); color: var(--text-muted); font-size: var(--text-xs);
}
.ime-legal__mark { font-weight: var(--weight-semibold); letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.85em; color: var(--text-muted); }
.ime-legal__mark svg { width: 14px; height: 14px; display: block; flex: none; }

/* ===========================================================================
   Aggiunte del sito — il kit storefront è desktop-only, qui lo rendiamo
   responsive e aggiungiamo header mobile, skip-link e stati vuoti.
   =========================================================================== */

/* l'attributo hidden deve battere i display:flex/grid dei componenti */
[hidden] { display: none !important; }

/* Le ancore non devono finire sotto l'header sticky (76px desktop, 68px sotto i 900px) */
html { scroll-padding-top: 92px; }

/* Lo sprite delle icone sta nel markup ma non si vede: i simboli servono
   solo come sorgente per gli <use>. */
.sf-sprite { display: none; }
.ico { width: 1em; height: 1em; flex: none; }

.sf-skip {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  background: var(--bosco-700); color: var(--burro);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm);
  text-decoration: none; transition: top var(--duration-base) var(--ease-standard);
}
.sf-skip:focus { top: var(--space-4); color: var(--burro); }

.sf-navtoggle { display: none; margin-left: auto; }

.sf-cat { border: 1px solid var(--border-subtle); background: var(--surface-card); }
.sf-cat:focus-visible { outline: none; box-shadow: var(--ring); }

/* vetrina: le card non sono cliccabili, non c'è e-commerce */
.sf-prodcard { display: flex; flex-direction: column; }
.sf-prodcard .sf-prodcard__foot { margin-top: auto; }

.sf-empty--grid { grid-column: 1 / -1; }

.sf-cta-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-7);
  padding-top: var(--space-6); border-top: 1px solid var(--border-subtle);
}
.sf-cta-row p { margin: 0; max-width: 56ch; }

.sf-feature__title { font-size: var(--text-xl); margin: var(--space-4) 0 var(--space-2); }
.sf-feature__text { margin: 0; color: var(--text-body); }

.sf-store__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); }

.sf-store { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); align-items: center; }
/* dl e non ul: indirizzo, orari, telefono e email sono coppie
   termine/descrizione, ed e' cosi' che le legge uno screen reader. */
.sf-store__facts { margin: var(--space-6) 0 0; display: grid; gap: var(--space-4); }
.sf-store__facts dt { display: flex; gap: var(--space-3); align-items: flex-start;
  font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--text-strong); }
.sf-store__facts dd { margin: 0 0 0 calc(20px + var(--space-3)); font-size: var(--text-base); color: var(--text-body); }
.sf-store__facts svg { width: 20px; height: 20px; color: var(--bosco-500); flex: none; margin-top: 3px; }
.sf-map {
  border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3; background: var(--salvia-100); position: relative;
  display: flex; align-items: center; justify-content: center;
}
.sf-map .sf-emwash { position: absolute; inset: 0; background-image: url('design-system/assets/textures/botanical-strip.png'); background-size: 300px; opacity: 0.4; }

/* Il testo resta allineato a sinistra: in colonne da ~40 caratteri il
   giustificato produce spaziature irregolari (WCAG 1.4.8). */

/* --- Collegamenti ai social (header della sezione / footer) ---------------- */
.sf-social__follow { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Le immagini con width/height nel markup mantengono la proporzione */
img { height: auto; }

/* --- Pagine legali ---------------------------------------------------------- */
.sf-legal { padding: var(--space-9) 0 var(--space-10); }
/* 62ch e non 72: in Source Sans 3 lo zero (8,45px) e' 1,24 volte il carattere
   medio (6,84px), quindi 72ch rendevano 89 caratteri reali per riga. 62ch sta
   a ~76, sotto la soglia di leggibilita' di 80. */
.sf-legal__body { max-width: 62ch; }
.sf-legal__back { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--bosco-700); text-decoration: none; font-weight: var(--weight-semibold); min-height: 44px; }
.sf-legal__back:hover { text-decoration: underline; }
.sf-legal__back svg { width: 18px; height: 18px; }
.sf-legal__title { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1.1; color: var(--text-strong); margin: var(--space-4) 0 var(--space-2); }
.sf-legal__meta { margin: 0 0 var(--space-7); color: var(--text-muted, var(--text-body)); font-size: var(--text-sm); }
.sf-legal h2 { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--text-strong); margin: var(--space-8) 0 var(--space-3); }
.sf-legal p, .sf-legal li { color: var(--text-body); line-height: 1.7; }
.sf-legal p { margin: 0 0 var(--space-4); }
.sf-legal ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); display: grid; gap: var(--space-3); }
.sf-legal a { color: var(--bosco-700); text-underline-offset: 3px; }
/* Target di tocco ≥24px anche sui link legali (WCAG 2.2 SC 2.5.8) */
.sf-footer__bottom a, .sf-map__ask a { color: inherit; text-underline-offset: 3px; display: inline-block; padding: 5px 4px; }
.sf-map__ask a { color: var(--bosco-700); }
@media (max-width: 720px) {
  .sf-legal { padding: var(--space-7) 0 var(--space-9); }
  .sf-legal__title { font-size: var(--text-3xl); }
}

/* --- Mappa e app di navigazione --------------------------------------------- */
.sf-mapcard { display: flex; flex-direction: column; gap: var(--space-4); }
.sf-map { flex-direction: column; }
.sf-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-map__hide { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2; box-shadow: var(--shadow-md); }
.sf-map__ask { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-5); text-align: center; }
.sf-map__ask p { margin: 0; font-size: var(--text-sm); color: var(--text-body); max-width: 28ch; }
.sf-map__apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.sf-map__apps .ime-btn { min-height: 48px; justify-content: center; padding-inline: var(--space-3); }
.sf-mapcard.is-ios [data-app="apple"] { order: -1; }

/* --- Barra azioni rapide (mobile) ------------------------------------------- */
.sf-dock { display: none; }
@media (max-width: 720px) {
  /* lo spazio per il dock serve solo alle pagine che il dock ce l'hanno */
  .sf:has(.sf-dock) { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .sf-dock {
    display: grid; grid-template-columns: repeat(3, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--bosco-800); border-top: 1px solid var(--border-inverse);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sf-dock a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 60px; color: var(--burro); text-decoration: none;
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
  }
  .sf-dock a:active { background: var(--bosco-700); }
  .sf-dock a:focus-visible { outline: 2px solid var(--burro); outline-offset: -4px; }
  .sf-dock svg { width: 22px; height: 22px; }
  .sf-map__apps { grid-template-columns: 1fr; }
  .sf-store__cta .ime-btn { flex: 1 1 100%; justify-content: center; }
  .sf-footer__col a { display: inline-block; padding: 6px 0; }
}

/* --- Target di tocco 44px -------------------------------------------------
   Il sito rispetta già SC 2.5.8 (24px, WCAG 2.2 AA). Qui l'area sale a 44px,
   la soglia di Apple HIG / SC 2.5.5 (AAA), ma SOLO su puntatore grosso: con
   il mouse la resa compatta dell'header e dei chip resta quella di prima.
   I link legali in mezzo al testo corrente restano esclusi: SC 2.5.8 li
   esenta e allargarli spezzerebbe la riga. */
@media (pointer: coarse) {
  /* bottone telefono in header: a <=720px perde l'etichetta e resta l'icona */
  .ime-btn--sm { height: 44px; min-width: 44px; }

  /* chip filtro: l'altezza cresce, il padding orizzontale no */
  .ime-tag--clickable { min-height: 44px; padding-top: 0; padding-bottom: 0; }

  /* link "Guarda tutti gli scaffali" e simili in testa alle sezioni */
  .sf-link { display: inline-flex; align-items: center; min-height: 44px; }

  /* colonne del footer: righe piene, nessuna sovrapposizione fra target */
  .sf-footer__col a {
    display: flex; align-items: center;
    min-height: 44px; padding: 0;
  }
}

/* L'hamburger dichiara 44x44 ma è in un flex container che lo comprime. */
.sf-navtoggle { flex: none; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .sf-cats { grid-template-columns: repeat(3, 1fr); }
  .sf-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .sf-header__bar { height: 68px; gap: var(--space-3); }
  .sf-logo img { height: 44px; }
  .sf-navtoggle { display: inline-flex; }
  .sf-nav {
    position: absolute; top: 100%; left: 0; right: 0; display: none;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    background: var(--surface-card); border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg); padding: var(--space-4) var(--space-6) var(--space-6);
  }
  .sf-nav[data-open="true"] { display: flex; }
  .sf-nav a { padding: var(--space-3) 0; font-size: var(--text-base); }
  .sf-header__actions { margin-left: 0; }

  .sf-hero__grid { grid-template-columns: 1fr; gap: var(--space-8); padding-block: var(--space-9); }  /* padding-block: vedi kit.css */
  .sf-hero__title { font-size: var(--text-4xl); }
  .sf-hero__card { max-width: 340px; margin: 0 auto; }

  .sf-editorial, .sf-store { grid-template-columns: 1fr; gap: var(--space-7); }
  .sf-editorial__media { aspect-ratio: 3/2; }
  .sf-band { grid-template-columns: 1fr; padding: var(--space-8); }
  .sf-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

@media (max-width: 720px) {
  .sf-wrap { padding-inline: var(--space-5); }  /* solo gutter: vedi kit.css */
  .sf-section { padding: var(--space-9) 0; }
  .sf-section--tight { padding: var(--space-8) 0; }
  .sf-head { flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-6); }
  .sf-cats { grid-template-columns: repeat(2, 1fr); }
  .sf-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
  .sf-title { font-size: var(--text-2xl); }
  .sf-editorial__title { font-size: var(--text-3xl); }
  .sf-promo { font-size: 0.72rem; }
}

@media (max-width: 480px) {
  /* header stretto: resta l'icona telefono, il numero lo dice l'aria-label */
  .sf-callbtn span { display: none; }
  .sf-callbtn { padding: 0 var(--space-3); }
  .sf-grid { grid-template-columns: 1fr; }
  .sf-hero__title { font-size: var(--text-3xl); }
  .sf-hero__cta .ime-btn { width: 100%; }
  .sf-news__form { flex-direction: column; }
  .sf-news__form .ime-btn { width: 100%; }
  .sf-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .sf-cat:hover, .ime-card--interactive:hover { transform: none; }
}