/* ==========================================================================
   Dalfasport · store.css
   Adattamento dei widget Ecwid al design. Colori e font arrivano gia' da
   ecwid-config.js (chameleon); qui misure, allineamenti e le correzioni
   d'accessibilita' che chameleon non copre (testo dei bottoni arancio:
   Ecwid lo mette bianco, 3:1; qui antracite, 5.9:1).
   Selettori sempre dentro i nostri contenitori (.product-card, .store) per
   non toccare il resto del widget.
   ========================================================================== */

/* ---- Prodotti in evidenza (home) ----------------------------------------- */
.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: var(--border-w) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-paper);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease-out);
}

.product-card:hover {
  border-color: var(--c-line-strong);
}

/* Segnaposto mentre Ecwid carica */
.product-card.is-loading {
  min-height: 26rem;
}

.product-card.is-loading::before,
.product-card.is-loading::after {
  content: "";
  position: absolute;
  left: var(--sp-5);
  right: var(--sp-5);
  border-radius: var(--radius-sm);
  background-color: var(--c-stone);
}

.product-card.is-loading::before {
  top: var(--sp-5);
  aspect-ratio: 1 / 1;
}

.product-card.is-loading::after {
  bottom: var(--sp-5);
  height: var(--control-h);
}

.product-card.is-loading .ecsp {
  visibility: hidden;
}

/* Il widget di Ecwid: colonna con foto, nome, prezzo, bottone */
/* (Ecwid imposta .ecsp.ecsp-SingleProduct-v2.loaded come blocco: serve la stessa catena di classi) */
.products .product-card .ecsp,
.products .product-card .ecsp.ecsp-SingleProduct-v2.loaded {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.products .product-card .ecsp form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
}

/* Foto prodotto: mai ritagliata (contain), su fondo bianco come in Ecwid */
.products .product-card .ecsp .ecwid-SingleProduct-picture {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
}

.products .product-card .ecsp .ecwid-SingleProduct-picture img {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain;
}

/* Foto rotta nel catalogo Ecwid: segnaposto neutro invece dell'icona rotta */
.products .product-card.no-image .ecwid-SingleProduct-picture {
  border-radius: var(--radius-sm);
  background-color: var(--c-stone);
}

.products .product-card.no-image .ecwid-SingleProduct-picture img {
  visibility: hidden;
}

.products .product-card.no-image .ecwid-SingleProduct-picture::after {
  content: "Foto non disponibile";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.products .product-card .ecsp .ecsp-title {
  margin: 0;
  padding: 0;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: left;
  text-wrap: pretty;
}

/* Prezzi: listino barrato e risparmio piccoli, prezzo in evidenza */
.products .product-card .ecsp .ecsp-price {
  margin: 0;
  padding: 0;
  text-align: left;
}

.products .product-card .ecsp .ecwid-productBrowser-price-compareTo-container,
.products .product-card .ecsp .ecwid-productBrowser-price-save-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-1);
  justify-content: flex-start;
  color: var(--c-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.products .product-card .ecsp .ecwid-productBrowser-price-save-container {
  color: var(--c-brand-ink);
  font-weight: var(--fw-semibold);
}

.products .product-card .ecsp .ecwid-price-with-compare,
.products .product-card .ecsp .ecsp-price .gwt-HTML {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
}

/* Bottone "Acquista": arancio con testo antracite, in fondo alla scheda */
.products .product-card .ecsp form > div:last-child {
  margin: auto 0 0;
}

.products .product-card .ecsp form > div:last-child div {
  display: block;
  width: 100%;
}

.products .product-card .ecsp .ecwid-btn--primary {
  width: 100%;
  min-height: var(--control-h);
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-4);
  border: var(--border-w-strong) solid var(--c-brand);
  border-radius: var(--radius-sm);
  background: var(--c-brand);
  box-shadow: none;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ui);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: normal;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

.products .product-card .ecsp .ecwid-btn--primary:hover,
.products .product-card .ecsp .ecwid-btn--primary:focus-visible {
  border-color: var(--c-brand-hover);
  background: var(--c-brand-hover);
  color: var(--c-ink);
}

.products .product-card .ecsp .ecwid-btn--primary:focus-visible {
  outline: var(--focus-w) solid var(--c-ink);
  outline-offset: var(--focus-w);
}

.products .product-card .ecsp .ecwid-btn--primary * {
  color: inherit;
}

/* Il prezzo dentro il bottone ripete quello sopra: lo lasciamo solo ai lettori di schermo */
.products .product-card .ecsp .ecwid-btn--addToBag .price-prefix,
.products .product-card .ecsp .ecwid-btn--addToBag .price-delimiter {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- Negozio online (/shop/) ---------------------------------------------- */
/* L'id #store alza la specificita' sopra le regole di Ecwid
   (.ec-size .ec-store …) senza ricorrere a !important. */

/* Bottoni primari: testo antracite sull'arancio (Ecwid lo mette bianco, 3:1) */
#store .ec-size .ec-store .form-control--primary .form-control__button,
#store .ec-size .ec-store .form-control--primary .form-control__button:hover {
  color: var(--c-ink);
}

#store .ec-size .ec-store .form-control--primary .form-control__button * {
  color: inherit;
}

/* Etichette "In saldo": l'arancio del brand, testo antracite */
#store .ec-size .ec-store .label--notice {
  background-color: var(--c-brand);
}

#store .ec-size .ec-store .label--notice .label__text {
  color: var(--c-ink);
}

/* Nomi di prodotto: maiuscole e minuscole come nel catalogo (iTube, 2x11) */
#store .ec-size .ec-store .product-details__product-title,
#store .ec-size .ec-store .grid-product__title {
  text-transform: none;
}

/* Radice dello store: il titolo della vetrina lo mette la pagina come H2
   (main.css), cosi' resta un solo H1 ("Negozio online"). */
.page-shop:not(.is-store-inner) #store .ec-page-title__featured-products {
  display: none;
}

/* Sottocategorie: le mostra la sidebar. Le tile di Ecwid, senza immagini,
   diventerebbero gradienti colorati casuali (50 in "Componenti e accessori"). */
#store .ec-size .ec-store .grid__categories {
  display: none;
}

/* ---- Griglia prodotti dello store ----------------------------------------- */
/* Foto quadrate, testo a sinistra e schede medie arrivano da ecwid-config.js;
   qui cornice, tipografia, prezzi e bottone. */
#store .ec-size .ec-store .grid-product__wrap {
  overflow: hidden;
  height: 100%;
  border: var(--border-w) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-paper);
  transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

#store .ec-size .ec-store .grid-product:hover .grid-product__wrap {
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-header);
}

#store .ec-size .ec-store .grid-product__wrap-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 0 var(--sp-4);
}

#store .ec-size .ec-store .grid-product__image {
  margin: 0 0 var(--sp-4);
  border-bottom: var(--border-w) solid var(--c-line);
}

#store .ec-size .ec-store .grid-product__picture {
  transition: transform var(--dur-3) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #store .ec-size .ec-store .grid-product:hover .grid-product__picture {
    transform: scale(1.04);
  }
}

#store .ec-size .ec-store .grid-product__title,
#store .ec-size .ec-store .grid-product__subtitle,
#store .ec-size .ec-store .grid-product__price,
#store .ec-size .ec-store .grid-product__sku,
#store .ec-size .ec-store .grid-product__button {
  margin-left: var(--sp-4);
  margin-right: var(--sp-4);
  padding-left: 0;
  padding-right: 0;
}

#store .ec-size .ec-store .grid-product__title {
  margin-bottom: var(--sp-1);
  text-decoration: none;
}

#store .ec-size .ec-store .grid-product__title-inner {
  display: -webkit-box;
  overflow: hidden;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  text-align: left;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#store .ec-size .ec-store .grid-product__title:hover .grid-product__title-inner {
  color: var(--c-brand-ink);
}

#store .ec-size .ec-store .grid-product__subtitle {
  color: var(--c-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  text-align: left;
}

#store .ec-size .ec-store .grid-product__price {
  margin-top: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-xs);
  text-align: left;
}

#store .ec-size .ec-store .grid-product__price-value {
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: 1.2;
  white-space: nowrap;
}

/* Bottone "Acquista": contorno antracite, arancio al passaggio. In fondo alla scheda. */
#store .ec-size .ec-store .grid-product__button {
  margin-top: auto;
  padding-top: var(--sp-3);
}

#store .ec-size .ec-store .grid-product__button .form-control,
#store .ec-size .ec-store .grid-product__button .form-control__button {
  width: 100%;
}

#store .ec-size .ec-store .grid-product__button .form-control__button {
  min-height: var(--tap);
  border: var(--border-w-strong) solid var(--c-ink);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--c-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}

#store .ec-size .ec-store .grid-product__button .form-control__button:hover {
  border-color: var(--c-brand);
  background-color: var(--c-brand);
  color: var(--c-ink);
}

#store .ec-size .ec-store .grid-product__button .form-control__button-text {
  color: inherit;
}

/* Etichette sulle foto ("In saldo"): angolo in alto a sinistra */
#store .ec-size .ec-store .grid-product__label {
  top: var(--sp-3);
  left: var(--sp-3);
  right: auto;
}

/* ---- Home: link alla scheda prodotto (aggiunto da store.js) ---------------- */
.product-card__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(var(--control-h) + var(--sp-7));
  left: 0;
  z-index: 1;
  border-radius: var(--radius) var(--radius) 0 0;
}

.product-card__link:focus-visible {
  outline-offset: calc(var(--focus-w) * -1);
}

.product-card:has(.product-card__link:hover) .ecsp-title {
  color: var(--c-brand-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ---- Prodotti in evidenza su telefono: scheda orizzontale ---------------- */
/* Foto a sinistra, nome e prezzo a destra, bottone a tutta larghezza sotto:
   quattro prodotti in meno di due schermate invece di quattro. */
@media (max-width: 34.99em) {
  .product-card.is-loading {
    min-height: 13rem;
  }

  .product-card.is-loading::before {
    right: auto;
    width: 7.5rem;
  }

  .products .product-card .ecsp form {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: var(--sp-2) var(--sp-4);
    padding: var(--sp-4);
  }

  .products .product-card .ecsp form > div:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .products .product-card .ecsp .ecsp-title {
    grid-column: 2;
    grid-row: 1;
  }

  .products .product-card .ecsp form > div:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .products .product-card .ecsp form > div:last-child {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .products .product-card .ecsp .ecwid-SingleProduct-picture {
    aspect-ratio: 1 / 1;
  }
}