/* ============================================================
   MOBILE PHONE OPTIMIZATION — Priority Fixes
   Addresses: font-size minimums, touch targets, spacing,
   layout overflow, and overall phone readability.
   Applied AFTER all other stylesheets.
   ============================================================ */

/* ===== GLOBAL MOBILE BASELINE (≤768px) ===== */
@media (max-width: 768px) {

    /* --- Min font sizes for readability --- */
    body { font-size: 15px; }

    /* Touch targets: all buttons/links min 44px */
    .offer-action-btn,
    .rv-action-btn,
    .product-action-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    /* Hero: tighten for phone viewport */
    .hero-slides {
        min-height: 300px;
        max-height: 55vh;
    }

    .hero-text h1 {
        font-size: 26px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    .hero-text h2 {
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 12px;
    }

    .hero-text .btn-primary {
        padding: 12px 24px;
        font-size: 14px;
        min-height: 44px;
    }

    .hero-arrow {
        width: 40px;
        height: 40px;
        font-size: 14px;
        min-width: 44px;
        min-height: 44px;
    }

    /* --- Section headers compact --- */
    .section-padding {
        padding: 40px 0;
    }

    .section-header {
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 22px;
        line-height: 1.3;
    }

    .section-subtitle {
        font-size: 13px;
        line-height: 1.5;
    }

    /* --- Announcement bar readable --- */
    .announcement-bar {
        font-size: 13px;
        padding: 8px 12px;
    }

    /* --- Navigation hamburger area --- */
    .mobile-menu-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* --- Product cards --- */
    .product-name {
        font-size: 14px;
        line-height: 1.4;
    }

    .current-price {
        font-size: 16px;
    }

    .original-price {
        font-size: 13px;
    }

    .product-actions .btn-primary {
        font-size: 13px;
        padding: 10px 16px;
        min-height: 44px;
    }

    /* --- Offer cards --- */
    .offer-badge {
        font-size: 12px;
        padding: 6px 12px;
    }

    .offer-cat {
        font-size: 12px;
    }

    .offer-name {
        font-size: 15px;
        line-height: 1.3;
    }

    .offer-price {
        font-size: 16px;
    }

    .offer-old-price {
        font-size: 13px;
    }

    .offer-savings {
        font-size: 12px;
    }

    .offer-cart-btn {
        font-size: 13px;
        padding: 10px 16px;
        min-height: 44px;
    }

    /* Offers grid: 2 columns max on tablet, 1 on phone */
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* --- Countdown --- */
    .countdown-box {
        min-width: 56px;
        padding: 10px 8px;
    }

    .count-num {
        font-size: 24px;
    }

    .count-label {
        font-size: 11px;
        letter-spacing: 0.5px;
    }

    .promo-countdown-unit {
        min-width: 48px;
        padding: 8px;
    }

    /* --- Testimonials --- */
    .tcard-stars .fas,
    .tcard-stars .far {
        font-size: 14px;
    }

    .tcard-city {
        font-size: 13px;
    }

    .spot-label {
        font-size: 12px;
    }

    /* --- Stats --- */
    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 12px;
    }

    /* --- Brand Story --- */
    .brand-stats {
        gap: 16px;
    }

    /* --- Recently viewed --- */
    .rv-name {
        font-size: 13px;
    }

    /* --- Deal of the Day --- */
    .deal-stock-bar {
        max-width: 100%;
    }

    /* --- Newsletter --- */
    .newsletter-form input {
        font-size: 16px; /* prevents iOS zoom on focus */
        min-height: 44px;
    }

    .newsletter-form button {
        min-height: 44px;
        font-size: 14px;
    }

    /* --- Category cards --- */
    .cat-img-info h3 {
        font-size: 13px;
    }

    .cat-img-info {
        padding: 8px 6px;
    }

    /* --- Footer --- */
    .footer-links a {
        font-size: 14px;
        padding: 4px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* --- Fix any horizontal overflow --- */
    .container,
    section,
    .hero-section {
        overflow-x: hidden;
    }

    /* --- Room cards --- */
    .rooms-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rooms-grid .room-large {
        grid-row: span 1;
    }

    .room-card {
        min-height: 200px;
    }

    /* --- Complete the look tabs --- */
    .look-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
    }

    .look-tabs::-webkit-scrollbar { display: none; }

    .look-tab-btn, .look-tab {
        padding: 10px 16px;
        font-size: 13px;
        flex-shrink: 0;
        min-height: 44px;
    }

    /* --- Wood customizer --- */
    .wood-customizer-section {
        padding: 40px 0 !important;
    }

    .wood-customizer-section h2 {
        font-size: 22px !important;
    }

    /* --- AI Visualizer compact --- */
    .ai-viz-heading {
        font-size: 22px;
    }
}

/* ===== PHONE ONLY (≤480px) ===== */
@media (max-width: 480px) {

    .hero-slides {
        min-height: 260px;
        max-height: 50vh;
    }

    .hero-text h1 {
        font-size: 22px;
    }

    .hero-text h2 {
        font-size: 14px;
    }

    .section-title {
        font-size: 20px;
    }

    .section-subtitle {
        font-size: 12px;
    }

    .section-padding {
        padding: 32px 0;
    }

    /* Single column offers */
    .offers-grid {
        grid-template-columns: 1fr;
    }

    /* Product grid 2-col tight */
    .products-grid,
    .shop-grid,
    .bs-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .product-name {
        font-size: 13px;
    }

    .current-price {
        font-size: 15px;
    }

    .product-actions .btn-primary {
        font-size: 12px;
        padding: 8px 12px;
        min-height: 44px;
    }

    /* Countdown tighter */
    .countdown-box {
        min-width: 48px;
        padding: 8px 6px;
    }

    .count-num {
        font-size: 22px;
    }

    .count-label {
        font-size: 10px;
    }

    /* Category grid */
    .cat-image-grid {
        gap: 8px;
    }

    .cat-img-info {
        padding: 6px 5px;
    }

    .cat-img-info h3 {
        font-size: 12px;
    }

    /* Feature cards stack */
    .feature-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* WhatsApp float */
    .whatsapp-float {
        width: 50px;
        height: 50px;
        font-size: 22px;
        bottom: 20px;
        right: 16px;
    }
}

/* ===== EXTRA SMALL PHONE (<375px) ===== */
@media (max-width: 375px) {

    .container {
        padding: 0 12px;
    }

    .hero-slides {
        min-height: 240px;
    }

    .hero-text h1 {
        font-size: 20px;
    }

    .hero-text h2 {
        font-size: 13px;
    }

    .hero-text .btn-primary {
        padding: 10px 20px;
        font-size: 13px;
    }

    .section-title {
        font-size: 18px;
    }

    .section-subtitle {
        font-size: 12px; /* floor — never below 12px */
    }

    .cat-img-info h3 {
        font-size: 11px;
    }

    .countdown-box {
        min-width: 44px;
        padding: 6px 5px;
    }

    .count-num {
        font-size: 20px;
    }

    .count-label {
        font-size: 10px; /* floor — absolute min for tiny labels */
    }

    .product-name {
        font-size: 12px;
    }

    .product-actions .btn-primary {
        font-size: 12px;
        padding: 8px 10px;
    }

    .stat-number {
        font-size: 1.3rem;
    }

    .stat-label {
        font-size: 11px;
    }

    /* Best sellers single col */
    .bs-grid {
        grid-template-columns: 1fr;
    }

    .bs-hero {
        grid-column: span 1;
    }

    .look-tab-btn, .look-tab {
        padding: 8px 14px;
        font-size: 12px;
        min-height: 44px;
    }

    .whatsapp-float {
        width: 48px;
        height: 48px;
        font-size: 20px;
        bottom: 16px;
        right: 12px;
    }
}

/* ===== LANDSCAPE FIX ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-slides {
        min-height: 200px;
        max-height: 70vh;
    }

    .section-padding {
        padding: 24px 0;
    }
}

/* ===== iOS INPUT ZOOM FIX ===== */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* prevents iOS auto-zoom on focus */
    }
}

/* ===== SAFE AREA BOTTOM (iPhone gesture bar) ===== */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .footer,
    .mobile-menu-overlay,
    .cart-overlay {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}