/* OKX product detail page – refined against the supplied reference product pages. */
.okx-detail-page{
    --okx-detail-dark:#003f3b;
    --okx-detail-green:#168a4a;
    --okx-detail-green-dark:#0f5f35;
    --okx-detail-light-green:#eaf8ef;
    --okx-detail-mint:#3cdbc0;
    --okx-detail-orange:#ef6630;
    --okx-detail-title:#102033;
    --okx-detail-text:#334155;
    --okx-detail-muted:#64748b;
    --okx-detail-border:#e5edf3;
    --okx-detail-soft:#f6f8fb;
    width:100%;
    max-width:none;
    margin:0;
    overflow:hidden;
    background:#fff;
    color:var(--okx-detail-text);
    font-family:"Noto Sans HK","Noto Sans TC","Microsoft JhengHei",sans-serif;
    font-size:16px;
    line-height:1.65;
}
.okx-detail-page,
.okx-detail-page *{box-sizing:border-box}
.okx-detail-page img{max-width:100%;height:auto}
.okx-detail-container{
    width:var(--theme-container-width,min(90vw,100%));
    max-width:var(--theme-normal-container-max-width,1200px);
    margin-inline:auto;
    padding:38px 0 82px;
}
.okx-detail-breadcrumbs{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
    margin:0 0 52px;
    color:#18243a;
    font-size:12px;
    font-weight:600;
    line-height:1.45;
}
.okx-detail-breadcrumbs a{color:inherit;text-decoration:none}
.okx-detail-breadcrumbs a:hover{color:var(--okx-detail-orange)}
.okx-detail-breadcrumbs span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Product gallery and summary */
.okx-detail-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:start;
    gap:40px;
}
.okx-detail-gallery{position:relative;min-width:0}
.okx-detail-main-image{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    background:#fff;
}
.okx-detail-main-image>img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}
.okx-detail-thumbnails{
    display:flex;
    align-items:center;
    gap:18px;
    width:100%;
    margin-top:22px;
    padding:0 1px 3px;
    overflow-x:auto;
    scrollbar-width:thin;
}
.okx-detail-thumb{
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:center;
    width:98px;
    height:98px;
    flex:0 0 98px;
    min-width:0;
    padding:4px;
    overflow:hidden;
    border:1px solid transparent;
    border-radius:0;
    background:#fff;
    cursor:pointer;
    transition:border-color .18s ease;
}
.okx-detail-thumb:hover{border-color:#8bded2}
.okx-detail-thumb.is-active{border-color:#1a2433}
.okx-detail-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.okx-detail-summary{min-width:0;padding-top:0}
.okx-detail-heading-row{
    display:block;
    margin-bottom:10px;
}
.okx-detail-unit-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:78px;
    min-height:28px;
    position:absolute;
    z-index:2;
    top:7px;
    right:0;
    margin:0;
    padding:5px 13px;
    border-radius:999px;
    background:var(--okx-detail-dark);
    color:#fff;
    font-size:12px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}
.okx-detail-summary h1{
    min-width:0;
    margin:0;
    color:var(--okx-detail-title);
    font-size:30px;
    font-weight:700;
    line-height:1.5;
    letter-spacing:0;
    overflow-wrap:anywhere;
}
.okx-detail-intro{
    margin:0 0 16px;
    color:#1b2a40;
    font-size:15px;
    font-weight:500;
    line-height:1.7;
}
.okx-detail-spec-table{
    display:grid;
    grid-template-columns:105px minmax(0,1fr);
    width:100%;
    max-width:560px;
    margin:16px auto 20px;
    overflow:hidden;
    border:1px solid #dbe7ef;
    border-left:5px solid var(--okx-detail-green);
    border-radius:12px;
    background:#fff;
}
.okx-detail-spec-label,
.okx-detail-spec-value{
    min-width:0;
    padding:8px 10px;
    border-bottom:1px solid var(--okx-detail-border);
    line-height:1.65;
}
.okx-detail-spec-label{
    border-right:1px solid var(--okx-detail-border);
    background:#f8fafc;
    color:var(--okx-detail-muted);
    font-size:14px;
    font-weight:800;
}
.okx-detail-spec-value{
    color:var(--okx-detail-title);
    font-size:14.5px;
    font-weight:800;
    overflow-wrap:anywhere;
}
.okx-detail-spec-label.is-highlight{
    background:var(--okx-detail-light-green);
    color:var(--okx-detail-green);
}
.okx-detail-spec-value.is-highlight{
    color:var(--okx-detail-green);
    font-weight:900;
}
.okx-detail-spec-table>:nth-last-child(-n+2){border-bottom:0}

.okx-detail-buy-area{
    margin-top:28px;
    padding:30px 0 35px;
    border-top:1px solid var(--okx-detail-mint);
    border-bottom:1px solid var(--okx-detail-mint);
}
.okx-detail-price{
    margin:0 0 35px;
    color:var(--okx-detail-orange);
    font-size:20px;
    font-weight:700;
    line-height:1.65;
}
.okx-detail-price .woocommerce-Price-amount{color:inherit}
.okx-detail-cart{
    display:grid!important;
    grid-template-columns:140px minmax(0,1fr);
    gap:12px;
    width:100%;
    margin:0!important;
}
.okx-detail-cart.has-view-cart{
    grid-template-columns:140px minmax(0,1fr) minmax(0,1fr);
}
.okx-detail-quantity{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 42px;
    height:55px;
    overflow:hidden;
    border:1px solid #0d4a47;
    background:#fff;
}
.okx-detail-quantity button{
    appearance:none;
    padding:0;
    border:0;
    background:#fff;
    color:#111827;
    font-size:18px;
    cursor:pointer;
}
.okx-detail-quantity .quantity{
    display:block!important;
    width:100%!important;
    margin:0!important;
}
.okx-detail-quantity input.qty{
    width:100%!important;
    height:53px!important;
    min-height:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    color:#111827!important;
    text-align:center!important;
    font-size:14px!important;
    font-weight:700!important;
    appearance:textfield;
}
.okx-detail-quantity input.qty::-webkit-outer-spin-button,
.okx-detail-quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.okx-detail-add-button{
    width:100%!important;
    min-height:55px!important;
    height:55px!important;
    margin:0!important;
    padding:0 20px!important;
    border:0!important;
    border-radius:0!important;
    background:var(--okx-detail-dark)!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:800!important;
    line-height:55px!important;
    cursor:pointer!important;
}
.okx-detail-add-button:hover{background:#07544f!important}
.okx-detail-add-button.is-loading{
    opacity:.7;
    cursor:wait!important;
}
.okx-detail-view-cart{
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:100%;
    min-height:55px;
    margin:0!important;
    padding:0 20px;
    border:0;
    border-radius:0;
    background:#e9edf2;
    color:#111!important;
    font-size:14px;
    font-weight:800;
    line-height:1.25;
    text-align:center;
    text-decoration:none!important;
}
.okx-detail-view-cart:hover{
    background:#dfe4ea;
    color:#111!important;
}
.okx-detail-cart-status{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
}
.okx-detail-native-cart{margin-top:8px}

/* Tabs */
.okx-detail-tabs{margin-top:60px}
.okx-detail-tab-nav{
    display:flex;
    align-items:flex-end;
    gap:0;
    min-height:66px;
    padding-left:0;
    border-bottom:1px solid var(--okx-detail-mint);
}
.okx-detail-tab-nav button{
    position:relative;
    appearance:none;
    min-width:104px;
    padding:23px 20px 24px;
    border:0;
    background:transparent;
    color:#101827;
    font-size:17px;
    font-weight:700;
    line-height:1;
    cursor:pointer;
}
.okx-detail-tab-nav button.is-active:after{
    content:"";
    position:absolute;
    right:20px;
    bottom:-2px;
    left:20px;
    height:3px;
    background:var(--okx-detail-dark);
}
.okx-detail-tab-panel{padding-top:30px}
.okx-detail-lead{
    margin:0 0 24px;
    color:#142238;
    font-size:15px;
    font-weight:600;
    line-height:1.75;
}

/* Description content */
.okx-detail-guide{
    padding:34px 18px;
    border-radius:20px;
    background:var(--okx-detail-soft);
    color:var(--okx-detail-text);
    line-height:1.85;
}
.okx-guide-section{margin:0 0 38px}
.okx-guide-section:last-child{margin-bottom:0}
.okx-guide-section>h2{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 18px;
    color:var(--okx-detail-title);
    font-size:26px;
    font-weight:900;
    line-height:1.35;
}
.okx-guide-section>h2>span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:7px;
    background:linear-gradient(135deg,#60a5fa,#2563eb);
    box-shadow:0 6px 14px rgba(37,99,235,.22);
    color:#fff;
    font-size:17px;
    font-weight:900;
}
.okx-guide-grid{display:grid;gap:18px}
.okx-guide-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.okx-guide-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.okx-guide-card{
    min-width:0;
    padding:24px;
    border:1px solid var(--okx-detail-border);
    border-radius:24px;
    background:#fff;
    box-shadow:0 12px 30px rgba(15,23,42,.05);
    color:var(--okx-detail-text);
    font-size:15.5px;
    line-height:1.75;
}
.okx-guide-card.wide{
    padding:30px 34px;
    border-radius:26px;
    box-shadow:0 14px 36px rgba(15,23,42,.055);
    font-size:16px;
    line-height:1.85;
}
.okx-guide-card h3{
    margin:0 0 8px;
    color:var(--okx-detail-title);
    font-size:17px;
    font-weight:900;
    line-height:1.45;
}
.okx-guide-card p{margin:0}
.okx-guide-card em{
    display:inline-block;
    margin:0 0 10px;
    padding:4px 12px;
    border-radius:999px;
    background:var(--okx-detail-light-green);
    color:var(--okx-detail-green-dark);
    font-size:13px;
    font-style:normal;
    font-weight:900;
    line-height:1.45;
}
.okx-card-check{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    margin-right:10px;
    border:1px solid #109140;
    border-radius:3px;
    background:#ebfff1;
    color:#0b8e38;
    font-size:13px;
    line-height:1;
    vertical-align:-2px;
}
.okx-effect-card{position:relative;overflow:hidden;min-height:132px}
.okx-effect-card:after{
    content:"";
    position:absolute;
    right:-34px;
    bottom:-34px;
    width:110px;
    height:110px;
    border-radius:50%;
    background:rgba(22,138,74,.07);
}
.okx-effect-card>*{position:relative;z-index:1}

.okx-target-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.okx-target-item{
    display:flex;
    align-items:flex-start;
    gap:9px;
    min-width:0;
    padding:14px 16px;
    border:1px solid var(--okx-detail-border);
    border-radius:16px;
    background:#f8fafc;
    color:var(--okx-detail-title);
    font-size:15px;
    font-weight:800;
    line-height:1.65;
}
.okx-target-item span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:17px;
    height:17px;
    flex:0 0 17px;
    margin-top:4px;
    border-radius:3px;
    background:#16a34a;
    color:#fff;
    font-size:11px;
    line-height:1;
}
.okx-usage-card{min-height:166px}
.okx-advantage-card{min-height:124px}
.okx-advantage-card h3{color:var(--okx-detail-green-dark)}

.okx-guide-warning{
    padding:30px 34px;
    border:1px solid #fed7aa;
    border-radius:26px;
    background:#fff7ed;
    color:#431407;
    font-size:16px;
    line-height:1.85;
}
.okx-guide-warning h2,
.okx-guide-warning h3{
    margin:0 0 12px;
    color:#9a3412;
    font-size:20px;
    font-weight:900;
    line-height:1.5;
}
.okx-guide-warning ul{
    margin:0 0 22px;
    padding-left:20px;
}
.okx-guide-warning li{margin-bottom:8px;color:#431407}
.okx-guide-warning>*:last-child{margin-bottom:0}
.okx-guide-warning blockquote,
.okx-guide-warning .okx-warning-note{
    margin:16px 0 0;
    padding:14px 16px;
    border:0;
    border-left:5px solid #f97316;
    border-radius:14px;
    background:#fff;
    color:#7c2d12;
    font-weight:800;
}

.okx-conclusion-section{padding-top:0}
.okx-guide-conclusion{
    padding:34px;
    border-radius:28px;
    background:linear-gradient(135deg,#102033 0%,#0f5f35 100%);
    box-shadow:0 18px 42px rgba(15,23,42,.16);
    color:#fff;
}
.okx-guide-conclusion>h2{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 0 14px;
    color:#fff;
    font-size:26px;
    font-weight:900;
    line-height:1.35;
}
.okx-conclusion-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:5px;
    background:#2563eb;
    color:#fff;
    font-size:14px;
    line-height:1;
}
.okx-guide-conclusion,
.okx-guide-conclusion p,
.okx-guide-conclusion li{color:#ecfff3}
.okx-guide-rich p{margin:0 0 14px}
.okx-guide-rich p:last-child{margin-bottom:0}
.okx-guide-rich ul,
.okx-guide-rich ol{margin:8px 0 14px;padding-left:22px}
.okx-guide-rich li{margin-bottom:5px}
.okx-guide-rich h2,
.okx-guide-rich h3{margin:0 0 10px}
.okx-guide-rich a{color:var(--okx-detail-green)}

.okx-discount-table{
    display:grid;
    grid-template-columns:86px minmax(0,1fr);
    width:min(570px,100%);
    margin:0 auto;
    overflow:hidden;
    border:1px solid var(--okx-detail-mint);
    background:#fff;
    font-size:15px;
    line-height:1.75;
}
.okx-discount-label{
    display:flex;
    align-items:center;
    justify-content:center;
    border-right:1px solid var(--okx-detail-mint);
    color:var(--okx-detail-title);
    font-weight:900;
}
.okx-discount-table>div:last-child{padding:20px 24px}

/* FAQ */
.okx-detail-faq{
    width:min(100%,1072px);
    margin:68px auto 0;
}
.okx-detail-faq>h2{
    margin:0 0 32px;
    color:#101827;
    text-align:center;
    font-size:30px;
    font-weight:700;
    line-height:1.5;
}
.okx-faq-item{
    margin:0 0 12px;
    overflow:hidden;
    border:1px solid #d9dde2;
    border-radius:4px;
    background:#fff;
}
.okx-faq-item>button{
    appearance:none;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    width:100%;
    min-height:56px;
    padding:13px 16px;
    border:0;
    background:#fff;
    color:#151d2b;
    text-align:left;
    font-size:14px;
    line-height:1.55;
    cursor:pointer;
}
.okx-faq-item>button:hover{background:#f8fafc}
.okx-faq-item>button strong{font-weight:800}
.okx-faq-item>button span{font-size:18px;font-weight:400}
.okx-faq-answer{
    padding:16px 18px 19px;
    border-top:1px solid #e6e8eb;
    color:#344257;
    font-size:14px;
    line-height:1.75;
}
.okx-faq-answer p{margin:0}

.okx-detail-related{margin-top:68px}
.okx-detail-related>h2{
    margin:0 0 28px;
    color:#101827;
    font-size:18px;
    font-weight:700;
    line-height:1.5;
}
.okx-detail-related ul.products{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
}
.okx-detail-page~footer{margin-top:0}

@media(max-width:1024px){
    .okx-detail-top{gap:34px}
    .okx-detail-summary h1{font-size:27px}
    .okx-detail-thumb{width:82px;height:82px;flex-basis:82px}
    .okx-guide-grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px){
    .okx-detail-container{
        width:calc(100% - 28px);
        max-width:none;
        padding:20px 0 54px;
    }
    .okx-detail-breadcrumbs{
        gap:7px;
        margin-bottom:26px;
        overflow:auto;
        font-size:11px;
        white-space:nowrap;
    }
    .okx-detail-top{
        grid-template-columns:1fr;
        gap:28px;
    }
    .okx-detail-thumbnails{gap:9px;margin-top:14px}
    .okx-detail-thumb{width:72px;height:72px;flex-basis:72px}
    .okx-detail-heading-row{display:block}
    .okx-detail-unit-badge{position:static;width:max-content;margin:0 0 10px}
    .okx-detail-summary h1{font-size:24px;line-height:1.4}
    .okx-detail-intro{font-size:13.5px}
    .okx-detail-spec-table{grid-template-columns:94px minmax(0,1fr);max-width:none}
    .okx-detail-spec-label{font-size:12px}
    .okx-detail-spec-value{font-size:12.5px}
    .okx-detail-buy-area{margin-top:23px;padding:24px 0 28px}
    .okx-detail-price{margin-bottom:22px}
    .okx-detail-cart{grid-template-columns:122px minmax(0,1fr)}
    .okx-detail-cart.has-view-cart{grid-template-columns:122px minmax(0,1fr) minmax(0,1fr)}
    .okx-detail-quantity{grid-template-columns:35px minmax(0,1fr) 35px;height:50px}
    .okx-detail-quantity input.qty{height:48px!important}
    .okx-detail-add-button{height:50px!important;min-height:50px!important;line-height:50px!important}
    .okx-detail-view-cart{min-height:50px}
    .okx-detail-tabs{margin-top:44px}
    .okx-detail-tab-nav{min-height:56px}
    .okx-detail-tab-nav button{min-width:auto;padding:19px 16px 20px;font-size:15px}
    .okx-detail-tab-nav button.is-active:after{right:16px;left:16px}
    .okx-detail-guide{padding:24px 12px;border-radius:14px}
    .okx-guide-section{margin-bottom:30px}
    .okx-guide-section>h2{font-size:22px}
    .okx-guide-card,
    .okx-guide-card.wide,
    .okx-guide-warning,
    .okx-guide-conclusion{padding:24px 20px;border-radius:22px}
    .okx-guide-card{font-size:14px}
    .okx-guide-card.wide,
    .okx-guide-warning{font-size:14.5px}
    .okx-guide-grid.cols-2,
    .okx-guide-grid.cols-3,
    .okx-target-grid{grid-template-columns:1fr}
    .okx-effect-card,
    .okx-usage-card,
    .okx-advantage-card{min-height:0}
    .okx-target-item{font-size:13.5px}
    .okx-guide-conclusion>h2{font-size:22px}
    .okx-detail-faq{margin-top:50px}
    .okx-detail-faq>h2{margin-bottom:24px;font-size:24px}
    .okx-detail-related{margin-top:50px}
    .okx-detail-related ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:420px){
    .okx-detail-cart{grid-template-columns:1fr}
    .okx-detail-cart.has-view-cart{grid-template-columns:1fr 1fr}
    .okx-detail-quantity{width:122px}
    .okx-detail-cart.has-view-cart .okx-detail-quantity{grid-column:1/-1}
    .okx-detail-related ul.products{grid-template-columns:1fr!important}
}

/* v3.2: use the real CSS dimensions from detail.html (the supplied reference screenshots are about 125% scaled) */
.okx-section-benefits .okx-effect-card h3{
    display:flex;
    align-items:center;
    gap:12px;
}
.okx-section-benefits .okx-card-check{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    border:0;
    background:var(--okx-detail-light-green);
    color:inherit;
    font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
    font-weight:400;
    line-height:1;
    vertical-align:0;
}
.okx-section-targets .okx-target-item span{
    display:inline-block;
    width:auto;
    height:auto;
    flex:0 0 auto;
    margin:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:inherit;
    font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
    font-weight:400;
    line-height:1;
}

@media(min-width:901px){
    .okx-section-benefits .okx-effect-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:22px;
    }
    .okx-section-benefits .okx-effect-card{
        min-height:132px;
        padding:24px;
        border-radius:24px;
    }
    .okx-section-benefits .okx-effect-card h3{
        margin:0 0 10px;
        font-size:18px;
        line-height:1.45;
    }
    .okx-section-benefits .okx-card-check{
        width:42px;
        height:42px;
        flex:0 0 42px;
        border-radius:14px;
        font-size:21px;
    }
    .okx-section-benefits .okx-effect-card p{
        max-width:100%;
        font-size:15.5px;
        line-height:1.75;
    }
    .okx-section-benefits .okx-effect-card:after{
        right:-34px;
        bottom:-34px;
        width:110px;
        height:110px;
    }

    .okx-section-targets .okx-guide-card.wide{
        padding:30px 34px;
        border-radius:26px;
    }
    .okx-section-targets .okx-target-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }
    .okx-section-targets .okx-target-item{
        align-items:center;
        min-height:0;
        padding:14px 16px;
        border-radius:16px;
        font-size:16px;
        line-height:1.65;
        font-weight:800;
    }
    .okx-section-targets .okx-target-item span{
        font-size:18px;
    }

    .okx-section-usage .okx-usage-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:16px;
    }
    .okx-section-usage .okx-usage-card{
        min-height:166px;
        padding:24px;
        border-radius:24px;
    }
    .okx-section-usage .okx-usage-card em{
        margin:0 0 10px;
        padding:4px 12px;
        font-size:13px;
        line-height:1.45;
    }
    .okx-section-usage .okx-usage-card h3{
        margin:0 0 8px;
        font-size:18px;
        line-height:1.45;
    }
    .okx-section-usage .okx-usage-card p{
        font-size:15.5px;
        line-height:1.75;
    }
}

@media(max-width:900px){
    .okx-section-benefits .okx-effect-grid,
    .okx-section-targets .okx-target-grid,
    .okx-section-usage .okx-usage-grid{
        grid-template-columns:1fr;
    }
    .okx-section-benefits .okx-card-check{
        width:36px;
        height:36px;
        flex:0 0 36px;
        border-radius:12px;
        font-size:18px;
    }
    .okx-section-targets .okx-target-item span{font-size:17px}
}