/*
 * Approved phone header — final cascade layer
 * Keep this layer intentionally narrow: it supersedes only the old globe /
 * contact combination below 768px. Desktop and tablet controls keep their
 * existing layout and behaviour.
 */
@media (max-width: 767px) {
    /* Elementor's generated header can reset this wrapper to block after the
       child stylesheet is parsed. Reassert the three real header zones. */
    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .e-con-inner {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        grid-template-rows: minmax(54px, auto) !important;
        align-items: center !important;
        position: relative !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    > :is(.elementor, .e-con, .elementor-element.e-con)
    > .e-con-inner {
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        column-gap: 0 !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .elementor-widget-nav-menu {
        grid-column: 1 !important;
        justify-self: start !important;
        width: 54px !important;
        min-width: 54px !important;
    }

    /* Menu is the only control on the left. */
    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .elementor-menu-toggle {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border: 1px solid #f7b718 !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.98) !important;
        color: #10233a !important;
        box-shadow: 0 7px 18px rgba(2, 17, 32, 0.18) !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .elementor-menu-toggle :is(svg, i) {
        color: currentColor !important;
    }

    /* The former globe opens the mixed social/language panel. It is replaced
       by the active-language control in the right grid column. */
    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-social-toggle-mobile,
    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-social-panel,
    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    :is(.elementor-element-3f1bbed, .elementor-element-d7368b9) {
        display: none !important;
    }

    html body .elementor-location-header.elementor-location-header .elementor-element-3f1bbed,
    html body #header-hz-elementor#header-hz-elementor .elementor-element-d7368b9 {
        display: none !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-toggle {
        grid-column: 3 !important;
        grid-row: 1 !important;
        justify-self: end !important;
        align-self: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        width: 126px !important;
        min-width: 126px !important;
        max-width: 126px !important;
        height: 54px !important;
        min-height: 54px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 1px solid rgba(247, 183, 24, 0.92) !important;
        border-radius: 27px !important;
        background: rgba(9, 35, 59, 0.96) !important;
        color: #f7b718 !important;
        box-shadow: 0 7px 18px rgba(2, 17, 32, 0.16) !important;
        font-family: "Unbounded", "Wix Madefor Display", Arial, sans-serif !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: 0.01em !important;
        cursor: pointer !important;
        z-index: 100060 !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-toggle svg {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;
        margin-left: auto !important;
        margin-right: 15px !important;
        color: #f7b718 !important;
        transition: transform 0.16s ease !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-toggle__code {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 52px !important;
        width: 52px !important;
        height: 52px !important;
        margin: 0 !important;
        border-radius: 50% !important;
        background: #f7b718 !important;
        color: #10233a !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg) !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        right: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: auto !important;
        min-width: 104px !important;
        margin: 0 !important;
        padding: 7px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.24) !important;
        border-radius: 15px !important;
        background: #10233a !important;
        box-shadow: 0 14px 32px rgba(9, 22, 37, 0.26) !important;
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease !important;
        z-index: 100070 !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-menu.artbin-mobile-language-menu--open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-option {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        color: #fff !important;
        font-family: "Unbounded", "Wix Madefor Display", Arial, sans-serif !important;
        font-size: 11px !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-option:focus-visible,
    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-language-option:hover {
        background: rgba(247, 183, 24, 0.18) !important;
        color: #f7b718 !important;
    }

    /* Social links belong to the last row of the opened phone menu. */
    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-social-row {
        display: block !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 7px 0 0 !important;
        padding: 0 !important;
        border-top: 1px solid rgba(16, 35, 58, 0.12) !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-social-row__content {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 14px 8px 4px !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-social-row__title {
        color: #10233a !important;
        font-family: "Unbounded", "Wix Madefor Display", Arial, sans-serif !important;
        font-size: 10px !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0.04em !important;
        text-transform: uppercase !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-social-row__icons {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 7px !important;
        min-width: 0 !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-social-row__link {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        min-width: 32px !important;
        height: 32px !important;
        min-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #10233a !important;
        color: #f7b718 !important;
        text-decoration: none !important;
    }

    html body :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .artbin-mobile-social-row__link svg {
        width: 15px !important;
        height: 15px !important;
        fill: currentColor !important;
    }

    /* Legacy rules use :not(#artbin-mobile-header-v1-lock) plus the header
       ID in :is(), which gives them two ID-level specificity points. Mirror
       that specificity here so the approved phone controls win even while the
       historical stylesheet remains installed for tablet/Desktop. */
    html body:not(#artbin-mobile-header-v1-lock)
    :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .elementor-element-d2776dd > .e-con-inner {
        display: grid !important;
        grid-template-columns: 54px minmax(0, 1fr) 54px !important;
        grid-template-rows: minmax(54px, auto) !important;
        align-items: center !important;
        position: relative !important;
    }

    html body:not(#artbin-mobile-header-v1-lock)
    :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    :is(.elementor-element-3f1bbed, .elementor-element-d7368b9) {
        display: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock)
    :is(#header-hz-elementor, .elementor-location-header, header[data-elementor-type="header"], header[data-elementor-type="wp-post"])
    .elementor-widget-nav-menu .elementor-menu-toggle {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #f7b718 !important;
        color: #10233a !important;
        box-shadow: 0 8px 22px rgba(11, 25, 41, 0.18) !important;
    }
}

@media (min-width: 768px) {
    .artbin-mobile-language-toggle,
    .artbin-mobile-language-menu {
        display: none !important;
    }
}

/* Final compact-state icon lock. The legacy phone skin draws its close icon
   with pseudo-elements, so their colour must follow the approved gold outline
   instead of the former dark-on-white button. */
@media (max-width: 1399.98px) {
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-toggle {
        border-color: #f7b718 !important;
        background: rgba(6, 27, 47, 0.96) !important;
        color: #f7b718 !important;
        box-shadow: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-toggle__code {
        flex: 1 1 auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 0 0 clamp(14px, 2vw, 22px) !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #f7b718 !important;
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-toggle svg {
        box-sizing: content-box !important;
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 clamp(10px, 1.4vw, 14px) 0 clamp(8px, 1.2vw, 12px) !important;
        padding-left: clamp(10px, 1.4vw, 14px) !important;
        border-left: 1px solid rgba(247, 183, 24, 0.76) !important;
        color: #f7b718 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-menu {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: auto !important;
        min-width: 104px !important;
        margin: 0 !important;
        padding: 7px !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-6px) !important;
        border: 1px solid rgba(247, 183, 24, 0.72) !important;
        border-radius: 15px !important;
        background: #061b2f !important;
        box-shadow: 0 14px 32px rgba(1, 13, 25, 0.34) !important;
        transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease !important;
        z-index: 100070 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-menu.artbin-mobile-language-menu--open {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-option {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        min-width: 40px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        color: #ffffff !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        text-decoration: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-option:is(:hover, :focus-visible) {
        background: rgba(247, 183, 24, 0.16) !important;
        color: #f7b718 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active::before,
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active::after {
        background: #f7b718 !important;
    }
}

/* Compact-header overlay contract: both disclosed controls must sit above
 * search, filters and page sections.  The language menu has a high z-index of
 * its own, but it was still contained by the fixed header's lower stacking
 * context on some listing templates. */
@media (max-width: 1399.98px) {
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) {
        z-index: 100200 !important;
        isolation: isolate !important;
        overflow: visible !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) :is(.e-con, .e-con-inner, .elementor-widget-container) {
        overflow: visible !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .artbin-mobile-language-menu,
    html body:not(#artbin-mobile-header-v1-lock) :is(
        #header-hz-elementor,
        .elementor-location-header,
        header.elementor-location-header
    ) .elementor-widget-nav-menu .elementor-nav-menu--dropdown {
        z-index: 100210 !important;
    }
}

/* Compact header option 01: borderless gold controls. This lives in the
   already-loaded header layer so Elementor's cached stylesheet order cannot
   restore the previous circular/capsule skin. */
@media (max-width: 1399.98px) {
    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-widget-nav-menu .elementor-menu-toggle {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #f7b718 !important;
        transition: opacity 160ms ease, transform 160ms ease !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-widget-nav-menu .elementor-menu-toggle:is(:hover, :focus-visible),
    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .artbin-mobile-language-toggle:is(:hover, :focus-visible) {
        opacity: 0.78 !important;
        transform: translateY(-1px) !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-widget-nav-menu .elementor-menu-toggle::before,
    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-widget-nav-menu .elementor-menu-toggle::after {
        display: none !important;
        content: none !important;
        background: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-widget-nav-menu .elementor-menu-toggle .elementor-menu-toggle__icon--open {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
        color: #f7b718 !important;
        fill: #f7b718 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-widget-nav-menu .elementor-menu-toggle .elementor-menu-toggle__icon--close {
        display: none !important;
        width: 24px !important;
        height: 24px !important;
        color: #f7b718 !important;
        fill: #f7b718 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open {
        display: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-widget-nav-menu .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
        display: block !important;
    }

    /* Some Elementor headers place the toggle outside the widget wrapper.
       Target that real control as well, otherwise its native SVG is hidden. */
    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-menu-toggle::before,
    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-menu-toggle::after {
        display: none !important;
        content: none !important;
        background: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-menu-toggle .elementor-menu-toggle__icon--open,
    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-menu-toggle .elementor-menu-toggle__icon--close {
        visibility: visible !important;
        color: #f7b718 !important;
        fill: #f7b718 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-menu-toggle .elementor-menu-toggle__icon--open {
        display: block !important;
        width: 26px !important;
        height: 26px !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-menu-toggle .elementor-menu-toggle__icon--close {
        display: none !important;
        width: 24px !important;
        height: 24px !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--open {
        display: none !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-menu-toggle.elementor-active .elementor-menu-toggle__icon--close {
        display: block !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .artbin-mobile-language-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #f7b718 !important;
        transition: opacity 160ms ease, transform 160ms ease !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .artbin-mobile-language-toggle__code {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 0 !important;
        color: #f7b718 !important;
        font-size: clamp(15px, 1.6vw, 18px) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .artbin-mobile-language-toggle svg {
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 0 0 clamp(12px, 1.7vw, 18px) !important;
        padding: 0 0 0 clamp(12px, 1.7vw, 18px) !important;
        border-left: 1px solid rgba(247, 183, 24, 0.80) !important;
        color: #f7b718 !important;
        transition: transform 160ms ease !important;
    }

    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .artbin-mobile-language-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg) !important;
    }

    /* The compact composition exposes only the language control on the right. */
    html body:not(#artbin-mobile-header-v1-lock) :is(#header-hz-elementor, .elementor-location-header, header.elementor-location-header) .elementor-element-fd03432 {
        display: none !important;
    }
}