/* ═══════════════════════════════════════════════════════════════
   PATCH 4 — Footer boutique, mobile, achats gratuits
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Footer boutique : bouton adapté au contenu ──────────────────────── */
.shop-footer .fc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 12px;
}

/* Surcharge sp-btn dans le footer uniquement */
.shop-footer .sp-btn {
    width: auto !important;        /* annuler flex:1 du contexte parent */
    flex: none !important;
    padding: 8px 18px;
    font-size: 13px;
    border-radius: 20px;           /* pill compact */
    white-space: nowrap;
}

/* ── 3. MOBILE — Boutique publique (/{pseudo}) ───────────────────────────── */
@media (max-width: 600px) {

    /* Header profil */
    .shop-page header              { height: auto !important; min-height: 260px; }
    .shop-page #header-banner      { height: 120px !important; border-radius: 0 !important; }
    .shop-page .profile-picture    { width: 90px !important; height: 90px !important;
                                     margin-top: -45px !important; margin-left: 12px !important; }
    #profile-description-content  { padding-left: 0 !important; padding-top: 52px; }
    .creator-name                  { font-size: 20px !important; }

    /* Stats */
    .stat-container                { gap: 0; }
    .stat-data                     { padding: 6px 12px !important; min-width: 0 !important; }
    .stat-content                  { font-size: 16px !important; }

    /* Filtre catégories */
    .shop-cats {
        padding: 8px 8px 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .shop-cats::-webkit-scrollbar { display: none; }
    .shop-cat-pill                 { white-space: nowrap; flex-shrink: 0; }

    /* Mode galerie mobile : 3 colonnes serrées */
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2px !important;
    }
    .gallery-item .gi-price        { font-size: 10px; padding: 2px 6px; }
    .gallery-item .gi-type         { width: 20px; height: 20px; font-size: 9px; }

    /* Mode boutique mobile : 1 colonne */
    .shop-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
        padding: 0 8px 80px;
    }
    .shop-card__thumb              { aspect-ratio: 16/9; }
    .shop-card__body               { padding: 12px; }
    .shop-card__title              { font-size: 15px; white-space: normal; }
    .shop-card__desc               { -webkit-line-clamp: 3; }
    .shop-card__price              { font-size: 20px; }
    .shop-card__actions            { padding: 10px 12px 12px; gap: 10px; }
    .sp-btn                        { padding: 10px 14px; font-size: 14px; }

    /* Plans abonnement mobile */
    .sub-cards {
        grid-template-columns: 1fr !important;
    }

    /* Modal mobile */
    .modal-content {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
        max-height: 100vh;
        overflow-y: auto;
    }
    .modal-left, .modal-right { grid-column: 1 !important; }
    .modal-right               { padding-top: 12px; }
    #modal-img                 { max-height: 55vw !important; }
    .prev                      { left: 6px !important; font-size: 26px !important; }
    .next                      { right: 6px !important; font-size: 26px !important; }
    .close                     { right: 6px !important; top: 6px !important; font-size: 24px !important; }

    /* Footer boutique mobile */
    .shop-footer .fc {
        padding: 0 12px;
        justify-content: space-between;
    }
    .shop-footer span    { font-size: 12px; }
    .shop-footer .sp-btn { font-size: 12px; padding: 7px 14px; }
}

@media (max-width: 400px) {
    /* Galerie très petits écrans : rester sur 3 cols */
    .gallery-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 1px !important; }
    .gallery-item .gi-price { display: none; } /* masquer prix sur très petit */
    .gallery-item .gi-type  { display: none; }
}

/* ── Mobile — pages internes (dashboard, catalog, etc.) ─────────────────── */
@media (max-width: 600px) {

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .dash-card { padding: 16px 12px; }
    .dash-card__icon { font-size: 22px; }
    .dash-card__label { font-size: 13px; }
    .dash-card__sub   { font-size: 11px; }

    .catalog-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px;
    }

    .inner-container, .inner-container--sm {
        padding: 0 10px;
    }
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .page-header h1 { font-size: 20px; }

    .auth-card  { padding: 24px 16px; }
    .form-row   { grid-template-columns: 1fr !important; }

    .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: 8px 10px; }

    .navbar-inner  { padding: 0 10px; }
    .navbar-brand  { font-size: 15px; }
    .nav-link span { display: none; } /* masquer texte nav sur mobile */

    .profile-grid { grid-template-columns: 1fr !important; }
    .detail-grid  { grid-template-columns: 1fr !important; }

    .btn-full { font-size: 14px; padding: 12px; }

    /* OTP inputs petits écrans */
    .otp-digit { width: 38px !important; height: 48px !important; font-size: 18px !important; }
    .otp-inputs { gap: 6px; }

    /* Cart */
    .purchase-item { flex-wrap: wrap; gap: 10px; }
}