/* ~~~~~~~~~~ One-row header (template-parts/header/navbar.php) ~~~~~~~~~~ */
/* Height: 64px on phones/tablets, 76px from 1200px. #main gets the same top padding. */

:root {
    --mobilka-header-height: 64px;
}

@media (min-width: 1200px) {
    :root {
        --mobilka-header-height: 76px;
    }
}

.mobilka-navbar {
    background: #fff;
    box-shadow: 0 1px 0 #e6eaf0, 0 4px 16px rgba(20, 33, 61, .05);
}

.mobilka-navbar__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--mobilka-header-height);
    padding-left: 1rem;
    padding-right: 1rem;
}

/* one row: Bootstrap's ".navbar > .container-fluid" would let it wrap (home label on phones) */
.mobilka-navbar > .mobilka-navbar__inner {
    flex-wrap: nowrap;
}

/* order: phones/tablets - language | buttons | icons; desktop - menu | buttons | shop | language | icons */
.mobilka-navbar__menu     { order: 1; }
.mobilka-navbar__language { order: 1; }
.mobilka-navbar__buttons  { order: 2; margin: 0 auto; gap: .5rem; }
.mobilka-navbar__shop     { order: 3; }
.mobilka-navbar__end      { order: 5; display: flex; align-items: center; gap: .25rem; margin-left: auto; }

@media (min-width: 1200px) {
    .mobilka-navbar__language { order: 4; margin-left: .5rem; }
    .mobilka-navbar__end      { margin-left: 0; }
}

@media (min-width: 768px) {
    .mobilka-navbar__end { margin-left: 0; }
}

/* the language widget adds its own spacing */
.mobilka-navbar__language ul,
.mobilka-navbar__language .widget {
    margin: 0 !important;
    padding: 0 !important;
}

/* Buttons a bit smaller than before */
.mobilka-navbar__buttons .crunch-button {
    margin: 0 !important;
    padding: .55rem 1.1rem !important;
    font-size: .8125rem !important;
}

/* Account and cart as icon buttons */
.mobilka-navbar__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    color: #4a5568;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.mobilka-navbar__icon:hover,
.mobilka-navbar__icon:focus {
    background: #f3f5f8;
    color: #14213d;
    text-decoration: none;
}

.mobilka-navbar__icon svg {
    width: 1.5rem;
    height: 1.5rem;
}

.mobilka-navbar__avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
}

.mobilka-navbar .shopping-cart-button__counter {
    top: .25rem;
    right: .125rem;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 .25rem !important;
    font-size: .6875rem !important;
    line-height: 1;
}

.mobilka-navbar .mburger {
    margin-left: .25rem;
}

/* Menus: no extra vertical padding from the old two-row header */
.mobilka-navbar .navbar-nav .nav-link {
    padding-top: .5rem;
    padding-bottom: .5rem;
}

/* Content starts right under the header */
#main {
    padding-top: var(--mobilka-header-height) !important;
}


/* "Activate" / "Top up": brand blue instead of neon green (header and mobile menu, all pages).
   On hover the theme empties the fill (outline button): text turns blue on white, the ring keeps the shape. */
.js-main-header .crunch-button__full-background--primary-color,
.mm-menu .crunch-button__full-background--primary-color {
    color: #fff !important;
}

.js-main-header .crunch-button__full-background--primary-color::before,
.mm-menu .crunch-button__full-background--primary-color::before {
    background-color: #0a7fb0 !important;
}

.js-main-header .crunch-button__full-background--primary-color::after,
.mm-menu .crunch-button__full-background--primary-color::after {
    border-color: #0a7fb0 !important;
}

.js-main-header .crunch-button__full-background--primary-color:hover,
.js-main-header .crunch-button__full-background--primary-color:focus,
.mm-menu .crunch-button__full-background--primary-color:hover,
.mm-menu .crunch-button__full-background--primary-color:focus {
    color: #0a7fb0 !important;
}

/* Shop menu basket icons: neutral gray instead of neon green */
.js-main-header .menu-item-object-product_cat::before,
.js-main-header .menu-item-object-product_cat > a::before,
.mm-menu .menu-item-object-product_cat::before,
.mm-menu .menu-item-object-product_cat > a::before {
    filter: brightness(0) opacity(.7);
}

/* Menu hover / active item / underline: the same brand blue as the buttons
   (the theme's #07C4FF has ~2:1 contrast on white) */
.js-main-header .navbar-nav li .nav-link:hover,
.js-main-header .navbar-nav li .nav-link:focus,
.js-main-header .navbar-nav li.active .nav-link,
.js-main-header .navbar-nav li.current-menu-item .nav-link,
.js-main-header .navbar-nav li.current_page_item .nav-link,
.js-main-header .navbar-nav li.current-menu-ancestor > .nav-link,
.js-main-header .navbar-nav .menu-item:hover > .nav-link,
.js-main-header .navbar-nav .menu-item > .nav-link:hover,
.js-main-header .navbar-nav .menu-item > .nav-link:focus,
.js-main-header .navbar-nav .nav-link.active,
.js-main-header .navbar-nav [class*="current-menu"] > .nav-link,
.js-main-header .navbar-nav .menu-item:hover,
.js-main-header .navbar-nav [class*="current-menu"],
.mm-menu .mm-listitem a:hover,
.mm-menu [class*="current-menu"] > a,
.mm-menu .mm-listitem_selected > a {
    color: #0a7fb0 !important;
}

.js-main-header .navbar-nav .magic-line {
    background-color: #0a7fb0 !important;
}

.js-main-header .navbar-nav .nav-link::before,
.js-main-header .navbar-nav .nav-link::after,
.js-main-header .navbar-nav .menu-item::before {
    border-bottom-color: #0a7fb0 !important;
}

.js-main-header .dropdown-menu .dropdown-item:hover,
.js-main-header .dropdown-menu .dropdown-item:focus,
.js-main-header .dropdown-menu .dropdown-item.active {
    color: #0a7fb0 !important;
    background-color: #f3f5f8 !important;
}

/* Home on phones/tablets (client 16.10.2026): first in the row, brand blue.
   client 19.10.2026: icon + label as a light pill, so it reads as "back to the home page" at a glance */
.mobilka-navbar__home {
    order: 0;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    height: 2.25rem;
    padding: 0 .625rem 0 .5rem;
    border-radius: 1.125rem;
    background-color: #e8f4fa;
    color: #0a7fb0;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease;
}

.mobilka-navbar__home svg {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.mobilka-navbar__home:hover,
.mobilka-navbar__home:focus {
    background-color: #d3ebf6;
    color: #0a7fb0;
    text-decoration: none;
}

/* phones: less space between home | language | icons, so the label fits from 360px */
@media (max-width: 767.98px) {
    .mobilka-navbar__inner {
        gap: .5rem;
    }
}

@media (max-width: 374.98px) {
    .mobilka-navbar__home {
        gap: .1875rem;
        padding: 0 .5rem 0 .375rem;
        font-size: .8125rem;
    }
}

/* very narrow phones: the icon alone */
@media (max-width: 349.98px) {
    .mobilka-navbar__home {
        padding: 0 .5rem;
    }

    .mobilka-navbar__home span {
        display: none;
    }
}