/* ==========================================================================
   Dalfasport · main.css
   Componenti e sezioni, nell'ordine della pagina. Solo var(--…) da tokens.css.
   Punti di rottura: 35em (560) · 48em (768) · 64em (1024) · 67.5em (1080, menu)
   ========================================================================== */

/* ---- Barra informazioni (solo desktop) --------------------------------- */
.topbar {
  display: none;
  background-color: var(--c-ink);
  color: var(--c-on-dark-muted);
  font-size: var(--fs-xs);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: var(--topbar-h);
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.topbar__item:last-child {
  margin-left: auto;
}

.topbar a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

.topbar a:hover {
  color: var(--c-on-dark);
}

.topbar .icon {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--c-brand);
}

@media (min-width: 67.5em) {
  .topbar {
    display: block;
  }
}

/* ---- Testata ----------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--c-paper);
  border-bottom: var(--border-w) solid var(--c-line);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}

.site-header.is-scrolled {
  border-bottom-color: transparent;
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  min-height: 4rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding-block: var(--sp-2);
}

.brand img {
  width: auto;
  height: var(--logo-h-sm);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
}

/* Conteggio del carrello */
.cart-link__count {
  position: absolute;
  top: 0.125rem;
  right: 0.125rem;
  display: grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding-inline: var(--sp-1);
  border-radius: var(--radius-pill);
  background-color: var(--c-brand);
  color: var(--c-ink);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* Menu: in linea da 1080 px, cassetto sotto */
.site-nav__list {
  margin: 0;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ui);
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav__link .icon {
  color: var(--c-brand-ink);
}

.site-nav__extra {
  display: none;
}

.nav-toggle .icon--close,
.nav-open .nav-toggle .icon--menu {
  display: none;
}

.nav-open .nav-toggle .icon--close {
  display: block;
}

@media (min-width: 67.5em) {
  .site-header__inner {
    flex-wrap: nowrap;
    min-height: 4.75rem;
  }

  .brand img {
    height: var(--logo-h);
  }

  .site-nav {
    margin-left: auto;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
  }

  .site-nav__link {
    min-height: var(--tap);
  }

  .site-nav__link .icon {
    display: none;
  }

  .site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.375rem;
    height: var(--border-w-strong);
    background-color: var(--c-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-2) var(--ease-out);
  }

  .site-nav__link:hover::after,
  .site-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .site-header__actions {
    margin-left: var(--sp-4);
  }

  .nav-toggle {
    display: none;
  }
}

/* Mobile senza JS: il menu resta visibile su una riga sotto il logo */
@media (max-width: 67.49em) {
  html:not(.js) .nav-toggle {
    display: none;
  }

  html:not(.js) .site-nav {
    order: 3;
    width: 100%;
    padding-bottom: var(--sp-3);
  }

  html:not(.js) .site-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
  }

  html:not(.js) .site-nav__link .icon {
    display: none;
  }

  /* Con JS: cassetto a tutta pagina sotto la testata */
  html.js .site-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-drawer);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-3) var(--gutter) var(--sp-8);
    background-color: var(--c-paper);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.5rem);
    transition:
      opacity var(--dur-2) var(--ease-out),
      transform var(--dur-2) var(--ease-out),
      visibility 0s linear var(--dur-2);
  }

  html.js .nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  html.js .site-nav__list {
    display: grid;
  }

  html.js .site-nav__link {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-block: var(--sp-4);
    border-bottom: var(--border-w) solid var(--c-line);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-display);
    letter-spacing: var(--ls-display);
    line-height: var(--lh-heading);
  }

  html.js .site-nav__link[aria-current="page"] {
    color: var(--c-brand-ink);
  }

  html.js .site-nav__extra {
    display: grid;
    gap: var(--sp-5);
    margin-top: var(--sp-6);
  }
}

html.nav-open {
  overflow: hidden;
}

.drawer-contacts {
  display: grid;
  gap: var(--sp-3);
  font-size: var(--fs-base);
}

.drawer-contacts a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  color: var(--c-ink);
  text-decoration: none;
}

.drawer-contacts .icon {
  color: var(--c-brand-ink);
}

/* Ricerca nel negozio (pannello nella testata) */
.search-panel {
  padding-block: var(--sp-4);
  border-top: var(--border-w) solid var(--c-line);
  background-color: var(--c-stone);
}

.search-form {
  display: flex;
  gap: var(--sp-2);
}

.search-form__input {
  flex: 1 1 auto;
  min-width: 0;
}

.search-form .btn {
  flex-shrink: 0;
}

@media (max-width: 34.99em) {
  .search-form .btn__label {
    display: none;
  }

  .search-form .btn {
    padding-inline: var(--sp-4);
  }
}

/* ---- Hero (home) ------------------------------------------------------- */
/* Su desktop hero e banda dei servizi riempiono esattamente lo schermo sotto
   la testata: l'altezza della testata la misura main.js (--header-h). */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--c-ink);
}

.hero__media,
.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__media {
  z-index: -2;
}

/* Foto d'atmosfera: cover ammesso. Inquadratura su sentiero e ghiacciaio. */
.hero__media img {
  object-fit: cover;
  object-position: 50% 62%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--c-scrim-strong) 0%, var(--c-scrim) 45%, var(--c-scrim-soft) 78%),
    linear-gradient(to right, var(--c-scrim) 0%, var(--c-scrim-soft) 65%);
}

.hero__body {
  display: flex;
  flex: 1 0 auto;
  align-items: flex-end;
  min-height: 36rem;
  padding-block: var(--sp-9) var(--sp-7);
}

.hero__inner {
  display: grid;
  gap: var(--sp-6);
  align-items: end;
}

.hero__main > * + * {
  margin-top: var(--sp-4);
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: 0.86;
  letter-spacing: 0;
}

.hero__title > span {
  display: block;
}

.hero__dot {
  color: var(--c-brand);
}

.hero__aside > * + * {
  margin-top: var(--sp-5);
}

.hero .lead {
  color: var(--c-on-dark);
}

/* Banda dei servizi: fa parte della hero, sopra la foto */
.hero__services {
  position: relative;
  border-top: var(--border-w) solid var(--line);
  background-color: var(--c-scrim-band);
}

/* Telefono: il testo occupa piu' altezza, la velatura sale con lui */
@media (max-width: 47.99em) {
  .hero::before {
    background: linear-gradient(to top, var(--c-scrim-strong) 0%, var(--c-scrim-strong) 38%, var(--c-scrim) 72%, var(--c-scrim-light) 100%);
  }

  .hero__body {
    min-height: 34rem;
  }

  /* inquadratura a sinistra: il testo sta sulla parete di roccia scura */
  .hero__media img {
    object-position: 0% 55%;
  }

  .hero .btn-row .btn {
    flex: 1 1 100%;
  }
}

@media (min-width: 64em) {
  .hero {
    height: calc(100svh - var(--header-h));
    min-height: 38rem;
  }

  .hero__body {
    min-height: 0;
    padding-block: var(--sp-8) var(--sp-7);
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--sp-8);
  }

  /* Schermi bassi: il titolo si adatta all'altezza, la hero resta intera */
  .hero__title {
    font-size: min(var(--fs-hero), 14svh);
  }
}

@media (min-width: 67.5em) {
  .hero {
    height: calc(100svh - var(--header-h) - var(--topbar-h));
  }
}

/* ---- Servizi (banda in fondo alla hero) ----------------------------------- */
.services__list {
  display: grid;
  margin: 0;
}

.service-item {
  border-top: var(--border-w) solid var(--line);
}

.service-item:first-child {
  border-top: 0;
}

.service-item__link {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-1) var(--sp-4);
  align-items: start;
  height: 100%;
  padding-block: var(--sp-5);
  color: var(--fg);
  text-decoration: none;
}

.service-item__icon {
  grid-row: span 2;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--c-brand);
}

.service-item__title {
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.service-item__text {
  grid-column: 2;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.service-item__arrow {
  grid-column: 3;
  grid-row: 1;
  color: var(--c-brand);
  transition: transform var(--dur-2) var(--ease-out);
}

.service-item__link:hover .service-item__title {
  color: var(--c-brand);
}

.service-item__link:hover .service-item__arrow {
  transform: translateX(4px);
}

@media (min-width: 35em) {
  .services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-6);
  }

  .service-item:nth-child(2) {
    border-top: 0;
  }
}

@media (min-width: 64em) {
  .services__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
  }

  .service-item {
    border-top: 0;
    border-left: var(--border-w) solid var(--line);
  }

  .service-item:first-child {
    border-left: 0;
  }

  .service-item__link {
    padding: var(--sp-5) var(--sp-5) var(--sp-6);
  }

  .service-item:first-child .service-item__link {
    padding-left: 0;
  }

  .service-item:last-child .service-item__link {
    padding-right: 0;
  }
}

/* ---- Categorie (home): schede con le foto dei prodotti ------------------- */
/* Le foto (assets/img/categorie/) hanno il fondo gia' del colore della scheda
   (--c-stone), preparato da tools/categorie.py: foto e scheda coincidono e il
   bordo della foto non si vede. Per questo la scheda NON cambia colore al
   passaggio del mouse: cambierebbe il fondo ma non quello della foto. */
ul.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0;
}

.bento__item--feature {
  grid-column: 1 / -1;
}

@media (min-width: 48em) {
  ul.bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: var(--tile-h);
    gap: var(--sp-4);
  }

  .bento__item--feature {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@media (min-width: 64em) {
  ul.bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: 11.5rem;
  padding: var(--sp-4);
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--c-stone);
  color: var(--c-ink);
  text-decoration: none;
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.tile:hover {
  box-shadow: var(--shadow-header);
}

.tile__name {
  max-width: 12ch;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.tile__desc {
  max-width: 18ch;
  margin-top: var(--sp-1);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.tile__media {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: -1;
  width: 58%;
  height: 62%;
}

.tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  transition: transform var(--dur-3) var(--ease-out);
}

.tile__go {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: auto;
  border-radius: var(--radius-pill);
  background-color: var(--c-paper);
  color: var(--c-ink);
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}

.tile__go .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.tile:hover .tile__go {
  background-color: var(--c-brand);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tile:hover .tile__media img {
    transform: scale(1.05);
  }

  .tile:hover .tile__go {
    transform: translateX(3px);
  }
}

/* Scheda grande: la categoria principale */
.tile--feature {
  padding: var(--sp-5);
}

.tile--feature .tile__name {
  max-width: none;
  font-size: var(--fs-h2);
}

.tile--feature .tile__desc {
  max-width: 30ch;
  font-size: var(--fs-sm);
}

.tile--feature .tile__media {
  right: var(--sp-5);
  bottom: var(--sp-5);
  left: var(--sp-5);
  width: auto;
  height: 58%;
}

.tile--feature .tile__media img {
  object-position: center bottom;
}

.tile--feature .tile__go {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-5);
  background-color: var(--c-brand);
}

@media (min-width: 48em) {
  .tile {
    padding: var(--sp-5);
  }

  .tile--feature {
    padding: var(--sp-6);
  }

  .tile--feature .tile__media {
    top: 40%;
    right: var(--sp-6);
    bottom: var(--sp-6);
    left: var(--sp-6);
    height: auto;
  }
}

/* ---- Prodotti in evidenza (widget Ecwid, stile in store.css) ------------- */
.products {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 35em) {
  .products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.products__fallback {
  grid-column: 1 / -1;
  padding: var(--sp-6);
  border: var(--border-w) dashed var(--c-line-strong);
  border-radius: var(--radius);
  text-align: center;
}

.products__fallback > * + * {
  margin-top: var(--sp-4);
}

.section-head__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
}

/* ---- Officina: foto a tutta altezza e servizi numerati -------------------- */
.workshop {
  display: grid;
}

.workshop__media {
  position: relative;
  min-height: 16rem;
  background-color: var(--c-ink-2);
}

.workshop__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 55% 40%;
}

.workshop__body {
  padding: var(--section-y) var(--gutter);
}

.workshop__body > * + * {
  margin-top: var(--sp-5);
}

@media (min-width: 64em) {
  .workshop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 42rem;
  }

  /* il testo si allinea al bordo destro del contenitore del sito */
  .workshop__body {
    align-self: center;
    padding: var(--section-y) max(var(--gutter), calc((100vw - var(--container)) / 2)) var(--section-y) var(--sp-8);
  }
}

ol.service-rows {
  display: grid;
  margin: 0;
  border-top: var(--border-w) solid var(--line);
}

.service-rows li {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--sp-4);
  align-items: baseline;
  padding-block: var(--sp-4);
  border-bottom: var(--border-w) solid var(--line);
}

.service-rows__n {
  color: var(--c-brand);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-black);
  line-height: 1;
}

.service-rows h3 {
  font-size: var(--fs-h4);
}

.service-rows p {
  margin-top: var(--sp-1);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}

/* ---- Marchi (parete tipografica) ----------------------------------------- */
.brand-wall {
  text-align: center;
}

.brand-wall__title {
  color: var(--fg-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

ul.brand-wall__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-1) var(--sp-6);
  margin: var(--sp-5) 0 0;
}

/* Grigio 3.2:1 su bianco: ammesso solo perche' testo grande (24 px+, grassetto) */
.brand-wall__list a {
  display: inline-block;
  padding-block: var(--sp-1);
  color: var(--c-line-strong);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--dur-1) var(--ease-out);
}

.brand-wall__list a:hover {
  color: var(--c-ink);
}

/* ---- Vieni in negozio: testo, fatti e azioni + foto del negozio ----------- */
.visit__grid {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}

.visit__info > * + * {
  margin-top: var(--sp-5);
}

.visit__info > h2 + .visit__lead {
  margin-top: var(--sp-4);
}

.visit__lead {
  color: var(--c-text);
}

/* Fatti (indirizzo, orari): etichetta piccola e valore leggibile, non un secondo titolo */
.visit__facts {
  display: grid;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-block: var(--border-w) solid var(--c-line-strong);
}

.visit__fact dt {
  margin-bottom: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  line-height: 1.2;
  text-transform: uppercase;
}

.visit__fact dd {
  margin: 0;
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1.45;
}

.visit__fact .hours th,
.visit__fact .hours td {
  padding-block: var(--sp-2);
  font-size: var(--fs-sm);
}

@media (min-width: 35em) {
  .visit__facts {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--sp-6);
  }
}

/* Azioni: quattro schede uguali, icona + etichetta + valore */
ul.actions {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

@media (min-width: 35em) {
  ul.actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.action {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  height: 100%;
  min-height: 4.5rem;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
  border: var(--border-w) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-paper);
  color: var(--c-ink);
  text-decoration: none;
  transition:
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.action:hover {
  border-color: var(--c-ink);
}

.action__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  border-radius: var(--radius-pill);
  background-color: var(--c-stone);
  color: var(--c-ink);
  transition: background-color var(--dur-1) var(--ease-out);
}

.action:hover .action__icon {
  background-color: var(--c-brand);
}

.action__text {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
}

.action__label {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  line-height: 1.2;
  text-transform: uppercase;
}

.action__value {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* La prima azione (come arrivare) e' quella principale */
.action--primary {
  border-color: var(--c-ink);
  background-color: var(--c-ink);
  color: var(--c-on-dark);
}

.action--primary .action__icon {
  background-color: var(--c-brand);
  color: var(--c-ink);
}

.action--primary .action__label {
  color: var(--c-on-dark-muted);
}

.action--primary:hover {
  border-color: var(--c-ink-3);
  background-color: var(--c-ink-3);
}

.action--primary:focus-visible {
  outline-color: var(--c-ink);
}

/* Foto del negozio: intera (4:3), mai ritagliata */
.visit__photo {
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--c-stone-2);
}

.visit__photo img {
  width: 100%;
  height: auto;
}

@media (min-width: 64em) {
  .visit__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--sp-8);
  }
}

/* ---- Schede informative (negozio, contatti) ------------------------------ */
.info-grid {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 48em) {
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.info-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: var(--border-w) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-paper);
  color: var(--c-text);
}

.info-card__h {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.info-card__h .icon {
  color: var(--c-brand-ink);
}

.info-card address {
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--c-ink);
}

.info-card .link-arrow {
  margin-top: auto;
}

/* Tabella orari: il giorno di oggi lo evidenzia il JS */
.hours {
  width: 100%;
}

.hours th,
.hours td {
  padding: var(--sp-3) 0;
  border-bottom: var(--border-w) solid var(--c-line);
  text-align: left;
  vertical-align: top;
}

.hours tr:last-child th,
.hours tr:last-child td {
  border-bottom: 0;
}

.hours th {
  padding-right: var(--sp-4);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}

.hours td {
  color: var(--c-muted);
  text-align: right;
  white-space: nowrap;
}

.hours .is-today th,
.hours .is-today td {
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}

.hours__today {
  display: inline-block;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  background-color: var(--c-brand);
  color: var(--c-ink);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ui);
  line-height: 1.6;
  text-transform: uppercase;
  vertical-align: middle;
}

ul.contact-list {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
}

.contact-list a {
  display: grid;
  min-height: var(--tap);
  padding-block: var(--sp-2);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  text-decoration: none;
}

.contact-list a:hover .contact-list__value {
  color: var(--c-brand-ink);
  text-decoration: underline;
}

.contact-list__label {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

/* ---- Testata delle pagine interne ---------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: var(--sp-8) var(--sp-7);
  overflow: hidden;
}

.page-hero__inner > * + * {
  margin-top: var(--sp-4);
}

.page-hero h1 {
  max-width: 16ch;
}

.page-hero .lead {
  color: var(--c-on-dark);
}

.page-hero--image {
  display: flex;
  align-items: flex-end;
  min-height: 30rem;
}

.page-hero__media,
.page-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-hero__media {
  z-index: -2;
}

.page-hero__media img {
  object-fit: cover;
  object-position: 50% 40%;
}

.page-hero--image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--c-scrim-strong) 0%, var(--c-scrim) 55%, var(--c-scrim-soft) 100%),
    linear-gradient(to right, var(--c-scrim) 0%, var(--c-scrim-soft) 70%);
}

/* Briciole di pane */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--accent-text);
}

.breadcrumb a {
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--fg-strong);
}

/* ---- Schede servizio ---------------------------------------------------- */
ul.cards {
  display: grid;
  gap: var(--sp-5);
  margin: 0;
}

@media (min-width: 48em) {
  ul.cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border: var(--border-w) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-paper);
}

.card__icon {
  width: 2rem;
  height: 2rem;
  color: var(--c-brand-ink);
}

.card__title {
  font-size: var(--fs-h3);
}

.card p {
  color: var(--c-muted);
}

.card .link-arrow {
  margin-top: auto;
  padding-top: var(--sp-2);
}

/* ---- Passaggi ------------------------------------------------------------ */
ol.steps {
  display: grid;
  gap: var(--sp-6);
  margin: 0;
  counter-reset: none;
}

@media (min-width: 48em) {
  ol.steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.step {
  display: grid;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  border-top: var(--border-w-strong) solid var(--fg-strong);
}

.step__n {
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-black);
  line-height: 1;
}

.step__title {
  font-size: var(--fs-h4);
}

.step p {
  color: var(--fg-muted);
}

/* ---- Banda d'azione arancio ------------------------------------------------ */
.cta-band {
  --bg: var(--c-brand);
  --fg: var(--c-ink);
  --fg-strong: var(--c-ink);
  --fg-muted: var(--c-ink);
  --accent-text: var(--c-ink);
  --focus: var(--c-ink);
  padding-block: var(--sp-7);
  background-color: var(--bg);
  color: var(--fg);
}

.cta-band__inner {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}

.cta-band__title {
  font-size: var(--fs-h2);
}

.cta-band__text > * + * {
  margin-top: var(--sp-2);
}

@media (min-width: 64em) {
  .cta-band__inner {
    grid-template-columns: 1fr auto;
    gap: var(--sp-8);
  }
}

/* ---- Prenotazione (officina) ------------------------------------------- */
.booking {
  display: grid;
  gap: var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--radius);
  background-color: var(--c-ink);
  color: var(--c-on-dark);
}

.booking > * + * {
  margin-top: 0;
}

.booking__body > * + * {
  margin-top: var(--sp-4);
}

.booking__note {
  color: var(--c-on-dark-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 64em) {
  .booking {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--sp-7);
  }
}

/* ---- Feed social (news) --------------------------------------------- */
.feed {
  min-height: 24rem;
}

.feed__fallback {
  padding: var(--sp-6);
  border: var(--border-w) dashed var(--c-line-strong);
  border-radius: var(--radius);
  text-align: center;
}

.feed__fallback > * + * {
  margin-top: var(--sp-4);
}

/* ---- Negozio online: intestazione ---------------------------------------- */
.shop-intro {
  padding-block: var(--sp-7) var(--sp-6);
  border-bottom: var(--border-w) solid var(--c-line);
  background-color: var(--c-stone);
}

.shop-intro__inner > * + * {
  margin-top: var(--sp-3);
}

/* Nelle pagine interne dello store parla solo Ecwid (un solo H1). */
.is-store-inner .shop-intro {
  display: none;
}

/* ---- Negozio online: due colonne, sidebar delle categorie + store -------- */
.shop {
  display: grid;
  gap: var(--sp-5);
  padding-bottom: var(--section-y);
}

.store {
  min-width: 0;
}

.store__loading {
  padding-block: var(--sp-8);
  color: var(--c-muted);
  text-align: center;
}

.store__title {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-h3);
}

.is-store-inner .store__title {
  display: none;
}

/* Barra "Categorie" (telefono e tablet): apre la sidebar */
.shop-bar {
  position: sticky;
  top: var(--header-h);
  z-index: var(--z-sticky);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--sp-2) var(--gutter);
  border-bottom: var(--border-w) solid var(--c-line);
  background-color: var(--c-paper);
}

.shop-bar__toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: var(--border-w) solid var(--c-line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--c-paper);
  color: var(--c-ink);
  text-align: left;
}

.shop-bar__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
}

.shop-bar__current {
  overflow: hidden;
  margin-left: auto;
  color: var(--c-muted);
  font-size: var(--fs-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sidebar */
.shop-nav {
  display: grid;
  align-content: start;
  gap: var(--sp-6);
}

.shop-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.shop-nav__title {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  text-transform: uppercase;
}

.shop-nav__h {
  margin-bottom: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.shop-nav__group + .shop-nav__group {
  padding-top: var(--sp-5);
  border-top: var(--border-w) solid var(--c-line);
}

.search-form--compact .btn {
  padding-inline: var(--sp-4);
}

/* Albero delle categorie */
ul.cat-nav,
ul.cat-nav__sub {
  margin: 0;
}

.cat-nav__link {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.5rem;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-display);
  line-height: 1.15;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}

.cat-nav__link:hover {
  background-color: var(--c-stone);
}

/* Freccia delle voci con sottocategorie: ruota quando la voce e' aperta */
.cat-nav__item.has-sub > .cat-nav__link::after {
  content: "";
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: auto;
  border-right: var(--border-w-strong) solid currentColor;
  border-bottom: var(--border-w-strong) solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-2) var(--ease-out);
}

.cat-nav__item.is-open > .cat-nav__link::after {
  transform: rotate(45deg);
}

.cat-nav__item.is-active > .cat-nav__link {
  background-color: var(--c-brand-soft);
  box-shadow: inset var(--focus-w) 0 0 var(--c-brand);
  color: var(--c-ink);
}

ul.cat-nav__sub {
  display: none;
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-3);
  padding-left: var(--sp-2);
  border-left: var(--border-w) solid var(--c-line);
}

.cat-nav__item.is-open > .cat-nav__sub {
  display: block;
}

.cat-nav__sub .cat-nav__link {
  min-height: 2.25rem;
  padding-block: var(--sp-1);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: none;
}

.cat-nav__sub .cat-nav__item.is-active > .cat-nav__link {
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}

/* Link di servizio (carrello, preferiti...) e aiuto */
ul.shop-nav__links {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
}

.shop-nav__links a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.shop-nav__links a:hover {
  color: var(--c-brand-ink);
}

.shop-nav__links .icon {
  color: var(--c-brand-ink);
}

.shop-nav__help p:not(.shop-nav__h) {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

/* Sottocategorie sotto la barra (solo telefono e tablet) */
ul.subcats {
  display: flex;
  gap: var(--sp-2);
  margin: 0 calc(var(--gutter) * -1) var(--sp-5);
  padding: 0 var(--gutter) var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
}

ul.subcats::-webkit-scrollbar {
  display: none;
}

.subcats[hidden] {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  padding: var(--sp-1) var(--sp-4);
  border: var(--border-w) solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.chip:hover,
.chip[aria-current="page"] {
  border-color: var(--c-ink);
  background-color: var(--c-ink);
  color: var(--c-on-dark);
}

ul.chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
}

.shop-backdrop {
  display: none;
}

/* Telefono e tablet: la sidebar e' un pannello che entra da sinistra */
@media (max-width: 63.99em) {
  .shop-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-drawer);
    width: min(23rem, 88vw);
    padding: var(--sp-4) var(--gutter) var(--sp-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--c-paper);
    box-shadow: var(--shadow-pop);
    visibility: hidden;
    transform: translateX(-102%);
    transition:
      transform var(--dur-2) var(--ease-out),
      visibility 0s linear var(--dur-2);
  }

  .shop-nav-open .shop-nav {
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .shop-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: block;
    background-color: var(--c-scrim);
  }

  .shop-backdrop[hidden] {
    display: none;
  }

  body.shop-nav-open {
    overflow: hidden;
  }
}

/* Desktop: sidebar fissa accanto ai prodotti, con scroll proprio */
@media (min-width: 64em) {
  .shop {
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
    padding-top: var(--sp-7);
  }

  .shop-bar,
  .shop-nav__head,
  ul.subcats {
    display: none;
  }

  .shop-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
    max-height: calc(100dvh - var(--header-h) - var(--sp-7));
    padding-right: var(--sp-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* Banda d'aiuto (non piu' nello shop: l'aiuto sta nella sidebar) */
.help-band {
  padding-block: var(--sp-6);
  border-top: var(--border-w) solid var(--c-line);
  background-color: var(--c-stone);
}

.help-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.help-band__text {
  color: var(--c-ink);
  font-weight: var(--fw-medium);
}

/* ---- Elfsight: niente lampo della pillola "Riparazione / Noleggio" ---------- */
/* Il pulsante tondo .fab--booking sostituisce la pillola di Elfsight, che main.js
   nasconde appena compare. Fino ad allora il contenitore della prenotazione resta
   trasparente. Elfsight azzera opacity/visibility del suo contenitore con
   !important (regola .XXXX.XXXX, specificita' 0,2,0): qui serve !important e una
   specificita' piu' alta. Si colpisce solo il widget della prenotazione (classe
   con il suo ID), non il popup "Offerte". */
html:not(.booking-pill-hidden) body > .es-portal-root[class*="eapps-appointment-booking-e50b8df4"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---- Pulsanti flottanti: carrello e prenotazione --------------------------- */
/* Sostituiscono il carrello flottante di Ecwid e la pillola di Elfsight, che si
   sovrapponevano. Il carrello compare solo con articoli dentro (store.js). */
.fab-stack {
  position: fixed;
  right: max(var(--fab-offset), env(safe-area-inset-right));
  bottom: max(var(--fab-offset), env(safe-area-inset-bottom));
  z-index: var(--z-fab);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--fab-gap);
  pointer-events: none;
}

.fab {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--fab-size);
  height: var(--fab-size);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-fab);
  text-decoration: none;
  pointer-events: auto;
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.fab .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.fab--cart {
  border: var(--border-w) solid var(--c-line);
  background-color: var(--c-paper);
  color: var(--c-ink);
}

.fab--booking {
  background-color: var(--c-brand);
  color: var(--c-ink);
}

.fab--booking:hover {
  background-color: var(--c-brand-hover);
}

.fab:focus-visible {
  outline-color: var(--c-ink);
}

.fab__count {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  display: grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding-inline: 0.3rem;
  border: var(--border-w-strong) solid var(--c-paper);
  border-radius: var(--radius-pill);
  background-color: var(--c-brand);
  color: var(--c-ink);
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* Etichetta: al passaggio del mouse, e per qualche secondo alla prima visita */
.fab__label {
  position: absolute;
  top: 50%;
  right: calc(100% + var(--fab-gap));
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  background-color: var(--c-ink);
  color: var(--c-on-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(0.375rem, -50%);
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}

.fab:focus-visible .fab__label,
.fab-stack.is-peek .fab--booking .fab__label {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  .fab:hover {
    transform: translateY(-2px);
  }

  .fab:hover .fab__label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
    transition-delay: 0s;
  }
}

/* Un articolo in piu' nel carrello: piccolo battito */
@media (prefers-reduced-motion: no-preference) {
  .fab.is-bump {
    animation: fab-bump 450ms var(--ease-out);
  }
}

@keyframes fab-bump {
  40% {
    transform: scale(1.14);
  }
}

/* Con un cassetto aperto i pulsanti si tolgono di mezzo */
.nav-open .fab-stack,
.shop-nav-open .fab-stack {
  display: none;
}

@media print {
  .fab-stack {
    display: none;
  }
}

/* ---- Carrello flottante di Ecwid ------------------------------------------ */
/* Lo sostituisce il nostro (.fab--cart), impilato col pulsante della
   prenotazione: i due di terze parti si sovrapponevano in basso a destra.
   Qui e non in store.css: Ecwid puo' caricarsi su ogni pagina (pannello carrello).
   !important: le regole di Ecwid vengono iniettate dopo e con id. */
.ec-minicart--fixed {
  display: none !important;
}

/* ---- Carrello a scomparsa (store.js) -------------------------------------- */
/* Si apre dal pulsante tondo e dall'icona in testata: entra da destra come il
   calendario di Elfsight si apre in sovrimpressione, senza lasciare la pagina. */
.cart-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
}

.cart-drawer[hidden] {
  display: none;
}

.cart-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--c-scrim);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}

.cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(27rem, 100%);
  background-color: var(--c-paper);
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  transition: transform var(--dur-2) var(--ease-out);
}

.cart-drawer.is-open .cart-drawer__backdrop {
  opacity: 1;
}

.cart-drawer.is-open .cart-drawer__panel {
  transform: none;
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);
  border-bottom: var(--border-w) solid var(--c-line);
}

.cart-drawer__title {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.cart-drawer__qty {
  color: var(--c-muted);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: none;
}

.cart-drawer__body {
  flex: 1 1 auto;
  padding: 0 var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity var(--dur-1) var(--ease-out);
}

.cart-drawer.is-busy .cart-drawer__body {
  opacity: 0.55;
  pointer-events: none;
}

.cart-drawer__status {
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-8);
  color: var(--c-muted);
  text-align: center;
}

.cart-drawer__foot {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-top: var(--border-w) solid var(--c-line);
  background-color: var(--c-paper);
}

.cart-drawer__foot[hidden] {
  display: none;
}

.cart-drawer__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  color: var(--c-ink);
  font-weight: var(--fw-semibold);
}

.cart-drawer__total strong {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  white-space: nowrap;
}

.cart-drawer__note {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

ul.cart-lines {
  margin: 0;
}

.cart-line {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-bottom: var(--border-w) solid var(--c-line);
}

.cart-line__img {
  display: block;
  width: 5rem;
  height: 5rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--c-paper);
  border: var(--border-w) solid var(--c-line);
}

.cart-line__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-line__name {
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-decoration: none;
}

.cart-line__name:hover {
  color: var(--c-brand-ink);
  text-decoration: underline;
}

.cart-line__opts {
  margin-top: var(--sp-1);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.cart-line__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.qty {
  display: inline-flex;
  align-items: center;
  border: var(--border-w) solid var(--c-line-strong);
  border-radius: var(--radius-sm);
}

.qty__btn {
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-ink);
  font-size: 1.125rem;
  line-height: 1;
  transition: background-color var(--dur-1) var(--ease-out);
}

.qty__btn:hover:not([disabled]) {
  background-color: var(--c-stone);
}

.qty__btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.qty__n {
  min-width: 2rem;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.cart-line__remove {
  min-height: 2rem;
  margin-top: var(--sp-1);
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.cart-line__remove:hover {
  color: var(--c-error);
}

body.cart-open {
  overflow: hidden;
}

.cart-open .fab-stack {
  display: none;
}

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  --bg: var(--c-ink);
  --fg: var(--c-on-dark-muted);
  --fg-strong: var(--c-on-dark);
  --line: var(--c-line-dark);
  --focus: var(--c-brand);
  background-color: var(--bg);
  color: var(--fg);
  font-size: var(--fs-sm);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-7);
  padding-block: var(--sp-8) var(--sp-7);
}

.site-footer__brand > * + * {
  margin-top: var(--sp-4);
}

.site-footer__brand img {
  width: auto;
  height: var(--logo-h);
}

.site-footer__brand p {
  max-width: 30rem;
}

.site-footer__h {
  margin-bottom: var(--sp-3);
  color: var(--c-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  text-transform: uppercase;
}

.site-footer__col > .site-footer__h:not(:first-child) {
  margin-top: var(--sp-5);
}

.site-footer ul {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2rem;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}

.site-footer a:hover {
  color: var(--c-on-dark);
}

.site-footer .icon {
  width: 1rem;
  height: 1rem;
  color: var(--c-brand);
}

.site-footer address {
  color: var(--c-on-dark);
  line-height: 1.5;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-5);
  border-top: var(--border-w) solid var(--line);
  font-size: var(--fs-xs);
}

.site-footer__bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
}

.site-footer__credit {
  margin-left: auto;
}

@media (min-width: 48em) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  }
}

/* ---- Avviso in home (popup gestito dal cliente) ---------------------------- */
/* <dialog> aperto da main.js con showModal(): sta sopra tutto, Esc lo chiude e
   il resto della pagina e' inerte. Due tipi, cambia l'etichetta:
   Avviso (antracite: chiusure, orari) e Commerciale (arancio: promozioni,
   novita'). Il fondo sasso resta per un'etichetta senza tipo. */
.site-popup {
  --popup-tag-bg: var(--c-stone);
  --popup-tag-fg: var(--c-ink);
  --popup-tag-icon: var(--c-brand-ink);
  width: min(100% - 2 * var(--gutter), 34rem);
  max-width: none;
  max-height: calc(100dvh - 2 * var(--gutter));
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background-color: var(--c-paper);
  color: var(--fg);
  box-shadow: var(--shadow-pop);
  overflow: auto;
  overscroll-behavior: contain;
}

.site-popup--alert {
  --popup-tag-bg: var(--c-ink);
  --popup-tag-fg: var(--c-on-dark);
  --popup-tag-icon: var(--c-brand);
}

.site-popup--promo {
  --popup-tag-bg: var(--c-brand);
  --popup-tag-fg: var(--c-ink);
  --popup-tag-icon: var(--c-ink);
}

.site-popup::backdrop {
  background-color: var(--c-scrim);
}

/* Con l'avviso aperto la pagina sotto non scorre */
html:has(.site-popup[open]) {
  overflow: hidden;
}

.site-popup__box {
  position: relative;
}

/* Il JS porta qui il fuoco all'apertura: contenitore, non un comando */
.site-popup__box:focus {
  outline: none;
}

.site-popup__close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: var(--z-base);
  background-color: var(--c-paper);
}

/* Immagine facoltativa: intera, mai ritagliata (anche un volantino quadrato) */
.site-popup__media {
  background-color: var(--c-stone);
}

.site-popup__media img {
  width: 100%;
  height: auto;
  max-height: min(40dvh, 20rem);
  object-fit: contain;
}

.site-popup__body {
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

@media (min-width: 40em) {
  .site-popup__body {
    padding: var(--sp-7) var(--sp-6) var(--sp-6);
  }
}

.site-popup__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-sm);
  background-color: var(--popup-tag-bg);
  color: var(--popup-tag-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

.site-popup__tag .icon {
  width: 1rem;
  height: 1rem;
  color: var(--popup-tag-icon);
}

.site-popup__title {
  margin-top: var(--sp-4);
  color: var(--fg-strong);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.site-popup__text {
  margin-top: var(--sp-3);
}

.site-popup__actions {
  margin-top: var(--sp-5);
}

/* Testi dei bottoni scritti dal cliente: vanno a capo, non escono dal riquadro */
.site-popup__actions .btn {
  flex: 1 1 auto;
  white-space: normal;
}

@media (prefers-reduced-motion: no-preference) {
  .site-popup[open] {
    animation: popup-in var(--dur-2) var(--ease-out);
  }

  .site-popup[open]::backdrop {
    animation: popup-fade var(--dur-2) var(--ease-out);
  }
}

@keyframes popup-in {
  from {
    opacity: 0;
    transform: translateY(var(--reveal-shift));
  }
}

@keyframes popup-fade {
  from {
    opacity: 0;
  }
}

@media print {
  .site-popup {
    display: none;
  }
}

/* ---- Popup newsletter di Mailchimp ------------------------------------------- */
/* Lo carica l'app Mailchimp collegata a Ecwid: in inglese, fuori dal design e
   in conflitto con l'avviso in home. Finestra, sfondo e barra su telefono stanno
   tutti in #PopupSignupForm_0. Nascosto, salvo che WordPress lo riaccenda
   (Avviso in home: la classe show-mc-popup sul body). */
body:not(.show-mc-popup) #PopupSignupForm_0 {
  display: none !important;
}

/* ---- Pagina 404 ------------------------------------------------------- */
.error-page {
  padding-block: var(--sp-9);
}

.error-page__code {
  color: var(--accent-text);
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: 0.9;
}

/* ---- Piccoli complementi della home ---------------------------------------- */
/* Telefono e tablet: la scheda grande ha bisogno di altezza propria */
@media (max-width: 47.99em) {
  .tile--feature {
    min-height: 25rem;
  }
}

/* Telefono: nelle schede piccole basta il nome, la foto non finisce sotto il testo */
@media (max-width: 34.99em) {
  .tile:not(.tile--feature) .tile__desc {
    display: none;
  }

  .tile:not(.tile--feature) .tile__media {
    width: 55%;
    height: 52%;
  }
}