/* =========================================================
   RESPONSIVE.CSS — mobile & tablet adjustments
   ========================================================= */
/*
   Breakpoint-lər (bütün frontend CSS faylları üçün):
     1024px — planşet: sidebar yuxarı keçir, sütunlar daralır
      900px — cart / checkout / sifariş: xülasə alta keçir
      760px — mobil: header, footer, kabinet, məhsul səhifəsi
      600px — kiçik mobil: formalar tək sütun
      480px — ən kiçik ekranlar
   Yeni media query yazarkən yalnız bu dəyərlərdən istifadə edin.
*/

html, body { overflow-x: hidden; }

@media (max-width: 760px) {
    .wrap { padding: 0 16px; }
}
@media (max-width: 480px) {
    .wrap { padding: 0 14px; }
}

/* =========================================================
   HEADER — mobile wrap (icons/search stacking)
   ========================================================= */
@media (max-width: 760px) {
    .header-row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
      "lang   logo   icons"
      "search search search";
        column-gap: 10px;
        row-gap: 12px;
        margin-top: 15px;
    }
    .header-row .lang   { grid-area: lang; }
    .header-row .logo   { grid-area: logo; justify-self: center; min-width: 0; max-width: 100%; }
    .header-row .logo-svg { width: clamp(96px, 32vw, 132px); max-width: 100%; }
    .header-row .icons  { grid-area: icons; gap: clamp(10px, 3.4vw, 16px); }
    .header-row .search { grid-area: search; position: relative; }

    .header-profile span { display: none; }

    .search-results {
        position: absolute;
        top: calc(100% + 8px);
        left: 0; right: 0;
        max-height: 60vh;
    }
}

@media (max-width: 480px) {
    .language-select        { height: 34px; padding: 0 24px 0 10px; gap: 0; }
    .language-select__globe { display: none; }
    .language-select::after { right: 10px; }
}

/* =========================================================
   HOME / CATALOG LAYOUT
   ========================================================= */
@media (max-width: 1024px) {
    .layout { grid-template-columns: 1fr; }

    .sidebar-stack { flex-direction: row; flex-wrap: wrap; }
    .sidebar-stack .brand-select { flex-shrink: 0; width: auto; }
    .sidebar-stack .filter-card { flex: 1; min-width: 260px; }

    .side-panel__toggle { cursor: pointer; }
    .side-panel__chevron { display: block; }

    [data-collapsible-panel] .side-panel__body { display: none; }
    [data-collapsible-panel].is-open .side-panel__body { display: flex; }

    .side-panel.filter-card {
        padding: 18px;
        border: 1px solid var(--border);
        background: var(--bg);
        border-radius: 14px;
    }
    .side-panel.filter-card .side-panel__toggle {
        padding: 0;
    }
    .side-panel.filter-card .side-panel__toggle h3 {
        font-size: 15px;
        font-weight: 700;
        text-transform: none;
        letter-spacing: normal;
        color: var(--text);
    }
}

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

}

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

/* =========================================================
   PRODUCT DETAIL PAGE
   (uses named grid-template-areas: header thumbs main buy installment)
   ========================================================= */
@media (max-width: 1024px) {
    .product-top {
        grid-template-columns: 76px minmax(0, 1fr);
        grid-template-areas:
            "header header"
            "thumbs main"
            "buy buy"
            "installment installment";
    }
}

@media (max-width: 760px) {
    .product-top {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "thumbs"
            "buy"
            "installment";
    }
    .thumbs { flex-direction: row; overflow-x: auto; gap: 8px; margin-top: 12px; }
    .thumbs .t { width: 56px; flex-shrink: 0; }
}

/* =========================================================
   ACCOUNT / PROFILE PAGES
   ========================================================= */
@media (max-width: 900px) {
    .account-layout { grid-template-columns: 1fr; }
    .account-sidebar { position: static; }
}

@media (max-width: 760px) {
    .credit-grid,
    .credit-photos-row { grid-template-columns: 1fr; }
    .account-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {

    .order-card__details { grid-column: 1 / -1; width: 100%; }

}

@media (max-width: 600px) {
    .account-cards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   AUTH / LOGIN PAGES
   ========================================================= */
@media (max-width: 480px) {
    .auth-card { padding: 24px 18px; margin: 0; }
    .auth-title { font-size: 19px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
@media (max-width: 760px) {
    .footer-top {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .footer-top > div {
        padding: 20px 0;
        border-top: 1px solid rgba(255,255,255,0.12);
    }
    .footer-top > .brand-col {
        border-top: none;
        padding-top: 0;
    }
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* =========================================================
   PAGINATION — mobile fix
   ========================================================= */
@media (max-width: 600px) {
    .main-products__pagination nav {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .main-products__pagination .text-muted { text-align: center; }

    .main-products__pagination ul.pagination {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }
    .main-products__pagination ul.pagination::-webkit-scrollbar { display: none; }

    .main-products__pagination .page-link {
        min-width: 32px;
        height: 32px;
        font-size: 12.5px;
        flex-shrink: 0;
    }
}

/* =========================================================
   ERROR PAGE (404)
   ========================================================= */
@media (max-width: 600px) {
    .error-page { margin: 32px auto; padding: 36px 22px; }
    .error-page__actions { flex-direction: column; }
    .error-page__code { font-size: 52px; }
}

/* =========================================================
   HERO BANNER — mobildə mobil slayder (varsa), oxlar gizli
   ========================================================= */
@media (max-width: 760px) {
    .hero-banner--desktop { display: none; }
    .hero-banner--mobile { display: block; }
    .hero-banner__arrow { display: none; }
    .hero-banner__dots { bottom: 8px; }
    header:not(:has(.cats)) .header-row {
        padding-bottom: 12px;
    }
}

@media (max-width: 760px) {
    .credit-application-dialog {
        position: fixed; inset: 12px; margin: auto; width: calc(100vw - 24px); max-width: 480px;
        max-height: calc(100dvh - 24px); height: calc(100dvh - 24px); display: none; flex-direction: column; overflow: hidden;
    }
    .credit-application-dialog[open] { display: flex; }
    .credit-modal-head { flex-shrink: 0; padding: 18px 20px; }
    .credit-modal-head h2 { font-size: 19px; margin-bottom: 4px; }
    .credit-modal-head p { font-size: 14px; }
    .credit-modal-layout {
        display: flex; flex-direction: column; gap: 16px; padding: 20px; flex: 1; min-height: 0;
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    }
    .credit-modal-layout form { flex-shrink: 0; }
    .credit-modal-submit { display: none; }
    .credit-modal-mobile-submit { display: flex; width: 100%; flex-shrink: 0; margin: 0 0 4px; }
    .credit-modal-rules { width: 100%; height: 340px; min-height: 280px; flex-shrink: 0; align-self: stretch; padding: 16px; }
    .credit-modal-rules h3 { flex-shrink: 0; margin-bottom: 12px; }
    .credit-modal-rules-accept { font-size: 13px; padding-top: 12px; margin-top: 8px; }
}

/* Product page: installment heading + mobile-only credit button */
.installment-heading { font-size: 20px; font-weight: 700; margin: 0 0 18px; color: var(--text); }
.product-mobile-credit { display: none; }
@media (max-width: 760px) {
    .product-mobile-credit { display: flex; width: 100%; }
}

@media (max-width: 600px) {
    .order-card {
        grid-template-columns: 1fr auto;
        grid-template-areas: "main main" "products side";
        gap: 14px;
        padding: 14px 16px;
    }
    .order-card__main { grid-area: main; }
    .order-card__products { grid-area: products; }
    .order-card__side { grid-area: side; border-left: 0; padding-left: 0; min-width: 0; }
}

/* Responsive */
@media (max-width: 1024px) {
    .od-grid { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 900px) {
    .od-grid { display: flex; flex-direction: column; align-items: stretch; }
    .od-main, .od-aside { display: contents; }
    .od-timeline-card { order: 1; }
    .od-products      { order: 2; }
    .od-payment       { order: 3; }
    .od-delivery      { order: 4; }
}
@media (max-width: 480px) {
    .od-header__title h1 { font-size: 20px; }
    .od-item { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; }
    .od-item__img { width: 44px; height: 52px; }
    .od-card__head { padding: 14px 16px 4px; }
    .od-card__body { padding: 12px 16px 16px; }
}