/* =========================================================
   Responsive overrides — mobile-first
   ========================================================= */

/* ---------- ≥ 480px ---------- */
@media (min-width: 480px) {
    .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- ≥ 768px (tablet) ---------- */
@media (min-width: 768px) {
    :root { --ks-header-h: 68px; }
    .site-main { padding: 32px 24px; }
    .footer-inner { grid-template-columns: 2fr 1fr 1fr; }
}

/* ---------- ≥ 1024px (desktop) ---------- */
@media (min-width: 1024px) {
    /* Hide mobile chrome */
    .ks-menu-toggle { display: none !important; }
    .ks-mobile-drawer,
    .ks-mobile-backdrop { display: none !important; }

    /* Show desktop elements */
    .desktop-only { display: revert !important; }

    .header-inner { gap: 20px; }
    .site-branding { flex: 0 0 auto; text-align: left; }
    .site-title { font-size: 1.35rem; }

    .main-navigation { flex: 1 1 auto; }
    .primary-menu {
        list-style: none; margin: 0; padding: 0;
        display: flex; gap: 4px; flex-wrap: wrap;
    }
    .primary-menu li { position: relative; }
    .primary-menu a {
        display: block;
        padding: 10px 12px;
        color: var(--ks-text);
        text-decoration: none;
        border-radius: var(--ks-radius);
        font-size: 0.95rem;
        white-space: nowrap;
    }
    .primary-menu a:hover { background: var(--ks-bg-alt); color: var(--ks-primary); }

    .header-search {
        display: flex; flex: 0 0 220px; gap: 4px;
    }
    .header-search input {
        flex: 1; min-width: 0;
        height: 40px; padding: 0 12px;
        border: 1px solid var(--ks-border);
        border-radius: var(--ks-radius);
    }
    .header-search button {
        height: 40px; width: 44px;
        background: var(--ks-primary); color: #fff;
        border: none; border-radius: var(--ks-radius);
        cursor: pointer;
    }

    .header-cart { margin-left: auto; }
}

/* ---------- ≥ 1280px ---------- */
@media (min-width: 1280px) {
    .container { padding-inline: 24px; }
}