/* =========================================================
   BHAWANI FURNITURE — COMPREHENSIVE RESPONSIVE STYLESHEET
   Breakpoints:
     xl : 1400px+   (Large Desktop)
     lg : 1024–1399px (Desktop / Laptop)
     md : 768–1023px  (Tablet / iPad)
     sm : 480–767px   (Large Phone / Small Tablet)
     xs : 320–479px   (Small Phone)
   ========================================================= */

/* ─── XL: Large widescreen tweaks ─────────────────────── */
@media (min-width: 1400px) {
    .container { max-width: 1380px; }
    .hero-title { font-size: 5rem; }
    .section-title { font-size: 3.2rem; }
}

/* ─── LG: Standard Desktop / Laptop ───────────────────── */
@media (max-width: 1280px) {
    .container { padding-right: 2rem; padding-left: 2rem; }
    .hero-title { font-size: 3.5rem; }
    .section-title { font-size: 2.4rem; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── MD: Tablet / iPad (768px – 1023px) ──────────────── */
@media (max-width: 1024px) {

    /* Container & grids */
    .container { padding-right: 1.5rem; padding-left: 1.5rem; }
    .grid-4  { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .grid-3  { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
    .grid-2  { grid-template-columns: 1fr; gap: 1.5rem; }

    /* Section spacing */
    section  { padding: 2.5rem 0; }

    /* Typography */
    .hero-title    { font-size: 2.8rem; }
    .hero-subtitle { font-size: 1rem; }
    .section-title { font-size: 2rem; }
    .hero-tagline  { font-size: 0.78rem; }

    /* Hero actions: horizontal still fine on tablet */
    .hero-actions  { gap: 12px; }

    /* Navigation: hide desktop nav, show hamburger */
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .btn-header-quote { display: none; }
    
    /* Top bar adjustments for tablet */
    .top-bar-left .top-bar-divider,
    .top-bar-left .top-bar-item:nth-child(3) {
        display: none;
    }

    /* Intro Section */
    .intro-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .intro-images {
        height: 320px;
    }

    /* Stats grid */
    .stats-grid { padding: 2rem 1.5rem; }
    .stat-number { font-size: 2.8rem; }

    /* Timeline: single column */
    .timeline-container::before { left: 20px; }
    .timeline-item,
    .timeline-item:nth-child(even) {
        flex-direction: row !important;
        margin-bottom: 2.5rem;
    }
    .timeline-dot {
        left: 20px;
        transform: translateX(-50%);
    }
    .timeline-card {
        width: calc(100% - 50px);
        margin-left: auto;
        padding: 1.5rem;
    }

    /* Services alternating layout: stack vertically */
    .service-detailed-card,
    .service-detailed-card:nth-child(even) {
        grid-template-columns: 1fr !important;
        gap: 1.5rem;
    }
    .service-detailed-card:nth-child(even) .service-detailed-image-wrapper,
    .service-detailed-card:nth-child(even) .service-detailed-content {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    /* Gallery masonry: 3 columns */
    .gallery-masonry { columns: 3 200px; }

    /* Contact layout */
    .contact-wrapper { grid-template-columns: 1fr; }
    .contact-form-panel { padding: 2rem 1.5rem; }

    /* Quick view modal */
    .quickview-modal-content {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Products controls */
    .products-controls { flex-direction: column; align-items: flex-start; }
    .products-search-wrapper { max-width: 100%; }

    /* Footer grid: 2 columns */
    footer .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .footer-top { margin-bottom: 1.5rem; }
}

/* ─── SM: Large Phone / Phablet (480px – 767px) ───────── */
@media (max-width: 768px) {

    /* Header & Top Bar Mobile Refinements */
    .top-bar { display: none !important; }
    .main-nav-wrapper { height: 68px !important; }
    header .nav-container { padding-left: 1rem !important; padding-right: 1rem !important; }
    
    .logo { gap: 10px; flex-shrink: 1; min-width: 0; }
    .brand-logo-img { height: 48px; max-width: 60px; }
    .mobile-logo-img { height: 46px; max-width: 58px; }
    .footer-logo-img { height: 62px; max-width: 78px; }
    .logo-icon-wrapper { width: 34px; height: 34px; font-size: 0.9rem; flex-shrink: 0; }
    .brand-title { font-size: 1.2rem; white-space: nowrap; }
    .brand-subtitle { display: none !important; }

    .nav-actions { gap: 0.5rem; flex-shrink: 0; }
    .nav-action-btn.nav-phone-btn { display: none !important; }
    .nav-action-btn.nav-search-trigger { width: 34px; height: 34px; font-size: 0.85rem; }
    
    .menu-toggle { width: 28px; height: 18px; flex-shrink: 0; margin-left: 4px; }
    .mobile-nav-overlay { max-width: 100%; border-left: none; }

    /* Root font slightly smaller */
    html { font-size: 15px; }

    /* Container tighter padding */
    .container { padding-right: 1.2rem; padding-left: 1.2rem; }

    /* Grids: all single column */
    .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 1rem; }

    /* Section spacing */
    section { padding: 2rem 0; }

    /* Typography */
    .hero-title    { font-size: 2.1rem; line-height: 1.2; }
    .hero-subtitle { font-size: 0.9rem; }
    .section-title { font-size: 1.8rem; }
    .section-tag   { font-size: 0.72rem; letter-spacing: 2px; }

    /* Hero section */
    .hero { min-height: 100svh; }
    .hero-content { padding-top: 80px; padding-bottom: 2rem; }
    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }
    .hero-actions .btn { width: 100%; text-align: center; justify-content: center; }
    .scroll-indicator { display: none; } /* hide scroll hint on mobile */

    /* Sub-page banners: shorter height */
    .hero[style*="45vh"]  { height: 35vh !important; min-height: 220px; }
    .hero[style*="40vh"]  { height: 30vh !important; min-height: 200px; }
    .hero[style*="35vh"]  { height: 28vh !important; min-height: 185px; }
    .hero-title[style*="3rem"]  { font-size: 1.8rem !important; }
    .hero-title[style*="2.8rem"] { font-size: 1.7rem !important; }

    /* Buttons */
    .btn { padding: 14px 24px; font-size: 0.78rem; letter-spacing: 1.5px; }

    /* Navigation actions: responsive spacing */
    .nav-actions { gap: 0.8rem; }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        padding: 2rem 1rem;
        gap: 1.5rem;
        border-radius: 12px;
    }
    .stat-number { font-size: 2.2rem; }
    .stat-title  { font-size: 0.75rem; }

    /* Intro overlapping images: simplify */
    .intro-images {
        height: 260px;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }
    .intro-img-1 { grid-column: 1 / -1; grid-row: 1; }
    .intro-img-2 { display: none; }   /* hide overlapping image on small screens */
    .intro-content { gap: 12px; }
    .intro-desc    { font-size: 0.95rem; }

    /* Category cards */
    .category-card { height: 260px; }
    .category-card h3 { font-size: 1.3rem; }

    /* Product cards */
    .product-card-img-wrapper { aspect-ratio: 1 / 1; }

    /* Timeline: full width */
    .timeline-container { padding: 1rem 0; }
    .timeline-card { padding: 1.2rem; }
    .timeline-card h3 { font-size: 1.15rem; }
    .timeline-card p  { font-size: 0.875rem; }

    /* Gallery: 2 columns */
    .gallery-masonry { columns: 2 160px; column-gap: 12px; }
    .gallery-item    { margin-bottom: 12px; }

    /* Lightbox nav buttons: slimmer */
    .lightbox-prev { left: 8px; }
    .lightbox-next { right: 8px; }
    .lightbox-nav-btn { width: 38px; height: 38px; font-size: 1rem; }

    /* Contact form */
    .contact-form-panel { padding: 1.5rem 1.2rem; }
    .form-grid { grid-template-columns: 1fr; gap: 1rem; }
    .form-group-full { grid-column: 1; }
    .form-title { font-size: 1.5rem; }
    .contact-info-card { padding: 1.2rem; gap: 12px; }

    /* Hours card */
    .hours-card { padding: 1.2rem; }

    /* Map */
    .map-container { height: 280px; border-radius: 10px; }

    /* Service detailed */
    .service-detailed-card,
    .service-detailed-card:nth-child(even) {
        grid-template-columns: 1fr !important;
        gap: 1rem;
        margin-bottom: 2.5rem;
    }
    .service-detailed-image-wrapper { border-radius: 12px; }
    .service-detailed-content { gap: 10px; }

    /* Footer: full single column */
    footer .grid-4       { grid-template-columns: 1fr !important; gap: 1.8rem; }
    .footer-top          { margin-bottom: 1.5rem; }
    footer               { padding: 2.5rem 0 1.5rem; }
    .footer-col h4       { font-size: 1rem; margin-bottom: 1rem; }
    .footer-brand .logo  { font-size: 1.5rem; }
    .footer-bottom       { flex-direction: column; text-align: center; gap: 0.8rem; padding-top: 1.2rem; }
    .footer-bottom-links { gap: 1rem; font-size: 0.8rem; flex-wrap: wrap; justify-content: center; }

    /* Floating widgets */
    .floating-ctas { bottom: 16px; right: 16px; gap: 10px; }
    .floating-btn  { width: 46px; height: 46px; font-size: 1.2rem; }

    /* Accordion FAQ */
    .accordion-header { font-size: 0.95rem; }

    /* Modals */
    .modal-content { padding: 2rem 1.5rem; }
    .search-input  { font-size: 1.5rem; }

    /* Filter row */
    .filter-container { gap: 8px; }
    .filter-btn { padding: 8px 16px; font-size: 0.72rem; }

    /* Products controls */
    .products-controls { gap: 1rem; }
    .products-search-wrapper { max-width: 100%; }
    .products-sort-select { width: 100%; }
}

/* ─── XS: Small Phones (320px – 479px) ────────────────── */
@media (max-width: 479px) {

    html { font-size: 14px; }

    .container { padding-right: 1rem; padding-left: 1rem; }

    /* Hero text */
    .hero-title    { font-size: 1.8rem; }
    .hero-subtitle { font-size: 0.85rem; line-height: 1.6; }
    .hero-tagline  { font-size: 0.68rem; letter-spacing: 1.5px; }

    /* Section titles */
    .section-title { font-size: 1.55rem; line-height: 1.3; }

    /* Buttons: full width */
    .btn { padding: 12px 20px; font-size: 0.75rem; width: 100%; justify-content: center; }

    /* Navigation extra compact */
    .brand-title { font-size: 1.05rem; }
    .brand-logo-img { height: 42px; max-width: 52px; }
    .mobile-logo-img { height: 40px; max-width: 50px; }
    .footer-logo-img { height: 56px; max-width: 70px; }
    .logo-icon-wrapper { width: 30px; height: 30px; font-size: 0.8rem; }
    .nav-actions { gap: 0.35rem; }
    .nav-action-btn.nav-search-trigger { width: 30px; height: 30px; font-size: 0.75rem; }

    /* Stats: 2 columns still, smaller */
    .stats-grid    { grid-template-columns: repeat(2, 1fr) !important; padding: 1.5rem 0.8rem; gap: 1rem; }
    .stat-number   { font-size: 1.9rem; }
    .stat-title    { font-size: 0.68rem; }

    /* Gallery: single column on 320px */
    .gallery-masonry { columns: 1; }

    /* Timeline: compact */
    .timeline-card { padding: 1rem; }
    .timeline-step { font-size: 0.7rem; }
    .timeline-card h3 { font-size: 1.05rem; }
    .timeline-card p  { font-size: 0.82rem; }

    /* Category cards */
    .category-card { height: 220px; }

    /* Contact form */
    .form-title    { font-size: 1.3rem; }
    .contact-info-card { flex-direction: column; align-items: flex-start; }

    /* Footer */
    footer              { padding: 2rem 0 1.2rem; }
    .footer-col h4      { font-size: 0.9rem; }
    .footer-links a     { font-size: 0.85rem; }
    .footer-contact-info li { font-size: 0.85rem; }

    /* Accordion */
    .accordion-header  { font-size: 0.88rem; }
    .accordion-content p { font-size: 0.85rem; }

    /* Floating widgets */
    .floating-ctas { bottom: 12px; right: 12px; gap: 8px; }
    .floating-btn  { width: 42px; height: 42px; font-size: 1.1rem; }

    /* Scroll progress bar — keep */
    .scroll-progress-container { height: 3px; }

    /* Modals */
    .modal-content { padding: 1.5rem 1rem; margin: 1rem; width: calc(100% - 2rem); }

    /* Filter buttons: wrap fine */
    .filter-btn { padding: 7px 12px; font-size: 0.7rem; }

    /* Map */
    .map-container { height: 220px; }
}

/* ─── UTILITY: hide/show helpers ──────────────────────── */
@media (max-width: 768px)  { .hide-sm { display: none !important; } }
@media (min-width: 769px)  { .show-sm { display: none !important; } }
@media (max-width: 1024px) { .hide-md { display: none !important; } }
@media (min-width: 1025px) { .show-md { display: none !important; } }

/* ─── Touch & Tap: larger touch targets on mobile ─────── */
@media (hover: none) and (pointer: coarse) {
    .btn          { min-height: 48px; }
    .nav-icon     { min-width: 44px; min-height: 44px; }
    .filter-btn   { min-height: 42px; }
    .accordion-header { min-height: 52px; }
    .product-action-btn { width: 50px; height: 50px; }
    .floating-btn { width: 54px; height: 54px; }
    /* Always show product actions on touch (no hover) */
    .product-actions { bottom: 0 !important; }
}

/* ─── PRINT: basic print styles ───────────────────────── */
@media print {
    header, footer, .floating-ctas,
    .scroll-progress-container,
    .custom-cursor, .custom-cursor-follower { display: none !important; }
    body  { background: white; color: black; }
    .hero { height: auto; min-height: 0; }
    a     { text-decoration: underline; }
}