/*
 * sp-base.css — fondamenta della pagina prodotto (sostituisce Bootstrap).
 *
 * REGOLE
 *  - Ogni selettore parte da .sp-product: il blocco viene inserito in una pagina
 *    PrestaShop che carica ancora Bootstrap 3, e così le nostre regole vincono
 *    sulle sue (specificità 0,2,0) senza toccare il resto del negozio.
 *  - Niente rem: Bootstrap 3 imposta html { font-size: 10px }, quindi 1rem
 *    varrebbe 10px dentro PrestaShop e 16px fuori. Solo px.
 *  - Classi in BEM leggero: .sp-blocco, .sp-blocco__elemento, .sp-blocco--variante;
 *    stati con .is-* (is-active, is-selected, is-disabled, is-hidden, has-error).
 */

/* ========== TOKENS ==========
   Nuovo layout (modelo-volantino-new, Claude Design): Montserrat, testo quasi nero,
   blu #4F8ED1 per scelte, valori, radio, tab e azioni; rosso #DF3A3B per il prezzo
   pieno barrato e "Richiedi un preventivo"; verde #B2C928 per le stelle. */
.sp-product
{
    --sp-color-text: #1d1d1d;
    --sp-color-text-strong: #222;
    --sp-color-text-muted: #555;
    --sp-color-text-soft: #777;
    --sp-color-text-faint: #999;
    --sp-color-ink: var(--sp-color-text);
    --sp-color-ink-strong: var(--sp-color-text-strong);
    --sp-color-ink-muted: var(--sp-color-text-soft);
    --sp-color-ink-soft: #8a8a8a;
    --sp-color-ink-faint: #aeb3b9;
    --sp-color-description: var(--sp-color-text);
    --sp-color-line: #d6d6d6;
    --sp-color-line-soft: #e2e2e2;
    --sp-color-table-line: #ccc;
    --sp-color-border: #d6d6d6;
    --sp-color-panel-border: #e2e2e2;
    --sp-color-stage: #eee;
    --sp-color-surface: #fff;
    --sp-color-surface-muted: #ececec;
    --sp-color-accent: #4f8ed1;
    --sp-color-accent-dark: #2f6fb3;
    --sp-color-accent-soft: #eef4fb;
    --sp-color-red: #df3a3b;
    --sp-color-star: #b2c928;
    --sp-color-info: #b5b5b5;
    --sp-color-tooltip: #8a8a8a;
    --sp-color-primary: var(--sp-color-accent);
    --sp-color-primary-dark: var(--sp-color-accent-dark);
    --sp-color-success: var(--sp-color-accent);
    --sp-color-success-dark: var(--sp-color-accent-dark);
    --sp-color-dark: #5e6064;
    --sp-color-error: #e53558;
    --sp-color-error-bg: #fde3e8;
    --sp-color-warning: #8a5a00;
    --sp-color-warning-bg: #fff4d6;
    --sp-paper-tag-color: var(--sp-color-text);
    --sp-color-tag: var(--sp-color-text);
    --sp-color-tag-strong: var(--sp-color-text-strong);
    --sp-color-tag-muted: var(--sp-color-text-muted);
    --sp-color-tag-soft: var(--sp-color-text-soft);
    --sp-color-tag-faint: var(--sp-color-text-faint);
    --sp-color-tag-primary: var(--sp-color-primary);
    --sp-color-tag-primary-dark: var(--sp-color-primary-dark);
    --sp-color-tag-success: var(--sp-color-success);
    --sp-color-tag-success-dark: var(--sp-color-success-dark);
    --sp-color-tag-danger: var(--sp-color-red);
    --sp-radius-control: 8px;
    --sp-radius-card: 20px;
    --sp-radius-tile: 10px;
    --sp-font-family: "Montserrat", sans-serif;
}

/* ========== RESET (solo dentro il blocco) ========== */
.sp-product,
.sp-product *,
.sp-product *::before,
.sp-product *::after
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.sp-product
{
    padding: 16px 0 60px;
    background: var(--sp-color-surface);
    color: var(--sp-color-text);
    font-family: var(--sp-font-family);
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

/* Unica regola fuori da .sp-product: nella pagina prodotto di PrestaShop il frammento sta in
   #ct_product > #columns.container (Bootstrap 3, max 1170px). Solo quando contiene il blocco,
   #columns si allarga fino a 1700px; le altre pagine del negozio non cambiano. In CSS e non
   in JS: la pagina si apre già larga, senza il salto dopo l'onload. */
#columns.container:has(.sp-product-host, .sp-product)
{
    width: 100%;
    max-width: 1700px;
    padding-left: 15px;
    padding-right: 15px;
}

/* Le classi con display:flex vincerebbero sul [hidden] del browser. */
.sp-product [hidden]
{
    display: none !important;
}

/* Bootstrap 3 mette le label in grassetto con margine. */
.sp-product label
{
    display: inline;
    max-width: none;
    font-weight: inherit;
}

.sp-product button,
.sp-product input,
.sp-product select
{
    font-family: inherit;
    line-height: normal;
}

.sp-product a
{
    color: var(--sp-color-accent);
}

.sp-product a:hover
{
    color: var(--sp-color-accent-dark);
}

/* ========== LAYOUT ==========
   Come il modello: contenitore fino a 1280px; da 960px colonna stretta (34%) a
   sinistra con galleria, preventivo, descrizione e video, opzioni a destra, 28px
   fra le due. Sotto i 960px tutto in colonna, opzioni per prime.
   Sotto i 760px (mobile) le linguette Configura / Dettagli / Immagini mostrano
   una sezione alla volta (setupMobileTabs).
   Packaging (--wide-preview): anteprima 3D/2D larga (58/42), perché cambia con
   le misure; descrizione sotto le opzioni. */
.sp-product .sp-layout
{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tabs" "config" "preview" "description" "reviews";
    gap: 28px;
    width: min(100%, 1900px);
    /*max-width: 1280px;*/
    margin: 0 auto;
    padding: 0 0px;
}

.sp-product .sp-layout__preview,
.sp-product .sp-layout__config,
.sp-product .sp-layout__description
{
    min-width: 0;
}

.sp-product .sp-mobile-tabs           { grid-area: tabs; }
.sp-product .sp-layout__preview       { grid-area: preview; display: flex; flex-direction: column; gap: 24px; }
.sp-product .sp-layout__config        { grid-area: config; display: flex; flex-direction: column; gap: 28px; }
.sp-product .sp-layout__description   { grid-area: description; }
.sp-product .sp-layout__reviews       { grid-area: reviews; min-width: 0; }

@media (min-width: 960px)
{
    .sp-product .sp-layout
    {
        grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        grid-template-areas: "preview config" "description config" "reviews config";
        gap: 24px 28px;
        align-items: start;
    }

    .sp-product .sp-layout--wide-preview
    {
        grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        grid-template-areas: "preview config" ". description" ". reviews";
    }
}

/* Pacchetto: anche sotto i 960px l'anteprima viene prima delle misure. */
@media (max-width: 959px)
{
    .sp-product .sp-layout--wide-preview
    {
        grid-template-areas: "preview" "config" "description" "reviews";
    }
}

/* Linguette mobile: pillole con bordo blu, quella attiva piena. */
.sp-product .sp-mobile-tabs
{
    display: flex;
    justify-content: space-between;
    gap: clamp(4px, 1.5vw, 16px);
    margin-bottom: -8px;
}

.sp-product .sp-mobile-tabs__tab
{
    flex: 0 1 auto;
    min-width: 0;
    padding: 4px clamp(6px, 2.4vw, 16px);
    font-size: clamp(9px, 2.7vw, 13px);
    border: 1.5px solid var(--sp-color-accent);
    border-radius: 999px;
    background: #fff;
    color: #888;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.sp-product .sp-mobile-tabs__tab.is-active
{
    background: var(--sp-color-accent);
    color: #fff;
}

@media (min-width: 760px)
{
    .sp-product .sp-mobile-tabs
    {
        display: none !important;
    }
}

@media (max-width: 759px)
{
    .sp-product[data-sp-mobile-section="config"] [data-sp-section]:not([data-sp-section="config"]),
    .sp-product[data-sp-mobile-section="details"] [data-sp-section]:not([data-sp-section="details"]),
    .sp-product[data-sp-mobile-section="images"] [data-sp-section]:not([data-sp-section="images"]),
    .sp-product[data-sp-mobile-section="reviews"] [data-sp-section]:not([data-sp-section="reviews"])
    {
        display: none;
    }

    .sp-product .sp-layout
    {
        grid-template-areas: "tabs" "preview" "config" "description" "reviews";
    }

    /* Una sezione alla volta: le righe vuote della griglia non devono sommare il gap. */
    .sp-product[data-sp-mobile-section] .sp-layout
    {
        row-gap: 0;
    }

    .sp-product[data-sp-mobile-section] .sp-mobile-tabs
    {
        margin-bottom: 20px;
    }
}

/* ========== ICONE ========== */
.sp-product .sp-icon--zoom-in::before
{
    content: "+";
    font-size: 14px;
    font-weight: bold;
}

.sp-product .sp-icon--zoom-out::before
{
    content: "−";
    font-size: 14px;
    font-weight: bold;
}

.sp-product .sp-icon--refresh::before
{
    content: "↻";
    font-size: 18px;
}

.sp-product .sp-icon--search,
.sp-product .sp-icon--check
{
    display: block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
}

/* Lente e ✓ disegnate in SVG (maschera, colore = currentColor): a differenza dei
   caratteri "🔍"/"✓" restano esattamente al centro del cerchio che le contiene. */
.sp-product .sp-icon--search
{
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 10l3.6 3.6' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.8' cy='6.8' r='4.3' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M10 10l3.6 3.6' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sp-product .sp-icon--check
{
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ⓘ — `info-circle-fill` di Bootstrap Icons come maschera: prende il colore di
   chi la contiene (currentColor), grigia nei campi e bianca sopra il blu. */
.sp-product .sp-icon--info
{
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: -1px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Camion (Bootstrap Icons `truck`) per la riga "Spedizione". */
.sp-product .sp-icon--truck
{
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    color: #777;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5zm1.294 7.456A2 2 0 0 1 4.732 11h5.536a2 2 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456M12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 3.5A1.5 1.5 0 0 1 1.5 2h9A1.5 1.5 0 0 1 12 3.5V5h1.02a1.5 1.5 0 0 1 1.17.563l1.481 1.85a1.5 1.5 0 0 1 .329.938V10.5a1.5 1.5 0 0 1-1.5 1.5H14a2 2 0 1 1-4 0H5a2 2 0 1 1-3.998-.085A1.5 1.5 0 0 1 0 10.5zm1.294 7.456A2 2 0 0 1 4.732 11h5.536a2 2 0 0 1 .732-.732V3.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5v7a.5.5 0 0 0 .294.456M12 10a2 2 0 0 1 1.732 1h.768a.5.5 0 0 0 .5-.5V8.35a.5.5 0 0 0-.11-.312l-1.48-1.85A.5.5 0 0 0 13.02 6H12zm-9 1a1 1 0 1 0 0 2 1 1 0 0 0 0-2m9 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ========== OPZIONI ==========
   Nuovo modello: niente scheda bordata, solo le righe separate da linee. */
.sp-product .sp-panel--top
{
    display: flex;
    flex-direction: column;
    padding: 0 clamp(0px, 1.5vw, 16px);
}

/* ========== RIGA DI CAMPO ==========
   Come il modello: etichetta 14px in grassetto (colonna da 200px), valore blu in
   grassetto, ⓘ grigia in fondo alla riga; righe separate da una linea #e2e2e2
   (18px sopra e sotto). Quando non c'è spazio (mobile) l'etichetta va sulla prima
   riga e valore + ⓘ sotto. Griglie di immagini, errori e note vanno a tutta
   larghezza. Gli errori del motore dei prezzi vanno in [data-sp-errors]. */
.sp-product .sp-field
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    padding: 18px 0;
    border-bottom: 1px solid var(--sp-color-line-soft);
}

.sp-product .sp-field:last-child
{
    border-bottom: none;
}

.sp-product .sp-field__label
{
    flex: 1 1 200px;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--sp-color-text-strong);
}

.sp-product .sp-field__body
{
    order: 1;
    flex: 1 1 200px;
    min-width: 0;
    font-size: 14px;
    color: var(--sp-color-text-strong);
}

/* La ⓘ chiude la riga del valore: con il valore va a capo anche lei. */
.sp-product .sp-field__info
{
    order: 2;
    flex: 0 0 14px;
    display: flex;
    justify-content: flex-end;
    margin-left: -12px;
}

.sp-product .sp-field__info:empty
{
    visibility: hidden;
}

.sp-product .sp-field > .sp-carousel,
.sp-product .sp-field > .sp-field__note,
.sp-product .sp-field > .sp-field__errors--wide
{
    order: 3;
}

@media (max-width: 759px)
{
    .sp-product .sp-field__label
    {
        flex-basis: 100%;
    }
}

/* Valore di una riga informativa (testo fisso, nessuna scelta). */
.sp-product .sp-field__value
{
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--sp-color-text-strong);
}

/* Testo che si apre sotto la riga (es. spiegazione di "Soddisfatto o ristampato"). */
.sp-product .sp-field__note
{
    flex: 0 0 100%;
    color: var(--sp-color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* "Servizi aggiuntivi": una riga per servizio, nome + prezzo a sinistra, Sì/No a destra. */
.sp-product .sp-extra-service
{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-product .sp-extra-service + .sp-extra-service
{
    margin-top: 10px;
}

.sp-product .sp-extra-service__name
{
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--sp-color-text-strong);
}

.sp-product .sp-extra-service__price
{
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--sp-color-text-muted);
}

/* Campo cambiato dal motore dei prezzi (valore forzato o opzioni ristrette):
   fondo azzurro che sfuma in 3.5s e "aggiornato" accanto all'etichetta, così il
   cliente vede cosa è cambiato dopo la sua scelta (alertfieldgray del legacy).
   Margine negativo + padding: il fondo esce un po' ai lati senza spostare nulla. */
.sp-product .sp-field.is-highlighted
{
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px;
    animation: sp-field-updated 3.5s ease-out forwards;
}

/* Selo "aggiornato": per ora nascosto (scelta del negozio, resta solo il fondo).
   Per riattivarlo: display: inline-block. */
.sp-product .sp-field.is-highlighted .sp-field__label::after
{
    content: "aggiornato";
    display: none;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--sp-color-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 14px;
    text-transform: uppercase;
    vertical-align: 2px;
    animation: sp-field-updated-badge 3.5s ease-out forwards;
}

@keyframes sp-field-updated
{
    0%, 55% { background-color: rgba(79, 142, 209, .14); }
    100%    { background-color: rgba(79, 142, 209, 0); }
}

@keyframes sp-field-updated-badge
{
    0%, 75% { opacity: 1; }
    100%    { opacity: 0; }
}

@media (prefers-reduced-motion: reduce)
{
    .sp-product .sp-field.is-highlighted,
    .sp-product .sp-field.is-highlighted .sp-field__label::after
    {
        animation: none;
    }

    .sp-product .sp-field.is-highlighted
    {
        background-color: rgba(79, 142, 209, .14);
    }
}

/* ========== ERRORI DI CAMPO ========== */
.sp-product .sp-field.has-error
{
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 8px;
    background: var(--sp-color-error-bg);
}

.sp-product .sp-field__errors
{
    font-size: 12px;
}

.sp-product .sp-field__errors:empty
{
    display: none;
}

.sp-product .sp-field__errors--wide
{
    flex: 0 0 100%;
}

.sp-product .sp-field__error
{
    background: var(--sp-color-error);
    color: #fff;
    font-weight: 700;
    line-height: 1.45;
    padding: 7px 14px;
    margin-bottom: 9px;
    border-radius: 8px;
    /* il messaggio delle misure ha due righe separate da \n (textContent) */
    white-space: pre-line;
}

/* Avviso del motore (allerta): informa, non blocca il prezzo. */
.sp-product .sp-field__warning
{
    background: var(--sp-color-warning-bg);
    color: var(--sp-color-warning);
    font-weight: 700;
    line-height: 1.45;
    padding: 7px 14px;
    margin-bottom: 9px;
    border-radius: 8px;
    white-space: pre-line;
}

.sp-product .has-error .sp-input-group
{
    background: #fff;
}

/* ========== TOOLTIP (ⓘ) ==========
   Cerchio grigio da 14px con la "i"; il fumetto bianco, bordato, si apre a sinistra
   dell'icona (che sta in fondo alla riga); su mobile sotto, allineato a destra. */
.sp-product .sp-tooltip
{
    position: relative;
    display: inline-flex;
    cursor: help;
    color: var(--sp-color-info);
}

.sp-product .sp-tooltip .sp-icon--info
{
    width: 14px;
    height: 14px;
    vertical-align: middle;
}

.sp-product .sp-tooltip__content
{
    display: none;
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    width: max-content;
    max-width: 320px;
    padding: 8px 16px;
    border: 1px solid var(--sp-color-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    color: var(--sp-color-tooltip);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
}

.sp-product .sp-tooltip__content b
{
    display: block;
    margin-bottom: 2px;
    color: var(--sp-color-text-muted);
    font-weight: 700;
}

.sp-product .sp-tooltip:hover .sp-tooltip__content
{
    display: block;
}

.sp-product .sp-tooltip__detail
{
    display: block;
}

@media (max-width: 759px)
{
    .sp-product .sp-tooltip__content
    {
        right: -4px;
        top: calc(100% + 8px);
        transform: none;
        max-width: min(320px, calc(100vw - 40px));
    }
}

/* ========== CONTROLLI DI FORM ========== */
/* Campo con unità ("Cm 00"): niente bordo, come le altre righe. */
.sp-product .sp-input-group
{
    display: flex;
    align-items: center;
    gap: 8px;
    height: 30px;
    background: transparent;
}

.sp-product .sp-input-group--quantity
{
    display: inline-flex;
    width: 160px;
}

.sp-product .sp-input-group__unit
{
    flex: 0 0 auto;
    margin-right: 8px;
    font-size: 14px;
    color: var(--sp-color-text-strong);
}

.sp-product .sp-input-group__input
{
    width: 100%;
    min-width: 0;
    height: 100%;
    border: none;
    border-bottom: 1px dashed transparent;
    outline: none;
    box-shadow: none;
    background: transparent;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-color-accent);
    text-align: left;
}

.sp-product .sp-input-group__input:focus
{
    border-bottom-color: var(--sp-color-accent);
}

.sp-product .sp-input-group__input::placeholder
{
    color: var(--sp-color-text-faint);
}

.sp-product .sp-radio-group
{
    display: flex;
    align-items: center;
    gap: 14px;
}

.sp-product .sp-radio
{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-color-text-strong);
    cursor: pointer;
}

/* Radio: anello blu, pallino blu quando è scelto. */
/* Specificità alta e !important sui colori: il tema del negozio ha regole sugli
   input[type=radio] che nel fragment incorporato rendevano il pallino nero. */
.sp-product input.sp-radio__input[type="radio"]
{
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1.5px solid var(--sp-color-accent) !important;
    border-radius: 50%;
    -webkit-appearance: none;
    appearance: none;
    accent-color: var(--sp-color-accent);
    background: #fff !important;
    box-shadow: none;
    cursor: pointer;
}

.sp-product input.sp-radio__input[type="radio"]:checked
{
    background: radial-gradient(circle, var(--sp-color-accent) 0 3.5px, #fff 4px) !important;
}

/* Nel negozio uniform.js avvolge il radio in div.radio > span (sprite nero) e rende
   trasparente l'input: il wrapper sparisce dal layout e l'input resta quello nostro. */
.sp-product .sp-radio div.radio,
.sp-product .sp-radio div.radio span
{
    display: contents !important;
    background: none !important;
}

.sp-product .sp-radio div.radio input.sp-radio__input
{
    opacity: 1 !important;
    position: static !important;
    filter: none !important;
}

.sp-product .sp-radio__input:focus-visible
{
    outline: 2px solid var(--sp-color-accent);
    outline-offset: 2px;
}

/* Gruppo con una sola opzione: solo il testo. */
.sp-product .sp-fixed-value
{
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-color-text-strong);
}

/* ========== BOTTONI ========== */
.sp-product .sp-btn
{
    display: inline-block;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 9px 40px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 999px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    cursor: pointer;
}

.sp-product .sp-btn--cart
{
    background: var(--sp-color-accent);
    border: none;
    color: #fff;
}

.sp-product .sp-btn--cart:hover
{
    background: var(--sp-color-accent-dark);
    color: #fff;
}

.sp-product .sp-btn--secondary
{
    background: #fff;
    border-color: var(--sp-color-line);
    color: var(--sp-color-text-strong);
}

.sp-product .sp-btn--secondary:hover
{
    border-color: var(--sp-color-text-strong);
}

/* ========== CARRELLO ========== */
/* Mentre si aggiunge al carrello i prezzi non si cliccano due volte. */
.sp-product.is-adding-to-cart .sp-price-tiers
{
    opacity: .5;
    pointer-events: none;
}

/* Messaggio nel modale dopo l'aggiunta (#cartpupup dei tpl). */
.sp-product .sp-cart-added
{
    padding: 12px 8px;
    text-align: center;
}

.sp-product .sp-cart-added__title
{
    margin: 0 0 20px;
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-color-text-strong);
}

.sp-product .sp-cart-added__actions
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.sp-product .sp-icon-btn
{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--sp-color-accent);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

.sp-product .sp-icon-btn:hover
{
    background: var(--sp-color-accent-dark);
}

/* ========== DESCRIZIONE (HTML dal back-office) ==========
   Come il modello: 13px, interlinea 1.6, #333, allineato a sinistra.
   Le regole stanno sul contenitore: il testo del back-office non è sempre in <p>. */
.sp-product .sp-description
{
    font-size: 13px;
    line-height: 1.6;
    color: #333;
    text-wrap: pretty;
}

.sp-product .sp-description p
{
    margin-bottom: 8px;
}

.sp-product .sp-description b,
.sp-product .sp-description strong
{
    font-weight: 700;
    color: inherit;
}

@media (max-width: 759px)
{
    .sp-product .sp-description
    {
        font-size: 12px;
    }
}