/*
 * Tema Rivendimi sopra il Bootstrap di Sylius.
 *
 * La palette è quella del prototipo: rosso acceso (lo stesso del simbolo nel
 * logo) su fondo chiaro e testo quasi nero. Si agisce sulle variabili di
 * Bootstrap invece di riscrivere i componenti, così gli aggiornamenti della
 * base non vanno persi.
 */

:root {
    --rivendimi-rosso: #e6003c;          /* hsl(349 100% 45%) del prototipo */
    --rivendimi-rosso-scuro: #b8002f;
    --rivendimi-rosso-tenue: #fff1f4;    /* hsl(349 100% 97%) */
    --rivendimi-inchiostro: #22262e;     /* hsl(220 15% 15%) */
    --rivendimi-grigio: #f2f4f7;         /* hsl(220 14% 96%) */

    --bs-primary: var(--rivendimi-rosso);
    --bs-primary-rgb: 230, 0, 60;
    --bs-link-color: var(--rivendimi-rosso);
    --bs-link-color-rgb: 230, 0, 60;
    --bs-link-hover-color: var(--rivendimi-rosso-scuro);
    --bs-body-color: var(--rivendimi-inchiostro);
    --bs-emphasis-color: var(--rivendimi-inchiostro);
    --bs-border-radius: .5rem;
    --bs-border-radius-lg: .75rem;
}

/* --- Comandi ---------------------------------------------------------- */

.btn-primary {
    --bs-btn-bg: var(--rivendimi-rosso);
    --bs-btn-border-color: var(--rivendimi-rosso);
    --bs-btn-hover-bg: var(--rivendimi-rosso-scuro);
    --bs-btn-hover-border-color: var(--rivendimi-rosso-scuro);
    --bs-btn-active-bg: var(--rivendimi-rosso-scuro);
    --bs-btn-active-border-color: var(--rivendimi-rosso-scuro);
    --bs-btn-disabled-bg: var(--rivendimi-rosso);
    --bs-btn-disabled-border-color: var(--rivendimi-rosso);
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--rivendimi-rosso);
    --bs-btn-border-color: var(--rivendimi-rosso);
    --bs-btn-hover-bg: var(--rivendimi-rosso);
    --bs-btn-hover-border-color: var(--rivendimi-rosso);
    --bs-btn-active-bg: var(--rivendimi-rosso);
    --bs-btn-active-border-color: var(--rivendimi-rosso);
}

.text-primary { color: var(--rivendimi-rosso) !important; }
.bg-primary { background-color: var(--rivendimi-rosso) !important; }
.border-primary { border-color: var(--rivendimi-rosso) !important; }

/* --- Intestazione ----------------------------------------------------- */

.rivendimi-logo {
    height: 34px;
    width: auto;
}

@media (min-width: 768px) {
    .rivendimi-logo { height: 42px; }
}

/* --- Blocco di apertura della vetrina --------------------------------- */

.rivendimi-hero {
    background:
        radial-gradient(1200px 400px at 15% -10%, var(--rivendimi-rosso-tenue), transparent 60%),
        var(--rivendimi-grigio);
    border-bottom: 1px solid rgba(34, 38, 46, .08);
}

.rivendimi-hero h1 {
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--rivendimi-inchiostro);
}

.rivendimi-hero .lead { color: rgba(34, 38, 46, .72); }

/* Spazio sotto il titolo: ci risale dentro il modulo di ricerca. */
.rivendimi-hero.pb-6 { padding-bottom: 5.5rem; }

/*
 * Il modulo di ricerca per veicolo è un blocco indipendente (arriva dal
 * modulo veicoli, subito dopo l'apertura): invece di duplicarlo dentro
 * l'apertura lo facciamo risalire, così i due leggono come un unico gesto.
 */
.rivendimi-ricerca-hero {
    margin-top: -4rem;
    border: 1px solid rgba(34, 38, 46, .1);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: 0 12px 32px rgba(34, 38, 46, .08);
}

.rivendimi-ricerca-hero .card-title { font-weight: 700; }

/* --- Tessere delle categorie ------------------------------------------ */

.rivendimi-categoria {
    display: block;
    height: 100%;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid rgba(34, 38, 46, .1);
    border-radius: var(--bs-border-radius-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.rivendimi-categoria:hover {
    border-color: var(--rivendimi-rosso);
    box-shadow: 0 10px 24px rgba(230, 0, 60, .12);
    transform: translateY(-2px);
    color: inherit;
}

.rivendimi-categoria__titolo {
    font-weight: 700;
    margin-bottom: .15rem;
}

.rivendimi-categoria__descrizione {
    font-size: .875rem;
    color: rgba(34, 38, 46, .6);
    margin: 0;
}

/* --- Richiamo per i venditori ----------------------------------------- */

.rivendimi-venditori {
    background: var(--rivendimi-inchiostro);
    color: #fff;
    border-radius: var(--bs-border-radius-lg);
}

.rivendimi-venditori .lead { color: rgba(255, 255, 255, .78); }

/* --- Dettagli di dominio ---------------------------------------------- */

/* "Compatibile con:" nella scheda ricambio e nei risultati per veicolo. */
.rivendimi-compatibilita .badge {
    background: var(--rivendimi-rosso-tenue);
    color: var(--rivendimi-rosso-scuro);
    font-weight: 600;
}

/* ======================================================================
 * Vetrina: sezioni, schede ricambio, passi, piè di pagina.
 * ==================================================================== */

.rivendimi-sezione-chiara { background: var(--rivendimi-grigio); }

/* --- Griglia e schede dei ricambi -------------------------------------- */

.rivendimi-griglia {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px)  { .rivendimi-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .rivendimi-griglia { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }

.rivendimi-scheda {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid rgba(34, 38, 46, .1);
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.rivendimi-scheda:hover {
    border-color: rgba(230, 0, 60, .35);
    box-shadow: 0 10px 24px rgba(34, 38, 46, .1);
    transform: translateY(-2px);
}

.rivendimi-scheda__immagine {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: var(--rivendimi-grigio);
    overflow: hidden;
}

.rivendimi-scheda__immagine img { width: 100%; height: 100%; object-fit: cover; }

.rivendimi-scheda__vuota { font-size: .8125rem; color: rgba(34, 38, 46, .45); }

.rivendimi-scheda__corpo {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .875rem 1rem 1rem;
    flex: 1 1 auto;
}

.rivendimi-scheda__venditore {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(34, 38, 46, .5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rivendimi-scheda__titolo { color: inherit; text-decoration: none; }
.rivendimi-scheda__titolo:hover { color: var(--rivendimi-rosso); }

.rivendimi-scheda__titolo-testo { font-size: 1rem; font-weight: 650; line-height: 1.3; margin: 0; }

/* Riga "Compatibile con": il paragrafo si tronca, il contatore no.

   Sono due elementi affiancati di proposito. Il clamp qui sotto taglia il
   paragrafo alla seconda riga, e quel che sta scritto per ultimo e' la prima
   cosa che sparisce: con "+3" in coda alle etichette il contatore spariva
   quasi sempre (mediana della riga intera 81 caratteri, contro i ~72 che due
   righe mostrano), proprio lui che e' l'unica cosa a dire che il ricambio va
   anche su altri veicoli. Da fratello del paragrafo, e non da suo contenuto,
   resta fuori dall'area tagliata comunque vada. */
.rivendimi-scheda__compatibilita-riga {
    display: flex;
    align-items: flex-start;
    gap: .375rem;
}

.rivendimi-scheda__compatibilita {
    font-size: .8125rem;
    color: rgba(34, 38, 46, .62);
    margin: 0;
    /* Senza min-width:0 un elemento flex non scende sotto la larghezza del suo
       contenuto e spingerebbe il contatore fuori dalla scheda. */
    min-width: 0;
    flex: 1 1 auto;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    /* Il nome porta parentesi e virgole ma nessuno spazio dove spezzare
       ("(312, 319)"): senza questo una voce lunga sfonderebbe la colonna. */
    overflow-wrap: anywhere;
}

.rivendimi-scheda__compatibilita-altri {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 650;
    line-height: 1.35;
    color: rgba(34, 38, 46, .62);
    white-space: nowrap;
}

/* Badge "Compatibile con" della pagina prodotto. Bootstrap non mette
   white-space:nowrap sulle badge, e un'etichetta lunga andrebbe a capo dentro
   la pillola spezzandone il bordo arrotondato. Una riga sola, e ciò che
   avanza esce con i puntini invece di deformare la badge.

   Quel che i puntini nascondono si rilegge solo nel title, che il template
   scrive su ENTRAMBE le varianti della badge (il link e lo span) con il nome
   esteso del modello, date comprese. Finche' quel title non c'e' stato --
   badge misurate sul sito vivo a 44 e 97 caratteri, nessuna delle due con
   title -- questa regola cancellava testo senza modo di recuperarlo. */
.rivendimi-badge-veicolo {
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rivendimi-scheda__etichetta { color: rgba(34, 38, 46, .45); }

.rivendimi-scheda__piede {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-top: auto;
    padding-top: .5rem;
}

.rivendimi-scheda__prezzo { font-size: 1.125rem; font-weight: 750; color: var(--rivendimi-inchiostro); }

/* Prezzo pieno barrato quando c'è uno sconto di catalogo. */
.rivendimi-scheda__prezzo [data-test-product-original-price] {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: rgba(34, 38, 46, .5);
}

.rivendimi-scheda__stato { font-size: .75rem; font-weight: 600; color: #1a7f4b; }

/* --- I tre passi -------------------------------------------------------- */

.rivendimi-passo { padding-left: 3.25rem; position: relative; }

.rivendimi-passo__numero {
    position: absolute;
    left: 0;
    top: -.15rem;
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--rivendimi-rosso-tenue);
    color: var(--rivendimi-rosso);
    font-weight: 800;
}

.rivendimi-passo__titolo { font-size: 1.0625rem; font-weight: 700; margin-bottom: .35rem; }
.rivendimi-passo__testo { color: rgba(34, 38, 46, .68); margin: 0; }

/* --- Piè di pagina ------------------------------------------------------ */

.rivendimi-footer__titolo {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(34, 38, 46, .5);
    margin-bottom: .75rem;
}

.rivendimi-footer__lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.rivendimi-footer__lista a { color: var(--rivendimi-inchiostro); text-decoration: none; font-size: .9375rem; }
.rivendimi-footer__lista a:hover { color: var(--rivendimi-rosso); text-decoration: underline; }

.rivendimi-footer__chiusura {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    align-items: center;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(34, 38, 46, .1);
    font-size: .875rem;
}

/* ======================================================================
 * Scheda del ricambio: chi vende, quanti ne restano.
 * ==================================================================== */

.rivendimi-venditore-scheda {
    margin: .75rem 0 1rem;
    padding: .75rem 1rem;
    background: var(--rivendimi-grigio);
    border-radius: var(--bs-border-radius);
}

.rivendimi-venditore-scheda__etichetta {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(34, 38, 46, .5);
    margin-bottom: .15rem;
}

.rivendimi-venditore-scheda__nome {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--rivendimi-inchiostro);
    text-decoration: none;
}

.rivendimi-venditore-scheda__nome:hover {
    color: var(--rivendimi-rosso);
    text-decoration: underline;
}

.rivendimi-venditore-scheda__altri {
    display: inline-block;
    margin-top: .35rem;
    font-size: .875rem;
    color: var(--rivendimi-rosso);
    text-decoration: none;
}

.rivendimi-venditore-scheda__altri:hover { text-decoration: underline; }

/* Distintivo del venditore controllato. */
.rivendimi-distintivo {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1rem .5rem;
    border-radius: 999px;
    background: #e8f5ee;
    color: #1a7f4b;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Giacenza, sotto il prezzo. */
.rivendimi-disponibilita { font-size: .9375rem; font-weight: 600; }
.rivendimi-disponibilita__si { color: #1a7f4b; }
.rivendimi-disponibilita__no { color: rgba(34, 38, 46, .55); }

/* --- Galleria della scheda --------------------------------------------
 * Le miniature di serie stanno in una colonna stretta ma non hanno un
 * vincolo di altezza: l'immagine si stampa alle sue proporzioni naturali.
 * Con cinque foto di magazzino scattate col telefono in verticale, la
 * colonna di sinistra diventava più lunga di tutto il resto della pagina.
 * Un rapporto fisso le riporta a francobolli quadrati; il ritaglio ce lo
 * mette già Sylius (object-fit: cover sull'immagine).
 */
.spotlight-group > .col-sm-3 .spotlight {
    display: block;
    aspect-ratio: 1;
    max-width: 5.5rem;
}

/* Stesso problema per la foto grande, con l'aggravante che una foto in
 * verticale rendeva la pagina più alta di due schermate. Qui però il
 * ritaglio non va bene — di un ricambio si deve vedere tutto il pezzo,
 * non un dettaglio centrale — quindi la si contiene invece di ritagliarla. */
#main-image {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background: var(--rivendimi-grigio);
}

/* --- Pagina di una categoria -------------------------------------------- */

.rivendimi-sfoglia { margin-bottom: 1.5rem; }

.rivendimi-sfoglia__risalita {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-bottom: 1rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--rivendimi-rosso);
    text-decoration: none;
}

.rivendimi-sfoglia__risalita:hover { text-decoration: underline; }

.rivendimi-sfoglia__titolo {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(34, 38, 46, .5);
    margin-bottom: .5rem;
}

.rivendimi-sfoglia__voce {
    padding: .3rem 0;
    color: var(--rivendimi-inchiostro);
    text-decoration: none;
}

.rivendimi-sfoglia__voce:hover { color: var(--rivendimi-rosso); }

/* Categoria senza ricambi: non un vicolo cieco. */
.rivendimi-vuoto {
    padding: 2rem;
    background: var(--rivendimi-grigio);
    border-radius: var(--bs-border-radius-lg);
}

.rivendimi-vuoto__titolo { font-size: 1.125rem; font-weight: 700; margin-bottom: .35rem; }
.rivendimi-vuoto__testo { color: rgba(34, 38, 46, .68); margin: 0; max-width: 60ch; }