/* CHÆN stable member center rewrite — scoped to member center only */ #memberCenterPage .member-order-card-v2{background:#fff;border:1px solid #ebe4dd;border-radius:14px;margin:0 0 16px;overflow:hidden;box-shadow:0 4px 18px rgba(72,58,49,.035)} #memberCenterPage .member-order-card-head{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;border-bottom:1px solid #f0ebe6;gap:12px} #memberCenterPage .member-order-card-head div{display:flex;gap:10px;align-items:center;min-width:0}#memberCenterPage .member-order-muted{color:#958a81;font-size:12px} #memberCenterPage .member-order-status{display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;border-radius:999px;background:#f2eee9;color:#756a62;font-size:12px;font-weight:700;white-space:nowrap} #memberCenterPage .status-completed,#memberCenterPage .status-delivered{background:#e9f6ee;color:#347650}#memberCenterPage .status-cancelled,#memberCenterPage .status-returned{background:#f8ece9;color:#a15346}#memberCenterPage .status-paid,#memberCenterPage .status-processing,#memberCenterPage .status-confirmed{background:#f6f1e7;color:#8a6c37} #memberCenterPage .member-order-card-body{display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:16px;padding:18px;align-items:center} #memberCenterPage .member-order-thumb{width:76px;height:94px;object-fit:cover;border-radius:9px;background:#f5f2ee}#memberCenterPage .member-order-main h3{font-size:15px;margin:0 0 5px;color:#403832}#memberCenterPage .member-order-main>p{font-size:12px;color:#8a7e74;margin:0 0 12px} #memberCenterPage .member-order-meta-grid{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:12px;font-size:12px;color:#514942}#memberCenterPage .member-order-meta-grid span{display:flex;flex-direction:column;gap:3px}#memberCenterPage .member-order-meta-grid small,#memberCenterPage .member-order-total small{color:#9b9087;font-size:11px} #memberCenterPage .member-order-total{text-align:right;display:flex;flex-direction:column;gap:5px}#memberCenterPage .member-order-total strong{font-size:17px;color:#3f3732} #memberCenterPage .member-order-card-actions{display:flex;justify-content:flex-end;gap:9px;padding:12px 18px;background:#fcfaf8;border-top:1px solid #f0ebe6}.member-order-action{border-radius:999px;padding:9px 17px;font-size:13px;cursor:pointer}.member-order-action.primary{background:#3b302b;color:#fff;border:1px solid #3b302b}.member-order-action.danger{background:#fff;color:#a34f43;border:1px solid #d9b5ae} #memberCenterPage .member-order-detail-actions{display:flex;justify-content:flex-end;align-items:center;gap:9px;margin-top:20px;padding-top:16px;border-top:1px solid #eee8e2}.member-order-action.secondary{background:#fff;color:#5b4c42;border:1px solid #d9d0c8}.member-order-action.warning{background:#3b302b;color:#fff;border:1px solid #3b302b}.member-order-expired-msg{font-size:12px;color:#a34f43} #memberCenterPage .member-orders-loading,#memberCenterPage .member-orders-error{text-align:center;padding:54px 20px;color:#857970}.member-orders-loading span{width:25px;height:25px;border:2px solid #e5ddd5;border-top-color:#8f7d70;border-radius:50%;display:inline-block;animation:memberSpin .75s linear infinite}@keyframes memberSpin{to{transform:rotate(360deg)}} #memberCenterPage .member-orders-error{background:#fff7f5;border:1px solid #f0d8d2;border-radius:12px;color:#8c4d43}#memberCenterPage .member-orders-error button{margin-top:10px;border:0;border-radius:999px;padding:9px 18px;background:#3b302b;color:#fff} #memberCenterPage .member-order-detail-v2{background:#fff;border:1px solid #eae3dc;border-radius:15px;padding:24px}.member-order-detail-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-bottom:1px solid #eee8e2;padding-bottom:18px}.member-order-detail-head span{font-size:12px;color:#978b82}.member-order-detail-head h2{font-size:22px;margin:5px 0;color:#3f3732}.member-order-detail-head p{font-size:12px;color:#948980;margin:0} #memberCenterPage .member-order-progress-v2{display:grid;grid-template-columns:repeat(5,1fr);margin:25px 0 28px;position:relative}.member-order-progress-v2:before{content:'';position:absolute;left:8%;right:8%;top:14px;height:1px;background:#ddd5cd}.member-order-progress-v2 div{z-index:1;text-align:center;color:#9b9087;font-size:11px}.member-order-progress-v2 i{display:flex;width:29px;height:29px;margin:0 auto 7px;border-radius:50%;align-items:center;justify-content:center;background:#eee8e2;font-style:normal}.member-order-progress-v2 .active{color:#5b4c42}.member-order-progress-v2 .active i{background:#b7a18c;color:#fff} #memberCenterPage .member-order-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:17px;background:#faf8f5;border-radius:10px}.member-order-detail-grid div{display:flex;flex-direction:column;gap:4px}.member-order-detail-grid small{color:#998e85;font-size:11px}.member-order-detail-grid strong{font-size:13px;color:#463e38} #memberCenterPage .member-order-items-v2{margin-top:25px}.member-order-items-v2 h3{font-size:16px;color:#413a35}.member-order-item-v2{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:13px;align-items:center;padding:13px 0;border-bottom:1px solid #eee8e2}.member-order-item-v2 img{width:58px;height:72px;object-fit:cover;border-radius:7px}.member-order-item-v2 strong{font-size:14px}.member-order-item-v2 p{font-size:12px;color:#948980;margin:4px 0 0}.member-order-item-v2 span{font-size:12px;color:#766d66}.member-order-item-v2 b{font-size:14px} #memberCenterPage .member-order-summary-v2{max-width:370px;margin:20px 0 0 auto}.member-order-summary-v2 div{display:flex;justify-content:space-between;padding:7px 0;font-size:13px}.member-order-summary-v2 .total{border-top:1px solid #ded6cf;margin-top:5px;padding-top:13px;font-size:16px} @media(max-width:767px){#memberCenterPage .member-order-card-body{grid-template-columns:64px minmax(0,1fr);align-items:start}.member-order-thumb{grid-row:1/3!important;width:64px!important;height:82px!important}.member-order-total{grid-column:2;text-align:left!important}.member-order-meta-grid{grid-template-columns:repeat(2,1fr)!important}.member-order-card-actions{justify-content:stretch!important}.member-order-action{flex:1}.member-order-detail-v2{padding:16px!important}.member-order-detail-grid{grid-template-columns:repeat(2,1fr)!important}.member-order-progress-v2 span{font-size:9px}.member-order-item-v2{grid-template-columns:50px minmax(0,1fr) auto}.member-order-item-v2 b{grid-column:2/4}.member-order-detail-head h2{font-size:17px}} /* ================================================================ Member Center dashboard entrance — scoped, no order/return UI rewrite ================================================================ */ #memberCenterPage .member-center-dashboard-header{display:block;margin-bottom:18px} #memberCenterPage .member-center-dashboard-header .member-center-title{margin:0;font-family:inherit;font-size:24px;font-weight:500;letter-spacing:.02em} #memberCenterPage .member-center-subtitle{margin:6px 0 0;color:#8f837a;font-size:12px;line-height:1.6} #memberCenterPage .member-dashboard{display:block;margin-bottom:28px} #memberCenterPage .member-dashboard-overview{display:grid;grid-template-columns:minmax(240px,1.55fr) repeat(3,minmax(70px,.58fr)) minmax(220px,1.2fr);align-items:stretch;background:#fff;border:1px solid #e8e0d8;border-radius:12px;overflow:hidden;box-shadow:0 3px 14px rgba(72,58,49,.025)} #memberCenterPage .member-dashboard-user{display:flex;align-items:center;gap:22px;padding:24px 24px 24px 26px;min-width:0} #memberCenterPage .member-dashboard-avatar-wrap{position:relative;flex:0 0 auto} #memberCenterPage .member-dashboard-avatar{width:94px;height:94px;border-radius:50%;background:linear-gradient(135deg,#f5efe7,#ebe1d6);display:flex;align-items:center;justify-content:center;color:#806b58} #memberCenterPage .member-dashboard-avatar{overflow:hidden} #memberCenterPage .member-dashboard-avatar img{display:block;width:100%;height:100%;object-fit:cover} #memberCenterPage .member-dashboard-avatar svg{width:45px;height:45px} #memberCenterPage .member-dashboard-user-copy{min-width:0} #memberCenterPage .member-dashboard-greeting{font-size:17px;font-weight:700;color:#302a26;margin-bottom:9px} #memberCenterPage .member-dashboard-tier{display:inline-flex;padding:3px 8px;border-radius:4px;background:#E8E1D7;color:#3F3A34;font-size:10px;margin-bottom:8px} #memberCenterPage .member-dashboard-email,#memberCenterPage .member-dashboard-joined{font-size:11px;color:#000000;line-height:1.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #memberCenterPage .member-dashboard-stat,#memberCenterPage .member-dashboard-line{border:10px solid #FFFFFF;background:#fbf9f7;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;box-sizing:border-box} #memberCenterPage .member-dashboard-stat{gap:4px;padding:20px 10px} #memberCenterPage .member-dashboard-stat svg{width:25px;height:25px;color:#80603d;margin-bottom:3px} #memberCenterPage .member-dashboard-stat strong{font-size:20px;line-height:1.1;color:#2f2925;font-weight:700} #memberCenterPage .member-dashboard-stat span{font-size:11px;color:#7e746c} #memberCenterPage .member-dashboard-line{flex-direction:row;justify-content:center;gap:12px;padding:18px 20px} #memberCenterPage .member-dashboard-line-logo{width:38px;height:38px;border-radius:50%;background:#06c755;color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;flex:0 0 auto} #memberCenterPage .member-dashboard-line>div:last-child{display:flex;flex-direction:column;gap:3px;min-width:0} #memberCenterPage .member-dashboard-line strong{font-size:12px;color:#403932} #memberCenterPage .member-dashboard-line span,#memberCenterPage .member-dashboard-line small{font-size:10px;color:#8b8078;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #memberCenterPage .member-dashboard-line-status{color:#347650} #memberCenterPage .member-dashboard-section-title{margin:0 0 12px;font-size:15px;font-weight:600;color:#3b342f} #memberCenterPage .member-dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} #memberCenterPage .member-dashboard-card{min-height:112px;border:1px solid #ebe3db;border-radius:10px;background:#fff;display:grid;grid-template-columns:62px minmax(0,1fr) 18px;align-items:center;gap:14px;padding:18px 18px;text-align:left;color:#3b342f;cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease} #memberCenterPage .member-dashboard-card:hover{border-color:#d8c9bc;box-shadow:0 5px 18px rgba(72,58,49,.055);transform:translateY(-1px)} #memberCenterPage .member-dashboard-card-icon{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,#f5efe7,#e9dfd4);display:flex;align-items:center;justify-content:center;color:#80603d} #memberCenterPage .member-dashboard-card-icon svg{width:28px;height:28px} #memberCenterPage .member-dashboard-card span:nth-child(2){display:flex;flex-direction:column;min-width:0} #memberCenterPage .member-dashboard-card strong{font-size:14px;font-weight:600;line-height:1.4;color:#302a26} #memberCenterPage .member-dashboard-card small{font-size:10px;color:#847970;line-height:1.6;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #memberCenterPage .member-dashboard-card>b{font-size:24px;font-weight:300;color:#4c433c;line-height:1} #memberCenterPage .member-segmented-control-legacy{display:none!important} #memberCenterPage .member-sidebar{display:none!important} #memberCenterPage .member-center-layout{display:block} #memberCenterPage .member-content{width:100%;min-width:0} #memberCenterPage .member-tab-header{margin-top:0} #memberCenterPage .member-tab.active{display:block} @media(max-width:767px){ #memberCenterPage .member-dashboard-overview{grid-template-columns:1fr 1fr 1fr} #memberCenterPage .member-dashboard-user{grid-column:1 / -1;border-bottom:1px solid #eee7df} } @media(max-width:767px){ #memberCenterPage .member-center-container{padding:20px 16px 40px} #memberCenterPage .member-dashboard-overview{grid-template-columns:1fr 1fr} #memberCenterPage .member-dashboard-user{grid-column:1 / -1;padding:20px} #memberCenterPage .member-dashboard-avatar{width:78px;height:78px} #memberCenterPage .member-dashboard-avatar svg{width:38px;height:38px} #memberCenterPage .member-dashboard-line{grid-column:1 / -1} #memberCenterPage .member-dashboard-grid{grid-template-columns:1fr;gap:10px} #memberCenterPage .member-dashboard-card{min-height:90px} } /* ================================================================ Member Center subpage navigation + dashboard background Scoped only to the member center. Does not alter return-request UI. ================================================================ */ #memberCenterPage .member-center-container{position:relative} #memberCenterPage .member-subpage-back-btn{ display:none; position:absolute; top:24px; right:40px; z-index:20; align-items:center; justify-content:center; gap:7px; min-height:42px; padding:0 20px; border:0; border-radius:999px; background:#2b2622; color:#fff; font-size:13px; font-weight:600; line-height:1; cursor:pointer; box-shadow:0 2px 8px rgba(40,31,25,.08); } #memberCenterPage .member-subpage-back-btn:hover{background:#1f1b18} #memberCenterPage .member-subpage-back-btn svg{width:16px;height:16px;flex:0 0 auto} #memberCenterPage.member-center-dashboard-mode .member-subpage-back-btn{display:none!important} #memberCenterPage.member-center-subpage-mode .member-subpage-back-btn{display:inline-flex} #memberCenterPage.member-center-dashboard-mode{ background-image:url('/images/member-center-dashboard-bg.png'); background-repeat:no-repeat; background-position:right 24px; background-size:650px auto; background-attachment:scroll; } #memberCenterPage.member-center-dashboard-mode .member-center-container{min-height:calc(100vh - 80px)} @media(max-width:767px){ #memberCenterPage .member-subpage-back-btn{top:16px;right:16px;min-height:38px;padding:0 15px;font-size:12px} #memberCenterPage.member-center-dashboard-mode{background-position:right 8px;background-size:430px auto;} } /* ================================================================ Member account/profile visual alignment — scoped to member center. The return-request form is intentionally untouched. ================================================================ */ #memberCenterPage .member-dashboard-section-title{ margin:26px 0 14px; font-size:20px; line-height:1.4; font-weight:600; letter-spacing:.02em; color:#302a26; } #memberCenterPage .member-dashboard-grid{gap:14px} #memberCenterPage .member-dashboard-card{ min-height:128px; grid-template-columns:68px minmax(0,1fr) 20px; gap:16px; padding:20px 22px; } #memberCenterPage .member-dashboard-card-icon{width:60px;height:60px} #memberCenterPage .member-dashboard-card-icon svg{width:30px;height:30px} #memberCenterPage .member-dashboard-card strong{font-size:15px} #memberCenterPage .member-dashboard-card small{font-size:11px} #memberCenterPage .member-dashboard-line-copy{display:flex;flex-direction:column;gap:3px;min-width:0} /* New personal-data page, matching the supplied reference without changing return UI. */ #memberCenterPage .member-profile-page-card{ background:#fff; border:1px solid #e8e0d8; border-radius:14px; padding:30px 34px 34px; box-shadow:0 4px 18px rgba(72,58,49,.025); } #memberCenterPage .member-profile-page-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:28px; margin-bottom:28px; } #memberCenterPage .member-profile-page-head h2{ margin:0; font-size:28px; line-height:1.35; font-weight:600; color:#2f2925; } #memberCenterPage .member-profile-page-head p{ margin:8px 0 0; color:#8b8078; font-size:13px; line-height:1.7; } #memberCenterPage .member-profile-avatar-actions{ display:grid; grid-template-columns:auto; justify-items:center; align-items:center; gap:0; flex:0 0 auto; } #memberCenterPage .member-profile-avatar{ width:102px;height:102px;border-radius:50%; background:linear-gradient(135deg,#f5efe7,#ebe1d6); color:#806b58; display:flex;align-items:center;justify-content:center; overflow:hidden; } #memberCenterPage .member-profile-avatar svg{width:50px;height:50px} #memberCenterPage .member-profile-avatar img{width:100%;height:100%;object-fit:cover} #memberCenterPage .member-profile-avatar-btn{ border:1px solid #d9d0c8; background:#fff; color:#4d443e; border-radius:999px; min-height:44px; padding:0 20px; font-size:14px; font-weight:600; cursor:pointer; } #memberCenterPage .member-profile-avatar-btn:hover{background:#faf7f3} #memberCenterPage .member-profile-avatar-btn:disabled, #memberCenterPage .member-profile-avatar-remove-btn:disabled{opacity:.55;cursor:not-allowed} #memberCenterPage .member-profile-avatar-remove-btn{ display:block; margin:8px 0 0; padding:0; border:0; background:transparent; color:#8b8078; font-size:13px; font-weight:500; line-height:1.4; cursor:pointer; } #memberCenterPage .member-profile-avatar-remove-btn:hover{color:#5f554e;text-decoration:underline} #memberCenterPage .member-profile-form-section{display:grid;gap:20px} #memberCenterPage .member-profile-form-section .form-group{margin:0} #memberCenterPage .member-profile-form-section label{ display:block; margin:0 0 8px; font-size:14px; font-weight:600; color:#786d64; } #memberCenterPage .member-profile-form-section input[type=text], #memberCenterPage .member-profile-form-section input[type=email], #memberCenterPage .member-profile-form-section input[type=tel], #memberCenterPage .member-profile-form-section input[type=date]{ width:100%;min-height:56px;padding:0 20px; border:1px solid #e1d8d0;border-radius:10px; background:#fff;color:#302a26;font-size:16px; box-sizing:border-box; } #memberCenterPage .member-profile-form-section input.input-disabled{background:#eee9e3!important;color:#8c827a!important} #memberCenterPage .member-profile-date-wrap{position:relative} #memberCenterPage .member-profile-date-wrap input{padding-right:48px!important} #memberCenterPage .member-profile-date-wrap>span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;color:#8d8177;pointer-events:none} #memberCenterPage .member-profile-gender-group{margin-top:2px!important} #memberCenterPage .member-profile-radio-row{display:flex;align-items:center;gap:34px;min-height:42px} #memberCenterPage .member-profile-radio-row label{display:inline-flex!important;align-items:center;gap:10px;margin:0!important;font-size:16px!important;font-weight:400!important;color:#403832!important;cursor:pointer} #memberCenterPage .member-profile-radio-row input{appearance:none;width:28px;height:28px;border:2px solid #cfc5bc;border-radius:50%;margin:0;position:relative;background:#fff} #memberCenterPage .member-profile-radio-row input:checked{border-color:#2f2a26;background:#2f2a26} #memberCenterPage .member-profile-radio-row input:checked::after{content:'';position:absolute;left:7px;top:7px;width:10px;height:10px;border-radius:50%;background:#fff} #memberCenterPage .member-profile-divider{height:1px;background:#e9e1da;margin:28px 0 26px} #memberCenterPage .member-profile-section-title{font-size:25px;font-weight:600;color:#2f2925;margin-bottom:20px} #memberCenterPage .member-profile-other-settings{max-width:100%} #memberCenterPage .member-profile-save-btn{min-width:160px;min-height:52px;border-radius:999px;font-size:15px;font-weight:600} #memberCenterPage .member-profile-email-verification{margin-bottom:20px} #memberCenterPage .member-password-heading{margin-top:30px} /* Remove the old LINE status panel from the profile page; status now lives in the dashboard overview. */ #memberCenterPage #lineBindingStatusSection{display:none!important} @media(max-width:767px){ #memberCenterPage .member-dashboard-section-title{margin-top:22px;font-size:18px} #memberCenterPage .member-dashboard-card{min-height:104px;grid-template-columns:58px minmax(0,1fr) 18px;padding:16px} #memberCenterPage .member-dashboard-card-icon{width:52px;height:52px} #memberCenterPage .member-profile-page-card{padding:22px 18px 26px} #memberCenterPage .member-profile-page-head{flex-direction:column;margin-bottom:22px} #memberCenterPage .member-profile-avatar-actions{width:100%;justify-content:flex-start} #memberCenterPage .member-profile-avatar{width:82px;height:82px} #memberCenterPage .member-profile-avatar svg{width:40px;height:40px} #memberCenterPage .member-profile-radio-row{gap:22px;flex-wrap:wrap} #memberCenterPage .member-profile-save-btn{width:100%} } /* ================================================================ Member account refinement — LINE / password / profile sizing Scoped to member center only. Return-request UI is untouched. ================================================================ */ #memberCenterPage .member-dashboard-line{ grid-column:5; grid-row:1; min-width:0; min-height:132px; justify-content:flex-start; gap:14px; padding:20px 20px; border-left:1px solid #eee7df; border-radius:0 10px 10px 0; box-sizing:border-box; flex-wrap:nowrap; } #memberCenterPage .member-dashboard-line-logo{ width:42px;height:42px;font-size:11px;flex:0 0 42px; background:#06c755; object-fit:contain; } #memberCenterPage .member-dashboard-line-copy{gap:7px;align-items:flex-start} #memberCenterPage .member-dashboard-line-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} #memberCenterPage .member-dashboard-line strong{font-size:18px;font-weight:700;color:#000000} #memberCenterPage .member-dashboard-line span,#memberCenterPage .member-dashboard-line small{font-size:12px} #memberCenterPage .member-dashboard-line-state{ display:inline-flex;align-items:center;justify-content:center;min-width:74px;min-height:32px;padding:0 14px; border-radius:999px;background:#f1eee9;color:#8c827a;font-size:12px!important;font-weight:600; } #memberCenterPage .member-dashboard-line-state.is-enabled{background:#e8f7ed;color:#12a74e} #memberCenterPage .member-profile-page-card{padding:28px 32px 30px} #memberCenterPage .member-profile-form-section{max-width:980px;margin:0 auto;gap:18px} #memberCenterPage .member-profile-form-section input[type=text], #memberCenterPage .member-profile-form-section input[type=email], #memberCenterPage .member-profile-form-section input[type=tel], #memberCenterPage .member-profile-form-section input[type=date]{min-height:52px;font-size:15px} #memberCenterPage .member-profile-other-settings{max-width:980px} #memberCenterPage .member-profile-save-btn{display:block;margin:0} #memberCenterPage .member-profile-divider{max-width:980px;margin:26px auto 22px} #memberCenterPage .member-profile-section-title{max-width:980px;margin:0 auto 16px} #memberCenterPage .member-password-heading{display:none!important} /* Password page — intentionally separate from the profile form. */ #memberCenterPage .member-password-page{max-width:100%;} /* Password page reuses the global member-center header above; keep the inner duplicate header hidden. */ #memberCenterPage.member-password-subpage-active .member-password-page-header{display:none!important} #memberCenterPage .member-password-page-header{margin:0 0 20px} #memberCenterPage .member-password-page-header h2{margin:0;font-size:24px;line-height:1.4;color:#302a26;font-weight:600} #memberCenterPage .member-password-page-header p{margin:6px 0 0;font-size:12px;color:#8b8078} #memberCenterPage .member-password-page-card{background:#fff;border:1px solid #e8e0d8;border-radius:12px;padding:28px 32px 18px;box-shadow:0 4px 18px rgba(72,58,49,.025)} #memberCenterPage .member-password-card-head{display:flex;align-items:center;gap:14px} #memberCenterPage .member-password-icon{width:48px;height:48px;border-radius:50%;background:#f1ebe3;color:#806b58;display:flex;align-items:center;justify-content:center;flex:0 0 48px} #memberCenterPage .member-password-icon svg{width:25px;height:25px} #memberCenterPage .member-password-card-head h3{margin:0;color:#332c27;font-size:17px;font-weight:600} #memberCenterPage .member-password-card-head p{margin:4px 0 0;color:#8c827a;font-size:11px} #memberCenterPage .member-password-divider{height:1px;background:#ebe3dc;margin:22px 0} #memberCenterPage .member-password-form{display:grid;gap:18px} #memberCenterPage .member-password-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:26px;align-items:center} #memberCenterPage .member-password-label{display:flex;flex-direction:column;gap:5px} #memberCenterPage .member-password-label label{font-size:13px;font-weight:600;color:#403832} #memberCenterPage .member-password-label span{font-size:11px;line-height:1.6;color:#9a9088} #memberCenterPage .member-password-field-wrap{min-width:0} #memberCenterPage .member-password-field{position:relative} #memberCenterPage .member-password-field input{width:100%;height:50px;padding:0 44px 0 16px;border:1px solid #e1d8d0;border-radius:9px;background:#fff;color:#302a26;font-size:14px;box-sizing:border-box;outline:none} #memberCenterPage .member-password-field input:focus{border-color:#bfae9f;box-shadow:0 0 0 3px rgba(191,174,159,.12)} #memberCenterPage .member-password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;background:transparent;color:#9b9087;font-size:15px;cursor:pointer;padding:0;line-height:1} #memberCenterPage .member-password-strength{display:flex;align-items:center;gap:5px;margin-top:7px} #memberCenterPage .member-password-strength span{display:block;width:42px;height:4px;border-radius:999px;background:#e9e2db} #memberCenterPage .member-password-strength span.is-filled{background:#bda990} #memberCenterPage .member-password-strength em{font-style:normal;font-size:10px;color:#9a9088;margin-left:3px} #memberCenterPage .member-password-tip{display:flex;align-items:center;gap:12px;background:#f8f5f1;border-radius:9px;padding:14px 16px;margin-top:24px} #memberCenterPage .member-password-tip-icon{width:42px;height:42px;border-radius:50%;background:#eee6dd;color:#6f6257;display:flex;align-items:center;justify-content:center;flex:0 0 42px} #memberCenterPage .member-password-tip-icon svg{width:23px;height:23px} #memberCenterPage .member-password-tip strong{font-size:12px;color:#403832} #memberCenterPage .member-password-tip p{margin:3px 0 0;font-size:10px;color:#968c84} #memberCenterPage .member-password-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ebe3dc;margin-top:24px;padding-top:16px} #memberCenterPage .member-password-cancel,#memberCenterPage .member-password-submit{min-width:96px;height:42px;padding:0 20px;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer} #memberCenterPage .member-password-cancel{border:1px solid #d9d0c8;background:#fff;color:#554b44} #memberCenterPage .member-password-submit{border:1px solid #2b2622;background:#2b2622;color:#fff} #memberCenterPage .member-password-msg{text-align:center;margin-top:10px} @media(max-width:767px){ #memberCenterPage .member-dashboard-line{grid-column:1 / -1;grid-row:auto;border-left:0;border-top:1px solid #eee7df;border-radius:0 0 10px 10px} #memberCenterPage .member-password-row{grid-template-columns:1fr;gap:8px} } @media(max-width:767px){ #memberCenterPage .member-dashboard-line{min-height:110px;padding:16px} #memberCenterPage .member-dashboard-line-logo{width:58px;height:58px;flex-basis:58px} #memberCenterPage .member-dashboard-line strong{font-size:18px;color:#000000} #memberCenterPage .member-profile-page-card{padding:22px 18px 26px} #memberCenterPage .member-profile-form-section,#memberCenterPage .member-profile-other-settings{max-width:100%} #memberCenterPage .member-password-page-card{padding:22px 18px 16px} #memberCenterPage .member-password-footer{gap:10px} #memberCenterPage .member-password-cancel,#memberCenterPage .member-password-submit{flex:1} } /* ================================================================ Member Center — LINE detail icons and typography refinement Scoped to member center only. No LINE binding logic changes. ================================================================ */ #memberCenterPage .member-dashboard-line{ position:relative; border-left:0; } #memberCenterPage .member-dashboard-line::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:1px; background:#eee7df; pointer-events:none; } #memberCenterPage .member-dashboard-line-title-row{ flex-wrap:nowrap; } #memberCenterPage .member-dashboard-line-detail{ display:grid; grid-template-columns:16px minmax(0,1fr); align-items:center; column-gap:8px; min-width:0; } #memberCenterPage .member-dashboard-line-detail img{ width:14px; height:14px; flex:0 0 14px; justify-self:center; display:block; object-fit:contain; } #memberCenterPage .member-dashboard-line-account span, #memberCenterPage .member-dashboard-line-login-status small{ display:block; min-width:0; font-size:13px; line-height:18px; color:#000; white-space:nowrap; overflow:visible; text-overflow:clip; } #memberCenterPage .member-dashboard-line-account span{ font-weight:700; } #memberCenterPage .member-dashboard-line-login-status small{ font-weight:500; } @media (max-width:767px){ #memberCenterPage .member-dashboard-line::before{display:none} #memberCenterPage .member-dashboard-line-detail{ grid-template-columns:16px minmax(0,1fr); column-gap:10px; } #memberCenterPage .member-dashboard-line-detail img{ width:14px; height:14px; flex-basis:14px; } #memberCenterPage .member-dashboard-line-account span, #memberCenterPage .member-dashboard-line-login-status small{ font-size:12px; line-height:18px; } } /* ================================================================ Member Center — LINE detail icon visual-size correction v26 Purpose: - Make account/user icon and quick-login shield use the same 12px display size. - Keep a dedicated icon column and 10px gap so neither icon touches the text. - UI-only; no LINE/API/data logic changes. ================================================================ */ #memberCenterPage .member-dashboard-line-detail{ grid-template-columns:16px minmax(0,1fr); column-gap:10px; align-items:center; } #memberCenterPage .member-dashboard-line-account img{ width:18px; height:18px; flex:0 0 18px; justify-self:center; object-fit:contain; display:block; } #memberCenterPage .member-dashboard-line-login-status img{ width:17px; height:17px; flex:0 0 17px; justify-self:center; object-fit:contain; display:block; } @media (max-width:767px){ #memberCenterPage .member-dashboard-line-account img{ width:18px; height:18px; flex-basis:18px; } #memberCenterPage .member-dashboard-line-login-status img{ width:17px; height:17px; flex-basis:17px; } } /* ================================================================ 2026-08-21 Member profile subpage UI patch Scoped only to the profile subpage. Existing order/return UI is untouched. ================================================================ */ #memberCenterPage.member-profile-subpage-active .member-center-dashboard-header{display:none} #memberCenterPage.member-profile-subpage-active .member-subpage-back-btn{display:none!important} #memberCenterPage.member-profile-subpage-active .member-center-container{padding-top:16px} #memberCenterPage .member-profile-subpage-grid{display:grid;grid-template-columns:minmax(0,2.12fr) minmax(310px,.98fr);gap:34px;align-items:start} #memberCenterPage .member-profile-main-column{min-width:0} #memberCenterPage .member-profile-side-column{display:grid;gap:18px;min-width:0} #memberCenterPage .member-profile-page-card{padding:34px 38px 30px;border-radius:14px;box-shadow:0 3px 16px rgba(72,58,49,.018)} #memberCenterPage .member-profile-page-head{align-items:center;gap:34px;margin-bottom:34px} #memberCenterPage .member-profile-page-heading{min-width:0;flex:1} #memberCenterPage .member-profile-page-head h2{font-size:32px;line-height:1.3;letter-spacing:.01em;color:#161616} #memberCenterPage .member-profile-page-head p{margin-top:10px;font-size:14px;color:#6f6964} #memberCenterPage .member-profile-avatar-actions{display:grid;grid-template-columns:116px auto auto;align-items:center;justify-items:start;gap:0 14px;flex:0 0 auto} #memberCenterPage .member-profile-avatar{grid-row:1 / span 2;width:116px;height:116px} #memberCenterPage .member-profile-avatar-btn{min-height:54px;padding:0 22px;border-radius:10px;font-size:14px;background:#fff;color:#282522} #memberCenterPage .member-profile-avatar-remove-btn{margin:0;padding:0 4px;font-size:14px;white-space:nowrap} #memberCenterPage .member-profile-avatar-actions #memberProfileAvatarInput{display:none} #memberCenterPage .member-profile-form-section{max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 34px} #memberCenterPage .member-profile-form-section .form-group{min-width:0} #memberCenterPage .member-profile-form-section label{margin-bottom:9px;font-size:15px;font-weight:600;color:#1c1c1c} #memberCenterPage .member-profile-form-section input[type=text], #memberCenterPage .member-profile-form-section input[type=email], #memberCenterPage .member-profile-form-section input[type=tel], #memberCenterPage .member-profile-form-section input[type=date]{width:100%;min-height:56px;padding:0 20px;border-radius:10px;font-size:16px;color:#171717;background:#fff} #memberCenterPage .member-profile-form-section input.input-disabled{background:#faf9f8!important;color:#595552!important} #memberCenterPage .member-profile-date-wrap input{padding-right:48px!important} #memberCenterPage .member-profile-date-wrap>span{right:19px;color:#171717;font-size:20px} #memberCenterPage .member-profile-gender-group{display:flex;flex-direction:column;justify-content:flex-start} #memberCenterPage .member-profile-radio-row{gap:34px;min-height:56px} #memberCenterPage .member-profile-radio-row label{font-size:16px!important;font-weight:400!important;color:#1d1d1d!important} #memberCenterPage .member-profile-radio-row input{width:30px;height:30px} #memberCenterPage .member-profile-radio-row input:checked::after{left:8px;top:8px;width:10px;height:10px} #memberCenterPage .member-profile-phone-group{grid-column:1} #memberCenterPage .member-profile-divider{max-width:none;margin:34px 0 30px;background:#e9e4df} #memberCenterPage .member-profile-actions{display:flex;justify-content:center;margin:0} #memberCenterPage .member-profile-save-btn{min-width:258px;height:58px;min-height:58px;margin:0;border-radius:10px;font-size:16px;font-weight:700;background:#171717;border-color:#171717;color:#fff} #memberCenterPage .member-profile-save-btn:hover{background:#282828;border-color:#282828} #memberCenterPage .member-profile-other-settings{display:none!important} #memberCenterPage #emailVerificationSection{display:none!important} #memberCenterPage .member-profile-privacy-note{display:flex;align-items:center;gap:14px;margin-top:18px;padding:24px 26px;border:1px solid #e9e2dc;border-radius:12px;background:#fff;color:#6d6762;font-size:14px;line-height:1.6} #memberCenterPage .member-profile-privacy-icon{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;color:#5c5651;flex:0 0 24px} #memberCenterPage .member-profile-privacy-icon svg{width:22px;height:22px} #memberCenterPage .member-profile-info-card{background:#fff;border:1px solid #e8e1db;border-radius:12px;padding:20px 20px 18px;box-shadow:0 3px 14px rgba(72,58,49,.018)} #memberCenterPage .member-profile-info-card-head{display:flex;align-items:center;gap:12px;margin:0 0 16px} #memberCenterPage .member-profile-info-card-head h3{margin:0;font-size:20px;line-height:1.4;font-weight:700;color:#161616} #memberCenterPage .member-profile-info-icon{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:#111;flex:0 0 32px} #memberCenterPage .member-profile-info-icon svg{width:27px;height:27px} #memberCenterPage .member-profile-status-row{display:flex;align-items:center;gap:14px;min-height:74px;padding:12px 14px;border:1px solid #ece6e1;border-radius:11px;background:#fff;margin-top:10px} #memberCenterPage .member-profile-status-icon{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#faf7f3;color:#151515;flex:0 0 48px} #memberCenterPage .member-profile-status-icon svg{width:27px;height:27px} #memberCenterPage .member-profile-line-icon{overflow:hidden;padding:0;background:#f8f8f8} #memberCenterPage .member-profile-line-icon img{width:30px;height:30px;display:block;object-fit:contain} #memberCenterPage .member-profile-status-copy{display:flex;flex-direction:column;gap:3px;min-width:0} #memberCenterPage .member-profile-status-copy small{font-size:13px;color:#625c57;line-height:1.4} #memberCenterPage .member-profile-status-copy strong{font-size:18px;color:#161616;line-height:1.4;font-weight:600} #memberCenterPage .member-profile-status-copy strong.is-success{color:#111} #memberCenterPage .member-profile-status-copy strong.is-success::before{content:'✓';color:#17a34a;margin-right:9px;font-weight:700} #memberCenterPage .member-profile-inline-action{width:100%;margin-top:10px;min-height:38px;border:1px solid #d8cec5;border-radius:999px;background:#fff;color:#4e4742;font-size:12px;font-weight:600;cursor:pointer} #memberCenterPage .member-profile-inline-action:hover{background:#faf7f3} #memberCenterPage .member-profile-card-arrow{margin-left:auto;width:32px;height:32px;border:0;background:transparent;color:#77706a;font-size:28px;font-weight:300;line-height:1;cursor:pointer;padding:0} #memberCenterPage .member-profile-security-content{border:1px solid #ece6e1;border-radius:11px;padding:15px 16px;background:#fff} #memberCenterPage .member-profile-security-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14px;color:#282421} #memberCenterPage .member-profile-security-row strong{font-size:14px;color:#4d4844;font-weight:600} #memberCenterPage .member-profile-security-content p{margin:9px 0 14px;color:#8a827c;font-size:12px;line-height:1.6} #memberCenterPage .member-profile-password-date-row{padding-top:13px;border-top:1px solid #eee8e3} #memberCenterPage .member-profile-quick-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #memberCenterPage .member-profile-quick-links button{min-width:0;min-height:106px;border:1px solid #ebe5df;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#151515;font-size:14px;cursor:pointer} #memberCenterPage .member-profile-quick-links button:hover{background:#faf8f5;border-color:#dcd2ca} #memberCenterPage .member-profile-quick-icon{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center} #memberCenterPage .member-profile-quick-icon svg{width:29px;height:29px} @media(max-width:1020px){ #memberCenterPage .member-profile-subpage-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.78fr);gap:20px} #memberCenterPage .member-profile-page-card{padding:28px 28px 26px} #memberCenterPage .member-profile-avatar-actions{grid-template-columns:96px auto auto;gap:0 10px} #memberCenterPage .member-profile-avatar{width:96px;height:96px} } @media(max-width:767px){ #memberCenterPage.member-profile-subpage-active .member-center-container{padding-top:16px} #memberCenterPage .member-profile-subpage-grid{grid-template-columns:1fr;gap:16px} #memberCenterPage .member-profile-page-card{padding:22px 18px 24px} #memberCenterPage .member-profile-page-head{align-items:flex-start;flex-direction:column;gap:20px;margin-bottom:26px} #memberCenterPage .member-profile-page-head h2{font-size:28px} #memberCenterPage .member-profile-page-head p{font-size:13px} #memberCenterPage .member-profile-avatar-actions{width:100%;grid-template-columns:82px auto auto;gap:0 10px;justify-items:start} #memberCenterPage .member-profile-avatar{width:82px;height:82px} #memberCenterPage .member-profile-avatar-btn{min-height:46px;padding:0 16px;font-size:13px} #memberCenterPage .member-profile-avatar-remove-btn{font-size:13px} #memberCenterPage .member-profile-form-section{grid-template-columns:1fr;gap:20px} #memberCenterPage .member-profile-phone-group{grid-column:auto} #memberCenterPage .member-profile-radio-row{gap:22px;flex-wrap:wrap} #memberCenterPage .member-profile-divider{margin:26px 0 22px} #memberCenterPage .member-profile-save-btn{width:100%;min-width:0;height:54px;min-height:54px} #memberCenterPage .member-profile-privacy-note{padding:18px 16px;font-size:12px} #memberCenterPage .member-profile-info-card{padding:18px 16px 16px} #memberCenterPage .member-profile-info-card-head h3{font-size:18px} #memberCenterPage .member-profile-status-row{min-height:68px;padding:10px 12px} #memberCenterPage .member-profile-status-icon{width:44px;height:44px;flex-basis:44px} #memberCenterPage .member-profile-status-copy strong{font-size:16px} #memberCenterPage .member-profile-quick-links{gap:8px} #memberCenterPage .member-profile-quick-links button{min-height:94px;font-size:12px} } #memberCenterPage .member-profile-tier-icon img{width:27px;height:27px;display:block;object-fit:contain} #memberCenterPage .member-profile-quick-heading-icon img{width:27px;height:27px;display:block;object-fit:contain} /* 2026-08-21 member profile icon patch v4 */ #memberCenterPage .member-profile-tier-icon img{width:27px;height:27px;display:block;object-fit:contain} #memberCenterPage .member-profile-quick-heading-icon img{width:27px;height:27px;display:block;object-fit:contain} #memberCenterPage .member-profile-line-icon img{width:27px;height:27px;display:block;object-fit:contain} #memberCenterPage .member-profile-quick-icon img{width:29px;height:29px;display:block;object-fit:contain} #memberCenterPage .member-profile-order-icon img{width:32px;height:32px;display:block;object-fit:contain} #memberCenterPage .member-profile-quick-icon img{width:30px;height:30px;display:block;object-fit:contain} /* CHÆN member center — secondary text contrast enhancement Scoped to #memberCenterPage so other pages are unaffected. */ #memberCenterPage .member-profile-subtitle, #memberCenterPage .member-profile-description, #memberCenterPage .member-profile-helper, #memberCenterPage .member-profile-label, #memberCenterPage .member-profile-status-label, #memberCenterPage .member-profile-meta, #memberCenterPage .member-profile-security-label, #memberCenterPage .member-profile-security-note, #memberCenterPage .member-profile-quick-link-label, #memberCenterPage .member-profile-secondary-text{ color:#4A4640; } #memberCenterPage .member-profile-subtitle, #memberCenterPage .member-profile-description{ font-size:15px; font-weight:400; line-height:1.7; } #memberCenterPage .member-profile-label, #memberCenterPage .member-profile-status-label, #memberCenterPage .member-profile-security-label{ font-weight:500; } #memberCenterPage .member-profile-meta, #memberCenterPage .member-profile-security-note, #memberCenterPage .member-profile-helper, #memberCenterPage .member-profile-quick-link-label{ color:#5F5A52; } /* ================================================================ CHÆN Member Center — full secondary text contrast refinement Scope: #memberCenterPage only UI/CSS only. No JS/API/DB changes. ================================================================ */ /* Dashboard / member center overview */ #memberCenterPage .member-center-subtitle{ color:#4A4640; font-size:13px; font-weight:400; line-height:1.7; } #memberCenterPage .member-dashboard-tier{ color:#3F3A34; font-weight:600; } #memberCenterPage .member-dashboard-email, #memberCenterPage .member-dashboard-joined{ color:#4A4640; font-weight:400; } #memberCenterPage .member-dashboard-stat span{ color:#4A4640; font-weight:500; } #memberCenterPage .member-dashboard-line-title-row strong{ color:#2F2A26; font-weight:600; } #memberCenterPage .member-dashboard-line-state{ color:#2F2A26; font-weight:600; } #memberCenterPage .member-dashboard-line-account span{ color:#3D3833; font-weight:500; } #memberCenterPage .member-dashboard-line-login-status small{ color:#5A534D; font-weight:500; } #memberCenterPage .member-dashboard-card small{ color:#5A534D; font-weight:400; } /* Profile: description, privacy and status cards */ #memberCenterPage .member-profile-page-head p{ color:#4A4640; font-size:15px; font-weight:400; line-height:1.7; } #memberCenterPage .member-profile-status-copy small{ color:#4A4640; font-size:13px; font-weight:500; } #memberCenterPage .member-profile-status-copy strong{ color:#171513; font-size:18px; font-weight:600; } #memberCenterPage .member-profile-status-copy strong.is-success{ color:#171513; } #memberCenterPage .member-profile-security-row{ color:#3D3833; font-weight:500; } #memberCenterPage .member-profile-security-row strong{ color:#3D3833; font-weight:600; } #memberCenterPage .member-profile-security-content p{ color:#5A534D; font-size:13px; font-weight:400; line-height:1.65; } #memberCenterPage .member-profile-password-date-row{ color:#4A4640; } #memberCenterPage .member-profile-password-date-row *{ color:#4A4640; } #memberCenterPage .member-profile-privacy-note{ color:#5A534D; font-size:14px; font-weight:400; } /* Orders list: filter labels and order metadata */ #memberCenterPage .order-status-tab{ color:#4A4640; font-weight:500; } #memberCenterPage .order-status-tab.active{ color:#fff; } #memberCenterPage .member-order-muted{ color:#5A534D; } #memberCenterPage .member-order-status{ color:#4A4640; font-weight:600; } #memberCenterPage .member-order-main>p{ color:#5A534D; } #memberCenterPage .member-order-meta-grid{ color:#3D3833; font-weight:500; } #memberCenterPage .member-order-meta-grid small, #memberCenterPage .member-order-total small{ color:#5A534D; font-size:12px; font-weight:500; } #memberCenterPage .member-order-total strong{ color:#2F2A26; } #memberCenterPage .member-order-detail-head span, #memberCenterPage .member-order-detail-head p{ color:#5A534D; } #memberCenterPage .member-order-detail-grid{ color:#3D3833; } #memberCenterPage .member-order-detail-grid small{ color:#5A534D; font-size:12px; font-weight:500; } #memberCenterPage .member-order-detail-grid strong{ color:#3D3833; font-weight:600; } #memberCenterPage .member-order-progress-v2 div{ color:#5A534D; } #memberCenterPage .member-order-progress-v2 .active{ color:#3D3833; } #memberCenterPage .member-order-item-v2 p, #memberCenterPage .member-order-item-v2 span{ color:#5A534D; } #memberCenterPage .member-order-summary-v2 div{ color:#3D3833; } #memberCenterPage .member-order-summary-v2 .total{ color:#2F2A26; } /* Password security page */ #memberCenterPage .member-password-page-header p{ color:#4A4640; font-size:14px; font-weight:400; line-height:1.7; } #memberCenterPage .member-password-card-head p{ color:#4A4640; font-size:13px; font-weight:400; line-height:1.65; } #memberCenterPage .member-password-label label{ color:#302B27; font-weight:600; } #memberCenterPage .member-password-label span{ color:#5A534D; font-size:12px; font-weight:400; line-height:1.65; } #memberCenterPage .member-password-strength em{ color:#5A534D; font-size:11px; font-weight:500; } #memberCenterPage .member-password-tip strong{ color:#302B27; font-weight:600; } #memberCenterPage .member-password-tip p{ color:#5A534D; font-size:12px; font-weight:400; line-height:1.65; } /* Order detail: make 訂單編號 and its metadata clearly readable */ #memberCenterPage .member-order-detail-head span, #memberCenterPage .member-order-detail-head p{ color:#3D3833; font-size:13px; font-weight:500; line-height:1.6; } #memberCenterPage .member-order-detail-head .order-number, #memberCenterPage .member-order-detail-head strong{ color:#171513; font-weight:600; } /* FINAL: exact label selector for「訂單編號」in rendered order-detail header */ #memberCenterPage .member-order-detail-head > div:first-child > .member-order-number-label{ display:inline-block !important; color:#1F1C19 !important; font-size:14px !important; font-weight:600 !important; line-height:1.6 !important; opacity:1 !important; visibility:visible !important; } /* FINAL BOLD FIX: exact rendered「訂單編號」label */ #memberCenterPage .member-order-detail-head > div:first-child > .member-order-number-label{ color:#111111 !important; font-size:15px !important; font-weight:700 !important; line-height:1.6 !important; opacity:1 !important; visibility:visible !important; } /* ================================================================ CHÆN Member Center — order list contrast refinement Scope: order list cards only ================================================================ */ /* Order list header label「訂單編號」 */ #memberCenterPage .member-order-card-head .member-order-muted{ color:#2F2A26 !important; font-size:13px !important; font-weight:600 !important; line-height:1.6 !important; opacity:1 !important; visibility:visible !important; } /* Keep the actual order number clearly readable */ #memberCenterPage .member-order-card-head strong{ color:#26221F !important; font-size:14px !important; font-weight:600 !important; } /* Stronger status pills: cancelled / completed */ #memberCenterPage .member-order-card-head .member-order-status.status-cancelled, #memberCenterPage .member-order-card-head .member-order-status.status-returned{ background:#F0D8D4 !important; color:#8F3F34 !important; font-weight:700 !important; border:1px solid #E4C3BD !important; } #memberCenterPage .member-order-card-head .member-order-status.status-completed, #memberCenterPage .member-order-card-head .member-order-status.status-delivered{ background:#D9ECDD !important; color:#28633F !important; font-weight:700 !important; border:1px solid #C0DCC8 !important; } /* CHÆN Member Center — typography proportion refinement */ #memberCenterPage .member-profile-page-head p{ font-size:14px; line-height:1.7; } #memberCenterPage .member-profile-status-copy small{ font-size:12px; font-weight:500; line-height:1.5; } #memberCenterPage .member-profile-status-copy strong{ font-size:16px; font-weight:600; line-height:1.45; } #memberCenterPage .member-profile-label, #memberCenterPage .member-profile-status-label, #memberCenterPage .member-profile-security-label{ font-size:13px; font-weight:500; } #memberCenterPage .member-profile-meta, #memberCenterPage .member-profile-security-note, #memberCenterPage .member-profile-helper, #memberCenterPage .member-profile-quick-link-label{ font-size:12px; line-height:1.6; } #memberCenterPage .member-profile-subtitle, #memberCenterPage .member-profile-description{ font-size:14px; line-height:1.7; } #memberCenterPage .member-profile-security-content p{ font-size:12px; line-height:1.65; } #memberCenterPage .member-profile-privacy-note{ font-size:13px; line-height:1.6; } #memberCenterPage .member-dashboard-tier{ font-size:11px; font-weight:600; } #memberCenterPage .member-dashboard-email, #memberCenterPage .member-dashboard-joined{ font-size:12px; line-height:1.6; } #memberCenterPage .member-dashboard-stat span{ font-size:12px; font-weight:500; line-height:1.5; } #memberCenterPage .member-dashboard-card small{ font-size:11px; line-height:1.55; } #memberCenterPage .member-dashboard-line span, #memberCenterPage .member-dashboard-line small{ font-size:12px; line-height:1.6; } #memberCenterPage .member-dashboard-line-account span{ font-size:12px; font-weight:600; } #memberCenterPage .member-dashboard-line-login-status small{ font-size:11px; font-weight:500; } @media (max-width:767px){ #memberCenterPage .member-profile-page-head p, #memberCenterPage .member-profile-subtitle, #memberCenterPage .member-profile-description{ font-size:14px; } #memberCenterPage .member-profile-status-copy strong{ font-size:16px; } } /* v13 — exact member order card product specification */ #memberCenterPage .member-order-card-v2 .member-order-main > p{ color:#2B2521 !important; -webkit-text-fill-color:#2B2521 !important; opacity:1 !important; font-size:13px !important; font-weight:600 !important; line-height:1.55 !important; } /* ================================================================ v16 — Order detail: exact 10 requested text items Scope: member order detail only. No layout / data / API / DB changes. ================================================================ */ /* 1-5. Order progress labels */ #memberCenterPage .member-order-progress-v2 > div > span{ color:#2B2521 !important; -webkit-text-fill-color:#2B2521 !important; opacity:1 !important; font-size:12px !important; font-weight:600 !important; text-shadow:none !important; } /* 6. Product specification: 印花 / 自由尺寸 */ #memberCenterPage .member-order-item-v2 > div > p{ color:#2B2521 !important; -webkit-text-fill-color:#2B2521 !important; opacity:1 !important; font-size:12px !important; font-weight:600 !important; text-shadow:none !important; } /* 7. Quantity: 1 件 */ #memberCenterPage .member-order-item-v2 > span{ color:#2B2521 !important; -webkit-text-fill-color:#2B2521 !important; opacity:1 !important; font-size:12px !important; font-weight:600 !important; text-shadow:none !important; } /* 8-10. Order summary */ #memberCenterPage .member-order-summary-v2 > div > span{ color:#3A342F !important; -webkit-text-fill-color:#3A342F !important; opacity:1 !important; font-size:13px !important; font-weight:600 !important; text-shadow:none !important; } #memberCenterPage .member-order-summary-v2 > div > b{ color:#2B2521 !important; -webkit-text-fill-color:#2B2521 !important; opacity:1 !important; font-weight:600 !important; text-shadow:none !important; } #memberCenterPage .member-order-summary-v2 > .total > span, #memberCenterPage .member-order-summary-v2 > .total > b{ color:#171513 !important; -webkit-text-fill-color:#171513 !important; opacity:1 !important; font-weight:700 !important; } /* ================================================================ CHÆN Member Center — Password page visual match Scoped only to #memberCenterPage .member-password-page. No password/API/backend logic changes. ================================================================ */ #memberCenterPage .member-password-page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 0 32px} #memberCenterPage .member-password-page-header-copy{min-width:0} #memberCenterPage .member-password-page-header h2{margin:0;font-size:24px;line-height:1.4;color:#171513;font-weight:700;letter-spacing:0} #memberCenterPage .member-password-page-header p{margin:6px 0 0;font-size:14px;line-height:1.7;color:#5f5954;font-weight:400} #memberCenterPage .member-password-back{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:184px;height:50px;padding:0 22px;border:1px solid #252321;border-radius:999px;background:#252321;color:#fff;font-size:15px;font-weight:600;line-height:1;cursor:pointer;flex:0 0 auto} #memberCenterPage .member-password-back svg{width:17px;height:17px;display:block} #memberCenterPage .member-password-back:hover{background:#171513;border-color:#171513} #memberCenterPage .member-password-page-card{padding:34px 108px 28px;border:1px solid #e6ded7;border-radius:14px;box-shadow:0 5px 20px rgba(72,58,49,.035)} #memberCenterPage .member-password-card-head{flex-direction:column;justify-content:center;gap:10px;text-align:center} #memberCenterPage .member-password-icon{width:78px;height:78px;flex:0 0 78px;background:#efe8df;color:#171513} #memberCenterPage .member-password-icon img{display:block;width:32px;height:auto;max-width:none;object-fit:contain} #memberCenterPage .member-password-card-head > div:last-child{display:flex;flex-direction:column;align-items:center} #memberCenterPage .member-password-card-head h3{font-size:17px;line-height:1.5;color:#4a433e;font-weight:500} #memberCenterPage .member-password-card-head p{margin:2px 0 0;font-size:13px;line-height:1.6;color:#8c827a} #memberCenterPage .member-password-divider{margin:28px 0 26px;background:#e8e1da} #memberCenterPage .member-password-form{gap:18px} #memberCenterPage .member-password-row{grid-template-columns:225px minmax(0,1fr);gap:27px;align-items:center;padding:0 14px} #memberCenterPage .member-password-label{gap:6px} #memberCenterPage .member-password-label label{font-size:15px;line-height:1.5;color:#24201d;font-weight:600} #memberCenterPage .member-password-label span{font-size:13px;line-height:1.6;color:#77706a} #memberCenterPage .member-password-field input{height:62px;padding:0 52px 0 20px;border:1px solid #ddd5ce;border-radius:12px;font-size:16px;color:#302a26} #memberCenterPage .member-password-field input::placeholder{color:#8b837d;opacity:1} #memberCenterPage .member-password-field input:focus{border-color:#b7a99d;box-shadow:0 0 0 3px rgba(183,169,157,.12)} #memberCenterPage .member-password-toggle{right:17px;width:26px;height:26px;color:#7e756e} #memberCenterPage .member-password-toggle svg{display:block;width:22px;height:22px} #memberCenterPage .member-password-strength{gap:5px;margin-top:8px} #memberCenterPage .member-password-strength span{width:47px;height:4px;background:#ddd6cf} #memberCenterPage .member-password-strength span.is-filled{background:#bda990} #memberCenterPage .member-password-strength em{font-size:12px;color:#746b65;margin-left:4px} #memberCenterPage .member-password-tip{margin:26px 5px 0;min-height:86px;padding:15px 18px;border-radius:10px;background:#f8f5f2;gap:15px} #memberCenterPage .member-password-tip-icon{width:52px;height:52px;flex-basis:52px;background:#eee7df;color:#201d1a} #memberCenterPage .member-password-tip-icon svg{width:28px;height:28px} #memberCenterPage .member-password-tip strong{font-size:15px;color:#24201d} #memberCenterPage .member-password-tip p{margin:4px 0 0;font-size:13px;line-height:1.6;color:#766e68} #memberCenterPage .member-password-footer{margin:24px 5px 0;padding-top:27px;border-top:1px solid #e8e1da} #memberCenterPage .member-password-cancel,#memberCenterPage .member-password-submit{min-width:130px;height:52px;padding:0 28px;border-radius:999px;font-size:15px} #memberCenterPage .member-password-cancel{border-color:#cfc5bd;background:#fff;color:#302b27} #memberCenterPage .member-password-submit{min-width:145px;border-color:#252321;background:#252321;color:#fff} @media(max-width:767px){ #memberCenterPage .member-password-page-header{flex-direction:column;gap:16px;margin-bottom:20px} #memberCenterPage .member-password-page-header h2{font-size:20px} #memberCenterPage .member-password-page-header p{font-size:13px} #memberCenterPage .member-password-back{width:100%;min-width:0;height:48px} #memberCenterPage .member-password-page-card{padding:24px 18px 22px} #memberCenterPage .member-password-icon{width:68px;height:68px;flex-basis:68px} #memberCenterPage .member-password-icon img{width:30px;height:auto} #memberCenterPage .member-password-row{grid-template-columns:1fr;gap:8px;padding:0} #memberCenterPage .member-password-field input{height:56px;font-size:15px} #memberCenterPage .member-password-strength span{flex:1;width:auto} #memberCenterPage .member-password-tip{margin-left:0;margin-right:0} #memberCenterPage .member-password-footer{margin-left:0;margin-right:0;gap:10px} #memberCenterPage .member-password-cancel,#memberCenterPage .member-password-submit{min-width:0;flex:1} } /* ================================================================ CHÆN Member Center — reference layout v2026-08-22 Fixed member overview + persistent left navigation + swappable right content. Scoped strictly to #memberCenterPage. ================================================================ */ #memberCenterPage .member-center-container{ max-width:1180px; margin:0 auto; padding:28px 24px 48px; } #memberCenterPage .member-center-dashboard-header{ margin:0 0 22px; } #memberCenterPage .member-center-dashboard-header .member-center-title{ font-size:28px; line-height:1.35; font-weight:600; color:#171513; } #memberCenterPage .member-center-subtitle{ display:block; margin:4px 0 0; } #memberCenterPage .member-reference-layout{ display:grid!important; grid-template-columns:224px minmax(0,1fr); gap:24px; align-items:start; } #memberCenterPage .member-reference-sidebar{ display:block!important; width:auto!important; min-width:0; height:max-content; min-height:0!important; position:sticky; top:18px; background:#fff; border:1px solid #ece6e0; border-radius:12px; box-shadow:0 3px 14px rgba(72,58,49,.025); overflow:hidden; padding:10px 0; min-height:700px; } #memberCenterPage .member-reference-nav{ display:flex; flex-direction:column; } #memberCenterPage .member-sidebar-item{ appearance:none; width:100%; min-height:56px; padding:0 22px; display:flex; align-items:center; gap:16px; border:0; border-radius:0; background:#fff; color:#26211e; text-align:left; font:inherit; font-size:14px; font-weight:500; cursor:pointer; transition:background .15s ease,color .15s ease; } #memberCenterPage .member-sidebar-item:hover{ background:#faf8f5; } #memberCenterPage .member-sidebar-item.active{ margin:0 6px; width:calc(100% - 12px); border-radius:9px; background:#f2ece6; color:#171513; font-weight:700; } #memberCenterPage .member-sidebar-icon{ width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; color:#815b36; } #memberCenterPage .member-sidebar-icon svg{ width:21px; height:21px; display:block; } #memberCenterPage .member-content{ width:100%!important; min-width:0; } #memberCenterPage .member-dashboard-overview{ display:grid; grid-template-columns:minmax(250px,1.55fr) repeat(3,minmax(72px,.58fr)) minmax(225px,1.22fr); align-items:stretch; margin:0 0 28px; background:#fff; border:1px solid #e8e1db; border-radius:12px; box-shadow:0 3px 14px rgba(72,58,49,.025); overflow:hidden; } #memberCenterPage .member-dashboard-user{ padding:25px 22px 25px 26px; gap:20px; } #memberCenterPage .member-dashboard-avatar{ width:92px; height:92px; } #memberCenterPage .member-dashboard-greeting{ font-size:18px; margin-bottom:8px; color:#171513; } #memberCenterPage .member-dashboard-tier{ font-size:11px; padding:4px 9px; border-radius:999px; background:#E8E1D7; margin-bottom:8px; } #memberCenterPage .member-dashboard-email, #memberCenterPage .member-dashboard-joined{ font-size:12px; color:#3f3934; } #memberCenterPage .member-dashboard-stat{ padding:18px 8px; gap:5px; } #memberCenterPage .member-dashboard-stat svg{ width:25px; height:25px; } #memberCenterPage .member-dashboard-stat strong{ font-size:21px; color:#171513; } #memberCenterPage .member-dashboard-stat span{ font-size:11px; color:#4d4742; } #memberCenterPage .member-dashboard-line{ padding:18px 18px; gap:12px; } #memberCenterPage .member-dashboard-line-logo{ width:38px; height:38px; } #memberCenterPage .member-dashboard-line-title-row{ display:flex; align-items:center; gap:9px; min-width:0; } #memberCenterPage .member-dashboard-line-title-row strong{ font-size:13px; white-space:nowrap; } #memberCenterPage .member-dashboard-line-state{ padding:4px 9px; border-radius:999px; background:#edf7f0; color:#2b8b59!important; font-size:11px; font-weight:700; white-space:nowrap; } #memberCenterPage .member-dashboard-line-detail{ margin-top:5px; } #memberCenterPage .member-dashboard-line-account span, #memberCenterPage .member-dashboard-line-login-status small{ color:#4d4742; font-size:11px; } #memberCenterPage .member-dashboard-home{ display:block; } #memberCenterPage .member-dashboard-section{ margin:0 0 28px; } #memberCenterPage .member-dashboard-section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 4px 12px; } #memberCenterPage .member-dashboard-section-head h2{ margin:0; font-size:20px; line-height:1.4; font-weight:700; color:#171513; } #memberCenterPage .member-dashboard-link{ border:0; background:transparent; color:#4d4742; padding:4px 0; font:inherit; font-size:13px; cursor:pointer; } #memberCenterPage .member-dashboard-link:hover{ color:#171513; } #memberCenterPage .member-dashboard-link span{ font-size:18px; margin-left:3px; } #memberCenterPage .member-recent-orders-card{ background:#fff; border:1px solid #e9e3de; border-radius:12px; overflow:hidden; box-shadow:0 3px 14px rgba(72,58,49,.02); } #memberCenterPage .member-recent-orders-header, #memberCenterPage .member-recent-order-row{ display:grid; grid-template-columns:minmax(250px,2fr) minmax(150px,1.1fr) minmax(105px,.8fr) minmax(90px,.7fr) minmax(90px,.65fr); align-items:center; column-gap:18px; } #memberCenterPage .member-recent-orders-header{ min-height:44px; padding:0 18px; border-bottom:1px solid #eee9e4; color:#5a544f; font-size:12px; font-weight:600; } #memberCenterPage .member-recent-order-row{ min-height:92px; padding:10px 18px; border-bottom:1px solid #f0ebe7; color:#302b27; } #memberCenterPage .member-recent-order-row:last-child{ border-bottom:0; } #memberCenterPage .member-recent-product{ display:flex; align-items:center; gap:12px; min-width:0; } #memberCenterPage .member-recent-product img{ width:56px; height:62px; border-radius:7px; object-fit:cover; background:#f5f2ee; flex:0 0 56px; } #memberCenterPage .member-recent-product div{ display:flex; flex-direction:column; gap:5px; min-width:0; } #memberCenterPage .member-recent-product strong{ font-size:13px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #memberCenterPage .member-recent-product span, #memberCenterPage .member-recent-order-number, #memberCenterPage .member-recent-order-date{ font-size:12px; color:#5d5752; } #memberCenterPage .member-recent-status{ display:inline-flex; align-items:center; justify-content:center; width:max-content; padding:6px 11px; border-radius:999px; background:#f3eee8; color:#6b625c; font-size:11px; font-weight:700; white-space:nowrap; } #memberCenterPage .member-recent-status.status-completed, #memberCenterPage .member-recent-status.status-delivered{ background:#eaf7ef; color:#27804d; } #memberCenterPage .member-recent-status.status-cancelled, #memberCenterPage .member-recent-status.status-returned{ background:#faece9; color:#a04f44; } #memberCenterPage .member-recent-status.status-paid, #memberCenterPage .member-recent-status.status-processing, #memberCenterPage .member-recent-status.status-confirmed{ background:#f8f0e3; color:#936a31; } #memberCenterPage .member-recent-detail-btn{ min-height:40px; padding:0 16px; border:1px solid #ded7d1; border-radius:8px; background:#fff; color:#26211e; font:inherit; font-size:12px; font-weight:600; cursor:pointer; } #memberCenterPage .member-recent-detail-btn:hover{ background:#faf8f5; } #memberCenterPage .member-dashboard-loading, #memberCenterPage .member-dashboard-empty{ min-height:90px; padding:30px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#77706a; font-size:13px; text-align:center; } #memberCenterPage .member-dashboard-empty strong{ color:#302b27; font-size:14px; } #memberCenterPage .member-dashboard-empty span{ color:#77706a; font-size:12px; } #memberCenterPage .member-recommendation-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; } #memberCenterPage .member-recommendation-card{ min-width:0; background:#fff; border:1px solid #e9e2dc; border-radius:10px; overflow:hidden; cursor:pointer; box-shadow:0 2px 10px rgba(72,58,49,.018); transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; } #memberCenterPage .member-recommendation-card:hover, #memberCenterPage .member-recommendation-card:focus-visible{ transform:translateY(-1px); border-color:#d8cfc7; box-shadow:0 5px 16px rgba(72,58,49,.06); outline:none; } #memberCenterPage .member-recommendation-image{ position:relative; aspect-ratio:1 / 1; overflow:hidden; background:#f5f2ee; } #memberCenterPage .member-recommendation-image>img{ width:100%; height:100%; display:block; object-fit:cover; } #memberCenterPage .member-recommendation-wish{ position:absolute; right:8px; bottom:8px; width:31px; height:31px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.9); border-radius:50%; background:rgba(255,255,255,.94); color:#80552f; cursor:pointer; } #memberCenterPage .member-recommendation-wish svg{ width:17px; height:17px; } #memberCenterPage .member-recommendation-wish.active{ background:#fff; color:#8a4e2d; } #memberCenterPage .member-recommendation-wish.active svg{ fill:currentColor; } #memberCenterPage .member-recommendation-info{ padding:10px 11px 12px; } #memberCenterPage .member-recommendation-info h3{ margin:0 0 8px; font-size:13px; line-height:1.45; font-weight:600; color:#25211e; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #memberCenterPage .member-recommendation-info strong{ font-size:13px; color:#171513; font-weight:700; } #memberCenterPage .member-tab{ display:none; } #memberCenterPage .member-tab.active{ display:block; } #memberCenterPage .member-tab-header h2{ font-size:24px; color:#171513; } #memberCenterPage .member-section-header h2{ margin:0; font-size:24px; line-height:1.4; font-weight:700; color:#171513; } #memberCenterPage .member-section-header p{ margin:6px 0 0; font-size:14px; line-height:1.7; font-weight:400; color:#5f5954; } #memberCenterPage .member-profile-subpage-grid{ display:block!important; } #memberCenterPage .member-profile-side-column, #memberCenterPage .member-profile-info-card{ display:none!important; } #memberCenterPage .member-profile-reference-card{ background:#fff; border:1px solid #e8e1db; border-radius:12px; box-shadow:0 3px 14px rgba(72,58,49,.025); padding:24px 28px 22px; } #memberCenterPage .member-profile-reference-head{ display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:24px; } #memberCenterPage .member-profile-reference-head h2, #memberCenterPage .member-coupon-head h2{ margin:0; color:#171513; font-size:24px; font-weight:700; line-height:1.4; } #memberCenterPage .member-profile-reference-head p, #memberCenterPage .member-coupon-head p{ margin:6px 0 0; color:#5f5954; font-size:14px; line-height:1.7; } #memberCenterPage .member-profile-reference-avatar-actions{ display:flex; align-items:center; gap:14px; flex:0 0 auto; } #memberCenterPage .member-profile-reference-avatar-tools{ display:flex; flex-direction:column; align-items:flex-start; gap:7px; } #memberCenterPage .member-profile-reference-avatar-tools small{ color:#77706a; font-size:11px; line-height:1.55; } #memberCenterPage .member-profile-avatar{ width:100px; height:100px; flex:0 0 100px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#f3e5e7; color:#806b58; } #memberCenterPage .member-profile-avatar img{ width:100%; height:100%; object-fit:cover; } #memberCenterPage .member-profile-avatar svg{ width:46px; height:46px; } #memberCenterPage .member-profile-avatar-btn{ min-height:38px; padding:0 15px; border:1px solid #d8d0ca; border-radius:7px; background:#fff; color:#27221f; font-size:12px; font-weight:600; cursor:pointer; } #memberCenterPage .member-profile-reference-form{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 28px; } #memberCenterPage .member-profile-reference-field{ min-width:0; } #memberCenterPage .member-profile-reference-field label{ display:block; margin:0 0 8px; color:#25211e; font-size:13px; font-weight:700; } #memberCenterPage .member-profile-reference-field input, #memberCenterPage .member-profile-account-input{ width:100%; } #memberCenterPage .member-profile-reference-field input{ min-height:44px; padding:0 14px; border:1px solid #ded8d2; border-radius:8px; background:#fff; color:#22201e; font:inherit; font-size:13px; box-sizing:border-box; } #memberCenterPage .member-profile-reference-field input:focus, #memberCenterPage .member-profile-account-input:focus-within{ border-color:#9c8c7f; outline:none; } #memberCenterPage .member-profile-reference-field input.input-disabled{ background:#faf9f8!important; color:#4b4641!important; } #memberCenterPage .member-profile-account-input{ min-height:44px; display:flex; align-items:stretch; border:1px solid #ded8d2; border-radius:8px; overflow:hidden; background:#faf9f8; } #memberCenterPage .member-profile-account-input input{ min-height:42px; flex:1; border:0!important; border-radius:0!important; background:transparent!important; } #memberCenterPage .member-profile-account-input button{ flex:0 0 auto; min-width:94px; border:0; border-left:1px solid #e4ded8; background:#fff; color:#292420; font-size:12px; font-weight:600; cursor:pointer; } #memberCenterPage .member-profile-account-input button:hover{ background:#f8f5f2; } #memberCenterPage .member-profile-reference-birthday{} #memberCenterPage .member-profile-birthday-selects{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; } #memberCenterPage .member-profile-birthday-selects select{ width:100%; min-height:44px; padding:0 12px; border:1px solid #ded8d2; border-radius:8px; background:#fff; color:#25211e; font:inherit; font-size:13px; } #memberCenterPage .member-profile-birthday-selects select:focus{ border-color:#9c8c7f; outline:none; } #memberCenterPage .member-profile-reference-top-divider{ margin:0 0 28px; } #memberCenterPage .member-profile-reference-divider{ height:1px; margin:22px 0 18px; background:#ece7e2; } #memberCenterPage .member-profile-reference-actions{ display:flex; justify-content:center; } #memberCenterPage .member-profile-reference-actions .member-profile-save-btn{ width:min(100%, 300px); min-width:280px; height:56px; min-height:56px; margin:0; padding:0 24px; border:1px solid #171513; border-radius:9999px; background:#171513; color:#fff; font-size:14px; line-height:1; font-weight:700; cursor:pointer; box-sizing:border-box; } #memberCenterPage .member-profile-reference-actions .member-profile-save-btn:hover{ background:#2a2724; } #memberCenterPage .member-profile-reference-actions .member-profile-save-btn:focus-visible{ outline:2px solid #8f7d6d; outline-offset:3px; } #memberCenterPage .member-profile-privacy-note{ margin-top:12px!important; padding:16px 18px!important; border:1px solid #e9e2dc!important; border-radius:10px!important; background:#fff!important; font-size:12px!important; color:#5f5954!important; } #memberCenterPage .member-profile-compatibility-state{ display:none!important; } #memberCenterPage .member-profile-email-verification{ display:none!important; } /* Coupons — reference image layout */ #memberCenterPage .member-coupon-page{ min-width:0; } #memberCenterPage .member-coupon-head{ margin:0 0 16px; } #memberCenterPage .member-coupon-add{ width:min(100%, 480px); min-height:64px; margin:0 auto; padding:10px 18px; display:grid; grid-template-columns:110px minmax(0,1fr) 92px; gap:12px; align-items:center; background:#fff; border:1px solid #e8e1db; border-radius:10px; box-shadow:0 3px 12px rgba(72,58,49,.02); } #memberCenterPage .member-coupon-add strong{ font-size:13px; color:#292420; text-align:center; } #memberCenterPage .member-coupon-add input{ min-height:40px; padding:0 13px; border:1px solid #ded8d2; border-radius:7px; background:#fff; font:inherit; font-size:12px; } #memberCenterPage .member-coupon-add button{ min-height:40px; border:1px solid #171513; border-radius:7px; background:#171513; color:#fff; font-size:12px; font-weight:700; cursor:pointer; } #memberCenterPage .member-coupon-tabs{ display:flex; align-items:center; gap:30px; margin:17px 0 10px; border-bottom:1px solid #e8e1db; } #memberCenterPage .member-coupon-filter{ position:relative; padding:0 0 10px; border:0; background:transparent; color:#5d5752; font:inherit; font-size:12px; font-weight:600; cursor:pointer; } #memberCenterPage .member-coupon-filter.active{ color:#171513; } #memberCenterPage .member-coupon-filter.active::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#a56d46; } #memberCenterPage .member-coupon-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } #memberCenterPage .member-coupon-card{ min-width:0; min-height:88px; display:grid; grid-template-columns:82px minmax(0,1fr) 74px; gap:12px; align-items:center; padding:9px 10px; background:#fff; border:1px solid #e9e2dc; border-radius:9px; box-shadow:0 2px 9px rgba(72,58,49,.018); } #memberCenterPage .member-coupon-card.used, #memberCenterPage .member-coupon-card.expired{ opacity:.74; } #memberCenterPage .member-coupon-visual{ height:70px; display:flex; align-items:center; justify-content:center; background:#faf7f3; border-radius:7px; } #memberCenterPage .member-coupon-bag-image{ width:64px; height:64px; display:block; object-fit:contain; object-position:center; } #memberCenterPage .member-coupon-body{ min-width:0; } #memberCenterPage .member-coupon-body h3{ margin:0 0 4px; font-size:13px; line-height:1.4; color:#26211e; } #memberCenterPage .member-coupon-body p{ margin:0 0 6px; color:#3f3934; font-size:11px; font-weight:700; line-height:1.45; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #memberCenterPage .member-coupon-meta{ display:flex; align-items:center; gap:8px; min-width:0; color:#3f3934; font-size:11px; font-weight:700; } #memberCenterPage .member-coupon-meta button{ border:0; background:transparent; color:#5d7590; padding:0; font:inherit; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; } #memberCenterPage .member-coupon-use{ min-height:36px; padding:0 7px; border:1px solid #cfc7c0; border-radius:7px; background:#fff; color:#2c2825; font-size:10px; font-weight:700; cursor:pointer; } #memberCenterPage .member-coupon-use:not(:disabled):hover{ background:#faf7f3; } #memberCenterPage .member-coupon-use:disabled{ cursor:not-allowed; opacity:.6; } #memberCenterPage .member-coupon-note{ margin:12px 2px 0; color:#403a35; font-size:12px; font-weight:700; line-height:1.7; } /* Keep legacy order UI intact while placing it into the right content column. */ #memberCenterPage #memberTabOrders .member-tab-header{ margin-bottom:14px; } /* Mobile */ @media(max-width:1020px){ #memberCenterPage .member-reference-layout{ grid-template-columns:190px minmax(0,1fr); gap:16px; } #memberCenterPage .member-dashboard-overview{ grid-template-columns:minmax(210px,1.4fr) repeat(3,minmax(60px,.55fr)); } #memberCenterPage .member-dashboard-line{ grid-column:1 / -1; border-left:0; border-top:1px solid #eee7df; } #memberCenterPage .member-recommendation-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } #memberCenterPage .member-recent-orders-header, #memberCenterPage .member-recent-order-row{ grid-template-columns:minmax(210px,1.8fr) minmax(125px,1fr) minmax(90px,.8fr) minmax(80px,.7fr) 82px; column-gap:10px; } } @media(max-width:767px){ #memberCenterPage .member-center-container{ padding:20px 14px 36px; } #memberCenterPage .member-reference-layout{ display:block!important; } #memberCenterPage .member-reference-sidebar{ position:static; min-height:0; margin-bottom:14px; padding:5px; overflow-x:auto; } #memberCenterPage .member-reference-nav{ flex-direction:row; min-width:max-content; } #memberCenterPage .member-sidebar-item, #memberCenterPage .member-sidebar-item.active{ width:auto; min-width:96px; min-height:44px; margin:0; padding:0 12px; border-radius:8px; justify-content:center; gap:6px; font-size:11px; } #memberCenterPage .member-sidebar-icon{ width:18px; height:18px; flex-basis:18px; } #memberCenterPage .member-sidebar-icon svg{ width:18px; height:18px; } #memberCenterPage .member-dashboard-overview{ grid-template-columns:1fr 1fr; margin-bottom:18px; } #memberCenterPage .member-dashboard-user{ grid-column:1 / -1; padding:18px; border-bottom:1px solid #eee7df; } #memberCenterPage .member-dashboard-avatar{ width:76px; height:76px; } #memberCenterPage .member-dashboard-avatar svg{ width:36px; height:36px; } #memberCenterPage .member-dashboard-stat{ min-height:78px; padding:12px 6px; } #memberCenterPage .member-dashboard-stat:nth-of-type(4){ border-left:0; } #memberCenterPage .member-dashboard-line{ grid-column:1 / -1; } #memberCenterPage .member-dashboard-section{ margin-bottom:20px; } #memberCenterPage .member-dashboard-section-head h2{ font-size:18px; } #memberCenterPage .member-dashboard-link{ font-size:11px; } #memberCenterPage .member-recent-orders-card{ overflow-x:auto; } #memberCenterPage .member-recent-orders-header, #memberCenterPage .member-recent-order-row{ min-width:690px; grid-template-columns:210px 130px 90px 80px 82px; } #memberCenterPage .member-recommendation-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } #memberCenterPage .member-recommendation-info{ padding:9px; } #memberCenterPage .member-recommendation-info h3{ font-size:12px; } #memberCenterPage .member-profile-reference-card{ padding:18px 16px 20px; } #memberCenterPage .member-profile-reference-head{ flex-direction:column; align-items:flex-start; gap:16px; } #memberCenterPage .member-profile-reference-avatar-actions{ width:100%; align-items:center; } #memberCenterPage .member-profile-reference-form{ grid-template-columns:1fr; gap:17px; } #memberCenterPage .member-profile-reference-head h2, #memberCenterPage .member-coupon-head h2{ font-size:20px; } #memberCenterPage .member-section-header h2{ font-size:20px; } #memberCenterPage .member-section-header p{ margin-top:5px; font-size:13px; } #memberCenterPage .member-profile-birthday-selects{ gap:8px; } #memberCenterPage .member-profile-reference-actions .member-profile-save-btn{ width:min(100%, 300px); min-width:0; height:52px; min-height:52px; } #memberCenterPage .member-coupon-add{ width:100%; margin:0; grid-template-columns:1fr; padding:12px; } #memberCenterPage .member-coupon-add strong{ text-align:left; } #memberCenterPage .member-coupon-grid{ grid-template-columns:1fr; } #memberCenterPage .member-coupon-tabs{ gap:18px; overflow-x:auto; } #memberCenterPage .member-coupon-filter{ white-space:nowrap; } #memberCenterPage .member-coupon-card{ grid-template-columns:72px minmax(0,1fr) 68px; gap:9px; } #memberCenterPage .member-coupon-visual{ height:68px; } } #memberCenterPage.member-center-dashboard-mode{background-image:none!important;background-color:transparent;} #memberCenterPage .member-password-back{display:none!important;} /* ================================================================ LINE member banner UI hotfix - Keep LINE logo perfectly circular - Reduce enabled-state pill so it fits the compact banner - Scoped to member center only; no behavior/API changes ================================================================ */ #memberCenterPage .member-dashboard-line{ min-width:0; min-height:0; padding:14px 14px; gap:10px; box-sizing:border-box; overflow:hidden; } #memberCenterPage .member-dashboard-line-logo{ width:34px!important; height:34px!important; min-width:34px!important; max-width:34px!important; min-height:34px!important; max-height:34px!important; flex:0 0 34px!important; aspect-ratio:1 / 1; border-radius:50%; box-sizing:border-box; display:flex; align-items:center; justify-content:center; font-size:9px; line-height:1; overflow:hidden; } #memberCenterPage .member-dashboard-line-copy{ min-width:0; max-width:100%; gap:5px; } #memberCenterPage .member-dashboard-line-title-row{ display:flex; align-items:center; justify-content:flex-start; gap:6px; flex-wrap:nowrap; min-width:0; width:100%; } #memberCenterPage .member-dashboard-line-title-row strong{ min-width:0; font-size:12px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #memberCenterPage .member-dashboard-line-state{ flex:0 0 auto; min-width:0!important; width:auto; height:26px; min-height:26px; max-height:26px; padding:0 9px!important; border-radius:999px; font-size:10px!important; line-height:1; white-space:nowrap; box-sizing:border-box; } #memberCenterPage .member-dashboard-line-detail{ min-width:0; margin-top:3px; gap:5px; } #memberCenterPage .member-dashboard-line-detail img{ width:15px; height:15px; flex:0 0 15px; } #memberCenterPage .member-dashboard-line-account span, #memberCenterPage .member-dashboard-line-login-status small{ min-width:0; font-size:10px; line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media(max-width:767px){ #memberCenterPage .member-dashboard-line{ padding:12px 14px; } #memberCenterPage .member-dashboard-line-logo{ width:34px!important; height:34px!important; min-width:34px!important; max-width:34px!important; flex-basis:34px!important; } #memberCenterPage .member-dashboard-line-state{ height:25px; min-height:25px; max-height:25px; padding:0 8px!important; font-size:10px!important; } } /* 2026-08-22 Header hierarchy correction — scoped to member center only. */ #memberCenterPage .member-center-dashboard-header{display:block!important;} #memberCenterPage .member-profile-reference-section{margin:0;} #memberCenterPage .member-profile-section-header{margin:0 28px 18px;} #memberCenterPage .member-profile-reference-head{margin-bottom:24px;} #memberCenterPage .member-profile-reference-head > .member-profile-reference-avatar-actions{margin-left:auto;} #memberCenterPage .member-recommendations-section .member-dashboard-section-head{align-items:flex-start;} #memberCenterPage .member-recommendations-section .member-dashboard-section-head .member-section-header > div{min-width:0;} #memberCenterPage .member-recommendations-section .member-section-header p{margin-top:6px;} @media(max-width:767px){ #memberCenterPage .member-profile-section-header{margin:0 16px 14px;} #memberCenterPage .member-profile-reference-head{margin-bottom:18px;} #memberCenterPage .member-recommendations-section .member-dashboard-section-head{align-items:flex-start;} } /* 2026-08-22 Member profile form alignment — scoped, typography unchanged. */ #memberCenterPage .member-profile-reference-avatar-actions{ display:flex; align-items:center; gap:14px; } #memberCenterPage .member-profile-reference-avatar-tools{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; } #memberCenterPage .member-profile-reference-avatar-divider{ width:1px; height:100px; flex:0 0 1px; background:#e4ded8; } #memberCenterPage .member-profile-reference-avatar-notes{ display:block; color:#77706a; font-size:11px; line-height:1.55; white-space:nowrap; } #memberCenterPage .member-profile-reference-avatar-tools .member-profile-avatar-remove-btn{ margin:0; } @media(max-width:767px){ #memberCenterPage .member-profile-reference-avatar-actions{ align-items:center; gap:10px; } #memberCenterPage .member-profile-reference-avatar-divider{ height:92px; } #memberCenterPage .member-profile-reference-avatar-notes{ white-space:normal; } } /* 2026-08-22 Member profile avatar reference correction — scoped to profile content only. */ #memberCenterPage .member-profile-reference-head > .member-profile-reference-avatar-actions{ margin-left:0; margin-right:auto; } #memberCenterPage .member-profile-reference-avatar-actions{ display:flex; align-items:center; justify-content:flex-start; gap:14px; } #memberCenterPage .member-profile-reference-avatar-tools{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:10px; } #memberCenterPage .member-profile-avatar{ width:116px; height:116px; flex:0 0 116px; } #memberCenterPage .member-profile-avatar-btn, #memberCenterPage .member-profile-avatar-remove-btn{ box-sizing:border-box; width:160px; min-height:54px; margin:0; padding:0 20px; border:1px solid #d8d0ca; border-radius:10px; background:#fff; color:#282522; display:flex; align-items:center; justify-content:center; gap:12px; font-size:14px; font-weight:600; line-height:1; text-decoration:none; cursor:pointer; } #memberCenterPage .member-profile-avatar-btn:hover, #memberCenterPage .member-profile-avatar-remove-btn:hover{ background:#faf7f3; color:#282522; text-decoration:none; } #memberCenterPage .member-profile-avatar-btn svg, #memberCenterPage .member-profile-avatar-remove-btn svg{ width:26px; height:26px; flex:0 0 26px; } #memberCenterPage .member-profile-reference-avatar-divider{ width:1px; height:116px; flex:0 0 1px; background:#e4ded8; } @media(max-width:767px){ #memberCenterPage .member-profile-reference-avatar-actions{ width:100%; gap:10px; } #memberCenterPage .member-profile-avatar{ width:82px; height:82px; flex-basis:82px; } #memberCenterPage .member-profile-avatar-btn, #memberCenterPage .member-profile-avatar-remove-btn{ width:auto; min-height:46px; padding:0 16px; font-size:13px; } #memberCenterPage .member-profile-avatar-btn svg, #memberCenterPage .member-profile-avatar-remove-btn svg{ width:21px; height:21px; flex-basis:21px; } #memberCenterPage .member-profile-reference-avatar-divider{ height:92px; } } /* ================================================================ 2026-08-22 Member Center — Page / Section Header normalization Scope: #memberCenterPage only. Purpose: keep the fixed Page Header and all Section Headers structurally and visually consistent across the seven member pages. No form/content typography or functional styles are changed. ================================================================ */ /* Fixed Page Header — same content and visual baseline for every tab. */ #memberCenterPage .member-center-dashboard-header{ display:block!important; margin:0 0 22px!important; } #memberCenterPage .member-center-dashboard-header .member-center-title{ margin:0!important; font-family:inherit!important; font-size:28px!important; line-height:1.35!important; font-weight:600!important; letter-spacing:0!important; color:#171513!important; } #memberCenterPage .member-center-dashboard-header .member-center-subtitle{ display:block!important; margin:6px 0 0!important; font-family:inherit!important; font-size:13px!important; line-height:1.7!important; font-weight:400!important; color:#4A4640!important; } /* Section Header — one shared baseline for every member page. */ #memberCenterPage .member-section-header{ margin:0 0 20px!important; } #memberCenterPage .member-section-header h2{ margin:0!important; font-family:inherit!important; font-size:24px!important; line-height:1.4!important; font-weight:700!important; letter-spacing:0!important; color:#171513!important; } #memberCenterPage .member-section-header p{ margin:6px 0 0!important; font-family:inherit!important; font-size:14px!important; line-height:1.7!important; font-weight:400!important; letter-spacing:0!important; color:#5f5954!important; } /* Remove page-specific header margin differences while preserving layout roles. */ #memberCenterPage .member-dashboard-section-head.member-section-header, #memberCenterPage .member-profile-section-header, #memberCenterPage .member-tab-header, #memberCenterPage .member-coupon-head, #memberCenterPage .member-password-page-header{ margin:0 0 20px!important; } /* The dashboard section header contains an action link; keep both aligned. */ #memberCenterPage .member-dashboard-section-head.member-section-header{ align-items:flex-start; } /* Profile Section Header stays outside the information form/card. */ #memberCenterPage .member-profile-section-header{ display:block; } /* Mobile keeps the same hierarchy, with only the existing responsive type scale. */ @media(max-width:767px){ #memberCenterPage .member-center-dashboard-header{ margin-bottom:20px!important; } #memberCenterPage .member-center-dashboard-header .member-center-title{ font-size:24px!important; } #memberCenterPage .member-center-dashboard-header .member-center-subtitle{ margin-top:5px!important; font-size:13px!important; } #memberCenterPage .member-section-header{ margin-bottom:18px!important; } #memberCenterPage .member-section-header h2{ font-size:20px!important; line-height:1.4!important; } #memberCenterPage .member-section-header p{ margin-top:5px!important; font-size:13px!important; line-height:1.7!important; } #memberCenterPage .member-dashboard-section-head.member-section-header, #memberCenterPage .member-profile-section-header, #memberCenterPage .member-tab-header, #memberCenterPage .member-coupon-head, #memberCenterPage .member-password-page-header{ margin-bottom:18px!important; } } /* Keep the fixed Page Header visible even if legacy subpage state classes are present. */ #memberCenterPage.member-profile-subpage-active .member-center-dashboard-header{ display:block!important; } /* Sidebar icon size hotfix: inline width/height on the existing img elements must be overridden. */ #memberCenterPage .member-sidebar-icon{ width:30px !important; height:30px !important; flex:0 0 30px !important; } #memberCenterPage .member-sidebar-icon img, #memberCenterPage .member-sidebar-icon svg{ width:30px !important; height:30px !important; max-width:30px !important; max-height:30px !important; object-fit:contain !important; display:block !important; } @media(max-width:767px){ #memberCenterPage .member-sidebar-icon{ width:30px !important; height:30px !important; flex-basis:30px !important; } #memberCenterPage .member-sidebar-icon img, #memberCenterPage .member-sidebar-icon svg{ width:30px !important; height:30px !important; max-width:30px !important; max-height:30px !important; } } /* 2026-08-22 Sidebar icon paint isolation — performance only. */ #memberCenterPage .member-sidebar-icon{ contain:layout paint; } /* CHÆN Member Center — recent-order readability and thumbnail refinement */ #memberCenterPage .member-recent-product span, #memberCenterPage .member-recent-order-number, #memberCenterPage .member-recent-order-date{ color:#403a35; font-weight:600; } #memberCenterPage .member-recent-product img{ object-fit:contain; object-position:center; background:#f7f4f0; } /* Order-detail status text uses the same semantic color family as its badge. */ #memberCenterPage .member-order-detail-head .member-order-status.status-completed, #memberCenterPage .member-order-detail-head .member-order-status.status-delivered{ color:#27804d !important; font-weight:700 !important; } #memberCenterPage .member-order-detail-head .member-order-status.status-cancelled, #memberCenterPage .member-order-detail-head .member-order-status.status-returned{ color:#a04f44 !important; font-weight:700 !important; } /* ================================================================ 2026-08-22 Member Center dashboard frame correction Scope: dashboard overview only. Reference: white outer frame + warm off-white page background + narrower member-info column + four evenly sized inner cards. ================================================================ */ #memberCenterPage .member-dashboard-overview{ box-sizing:border-box; grid-template-columns:320px repeat(4,minmax(0,1fr)) !important; gap:12px !important; padding:14px 16px !important; align-items:stretch !important; background:#fff !important; border:1px solid #e8e0d8 !important; border-radius:12px !important; overflow:hidden !important; box-shadow:none !important; } /* The member information area is intentionally narrower so the four statistic/LINE cards retain the reference proportions. */ #memberCenterPage .member-dashboard-user{ box-sizing:border-box; min-width:0 !important; padding:18px 18px 18px 10px !important; gap:18px !important; border-right:1px solid #eee7df !important; } /* Inner cards: white surface with a very subtle warm-gray edge, matching the reference rather than floating as separate widgets. */ #memberCenterPage .member-dashboard-stat, #memberCenterPage .member-dashboard-line{ box-sizing:border-box; min-width:0 !important; min-height:154px !important; border:1px solid #eee8e2 !important; border-radius:10px !important; background:#fff !important; border-left:1px solid #eee8e2 !important; box-shadow:none !important; } /* Statistics keep their existing typography and line icons. */ #memberCenterPage .member-dashboard-stat{ gap:5px !important; padding:18px 10px !important; justify-content:center !important; } #memberCenterPage .member-dashboard-stat svg{ width:28px !important; height:28px !important; margin-bottom:4px !important; color:#80603d !important; } #memberCenterPage .member-dashboard-stat strong{ font-size:20px !important; line-height:1.15 !important; font-weight:700 !important; color:#2f2925 !important; } #memberCenterPage .member-dashboard-stat span{ font-size:11px !important; line-height:1.5 !important; color:#7e746c !important; white-space:nowrap !important; } /* LINE card follows the same vertical hierarchy: icon -> enabled badge -> account line. */ #memberCenterPage .member-dashboard-line{ position:relative; flex-direction:column !important; justify-content:center !important; align-items:center !important; gap:7px !important; padding:16px 10px !important; } #memberCenterPage .member-dashboard-line-logo{ width:38px !important; height:38px !important; min-width:38px !important; min-height:38px !important; border-radius:50% !important; background:transparent !important; display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 38px !important; } #memberCenterPage .member-dashboard-line-logo img{ display:block !important; width:38px !important; height:38px !important; max-width:38px !important; max-height:38px !important; object-fit:contain !important; object-position:center !important; } #memberCenterPage .member-dashboard-line-copy{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; min-width:0 !important; width:100% !important; } #memberCenterPage .member-dashboard-line-title-row{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; } #memberCenterPage .member-dashboard-line-title-row strong{ display:none !important; } #memberCenterPage .member-dashboard-line-state{ display:inline-flex !important; align-items:center !important; justify-content:center !important; height:30px !important; min-height:30px !important; max-height:none !important; padding:0 10px !important; border-radius:5px !important; background:#e8f7ed !important; color:#347650 !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; white-space:nowrap !important; } #memberCenterPage .member-dashboard-line-state:not(.is-enabled){ background:#f4f0ec !important; color:#7e746c !important; } #memberCenterPage .member-dashboard-line-detail{ display:flex !important; align-items:center !important; justify-content:center !important; gap:5px !important; width:100% !important; min-width:0 !important; } #memberCenterPage .member-dashboard-line-account{ color:#5f5954 !important; } #memberCenterPage .member-dashboard-line-account img{ width:14px !important; height:14px !important; flex:0 0 14px !important; object-fit:contain !important; } #memberCenterPage .member-dashboard-line-account span{ font-size:11px !important; line-height:1.4 !important; color:#5f5954 !important; white-space:nowrap !important; overflow:visible !important; text-overflow:clip !important; } #memberCenterPage .member-dashboard-line-login-status{ display:none !important; } /* The outer page remains the warm off-white reference background. Do not alter any other member-center sections. */ #memberCenterPage .member-dashboard{ background:transparent !important; } /* Responsive: keep the reference proportions on medium screens, then stack only when the existing mobile breakpoint is reached. */ @media (max-width:1100px) and (min-width:768px){ #memberCenterPage .member-dashboard-overview{ grid-template-columns:300px repeat(4,minmax(0,1fr)) !important; } } @media(max-width:767px){ #memberCenterPage .member-dashboard-overview{ grid-template-columns:1fr 1fr !important; gap:10px !important; padding:10px !important; } #memberCenterPage .member-dashboard-user{ grid-column:1 / -1 !important; border-right:0 !important; border-bottom:1px solid #eee7df !important; padding:18px !important; } #memberCenterPage .member-dashboard-stat, #memberCenterPage .member-dashboard-line{ min-height:130px !important; } } /* 2026-08-22 Reference tone correction: cards use a very subtle warm off-white interior with a white edge, rather than a flat pure-white widget. */ #memberCenterPage .member-dashboard-stat, #memberCenterPage .member-dashboard-line{ background:#fbf9f7 !important; border-color:#ffffff !important; } #memberCenterPage .member-dashboard-overview{ background:#ffffff !important; border-color:#ffffff !important; box-shadow:0 0 0 1px #e8e0d8 !important; } /* ================================================================ 2026-08-22 Member dashboard final integrated card correction Scope: dashboard overview UI only. - Keep the member profile column compact. - Remove standalone divider lines between profile/cards. - Keep four cards fully independent. - Use warm off-white interiors with a clear 4px white frame. - Keep the LINE enabled badge compact and pill-shaped. No data/API/DB/LINE binding logic changes. ================================================================ */ #memberCenterPage .member-dashboard-overview{ grid-template-columns:240px repeat(4,minmax(0,1fr)) !important; gap:12px !important; align-items:stretch !important; background:#f7f4f0 !important; border:1px solid #ffffff !important; box-shadow:0 0 0 1px #e8e0d8 !important; } #memberCenterPage .member-dashboard-user{ position:relative !important; min-width:0 !important; border-right:0 !important; padding:18px 10px !important; } /* Four independent cards: no shared left/right borders or pseudo-lines. */ #memberCenterPage .member-dashboard-stat, #memberCenterPage .member-dashboard-line{ box-sizing:border-box !important; min-width:0 !important; min-height:154px !important; border:4px solid #ffffff !important; border-left:4px solid #ffffff !important; border-right:4px solid #ffffff !important; border-radius:10px !important; background:#fbf9f7 !important; box-shadow:none !important; } #memberCenterPage .member-dashboard-stat{ gap:5px !important; padding:18px 10px !important; justify-content:center !important; } #memberCenterPage .member-dashboard-line{ position:relative !important; flex-direction:column !important; justify-content:center !important; align-items:center !important; gap:7px !important; padding:16px 10px !important; } /* Remove any standalone divider/pseudo-element from the profile area. */ #memberCenterPage .member-dashboard-user::before, #memberCenterPage .member-dashboard-user::after, #memberCenterPage .member-dashboard-line::before, #memberCenterPage .member-dashboard-line::after{ content:none !important; display:none !important; } /* Keep the member tier visible; never hide or clip this label. */ #memberCenterPage .member-dashboard-user-copy{ min-width:0 !important; overflow:visible !important; } #memberCenterPage .member-dashboard-tier{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; white-space:nowrap !important; } /* Compact LINE status pill. */ #memberCenterPage .member-dashboard-line-state{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; height:22px !important; min-height:22px !important; max-height:22px !important; padding:0 9px !important; border-radius:9999px !important; background:#e8f7ed !important; color:#347650 !important; font-size:11px !important; font-weight:600 !important; line-height:1 !important; white-space:nowrap !important; } #memberCenterPage .member-dashboard-line-state:not(.is-enabled){ background:#f4f0ec !important; color:#7e746c !important; } @media (max-width:1100px) and (min-width:768px){ #memberCenterPage .member-dashboard-overview{ grid-template-columns:220px repeat(4,minmax(0,1fr)) !important; } } @media(max-width:767px){ #memberCenterPage .member-dashboard-user{ border-right:0 !important; } #memberCenterPage .member-dashboard-stat, #memberCenterPage .member-dashboard-line{ min-height:130px !important; } } /* 2026-08-22 Member dashboard text visibility + 6px card frame correction. Scope: dashboard overview only. Keep member profile text visible without changing its typography or content, and strengthen the existing card frame. */ #memberCenterPage .member-dashboard-user-copy{ min-width:0 !important; overflow:visible !important; position:relative !important; z-index:2 !important; } #memberCenterPage .member-dashboard-tier{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; white-space:nowrap !important; overflow:visible !important; } #memberCenterPage .member-dashboard-email, #memberCenterPage .member-dashboard-joined{ overflow:visible !important; text-overflow:clip !important; white-space:nowrap !important; position:relative !important; z-index:2 !important; } #memberCenterPage .member-dashboard-stat, #memberCenterPage .member-dashboard-line{ border:6px solid #ffffff !important; border-left:6px solid #ffffff !important; border-right:6px solid #ffffff !important; background:#fbf9f7 !important; } /* 2026-08-22 FINAL MEMBER DASHBOARD CARD / ICON CORRECTION Scope: member dashboard overview only. - Warm off-white card interior + clearly visible 8px white frame. - Use the three supplied dashboard icon assets in the requested order. - Keep profile copy visible within the existing compact profile column. - No API/DB/LINE binding logic changes. */ #memberCenterPage .member-dashboard-overview{ grid-template-columns:240px repeat(4,minmax(0,1fr)) !important; } #memberCenterPage .member-dashboard-user{ gap:10px !important; padding:18px 10px !important; } #memberCenterPage .member-dashboard-avatar{ width:78px !important; height:78px !important; flex:0 0 78px !important; } #memberCenterPage .member-dashboard-avatar svg{ width:40px !important; height:40px !important; } #memberCenterPage .member-dashboard-user-copy{ flex:1 1 auto !important; width:auto !important; max-width:none !important; min-width:0 !important; overflow:visible !important; } #memberCenterPage .member-dashboard-tier{ display:inline-flex !important; visibility:visible !important; opacity:1 !important; white-space:nowrap !important; overflow:visible !important; } #memberCenterPage .member-dashboard-email, #memberCenterPage .member-dashboard-joined{ overflow:visible !important; text-overflow:clip !important; white-space:nowrap !important; max-width:none !important; } #memberCenterPage .member-dashboard-stat, #memberCenterPage .member-dashboard-line{ border:8px solid #ffffff !important; border-left:8px solid #ffffff !important; border-right:8px solid #ffffff !important; background:#fbf9f7 !important; } #memberCenterPage .member-dashboard-stat-icon{ display:block !important; width:32px !important; height:32px !important; object-fit:contain !important; object-position:center !important; margin:0 0 4px !important; flex:0 0 32px !important; } /* Member contact-email verification / change-email UI */ #memberCenterPage .member-profile-field-label-row{ display:flex; align-items:center; gap:8px; min-width:0; margin:0 0 8px; } #memberCenterPage .member-profile-field-label-row label{ margin:0; } #memberCenterPage .member-profile-email-badge{ display:inline-flex; align-items:center; justify-content:center; min-height:22px; padding:0 9px; border-radius:9999px; font-size:11px; line-height:1; font-weight:700; white-space:nowrap; } #memberCenterPage .member-profile-email-badge.is-verified{ background:#f9e8e6; color:#b33f38; } #memberCenterPage .member-profile-email-badge.is-pending{ background:#fff3df; color:#98641d; } #memberCenterPage .member-profile-email-badge.is-unverified{ background:#f1eeeb; color:#746b64; } #memberCenterPage .member-profile-contact-email-input{ overflow:hidden; } #memberCenterPage .member-profile-contact-email-input input{ min-width:0; } #memberCenterPage .member-profile-contact-email-input button{ min-width:96px; } #memberCenterPage .member-profile-email-hint{ display:block; margin-top:7px; color:#8b827b; font-size:11px; line-height:1.6; } #memberCenterPage .member-profile-email-message{ min-height:18px; margin-top:3px; color:#6f665f; font-size:11px; line-height:1.5; } @media(max-width:767px){ #memberCenterPage .member-profile-field-label-row{ align-items:center; } #memberCenterPage .member-profile-contact-email-input button{ min-width:92px; } } /* 2026-08-23 Member profile avatar/email emphasis patch — scoped to member center. */ #memberCenterPage .member-profile-avatar-action-icon{ width:22px; height:22px; flex:0 0 22px; display:block; object-fit:contain; } #memberCenterPage .member-profile-reference-avatar-notes{ color:#4f4944; font-size:13px; font-weight:700; line-height:1.6; } #memberCenterPage .member-profile-contact-email-field .member-profile-field-label-row label{ color:#1f1c1a; font-size:14px; font-weight:800; } #memberCenterPage .member-profile-email-hint, #memberCenterPage .member-profile-email-message{ color:#4f4944; font-size:13px; font-weight:700; line-height:1.65; } @media(max-width:767px){ #memberCenterPage .member-profile-avatar-action-icon{ width:22px; height:22px; flex-basis:22px; } #memberCenterPage .member-profile-reference-avatar-notes{ font-size:12px; } #memberCenterPage .member-profile-contact-email-field .member-profile-field-label-row label{ font-size:14px; } } /* 2026-08-24 — Member order detail icons. Scope: order detail only. */ #memberCenterPage .member-order-detail-number-wrap{ min-width:0; } #memberCenterPage .member-order-detail-number-row{ display:flex; align-items:center; gap:7px; min-width:0; } #memberCenterPage .member-order-detail-number-row h2{ min-width:0; overflow-wrap:anywhere; } #memberCenterPage .member-order-detail-copy-btn{ width:24px; height:24px; flex:0 0 24px; } #memberCenterPage .member-order-detail-grid-item-with-icon{ display:grid; grid-template-columns:18px minmax(0,1fr); grid-template-rows:auto auto; column-gap:7px; align-items:center; } #memberCenterPage .member-order-detail-grid-icon{ width:18px; height:18px; grid-column:1; grid-row:1 / span 2; display:block; object-fit:contain; } #memberCenterPage .member-order-detail-grid-item-with-icon small{ grid-column:2; grid-row:1; } #memberCenterPage .member-order-detail-grid-item-with-icon strong{ grid-column:2; grid-row:2; } @media(max-width:767px){ #memberCenterPage .member-order-detail-number-row{ gap:5px; } #memberCenterPage .member-order-detail-copy-btn{ width:22px; height:22px; flex-basis:22px; } #memberCenterPage .member-order-detail-grid-icon{ width:16px; height:16px; } #memberCenterPage .member-order-detail-grid-item-with-icon{ grid-template-columns:16px minmax(0,1fr); column-gap:6px; } } /* 2026-08-24 — Member order list metadata icons. Scope: order list only. */ #memberCenterPage .member-order-number-wrap{ display:flex; align-items:center; gap:10px; min-width:0; } #memberCenterPage .member-order-number-wrap strong{ min-width:0; overflow-wrap:anywhere; } #memberCenterPage .member-order-copy-btn{ width:24px; height:24px; flex:0 0 24px; display:inline-flex; align-items:center; justify-content:center; margin:0; padding:0; border:0; background:transparent; border-radius:6px; cursor:pointer; opacity:.88; transition:background-color .15s ease,opacity .15s ease,transform .15s ease; } #memberCenterPage .member-order-copy-btn:hover{ background:#f4eee9; opacity:1; } #memberCenterPage .member-order-copy-btn:active{ transform:scale(.94); } #memberCenterPage .member-order-copy-btn:focus-visible{ outline:2px solid #b99b86; outline-offset:2px; } #memberCenterPage .member-order-copy-btn img{ width:18px; height:18px; display:block; object-fit:contain; } #memberCenterPage .member-order-copy-btn.is-copied{ background:#eee7e1; } #memberCenterPage .member-order-meta-item{ display:flex; flex-direction:row; align-items:flex-start; gap:6px; min-width:0; } #memberCenterPage .member-order-meta-icon{ width:18px; height:18px; flex:0 0 18px; display:block; object-fit:contain; margin-top:1px; } #memberCenterPage .member-order-meta-copy{ min-width:0; display:flex; flex-direction:column; gap:3px; line-height:1.45; } #memberCenterPage .member-order-meta-copy small{ white-space:nowrap; } #memberCenterPage .member-order-meta-copy strong{ color:#2F2A26; font-size:17px; line-height:1.3; } #memberCenterPage .member-order-total{ justify-content:flex-start; align-items:flex-start; text-align:left; } #memberCenterPage .member-order-total .member-order-meta-copy{ text-align:left; } @media(max-width:767px){ #memberCenterPage .member-order-number-wrap{ gap:7px; flex-wrap:wrap; } #memberCenterPage .member-order-copy-btn{ width:24px; height:24px; flex-basis:24px; } #memberCenterPage .member-order-meta-grid{ gap:10px 8px !important; } #memberCenterPage .member-order-meta-icon{ width:16px; height:16px; flex-basis:16px; } #memberCenterPage .member-order-meta-copy small{ font-size:11px !important; } #memberCenterPage .member-order-meta-copy{ font-size:12px; } #memberCenterPage .member-order-total{ flex-direction:row !important; align-items:flex-start !important; } } /* 2026-08-24 — Member order icon placement patch. Scope: desktop order list/detail only. */ #memberCenterPage .order-card-number-with-copy{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; } #memberCenterPage .order-card-number-with-copy .member-order-copy-btn{ width:22px; height:22px; flex-basis:22px; } #memberCenterPage .order-card-number-with-copy .member-order-copy-btn img{ width:18px; height:18px; } #memberCenterPage .order-card-meta-icons{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; width:100%; margin-top:2px; } #memberCenterPage .order-card-meta-icons .order-card-meta-item{ min-width:0; align-items:flex-start; } #memberCenterPage .order-card-meta-icons .order-card-meta-icon{ width:18px; height:18px; flex:0 0 18px; margin-top:1px; } #memberCenterPage .order-card-meta-icons .order-card-meta-copy small{ color:#5A534D; font-size:11px; font-weight:500; } #memberCenterPage .order-card-meta-icons .order-card-meta-copy strong{ color:#2F2A26; font-size:13px; line-height:1.35; font-weight:600; overflow-wrap:anywhere; } #memberCenterPage .order-card-meta-icons .order-card-meta-amount strong{ white-space:nowrap; } #memberCenterPage .member-order-detail-v2{ background:#fff; border:1px solid #eae3dc; border-radius:15px; padding:24px; margin-bottom:20px; } #memberCenterPage .member-order-detail-number-wrap{ min-width:0; } #memberCenterPage .member-order-detail-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:18px; border-bottom:1px solid #eee8e2; } #memberCenterPage .member-order-number-label{ display:block; color:#111 !important; font-size:15px !important; font-weight:700 !important; line-height:1.6 !important; } #memberCenterPage .member-order-detail-head .member-order-detail-number-row h2{ margin:4px 0 0; color:#171513; font-size:22px; line-height:1.3; } #memberCenterPage .member-order-detail-head > .member-order-status{ flex:0 0 auto; } #memberCenterPage .member-order-detail-progress{ padding:2px 0 0; } #memberCenterPage .member-order-detail-v2 .member-order-progress-v2{ margin:22px 0 24px; } #memberCenterPage .member-order-detail-grid-icons{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; } #memberCenterPage .member-order-detail-grid-icons .member-order-detail-grid-item-with-icon{ min-width:0; min-height:72px; padding:0 20px; border-left:1px solid #e7e0d9; align-content:start; } #memberCenterPage .member-order-detail-grid-icons .member-order-detail-grid-item-with-icon:first-child{ border-left:0; padding-left:0; } #memberCenterPage .member-order-detail-grid-icons .member-order-detail-grid-item-with-icon:last-child{ padding-right:0; } #memberCenterPage .member-order-detail-grid-icons .member-order-detail-grid-icon{ width:18px; height:18px; flex:0 0 18px; object-fit:contain; display:block; transform:scale(1.02); transform-origin:center; } #memberCenterPage .member-order-detail-grid-icons small{ color:#5A534D; font-size:12px; font-weight:500; line-height:1.45; white-space:nowrap; } #memberCenterPage .member-order-detail-grid-icons strong{ color:#2F2A26; font-size:14px; font-weight:600; line-height:1.45; overflow-wrap:break-word; word-break:keep-all; min-width:0; } #memberCenterPage .member-order-detail-grid-icons .member-order-detail-grid-item-with-icon:first-child .member-order-detail-grid-icon{ transform:scale(1.18); } @media(max-width:1100px) and (min-width:768px){ #memberCenterPage .order-card-meta-icons{ grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:10px; } } @media(max-width:767px){ #memberCenterPage .member-order-detail-v2{ padding:16px !important; } #memberCenterPage .member-order-detail-head .member-order-detail-number-row h2{ font-size:18px; } #memberCenterPage .member-order-detail-grid-icons{ gap:12px 0; } #memberCenterPage .member-order-detail-grid-icons .member-order-detail-grid-item-with-icon{ min-height:64px; padding:0 10px; border-left:0; } #memberCenterPage .member-order-detail-grid-icons .member-order-detail-grid-item-with-icon:nth-child(odd){ padding-left:0; } #memberCenterPage .member-order-detail-grid-icons .member-order-detail-grid-item-with-icon:nth-child(even){ padding-right:0; } } /* ================================================================ 2026-08-24 — Order detail desktop browsing ratio refinement Scope: order detail only. Keep the member center base width unchanged. ================================================================ */ @media(min-width:1021px){ #memberCenterPage.member-order-detail-active .member-center-container{ max-width:1210px; } #memberCenterPage.member-order-detail-active #memberTabOrderDetail .member-order-detail-v2{ padding:24px; } #memberCenterPage.member-order-detail-active #memberTabOrderDetail .member-order-detail-progress{ margin-top:24px; } #memberCenterPage.member-order-detail-active #memberTabOrderDetail .member-order-delivery-progress{ margin-top:24px; padding:16px; } #memberCenterPage.member-order-detail-active #memberTabOrderDetail .member-order-info-grid{ margin-top:18px; } #memberCenterPage.member-order-detail-active #memberTabOrderDetail .member-order-info-card{ padding:16px 18px; } #memberCenterPage.member-order-detail-active #memberTabOrderDetail .member-order-items-v2{ margin-top:20px; } } /* ================================================================ 2026-08-24 — Order detail UI v1.0 Scope: member order detail only. UI-only: no payment/order/logistics/API/database changes. ================================================================ */ #memberCenterPage #memberTabOrderDetail .member-order-detail-v2{ background:#fff; border:1px solid #E8E5E0; border-radius:14px; padding:28px; margin:0 0 20px; color:#333333; box-shadow:none; } #memberCenterPage #memberTabOrderDetail .member-order-detail-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:0; border:0; } #memberCenterPage #memberTabOrderDetail .member-order-detail-number-wrap{min-width:0} #memberCenterPage #memberTabOrderDetail .member-order-number-label{ display:block; margin:0 0 4px; color:#333333 !important; font-size:16px !important; font-weight:600 !important; line-height:1.4 !important; } #memberCenterPage #memberTabOrderDetail .member-order-detail-number-row{ display:flex; align-items:center; gap:10px; min-width:0; } #memberCenterPage #memberTabOrderDetail .member-order-detail-head .member-order-detail-number-row h2{ margin:0; min-width:0; color:#171513; font-size:16px; font-weight:600; line-height:1.35; overflow-wrap:anywhere; } #memberCenterPage #memberTabOrderDetail .member-order-detail-copy-btn{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; margin:0; border:0; background:transparent; color:#A98967; cursor:pointer; flex:0 0 28px; } #memberCenterPage #memberTabOrderDetail .member-order-detail-copy-btn img{ width:18px; height:18px; object-fit:contain; display:block; } #memberCenterPage #memberTabOrderDetail .member-order-detail-head > .member-order-status{ flex:0 0 auto; margin-top:8px; padding:7px 14px; border-radius:999px; background:#EAF5EE; color:#2E7D32; font-size:14px; font-weight:600; line-height:1.4; } /* 2026-08-24 Order detail status badge semantic colors. Scope: top-right status badge in 查看詳情. */ #memberCenterPage #memberTabOrderDetail .member-order-detail-head > .member-order-status.status-cancelled, #memberCenterPage #memberTabOrderDetail .member-order-detail-head > .member-order-status.status-returned{ background:#F8ECE9 !important; color:#A15346 !important; border:1px solid #E9CCC6; } #memberCenterPage #memberTabOrderDetail .member-order-detail-head > .member-order-status.status-completed, #memberCenterPage #memberTabOrderDetail .member-order-detail-head > .member-order-status.status-delivered{ background:#E9F6EE !important; color:#347650 !important; border:1px solid #CBE3D4; } #memberCenterPage #memberTabOrderDetail .member-order-detail-progress{ margin-top:28px; } #memberCenterPage #memberTabOrderDetail .member-order-progress-v2{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0; padding:0 2%; position:relative; } #memberCenterPage #memberTabOrderDetail .member-order-progress-v2::before{ content:""; position:absolute; left:10%; right:10%; top:28px; height:2px; background:#E8E5E0; z-index:0; } #memberCenterPage #memberTabOrderDetail .member-order-progress-v2 > div{ position:relative; z-index:1; min-width:0; text-align:center; color:#999999; font-size:14px; font-weight:500; line-height:1.5; } #memberCenterPage #memberTabOrderDetail .member-order-progress-v2 > div.active{color:#333333} #memberCenterPage #memberTabOrderDetail .member-order-progress-icon{ display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin:0 auto 9px; border-radius:50%; background:#F1ECE6; color:#A98967; font-style:normal; } #memberCenterPage #memberTabOrderDetail .member-order-progress-v2 > div.active .member-order-progress-icon{ background:#A98967; color:#FFFFFF; opacity:1; } #memberCenterPage #memberTabOrderDetail .member-order-progress-icon svg, #memberCenterPage #memberTabOrderDetail .member-order-section-icon svg{ width:26px; height:26px; display:block; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } #memberCenterPage #memberTabOrderDetail .member-order-progress-icon .member-order-detail-icon{ width:40px; height:40px; display:block; object-fit:contain; } #memberCenterPage #memberTabOrderDetail .member-order-progress-time{ display:flex; flex-direction:column; margin-top:4px; color:#666666; font-size:14px; font-weight:400; line-height:1.5; } #memberCenterPage #memberTabOrderDetail .member-order-progress-v2 > div.active .member-order-progress-time{color:#666666} #memberCenterPage #memberTabOrderDetail .member-order-delivery-progress{ margin-top:28px; padding:18px; border:1px solid #E8E5E0; border-radius:12px; background:#fff; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-progress h3 .member-order-section-icon{ width:32px; height:32px; flex-basis:32px; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-progress h3 .member-order-section-icon .member-order-detail-icon{ width:32px; height:32px; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-progress h3{ display:flex; align-items:center; gap:9px; margin:0 0 14px; color:#333333; font-size:16px; font-weight:600; line-height:1.5; } #memberCenterPage #memberTabOrderDetail .member-order-section-icon{ display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; color:#A98967; flex:0 0 24px; } #memberCenterPage #memberTabOrderDetail .member-order-section-icon svg{width:24px;height:24px} #memberCenterPage #memberTabOrderDetail .member-order-section-icon .member-order-detail-icon{width:24px;height:24px;display:block;object-fit:contain} #memberCenterPage #memberTabOrderDetail .member-order-section-icon--shipping-info{ width:28px; height:28px; flex-basis:28px; } #memberCenterPage #memberTabOrderDetail .member-order-section-icon--shipping-info .member-order-detail-icon{ width:28px; height:28px; color:inherit; opacity:1; } #memberCenterPage #memberTabOrderDetail .member-order-progress-icon .member-order-detail-icon{ color:inherit; opacity:1; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-track{ display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr); align-items:center; min-width:0; padding:17px 18px; border:1px solid #E8E5E0; border-radius:10px; background:#fff; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-node{ min-width:0; text-align:center; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-node small, #memberCenterPage #memberTabOrderDetail .member-order-delivery-tracking span, #memberCenterPage #memberTabOrderDetail .member-order-info-field small{ display:block; color:#666666; font-size:14px; font-weight:500; line-height:1.5; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-node strong{ display:block; margin-top:6px; color:#333333; font-size:16px; font-weight:600; line-height:1.5; overflow-wrap:anywhere; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-node span{ display:block; margin-top:3px; color:#666666; font-size:14px; font-weight:400; line-height:1.5; overflow-wrap:anywhere; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-arrow{ display:flex; align-items:center; justify-content:center; color:#A98967; font-size:27px; font-weight:400; line-height:1; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-tracking{ display:flex; align-items:center; gap:18px; margin-top:13px; padding:0 4px; } #memberCenterPage #memberTabOrderDetail .member-order-delivery-tracking strong{ color:#333333; font-size:14px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; } #memberCenterPage #memberTabOrderDetail .member-order-info-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; margin-top:22px; border:1px solid #E8E5E0; border-radius:12px; overflow:hidden; background:#fff; } #memberCenterPage #memberTabOrderDetail .member-order-info-card{ min-width:0; padding:18px 20px; border-left:1px solid #E8E5E0; } #memberCenterPage #memberTabOrderDetail .member-order-info-card:first-child{border-left:0} #memberCenterPage #memberTabOrderDetail .member-order-info-title{ display:flex; align-items:center; gap:8px; min-height:30px; margin-bottom:15px; } #memberCenterPage #memberTabOrderDetail .member-order-info-title h3{ margin:0; color:#333333; font-size:16px; font-weight:600; line-height:1.5; } #memberCenterPage #memberTabOrderDetail .member-order-info-field{ min-width:0; padding:0 0 12px; margin:0 0 12px; border-bottom:1px solid #E8E5E0; } #memberCenterPage #memberTabOrderDetail .member-order-info-field:last-child{ padding-bottom:0; margin-bottom:0; border-bottom:0; } #memberCenterPage #memberTabOrderDetail .member-order-info-field strong{ display:block; margin-top:4px; color:#333333; font-size:14px; font-weight:500; line-height:1.55; overflow-wrap:anywhere; word-break:break-word; } #memberCenterPage #memberTabOrderDetail .member-order-info-field strong.is-success{color:#2E7D32} #memberCenterPage #memberTabOrderDetail .member-order-items-v2{ margin-top:24px; } #memberCenterPage #memberTabOrderDetail .member-order-items-v2 h3{ margin:0 0 10px; color:#333333; font-size:16px; font-weight:600; line-height:1.5; } #memberCenterPage #memberTabOrderDetail .member-order-item-v2{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid #E8E5E0; } #memberCenterPage #memberTabOrderDetail .member-order-item-v2 img{ width:64px; height:80px; object-fit:cover; border-radius:8px; background:#FAF8F4; } #memberCenterPage #memberTabOrderDetail .member-order-item-copy{min-width:0} #memberCenterPage #memberTabOrderDetail .member-order-item-copy strong{ display:block; color:#333333; font-size:16px; font-weight:500; line-height:1.5; overflow-wrap:anywhere; } #memberCenterPage #memberTabOrderDetail .member-order-item-copy p{ margin:4px 0 0; color:#666666; font-size:14px; font-weight:400; line-height:1.5; overflow-wrap:anywhere; } #memberCenterPage #memberTabOrderDetail .member-order-item-purchase{ display:flex; align-items:center; gap:28px; min-width:145px; justify-content:flex-end; } #memberCenterPage #memberTabOrderDetail .member-order-item-purchase span{ color:#333333; font-size:14px; font-weight:500; white-space:nowrap; } #memberCenterPage #memberTabOrderDetail .member-order-item-purchase b{ color:#333333; font-size:16px; font-weight:600; white-space:nowrap; } #memberCenterPage #memberTabOrderDetail .member-order-summary-v2{ width:min(370px,100%); max-width:none; margin:18px 0 0 auto; } #memberCenterPage #memberTabOrderDetail .member-order-summary-v2 > div{ display:flex; justify-content:space-between; align-items:center; gap:20px; padding:6px 0; color:#333333; font-size:14px; font-weight:400; line-height:1.5; } #memberCenterPage #memberTabOrderDetail .member-order-summary-v2 > div > span{color:#666666;font-size:14px;font-weight:400} #memberCenterPage #memberTabOrderDetail .member-order-summary-v2 > div > b{color:#333333;font-size:14px;font-weight:500;white-space:nowrap} #memberCenterPage #memberTabOrderDetail .member-order-summary-v2 > .total{ margin-top:7px; padding-top:12px; border-top:1px solid #E8E5E0; } #memberCenterPage #memberTabOrderDetail .member-order-summary-v2 > .total > span, #memberCenterPage #memberTabOrderDetail .member-order-summary-v2 > .total > b{ color:#A98967; font-size:22px; font-weight:700; } #memberCenterPage #memberTabOrderDetail .member-order-summary-v2 > .total > span{color:#333333;font-size:16px} #memberCenterPage #memberTabOrderDetail .member-order-detail-actions{ display:flex; justify-content:flex-end; align-items:center; margin-top:22px; padding-top:16px; border-top:1px solid #E8E5E0; } #memberCenterPage #memberTabOrderDetail .member-order-detail-actions .member-order-action.secondary{ min-width:128px; height:40px; padding:0 18px; border:1px solid #A98967; border-radius:8px; background:#FAF8F4; color:#A98967; font-size:14px; font-weight:500; line-height:1; } #memberCenterPage #memberTabOrderDetail .member-order-detail-actions .member-order-action.secondary:hover{ background:#fff; } @media(max-width:1100px) and (min-width:768px){ #memberCenterPage #memberTabOrderDetail .member-order-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #memberCenterPage #memberTabOrderDetail .member-order-info-card:nth-child(3){border-left:0;border-top:1px solid #E8E5E0} #memberCenterPage #memberTabOrderDetail .member-order-info-card:nth-child(4){border-top:1px solid #E8E5E0} #memberCenterPage #memberTabOrderDetail .member-order-item-purchase{gap:18px;min-width:125px} } @media(max-width:767px){ #memberCenterPage #memberTabOrderDetail .member-order-detail-v2{padding:18px 16px} #memberCenterPage #memberTabOrderDetail .member-order-detail-head{gap:12px} #memberCenterPage #memberTabOrderDetail .member-order-number-label{font-size:15px !important} #memberCenterPage #memberTabOrderDetail .member-order-detail-head .member-order-detail-number-row h2{font-size:15px} #memberCenterPage #memberTabOrderDetail .member-order-detail-head > .member-order-status{margin-top:4px;padding:6px 10px;font-size:13px} #memberCenterPage #memberTabOrderDetail .member-order-detail-progress{margin-top:24px;overflow:hidden} #memberCenterPage #memberTabOrderDetail .member-order-progress-v2{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;padding:0} #memberCenterPage #memberTabOrderDetail .member-order-progress-v2::before{display:none} #memberCenterPage #memberTabOrderDetail .member-order-progress-v2 > div{font-size:12px} #memberCenterPage #memberTabOrderDetail .member-order-progress-icon{width:48px;height:48px;margin-bottom:8px} #memberCenterPage #memberTabOrderDetail .member-order-progress-icon svg{width:23px;height:23px} #memberCenterPage #memberTabOrderDetail .member-order-progress-time{font-size:13px} #memberCenterPage #memberTabOrderDetail .member-order-delivery-progress{padding:16px;margin-top:22px} #memberCenterPage #memberTabOrderDetail .member-order-delivery-track{grid-template-columns:minmax(0,1fr);gap:0;padding:14px} #memberCenterPage #memberTabOrderDetail .member-order-delivery-node{padding:4px 0 10px;text-align:left} #memberCenterPage #memberTabOrderDetail .member-order-delivery-arrow{height:22px;transform:rotate(90deg);font-size:24px} #memberCenterPage #memberTabOrderDetail .member-order-delivery-tracking{display:block;margin-top:12px;padding:0} #memberCenterPage #memberTabOrderDetail .member-order-delivery-tracking strong{display:block;margin-top:3px} #memberCenterPage #memberTabOrderDetail .member-order-info-grid{grid-template-columns:1fr;margin-top:18px} #memberCenterPage #memberTabOrderDetail .member-order-info-card, #memberCenterPage #memberTabOrderDetail .member-order-info-card:nth-child(3), #memberCenterPage #memberTabOrderDetail .member-order-info-card:nth-child(4){border-left:0;border-top:1px solid #E8E5E0} #memberCenterPage #memberTabOrderDetail .member-order-info-card:first-child{border-top:0} #memberCenterPage #memberTabOrderDetail .member-order-info-card{padding:16px} #memberCenterPage #memberTabOrderDetail .member-order-item-v2{grid-template-columns:56px minmax(0,1fr) auto;gap:10px;padding:12px 0} #memberCenterPage #memberTabOrderDetail .member-order-item-v2 img{width:56px;height:70px} #memberCenterPage #memberTabOrderDetail .member-order-item-copy strong{font-size:16px} #memberCenterPage #memberTabOrderDetail .member-order-item-copy p{font-size:14px} #memberCenterPage #memberTabOrderDetail .member-order-item-purchase{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;min-width:58px} #memberCenterPage #memberTabOrderDetail .member-order-item-purchase span{font-size:14px} #memberCenterPage #memberTabOrderDetail .member-order-item-purchase b{font-size:15px} #memberCenterPage #memberTabOrderDetail .member-order-summary-v2{width:100%;margin-top:16px} #memberCenterPage #memberTabOrderDetail .member-order-summary-v2 > .total > b{font-size:22px} #memberCenterPage #memberTabOrderDetail .member-order-detail-actions{margin-top:18px;padding-top:14px} #memberCenterPage #memberTabOrderDetail .member-order-detail-actions .member-order-action.secondary{width:auto;min-width:128px} } /* ================================================================ 2026-08-24 — Mobile member center proportion + icon recovery Scope: member center mobile dashboard only. - Prevent dashboard stat cards from becoming uneven/narrow. - Convert recent orders from a wide table into compact phone rows. - Reduce recommendation card visual height on phones. - Sidebar icons use absolute cache-busted URLs in index.html. No API/DB/order/payment logic changes. ================================================================ */ @media(max-width:767px){ #memberCenterPage .member-center-container{ padding:18px 12px 32px !important; } /* Compact horizontal member navigation: readable without squeezing the page. */ #memberCenterPage .member-reference-sidebar{ margin:0 0 12px !important; padding:4px !important; border-radius:10px !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch; } #memberCenterPage .member-reference-nav{ gap:2px !important; } #memberCenterPage .member-sidebar-item, #memberCenterPage .member-sidebar-item.active{ min-width:82px !important; min-height:42px !important; padding:0 9px !important; gap:5px !important; border-radius:8px !important; font-size:11px !important; white-space:nowrap !important; } #memberCenterPage .member-sidebar-icon, #memberCenterPage .member-sidebar-icon img, #memberCenterPage .member-sidebar-icon svg{ width:22px !important; height:22px !important; max-width:22px !important; max-height:22px !important; flex-basis:22px !important; } /* Dashboard: equal-width statistic cards on all phone widths. */ #memberCenterPage .member-dashboard-overview{ display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:8px !important; padding:8px !important; margin-bottom:16px !important; } #memberCenterPage .member-dashboard-user{ grid-column:1 / -1 !important; min-width:0 !important; padding:16px 12px !important; gap:12px !important; } #memberCenterPage .member-dashboard-avatar{ width:64px !important; height:64px !important; flex-basis:64px !important; } #memberCenterPage .member-dashboard-avatar svg{ width:32px !important; height:32px !important; } #memberCenterPage .member-dashboard-greeting{ font-size:25px !important; line-height:1.25 !important; } #memberCenterPage .member-dashboard-email, #memberCenterPage .member-dashboard-joined{ font-size:12px !important; line-height:1.45 !important; } #memberCenterPage .member-dashboard-stat{ grid-column:auto !important; width:100% !important; min-width:0 !important; min-height:112px !important; height:auto !important; padding:12px 8px !important; border-width:4px !important; } #memberCenterPage .member-dashboard-stat:nth-of-type(2), #memberCenterPage .member-dashboard-stat:nth-of-type(3), #memberCenterPage .member-dashboard-stat:nth-of-type(4){ grid-column:auto !important; } #memberCenterPage .member-dashboard-stat-icon{ width:26px !important; height:26px !important; object-fit:contain !important; } #memberCenterPage .member-dashboard-stat strong{ font-size:20px !important; } #memberCenterPage .member-dashboard-stat span{ font-size:11px !important; } #memberCenterPage .member-dashboard-line{ grid-column:1 / -1 !important; min-height:108px !important; height:auto !important; padding:12px 10px !important; border-width:4px !important; } /* Recent orders: fit the phone viewport instead of forcing a 690px table. */ #memberCenterPage .member-recent-orders-card{ overflow:hidden !important; border-radius:12px !important; } #memberCenterPage .member-recent-orders-header{ display:none !important; } #memberCenterPage .member-recent-order-row{ display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas: "product product" "number date" "status action" !important; gap:8px 10px !important; min-width:0 !important; min-height:0 !important; padding:12px !important; } #memberCenterPage .member-recent-product{grid-area:product;gap:10px !important;} #memberCenterPage .member-recent-product img{ width:48px !important; height:54px !important; flex-basis:48px !important; border-radius:6px !important; } #memberCenterPage .member-recent-product strong{font-size:13px !important;} #memberCenterPage .member-recent-product span{font-size:11px !important;} #memberCenterPage .member-recent-order-number{ grid-area:number; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; align-self:center; font-size:11px !important; } #memberCenterPage .member-recent-order-date{ grid-area:date; align-self:center; font-size:11px !important; white-space:nowrap; } #memberCenterPage .member-recent-order-row > div:nth-child(4){grid-area:status;min-width:0;} #memberCenterPage .member-recent-status{font-size:10px !important;padding:5px 8px !important;} #memberCenterPage .member-recent-order-row > div:nth-child(5){grid-area:action;justify-self:end;} #memberCenterPage .member-recent-detail-btn{ min-height:34px !important; padding:0 10px !important; font-size:11px !important; white-space:nowrap !important; } /* Recommendations: keep two cards, but reduce the image/card height. */ #memberCenterPage .member-recommendation-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; } #memberCenterPage .member-recommendation-image{ aspect-ratio:1 / .82 !important; } #memberCenterPage .member-recommendation-info{ padding:8px 9px 10px !important; } #memberCenterPage .member-recommendation-info h3{ margin-bottom:5px !important; font-size:12px !important; line-height:1.35 !important; } #memberCenterPage .member-recommendation-info strong{font-size:13px !important;} #memberCenterPage .member-recommendation-wish{ width:28px !important; height:28px !important; right:6px !important; bottom:6px !important; } #memberCenterPage .member-recommendation-wish svg{width:15px !important;height:15px !important;} } /* 2026-08-24 mobile member dashboard correction v3 — scoped to member center only. */ #memberCenterPage .member-recommendation-info h3{ margin-bottom:0 !important; } @media(max-width:767px){ /* Dashboard statistics: exactly 2 × 2 cards on mobile. */ #memberCenterPage .member-dashboard-overview{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } #memberCenterPage .member-dashboard-user{ grid-column:1 / -1 !important; } #memberCenterPage .member-dashboard-stat{ grid-column:auto !important; grid-row:auto !important; } #memberCenterPage .member-dashboard-line{ grid-column:auto !important; grid-row:auto !important; min-width:0 !important; } /* Recommendation: keep all 5 API items in one horizontal row. */ #memberCenterPage .member-recommendation-grid{ display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:minmax(148px,42vw) !important; gap:9px !important; overflow-x:auto !important; overflow-y:hidden !important; padding:0 1px 4px !important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } #memberCenterPage .member-recommendation-grid::-webkit-scrollbar{display:none;} #memberCenterPage .member-recommendation-card{ min-width:0 !important; scroll-snap-align:start; } #memberCenterPage .member-recommendation-info h3{ margin:0 !important; padding:0 !important; } #memberCenterPage .member-recommendation-info strong{ display:block !important; margin:0 !important; padding:0 !important; } } /* ================================================================ 2026-08-24 — Mobile member-center navigation layout v5 Dashboard: hide the desktop sidebar and show the five-item quick-function list below the 2×2 statistics. Subpages: show only a compact top-left「‹ 會員中心」back link. Desktop navigation/layout remains unchanged. ================================================================ */ #memberCenterPage .member-mobile-quick{ display:none; } #memberCenterPage .member-subpage-back-btn{ display:none; } @media(max-width:767px){ /* Dashboard no longer repeats「會員首頁」as a horizontal navigation bar. */ #memberCenterPage .member-reference-sidebar{ display:none !important; } #memberCenterPage .member-mobile-quick{ display:flex; flex-direction:column; width:100%; margin:0 0 20px; border:1px solid #e8e1db; border-radius:11px; background:#fff; overflow:hidden; box-shadow:0 3px 14px rgba(72,58,49,.025); } #memberCenterPage .member-mobile-quick-item{ appearance:none; width:100%; min-height:54px; padding:0 16px; display:grid; grid-template-columns:28px minmax(0,1fr) 18px; align-items:center; gap:10px; border:0; border-bottom:1px solid #eee8e3; background:#fff; color:#26211e; text-align:left; font:inherit; font-size:13px; font-weight:600; cursor:pointer; } #memberCenterPage .member-mobile-quick-item:last-child{ border-bottom:0; } #memberCenterPage .member-mobile-quick-item:active{ background:#faf8f5; } #memberCenterPage .member-mobile-quick-item .member-sidebar-icon{ width:24px; height:24px; flex:0 0 24px; display:inline-flex; align-items:center; justify-content:center; } #memberCenterPage .member-mobile-quick-item .member-sidebar-icon img{ width:24px !important; height:24px !important; object-fit:contain; display:block; } #memberCenterPage .member-mobile-quick-arrow{ color:#815b36; font-size:21px; font-weight:400; line-height:1; text-align:right; } /* Dashboard itself is already「會員中心」. */ #memberCenterPage.member-center-dashboard-mode .member-mobile-quick{ display:flex; } #memberCenterPage.member-center-subpage-mode .member-mobile-quick{ display:none; } /* Match the reference: subpages do not repeat the dashboard header. */ #memberCenterPage.member-center-subpage-mode .member-center-dashboard-header{ display:none; } /* Subpage back link: compact, top-left, brown outline style. */ #memberCenterPage.member-center-subpage-mode .member-subpage-back-btn{ display:inline-flex; align-items:center; justify-content:flex-start; gap:4px; width:max-content; min-height:28px; margin:0 0 8px; padding:0; border:0; background:transparent; color:#815b36; font-size:12px; font-weight:600; line-height:1.4; cursor:pointer; } #memberCenterPage .member-subpage-back-btn > span:first-child{ font-size:22px; font-weight:300; line-height:18px; } /* Orders / reviews / coupons / profile: back link first, title centered. */ #memberCenterPage.member-center-subpage-mode .member-subpage-header{ display:flex; flex-direction:column; align-items:stretch; gap:0; margin:0 0 18px; } #memberCenterPage.member-center-subpage-mode .member-subpage-header > div{ width:100%; text-align:center; } #memberCenterPage.member-center-subpage-mode .member-subpage-header h2{ width:100%; margin:0; text-align:center; font-size:22px; line-height:1.35; color:#171513; } #memberCenterPage.member-center-subpage-mode .member-subpage-header p{ display:none; } /* Password already had a back control; put it in the same position. */ #memberCenterPage.member-center-subpage-mode .member-password-page-header{ display:flex; flex-direction:column; align-items:stretch; gap:0; margin-bottom:18px; } #memberCenterPage.member-center-subpage-mode .member-password-page-header .member-subpage-back-btn{ order:-1; align-self:flex-start; } #memberCenterPage.member-center-subpage-mode .member-password-page-header-copy{ width:100%; text-align:center; } #memberCenterPage.member-center-subpage-mode .member-password-page-header h2{ margin:0; font-size:22px; line-height:1.35; } #memberCenterPage.member-center-subpage-mode .member-password-page-header p{ display:none; } } /* ================================================================ 2026-08-24 — Mobile member recommendation card proportion v6 Scope: member-center recommendation carousel on phones only. - Keep the existing 5-item horizontal carousel. - Keep roughly two full cards plus a partial third card visible. - Change the product-image area from the previous wide/flat ratio to a 4:5 portrait ratio for a more natural fashion-card shape. - Preserve the existing product name/price spacing correction. Desktop recommendation layout is unchanged. ================================================================ */ @media(max-width:767px){ #memberCenterPage .member-recommendation-grid{ display:grid !important; grid-auto-flow:column !important; grid-template-columns:none !important; grid-auto-columns:minmax(148px,42vw) !important; gap:9px !important; overflow-x:auto !important; overflow-y:hidden !important; padding:0 1px 5px !important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none; } #memberCenterPage .member-recommendation-grid::-webkit-scrollbar{ display:none; } #memberCenterPage .member-recommendation-card{ min-width:0 !important; scroll-snap-align:start; } /* Portrait fashion-product proportion: width : height = 4 : 5. */ #memberCenterPage .member-recommendation-image{ aspect-ratio:4 / 5 !important; height:auto !important; min-height:0 !important; } #memberCenterPage .member-recommendation-info{ padding:9px 10px 11px !important; } #memberCenterPage .member-recommendation-info h3{ margin:0 !important; padding:0 !important; line-height:1.4 !important; } #memberCenterPage .member-recommendation-info strong{ display:block !important; margin:0 !important; padding:0 !important; line-height:1.4 !important; } } /* 2026-08-24 — Order detail number inline layout fix Scope: member order detail header only. UI-only: keep order/payment/logistics/data logic unchanged. Goal: render「訂單編號 + 訂單號碼 + 複製」on one compact row. */ #memberCenterPage #memberTabOrderDetail .member-order-detail-number-wrap{ display:flex; align-items:center; gap:8px; min-width:0; } #memberCenterPage #memberTabOrderDetail .member-order-number-label{ display:inline-block !important; flex:0 0 auto; margin:0 !important; color:#333333 !important; font-size:14px !important; font-weight:600 !important; line-height:1.4 !important; white-space:nowrap; } #memberCenterPage #memberTabOrderDetail .member-order-detail-number-row{ display:flex; align-items:center; gap:8px; min-width:0; flex:0 1 auto; } #memberCenterPage #memberTabOrderDetail .member-order-detail-head .member-order-detail-number-row h2{ margin:0 !important; min-width:0; color:#171513; font-size:14px !important; font-weight:600 !important; line-height:1.4 !important; overflow-wrap:anywhere; } #memberCenterPage #memberTabOrderDetail .member-order-detail-copy-btn{ flex:0 0 22px; width:22px; height:22px; padding:0; margin:0; } #memberCenterPage #memberTabOrderDetail .member-order-detail-copy-btn img{ width:18px; height:18px; display:block; object-fit:contain; } @media(max-width:767px){ #memberCenterPage #memberTabOrderDetail .member-order-detail-number-wrap{ gap:7px; } #memberCenterPage #memberTabOrderDetail .member-order-number-label{ font-size:14px !important; } #memberCenterPage #memberTabOrderDetail .member-order-detail-number-row{ gap:7px; } #memberCenterPage #memberTabOrderDetail .member-order-detail-head .member-order-detail-number-row h2{ font-size:14px !important; } #memberCenterPage #memberTabOrderDetail .member-order-detail-copy-btn{ flex-basis:22px; width:22px; height:22px; } } /* 2026-08-25 Member profile avatar camera upload — minimal scoped UI adjustment. */ #memberCenterPage .member-profile-reference-avatar-actions{ display:flex; align-items:center; justify-content:flex-start; gap:18px; } #memberCenterPage .member-profile-reference-avatar-main{ display:flex; align-items:center; gap:18px; flex:0 0 auto; } #memberCenterPage .member-profile-avatar-wrap{ position:relative; width:116px; height:116px; flex:0 0 116px; } #memberCenterPage .member-profile-avatar-wrap .member-profile-avatar{ width:116px; height:116px; flex:0 0 116px; } #memberCenterPage .member-profile-avatar-camera-btn{ position:absolute; top:-10px; right:-10px; width:52px; height:52px; padding:0; border:0; border-radius:50%; background:#fff; color:#171513; display:flex; align-items:center; justify-content:center; box-shadow:0 3px 12px rgba(72,58,49,.16); cursor:pointer; z-index:2; } #memberCenterPage .member-profile-avatar-camera-btn:hover{ background:#faf7f3; } #memberCenterPage .member-profile-avatar-camera-btn:disabled{ opacity:.55; cursor:not-allowed; } #memberCenterPage .member-profile-avatar-camera-btn svg{ width:30px; height:30px; display:block; } #memberCenterPage .member-profile-reference-avatar-notes{ margin:0; color:#77706a; font-size:13px; line-height:1.7; white-space:nowrap; } @media(max-width:767px){ #memberCenterPage .member-profile-reference-avatar-actions{ gap:10px; } #memberCenterPage .member-profile-reference-avatar-main{ gap:10px; } #memberCenterPage .member-profile-avatar-wrap{ width:82px; height:82px; flex-basis:82px; } #memberCenterPage .member-profile-avatar-wrap .member-profile-avatar{ width:82px; height:82px; flex-basis:82px; } #memberCenterPage .member-profile-avatar-camera-btn{ top:-7px; right:-7px; width:42px; height:42px; } #memberCenterPage .member-profile-avatar-camera-btn svg{ width:24px; height:24px; } #memberCenterPage .member-profile-reference-avatar-notes{ white-space:normal; font-size:11px; line-height:1.55; } } /* ================================================================ 2026-08-25 — Desktop member subpage back-button visibility fix Scope: Member Center subpages only. Desktop: hide「會員中心」return buttons on Profile / Orders / Coupons / Reviews / Password pages. Mobile: keep the existing「會員中心」return button unchanged. No navigation, data, payment, logistics, or backend logic changes. ================================================================ */ @media(min-width:768px){ #memberCenterPage.member-center-subpage-mode .member-subpage-back-btn{ display:none !important; } } /* Password visibility icon normalization patch */ #memberCenterPage .member-password-toggle svg{width:20px;height:20px;display:block;} /* ================================================================ Member profile — notification settings refinement UI-only. No API / database / profile-field behavior changes. ================================================================ */ #memberCenterPage .member-profile-notification-settings{ width:100%; min-width:0; } #memberCenterPage .member-profile-notification-settings h3{ margin:0 0 14px; color:#161412; font-size:18px; line-height:1.45; font-weight:700; } #memberCenterPage .member-profile-notification-card{ width:100%; min-width:0; min-height:86px; display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:16px; padding:16px 18px; box-sizing:border-box; border:1px solid #e8e1db; border-radius:10px; background:#fff; box-shadow:none; } #memberCenterPage .member-profile-notification-icon{ width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f7eceb; color:#7d6b60; } #memberCenterPage .member-profile-notification-icon svg{ width:27px; height:27px; } #memberCenterPage .member-profile-notification-copy{ min-width:0; display:flex; flex-direction:column; gap:5px; } #memberCenterPage .member-profile-notification-copy strong{ margin:0; color:#1d1a18; font-size:15px; line-height:1.45; font-weight:700; } #memberCenterPage .member-profile-notification-copy span{ color:#38322e; font-size:13px; line-height:1.55; } #memberCenterPage .member-profile-notification-control{ min-width:112px; display:inline-flex; align-items:center; justify-content:flex-end; gap:12px; } #memberCenterPage .member-profile-notification-toggle{ position:relative; display:inline-flex; width:54px; height:32px; flex:0 0 54px; cursor:pointer; } #memberCenterPage .member-profile-notification-toggle input{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } #memberCenterPage .member-profile-notification-toggle-track{ width:54px; height:32px; display:block; box-sizing:border-box; border-radius:9999px; background:#d8d3ce; transition:background .18s ease; } #memberCenterPage .member-profile-notification-toggle-thumb{ position:absolute; top:4px; left:4px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.18); transition:transform .18s ease; } #memberCenterPage .member-profile-notification-toggle input:checked + .member-profile-notification-toggle-track{ background:#171513; } #memberCenterPage .member-profile-notification-toggle input:checked + .member-profile-notification-toggle-track .member-profile-notification-toggle-thumb{ transform:translateX(22px); } #memberCenterPage .member-profile-notification-toggle input:focus-visible + .member-profile-notification-toggle-track{ outline:2px solid #9c8c7f; outline-offset:3px; } #memberCenterPage .member-profile-notification-status{ min-width:48px; color:#25211e; font-size:13px; line-height:1.4; font-weight:700; white-space:nowrap; } #memberCenterPage .member-profile-notification-status.is-off{ color:#6a625c; font-weight:600; } #memberCenterPage .member-profile-notification-hint{ margin:12px 0 0; display:flex; align-items:center; gap:8px; color:#49423d; font-size:12px; line-height:1.55; } #memberCenterPage .member-profile-notification-hint-icon{ width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; color:#77706a; flex:0 0 18px; } #memberCenterPage .member-profile-notification-hint-icon svg{ width:18px; height:18px; } #memberCenterPage .member-profile-reference-actions{ margin-top:24px; } @media(max-width:767px){ #memberCenterPage .member-profile-notification-settings h3{ font-size:18px; margin-bottom:12px; } #memberCenterPage .member-profile-notification-card{ grid-template-columns:48px minmax(0,1fr); gap:12px; padding:14px; } #memberCenterPage .member-profile-notification-icon{ width:48px; height:48px; } #memberCenterPage .member-profile-notification-control{ grid-column:2; min-width:0; justify-content:flex-start; gap:10px; margin-top:2px; } #memberCenterPage .member-profile-notification-copy strong{ font-size:14px; } #memberCenterPage .member-profile-notification-copy span{ font-size:12px; } #memberCenterPage .member-profile-notification-hint{ align-items:flex-start; font-size:12px; } #memberCenterPage .member-profile-reference-actions{ margin-top:22px; } } /* ================================================================ Member Center — return shipment standalone subpage Keeps the existing member-center shell and sidebar; replaces only the old return-shipment modal entry point. ================================================================ */ #memberCenterPage .member-return-shipment-page{ width:100%; max-width:760px; margin:0 auto; color:#3f3732; } #memberCenterPage .member-return-shipment-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin:0 0 18px; padding:6px 0 18px; border-bottom:1px solid #eee8e2; } #memberCenterPage .member-return-shipment-back{ display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border:1px solid #ded5cd; border-radius:999px; background:#fff; color:#5b4c42; font-size:12px; cursor:pointer; white-space:nowrap; } #memberCenterPage .member-return-shipment-back span:first-child{ font-size:22px; line-height:1; margin-top:-2px; } #memberCenterPage .member-return-shipment-heading{ flex:1; order:-1; } #memberCenterPage .member-return-shipment-heading .return-shipment-modal-kicker{ margin-bottom:5px; } #memberCenterPage .member-return-shipment-heading h2{ margin:0 0 6px; font-size:24px; line-height:1.35; color:#302a26; } #memberCenterPage .member-return-shipment-heading p{ margin:0; color:#948980; font-size:13px; line-height:1.7; } #memberCenterPage .member-return-shipment-order-card{ display:grid; grid-template-columns:1fr 1fr; gap:12px 24px; margin-bottom:14px; padding:16px 18px; border:1px solid #e8e0d9; border-radius:14px; background:#fff; } #memberCenterPage .member-return-shipment-order-card div{ display:flex; justify-content:space-between; gap:14px; padding:4px 0; } #memberCenterPage .member-return-shipment-order-card span{ color:#978b82; font-size:12px; } #memberCenterPage .member-return-shipment-order-card strong{ color:#3f3732; font-size:13px; text-align:right; overflow-wrap:anywhere; } #memberCenterPage .member-return-shipment-order-card span{ color:#4A4540; font-weight:700; } #memberCenterPage .member-return-shipment-heading p{ color:#403B36; font-weight:700; } #memberCenterPage .member-return-shipment-page .return-shipment-info-grid span{ color:#4A4540; font-weight:700; } #memberCenterPage .member-return-shipment-page .return-shipment-form small{ color:#4A4540; font-weight:700; } #memberCenterPage .member-return-shipment-page .return-shipment-form .return-confirm-check{ color:#4A4540; font-weight:700; } #memberCenterPage .member-return-shipment-page .return-shipment-center-card, #memberCenterPage .member-return-shipment-page .return-shipment-instructions, #memberCenterPage .member-return-shipment-page .return-shipment-form{ margin-bottom:14px; } #memberCenterPage .member-return-shipment-page .return-shipment-instructions .return-guide-richtext{ max-height:none; overflow:visible; } #memberCenterPage .member-return-shipment-page .return-guide-richtext img{ max-width:100%; height:auto; } #memberCenterPage .member-return-shipment-page .return-shipment-form{ margin-bottom:0; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice{ margin:24px 0 14px; padding:22px 34px 24px; border:1px solid #efc98f; border-radius:22px; background:#fff7e9; color:#171412; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-head{ display:flex; align-items:center; gap:16px; margin:0 0 14px; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-icon{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 48px; width:48px; height:48px; border-radius:50%; background:#c96f18; color:#fff; font-size:29px; font-weight:700; line-height:1; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice h3{ margin:0; color:#c45f0c; font-size:20px; font-weight:700; line-height:1.35; letter-spacing:.01em; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-body{ margin-left:70px; color:#171412; font-size:15.5px; font-weight:400; line-height:1.72; letter-spacing:.01em; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-body p{ margin:0; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-body strong{ color:#b95d0b; font-weight:700; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-body .return-shipment-important-notice-label{ color:#c45f0c; font-weight:700 !important; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-body .return-shipment-important-notice-warning{ color:#c45f0c; font-weight:600; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-divider{ height:1px; margin:18px 0 16px; border-top:1px dashed #e8b86f; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice + .return-shipment-instructions{ margin-top:14px; } #memberCenterPage .member-return-shipment-page .return-shipment-submit{ min-height:50px; } #memberCenterPage .member-return-shipment-loading{ min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#857970; font-size:13px; } #memberCenterPage .member-return-shipment-loading span{ width:26px; height:26px; border:2px solid #e5ddd5; border-top-color:#8f7d70; border-radius:50%; animation:memberReturnShipmentSpin .75s linear infinite; } @keyframes memberReturnShipmentSpin{to{transform:rotate(360deg)}} @media(max-width:767px){ #memberCenterPage .member-return-shipment-page{max-width:none} #memberCenterPage .member-return-shipment-head{ flex-direction:column-reverse; align-items:stretch; } #memberCenterPage .member-return-shipment-back{align-self:flex-start} #memberCenterPage .member-return-shipment-order-card{grid-template-columns:1fr} #memberCenterPage .member-return-shipment-page .return-shipment-info-grid{grid-template-columns:1fr} #memberCenterPage .member-return-shipment-page .return-shipment-important-notice{ margin-top:20px; padding:18px 18px 20px; border-radius:18px; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-head{ gap:10px; margin-bottom:10px; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-icon{ flex-basis:40px; width:40px; height:40px; font-size:24px; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice h3{ font-size:18px; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-body{ margin-left:0; font-size:14px; line-height:1.68; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice-divider{ margin:15px 0 14px; } } /* CHÆN patch: tighten vertical spacing between return-shipment sections. */ #memberCenterPage .member-return-shipment-page .member-return-shipment-order-card{ margin-bottom:0; } #memberCenterPage .member-return-shipment-page .return-shipment-center-card{ margin-bottom:0; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice{ margin-top:0; margin-bottom:0; } #memberCenterPage .member-return-shipment-page .return-shipment-important-notice + .return-shipment-instructions{ margin-top:0; } #memberCenterPage .member-return-shipment-page .return-shipment-instructions{ margin-bottom:0; } /* ================================================================ 2026-08-31 — Mobile member subpage back-link alignment Scope: mobile member-center subpages only. - Rename the four existing back links to「返回會員中心」. - Keep the link to the right of the centered page title. - Desktop is intentionally untouched. ================================================================ */ @media(max-width:767px){ #memberCenterPage.member-center-subpage-mode .member-subpage-header, #memberCenterPage.member-center-subpage-mode .member-password-page-header{ position:relative; } #memberCenterPage.member-center-subpage-mode .member-subpage-header .member-subpage-back-btn, #memberCenterPage.member-center-subpage-mode .member-password-page-header .member-password-back{ position:absolute; top:0; right:0; z-index:5; margin:0; min-height:28px; padding:0; width:max-content; display:inline-flex; align-items:center; justify-content:flex-end; } #memberCenterPage.member-center-subpage-mode .member-subpage-header h2, #memberCenterPage.member-center-subpage-mode .member-password-page-header-copy h2{ width:100%; text-align:center; } #memberCenterPage.member-center-subpage-mode .member-subpage-header > div, #memberCenterPage.member-center-subpage-mode .member-password-page-header-copy{ width:100%; } #memberCenterPage.member-center-subpage-mode .member-password-page-header-copy{ text-align:center; } #memberCenterPage.member-center-subpage-mode .member-password-page-header .member-password-back{ order:initial; } } /* 2026-08-31 — Mobile password subpage back link restoration Scope: mobile member-center password page only. Desktop intentionally unchanged. */ @media(max-width:767px){ #memberCenterPage.member-center-subpage-mode .member-password-page-header .member-password-back{ display:inline-flex !important; } } /* 2026-08-31 Member Center dashboard content-column correction. Scope: desktop member center only. Keep the existing sidebar in column 1 and force the dashboard content (including「我的訂單」) to remain in the right content column directly below the member overview. No data/API/DB/function changes. */ @media(min-width:768px){ #memberCenterPage .member-reference-layout > .member-reference-sidebar{ grid-column:1 !important; grid-row:1 !important; } #memberCenterPage .member-reference-layout > .member-content{ grid-column:2 !important; grid-row:1 !important; display:flex !important; flex-direction:column !important; width:100% !important; min-width:0 !important; } #memberCenterPage .member-content > .member-dashboard-overview, #memberCenterPage .member-content > .member-dashboard-home{ width:100% !important; max-width:100% !important; min-width:0 !important; } #memberCenterPage .member-content > .member-dashboard-home{ margin-top:0 !important; } } /* CHÆN Member Center — check-in sidebar icon display size (scoped; 23px only). */ #memberCenterPage .member-sidebar-item[data-tab="checkin"] .member-sidebar-icon, #memberCenterPage .member-sidebar-item[data-tab="checkin"] .member-sidebar-icon img{ width:23px !important; height:23px !important; flex-basis:23px !important; max-width:23px !important; max-height:23px !important; object-fit:contain !important; } /* CHÆN: Order list pending status badge — warm neutral treatment */ #memberCenterPage .member-order-status.status-pending{background:#F2EAE3;color:#795C48}