/* MK header rebuild: isolated from legacy Gavick IDs and grid selectors. */
#mkHeader,
#mkHeader * { box-sizing: border-box; }

#mkHeader {
    position: fixed;
    z-index: 10020;
    top: 28px;
    left: 50%;
    width: 100vw;
    margin: 0;
    padding: 10px 16px 0;
    transform: translateX(-50%);
    color: #20252b;
    font-family: "GothamProRegular", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

#mkHeaderBar {
    position: fixed;
    z-index: 10021;
    top: 0;
    right: 0;
    left: 0;
    display: block;
    width: 100vw;
    min-height: 28px;
    height: 28px;
    overflow: hidden;
    background: #050505;
    color: #fff;
    text-align: center;
}

#mkHeaderBar .box,
#mkHeaderBar .content,
#mkHeaderBar p {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: 10px/28px "GothamProMedium", Arial, sans-serif !important;
    letter-spacing: .075em;
}

#mkHeaderBar a { color: inherit; text-decoration: none; }

#mkHeader .mk-header__fog {
    display: none;
}

#mkHeader .mk-header__surface {
    position: relative;
    z-index: 2;
    width: min(1460px, calc(100% - 2px));
    min-height: 66px;
    margin: 0 auto;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, backdrop-filter .24s ease;
}

#mkHeader .mk-header__inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    min-height: 64px;
    padding: 0 24px;
    gap: 16px;
}

#mkHeader .mk-header__nav { grid-column: 1; min-width: 0; }
#mkHeader .mk-header__menu { min-width: 0; }

#mkHeader .mk-header__logo {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -50%);
    line-height: 0;
}

#mkHeader .mk-header__logo img {
    display: block;
    width: auto;
    max-width: 226px;
    height: 27px;
    max-height: 27px;
    object-fit: contain;
}

#mkHeader .mk-header__tools {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    gap: 13px;
}

#mkHeader .mk-header__burger,
#mkHeader .mk-header__search-toggle { display: none; }

/* Native Gavick menu HTML, re-laid only inside the new header. */
#mkHeader .mk-header__menu .gkMenu,
#mkHeader .mk-header__menu .gkMenu ul {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}

#mkHeader .mk-header__menu .gkMenu > ul {
    display: flex !important;
    align-items: center !important;
    gap: clamp(12px, 1.18vw, 23px) !important;
    white-space: nowrap;
}

#mkHeader .mk-header__menu .gkMenu > ul > li {
    position: relative !important;
    display: block !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: 11px/1.12 "GothamProMedium", Arial, sans-serif !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
}

#mkHeader .mk-header__menu .gkMenu > ul > li:before,
#mkHeader .mk-header__menu .gkMenu > ul > li:after { display: none !important; }

#mkHeader .mk-header__menu .gkMenu > ul > li > a {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
    text-shadow: none !important;
}

#mkHeader .mk-header__menu .gkMenu > ul > li > a:hover,
#mkHeader .mk-header__menu .gkMenu > ul > li.active > a { opacity: .58; }

#mkHeader .mk-header__menu .gkMenu .childcontent {
    position: absolute !important;
    z-index: 10030 !important;
    top: 100% !important;
    left: 0 !important;
    display: none !important;
    width: max-content !important;
    min-width: 190px !important;
    max-width: 310px !important;
    margin: 10px 0 0 !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(31, 37, 42, .10) !important;
    border-radius: 8px !important;
    background: rgba(250, 251, 251, .97) !important;
    box-shadow: 0 14px 30px rgba(15, 22, 28, .13) !important;
}

#mkHeader .mk-header__menu .gkMenu > ul > li:hover > .childcontent,
#mkHeader .mk-header__menu .gkMenu > ul > li:focus-within > .childcontent { display: block !important; }

#mkHeader .mk-header__menu .childcontent li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    float: none !important;
}

#mkHeader .mk-header__menu .childcontent a {
    display: block !important;
    padding: 9px 0 !important;
    color: #20252b !important;
    font: 11px/1.25 "GothamProRegular", Arial, sans-serif !important;
    letter-spacing: .025em !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
}


/* Interaction repair: the old 10px visual gap made the dropdown disappear before a cursor
   could travel from its parent item into the links. Keep the panel flush and above the page. */
#mkHeader .mk-header__surface,
#mkHeader .mk-header__inner,
#mkHeader .mk-header__nav,
#mkHeader .mk-header__menu,
#mkHeader .mk-header__menu .gkMenu { overflow: visible !important; }
#mkHeader .mk-header__nav { position: relative !important; z-index: 12 !important; }
#mkHeader .mk-header__menu .gkMenu .childcontent {
    top: calc(100% - 1px) !important;
    margin: 0 !important;
    pointer-events: auto !important;
}
#mkHeader .mk-header__menu .gkMenu .childcontent a { position: relative !important; z-index: 1 !important; }

/* Module shells only. No global input / button reset. */
#mkHeader .mk-header__phone,
#mkHeader .mk-header__search,
#mkHeader .mk-header__lang,
#mkHeader .mk-header__cart { min-width: 0; }

#mkHeader .mk-header__phone .box,
#mkHeader .mk-header__phone .content,
#mkHeader .mk-header__search .box,
#mkHeader .mk-header__search .content,
#mkHeader .mk-header__lang .box,
#mkHeader .mk-header__lang .content {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#mkHeader .mk-header__phone {
    font: 12px/1 "GothamProRegular", Arial, sans-serif;
    white-space: nowrap;
}

#mkHeader .mk-header__phone h2,
#mkHeader .mk-header__phone .header { display: none !important; }

#mkHeader .mk-header__phone ul,
#mkHeader .mk-header__phone li {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1 !important;
    list-style: none !important;
}

#mkHeader .mk-header__phone li:not(:last-child) { display: none !important; }

/* Desktop search: intentionally compact, like a label with a loupe rather than a large pill. */
#mkHeader .mk-header__search { width: 116px; }
#mkHeader .mk-header__search form { position: relative; height: 30px; margin: 0 !important; padding: 0 !important; }

#mkHeader .mk-header__search input[type="text"],
#mkHeader .mk-header__search input[type="search"],
#mkHeader .mk-header__search #mod-search-searchword {
    width: 100% !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 0 0 25px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(34, 39, 43, .30) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #25292c !important;
    font: 12px/29px "GothamProRegular", Arial, sans-serif !important;
    box-shadow: none !important;
}

#mkHeader .mk-header__search button,
#mkHeader .mk-header__search input[type="image"],
#mkHeader .mk-header__search input[type="submit"] {
    position: absolute !important;
    z-index: 2 !important;
    top: 8px !important;
    left: 0 !important;
    right: auto !important;
    display: block !important;
    width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-color: transparent !important;
    opacity: .76 !important;
}

#mkHeader .mk-header__lang .mod-languages ul {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
#mkHeader .mk-header__lang .mod-languages li { display: block !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
#mkHeader .mk-header__lang .mod-languages img { display: none !important; }
#mkHeader .mk-header__lang .mod-languages a { display: block !important; color: inherit !important; font: 11px/1 "GothamProMedium", Arial, sans-serif !important; letter-spacing: .06em !important; text-decoration: none !important; opacity: .60; }
#mkHeader .mk-header__lang .mod-languages .lang-active a { opacity: 1 !important; }

/* The real JoomShopping AJAX-cart remains intact; only its placement changes. */
#mkHeader .mk-header__cart { position: relative; display: block; min-width: 31px; }
#mkHeader .mk-header__cart #jshop_module_cart,
#mkHeader .mk-header__cart .mycart_wrapp,
#mkHeader .mk-header__cart .mycart_refresh_form,
#mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) {
    display: block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: inherit !important;
}

#mkHeader .mk-header__cart .click_mycart_name {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 31px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

#mkHeader .mk-header__cart .mycart_headertxt,
#mkHeader .mk-header__cart .mycart_header_name,
#mkHeader .mk-header__cart .click_mycart_name > span:not(.mycart_count_prod) { display: none !important; }

#mkHeader .mk-header__cart .click_mycart_name a,
#mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) > a {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
/* Both module variants are covered: collapsed and non-collapsed carts. */
#mkHeader .mk-header__cart .click_mycart_name img,
#mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) > a > img {
    display: block !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 18px !important;
    max-height: 18px !important;
    margin: 0 4px 0 0 !important;
    object-fit: contain !important;
}
#mkHeader .mk-header__cart .mycart_count_prod { display: inline-block !important; margin: 0 !important; padding: 0 !important; color: inherit !important; font: 11px/1 "GothamProRegular", Arial, sans-serif !important; }

/* The module's own display:none and slideToggle remain authoritative here. */
#mkHeader .mk-header__cart .mycart_content {
    position: absolute !important;
    z-index: 10080 !important;
    top: 39px !important;
    right: 0 !important;
    min-width: 250px !important;
    max-width: min(300px, calc(100vw - 24px)) !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, .98) !important;
    color: #20252b !important;
    box-shadow: 0 14px 30px rgba(10, 14, 20, .18) !important;
}
#mkHeader .mk-header__cart .mycart_content a { color: #20252b !important; }

/* Cart counter is rendered by the real module. It is a badge, not the old parenthesized text. */
#mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 20px !important;
}
#mkHeader .mk-header__cart .mycart_count_prod {
    position: absolute !important;
    z-index: 3 !important;
    top: -6px !important;
    right: -9px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 15px !important;
    height: 15px !important;
    margin: 0 !important;
    padding: 0 3px !important;
    border: 1px solid rgba(255,255,255,.92) !important;
    border-radius: 999px !important;
    background: #1d2227 !important;
    color: #fff !important;
    font: 8px/13px "GothamProMedium", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: nowrap !important;
}
#mkHeader .mk-header__cart .mycart_count_prod.is-empty { display: none !important; }
#mkHeader .mk-header__cart .mycart_content {
    max-height: min(440px, calc(100vh - 108px)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
}

/* Home, first screen only: transparent surface + a soft continuation of the photo. */
body.mk-home #mkHeader:not(.is-scrolled) { color: rgba(255, 255, 255, .97); }
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__fog {
    position: fixed;
    z-index: 0;
    top: -28px;
    left: 0;
    display: block;
    width: 100%;
    height: 200px;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 7, 11, .58) 0%, rgba(2, 7, 11, .34) 42%, rgba(2, 7, 11, .10) 75%, rgba(2, 7, 11, 0) 100%);
}
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__surface { background: transparent; }
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__logo img { filter: brightness(0) invert(1); }
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__search input[type="text"],
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__search input[type="search"],
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__search #mod-search-searchword {
    border-color: rgba(255,255,255,.58) !important;
    background: transparent !important;
    color: #fff !important;
}
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__search input::placeholder { color: rgba(255,255,255,.82) !important; }

#mkHeader.is-scrolled .mk-header__surface,
body:not(.mk-home) #mkHeader .mk-header__surface {
    border-color: rgba(255, 255, 255, .67);
    background: rgba(248, 249, 249, .68);
    box-shadow: 0 8px 24px rgba(12, 19, 26, .08);
    -webkit-backdrop-filter: blur(17px) saturate(120%);
    backdrop-filter: blur(17px) saturate(120%);
}

body:not(.mk-home) #gkPageContent { padding-top: 86px; }

/* Native off-canvas source and functions remain untouched; only its presentation is modernized. */
#off-canvas-menu {
    position: fixed !important;
    z-index: 2147481000 !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: min(360px, 88vw) !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    padding: 66px 24px 28px !important;
    overflow-y: auto !important;
    background: rgba(248, 249, 249, .98) !important;
    color: #20262a !important;
    box-shadow: 18px 0 42px rgba(0, 0, 0, .20) !important;
    transform: translateX(-105%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), opacity .18s ease, visibility .28s ease !important;
    visibility: hidden !important;
}
#off-canvas-menu.open,
body.mk-offcanvas-open #off-canvas-menu {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}
#off-canvas-menu .close-button {
    position: absolute !important;
    z-index: 4 !important;
    top: 18px !important;
    right: 18px !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
#off-canvas-menu .close-button:before,
#off-canvas-menu .close-button:after { content: "" !important; position: absolute !important; top: 16px !important; left: 3px !important; width: 28px !important; height: 1.5px !important; background: #20262a !important; }
#off-canvas-menu .close-button:before { transform: rotate(45deg) !important; }
#off-canvas-menu .close-button:after { transform: rotate(-45deg) !important; }
#off-canvas-menu nav,
#off-canvas-menu nav .menu,
#off-canvas-menu nav ul { display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; list-style: none !important; }
#off-canvas-menu nav li { display: block !important; float: none !important; margin: 0 !important; padding: 0 !important; border-bottom: 1px solid rgba(31,37,42,.10) !important; }
#off-canvas-menu nav a { display: block !important; padding: 14px 0 !important; color: #20262a !important; background: transparent !important; font: 15px/1.25 "GothamProRegular", Arial, sans-serif !important; letter-spacing: .03em !important; text-decoration: none !important; }
#off-canvas-menu nav .childcontent { display: none !important; }

@media (max-width: 1100px) {
    #mkHeader .mk-header__phone { display: none; }
    #mkHeader .mk-header__search { width: min(180px, 21vw); }
    #mkHeader .mk-header__inner { padding-left: 18px; padding-right: 18px; }
    #mkHeader .mk-header__menu .gkMenu > ul { gap: 13px !important; }
    #mkHeader .mk-header__menu .gkMenu > ul > li { font-size: 10px !important; }
}

@media (max-width: 920px), body[data-mobile="true"] {
    #mkHeader { top: 28px; padding: 0; }
    #mkHeader .mk-header__surface { width: 100%; min-height: 62px; border-width: 0; border-radius: 0; }
    #mkHeader .mk-header__inner { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; min-height: 62px; padding: 0 14px; gap: 10px; }
    #mkHeader .mk-header__nav { display: none; }
    #mkHeader .mk-header__burger { grid-column: 1; position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 38px; height: 42px; margin: 0; padding: 0; border: 0; background: transparent; color: #20252b; cursor: pointer; }
    #mkHeader .mk-header__burger span { display: block; width: 23px; height: 1.5px; margin: 3px 0; background: currentColor; }
    #mkHeader .mk-header__logo { grid-column: 2; position: relative; top: auto; left: auto; justify-self: center; transform: none; }
    #mkHeader .mk-header__logo img { max-width: min(142px, 38vw); height: 18px; max-height: 18px; }
    #mkHeader .mk-header__tools { grid-column: 3; gap: 10px; }
    #mkHeader .mk-header__phone,
    #mkHeader .mk-header__lang { display: none; }
    #mkHeader .mk-header__search-toggle { position: relative; display: block; width: 22px; height: 34px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
    #mkHeader .mk-header__search-toggle:before { content: ""; position: absolute; top: 8px; left: 2px; width: 11px; height: 11px; border: 1.6px solid currentColor; border-radius: 50%; }
    #mkHeader .mk-header__search-toggle:after { content: ""; position: absolute; top: 20px; left: 14px; width: 7px; height: 1.6px; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
    /* The source field stays mounted for the real poisk module, but is never opened inside the mobile header.
       The loupe calls that module's existing full-screen mksp5 panel. */
    #mkHeader .mk-header__search { display: none !important; }
    #mkHeader .mk-header__cart { min-width: 22px; }
    #mkHeader .mk-header__cart .click_mycart_name img,
    #mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) > a > img {
        width: 17px !important;
        min-width: 17px !important;
        max-width: 17px !important;
        height: 17px !important;
        max-height: 17px !important;
    }
    #mkHeader .mk-header__cart .mycart_count_prod { display: inline-flex !important; }
    #mkHeader .mk-header__cart .mycart_content { top: 42px !important; right: -9px !important; min-width: 245px !important; max-height: calc(100dvh - 88px) !important; }
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__fog { display: none; }
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__surface { background: transparent; }
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__burger,
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__search-toggle,
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__cart { color: #fff; }
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__logo img { filter: brightness(0) invert(1); }
    body:not(.mk-home) #gkPageContent { padding-top: 78px; }
}

/* v4.2 final visual tuning — geometry stays as in v4.1. */
/* Slightly lighter glass: the photo remains more present without losing contrast. */
#mkHeader.is-scrolled .mk-header__surface,
body:not(.mk-home) #mkHeader .mk-header__surface {
    background: rgba(248, 249, 249, .56) !important;
    box-shadow: 0 8px 24px rgba(12, 19, 26, .065) !important;
}

/* The real cart image is deliberately a little larger; badge remains attached to its real counter. */
#mkHeader .mk-header__cart { min-width: 30px !important; }
#mkHeader .mk-header__cart .click_mycart_name img,
#mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) > a > img {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    height: 24px !important;
    max-height: 24px !important;
    margin-right: 0 !important;
}
#mkHeader .mk-header__cart .mycart_count_prod {
    top: -6px !important;
    right: -8px !important;
}

/* Internal pages need air under the fixed header; only content starts lower. */
body:not(.mk-home) #gkPageContent { padding-top: 108px !important; }

@media (max-width: 920px), body[data-mobile="true"] {
    /* Mobile keeps the familiar v4.1 layout; only the actual bag grows. */
    #mkHeader .mk-header__cart { min-width: 28px !important; }
    #mkHeader .mk-header__cart .click_mycart_name img,
    #mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) > a > img {
        width: 23px !important;
        min-width: 23px !important;
        max-width: 23px !important;
        height: 23px !important;
        max-height: 23px !important;
    }
    #mkHeader .mk-header__tools { gap: 11px !important; }
    #mkHeader .mk-header__cart .mycart_count_prod {
        top: -6px !important;
        right: -8px !important;
    }

    /* Home only, before scroll: a quiet photo-like darkening behind the white mobile controls. */
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__fog {
        position: fixed !important;
        z-index: 0 !important;
        top: -28px !important;
        left: 0 !important;
        display: block !important;
        width: 100% !important;
        height: 142px !important;
        pointer-events: none !important;
        background: linear-gradient(180deg, rgba(2, 7, 11, .54) 0%, rgba(2, 7, 11, .32) 48%, rgba(2, 7, 11, .08) 82%, rgba(2, 7, 11, 0) 100%) !important;
    }

    body:not(.mk-home) #gkPageContent { padding-top: 96px !important; }
}

/* v4.3 — home hero depth + lighter glass. No markup or interaction changes. */
/* The sticky glass becomes a touch more transparent, while still keeping dark text legible. */
#mkHeader.is-scrolled .mk-header__surface,
body:not(.mk-home) #mkHeader .mk-header__surface {
    background: rgba(248, 249, 249, .48) !important;
    box-shadow: 0 8px 24px rgba(12, 19, 26, .055) !important;
}

/* Home / mobile only / before scroll: a deeper continuous fade from the black promo bar into the hero image. */
@media (max-width: 920px), body[data-mobile="true"] {
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__fog {
        top: -28px !important;
        height: 178px !important;
        background: linear-gradient(
            180deg,
            rgba(2, 7, 11, .82) 0%,
            rgba(2, 7, 11, .68) 24%,
            rgba(2, 7, 11, .43) 52%,
            rgba(2, 7, 11, .19) 76%,
            rgba(2, 7, 11, 0) 100%
        ) !important;
    }
}

/* v4.4 — visual correction only. Search, cart and navigation scripts are untouched. */

/* Desktop home: the shade now begins as a true continuation of HeaderBar black,
   then dissolves into the photograph instead of beginning with a visible seam. */
@media (min-width: 921px) {
    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__fog {
        top: -28px !important;
        height: 224px !important;
        background: linear-gradient(
            180deg,
            rgba(2, 7, 11, .99) 0%,
            rgba(2, 7, 11, .95) 17%,
            rgba(2, 7, 11, .78) 38%,
            rgba(2, 7, 11, .51) 60%,
            rgba(2, 7, 11, .23) 80%,
            rgba(2, 7, 11, 0) 100%
        ) !important;
    }

    /* Return desktop glass to the softer v4.2 density. */
    #mkHeader.is-scrolled .mk-header__surface,
    body:not(.mk-home) #mkHeader .mk-header__surface {
        background: rgba(248, 249, 249, .56) !important;
        box-shadow: 0 8px 24px rgba(12, 19, 26, .065) !important;
    }

    /* The telephone must change with the rest of the header after scroll. */
    #mkHeader.is-scrolled .mk-header__phone,
    #mkHeader.is-scrolled .mk-header__phone a,
    body:not(.mk-home) #mkHeader .mk-header__phone,
    body:not(.mk-home) #mkHeader .mk-header__phone a {
        color: #20252b !important;
    }

    /* Replace the inherited legacy bitmap/triangle with a clean loupe. */
    #mkHeader .mk-header__search button,
    #mkHeader .mk-header__search input[type="image"],
    #mkHeader .mk-header__search input[type="submit"] {
        background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.4' fill='none' stroke='%2320252b' stroke-width='1.8'/%3E%3Cpath d='m15.4 15.4 5 5' fill='none' stroke='%2320252b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center center / 15px 15px no-repeat !important;
        opacity: .82 !important;
    }
}

/* Mobile: return the v4.2 balance/placement, preserve v4.3 home fade,
   and make only the sticky milk glass a little lighter. */
@media (max-width: 920px), body[data-mobile="true"] {
    #mkHeader .mk-header__inner {
        grid-template-columns: 52px minmax(0, 1fr) auto !important;
        min-height: 62px !important;
        padding: 0 14px !important;
        gap: 10px !important;
    }

    #mkHeader.is-scrolled .mk-header__surface,
    body:not(.mk-home) #mkHeader .mk-header__surface {
        background: rgba(248, 249, 249, .37) !important;
        box-shadow: 0 8px 24px rgba(12, 19, 26, .065) !important;
    }
}

/* v4.6 — built from v4.4. Keeps v4.4 desktop/mobile fog exactly as it was.
   Only cart size, desktop menu hover and desktop Gifts visibility are adjusted. */
@media (min-width: 921px) {
    /* The last desktop navigation item is Gifts. It remains available in the native mobile off-canvas menu. */
    #mkHeader .mk-header__menu .gkMenu > ul > li:last-child {
        display: none !important;
    }

    /* Requested desktop cart size. */
    #mkHeader .mk-header__cart .click_mycart_name img,
    #mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) > a > img {
        width: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        height: 32px !important;
        max-height: 32px !important;
        margin-right: 0 !important;
    }

    /* Keep only the clean hover idea from v4.5 — no v4.5 fog/search changes. */
    #mkHeader .mk-header__menu .gkMenu > ul > li > a {
        position: relative !important;
        transition: opacity .18s ease !important;
    }
    #mkHeader .mk-header__menu .gkMenu > ul > li > a:after {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 1px !important;
        height: 1px !important;
        background: currentColor !important;
        opacity: 0 !important;
        transform: scaleX(.62) !important;
        transform-origin: center !important;
        transition: opacity .18s ease, transform .18s ease !important;
    }
    #mkHeader .mk-header__menu .gkMenu > ul > li > a:hover:after,
    #mkHeader .mk-header__menu .gkMenu > ul > li.active > a:after,
    #mkHeader .mk-header__menu .gkMenu > ul > li:hover > a:after {
        opacity: .34 !important;
        transform: scaleX(1) !important;
    }
    #mkHeader .mk-header__menu .childcontent a {
        margin: 2px -6px !important;
        padding: 10px 12px !important;
        border-radius: 7px !important;
        transition: background .18s ease, color .18s ease, opacity .18s ease !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    #mkHeader .mk-header__menu .childcontent a:hover,
    #mkHeader .mk-header__menu .childcontent li:hover > a,
    #mkHeader .mk-header__menu .childcontent li.active > a {
        background: rgba(25, 32, 38, .06) !important;
        color: #20252b !important;
        opacity: 1 !important;
    }
}

@media (max-width: 920px), body[data-mobile="true"] {
    /* Requested mobile cart size. */
    #mkHeader .mk-header__cart .click_mycart_name img,
    #mkHeader .mk-header__cart .mycart_refresh_form > div:not(.mycart_content) > a > img {
        width: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        height: 28px !important;
        max-height: 28px !important;
    }
}

/* v4.8 — the hero module owns the home-page darkening.
   Header fog is disabled so the two gradients never stack. */
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__fog {
    display: none !important;
}

/* Small optical alignment only: mechanisms and layout remain untouched. */
@media (min-width: 921px) {
    #mkHeader .mk-header__search {
        transform: translateY(1px) !important;
    }
    #mkHeader .mk-header__cart {
        transform: translateY(3px) !important;
    }
}

@media (max-width: 920px), body[data-mobile="true"] {
    #mkHeader .mk-header__search-toggle {
        top: 1px !important;
    }
    #mkHeader .mk-header__cart {
        transform: translateY(2px) !important;
    }
}

/* Balance v2: hero module is the only owner of the home darkening. */
body.mk-home #mkHeader:not(.is-scrolled) .mk-header__fog { display: none !important; }


/* v4 — final optical line-up: desktop only. The mobile header remains as in the successful version. */
@media (min-width: 921px) {
    #mkHeader .mk-header__search {
        transform: translateY(-4px) !important;
    }
    #mkHeader .mk-header__cart {
        transform: translateY(0) !important;
    }
}


/* Mini-cart final action: do not send a customer straight to checkout.
   The only prominent action now opens the normal cart page. */
#mkHeader .mk-header__cart .mycart_content .mycart_checkout_link { display: none !important; }
#mkHeader .mk-header__cart .mycart_content .mk-mini-cart-go,
#mkHeader .mk-header__cart .mycart_content .mycart_link {
    clear: both !important;
    display: block !important;
    float: none !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    text-align: initial !important;
}
#mkHeader .mk-header__cart .mycart_content .mk-mini-cart-go a,
#mkHeader .mk-header__cart .mycart_content .mycart_link a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: 100% !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid #1d2227 !important;
    border-radius: 7px !important;
    background: #1d2227 !important;
    color: #fff !important;
    font: 10px/1 "GothamProMedium", Arial, sans-serif !important;
    letter-spacing: .075em !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    transition: background .18s ease, color .18s ease !important;
}
#mkHeader .mk-header__cart .mycart_content .mk-mini-cart-go a:hover,
#mkHeader .mk-header__cart .mycart_content .mycart_link a:hover {
    background: transparent !important;
    color: #1d2227 !important;
    text-decoration: none !important;
}

/* One-pixel optical correction: popup aligns with the bottom line of the header. */
@media (min-width: 921px) {
    #mkHeader .mk-header__cart .mycart_content { top: 40px !important; }
}
@media (max-width: 920px), body[data-mobile="true"] {
    #mkHeader .mk-header__cart .mycart_content { top: 43px !important; }
}

/* v4.9 — desktop right-tools optical alignment only.
   Mobile stays untouched: its current balance is already correct. */
@media (min-width: 921px) {
    /* Keep the right group breathing evenly: phone shifts only horizontally. */
    #mkHeader .mk-header__phone {
        transform: translateX(-12px) !important;
    }

    /* The real search module stays intact; only its visible line/text are lifted to the bag's optical axis. */
    #mkHeader .mk-header__search {
        transform: translateY(-14px) !important;
    }

    /* Cart is the reference point in this group, so it is intentionally not moved. */
    #mkHeader .mk-header__cart {
        transform: translateY(0) !important;
    }
}

/* MK header interaction polish: desktop only. */
@media (min-width: 921px) {
  /* A wider real link target, without enlarging the visible logo or overlapping tools. */
  #mkHeader .mk-header__logo > a {
    display: block !important;
    margin: -8px -14px !important;
    padding: 8px 14px !important;
    line-height: 0 !important;
  }

  /* Long category names stay inside a deliberate, usable dropdown width. */
  #mkHeader .mk-header__menu .gkMenu .childcontent {
    min-width: 272px !important;
    max-width: min(340px, calc(100vw - 40px)) !important;
    padding: 9px 12px !important;
  }
  #mkHeader .mk-header__menu .childcontent a {
    white-space: nowrap !important;
  }
}

/* Desktop language switcher: exactly one live Joomla module is relocated here from #gkLang.
   It retains its original, proven href values. No second rendering, no generated links. */
@media (min-width: 921px) {
    #gkLang.mk-lang-mounted { display: none !important; }

    #mkHeader .mk-header__lang-mount {
        position: relative !important;
        z-index: 40 !important;
        display: flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        order: -1 !important;
        width: max-content !important;
        min-width: max-content !important;
        height: 30px !important;
        margin: 0 48px 0 0 !important; /* plus the existing 13px flex gap = 61px to phone */
        padding: 0 !important;
        transform: none !important;
        pointer-events: auto !important;
        white-space: nowrap !important;
    }
    #mkHeader .mk-header__lang-mount .gkPage,
    #mkHeader .mk-header__lang-mount .box,
    #mkHeader .mk-header__lang-mount .content,
    #mkHeader .mk-header__lang-mount .mod-languages {
        display: inline-flex !important;
        align-items: center !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: none !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    #mkHeader .mk-header__lang-mount ul,
    #mkHeader .mk-header__lang-mount .lang-inline {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: max-content !important;
        min-width: max-content !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        white-space: nowrap !important;
    }
    #mkHeader .mk-header__lang-mount li {
        display: block !important;
        float: none !important;
        clear: none !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        list-style: none !important;
    }
    #mkHeader .mk-header__lang-mount li + li:before {
        content: "/" !important;
        display: inline-block !important;
        position: static !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 8px !important;
        color: currentColor !important;
        font: 10px/1 "GothamProRegular", Arial, sans-serif !important;
        opacity: .40 !important;
        vertical-align: middle !important;
    }
    #mkHeader .mk-header__lang-mount a,
    #mkHeader .mk-header__lang-mount span {
        display: inline-block !important;
        margin: 0 !important;
        padding: 4px 0 !important;
        color: inherit !important;
        font: 11px/1 "GothamProRegular", Arial, sans-serif !important;
        letter-spacing: .08em !important;
        line-height: 1 !important;
        text-decoration: none !important;
        vertical-align: middle !important;
        opacity: .60 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    #mkHeader .mk-header__lang-mount .lang-active a,
    #mkHeader .mk-header__lang-mount .lang-active span {
        font-family: "GothamProMedium", Arial, sans-serif !important;
        opacity: 1 !important;
    }
    #mkHeader .mk-header__lang-mount img { display: none !important; }
    #mkHeader .mk-header__lang-mount a:hover { opacity: 1 !important; }

    /* The anchor itself is the logo. Its full visible zone stays above the legacy menu layer. */
    #mkHeader .mk-header__logo {
        z-index: 22 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 250px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    #mkHeader .mk-header__logo img { pointer-events: none !important; }
}

@media (max-width: 920px), body[data-mobile="true"] {
    #mkHeader .mk-header__lang-mount { display: none !important; }
    #mkHeader .mk-header__logo {
        z-index: 22 !important;
        width: min(190px, 45vw) !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
    #mkHeader .mk-header__logo img { pointer-events: none !important; }
}


/* Search geometry repair — stable header visual, without the legacy <br> shifting
   the real search form down. The fixed launcher is recalculated after language mounting. */
@media (min-width: 921px) {
    #mkHeader .mk-header__tools {
        align-items: center !important;
    }

    /* The active poisk template begins with <div><br><form>. The old <br> is why
       the visible search sat on a second baseline and had to be moved with translateY. */
    #mkHeader .mk-header__search {
        height: 30px !important;
        transform: none !important;
        align-self: center !important;
        cursor: pointer !important;
    }
    #mkHeader .mk-header__search > div {
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0 !important;
    }
    #mkHeader .mk-header__search > div > br {
        display: none !important;
    }
    #mkHeader .mk-header__search form {
        height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #mkHeader .mk-header__phone,
    #mkHeader .mk-header__cart,
    #mkHeader .mk-header__lang-mount {
        align-self: center !important;
    }
    #mkHeader .mk-header__phone,
    #mkHeader .mk-header__cart {
        display: flex !important;
        align-items: center !important;
        height: 30px !important;
        min-height: 30px !important;
    }
    #mkHeader .mk-header__cart .click_mycart_name {
        min-height: 30px !important;
    }

    /* The full search trigger is a button, never a text field. */
    body .mksp5-launch-hit {
        cursor: pointer !important;
    }

    /* Cursor stays consistent in legacy Gavick's transparent menu gaps too. */
    #mkHeader .mk-header__menu,
    #mkHeader .mk-header__menu .gkMenu,
    #mkHeader .mk-header__menu .gkMenu > ul,
    #mkHeader .mk-header__menu .gkMenu > ul > li,
    #mkHeader .mk-header__menu .gkMenu > ul > li > a,
    #mkHeader .mk-header__menu .childcontent,
    #mkHeader .mk-header__menu .childcontent li,
    #mkHeader .mk-header__menu .childcontent a {
        cursor: pointer !important;
    }
}

/* v5.1 — visual finish only. No markup, module or interaction changes. */

/* Mini-cart: remove the thin legacy rule that cuts through the product card. */
#mkHeader .mk-header__cart .mycart_content .mycart_header_name,
#mkHeader .mk-header__cart .mycart_content table.module_cart_detail tr.even + tr.odd td,
#mkHeader .mk-header__cart .mycart_content table.module_cart_detail tr.odd + tr.even td {
    border-top: 0 !important;
    border-bottom: 0 !important;
}

@media (min-width: 921px) {
    /* One quiet visual sequence: language → search → bag → phone at the outer edge. */
    #mkHeader .mk-header__tools {
        gap: 18px !important;
    }

    #mkHeader .mk-header__lang-mount {
        order: 10 !important;
        margin-right: 0 !important;
    }

    #mkHeader .mk-header__search {
        order: 20 !important;
    }

    #mkHeader .mk-header__cart {
        order: 30 !important;
    }

    #mkHeader .mk-header__phone {
        order: 40 !important;
        margin-left: 7px !important;
        padding-left: 20px !important;
        border-left: 1px solid rgba(54, 62, 69, .19) !important;
        transform: none !important;
    }

    body.mk-home #mkHeader:not(.is-scrolled) .mk-header__phone {
        border-left-color: rgba(255,255,255,.28) !important;
    }

    /* Sticky glass: keep the exact real search geometry, add only a soft lit surface. */
    #mkHeader.is-scrolled .mk-header__search input[type="text"],
    #mkHeader.is-scrolled .mk-header__search input[type="search"],
    #mkHeader.is-scrolled .mk-header__search #mod-search-searchword,
    body:not(.mk-home) #mkHeader .mk-header__search input[type="text"],
    body:not(.mk-home) #mkHeader .mk-header__search input[type="search"],
    body:not(.mk-home) #mkHeader .mk-header__search #mod-search-searchword {
        background: linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 100%) !important;
        border-bottom-color: rgba(61, 69, 76, .37) !important;
        border-radius: 5px 5px 1px 1px !important;
        box-shadow: 0 5px 16px rgba(23, 31, 38, .07), inset 0 1px 0 rgba(255,255,255,.42) !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.38) !important;
        transition: background .24s ease, border-color .24s ease, box-shadow .24s ease !important;
    }

    #mkHeader.is-scrolled .mk-header__search button,
    #mkHeader.is-scrolled .mk-header__search input[type="image"],
    #mkHeader.is-scrolled .mk-header__search input[type="submit"],
    body:not(.mk-home) #mkHeader .mk-header__search button,
    body:not(.mk-home) #mkHeader .mk-header__search input[type="image"],
    body:not(.mk-home) #mkHeader .mk-header__search input[type="submit"] {
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.45)) !important;
    }
}


/* v5.2 — two requested desktop visual adjustments only.
   No module, markup, click zone, link, JS or mobile rule is changed. */
@media (min-width: 921px) {
    /* RU / UA moves left by exactly 10px; the rest of the row keeps its own geometry. */
    #mkHeader .mk-header__lang-mount {
        transform: translateX(-10px) !important;
    }

    /* On milk glass / internal pages, search becomes a compact illuminated control:
       no "type here" underline, only a small frosted surface around the existing real field. */
    #mkHeader.is-scrolled .mk-header__search input[type="text"],
    #mkHeader.is-scrolled .mk-header__search input[type="search"],
    #mkHeader.is-scrolled .mk-header__search #mod-search-searchword,
    body:not(.mk-home) #mkHeader .mk-header__search input[type="text"],
    body:not(.mk-home) #mkHeader .mk-header__search input[type="search"],
    body:not(.mk-home) #mkHeader .mk-header__search #mod-search-searchword {
        padding-left: 31px !important;
        border: 1px solid rgba(255, 255, 255, .56) !important;
        border-radius: 16px !important;
        background: linear-gradient(135deg, rgba(255,255,255,.50) 0%, rgba(255,255,255,.18) 100%) !important;
        box-shadow: 0 4px 14px rgba(26, 34, 41, .075), inset 0 1px 0 rgba(255,255,255,.62) !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.44) !important;
    }

    #mkHeader.is-scrolled .mk-header__search button,
    #mkHeader.is-scrolled .mk-header__search input[type="image"],
    #mkHeader.is-scrolled .mk-header__search input[type="submit"],
    body:not(.mk-home) #mkHeader .mk-header__search button,
    body:not(.mk-home) #mkHeader .mk-header__search input[type="image"],
    body:not(.mk-home) #mkHeader .mk-header__search input[type="submit"] {
        left: 8px !important;
        opacity: .92 !important;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.58)) !important;
    }
}

/* v5.3 — desktop submenu hover: soft frosted highlight, visual only.
   The link boxes keep their existing layout and interaction; only the hover surface changes. */
@media (min-width: 921px) {
    #mkHeader .mk-header__menu .childcontent a {
        position: relative !important;
        margin: 2px 4px !important;
        padding: 10px 12px !important;
        border: 1px solid transparent !important;
        border-radius: 6px !important;
        background: transparent !important;
        box-shadow: none !important;
        transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important;
    }

    #mkHeader .mk-header__menu .childcontent a:hover,
    #mkHeader .mk-header__menu .childcontent li:hover > a,
    #mkHeader .mk-header__menu .childcontent li.active > a {
        border-color: rgba(255, 255, 255, .48) !important;
        background: linear-gradient(135deg, rgba(224, 229, 232, .40) 0%, rgba(248, 249, 250, .24) 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.58) !important;
        color: #20252b !important;
        opacity: 1 !important;
    }
}

/* v5.4 — mobile drawer contact. Existing tel module, presentation only. */
@media (max-width: 920px), body[data-mobile="true"] {
    #off-canvas-menu .mk-offcanvas__phone {
        margin: 26px 0 0 !important;
        padding: 20px 0 0 !important;
        border-top: 1px solid rgba(31, 37, 42, .11) !important;
    }

    #off-canvas-menu .mk-offcanvas__phone .box,
    #off-canvas-menu .mk-offcanvas__phone .content {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #off-canvas-menu .mk-offcanvas__phone h2,
    #off-canvas-menu .mk-offcanvas__phone .header {
        display: none !important;
    }

    #off-canvas-menu .mk-offcanvas__phone ul,
    #off-canvas-menu .mk-offcanvas__phone li {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    #off-canvas-menu .mk-offcanvas__phone li:not(:last-child) {
        display: none !important;
    }

    #off-canvas-menu .mk-offcanvas__phone li:last-child,
    #off-canvas-menu .mk-offcanvas__phone a {
        display: inline-flex !important;
        align-items: center !important;
    }

    #off-canvas-menu .mk-offcanvas__phone a {
        min-height: 30px !important;
        padding: 0 !important;
        color: #20262a !important;
        font: 15px/1 "GothamProMedium", Arial, sans-serif !important;
        letter-spacing: .025em !important;
        text-decoration: none !important;
    }
}


/* v5.5 — mobile drawer contact card. The existing tel module still supplies the live phone link. */
@media (max-width: 920px), body[data-mobile="true"] {
    #off-canvas-menu .mk-offcanvas__contact {
        margin: 26px 0 0 !important;
        padding: 19px 0 2px !important;
        border-top: 1px solid rgba(31, 37, 42, .11) !important;
    }

    /* Override the earlier phone-only spacing: the contact card now owns the divider and rhythm. */
    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone {
        margin: 9px 0 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    #off-canvas-menu .mk-offcanvas__contact-kicker,
    #off-canvas-menu .mk-offcanvas__contact-hours {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #off-canvas-menu .mk-offcanvas__contact-kicker {
        color: rgba(32, 38, 42, .58) !important;
        font: 10px/1.25 "GothamProMedium", Arial, sans-serif !important;
        letter-spacing: .095em !important;
        text-transform: uppercase !important;
    }

    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone a {
        min-height: 0 !important;
        color: #20262a !important;
        font: 18px/1.12 "GothamProMedium", Arial, sans-serif !important;
        letter-spacing: .018em !important;
    }

    #off-canvas-menu .mk-offcanvas__contact-hours {
        margin-top: 8px !important;
        color: rgba(32, 38, 42, .58) !important;
        font: 11px/1.3 "GothamProRegular", Arial, sans-serif !important;
        letter-spacing: .025em !important;
    }
}

/* v5.6 — mobile drawer contact: centered, quiet contact panel. Visual only. */
@media (max-width: 920px), body[data-mobile="true"] {
    #off-canvas-menu .mk-offcanvas__contact {
        position: relative !important;
        margin: 30px -4px 6px !important;
        padding: 22px 16px 20px !important;
        border: 1px solid rgba(31, 37, 42, .075) !important;
        border-radius: 12px !important;
        background: linear-gradient(135deg, rgba(240, 243, 244, .74) 0%, rgba(255, 255, 255, .34) 100%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76), 0 7px 20px rgba(20, 28, 34, .025) !important;
        text-align: center !important;
    }

    #off-canvas-menu .mk-offcanvas__contact:before {
        content: "" !important;
        display: block !important;
        width: 28px !important;
        height: 1px !important;
        margin: 0 auto 12px !important;
        background: rgba(32, 38, 42, .22) !important;
    }

    #off-canvas-menu .mk-offcanvas__contact-kicker {
        text-align: center !important;
        color: rgba(32, 38, 42, .56) !important;
        font: 9px/1.2 "GothamProMedium", Arial, sans-serif !important;
        letter-spacing: .15em !important;
    }

    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone {
        margin: 10px 0 0 !important;
        text-align: center !important;
    }

    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone .box,
    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone .content,
    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone ul {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        text-align: center !important;
    }

    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone li:last-child,
    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone a {
        justify-content: center !important;
        text-align: center !important;
    }

    #off-canvas-menu .mk-offcanvas__contact .mk-offcanvas__phone a {
        min-height: 26px !important;
        font: 19px/1.08 "GothamProMedium", Arial, sans-serif !important;
        letter-spacing: .022em !important;
    }

    #off-canvas-menu .mk-offcanvas__contact-hours {
        margin-top: 9px !important;
        text-align: center !important;
        color: rgba(32, 38, 42, .55) !important;
        font: 10px/1.25 "GothamProRegular", Arial, sans-serif !important;
        letter-spacing: .035em !important;
    }
}