/*
 * CSP – Responsive fiche carte cadeau
 * v0.1.0 — CSS isolé à la fiche détaillée, sans modification de logique.
 */

.csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal,
.csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal * {
    box-sizing: border-box;
}

.csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal strong,
.csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal span,
.csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal div {
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .csp-modal-overlay:has(.csp-gc-detail-close) {
        padding: 10px 8px !important;
        align-items: flex-start !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal {
        width: min(100%, calc(100vw - 16px)) !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 17px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > header {
        padding: 20px 16px 18px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > header > div:first-of-type {
        gap: 11px !important;
        padding-right: 34px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > header > div:first-of-type > div:first-child {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 12px !important;
        font-size: 19px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > header > div:first-of-type h2 {
        max-width: calc(100vw - 112px) !important;
        font-size: clamp(17px, 5.4vw, 22px) !important;
        letter-spacing: .035em !important;
        overflow-wrap: anywhere !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > header > div:nth-of-type(2) {
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: 8px 10px !important;
        margin-top: 15px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > header > div:nth-of-type(2) > span:last-child {
        flex: 1 1 100% !important;
        line-height: 1.45 !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div {
        padding: 17px 14px 22px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 17px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:repeat(3"] > div {
        min-width: 0 !important;
        padding: 13px 11px !important;
        border-radius: 13px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:repeat(3"] > div:last-child {
        grid-column: 1 / -1 !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:repeat(3"] strong {
        font-size: clamp(18px, 6.1vw, 23px) !important;
        line-height: 1.15 !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:minmax(0,1.1fr)"] {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        margin-top: 12px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:minmax(0,1.1fr)"] > div {
        min-width: 0 !important;
        padding: 16px 14px !important;
        border-radius: 14px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:minmax(0,1.1fr)"] [style*="display:flex;gap:25px"] {
        flex-wrap: wrap !important;
        gap: 10px 18px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:minmax(0,1.1fr)"] [style*="display:flex;gap:25px"] > div {
        min-width: min(100%, 130px) !important;
        flex: 1 1 130px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:minmax(0,1.1fr)"] [style*="display:flex;flex-wrap:wrap"] {
        gap: 6px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > footer {
        justify-content: stretch !important;
        gap: 8px !important;
        margin-top: 17px !important;
        padding-top: 15px !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > footer > a,
    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > footer > button {
        flex: 1 1 auto !important;
        min-height: 40px !important;
        text-align: center !important;
    }
}

@media (max-width: 380px) {
    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:repeat(3"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .csp-modal-overlay:has(.csp-gc-detail-close) .csp-modal > div > div[style*="grid-template-columns:repeat(3"] > div:last-child {
        grid-column: auto !important;
    }
}