/* Mobile-first overrides loaded after style.css */

@media (max-width: 900px) {
    :root{
        --footer-gap: clamp(32px, 8vw, 64px);
    }

    html,
    body{
        overflow-x: hidden;
    }

    body{
        background-image: none;
    }

    .header{
        position: sticky;
        top: 0;
        z-index: 600;
        background: rgba(255, 255, 255, 0.96);
        padding: 14px 16px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        backdrop-filter: blur(6px);
    }

    .header-bar{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
        max-width: 100%;
    }

    .header-actions{
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-link,
    .profile-toggle{
        width: 100%;
        justify-content: center;
    }

    .nav{
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 14px;
        padding: 10px 0 0;
    }

    .nav a{
        width: calc(50% - 10px);
    }

    .navitem{
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 10px 12px;
        border-radius: 12px;
        background: rgba(0,0,0,0.04);
    }

    .content{
        padding: 24px 16px 48px;
    }

    .hero-feature,
    .collection-hero{
        width: 100%;
        left: 0;
        transform: none;
        border-radius: 20px;
    }

    .hero-feature__overlay{
        align-items: center;
        padding: 28px 18px;
    }

    .hero-feature__body{
        gap: 10px;
        width: 100%;
    }

    .collection-hero__body{
        text-align: center;
        width: 100%;
    }

    .collection-hero__actions{
        width: 100%;
    }

    .shop-header{
        width: 100%;
        padding: 0 6px;
    }

    .shopContainer{
        width: 100%;
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .article{
        min-height: 0;
    }

    .article-actions{
        flex-direction: column;
        gap: 10px;
    }

    .brand-story{
        width: 100%;
    }

    .brand-story__item{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .brand-story__image img{
        max-width: 100%;
    }

    .contact-form-card,
    .auth-card,
    .account-card,
    .account-card--wide,
    .checkout-summary{
        width: 100%;
        padding: 22px 18px;
        box-sizing: border-box;
    }

    .contact-form-card{
        border-radius: 20px;
    }

    .cart-item{
        flex-direction: column;
        align-items: flex-start;
    }

    .cart-item__media{
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .cart-item__form{
        width: 100%;
        justify-content: space-between;
    }

    .cart-summary{
        flex-direction: column;
        align-items: flex-start;
    }

    .checkout-orders__table-wrapper{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .checkout-orders-table{
        min-width: 520px;
    }

    .site-footer{
        padding: 32px 18px 28px;
        border-radius: 22px 22px 0 0;
    }

    .footer-grid{
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-brand,
    .footer-links,
    .footer-intel,
    .footer-cta{
        align-items: center;
    }

    .footer-link::after{
        display: none;
    }

    .admin-dashboard{
        gap: 18px;
    }

    .admin-nav{
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 6px;
    }

    .admin-nav__link{
        min-width: 220px;
        text-align: left;
        white-space: nowrap;
    }

    .admin-panel-section{
        width: 100%;
    }

    .admin-chat__controls{
        gap: 12px;
    }

    .admin-chat__lock-form,
    .admin-chat__tools{
        width: 100%;
    }

    .admin-chat__tools{
        flex-direction: column;
        align-items: stretch;
    }

    .admin-chat__lock-form{
        padding: 12px;
    }

    .admin-chat__form-actions{
        flex-direction: column;
        align-items: stretch;
    }

    .admin-chat__command-menu{
        align-self: flex-end;
    }

    .admin-chat__command-list{
        left: auto;
        right: 0;
        max-width: calc(100vw - 32px);
    }

    .admin-chat__messages{
        max-height: none;
    }

    .admin-chat__drama-banner,
    .admin-chat__locked,
    .admin-drama-backup{
        width: 100%;
    }

    .admin-drama-backup{
        flex-direction: column;
        align-items: flex-start;
    }

    /* Audit log */
    .audit-stats__filters{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .audit-stats__filters .btn{
        flex: 0 0 auto;
        min-width: 140px;
    }

    .promo-table__wrapper{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border: 1px solid rgba(0,0,0,0.08);
        border-radius: 12px;
        margin-top: 12px;
    }

    .promo-table{
        min-width: 640px;
    }

    .admin-section,
    .admin-message-card,
    .admin-user-card,
    .admin-product-card{
        padding: 16px;
    }
}

@media (max-width: 640px) {
    .header{
        padding: 12px 14px 0;
    }

    .header-actions{
        gap: 8px;
    }

    .nav a{
        width: 100%;
    }

    .hero-feature__title,
    .collection-hero__title{
        font-size: clamp(1.6rem, 7vw, 2.1rem);
    }

    .hero-feature__copy,
    .collection-hero__copy{
        font-size: 0.95rem;
        line-height: 1.55;
    }

    .collection-hero__actions{
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .btn,
    .header-link{
        width: 100%;
        min-width: 0;
    }

    .brand-story__title{
        text-align: center;
    }

    .shop-home,
    .brand-story,
    .loyalty-home{
        width: 100%;
    }

    .loyalty-home{
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-nav__link{
        min-width: 200px;
    }
}

@media (max-width: 420px) {
    .hero-feature__overlay{
        padding: 22px 14px;
    }

    .hero-feature__title{
        letter-spacing: 0.04em;
    }

    .collection-hero{
        padding: 22px 14px;
    }

    .shop-home__title{
        font-size: 1.6rem;
    }

    .footer-logo{
        width: 120px;
    }
}