/* ═══════════════════════════════════════════════════════════
   [STEP-17] Responsive Overrides — Mobile First
   ═══════════════════════════════════════════════════════════ */

/* ─── Global safety ─── */
img, video, iframe, svg { max-width: 100%; height: auto; }
body { overflow-x: hidden; }
* { box-sizing: border-box; }

/* ─── Tablet ─── */
@media (max-width: 1024px) {
    .container { padding: 0 16px; }
    h1 { font-size: 28px; }
    h2 { font-size: 22px; }
    .footer-cols { grid-template-columns: 1fr 1fr; gap: 24px; }
    .footer-col.about { grid-column: 1 / -1; }
}

/* ─── Small Tablet / Big Phone ─── */
@media (max-width: 900px) {
    .header-search { display: none; }
    .mobile-menu-btn { display: block; }
    .action-btn .label { display: none; }
    .action-btn { min-width: 46px; padding: 8px 10px; }
    .logo { font-size: 20px; }
    .logo-icon { font-size: 26px; }
    .shop-sidebar { display: none; }
    .shop-layout { grid-template-columns: 1fr; }
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    .container { padding: 0 12px; }
    h1 { font-size: 24px; line-height: 1.3; }
    h2 { font-size: 20px; }
    h3 { font-size: 17px; }

    /* Topbar */
    .topbar .container { flex-direction: column; text-align: center; gap: 6px; }
    .topbar-left { display: none; }
    .topbar { font-size: 11px; padding: 6px 0; }
    .topbar-right { justify-content: center; gap: 12px; }

    /* Header */
    .site-header .container { padding: 10px 12px; gap: 10px; }
    .main-nav .container { padding: 4px 12px; gap: 2px; }
    .nav-item { padding: 8px 10px; font-size: 13px; }

    /* Hero */
    .shop-hero { padding: 30px 16px; margin: -12px -12px 20px; }
    .shop-hero h1 { font-size: 24px; }
    .shop-hero p { font-size: 13px; }

    /* Products */
    .shop-grid, .sp-grid, .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .sp-body, .product-body { padding: 10px; }
    .sp-title, .product-title { font-size: 13px; min-height: 40px; }
    .sp-price-current { font-size: 15px; }

    /* Cart */
    .cart-grid, .checkout-grid, .wrap,
    .cart-page-wrap > div[style*="grid-template-columns:1fr 340px"],
    .checkout-page-wrap > div[style*="grid-template-columns:1fr 360px"] {
        grid-template-columns: 1fr !important;
    }
    .cart-summary, .checkout-summary { position: static !important; }
    .cart-item {
        grid-template-columns: 60px 1fr !important;
        gap: 8px !important;
    }
    .cart-item img, .cart-item div:first-child { width: 60px !important; height: 60px !important; }

    /* Forms */
    input, select, textarea { font-size: 16px !important; } /* جلوگیری از zoom iOS */

    /* Buttons */
    .btn, .c-btn { padding: 12px 20px; font-size: 14px; }

    /* Footer */
    .footer-cols { grid-template-columns: 1fr; gap: 16px; text-align: center; }
    .footer-col h4 { display: block; text-align: center; }
    .ff-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .ff-item { flex-direction: column; text-align: center; gap: 8px; }
    .social-links { justify-content: center; }
    .contact-item { justify-content: center; }
    .fb-inner { justify-content: center; text-align: center; }

    /* Tables */
    table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl th, .tbl td { font-size: 12px; padding: 8px 6px; }

    /* Wallet */
    .c-card { padding: 16px; }
    .c-card h2 { font-size: 16px; }

    /* Checkout */
    .checkout-card { padding: 16px !important; }
    .checkout-grid-2 { grid-template-columns: 1fr !important; }

    /* Modal */
    .modal-content, [class*="modal"] > div {
        max-width: 95vw !important;
    }

    /* Story */
    .story-ring { width: 72px; height: 72px; }
    .story-item { width: 80px; }
    .story-title { font-size: 10px; }

    /* Scroll top */
    .scroll-top { bottom: 80px; right: 12px; width: 44px; height: 44px; font-size: 18px; }
}

/* ─── Small Phone ─── */
@media (max-width: 480px) {
    .container { padding: 0 8px; }
    h1 { font-size: 20px; }
    h2 { font-size: 18px; }

    /* Products - single column on very small */
    .shop-grid, .sp-grid {
        grid-template-columns: 1fr;
    }
    .sp-title, .product-title { min-height: auto; }

    /* Hero */
    .shop-hero h1 { font-size: 20px; }

    /* Footer */
    .ff-grid { grid-template-columns: 1fr; }

    /* Buttons */
    .btn, .c-btn { width: 100%; justify-content: center; }

    /* C-card */
    .c-card { padding: 12px; }
    .c-stats { grid-template-columns: 1fr 1fr; }

    /* Story */
    .story-ring { width: 62px; height: 62px; }
    .story-item { width: 70px; }
}

/* ─── Force no overflow ─── */
@media (max-width: 768px) {
    [style*="width: 600px"], [style*="width:600px"],
    [style*="width: 500px"], [style*="width:500px"],
    [style*="width: 400px"], [style*="width:400px"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}