/* =============================================================
   KR Jewellers — mobile-rescue.css (CLEAN & MINIMAL)
   Purpose: Mobile-only layout fixes without affecting desktop.
   ============================================================= */

/* --- Harmless always-on: ensure header is visible on load --- */
#root [data-js-target="headerWithNav"] {
    background: #fff !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

#root [data-js-target="headerWithNav"] .mceText--isLogo h1,
#root [data-js-target="headerWithNav"] .mceText--isLogo h1 *,
#root [data-js-target="headerWithNav"] .mceText--isLogo #headerLogo {
    color: #000 !important;
    /* KR Jewellers stays black */
}

/* ============================
   MOBILE ONLY (phones/tablets)
   ============================ */
@media (max-width: 820px) {

    /* ---------- HEADER: single row ---------- */
    #section_c223bb8845911a9c05725ca9b905532a .mceRow--maxWidth,
    #section_c223bb8845911a9c05725ca9b905532a .mceColumns {
        display: flex !important;
        align-items: center !important;
        /* vertical centering */
        justify-content: center !important;
        /* center the brand block as a unit */
        position: relative !important;
        padding-right: 0 !important;
        /* let button reach edge */
    }

    /* Prevent columns from stretching full width */
    #section_c223bb8845911a9c05725ca9b905532a .mceColumn {
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Brand group: logo + KR Jewellers text */
    #section_c223bb8845911a9c05725ca9b905532a .mceText--isLogo {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        width: 100% !important;
        /* needed so button can push right */
        position: relative !important;
        left: 2% !important;
        /* keep KR position as you set */
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    #section_c223bb8845911a9c05725ca9b905532a .mceText--isLogo img[alt*="KR"i] {
        height: 28px !important;
        width: auto !important;
        margin: 0 !important;
        display: inline-block !important;
    }

    #section_c223bb8845911a9c05725ca9b905532a .mceText--isLogo h1,
    #section_c223bb8845911a9c05725ca9b905532a .mceText--isLogo h2,
    #section_c223bb8845911a9c05725ca9b905532a .mceText--isLogo h3 {
        font-size: 17px !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* Contact Us — same line, flush right, aligned with text */
    #section_c223bb8845911a9c05725ca9b905532a  .contact-btn {
        /* use flexbox, not absolute */
        margin-left: 10% !important;
        white-space: nowrap !important;
        transform: translateY(-30%);
        font-size: 11px !important;
        padding: 4px 8px !important;
        border-radius: 4px !important;

        background-color: #000 !important;
        color: #fff !important;
        text-decoration: none !important;
    }

    /* ---------- FOOTER: logo + text, left-aligned ---------- */
    #section_e7d838c7ae0839a024ea9681105aed4b .mceText--isLogo {
        display: inline-flex !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        flex-wrap: nowrap !important;
        white-space: nowrap !important;
    }

    #section_e7d838c7ae0839a024ea9681105aed4b .mceText--isLogo img[alt*="KR"i] {
        height: 28px !important;
        width: auto !important;
        margin: 0 !important;
    }

    #section_e7d838c7ae0839a024ea9681105aed4b .mceText--isLogo h1,
    #section_e7d838c7ae0839a024ea9681105aed4b .mceText--isLogo h2,
    #section_e7d838c7ae0839a024ea9681105aed4b .mceText--isLogo h3 {
        font-size: clamp(16px, 5vw, 22px) !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }
}