/* =========================================
   RESPONSIVE ADAPTATIONS
   Loaded LAST on purpose: preserves original cascade order
   from the monolithic stylesheet. Do not reorder blocks.
   ========================================= */

@media (max-width: 768px) {
    .container { padding: 0 15px; }
    /* Longhand on purpose — see css/base.css for why a shorthand here
       would zero out .container's horizontal padding on any element
       that carries both classes (like <main class="container section-padding">). */
    .section-padding { padding-top: 50px; padding-bottom: 50px; }
}

@media (max-width: 768px) {
    .hero { aspect-ratio: 1 / 1; }
    .hero-bg { background: url('../Baner/baner/banermobile.webp') no-repeat center/cover; }
}

@media (max-width: 1024px) {
    /* Card / grid tablet optimizations */
    .section-title { font-size: 24px; margin-bottom: 22px; }
    .section-header { margin-bottom: 40px; }
    .text-switcher .switcher-item { font-size: 20px; }

    .categories-grid {
        display: grid;
        gap: 15px;
        margin-bottom: 60px;
    }

    /* .app-grid's horizontal-scroll-carousel conversion is home-page-only
       (see css/hero-categories.css) — the catalog page needs .app-grid to
       stay a real wrapping grid, so that rule does NOT live here anymore.
       These touch-device card tweaks ARE shared by both pages though. */
    .app-card:hover { border-color: var(--border-light); box-shadow: none; border-radius: 4px; z-index: 1;}
    .hover-dropdown { display: none !important; }
    .card-wishlist-btn { display: none !important; }
    .mobile-cart-btn { display: flex; }
}

@media (max-width: 600px) {
    .section-title { font-size: 19px !important; margin-bottom: 14px !important; }
    .section-header { margin-bottom: 30px; }
    .text-switcher { margin-bottom: 25px; gap: 15px; }
    .text-switcher .switcher-item { font-size: 18px; }
    .section-subtitle { font-size: 12px; margin-bottom: 5px; }

    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    .cat-card { aspect-ratio: 1/1.02; border-radius: 4px; }
    .cat-info { padding: 16px; }
    .cat-title { font-size: 14px; }

    /* .app-grid/.blog-grid carousel sizing for the home page lives in css/hero-categories.css now */
    .blog-content { padding: 8px 0; }
    .blog-title { font-size: 11px; }

    .card-info { padding: 12px; }
    .mobile-cart-btn { width: 38px; height: 38px; font-size: 15px; }
    .app-name { font-size: 13px; min-height: 36px; }
    .card-price { font-size: 16px; }
    .hover-dropdown { padding: 10px 12px 12px; }
    .weight-btn { padding: 6px 0; font-size: 10px; }
    .btn-action-cart { padding: 10px; font-size: 11px; }
    :root { --header-height: 70px; }
    .header-left { gap: 15px; }
    .logo { font-size: 20px; letter-spacing: 2px; }
    .burger-menu { font-size: 22px; }
    .header-actions { gap: 12px; }
    .action-btn { width: 36px; height: 36px; font-size: 18px; }
    .cart-count { width: 16px; height: 16px; font-size: 9px; }
    .cart-content { padding: 15px; }
    .c-row { gap: 10px; padding-bottom: 15px; grid-template-columns: 65px 1fr; }
    .c-img { width: 65px; height: 65px; }
    .c-details { padding-right: 15px; gap: 5px; }
    .c-name { font-size: 14px; }
    .cw-btn { font-size: 10px; padding: 5px 8px; }
    .c-qty-box { width: 85px; height: 30px; }
    .c-q-btn { font-size: 14px; }
    .c-q-val { font-size: 13px; }
    .c-price { font-size: 16px; }
    .cs-val { font-size: 20px; }
    .hero-title { font-size: 28px !important; margin-bottom: 18px !important; }
    .hero-btn { padding: 14px 30px; font-size: 12px; }
    .adv-item { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    .btn-social-auth { padding: 12px 15px; font-size: 14px; gap: 10px; }
    .btn-social-auth i { position: absolute; left: 15px; }
}

@media (max-width: 400px) {
    .section-title { font-size: 16px !important; letter-spacing: 0.5px; }
    .text-switcher .switcher-item { font-size: 15px; }

    /* .app-grid/.app-card/.blog-card carousel sizing for the home page lives in css/hero-categories.css now */
    .blog-title { font-size: 11px; line-height: 1.3; }
    :root { --header-height: 60px; }
    .header-left { gap: 10px; }
    .logo { font-size: 18px; letter-spacing: 1px; }
    .burger-menu { font-size: 20px; }
    .header-actions { gap: 8px; }
    .action-btn { width: 32px; height: 32px; font-size: 16px; }
    .cart-count { width: 15px; height: 15px; font-size: 9px; }
    .btn-checkout { font-size: 11px; padding: 8px 5px; }
    .c-row { gap: 12px 8px; }
    .c-qty-box { width: 80px; height: 28px; }
    .c-price { font-size: 15px; }
    .hero-title { font-size: 23px !important; margin-bottom: 14px !important; }
    .hero-label { font-size: 11px; margin-bottom: 10px; }
    .hero-btn { padding: 12px 24px; font-size: 11px; }
    .btn-social-auth { font-size: 12px; padding: 10px; gap: 8px; }
    .btn-social-auth i { font-size: 14px; position: absolute; left: 12px; }
}

@media (max-width: 1024px) {
    /* Cart / footer adaptations */
    .section-title { font-size: 24px; margin-bottom: 22px; }
    .section-header { margin-bottom: 40px; }
    .text-switcher .switcher-item { font-size: 20px; }

    .categories-grid {
        display: grid;
        gap: 15px;
        margin-bottom: 60px;
    }

    .main-nav { display: none; }
    .burger-menu { display: block; }
    .desktop-user-btn { display: none; }
    .mobile-heart-btn { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cart-overlay { padding: 0; align-items: flex-start; justify-content: flex-end; background: rgba(0,0,0,0.85); }
    .cart-container { box-shadow: none; border: none; border-left: 1px solid #222; border-radius: 0; min-height: 100vh; height: 100vh; width: 400px; max-width: 85vw; margin: 0; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; background: #0a0a0a; }
    .cart-overlay.active .cart-container { transform: translateX(0); }
    .cart-header { display: flex; align-items: center; justify-content: center; position: relative; padding: 0 24px; border-bottom: 1px solid #1a1a1a; min-height: 70px; flex-shrink: 0; background: #0a0a0a; }
    .cart-title-l { font-size: 18px; font-weight: 500; color: #fff; margin: 0; letter-spacing: normal; text-transform: none; }
    .cart-header > div { position: absolute; left: 24px; font-size: 20px !important; color: #999; cursor: pointer; padding: 10px; margin-left: -10px; }
    .cart-content { padding: 24px; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
    .c-row { grid-template-columns: minmax(80px, auto) 1fr; grid-template-rows: auto auto auto; gap: 15px; padding-bottom: 20px; }
    .c-img { width: 80px; height: 80px; grid-column: 1; grid-row: 1; align-self: start; border-radius: 6px; }
    .c-details { display: flex; flex-direction: column; grid-column: 2; grid-row: 1; gap: 8px; padding-right: 20px; align-self: center; min-width: 0; }
    .c-name { grid-column: auto; grid-row: auto; align-self: auto; font-size: 15px; line-height: 1.3; font-weight: 500; margin-bottom: 0; padding-right: 0; }
    .c-weight-row { grid-column: auto; grid-row: auto; align-self: auto; display: flex; flex-wrap: wrap; gap: 5px; }
    .c-divider { display: block; grid-column: 1 / -1; grid-row: 2; height: 1px; background: #1a1a1a; margin: 0; }
    .c-qty-wrapper { grid-column: 1 / 3; grid-row: 3; justify-self: start; margin-top: 0; align-self: center; }
    .c-qty-box { width: 110px; height: 36px; }
    .c-price { grid-column: 1 / 3; grid-row: 3; text-align: right; justify-self: end; font-size: 18px; align-self: center; font-weight: 500; }
    .c-remove { top: -8px; right: -8px; font-size: 18px; }
    .cs-val { font-size: 20px; }
    .cart-actions { flex-direction: column-reverse; gap: 20px; }
    .btn-checkout { width: 100%; text-align: center; font-size: 13px; padding: 10px; }
    .btn-back { font-size: 15px; justify-content: center; }
    .reco-scroll-btn { display: none; }
    #checkoutForm.visible { border: none; border-top: 1px solid #1a1a1a; border-radius: 0; padding: 30px 0; }
    .card-wishlist-btn { display: none !important; }
}

@media (max-width: 600px) {
    .reco-track .app-card { flex: 0 0 155px; }
}
@media (max-width: 400px) {
    .reco-track .app-card { flex: 0 0 135px; }
}

@media (max-width: 992px) {
    .main-nav { position: fixed; top: var(--header-height); left: 0; width: 280px; height: calc(100vh - var(--header-height)); background: #0a0a0a; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 40px 30px; gap: 20px; transform: translateX(-100%); transition: transform 0.3s ease; border-right: 1px solid #222; z-index: 999; }
    .main-nav.active { transform: translateX(0); }
    .nav-link { font-size: 16px; width: 100%; border-bottom: 1px solid #1a1a1a; padding-bottom: 10px; }
    .burger-menu { display: block; }
    .hero-title { font-size: 34px; }
    .seo-content-grid { grid-template-columns: 1fr; gap: 40px; }
    .faq-wrapper { flex-direction: column; }
    /* display:contents removes .faq-col from the box tree on mobile, so
       its .faq-item children become direct children of .faq-wrapper —
       merges the two desktop columns into one continuous list instead of
       two separate stacked blocks. */
    .faq-col { display: contents; }
    /* Explicit width instead of relying on flex's cross-axis auto-stretch:
       combined with display:contents above, stretch silently fails for
       whichever item has the longest question text — that item ends up
       sized to its own content instead of the full row width, so its "+"
       lands to the left of every other row's. Forcing width:100% here
       sidesteps the stretch calculation entirely instead of depending on
       it working correctly through a display:contents parent. */
    .faq-item { width: 100%; }
    .advantages-wrapper { flex-wrap: wrap; gap: 30px; }
    .adv-item { width: 45%; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    :root { --header-height: 70px; }
    .header-left { gap: 15px; }
    .logo { font-size: 20px; letter-spacing: 2px; }
    .burger-menu { font-size: 22px; }
    .header-actions { gap: 12px; }
    .action-btn { width: 36px; height: 36px; font-size: 18px; }
    .cart-count { width: 16px; height: 16px; font-size: 9px; }
    .cart-content { padding: 15px; }
    .c-row { gap: 10px; padding-bottom: 15px; grid-template-columns: 65px 1fr; }
    .c-img { width: 65px; height: 65px; }
    .c-details { padding-right: 15px; gap: 5px; }
    .c-name { font-size: 14px; }
    .cw-btn { font-size: 10px; padding: 5px 8px; }
    .c-qty-box { width: 85px; height: 30px; }
    .c-q-btn { font-size: 14px; }
    .c-q-val { font-size: 13px; }
    .c-price { font-size: 16px; }
    .cs-val { font-size: 20px; }
    .hero-title { font-size: 28px !important; margin-bottom: 18px !important; }
    .hero-btn { padding: 14px 30px; font-size: 12px; }
    .adv-item { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    .btn-social-auth { padding: 12px 15px; font-size: 14px; gap: 10px; }
    .btn-social-auth i { position: absolute; left: 15px; }
}

@media (max-width: 400px) {
    :root { --header-height: 60px; }
    .header-left { gap: 10px; }
    .logo { font-size: 18px; letter-spacing: 1px; }
    .burger-menu { font-size: 20px; }
    .header-actions { gap: 8px; }
    .action-btn { width: 32px; height: 32px; font-size: 16px; }
    .cart-count { width: 15px; height: 15px; font-size: 9px; }
    .btn-checkout { font-size: 11px; padding: 8px 5px; }
    .c-row { gap: 12px 8px; }
    .c-qty-box { width: 80px; height: 28px; }
    .c-price { font-size: 15px; }
    .hero-title { font-size: 23px !important; margin-bottom: 14px !important; }
    .hero-label { font-size: 11px; margin-bottom: 10px; }
    .hero-btn { padding: 12px 24px; font-size: 11px; }
    .btn-social-auth { font-size: 12px; padding: 10px; gap: 8px; }
    .btn-social-auth i { font-size: 14px; position: absolute; left: 12px; }
}