/* Storefront — phones, tablets, small laptops
   Loaded last so page CSS can be corrected without fighting IDs. */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body.storefront {
    overflow-x: hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

body.storefront iframe,
body.storefront table { max-width: 100%; }

body.storefront .sc-wrap,
body.storefront .hc-wrap,
body.storefront .sc-hero-inner {
    width: min(1180px, calc(100% - 24px));
}

body.storefront a,
body.storefront button,
body.storefront .sc-btn,
body.storefront .hc-btn {
    -webkit-tap-highlight-color: rgba(217, 119, 6, 0.16);
    touch-action: manipulation;
}

body.storefront .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

body.storefront .select2-container { width: 100% !important; max-width: 100%; }

/* ── Small laptops / large tablets ──────────────── */
@media (max-width: 1199.98px) {
    .sh-menu .nav-link { font-size: 12.5px !important; }
    .sc-rent-grid { grid-template-columns: repeat(3, 1fr); }
    .col-lg-9 .sc-rent-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablets (portrait + landscape) ─────────────── */
@media (max-width: 991.98px) {
    .sc-wrap,
    .hc-wrap,
    .sc-hero-inner { width: min(1180px, calc(100% - 28px)); }

    .sc-hero { min-height: 240px; }
    .sc-hero-inner { padding: 52px 0 44px; }
    .sc-hero h1 { font-size: clamp(1.7rem, 5vw, 2.5rem); }
    .sc-hero p { font-size: 1rem; }

    .hc-cat-grid,
    .sc-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .sc-rent-grid,
    .col-lg-9 .sc-rent-grid { grid-template-columns: repeat(2, 1fr); }

    .id-book,
    .ad-book,
    .ck-sum { position: static !important; top: auto !important; }
    .id-gallery,
    .id-stage .id-gallery.gallery-box { min-height: 280px; }
    #main-product-img { max-height: 220px; }
    .ad-photo-frame,
    .artist-detail-img { height: 340px !important; }

    .id-book-top h1,
    .ad-book-top h1 { font-size: 1.4rem; }

    .cu-shell,
    .pw-shell { grid-template-columns: 1fr !important; }
    .sf-ticket { grid-template-columns: 72px 1fr; }
    .sf-grid { grid-template-columns: 1fr 1fr; }

    .artist-card-horizontal { flex-direction: column; }
    .artist-img-wrapper {
        width: 100% !important;
        height: auto !important;
        border-right: 0;
    }
    .artist-img-wrapper .view-profile-btn { display: none; }
    .artist-title-row,
    .artist-meta { flex-wrap: wrap; }

    .about-main-img img { height: 320px; }
    .about-img-badge { right: 10px; }

    body.storefront .modal-dialog {
        margin: 12px;
        max-width: calc(100% - 24px);
    }
}

/* ── Phones ─────────────────────────────────────── */
@media (max-width: 767.98px) {
    body.storefront { font-size: 16px; }

    .sc-wrap,
    .hc-wrap,
    .sc-hero-inner { width: min(1180px, calc(100% - 20px)); }

    .site-header .container { width: min(1180px, calc(100% - 20px)); }
    .sh-bar { min-height: 60px; gap: 8px; }
    .sh-logo img { height: 44px; max-width: 112px; }
    .sh-cart,
    .sh-toggle {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }
    .sh-search-box { height: 44px; }
    .sh-search-box input,
    .sc-search input { font-size: 16px; }
    .sh-cta { height: 46px; font-size: 14px !important; }

    .sc-hero { min-height: 200px; }
    .sc-hero-inner { padding: 40px 0 32px; }
    .sc-hero-actions { flex-direction: column; align-items: stretch; }
    .sc-hero-actions .sc-btn { width: 100%; }
    .sc-kicker { font-size: 12px; }
    .sc-head h2 { font-size: 1.4rem; }
    .sc-head p { font-size: 15px; }
    .sc-search { padding-left: 12px; }
    .sc-search button { height: 42px; padding: 0 14px; }
    .sc-filter-btn,
    .filter-trigger-btn {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        font-size: 16px;
    }
    .sc-btn,
    .hc-btn { min-height: 46px; }

    .hc-cat-grid,
    .sc-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .hc-cat,
    .sc-cat,
    .cat-card { padding: 10px 8px 12px; border-radius: 18px; }
    .hc-cat h4,
    .sc-cat h3,
    .sc-cat h4,
    .cat-card h4 { font-size: .88rem; }
    .hc-cta-card { padding: 28px 18px; min-height: 0; border-radius: 22px; }

    .sc-rent-grid,
    .col-lg-9 .sc-rent-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .sc-rent-body { padding: 12px; }
    .sc-rent-body h5 { font-size: .92rem; min-height: 0; overflow-wrap: anywhere; }
    .sc-price { font-size: 1.05rem; }
    .sc-rent-actions { flex-direction: column; }
    .sc-rent-actions .sc-btn,
    .sc-rent-actions .hc-btn { width: 100%; }

    .id-crumb,
    .ad-crumb,
    .sc-crumb { font-size: 13px; padding-top: 16px; overflow-wrap: anywhere; }
    .id-stage { padding: 12px; }
    .id-gallery,
    .id-stage .id-gallery.gallery-box { min-height: 240px; padding: 16px; }
    #main-product-img { max-height: 200px; max-width: 100%; }
    .thumb-btn { width: 64px; height: 64px; }
    .id-book-body,
    .ad-book-body,
    .id-book-top,
    .ad-book-top { padding: 16px; }
    .plan-card-light.rental-tab-btn { padding: 10px 4px; min-height: 56px; }
    .plan-card-light .fw-bold { font-size: 13px; }
    #final-price { font-size: 1.4rem; }
    .btn-main-rent,
    .ad-book-btn,
    .checkout-btn { min-height: 50px; font-size: 14px; }
    .id-cart-btn { width: 50px; height: 50px; }
    .ad-photo-frame,
    .artist-detail-img { height: 260px !important; }
    .ad-price strong { font-size: 1.45rem; }

    .ck-page { padding: 16px 0 72px; }
    .ck-head h1 { font-size: 1.5rem; }
    .cart-item-img { width: 64px; height: 64px; }

    .sf-ticket { grid-template-columns: 1fr; }
    .sf-ticket-stub {
        flex-direction: row;
        min-height: 0;
        padding: 10px 16px;
        border-right: 0;
        border-bottom: 2px dashed rgba(8, 12, 22, 0.35);
    }
    .sf-ticket-stub strong {
        writing-mode: horizontal-tb;
        transform: none;
    }
    .sf-ticket-actions { padding: 0 16px 16px; }
    .sf-ticket-actions .sf-btn { width: 100%; justify-content: center; }
    .sf-grid { grid-template-columns: 1fr; }
    .sf-bottom { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
    .sf-bottom-inner { flex-direction: column; text-align: center; }

    .cu-main,
    .pw-main { padding: 22px 16px 28px; }
    .pw-steps { grid-template-columns: 1fr; }
    .pw-actions { flex-direction: column-reverse; }

    .about-main-img img { height: 240px; }
    .about-img-badge { right: 8px; top: 12px; }
    .about-media-stack { padding-bottom: 16px; overflow: hidden; }

    .whatsapp-float {
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        right: max(14px, env(safe-area-inset-right)) !important;
        padding: 12px !important;
        font-size: 22px !important;
        border-radius: 50% !important;
    }

    body.storefront .form-control,
    body.storefront .form-select,
    body.storefront input,
    body.storefront select,
    body.storefront textarea {
        font-size: 16px !important;
        max-width: 100%;
    }

    .artist-info { padding: 16px !important; }
    .artist-name { font-size: 1.15rem !important; overflow-wrap: anywhere; }
    .page-hero--musicians { padding: 48px 0 32px !important; }
    .page-hero-title { font-size: 1.7rem !important; }

    body.storefront .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }
    body.storefront .modal-body {
        max-height: min(70vh, 560px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Small phones ───────────────────────────────── */
@media (max-width: 399.98px) {
    .sc-rent-grid,
    .col-lg-9 .sc-rent-grid,
    .hc-rent-grid { grid-template-columns: 1fr; }
    .home-creative .hc-hero h1 { font-size: clamp(1.9rem, 9vw, 2.4rem); }
    .sh-logo img { height: 40px; }
    .id-book .col-4,
    .ck-sum .col-4 { flex: 0 0 50%; max-width: 50%; }
    .thumb-btn { width: 56px; height: 56px; }
}

/* ── Landscape phones ───────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .hc-hero { min-height: 0; }
    .sc-hero { min-height: 180px; }
    .id-book,
    .ad-book,
    .ck-sum { position: static !important; }
    body.storefront .modal-body { max-height: 60vh; }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float,
    .hc-note,
    .cu-notes span,
    .pw-notes span,
    .sf-vinyl { animation: none !important; }
}