/* ============================================================
   RESPONSIVE — MOBILE FIRST BREAKPOINTS
   ============================================================ */

/* ---- Wide: 1280px+ ---- */
@media (min-width: 1280px) {
    :root {
        --container-padding: 40px;
    }
}

/* ---- Desktop: 1024px–1279px ---- */
@media (max-width: 1279px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Tablet breakpoint: 768px–1023px ---- */
@media (max-width: 1023px) {

    /* Header */
    .main-nav {
        display: none;
    }

    .hamburger-btn {
        display: flex;
    }

    /* Hide search, wishlist, account on mobile — keep only cart + hamburger */
    #search-open-btn,
    .header-icons > a[aria-label*="علاقه"],
    .header-account {
        display: none;
    }

    .header-inner {
        justify-content: space-between;
    }

    /* No mega menu on mobile */
    .mega-menu {
        display: none !important;
    }

    /* Shop layout: full width, sidebar becomes drawer */
    .shop-layout {
        grid-template-columns: 1fr;
    }

    .shop-sidebar {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 2000;
        overflow-y: auto;
        background: #fff;
        padding: 24px;
        box-shadow: var(--shadow-medium);
    }

    .shop-sidebar.mobile-open {
        display: block;
    }

    .mobile-filter-btn {
        display: flex;
    }

    /* Product grid */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .product-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Category grid — auto-fill handles this; force 2 col min */
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    /* Blog grid */
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Single product */
    .single-product-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .product-gallery {
        position: static;
    }

    /* Cart */
    .cart-layout {
        grid-template-columns: 1fr;
    }

    /* Checkout */
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    /* Blog single */
    .blog-single-layout {
        grid-template-columns: 1fr;
    }

    /* Contact */
    .contact-layout {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    /* Hero */
    .hero-content {
        max-width: 480px;
        padding-inline-end: 0;
    }

    /* Sale banner */
    .sale-banner {
        aspect-ratio: auto;
    }
    .sale-banner-inner {
        flex-direction: column;
        text-align: center;
        gap: 24px;
        padding-block: 48px;
    }

    /* Quick view */
    .quick-view-inner {
        grid-template-columns: 1fr;
    }

    .quick-view-img {
        aspect-ratio: 4/3;
        border-radius: var(--radius-modal) var(--radius-modal) 0 0;
    }
}

/* ---- Small tablet / large mobile: 576px–767px ---- */
@media (max-width: 767px) {

    :root {
        --container-padding: 16px;
        --header-height: 60px;
    }

    /* Typography */
    body {
        font-size: 14px;
    }

    .section-pad {
        padding-block: 48px;
    }

    .section-pad-sm {
        padding-block: 32px;
    }

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

    /* Product grid: 2 col smaller */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

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

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

    .product-card-price .price-sale {
        font-size: 13px;
    }

    /* Always show action bar on touch/mobile */
    .product-card-actions {
        transform: translateY(0) !important;
    }

    /* Old ATC legacy rule */
    .product-card-atc {
        display: block;
        font-size: 12px;
        padding: 9px 10px;
    }

    .product-card-wishlist {
        opacity: 1;
    }

    /* Category grid — 2 col on small screens, scrollable feel */
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        max-width: unset;
    }

    /* ── Hero (mobile) — editorial premium first-impression ── */
    .hero-section {
        position: relative;
        flex-direction: column;
        min-height: auto !important;
        aspect-ratio: auto !important;
        border-radius: 0 !important;
        width: auto !important;
        max-width: none !important;
        background:
            radial-gradient(ellipse 80% 40% at 50% 110%, rgba(200,131,90,0.10) 0%, transparent 70%),
            linear-gradient(180deg, var(--color-bg-soft) 0%, #fff 100%);
        display: block;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
    }
    /* Decorative top hairline accent */
    .hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(200,131,90,0.4), transparent);
        z-index: 3;
    }
    .hero-bg { display: none !important; }

    /* Image wrap with vignette + accent corner mark */
    .hero-bg-mobile {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        object-fit: cover;
        vertical-align: top;
        position: relative;
        z-index: 1;
    }

    .hero-overlay { display: none !important; }

    .hero-section > .container {
        position: relative !important;
        z-index: 2;
        width: 100% !important;
        margin: 0 auto !important;
        padding-block: 28px 38px !important;
    }
    /* Editorial divider above content */
    .hero-section > .container::before {
        content: '';
        display: block;
        width: 28px;
        height: 2px;
        background: var(--color-accent);
        margin: 0 auto 14px;
        border-radius: 2px;
    }

    .hero-content {
        max-width: 100% !important;
        text-align: center;
        margin: 0 !important;
    }
    .hero-label {
        color: var(--color-accent) !important;
        font-size: 10px !important;
        letter-spacing: 0.3em !important;
        text-transform: uppercase;
        margin: 0 0 10px !important;
        font-weight: 700;
        display: inline-block;
    }
    .hero-title {
        color: var(--color-primary) !important;
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.18 !important;
        letter-spacing: -0.035em !important;
        margin: 0 0 12px !important;
        font-weight: 800 !important;
    }
    .hero-subtitle {
        color: var(--color-text-muted) !important;
        font-size: 13.5px !important;
        line-height: 1.85 !important;
        margin: 0 auto 22px !important;
        max-width: 320px;
        font-weight: 400;
    }
    .hero-ctas {
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }
    .hero-ctas .btn {
        flex: 1;
        min-width: 130px;
        max-width: 180px;
        padding: 13px 18px !important;
        font-size: 13px !important;
        border-radius: 999px !important;
    }
    .hero-ctas .btn-primary {
        box-shadow: 0 6px 18px rgba(200, 131, 90, 0.28);
    }
    /* Outline button on light bg → dark stroke */
    .hero-ctas .btn-outline {
        border-color: var(--color-primary) !important;
        color: var(--color-primary) !important;
        background: transparent !important;
    }
    .hero-ctas .btn-outline:hover {
        background: var(--color-primary) !important;
        color: #fff !important;
        border-color: var(--color-primary) !important;
    }
    .hero-scroll { display: none !important; }

    .hero-ctas .btn {
        min-width: 130px;
        padding: 12px 20px;
        font-size: 13px;
    }

    /* Trust badges */
    .trust-badges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .trust-badge {
        flex-direction: column;
        text-align: center;
        padding: 16px;
    }

    /* Blog grid */
    .blog-grid {
        grid-template-columns: 1fr;
    }

    /* Newsletter */
    .newsletter-form {
        flex-direction: column;
        border: none;
        background: transparent;
        gap: 8px;
    }

    .newsletter-form input {
        border: 1px solid var(--color-border);
        border-radius: 4px;
        padding: 14px 16px;
        background: #fff;
    }

    .newsletter-form button {
        border-radius: 4px;
        width: 100%;
    }

    /* Mini cart */
    .mini-cart-drawer {
        width: 100%;
    }

    /* Mobile menu */
    .mobile-menu-panel {
        width: 100%;
    }

    /* Shop toolbar */
    .shop-toolbar {
        flex-wrap: wrap;
        gap: 12px;
    }

    /* Cart table */
    .cart-table {
        font-size: 12px;
        overflow-x: auto;
    }

    .cart-table td, .cart-table th {
        padding: 10px 10px;
        min-width: 80px;
    }

    .cart-product-img {
        width: 52px;
        height: 64px;
    }

    /* Checkout form rows */
    .form-row {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-upper {
        padding-block: 40px;
    }

    .footer-lower-inner {
        flex-direction: column;
        text-align: center;
    }

    /* Single product */
    .product-price-block {
        padding: 14px;
    }

    .product-price-sale {
        font-size: 22px;
    }

    .product-add-qty {
        flex-wrap: wrap;
    }

    .product-add-qty .btn-add-to-cart {
        width: 100%;
    }

    /* Tabs */
    .tabs-nav {
        overflow-x: auto;
        gap: 0;
    }

    .tab-btn {
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Review summary */
    .review-summary {
        flex-direction: column;
        gap: 20px;
    }

    /* Page hero */
    .page-hero {
        padding-block: 28px;
    }

    .page-hero-title {
        font-size: 22px;
    }

    /* Breadcrumb */
    .breadcrumb-list {
        font-size: 12px;
    }

    /* FAQ */
    .faq-question {
        font-size: 14px;
        padding: 14px 16px;
    }

    /* Section header */
    .section-header {
        margin-bottom: 24px;
    }

    /* Sale banner */
    .sale-banner-title {
        font-size: 26px;
    }

    /* Quick view */
    .quick-view-modal {
        margin: 16px;
    }

    .quick-view-info {
        padding: 20px;
    }

    /* 404 */
    .page-404-number {
        font-size: 100px;
    }

    .page-404-title {
        font-size: 20px;
    }
}

/* ---- Mobile: 0–575px ---- */
@media (max-width: 575px) {

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

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

    /* Product specs */
    .specs-table td:first-child {
        width: 120px;
    }

    /* Sort and view */
    .view-toggle {
        display: none;
    }

    /* Product thumbs horizontal scroll */
    .product-thumbs {
        gap: 6px;
    }

    .product-thumb {
        width: 56px;
        height: 56px;
    }

    /* Size guide modal */
    .size-guide-modal {
        padding: 20px;
        border-radius: var(--radius-modal);
    }
}

/* ---- Touch device optimizations ---- */
@media (hover: none) {
    .product-card-quick-view {
        display: none;
    }

    .product-card-atc {
        display: block;
    }

    .product-card-wishlist {
        opacity: 1;
    }

    .product-card:hover .product-card-img {
        transform: none;
    }
}

/* ---- Account page responsive ---- */
@media (max-width: 900px) {
    .account-layout {
        grid-template-columns: 1fr;
    }

    .account-sidebar {
        position: static;
    }

    .account-nav-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .account-nav-link {
        padding: 8px 14px;
        background: var(--color-bg-soft);
        margin-bottom: 0;
    }

    .account-dashboard-grid {
        grid-template-columns: 1fr 1fr;
    }

    .auth-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .thankyou-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .thankyou-info-grid {
        grid-template-columns: 1fr;
    }

    .thankyou-actions {
        flex-direction: column;
    }

    .thankyou-actions .btn { width: 100%; justify-content: center; }

    .account-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- Print styles ---- */
@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .shop-sidebar,
    .mini-cart-drawer,
    .mobile-menu-panel,
    .toast-container {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }
}