/* =========================================================================================================
   YUBEEN GLOBAL HEADER — CLEAN CONSOLIDATED VERSION
   Version: 2.2
   Updated: 2026-07-16

   Required Elementor CSS classes:
   - Outer header:       yubeen-header
   - Header inner:       yubeen-header-inner
   - Logo:               yubeen-header-logo
   - Navigation:         yubeen-header-nav
   - Navigation item:    yubeen-header-nav-link
   - Actions:            yubeen-header-actions
   - Contact button:     yubeen-header-contact-button
   - Partner button:     yubeen-header-partner-button

   Header variants:
   - Transparent hero:   yubeen-header--transparent
   - Solid dark:         yubeen-header--dark

   Main fixes in this version:
   - Transparent header has no black gradient, blur band or full-width shadow.
   - Transparent, dark and light modes share one locked geometry system.
   - WordPress admin-bar preview receives the correct additional offset.
   - Duplicate transparent/light/dark declarations are consolidated.
   - New live-search trigger receives the correct light/dark variant color.
   - All three modes use the same height, inner width, grid columns and element positions.
   - Transparent mode is controlled only by its template class, not by Contact Us page-ID overrides.
========================================================================================================= */


/* =========================================================================================================
   01. DESIGN TOKENS
========================================================================================================= */

:root {
    --yb-header-height: 86px;
    --yb-header-content-width: 1380px;
    --yb-header-side-width: calc(100% - 64px);

    /*
     * Transparent mode now shares the same top edge as light and dark modes.
     * Keep this at 0 to preserve exact alignment between all three templates.
     */
    --yb-header-transparent-gap: 0px;

    --yb-header-red: #d71920;
    --yb-header-red-bright: #ff2b32;
    --yb-header-red-dark: #b91117;

    --yb-header-ink: #111820;
    --yb-header-white: #ffffff;

    --yb-header-light-bg: rgba(255, 255, 255, 0.94);
    --yb-header-light-border: rgba(20, 28, 40, 0.08);

    --yb-header-dark-bg: rgba(6, 8, 12, 0.97);
    --yb-header-dark-border: rgba(255, 255, 255, 0.10);
}


/* =========================================================================================================
   02. BASE HEADER — SOLID LIGHT
========================================================================================================= */

.yubeen-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;
    z-index: 9999 !important;

    width: 100% !important;
    min-height: var(--yb-header-height) !important;
    height: var(--yb-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: var(--yb-header-light-bg) !important;
    background-image: none !important;

    border: 0 !important;
    border-bottom: 1px solid var(--yb-header-light-border) !important;

    box-shadow: none !important;
    outline: 0 !important;

    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;

    box-sizing: border-box !important;
}


/* WordPress admin bar — sticky and dark headers */
body.admin-bar .yubeen-header {
    top: 32px !important;
}


/* =========================================================================================================
   03. HEADER INNER — STABLE THREE-COLUMN GRID
========================================================================================================= */

.yubeen-header-inner {
    width: min(
        var(--yb-header-side-width),
        var(--yb-header-content-width)
    ) !important;

    max-width: var(--yb-header-content-width) !important;
    min-height: var(--yb-header-height) !important;
    height: var(--yb-header-height) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 36px !important;

    box-sizing: border-box !important;
}


/* ---------------------------------------------------------------------------------------------------------
   SHARED GEOMETRY LOCK
   ---------------------------------------------------------------------------------------------------------
   The three Elementor header templates must all use the same class on their inner container:
   yubeen-header-inner

   This block deliberately contains no color rules. It controls only geometry, so transparent,
   dark and light modes remain perfectly aligned.
--------------------------------------------------------------------------------------------------------- */

.yubeen-header,
.yubeen-header.yubeen-header--transparent,
.yubeen-header.yubeen-header--dark {
    width: 100% !important;
    min-height: var(--yb-header-height) !important;
    height: var(--yb-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    align-items: center !important;
    justify-content: center !important;
}

.yubeen-header .yubeen-header-inner,
.yubeen-header.yubeen-header--transparent .yubeen-header-inner,
.yubeen-header.yubeen-header--dark .yubeen-header-inner {
    width: min(
        var(--yb-header-side-width),
        var(--yb-header-content-width)
    ) !important;

    max-width: var(--yb-header-content-width) !important;
    min-height: var(--yb-header-height) !important;
    height: var(--yb-header-height) !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 36px !important;
}

/*
 * Reset the immediate Elementor wrapper only.
 * The actual width is controlled by .yubeen-header-inner above.
 */
.yubeen-header > .e-con-inner,
.yubeen-header > .elementor-container {
    width: 100% !important;
    max-width: none !important;
    min-height: var(--yb-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* Prevent Elementor wrappers from stretching or injecting spacing */
.yubeen-header-inner > .elementor-element,
.yubeen-header-inner > .e-con,
.yubeen-header-inner > * {
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.yubeen-header :is(
    .elementor-widget,
    .elementor-widget-container,
    .elementor-element
) {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================================================================
   04. LOGO
========================================================================================================= */

.yubeen-header-logo {
    grid-column: 1 !important;

    width: 170px !important;
    max-width: 170px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    justify-self: start !important;
    align-self: center !important;

    position: relative !important;
    z-index: 3 !important;

    box-sizing: border-box !important;
}

.yubeen-header-logo .elementor-widget-container,
.yubeen-header-logo a {
    width: 170px !important;
    max-width: 170px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.yubeen-header-logo img {
    display: block !important;

    width: auto !important;
    max-width: 160px !important;
    max-height: 42px !important;

    object-fit: contain !important;

    opacity: 1 !important;
    mix-blend-mode: normal !important;
}


/* =========================================================================================================
   05. NAVIGATION
========================================================================================================= */

.yubeen-header-nav {
    grid-column: 2 !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 34px !important;

    justify-self: center !important;
    align-self: center !important;

    box-sizing: border-box !important;
}

.yubeen-header-nav > .elementor-element,
.yubeen-header-nav > .e-con,
.yubeen-header-nav > * {
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.yubeen-header-nav-link,
.yubeen-header-nav-link a,
.yubeen-header-nav-link .elementor-heading-title,
.yubeen-header-nav-link .elementor-button,
.yubeen-header-nav-link .elementor-button-text {
    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    box-shadow: none !important;

    color: var(--yb-header-ink) !important;

    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;

    transition: color 0.22s ease !important;
}

.yubeen-header-nav-link:hover,
.yubeen-header-nav-link:hover a,
.yubeen-header-nav-link:hover .elementor-heading-title,
.yubeen-header-nav-link:hover .elementor-button,
.yubeen-header-nav-link:hover .elementor-button-text {
    color: var(--yb-header-red) !important;
}


/* =========================================================================================================
   06. ACTIONS
========================================================================================================= */

.yubeen-header-actions {
    grid-column: 3 !important;

    width: auto !important;
    max-width: max-content !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;

    justify-self: end !important;
    align-self: center !important;

    position: relative !important;
    z-index: 3 !important;

    box-sizing: border-box !important;
}

.yubeen-header-actions > .elementor-element,
.yubeen-header-actions > .e-con,
.yubeen-header-actions > * {
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
}

.yubeen-header-actions .elementor-widget-html,
.yubeen-header-actions
.elementor-widget-html
.elementor-widget-container {
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
}


/* =========================================================================================================
   07. SEARCH TRIGGER
   Supports both the original Elementor icon and the new live-search HTML trigger.
========================================================================================================= */

.yubeen-header-search,
.yubeen-header-search .elementor-widget-container,
.yubeen-header-search a,
.yubeen-header-search .elementor-icon-wrapper,
.yubeen-header-search .elementor-icon,
.yubeen-header .yb-live-search__trigger {
    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: transparent !important;

    color: var(--yb-header-ink) !important;

    text-decoration: none !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease !important;
}

.yubeen-header-search:hover,
.yubeen-header-search:hover a,
.yubeen-header-search:hover .elementor-icon,
.yubeen-header .yb-live-search__trigger:hover,
.yubeen-header .yb-live-search__trigger:focus-visible,
.yubeen-header .yb-live-search__trigger[aria-expanded="true"] {
    color: var(--yb-header-red) !important;
    background: rgba(215, 25, 32, 0.055) !important;
    outline: 0 !important;
}

.yubeen-header-search i,
.yubeen-header-search svg,
.yubeen-header .yb-live-search__trigger svg {
    width: 20px !important;
    height: 20px !important;

    font-size: 20px !important;

    color: currentColor !important;
    fill: none !important;
}


/* =========================================================================================================
   08. ACTION BUTTONS
========================================================================================================= */

.yubeen-header-action-button {
    margin: 0 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;

    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;

    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease !important;
}

.yubeen-header-contact-button {
    height: 42px !important;
    min-height: 42px !important;

    padding: 0 22px !important;

    border: 1px solid rgba(20, 28, 40, 0.14) !important;

    background: rgba(255, 255, 255, 0.78) !important;

    color: var(--yb-header-ink) !important;

    box-shadow:
        0 8px 20px rgba(20, 28, 40, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

.yubeen-header-contact-button:hover {
    color: var(--yb-header-red) !important;

    border-color: rgba(215, 25, 32, 0.32) !important;

    background: #ffffff !important;

    transform: translateY(-1px) !important;
}

.yubeen-header-partner-button {
    height: 44px !important;
    min-height: 44px !important;

    padding: 0 24px !important;

    border: 1px solid var(--yb-header-red) !important;

    background: var(--yb-header-red) !important;

    color: #ffffff !important;

    box-shadow:
        0 14px 26px rgba(215, 25, 32, 0.24) !important;
}

.yubeen-header-partner-button:hover {
    border-color: var(--yb-header-red-dark) !important;

    background: var(--yb-header-red-dark) !important;

    color: #ffffff !important;

    transform: translateY(-1px) !important;

    box-shadow:
        0 17px 32px rgba(215, 25, 32, 0.30) !important;
}


/* =========================================================================================================
   09. TRANSPARENT HEADER
   Applies only to a header template carrying:
   yubeen-header--transparent

   Do not map transparent geometry by page ID. Assign the transparent
   header template to Contact Us / Download Center / Warranty in the
   Header Footer plugin display conditions instead.
========================================================================================================= */

.yubeen-header.yubeen-header--transparent {
    position: absolute !important;

    /*
     * Absolute mode overlays the hero, but its visible top edge is identical
     * to the sticky light and dark headers.
     */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 9999 !important;

    width: 100% !important;
    min-height: var(--yb-header-height) !important;
    height: var(--yb-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /*
     * Fully transparent: removes the old black gradient band.
     */
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-bottom: 0 !important;

    box-shadow: none !important;
    outline: 0 !important;
    filter: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    box-sizing: border-box !important;
}


/* Remove any inherited decorative pseudo-layer from the transparent header */
.yubeen-header.yubeen-header--transparent::before,
.yubeen-header.yubeen-header--transparent::after {
    content: none !important;
    display: none !important;

    background: none !important;
    box-shadow: none !important;
}


/* WordPress admin-bar preview: prevent a double vertical offset */
body.admin-bar
.yubeen-header.yubeen-header--transparent {
    /*
     * WordPress already shifts the logged-in front-end document below the
     * fixed admin toolbar. Because the transparent header is position:absolute,
     * adding another 32px here moves it down twice. Keep the transparent
     * header at top:0 inside the already-offset document. Light/dark variants
     * remain sticky and keep their own admin-bar offsets.
     */
    top: 0 !important;
}


/* Transparent header navigation */
.yubeen-header.yubeen-header--transparent .yubeen-header-nav-link,
.yubeen-header.yubeen-header--transparent .yubeen-header-nav-link :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
) {
    color: rgba(255, 255, 255, 0.96) !important;

    /*
     * Remove the previous black text shadow for a cleaner transparent state.
     */
    text-shadow: none !important;
}

.yubeen-header.yubeen-header--transparent .yubeen-header-nav-link:hover,
.yubeen-header.yubeen-header--transparent .yubeen-header-nav-link:hover :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
) {
    color: var(--yb-header-red-bright) !important;
}


/* Transparent header search trigger */
.yubeen-header.yubeen-header--transparent :is(
    .yubeen-header-search,
    .yubeen-header-search a,
    .yubeen-header-search .elementor-icon,
    .yb-live-search__trigger
) {
    color: #ffffff !important;
}

.yubeen-header.yubeen-header--transparent :is(
    .yubeen-header-search:hover,
    .yubeen-header-search:hover a,
    .yubeen-header-search:hover .elementor-icon,
    .yb-live-search__trigger:hover,
    .yb-live-search__trigger:focus-visible,
    .yb-live-search__trigger[aria-expanded="true"]
) {
    color: var(--yb-header-red-bright) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}


/* Transparent header buttons */
.yubeen-header.yubeen-header--transparent .yubeen-header-contact-button {
    border-color: rgba(255, 255, 255, 0.54) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;

    /*
     * No black drop shadow in transparent mode.
     */
    box-shadow: none !important;
}

.yubeen-header.yubeen-header--transparent .yubeen-header-contact-button:hover {
    border-color: rgba(255, 255, 255, 0.82) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

.yubeen-header.yubeen-header--transparent .yubeen-header-partner-button {
    box-shadow:
        0 14px 26px rgba(215, 25, 32, 0.24) !important;
}


/* =========================================================================================================
   10. DARK HEADER
   Applies to:
   - Any header carrying yubeen-header--dark
   - Products: 861
   - Technology pages identified by their section IDs
========================================================================================================= */

:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;

    width: 100% !important;
    min-height: var(--yb-header-height) !important;
    height: var(--yb-header-height) !important;

    margin: 0 !important;
    padding: 0 !important;

    background: var(--yb-header-dark-bg) !important;
    background-image: none !important;

    border: 0 !important;
    border-bottom: 1px solid var(--yb-header-dark-border) !important;

    box-shadow: none !important;

    backdrop-filter: blur(14px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(125%) !important;
}

body.admin-bar :is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header
),
body.admin-bar:has(#technology-roadmap) .yubeen-header,
body.admin-bar:has(#technology-markets) .yubeen-header {
    top: 32px !important;
}


/* Dark header navigation */
:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) .yubeen-header-nav-link,
:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) .yubeen-header-nav-link :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
) {
    color: rgba(255, 255, 255, 0.90) !important;
    text-shadow: none !important;
}

:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) .yubeen-header-nav-link:hover,
:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) .yubeen-header-nav-link:hover :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
) {
    color: var(--yb-header-red-bright) !important;
}


/* Dark header search trigger */
:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) :is(
    .yubeen-header-search,
    .yubeen-header-search a,
    .yubeen-header-search .elementor-icon,
    .yb-live-search__trigger
) {
    color: rgba(255, 255, 255, 0.94) !important;
}


/* Dark header buttons */
:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) .yubeen-header-contact-button {
    border-color: rgba(255, 255, 255, 0.26) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) .yubeen-header-contact-button:hover {
    border-color: rgba(255, 255, 255, 0.52) !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
}

:is(
    .yubeen-header.yubeen-header--dark,
    body.page-id-861 .yubeen-header,
    body.postid-861 .yubeen-header,
    body.elementor-page-861 .yubeen-header,
    body:has(#technology-roadmap) .yubeen-header,
    body:has(#technology-markets) .yubeen-header
) .yubeen-header-partner-button {
    border-color: var(--yb-header-red) !important;
    background: var(--yb-header-red) !important;
    color: #ffffff !important;

    box-shadow:
        0 14px 26px rgba(215, 25, 32, 0.24) !important;
}


/* =========================================================================================================
   11. EXPLICIT SOLID-LIGHT PAGES
   Support: 2307
   FAQ:     2819
   About:   2821
========================================================================================================= */

:is(
    body.page-id-2307,
    body.elementor-page-2307,
    body.page-id-2819,
    body.elementor-page-2819,
    body.page-id-2821,
    body.elementor-page-2821
) .yubeen-header {
    position: sticky !important;
    top: 0 !important;
    left: auto !important;
    right: auto !important;

    background: var(--yb-header-light-bg) !important;
    background-image: none !important;

    border: 0 !important;
    border-bottom: 1px solid var(--yb-header-light-border) !important;

    box-shadow: none !important;

    backdrop-filter: blur(14px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

body.admin-bar:is(
    .page-id-2307,
    .elementor-page-2307,
    .page-id-2819,
    .elementor-page-2819,
    .page-id-2821,
    .elementor-page-2821
) .yubeen-header {
    top: 32px !important;
}

:is(
    body.page-id-2307,
    body.elementor-page-2307,
    body.page-id-2819,
    body.elementor-page-2819,
    body.page-id-2821,
    body.elementor-page-2821
) .yubeen-header-nav-link,
:is(
    body.page-id-2307,
    body.elementor-page-2307,
    body.page-id-2819,
    body.elementor-page-2819,
    body.page-id-2821,
    body.elementor-page-2821
) .yubeen-header-nav-link :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
) {
    color: var(--yb-header-ink) !important;
    text-shadow: none !important;
}

:is(
    body.page-id-2307,
    body.elementor-page-2307,
    body.page-id-2819,
    body.elementor-page-2819,
    body.page-id-2821,
    body.elementor-page-2821
) .yubeen-header :is(
    .yubeen-header-search,
    .yubeen-header-search a,
    .yubeen-header-search .elementor-icon,
    .yb-live-search__trigger
) {
    color: var(--yb-header-ink) !important;
}


/* =========================================================================================================
   12. ACTIVE NAVIGATION
========================================================================================================= */

.yubeen-header :is(
    .yubeen-header-nav-link,
    .yubeen-nav-home,
    .yubeen-nav-products,
    .yubeen-nav-technology,
    .yubeen-nav-applications,
    .yubeen-nav-support,
    .yubeen-nav-about
) {
    position: relative !important;
}


/* Reset any manual current-link state before applying the page map */
.yubeen-header-nav-link.yubeen-current-link,
.yubeen-header-nav-link.yubeen-current-link a,
.yubeen-header-nav-link.yubeen-current-link .elementor-heading-title,
.yubeen-header-nav-link.yubeen-current-link .elementor-button,
.yubeen-header-nav-link.yubeen-current-link .elementor-button-text {
    color: inherit !important;
}

.yubeen-header-nav-link.yubeen-current-link::after {
    content: none !important;
    display: none !important;
}


/* Active text color */
:is(
    body.home,
    body.page-id-336,
    body.elementor-page-336
) .yubeen-nav-home,
:is(
    body.home,
    body.page-id-336,
    body.elementor-page-336
) .yubeen-nav-home :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
),

:is(
    body.page-id-861,
    body.elementor-page-861,
    body.parent-pageid-861,
    body.page-id-1285,
    body.elementor-page-1285,
    body.page-id-1148,
    body.elementor-page-1148,
    body.page-id-234,
    body.elementor-page-234
) .yubeen-nav-products,
:is(
    body.page-id-861,
    body.elementor-page-861,
    body.parent-pageid-861,
    body.page-id-1285,
    body.elementor-page-1285,
    body.page-id-1148,
    body.elementor-page-1148,
    body.page-id-234,
    body.elementor-page-234
) .yubeen-nav-products :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
),

body:has(#technology-roadmap) .yubeen-nav-technology,
body:has(#technology-roadmap) .yubeen-nav-technology :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
),
body:has(#technology-markets) .yubeen-nav-technology,
body:has(#technology-markets) .yubeen-nav-technology :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
),

:is(
    body.page-id-1963,
    body.elementor-page-1963
) .yubeen-nav-applications,
:is(
    body.page-id-1963,
    body.elementor-page-1963
) .yubeen-nav-applications :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
),

:is(
    body.page-id-2307,
    body.elementor-page-2307,
    body.parent-pageid-2307,
    body.page-id-2917,
    body.elementor-page-2917,
    body.page-id-2817,
    body.elementor-page-2817,
    body.page-id-2819,
    body.elementor-page-2819
) .yubeen-nav-support,
:is(
    body.page-id-2307,
    body.elementor-page-2307,
    body.parent-pageid-2307,
    body.page-id-2917,
    body.elementor-page-2917,
    body.page-id-2817,
    body.elementor-page-2817,
    body.page-id-2819,
    body.elementor-page-2819
) .yubeen-nav-support :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
),

:is(
    body.page-id-2821,
    body.elementor-page-2821
) .yubeen-nav-about,
:is(
    body.page-id-2821,
    body.elementor-page-2821
) .yubeen-nav-about :is(
    a,
    .elementor-heading-title,
    .elementor-button,
    .elementor-button-text
) {
    color: var(--yb-header-red-bright) !important;
}


/* Active underline */
:is(
    body.home,
    body.page-id-336,
    body.elementor-page-336
) .yubeen-nav-home::after,

:is(
    body.page-id-861,
    body.elementor-page-861,
    body.parent-pageid-861,
    body.page-id-1285,
    body.elementor-page-1285,
    body.page-id-1148,
    body.elementor-page-1148,
    body.page-id-234,
    body.elementor-page-234
) .yubeen-nav-products::after,

body:has(#technology-roadmap)
.yubeen-nav-technology::after,

body:has(#technology-markets)
.yubeen-nav-technology::after,

:is(
    body.page-id-1963,
    body.elementor-page-1963
) .yubeen-nav-applications::after,

:is(
    body.page-id-2307,
    body.elementor-page-2307,
    body.parent-pageid-2307,
    body.page-id-2917,
    body.elementor-page-2917,
    body.page-id-2817,
    body.elementor-page-2817,
    body.page-id-2819,
    body.elementor-page-2819
) .yubeen-nav-support::after,

:is(
    body.page-id-2821,
    body.elementor-page-2821
) .yubeen-nav-about::after {
    content: "" !important;

    position: absolute !important;
    left: 50% !important;
    bottom: -17px !important;

    width: 24px !important;
    height: 2px !important;

    display: block !important;

    transform: translateX(-50%) !important;

    border-radius: 999px !important;

    background: var(--yb-header-red-bright) !important;
}


/* =========================================================================================================
   13. PAGE CONNECTION FIXES
========================================================================================================= */

/* Products page — remove dark header / first-section seam */
:is(
    body.page-id-861,
    body.postid-861,
    body.elementor-page-861
) :is(
    main,
    .site-main,
    .elementor,
    .elementor-location-single
) {
    border-top: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

:is(
    body.page-id-861,
    body.postid-861,
    body.elementor-page-861
) :is(
    .site-main .elementor-section:first-child,
    .site-main .e-con:first-child,
    .elementor > .elementor-section:first-child,
    .elementor > .e-con:first-child
) {
    border-top: 0 !important;
    box-shadow: none !important;
    margin-top: -1px !important;
    padding-top: 0 !important;
}


/* Technology header occupies normal flow; do not add another artificial offset */
body:has(#technology-roadmap) :is(
    .yubeen-technology-hero,
    #technology-hero,
    .technology-hero
),
body:has(#technology-markets) :is(
    .yubeen-technology-hero,
    #technology-hero,
    .technology-hero
) {
    margin-top: 0 !important;
}

body:has(#technology-roadmap)
.yubeen-technology-hero,
body:has(#technology-markets)
.yubeen-technology-hero {
    padding-top: 0 !important;
}


/* =========================================================================================================
   14. RESPONSIVE
========================================================================================================= */

@media (max-width: 1100px) {
    .yubeen-header-inner {
        grid-template-columns: 150px minmax(0, 1fr) auto !important;
        column-gap: 24px !important;
    }

    .yubeen-header-nav {
        gap: 24px !important;
    }

    .yubeen-header-logo,
    .yubeen-header-logo .elementor-widget-container,
    .yubeen-header-logo a {
        width: 150px !important;
        max-width: 150px !important;
    }

    .yubeen-header-logo img {
        max-width: 145px !important;
    }
}


@media (max-width: 900px) {
    :root {
        --yb-header-height: 74px;
        --yb-header-side-width: calc(100% - 40px);
        --yb-header-transparent-gap: 0px;
    }

    .yubeen-header-inner {
        grid-template-columns: 150px 1fr auto !important;
    }

    .yubeen-header-nav {
        display: none !important;
    }
}


@media screen and (max-width: 782px) {
    /*
     * WordPress admin bar becomes 46px on narrow screens.
     */
    body.admin-bar .yubeen-header {
        top: 46px !important;
    }

    body.admin-bar
    .yubeen-header.yubeen-header--transparent {
        /* Same double-offset rule as desktop: the document is already shifted. */
        top: 0 !important;
    }
}


@media (max-width: 640px) {
    :root {
        --yb-header-height: 68px;
        --yb-header-side-width: calc(100% - 30px);
        --yb-header-transparent-gap: 0px;
    }

    .yubeen-header-inner {
        grid-template-columns: 142px 1fr auto !important;
        column-gap: 14px !important;
    }

    .yubeen-header-contact-button {
        display: none !important;
    }

    .yubeen-header-partner-button {
        min-height: 40px !important;
        height: 40px !important;

        padding: 0 16px !important;

        font-size: 13px !important;
    }

    .yubeen-header-logo,
    .yubeen-header-logo .elementor-widget-container,
    .yubeen-header-logo a {
        width: 142px !important;
        max-width: 142px !important;
    }

    .yubeen-header-logo img {
        max-width: 136px !important;
    }

    .yubeen-header-search,
    .yubeen-header-search .elementor-widget-container,
    .yubeen-header-search a,
    .yubeen-header-search .elementor-icon-wrapper,
    .yubeen-header-search .elementor-icon,
    .yubeen-header .yb-live-search__trigger {
        width: 36px !important;
        height: 36px !important;
    }
}


/* =========================================================================================================
   15. REQUIRED TEMPLATE CONSISTENCY CHECK
   ---------------------------------------------------------------------------------------------------------
   Apply these exact classes in all three Elementor templates:

   Outer:
   yubeen-header
   plus one optional variant:
   yubeen-header--transparent
   or
   yubeen-header--dark

   Inner:
   yubeen-header-inner

   Do not use different boxed widths, max-width values or horizontal padding in the Elementor UI.
   The CSS above is the single source of truth for geometry.
========================================================================================================= */


/* =========================================================================================================
   16. TRANSPARENT TEMPLATE GEOMETRY DIAGNOSTIC
   ---------------------------------------------------------------------------------------------------------
   If Contact Us is still wider than the other two modes, the transparent template's inner container is
   missing the class yubeen-header-inner or has different Elementor padding/width settings.

   Required Elementor classes:
   Outer: yubeen-header yubeen-header--transparent
   Inner: yubeen-header-inner

   Required Elementor Inner settings:
   Content Width: Full Width
   Width: 100%
   Margin: 0
   Padding: 0
========================================================================================================= */

/* =========================================================================================================
   YUBEEN DESKTOP PRIMARY NAVIGATION DROPDOWNS
   Version: 1.0

   APPEND THIS FILE ONCE TO:
   Yubeen_Global_Header_CSS_Clean_v2.2_No_Page_Overrides.css

   The HTML + JavaScript widget must be added to all three Header templates.
========================================================================================================= */


/* =========================================================================================================
   01. ELEMENTOR WIDGET GEOMETRY
========================================================================================================= */

.yubeen-header-nav
>
.yb-desktop-nav-widget {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 auto !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yubeen-header-nav
>
.yb-desktop-nav-widget
>
.elementor-widget-container {
    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

.yb-nav-root,
.yb-nav-root * {
    box-sizing: border-box;
}

.yb-nav-root {
    --yb-nav-text: var(
        --yb-header-ink,
        #111820
    );

    --yb-nav-hover: var(
        --yb-header-red,
        #d71920
    );

    --yb-nav-active: var(
        --yb-header-red-bright,
        #ff2b32
    );

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;
}


/* Dark and transparent primary navigation text */
.yubeen-header--dark
.yb-nav-root,
.yubeen-header--transparent
.yb-nav-root {
    --yb-nav-text:
        rgba(255, 255, 255, 0.96);
}


/* =========================================================================================================
   02. TOP-LEVEL NAVIGATION
========================================================================================================= */

.yb-nav {
    width: 100%;
    min-width: 0;
    height: 40px;

    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 34px;

    white-space: nowrap;
}

.yb-nav__item {
    position: relative;

    height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.yb-nav__link,
.yb-nav__trigger {
    position: relative;

    min-width: 0;
    height: 40px;

    margin: 0;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: var(--yb-nav-text);

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 15px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;
    text-shadow: none;

    cursor: pointer;

    transition:
        color 0.2s ease;
}

.yb-nav__link::after,
.yb-nav__trigger::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -17px;

    width: 24px;
    height: 2px;

    border-radius: 999px;

    background: var(--yb-nav-active);

    opacity: 0;

    transform:
        translateX(-50%)
        scaleX(0.55);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.yb-nav__link:hover,
.yb-nav__link:focus-visible,
.yb-nav__trigger:hover,
.yb-nav__trigger:focus-visible,
.yb-nav__item.is-open
.yb-nav__trigger {
    color: var(--yb-nav-hover);
    outline: none;
}

.yubeen-header--dark
.yb-nav__link:hover,
.yubeen-header--dark
.yb-nav__link:focus-visible,
.yubeen-header--dark
.yb-nav__trigger:hover,
.yubeen-header--dark
.yb-nav__trigger:focus-visible,
.yubeen-header--dark
.yb-nav__item.is-open
.yb-nav__trigger,
.yubeen-header--transparent
.yb-nav__link:hover,
.yubeen-header--transparent
.yb-nav__link:focus-visible,
.yubeen-header--transparent
.yb-nav__trigger:hover,
.yubeen-header--transparent
.yb-nav__trigger:focus-visible,
.yubeen-header--transparent
.yb-nav__item.is-open
.yb-nav__trigger {
    color: var(--yb-nav-active);
}

.yb-nav__link.is-current,
.yb-nav__item.is-current
.yb-nav__trigger {
    color: var(--yb-nav-active);
}

.yb-nav__link.is-current::after,
.yb-nav__item.is-current
.yb-nav__trigger::after,
.yb-nav__item.is-open
.yb-nav__trigger::after {
    opacity: 1;

    transform:
        translateX(-50%)
        scaleX(1);
}

.yb-nav__chevron {
    width: 11px;
    height: 11px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        transform 0.2s ease;
}

.yb-nav__item.is-open
.yb-nav__chevron {
    transform: rotate(180deg);
}


/* =========================================================================================================
   03. DROPDOWN PANEL BASE
   Panels are moved to document.body by JavaScript.
========================================================================================================= */

.yb-nav-panel {
    --yb-nav-panel-left: 18px;
    --yb-nav-panel-top: 98px;

    position: fixed;
    top: var(--yb-nav-panel-top);
    left: var(--yb-nav-panel-left);
    z-index: 100050;

    max-height:
        calc(
            100vh -
            var(--yb-nav-panel-top) -
            18px
        );

    overflow-x: hidden;
    overflow-y: auto;

    border:
        1px solid
        rgba(33, 29, 23, 0.10);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 96% 3%,
            rgba(215, 25, 32, 0.055),
            transparent 28%
        ),
        radial-gradient(
            circle at 4% 100%,
            rgba(199, 150, 60, 0.05),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #fcfaf5,
            #f7f3eb
        );

    color: #171714;

    box-shadow:
        0 24px 68px
        rgba(3, 5, 8, 0.25);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateY(-9px)
        scale(0.985);

    transform-origin: top center;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.yb-nav-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateY(0)
        scale(1);
}

.yb-nav-panel--products {
    width:
        min(
            720px,
            calc(100vw - 36px)
        );

    padding: 27px 28px 19px;
}

.yb-nav-panel--support {
    width:
        min(
            390px,
            calc(100vw - 36px)
        );

    padding: 25px 25px 18px;
}

.yb-nav-panel__accent {
    position: absolute;
    top: 0;
    left: 28px;

    width: 58px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #d71920,
            #c7963c
        );
}


/* =========================================================================================================
   04. PANEL HEADING
========================================================================================================= */

.yb-nav-panel__head {
    margin-bottom: 22px;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(230px, 0.85fr);

    gap: 34px;
    align-items: end;
}

.yb-nav-panel__head--compact {
    grid-template-columns: 1fr;
    gap: 0;
}

.yb-nav-panel__eyebrow {
    display: block;

    margin-bottom: 7px;

    color: #98681c;

    font-size: 8px;
    font-weight: 790;
    line-height: 1.35;

    letter-spacing: 0.16em;
}

.yb-nav-panel__head h2 {
    margin: 0;

    color: #171714;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;
    font-weight: 400;
    line-height: 1.08;

    letter-spacing: -0.03em;
}

.yb-nav-panel__head p {
    margin: 0;

    color: #777168;

    font-size: 11.5px;
    line-height: 1.62;
}


/* =========================================================================================================
   05. PRODUCTS MEGA MENU
========================================================================================================= */

.yb-nav-panel__grid {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    border-top:
        1px solid
        rgba(33, 29, 23, 0.10);
}

.yb-nav-card {
    position: relative;

    min-height: 101px;

    padding: 18px 16px 17px 0;

    display: grid;
    grid-template-columns:
        31px
        minmax(0, 1fr)
        18px;

    gap: 13px;
    align-items: start;

    border-bottom:
        1px solid
        rgba(33, 29, 23, 0.10);

    color: #171714;
    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease;
}

.yb-nav-card:nth-child(odd) {
    padding-right: 21px;

    border-right:
        1px solid
        rgba(33, 29, 23, 0.10);
}

.yb-nav-card:nth-child(even) {
    padding-left: 21px;
}

.yb-nav-card::before {
    content: "";

    position: absolute;
    top: 15px;
    bottom: 15px;
    left: 0;

    width: 2px;

    background: #d71920;

    opacity: 0;

    transition: opacity 0.2s ease;
}

.yb-nav-card__number {
    padding-top: 2px;

    color: #98681c;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 13px;
    line-height: 1.2;
}

.yb-nav-card__copy {
    min-width: 0;
}

.yb-nav-card__copy strong,
.yb-nav-card__copy small {
    display: block;
}

.yb-nav-card__copy strong {
    margin-bottom: 6px;

    color: inherit;

    font-size: 13px;
    font-weight: 720;
    line-height: 1.38;
}

.yb-nav-card__copy small {
    color: #7e786f;

    font-size: 10.5px;
    line-height: 1.55;
}

.yb-nav-card > svg,
.yb-nav-support-link > svg,
.yb-nav-panel__footer-link > svg {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: #918b81;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition:
        stroke 0.2s ease,
        transform 0.2s ease;
}

.yb-nav-card:hover,
.yb-nav-card:focus-visible,
.yb-nav-card.is-current {
    color: #b91117;

    background:
        rgba(215, 25, 32, 0.038);

    outline: none;
}

.yb-nav-card:hover::before,
.yb-nav-card:focus-visible::before,
.yb-nav-card.is-current::before {
    opacity: 1;
}

.yb-nav-card:hover > svg,
.yb-nav-card:focus-visible > svg,
.yb-nav-card.is-current > svg {
    stroke: #d71920;

    transform: translateX(3px);
}


/* =========================================================================================================
   06. SUPPORT MENU
========================================================================================================= */

.yb-nav-panel__support-list {
    border-top:
        1px solid
        rgba(33, 29, 23, 0.10);
}

.yb-nav-support-link {
    position: relative;

    min-height: 78px;

    padding: 15px 7px 15px 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        18px;

    gap: 16px;
    align-items: center;

    border-bottom:
        1px solid
        rgba(33, 29, 23, 0.10);

    color: #171714;
    text-decoration: none;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease;
}

.yb-nav-support-link::before {
    content: "";

    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 0;

    width: 2px;

    background: #d71920;

    opacity: 0;

    transition: opacity 0.2s ease;
}

.yb-nav-support-link strong,
.yb-nav-support-link small {
    display: block;
}

.yb-nav-support-link strong {
    margin-bottom: 5px;

    font-size: 13px;
    font-weight: 720;
    line-height: 1.35;
}

.yb-nav-support-link small {
    color: #7e786f;

    font-size: 10.5px;
    line-height: 1.5;
}

.yb-nav-support-link:hover,
.yb-nav-support-link:focus-visible,
.yb-nav-support-link.is-current {
    padding-left: 9px;

    color: #b91117;

    background:
        rgba(215, 25, 32, 0.038);

    outline: none;
}

.yb-nav-support-link:hover::before,
.yb-nav-support-link:focus-visible::before,
.yb-nav-support-link.is-current::before {
    opacity: 1;
}

.yb-nav-support-link:hover > svg,
.yb-nav-support-link:focus-visible > svg,
.yb-nav-support-link.is-current > svg {
    stroke: #d71920;

    transform: translateX(3px);
}


/* =========================================================================================================
   07. PANEL FOOTER
========================================================================================================= */

.yb-nav-panel__footer {
    padding-top: 15px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    gap: 10px 18px;
}

.yb-nav-panel__footer-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    color: #39352f;

    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;

    text-decoration: none;

    transition: color 0.2s ease;
}

.yb-nav-panel__footer-link:hover,
.yb-nav-panel__footer-link:focus-visible,
.yb-nav-panel__footer-link.is-current {
    color: #b91117;
    outline: none;
}

.yb-nav-panel__footer-link:hover > svg,
.yb-nav-panel__footer-link:focus-visible > svg,
.yb-nav-panel__footer-link.is-current > svg {
    stroke: #d71920;

    transform: translateX(3px);
}


/* =========================================================================================================
   08. RESPONSIVE
========================================================================================================= */

@media (max-width: 850px) {
    .yb-nav {
        gap: 24px;
    }

    .yb-nav-panel--products {
        width:
            min(
                650px,
                calc(100vw - 32px)
            );
    }
}


/*
 * The current global Header CSS hides .yubeen-header-nav
 * below 900px. Mobile navigation should be built separately.
 */
@media (max-width: 850px) {
    .yb-nav-panel {
        display: none !important;
    }
}





/* =========================================================
   YUBEEN HEADER — INTERMEDIATE WIDTH / ZOOM OVERLAP FIX
========================================================= */


/* 1320px 以下：第一次压缩 */
@media (max-width: 1320px) {

    .yubeen-header-inner {
        width: calc(100% - 40px) !important;

        grid-template-columns:
            150px
            minmax(0, 1fr)
            auto !important;

        column-gap: 22px !important;
    }

    .yubeen-header-logo,
    .yubeen-header-logo .elementor-widget-container,
    .yubeen-header-logo a {
        width: 150px !important;
        max-width: 150px !important;
    }

    .yubeen-header-logo img {
        max-width: 142px !important;
    }

    .yb-nav {
        gap: 20px !important;
    }

    .yb-nav__link,
    .yb-nav__trigger {
        font-size: 14px !important;
    }

    .yubeen-header-actions {
        gap: 10px !important;
    }

    .yubeen-header .yb-live-search__trigger {
        width: 38px !important;
        height: 38px !important;
    }

    .yubeen-header-contact-button {
        min-height: 40px !important;
        height: 40px !important;

        padding: 0 18px !important;

        font-size: 13px !important;
    }

    .yubeen-header-partner-button {
        min-height: 42px !important;
        height: 42px !important;

        padding: 0 20px !important;

        font-size: 13px !important;
    }
}


/* 1160px 以下：解决截图中的主要重叠区间 */
@media (max-width: 1160px) {

    .yubeen-header-inner {
        width: calc(100% - 28px) !important;

        grid-template-columns:
            132px
            minmax(0, 1fr)
            auto !important;

        column-gap: 14px !important;
    }

    .yubeen-header-logo,
    .yubeen-header-logo .elementor-widget-container,
    .yubeen-header-logo a {
        width: 132px !important;
        max-width: 132px !important;
    }

    .yubeen-header-logo img {
        max-width: 128px !important;
    }

    .yb-nav {
        gap: 13px !important;
    }

    .yb-nav__link,
    .yb-nav__trigger {
        font-size: 12.5px !important;
    }

    .yb-nav__chevron {
        width: 9px !important;
        height: 9px !important;
    }

    .yubeen-header-actions {
        gap: 7px !important;
    }

    .yubeen-header .yb-live-search__trigger {
        width: 36px !important;
        height: 36px !important;
    }

    .yubeen-header .yb-live-search__trigger svg {
        width: 18px !important;
        height: 18px !important;
    }

    .yubeen-header-contact-button {
        min-height: 38px !important;
        height: 38px !important;

        padding: 0 14px !important;

        font-size: 12px !important;
    }

    .yubeen-header-partner-button {
        min-height: 40px !important;
        height: 40px !important;

        padding: 0 16px !important;

        font-size: 12px !important;
    }
}


/* ---------------------------------------------------------
   NARROW DESKTOP
   在 900px 桌面导航断点以前，保留两个按钮
--------------------------------------------------------- */

@media (max-width: 1020px) {

    .yubeen-header-inner {
        width: calc(100% - 20px) !important;

        grid-template-columns:
            120px
            minmax(0, 1fr)
            auto !important;

        column-gap: 10px !important;
    }

    .yubeen-header-logo,
    .yubeen-header-logo .elementor-widget-container,
    .yubeen-header-logo a {
        width: 120px !important;
        max-width: 120px !important;
    }

    .yubeen-header-logo img {
        max-width: 116px !important;
    }

    .yb-nav {
        gap: 8px !important;
    }

    .yb-nav__link,
    .yb-nav__trigger {
        font-size: 11.5px !important;
    }

    .yb-nav__chevron {
        width: 8px !important;
        height: 8px !important;
    }

    .yubeen-header-actions {
        gap: 5px !important;
    }

    .yubeen-header .yb-live-search__trigger {
        width: 32px !important;
        height: 32px !important;
    }

    .yubeen-header .yb-live-search__trigger svg {
        width: 17px !important;
        height: 17px !important;
    }

    /* Contact Us 继续显示 */
    .yubeen-header-contact-button {
        display: inline-flex !important;

        min-height: 36px !important;
        height: 36px !important;

        padding: 0 11px !important;

        font-size: 11.5px !important;
    }

    .yubeen-header-partner-button {
        min-height: 38px !important;
        height: 38px !important;

        padding: 0 13px !important;

        font-size: 11.5px !important;
    }
}

/* 防止文字换行和菜单被压缩变形 */
@media (min-width: 901px) {

    .yubeen-header-nav {
        min-width: 0 !important;
        overflow: visible !important;
    }

    .yb-nav {
        min-width: 0 !important;
        flex-wrap: nowrap !important;
    }

    .yb-nav__link,
    .yb-nav__trigger,
    .yubeen-header-action-button {
        white-space: nowrap !important;
    }
}







/* =========================================================================================================
   09. REDUCED MOTION
========================================================================================================= */

@media (prefers-reduced-motion: reduce) {
    .yb-nav__link,
    .yb-nav__trigger,
    .yb-nav__chevron,
    .yb-nav-panel,
    .yb-nav-card,
    .yb-nav-card::before,
    .yb-nav-support-link,
    .yb-nav-support-link::before,
    .yb-nav-panel__footer-link,
    .yb-nav-card > svg,
    .yb-nav-support-link > svg,
    .yb-nav-panel__footer-link > svg {
        transition: none !important;
    }
}

/* =========================================================================================================
   35. MOBILE HEADER + OFF-CANVAS NAVIGATION
   ---------------------------------------------------------------------------------------------------------
   Added: 2026-08-13
   Purpose:
   - Prevent logo/search/action-button overlap below the desktop navigation breakpoint.
   - Keep only Logo + Search + Hamburger in the header row on mobile/tablet.
   - Move Contact Us and Become a Partner into the mobile drawer.
   - Provide accessible Products and Support accordions without changing Elementor template markup.
========================================================================================================= */

.yb-mobile-nav__toggle,
.yb-mobile-nav {
    display: none;
}

@media (max-width: 900px) {
    :root {
        --yb-mobile-header-side: 16px;
        --yb-mobile-control-size: 40px;
        --yb-mobile-drawer-width: min(90vw, 420px);
    }

    body.yb-mobile-nav-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .yubeen-header .yubeen-header-inner,
    .yubeen-header.yubeen-header--transparent .yubeen-header-inner,
    .yubeen-header.yubeen-header--dark .yubeen-header-inner {
        width: calc(100% - (var(--yb-mobile-header-side) * 2)) !important;
        max-width: none !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        column-gap: 10px !important;
    }

    .yubeen-header-logo,
    .yubeen-header-logo .elementor-widget-container,
    .yubeen-header-logo a {
        grid-column: 1 !important;
        width: 148px !important;
        max-width: 148px !important;
    }

    .yubeen-header-logo img {
        max-width: 142px !important;
        max-height: 38px !important;
    }

    .yubeen-header-nav {
        display: none !important;
    }

    .yubeen-header-actions {
        grid-column: 2 !important;
        width: auto !important;
        max-width: none !important;
        gap: 6px !important;
        justify-self: end !important;
        overflow: visible !important;
    }

    /*
     * Desktop CTA buttons are intentionally moved into the mobile drawer.
     * These declarations come after all intermediate-width rules so they
     * cannot be re-enabled by the <=1020px desktop compression block.
     */
    .yubeen-header .yubeen-header-contact-button,
    .yubeen-header .yubeen-header-partner-button {
        display: none !important;
    }

    .yubeen-header .yb-live-search__trigger,
    .yubeen-header .yb-mobile-nav__toggle {
        width: var(--yb-mobile-control-size) !important;
        height: var(--yb-mobile-control-size) !important;
        min-width: var(--yb-mobile-control-size) !important;
        min-height: var(--yb-mobile-control-size) !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: transparent !important;
        color: var(--yb-header-ink) !important;
        box-shadow: none !important;
        flex: 0 0 var(--yb-mobile-control-size) !important;
    }

    .yubeen-header .yb-mobile-nav__toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        cursor: pointer !important;
        z-index: 5 !important;
        transition:
            color 0.2s ease,
            background-color 0.2s ease,
            transform 0.2s ease !important;
    }

    .yubeen-header--dark .yb-mobile-nav__toggle,
    .yubeen-header--transparent .yb-mobile-nav__toggle {
        color: var(--yb-header-white) !important;
    }

    .yubeen-header .yb-mobile-nav__toggle:hover,
    .yubeen-header .yb-mobile-nav__toggle:focus-visible,
    .yubeen-header .yb-mobile-nav__toggle[aria-expanded="true"] {
        color: var(--yb-header-red) !important;
        background: rgba(215, 25, 32, 0.07) !important;
        outline: none !important;
    }

    .yb-mobile-nav__toggle-lines {
        width: 19px;
        height: 15px;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        pointer-events: none;
    }

    .yb-mobile-nav__toggle-lines > span {
        width: 100%;
        height: 1.5px;
        display: block;
        border-radius: 999px;
        background: currentColor;
        transform-origin: center;
        transition:
            transform 0.22s ease,
            opacity 0.18s ease;
    }

    .yb-mobile-nav__toggle[aria-expanded="true"]
    .yb-mobile-nav__toggle-lines > span:nth-child(1) {
        transform: translateY(6.75px) rotate(45deg);
    }

    .yb-mobile-nav__toggle[aria-expanded="true"]
    .yb-mobile-nav__toggle-lines > span:nth-child(2) {
        opacity: 0;
    }

    .yb-mobile-nav__toggle[aria-expanded="true"]
    .yb-mobile-nav__toggle-lines > span:nth-child(3) {
        transform: translateY(-6.75px) rotate(-45deg);
    }

    .yb-mobile-nav {
        position: fixed;
        inset: 0;
        z-index: 100100;
        display: block;
        visibility: hidden;
        pointer-events: none;
    }

    .yb-mobile-nav.is-open {
        visibility: visible;
        pointer-events: auto;
    }

    .yb-mobile-nav__backdrop {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: rgba(2, 5, 9, 0.58);
        opacity: 0;
        cursor: default;
        transition: opacity 0.28s ease;
        -webkit-backdrop-filter: blur(3px);
        backdrop-filter: blur(3px);
    }

    .yb-mobile-nav.is-open .yb-mobile-nav__backdrop {
        opacity: 1;
    }

    .yb-mobile-nav__panel {
        position: absolute;
        top: 0;
        right: 0;
        width: var(--yb-mobile-drawer-width);
        max-width: 100%;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        background:
            radial-gradient(circle at 100% 0%, rgba(215, 25, 32, 0.09), transparent 32%),
            linear-gradient(180deg, #0b0f14 0%, #070a0e 100%);
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        box-shadow: -26px 0 70px rgba(0, 0, 0, 0.34);
        transform: translateX(101%);
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
        overflow: hidden;
        color: #ffffff;
    }

    .yb-mobile-nav.is-open .yb-mobile-nav__panel {
        transform: translateX(0);
    }

    .yb-mobile-nav__head {
        min-height: 74px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        flex: 0 0 auto;
    }

    .yb-mobile-nav__head-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .yb-mobile-nav__eyebrow {
        color: #ff3840;
        font-size: 9px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .yb-mobile-nav__title {
        margin: 0;
        color: #ffffff;
        font-size: 20px;
        line-height: 1.1;
        font-weight: 760;
        letter-spacing: -0.02em;
    }

    .yb-mobile-nav__close {
        width: 40px;
        height: 40px;
        min-width: 40px;
        margin: 0;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.035);
        color: #ffffff;
        cursor: pointer;
    }

    .yb-mobile-nav__close:hover,
    .yb-mobile-nav__close:focus-visible {
        color: #ff3840;
        border-color: rgba(255, 56, 64, 0.4);
        outline: none;
    }

    .yb-mobile-nav__close svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
    }

    .yb-mobile-nav__scroll {
        min-height: 0;
        padding: 8px 20px 24px;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
    }

    .yb-mobile-nav__menu {
        display: flex;
        flex-direction: column;
    }

    .yb-mobile-nav__link,
    .yb-mobile-nav__accordion-trigger {
        width: 100%;
        min-height: 54px;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        font-family: inherit;
        font-size: 15px;
        line-height: 1.2;
        font-weight: 700;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .yb-mobile-nav__link:hover,
    .yb-mobile-nav__link:focus-visible,
    .yb-mobile-nav__link.is-current,
    .yb-mobile-nav__accordion-trigger:hover,
    .yb-mobile-nav__accordion-trigger:focus-visible,
    .yb-mobile-nav__accordion.is-current > .yb-mobile-nav__accordion-trigger {
        color: #ff3840;
        outline: none;
    }

    .yb-mobile-nav__arrow,
    .yb-mobile-nav__chevron {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .yb-mobile-nav__chevron {
        transition: transform 0.22s ease;
    }

    .yb-mobile-nav__accordion.is-open
    .yb-mobile-nav__chevron {
        transform: rotate(180deg);
    }

    .yb-mobile-nav__submenu {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        transition:
            grid-template-rows 0.26s ease,
            opacity 0.2s ease;
    }

    .yb-mobile-nav__accordion.is-open
    .yb-mobile-nav__submenu {
        grid-template-rows: 1fr;
        opacity: 1;
    }

    .yb-mobile-nav__submenu-inner {
        min-height: 0;
        overflow: hidden;
    }

    .yb-mobile-nav__sublink {
        min-height: 46px;
        padding: 0 10px 0 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.055);
        color: rgba(255, 255, 255, 0.67);
        font-size: 13px;
        line-height: 1.3;
        font-weight: 600;
        text-decoration: none;
    }

    .yb-mobile-nav__sublink::before {
        content: "";
        width: 4px;
        height: 4px;
        margin-right: 3px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.22);
        flex: 0 0 4px;
    }

    .yb-mobile-nav__sublink > span {
        flex: 1 1 auto;
    }

    .yb-mobile-nav__sublink:hover,
    .yb-mobile-nav__sublink:focus-visible,
    .yb-mobile-nav__sublink.is-current {
        color: #ffffff;
        outline: none;
    }

    .yb-mobile-nav__sublink.is-current::before {
        background: #ff3840;
    }

    .yb-mobile-nav__actions {
        padding: 22px 0 4px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .yb-mobile-nav__cta {
        min-height: 46px;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        font-size: 13px;
        line-height: 1;
        font-weight: 800;
        text-decoration: none;
        transition:
            background-color 0.2s ease,
            border-color 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
    }

    .yb-mobile-nav__cta--secondary {
        border: 1px solid rgba(255, 255, 255, 0.17);
        background: rgba(255, 255, 255, 0.035);
        color: #ffffff;
    }

    .yb-mobile-nav__cta--primary {
        border: 1px solid var(--yb-header-red);
        background: var(--yb-header-red);
        color: #ffffff;
    }

    .yb-mobile-nav__cta:hover,
    .yb-mobile-nav__cta:focus-visible {
        transform: translateY(-1px);
        outline: none;
    }

    .yb-mobile-nav__cta--secondary:hover,
    .yb-mobile-nav__cta--secondary:focus-visible {
        border-color: rgba(255, 255, 255, 0.34);
        background: rgba(255, 255, 255, 0.07);
    }

    .yb-mobile-nav__cta--primary:hover,
    .yb-mobile-nav__cta--primary:focus-visible {
        border-color: var(--yb-header-red-dark);
        background: var(--yb-header-red-dark);
    }
}

@media (max-width: 640px) {
    :root {
        --yb-mobile-header-side: 12px;
    }

    .yubeen-header .yubeen-header-inner,
    .yubeen-header.yubeen-header--transparent .yubeen-header-inner,
    .yubeen-header.yubeen-header--dark .yubeen-header-inner {
        column-gap: 8px !important;
    }

    .yubeen-header-logo,
    .yubeen-header-logo .elementor-widget-container,
    .yubeen-header-logo a {
        width: 126px !important;
        max-width: 126px !important;
    }

    .yubeen-header-logo img {
        max-width: 120px !important;
        max-height: 34px !important;
    }

    .yb-mobile-nav__head {
        min-height: 68px;
        padding-left: 18px;
        padding-right: 18px;
    }

    .yb-mobile-nav__scroll {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 390px) {
    :root {
        --yb-mobile-header-side: 10px;
        --yb-mobile-control-size: 38px;
        --yb-mobile-drawer-width: min(94vw, 390px);
    }

    .yubeen-header-logo,
    .yubeen-header-logo .elementor-widget-container,
    .yubeen-header-logo a {
        width: 112px !important;
        max-width: 112px !important;
    }

    .yubeen-header-logo img {
        max-width: 108px !important;
    }

    .yubeen-header-actions {
        gap: 3px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yb-mobile-nav__panel,
    .yb-mobile-nav__backdrop,
    .yb-mobile-nav__toggle-lines > span,
    .yb-mobile-nav__submenu,
    .yb-mobile-nav__chevron,
    .yb-mobile-nav__cta {
        transition: none !important;
    }
}

/* Mobile variant color correction: keep both header controls legible on dark/transparent templates. */
@media (max-width: 900px) {
    .yubeen-header--dark .yb-live-search__trigger,
    .yubeen-header--transparent .yb-live-search__trigger,
    .yubeen-header--dark .yb-mobile-nav__toggle,
    .yubeen-header--transparent .yb-mobile-nav__toggle {
        color: var(--yb-header-white) !important;
    }
}




/* =========================================================================================================
   PRODUCTS DROPDOWN — SINGLE-COLUMN / THREE PUBLIC CATEGORIES
   Added: 2026-09-08
========================================================================================================= */

.yb-nav-panel--products {
    width:
        min(
            520px,
            calc(100vw - 36px)
        );
}


/* Products 标题区域从原来的双栏逻辑恢复为真正单栏 */
.yb-nav-panel--products .yb-nav-panel__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}


/* Products 卡片由两列改为一列 */
.yb-nav-panel--products .yb-nav-panel__grid {
    grid-template-columns: minmax(0, 1fr);
}


/*
 * 原 CSS 对奇数 / 偶数卡片分别设置了：
 * - 中间竖线
 * - 左右不同 padding
 *
 * 单列后统一清除。
 */
.yb-nav-panel--products .yb-nav-card,
.yb-nav-panel--products .yb-nav-card:nth-child(odd),
.yb-nav-panel--products .yb-nav-card:nth-child(even) {
    min-height: 86px;

    padding:
        15px
        6px
        14px
        0;

    border-right: 0;
}


/* 单列卡片稍微压缩红色 hover 指示线 */
.yb-nav-panel--products .yb-nav-card::before {
    top: 13px;
    bottom: 13px;
}



/* =========================================================================================================
   44. HEADER DROPDOWN — COMPACT ITEM SPACING
   Added: 2026-09-08
   Scope:
   - Products dropdown items
   - Support dropdown items
   - Reduce excessive vertical item height without changing typography/layout
========================================================================================================= */


/* PRODUCTS — slightly more compact rows */
.yb-nav-panel--products .yb-nav-card,
.yb-nav-panel--products .yb-nav-card:nth-child(odd),
.yb-nav-panel--products .yb-nav-card:nth-child(even) {
    min-height: 72px;

    padding:
        11px
        6px
        10px
        12px;
}


/* Products active / hover red indicator follows the shorter row */
.yb-nav-panel--products .yb-nav-card::before {
    top: 10px;
    bottom: 10px;
}


/* SUPPORT — slightly more compact rows */
.yb-nav-panel--support .yb-nav-support-link {
    min-height: 68px;

    padding:
        10px
        7px
        10px
        0;
}


/* Support active / hover red indicator follows the shorter row */
.yb-nav-panel--support .yb-nav-support-link::before {
    top: 10px;
    bottom: 10px;
}

/* =========================================================================================================
   45. HEADER DROPDOWN — FINAL DETAIL REFINEMENT
   Added: 2026-09-08
   Scope:
   - Refine Products category numbering
   - Preserve safe spacing between Support active marker and text
========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   PRODUCTS — CATEGORY NUMBERS
   Replace the previous editorial serif style with a cleaner technical sans-serif treatment.
--------------------------------------------------------------------------------------------------------- */

.yb-nav-panel--products .yb-nav-card__number {
    padding-top: 3px;

    color: #98681c;

    font-family:
        Manrope,
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.06em;

    font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------------------------------------
   SUPPORT — SAFE LEFT SPACING
   Keep content away from the 2px red active / hover marker.
--------------------------------------------------------------------------------------------------------- */

.yb-nav-panel--support .yb-nav-support-link {
    padding:
        10px
        7px
        10px
        14px;
}


/*
 * Earlier CSS changes padding-left on hover / focus / current.
 * Lock all interactive states to the same 14px so the row does not move
 * and the text never overlaps the red indicator.
 */
.yb-nav-panel--support .yb-nav-support-link:hover,
.yb-nav-panel--support .yb-nav-support-link:focus-visible,
.yb-nav-panel--support .yb-nav-support-link.is-current {
    padding-left: 14px;
}


/* Keep the red marker aligned with the compact row height */
.yb-nav-panel--support .yb-nav-support-link::before {
    top: 10px;
    bottom: 10px;
    left: 0;
}


/* =========================================================================================================
   46. HEADER DROPDOWN — SHARED TYPOGRAPHY & LINE SYSTEM
   Added: 2026-09-08
   Scope:
   - Products dropdown
   - Support dropdown
   - Unify item typography, descriptions, dividers and active indicators
========================================================================================================= */


/* ---------------------------------------------------------------------------------------------------------
   01. SHARED ITEM TITLE TYPOGRAPHY
--------------------------------------------------------------------------------------------------------- */

.yb-nav-panel--products .yb-nav-card__copy strong,
.yb-nav-panel--support .yb-nav-support-link strong {
    margin-bottom: 5px;

    color: inherit;

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;

    letter-spacing: -0.01em;
}


/* ---------------------------------------------------------------------------------------------------------
   02. SHARED DESCRIPTION TYPOGRAPHY
--------------------------------------------------------------------------------------------------------- */

.yb-nav-panel--products .yb-nav-card__copy small,
.yb-nav-panel--support .yb-nav-support-link small {
    color: #7e786f;

    font-family:
        Inter,
        "Helvetica Neue",
        Arial,
        sans-serif;

    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.5;

    letter-spacing: -0.005em;
}


/* ---------------------------------------------------------------------------------------------------------
   03. SHARED ROW DIVIDERS
--------------------------------------------------------------------------------------------------------- */

.yb-nav-panel--products .yb-nav-card,
.yb-nav-panel--support .yb-nav-support-link {
    border-bottom:
        1px solid
        rgba(33, 29, 23, 0.10);
}


/* ---------------------------------------------------------------------------------------------------------
   04. SHARED ACTIVE / HOVER INDICATOR
--------------------------------------------------------------------------------------------------------- */

.yb-nav-panel--products .yb-nav-card::before,
.yb-nav-panel--support .yb-nav-support-link::before {
    top: 10px;
    bottom: 10px;
    left: 0;

    width: 2px;

    background: #d71920;
}


/* ---------------------------------------------------------------------------------------------------------
   05. SHARED ARROW GEOMETRY
--------------------------------------------------------------------------------------------------------- */

.yb-nav-panel--products .yb-nav-card > svg,
.yb-nav-panel--support .yb-nav-support-link > svg {
    width: 15px;
    height: 15px;

    stroke-width: 1.6;
}

/* =========================================================================================================
   47. HEADER DROPDOWN — CURRENT VS HOVER STATE REFINEMENT
========================================================================================================= */

/* Hover: subtle feedback only */
.yb-nav-panel--products .yb-nav-card:hover:not(.is-current),
.yb-nav-panel--support .yb-nav-support-link:hover:not(.is-current) {
    color: #171714;

    background:
        rgba(215, 25, 32, 0.022);
}


/* Do not show active marker on a simple hover */
.yb-nav-panel--products .yb-nav-card:hover:not(.is-current)::before,
.yb-nav-panel--support .yb-nav-support-link:hover:not(.is-current)::before {
    opacity: 0;
}


/* Arrow may still turn red on hover */
.yb-nav-panel--products .yb-nav-card:hover:not(.is-current) > svg,
.yb-nav-panel--support .yb-nav-support-link:hover:not(.is-current) > svg {
    stroke: #d71920;
}


/* Current state remains clearly selected */
.yb-nav-panel--products .yb-nav-card.is-current,
.yb-nav-panel--support .yb-nav-support-link.is-current {
    color: #b91117;

    background:
        rgba(215, 25, 32, 0.038);
}


.yb-nav-panel--products .yb-nav-card.is-current::before,
.yb-nav-panel--support .yb-nav-support-link.is-current::before {
    opacity: 1;
}