.guide_wrap{
    max-width:1180px;
    margin:0 auto;
    padding:0 20px 60px;
    color:#eee;
}

.guide_hero{
    margin:20px 0 34px;
    padding:42px 34px;
    background:linear-gradient(180deg,#1a1a1a,#111);
    border:1px solid #5b481e;
    border-radius:12px;
}

.guide_hero_inner{
    max-width:820px;
    margin:0 auto;
    text-align:center;
}

.guide_kicker{
    margin-bottom:10px;
    color:#d6a84f;
    font-size:14px;
    font-weight:bold;
    letter-spacing:1px;
}

.guide_hero h1{
    margin:0;
    color:#f0c76a;
    font-size:32px;
    line-height:1.4;
}

.guide_hero p{
    margin:14px 0 0;
    color:#aaa;
    font-size:16px;
    line-height:1.8;
}

.guide_section{
    margin:0 0 34px;
}

.guide_section_head{
    margin-bottom:18px;
}

.guide_section_head h2{
    margin:0;
    color:#f0c76a;
    font-size:24px;
    line-height:1.5;
}

.guide_section_head p{
    margin:6px 0 0;
    color:#999;
    font-size:14px;
    line-height:1.7;
}

.guide_quick_grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.guide_quick_card{
    display:block;
    padding:24px 22px;
    background:#151515;
    border:1px solid #5b481e;
    border-radius:10px;
    text-decoration:none;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.guide_quick_card:hover{
    background:#1b1b1b;
    border-color:#d6a84f;
    transform:translateY(-2px);
}

.guide_quick_title{
    color:#d6a84f;
    font-size:20px;
    font-weight:bold;
    line-height:1.5;
}

.guide_quick_desc{
    margin-top:7px;
    color:#aaa;
    font-size:14px;
    line-height:1.7;
}

.guide_steps{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:12px;
}

.guide_step{
    position:relative;
    min-height:190px;
    padding:24px 18px 20px;
    background:#151515;
    border:1px solid #3a3020;
    border-radius:10px;
}

.guide_step_number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    margin-bottom:16px;
    background:#d6a84f;
    border-radius:50%;
    color:#111;
    font-size:14px;
    font-weight:bold;
}

.guide_step h3{
    margin:0;
    color:#eee;
    font-size:18px;
    line-height:1.5;
}

.guide_step p{
    margin:10px 0 0;
    color:#999;
    font-size:14px;
    line-height:1.8;
}

.guide_member_guest_section{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px;
}

.guide_info_card{
    padding:26px 24px;
    background:#151515;
    border:1px solid #3a3020;
    border-radius:10px;
}

.guide_info_card h2{
    margin:0;
    color:#d6a84f;
    font-size:22px;
    line-height:1.5;
}

.guide_info_card p{
    margin:10px 0 0;
    color:#aaa;
    font-size:14px;
    line-height:1.8;
}

.guide_info_card ul{
    margin:16px 0 0;
    padding:0 0 0 20px;
    color:#ddd;
}

.guide_info_card li{
    margin:7px 0;
    font-size:14px;
    line-height:1.7;
}

.guide_payment_card{
    border-color:#725b25;
    background:#181511;
}

.guide_action{
    display:inline-block;
    margin-top:18px;
    padding:10px 18px;
    background:#d6a84f;
    border:1px solid #d6a84f;
    border-radius:7px;
    color:#111;
    font-size:14px;
    font-weight:bold;
    text-decoration:none;
    transition:
        background .18s ease,
        border-color .18s ease;
}

.guide_action:hover{
    background:#f0c76a;
    border-color:#f0c76a;
}

.guide_question_list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
}
.guide_question_item h3{
    margin:0 0 8px;
    color:#f0c76a;
    font-size:17px;
    line-height:1.5;
}

.guide_question_item p{
    margin:0 0 10px;
    color:#bbb;
    font-size:14px;
    line-height:1.7;
}

.guide_question_item p:last-of-type{
    margin-bottom:0;
}

.guide_question_item a{
    display:inline-block;
    margin-top:4px;
    color:#f0c76a;
    font-size:14px;
    line-height:1.6;
    text-decoration:none;
}

.guide_question_item a:hover{
    text-decoration:underline;
}
.guide_question_list div{
    padding:13px 15px;
    background:#111;
    border:1px solid #3a3020;
    border-radius:7px;
    color:#ddd;
    font-size:14px;
    line-height:1.6;
}

.guide_contact{
    margin-top:42px;
    padding:34px 24px;
    text-align:center;
    background:#151515;
    border:1px solid #5b481e;
    border-radius:12px;
}

.guide_contact h2{
    margin:0;
    color:#f0c76a;
    font-size:24px;
    line-height:1.5;
}

.guide_contact p{
    margin:8px 0 0;
    color:#aaa;
    font-size:14px;
    line-height:1.7;
}

.guide_contact .guide_action{
    margin-top:18px;
}
/* ========================================
   一般購物教學：操作示意
======================================== */

.guide_info_card h3{
    margin:28px 0 10px;
    color:#f0c76a;
    font-size:19px;
    line-height:1.5;
}

.guide_info_card h3:first-child{
    margin-top:0;
}

.guide_demo{
    margin:20px 0 30px;
    padding:22px;
    background:#101010;
    border:1px solid #725b25;
    border-radius:10px;
}

.guide_demo_title{
    margin-bottom:18px;
    color:#f0c76a;
    font-size:16px;
    font-weight:bold;
}

.guide_demo_search{
    display:flex;
    align-items:stretch;
    gap:10px;
    width:100%;
    max-width:700px;
    margin:0;
}

.guide_demo_search_label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

.guide_demo_search_scope{
    flex:0 0 110px;
    width:110px;
    min-width:0;
    padding:12px;
    background:#242424;
    border:1px solid #725b25;
    border-radius:7px;
    color:#f0c76a;
    font-size:14px;
    cursor:pointer;
}

.guide_demo_search_input{
    flex:1 1 auto;
    width:100%;
    min-width:0;
    padding:12px 15px;
    background:#242424;
    border:1px solid #666;
    border-radius:7px;
    color:#eee;
    font-size:14px;
}

.guide_demo_search_input::placeholder{
    color:#999;
}

.guide_demo_search_scope:focus,
.guide_demo_search_input:focus{
    outline:2px solid #d6a84f;
    outline-offset:2px;
}

.guide_demo_search_button{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:12px 22px;
    background:#d6a84f;
    border:1px solid #d6a84f;
    border-radius:7px;
    color:#111;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
}

.guide_demo_search_button:hover{
    background:#f0c76a;
    border-color:#f0c76a;
}

.guide_info_card .guide_demo_note{
    margin-top:15px;
    color:#f0c76a;
    font-size:13px;
    line-height:1.8;
}

.guide_demo_products{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.guide_demo_product{
    min-width:0;
    padding:20px;
    background:#191919;
    border:1px solid #514123;
    border-radius:8px;
}

.guide_demo_product_type{
    display:inline-block;
    margin-bottom:14px;
    padding:5px 10px;
    background:#332a18;
    border:1px solid #725b25;
    border-radius:5px;
    color:#f0c76a;
    font-size:12px;
}

.guide_demo_product_price{
    color:#f0c76a;
    font-size:24px;
    font-weight:bold;
    line-height:1.5;
}

.guide_demo_product p{
    margin-top:10px;
}
/* 商品規格標籤教學 */

.guide_demo_specs{
    margin-top:24px;
    padding:20px;
    background:#151515;
    border:1px solid #514123;
    border-radius:8px;
}

.guide_demo_specs h4{
    margin:0 0 12px;
    color:#f0c76a;
    font-size:17px;
}

.guide_demo_specs > p{
    margin:10px 0;
}

.guide_demo_spec_list{
    display:grid;
    gap:12px;
    margin-top:18px;
}

.guide_demo_spec_item{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    color:#ddd;
    font-size:14px;
    line-height:1.7;
}

.guide_demo_spec_tag{
    display:inline-block;
    flex:0 0 auto;
    min-width:64px;
    padding:4px 10px;
    border:1px solid #a78339;
    border-radius:5px;
    background:#332a18;
    color:#f0c76a;
    font-size:13px;
    font-weight:bold;
    text-align:center;
}

@media(max-width:600px){
    .guide_demo_specs{
        padding:16px;
    }

    .guide_demo_spec_item{
        align-items:flex-start;
        gap:8px;
        font-size:13px;
    }
}

/* 購物車互動教學 */

.guide_cart_demo{
    margin:24px 0;
}

.guide_cart_toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin:18px 0;
    padding:14px;
    background:#151515;
    border:1px solid #514123;
    border-radius:8px;
}

.guide_cart_toolbar label{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    white-space:nowrap;
}

.guide_cart_demo input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    accent-color:#d6a84f;
    cursor:pointer;
}

.guide_cart_summary{
    color:#ddd;
    font-size:13px;
    line-height:1.8;
}

.guide_cart_summary strong{
    color:#f0c76a;
}

.guide_cart_items{
    display:grid;
    gap:12px;
}

.guide_cart_item{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
    padding:16px;
    background:#191919;
    border:1px solid #514123;
    border-radius:8px;
}

.guide_cart_item label{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1 1 130px;
    cursor:pointer;
}

.guide_cart_item > span{
    flex:1 1 170px;
    color:#f0c76a;
    font-size:14px;
}

.guide_cart_remove{
    padding:7px 14px;
    background:#292929;
    border:1px solid #725b25;
    border-radius:5px;
    color:#eee;
    cursor:pointer;
}

.guide_cart_remove:hover{
    background:#44351d;
}

.guide_cart_actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:18px;
}

.guide_cart_actions button{
    min-height:42px;
    padding:10px 18px;
    background:#332a18;
    border:1px solid #a78339;
    border-radius:6px;
    color:#f0c76a;
    font-size:14px;
    cursor:pointer;
}

.guide_cart_actions button:hover:not(:disabled){
    background:#514123;
}

.guide_cart_actions button:disabled{
    opacity:.4;
    cursor:not-allowed;
}

@media(max-width:600px){
    .guide_cart_toolbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .guide_cart_item{
        align-items:flex-start;
        flex-direction:column;
    }

    .guide_cart_item label,
    .guide_cart_item > span{
        flex:none;
    }

    .guide_cart_remove{
        align-self:flex-end;
    }

    .guide_cart_actions button{
        flex:1 1 120px;
    }
}
/* 會員與非會員結帳互動教學 */

.guide_checkout_demo{
    margin:24px 0;
}

.guide_checkout_tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:20px 0;
}

.guide_checkout_tab{
    min-height:46px;
    padding:12px;
    background:#191919;
    border:1px solid #514123;
    border-radius:7px;
    color:#ddd;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}

.guide_checkout_tab.is_active{
    background:#d6a84f;
    border-color:#d6a84f;
    color:#111;
}

.guide_checkout_panel{
    padding:20px;
    background:#151515;
    border:1px solid #514123;
    border-radius:8px;
}

.guide_checkout_panel[hidden]{
    display:none;
}

.guide_checkout_panel h3{
    margin:0 0 16px;
    color:#f0c76a;
    font-size:19px;
}

.guide_checkout_panel ol{
    margin:0;
    padding-left:25px;
    line-height:2;
}

.guide_checkout_panel li{
    padding-left:5px;
}

.guide_checkout_example{
    margin-top:22px;
    padding:18px;
    background:#191919;
    border:1px solid #725b25;
    border-radius:7px;
}

.guide_checkout_example h4{
    margin:0 0 14px;
    color:#f0c76a;
    font-size:17px;
}

.guide_checkout_example > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid #383020;
}

.guide_checkout_example strong{
    color:#f0c76a;
    white-space:nowrap;
}

.guide_checkout_example_total{
    font-weight:bold;
}

@media(max-width:600px){
    .guide_checkout_tabs{
        gap:8px;
    }

    .guide_checkout_tab{
        padding:10px 6px;
        font-size:14px;
    }

    .guide_checkout_panel{
        padding:16px;
    }

    .guide_checkout_example{
        padding:14px;
    }
}

/* 運費互動計算器 */

.guide_shipping_demo{
    margin:24px 0;
}

/* 運費計算器：滑桿操作區 */

.guide_shipping_fields{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin:24px 0;
}

.guide_shipping_slider_row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
}

.guide_shipping_slider_row label,
.guide_shipping_fields > label{
    color:#eee;
    font-weight:bold;
}

.guide_shipping_slider_row strong{
    color:#f0c76a;
    font-size:18px;
    text-align:right;
    white-space:nowrap;
}

.guide_shipping_slider_row input[type="range"]{
    grid-column:1 / -1;
    width:100%;
    height:8px;
    margin:8px 0;
    padding:0;
    background:#514123;
    border:0;
    border-radius:10px;
    accent-color:#d6a84f;
    cursor:pointer;
}

.guide_shipping_fields select{
    box-sizing:border-box;
    width:100%;
    min-height:46px;
    padding:12px;
    background:#191919;
    border:1px solid #725b25;
    border-radius:7px;
    color:#f0c76a;
    font-size:16px;
}

.guide_shipping_slider_row input:focus-visible,
.guide_shipping_fields select:focus-visible{
    outline:2px solid #d6a84f;
    outline-offset:4px;
}

.guide_shipping_result{
    padding:18px;
    background:#151515;
    border:1px solid #514123;
    border-radius:8px;
}

.guide_shipping_result > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:12px 0;
    border-bottom:1px solid #383020;
}

.guide_shipping_result > div:last-child{
    border-bottom:0;
}

.guide_shipping_result strong{
    color:#f0c76a;
    text-align:right;
    white-space:nowrap;
}

.guide_shipping_result .guide_shipping_total{
    margin-top:8px;
    padding-top:18px;
    border-top:2px solid #725b25;
    font-size:19px;
    font-weight:bold;
}

.guide_shipping_total strong{
    font-size:23px;
}

#guide_shipping_reset{
    min-height:42px;
    margin-top:18px;
    padding:10px 20px;
    background:#332a18;
    border:1px solid #a78339;
    border-radius:6px;
    color:#f0c76a;
    font-size:14px;
    cursor:pointer;
}

#guide_shipping_reset:hover{
    background:#514123;
}

@media(max-width:600px){
    .guide_shipping_fields{
        gap:20px;
    }

    .guide_shipping_slider_row{
        gap:10px;
    }

    .guide_shipping_slider_row strong{
        font-size:16px;
    }

    .guide_shipping_result{
        padding:14px;
    }

    .guide_shipping_result > div{
        gap:10px;
        font-size:14px;
    }

    .guide_shipping_total strong{
        font-size:20px;
    }

    #guide_shipping_reset{
        width:100%;
    }
}

.guide_demo_cart_button{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    max-width:320px;
    min-height:48px;
    padding:12px 20px;
    background:#d6a84f;
    border:1px solid #d6a84f;
    border-radius:7px;
    color:#111;
    font-size:16px;
    font-weight:bold;
}
@media(max-width:900px){

    .guide_steps{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}

@media(max-width:600px){

    .guide_wrap{
        padding:0 12px 40px;
    }

    .guide_hero{
        margin:14px 0 26px;
        padding:30px 20px;
    }

    .guide_hero h1{
        font-size:27px;
    }

    .guide_hero p{
        font-size:14px;
    }

    .guide_section{
        margin-bottom:28px;
    }

    .guide_section_head h2{
        font-size:21px;
    }

    .guide_quick_grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .guide_quick_card{
        padding:20px 18px;
    }

    .guide_quick_title{
        font-size:18px;
    }

    .guide_steps{
        grid-template-columns:1fr;
        gap:10px;
    }

    .guide_step{
        min-height:0;
        padding:20px 18px;
    }

    .guide_step_number{
        width:38px;
        height:38px;
        margin-bottom:12px;
    }

    .guide_step h3{
        font-size:17px;
    }

    .guide_member_guest_section{
        grid-template-columns:1fr;
        gap:10px;
    }

    .guide_info_card{
        padding:22px 18px;
    }

    .guide_info_card h2{
        font-size:20px;
    }
    
        /* 一般購物教學：手機版 */

    .guide_info_card h3{
        font-size:18px;
    }

    .guide_demo{
        padding:16px;
    }

        .guide_demo_search{
        display:grid;
        grid-template-columns:110px minmax(0,1fr);
        gap:10px;
        max-width:none;
    }

    .guide_demo_search_scope{
        width:100%;
        min-width:0;
        padding:11px 8px;
        font-size:13px;
    }

    .guide_demo_search_input{
        width:100%;
        min-width:0;
        padding:11px;
        font-size:13px;
    }

    .guide_demo_search_button{
        grid-column:1 / -1;
        width:100%;
        min-height:44px;
        padding:11px 15px;
        font-size:14px;
    }

    .guide_demo_products{
        grid-template-columns:1fr;
        gap:10px;
    }

    .guide_demo_product{
        padding:16px;
    }

    .guide_demo_product_price{
        font-size:22px;
    }

    .guide_demo_cart_button{
        max-width:none;
    }

    .guide_question_list{
        grid-template-columns:1fr;
    }

    .guide_contact{
        margin-top:32px;
        padding:28px 18px;
    }

    .guide_contact h2{
        font-size:21px;
    }

}

/* =========================================================
   會員購物教學：帳號與密碼管理互動示意
   ========================================================= */

.guide_member_demo{
    margin-top:28px;
    overflow:hidden;
    background:#111;
    border:1px solid #3a3a3a;
    border-radius:10px;
}

.guide_member_demo_head{
    padding:20px;
    border-bottom:1px solid #333;
}

.guide_member_demo_head strong{
    display:block;
    margin-bottom:6px;
    color:#d6a84f;
    font-size:18px;
}

.guide_member_demo_head p{
    margin:0;
    color:#aaa;
    font-size:14px;
    line-height:1.7;
}


/* 功能頁籤 */

.guide_member_demo_tabs{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    padding:14px 20px;
    border-bottom:1px solid #333;
}

.guide_member_demo_tab{
    min-height:44px;
    padding:10px 8px;
    background:#1a1a1a;
    border:1px solid #665633;
    border-radius:7px;
    color:#ddd;
    font-size:14px;
    cursor:pointer;
}

.guide_member_demo_tab:hover{
    border-color:#d6a84f;
    color:#fff;
}

.guide_member_demo_tab.active{
    background:#d6a84f;
    border-color:#d6a84f;
    color:#111;
    font-weight:bold;
}


/* 各功能內容 */

.guide_member_demo_panel{
    display:none;
    max-width:560px;
    margin:0 auto;
    padding:24px 20px;
}

.guide_member_demo_panel.active{
    display:block;
}

.guide_member_demo_panel label{
    display:block;
    margin-bottom:16px;
    color:#ddd;
    font-size:14px;
}

.guide_member_demo_panel label > span{
    display:block;
    margin-bottom:7px;
}

.guide_member_demo_panel input[type="text"],
.guide_member_demo_panel input[type="email"],
.guide_member_demo_panel input[type="password"]{
    box-sizing:border-box;
    width:100%;
    min-height:44px;
    padding:11px 12px;
    background:#080808;
    border:1px solid #555;
    border-radius:6px;
    color:#fff;
    font-size:16px;
    outline:none;
}

.guide_member_demo_panel input[type="text"]:focus,
.guide_member_demo_panel input[type="email"]:focus,
.guide_member_demo_panel input[type="password"]:focus{
    border-color:#d6a84f;
}

.guide_member_demo_panel small{
    display:block;
    margin-top:6px;
    color:#999;
    font-size:12px;
    line-height:1.6;
}


/* 記住帳號 */

.guide_member_demo_check{
    display:flex !important;
    align-items:center;
    gap:8px;
}

.guide_member_demo_check input{
    margin:0;
}

.guide_member_demo_check span{
    margin:0 !important;
}


/* 主要操作按鈕 */

.guide_member_demo_primary{
    width:100%;
    min-height:46px;
    padding:12px 18px;
    background:#d6a84f;
    border:1px solid #d6a84f;
    border-radius:7px;
    color:#111;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}

.guide_member_demo_primary:hover{
    background:#e0b85f;
    border-color:#e0b85f;
}


/* 操作結果 */

.guide_member_demo_message{
    min-height:24px;
    margin-top:12px;
    color:#46c16f;
    font-size:14px;
    line-height:1.6;
}


/* 教學提醒 */

.guide_member_demo_note{
    margin-top:14px;
    padding:11px 12px;
    background:#181818;
    border-left:3px solid #d6a84f;
    color:#aaa;
    font-size:13px;
    line-height:1.7;
}


/* 忘記密碼步驟 */

.guide_member_demo_steps{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:22px;
    color:#777;
    font-size:13px;
}

.guide_member_demo_steps b{
    color:#555;
    font-weight:normal;
}

.guide_member_demo_steps span.active{
    color:#d6a84f;
    font-weight:bold;
}

.guide_member_demo_steps span.done{
    color:#46c16f;
}


/* 忘記密碼三個階段 */

.guide_member_forgot_stage{
    display:none;
}

.guide_member_forgot_stage.active{
    display:block;
}


/* 四位驗證碼 */

.guide_member_demo_codes{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:15px 0;
}

.guide_member_demo_codes input{
    min-width:0;
    text-align:center;
    font-size:22px !important;
}


/* 返回上一步 */

.guide_member_demo_back{
    padding:12px 0 0;
    background:transparent;
    border:0;
    color:#d6a84f;
    font-size:13px;
    text-decoration:underline;
    cursor:pointer;
}


/* =========================================================
   會員購物教學：手機版
   ========================================================= */

@media(max-width:600px){

    .guide_member_demo{
        margin-top:22px;
    }

    .guide_member_demo_head{
        padding:18px 14px;
    }

    .guide_member_demo_head strong{
        font-size:17px;
    }

    .guide_member_demo_tabs{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        padding:12px;
    }

    .guide_member_demo_tab{
        font-size:14px;
    }

    .guide_member_demo_panel{
        padding:20px 14px;
    }

    .guide_member_demo_steps{
        gap:6px;
        font-size:12px;
    }

    .guide_member_demo_codes{
        gap:8px;
    }

}
/* =========================================================
   會員購物教學：會員中心導覽
   ========================================================= */

.guide_member_center_demo{
    margin-top:28px;
    overflow:hidden;
    background:#111;
    border:1px solid #3a3a3a;
    border-radius:10px;
}

.guide_member_center_head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:22px 20px;
    border-bottom:1px solid #333;
}

.guide_member_center_head > div{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.guide_member_center_head strong{
    margin-bottom:4px;
    color:#d6a84f;
    font-size:20px;
}

.guide_member_center_head span{
    color:#aaa;
    font-size:13px;
    line-height:1.6;
}

.guide_member_center_notice{
    flex:0 0 auto;
    min-height:42px;
    padding:10px 14px;
    background:#1a1a1a;
    border:1px solid #665633;
    border-radius:7px;
    color:#ddd;
    font-size:14px;
    cursor:pointer;
}

.guide_member_center_notice:hover,
.guide_member_center_notice.active{
    background:#d6a84f;
    border-color:#d6a84f;
    color:#111;
}


/* 區塊 */

.guide_member_center_block{
    padding:20px;
    border-bottom:1px solid #333;
}

.guide_member_center_block h4{
    margin:0 0 14px;
    color:#ddd;
    font-size:16px;
}


/* 快速功能 */

.guide_member_center_quick{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.guide_member_center_quick button{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-width:0;
    min-height:110px;
    padding:14px 10px;
    background:#181818;
    border:1px solid #444;
    border-radius:8px;
    color:#ddd;
    cursor:pointer;
}

.guide_member_center_quick button:hover,
.guide_member_center_quick button.active{
    border-color:#d6a84f;
}

.guide_member_center_quick button.active{
    background:#211c12;
}

.guide_member_center_quick strong{
    margin-bottom:8px;
    color:#eee;
    font-size:14px;
}

.guide_member_center_quick b{
    margin-bottom:5px;
    color:#d6a84f;
    font-size:22px;
}

.guide_member_center_quick span{
    color:#999;
    font-size:12px;
}


/* 帳號管理 */

.guide_member_center_account{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.guide_member_center_account button{
    min-height:44px;
    padding:10px;
    background:#181818;
    border:1px solid #444;
    border-radius:7px;
    color:#ddd;
    font-size:14px;
    cursor:pointer;
}

.guide_member_center_account button:hover,
.guide_member_center_account button.active{
    border-color:#d6a84f;
    color:#d6a84f;
}


/* 點擊功能後的用途說明 */

.guide_member_center_explain{
    margin:20px;
    padding:16px 18px;
    background:#181818;
    border-left:3px solid #d6a84f;
    border-radius:4px;
}

.guide_member_center_explain strong{
    display:block;
    margin-bottom:6px;
    color:#d6a84f;
    font-size:16px;
}

.guide_member_center_explain p{
    margin:0;
    color:#bbb;
    font-size:14px;
    line-height:1.7;
}


/* 待處理事項、訂單動態、最新公告 */

.guide_member_center_info{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    padding:0 20px 20px;
}

.guide_member_center_info > div{
    min-width:0;
    padding:16px;
    background:#181818;
    border:1px solid #333;
    border-radius:8px;
}

.guide_member_center_info h4{
    margin:0 0 12px;
    color:#d6a84f;
    font-size:15px;
}

.guide_member_center_info p{
    margin:7px 0;
    color:#bbb;
    font-size:13px;
    line-height:1.6;
}


/* 前往會員中心 */

.guide_member_center_action{
    margin-top:20px;
}


/* =========================================================
   會員中心導覽：手機版
   ========================================================= */

@media(max-width:600px){

    .guide_member_center_demo{
        margin-top:22px;
    }

    .guide_member_center_head{
        flex-direction:column;
        gap:14px;
        padding:18px 14px;
    }

    .guide_member_center_head strong{
        font-size:18px;
    }

    .guide_member_center_notice{
        width:100%;
    }

    .guide_member_center_block{
        padding:16px 14px;
    }

    .guide_member_center_quick{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .guide_member_center_quick button{
        min-height:100px;
    }

    .guide_member_center_account{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .guide_member_center_explain{
        margin:16px 14px;
        padding:14px;
    }

    .guide_member_center_info{
        grid-template-columns:1fr;
        gap:8px;
        padding:0 14px 16px;
    }

}

/* =========================================================
   會員購物教學：購物車保存與管理
   ========================================================= */

.guide_member_cart_demo{
    margin-top:28px;
    overflow:hidden;
    background:#111;
    border:1px solid #3a3a3a;
    border-radius:10px;
}

.guide_member_cart_demo_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    border-bottom:1px solid #333;
}

.guide_member_cart_demo_head > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.guide_member_cart_demo_head strong{
    color:#d6a84f;
    font-size:18px;
}

.guide_member_cart_demo_head span{
    color:#999;
    font-size:13px;
}

.guide_member_cart_demo_head button{
    flex:0 0 auto;
    min-height:38px;
    padding:8px 14px;
    background:#181818;
    border:1px solid #665633;
    border-radius:7px;
    color:#ddd;
    cursor:pointer;
}

.guide_member_cart_demo_head button:hover{
    background:#d6a84f;
    border-color:#d6a84f;
    color:#111;
}


/* 購物車統計 */

.guide_member_cart_summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 20px;
    background:#181818;
    border-bottom:1px solid #333;
    color:#bbb;
    font-size:14px;
}

.guide_member_cart_summary label{
    display:flex;
    align-items:center;
    gap:7px;
    cursor:pointer;
}

.guide_member_cart_summary input{
    width:17px;
    height:17px;
    accent-color:#d6a84f;
}

.guide_member_cart_summary strong{
    color:#d6a84f;
}


/* 篩選與排序 */

.guide_member_cart_controls{
    display:flex;
    align-items:center;
    gap:18px;
    padding:16px 20px;
    border-bottom:1px solid #333;
}

.guide_member_cart_controls label{
    display:flex;
    align-items:center;
    gap:8px;
    color:#bbb;
    font-size:14px;
}

.guide_member_cart_controls select{
    min-height:38px;
    padding:6px 34px 6px 10px;
    background:#181818;
    border:1px solid #555;
    border-radius:6px;
    color:#ddd;
}


/* 批次操作 */

.guide_member_cart_actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:0 20px 16px;
}

.guide_member_cart_actions button{
    min-height:38px;
    padding:8px 13px;
    background:#181818;
    border:1px solid #555;
    border-radius:6px;
    color:#ccc;
    cursor:pointer;
}

.guide_member_cart_actions button:hover{
    border-color:#d6a84f;
    color:#d6a84f;
}


/* 示範商品 */

.guide_member_cart_products{
    display:grid;
    gap:10px;
    padding:0 20px 20px;
}

.guide_member_cart_product{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    padding:16px;
    background:#181818;
    border:1px solid #3d3d3d;
    border-radius:8px;
}

.guide_member_cart_product:hover{
    border-color:#665633;
}

.guide_member_cart_product > label{
    display:flex;
    align-items:center;
    justify-content:center;
}

.guide_member_cart_product input{
    width:18px;
    height:18px;
    accent-color:#d6a84f;
    cursor:pointer;
}

.guide_member_cart_product_info{
    min-width:0;
}

.guide_member_cart_product_info > strong{
    display:block;
    margin-bottom:8px;
    color:#eee;
    font-size:15px;
}

.guide_member_cart_product_info > div{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
    color:#aaa;
    font-size:13px;
}

.guide_member_cart_product_info b{
    color:#d6a84f;
    font-size:14px;
}

.guide_member_cart_tag{
    display:inline-block;
    padding:2px 7px;
    background:#2a2418;
    border:1px solid #665633;
    border-radius:4px;
    color:#d6a84f;
    font-size:12px;
}

.guide_member_cart_remove{
    min-height:36px;
    padding:7px 12px;
    background:#181818;
    border:1px solid #555;
    border-radius:6px;
    color:#bbb;
    cursor:pointer;
}

.guide_member_cart_remove:hover{
    border-color:#d6a84f;
    color:#d6a84f;
}


/* 操作訊息 */

.guide_member_cart_message{
    margin:0 20px 18px;
    padding:13px 15px;
    background:#181818;
    border-left:3px solid #d6a84f;
    border-radius:4px;
    color:#bbb;
    font-size:14px;
    line-height:1.6;
}


/* 結帳 */

.guide_member_cart_checkout{
    display:flex;
    justify-content:flex-end;
    padding:0 20px 20px;
}

.guide_member_cart_checkout button{
    min-width:140px;
    min-height:42px;
    padding:9px 18px;
    background:#d6a84f;
    border:1px solid #d6a84f;
    border-radius:7px;
    color:#111;
    font-weight:bold;
    cursor:pointer;
}

.guide_member_cart_checkout button:hover{
    background:#e0b65e;
}


/* =========================================================
   購物車保存與管理：手機版
   ========================================================= */

@media(max-width:600px){

    .guide_member_cart_demo{
        margin-top:22px;
    }

    .guide_member_cart_demo_head{
        align-items:flex-start;
        padding:16px 14px;
    }

    .guide_member_cart_demo_head strong{
        font-size:16px;
    }

    .guide_member_cart_demo_head button{
        padding:7px 10px;
        font-size:13px;
    }

    .guide_member_cart_summary{
        align-items:flex-start;
        padding:13px 14px;
    }

    .guide_member_cart_summary > div{
        text-align:right;
        line-height:1.7;
    }

    .guide_member_cart_controls{
        align-items:stretch;
        gap:8px;
        padding:14px;
    }

    .guide_member_cart_controls label{
        flex:1 1 0;
        flex-direction:column;
        align-items:stretch;
        gap:5px;
    }

    .guide_member_cart_controls select{
        width:100%;
    }

    .guide_member_cart_actions{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        padding:0 14px 14px;
    }

    .guide_member_cart_actions button{
        width:100%;
    }

    .guide_member_cart_products{
        gap:8px;
        padding:0 14px 16px;
    }

    .guide_member_cart_product{
        grid-template-columns:auto minmax(0,1fr);
        gap:10px;
        padding:14px 12px;
    }

    .guide_member_cart_remove{
        grid-column:2;
        justify-self:start;
    }

    .guide_member_cart_message{
        margin:0 14px 16px;
    }

    .guide_member_cart_checkout{
        padding:0 14px 16px;
    }

    .guide_member_cart_checkout button{
        width:100%;
    }

}
/* =========================================================
   我的最愛
   ========================================================= */

.guide_member_favorite_demo{
    margin-top:24px;
    border:1px solid #3a3a3a;
    border-radius:10px;
    background:#111;
    overflow:hidden;
}


/* 標題列 */

.guide_member_favorite_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px 20px;
    border-bottom:1px solid #333;
    background:#171717;
}

.guide_member_favorite_head > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.guide_member_favorite_head strong{
    color:#d6a84f;
    font-size:17px;
}

.guide_member_favorite_head span{
    color:#aaa;
    font-size:13px;
}

.guide_member_favorite_head button{
    padding:8px 13px;
    border:1px solid #705b32;
    border-radius:6px;
    background:#211c13;
    color:#d6a84f;
    cursor:pointer;
}

.guide_member_favorite_head button:hover{
    background:#302718;
}


/* 收藏數量與批次操作 */

.guide_member_favorite_summary{
    display:flex;
    align-items:center;
    gap:18px;
    padding:14px 20px;
    border-bottom:1px solid #2d2d2d;
}

.guide_member_favorite_summary > div:first-child{
    color:#ddd;
}

.guide_member_favorite_summary > div:first-child strong{
    color:#d6a84f;
}

.guide_member_favorite_summary label{
    display:flex;
    align-items:center;
    gap:7px;
    color:#ddd;
    cursor:pointer;
}

.guide_member_favorite_summary input{
    width:16px;
    height:16px;
    accent-color:#d6a84f;
}

.guide_member_favorite_batch{
    display:flex;
    gap:8px;
    margin-left:auto;
}

.guide_member_favorite_batch button{
    min-width:72px;
    padding:8px 13px;
    border:1px solid #705b32;
    border-radius:6px;
    background:#211c13;
    color:#d6a84f;
    cursor:pointer;
}

.guide_member_favorite_batch button:hover{
    background:#302718;
}


/* 篩選與排序 */

.guide_member_favorite_controls{
    display:flex;
    align-items:center;
    gap:18px;
    padding:14px 20px;
    border-bottom:1px solid #2d2d2d;
    background:#0d0d0d;
}

.guide_member_favorite_controls label{
    display:flex;
    align-items:center;
    gap:7px;
    color:#ccc;
}

.guide_member_favorite_controls select{
    min-width:130px;
    padding:8px 30px 8px 10px;
    border:1px solid #444;
    border-radius:6px;
    background:#181818;
    color:#eee;
}


/* 商品列表 */

.guide_member_favorite_products{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:18px 20px;
}

.guide_member_favorite_product{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:14px;
    padding:15px;
    border:1px solid #333;
    border-radius:8px;
    background:#181818;
}

.guide_member_favorite_product > label{
    display:flex;
    align-items:center;
}

.guide_member_favorite_product input{
    width:17px;
    height:17px;
    accent-color:#d6a84f;
    cursor:pointer;
}

.guide_member_favorite_product_info{
    min-width:0;
}

.guide_member_favorite_product_info > strong{
    display:block;
    margin-bottom:7px;
    color:#f1f1f1;
    font-size:15px;
}

.guide_member_favorite_product_info > div{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:7px;
    color:#aaa;
    font-size:13px;
}

.guide_member_favorite_product_info > b{
    color:#d6a84f;
    font-size:14px;
}

.guide_member_favorite_tag{
    display:inline-block;
    padding:3px 7px;
    border:1px solid #705b32;
    border-radius:4px;
    background:#211c13;
    color:#d6a84f;
    font-size:12px;
}


/* 單筆操作 */

.guide_member_favorite_product_actions{
    display:flex;
    gap:8px;
}

.guide_member_favorite_product_actions button{
    min-width:64px;
    padding:8px 12px;
    border:1px solid #555;
    border-radius:6px;
    background:#222;
    color:#ddd;
    cursor:pointer;
}

.guide_member_favorite_product_actions button:hover{
    border-color:#806936;
    color:#d6a84f;
}

.guide_member_favorite_product_actions
.guide_member_favorite_buy{
    border-color:#806936;
    background:#d6a84f;
    color:#111;
    font-weight:bold;
}

.guide_member_favorite_product_actions
.guide_member_favorite_buy:hover{
    background:#e0b65e;
    color:#111;
}


/* 操作訊息 */

.guide_member_favorite_message{
    margin:0 20px 20px;
    padding:12px 14px;
    border:1px solid #3b3425;
    border-radius:7px;
    background:#17140f;
    color:#d8c79f;
    font-size:14px;
    line-height:1.6;
}


/* =========================================================
   我的最愛：手機版
   ========================================================= */

@media(max-width:600px){

    .guide_member_favorite_demo{
        margin-top:22px;
    }

    .guide_member_favorite_head{
        align-items:flex-start;
        padding:16px 14px;
    }

    .guide_member_favorite_head strong{
        font-size:16px;
    }

    .guide_member_favorite_head button{
        padding:7px 10px;
        font-size:13px;
    }

    .guide_member_favorite_summary{
        display:grid;
        grid-template-columns:1fr auto;
        gap:12px;
        padding:14px;
    }

    .guide_member_favorite_summary > div:first-child{
        align-self:center;
    }

    .guide_member_favorite_summary > label{
        justify-self:end;
    }

    .guide_member_favorite_batch{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
        margin-left:0;
    }

    .guide_member_favorite_batch button{
        width:100%;
    }

    .guide_member_favorite_controls{
        align-items:stretch;
        gap:8px;
        padding:14px;
    }

    .guide_member_favorite_controls label{
        flex:1 1 0;
        flex-direction:column;
        align-items:stretch;
        gap:5px;
    }

    .guide_member_favorite_controls select{
        width:100%;
        min-width:0;
    }

    .guide_member_favorite_products{
        gap:8px;
        padding:14px;
    }

    .guide_member_favorite_product{
        grid-template-columns:auto minmax(0,1fr);
        gap:10px;
        padding:14px 12px;
    }

    .guide_member_favorite_product_actions{
        grid-column:2;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        width:100%;
    }

    .guide_member_favorite_product_actions button{
        width:100%;
    }

    .guide_member_favorite_message{
        margin:0 14px 16px;
    }

}
/* =========================================================
   購物金
   ========================================================= */

.guide_member_points_demo{
    margin-top:24px;
    border:1px solid #3a3a3a;
    border-radius:10px;
    background:#111;
    overflow:hidden;
}


/* 購物金摘要 */

.guide_member_points_head{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-bottom:1px solid #333;
    background:#181818;
}

.guide_member_points_head > div{
    padding:18px 16px;
    text-align:center;
    border-right:1px solid #333;
}

.guide_member_points_head > div:last-child{
    border-right:0;
}

.guide_member_points_head span{
    display:block;
    margin-bottom:7px;
    color:#aaa;
    font-size:13px;
}

.guide_member_points_head strong{
    display:block;
    color:#d6a84f;
    font-size:22px;
}


/* 每日領取 */

.guide_member_points_claim{
    padding:20px;
    border-bottom:1px solid #333;
}

.guide_member_points_claim h4,
.guide_member_points_simulator h4{
    margin:0 0 16px;
    color:#eee;
    font-size:17px;
}

.guide_member_points_days{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.guide_member_points_days > div{
    padding:14px 10px;
    text-align:center;
    border:1px solid #3a3a3a;
    border-radius:8px;
    background:#181818;
}

.guide_member_points_days span{
    display:block;
    margin-bottom:6px;
    color:#aaa;
    font-size:13px;
}

.guide_member_points_days strong{
    color:#d6a84f;
    font-size:16px;
}

.guide_member_points_claim > p{
    margin:14px 0 0;
    color:#aaa;
    font-size:13px;
    line-height:1.7;
}


/* 使用購物金示範 */

.guide_member_points_simulator{
    padding:20px;
}

.guide_member_points_product{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:10px;
    padding:14px 16px;
    border:1px solid #333;
    border-radius:8px;
    background:#181818;
}

.guide_member_points_product > div:first-child{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.guide_member_points_product > div:first-child strong{
    color:#eee;
}

.guide_member_points_product > div:first-child span{
    display:inline-block;
    padding:3px 7px;
    border:1px solid #705b2c;
    border-radius:5px;
    color:#d6a84f;
    font-size:12px;
}

.guide_member_points_product > div:last-child{
    flex:0 0 auto;
    color:#aaa;
    font-size:13px;
}

.guide_member_points_product > div:last-child strong{
    margin-left:6px;
    color:#eee;
    font-size:15px;
}


/* 購物金滑桿 */

.guide_member_points_use{
    margin-top:18px;
    padding:16px;
    border:1px solid #4a402a;
    border-radius:8px;
    background:#15130f;
}

.guide_member_points_use label{
    display:block;
    margin-bottom:12px;
    color:#ddd;
    font-weight:bold;
}

.guide_member_points_use input[type="range"]{
    display:block;
    width:100%;
    margin:0;
    accent-color:#d6a84f;
    cursor:pointer;
}

.guide_member_points_use > div{
    margin-top:10px;
    text-align:right;
    color:#aaa;
    font-size:13px;
}

.guide_member_points_use > div strong{
    margin-left:5px;
    color:#d6a84f;
    font-size:16px;
}


/* 試算結果 */

.guide_member_points_result{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:18px;
}

.guide_member_points_result > div{
    min-width:0;
    padding:14px 12px;
    border:1px solid #333;
    border-radius:8px;
    background:#181818;
}

.guide_member_points_result span{
    display:block;
    margin-bottom:6px;
    color:#999;
    font-size:12px;
}

.guide_member_points_result strong{
    display:block;
    color:#eee;
    font-size:16px;
}

.guide_member_points_result > div:last-child strong{
    color:#d6a84f;
}

/* 日本代購回饋 */

.guide_member_points_japan_reward{
    margin-top:18px;
    padding:18px;
    border:1px solid #3a3325;
    border-radius:10px;
    background:#181818;
}

.guide_member_points_japan_reward h4{
    margin:0 0 10px;
    color:#d6a84f;
    font-size:17px;
}

.guide_member_points_japan_reward p{
    margin:0;
    color:#ccc;
    font-size:14px;
    line-height:1.8;
}

.guide_member_points_japan_reward p + p{
    margin-top:8px;
    color:#999;
}
/* =========================================================
   購物金：手機版
   ========================================================= */

@media(max-width:600px){

    .guide_member_points_demo{
        margin-top:22px;
    }

    .guide_member_points_head{
        grid-template-columns:1fr;
    }

    .guide_member_points_head > div{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:15px;
        padding:14px;
        text-align:left;
        border-right:0;
        border-bottom:1px solid #333;
    }

    .guide_member_points_head > div:last-child{
        border-bottom:0;
    }

    .guide_member_points_head span{
        margin-bottom:0;
    }

    .guide_member_points_head strong{
        font-size:18px;
    }

    .guide_member_points_claim,
    .guide_member_points_simulator{
        padding:16px 14px;
    }

    .guide_member_points_days{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .guide_member_points_product{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
        padding:13px;
    }

    .guide_member_points_product > div:first-child{
        flex-wrap:wrap;
    }

    .guide_member_points_product > div:last-child{
        width:100%;
    }

    .guide_member_points_use{
        padding:14px;
    }

    .guide_member_points_result{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .guide_member_points_result > div{
        padding:12px 10px;
    }

}
/* =========================================================
   硬碟訂單教學：STEP 1
   ========================================================= */

.guide_hdd_intro{
    margin-top:42px;
}

.guide_hdd_type_grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
    margin-top:24px;
}

.guide_hdd_type_card{
    position:relative;
    padding:24px;
    background:#171717;
    border:1px solid #333;
    border-radius:10px;
}

.guide_hdd_type_number{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:42px;
    height:28px;
    margin-bottom:16px;
    padding:0 10px;
    border:1px solid #7a6230;
    border-radius:6px;
    color:#d6a84f;
    font-size:13px;
    font-weight:bold;
}

.guide_hdd_type_card h3{
    margin:0 0 12px;
    color:#d6a84f;
    font-size:20px;
}

.guide_hdd_type_card p{
    margin:0;
    color:#ccc;
    font-size:15px;
    line-height:1.8;
}

.guide_hdd_type_note{
    margin-top:18px;
    padding-top:14px;
    border-top:1px solid #303030;
    color:#999;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   硬碟訂單教學：STEP 1－手機版
   ========================================================= */

@media(max-width:600px){

    .guide_hdd_intro{
        margin-top:32px;
    }

    .guide_hdd_type_grid{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:18px;
    }

    .guide_hdd_type_card{
        padding:18px;
    }

    .guide_hdd_type_card h3{
        font-size:18px;
    }

}
/* =========================================================
   硬碟訂單教學：STEP 2
   ========================================================= */

.guide_hdd_capacity{
    margin-top:46px;
    padding-top:38px;
    border-top:1px solid #2d2d2d;
}

.guide_hdd_capacity_demo{
    max-width:620px;
    margin:24px auto 14px;
    padding:22px 24px;
    background:#171717;
    border:1px solid #333;
    border-radius:10px;
}

.guide_hdd_capacity_title{
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:1px solid #303030;
    color:#d6a84f;
    font-size:18px;
    font-weight:bold;
}

.guide_hdd_capacity_row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid #2d2d2d;
}

.guide_hdd_capacity_row span{
    color:#aaa;
    font-size:15px;
}

.guide_hdd_capacity_row strong{
    color:#eee;
    font-size:17px;
}

.guide_hdd_capacity_row:nth-of-type(3) strong{
    color:#d6a84f;
    font-size:20px;
}

.guide_hdd_capacity_notice{
    margin:16px 0 0;
    color:#ccc;
    font-size:14px;
}

.guide_hdd_capacity_warning{
    margin:10px 0 0;
    color:#d6a84f;
    font-size:14px;
    font-weight:bold;
}

.guide_hdd_capacity_example{
    margin:18px 0 0;
    padding-top:14px;
    border-top:1px solid #303030;
    color:#888;
    font-size:13px;
    line-height:1.7;
}
/* =========================================================
   硬碟訂單教學：STEP 2－手機版
   ========================================================= */

@media(max-width:600px){

    .guide_hdd_capacity{
        margin-top:36px;
        padding-top:30px;
    }

    .guide_hdd_capacity_demo{
        margin:18px 0 12px;
        padding:18px;
    }

    .guide_hdd_capacity_title{
        font-size:17px;
    }

    .guide_hdd_capacity_row strong{
        font-size:16px;
    }

    .guide_hdd_capacity_row:nth-of-type(3) strong{
        font-size:18px;
    }

}
/* =========================================================
   硬碟訂單教學：STEP 3
   ========================================================= */

.guide_hdd_copy{
    margin-top:46px;
    padding-top:38px;
    border-top:1px solid #2d2d2d;
}

.guide_hdd_copy_demo{
    max-width:620px;
    margin:24px auto 0;
    padding:22px 24px;
    background:#171717;
    border:1px solid #333;
    border-radius:10px;
}

.guide_hdd_copy_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding-bottom:16px;
    border-bottom:1px solid #303030;
}

.guide_hdd_copy_head label{
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
}

.guide_hdd_copy_head input,
.guide_hdd_copy_option input{
    width:18px;
    height:18px;
    margin:0;
    flex:0 0 auto;
    accent-color:#d6a84f;
    cursor:pointer;
}

.guide_hdd_copy_head strong{
    color:#eee;
    font-size:17px;
}

.guide_hdd_copy_head > span{
    color:#d6a84f;
    font-size:14px;
    font-weight:bold;
}

.guide_hdd_copy_body{
    padding-top:18px;
}

.guide_hdd_copy_title{
    margin-bottom:12px;
    color:#aaa;
    font-size:14px;
    font-weight:bold;
}

.guide_hdd_copy_option{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid #2d2d2d;
    cursor:pointer;
}

.guide_hdd_copy_option span{
    display:block;
    min-width:0;
}

.guide_hdd_copy_option strong{
    display:block;
    margin-bottom:5px;
    color:#eee;
    font-size:16px;
}

.guide_hdd_copy_option small{
    display:block;
    color:#999;
    font-size:13px;
    line-height:1.6;
}

.guide_hdd_copy_note{
    margin:18px 0 0;
    padding-top:14px;
    border-top:1px solid #303030;
    color:#888;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   硬碟訂單教學：STEP 3－手機版
   ========================================================= */

@media(max-width:600px){

    .guide_hdd_copy{
        margin-top:36px;
        padding-top:30px;
    }

    .guide_hdd_copy_demo{
        margin:18px 0 0;
        padding:18px;
    }

    .guide_hdd_copy_head{
        gap:10px;
    }

    .guide_hdd_copy_head strong{
        font-size:16px;
    }

    .guide_hdd_copy_head > span{
        font-size:13px;
    }

}
/* =========================================================
   硬碟訂單教學：影片播放
   ========================================================= */

.guide_hdd_play{
    margin-top:46px;
    padding-top:38px;
    border-top:1px solid #2d2d2d;
}

.guide_hdd_play_box{
    max-width:760px;
    margin:24px auto 0;
    padding:22px 24px;
    background:#171717;
    border:1px solid #333;
    border-radius:10px;
}

.guide_hdd_play_notice{
    margin:0 0 20px;
    padding:14px 16px;
    background:#111;
    border-left:3px solid #d6a84f;
    color:#ccc;
    font-size:14px;
    line-height:1.8;
}

.guide_hdd_play_notice strong{
    color:#d6a84f;
}

.guide_hdd_play_video{
    margin-top:20px;
}

.guide_hdd_play_video video{
    display:block;
    width:100%;
    height:auto;
    background:#000;
    border-radius:8px;
}

.guide_hdd_play_info{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:20px;
}

.guide_hdd_play_item{
    padding:16px 18px;
    background:#111;
    border:1px solid #303030;
    border-radius:8px;
}

.guide_hdd_play_item strong{
    display:block;
    margin-bottom:8px;
    color:#eee;
    font-size:16px;
}
.guide_hdd_play_item a{
    display:inline-block;
    margin-top:14px;
    padding:9px 14px;
    background:linear-gradient(180deg,var(--gold-light),var(--gold-dark));
    border-radius:7px;
    color:#111;
    font-size:14px;
    font-weight:bold;
}

.guide_hdd_play_item a:hover{
    opacity:.9;
}
.guide_hdd_play_item p{
    margin:0;
    color:#aaa;
    font-size:14px;
    line-height:1.8;
}

@media(max-width:600px){

    .guide_hdd_play{
        margin-top:36px;
        padding-top:30px;
    }

    .guide_hdd_play_box{
        margin:18px 0 0;
        padding:18px;
    }

    .guide_hdd_play_info{
        grid-template-columns:1fr;
    }

}
/* =========================================================
   硬碟訂單教學：STEP 4
   ========================================================= */

.guide_hdd_source{
    margin-top:46px;
    padding-top:38px;
    border-top:1px solid #2d2d2d;
}

.guide_hdd_source_demo{
    max-width:620px;
    margin:24px auto 0;
    padding:22px 24px;
    background:#171717;
    border:1px solid #333;
    border-radius:10px;
}

.guide_hdd_source_title{
    margin-bottom:10px;
    padding-bottom:14px;
    border-bottom:1px solid #303030;
    color:#d6a84f;
    font-size:18px;
    font-weight:bold;
}

.guide_hdd_source_option{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:16px 0;
    border-bottom:1px solid #2d2d2d;
    cursor:pointer;
}

.guide_hdd_source_option input{
    width:18px;
    height:18px;
    margin:2px 0 0;
    flex:0 0 auto;
    accent-color:#d6a84f;
    cursor:pointer;
}

.guide_hdd_source_option span{
    display:block;
    min-width:0;
}

.guide_hdd_source_option strong{
    display:block;
    margin-bottom:5px;
    color:#eee;
    font-size:16px;
}

.guide_hdd_source_option small{
    display:block;
    color:#999;
    font-size:13px;
    line-height:1.7;
}

.guide_hdd_other_demo{
    display:none;
    margin-top:18px;
    padding:18px;
    background:#111;
    border:1px solid #303030;
    border-radius:8px;
}

.guide_hdd_other_demo.is_visible{
    display:block;
}

.guide_hdd_other_demo label{
    display:block;
    margin:0 0 7px;
    color:#aaa;
    font-size:13px;
    font-weight:bold;
}

.guide_hdd_other_demo input{
    box-sizing:border-box;
    display:block;
    width:100%;
    height:42px;
    margin:0 0 16px;
    padding:0 12px;
    background:#0d0d0d;
    border:1px solid #3a3a3a;
    border-radius:6px;
    color:#eee;
    font-size:14px;
}

.guide_hdd_other_demo input:last-child{
    margin-bottom:0;
}

.guide_hdd_other_demo input:focus{
    outline:none;
    border-color:#7a6230;
}

.guide_hdd_source_note{
    margin:18px 0 0;
    padding-top:14px;
    border-top:1px solid #303030;
    color:#888;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   硬碟訂單教學：STEP 4－手機版
   ========================================================= */

@media(max-width:600px){

    .guide_hdd_source{
        margin-top:36px;
        padding-top:30px;
    }

    .guide_hdd_source_demo{
        margin:18px 0 0;
        padding:18px;
    }

    .guide_hdd_source_title{
        font-size:17px;
    }

    .guide_hdd_other_demo{
        padding:14px;
    }

}
/* =========================================================
   硬碟訂單教學：STEP 5－送出訂單與硬碟付款
   ========================================================= */

.guide_hdd_payment{
    margin-top:46px;
    padding-top:38px;
    border-top:1px solid #2d2d2d;
}

.guide_hdd_payment_types{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:16px;
    margin-top:22px;
}

.guide_hdd_payment_type{
    padding:18px;
    background:#181818;
    border:1px solid #333;
    border-radius:10px;
}

.guide_hdd_payment_type strong{
    display:block;
    margin-bottom:8px;
    color:#d6a84f;
    font-size:17px;
}

.guide_hdd_payment_type p{
    margin:0;
    color:#bbb;
    font-size:14px;
    line-height:1.8;
}

.guide_hdd_payment_demo{
    margin-top:22px;
    overflow:hidden;
    background:#151515;
    border:1px solid #3a3325;
    border-radius:10px;
}

.guide_hdd_payment_demo_title{
    padding:16px 18px;
    background:#1d1a14;
    border-bottom:1px solid #3a3325;
    color:#d6a84f;
    font-size:17px;
    font-weight:bold;
}

.guide_hdd_payment_grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0;
}

.guide_hdd_payment_grid > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    min-height:58px;
    padding:14px 18px;
    border-bottom:1px solid #2d2d2d;
}

.guide_hdd_payment_grid > div:nth-child(odd):not(
    .guide_hdd_payment_wide
){
    border-right:1px solid #2d2d2d;
}

.guide_hdd_payment_grid span{
    flex:0 0 auto;
    color:#888;
    font-size:14px;
}

.guide_hdd_payment_grid strong{
    color:#eee;
    font-size:15px;
    text-align:right;
    word-break:break-word;
}

.guide_hdd_payment_grid .guide_hdd_payment_wide{
    grid-column:1 / -1;
}

.guide_hdd_payment_grid .guide_hdd_payment_wait{
    color:#d6a84f;
}

.guide_hdd_payment_note{
    margin:0;
    padding:15px 18px;
    background:#111;
    color:#888;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   硬碟訂單教學：STEP 5－手機版
   ========================================================= */

@media(max-width:600px){

    .guide_hdd_payment{
        margin-top:36px;
        padding-top:30px;
    }

    .guide_hdd_payment_types{
        grid-template-columns:1fr;
        gap:12px;
        margin-top:18px;
    }

    .guide_hdd_payment_type{
        padding:16px;
    }

    .guide_hdd_payment_demo{
        margin-top:18px;
    }

    .guide_hdd_payment_demo_title{
        padding:14px 16px;
        font-size:16px;
    }

    .guide_hdd_payment_grid{
        grid-template-columns:1fr;
    }

    .guide_hdd_payment_grid > div,
    .guide_hdd_payment_grid > div:nth-child(odd):not(
        .guide_hdd_payment_wide
    ){
        grid-column:auto;
        border-right:0;
    }

    .guide_hdd_payment_grid > div{
        min-height:54px;
        padding:13px 16px;
    }

    .guide_hdd_payment_grid .guide_hdd_payment_wide{
        grid-column:auto;
    }

    .guide_hdd_payment_note{
        padding:14px 16px;
    }

}
/* =========================================================
   硬碟訂單教學：STEP 6－硬碟付款後的處理流程
   ========================================================= */

.guide_hdd_process{
    margin-top:46px;
    padding-top:38px;
    border-top:1px solid #2d2d2d;
}

.guide_hdd_process_flow{
    display:flex;
    align-items:stretch;
    gap:10px;
    margin-top:22px;
}

.guide_hdd_process_item{
    flex:1 1 0;
    min-width:0;
    padding:18px 12px;
    background:#181818;
    border:1px solid #333;
    border-radius:10px;
    text-align:center;
}

.guide_hdd_process_no{
    display:flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    margin:0 auto 12px;
    border:1px solid #7a6230;
    border-radius:50%;
    background:#211d15;
    color:#d6a84f;
    font-size:14px;
    font-weight:bold;
}

.guide_hdd_process_item strong{
    display:block;
    margin-bottom:8px;
    color:#eee;
    font-size:16px;
}

.guide_hdd_process_item small{
    display:block;
    color:#888;
    font-size:13px;
    line-height:1.6;
}

.guide_hdd_process_arrow{
    display:flex;
    flex:0 0 20px;
    align-items:center;
    justify-content:center;
    color:#7a6230;
    font-size:22px;
    font-weight:bold;
}

.guide_hdd_process_note{
    margin:18px 0 0;
    padding:14px 16px;
    background:#151515;
    border:1px solid #303030;
    border-radius:8px;
    color:#888;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   硬碟訂單教學：STEP 6－手機版
   ========================================================= */

@media(max-width:600px){

    .guide_hdd_process{
        margin-top:36px;
        padding-top:30px;
    }

    .guide_hdd_process_flow{
        display:block;
        margin-top:18px;
    }

    .guide_hdd_process_item{
        padding:16px;
        text-align:left;
    }

    .guide_hdd_process_no{
        display:inline-flex;
        width:30px;
        height:30px;
        margin:0 10px 0 0;
        vertical-align:middle;
    }

    .guide_hdd_process_item strong{
        display:inline;
        margin:0;
        font-size:15px;
        vertical-align:middle;
    }

    .guide_hdd_process_item small{
        margin-top:8px;
        padding-left:44px;
    }

    .guide_hdd_process_arrow{
        width:100%;
        height:28px;
        transform:rotate(90deg);
        font-size:20px;
    }

    .guide_hdd_process_note{
        margin-top:16px;
    }

}
/* =========================================================
   硬碟訂單教學：STEP 7－製作完成與出貨
   ========================================================= */

.guide_hdd_finish{
    margin-top:46px;
    padding-top:38px;
    border-top:1px solid #2d2d2d;
}

.guide_hdd_finish_flow{
    display:flex;
    align-items:stretch;
    gap:12px;
    margin-top:22px;
}

.guide_hdd_finish_item{
    flex:1 1 0;
    min-width:0;
    padding:20px 14px;
    background:#181818;
    border:1px solid #3a3325;
    border-radius:10px;
    text-align:center;
}

.guide_hdd_finish_item span{
    display:block;
    margin-bottom:10px;
    color:#7a6230;
    font-size:13px;
    font-weight:bold;
}

.guide_hdd_finish_item strong{
    display:block;
    margin-bottom:8px;
    color:#d6a84f;
    font-size:17px;
}

.guide_hdd_finish_item small{
    display:block;
    color:#888;
    font-size:13px;
    line-height:1.6;
}

.guide_hdd_finish_arrow{
    display:flex;
    flex:0 0 22px;
    align-items:center;
    justify-content:center;
    color:#7a6230;
    font-size:22px;
    font-weight:bold;
}

.guide_hdd_finish_note{
    margin:18px 0 0;
    padding:14px 16px;
    background:#151515;
    border:1px solid #303030;
    border-radius:8px;
    color:#888;
    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   硬碟訂單教學：STEP 7－手機版
   ========================================================= */

@media(max-width:600px){

    .guide_hdd_finish{
        margin-top:36px;
        padding-top:30px;
    }

    .guide_hdd_finish_flow{
        display:block;
        margin-top:18px;
    }

    .guide_hdd_finish_item{
        padding:16px;
        text-align:left;
    }

    .guide_hdd_finish_item span{
        display:inline-block;
        width:34px;
        margin:0 8px 0 0;
        vertical-align:middle;
    }

    .guide_hdd_finish_item strong{
        display:inline;
        margin:0;
        font-size:15px;
        vertical-align:middle;
    }

    .guide_hdd_finish_item small{
        margin-top:8px;
        padding-left:46px;
    }

    .guide_hdd_finish_arrow{
        width:100%;
        height:28px;
        transform:rotate(90deg);
        font-size:20px;
    }

    .guide_hdd_finish_note{
        margin-top:16px;
    }

}
/* =========================================================
   一般購物教學：明信片小卡
   ========================================================= */

.guide_postcard_demo{
    max-width:560px;
    margin:22px auto 26px;
    padding:18px;
    background:#151515;
    border:1px solid #343434;
    border-radius:10px;
}

.guide_postcard_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px solid #303030;
}

.guide_postcard_head label{
    display:flex;
    align-items:center;
    gap:9px;
    color:#eee;
    font-size:15px;
    cursor:pointer;
}

.guide_postcard_head input{
    width:18px;
    height:18px;
    margin:0;
    cursor:pointer;
    accent-color:#d6a84f;
}

.guide_postcard_head strong{
    color:#eee;
    font-size:16px;
}

.guide_postcard_head span{
    flex:0 0 auto;
    color:#d6a84f;
    font-size:17px;
    font-weight:bold;
}

.guide_postcard_preview{
    display:block;
    width:100%;
    max-width:480px;
    height:auto;
    margin:0 auto;
    border-radius:8px;
}


/* =========================================================
   一般購物教學：明信片小卡－手機版
   ========================================================= */

@media(max-width:600px){

    .guide_postcard_demo{
        margin:18px 0 22px;
        padding:14px;
    }

    .guide_postcard_head{
        gap:10px;
        margin-bottom:14px;
        padding-bottom:12px;
    }

    .guide_postcard_head strong{
        font-size:15px;
    }

    .guide_postcard_head span{
        font-size:15px;
    }

}
/* =========================================================
   會員訂單與進度查詢
   ========================================================= */

.guide_member_orders_intro,
.guide_member_orders_payment{
    margin-top:22px;
    padding:18px;
    border:1px solid #333;
    border-radius:10px;
    background:#181818;
}

.guide_member_orders_intro h3,
.guide_member_orders_payment h3{
    margin:0 0 8px;
    color:#d6a84f;
    font-size:18px;
}

.guide_member_orders_intro p,
.guide_member_orders_payment p{
    margin:0;
    color:#bbb;
    font-size:14px;
    line-height:1.8;
}


/* 訂單列表示範 */

.guide_member_orders_demo{
    margin-top:18px;
    overflow:hidden;
    border:1px solid #3a3325;
    border-radius:10px;
    background:#151515;
}

.guide_member_orders_demo_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:16px 18px;
    border-bottom:1px solid #3a3325;
    background:#1d1a14;
}

.guide_member_orders_demo_head strong{
    color:#d6a84f;
    font-size:17px;
}

.guide_member_orders_demo_head span{
    color:#999;
    font-size:13px;
}


/* 訂單表格 */

.guide_member_orders_table{
    width:100%;
}

.guide_member_orders_row{
    display:grid;
    grid-template-columns:
        minmax(135px,1.2fr)
        minmax(80px,.7fr)
        minmax(100px,.8fr)
        minmax(90px,.8fr)
        minmax(110px,.8fr);
    align-items:center;
    border-bottom:1px solid #2b2b2b;
}

.guide_member_orders_row:last-child{
    border-bottom:0;
}

.guide_member_orders_row > div{
    min-width:0;
    padding:14px 12px;
    color:#ccc;
    font-size:14px;
}

.guide_member_orders_table_head{
    background:#111;
}

.guide_member_orders_table_head > div{
    color:#888;
    font-size:12px;
    font-weight:bold;
}

.guide_member_orders_row:not(
    .guide_member_orders_table_head
) > div:first-child strong{
    color:#eee;
}

.guide_member_orders_row:not(
    .guide_member_orders_table_head
) > div:nth-child(3) strong{
    color:#d6a84f;
}


/* 訂單狀態 */

.guide_member_orders_status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:66px;
    padding:5px 9px;
    border:1px solid #4a402a;
    border-radius:999px;
    background:#211d15;
    color:#d6a84f;
    font-size:12px;
    font-weight:bold;
    white-space:nowrap;
}


/* 查看訂單 */

.guide_member_orders_view{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 11px;
    border:1px solid #5b4925;
    border-radius:6px;
    background:#2b2417;
    color:#e0b85f;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
    white-space:nowrap;
}

.guide_member_orders_view:hover{
    background:#3a2f1c;
    color:#f0c86c;
}


/* 等待繳費 */

.guide_member_orders_payment{
    border-color:#3a3325;
    background:#15130f;
}

/* 訂單詳情示範 */

.guide_member_order_detail{
    margin-top:18px;
    overflow:hidden;
    border:1px solid #4a402a;
    border-radius:10px;
    background:#121212;
}

.guide_member_order_detail_head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:16px 18px;
    border-bottom:1px solid #3a3325;
    background:#1d1a14;
}

.guide_member_order_detail_head > div{
    display:flex;
    align-items:center;
    gap:12px;
}

.guide_member_order_detail_head span{
    color:#999;
    font-size:13px;
}

.guide_member_order_detail_head strong{
    color:#d6a84f;
    font-size:17px;
}

.guide_member_order_detail_head button{
    min-height:32px;
    padding:0 12px;
    border:1px solid #444;
    border-radius:6px;
    background:#181818;
    color:#bbb;
    font-size:12px;
    cursor:pointer;
}

.guide_member_order_detail_head button:hover{
    border-color:#6a552c;
    color:#d6a84f;
}


/* 訂單進度 */

.guide_member_order_progress{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    padding:22px 18px;
    border-bottom:1px solid #2d2d2d;
}

.guide_member_order_progress > div{
    position:relative;
    text-align:center;
}

.guide_member_order_progress > div::after{
    content:"";
    position:absolute;
    top:15px;
    left:50%;
    width:100%;
    height:1px;
    background:#3a3a3a;
    z-index:0;
}

.guide_member_order_progress > div:last-child::after{
    display:none;
}

.guide_member_order_progress span{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    margin:0 auto 8px;
    border:1px solid #444;
    border-radius:50%;
    background:#181818;
    color:#777;
    font-size:12px;
    font-weight:bold;
}

.guide_member_order_progress strong{
    display:block;
    color:#777;
    font-size:12px;
}

.guide_member_order_progress > div.active span{
    border-color:#8a6c31;
    background:#2b2417;
    color:#e0b85f;
}

.guide_member_order_progress > div.active strong{
    color:#d6a84f;
}


/* 詳情內容 */

.guide_member_order_detail_section{
    margin:16px 18px;
    padding:16px;
    border:1px solid #303030;
    border-radius:8px;
    background:#181818;
}

.guide_member_order_detail_section h4{
    margin:0 0 14px;
    color:#d6a84f;
    font-size:15px;
}

.guide_member_order_detail_section > p{
    margin:0;
    color:#bbb;
    font-size:14px;
    line-height:1.7;
}


/* 商品明細 */

.guide_member_order_detail_product{
    display:grid;
    grid-template-columns:minmax(0,1fr) 110px 70px;
    align-items:center;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid #2d2d2d;
}

.guide_member_order_detail_product:last-child{
    border-bottom:0;
}

.guide_member_order_detail_product > div:first-child{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.guide_member_order_detail_product > div:first-child strong{
    color:#eee;
}

.guide_member_order_detail_product > div:first-child span{
    color:#999;
    font-size:13px;
}

.guide_member_order_detail_product > div:not(:first-child){
    display:flex;
    justify-content:space-between;
    gap:8px;
    color:#888;
    font-size:12px;
}

.guide_member_order_detail_product > div:not(:first-child) strong{
    color:#ddd;
}


/* 金額 / 配送 */

.guide_member_order_detail_grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.guide_member_order_detail_line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:8px 0;
    border-bottom:1px solid #2d2d2d;
}

.guide_member_order_detail_line:last-child{
    border-bottom:0;
}

.guide_member_order_detail_line span{
    color:#999;
    font-size:13px;
}

.guide_member_order_detail_line strong{
    color:#ddd;
    font-size:13px;
}

.guide_member_order_detail_line.total strong{
    color:#d6a84f;
    font-size:16px;
}
/* =========================================================
   會員訂單：手機版
   ========================================================= */

@media(max-width:600px){

    .guide_member_orders_intro,
    .guide_member_orders_payment{
        padding:15px 14px;
    }

    .guide_member_orders_demo{
        margin-top:16px;
    }

    .guide_member_orders_demo_head{
        padding:14px;
    }

    .guide_member_orders_table_head{
        display:none;
    }

    .guide_member_orders_row{
        display:grid;
        grid-template-columns:1fr auto;
        gap:0;
        padding:13px 14px;
    }

    .guide_member_orders_row > div{
        padding:4px 0;
    }

    .guide_member_orders_row > div:nth-child(1){
        grid-column:1;
        grid-row:1;
    }

    .guide_member_orders_row > div:nth-child(2){
        grid-column:1;
        grid-row:2;
        color:#888;
        font-size:12px;
    }

    .guide_member_orders_row > div:nth-child(3){
        grid-column:1;
        grid-row:3;
    }

    .guide_member_orders_row > div:nth-child(4){
        grid-column:2;
        grid-row:1 / span 2;
        padding-left:12px;
        text-align:right;
    }

    .guide_member_orders_row > div:nth-child(5){
        grid-column:2;
        grid-row:3;
        padding-left:12px;
        text-align:right;
    }

    .guide_member_orders_view{
        min-height:32px;
        font-size:12px;
    }
    
        .guide_member_order_detail_head{
        align-items:flex-start;
        padding:14px;
    }

    .guide_member_order_detail_head > div{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

    .guide_member_order_progress{
        grid-template-columns:repeat(5,minmax(52px,1fr));
        overflow-x:auto;
        padding:18px 12px;
    }

    .guide_member_order_detail_section{
        margin:12px;
        padding:14px;
    }

    .guide_member_order_detail_product{
        grid-template-columns:1fr;
        gap:7px;
    }

    .guide_member_order_detail_product > div:not(:first-child){
        justify-content:flex-start;
        gap:12px;
    }

    .guide_member_order_detail_grid{
        grid-template-columns:1fr;
    }

    .guide_member_order_detail_grid
    .guide_member_order_detail_section{
        margin-bottom:0;
    }

}
/* =========================================================
   AI 破解示意
   ========================================================= */

.ai_restore_demo{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    max-width:900px;
    margin:30px auto 0;
}

.ai_restore_demo > div{
    min-height:180px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:#171717;
    border:1px solid #333;
    border-radius:10px;
    color:#eee;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    line-height:1.8;
}


@media(max-width:600px){

    .ai_restore_demo{
        grid-template-columns:1fr;
    }

.ai_restore_box{
    flex-direction:column;
    gap:12px;
    text-align:center;
}


.ai_restore_box strong{
    color:#eee;
    font-size:18px;
}


.ai_restore_box span{
    color:#aaa;
    font-size:15px;
    line-height:1.8;
}


/* 馬賽克示意 */

.ai_restore_mosaic{
    display:flex;
    align-items:center;
    justify-content:center;
    width:120px;
    height:60px;
    background:
        repeating-linear-gradient(
            45deg,
            #555,
            #555 8px,
            #333 8px,
            #333 16px
        );
    color:#fff !important;
    border-radius:6px;
    font-size:18px !important;
    font-weight:bold;
}


/* AI 處理結果示意 */

.ai_restore_box:last-child span{
    color:#d6a84f;
    font-weight:bold;
}
}

/* =========================================================
   AI 破解示意圖片
   ========================================================= */

.ai_restore_image{
    width:100%;
    max-width:160px;
    margin:15px auto;
    overflow:hidden;
    border-radius:8px;
    position:relative;
}

.ai_restore_image img{
    display:block;
    width:100%;
    height:auto;
}


/* 原版：加入馬賽克遮罩 */

.ai_restore_before img{
    filter:none;
}

.ai_restore_before:after{
    content:"";
    position:absolute;
    left:30%;
    top:25%;
    width:40%;
    height:40%;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(3px);
    border-radius:4px;
}


/* AI分析 */

.ai_restore_analyze:after{
    content:"AI 分析區域";
    position:absolute;
    left:30%;
    top:25%;
    width:35%;
    height:35%;
    border:2px solid #d6a84f;
    color:#fff;
    background:rgba(0,0,0,.2);
    display:flex;
    align-items:center;
    justify-content:center;
}


/* AI處理後 */

.ai_restore_after img{
    filter:none;
}


.ai_restore_after img{
    filter:
        contrast(.95)
        brightness(.98);
}