/* Card (larghezza "M" come rolex_image: rol-grid-10 / mob-rol-grid-12) */
.rol-prices-card {
    overflow: hidden;
}

.rol-prices-media img {
    vertical-align: top; /* niente spazio sotto l'immagine inline */
}

.rol-prices-media .rol-img-landscape {
    aspect-ratio: 2.7 / 1;
}

.rol-prices-content {
    padding: 60px 10%;
}

/* Sottotitolo con icona info */
.rol-prices-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    font-family: inherit;
    font-weight: bold;
    color: var(--black);
    text-align: left;
}

button.rol-prices-subtitle {
    cursor: pointer;
}

.rol-prices-info-icon {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

/* Righe prezzo */
.rol-prices-rows {
    margin-top: 50px;
}

/* 3 colonne: modelli | modelli | prezzo
   3fr 3fr 2fr: la seconda colonna parte a circa 3/8 della riga come da design */
.rol-prices-row {
    display: grid;
    grid-template-columns: 3fr 3fr 2fr;
    column-gap: 24px;
    align-items: start;
    padding: 32px 0;
    border-top: 1px solid var(--grey);
}

.rol-prices-models,
.rol-prices-special-text,
.rol-prices-footer {
    margin: 0;
    padding: 0;
    list-style: none;
    font-weight: 300;
    line-height: 1.6;
    color: var(--black);
}

/* Modalità "titoli + refs": titolo in grassetto, refs sotto su una riga che va a capo da sola */
.rol-prices-model-title,
.rol-prices-model-refs {
    display: block;
}

.rol-prices-model-title {
    font-weight: bold;
}

/* Righe speciali: il testo occupa le prime due colonne */
.rol-prices-special-text {
    grid-column: 1 / 3;
}

.rol-prices-special-text p {
    margin: 0;
    padding: 0;
}

.rol-prices-price {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--black);
    white-space: nowrap;
}

.rol-prices-info {
    display: inline-flex;
    padding: 0;
    background: none;
    border: none;
    color: var(--black);
    cursor: pointer;
}

/* Footer */
.rol-prices-footer {
    padding-top: 32px;
    border-top: 1px solid var(--grey);
}

/* Modale */
body.rol-modal-open {
    overflow: hidden;
}

.rol-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999; /* come il modale Tudor, sopra a tutto Divi */
    display: flex;
    align-items: center;
    justify-content: center;
}

.rol-modal[hidden] {
    display: none;
}

.rol-modal-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(33, 33, 33, 0.7); /* --black al 70% */
}

.rol-modal-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 70%;
    max-width: 1200px;
    max-height: 90vh;
    background-color: var(--white);
    border-radius: 40px;
    overflow: hidden;
}

.rol-modal-content {
    padding: 90px 100px;
    overflow-y: auto;
}

.rol-modal-close {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--grey);
    color: var(--black);
    cursor: pointer;
}

.rol-modal-text {
    margin-top: 30px;
}

.rol-modal-media {
    width: 33%;
    margin: 50px auto 0;
}

.rol-modal-media img {
    vertical-align: top;
}

/* Responsive */
@media only screen and (max-width: 1024px) {
    .rol-prices-content {
        padding: 50px 8%;
    }

    .rol-modal-box {
        width: 84%;
    }

    .rol-modal-content {
        padding: 90px 60px 60px;
    }

    .rol-modal-media {
        width: 50%;
    }
}

@media only screen and (max-width: 767px) {
    .rol-prices-content {
        padding: 40px 7.5% 55px;
    }

    .rol-prices-subtitle {
        margin-top: 10px;
    }

    .rol-prices-rows {
        margin-top: 40px;
    }

    /* 2 colonne: modelli | prezzo, le due liste si impilano e l'ordine resta continuo */
    .rol-prices-row {
        grid-template-columns: 1fr auto;
        column-gap: 20px;
        padding: 25px 0;
    }

    .rol-prices-models {
        grid-column: 1;
    }

    .rol-prices-models + .rol-prices-models {
        grid-row: 2;
    }

    .rol-prices-special-text {
        grid-column: 1;
        max-width: 80%;
    }

    .rol-prices-price {
        grid-column: 2;
        grid-row: 1;
    }

    /* Su mobile il design ha un'interlinea più ariosa */
    .rol-prices-models,
    .rol-prices-special-text,
    .rol-prices-footer {
        line-height: 1.6;
    }

    .rol-prices-footer {
        padding-top: 25px;
    }

    /* Modale fullscreen */
    .rol-modal-box {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }

    .rol-modal-content {
        padding: 90px 7% 50px;
    }

    .rol-modal-close {
        top: 20px;
        right: 20px;
    }

    .rol-modal-media {
        width: 100%;
        margin-top: 30px;
    }
}