/* ═══════════════════════════════════════════
   Stoling — Discover Page Mobile Overrides
   ═══════════════════════════════════════════
   The Discover page is a compiled React bundle with mostly inline styles.
   These overrides ensure mobile responsiveness without modifying the bundle.
   All rules use !important to override inline styles. */

/* ══════════════════════════════════════════════════════════════════════════
   Immersive Discover sub-pages — ALL viewports (web + mobile)
   ──────────────────────────────────────────────────────────────────────────
   When a Discover tab is active the React app puts body.discover-immersive on
   <body> (appPhase === 'tabs', viewport-independent). On these sub-pages we hide
   the global site header so Discover's OWN tab bar owns the top of the screen —
   previously this only happened on mobile; now desktop matches. The hero/landing
   page (no immersive class) keeps the global header.
   ══════════════════════════════════════════════════════════════════════════ */
body.discover-immersive .as-nav {
    display: none !important;
}

body.discover-immersive.page-discover #discover-root {
    /* Zero the header clearance AND the negative top margin — the inline
       margin:-1.5rem pulls the tab bar 24px above the viewport (clipping it)
       once the header is gone. Horizontal full-bleed (left/right -1.25rem) stays. */
    padding-top: 0 !important;
    margin-top: 0 !important;
}

body.discover-immersive [data-testid="tab-navigation"] {
    top: 0 !important;
}

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
    body.page-discover #discover-root {
        padding-top: 72px !important;
    }

    /* Hero section: reduce flex gap, scale down */
    body.page-discover .hero-section {
        flex-direction: column !important;
        padding: 2rem 1.5rem !important;
        gap: 1.5rem !important;
        min-height: auto !important;
    }

    body.page-discover .hero-left,
    body.page-discover .hero-right {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* hero-right now holds the recommendations + colors panel (the 3D helix
       moved to the Style DNA tab), so it MUST stay visible when stacked. */
    body.page-discover .hero-right {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ── Mobile (≤767px) ── */
@media (max-width: 767px) {
    body.page-discover #discover-root {
        padding-top: 64px !important;
        margin: 0 !important;
        padding-left: 0 !important;
        /* Clear the fixed bottom nav (58px) so the last action buttons
           ("Stilinə Uyğun Məhsullara Bax" etc.) are never cut off. */
        padding-bottom: calc(58px + 24px + env(safe-area-inset-bottom, 0px)) !important;
        padding-right: 0 !important;
    }

    /* ── Immersive sub-pages ──
       On a Discover tab (not the hero) hide the global site header and let
       Discover's own tab bar sit at the very top. The hero page keeps the
       global header (this class is only present while a tab is active). */
    body.discover-immersive .as-nav {
        display: none !important;
    }

    body.discover-immersive.page-discover #discover-root {
        padding-top: 0 !important;
    }

    body.discover-immersive [data-testid="tab-navigation"] {
        top: 0 !important;
    }

    /* Hero section stacks vertically */
    body.page-discover .hero-section {
        flex-direction: column !important;
        padding: 1.5rem 1rem !important;
        gap: 1rem !important;
        min-height: auto !important;
        text-align: center !important;
    }

    body.page-discover .hero-left {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* hero-right now holds the recommendations + colors panel (the 3D helix
       moved to the Style DNA tab), so it MUST stay visible on phones. */
    body.page-discover .hero-right {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.page-discover .hero-content {
        padding: 0 0.5rem !important;
    }

    /* General container children: prevent horizontal overflow */
    body.page-discover #discover-root>div {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* All direct children with flex-direction: row should wrap */
    body.page-discover #discover-root [style*="flex-direction: row"],
    body.page-discover #discover-root [style*="flex-direction:row"] {
        flex-wrap: wrap !important;
    }

    /* Cards: full width on mobile */
    body.page-discover .fs-card,
    body.page-discover .glass-card-border {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Product cards in grid: 2-column on mobile */
    body.page-discover .rpp-product-card {
        width: calc(50% - 0.5rem) !important;
        min-width: 140px !important;
        max-width: none !important;
    }

    body.page-discover .rpp-product-img {
        height: 160px !important;
    }

    /* Character/result cards */
    body.page-discover .rp-char-card {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Buttons: full width on mobile */
    body.page-discover .cta-gradient-btn,
    body.page-discover .feed-action-btn {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Tags: smaller on mobile */
    body.page-discover .rp-tag {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }

    /* Any fixed-width elements: cap at viewport */
    body.page-discover #discover-root [style*="width: 400"],
    body.page-discover #discover-root [style*="width: 500"],
    body.page-discover #discover-root [style*="width: 600"],
    body.page-discover #discover-root [style*="width:400"],
    body.page-discover #discover-root [style*="width:500"],
    body.page-discover #discover-root [style*="width:600"],
    body.page-discover #discover-root [style*="max-width: 400"],
    body.page-discover #discover-root [style*="max-width: 500"],
    body.page-discover #discover-root [style*="max-width: 600"],
    body.page-discover #discover-root [style*="max-width:400"],
    body.page-discover #discover-root [style*="max-width:500"],
    body.page-discover #discover-root [style*="max-width:600"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Prevent horizontal scroll from padding/margins */
    body.page-discover #discover-root [style*="padding: 3"],
    body.page-discover #discover-root [style*="padding: 4"],
    body.page-discover #discover-root [style*="padding:3"],
    body.page-discover #discover-root [style*="padding:4"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Font sizes: scale down headings */
    body.page-discover #discover-root h1,
    body.page-discover #discover-root [style*="font-size: 2"],
    body.page-discover #discover-root [style*="font-size: 3"],
    body.page-discover #discover-root [style*="font-size:2"],
    body.page-discover #discover-root [style*="font-size:3"] {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    body.page-discover #discover-root h2,
    body.page-discover #discover-root [style*="font-size: 1.5"],
    body.page-discover #discover-root [style*="font-size:1.5"] {
        font-size: 1.2rem !important;
        line-height: 1.3 !important;
    }

    /* Gap overrides for grids/flex containers */
    body.page-discover #discover-root [style*="gap: 2"],
    body.page-discover #discover-root [style*="gap: 3"],
    body.page-discover #discover-root [style*="gap:2"],
    body.page-discover #discover-root [style*="gap:3"] {
        gap: 1rem !important;
    }

    /* Stars/decorative layers: hide on mobile */
    body.page-discover .stars-layer,
    body.page-discover .star {
        display: none !important;
    }
}

/* ── Small phones (≤400px) ── */
@media (max-width: 400px) {
    body.page-discover .rpp-product-card {
        width: 100% !important;
    }

    body.page-discover .rpp-product-img {
        height: 200px !important;
    }

    body.page-discover #discover-root h1,
    body.page-discover #discover-root [style*="font-size: 2"],
    body.page-discover #discover-root [style*="font-size:2"] {
        font-size: 1.25rem !important;
    }
}