/*
 * sp-components.css — componenti comuni a tutte le tipologie di prodotto.
 * Stesse regole di sp-base.css: tutto sotto .sp-product, solo px.
 */

/* ========== ANTEPRIMA (base) ========== */
.sp-product .sp-stage
{
    position: relative;
    height: 430px;
    background: var(--sp-color-stage);
    border-radius: 16px;
    overflow: hidden;
    user-select: none;
}

/* ========== GALLERIA ==========
   Come il nuovo modello: immagine quadrata con angoli da 16px; sotto, quattro
   miniature per pagina (carosello con i pallini se sono di più) su desktop, i
   pallini delle immagini su mobile. Si scorre di lato (scroll-snap). */
.sp-product .sp-gallery
{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sp-product .sp-stage--image
{
    display: flex;
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.sp-product .sp-stage--image::-webkit-scrollbar
{
    display: none;
}

.sp-product .sp-stage__image
{
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
}

.sp-product .sp-stage__placeholder
{
    margin: auto;
    color: #b4b9bf;
    font-size: 13px;
}

.sp-product .sp-gallery__carousel
{
    gap: 4px;
}

.sp-product .sp-gallery__thumbs
{
    display: flex;
    gap: 10px;
    padding: 2px 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.sp-product .sp-gallery__thumbs::-webkit-scrollbar
{
    display: none;
}

.sp-product .sp-gallery__thumb
{
    flex: 0 0 calc((100% - 30px) / 4);
    padding: 0;
    border: 2px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sp-color-stage);
    cursor: pointer;
    scroll-snap-align: start;
    transition: border-color .15s;
}

.sp-product .sp-gallery__thumb img
{
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.sp-product .sp-gallery__thumb:hover,
.sp-product .sp-gallery__thumb.is-active
{
    border-color: var(--sp-color-accent);
}

.sp-product .sp-gallery__dots
{
    display: none;
    justify-content: center;
    gap: 10px;
    padding-top: 6px;
}

.sp-product .sp-gallery__dot
{
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--sp-color-line);
    cursor: pointer;
}

.sp-product .sp-gallery__dot.is-active
{
    background: var(--sp-color-accent);
}

@media (max-width: 759px)
{
    .sp-product .sp-gallery__carousel
    {
        display: none;
    }

    .sp-product .sp-gallery__dots
    {
        display: flex;
    }
}

/* ========== MENU A TENDINA ==========
   Come il nuovo modello: nessun bordo, valore blu in grassetto 14px con la freccia
   blu subito dopo. La lista si apre sotto il campo (componente nostro, non il
   <select> nativo). */
.sp-product .sp-dropdown
{
    position: relative;
    display: inline-block;
    max-width: 100%;
}

@media (max-width: 759px)
{
    .sp-product .sp-dropdown
    {
       width:100%;
    }
    .sp-product .sp-dropdown__toggle
    {
        width:100%;
    }

}


.sp-product .sp-dropdown__toggle
{
    position: relative;
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 26px 4px 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-color-accent);
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* freccia: due lati di un quadrato blu ruotato */
.sp-product .sp-dropdown__toggle::after
{
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2.2px solid var(--sp-color-accent);
    border-bottom: 2.2px solid var(--sp-color-accent);
    transform: translateY(-75%) rotate(45deg);
    transition: transform .15s;
}

.sp-product .sp-dropdown.is-open .sp-dropdown__toggle::after
{
    transform: translateY(-25%) rotate(-135deg);
}

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

.sp-product .sp-dropdown__value
{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sp-product .sp-dropdown__menu
{
    position: absolute;
    top: calc(100% + 6px);
    left: -12px;
    z-index: 40;
    min-width: calc(100% + 12px);
    width: max-content;
    max-width: min(420px, 90vw);
    max-height: 360px;
    overflow-y: auto;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--sp-color-line-soft);
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.sp-product .sp-dropdown__item
{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 6px 14px 6px 12px;
    font-size: 14px;
    line-height: 20px;
    color: var(--sp-color-text-strong);
    cursor: pointer;
}

/* ✓ blu sulla voce scelta; le altre lasciano lo spazio */
.sp-product .sp-dropdown__item::before
{
    content: "";
    flex: 0 0 12px;
    color: var(--sp-color-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.sp-product .sp-dropdown__item.is-selected
{
    font-weight: 700;
    color: var(--sp-color-accent);
}

.sp-product .sp-dropdown__item.is-selected::before
{
    content: "✓";
}

.sp-product .sp-dropdown__item:hover,
.sp-product .sp-dropdown__item.is-active
{
    background: var(--sp-color-accent-soft);
}

.sp-product .sp-dropdown__item.is-disabled
{
    opacity: .4;
    pointer-events: none;
}

.sp-product .sp-dropdown__icon
{
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    object-fit: cover;
}

/* ========== CAROSELLO ==========
   Nuovo modello: le griglie (opzioni con immagine, carte, miniature) sono una fila
   che scorre di lato con i pallini sotto; "Mostra tutte" (.is-expanded) le manda a
   capo. Quante per pagina lo decide la larghezza degli elementi (setupCarousels). */
.sp-product .sp-field > .sp-carousel
{
    flex: 0 0 100%;
}

.sp-product .sp-carousel
{
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.sp-product .sp-carousel [data-sp-carousel-track]
{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.sp-product .sp-carousel [data-sp-carousel-track]::-webkit-scrollbar
{
    display: none;
}

.sp-product .sp-carousel [data-sp-carousel-track] > *
{
    scroll-snap-align: start;
}

.sp-product .sp-carousel.is-expanded [data-sp-carousel-track]
{
    flex-wrap: wrap;
    overflow-x: visible;
}

.sp-product .sp-carousel__dots
{
    display: flex;
    justify-content: center;
    gap: 14px;
}

.sp-product .sp-carousel__dot
{
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #bdbdbd;
    cursor: pointer;
}

.sp-product .sp-carousel__dot.is-active
{
    background: var(--sp-color-accent);
}

.sp-product .sp-carousel__footer
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
}

.sp-product .sp-carousel__footer:has(> [hidden]:only-child)
{
    display: none;
}

.sp-product .sp-carousel__toggle
{
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    color: var(--sp-color-accent);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
#piutirate
{
    padding: 12px 44px;
  border: 1.5px solid var(--sp-color-accent) !important;
  border-radius: 999px;
  background: var(--sp-color-accent) !important;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  height: auto !important;
  display: block;
  margin-left: auto;
    margin-top: auto;
    margin-right: auto;
  margin-top: 10px;
}

/* ========== SWATCH (opzioni con immagine) ==========
   Schede bianche bordate (angoli da 10px, ombra leggera): immagine in alto
   (1.55:1), nome sotto in maiuscolo. Cinque per pagina (2,2 su mobile). La scelta
   ha il bordo blu e la ✓ in un cerchio bianco; nome blu. */
.sp-product .sp-swatches
{
    gap: 14px;
    padding: 6px 2px;
}

.sp-product .sp-swatch
{
    position: relative;
    flex: 0 0 calc((100% - 56px) / 5);
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #e8e8e8;
    border-radius: var(--sp-radius-tile);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    overflow: hidden;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
    
}

.sp-product .sp-swatch.is-selected
{
border: 2px solid var(--sp-color-accent);
  border-color: var(--sp-color-accent);
}

@media (max-width: 759px)
{
    .sp-product .sp-swatch
    {
        flex-basis: calc((100% - 14px) / 2.2);
    }

    .sp-product .sp-carousel.is-expanded .sp-swatch
    {
        flex-basis: calc((100% - 14px) / 2);
    }
}

/* Valore scelto di una griglia senza menu (riga del campo). */
.sp-product .sp-swatches__selected
{
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-color-accent);
}

.sp-product .sp-swatch__frame
{
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1.55;
    overflow: hidden;
    background: var(--sp-color-stage);
}

.sp-product .sp-swatch__image
{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-product .sp-swatch__label
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(2.5em + 20px);
    padding: 10px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    color: var(--sp-color-text-strong);
    overflow-wrap: anywhere;
}

.sp-product .sp-swatch:hover
{
    border-color: #c9d9ec;
}

.sp-product .sp-swatches--tiles .sp-swatch.is-selected, .sp-product .sp-swatches--tiles .sp-swatch.is-selected:hover
{
    border: 2px solid var(--sp-color-accent);
    border-color: var(--sp-color-accent);
}

.sp-product .sp-swatch.is-selected .sp-swatch__label
{
    color: var(--sp-color-accent);
}

.sp-product .sp-swatch__zoom
{
    position: absolute;
    top: 6px;
    left: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /*background: #fff;*/
    /*color: var(--sp-color-text-muted);*/
    color: var(--sp-color-accent);
    cursor: zoom-in;
}

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

/* ✓ blu in un cerchio bianco, in alto a destra della scheda scelta. */
.sp-product .sp-swatch__check,
.sp-product .sp-paper__check
{
    position: absolute;
    top: 6px;
    right: 6px;
    display: none;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /*background: #fff;*/
    color: var(--sp-color-accent);
}

.sp-product .sp-swatch__zoom .sp-icon,
.sp-product .sp-swatch__check .sp-icon,
.sp-product .sp-paper__check .sp-icon
{
    width: 14px;
    height: 14px;
}

.sp-product .sp-swatch.is-selected .sp-swatch__check,
.sp-product .sp-paper.is-selected .sp-paper__check
{
    display: flex;
}

.sp-product .sp-swatch.is-disabled
{
    pointer-events: none;
}

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

/* Packaging: la colonna delle opzioni è stretta (anteprima 58/42), tre schede per pagina. */
.sp-product .sp-layout--wide-preview .sp-swatch
{
    /*flex-basis: calc((100% - 28px) / 3);*/
	flex-basis: max(110px, calc((100% - 56px) / 5));
}

/* Riquadri del formato (nuovo modello): sette per pagina (3,4 su mobile), disegno
   del formato alto 44px, nome sotto; la ✓ blu senza cerchio. */
.sp-product .sp-swatches--tiles
{
    gap: 10px;
    padding: 8px 2px 4px;
}

.sp-product .sp-swatches--tiles .sp-swatch
{
    flex-basis: calc((100% - 60px) / 7.2);
    align-items: center;
    gap: 8px;
    padding: 12px 6px 8px;
    border-color: var(--sp-color-line-soft);
    box-shadow: none;
}

.sp-product .sp-swatches--tiles .sp-swatch__frame
{
    width: auto;
    height: 88px;
    min-height: 88px;
    aspect-ratio: auto;
    background: none;
}

.sp-product .sp-swatches--tiles .sp-swatch__image
{
    width: auto;
    max-width: 100% !important;
    height: 88px !important;
    object-fit: contain;
}

.sp-product .sp-swatches--tiles .sp-swatch__label
{
    min-height: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    color: var(--sp-color-text-muted);
    white-space: nowrap;
}

.sp-product .sp-swatches--tiles .sp-swatch__check
{
    top: 4px;
    right: 5px;
    width: 14px;
    height: 14px;
    background: none;
}

@media (max-width: 759px)
{
    .sp-product .sp-swatches--tiles .sp-swatch
    {
        flex-basis: calc((100% - 30px) / 3.4);
    }

    .sp-product .sp-carousel.is-expanded .sp-swatches--tiles .sp-swatch
    {
        flex-basis: calc((100% - 20px) / 3);
    }
}

/* ========== CARTE (gruppo_carta: carta + grammatura + finitura) ==========
   Come le schede delle opzioni, con i menu di grammatura e finitura sotto il nome
   (11px, freccia grigia; blu nella scheda scelta). Filtri per famiglia sotto. */
.sp-product .sp-field--paper > .sp-carousel
{
    padding-top: 14px;
    border-top: 1px solid var(--sp-color-line-soft);
}

.sp-product .sp-papers
{
    gap: 14px;
    padding: 6px 2px;
}

.sp-product .sp-paper
{
    position: relative;
    flex: 0 0 calc((100% - 56px) / 5.2);
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #e8e8e8;
    border-radius: var(--sp-radius-tile);
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    overflow: hidden;
    color: var(--sp-color-text-strong);
    cursor: pointer;
    outline: none;
    min-width: 160px;
    max-width: 212px;
}

.sp-product .sp-paper.is-filtered
{
    display: none;
}

.sp-product .sp-paper.is-selected
{
    border: 2px solid var(--sp-color-accent);
    color: var(--sp-color-accent);
}

.sp-product .sp-paper__image
{
    display: block;
    width: 100%;
    aspect-ratio: 1.55;
    background: var(--sp-color-stage);
    overflow:hidden;
}

.sp-product .sp-paper__image img
{
    display: block;
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    object-position: bottom center;
}

.sp-product .sp-paper__body
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    padding-bottom: 20px;
}

.sp-product .sp-paper__name
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.sp-product .sp-paper__tag
{
    color: var(--sp-color-tag-faint, inherit);
    display: block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
  bottom: 5px;
  left: 0px;
  right: 0px;
  padding-left: 5px;
  padding-right: 5px;
  
}

.sp-product .sp-paper.is-selected .sp-paper__tag
{
    color: var(--sp-color-accent, inherit)!important;
}

.sp-product .sp-paper__menu
{
    position: relative;
    display: block;
}

.sp-product .sp-paper__select
{
    width: 100%;
    padding: 4px 18px 4px 0;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 13px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font-weight:bold;
}

.sp-product .sp-paper__select:disabled
{
    opacity: 1;
    cursor: default;
}

.sp-product .sp-paper__chevron
{
    position: absolute;
    right: 0;
    top: 50%;
    width: 11px;
    height: 11px;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

.sp-product .sp-paper.is-selected .sp-paper__chevron
{
    color: var(--sp-color-accent);
}

.sp-product .sp-paper__select:disabled + .sp-paper__chevron
{
    color: var(--sp-color-line);
}

.sp-product .sp-paper-filters
{
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.sp-product .sp-paper-filter
{
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: none;
    background: none;
    color: var(--sp-color-text-strong);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.sp-product .sp-paper-filter .sp-icon--check
{
    width: 0;
    height: 14px;
    transition: width .12s;
}

.sp-product .sp-paper-filter.is-active .sp-icon--check
{
    width: 14px;
}

@media (max-width: 759px)
{
    .sp-product .sp-paper
    {
        flex-basis: calc((100% - 14px) / 2.2);
    }

    .sp-product .sp-carousel.is-expanded .sp-paper
    {
        flex-basis: calc((100% - 14px) / 2);
    }
}

/* ========== FILE DI STAMPA ==========
   Fuori dalle opzioni: tab a tutta larghezza in maiuscolo con la barra blu sotto
   quella attiva (testo blu), poi il pannello della modalità scelta. */
.sp-product .sp-file-block
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 clamp(0px, 1.5vw, 16px);
}

.sp-product .sp-file-tabs
{
    display: grid;
    grid-template-columns: repeat(var(--sp-file-tabs, 3), minmax(0, 1fr));
}

.sp-product .sp-file-tab
{
    padding: 10px 6px;
    border-bottom: 3px solid var(--sp-color-line-soft);
    color: var(--sp-color-text-strong);
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}

.sp-product .sp-file-tab.is-active
{
    border-bottom-color: var(--sp-color-accent);
    color: var(--sp-color-accent);
}

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

.sp-product [data-sp-file-panel="upload"]
{
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding-top: 4px;
}

/* Controlli del file: radio blu a sinistra, nome con ⓘ e prezzo sotto. */
.sp-product .sp-file-checks
{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 16px 32px;
}

.sp-product .sp-file-check
{
    flex: 1 1 180px;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    align-content: start;
    color: var(--sp-color-text-strong);
    cursor: pointer;
}

.sp-product .sp-file-check .sp-radio__input
{
    grid-row: span 2;
    margin-top: 3px;
}

.sp-product .sp-file-check__name
{
    display: block;
    font-size: clamp(13px, 3.6vw, 15px);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}

.sp-product .sp-file-check__name .sp-tooltip
{
    margin-left: 8px;
    vertical-align: -1px;
    color: var(--sp-color-tooltip);
}

/* Qui il fumetto si apre a destra: l'icona sta accanto al nome, non in fondo. */
.sp-product .sp-file-check__name .sp-tooltip__content
{
    left: calc(100% + 10px);
    right: auto;
}

.sp-product .sp-file-check__price
{
    font-size: 11px;
    color: var(--sp-color-text-muted);
}

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

    .sp-product .sp-file-check__name .sp-tooltip__content
    {
        left: auto;
        right: -4px;
    }
}

/* ========== DOWNLOAD (layout, istruzioni) ==========
   Pillole bianche bordate di scuro, a sinistra; il layout con l'icona PDF. */
.sp-product .sp-downloads
{
    display: flex;
    gap: clamp(8px, 2.5vw, 16px);
}

.sp-product .sp-download
{
    flex: 0 1 200px;
    min-width: 0;
    height: clamp(40px, 10vw, 46px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 2vw, 12px);
    padding: 0 clamp(10px, 3vw, 20px);
    border: 1.5px solid #444;
    border-radius: 999px;
    background: #fff;
    color: var(--sp-color-text-strong);
    font-size: clamp(11px, 3.2vw, 13px);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.sp-product .sp-download:hover
{
    border-color: var(--sp-color-accent);
    color: var(--sp-color-accent);
}

.sp-product .sp-download svg
{
    flex-shrink: 0;
    width: clamp(18px, 5vw, 24px);
    height: clamp(18px, 5vw, 24px);
}

/* ========== CREA ONLINE / CARICA FOTO / BOZZA (upload del negozio) ========== */
.sp-product .sp-online-editor
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    text-align: center;
}

.sp-product .sp-online-editor__text
{
    font-size: clamp(14px, 3.8vw, 16px);
    color: var(--sp-color-text-strong);
}

.sp-product .sp-online-editor__note
{
    max-width: 520px;
    margin: 0;
    color: var(--sp-color-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.sp-product .sp-online-editor__button, .sp-product  .button-choice-grapp
{
    padding: 12px 44px;
    border: 1.5px solid var(--sp-color-accent)!important;
    border-radius: 999px;
    background: var(--sp-color-accent)!important;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    height: auto!important;
}
#button-choice-grapp-right
{
    background:transparent!important;
}
#uniform-auto-file-upload
{
  display:none;
}
.sp-product #nuovograppbottone label
{
  color:white;
}



.sp-product .sp-online-editor__button:hover, .sp-product  .button-choice-grapp:hover
{
    border-color: var(--sp-color-accent-dark)!important;
    background: var(--sp-color-accent-dark)!important;
}

/* Prezzi nella finestra "Riepilogo" di grapp (#sceglicosacomprare, sp-grapp.js): la copia
   del pannello è avvolta in un .sp-product perché valgano questi stili. */
.sp-product.sp-grapp-prices
{
    padding: 0;
    background: transparent;
}

.sp-product.sp-grapp-prices .sp-price-panel
{
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

.sp-product.sp-grapp-prices .sp-price-matrix__cell,
.sp-product.sp-grapp-prices .sp-price-tier
{
    cursor: pointer;
}

.sp-product.sp-grapp-prices .sp-grapp-prices__wait
{
    padding: 24px 0;
    color: var(--sp-color-text-muted);
    text-align: center;
}

.sp-product.sp-grapp-prices.is-adding-to-cart
{
    opacity: .5;
    pointer-events: none;
}

/* ========== REALIZZAZIONE GRAFICA ========== */
.sp-product .sp-design-service
{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--sp-color-text-strong);
    font-size: clamp(12px, 3.6vw, 14px);
    line-height: 1.6;
    text-wrap: pretty;
}

.sp-product .sp-design-service__price
{
    font-size: clamp(18px, 5vw, 22px);
    font-weight: 700;
}

.sp-product .sp-design-service a
{
    color: inherit;
    font-weight: 700;
}

/* ========== PREZZO ========== */
.sp-product .sp-price-panel
{
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 clamp(0px, 1.5vw, 16px);
}

.sp-product .sp-price-panel__hint
{
    color: var(--sp-color-accent);
    font-size: clamp(12px, 3.4vw, 14px);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}

.sp-product .sp-price-panel__actions
{
    display: flex;
    justify-content: center;
}

.sp-product .sp-price-panel__actions:has(> [hidden]:only-child)
{
    display: none;
}

.sp-product .sp-price-panel__error
{
    padding: 16px 20px;
    border-radius: 14px;
    background: var(--sp-color-error-bg);
    color: var(--sp-color-text);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* Spinner al posto dei prezzi. */
.sp-product .sp-price-loader
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--sp-color-accent);
}

/* Prezzo (tabella e colonne): riga in grassetto con l'eventuale prezzo pieno
   barrato in rosso prima, "(… € iva inclusa)" sotto più piccolo. */
.sp-product .sp-price__line
{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    font-size: 1.05em;
    font-weight: 500;
    justify-content: center;
}

.sp-product .sp-price__vat
{
    font-size: .75em;
    font-weight: 400;
    text-align: center;
}

.sp-product .sp-price-old
{
    color: var(--sp-color-red);
    font-size: .8em;
    text-decoration: line-through;
    white-space: nowrap;
}

/* Colonne per tempo di consegna (digitali): titolo e data in blu sopra, prezzo
   sotto. Cliccare sceglie quel tempo. */
.sp-product .sp-price-tiers
{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border-top: 1px solid var(--sp-color-line);
    border-bottom: 1px solid var(--sp-color-line);
}

.sp-product .sp-price-tier
{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 6px;
    cursor: pointer;
}

.sp-product .sp-price-tier__header
{
    color: var(--sp-color-accent);
    font-size: 13px;
    line-height: 1.35;
}

.sp-product .sp-price-tier__title
{
    display: block;
    font-size: 1.05em;
    font-weight: 700;
}

.sp-product .sp-price-tier__delivery
{
    display: block;
    font-size: .88em;
    font-weight: 400;
}

.sp-product .sp-price-tier__month-short
{
    display: none;
}

.sp-product .sp-price-tier__delivery .sp-tooltip
{
    margin-left: 2px;
    vertical-align: middle;
}

.sp-product .sp-price-tier__delivery .sp-icon--info,
.sp-product .sp-price-matrix .sp-icon--info
{
    width: 12px;
    height: 12px;
}

/* Il fumetto dei tempi si apre sotto, dentro la colonna. */
.sp-product .sp-price-tier .sp-tooltip,
.sp-product .sp-price-matrix .sp-tooltip
{
    position: static;
}

.sp-product .sp-price-tier .sp-tooltip__content,
.sp-product .sp-price-matrix .sp-tooltip__content
{
    left: 0;
    right: auto;
    top: calc(100% - 6px);
    transform: none;
}

.sp-product .sp-price-tier__price
{
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-self: flex-start;
    padding: 6px;
    border-radius: 8px;
    color: var(--sp-color-text-strong);
    font-size: 13px;
    line-height: 1.35;
    transition: background .12s, color .12s;
}

.sp-product .sp-price-tier.is-selected .sp-price-tier__price
{
    background: var(--sp-color-accent);
    color: #fff;
}

@media (max-width: 640px)
{
    .sp-product .sp-price-tiers
    {
        grid-auto-flow: row;
    }

    .sp-product .sp-price-tier
    {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--sp-color-line);
    }

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

/* ========== TABELLA QUANTITÀ × TEMPO (configuratore) ==========
   Come il nuovo modello: righe separate da linee grigie, intestazione blu con
   produzione e consegna, quantità grigia in grassetto, prezzo a blocco (prezzo +
   iva sotto). La cella scelta diventa un riquadro blu con il testo bianco. */
.sp-product .sp-price-tiers--matrix
{
    display: block;
    border: none;
}

.sp-product .sp-price-matrix
{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--sp-color-text-strong);
    font-size: 13px;
}

.sp-product .sp-price-matrix thead tr
{
    border-top: 1px solid var(--sp-color-line);
    border-bottom: 1px solid var(--sp-color-line);
}

.sp-product .sp-price-matrix th
{
    position: relative;
    padding: 16px 6px;
    color: var(--sp-color-accent);
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    vertical-align: top;
}

.sp-product .sp-price-matrix__quantity-head
{
    width: 22%;
    color: var(--sp-color-text-strong) !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
}

.sp-product .sp-price-matrix tbody tr
{
    border-bottom: 0px solid var(--sp-color-line);
}

.sp-product .sp-price-matrix tbody tr:hover > td.sp-price-matrix__quantity
{
    color: var(--sp-color-accent);
}

.sp-product .sp-price-matrix td
{
    padding: 2px 2px;
    vertical-align: middle;
    text-align: center;
}

.sp-product .sp-price-matrix__quantity
{
    padding: 16px 6px !important;
    color: var(--sp-color-text-soft);
    font-weight: 700;
}

.sp-product .sp-price-matrix__cell
{
    cursor: pointer;
}

.sp-product .sp-price-matrix__box
{
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 6px;
    border-radius: 8px;
    line-height: 1.35;
    transition: background .12s, color .12s;
    background-color:#f5f5f5;
}

.sp-product .sp-price-matrix__cell.is-selected .sp-price-matrix__box
{
    background: var(--sp-color-accent);
    color: #fff;
}

/* Promozione (oldprice del motore): solo il prezzo pieno barrato in rosso; nella
   cella scelta diventa bianco. */
.sp-product .sp-price-matrix__cell.is-selected .sp-price-old,
.sp-product .sp-price-tier.is-selected .sp-price-old
{
    color: #fff;
}

/* Passando col mouse un prezzo si accende d'azzurro (come il modello); il clic
   resta la scelta. Solo con un puntatore vero: sui touch resterebbe "appiccicato". */
@media (hover: hover)
{
    .sp-product .sp-price-matrix .sp-price-matrix__cell:not(.is-selected):hover .sp-price-matrix__box,
    .sp-product .sp-price-tiers .sp-price-tier:not(.is-selected):hover .sp-price-tier__price
    {
        background: var(--sp-color-accent-soft);
    }
}

/* Mobile: nell'intestazione solo "Consegna" + data in grassetto. */
@media (max-width: 759px)
{
    .sp-product .sp-price-matrix
    {
        font-size: 11px;
    }

    .sp-product .sp-price-matrix .sp-price-tier__title
    {
        display: none;
    }

    .sp-product .sp-price-matrix th
    {
        padding: 12px 3px;
        font-size: 11px;
    }

    .sp-product .sp-price-matrix .sp-price-matrix__quantity-head
    {
        width: 18%;
        padding-left: 6px;
    }

    .sp-product .sp-price-matrix .sp-price-tier__delivery
    {
        font-size: 1em;
        font-weight: 700;
    }

    .sp-product .sp-price-matrix .sp-price-tier__delivery .sp-tooltip
    {
        margin-left: 0;
    }

    .sp-product .sp-price-matrix .sp-icon--info
    {
        width: 11px;
        height: 11px;
    }
}

/* ========== TEMPI DI CONSEGNA E DI LAVORAZIONE (sotto i prezzi) ========== */
.sp-product .sp-delivery
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px clamp(6px, 1.5vw, 22px) 0;
    color: #444;
    font-size: 12px;
    line-height: 1.55;
}

.sp-product .sp-delivery__row
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-product .sp-delivery__row--check
{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px 20px;
}

.sp-product .sp-delivery__text
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-product .sp-delivery__title
{
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--sp-color-text-strong);
    font-size: 13px;
    font-weight: 700;
}

.sp-product .sp-delivery__icon
{
    width: 14px;
    height: 14px;
}

.sp-product .sp-delivery__result.is-answer
{
    color: var(--sp-color-accent);
    font-weight: 700;
}

.sp-product .sp-delivery__cap
{
    width: 160px;
    padding: 6px 16px;
    border: 1px solid var(--sp-color-table-line);
    border-radius: 999px;
    background: #fff;
    color: var(--sp-color-text-strong);
    font-size: 12px;
    text-align: center;
    outline: none;
}

.sp-product .sp-delivery__cap:focus
{
    border-color: var(--sp-color-accent);
}

.sp-product .sp-delivery__note
{
    margin: 0;
    text-wrap: pretty;
}

.sp-product .sp-delivery__link
{
    align-self: flex-start;
    font-size: 12px;
}

/* ========== COLONNA DI SINISTRA: "Ritorna a" e preventivo ========== */
.sp-product .sp-back-link
{
    color: var(--sp-color-text-muted);
    font-size: 14px;
    line-height: 1.4;
}

.sp-product .sp-back-link__chevron
{
    margin-right: 4px;
    color: var(--sp-color-accent);
    font-weight: 700;
}

.sp-product .sp-back-link a
{
    color: var(--sp-color-accent);
    font-weight: 700;
    text-decoration: none;
}

.sp-product .sp-back-link a:hover
{
    text-decoration: underline;
}

/* "Non trovi quello che cerchi?": titolo centrato e pillola rossa bordata, piena
   al passaggio del mouse. */
.sp-product .sp-quote
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 8px 0;
    color: #111;
    text-align: center;
}

.sp-product .sp-quote__title
{
    font-size: clamp(14px, 3.8vw, 17px);
    font-weight: 700;
    line-height: 1.3;
}

.sp-product .sp-quote__button
{
    padding: 13px clamp(24px, 5vw, 56px);
    border: 2px solid var(--sp-color-red);
    border-radius: 999px;
    background: #fff;
    color: var(--sp-color-red);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.sp-product .sp-quote__button:hover
{
    background: var(--sp-color-red);
    color: #fff;
}

/* ========== VIDEO (sotto la descrizione) ==========
   16:9 con la copertina e il ▶ rosso di YouTube; il video parte al suo posto. */
.sp-product .sp-video
{
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 24px;
    padding: 0;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    background-color: #e6e6e6;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.sp-product .sp-video__play
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 40px;
    border-radius: 12px;
    background: #f00;
    transform: translate(-50%, -50%);
    transition: background .15s;
}

.sp-product .sp-video:hover .sp-video__play
{
    background: #cc0000;
}

.sp-product .sp-video__play::after
{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -5px;
    border-style: solid;
    border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
}

.sp-product .sp-video--playing
{
    cursor: default;
}

.sp-product .sp-video__frame
{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========== MODULO PREVENTIVO (nel modale) ========== */
.sp-product .sp-quote-form
{
    padding: 20px;
    color: var(--sp-color-ink);
    font-size: 13px;
}

.sp-product .sp-quote-form__title
{
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--sp-color-line);
    font-size: 16px;
    font-weight: 700;
}

.sp-product .sp-quote-form__grid
{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 24px;
}

@media (min-width: 640px)
{
    .sp-product .sp-quote-form__grid
    {
        grid-template-columns: 1fr 1fr;
    }
}

.sp-product .sp-quote-form__field
{
    display: block;
    margin-bottom: 12px;
    font-weight: 700;
}

.sp-product .sp-quote-form__field input,
.sp-product .sp-quote-form__field textarea
{
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 6px 10px;
    border: 1px solid var(--sp-color-border);
    border-radius: 8px;
    background: #fff;
    color: var(--sp-color-ink);
    font: inherit;
    font-weight: 400;
}

.sp-product .sp-quote-form__field input[type=file]
{
    padding: 4px;
}

.sp-product .sp-quote-form__field textarea
{
    height: 265px;
    resize: vertical;
}

.sp-product .sp-quote-form__field.has-error input,
.sp-product .sp-quote-form__field.has-error textarea
{
    border-color: var(--sp-color-error);
}

.sp-product .sp-quote-form__status:empty
{
    display: none;
}

.sp-product .sp-quote-form__status
{
    margin-bottom: 12px;
    padding: 8px 12px;
    background: var(--sp-color-error);
    color: #fff;
    font-weight: 700;
}

.sp-product .sp-quote-form__status.is-success
{
    background: var(--sp-color-success);
}

.sp-product .sp-quote-form__footer
{
    padding-top: 12px;
    border-top: 1px solid var(--sp-color-line);
    text-align: center;
}

.sp-product .sp-quote-form__footer .sp-btn
{
    font-size: 16px;
}

/* ========== MODALE (zoom immagine, video, preventivo) ========== */
.sp-product .sp-modal
{
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, .7);
    overflow: auto;
}

.sp-product .sp-modal__dialog
{
    position: relative;
    width: 600px;
    max-width: 90%;
    margin: 5% auto;
    background-color: #fff;
    border-radius: var(--sp-radius-card);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    animation: sp-modal-in .3s;
}

@keyframes sp-modal-in
{
    from { opacity: 0; transform: translateY(-50px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sp-product .sp-modal__close
{
    position: absolute;
    right: 15px;
    top: 15px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: background .2s;
}

.sp-product .sp-modal__close:hover
{
    background: rgba(0, 0, 0, .8);
}

.sp-product .sp-modal__body
{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: #f5f5f5;
}

.sp-product .sp-modal__image
{
    max-width: 100%;
    object-fit: contain;
}

.sp-product .sp-modal--wide .sp-modal__dialog
{
    width: 800px;
}

.sp-product .sp-modal--wide .sp-modal__body
{
    display: block;
    min-height: 0;
    background: #fff;
}

/* Video 16:9 (560×315 nel legacy) */
.sp-product .sp-modal--video .sp-modal__dialog
{
    width: 560px;
}

.sp-product .sp-modal--video-wide .sp-modal__dialog
{
    width: 960px;
}

.sp-product .sp-modal--video .sp-modal__body
{
    display: block;
    min-height: 0;
    background: #000;
}

.sp-product .sp-modal__video
{
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.sp-product .sp-modal__footer
{
    background-color: #4a4a4a;
    color: #fff;
    padding: 20px 30px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

/* Zoom con carosello (schede carta, carta_carousel_default) */
.sp-product .sp-modal--gallery .sp-modal__body
{
    display: block;
}

.sp-product .sp-zoom-gallery
{
    position: relative;
    overflow: hidden;
}

.sp-product .sp-zoom-gallery__track
{
    display: flex;
    transition: transform .35s ease;
}

.sp-product .sp-zoom-gallery__image
{
    flex: 0 0 100%;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    user-select: none;
}

.sp-product .sp-zoom-gallery__arrow
{
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0 0 4px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background .2s;
}

.sp-product .sp-zoom-gallery__arrow:hover
{
    background: rgba(0, 0, 0, .8);
}

.sp-product .sp-zoom-gallery__arrow--prev
{
    left: 12px;
}

.sp-product .sp-zoom-gallery__arrow--next
{
    right: 12px;
}

.sp-product .sp-zoom-gallery__dots
{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.sp-product .sp-zoom-gallery__dot
{
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .3);
    cursor: pointer;
}

.sp-product .sp-zoom-gallery__dot.is-active
{
    background: var(--sp-color-accent);
}

.sp-product .sp-modal__footer
{
    background-color: #4a4a4a;
    color: #fff;
    padding: 20px 30px;
    text-align: center;
    font-size: 14px;
    line-height: 1.6;
}

/* ========== RECENSIONI PRODOTTO ==========
   Come il nuovo modello: cinque stelle verdi, titolo, pillola eKomi "4,8 su 5" e
   le frecce su/giù in basso a destra; sotto tre recensioni separate da una linea
   (le altre con le frecce o col dito), testo in corsivo e autore a destra. */
.sp-product .sp-reviews
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-product .sp-reviews__head
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.sp-product .sp-star
{
    display: block;
    width: 16px;
    height: 16px;
    color: var(--sp-color-line);
}

.sp-product .sp-star.is-on
{
    color: var(--sp-color-star);
}

.sp-product .sp-reviews__stars,
.sp-product .sp-review__stars
{
    display: flex;
    gap: 2px;
}

.sp-product .sp-reviews__stars
{
    gap: 3px;
}

.sp-product .sp-reviews__stars .sp-star
{
    width: 26px;
    height: 26px;
}

.sp-product .sp-reviews__title
{
    color: #111;
    font-size: clamp(17px, 4.4vw, 21px);
    font-weight: 700;
}

.sp-product .sp-reviews__score
{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 4px 20px;
    border: 2px solid var(--sp-color-star);
    border-radius: 999px;
    text-decoration: none;
}

.sp-product .sp-reviews__brand
{
    color: #3e9a0a;
    font-size: 20px;
}

.sp-product .sp-reviews__average
{
    color: var(--sp-color-text-muted);
    font-size: 18px;
    white-space: nowrap;
}

.sp-product .sp-reviews__nav
{
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-product .sp-reviews__arrow
{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 20px;
    padding: 0;
    border: none;
    background: none;
    color: var(--sp-color-text-muted);
    cursor: pointer;
}

.sp-product .sp-reviews__arrow:disabled
{
    opacity: .3;
    cursor: default;
}

.sp-product .sp-reviews__arrow svg
{
    width: 16px;
    height: 16px;
}

.sp-product .sp-reviews__list
{
    display: flex;
    flex-direction: column;
    max-height: 460px;
    padding: 0 clamp(8px, 6%, 40px);
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    outline: none;
}

.sp-product .sp-reviews__list::-webkit-scrollbar
{
    display: none;
}

.sp-product .sp-review
{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 12px 24px;
    border-bottom: 1px solid #cfcfcf;
    color: #333;
    font-size: 12px;
    scroll-snap-align: start;
}

.sp-product .sp-review__text
{
    margin: 0;
    font-style: italic;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.sp-product .sp-review__author
{
    font-style: italic;
    text-align: right;
}