/** Scheda prodotto configurabile. */

.st-product { padding-block: var(--st-space-5); }
/* Le briciole di pane, con il separatore disegnato invece del carattere `›`:
   quello ereditava la dimensione del testo e a .82rem era un trattino incerto,
   diverso su ogni sistema. */
.st-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--st-muted); margin-bottom: var(--st-space-4);
}
.st-breadcrumb__sep { display: inline-flex; color: var(--st-border-strong); }
.st-breadcrumb a { color: var(--st-muted); text-decoration: none; }
.st-breadcrumb a:hover { color: var(--st-copper); }

.st-product__head {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--st-space-5); align-items: start;
    margin-bottom: var(--st-space-5);
}
.st-product__gallery-main {
    aspect-ratio: 4 / 3; border-radius: var(--st-radius);
    background: var(--st-sand); overflow: hidden;
}
.st-product__gallery-main img {  height: 100%;  }
.st-product__thumbs {

}
.st-product__thumbs img {

}
.st-product__title { margin: 0 0 var(--st-space-3); font-size: var(--st-fs-h1); }
.st-product__price { margin-bottom: var(--st-space-3); font-size: var(--st-fs-lead); }
.st-product__excerpt { color: var(--st-muted); margin-bottom: var(--st-space-4); }
.st-product__badges { display: flex; flex-wrap: wrap; gap: var(--st-space-2); }
.st-badge {
    padding: 5px 12px; border-radius: 100px;
    background: var(--st-ivory); border: 1px solid var(--st-border);
    font-size: .78rem; color: var(--st-charcoal);
}

.st-tabs { margin-top: var(--st-space-7); }
.st-tabs__nav {
    display: flex; flex-wrap: wrap; gap: var(--st-space-4);
    border-bottom: 1px solid var(--st-border); margin-bottom: var(--st-space-4);
}
.st-tabs__button {
    padding: 12px 2px; border: 0; background: none;
    font: inherit; font-size: .95rem; font-weight: 600;
    color: var(--st-muted); cursor: pointer;
    border-bottom: 2px solid transparent;
}
.st-tabs__button[aria-selected="true"] { color: var(--st-copper); border-bottom-color: var(--st-copper); }
.st-tabs__panel { font-size: .95rem; line-height: 1.75; max-width: 74ch; }
.st-tabs__panel[hidden] { display: none; }

/* ==================================================================== *
 * LA GALLERIA — tre elementi affiancati, forma variabile
 *
 * Le miniature erano cinque riquadri decorativi sotto l'immagine grande, con
 * la copertina ripetuta in testa. Ora sono una colonna a sinistra e sono
 * comandi veri; l'immagine grande domina; i due riquadri di dettaglio
 * compaiono solo se ci sono immagini a sufficienza.
 *
 * `data-forma` arriva dal PHP e dice quante immagini vere esistono: le colonne
 * si ridistribuiscono di conseguenza, invece di lasciare buchi o di riempirli
 * ripetendo la copertina.
 * ==================================================================== */

.st-product__gallery {
  display: grid;
  gap: 10px;
  align-items: start;
}

/*
 * PIENA: MINIATURE, LA GRANDE, E I DETTAGLI SOTTO
 *
 * Era su tre colonne — `76px minmax(0,1fr) 276px` — e sulla carta funziona.
 * Alla prova no: la colonna della galleria e' larga 573 px, quindi tolti 76 di
 * miniature, 276 di dettagli e venti di spazi, all'immagine **principale**
 * restavano 191. Misurata: 201x186, contro i 276x245 di ciascun dettaglio.
 *
 * L'immagine principale era piu' piccola delle secondarie. Non e' una
 * sproporzione da poco: e' la fotografia che deve vendere il prodotto,
 * ridotta a francobollo accanto a due comprimarie.
 *
 * Due colonne, e i dettagli scendono sotto la grande su una riga da due. La
 * principale passa da 191 a 477 px di larghezza, e i dettagli occupano lo
 * spazio verticale che sotto la galleria era vuoto.
 */
.st-product__gallery[data-forma="piena"],
.st-product__gallery[data-forma="dettaglio"] {
  grid-template-columns: 76px minmax(0, 1fr);
  grid-template-areas:
    "mini principale"
    "mini dettagli";
  align-content: start;
}

.st-product__gallery[data-forma="piena"] .st-galleria__mini,
.st-product__gallery[data-forma="dettaglio"] .st-galleria__mini { grid-area: mini; }

.st-product__gallery[data-forma="piena"] .st-galleria__principale,
.st-product__gallery[data-forma="dettaglio"] .st-galleria__principale { grid-area: principale; }

.st-product__gallery[data-forma="piena"] .st-galleria__dettagli,
.st-product__gallery[data-forma="dettaglio"] .st-galleria__dettagli {
  grid-area: dettagli;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* larga: niente dettagli, la grande si prende lo spazio */
.st-product__gallery[data-forma="larga"] {
  grid-template-columns: 76px minmax(0, 1fr);
}

/* sola: una fotografia e basta. Nessuna colonna di miniature per una
   miniatura: sarebbe un indice di un elemento. */
.st-product__gallery[data-forma="sola"],
.st-product__gallery[data-forma="vuota"] {
  grid-template-columns: minmax(0, 1fr);
}

/* --- colonna delle miniature ---------------------------------------- */

.st-galleria__mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 500px;
  overflow-y: auto;
  scrollbar-width: none;
}

.st-galleria__mini::-webkit-scrollbar { display: none; }

.st-galleria__mini-btn {
  position: relative;
  display: block;
  width: 76px;
  height: 76px;
  flex: none;
  padding: 0;
  border: 1px solid var(--st-p-riga);
  border-radius: 8px;
  background: var(--st-p-sabbia);
  overflow: hidden;
  cursor: pointer;
  opacity: .85;
  transition: opacity var(--st-transition), border-color var(--st-transition);
}

.st-galleria__mini-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-galleria__mini-btn:hover { opacity: 1; }

/* `box-sizing` tiene la miniatura a 76 anche col bordo da 2: senza, quella
   scelta diventerebbe piu' grande delle altre e la colonna ballerebbe. */
.st-galleria__mini-btn.is-attiva {
  border: 2px solid var(--st-p-rame);
  opacity: 1;
}

.st-galleria__mini-btn:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 2px;
}

/* --- immagine principale --------------------------------------------- */

.st-galleria__principale {
  position: relative;
  aspect-ratio: 540 / 500;
  border-radius: 10px;
  overflow: hidden;
  background: var(--st-p-sabbia);
}

.st-product__gallery[data-forma="sola"] .st-galleria__principale,
.st-product__gallery[data-forma="vuota"] .st-galleria__principale {
  aspect-ratio: 16 / 10;
}

.st-galleria__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-galleria__zoom {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Trentaquattro pixel erano sotto la soglia del bersaglio, e questo si preme
     col pollice sulla fotografia di un prodotto che si vuole vedere da vicino:
     mancarlo significa trascinare la pagina invece di ingrandire l'immagine. */
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--st-p-riga);
  border-radius: 8px;
  background: #fff;
  font: 400 11.5px/1 var(--st-font-body);
  color: var(--st-p-inchiostro);
  cursor: pointer;
}

.st-galleria__zoom:hover { border-color: #D9CFC2; }

.st-galleria__zoom:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 2px;
}

/* --- riquadri di dettaglio -------------------------------------------- */

.st-galleria__dettagli {
  display: grid;
  gap: 10px;
}

.st-galleria__dettaglio {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--st-p-sabbia);
  cursor: pointer;
  aspect-ratio: 276 / 245;
}

/* Con un solo dettaglio il riquadro prende tutta l'altezza della colonna
   invece di lasciare mezzo buco sotto di se'. */
.st-product__gallery[data-forma="dettaglio"] .st-galleria__dettaglio {
  aspect-ratio: 276 / 500;
}

.st-galleria__dettaglio img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-galleria__dettaglio:focus-visible {
  outline: 2px solid var(--st-p-rame);
  outline-offset: 2px;
}

/* --- schermi stretti --------------------------------------------------- */

@media (max-width: 1080px) {
  /* Le miniature passano sotto, in orizzontale: una colonna verticale accanto
     a un'immagine larga quanto lo schermo ruba larghezza a quello che conta. */
  .st-product__gallery,
  .st-product__gallery[data-forma="piena"],
  .st-product__gallery[data-forma="dettaglio"],
  .st-product__gallery[data-forma="larga"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .st-galleria__principale { order: 1; }
  .st-galleria__mini { order: 2; flex-direction: row; max-height: none; overflow-x: auto; }
  .st-galleria__dettagli { order: 3; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-product__gallery[data-forma="dettaglio"] .st-galleria__dettaglio { aspect-ratio: 276 / 245; }
}

/* --- la vista a schermo intero ---------------------------------------- */

.st-lente {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 48px;
  background: rgba(20, 18, 16, .92);
}

.st-lente img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.st-lente__chiudi,
.st-lente__freccia {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(20, 18, 16, .55);
  color: #fff;
  /* VENTIQUATTRO E' LA MISURA DI UN'ICONA, NON DI UN TESTO
     Il contenuto di questi tre pulsanti e' «×», «‹», «›»: un glifo dentro un
     cerchio da 44 px, come la freccia che disegneremmo in un SVG. La scala
     tipografica di `tokens.css` vale per cio' che si legge; qui il numero e'
     la dimensione del disegno, e portarlo a 18 farebbe una crocetta persa in
     mezzo al suo bersaglio. Stesso ragionamento della bollicina del carrello
     in `chrome.css` e del pallino del filtro colore in `catalog.css`. */
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.st-lente__chiudi { top: 20px; right: 20px; }
.st-lente__freccia--prec { left: 20px; top: 50%; transform: translateY(-50%); }
.st-lente__freccia--succ { right: 20px; top: 50%; transform: translateY(-50%); }

.st-lente__chiudi:hover,
.st-lente__freccia:hover { background: rgba(20, 18, 16, .85); }

.st-lente__chiudi:focus-visible,
.st-lente__freccia:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ==================================================================== *
 * IL RITMO VERTICALE DELLA SCHEDA
 *
 * Gli spazi erano ereditati da tre fogli diversi e non cadevano su nessuna
 * scala: margini da 6, 16, 24 e 40 px mescolati, e paragrafi di descrizione
 * praticamente attaccati fra loro. Qui tutto si riporta ai sei valori del
 * sistema.
 * ==================================================================== */

/* --- colonna d'acquisto ------------------------------------------------ */

.st-product__category {   }

.st-product-layout .st-product__title {
  margin: 0 0 14px;
  line-height: 1.15;
}

/* L'intervallo di produzione e le pastiglie sono due blocchi diversi e
   avevano lo stesso stacco: si leggevano come uno solo. */
.st-product__range { margin: 0 0 16px; }
.st-product__badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }

/* --- il blocco che porta al configuratore ------------------------------ */

.st-avvio__azioni { display: grid; gap: 10px; margin-top: 20px; }
.st-avvio__nota { margin: 14px 0 0; font-size: var(--st-fs-micro); line-height: 1.55; color: var(--st-p-grigio); }
.st-avvio__testo { margin-bottom: 4px; }
.st-avvio__titolo { margin: 6px 0 8px; }
.st-avvio__sotto { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--st-p-grigio); }

/* --- sezioni informative ------------------------------------------------ */

/*
 * I paragrafi della descrizione arrivano dal catalogo storico e non hanno
 * margini propri: uscivano come un muro di testo in cui non si distingueva
 * dove finiva un concetto e cominciava il successivo.
 */
.st-product__tabs-panel p { margin: 0 0 14px; line-height: 1.75; }
.st-product__tabs-panel p:last-child { margin-bottom: 0; }
.st-product__tabs-panel ul,
.st-product__tabs-panel ol { margin: 0 0 14px; padding-left: 20px; line-height: 1.7; }
.st-product__tabs-panel li + li { margin-top: 6px; }
.st-product__tabs-panel strong { font-weight: 600; }

/* --- correlati ---------------------------------------------------------- */

/*
 * I titoli su una o due righe spingevano il prezzo ad altezze diverse: tre
 * schede affiancate con il prezzo scalinato sembrano tre schede storte.
 * L'altezza minima del titolo le riallinea senza tagliare niente.
 */
.st-related__title,
.st-related .st-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.7em;
  line-height: 1.35;
  margin: 0 0 10px;
}

.st-related { margin-top: var(--st-xxl, 48px); }
.st-related > h2 { margin: 0 0 20px; }

/*
 * LA COLONNA DEI DETTAGLI: RAPPORTO FISSO, E BASTA
 *
 * Due riquadri da 245 px piu' dieci di distacco fanno 500 contro i 517
 * dell'immagine principale: diciassette pixel di bianco in fondo.
 *
 * Ho provato due volte a farli combaciare — `align-self: stretch` sui
 * dettagli, poi `align-self: start` sulla galleria — e li ho peggiorati
 * entrambe le volte, portando la colonna a 1012 px. La ragione e' che l'area
 * della galleria copre due righe della pagina e la sua altezza la decide la
 * colonna destra, non l'immagine: «fino in fondo» li' dentro significa un
 * fondo diverso da quello che si vede.
 *
 * Il rapporto fisso sbaglia di diciassette pixel su cinquecento. Le due
 * soluzioni "giuste" sbagliavano di cinquecento. Resta il rapporto fisso,
 * finche' qualcuno non trova un modo che regga a tutte le larghezze — e
 * quando lo cerchera', questo commento gli dice cosa e' gia' stato provato.
 */

/*
 * Una fascia con una voce sola non si stira.
 *
 * Le rassicurazioni verificate su questo prodotto possono essere una: stirata
 * su 1336 px diventa un riquadro quasi vuoto con quattro parole a sinistra, e
 * sembra che le altre non si siano caricate. Con poche voci il riquadro si
 * stringe attorno a cio' che ha davvero.
 */
.st-product__claims:has(> :only-child) {
  display: inline-flex;
  width: auto;
}

@media (max-width: 1080px) {
  .st-product__gallery[data-forma="piena"] .st-galleria__dettaglio,
  .st-product__gallery[data-forma="dettaglio"] .st-galleria__dettaglio {
    aspect-ratio: 276 / 245;
    height: auto;
  }
}

/* ==================================================================== *
 * I LIMITI DI PRODUZIONE ACCANTO AL PREZZO
 *
 * L'audit sui 95 prodotti ha trovato un solo attributo tecnico verificato,
 * strutturato e **presente su tutti**: larghezza e altezza minima e massima
 * realizzabili. Tutto il resto — filtrante, ignifugo, lavabile — non esiste
 * come dato.
 *
 * E' anche il dato che risponde alla prima domanda di chi compra su misura:
 * «la mia finestra ci sta?». Oggi era una riga grigia in corpo minore sotto il
 * titolo, cioe' l'unica cosa certa che abbiamo, scritta come una nota.
 *
 * Qui diventa un riquadro accanto al prezzo, con le due misure incolonnate e
 * leggibili. Non e' decorazione: e' il filtro che evita un ordine impossibile
 * e la telefonata che ne segue.
 * ==================================================================== */

.st-product__range {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  padding: 12px 14px;
  list-style: none;
  border: 1px solid var(--st-p-riga, #EAE4DC);
  border-radius: var(--st-r-campo, 8px);
  background: var(--st-p-crema, #FAF6F1);
}

.st-product__range li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .8125rem;
  color: var(--st-p-grigio, #6F6A64);
  font-variant-numeric: tabular-nums;
}

.st-product__range li::before {
  content: "";
  display: none;
}

/*
 * IL PRODOTTO A SOLO PREVENTIVO LO DICE SUBITO
 *
 * Trentacinque prodotti su novantacinque non si comprano online. Chi ci arriva
 * aspettandosi un carrello lo scopriva in fondo, dopo aver configurato: e' il
 * momento peggiore per dirlo, perche' il lavoro e' gia' stato fatto.
 *
 * La pastiglia sale accanto al prezzo, dove il prezzo dice gia' «su
 * preventivo»: le due cose si spiegano a vicenda invece di contraddirsi a
 * distanza di due schermate.
 */
.st-badge--preventivo {
  background: var(--st-p-rame-tenue, #FBF1E8);
  border-color: rgba(180, 90, 23, .3);
  color: var(--st-p-rame-testo, #AE4C0B);
  font-weight: 500;
}

/* Il blocco delle linguette sparisce del tutto quando non ha contenuto: senza
   questa riga resterebbe il riquadro con il bordo e dentro il vuoto. */
.st-tabs-riga[hidden],
.st-tabs__nav[hidden] { display: none !important; }

.st-product__range li strong {
  font-weight: 500;
  color: var(--st-p-inchiostro, #23201D);
  text-align: right;
}

/*
 * L'avviso «su preventivo».
 *
 * Fondo crema e non giallo d'allarme: non e' un problema del prodotto, e'
 * come si compra. Un riquadro d'avviso lo farebbe leggere come un difetto,
 * quando su una tenda da tre metri la verifica del reparto e' esattamente
 * cio' che il cliente vuole.
 */
.st-modo-preventivo {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid rgba(180, 90, 23, .24);
  border-radius: var(--st-r-campo, 8px);
  background: var(--st-p-crema, #FAF6F1);
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--st-p-grigio, #6F6A64);
}

.st-modo-preventivo svg { flex: none; color: var(--st-p-rame-testo, #AE4C0B); margin-top: 1px; }
.st-modo-preventivo strong { display: block; color: var(--st-p-inchiostro, #23201D); font-weight: 500; }

/* La pastiglia sulla scheda dei correlati. */
.st-card__modo { display: inline-block; margin-top: 8px; font-size: .6875rem; }

/* ====================================================================
 * LE MISURE REALIZZABILI E I PUNTI FERMI: FORMA, POSTO, MARGINI
 *
 * Com'erano. Le misure stavano in un riquadro crema col bordo, testo a 13 px,
 * etichetta a sinistra e valore schiacciato a destra dell'altro capo di una
 * colonna larga 384 px. Sotto, tre pastiglie che andavano a capo due piu' una
 * e lasciavano un buco in fondo alla riga. Fra prezzo, riquadro e pastiglie i
 * distacchi erano 18, 0 e 22: tre valori diversi per tre stacchi uguali.
 *
 * Perche' erano sbagliate, non solo brutte:
 *
 * 1. «65–310 cm» e' il dato che risponde alla prima domanda di chi compra su
 *    misura — ci sta nella mia finestra? — ed era scritto piu' piccolo del
 *    testo corrente, dentro un riquadro grigio. La forma diceva «postilla»
 *    mentre il contenuto diceva «questo decide se compri».
 *
 * 2. Etichetta a un capo e valore all'altro e' la forma della ricevuta: si
 *    legge bene quando le righe sono dieci e incolonnate. Con due righe in una
 *    colonna stretta l'occhio attraversa il vuoto due volte per unire due
 *    parole che stanno insieme.
 *
 * 3. Tre pastiglie che vanno a capo due piu' una non sono tre pastiglie: sono
 *    due pastiglie e un avanzo. Il buco a destra si legge come qualcosa che
 *    manca.
 *
 * Come sono adesso. Le misure diventano due dati affiancati — etichetta
 * piccola sopra, cifra grande sotto, un filetto in mezzo — che si leggono in
 * un colpo d'occhio senza attraversare niente. I punti fermi diventano un
 * elenco incolonnato con la spunta: tre righe pari, nessun avanzo, e la forma
 * dell'elenco verificato invece di quella dell'etichetta decorativa.
 *
 * I distacchi seguono una scala sola — 16 dopo il prezzo, 18 dopo le misure,
 * 20 dopo i punti fermi — che cresce scendendo verso il pulsante.
 * ==================================================================== */

.st-product__range {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
  gap: 0;
  margin: 0 0 18px;
  padding: 14px 0 0;
  list-style: none;
  border: 0;
  border-top: 1px solid var(--st-p-riga, #EAE4DC);
  border-radius: 0;
  background: none;
}

.st-product__range li {
  display: block;
  padding-right: 16px;
  font-size: inherit;
  color: inherit;
}

/* Il filetto separa, il riquadro conteneva. Fra due dati affiancati serve la
   prima cosa: dice che sono due, senza chiuderli dentro qualcosa. */
.st-product__range li + li {
  padding-left: 16px;
  border-left: 1px solid var(--st-p-riga, #EAE4DC);
}

.st-product__range li span {
  display: block;
  font-size: var(--st-fs-micro);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-p-debole, #726C64);
}

.st-product__range li strong {
  display: block;
  margin-top: 4px;
  font-size: var(--st-fs-lead);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  color: var(--st-p-inchiostro, #23201D);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ i punti fermi
   Restano pastiglie solo dove la pastiglia serve davvero: «su preventivo» e'
   uno stato del prodotto, non una qualita', e deve continuare a distinguersi
   da tutto il resto. */

.st-product__badges {
  display: grid;
  gap: 8px;
  margin: 0 0 20px;
}

.st-product__badges .st-badge:not(.st-badge--preventivo) {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: .875rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--st-p-inchiostro, #23201D);
}

/*
 * La spunta e' disegnata nel foglio, non aggiunta al documento: sono tre
 * segni decorativi, e tre elementi in piu' per ogni scheda prodotto — che un
 * lettore di schermo dovrebbe poi imparare a saltare — si pagano piu' di
 * quanto valgano.
 */
.st-product__badges .st-badge:not(.st-badge--preventivo)::before {
  content: "";
  flex: 0 0 16px;
  height: 16px;
  background: var(--st-p-rame, #B45A17);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 16px;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 16px;
}

/* Il prezzo stacca meno delle misure: prezzo e misure sono la stessa risposta
   — quanto costa e se ci sta — e vanno lette come un blocco solo. */
.st-product__intro .st-product__price { margin-bottom: 16px; }