/* ==========================================================================
   SANGU header polish — spacing/alignment refinements only.
   The bar stays white; this file only fixes rhythm, hover states and the
   legacy -8px alignment hacks. Loaded AFTER header_style_min.css so
   equal-specificity rules here win.
   ========================================================================== */

/* softer, modern elevation instead of the harsh 30px black shadow */
.header {
    -webkit-box-shadow: 0 1px 0 rgba(20, 20, 26, .05), 0 10px 28px rgba(20, 20, 26, .08);
    box-shadow: 0 1px 0 rgba(20, 20, 26, .05), 0 10px 28px rgba(20, 20, 26, .08);
}

/* --- main nav: one consistent rhythm ------------------------------------ */
.header-nav__category {
    align-items: center;
    gap: 38px;
}
.header-nav__category li { margin-right: 0; }

/* non-jumpy underline: no layout shift, animates in from the left */
.header-nav__category li a {
    position: relative;
    padding: 8px 2px;
    border-bottom: 0 !important;
    transition: color .2s ease;
}
.header-nav__category li:hover a {
    border-bottom: 0 !important;
    color: #1d1d24;
}
.header-nav__category li:hover a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: #e32d44;
}

/* --- language switch: small pill + card dropdown ------------------------ */
.header-nav__lang {
    margin-top: 0;
    margin-left: 40px;
    font-size: 15px;
}
.header-nav__lang--active {
    padding: 9px 14px;
    line-height: 1;
    border: 1px solid #e4e4ea;
    border-radius: 100px;
    transition: border-color .2s ease, background .2s ease;
}
.header-nav__lang--active:hover {
    border-color: #cfcfd8;
    background: #fafafb;
}
.header-nav__lang--active img { margin-left: 7px; }

.header-nav__lang--items {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
}
.header-nav__lang:hover .header-nav__lang--items {
    height: auto;
    overflow: visible;
    margin-top: 8px;
    padding: 6px;
    background: #fff;
    border: 1px solid #ececf1;
    border-radius: 14px;
    -webkit-box-shadow: 0 14px 34px rgba(20, 20, 26, .14);
    box-shadow: 0 14px 34px rgba(20, 20, 26, .14);
}
/* invisible bridge so the dropdown doesn't close crossing the 8px gap */
.header-nav__lang:hover .header-nav__lang--items::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}
.header-nav__lang--items li a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 14px;
    transition: background .15s ease, color .15s ease;
}
.header-nav__lang--items li a:hover {
    background: #f5f5f7;
    color: #e32d44;
    text-decoration: none;
}

/* --- action icons: equal hit areas, gentle hover ------------------------- */
.header-icons {
    margin-left: 30px;
    margin-top: 0;
}
.header-icons__item {
    margin-top: 0;
    width: 44px;
    height: 44px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 50%;
    transition: background .2s ease;
}
.header-icons__item:hover { background: #f3f3f6; }
.header-icons .search-icon { margin-right: 8px; }

/* --- burger block: keep the red, add feedback ---------------------------- */
.header-menu {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    transition: background .2s ease;
}
.header-menu:hover { background: #cb2038; }

/* mobile bar (≤800px): keep the legacy compact metrics */
@media only screen and (max-width: 800px) {
    .header-icons__item { width: 38px; height: 38px; }
    .header-nav__lang { margin-left: 0; }
}

/* the dropdown is a <ul>: never show list bullets */
.header-nav__lang--items,
.header-nav__lang--items li {
    list-style: none;
    margin: 0;
}