/* ============================================================
   MOBILE ADAPTER
   The site is built desktop-first (stylesheet.css has no phone
   rules). This file re-flows that desktop layout for tablets
   (≤991px) and phones (≤767px); mobile.js adds the pieces CSS
   can't: the bottom tab bar and the footer accordion.
   ============================================================ */

/* Phone-only pieces: hidden on desktop */
.m-tabbar,                                   /* bottom tab bar (mobile.js) */
.cs-mnav, .cs-mfilter-btn, .cs-pages,        /* home catalog: pill navbars, filter button, page dots */
.cs-filters-close, .cs-filters-backdrop,
.acc-hero { display: none; }                 /* /my-account/ hero card: greeting + bonus slides (phones only) */
.ord-m, .wl-m { display: none; }             /* order history / wishlist phone blocks (shown in their templates' phone CSS) */
.acc-sections { display: none; }             /* /my-account/ sections list (phones only; desktop has the hub sidebar) */

/* ---------- Header on laptops / tablets: drop labels in steps (icons stay) so the
   search shrinks instead of the right-hand group pushing the page sideways ---------- */
.header-center { min-width: 0; }
@media (min-width: 768px) and (max-width: 1500px) {
    .header-row { gap: 16px; }
    .header-left, .header-right { gap: 10px; }
    .search-filter-label, .cart-label { display: none; }
}
@media (min-width: 768px) and (max-width: 1300px) {
    .brand-sub { display: none; }
    .login-pill span, .search-pill-btn span, .catalog-pill > span { display: none; }
    .login-pill { padding: 9px 12px; }
    .search-pill-btn { padding: 0 16px; }
    .catalog-pill { padding: 10px 14px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
    .search-voice-btn, .search-filter, .catalog-pill-caret { display: none; }
    .cart-pill { padding: 8px 12px; }
    #cart-total-text { display: none; }
}

/* ---------- Tablet + phone (≤991px) ---------- */
@media (max-width: 991px) {
    /* Left menu becomes an off-canvas drawer opened by the ☰ button */
    body { padding-left: 0; }
    .sidebar-toggle-btn { display: flex; }
    .sidebar-close-btn { display: block; color: #fff; }
    .site-sidebar { width: min(84vw, 300px); background: var(--surface); }
    .site-sidebar.active { transform: translateX(0); }

    .header-row { gap: 14px; }
    .header-left { gap: 12px; }
    .header-right { gap: 8px; }
    .brand-sub { display: none; }

    /* Product page: tabs bar sits above the content */
    .product-tabs-track { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 16px; }
    .product-tabs-track::-webkit-scrollbar { display: none; }
    .product-photo-section { max-width: none; }

    .acc-hub-body { flex-direction: column; }
    .acc-hub-sidebar { flex: none; width: 100%; }
}

/* ---------- Product info block: blue card on every screen size (phones add the overlap in the ≤767px block) ---------- */
.product-short-info {
    border: none; background: linear-gradient(160deg, var(--accent), var(--accent-dark)); color: #fff;
    box-shadow: 0 10px 28px rgba(0, 50, 120, 0.22);
}
.product-short-info .product-title { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.24); }
.product-short-info .rpill { background: rgba(255,255,255,0.28); }
.product-short-info .rpill.on { background: #fff; }
.product-short-info .product-reviews-link { color: rgba(255,255,255,0.85); }
.product-short-info .ps-pill { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }
.product-short-info .ps-pill i, .product-short-info .ps-pill b { color: #fff; }
.product-short-info .ps-stock.is-in { background: rgba(52,199,89,0.28); border-color: rgba(52,199,89,0.45); }
.product-short-info .ps-stock.is-out { background: rgba(255,90,90,0.25); border-color: rgba(255,90,90,0.4); }
/* price as a pill on the blue */
.product-short-info .product-price-block {
    display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 8px 18px;
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.28); border-radius: 50px;
}
.product-short-info .pp-price { color: #fff; }
.product-short-info .pp-price-old { color: rgba(255,255,255,0.6); margin-right: 0; }
.product-short-info .pp-points, .product-short-info .pp-discounts span { color: rgba(255,255,255,0.8); }
/* light buy row: white stepper outline + white button */
/* price row on the blue tab */
.product-short-info .product-price-row .product-price-block { display: flex; border-radius: 22px; }
.product-short-info .pp-short { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.9); }
.product-short-info .pp-short i { color: #fff; }
/* "Характеристика" button in the info block: description + the OpenCart attribute table, glass on the blue */
.pspec-in-body { margin-top: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22); max-height: 460px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.pspec-in-body[hidden] { display: none; }
.pspec-in-body .product-spec-desc { margin: 0 0 12px; padding: 0; border: none; background: none; }
.pspec-in-body .product-spec-title { margin-bottom: 6px; font-size: 14px; color: #fff; }
.pspec-in-body .product-spec-title i { color: #fff; }
.pspec-in-body .product-description-full, .pspec-in-body .product-description-full * { color: rgba(255,255,255,0.88) !important; background: transparent !important; font-size: 13.5px; line-height: 1.55; }
.pspec-in-body > p { color: rgba(255,255,255,0.85) !important; margin: 0; }
.pspec-in-body .table { margin: 0; border: none; background: transparent; border-collapse: separate; border-spacing: 0 4px; font-size: 13px; }
.pspec-in-body .table > thead > tr > td { padding: 8px 2px 2px; border: none; background: none; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
.pspec-in-body .table > tbody > tr > td { padding: 8px 12px; border: none; background: rgba(255,255,255,0.1); color: #fff; vertical-align: middle; }
.pspec-in-body .table > tbody > tr > td:first-child { width: 45%; border-radius: 12px 0 0 12px; color: rgba(255,255,255,0.75); }
.pspec-in-body .table > tbody > tr > td:last-child { border-radius: 0 12px 12px 0; font-weight: 600; }
.product-short-info .pvar-head i.fa-list-alt { color: #fff; margin-right: 4px; }
/* brand plate beside the price: logo circle · "Бренд" / name / product count · arrow */
.pp-brand {
    flex: 1 1 170px; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 8px 8px; border-radius: 22px; text-decoration: none;
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.24); color: #fff;
    transition: background .15s, border-color .15s;
}
.pp-brand:hover, .pp-brand:focus { background: rgba(255,255,255,0.2); border-color: #fff; color: #fff; text-decoration: none; }
.pp-brand-logo {
    width: 46px; height: 46px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: #fff;
    display: flex; align-items: center; justify-content: center;
}
.pp-brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.pp-brand-logo b { font-size: 20px; font-weight: 800; color: var(--accent); }
.pp-brand-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pp-brand-text small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: rgba(255,255,255,0.7); }
.pp-brand-text b { font-size: 15px; font-weight: 800; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-brand-text em { font-style: normal; font-size: 11.5px; color: rgba(255,255,255,0.8); }
.pp-brand > .fa { font-size: 18px; color: #fff; opacity: .8; }
.product-short-info .product-price-block.is-sale .pp-price { color: #fff; }
.product-short-info .pp-sale-badge { background: #ff4d4f; }
.product-short-info .pp-sale-meta { color: #9ff0b8; }
.product-short-info .pp-disc-chip { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); }
.product-short-info .pp-disc-chip b { color: #fff; }
/* variants accordion on the blue tab */
.product-short-info .pvar-head { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #fff; }
.product-short-info .pvar.open .pvar-head, .product-short-info .pvar-head:hover { background: rgba(255,255,255,0.2); border-color: #fff; color: #fff; }
.product-short-info .pvar-head i.fa-cubes { color: #fff; }
.product-short-info .pvar-count { background: #fff; color: var(--accent); }
.product-short-info .pvar-pill { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); color: #fff; }
.product-short-info .pvar-pill b { color: #fff; }
.product-short-info a.pvar-pill:hover { background: rgba(255,255,255,0.22); color: #fff; }
.product-short-info .pvar-pill.active { background: #fff; border-color: #fff; color: var(--accent); }
/* installments on the blue tab */
.product-short-info .pinst { border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.06); }
.product-short-info .pinst-title, .product-short-info .pinst-title i, .product-short-info .pinst-monthly { color: #fff; }
.product-short-info .pinst-plan { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); color: #fff; }
.product-short-info .pinst-plan.active { background: #fff; border-color: #fff; color: var(--accent); }
.product-short-info .pinst-max { color: inherit; opacity: .75; }
.product-short-info .pinst-dot { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.8); }
.product-short-info .pinst-term { background: transparent; border-color: rgba(255,255,255,0.35); color: #fff; }
.product-short-info .pinst-term.active { background: #fff; border-color: #fff; color: var(--accent); }
.product-short-info .pinst-terms-label, .product-short-info .pinst-sum { color: rgba(255,255,255,0.8); }
.product-short-info .product-buy-block { background: transparent; border: none; padding: 0; }
.product-short-info .product-qty label { color: rgba(255,255,255,0.8); }
.product-short-info .qty-stepper { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
.product-short-info .qty-stepper .qty-btn { color: #fff; }
.product-short-info .qty-stepper .qty-btn:hover { background: rgba(255,255,255,0.18); }
.product-short-info .product-qty .qty-stepper input { color: #fff; }
.product-short-info .product-cart-btn { height: 44px; padding: 0 20px; background: #fff; color: var(--accent); border-radius: 50px; font-weight: 700; }
.product-short-info .product-cart-btn:hover, .product-short-info .product-cart-btn:active { background: var(--accent-light); color: var(--accent-dark); }
.product-short-info .alert { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); color: #fff; }

/* ---------- Phone (≤767px) ---------- */
@media (max-width: 767px) {
    /* body uses "clip", not "hidden": hidden would make <body> a scroll box and break the sticky header */
    html, body { overflow-x: hidden; }
    @supports (overflow: clip) { body { overflow-x: clip; } }
    body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
    .container { padding-left: 12px; padding-right: 12px; }
    .container > .row, .container-fluid > .row { margin-left: -12px; margin-right: -12px; }   /* match the 12px gutter so rows don't stick out 3px */

    /* Header: desktop-style logo on the left, round wishlist / notifications / compare
       buttons on the right; search lives in the tab bar's "Пошук" sheet. Sticks to the top on scroll. */
    #header-main { padding: 14px 0; position: sticky; top: 0; z-index: 1000; }
    .header-row { position: relative; flex-wrap: nowrap; gap: 10px; justify-content: space-between; align-items: center; }
    .header-left { flex: 1 1 auto; min-width: 0; gap: 8px; justify-content: flex-start; }
    .header-center { display: none; }
    /* No transform here: it would become the containing block of the fixed cart sheet inside #cart */
    .header-right { flex: 0 0 auto; align-items: center; gap: 8px; }
    .cart-pill { display: none; }                                  /* cart lives in the tab bar */
    .brand-logo { gap: 8px; min-width: 0; }
    .brand-logo > i { width: 40px; height: 40px; line-height: 40px; font-size: 20px; }
    .brand-text { min-width: 0; }
    .brand-name { font-size: 18px; }
    .brand-sub { display: block; font-size: 10.5px; }              /* tablet rule hides it; phones show it like desktop */
    .sidebar-toggle-btn,                                          /* ☰ not needed: the bottom tab bar covers navigation */
    .catalog-pill, .login-pill { display: none; }
    .header-icon-btn { width: 38px; height: 38px; background: rgba(255,255,255,0.16); color: #fff; }
    .header-icon-btn i { font-size: 16px; }
    .header-icon-btn .icon-badge { min-width: 16px; height: 16px; line-height: 12px; font-size: 9px; top: -3px; right: -3px; }
    #wishlist-total { order: 1; }
    .header-right a[title="Уведомления"] { order: 2; }
    #compare-total { order: 3; }

    #search .form-control { height: 40px; font-size: 14px; }
    .search-voice-btn { width: 40px; height: 40px; }
    .search-filter-btn { height: 40px; padding: 0 10px; }
    .search-filter-label { display: none; }
    .search-pill-btn { height: 40px; padding: 0 14px; }
    .search-pill-btn span { display: none; }

    /* Home: nav pills scroll in one row, compact hero */
    .home-topnav { padding: 10px 12px 0; }
    .home-topnav-inner { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding: 8px; }
    .home-topnav-inner::-webkit-scrollbar { display: none; }
    .home-topnav-pill { flex-shrink: 0; padding: 7px 12px; font-size: 12px; white-space: nowrap; }
    .hero-cat-wrap { padding: 10px 12px 0; }
    .hero-slide { padding: 18px 16px; gap: 12px; min-height: 0; }
    .hero-slide-icon { display: none; }
    .hero-slide-title { font-size: 17px; }
    .hero-slide-desc { font-size: 12px; }
    .hero-slide-btn { padding: 7px 14px; font-size: 12px; }
    .hero-arrow { display: none; }

    /* Home catalog section: panels stack, products in 2 columns, no inner scroll */
    .catalog-section { padding: 14px 12px; }
    .catalog-section-toolbar { padding: 10px 12px; gap: 10px; }
    .catalog-section-icon { width: 38px; height: 38px; font-size: 17px; }
    .catalog-section-title h3 { font-size: 15px; }
    .catalog-section-meta { gap: 10px; font-size: 11px; }
    .cs-view-btn { width: 30px; height: 30px; font-size: 12px; }
    .catalog-section-body { flex-direction: column; gap: 12px; align-items: stretch; }
    .catalog-section-left, .cs-sidebar-toggle { display: none; }   /* categories live in the pill navbars */
    .cs-more-btn { display: none !important; }                    /* phone: the grid is a slider, all cards stay in it */
    .cs-products-grid { height: auto; max-height: none; overflow: visible; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-right: 0; }

    /* Products slider: pages of 2×2 cards, swiped sideways and snapped per page */
    .cs-products-grid.product-grid {
        grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(2, auto);
        grid-auto-columns: calc((100% - 8px) / 2);
        overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
        scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    }
    .cs-products-grid.product-grid::-webkit-scrollbar { display: none; }
    .cs-products-grid.product-grid > .product-thumb { margin: 0; grid-column: var(--pc-col); grid-row: var(--pc-row); }
    .cs-products-grid.product-grid > .product-thumb:nth-child(4n+1) { scroll-snap-align: start; }

    /* Toolbar in one row: title · page dots · filter button */
    .catalog-section-toolbar { flex-wrap: nowrap; gap: 10px; }
    .catalog-section-icon, .catalog-section-switcher { display: none; }
    .catalog-section-title { flex: 1 1 auto; min-width: 0; }
    .catalog-section-title h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .catalog-section-meta { flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }

    .cs-pages { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
    .cs-page-dot {
        width: 7px; height: 7px; padding: 0; border: none; border-radius: 4px;
        background: var(--border-dark); transition: width .25s ease, background .25s ease;
    }
    .cs-page-dot.active { width: 18px; background: var(--accent); }
    .cs-page-count { font-size: 12px; font-weight: 700; color: var(--accent); font-style: normal; }

    .cs-mfilter-btn {
        position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
        width: 38px; height: 38px; padding: 0; border: 1.5px solid var(--accent); border-radius: 50%;
        background: var(--surface); color: var(--accent); font-size: 15px;
    }
    .cs-mfilter-btn span { display: none; }
    .cs-mfilter-btn.has-filters { background: var(--accent); color: #fff; }
    .cs-mfilter-dot { display: none; }
    .cs-mfilter-btn.has-filters .cs-mfilter-dot {
        display: block; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px;
        border-radius: 50%; background: #FF6B00; border: 2px solid var(--surface);
    }

    /* Category pill navbars: level 1, then level 2, then level 3 */
    .cs-mnav { display: block; margin: 0 0 12px; }
    .cs-mnav-row {
        display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
        padding: 2px 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
    }
    .cs-mnav-row::-webkit-scrollbar { display: none; }
    .cs-mnav-row:last-child, .cs-mnav-row:empty { margin-bottom: 0; }
    .cs-mnav-pill {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
        height: 38px; padding: 0 16px; border-radius: 50px; white-space: nowrap;
        border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
        font-size: 13px; font-weight: 700; font-style: normal;
    }
    .cs-mnav-pill span {
        font-size: 11px; padding: 1px 7px; border-radius: 50px; background: var(--accent-light); color: var(--accent);
    }
    .cs-mnav-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    .cs-mnav-pill.active span { background: rgba(255,255,255,0.25); color: #fff; }
    .cs-mnav-l2 .cs-mnav-pill { height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 600; }
    .cs-mnav-l3 .cs-mnav-pill { height: 30px; padding: 0 12px; font-size: 12px; font-weight: 600; background: var(--bg); }
    .cs-mnav-l2 .cs-mnav-pill.active, .cs-mnav-l3 .cs-mnav-pill.active { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
    .cs-mnav-l2 .cs-mnav-pill.active span, .cs-mnav-l3 .cs-mnav-pill.active span { background: var(--accent); color: #fff; }

    /* Filters: bottom sheet opened by the toolbar button */
    .catalog-section-filters, .catalog-section-filters.collapsed {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 1250; width: auto; min-height: 0;
        transform: translateY(105%); transition: transform .3s cubic-bezier(.22,1,.36,1);
    }
    .cs-filters-open .catalog-section-filters { transform: none; }
    .catalog-section-filters .cs-filters-panel,
    .catalog-section-filters.collapsed .cs-filters-panel {
        display: block; position: static; max-height: 80vh; overflow-y: auto;
        border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    }
    .cs-filters-title { position: relative; font-size: 16px; }
    .cs-filters-close {
        display: flex; align-items: center; justify-content: center; margin-left: auto;
        width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 50%;
        background: var(--surface); color: var(--text);
    }
    .cs-filter-apply, .cs-filter-reset { height: 44px; border-radius: 50px; font-size: 14px; }
    .cs-filters-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1240; background: rgba(10,20,40,0.5);
        opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
    }
    .cs-filters-open .cs-filters-backdrop { opacity: 1; visibility: visible; }
    .cs-products-grid.cs-view-tile, .cs-products-grid.cs-view-list { grid-template-columns: 1fr; }
    /* Brands slider: swipe, no arrows; cards a bit narrower so the next one peeks in */
    .home-brands { padding: 0 12px 22px; }
    .hb-arrow { display: none; }
    .hb-card { flex-basis: 250px; }
    .hb-img { flex-basis: 56px; height: 56px; }

    /* Home categories slider: one full-width card per swipe */
    .home-cat-cards { padding: 4px 12px 20px; }
    .hcc-card { flex-basis: 100%; }
    .hcc-track { gap: 0; }

    /* Catalog sheet: stacked category cards (closed at first) instead of the category buttons */
    .catalog-mega .cmm-cats, .catalog-mega .cmm-products { display: none !important; }
    .cmm-mcards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
    .cmm-mcards .hcc-card { flex: none; }
    .cat-arrow { display: none; }

    /* Category page: only the toolbar and the subcategory accordion + products below it */
    .cat-browser-body { flex-direction: column; gap: 12px; align-items: stretch; padding: 12px; }
    .cat-browser-side { display: none; }                          /* desktop left sidebars (filters, categories) — phones use the accordion under the toolbar */
    .cat-browser-main { width: 100%; min-width: 0; }
    .ms-layout { flex-direction: column; height: auto; }
    .ms-sidebar { flex: none; }
    .special-slider-item { min-width: 170px; flex: 0 0 170px; }
    .review-item { flex: 0 0 85vw; width: 85vw; }
    .review-slider-prev, .review-slider-next { display: none; }
    #cart .dropdown-menu, #cart .dropdown-menu li > div { min-width: 0; }

    /* Product grids on category/search/etc. pages: 2 per row */
    .row > .product-layout.product-grid { width: 50%; padding-left: 5px; padding-right: 5px; }
    .row:has(> .product-layout) { margin-left: -5px; margin-right: -5px; }

    /* Product card */
    .product-thumb { margin-bottom: 10px; }
    .product-thumb .image, .product-thumb.pt-enhanced .image { height: 160px; padding: 10px; }
    .product-thumb.pt-enhanced .caption { padding: 0 10px 8px; }
    .product-thumb.pt-enhanced h4 { font-size: 12.5px; }
    .product-thumb.pt-enhanced .price, .product-thumb .price-new { font-size: 15px; }
    .product-thumb .price-old { font-size: 12px; }
    .product-thumb.pt-enhanced .button-group { padding: 0 10px 10px; }
    .pt-buy { height: 42px; }
    .pt-buy-btn { font-size: 13px !important; }
    .pt-stars { font-size: 13px; letter-spacing: 1px; }
    .pc-badge { font-size: 10px; padding: 2px 7px; }
    .pc-stock { font-size: 10px; }
    .product-thumb.pt-enhanced:hover { transform: none; }
    .product-thumb.pt-enhanced:hover .image img { transform: none; }
    .pt-actions { top: 6px; right: 6px; gap: 4px; }
    .pt-action { opacity: 1; transform: none; width: 30px !important; height: 30px; line-height: 30px !important; font-size: 12px; }
    .product-list .product-thumb.pt-enhanced .caption,
    .product-list .product-thumb.pt-enhanced .button-group { margin-left: 0; max-width: none; }

    /* Product page */
    /* sticky bars stop under the sticky header (--m-hdr = its height, kept current by mobile.js) */
    .product-toolbar { padding: 10px 12px; gap: 10px; margin: 10px 12px 0; top: calc(var(--m-hdr, 69px) + 6px); width: auto; }
    .product-tabs-bar { top: var(--m-hdr, 69px); }
    .product-related-section { margin: 16px 0 0; border-radius: 20px; }
    .product-related-section .prs-slider { padding: 12px 10px 14px; }
    .prs-head { padding: 12px 14px; }
    .product-related-section h3.prs-title { font-size: 16px; }
    .prs-card { width: 158px; }
    /* ===== Checkout on phones ===== */
    /* steps: numbered circles joined by arrow links; the active step's name underneath */
    .checkout-navbar-bar { padding: 14px 12px 10px; top: var(--m-hdr, 69px); }
    .checkout-navbar-track { overflow: visible; justify-content: center; align-items: center; gap: 0; padding: 0; }
    .checkout-navbar-track .cs-step {
        flex: 0 0 auto; padding: 0 !important; margin: 0; border: none !important;
        background: none !important; box-shadow: none !important; min-width: 0;
    }
    .cs-step .cs-label, .cs-step .cs-ico { display: none; }
    .cs-dot {
        display: flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border-radius: 50%;
        border: 2px solid var(--border); background: var(--surface); color: var(--text-secondary);
        font-size: 15px; transition: background-color .25s ease, border-color .25s ease, color .25s ease, box-shadow .25s ease;
    }
    .cs-n { display: block; font-weight: 800; }
    .cs-step.active .cs-dot {
        background: var(--accent); border-color: var(--accent); color: #fff;
        box-shadow: 0 0 0 5px rgba(0, 92, 190, 0.15);
    }
    .cs-step.done .cs-dot { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }
    .cs-step.done .cs-n { display: none; }
    .cs-step.done .cs-done { display: block; }
    .cs-link {
        display: flex; align-items: center; justify-content: center; position: relative;
        flex: 1 1 auto; min-width: 12px; height: 2px; margin: 0 4px; background: var(--border);
        transition: background-color .25s ease;
    }
    .cs-link i {
        position: absolute; font-size: 14px; line-height: 1; color: var(--border);
        background: var(--bg); padding: 0 1px; transition: color .25s ease;
    }
    .cs-link.done { background: var(--accent); }
    .cs-link.done i { color: var(--accent); }
    .cs-caption { display: block; margin-top: 10px; text-align: center; font-size: 13.5px; font-weight: 700; color: var(--text); }
    .cs-caption span { color: var(--accent); }

    /* each step: a section card with a centred header, everything inside centred */
    .checkout-step-card .panel-collapse.in, .checkout-step-card .panel-collapse.collapsing {
        border: 1.5px solid var(--border); border-radius: 20px; background: var(--surface); overflow: hidden;
    }
    .cs-sec-head {
        display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px;
        background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 15.5px;
    }
    .cs-sec-num {
        width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
        display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.2); font-weight: 800; font-size: 14px;
    }
    .checkout-step-card .panel-body { padding: 16px 14px !important; text-align: center; }
    .checkout-step-card legend, .checkout-step-card .control-label,
    .checkout-step-card h2, .checkout-step-card h3, .checkout-step-card p,
    .checkout-method-desc, .checkout-method-title, .checkout-login-desc, .checkout-login-note { text-align: center; }
    .checkout-login-section h3, .checkout-radio-group, .checkout-agree-label,
    .checkout-shipping-checkbox label { justify-content: center; }
    .checkout-shipping-checkbox, .checkout-step-card .checkbox, .checkout-step-card .radio { text-align: center; }
    .checkout-step-card .form-control { text-align: center; }
    .checkout-step-card .buttons { text-align: center; }
    .checkout-option-card { text-align: left; }   /* method cards keep icon | name | price in a row */

    .prv-card { flex-basis: 260px; }
    .rvl-card { flex-basis: auto; }   /* the slider width above must not size cards in the vertical reviews list */
    .rvp-head { flex-wrap: wrap; padding: 12px 14px; }
    .rvp-head .rvp-write { width: 100%; justify-content: center; }
    .rvp-body { max-height: 70vh; padding: 12px; }
    /* the modal sits above the tab bar, like the other sheets */
    .rv-modal { bottom: var(--m-tb, 0); padding: 12px; align-items: flex-end; }
    .rv-modal-dialog { border-radius: 22px; max-height: calc(100vh - var(--m-tb, 0px) - 24px); }
    .prv-foot { padding: 0 12px 14px; }
    .prv-empty { padding: 16px 14px; }
    .prv-empty .prv-btn { width: 100%; justify-content: center; }
    .prs-card .product-thumb .image { height: 130px; }
    .prs-prev { left: 2px; }
    .prs-next { right: 2px; }
    .ptb-back-btn { width: 36px; height: 36px; font-size: 20px; }
    .ptb-name { font-size: 13.5px; }
    .product-tabs-content-wrap { padding: 12px; }
    .product-subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .product-subnav::-webkit-scrollbar { display: none; }
    .product-subnav-pill { flex-shrink: 0; padding: 10px 12px; font-size: 13px; }
    .product-title { font-size: 19px; }

    /* Product info as a blue "tab" that overlaps the bottom of the photo slider */
    .product-photo-section { margin-bottom: 0; }
    .pps-thumbs-col { flex-basis: 52px; margin-bottom: 30px; }   /* keep ▼ clear of the overlapping tab */
    .pps-action-btn { width: 34px; height: 34px; font-size: 13px; }   /* the narrower photo would put share on top of the ›-arrow */
    .pps-actions { gap: 6px; top: 10px; right: 10px; }
    /* phones: compact timer between the badge column and the action buttons */
    .pps-timer { top: 10px; padding: 5px 10px; gap: 5px; font-size: 11px; max-width: calc(100% - 92px); }
    .pps-timer-val { font-size: 12.5px; }
    .pps-slider.has-timer .pps-badges { top: 46px; }
    .pps-thumbs-col .pps-thumb { width: 50px; height: 50px; }
    .pps-dots { bottom: 36px; }                      /* stay visible above the overlapping tab */
    .product-short-info {
        position: relative; z-index: 7; margin-top: -26px; padding: 14px 16px 18px;
        border-radius: 24px 24px var(--radius-lg) var(--radius-lg);
        box-shadow: 0 -8px 22px rgba(0, 50, 120, 0.22);
    }
    .psi-grip { display: block; width: 42px; height: 4px; border-radius: 2px; margin: 0 auto 12px; background: rgba(255,255,255,0.45); }
    .product-short-info .product-title { font-size: 18px; }
    .product-short-info .pp-price { font-size: 24px; }

    /* Overlays: the tab bar's sheets (search, catalog, account/login, cart) and the quick view
       open as a card centred in the space ABOVE the tab bar — neither the card nor the dimmed
       backdrop covers the tab bar, so it stays visible and tappable. */
    :root { --m-tb: calc(66px + env(safe-area-inset-bottom, 0px)); }   /* tab bar height */

    .catalog-mega-overlay, .cart-sidebar-overlay, .auth-modal-overlay, .qv-overlay {
        bottom: var(--m-tb); background: rgba(10,20,40,0.55); backdrop-filter: blur(3px);
    }

    /* Catalog + cart: fixed cards centred vertically in that space, height follows content */
    .catalog-mega, .cart-sidebar {
        top: calc((100% - var(--m-tb)) / 2); bottom: auto; left: 12px; right: 12px;
        width: auto; max-width: none; height: auto; max-height: calc(100% - var(--m-tb) - 24px);
        border: none; border-radius: 18px; background: var(--surface);
        box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45);
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-50%) scale(.96);
        transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility .25s;
    }
    .catalog-mega.active, .cart-sidebar.active {
        opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(-50%);
    }
    .catalog-mega-inner, .cart-sidebar-body { min-height: 0; overflow-y: auto; }

    .cmm-mobile-header, .cart-sidebar-header {
        position: relative; padding: 22px 16px 14px; margin: 0;
        background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border);
        font-size: 18px; font-weight: 800; font-style: normal;
    }
    .cmm-mobile-header-icon, .cart-sidebar-header > i:first-child { display: none; }
    .cmm-mobile-header-title { color: var(--text); font-size: 18px; font-weight: 800; font-style: normal; }
    .cmm-mobile-header-close, .cart-sidebar-close, .auth-modal-close {
        position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
        border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); font-size: 16px;
    }
    .cmm-mobile-header-close:active, .cart-sidebar-close:active, .auth-modal-close:active { background: var(--text); color: var(--surface); }
    .cart-sidebar-header .cart-sidebar-close i { color: inherit; }   /* desktop header paints every first <i> white */

    .auth-modal-overlay { align-items: center; padding: 12px; }
    .auth-modal {
        max-width: none; max-height: 100%; border-radius: 18px; padding: 60px 16px 22px;
        transform: translateY(16px) scale(.98); transition: transform .3s cubic-bezier(.22,1,.36,1);
    }
    .auth-modal-overlay.active .auth-modal { transform: none; }

    /* Account sheet (logged in) — rows reuse the search sheet list */
    .ma-dialog { height: auto; }
    .ma-item { padding: 12px 2px; }
    .ma-icon {
        flex: 0 0 40px; height: 40px; display: flex; align-items: center; justify-content: center;
        border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 16px;
    }
    .ma-item-main .ma-icon { background: var(--accent); color: #fff; }
    .ma-item .ms-item-name { font-size: 14px; }
    .ma-logout {
        display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 16px;
        border: 1.5px solid var(--danger); border-radius: 50px; color: var(--danger); font-size: 14px; font-weight: 700;
    }
    .ma-logout:hover, .ma-logout:active { text-decoration: none; background: var(--danger); color: #fff; }
    /* Scroll buttons sit above the tab bar */
    .scroll-fab { right: 12px; bottom: calc(var(--m-tb) + 14px); gap: 8px; }
    .scroll-fab-btn { width: 42px; height: 42px; font-size: 15px; }

    /* Toasts: bottom of the screen above the tab bar; the stack grows upward */
    .toast-container {
        top: auto; bottom: calc(var(--m-tb) + 10px); left: 12px; right: 12px;
        width: auto; max-width: none; z-index: 10100; transform: none;
    }
    .toast { top: auto; bottom: 0; transform-origin: bottom center;
        transform: translateY(calc(var(--toast-y, 0px) + 14px)) scale(calc(var(--toast-s, 1) * .96)); }
    .toast.is-on { transform: translateY(var(--toast-y, 0px)) scale(var(--toast-s, 1)); }
    .toast, .toast-error { box-shadow: 0 6px 16px -6px rgba(0,40,110,0.35); }   /* a small shadow is cheap to move */

    .qv-overlay { padding: 12px; align-items: center; }
    .qv-dialog { max-height: 100%; border-radius: 18px; }
    .qv-content { grid-template-columns: 1fr; gap: 16px; padding: 18px 16px 22px; }
    .qv-title { font-size: 17px; }
    .qv-price-new { font-size: 22px; }

    /* Footer: columns stack, tabs become an accordion (mobile.js) */
    /* Footer: left-aligned and compact — brand, accordion card, newsletter card, pay/delivery */
    footer { margin-top: 24px; padding: 24px 0 16px; }
    footer .container { padding-left: 14px; padding-right: 14px; }
    .footer-grid { flex-direction: column; gap: 14px; justify-content: flex-start; }
    .footer-col { flex: none; width: 100%; min-width: 0; text-align: left; }

    .footer-brand { align-items: flex-start; }
    .footer-brand-logo { justify-content: flex-start; font-size: 18px; margin-bottom: 6px; }
    .footer-brand-logo i { width: 36px; height: 36px; line-height: 36px; font-size: 16px; }
    .footer-tagline { font-size: 12.5px; margin-bottom: 12px; }
    .footer-social { justify-content: flex-start; gap: 8px; margin-bottom: 10px; }
    .footer-social-btn { width: 36px; height: 36px; line-height: 36px; }
    .footer-contact-row { justify-content: flex-start; font-size: 13px; margin-bottom: 6px; }

    /* Accordion: one card, identical rows */
    .footer-tabs { flex-direction: column; gap: 0; }
    .footer-tabs-sidebar {
        flex: none; width: 100%; gap: 0; overflow: hidden;
        background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    }
    .footer-tab-btn, .footer-tab-main, .footer-tab-main:not(.active), .footer-tab-btn.active {
        justify-content: flex-start; gap: 12px; padding: 14px 16px; border: none; border-radius: 0;
        background: transparent; color: var(--accent); font-size: 14px; font-weight: 600; font-style: normal;
        border-bottom: 1px solid var(--border);
    }
    .footer-tab-btn:hover { transform: none; }
    .footer-tab-btn i:first-child {
        width: 30px; height: 30px; line-height: 30px; flex-shrink: 0;
        background: var(--accent-light); border-radius: 50%; font-size: 13px;
    }
    .footer-tab-btn.active { background: var(--surface); }
    .m-acc-caret { margin-left: auto; transition: transform .25s ease; opacity: .8; }
    .footer-tab-btn.active .m-acc-caret { transform: rotate(180deg); }
    .footer-tab-pane.active {
        display: flex; flex-direction: column; gap: 0; padding: 4px 12px 10px;
        background: rgba(0,92,190,0.04); border-bottom: 1px solid var(--border);
    }
    .footer-tabs-sidebar > .footer-tab-pane:last-child,
    .footer-tabs-sidebar > .footer-tab-btn:last-of-type:not(.active) { border-bottom: none; }
    .footer-icon-btn {
        padding: 10px 4px; background: transparent; border: none; border-radius: 0;
        border-bottom: 1px solid var(--border); font-size: 13px;
    }
    .footer-icon-btn:last-child { border-bottom: none; }
    .footer-icon-btn i { width: 24px; height: 24px; line-height: 24px; font-size: 11px; }
    .footer-hours-card { max-width: none; background: transparent; border: none; padding: 6px 4px; }
    .footer-hours-title { display: none; }                       /* the row above already says it */
    .footer-hours-row { font-size: 13px; }

    /* Newsletter card */
    .footer-subscribe-col {
        padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    }
    .footer-subscribe-icon { display: none; }
    .footer-subscribe-col h5 { margin: 0 0 4px; font-size: 14px; }
    .footer-subscribe-col .footer-tagline { margin-bottom: 10px; }
    .footer-subscribe-form { justify-content: flex-start; }
    .footer-subscribe-input { height: 44px; font-size: 16px; }

    /* Bottom: payment + delivery in one card (icons fill each row), copyright line last */
    footer hr { display: none; }
    .footer-bottom-row { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 14px; }
    .footer-bottom-row .footer-pay-delivery {
        order: 1; flex-direction: column; align-items: stretch; gap: 14px; width: 100%; padding: 14px 16px 16px;
        background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: 16px;
    }
    .footer-pay-block { text-align: left; }
    .footer-pay-block + .footer-pay-block { padding-top: 14px; border-top: 1px solid var(--border); }
    .footer-pay-block h5 { justify-content: flex-start; margin: 0 0 10px; font-size: 12px; letter-spacing: .6px; }
    .footer-pay-icons { justify-content: flex-start; gap: 8px; }
    .footer-pay-icon { height: 36px; padding: 0 12px 0 5px; font-size: 12.5px; }
    footer .footer-powered {
        order: 2; flex-direction: row; justify-content: center; align-items: baseline; gap: 6px;
        white-space: normal; text-align: center; opacity: .8;
    }
    .footer-powered-brand { font-size: 13px; }
    .footer-powered-sub { font-size: 11.5px; }

    /* Brands page */
    .brand-toolbar { position: static; flex-direction: column; align-items: stretch; }
    .brand-toolbar-pills { justify-content: flex-start; }
    .brand-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

    /* Forms: comfortable tap targets, no iOS zoom on focus */
    .form-control, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select { font-size: 16px; }
    .table-responsive, .table { display: block; overflow-x: auto; }

    /* ---- Account pages: toolbar = back + section name; nav = left rail (icon over label); content right ---- */
    .acc-page-toolbar { margin: 14px 0 12px; padding: 10px 12px; gap: 12px; }
    .acc-page-toolbar .acc-page-nav-wrap { display: none; }        /* its nav moved into .m-acc-layout */
    .m-acc-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; color: #fff; font-style: normal;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m-acc-layout { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; }
    .m-acc-layout > .acc-page-nav {
        flex: 0 0 74px; flex-direction: column; justify-content: flex-start; gap: 4px; overflow: visible;
        position: sticky; top: 10px; padding: 6px;
        background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm);
    }
    .m-acc-layout .acc-page-link {
        flex-direction: column; justify-content: center; gap: 4px; width: 100%; padding: 9px 2px;
        border: 1.5px solid transparent; border-radius: 12px; background: transparent; color: var(--text-secondary);
        white-space: normal; text-align: center; font-size: 10px; font-weight: 600; line-height: 1.2; font-style: normal;
    }
    .m-acc-layout .acc-page-link i { font-size: 18px; }
    .m-acc-layout .acc-page-link:hover { background: transparent; color: var(--accent); }
    /* Current section: outline instead of a filled background */
    .m-acc-layout .acc-page-link.active { background: transparent; color: var(--accent); border-color: var(--accent); }
    /* "Обліковий запис" — the main entry, accent-coloured, set off from the sections below */
    .m-acc-layout .m-acc-home { color: var(--accent); font-weight: 700; margin-bottom: 4px; }
    .m-acc-layout .m-acc-home::after {
        content: ''; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 1px; background: var(--border);
    }
    .m-acc-layout .m-acc-home { position: relative; }
    /* no left rail on phones: the sections are tiles on /my-account/, the toolbar's ‹ leads back there */
    .m-acc-layout > .acc-page-nav { display: none !important; }
    .m-acc-layout > .row { flex: 1; min-width: 0; margin: 0; }
    .m-acc-layout > .row > #content {
        width: 100%; padding: 14px 12px; min-height: 0;
        background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
    }
    .m-acc-layout #content h1 { display: none; }                   /* the toolbar already names the section */
    .m-acc-layout #content legend { font-size: 15px; }
    .m-acc-layout .form-horizontal .form-group { margin-left: 0; margin-right: 0; }
    .m-acc-layout .form-horizontal .form-group > [class*="col-"] { padding-left: 0; padding-right: 0; }
    .m-acc-layout .buttons .pull-left, .m-acc-layout .buttons .pull-right { float: none !important; }
    .m-acc-layout .buttons .btn { width: 100%; margin-top: 8px; }

    /* ---- Account hub (/my-account/): on phones just a profile overview — the sections
       are one tap away in the tab bar's "Акаунт" sheet, so no rail and no loaded section here ---- */
    .acc-hub-toolbar { margin: 14px 0 12px; padding: 10px 12px; gap: 12px; }
    .acc-hub-toolbar-icon { width: 36px; height: 36px; line-height: 36px; font-size: 16px; }
    .acc-hub-toolbar-title { font-size: 16px; }
    .acc-hub-toolbar-pill { display: none; }
    #account-account .acc-hub-body { display: none; }
    #account-account .acc-hub-toolbar { display: none; }   /* its title lives in the hero card's top strip */

    /* hero card: blue gradient, "Обліковий запис" strip, swipeable slides (greeting · bonus), dots */
    .acc-hero {
        display: block; margin: 14px 0 20px; overflow: hidden; border-radius: 20px; color: #fff;
        background: linear-gradient(135deg, var(--accent), var(--accent-dark));
        box-shadow: 0 14px 30px -16px rgba(0, 60, 140, 0.65);
    }
    .acc-hero-top {
        display: flex; align-items: center; gap: 10px; padding: 12px 16px 10px;
        border-bottom: 1px solid rgba(255,255,255,0.14); font-style: normal;
    }
    .acc-hero-top-icon {
        flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.16); font-size: 15px;
    }
    .acc-hero-top-title { font-size: 15px; font-weight: 700; }
    .acc-hero-track {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
    }
    .acc-hero-track::-webkit-scrollbar { display: none; }
    .acc-hero-slide {
        flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; gap: 12px;
        min-height: 84px; padding: 14px 16px 6px; color: #fff; text-decoration: none; font-style: normal;
    }
    .acc-hero-slide:hover, .acc-hero-slide:focus, .acc-hero-slide:active { color: #fff; text-decoration: none; }
    .acc-hero-avatar {
        flex: 0 0 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.2); border: 2px solid rgba(255,255,255,0.35);
        font-size: 22px; font-weight: 800;
    }
    .acc-hero-avatar.is-star { color: #ffd54f; font-size: 22px; }
    .acc-hero-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .acc-hero-text b { font-size: 15px; }
    .acc-hero-text .acc-hero-name { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .acc-hero-text small { font-size: 12px; line-height: 1.35; color: rgba(255,255,255,0.82); }
    .acc-hero-pill {
        flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 2px;
        min-width: 38px; height: 38px; padding: 0 12px; border-radius: 50px; white-space: nowrap;
        background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.3);
        font-size: 12px; color: rgba(255,255,255,0.9); text-decoration: none;
    }
    a.acc-hero-pill { padding: 0; color: #fff; }
    a.acc-hero-pill:hover, a.acc-hero-pill:active { color: #fff; background: rgba(255,255,255,0.28); text-decoration: none; }
    .acc-hero-pill b { font-size: 16px; color: #fff; margin-right: 2px; }
    .acc-hero-dots { display: flex; justify-content: center; gap: 6px; padding: 4px 0 12px; }
    .acc-hero-dot { width: 7px; height: 7px; padding: 0; border: none; border-radius: 4px; background: rgba(255,255,255,0.4); transition: width .2s, background .2s; }
    .acc-hero-dot.active { width: 20px; background: #fff; }

    /* sections: one card — blue title strip, then bento tiles in 2 columns (icon centred, name, hint
       under it); the first tile and "Вийти" span the full width */
    .acc-sections {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
        margin-bottom: 20px; padding: 0 10px 10px; overflow: hidden;
        background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm);
    }
    .acc-sections-title {
        grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px;
        margin: 0 -10px 2px; padding: 13px 16px;
        background: linear-gradient(120deg, var(--accent), var(--accent-dark)); color: #fff;
        font-size: 15.5px; font-weight: 700;
    }
    .acc-sec-row {
        min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
        min-height: 118px; padding: 14px 8px 12px; text-align: center;
        border: 1px solid var(--border); border-radius: 16px; background: var(--bg);
        text-decoration: none; color: var(--text); font-style: normal;
        transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
    }
    .acc-sec-row:hover, .acc-sec-row:active { background: var(--accent-light); border-color: var(--accent); text-decoration: none; color: var(--text); }
    .acc-sec-row:active { transform: scale(.97); }
    .acc-sec-icon {
        flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
        background: var(--surface); color: var(--accent); font-size: 19px; box-shadow: 0 6px 14px -8px rgba(0,60,140,.45);
    }
    .acc-sec-text { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
    .acc-sec-text b { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
    .acc-sec-text span { font-size: 11.5px; line-height: 1.3; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .acc-sec-arrow { display: none; }
    .acc-sections-title + .acc-sec-row { grid-column: 1 / -1; min-height: 0; flex-direction: row; justify-content: flex-start; gap: 12px; padding: 12px 14px; text-align: left; background: var(--accent-light); border-color: transparent; }
    .acc-sections-title + .acc-sec-row .acc-sec-icon { background: var(--accent); color: #fff; }
    .acc-sections-title + .acc-sec-row .acc-sec-text { align-items: flex-start; }
    .acc-sec-logout { grid-column: 1 / -1; min-height: 0; flex-direction: row; gap: 10px; padding: 10px 14px; background: #fdecec; border-color: transparent; }
    .acc-sec-logout:hover, .acc-sec-logout:active { background: #fbd9d9; border-color: #d93025; }
    .acc-sec-logout .acc-sec-icon { width: 36px; height: 36px; font-size: 15px; background: #fff; color: #d93025; box-shadow: none; }
    .acc-sec-logout .acc-sec-text { width: auto; align-items: flex-start; text-align: left; }
    .acc-sec-logout b { color: #d93025; }

    /* ---- Search sheet from the tab bar (reuses the quick-view .qv-overlay/.qv-dialog bottom sheet) ---- */
    .ms-dialog { display: flex; flex-direction: column; height: 100%; }
    .ms-head { padding: 18px 16px 12px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
    .ms-title { font-size: 18px; font-weight: 800; color: var(--text); margin: 4px 50px 12px 2px; font-style: normal; }
    .ms-field {
        display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px;
        border: 1.5px solid var(--border); border-radius: 50px; background: var(--bg);
    }
    .ms-field:focus-within { border-color: var(--accent); background: var(--surface); }
    .ms-field i { color: var(--accent); font-size: 16px; }
    .ms-input { flex: 1; min-width: 0; border: none; background: transparent; font-size: 16px; color: var(--text); outline: none; }
    .ms-input::-webkit-search-cancel-button { -webkit-appearance: none; }
    .ms-results { flex: 1; overflow-y: auto; padding: 8px 16px 20px; }
    .ms-hint { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 10px; color: var(--text-light); font-size: 14px; font-style: normal; }
    .ms-hint i { font-size: 30px; opacity: .5; }
    .ms-list { display: flex; flex-direction: column; }
    .ms-item {
        display: flex; align-items: center; gap: 12px; padding: 10px 2px;
        border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none;
    }
    .ms-item:hover, .ms-item:active { text-decoration: none; background: var(--accent-light); }
    .ms-item-img {
        flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: center;
        background: var(--bg); border-radius: 10px; overflow: hidden;
    }
    .ms-item-img img { max-width: 90%; max-height: 90%; object-fit: contain; }
    .ms-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .ms-item-name {
        font-size: 13px; font-weight: 600; line-height: 1.35; font-style: normal;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .ms-item-price { font-size: 14px; font-weight: 800; color: var(--accent); font-style: normal; }
    .ms-item > .fa { color: var(--text-light); }
    .ms-all {
        display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 14px;
        border-radius: 50px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 700;
    }
    .ms-all:hover, .ms-all:active { color: #fff; text-decoration: none; background: var(--accent-dark); }

    /* ---- Bottom tab bar ---- */
    .m-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: rgba(255,255,255,0.98); /* no backdrop blur: the tab bar is fixed, blur re-renders on every scroll frame */
        border-top: 1px solid var(--border); box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
    }
    .m-tabbar { height: var(--m-tb); align-items: center; }      /* fixed height: the sheets stop right above it */
    .m-tab {
        position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 0; border: none; background: transparent; color: var(--text-secondary);
        font-size: 10.5px; font-weight: 600; font-style: normal; text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    /* Each tab icon sits in a round accent-tinted badge; the active tab's badge is solid accent */
    .m-tab i {
        width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: var(--accent-light); color: var(--accent); font-size: 16px; transition: background .2s, color .2s;
    }
    .m-tab.active, .m-tab:active { color: var(--accent); text-decoration: none; }
    .m-tab.active i, .m-tab:active i { background: var(--accent); color: #fff; }
    .m-tab-badge {
        position: absolute; top: -4px; left: 50%; margin-left: 6px;
        min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
        background: var(--accent); color: #fff; font-size: 10px; line-height: 17px; text-align: center;
    }
    .m-tab-badge:empty, .m-tab-badge[data-zero] { display: none; }
}

/* Touch devices: no hover, so the card's quick-view button is always shown (icon only) */
@media (hover: none) {
    .product-thumb .image .pt-choose { opacity: 1; transform: none; width: 34px; padding: 0; justify-content: center; }
    .product-thumb .image .pt-choose span { display: none; }
}

/* ================================================================
   LITE MODE (html.perf-lite, set by the script in common/header.twig on weak phones):
   what costs the GPU/CPU per frame is off (shadows, blur, card entrance / shine / pop,
   blinking timers), but the UI still MOVES: every transition stays, just short (.12s) —
   switches, sheets, toasts and slides glide instead of jumping (jumping read as a slideshow).
   ================================================================ */
html.perf-lite *, html.perf-lite *::before, html.perf-lite *::after {
    transition-duration: .12s !important; transition-delay: 0s !important;
    animation-delay: 0s !important;
    scroll-behavior: auto !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: none !important; text-shadow: none !important;
    will-change: auto !important;
}
/* the expensive / endless animations: product cards (entrance, pop, sheen), timers, badges */
html.perf-lite .product-thumb, html.perf-lite .product-thumb *, html.perf-lite .product-thumb *::before,
html.perf-lite .product-thumb *::after, html.perf-lite .pps-timer i, html.perf-lite .pc-timer i,
html.perf-lite #notify-count, html.perf-lite .toast-count { animation: none !important; }
html.perf-lite .product-thumb .image img { transform: none !important; }   /* no photo zoom */
/* the one card animation kept in lite mode: the "Купити" spinner (a single tiny rotating ring) */
html.perf-lite .pt-buy.is-loading .pt-bf-spin { animation: ptSpin .6s linear infinite !important; }
html.perf-lite body { background-image: none !important; }          /* the cart / $ / bag pattern */
html.perf-lite .product-thumb { border: 1px solid var(--border); }    /* cards keep an outline instead of the shadow */
/* sections below the first screen are laid out / painted only when scrolled near */
html.perf-lite .home-brands, html.perf-lite .home-cat-cards, html.perf-lite footer,
html.perf-lite .product-related-section, html.perf-lite .product-feedback-section {
    content-visibility: auto; contain-intrinsic-size: auto 600px;
}

/* ================================================================
   CHECKOUT ON PHONES: the steps are a slider of cards (checkout.twig moves the track to the
   step opened last); inside a step the fields run in two columns — 1, 2 on the left, 3, 4 on
   the right — and "Продовжити" spans both, under them.
   ================================================================ */
@media (max-width: 767px) {
    .checkout-content-wrap.cs-slider { overflow: hidden; transition: height .35s ease; }
    .cs-slider #accordion {
        display: flex; align-items: flex-start; margin: 0;
        transition: transform .4s cubic-bezier(.22,1,.36,1);
    }
    .cs-slider #accordion > .checkout-step-card { flex: 0 0 100%; min-width: 0; margin: 0 !important; }
    /* steps not reached yet keep an empty card in their slot */
    .cs-slider .checkout-step-card .panel-collapse.collapse:not(.in) { display: block; height: 0; overflow: hidden; }

    /* two columns: fields fill the left column first (1, 2), then the right (3, 4) */
    .checkout-form fieldset { columns: 2; column-gap: 10px; }
    .checkout-form fieldset > legend { column-span: all; }
    .checkout-form fieldset > .form-group { break-inside: avoid; display: block; width: 100%; }
    .checkout-form .control-label { font-size: 12px; }
    .checkout-form .form-control { font-size: 14px; padding-left: 8px; padding-right: 8px; }
    .checkout-form select.form-control { padding-top: 0; padding-bottom: 0; line-height: normal; text-overflow: ellipsis; }   /* narrow column: keep the chosen option readable */

    /* "Продовжити" / "Далі": full width under both columns */
    .checkout-step-card .buttons { clear: both; }
    .checkout-step-card .buttons .pull-right, .checkout-step-card .buttons .pull-left { float: none !important; width: 100%; }
    .checkout-step-card .buttons .btn { width: 100%; min-height: 48px; border-radius: 50px; font-size: 15px; font-weight: 700; }
}

/* guest step 1 split into sub-steps on phones (checkout.twig): 1 = contact details, 1.2 = address */
@media (max-width: 767px) {
    .checkout-form.cs-sub-1 #address, .checkout-form.cs-sub-1 .checkout-shipping-checkbox,
    .checkout-form.cs-sub-1 > .buttons, .checkout-form.cs-sub-1 #cs-sub-back { display: none !important; }
    .checkout-form.cs-sub-2 #account, .checkout-form.cs-sub-2 .cs-sub-nav-1 { display: none !important; }
    .cs-sub-nav .btn { width: 100%; min-height: 48px; border-radius: 50px; font-size: 15px; font-weight: 700; }
    .cs-sub-back { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--accent); }
    /* the caption under the step circles repeated the card's own header */
    .cs-caption { display: none !important; }
}

/* ===== Home on phones: compact catalog and brand strip =====
   The home 2×2 product page and the brand chips are a quick glance, not a full card:
   secondary lines (sold count, stars/views, "Обрати") stay on the category pages. */
@media (max-width: 767px) {
    #catalog-section .product-thumb .image,
    #catalog-section .product-thumb.pt-enhanced .image { height: 112px; padding: 8px; }
    #catalog-section .pt-sold,
    #catalog-section .pt-rating,
    #catalog-section .pt-choose,
    #catalog-section .pc-timer { display: none !important; }
    #catalog-section .product-thumb.pt-enhanced .caption { padding: 0 8px 4px; }
    #catalog-section .product-thumb.pt-enhanced h4 { font-size: 12.5px; line-height: 1.35; min-height: 2.7em; margin: 4px 0; }
    #catalog-section .pc-stock { margin: 0 0 4px; padding: 2px 6px; font-size: 10px; }
    #catalog-section .product-thumb.pt-enhanced .price,
    #catalog-section .product-thumb .price-new { font-size: 14.5px; margin: 2px 0 0; }
    #catalog-section .product-thumb.pt-enhanced .caption { min-height: 0 !important; }
    #catalog-section .product-thumb.pt-enhanced .price { margin: 2px 0 0 !important; min-height: 0 !important; height: auto !important; line-height: 1.25 !important; padding: 0 !important; }
    #catalog-section .product-thumb.pt-enhanced .button-group { padding: 0 8px 8px; }
    #catalog-section .pt-buy { height: 34px; }
    #catalog-section .pt-buy-btn { font-size: 12.5px !important; }
    #catalog-section .pt-buy-btn i { font-size: 13px; }
    #catalog-section .pt-action { width: 26px !important; height: 26px; line-height: 26px !important; font-size: 11px; }
    #catalog-section .pc-badge { font-size: 9.5px; padding: 1px 6px; }

    /* Brands: small chips, two and a bit per screen */
    .home-brands { padding: 0 12px 14px; }
    .hb-track { gap: 8px; }
    .hb-card { flex-basis: 158px; gap: 8px; padding: 6px 10px 6px 6px; border-width: 1px; border-radius: 12px; }
    .hb-img { flex-basis: 40px; height: 40px; border-radius: 8px; }
    .hb-name { font-size: 13px; font-weight: 700; }
    .hb-desc { font-size: 10.5px; -webkit-line-clamp: 1; line-clamp: 1; }
    .hb-more { display: none; }
}

/* Cart page: the scroll buttons sit above the fixed "Разом · Оформити" bar */
@media (max-width: 767px) {
    body:has(#checkout-cart .cart-summary) .scroll-fab { bottom: calc(var(--m-tb) + 84px); }
}

/* ===== Home brands on phones: round outlined cards, ◀ ▶ at the sides, dots under =====
   three per screen, logo in an accent-outlined circle, name under it */
@media (max-width: 767px) {
    .home-brands { position: relative; padding: 0 40px 16px; }
    .hb-arrow { display: flex; top: 36px; width: 32px; height: 32px; font-size: 16px; }
    .hb-arrow-prev { left: 6px; }
    .hb-arrow-next { right: 6px; }
    .hb-track { gap: 10px; scroll-snap-type: x mandatory; padding: 2px 0; }
    .hb-card {
        flex: 0 0 calc((100% - 20px) / 3); flex-direction: column; align-items: center; gap: 6px;
        padding: 0; border: none !important; border-radius: 0; background: none !important;
        text-align: center; scroll-snap-align: start; box-shadow: none !important;
    }
    .hb-img {
        flex: 0 0 auto; width: 70px; height: 70px; padding: 4px; border-radius: 50%;
        border: 2px solid var(--accent); background: var(--surface);
        transition: background .15s, transform .15s;
    }
    .hb-img img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; padding: 0; }
    .hb-img b { font-size: 22px; }
    .hb-info { align-items: center; width: 100%; }
    .hb-name { font-size: 12.5px; font-weight: 700; max-width: 100%; color: var(--text); }
    .hb-desc, .hb-more { display: none; }
    .hb-card:hover .hb-name, .hb-card:active .hb-name { color: var(--accent); }
    .hb-card:active .hb-img { background: var(--accent-light); transform: scale(.95); }
    .hb-card:hover .hb-img { border-color: var(--accent); }
}

/* Home categories card + "Чому саме ми" on phones */
@media (max-width: 767px) {
    #home-cat-cards.hcx { padding: 4px 12px 18px; }
    .hcx-card { border-radius: 20px; }
    .hcx-slide { height: 300px; }
    .hcx-pills { padding: 12px; gap: 7px; }
    .hcx-pill { height: 36px; font-size: 12.5px; }
    .home-why { padding: 0 12px 20px; }
    .hw-title { font-size: 16px; }
    .hw-card { flex-basis: 100%; justify-content: center; }
}
@media (max-width: 767px) {
    .hw-body { gap: 8px; }
    .hw-body .hw-arrow { width: 34px; height: 34px; font-size: 18px; }
    .hw-card { padding: 10px 14px 10px 10px; }
}

/* ===== Phones: top menu as bento tiles in accent shades; category arrows beside the card ===== */
@media (max-width: 767px) {
    .home-topnav-inner {
        display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 64px;
        gap: 8px; padding: 0 !important; overflow: visible !important; background: none !important;
        border: none !important; box-shadow: none !important;
    }
    .home-topnav-pill {
        display: flex !important; flex-direction: column; align-items: flex-start; justify-content: space-between;
        gap: 4px; min-width: 0; height: auto; margin: 0; padding: 9px 10px !important; border: none !important;
        border-radius: 16px !important; background: var(--accent-light) !important; color: var(--accent) !important;
        font-size: 11.5px !important; font-weight: 700; line-height: 1.15; white-space: normal !important; text-decoration: none;
    }
    .home-topnav-pill i { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); color: var(--accent) !important; font-size: 13px; }
    /* bento layout: Акції big (2×2), Бренди & Конфігуратор wide, then small tiles, Контакти wide */
    .home-topnav-pill:nth-child(1) { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, var(--accent), var(--accent-dark)) !important; color: #fff !important; font-size: 15px !important; padding: 12px !important; }
    .home-topnav-pill:nth-child(1) i { width: 40px; height: 40px; font-size: 18px; background: rgba(255,255,255,.2); color: #fff !important; }
    .home-topnav-pill:nth-child(2), .home-topnav-pill:nth-child(3) { grid-column: span 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; }
    .home-topnav-pill:nth-child(3) { background: var(--accent) !important; color: #fff !important; }
    .home-topnav-pill:nth-child(3) i { background: rgba(255,255,255,.2); color: #fff !important; }
    .home-topnav-pill:nth-child(5), .home-topnav-pill:nth-child(7) { background: var(--surface) !important; border: 1.5px solid var(--accent-light) !important; }
    .home-topnav-pill:nth-child(5) i, .home-topnav-pill:nth-child(7) i { background: var(--accent-light); }
    .home-topnav-pill:nth-child(8) { grid-column: span 4; flex-direction: row; align-items: center; justify-content: center; gap: 8px; background: var(--accent-dark) !important; color: #fff !important; }
    .home-topnav-pill:nth-child(8) i { background: rgba(255,255,255,.2); color: #fff !important; }
    .home-topnav-pill:active { transform: scale(.96); }


    .hcx-wrap { gap: 6px; }
    .hcx-wrap .hcx-arrow { width: 32px; height: 32px; font-size: 18px; }
    #home-cat-cards.hcx { padding: 4px 8px 18px; }
}

/* phones: the bento keeps only Акції / Бренди / Конфігуратор ПК */
@media (max-width: 767px) {
    .home-topnav-pill:nth-child(n+4) { display: none !important; }
}

/* Акції: 2 cards per view, smaller arrows on phones */
@media (max-width: 767px) {
    .sps-page { padding-top: 10px; }
    .sps-toolbar { padding: 6px 18px 6px 6px; margin-bottom: 12px; }
    .sps-toolbar-icon { width: 36px; height: 36px; font-size: 16px; }
    .sps-toolbar-title h1 { font-size: 17px; }
    .sps-head b { font-size: 15px; }
    .sps-head-all { height: 30px; padding: 0 12px; font-size: 12px; }
    .sps-body { gap: 6px; }
    .sps-arrow { width: 30px; height: 30px; font-size: 17px; }
    .sps-track { gap: 10px; }
    .sps-item { flex-basis: calc((100% - 10px) / 2); }
}
@media (max-width: 767px) {
    .sps-soon { padding: 20px 14px 18px; border-radius: 20px; }
    .sps-soon h2 { font-size: 18px; }
    .sps-soon p { font-size: 13px; }
    .sps-timer { gap: 6px; }
    .sps-timer > div { width: 62px; border-radius: 14px; }
    .sps-timer b { font-size: 22px; }
}
@media (max-width: 767px) {
    .hb-head { padding: 2px 12px 10px; gap: 8px; }
    .hb-head-icon { width: 34px; height: 34px; font-size: 14px; }
    .hb-head-text h3 { font-size: 16px; }
    .hb-head-text small { font-size: 11px; }
}
/* Home catalog on wide phones / small tablets: 3 whole columns instead of 2 stretched ones */
@media (min-width: 470px) and (max-width: 767px) {
    .cs-products-grid.product-grid { grid-auto-columns: calc((100% - 16px) / 3); }
}
@media (max-width: 767px) {
    .auth-modal { padding: 0 0 18px; }
    .auth-modal-head { padding: 12px 12px 12px 14px; margin-bottom: 12px; }
    .auth-modal-head .auth-modal-close { position: static; }
    .auth-modal-logo { width: 40px; height: 40px; font-size: 16px; }
    .auth-modal-title b { font-size: 17px; }
    .auth-modal-tabs { margin: 0 14px 14px; }
    .auth-modal-track > .auth-modal-pane { padding: 0 14px; }
}

/* ===== Phone "Каталог" sheet: toolbar (icon · title + counts · close) + search, A→Я category
   accordions (icon · name · short list · count · ☆), bento pills inside with inner scroll ===== */
@media (max-width: 767px) {
    .catalog-mega { display: flex; flex-direction: column; }
    .cmm-mobile-header {
        display: grid; grid-template-columns: 42px minmax(0, 1fr) 38px; align-items: center; gap: 10px 12px;
        padding: 14px 14px 12px; border-bottom: 1px solid var(--border); background: var(--surface);
    }
    .cmm-mobile-header-icon {
        display: flex !important; width: 42px; height: 42px; border-radius: 50%; align-items: center; justify-content: center;
        background: var(--accent); color: #fff !important; font-size: 18px;
    }
    .cmm-mobile-header-title { font-size: 18px; font-weight: 800; color: var(--text); }
    .cmm-mh-sub { font-size: 12px; font-weight: 500; color: var(--text-secondary); opacity: 1; }
    .cmm-mobile-header .cmm-mobile-header-close { position: static; width: 38px; height: 38px; }
    .cmm-search {
        grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; height: 44px; margin: 0; padding: 0 14px;
        border: 1.5px solid var(--border); border-radius: 50px; background: var(--bg);
        transition: border-color .15s;
    }
    .cmm-search:focus-within { border-color: var(--accent); background: var(--surface); }
    .cmm-search .fa { color: var(--accent); }
    .cmm-search-input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; color: var(--text); font-size: 16px; }
    .cmm-search-input::placeholder { color: var(--text-secondary); font-size: 14px; }
    .cmm-search-input::-webkit-search-cancel-button { display: none; }

    .cmm-mcards { gap: 8px; padding: 12px; }
    .cmm-card { border-radius: 18px; transition: border-color .15s, box-shadow .15s; }
    .cmm-card.open { border-color: var(--accent); box-shadow: 0 10px 24px -18px rgba(0,60,160,.55); }
    .cmm-card.is-fav { border-color: var(--accent); }
    .cmm-card-top { display: flex; align-items: center; }
    .cmm-card .hcc-card-head { flex: 1; min-width: 0; gap: 10px; padding: 11px 6px 11px 11px; background: transparent; }
    .cmm-card .hcc-icon { flex-basis: 40px; height: 40px; border-radius: 50%; font-size: 16px; }
    .cmm-card .hcc-name { font-size: 14.5px; font-weight: 800; }
    .cmm-card .hcc-name small { font-size: 11.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cmm-count {
        flex-shrink: 0; min-width: 30px; height: 24px; padding: 0 9px; border-radius: 50px;
        display: inline-flex; align-items: center; justify-content: center;
        background: var(--accent-light); color: var(--accent); font-size: 11.5px; font-weight: 800;
    }
    .cmm-card .hcc-caret { font-size: 17px; }
    .cmm-fav {
        flex-shrink: 0; width: 38px; height: 38px; margin-right: 8px; border: none; border-radius: 50%;
        background: transparent; color: var(--text-secondary); font-size: 17px; cursor: pointer;
    }
    .cmm-fav[aria-pressed="true"] { color: var(--accent); background: var(--accent-light); }

    .cmm-card .hcc-body { padding: 10px 12px 12px; }
    .cmm-bento {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
        max-height: 264px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 2px;
    }
    .cmm-pill {
        display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 6px 6px 12px;
        border-radius: 14px; background: var(--accent-light); color: var(--text); font-size: 12.5px; font-weight: 700; line-height: 1.2;
        text-decoration: none;
    }
    .cmm-pill span { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; hyphens: auto; }
    .cmm-pill b { flex-shrink: 0; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 10.5px; }
    .cmm-pill.is-l3 { background: var(--surface); border: 1.5px dashed var(--border); font-weight: 600; }
    .cmm-pill.is-l3 b { background: var(--accent-light); color: var(--accent); }
    .cmm-pill:active, .cmm-pill:hover { text-decoration: none; color: var(--accent); }
    .cmm-card .hcc-all { height: 42px; margin-top: 10px; font-size: 13.5px; }

    .cmm-nothing { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 16px; text-align: center; color: var(--text-secondary); }
    .cmm-nothing[hidden] { display: none; }
    .cmm-nothing > .fa { font-size: 26px; color: var(--accent); }
    .cmm-nothing-go { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 50px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; }
    .cmm-nothing-go:hover, .cmm-nothing-go:active { color: #fff; text-decoration: none; }
}

/* ===== Home (phone): "Добірки товарів" — toolbar card with tab pills, cards slider under it ===== */
@media (max-width: 767px) {
    .home-show { display: block; padding: 0 12px 20px; }
    .hs-toolbar {
        background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
        padding: 10px; margin-bottom: 10px; box-shadow: 0 10px 24px -20px rgba(0,40,110,.45);
    }
    .hs-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 10px; }
    .hs-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; }
    .hs-title { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
    .hs-title b { font-size: 16px; font-weight: 800; color: var(--text); }
    .hs-title small { font-size: 11.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .hs-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
    .hs-tabs::-webkit-scrollbar { display: none; }
    .hs-tab:first-child { margin-left: auto; }
    .hs-tab:last-child { margin-right: auto; }
    .hs-tab {
        flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px;
        border: 1.5px solid var(--border); border-radius: 50px; background: var(--surface); color: var(--text);
        font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
    }
    .hs-tab .fa { color: var(--accent); }
    .hs-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    .hs-tab.active .fa { color: #fff; }
    .hs-body { display: flex; align-items: center; gap: 6px; }
    .hs-panels { flex: 1; min-width: 0; }
    .hs-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 2px 1px 6px; }
    .hs-track[hidden] { display: none; }
    .hs-track::-webkit-scrollbar { display: none; }
    .hs-item { flex: 0 0 calc((100% - 10px) / 2); min-width: 0; scroll-snap-align: start; display: flex; }
    .hs-item .product-thumb { width: 100%; margin: 0; }
    .hs-arrow {
        width: 30px; height: 30px; flex-shrink: 0; border: none; border-radius: 50%; background: var(--accent); color: #fff;
        font-size: 17px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .15s, transform .15s;
    }
    .hs-arrow:active { transform: scale(.92); }
    .hs-arrow:disabled { opacity: .35; cursor: default; }
    .hs-dots { display: flex; justify-content: center; gap: 6px; padding-top: 8px; }
    .hs-dots:empty { display: none; }
    .hs-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px; background: var(--border-dark); transition: width .25s, background .25s; }
    .hs-dot.active { width: 22px; background: var(--accent); }
}

/* Home catalog (phones): lower, tighter cards — photo 92px, 2-line name, small stock line, 30px button */
@media (max-width: 767px) {
    #catalog-section .product-thumb .image,
    #catalog-section .product-thumb.pt-enhanced .image { height: 92px; padding: 6px; }
    #catalog-section .product-thumb.pt-enhanced h4 { font-size: 12px; line-height: 1.3; min-height: 2.6em; margin: 3px 0 2px; }
    #catalog-section .pc-stock { margin: 0 0 2px; padding: 1px 6px; font-size: 9.5px; }
    #catalog-section .product-thumb.pt-enhanced .price,
    #catalog-section .product-thumb .price-new { font-size: 13.5px; }
    #catalog-section .product-thumb.pt-enhanced .caption { padding: 0 7px 2px; }
    #catalog-section .product-thumb.pt-enhanced .button-group { padding: 0 7px 7px; }
    #catalog-section .pt-buy { height: 30px; }
    #catalog-section .pt-buy-btn { font-size: 12px !important; }
    #catalog-section .pt-action { width: 24px !important; height: 24px; line-height: 24px !important; }
    #catalog-section .pc-badge { font-size: 9px; padding: 1px 5px; }
    .cs-page-count b { font-weight: 800; }
}

/* Phones (Realme C71 360px / Redmi Note 15 393px) */
@media (max-width: 767px) {
    /* catalog toolbar: the product count is already on the right — keep only categories in the meta line */
    #catalog-section .catalog-section-meta .cs-meta-item:first-child { display: none; }

    /* picks: tab pills fit one row, arrows float over the card edges so cards get the full width */
    .hs-tabs { gap: 4px; }
    .hs-tab { height: 32px; padding: 0 10px; gap: 5px; font-size: 12px; }
    .hs-body { position: relative; display: block; }
    .hs-arrow { position: absolute; top: 42%; z-index: 3; margin-top: -15px; box-shadow: 0 6px 14px -6px rgba(0,40,110,.55); }
    .hs-arrow.is-prev { left: 2px; }
    .hs-arrow.is-next { right: 2px; }
    .hs-arrow:disabled { opacity: 0; pointer-events: none; }
    .hs-track { gap: 8px; }
    .hs-item { flex-basis: calc((100% - 8px) / 2); }

    /* picks cards: the same compact card as the home catalog */
    #home-show .pt-sold, #home-show .pt-rating, #home-show .pt-choose, #home-show .pc-timer { display: none !important; }
    #home-show .product-thumb .image, #home-show .product-thumb.pt-enhanced .image { height: 92px; padding: 6px; }
    #home-show .product-thumb.pt-enhanced .caption { padding: 0 7px 2px; min-height: 0 !important; }
    #home-show .product-thumb.pt-enhanced h4 { font-size: 12px; line-height: 1.3; min-height: 2.6em; margin: 3px 0 2px; }
    #home-show .pc-stock { margin: 0 0 2px; padding: 1px 6px; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }
    #home-show .product-thumb.pt-enhanced .price, #home-show .product-thumb .price-new { font-size: 13.5px; margin: 2px 0 0 !important; min-height: 0 !important; height: auto !important; line-height: 1.25 !important; padding: 0 !important; }
    #home-show .product-thumb.pt-enhanced .button-group { padding: 0 7px 7px; }
    #home-show .pt-buy { height: 30px; }
    #home-show .pt-buy-btn { font-size: 12px !important; }
    #home-show .pt-action { width: 24px !important; height: 24px; line-height: 24px !important; font-size: 11px; }
    #home-show .pc-badge { font-size: 9px; padding: 1px 5px; }
    #catalog-section .pc-stock { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; }
}

/* ===== Footer brand block: name + tagline centred; below — contacts slider (left) + socials (right) ===== */
.footer-brand { align-items: stretch !important; text-align: center; }
.footer-brand-head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 12px; }
.footer-brand-head .footer-brand-logo { justify-content: center !important; margin-bottom: 4px; }
.footer-brand-head .footer-tagline { margin: 0; text-align: center; }
.footer-brand-row { display: flex; align-items: stretch; gap: 10px; }
.footer-contacts { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.footer-contacts-track {
    flex: 1; min-width: 0; height: 56px; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain;
    border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
}
.footer-contacts-track::-webkit-scrollbar { display: none; }
.footer-contact-plate {
    display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 12px 0 8px; scroll-snap-align: start;
    color: var(--text); text-decoration: none; text-align: left;
}
.footer-contact-plate:hover, .footer-contact-plate:focus { color: var(--accent); text-decoration: none; }
.fcp-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.fcp-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fcp-text small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); }
.fcp-text b { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.footer-contacts-dots { display: flex; flex-direction: column; gap: 4px; }
.footer-contacts-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--border-dark); transition: height .25s, background .25s; }
.footer-contacts-dots i.active { height: 16px; background: var(--accent); }
.footer-brand-row .footer-social {
    flex-shrink: 0; display: grid; grid-template-columns: repeat(2, 36px); gap: 6px; margin: 0 !important;
    padding: 5px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border);
}
.footer-brand-row .footer-social-btn { width: 36px !important; height: 36px !important; line-height: 36px !important; margin: 0; }
@media (min-width: 768px) {
    .footer-brand-row .footer-social { grid-template-columns: repeat(4, 36px); align-self: center; }
    .footer-brand-row { flex-wrap: wrap; justify-content: center; }
    .footer-contacts { flex-basis: 100%; }
}
/* footer: socials as one horizontal row on the right, the contacts slider narrower on the left */
.footer-brand-row { align-items: center; }
.footer-brand-row .footer-social { grid-template-columns: repeat(4, 34px); gap: 5px; padding: 5px; align-self: center; }
.footer-brand-row .footer-social-btn { width: 34px !important; height: 34px !important; line-height: 34px !important; font-size: 14px; }
.footer-contacts-track { height: 46px; border-radius: 16px; }
.footer-contact-plate { height: 46px; gap: 8px; padding: 0 10px 0 5px; }
.fcp-icon { width: 34px; height: 34px; font-size: 14px; }
.fcp-text small { font-size: 9.5px; }
.fcp-text b { font-size: 12.5px; }
/* footer on phones: brand → newsletter → the info accordion */
@media (max-width: 767px) {
    .footer-grid { display: flex; flex-direction: column; }
    .footer-grid > .footer-brand { order: 1; }
    .footer-grid > .footer-subscribe-col { order: 2; }
    .footer-grid > .footer-tabs-col { order: 3; }
}

/* ===== Phones: one user button in the header (dropdown: account, wishlist, compare) ===== */
@media (max-width: 767px) {
    #wishlist-total, #compare-total { display: none !important; }
    .m-user { display: block; position: relative; order: 2; }
    .m-user-btn .icon-badge:empty { display: none; }
    .m-user.open .m-user-btn { background: #fff; color: var(--accent); }
    .m-user-menu {
        position: absolute; top: calc(100% + 10px); right: -6px; z-index: 1200; width: 250px;
        padding: 6px; border-radius: 20px; background: var(--surface); border: 1px solid var(--border);
        box-shadow: 0 24px 50px -18px rgba(0,30,80,.5);
        opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top right;
        transition: opacity .18s ease, transform .2s cubic-bezier(.22,1,.36,1), visibility .18s;
    }
    .m-user.open .m-user-menu { opacity: 1; visibility: visible; transform: none; }
    .m-user-menu::before { content: ''; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: var(--surface); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
    .m-user-item {
        position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px 6px 6px;
        border: none; border-radius: 14px; background: transparent; color: var(--text); font-size: 14px; font-weight: 700;
        text-align: left; text-decoration: none; cursor: pointer;
    }
    .m-user-item > span:not(.m-user-ic) { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
    .m-user-item small { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
    .m-user-item:hover, .m-user-item:active { background: var(--accent-light); color: var(--accent); text-decoration: none; }
    .m-user-item.is-main { background: var(--accent-light); margin-bottom: 4px; }
    .m-user-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: var(--accent-light); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 15px; }
    .m-user-item.is-main .m-user-ic { background: var(--accent); color: #fff; }
    .m-user-item > .fa { color: var(--text-secondary); }
    .m-user-badge { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; }
    .m-user-badge[hidden] { display: none; }
    .m-user-item.is-out { color: #d33; }
    .m-user-item.is-out .m-user-ic { background: rgba(221,51,51,.1); color: #d33; }
}
@media (max-width: 767px) {
    .m-user-item small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* Phones: a round bell in the header (before the account pill) opens the feed as a modal card
   centred above the tab bar, with a dimmed backdrop; "Прочитати все" / "Очистити" at the bottom */
@media (max-width: 767px) {
    #notify-btn { display: inline-flex; align-items: center; justify-content: center; order: 1; flex-shrink: 0; }
    #notify-btn.active { background: #fff; color: var(--accent); }
    .m-user-menu { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
    .ntf-backdrop {
        display: block; position: fixed; left: 0; right: 0; top: 0; bottom: var(--m-tb); z-index: 10065;
        background: rgba(10,20,40,0.55); backdrop-filter: blur(3px);
        opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
    }
    .ntf-backdrop.open { opacity: 1; visibility: visible; }
    .ntf-panel {
        top: calc((100% - var(--m-tb)) / 2) !important; left: 12px; right: 12px !important;
        width: auto; max-width: none; max-height: calc(100% - var(--m-tb) - 24px);
        border: none; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.45);
        transform: translateY(-50%) scale(.96);
        transition: opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility .25s;
    }
    .ntf-panel.open { transform: translateY(-50%); }
    .ntf-head { padding: 14px 14px 14px 18px; }
    .ntf-head b { font-size: 16px; }
    .ntf-close { width: 34px; height: 34px; font-size: 15px; }
    .ntf-toggle .ntf-enable { width: 100%; height: 42px; }
    .ntf-list { padding: 8px; }
    .ntf-item { margin-bottom: 4px; }
    .ntf-empty { padding: 26px 10px; }
    .ntf-act { height: 44px; font-size: 13.5px; }
}
/* user menu: guests get two big buttons; a signed-in visitor's header button reads "Мій акаунт" */
@media (max-width: 767px) {
    .m-user-auth { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 4px; }
    .m-auth-btn {
        height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px;
        border-radius: 14px; border: 1.5px solid var(--accent); font-size: 13.5px; font-weight: 700; cursor: pointer;
    }
    .m-auth-btn.is-login { background: var(--accent); color: #fff; }
    .m-auth-btn.is-reg { background: var(--surface); color: var(--accent); }
    .m-auth-btn:active { transform: scale(.97); }
    .m-user.is-logged .m-user-btn { width: auto !important; padding: 0 12px 0 10px; border-radius: 50px; gap: 7px; }
    .m-user-label { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
    .m-user.is-logged .m-user-btn .icon-badge { top: -4px; right: -4px; }
}
@media (max-width: 374px) {
    .m-user-label { font-size: 11.5px; }
    .m-user.is-logged .m-user-btn { padding: 0 10px 0 8px; gap: 5px; }
}
/* header account button: a pill (icon + title) for guests too — "Увійти" / "Мій акаунт" */
@media (max-width: 767px) {
    .m-user .m-user-btn { width: auto !important; min-width: 38px; padding: 0 12px 0 10px; border-radius: 50px; gap: 7px; display: inline-flex; align-items: center; }
    .m-user .m-user-btn .icon-badge { top: -4px; right: -4px; }
}
@media (max-width: 374px) {
    .m-user .m-user-btn { padding: 0 10px 0 8px; gap: 5px; }
}
/* Small phones (Realme C71 360px / Redmi Note 15 393px): catalog sheet rows keep names on one line */
@media (max-width: 400px) {
    .cmm-mobile-header { padding: 12px 12px 10px; gap: 8px 10px; grid-template-columns: 38px minmax(0, 1fr) 36px; }
    .cmm-mobile-header-icon { width: 38px !important; height: 38px !important; font-size: 16px; }
    .cmm-mobile-header-title { font-size: 16.5px; }
    .cmm-mobile-header .cmm-mobile-header-close { width: 36px; height: 36px; }
    .cmm-search { height: 40px; }
    .cmm-mcards { padding: 10px; gap: 7px; }
    .cmm-card .hcc-card-head { gap: 8px; padding: 9px 2px 9px 9px; }
    .cmm-card .hcc-icon { flex-basis: 34px; height: 34px; font-size: 14px; }
    .cmm-card .hcc-name { font-size: 13.5px; }
    .cmm-card .hcc-name small { font-size: 11px; }
    .cmm-count { min-width: 26px; height: 22px; padding: 0 7px; font-size: 10.5px; }
    .cmm-card .hcc-caret { font-size: 15px; }
    .cmm-fav { width: 32px; height: 32px; margin-right: 4px; font-size: 15px; }
    .cmm-pill { min-height: 36px; font-size: 12px; padding: 5px 5px 5px 10px; }
}
@media (max-width: 767px) { .cmm-card .hcc-name { line-height: 1.25; } .cmm-card .hcc-name small { margin-top: 2px; } }

/* ===== Device tier "mid" (html.perf-mid, see common/header.twig): effects kept but cheap —
   quick transitions, no backdrop blur, flat cards, off-screen blocks rendered only when scrolled to ===== */
html.perf-mid *, html.perf-mid *::before, html.perf-mid *::after {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transition-duration: .16s !important;
}
html.perf-mid .product-thumb { box-shadow: none !important; }
html.perf-mid .product-thumb:hover { transform: none !important; }
html.perf-mid .product-thumb .image img { transform: none !important; }
html.perf-mid .home-brands, html.perf-mid #home-show, html.perf-mid .home-why, html.perf-mid footer,
html.perf-mid .product-related-section, html.perf-mid .product-feedback-section {
    content-visibility: auto; contain-intrinsic-size: auto 600px;
}

/* ===== Login / sign-up modal — SkladPanel login look (brand band, icon fields, gradient button) ===== */
.auth-modal { padding: 0 0 20px !important; border-radius: 22px !important; overflow-x: hidden; box-shadow: 0 30px 70px -25px rgba(0,40,110,.45) !important; }
.auth-modal-head {
    position: relative; overflow: hidden; margin: 0 0 16px !important; padding: 18px 16px 18px 18px !important; border: none !important;
    background: linear-gradient(150deg, #004A99 0%, #005CBE 55%, #0073E0 100%) !important; color: #fff;
}
.auth-modal-head::after { content: ''; position: absolute; right: -70px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.auth-modal-logo { width: 46px !important; height: 46px !important; border-radius: 14px !important; background: rgba(255,255,255,.16) !important; color: #fff !important; font-size: 19px !important; }
.auth-modal-title b { color: #fff !important; font-size: 19px !important; }
.auth-modal-title small { color: rgba(255,255,255,.8) !important; }
.auth-modal-head .auth-modal-close { position: relative; z-index: 1; background: rgba(255,255,255,.16) !important; border-color: rgba(255,255,255,.28) !important; color: #fff !important; }
.auth-modal-tabs { background: #eef3fa !important; }
.auth-modal-tab { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; font-size: 13.5px !important; }
.auth-modal-tab.active { background: linear-gradient(135deg, #005CBE, #0073E0) !important; box-shadow: 0 8px 18px -10px rgba(0,92,190,.7); }
.auth-lead { margin: 0 0 14px; font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
.auth-form-group label { font-size: 12.5px; font-weight: 600; color: #3b4456; margin-bottom: 6px; }
.auth-input { position: relative; }
.auth-input > .fa { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a0b4; font-size: 15px; pointer-events: none; transition: color .15s; }
.auth-input .auth-form-control {
    height: 48px !important; padding: 0 44px 0 42px !important; border: 1.5px solid #dfe6ef !important; border-radius: 14px !important;
    background: #f8fafd !important; font-size: 16px !important; color: #1c2434; transition: border-color .15s, background .15s, box-shadow .15s;
}
.auth-input .auth-form-control::placeholder { color: #a9b3c3; font-size: 14px; }
.auth-input .auth-form-control:focus { border-color: #005CBE !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(0,92,190,.12) !important; outline: none; }
.auth-input:focus-within > .fa { color: #005CBE; }
.auth-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; border-radius: 10px; background: none; color: #94a0b4; font-size: 15px; cursor: pointer; }
.auth-eye:hover, .auth-eye:active { color: #005CBE; background: #eef3fa; }
.auth-forgot-link { display: block; text-align: right; margin: -4px 0 4px; font-size: 12.5px; font-weight: 600; color: #005CBE; }
.auth-submit-btn {
    width: 100%; height: 52px !important; margin-top: 12px; border: none !important; border-radius: 14px !important;
    display: flex !important; align-items: center; justify-content: center; gap: 9px;
    background: linear-gradient(135deg, #005CBE, #0073E0) !important; color: #fff !important; font-size: 15.5px !important; font-weight: 700;
    box-shadow: 0 12px 24px -10px rgba(0,92,190,.6); transition: transform .15s, box-shadow .15s;
}
.auth-submit-btn:active { transform: scale(.98); }
.auth-form-row { gap: 8px; }
.auth-form-row .auth-input .auth-form-control { padding-right: 10px !important; }

/* header (phones): "Мій акаунт" pill + a round logout button; on ≤374px the pill reads "Акаунт" */
.m-logout-btn { display: none; }
@media (max-width: 767px) {
    .m-logout-btn { display: inline-flex; align-items: center; justify-content: center; order: 3; flex-shrink: 0; text-decoration: none; }
    .m-logout-btn:hover, .m-logout-btn:active { background: rgba(255,90,90,.35) !important; color: #fff; }
}
@media (max-width: 374px) {
    .m-ul-my { display: none; }
}
/* cart sheet on phones: "Оформити замовлення" first, "Продовжити покупки" under it (no "Кошик" link) */
@media (max-width: 767px) {
    #cart-sidebar .cart-btn-view { display: none !important; }
    #cart-sidebar .cart-btn-continue-m { display: flex !important; align-items: center; justify-content: center; gap: 8px; width: 100%; border: none; cursor: pointer; }
    #cart-sidebar .cart-actions { display: flex; flex-direction: column; gap: 8px; }
    #cart-sidebar .cart-btn-primary { order: 1; }
    #cart-sidebar .cart-btn-continue-m { order: 2; }
}

/* ===== Category page: mobile slider + toolbar + filter modal ===== */
@media (max-width: 767px) {
    /* Mobile toolbar inside the blue special-toolbar */
    .cat-mtoolbar {
        display: flex; align-items: center; gap: 8px; width: 100%;
        margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.2);
    }
    .cat-mtb-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 50%;
        background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
        color: #fff; font-size: 16px; cursor: pointer; flex-shrink: 0;
    }
    .cat-mtb-btn:active { background: rgba(255,255,255,0.3); }
    .cat-mtb-icons { display: flex; align-items: center; gap: 6px; margin-left: auto; }
    .cat-mtb-ic {
        position: relative; display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 50%;
        background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
        color: #fff; font-size: 15px; text-decoration: none; cursor: pointer;
    }
    .cat-mtb-ic:active { background: rgba(255,255,255,0.3); }
    .cat-mtb-badge {
        position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
        padding: 0 4px; border-radius: 9px; background: #fff; color: var(--accent, #2563eb);
        font-size: 10px; font-weight: 700; line-height: 18px; text-align: center;
        display: none;
    }

    /* Product slider (admin-list style): 8 cards per slide stacked vertically */
    .cat-slider { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .cat-slider-viewport { overflow: hidden; }
    .cat-slider-track { display: flex; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .cat-slide { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; }
    .cat-slider-row { display: flex !important; flex-direction: column; gap: 6px; margin: 0 !important; }
    .cat-slider-row > .product-layout { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

    /* admin-list card: image · info · price · actions */
    .cat-pl-card {
        display: flex !important; align-items: center; gap: 8px; padding: 6px 8px;
        background: var(--surface, #fff); border: 1px solid var(--border, #e5e7eb);
        border-radius: 12px; margin-bottom: 0; height: auto;
        box-shadow: none !important; overflow: visible !important; contain: none !important;
        max-width: 100%; transition: border-color .15s;
    }
    .cat-pl-card:hover { border-color: #c9d8f0; box-shadow: none !important; transform: none !important; }
    .cat-pl-img {
        width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
        display: flex; align-items: center; justify-content: center; position: relative;
        background: #f5f7fb; border: 1px solid var(--border, #e5e7eb); color: #b3bfcf; font-size: 16px;
        text-decoration: none !important;
    }
    .cat-pl-img img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
    .cat-pl-img .pc-badges { top: 1px; left: 1px; }
    .cat-pl-img .pc-badge { font-size: 7px; padding: 1px 3px; }
    .cat-pl-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
    .cat-pl-name {
        font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--text, #1f2937) !important;
        text-decoration: none !important;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .cat-pl-name:hover { color: var(--accent, #2563eb) !important; }
    .cat-pl-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 9.5px; }
    .cat-pl-rating { color: #FFB300; letter-spacing: 0.5px; }
    .cat-pl-rating .fa { font-size: 9px; }
    .cat-pl-status { padding: 1px 6px; border-radius: 50px; font-weight: 600; }
    .cat-pl-status-in { background: #e7f7ec; color: #15803d; }
    .cat-pl-status-order { background: #fff4e5; color: #b45309; }
    .cat-pl-status-out { background: #fdecec; color: #b91c1c; }
    .cat-pl-desc {
        font-size: 9.5px; color: var(--text-secondary, #6b7280); margin: 0; line-height: 1.25;
        display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    }
    .cat-pl-nums { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; min-width: 56px; }
    .cat-pl-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
    .cat-pl-price b { font-size: 12.5px; color: var(--text, #1f2937); font-weight: 700; }
    .cat-pl-price s { font-size: 9.5px; color: #9aa3b2; }
    .cat-pl-price .cat-pl-special { color: #dc2626; }
    .cat-pl-actions { display: flex; gap: 3px; flex-shrink: 0; }
    .cat-pl-btn {
        width: 28px; height: 28px; border-radius: 50%; border: none;
        display: flex; align-items: center; justify-content: center;
        background: #f3f6fb; color: var(--text-secondary, #6b7280); font-size: 11px; cursor: pointer;
        transition: background .15s, color .15s;
    }
    .cat-pl-btn:hover { background: var(--accent-light, #eef2ff); color: var(--accent, #2563eb); }
    .cat-pl-buy { background: var(--accent, #2563eb); color: #fff !important; }
    .cat-pl-buy:hover { background: var(--accent-dark, #1e40af); color: #fff !important; }

    /* Nav bar: ◀ "Сторінка N / M" ▶ + dots — BELOW the cards */
    .cat-slider-nav {
        display: flex; align-items: center; justify-content: center; gap: 10px;
        padding: 6px 8px 2px;
    }
    .cat-slider-arrow {
        width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 50%;
        background: var(--accent, #2563eb); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
        display: flex; align-items: center; justify-content: center; transition: background .15s, opacity .15s;
    }
    .cat-slider-arrow:hover:not(:disabled) { background: var(--accent-dark, #1e40af); }
    .cat-slider-arrow:disabled { opacity: 0.35; cursor: default; }
    .cat-slider-nav-info { display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
    .cat-slider-nav-info b { font-size: 14px; color: var(--text, #1f2937); }
    .cat-slider-nav-info small { font-size: 11px; color: var(--text-secondary, #6b7280); }
    .cat-slider-dots { display: flex; justify-content: center; gap: 6px; min-height: 10px; }
    .cat-slider-dot { width: 8px; height: 8px; padding: 0; border: none; border-radius: 4px; background: #c9d4e3; cursor: pointer; transition: width .2s, background .2s; }
    .cat-slider-dot.active { width: 22px; background: var(--accent, #2563eb); }

    /* Filter modal: bottom sheet */
    .cat-filter-modal { position: fixed; inset: 0; z-index: 2000; }
    .cat-filter-modal[hidden] { display: none; }
    .cat-fm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
    .cat-fm-panel {
        position: absolute; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto;
        background: var(--surface, #fff); border-radius: 16px 16px 0 0; padding: 16px;
        animation: catFmUp 0.25s ease;
    }
    @keyframes catFmUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
    .cat-fm-head {
        display: flex; align-items: center; justify-content: space-between;
        padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--border, #e5e7eb);
    }
    .cat-fm-head b { font-size: 16px; font-weight: 700; color: var(--text, #1f2937); }
    .cat-fm-head b i { color: var(--accent, #2563eb); margin-right: 6px; }
    .cat-fm-close {
        width: 34px; height: 34px; border-radius: 50%; border: none;
        background: var(--accent-light, #eef2ff); color: var(--text, #1f2937); font-size: 16px; cursor: pointer;
    }
    .cat-fm-body .filter-panel { gap: 16px; }
    .cat-fm-body .filter-views .btn { height: 44px; }
    .cat-fm-body .filter-compare {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 12px; border-radius: 10px; background: var(--accent-light, #eef2ff);
        color: var(--accent, #2563eb); font-weight: 600; text-decoration: none;
    }
}
@media (min-width: 768px) {
    /* desktop: hide the mobile toolbar, slider nav; show the plain grid */
    .cat-mtoolbar { display: none !important; }
    .cat-slider-nav, .cat-slider-dots { display: none !important; }
    .cat-slider-viewport { overflow: visible !important; }
    .cat-slider-track { display: block !important; transform: none !important; }
    .cat-slider-row { display: block !important; }
    .cat-slider-row > .product-layout { width: auto; }
    /* restore the standard product-thumb grid card on desktop */
    .cat-pl-card { display: flex; flex-direction: column; height: 100%; padding: 0; background: var(--surface, #fff); border: none; border-radius: 0; }
    .cat-pl-img { width: auto; height: auto; max-width: none; border: none; border-radius: 0; background: transparent; padding: 18px; }
    .cat-pl-img img { padding: 0; object-fit: contain; }
    .cat-pl-info { display: block; }
    .cat-pl-name { display: block; -webkit-line-clamp: unset; font-size: 14px; min-height: 2.7em; }
    .cat-pl-meta { display: flex; }
    .cat-pl-desc { display: none; }
    .cat-pl-nums { display: block; min-width: 0; }
    .cat-pl-price { display: block; text-align: left; }
    .cat-pl-price b { font-size: 17px; }
    .cat-pl-actions { display: flex; border-top: 1px solid var(--border, #e5e7eb); background: #F8FAFC; }
    .cat-pl-btn { width: auto; height: 44px; border-radius: 0; flex: 1; background: transparent; color: var(--text-secondary, #6b7280); font-size: 13px; }
    .cat-pl-btn:first-child { width: 60%; flex: 0 0 60%; }
    .cat-pl-buy { background: transparent; color: var(--text-secondary, #6b7280) !important; }
    .cat-pl-buy:hover { background: var(--accent-light, #eef2ff); color: var(--accent, #2563eb) !important; }
    .cat-filter-modal { display: none !important; }
}

/* ===== Phone "Каталог": a top sheet that drops down from under the header (like the filter sheet,
   but from the top), with a "Сховати каталог" bar at the bottom. --cmm-top is set in menu.twig ===== */
@media (max-width: 767px) {
    .catalog-mega-overlay { top: var(--cmm-top, 0px); }
    .catalog-mega {
        top: var(--cmm-top, 0px); left: 0; right: 0;
        max-height: calc(100% - var(--cmm-top, 0px) - var(--m-tb) - 12px);
        border-radius: 0 0 22px 22px;
        box-shadow: 0 24px 60px -18px rgba(0,0,0,0.45);
        transform: translateY(-14px);
        clip-path: inset(0 0 100% 0);
        transition: opacity .2s ease, transform .32s cubic-bezier(.22,1,.36,1), clip-path .32s cubic-bezier(.22,1,.36,1), visibility .32s;
    }
    .catalog-mega.active { transform: none; clip-path: inset(0 0 -80px 0); }
    .cmm-hide-bar {
        display: block; flex-shrink: 0; padding: 10px 12px 12px;
        border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 22px 22px;
    }
    .cmm-hide-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px;
        border: none; border-radius: 50px; background: var(--accent-light, #eef2ff);
        color: var(--accent, #2563eb); font-size: 14.5px; font-weight: 700; cursor: pointer;
    }
    .cmm-hide-btn .fa { font-size: 18px; }
    .cmm-hide-btn:active { background: var(--accent); color: #fff; }
}

/* ===== Phone category pages: the blue title bar, then only the products slider (8 wide cards per
   slide stacked vertically; swipe or ◀ "N з M" ▶, dots underneath). Side panel, subcategories,
   description, filter, modules and columns are hidden ===== */
@media (max-width: 767px) {
    #product-category .breadcrumb,
    #product-category #column-left,
    #product-category #column-right,
    #product-category #content > :not(.cat-browser),
    #product-category .cat-browser-side,
    #product-category .cat-acc,
    #product-category .category-description,
    #product-category .special-toolbar-results,
    #product-category .cat-mtoolbar,
    #cat-filter-modal { display: none !important; }
    #product-category .cat-browser { margin-bottom: 20px; }
    #product-category .cat-browser-body { padding: 10px; }

    /* viewport takes the active slide's height (set in category.twig), swipe stays horizontal */
    #product-category .cat-slider { gap: 8px; margin-bottom: 0; padding: 0; align-items: stretch; }
    /* width pinned to the column: without it the viewport took the track's content width and slid off-screen */
    #product-category .cat-slider-viewport { width: 100%; min-width: 0; align-self: stretch; transition: height .3s ease; touch-action: pan-y; }
    /* no padding on the track: a slide must be exactly the viewport's width for translateX paging */
    #product-category .cat-slider-track { width: 100%; padding: 0; gap: 0; }
    #product-category .cat-slide { align-self: flex-start; display: flex; flex-direction: column; gap: 6px; }
    #product-category .cat-slider-row { gap: 6px; }
    #product-category .cat-slide > .product-layout,
    #product-category .cat-slider-row > .product-layout {
        float: none; width: 100% !important; min-height: 0; margin: 0; padding: 0 !important;
    }
    /* the page's other pages are pulled into the slider (category.twig), so no pager on phones */
    #product-category .cat-pager { display: none !important; }

    /* compact wide card: image | name + status / price + actions */
    #product-category .cat-pl-card {
        display: grid !important; grid-template-columns: 60px minmax(0, 1fr) auto;
        grid-template-areas: "img info info" "img nums actions";
        align-items: center; gap: 4px 10px; width: 100%; min-width: 0; padding: 8px; border-radius: 14px;
    }
    #product-category .cat-pl-img { grid-area: img; width: 60px; height: 60px; border-radius: 10px; font-size: 18px; }
    #product-category .cat-pl-img img { padding: 3px; }
    #product-category .cat-pl-img .pc-badge { font-size: 7.5px; padding: 1px 4px; }
    #product-category .cat-pl-info { grid-area: info; align-self: end; gap: 3px; }
    #product-category .cat-pl-name { font-size: 12.5px; line-height: 1.3; -webkit-line-clamp: 1; }
    #product-category .cat-pl-meta { font-size: 10px; }
    #product-category .cat-pl-desc { display: none; }
    #product-category .cat-pl-nums { grid-area: nums; align-self: center; align-items: flex-start; min-width: 0; }
    #product-category .cat-pl-price { align-items: flex-start; }
    #product-category .cat-pl-price b { font-size: 14.5px; white-space: nowrap; }
    #product-category .cat-pl-price s { font-size: 10px; }
    #product-category .cat-pl-actions { grid-area: actions; align-self: center; gap: 5px; }
    #product-category .cat-pl-btn { width: 30px; height: 30px; font-size: 12px; }

    /* nav under the cards: ◀ page counter ▶, then the dots */
    #product-category .cat-slider-nav { gap: 18px; padding: 8px 0 0; }
    #product-category .cat-slider-arrow { width: 38px; height: 38px; font-size: 20px; }
    #product-category .cat-slider-nav-info { min-width: 64px; }
    #product-category .cat-slider-nav-info b { font-size: 15px; }
    #product-category .cat-slider-dots { padding-bottom: 2px; }
}

/* ================================================================
   Android phones (Realme C71 & co, 360 px wide): Chrome "font boosting" enlarged the text of some
   blocks on its own, so sizes did not match from block to block — the text is kept at the size set here.
   ================================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 767px) {
    /* Header floats: a rounded card with a gap from the screen edges, still sticky */
    #header-main {
        margin: 8px 8px 0; top: 8px; padding: 10px 0;
        border-radius: 22px; border-bottom: none;
        box-shadow: 0 10px 26px -12px rgba(0, 50, 130, 0.55);
    }
    #header-main::after { left: 22px; right: 22px; border-radius: 3px; }
    #header-main .container { padding-left: 10px; padding-right: 10px; }

    /* Bottom tab bar: rounded top corners, lifted off the page by a soft shadow */
    .m-tabbar {
        border-radius: 22px 22px 0 0; border-top: none;
        box-shadow: 0 -6px 24px rgba(0, 40, 110, 0.12);
    }
}

/* Narrow phones (360–380 px): everything a notch tighter so rows fit without squeezing */
@media (max-width: 380px) {
    .container { padding-left: 10px; padding-right: 10px; }
    #header-main { margin: 6px 6px 0; top: 6px; padding: 8px 0; border-radius: 20px; }
    .brand-logo > i { width: 36px; height: 36px; line-height: 36px; font-size: 18px; }
    .brand-name { font-size: 16.5px; }
    .brand-sub { font-size: 9.5px; }
    .header-right { gap: 6px; }
    .header-icon-btn { width: 34px; height: 34px; }
    .header-icon-btn i { font-size: 15px; }
    .m-tab { font-size: 10px; }
    .m-tab i { width: 32px; height: 32px; font-size: 15px; }
    .product-thumb .caption h4, .product-thumb .caption h4 a { font-size: 13px; }
}

/* phones: toast cards above the tab bar, same card as the bell's list */
@media (max-width: 767px) {
    .toast, .toast-error { box-shadow: 0 8px 20px -8px rgba(0, 40, 110, 0.4); }
    .toast { padding: 10px 10px 12px; gap: 10px; border-radius: 16px; }
    .toast-thumb { flex-basis: 40px; height: 40px; border-radius: 11px; }
    .toast-icon { font-size: 17px; }
}

/* Phones, later request: the header scrolls away with the page (not sticky), the tab bar is square again,
   the logo's bag sits in a transparent circle with a multi-colour outline (yellow, red, green, orange, blue) */
@media (max-width: 767px) {
    #header-main { position: relative; top: auto; }
    .m-tabbar {
        border-radius: 0; border-top: 1px solid var(--border);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06);
    }
    .brand-logo { position: relative; }
    .brand-logo > i { background: transparent; }
    .brand-logo::before {
        content: ''; position: absolute; left: 0; top: 50%; width: 40px; height: 40px; margin-top: -20px;
        border-radius: 50%; padding: 2.5px; box-sizing: border-box; pointer-events: none;
        background: conic-gradient(#f5c400, #e53935, #2e9e57, #ff8a00, #1e6fe0, #f5c400);
        /* only the ring: the inside is cut out, the bag icon shows through */
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
    }
}
@media (max-width: 380px) {
    .brand-logo::before { width: 36px; height: 36px; margin-top: -18px; }
}

/* the icon hangs on the white page now: no disc behind it, the accent bag sits directly
   inside the colour ring */
@media (max-width: 767px) {
    .brand-logo > i {
        width: 32px; height: 32px; line-height: 32px; margin: 4px; font-size: 16px;
        background: transparent; color: var(--accent); box-shadow: none;
    }
}
@media (max-width: 380px) {
    .brand-logo > i { width: 28px; height: 28px; line-height: 28px; font-size: 14px; }
}

/* the wordmark clips with an ellipsis instead of overflowing onto the buttons */
@media (max-width: 767px) {
    .brand-name, .brand-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Phones: the wordmark's glass pill too, just tighter so the narrow card keeps its room */
@media (max-width: 767px) {
    .brand-text { padding: 5px 12px; }
}
@media (max-width: 380px) {
    .brand-text { padding: 4px 10px; }
}

/* Phones: the header is a frosted card in the light theme — a semi-transparent veil with a blur
   over the page pattern. Low-perf phones skip the blur (it repaints the backdrop) and take a
   more solid veil. The dark theme keeps its own graphite background (dark.css) */
@media (max-width: 767px) {
    #header-main {
        background: rgba(255, 255, 255, 0.72);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 8px 24px -14px rgba(0, 50, 130, 0.35);
    }
    html.perf-lite #header-main, html.perf-low #header-main {
        -webkit-backdrop-filter: none; backdrop-filter: none;
        background: rgba(255, 255, 255, 0.92);
    }
    #header-main::after { display: none; }
    .header-icon-btn { background: var(--accent-light); color: var(--accent); }
    .header-icon-btn:hover, .header-icon-btn:active { background: var(--accent); color: #fff; }
    #notify-btn.active { background: var(--accent); color: #fff; }
    .m-user.open .m-user-btn { background: var(--accent); color: #fff; }
}

/* Phones: the wordmark drops its plate — plain accent text; the buttons keep their chips */
@media (max-width: 767px) {
    .brand-text { background: transparent; border-color: transparent; box-shadow: none; }
    .brand-name { color: var(--accent); }
    .brand-sub { color: var(--text-secondary); }
}

/* Phones: the theme toggle and the bell merged into one split chip with a hairline divider */
@media (max-width: 767px) {
    .m-duo {
        display: inline-flex; align-items: stretch; order: 1;
        background: var(--accent-light); border-radius: 50px;
    }
    .m-duo .header-icon-btn { background: transparent; }
    .m-duo .theme-toggle { order: 0; border-radius: 50px 0 0 50px; }
    .m-duo #notify-btn { order: 1; border-left: 1px solid rgba(255, 255, 255, 0.55); border-radius: 0 50px 50px 0; }
}

/* Phones, new header order: bag logo + "Увійти" on the left, the wordmark centred in the free
   space, the theme / bell split chip on the right. The wrappers collapse (display: contents) so
   the pieces from .header-left, the brand link and .header-right line up in one flex row;
   the brand text stays inside its <a>, so it is still the home link */
@media (max-width: 767px) {
    .header-left, .header-right, .brand-logo { display: contents; }
    .header-row { gap: 8px; }
    .brand-logo > i { order: 0; flex: 0 0 auto; position: relative; }
    .m-user { order: 1; flex: 0 0 auto; }
    .brand-text { order: 2; flex: 1 1 auto; min-width: 0; text-align: center; }
    .m-duo { order: 3; flex: 0 0 auto; }
    /* the colour ring moves from the link (now a wrapper-less box) onto the bag icon itself */
    .brand-logo::before { display: none; }
    .brand-logo > i::after {
        content: ''; position: absolute; inset: -4px;
        border-radius: 50%; padding: 2.5px; box-sizing: border-box; pointer-events: none;
        background: conic-gradient(#f5c400, #e53935, #2e9e57, #ff8a00, #1e6fe0, #f5c400);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor; mask-composite: exclude;
    }
    /* logged in: "Акаунт" instead of "Мій акаунт", logout lives in the dropdown only — keeps room for the title */
    .m-ul-my, .m-logout-btn { display: none !important; }
    /* the dropdown now opens from the left edge */
    .m-user-menu { right: auto; left: -6px; transform-origin: top left; }
    .m-user-menu::before { right: auto; left: 20px; }
}
@media (max-width: 380px) {
    .brand-logo > i::after { inset: -4px; }
    .brand-name { font-size: 15.5px; }
}