/* ============================================================
   WEST TREND – Mobile Responsive Styles
   Applies to all screens <= 991px
   ============================================================ */

/* ── 1. HEADER ─────────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Lock header height */
    :root { --header-height: 64px; }

    .gray-nicolls-header {
        height: 64px !important;
    }

    .header-container {
        height: 64px !important;
        padding: 0 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: visible !important;
    }

    .header-top-row {
        height: 64px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    /* Logo always visible, constrained */
    .header-left-actions {
        flex: 0 0 auto !important;
        max-width: 160px !important;
    }

    .header-logo-img {
        height: 38px !important;
        width: auto !important;
        max-width: 150px !important;
        object-fit: contain !important;
        display: block !important;
    }

    /* Hide full desktop nav */
    .main-navigation {
        display: none !important;
    }

    /* Right side: cart + hamburger only */
    .header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
    }

    .header-actions .search-container,
    .header-actions .wishlist-link,
    .header-actions .account-container {
        display: none !important;
    }

    .header-actions .cart-container {
        display: flex !important;
        align-items: center !important;
    }

    .cart-link {
        font-size: 20px !important;
        padding: 8px !important;
        color: #000 !important;
    }

    /* Hamburger button */
    .mobile-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 40px !important;
        height: 40px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 0 !important;
        gap: 5px !important;
    }

    .mobile-toggle span {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: #000 !important;
        border-radius: 2px !important;
        transition: all 0.3s !important;
    }

    /* Main content top spacing */
    .main-content {
        margin-top: 64px !important;
    }
}

/* ── 2. TYPOGRAPHY ─────────────────────────────────────────── */
@media (max-width: 767px) {
    h1 { font-size: 1.7rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    h4 { font-size: 1.05rem !important; }
}

/* ── 3. HERO SECTION ───────────────────────────────────────── */
@media (max-width: 767px) {
    .hero-section {
        min-height: 320px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
        text-align: center !important;
    }

    .hero-section h1,
    .hero-title {
        font-size: 1.7rem !important;
        line-height: 1.3 !important;
    }

    .hero-section p,
    .hero-subtitle {
        font-size: 0.95rem !important;
    }

    .hero-section .btn {
        padding: 12px 24px !important;
        font-size: 0.9rem !important;
    }

    .hero-section .d-flex.gap-3,
    .hero-section .d-flex.gap-4 {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
}

/* ── 4. PRODUCT GRID ───────────────────────────────────────── */
@media (max-width: 767px) {
    /* 2 products per row on mobile */
    .product-card {
        border-radius: 10px !important;
    }

    .product-card .card-img-top,
    .product-card img {
        height: 160px !important;
        object-fit: cover !important;
    }

    .product-card .card-body {
        padding: 10px !important;
    }

    .product-card .card-title,
    .product-card h5 {
        font-size: 0.85rem !important;
        margin-bottom: 4px !important;
    }

    .product-card .current-price,
    .product-card .product-price {
        font-size: 0.95rem !important;
    }

    .product-card .btn {
        font-size: 0.8rem !important;
        padding: 7px 10px !important;
    }
}

/* ── 5. CATEGORY CARDS ─────────────────────────────────────── */
@media (max-width: 767px) {
    .category-card img {
        height: 120px !important;
        object-fit: cover !important;
    }

    .category-card .card-body {
        padding: 10px !important;
    }
}

/* ── 6. SECTION SPACING ────────────────────────────────────── */
@media (max-width: 767px) {
    section,
    .section,
    .py-5 {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }

    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .section-title {
        font-size: 1.4rem !important;
        margin-bottom: 20px !important;
    }
}

/* ── 7. PRODUCT DETAIL PAGE ────────────────────────────────── */
@media (max-width: 767px) {
    .product-detail-img,
    .product-main-image img {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
        object-fit: contain !important;
    }

    .product-thumbnails {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 6px !important;
    }

    .product-thumbnails img {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
    }

    .product-price-section .current-price,
    .product-price {
        font-size: 1.5rem !important;
    }

    .quantity-selector {
        gap: 8px !important;
    }
}

/* ── 8. CART PAGE ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .cart-row {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .cart-row img {
        width: 65px !important;
        height: 65px !important;
    }

    .cart-row .quantity-selector {
        margin-top: 6px !important;
    }
}

/* ── 9. CHECKOUT PAGE ──────────────────────────────────────── */
@media (max-width: 767px) {
    .checkout-form .col-md-6 {
        margin-bottom: 10px !important;
    }

    .payment-options {
        flex-direction: column !important;
    }
}

/* ── 10. BLOG PAGE ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .blog-card img {
        height: 180px !important;
        object-fit: cover !important;
    }

    .blog-sidebar {
        margin-top: 24px !important;
    }
}

/* ── 11. FORMS & INPUTS ────────────────────────────────────── */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    .btn-lg {
        width: 100% !important;
        padding: 14px !important;
    }
}

/* ── 12. FOOTER ────────────────────────────────────────────── */
@media (max-width: 767px) {
    footer .col-md-3,
    footer .col-md-4,
    footer .col-lg-3,
    footer .col-lg-4 {
        margin-bottom: 24px !important;
    }

    footer {
        text-align: center !important;
    }

    footer .d-flex {
        justify-content: center !important;
    }

    footer ul {
        padding-left: 0 !important;
    }
}

/* ── 13. TABLES (orders, etc.) ─────────────────────────────── */
@media (max-width: 767px) {
    .table-responsive-mobile {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Stack order cards properly */
    .order-card .row {
        flex-direction: column !important;
    }
}

/* ── 13b. MOBILE MENU COMPACT SPACING ─────────────────────── */
@media (max-width: 991px) {
    .mobile-menu-link {
        padding: 7px 0 !important;
        font-size: 13px !important;
        min-height: auto !important;
        line-height: 1.3 !important;
    }

    .mobile-menu-item {
        border-bottom: 1px solid #f0f0f0 !important;
        margin: 0 !important;
    }

    .mobile-submenu a {
        padding: 5px 0 !important;
        font-size: 12px !important;
    }

    .mobile-submenu {
        padding: 2px 0 6px 14px !important;
    }

    .mobile-menu-container {
        padding: 10px 16px !important;
    }

    .mobile-search {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .mobile-nav {
        margin-bottom: 12px !important;
    }
}

/* ── 14. GENERAL UTILITIES ─────────────────────────────────── */
@media (max-width: 767px) {
    .hide-mobile { display: none !important; }
    .show-mobile { display: block !important; }

    /* Fix overflowing content */
    * {
        max-width: 100% !important;
        word-break: break-word !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden !important;
    }
}