/* ============================================
   MOBILE STYLES
   Applies to screens 768px and under
============================================ */

@media (max-width: 768px) {

    /* ============================================
       NAVIGATION
    ============================================ */
    nav {
        padding: 0 1.25rem;
    }

    .nav-shop {
        display: none;
    }

    .nav-info {
        display: none;
    }

    .nav-logo {
        position: relative;
        left: auto;
        transform: none;
    }

    .nav-mobile-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 0.5rem;
        background: none;
        border: none;
    }

    .nav-mobile-toggle span {
        display: block;
        width: 24px;
        height: 1px;
        background: var(--white);
        transition: all 0.3s ease;
    }

    .nav-mobile-toggle.open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-mobile-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .nav-mobile-toggle.open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .nav-mobile-menu {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--black);
        z-index: 898;
        display: flex;
        flex-direction: column;
        padding: 2rem 1.5rem;
        gap: 0;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
    }

    .nav-mobile-menu.open {
        transform: translateX(0);
    }

    .nav-mobile-section-title {
        font-family: var(--font-display);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--red);
        margin-bottom: 0.75rem;
        margin-top: 1.5rem;
    }

    .nav-mobile-link {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--white);
        text-decoration: none;
        padding: 0.6rem 0;
        border-bottom: 1px solid rgba(244,240,235,0.06);
        display: block;
        transition: color 0.2s;
    }

    .nav-mobile-link:hover { color: var(--red); }

    .nav-mobile-cart {
        margin-top: 2rem;
        display: block;
        text-align: center;
    }

    /* ============================================
       HERO
    ============================================ */
    .hero-content {
        padding: 0 1.25rem 3rem;
    }

    .hero-title {
        font-size: clamp(3rem, 12vw, 5rem);
    }

    .hero-decoration {
        display: none;
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-primary,
    .btn-ghost {
        width: 100%;
        text-align: center;
    }

    /* ============================================
       RED STRIP
    ============================================ */
    .strip {
        padding: 0.6rem 1.25rem;
        gap: 1.5rem;
    }

    /* ============================================
       BEST SELLERS
    ============================================ */
    .section {
        padding: 3rem 1.25rem;
    }

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

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* ============================================
       COLLECTIONS
    ============================================ */
    .collections {
        padding: 0 1.25rem 3rem;
    }

    .collections-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .collection-card:first-child {
        grid-row: auto;
    }

    .collection-card {
        height: 200px;
    }

    /* ============================================
       MARQUEE
    ============================================ */
    .marquee-wrap {
        display: none;
    }

    /* ============================================
       FOOTER
    ============================================ */
    .footer-top {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    /* ============================================
       SHOP PAGE
    ============================================ */
    @media (max-width: 768px) {

    .shop-layout {
        display: block !important;
        padding: calc(var(--nav-height) + 2rem) 1.25rem 3rem;
    }

    .shop-sidebar {
        position: relative !important;
        top: auto !important;
        width: 100% !important;
        margin-bottom: 2rem;
    }

    .shop-main {
        width: 100%;
    }

    .shop-layout .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .product-detail-layout {
        display: block !important;
        padding: calc(var(--nav-height) + 2rem) 1.25rem 3rem;
    }

    .gallery-main {
        aspect-ratio: 1/1;
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .product-info-panel {
        width: 100%;
    }
}
    /* ============================================
       PRODUCT DETAIL
    ============================================ */
    .product-detail-layout {
        grid-template-columns: 1fr;
        padding: calc(var(--nav-height) + 2rem) 1.25rem 3rem;
        gap: 2rem;
    }

    .gallery-main {
        aspect-ratio: 1/1;
    }

    .related-products .product-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 1.25rem 3rem;
    }
}