/* =========================================================
   MOBILE VIEW - FINAL RESPONSIVE FIX
   Prevent horizontal scrolling and fit every section to phone width.
========================================================= */

html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
}

*, *::before, *::after {
    box-sizing: border-box;
}

img, video, iframe, canvas, svg {
    max-width: 100%;
}

@media (max-width: 600px) {

    /* ---------- GLOBAL ---------- */
    body {
        min-width: 0 !important;
        width: 100% !important;
    }

    main, section, header, footer, .container, .section,
    .section-container, .categories, .featured-books,
    .home-about, .home-contact, .about-section, .contact-section {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* ---------- TOP BAR ---------- */
    .top-bar {
        width: 100% !important;
        padding: 6px 10px !important;
        font-size: 9px !important;
        line-height: 1.4;
        overflow: hidden;
    }

    /* ---------- NAVBAR ---------- */
    .navbar {
        position: sticky !important;
        top: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 60px !important;
        height: auto !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 7px !important;
        padding: 8px 10px !important;
        margin: 0 !important;
    }

    .logo {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .logo img {
        width: 82px !important;
        max-width: 82px !important;
        height: auto !important;
    }

    .nav-icons {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        width: auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 5px !important;
    }

    .nav-search {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 145px !important;
        height: 34px !important;
    }

    .nav-search input {
        min-width: 0 !important;
        width: 100% !important;
        padding: 0 7px !important;
        font-size: 9px !important;
    }

    .nav-search button {
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        font-size: 11px !important;
    }

    .wishlist-icon, .cart-icon {
        flex: 0 0 26px !important;
        width: 26px !important;
        min-width: 26px !important;
        height: 30px !important;
        font-size: 16px !important;
    }

    .login-btn {
        flex: 0 0 auto !important;
        padding: 7px 8px !important;
        font-size: 9px !important;
        border-radius: 7px !important;
    }

    /* Mobile menu button is injected by site-enhancements.js */
    .mobile-menu-toggle {
        display: inline-flex !important;
        flex: 0 0 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: #eef2f7 !important;
        color: #0A2A66 !important;
        font-size: 16px !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .nav-links {
        position: absolute !important;
        left: 10px !important;
        right: 10px !important;
        top: calc(100% + 4px) !important;
        width: auto !important;
        max-width: none !important;
        display: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        padding: 8px !important;
        margin: 0 !important;
        background: #fff !important;
        border-radius: 12px !important;
        box-shadow: 0 12px 30px rgba(0,0,0,.14) !important;
        z-index: 100000 !important;
    }

    .navbar.menu-open .nav-links {
        display: flex !important;
    }

    .nav-links li {
        width: 100% !important;
    }

    .nav-links a {
        display: block !important;
        width: 100% !important;
        padding: 11px 12px !important;
        font-size: 12px !important;
        border-radius: 8px !important;
    }

    /* ---------- HERO ---------- */
    .hero {
        width: 100% !important;
        min-height: 0 !important;
        padding: 35px 16px 40px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 24px !important;
        overflow: hidden !important;
    }

    .hero-left, .hero-right {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero-left {
        text-align: center !important;
        align-items: center !important;
    }

    .hero h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(27px, 8vw, 34px) !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
    }

    .hero-left > p {
        max-width: 100% !important;
        font-size: 12px !important;
        line-height: 1.65 !important;
    }

    .hero-buttons {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    .slider {
        width: 100% !important;
        max-width: 100% !important;
    }

    .slider img, #slider-image {
        width: min(230px, 75vw) !important;
        height: auto !important;
        max-height: 310px !important;
    }

    /* ---------- SECTION TITLES ---------- */
    .section-title {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    .section-title h2 {
        font-size: clamp(22px, 6vw, 27px) !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    .section-title p {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    /* ---------- CATEGORIES ---------- */
    .categories {
        padding: 40px 14px !important;
        overflow: hidden !important;
    }

    .category-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 25px 0 0 !important;
    }

    .category-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 105px !important;
        padding: 14px 8px !important;
        overflow: hidden !important;
    }

    .category-card i {
        font-size: 23px !important;
        margin-bottom: 7px !important;
    }

    .category-card h3 {
        max-width: 100% !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
    }

    .all-books-btn-container {
        width: 100% !important;
        margin: 22px 0 5px !important;
    }

    #showAllBooks, .all-books-btn {
        max-width: 90% !important;
        padding: 11px 20px !important;
        font-size: 12px !important;
    }

    /* ---------- BOOKS ---------- */
    .featured-books {
        padding: 40px 14px !important;
        overflow: hidden !important;
    }

    .book-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .book-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .book-card img {
        width: 100% !important;
        height: 175px !important;
        padding: 7px !important;
        object-fit: contain !important;
    }

    .book-info {
        min-width: 0 !important;
        padding: 9px !important;
    }

    .book-info h3, .book-info p, .book-info h4 {
        max-width: 100% !important;
        overflow-wrap: anywhere;
    }

    .book-info h3 {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .book-info p { font-size: 9px !important; }
    .book-info h4 { font-size: 14px !important; }

    .book-buttons {
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        gap: 5px !important;
    }

    .cart-btn {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        height: 32px !important;
        padding: 0 5px !important;
        font-size: 8px !important;
    }

    .wish-btn {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
    }

    .pdf-btn {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 7px 4px !important;
        font-size: 8px !important;
    }

    /* ---------- ABOUT / CONTACT ---------- */
    .about-section, .home-about, .contact-section, .home-contact {
        padding: 40px 14px !important;
        overflow: hidden !important;
    }

    .about-container, .contact-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 22px !important;
    }

    .about-image, .about-content, .contact-info, .contact-form {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .about-content h2 { font-size: 25px !important; }
    .about-content p { font-size: 12px !important; }

    .home-about-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 16px !important;
        overflow: hidden !important;
    }

    /* ---------- FOOTER ---------- */
    .footer-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: 1fr !important;
        padding: 35px 14px !important;
        gap: 22px !important;
    }

    /* ---------- INNER PAGES ---------- */
    .cart-hero, .cart-section, .checkout-section, .order-success,
    .wishlist-section, .login-section, .register-section, .book-details {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .book-details {
        display: flex !important;
        flex-direction: column !important;
        margin: 25px auto !important;
        padding: 14px !important;
        gap: 20px !important;
    }

    .book-image, .book-info {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Tables/forms must never force the phone wider */
    table { max-width: 100% !important; }
    input, select, textarea, button { max-width: 100%; }
}

@media (max-width: 390px) {
    .navbar { padding-left: 7px !important; padding-right: 7px !important; }
    .logo img { width: 74px !important; max-width: 74px !important; }
    .nav-search { max-width: 112px !important; }
    .login-btn { padding-left: 6px !important; padding-right: 6px !important; }
    .category-container, .book-container { gap: 8px !important; }
    .category-card { min-height: 98px !important; }
    .book-card img { height: 155px !important; }
}


/* TOP BAR: keep it pinned on every page */
.top-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Keep the existing navbar sticky, but place it just below the pinned top bar. */
.navbar {
  top: 31px !important;
}

@media (max-width: 600px) {
  .navbar {
    top: 25px !important;
  }
}


/* MAIN NAVBAR PINNED: logo + menu + search + login + cart stay visible while scrolling.
   The small blue information bar remains normal so it does not overlap the navbar. */
.top-bar {
    position: relative !important;
    top: auto !important;
    z-index: 1000 !important;
}
.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 99999 !important;
}

/* =========================================================
   FINAL NAVBAR PIN FIX
   Main navbar (logo + menu + search + login + cart) stays
   visible while scrolling. The small blue top bar is NOT pinned.
========================================================= */
html, body {
    overflow-x: clip !important;
}

.navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 999999 !important;
}

.top-bar {
    position: relative !important;
    top: auto !important;
    z-index: 1000 !important;
}