/*
 * The storefront on a phone.
 *
 * shop.css was written for the desktop grid and then narrowed with a few
 * media queries; this file is the phone's own pass over it. It loads last,
 * so every rule here is the final word except where a view keeps its own
 * <style> in the page (the card in layouts/main.php, the checkout and the
 * cart), which a stylesheet can never outrank.
 *
 * Breakpoints: 991.98px is «no desktop sidebar», 575.98px is «a phone».
 */

/* ============ The header has to fit 390px ============ */
@media (max-width: 575.98px) {
    /* logo + «Kategoriyalar» + three icons came to more than the screen, so the
       cart was cut off at the right edge: the word next to the mark goes */
    .header-top-row { gap: 8px; }
    .unity-logo-text { display: none; }
    .unity-logo-img { height: 34px; }

    .katalog-btn { padding: 8px 12px; font-size: 0.82rem; }
    .katalog-btn i { margin-right: 2px; }

    .nav-icon-btn { padding: 7px; font-size: 1.15rem; min-width: 36px; text-align: center; }

    /* the search button is only the magnifier here, so the text may come closer */
    .search-bar input { height: 42px; font-size: 16px; padding: 8px 54px 8px 14px; }
    .search-bar button { padding: 0 14px; }

    .header-menu-link { padding: 9px 12px; font-size: 0.88rem; }
}

/* ============ The header on a phone ============
 *
 * It was all `position: fixed`: a logo row, two pill links, three icons, a
 * search box and a brand strip, about 160 pixels of it, parked on top of the
 * goods for the whole visit. Now the header scrolls away like everything
 * else and one slim search bar drops back in (`.search-dock`), which is the
 * only control that earns a permanent place.
 *
 * What used to crowd the top row — «Narxlar jadvali», «Baholash» — is in the
 * hamburger drawer and back in the brand strip where there is room for it.
 */
@media (max-width: 991.98px) {
    .unity-header { position: static; box-shadow: 0 1px 0 #eef0f6; }
    body { padding-top: 0; }

    .katalog-wrapper { display: none; }
    .header-top-row { gap: 8px; padding: 8px 0; }
    .header-mobile-icons { margin-left: 0; }
    .header-search-row { padding: 2px 0 10px; }

    /* «Narxlar jadvali» and «Baholash» stay beside the logo, where the owner
       put them: they are the two pages this shop is visited for, and a page
       behind a hamburger is a page nobody opens. The brand strip keeps its
       own copies hidden so the same link is not on screen twice. */
    .header-quick-links { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
    .header-quick-link {
        display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0;
        padding: 7px 12px; border: 1.5px solid var(--primary-color); border-radius: 20px;
        background: #fff; color: var(--primary-color);
        font-size: .78rem; font-weight: 700; white-space: nowrap; text-decoration: none;
    }
    .header-quick-link.active { background: var(--primary-color); color: #fff; }
    .header-quick-link i { font-size: .8rem; }
    .header-menu-nav .header-price-list,
    .header-menu-nav .header-trade-in { display: none; }
}

/* the burger costs 40px the row did not have before, so the pills give some
   back on the narrow handsets rather than pushing the compare icon off */
@media (max-width: 413.98px) {
    .header-quick-link { padding: 6px 9px; font-size: .72rem; gap: 4px; }
    .header-burger { width: 34px; flex: 0 0 34px; padding: 0 6px; }
    .header-top-row { gap: 6px; }
}
@media (max-width: 359.98px) {
    .header-quick-link { padding: 6px 7px; font-size: .68rem; }
    .header-quick-link i { display: none; }
}

/* The three lines. A button, not an icon font: it is the first thing on the
   page and must not wait for Font Awesome to arrive. */
.header-burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; flex: 0 0 40px; padding: 0 9px;
    border: 0; border-radius: 10px; background: none; cursor: pointer;
}
.header-burger span { display: block; height: 2px; border-radius: 2px; background: #2b3249; }
.header-burger:active { background: #f1f3f8; }
@media (max-width: 991.98px) { .header-burger { display: flex; } }

/* ============ The search that follows the page down ============ */
.search-dock {
    position: fixed; left: 0; right: 0; top: 0; z-index: 1030;
    background: #fff; box-shadow: 0 2px 12px rgba(20, 30, 60, .12);
    padding: 8px 0; transform: translateY(-110%); transition: transform .22s ease;
    visibility: hidden;
}
.search-dock.is-on { transform: none; visibility: visible; }
.search-dock .container { display: flex; align-items: center; gap: 8px; }
.search-dock .search-bar input { height: 40px; }
.search-dock-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 38px; height: 38px; flex: 0 0 38px; padding: 0 8px;
    border: 0; border-radius: 10px; background: none; cursor: pointer;
}
.search-dock-burger span { display: block; height: 2px; border-radius: 2px; background: #2b3249; }
/* nothing follows the page while a sheet is over it */
body.mm-open .search-dock, body.catalog-open .search-dock { display: none; }

/* ============ The hamburger drawer ============ */
.mm-backdrop {
    position: fixed; inset: 0; z-index: 1060; background: rgba(16, 22, 40, .45);
    opacity: 0; transition: opacity .2s;
}
.mm-backdrop.open { opacity: 1; }
.mobile-menu {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 1070;
    width: min(86vw, 340px); display: flex; flex-direction: column;
    background: #fff; box-shadow: 8px 0 30px rgba(16, 22, 40, .22);
    transform: translateX(-100%); transition: transform .22s ease;
}
.mobile-menu.open { transform: none; }
.mm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; border-bottom: 1px solid #eef0f6;
}
.mm-logo { display: flex; align-items: center; gap: 9px; text-decoration: none;
    font-weight: 800; color: #1a1f2e; font-size: 1.05rem; }
.mm-logo img { height: 34px; width: auto; object-fit: contain; }
.mm-close { border: 0; background: none; font-size: 30px; line-height: 1; color: #1a1f2e;
    width: 42px; height: 42px; margin-right: -8px; }
.mm-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 12px 14px calc(20px + env(safe-area-inset-bottom)); }

.mm-login {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    background: #0088cc; color: #fff; text-decoration: none; font-weight: 700;
    border-radius: 12px; padding: 12px; margin-bottom: 14px;
}
.mm-login:hover { color: #fff; }
.mm-user {
    display: flex; align-items: center; gap: 11px; text-decoration: none;
    background: #f4f6fc; border-radius: 12px; padding: 10px 12px; margin-bottom: 14px;
    color: #1a1f2e;
}
.mm-user img, .mm-user-ava { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%; object-fit: cover; }
.mm-user-ava { display: flex; align-items: center; justify-content: center; background: #dfe5f5; color: #6b7698; }
.mm-user-text { flex: 1; min-width: 0; }
.mm-user-text b { display: block; font-size: .92rem; line-height: 1.2; }
.mm-user-text small { color: #7b8294; font-size: .76rem; }
.mm-user > i { color: #b9c0d2; font-size: .8rem; }

.mm-nav { display: block; margin-bottom: 14px; }
.mm-link {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 2px; border: 0; border-bottom: 1px solid #f2f4f9;
    background: none; text-align: left; text-decoration: none;
    color: #1a1f2e; font-size: .95rem; font-weight: 600;
}
.mm-nav .mm-link:last-child { border-bottom: 0; }
.mm-link i:first-child { width: 22px; flex: 0 0 22px; text-align: center; color: #8d93a5; font-size: 1.02rem; }
.mm-link .mm-go { margin-left: auto; color: #c3c9da; font-size: .76rem; }
.mm-nav-plain .mm-link { font-weight: 500; font-size: .9rem; color: #434a5e; }

.mm-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.mm-chip {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 11px 4px; border: 1px solid #e7eaf3; border-radius: 12px;
    text-decoration: none; color: #434a5e; font-size: .7rem; font-weight: 600; text-align: center;
}
.mm-chip i { font-size: 1.05rem; color: #6b7698; }
.mm-count {
    position: absolute; top: 5px; right: 8px; background: #dc3545; color: #fff;
    min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
    font-size: .6rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.mm-title { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: #9aa1b4; margin: 0 0 4px; }

.mm-contact { margin-top: 16px; display: grid; gap: 8px; }
.mm-call, .mm-tg {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 12px; padding: 11px; font-weight: 700; font-size: .9rem; text-decoration: none;
}
.mm-call { background: #eef2fb; color: #3a4668; }
.mm-tg { background: #e6f4fc; color: #0b7ab8; }
body.mm-open { overflow: hidden; }

/* ============ The bar along the bottom, and the catalog sheet ============ */
.bottom-nav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: none;
    /* the height is fixed on purpose: --nav-h below has to match it, or the
       product page's buy bar leaves a white strip above the bar */
    min-height: 58px; align-items: stretch;
    background: #fff; box-shadow: 0 -2px 14px rgba(20, 30, 60, .09);
    padding-bottom: env(safe-area-inset-bottom);
}
.bn-item {
    position: relative; flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 7px 2px 8px; border: 0; background: none; text-decoration: none;
    color: #7b8294; font-size: .68rem; font-weight: 600; line-height: 1.15; text-align: center;
}
.bn-item i { font-size: 1.2rem; }
.bn-item span:not(.bn-badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-item.active { color: var(--primary-color); }
.bn-item.active i { color: var(--primary-color); }
.bn-badge {
    position: absolute; top: 3px; left: 50%; margin-left: 4px;
    background: #dc3545; color: #fff; font-size: .6rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px;
    display: flex; align-items: center; justify-content: center;
}

.catalog-sheet {
    position: fixed; inset: 0; z-index: 1065; display: none; flex-direction: column;
    background: #fff;
}
.catalog-sheet.open { display: flex; animation: catalogSheetIn .22s ease; }
@keyframes catalogSheetIn { from { transform: translateY(14px); opacity: .5; } to { transform: none; opacity: 1; } }
.catalog-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px 12px; border-bottom: 1px solid #eceef4;
}
.catalog-sheet-head .cs-title { font-size: 1.25rem; font-weight: 700; color: #1a1f2e; }
.catalog-sheet-head .cs-close {
    border: 0; background: none; color: #1a1f2e; font-size: 30px; line-height: 1;
    width: 44px; height: 44px; margin-right: -10px;
}
.catalog-sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 4px 18px calc(24px + env(safe-area-inset-bottom)); }
.cs-list { list-style: none; margin: 0; padding: 0; }
.cs-row { display: flex; align-items: center; border-bottom: 1px solid #f1f2f6; }
.cs-link {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: 13px; padding: 14px 2px;
    color: #1a1f2e; text-decoration: none; font-weight: 600; font-size: .98rem;
}
.cs-link i { width: 22px; flex: 0 0 22px; text-align: center; color: #8d93a5; font-size: 1.05rem; }
.cs-toggle { border: 0; background: none; color: #9aa0b0; width: 44px; height: 44px; flex: 0 0 44px; }
.cs-toggle i { transition: transform .2s; }
.cs-item.open .cs-toggle i { transform: rotate(180deg); }
.cs-children { list-style: none; margin: 0; padding: 4px 0 10px 35px; }
.cs-children a { display: block; padding: 9px 0; color: #4b5162; text-decoration: none; font-size: .92rem; }
body.catalog-open { overflow: hidden; }

@media (max-width: 991.98px) {
    .bottom-nav { display: flex; }
    /* the page ends above the bar, and the floating buttons sit on top of it */
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); --nav-h: 58px; --bottom-bar-h: 58px; }
    /* the header's own cart and favourites are in the bar now */
    .header-mobile-icons .dup-in-nav { display: none; }
    /* «Kategoriyalar» opens the sheet here, never the desktop hover panel */
    .katalog-wrapper:hover .katalog-dropdown { display: none; }
}

/* ============ One side gutter, not two ============ */
@media (max-width: 991.98px) {
    /* A view that opens its own .container inside the layout's one paid the
       side padding twice — 24 of the 390 pixels, straight out of the cards */
    .container .container { padding-left: 0; padding-right: 0; }
    /* and the catalog wrapper adds 16px of its own on top of the container's */
    .category-page { padding-left: 0; padding-right: 0; }
}

@media (max-width: 575.98px) {
    main .py-4 { padding-top: 14px !important; padding-bottom: 14px !important; }
    main .p-4 { padding: 16px !important; }
    main h2.fw-bold { font-size: 1.3rem; }
    .breadcrumb { font-size: 0.8rem; padding: 8px 0; }
    .breadcrumb-item + .breadcrumb-item::before { padding: 0 6px; }
}

/* ============ The banner on the home page ============ */
@media (max-width: 768px) {
    /* Every slide is placed absolutely, so the slider needs a height of its
       own. Stacked into a column it was given `height: auto` and a bare
       `min-height`, which the slides could not fill — the banner was simply
       invisible on every phone, leaving a grey box with arrows in it. */
    .hero-banner-wrapper { height: auto; }
    .hero-banner-slider { min-height: 0; aspect-ratio: 2.9; }
    .banner-overlay { padding: 12px 16px; }
}
@media (max-width: 575.98px) {
    /* the strip is 130px tall here and the artwork already carries its own
       words — the caption on top of them only made both unreadable */
    .banner-overlay { display: none; }
    .banner-nav { width: 32px; height: 32px; }
    .banner-dots { bottom: 8px; }
}

/* ============ Catalog: the list above the products ============ */
@media (max-width: 991.98px) {
    /* The category list was a stack of full-width rows: on a phone it pushed
       the first product some 350px down the page. One scrolling row instead. */
    .filter-subcategories { background: none; box-shadow: none; border-radius: 0; margin-bottom: 14px; overflow: visible; }
    .filter-subcat-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
        scrollbar-width: none; -ms-overflow-style: none; }
    .filter-subcat-list::-webkit-scrollbar { display: none; }
    .filter-subcat-list li,
    .filter-subcat-list li:last-child { border: 0; flex: 0 0 auto; }
    .filter-subcat-list li a,
    .filter-subcat-list li.filter-subcat-parent a,
    .filter-subcat-list li.filter-subcat-child a {
        padding: 8px 14px; border: 1px solid #e4e7f0; border-radius: 20px; background: #fff;
        font-size: 0.85rem; font-weight: 600; color: #444; white-space: nowrap;
    }
    .filter-subcat-list li.active a,
    .filter-subcat-list li.filter-subcat-parent.active a {
        background: var(--primary-color); border-color: var(--primary-color); color: #fff;
    }

    /* the column that only carries that row must not add a screenful of margin */
    .col-lg-3.mb-4:has(.filter-subcategories) { margin-bottom: 0 !important; }

    /* The filter drawer covers most of the screen, so it needs a way out that
       is not «hit the 90px strip of page still showing» */
    .filter-sidebar-head {
        display: flex; align-items: center; justify-content: space-between;
        position: sticky; top: -16px; z-index: 1;
        margin: -16px -16px 12px; padding: 12px 16px;
        background: #fff; border-bottom: 1px solid #e6e8ee; font-weight: 700;
    }
    .filter-sidebar-head button {
        border: 0; background: none; color: #888; font-size: 26px; line-height: 1;
        width: 38px; height: 38px; margin: -6px -8px -6px 0;
    }

    /* a price of eight digits has to fit the drawer's narrow field */
    .filter-price-inputs { gap: 6px; }
    .filter-price-field .form-control { font-size: 13px; padding: 6px; }
    .filter-price-ok { padding: 6px 10px; font-size: 13px; }

    /* the B/U and search pages hid their only filter opener; they use the same
       button as the category page now, so the floating one may stay gone */
    .filter-mobile-toggle { display: none !important; }
}

@media (max-width: 575.98px) {
    .category-header { margin-bottom: 12px !important; }
    .category-header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .category-count { font-size: 0.82rem; white-space: nowrap; }
    .cat-sort-select { max-width: 160px; }
    .cat-filter-toggle-btn { min-width: 38px; height: 38px; }
    .filter-active-tags { gap: 6px; }
    .filter-tag { font-size: 0.78rem; }
}

/* ============ Forms ============ */
@media (max-width: 575.98px) {
    /* iOS zooms into any field whose text is under 16px and never zooms back */
    .form-control:not(.form-control-sm),
    .form-select:not(.form-select-sm),
    textarea.form-control { font-size: 16px; }
    .form-control-lg, .form-select-lg { padding: 0.6rem 0.8rem; border-radius: 10px; }
    .btn-lg { padding: 0.7rem 1.1rem; font-size: 1.02rem; }
    /* a tick box of 18px is below what a finger hits reliably */
    .checkout-offer .form-check-input { width: 22px; height: 22px; }
    .input-group .btn { white-space: nowrap; }
}

/* ============ Touch ============ */
@media (hover: none) {
    /* a card that lifts on hover stays lifted after a tap on a touch screen */
    .product-card:hover, .cat-product-card:hover { transform: none; box-shadow: none; }
}

/* ============ Footer promises ============ */
@media (max-width: 575.98px) {
    .unity-features-section { padding: 20px 0; margin-top: 28px; }
    .unity-features-grid { gap: 10px; }
    .unity-feature-card { padding: 12px 14px; gap: 12px; }
    .unity-feature-icon { width: 36px; height: 36px; font-size: 15px; }
}

/* ============ Product page ============ */
@media (max-width: 575.98px) {
    .detail-title { font-size: 1.15rem; margin-bottom: 10px; }
    .detail-current-price { font-size: 1.5rem; }
    .installment-months-selector .month-btn { min-width: 42px; height: 36px; }
    .detail-share-btn { font-size: 0.78rem; }
    /* the fixed buy bar must not sit on the last row of the page */
    body:has(.mobile-buy-bar) .unity-footer { padding-bottom: 72px; }
}