/* ══════════════════════════════════════════════════════════════
   MARKETONEX — MASTER RESPONSIVE STYLESHEET
   Breakpoints:
     Desktop  : > 1200px  (base styles in marketonex.css)
     Laptop   : 1025px – 1200px
     Tablet   : 481px – 1024px
     Mobile   : 321px – 480px
     Sm Mobile: ≤ 320px
   ══════════════════════════════════════════════════════════════ */

/* ── Global overflow guard ── */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

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

/* ══════════════════════════════════════════════════════════════
   SECTION 1 — DESIGN TOKENS (scale per breakpoint)
   ══════════════════════════════════════════════════════════════ */
:root {
    --btn-h: 48px;
    --btn-py: 12px;
    --btn-px: 28px;
    --btn-fs: 0.95rem;
    --btn-radius: 10px;

    --h1: 2.4rem;
    --h2: 1.8rem;
    --h3: 1.3rem;
    --body-fs: 1rem;

    --section-py: 60px;
    --container-px: 40px;
    --card-p: 24px;
    --gap-grid: 24px;
}

/* Laptop */
@media (max-width: 1200px) {
    :root {
        --btn-h: 46px;
        --btn-py: 11px;
        --btn-px: 24px;
        --btn-fs: 0.92rem;
        --h1: 2.1rem;
        --h2: 1.6rem;
        --section-py: 48px;
        --container-px: 28px;
        --card-p: 20px;
        --gap-grid: 20px;
    }
}

/* Tablet */
@media (max-width: 1024px) {
    :root {
        --btn-h: 44px;
        --btn-py: 10px;
        --btn-px: 20px;
        --btn-fs: 0.88rem;
        --h1: 1.9rem;
        --h2: 1.45rem;
        --h3: 1.15rem;
        --body-fs: 0.95rem;
        --section-py: 40px;
        --container-px: 20px;
        --card-p: 18px;
        --gap-grid: 16px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    :root {
        --btn-h: 42px;
        --btn-py: 10px;
        --btn-px: 16px;
        --btn-fs: 0.84rem;
        --h1: 1.6rem;
        --h2: 1.25rem;
        --h3: 1.05rem;
        --body-fs: 0.9rem;
        --section-py: 28px;
        --container-px: 14px;
        --card-p: 14px;
        --gap-grid: 12px;
    }
}

/* Small Mobile */
@media (max-width: 320px) {
    :root {
        --btn-h: 40px;
        --btn-py: 9px;
        --btn-px: 13px;
        --btn-fs: 0.8rem;
        --h1: 1.4rem;
        --h2: 1.15rem;
        --container-px: 10px;
        --card-p: 12px;
    }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 2 — BUTTON SYSTEM
   ══════════════════════════════════════════════════════════════ */
.hero-btn,
.add-product-btn,
.build-pc-btn,
.btn-primary,
.filter-btn,
.apply-btn {
    min-height: var(--btn-h);
    padding: var(--btn-py) var(--btn-px);
    font-size: var(--btn-fs);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}

/* Touch target minimum */
button, a, [role="button"] {
    min-height: 40px;
}

/* ══════════════════════════════════════════════════════════════
   SECTION 3 — HEADER & NAV
   ══════════════════════════════════════════════════════════════ */
header {
    padding: 12px var(--container-px);
}

.header-content {
    padding: 0;
    gap: 12px;
    flex-wrap: wrap;
}

/* Laptop */
@media (max-width: 1200px) {
    header { padding: 12px 28px; }
    .search-bar { width: 300px; }
    .logo { font-size: 1.5em; }
    .hero-title { font-size: 2.8em; }
    .hero-section { padding: 60px 28px; }
}

/* Tablet */
@media (max-width: 1024px) {
    header { padding: 10px 20px; }
    .header-content { gap: 10px; }
    .search-bar { width: 220px; padding: 6px 12px; }
    .search-bar input { font-size: 0.88em; }
    .logo { font-size: 1.3em; }
    .actions { gap: 8px; }
    .add-product-btn, .build-pc-btn { padding: 10px 16px; font-size: 0.85em; }

    .hero-section { padding: 48px 20px; }
    .hero-content { grid-template-columns: 1fr; gap: 32px; }
    .hero-title { font-size: 2.2em; }
    .hero-description { font-size: 1em; }
    .hero-visual { height: 280px; }
    .hero-actions { flex-wrap: wrap; gap: 10px; }
    .hero-btn { min-height: 44px; padding: 10px 20px; font-size: 0.9em; }
    .hero-stats { gap: 24px; }
    .stat-number { font-size: 1.6em; }
}

/* Mobile */
@media (max-width: 768px) {
    header { padding: 10px 14px; }
    .search-bar { display: none; }
    .logo { font-size: 1.2em; }
    .add-product-btn span { display: none; }
    .build-pc-btn span { display: none; }
    .actions { gap: 6px; }
    .add-product-btn, .build-pc-btn { padding: 9px 12px; }

    .hero-section { padding: 36px 14px; margin-bottom: 24px; }
    .hero-title { font-size: 1.8em; }
    .hero-description { font-size: 0.92em; margin-bottom: 20px; }
    .hero-actions { flex-direction: column; }
    .hero-btn { width: 100%; max-width: 320px; }
    .hero-stats { flex-wrap: wrap; gap: 16px; }
    .stat-number { font-size: 1.4em; }
    .hero-visual { display: none; }

    /* Mobile search toggle */
    .mobile-search-toggle { display: flex; }
    .search-bar.mobile-open {
        display: flex;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        border-radius: 0;
        z-index: 999;
        padding: 10px 14px;
    }
}

@media (max-width: 480px) {
    header { padding: 8px 10px; }
    .logo { font-size: 1.1em; }
    .profile-icon { width: 36px; height: 36px; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 4 — MAIN LAYOUT (Sidebar + Content)
   ══════════════════════════════════════════════════════════════ */
.container {
    padding: 0 var(--container-px);
    gap: var(--gap-grid);
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
}

/* Tablet: sidebar collapses */
@media (max-width: 1024px) {
    .container { 
        flex-direction: column; 
        padding: 0 var(--container-px);
    }
    .sidebar {
        width: 100%;
        position: relative;
        top: auto;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 0;
        opacity: 0;
        transform: translateY(-20px);
        visibility: hidden;
    }

    .sidebar.open,
    .sidebar.filters-open {
        max-height: 5000px;
        padding: 24px;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        margin-bottom: 20px;
        z-index: 100;
    }

    .mobile-filter-toggle { 
        display: flex;
        width: 100%;
        margin-bottom: 15px;
    }
    .mobile-sidebar-actions { display: flex; }
}

@media (max-width: 480px) {
    .container { padding: 0 10px; margin: 14px auto 28px; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 5 — PRODUCT GRID (marketplace main grid)
   ══════════════════════════════════════════════════════════════ */
.products-grid,
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--gap-grid);
}

@media (max-width: 1200px) {
    .products-grid, .product-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}

@media (max-width: 1024px) {
    .products-grid, .product-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 480px) {
    .products-grid, .product-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Product card sizing */
.product-card {
    border-radius: 12px;
    overflow: hidden;
}

.product-image {
    width: 100%;
    height: 200px;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .product-image { height: 170px; }
}

@media (max-width: 480px) {
    .product-image { height: 200px; }
    .product-card { border-radius: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 6 — TRENDING PRODUCTS CAROUSEL
   ══════════════════════════════════════════════════════════════ */
.trending-carousel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

@media (max-width: 1024px) {
    .trending-carousel { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
    .trending-carousel { 
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .trending-card { font-size: 0.88rem; }
    .trending-name { font-size: 0.82rem; }
    .trending-price { font-size: 1rem; }
    .trending-img { height: 140px; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 7 — PROFILE DROPDOWN
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .profile-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 2000;
    }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 8 — PRODUCT VIEW PAGE
   ══════════════════════════════════════════════════════════════ */
.product-detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

@media (max-width: 1024px) {
    .product-detail-layout { grid-template-columns: 1fr; gap: 24px; }
}

.product-main-image {
    width: 100%;
    max-height: 480px;
    object-fit: contain;
    border-radius: 12px;
}

@media (max-width: 480px) {
    .product-main-image { max-height: 280px; }
}

/* Product action buttons */
.product-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .product-actions { flex-direction: column; }
    .product-actions button,
    .product-actions a { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 9 — CART PAGE
   ══════════════════════════════════════════════════════════════ */
.cart-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 28px;
    align-items: start;
}

@media (max-width: 1200px) {
    .cart-layout { grid-template-columns: 1fr 320px; gap: 20px; }
}

@media (max-width: 1024px) {
    .cart-layout { grid-template-columns: 1fr; gap: 20px; }
}

.cart-item {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: var(--card-p);
    border-radius: 12px;
}

@media (max-width: 768px) {
    .cart-item {
        grid-template-columns: 80px 1fr;
        gap: 12px;
        padding: 12px;
    }
    .item-price-section { grid-column: 1 / -1; display: flex; justify-content: space-between; }
}

@media (max-width: 480px) {
    .cart-item { grid-template-columns: 70px 1fr; padding: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 10 — CHECKOUT PAGE
   ══════════════════════════════════════════════════════════════ */
.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 28px;
}

@media (max-width: 1200px) {
    .checkout-layout { grid-template-columns: 1fr 340px; }
}

@media (max-width: 1024px) {
    .checkout-layout { grid-template-columns: 1fr; gap: 20px; }
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .form-grid-2 { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 11 — ACCOUNT SETTINGS / PROFILE PAGE
   ══════════════════════════════════════════════════════════════ */
.settings-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 28px;
    align-items: start;
}

@media (max-width: 1024px) {
    .settings-layout { grid-template-columns: 1fr; }
}

.settings-tabs {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (max-width: 1024px) {
    .settings-tabs {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 4px;
    }
    .settings-tab {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 14px;
        font-size: 0.85rem;
    }
}

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 768px) {
    .profile-stats-grid { grid-template-columns: 1fr 1fr; }
}

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

/* ══════════════════════════════════════════════════════════════
   SECTION 12 — TYPOGRAPHY SCALING
   ══════════════════════════════════════════════════════════════ */
h1 { font-size: var(--h1); }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
body { font-size: var(--body-fs); }

/* Hero specific */
@media (max-width: 1024px) {
    .hero-title { font-size: 2em; }
}

@media (max-width: 768px) {
    .hero-title { font-size: 1.7em; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 1.4em; }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 13 — REVIEWS & MEDIA SECTION
   ══════════════════════════════════════════════════════════════ */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

@media (max-width: 1024px) {
    .reviews-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .reviews-grid { grid-template-columns: 1fr; }
}

.media-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

@media (max-width: 480px) {
    .media-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 14 — UTILITY
   ══════════════════════════════════════════════════════════════ */
.hidden-mobile { }
.show-mobile { display: none; }

@media (max-width: 768px) {
    .hidden-mobile { display: none !important; }
    .show-mobile { display: block; }
    .show-mobile-flex { display: flex !important; }
}

/* Lazy loading for images */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease;
}
img[loading="lazy"].loaded {
    opacity: 1;
}

/* Prevent text overflow everywhere */
.product-name,
.product-title,
.item-name,
.trending-name {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}