/**
 * craftbeer78.ru — шапка v2 (layout-v.2.0.php)
 */

:root {
    --cb-header-bg: #000000;
    --cb-header-text: #ffffff;
    --cb-header-muted: #b8b8b8;
    --cb-header-input-bg: #2a2a2a;
    --cb-header-input-border: #3d3d3d;
    --cb-header-accent: #ffbb00;
    --cb-header-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    --cb-top-info-offset: 0px;
}

@media (min-width: 769px) {
    :root {
        --cb-top-info-offset: 0px;
    }

    .cb-header-mobile-search-trigger {
        display: none !important;
    }

    .cb-site-header,
    .cb-site-header .header2,
    #cb-header-nav-panel {
        background: var(--cb-header-bg) !important;
        color: var(--cb-header-text);
    }
    
    .top_info .cb-theme-toggle {
        display: none !important;
    }
    
    .cb-site-header {
        position: sticky;
        top: var(--cb-top-info-offset);
        z-index: 10000;
        width: 100%;
        background: var(--cb-header-bg) !important;
    }

    .cb-site-header .header2 {
        position: relative;
        z-index: 2;
        min-height: 0;
        padding: 0;
        margin-bottom: 0;
        border-bottom: none;
        background: var(--cb-header-bg) !important;
    }

    .cb-site-header .header2 .containeraaa {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 20px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 14px 24px 12px;
        float: none;
        box-sizing: border-box;
    }

    .cb-site-header .number_block {
        display: none !important;
    }

    .cb-header-pc-brand {
        display: flex;
        align-items: center;
        gap: 0;
        flex-shrink: 0;
    }

    .cb-site-header.cb-header--compact .cb-header-pc-brand {
        gap: 10px;
    }

    .cb-site-header .logo2 {
        width: auto;
        float: none;
        padding: 0;
        flex-shrink: 0;
    }

    .cb-site-header .logo2 .main_logo777 {
        height: 52px !important;
        width: auto !important;
        max-width: 210px;
        display: block;
        transition: height 0.15s ease;
    }

    .cb-header-nav-toggle {
        display: inline-flex;
        flex-shrink: 0;
        width: 0;
        height: 32px;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        color: var(--cb-header-text);
        cursor: pointer;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: width 0.15s ease, opacity 0.15s ease, visibility 0.15s ease;
    }
    
    .cb-site-header.cb-header--compact .cb-header-nav-toggle {
        width: 32px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .cb-header-nav-toggle-bars {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 15px;
        flex-shrink: 0;
    }
    
    .cb-header-nav-toggle-bars span {
        display: block;
        height: 2px;
        background: #ffffff;
        border-radius: 1px;
    }

    .cb-header-pc-toolbar {
        display: flex;
        justify-content: center;
        min-width: 0;
    }

    .cb-site-header .header_search {
        width: 100%;
        max-width: 700px;
        margin: 0 auto;
        padding: 0;
        clear: none;
    }

    .cb-site-header .header_search form {
        position: relative;
        margin: 0;
    }

    .cb-site-header .d5 {
        background: transparent;
    }

    .cb-site-header .d5 input {
        width: 100% !important;
        height: 44px;
        padding: 0 44px 0 18px !important;
        border: 1px solid var(--cb-header-input-border) !important;
        border-radius: 10px;
        background: var(--cb-header-input-bg) !important;
        color: var(--cb-header-text) !important;
        font-size: 15px;
        box-shadow: var(--cb-header-shadow);
        box-sizing: border-box;
    }

    .cb-site-header .d5 input::placeholder {
        color: var(--cb-header-muted);
    }

    .cb-site-header .d5 input:focus {
        border-color: #666 !important;
        outline: none;
    }

    .cb-site-header .d5 form.cb-header-search-has-value input {
        padding: 0 68px 0 18px !important;
    }

    .cb-site-header .cb-header-search-clear {
        position: absolute;
        top: 50%;
        right: 40px;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        background: transparent;
        color: #ffffff;
        opacity: 0.75;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .cb-site-header .cb-header-search-clear:hover {
        opacity: 1;
    }

    .cb-site-header .cb-header-search-clear[hidden] {
        display: none !important;
    }

    .cb-site-header .d5 button[name="search"] {
        top: 50%;
        right: 12px;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        margin: 0;
        opacity: 0.75;
    }

    .cb-header-pc-actions {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        justify-self: end;
    }

    .cb-header-pc-actions .cb-theme-toggle {
        position: static !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        min-width: 42px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        order: 1;
    }

    .cb-header-pc-actions .cb-theme-toggle:hover,
    .cb-header-pc-actions .cb-theme-toggle:active,
    html[data-theme="dark"] .cb-header-pc-actions .cb-theme-toggle:hover,
    html[data-theme="dark"] .cb-header-pc-actions .cb-theme-toggle:active {
        transform: none;
        background: rgba(255, 255, 255, 0.05);
        border: none;
        opacity: 1;
    }

    .cb-header-pc-actions .cb-header-pc-icon[href="/favorites"] {
        order: 2;
    }

    .cb-header-pc-actions .cb-header-pc-icon[href="/cart"] {
        order: 3;
    }

    html[data-theme="dark"] .cb-header-pc-actions .cb-theme-toggle {
        width: 42px;
        height: 42px;
        border: none;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
    }

    html[data-theme="dark"] .cb-header-pc-actions .cb-theme-toggle .cb-theme-toggle-icon {
        width: 26px;
        height: 26px;
    }

    .cb-header-pc-actions .cb-theme-toggle-icon {
        width: 26px;
        height: 26px;
    }

    .cb-header-pc-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        text-decoration: none;
    }

    .cb-header-pc-icon:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .cb-header-pc-icon img {
        display: block;
        width: 26px;
        height: 26px;
    }

    .cb-header-pc-actions .cb-header-pc-icon.cb-header-fav-link {
        font-size: 26px;
        line-height: 1;
        color: #ffbb00;
    }
    
    .cb-header-pc-actions .cb-header-fav-star-icon {
        display: block;
        width: 1em;
        height: 1em;
    }
    
    .cb-header-pc-actions .cb-header-fav-star-icon__outline {
        opacity: 0;
    }
    
    .cb-header-pc-actions .cb-header-fav-star-icon__filled {
        opacity: 1;
    }

    .cb-header-pc-actions .cb-header-pc-icon[href="/cart"] img {
        width: 30px;
        height: 30px;
    }

    .cb-header-pc-icon .cb-header-pc-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        border-radius: 9px;
        background: #ee0000;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 17px;
        text-align: center;
        box-sizing: border-box;
    }

    .cb-header-pc-icon .cb-header-pc-badge:empty {
        display: none;
    }

    /* Навигация — слева под логотипом */
    #cb-header-nav-panel {
        position: relative;
        z-index: 1;
        min-height: 0;
        text-align: left;
        border-bottom: none;
        max-height: 52px;
        overflow: hidden;
        background: var(--cb-header-bg) !important;
    }

    #cb-header-nav-panel #menu {
        float: none;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0;
        max-width: 1200px;
        margin: 0 auto;
        padding: 4px 24px 0px 24px ;
        box-sizing: border-box;
    }

    #cb-header-nav-panel #menu > li {
        display: block;
        margin-right: 0;
    }

    #cb-header-nav-panel #menu > li:first-child,
    #cb-header-nav-panel #menu > li.cb-header-pc-menu-skip {
        display: none !important;
    }

    #cb-header-nav-panel #menu a {
        display: block;
        padding: 10px 15px 8px;
        line-height: 1.2;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--cb-header-text) !important;
        border-radius: 0;
        border-bottom: 2px solid transparent;
    }

    #cb-header-nav-panel #menu a:hover {
        color: var(--cb-header-text) !important;
        background: transparent;
        border-bottom-color: rgba(255, 187, 0, 0.35);
    }

    #cb-header-nav-panel #menu a.cb-header-nav-active,
    #cb-header-nav-panel #menu li.cb-header-nav-active > a {
        color: var(--cb-header-text) !important;
        font-weight: 400;
        border-bottom-color: var(--cb-header-accent);
    }

    #cb-header-nav-panel #menu .a_red_noline a {
        color: var(--cb-header-text) !important;
        font-weight: 400;
    }

    #cb-header-nav-panel #menu li.cb-header-nav-hidden {
        display: none !important;
    }

    #cb-header-nav-panel .cb-header-pc-accent {
        display: block !important;
        height: 1px !important;
        background-color: #222222 !important;
    }

    .cb-site-header .menu1 {
        display: none !important;
    }

    .cb-header-mobile-nav-footer {
        display: none !important;
    }

    .cb-site-header.cb-header--compact {
        background: var(--cb-header-bg) !important;
    }
    
    .cb-site-header.cb-header--compact .header2 .containeraaa {
        padding-top: 10px;
        padding-bottom: 10px;
        transition: padding 0.15s ease;
    }
    
    .cb-site-header.cb-header--compact .logo2 .main_logo777 {
        height: 46px !important;
    }
    
    .cb-site-header.cb-header--compact #cb-header-nav-panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
    }
    
    .cb-site-header.cb-header--compact .cb-header-pc-accent {
        display: none !important;
    }
    
    .cb-site-header.cb-header--compact.cb-header-nav-open {
        overflow: visible;
    }
    
    .cb-site-header.cb-header--compact.cb-header-nav-open #cb-header-nav-panel {
        max-height: none;
        opacity: 1;
        overflow: visible;
        pointer-events: auto;
        background: var(--cb-header-bg) !important;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
        z-index: 10001;
    }
    
    .cb-site-header.cb-header--compact.cb-header-nav-open #cb-header-nav-panel .cb-header-pc-accent {
        display: none !important;
    }

    /*.cb-site-header.cb-header--compact.cb-header-nav-open .cb-header-pc-accent {
        display: block !important;
    }

    .cb-site-header.cb-header--compact .header2 .containeraaa {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .cb-site-header.cb-header--compact .d5 input {
        height: 40px;
        font-size: 14px;
    }

    .cb-site-header.cb-header--compact .logo2 .main_logo777 {
        height: 46px;
    }*/

    .cb-site-header .search-suggest-dropdown {
        z-index: 10005;
    }
}

@media (max-width: 768px) {
    :root {
        --cb-top-info-offset: 0px;
    }

    body > noindex,
    .top_info {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .wrapper {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .display610px {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .cb-site-header .mobile_block {
        display: none !important;
    }

    .cb-site-header,
    .cb-site-header .header2,
    #cb-header-nav-panel {
        background: var(--cb-header-bg) !important;
        color: var(--cb-header-text);
    }

    .top_info .cb-theme-toggle {
        display: none !important;
    }

    .cb-site-header {
        position: sticky;
        top: 0 !important;
        z-index: 10000;
        width: 100%;
        margin-top: 0 !important;
    }

    .cb-site-header .header2 {
        position: relative !important;
        top: 0 !important;
        left: auto !important;
        z-index: 10002;
        min-height: 0;
        padding: 0;
        margin: 0;
        margin-bottom: 0;
        border-bottom: none !important;
    }

    .cb-site-header.cb-header-mobile-nav-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10000;
    }

    .cb-site-header .header2 .containeraaa {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        max-width: none;
        margin: 0;
        padding: 10px 12px;
        float: none;
        box-sizing: border-box;
    }

    .cb-header-pc-brand,
    .cb-header-pc-actions,
    .cb-site-header .logo2 {
        display: flex !important;
    }

    .cb-header-pc-toolbar,
    .cb-site-header .number_block {
        display: none !important;
    }

    .cb-header-nav-toggle {
        display: inline-flex !important;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 32px !important;
        height: 32px;
        margin-right: 2px;
        padding: 0;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-appearance: none;
        appearance: none;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible;
        transition: width 0.15s ease, opacity 0.15s ease, visibility 0.15s ease;
    }

    .cb-header-nav-toggle:hover,
    .cb-header-nav-toggle:active,
    .cb-header-nav-toggle:focus,
    .cb-header-nav-toggle.is-active {
        background: transparent !important;
        box-shadow: none !important;
        outline: none;
    }

    .cb-header-nav-toggle-bars {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 15px;
        flex-shrink: 0;
    }

    .cb-header-nav-toggle-bars span {
        display: block;
        height: 2px;
        background: #ffffff !important;
        border-radius: 1px;
    }

    .cb-site-header.cb-header-resizing,
    #cb-header-nav-panel,
    .cb-site-header.cb-header-resizing .header2,
    .cb-site-header.cb-header-resizing::before {
        transition: none !important;
    }

    #cb-site-header:not(.cb-header-mobile-nav-open) #cb-header-nav-panel {
        visibility: hidden;
        transition: none !important;
    }
    
    #cb-site-header.cb-header-mobile-nav-open #cb-header-nav-panel {
        visibility: visible;
        transition: transform 0.28s ease;
    }

    .cb-header-pc-brand {
        align-items: center;
        gap: 8px;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cb-site-header .logo2 {
        width: auto;
        float: none;
        padding: 0;
        flex-shrink: 1;
        min-width: 0;
    }

    .cb-site-header .logo2 .main_logo777 {
        height: 40px;
        width: auto;
        max-width: 180px;
        display: block;
    }

    .cb-header-pc-actions {
        align-items: center;
        gap: 0;
        flex-shrink: 0;
    }

    .cb-header-pc-actions .cb-theme-toggle {
        position: static;
        right: auto;
        top: auto;
        transform: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        min-width: 38px;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
        cursor: pointer;
        order: 1;
    }

    .cb-header-pc-actions .cb-theme-toggle:hover,
    .cb-header-pc-actions .cb-theme-toggle:active,
    html[data-theme="dark"] .cb-header-pc-actions .cb-theme-toggle:hover,
    html[data-theme="dark"] .cb-header-pc-actions .cb-theme-toggle:active {
        transform: none;
        background: rgba(255, 255, 255, 0.05);
        border: none;
        opacity: 1;
    }

    html[data-theme="dark"] .cb-header-pc-actions .cb-theme-toggle {
        width: 38px;
        height: 38px;
        border: none;
        border-radius: 50%;
        background: transparent;
        box-shadow: none;
    }

    .cb-header-pc-actions .cb-theme-toggle-icon {
        width: 20px;
        height: 20px;
    }

    html[data-theme="dark"] .cb-header-pc-actions .cb-theme-toggle .cb-theme-toggle-icon {
        width: 20px;
        height: 20px;
    }

    .cb-header-pc-actions .cb-header-pc-icon[href="/favorites"] {
        order: 2;
    }

    .cb-header-pc-actions .cb-header-pc-icon[href="/cart"] {
        order: 3;
    }

    .cb-header-pc-actions .cb-header-mobile-search-trigger {
        order: 4;
    }

    .cb-header-pc-icon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        text-decoration: none;
    }

    .cb-header-pc-icon:hover {
        background: rgba(255, 255, 255, 0.05);
    }

    .cb-header-pc-icon img {
        display: block;
        width: 20px;
        height: 20px;
    }

    .cb-header-pc-actions .cb-header-pc-icon[href="/favorites"] img {
        width: 20px;
        height: 20px;
    }

    .cb-header-pc-actions .cb-header-pc-icon.cb-header-fav-link {
        font-size: 20px;
        line-height: 1;
        color: #ffbb00;
    }
    
    .cb-header-pc-actions .cb-header-fav-star-icon {
        display: block;
        width: 1em;
        height: 1em;
    }
    
    .cb-header-pc-actions .cb-header-fav-star-icon__outline {
        opacity: 0;
    }
    
    .cb-header-pc-actions .cb-header-fav-star-icon__filled {
        opacity: 1;
    }

    .cb-header-pc-actions .cb-header-pc-icon[href="/cart"] img {
        width: 24px;
        height: 24px;
    }

    .cb-header-pc-actions .cb-header-mobile-search-trigger img {
        width: 20px;
        height: 20px;
    }

    .cb-header-pc-icon .cb-header-pc-badge {
        position: absolute;
        top: 0;
        right: 0;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 8px;
        background: #ee0000;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        box-sizing: border-box;
    }

    .cb-header-pc-icon .cb-header-pc-badge:empty {
        display: none;
    }

    #cb-header-nav-panel {
        display: flex !important;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(270px, 86vw);
        max-height: none;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 10001;
        transform: translateX(-100%);
        pointer-events: none;
        box-shadow: none;
    }

    #cb-site-header.cb-header-mobile-nav-open #cb-header-nav-panel {
        transform: translateX(0);
        pointer-events: auto;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45);
    }

    html[data-theme="dark"] #cb-header-nav-panel {
        background: var(--cb-bg-surface, #1e1e1e) !important;
    }

    html[data-theme="dark"] .cb-header-mobile-nav-footer {
        border-top-color: var(--cb-border, #3a3a3a);
    }

    .cb-site-header .header1 #menu {
        float: none;
        display: block;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: calc(var(--cb-header-bar-height, 60px) + 8px) 0 16px;
        box-sizing: border-box;
    }

    .cb-site-header .header1 #menu > li {
        display: block;
        width: 100%;
        margin: 0;
    }

    .cb-site-header .header1 #menu > li:first-child,
    .cb-site-header .header1 #menu > li.cb-header-pc-menu-skip {
        display: none !important;
    }

    .cb-site-header .header1 #menu a {
        display: block;
        padding: 14px 20px;
        line-height: 1.3;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--cb-header-text) !important;
        border-radius: 0;
        border-bottom: none;
        border-left: 3px solid transparent;
        white-space: normal;
    }

    .cb-site-header .header1 #menu a.cb-header-nav-active,
    .cb-site-header .header1 #menu li.cb-header-nav-active > a {
        border-left-color: var(--cb-header-accent);
        border-bottom-color: transparent;
    }

    .cb-header-mobile-nav-footer {
        display: block;
        margin-top: auto;
        padding: 16px 20px 24px;
        border-top: 1px solid #222222;
        box-sizing: border-box;
    }

    .cb-header-mobile-nav-phone {
        display: block;
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.3;
        color: var(--cb-header-text) !important;
        text-decoration: none;
    }

    .cb-header-mobile-nav-phone:hover,
    .cb-header-mobile-nav-phone:active {
        color: var(--cb-header-accent) !important;
    }

    .cb-header-mobile-nav-address {
        font-size: 14px;
        line-height: 1.35;
        color: var(--cb-header-muted);
    }

    .cb-site-header .cb-header-pc-accent {
        display: none !important;
    }

    .cb-site-header .menu1 {
        display: none !important;
    }

    .cb-site-header .search-suggest-dropdown {
        z-index: 10005;
    }
}