/*
 * Catalog header compact-on-scroll — mirrors the product page's final compact state
 * (header.fixed + .menu1.product-page-header + .info/.bars-card.hidden). Kept here as a
 * self-contained guarantee in case the CDN stylesheets lack these rules.
 */

/* --- collapse of info line + black bar --- */
.info,
.bars-card {
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.3s ease-out;
    opacity: 1;
    transform: translateY(0);
    max-height: 500px;
}
.bars-card {
    overflow: visible;
    position: relative;
    z-index: 99;
}
.info.hidden,
.bars-card.hidden {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* --- intermediate compact look --- */
.menu1.product-page-header {
    background-color: #f0f0f0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.menu1 .navbar-brand1 svg {
    transition: margin-left 0.3s ease, width 0.3s ease, margin-top 0.3s ease, height 0.3s ease;
}

/* --- FINAL compact state (header.fixed) — same as the product page --- */
header.fixed {
    position: fixed;
    width: 100%;
    z-index: 100;
}
header.fixed .info,
header.fixed .bars-card,
header.fixed .logo-poisk .a-p a p:not(.n) {
    display: none;
}
header.fixed .logo-poisk .a-p a p.n {
    position: relative;
    left: 13px;
}
header.fixed a.navbar-brand1 svg {
    height: 56px;
    width: auto;
    margin: 0 !important;
    position: relative;
    top: 6px;
}
header.fixed .logo-poisk .row .col-3:nth-child(1),
header.fixed .logo-poisk .row .col-3:nth-child(3) {
    flex: 0 0 auto;
    width: 16.66666667%;
}
header.fixed .logo-poisk .row .col-6:nth-child(2) {
    flex: 0 0 auto;
    width: 66.66666667%;
}
header.fixed .logo-poisk .a-p {
    margin-top: 10px;
}
@media (min-width: 992px) and (max-width: 1199px) {
    header.fixed .logo-poisk .logo-poisk-input {
        width: 555px;
    }
}
@media (min-width: 1200px) and (max-width: 1399px) {
    header.fixed .logo-poisk .logo-poisk-input {
        width: 680px;
    }
}
@media (min-width: 1401px) {
    header.fixed .logo-poisk .logo-poisk-input {
        width: 905px;
    }
}

/* --- logo tweak in the final compact state: a bit bigger + shifted right ---
   Applies on BOTH catalog and product pages (both reach header.fixed +
   .menu1.product-page-header). High specificity beats the base 56px / 46% rules. */
header.fixed .menu1.product-page-header a.navbar-brand1 svg,
header.fixed .menu1 a.navbar-brand1 svg {
    height: 70px !important;
    width: auto !important;
    margin: 0 !important;
    position: relative;
    top: 10px;
    left: 8px;
}

/* ============================================================
   EXPERIMENT: premium mega-menu redesign (localhost preview)
   ============================================================ */
.bars-card .dropdown-menu {
    background: #ffffff !important;
}
/* desktop: floating rounded glass-card look */
@media (min-width: 992px) {
    .bars-card .dropdown-menu {
        border-radius: 0 0 26px 26px;
        box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.28) !important;
        border: 1px solid rgba(0, 0, 0, 0.04);
        overflow: hidden;
        padding: 14px 0 26px !important;
    }
}
/* mobile: plain full-screen white panel (no rounding / border / shadow) */
@media (max-width: 991.98px) {
    .bars-card .dropdown-menu {
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
    }
}

/* section titles + gold framed icons */
.bars-card .dropdown-menu .PopularBrands > p,
.bars-card .dropdown-menu .Category > p,
.bars-card .dropdown-menu .Price > p,
.bars-card .dropdown-menu .Country > p {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1f1a16;
    margin-bottom: 20px;
}
/* section icon box — image is set per title by JS */
.bars-card .dropdown-menu .kc-sec-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    border: 1px solid rgba(206, 168, 88, .45);
    border-radius: 9px;
}

/* option links */
.bars-card .dropdown-menu .links-group a {
    display: flex;
    align-items: center;
    padding: 5px 0;
    color: #2a2a2a;
    transition: color .15s ease, transform .15s ease;
}
.bars-card .dropdown-menu .links-group a:hover {
    color: #cea858;
    transform: translateX(2px);
}
/* mobile menu links are direct children (no .links-group wrapper) — align icon + text */
.bars-card .dropdown-menu .PopularBrands > a,
.bars-card .dropdown-menu .Category > a,
.bars-card .dropdown-menu .Price > a,
.bars-card .dropdown-menu .Country > a {
    display: flex;
    align-items: center;
}
.bars-card .dropdown-menu .all-a {
    color: #cea858 !important;
    font-weight: 600;
}
.bars-card .dropdown-menu .all-a::after {
    content: "→";
    margin-left: 6px;
    transition: transform .15s ease;
}
.bars-card .dropdown-menu .all-a:hover::after { transform: translateX(4px); }

/* colour dots (injected by JS) */
.kc-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex: 0 0 14px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 9px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
}
/* country flags (injected by JS) */
.kc-flag {
    width: 22px;
    height: 15px;
    flex: 0 0 22px;
    border-radius: 3px;
    overflow: hidden;
    vertical-align: middle;
    margin-right: 9px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .10);
    display: inline-flex;
}
.kc-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kc-country-pill .kc-flag { margin-right: 0; }

/* ---- Recommend card ---- */
.bars-card .dropdown-menu .col3 > .position-relative {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .07);
    border-radius: 20px;
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .25);
    padding: 22px 22px 22px 26px;
}
.bars-card .dropdown-menu .col3 [class*="dvertisement-p1"] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #cea858;
    font-weight: 700;
}
.bars-card .dropdown-menu .col3 [class*="dvertisement-p1"]::before {
    content: "★";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(206, 168, 88, .15);
    font-size: 12px;
}
.bars-card .dropdown-menu .col3 .msfavorites {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .10);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
    z-index: 2;
}
.bars-card .dropdown-menu .col3 [class*="dvertisement-btn"] {
    border: none;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 28px;
    color: #fff;
    font-weight: 600;
    letter-spacing: .04em;
    background: linear-gradient(135deg, #2c2c2c 0%, #0d0d0d 100%);
    box-shadow: 0 9px 22px -8px rgba(0, 0, 0, .55);
    transition: transform .18s ease, box-shadow .2s ease, background .28s ease, color .2s ease;
}
.bars-card .dropdown-menu .col3 [class*="dvertisement-btn"]:hover {
    background: linear-gradient(135deg, #dbb86d 0%, #cea858 100%);
    color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(206, 168, 88, .6);
}
.bars-card .dropdown-menu .col3 [class*="dvertisement-btn"]::after {
    content: "";
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url(/assets/js/menu-icons/cart.svg) no-repeat center / contain;
    mask: url(/assets/js/menu-icons/cart.svg) no-repeat center / contain;
    transition: background-color .2s ease;
}
/* country pill (injected by JS) */
.kc-country-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(206, 168, 88, .12);
    color: #9a7b3f;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    margin: 8px 0 4px;
}

/* mobile: clean compact horizontal "Рекомендуем" card (custom markup) */
.kc-mobile-rec {
    padding: 10px 2px 4px;
}
.kc-rec {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .3);
    padding: 12px 14px;
}
.kc-rec__img {
    flex: 0 0 64px;
    display: block;
}
.kc-rec__img img {
    width: 64px;
    height: 104px;
    object-fit: contain;
    display: block;
}
.kc-rec__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kc-rec__label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cea858;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.kc-rec__title {
    color: #1a1a1a;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kc-rec .kc-country-pill { margin: 0; align-self: flex-start; }
.kc-rec__price {
    font-weight: 700;
    font-size: 19px;
    color: #1a1a1a;
}
.kc-rec__form { margin: 0; }
.kc-rec__btn {
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #2c2c2c 0%, #0d0d0d 100%);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 22px;
    align-self: flex-start;
    transition: transform .18s ease, box-shadow .2s ease, background .28s ease, color .2s ease;
}
.kc-rec__btn:hover {
    background: linear-gradient(135deg, #dbb86d 0%, #cea858 100%);
    color: #1a1a1a;
}