/*
 * Homepage product card — target loop 3034 restoration.
 * Scope: homepage Elementor product cards only.
 */
@font-face {
    font-family: "elementskit";
    src: url("./fonts/elementskit.woff?v=20260720-15") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: block;
}

/* The saved Elementor page keeps .e-con-inner at height:100% / flex-grow:1.
   That stretches the image area. The target card uses the image's natural 80% square height. */
.okx-home-native-v12 .elementor-3034.swiper-slide {
    height: auto !important;
    min-height: 0 !important;
}

.okx-home-native-v12 .elementor-3034 > .elementor-element-7ff9f47 {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 15px 15px 0 !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: #fff !important;
    box-shadow: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.okx-home-native-v12 .elementor-3034 > .elementor-element-7ff9f47 > .e-con-inner {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

/* Lowest-price pill. */
.okx-home-native-v12 .elementor-3034 .elementor-element-94e0ad1 {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    z-index: 5 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-94e0ad1 .elementor-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 24px !important;
    border: 0 !important;
    border-radius: 222px !important;
    background: #003634 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: "Noto Sans HK", "Noto Sans CJK HK", sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

/* Product image: target is 80% of the inner card width, with no flex stretching. */
.okx-home-native-v12 .elementor-3034 .elementor-element-2ac5f82 {
    display: block !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: visible !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-2ac5f82 > .elementor-widget-container,
.okx-home-native-v12 .elementor-3034 .elementor-element-2ac5f82 > .elementor-widget-container > a {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-2ac5f82 img {
    display: block !important;
    flex: 0 0 auto !important;
    width: 80% !important;
    max-width: 80% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Dark-green information panel. */
.okx-home-native-v12 .elementor-3034 .elementor-element-196b444 {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    min-height: 270px !important;
    margin: 0 !important;
    padding: 15px !important;
    gap: 0 !important;
    border: 0 !important;
    border-radius: 15px 15px 0 0 !important;
    background: #004e4d !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-e5ff411 {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 20px !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-29a2250 {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: "Noto Sans HK", "Noto Sans CJK HK", sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-29a2250 > .elementor-widget-container {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 5px !important;
    border: 0 !important;
    border-bottom: 1px solid #fff !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-3a265eb {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: "Noto Sans HK", "Noto Sans CJK HK", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-3a265eb > .elementor-widget-container,
.okx-home-native-v12 .elementor-3034 .elementor-element-3a265eb p {
    margin: 0 !important;
    padding: 0 !important;
}

/* Price and round arrow sit on the same bottom row. */
.okx-home-native-v12 .elementor-3034 .elementor-element-929f131 {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9,
.okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 > .elementor-widget-container {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 .price,
.okx-home-native-v12 .woocommerce .elementor-3034 .elementor-element-38af1b9 .price,
.okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 .amount,
.okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 bdi {
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-family: "Noto Sans HK", "Noto Sans CJK HK", sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 40px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e,
.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e > .elementor-widget-container,
.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e .elementor-button-wrapper {
    display: block !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e .elementor-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #004e4d !important;
    fill: #004e4d !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e .elementor-button-content-wrapper,
.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e .elementor-button-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    line-height: 1 !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e i.icon-right-arrow {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #004e4d !important;
    font-family: "elementskit" !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-variant: normal !important;
    line-height: 1 !important;
    text-transform: none !important;
    transform: none !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e i.icon-right-arrow::before {
    display: block !important;
    position: static !important;
    content: "\e9c5" !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: #004e4d !important;
    font-family: "elementskit" !important;
    font-size: 18px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    transform: none !important;
}

.okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e i.icon-right-arrow::after {
    display: none !important;
    content: none !important;
}

@media (max-width: 1024px) {
    .okx-home-native-v12 .elementor-3034 .elementor-element-196b444 {
        min-height: 240px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-29a2250 {
        font-size: 18px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-3a265eb {
        font-size: 14px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 .price,
    .okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 .amount,
    .okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 bdi {
        font-size: 18px !important;
    }
}

@media (max-width: 767px) {
    .okx-home-native-v12 .elementor-3034 > .elementor-element-7ff9f47 > .e-con-inner,
    .okx-home-native-v12 .elementor-3034 .elementor-element-e5ff411 {
        gap: 20px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-29a2250 {
        font-size: 16px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-3a265eb {
        font-size: 14px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 .price,
    .okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 .amount,
    .okx-home-native-v12 .elementor-3034 .elementor-element-38af1b9 bdi {
        font-size: 14px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-94e0ad1 .elementor-button {
        padding: 10px 20px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e,
    .okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e > .elementor-widget-container,
    .okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e .elementor-button-wrapper,
    .okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e .elementor-button {
        flex-basis: 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
    }
    .okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e i.icon-right-arrow,
    .okx-home-native-v12 .elementor-3034 .elementor-element-a1e498e i.icon-right-arrow::before {
        font-size: 16px !important;
    }
}

/* 2026-07-20: final small visual parity fixes.
 * 1) Keep inactive medicine tabs at the target rgba color without the legacy .55 opacity multiplier.
 * 2) Force the footer LINE badge SVG to render with its intended white/green fills.
 */
.okx-home-native-v12 .elementor-element-67227f0 .e-n-tabs-heading .e-n-tab-title,
.okx-home-native-v12 .elementor-element-67227f0 .e-n-tabs-heading .e-n-tab-title .e-n-tab-title-text {
    opacity: 1 !important;
}

.okx-home-native-v12 .elementor-element-67227f0 .e-n-tabs-heading .e-n-tab-title[aria-selected="false"],
.okx-home-native-v12 .elementor-element-67227f0 .e-n-tabs-heading .e-n-tab-title[aria-selected="false"] .e-n-tab-title-text {
    color: rgba(239, 102, 48, 0.40) !important;
}

.okx-home-native-v12 .elementor-element-67227f0 .e-n-tabs-heading .e-n-tab-title[aria-selected="true"],
.okx-home-native-v12 .elementor-element-67227f0 .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text {
    color: #ef6630 !important;
}

.okx-home-native-v12 .elementor-136 .elementor-element-24d47d9 .elementor-icon-box-icon,
.okx-home-native-v12 .elementor-136 .elementor-element-24d47d9 .elementor-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.okx-home-native-v12 .elementor-136 .elementor-element-24d47d9 .elementor-icon svg {
    display: block !important;
    width: 50px !important;
    height: 50px !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.okx-home-native-v12 .elementor-136 .elementor-element-24d47d9 .elementor-icon svg .cls-1 {
    fill: #ffffff !important;
}

.okx-home-native-v12 .elementor-136 .elementor-element-24d47d9 .elementor-icon svg .cls-2 {
    fill: #00c300 !important;
}

/* 2026-07-20: footer LINE alignment + desktop treatment mega menu.
 * Scope is limited to the saved homepage only.
 */
@media (min-width: 768px) {
    /* Keep the LINE icon and its label as one compact block at the right side. */
    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-38ef221 {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-cfd5f3a,
    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-ba4074c {
        flex: 1 1 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-ba4074c {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
    }

    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-24d47d9 {
        width: auto !important;
        max-width: max-content !important;
        margin: 0 !important;
        align-self: flex-start !important;
    }

    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-24d47d9 > .elementor-widget-container {
        width: auto !important;
        max-width: max-content !important;
    }

    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 64px !important;
        max-width: 64px !important;
        margin: 0 0 0 auto !important;
        gap: 4px !important;
        text-align: center !important;
    }

    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-icon,
    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-content,
    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-title {
        width: 64px !important;
        max-width: 64px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-title,
    .okx-home-native-v12 .elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-title a {
        display: block !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
    }

    /* The original Blocksy menu needs its JS to add .ct-active. The saved page
       does not run Blocksy's header controller, so provide an equivalent hover state. */
    .okx-home-native-v12 #menu-item-686 > .ct-menu-link {
        cursor: pointer !important;
    }

    .okx-home-native-v12 #menu-item-686 > .ct-toggle-dropdown-desktop-ghost {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* Keep the public header visible while the full-width mega menu opens below it. */
    .okx-home-native-v12 #header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10050 !important;
        isolation: isolate !important;
    }

    .okx-home-native-v12 #header > [data-device="desktop"],
    .okx-home-native-v12 #header .ct-sticky-container,
    .okx-home-native-v12 #header [data-row="middle"] {
        position: relative !important;
        z-index: 10051 !important;
    }

    .okx-home-native-v12 #menu-item-686 > .sub-menu {
        position: fixed !important;
        z-index: 10040 !important;
        top: var(--okx-header-bottom, 80px) !important;
        right: 0 !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        list-style: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #003634 !important;
        box-shadow: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, 8px, 0) !important;
        transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important;
    }

    .okx-home-native-v12 #menu-item-686 > .sub-menu::before,
    .okx-home-native-v12 #menu-item-686 > .sub-menu::after {
        display: none !important;
        content: none !important;
    }

    .okx-home-native-v12 #menu-item-686.ct-active > .sub-menu,
    .okx-home-native-v12 #menu-item-686:hover > .sub-menu,
    .okx-home-native-v12 #menu-item-686:focus-within > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .okx-home-native-v12 #menu-item-686.ct-active > .ct-menu-link .ct-toggle-dropdown-desktop svg,
    .okx-home-native-v12 #menu-item-686:hover > .ct-menu-link .ct-toggle-dropdown-desktop svg {
        transform: rotate(180deg) !important;
    }

    .okx-home-native-v12 #menu-item-686 > .sub-menu > li,
    .okx-home-native-v12 #menu-item-686 > .sub-menu > li > .entry-content {
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-24594e3 {
        display: flex !important;
        width: 100% !important;
        background: #003634 !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-a57bd53 {
        display: flex !important;
        width: 100% !important;
        padding: 40px 0 60px !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-a57bd53 > .e-con-inner {
        display: flex !important;
        width: min(1200px, calc(100% - 40px)) !important;
        max-width: 1200px !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        flex-grow: 0 !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-d6eae5e {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 40px !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-4e961ae,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-2f5124d {
        display: flex !important;
        flex: 1 1 0 !important;
        flex-direction: column !important;
        width: 50% !important;
        max-width: none !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-1a066cd,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-2d2bfce {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        padding: 0 !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-widget-heading,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-widget-container,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-heading-title {
        width: 100% !important;
        margin: 0 !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-54c822a .elementor-heading-title,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-250eff2 .elementor-heading-title {
        margin-bottom: 4px !important;
        color: #3ddbc0 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        line-height: 1.5 !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-57d881f > .elementor-widget-container,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-f43385e > .elementor-widget-container,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-45fecff > .elementor-widget-container,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-04c7741 > .elementor-widget-container,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-f9aac73 > .elementor-widget-container,
    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-1b4d6db > .elementor-widget-container {
        padding: 8px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #3ddbc0 !important;
        border-radius: 0 !important;
    }

    .okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-heading-title a {
        display: block !important;
        color: #ffffff !important;
        font-size: 18px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;
    }
}

/* 2026-07-20 final footer LINE placement.
 * Use a two-column grid so the LINE block cannot drift into the center.
 */
@media (min-width: 768px) {
    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-38ef221 {
        position: relative !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 72px !important;
        grid-template-rows: auto !important;
        align-items: start !important;
        justify-content: stretch !important;
        column-gap: 30px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-38ef221 > .elementor-element-cfd5f3a {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-38ef221 > .elementor-element-ba4074c {
        grid-column: 2 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex: none !important;
        align-items: flex-start !important;
        justify-content: flex-end !important;
        justify-self: end !important;
        width: 72px !important;
        max-width: 72px !important;
        min-width: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-24d47d9,
    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-24d47d9 > .elementor-widget-container,
    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 64px !important;
        max-width: 64px !important;
        min-width: 64px !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-icon,
    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-content,
    .okx-home-native-v12 footer.elementor-136 .elementor-element.elementor-element-24d47d9 .elementor-icon-box-title {
        width: 64px !important;
        max-width: 64px !important;
        margin: 0 !important;
        text-align: center !important;
    }
}


/* 2026-07-21: make the saved public header, following content and mega menu
 * physically overlap by two pixels. This removes the white hairline caused by
 * Blocksy's fractional sticky-placeholder height (81.6px) and viewport rounding.
 * Shared by homepage, /my-account/ and /product/ because all three pages reuse
 * the same saved #header markup and okx-home-native-v12 stylesheet.
 */
@media (min-width: 768px) {
    body.okx-home-native-v12 #header,
    body.okx-home-native-v12 #header > [data-device="desktop"],
    body.okx-home-native-v12 #header .ct-sticky-container,
    body.okx-home-native-v12 #header [data-sticky],
    body.okx-home-native-v12 #header [data-row="middle"] {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        border: 0 !important;
        border-bottom: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background-color: #003634 !important;
    }

    body.okx-home-native-v12 #header {
        overflow: visible !important;
    }

    /* Dark bridge covers both the normal header/content seam and the
       header/mega-menu seam without changing the header's visual height. */
    body.okx-home-native-v12 #header::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        z-index: 10060 !important;
        right: 0 !important;
        bottom: -3px !important;
        left: 0 !important;
        width: 100% !important;
        height: 4px !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
        background: #003634 !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.okx-home-native-v12 #menu-item-686 > .sub-menu {
        top: calc(var(--okx-header-bottom, 80px) - 3px) !important;
        margin-top: 0 !important;
        border-top: 0 !important;
        background-color: #003634 !important;
    }

    body.okx-home-native-v12 #menu-item-686 > .sub-menu > li,
    body.okx-home-native-v12 #menu-item-686 .elementor-2596,
    body.okx-home-native-v12 #menu-item-686 .elementor-2596 .elementor-element-24594e3 {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
        background-color: #003634 !important;
    }
}