/* nt-jia1-site（MK142）：會員專區（沒登入）、會員中心（登入後），照甲1 account.html、account-home／orders／order／address／settings.html。 只載在 strings.php 'acct' → 'acct_pages' 的頁。外掛那一塊的外框是
（用 id 比 MK139 附加 CSS 的 .nt-wc .woocommerce … 優先）。 第 2 段是從甲1 樣稿抽出來的規則（順序照原檔）；要改顏色、字級、間距改第 2 段那一行；字在 inc/strings.php 'acct'。 */ /* ── 0. 外框：Elementor「會員專區（新版）」的本體容器＝甲1 的 section（沒登入 .sec.t-tint；登入後 .sec.t-tint.mk104-acct-sec） ── */ .nt-jacct-on .nt-wc-account{padding:72px 0!important;--padding-top:72px;--padding-bottom:72px;--padding-left:0px;--padding-right:0px} .nt-jacct-on.nt-jacct-in .nt-wc-account{padding:40px 0 72px!important;--padding-top:40px;--padding-bottom:72px} @media (max-width:900px){.nt-jacct-on.nt-jacct-out .nt-wc-account{padding:48px 0!important;--padding-top:48px;--padding-bottom:48px}} .nt-jacct-on .nt-wc-account > .e-con-inner,.nt-jacct-on .nt-wc-account .nt-wc-account-sc,.nt-jacct-on .nt-wc-account .elementor-shortcode,.nt-jacct-on .nt-wc-account .woocommerce{max-width:none;width:100%;margin:0;padding:0;display:block} .nt-jacct-on .nt-wc-account > .elementor-element,.nt-jacct-on .nt-wc-account > .e-con-inner > .elementor-element{width:100%;max-width:none;align-self:stretch} /* MK139 附加 CSS 把 WooCommerce 外框排成兩欄（.nt-wc .woocommerce.ct-woo-account）→ 外掛版面自己排，這層不排 */ body.nt-jacct-on .nt-wc-account .woocommerce.ct-woo-account{display:block!important;grid-template-columns:none!important} #nt-ja{display:block;width:100%} #nt-ja > .wrap{width:100%} /* Blocksy 在會員中心加的東西（選單外框、頭像、「不是你嗎」）在外掛版面裡不用 */ .nt-jacct-on .nt-wc-account .ct-acount-nav:not(.mk104-side){display:contents} /* ── 1. 歸零：Blocksy、WooCommerce、MK139 附加 CSS 的樣式不帶進來（跟甲1 一樣從瀏覽器預設開始）。圖和 SVG 不歸零 ── */ #nt-ja :where(div,span,h2,p,ul,ol,li,a,b,strong,small,form,label,input,select,textarea,button,nav,article,table,thead,tbody,tr,th,td,dl,dt,dd,i,abbr,fieldset,legend){all:revert} #nt-ja,#nt-ja *{-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto} /* ── 2. 甲1 原樣（site.css → site_甲.css → site_甲1.css，從會員 6 頁抽出、照原檔順序；樣稿說明黃條、「範例」標籤、區塊本身不放） ── */ #nt-ja{--ink: #123C35; --leaf: #036648; --box: #02A290; --sun: #E7B130; --mist: #EEF5F1; --paper: #FFFFFF; --cream: #FBF8F2; --line: #D6E3DC; --muted: #56675F; --pend: #FFF3C7; --pend-line: #D9A21B; --tbd: #FDEBD3; --f-body: "Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif; --f-num: "Jost","Noto Sans TC",sans-serif; --r: 14px; --wrap: 1160px; color-scheme: light;} #nt-ja *{box-sizing: border-box;} #nt-ja{text-size-adjust: 100%;} #nt-ja{color: var(--ink); font-family: var(--f-body); font-size: 16px; line-height: 1.75; letter-spacing: 0.02em;} #nt-ja img{max-width: 100%; height: auto; display: block;} #nt-ja a{color: inherit;} #nt-ja h2{line-height: 1.35; text-wrap: balance; margin: 0px; font-weight: 700; letter-spacing: 0.03em;} #nt-ja p{margin: 0px;} #nt-ja .wrap{max-width: var(--wrap); margin: 0px auto; padding-left: max(20px,env(safe-area-inset-left,0px)); padding-right: max(20px,env(safe-area-inset-right,0px));} #nt-ja .num{font-family: var(--f-num); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;} #nt-ja .eyebrow{font-family: var(--f-num); font-size: 0.86rem; letter-spacing: 0.18em; color: var(--box); text-transform: uppercase; display: flex; align-items: center; gap: 10px;} #nt-ja .eyebrow::before{content: ""; width: 28px; height: 1px; background: currentcolor;} #nt-ja .btn{display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0px 28px; border-radius: 999px; font-weight: 700; font-size: 1.02rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; letter-spacing: 0.06em; transition: transform 0.15s, background 0.15s;} #nt-ja .btn:hover{transform: translateY(-1px);} #nt-ja .btn:focus-visible,#nt-ja a:focus-visible,#nt-ja input:focus-visible,#nt-ja select:focus-visible{outline: 3px solid var(--sun); outline-offset: 2px;} #nt-ja .btn-ink{background: var(--ink); color: rgb(255, 255, 255);} #nt-ja .btn-line{background: transparent; border-color: var(--ink); color: var(--ink);} #nt-ja .cta-row{display: flex; gap: 12px; flex-wrap: wrap;} #nt-ja .card{background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; display: grid; gap: 10px; align-content: start;} #nt-ja .card p{color: var(--muted); font-size: 0.94rem;} #nt-ja .form{display: grid; gap: 16px;} #nt-ja .form label{display: grid; gap: 6px; font-weight: 500; font-size: 0.94rem;} #nt-ja .form input,#nt-ja .form select{font: inherit; color: var(--ink); border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; background: rgb(255, 255, 255); width: 100%;} #nt-ja .form .row{display: grid; grid-template-columns: 1fr 1fr; gap: 16px;} #nt-ja .auth{display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-block: 48px 72px;} #nt-ja .auth .card{padding: 32px;} @media (max-width: 900px){#nt-ja .auth,#nt-ja .form .row{grid-template-columns: 1fr;}} @media (prefers-reduced-motion: reduce){#nt-ja *{transition: none !important;}} #nt-ja{--ink: #183D39; --leaf: #14685B; --box: #54B293; --mist: #EEF8F4; --cream: #F4FBF8; --snow: #FAFCFB; --line: #D7EDE4; --muted: #557069; --r: 24px; --glow: 0 18px 44px rgba(84,178,147,.20); --glow-s: 0 10px 26px rgba(20,104,91,.10);} #nt-ja .eyebrow{color: var(--leaf); font-weight: 500;} #nt-ja .btn{min-height: 54px;} #nt-ja .btn-ink{background: var(--box); color: rgb(255, 255, 255); font-weight: 700; box-shadow: rgba(84, 178, 147, 0.35) 0px 10px 22px;} #nt-ja .btn-ink:hover{background: rgb(73, 163, 134);} #nt-ja .btn-line{border-color: var(--box); color: var(--leaf); background: rgb(255, 255, 255);} #nt-ja .card{border-color: transparent; box-shadow: var(--glow-s);} #nt-ja .form input,#nt-ja .form select{border-radius: 14px; border-color: rgb(207, 232, 221); background: var(--snow);} #nt-ja .auth{padding-block: 0px;} #nt-ja .auth .card{padding: 36px 38px;} #nt-ja .t-register{background: var(--mist); box-shadow: none;} #nt-ja{--leaf: #2A8468; --mist: #EAF5EF; --cream: #F3FAF6; --snow: #F7FBF9; --line: #CFE7DB; --glow: 0 18px 44px rgba(84,178,147,.24); --glow-s: 0 10px 26px rgba(84,178,147,.18);} #nt-ja .eyebrow::before{background: rgb(128, 191, 162); height: 2px;} #nt-ja.nt-ja h2{color: rgb(20, 104, 91);} #nt-ja.nt-ja .mk104-line{position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(rgb(30, 211, 106) 0px, rgb(6, 199, 85) 52%, rgb(5, 184, 78) 100%); color: rgb(255, 255, 255); border: 0px; font-weight: 700; text-shadow: rgba(0, 70, 30, 0.22) 0px 1px 1px; box-shadow: rgba(255, 255, 255, 0.45) 0px 1px 0px inset, rgba(0, 90, 40, 0.18) 0px -2px 0px inset, rgba(0, 80, 36, 0.22) 0px 1px 2px, rgba(6, 199, 85, 0.26) 0px 6px 14px, rgba(4, 110, 52, 0.14) 0px 14px 28px; transition: transform 0.18s, box-shadow 0.18s;} #nt-ja.nt-ja .mk104-line::before{content: ""; position: absolute; left: 0px; right: 0px; top: 0px; height: 52%; background: linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0)); z-index: -1; pointer-events: none;} #nt-ja.nt-ja .mk104-line:hover{color: rgb(255, 255, 255); transform: translateY(-2px); box-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px inset, rgba(0, 90, 40, 0.18) 0px -2px 0px inset, rgba(0, 80, 36, 0.2) 0px 2px 4px, rgba(6, 199, 85, 0.3) 0px 10px 20px, rgba(4, 110, 52, 0.16) 0px 20px 36px;} #nt-ja.nt-ja .mk104-line:active{transform: translateY(1px); box-shadow: rgba(0, 80, 36, 0.28) 0px 2px 5px inset, rgba(0, 80, 36, 0.2) 0px 1px 2px, rgba(6, 199, 85, 0.2) 0px 3px 8px;} @media (prefers-reduced-motion: reduce){#nt-ja.nt-ja .mk104-line,#nt-ja.nt-ja .mk104-tile{transition: none;}} @media (prefers-reduced-motion: reduce){#nt-ja.nt-ja .mk104-line:hover,#nt-ja.nt-ja .mk104-line:active,#nt-ja.nt-ja .mk104-tile:hover{transform: none;}} #nt-ja.nt-ja .mk104-acct{display: grid; grid-template-columns: 260px minmax(0px, 1fr); gap: 24px; align-items: start;} #nt-ja.nt-ja .mk104-side{background: rgb(255, 255, 255); border-radius: 22px; box-shadow: var(--glow-s); padding: 20px 14px;} #nt-ja.nt-ja .mk104-me{display: flex; align-items: center; gap: 12px; padding: 4px 10px 16px; border-bottom: 1px solid var(--line); margin-bottom: 10px;} #nt-ja.nt-ja .mk104-me small{display: block; color: var(--muted); font-size: 0.8rem;} #nt-ja.nt-ja .mk104-ava{width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, rgb(128, 191, 162), rgb(84, 178, 147)); color: rgb(255, 255, 255); display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex: 0 0 auto;} #nt-ja.nt-ja .mk104-side ul{list-style: none; margin: 0px; padding: 0px; display: grid; gap: 4px;} #nt-ja.nt-ja .mk104-side a{display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; text-decoration: none; color: var(--ink); font-weight: 500;} #nt-ja.nt-ja .mk104-side a svg{width: 22px; height: 22px; color: var(--box); flex: 0 0 auto;} #nt-ja.nt-ja .mk104-side a:hover{background: var(--mist);} #nt-ja.nt-ja .mk104-side a[aria-current]{background: var(--mist); color: var(--leaf); font-weight: 700; box-shadow: inset 3px 0 0 var(--box);} #nt-ja.nt-ja .mk104-main{display: grid; gap: 20px; min-width: 0px;} #nt-ja.nt-ja .mk104-main .card{border-radius: 22px; padding: 26px 28px;} #nt-ja.nt-ja .mk104-hello{background: linear-gradient(135deg, rgb(255, 255, 255) 0px, rgb(243, 250, 246) 100%);} #nt-ja.nt-ja .mk104-hello h2{font-size: 1.5rem;} #nt-ja.nt-ja .mk104-cardhead{display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 4px;} #nt-ja.nt-ja .mk104-cardhead h2{font-size: 1.15rem; margin: 0px;} #nt-ja.nt-ja .mk104-count{color: var(--muted); font-size: 0.9rem;} #nt-ja.nt-ja .mk104-grid2{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 20px;} #nt-ja.nt-ja .mk104-item{display: flex; align-items: center; gap: 14px;} #nt-ja.nt-ja .mk104-item img,#nt-ja.nt-ja .mk104-line-item img{width: 72px; height: 72px; object-fit: cover; border-radius: 14px; background: rgb(255, 255, 255); box-shadow: inset 0 0 0 1px var(--line); flex: 0 0 auto;} #nt-ja.nt-ja .mk104-item div,#nt-ja.nt-ja .mk104-li-name{display: grid; min-width: 0px;} #nt-ja.nt-ja .mk104-item span,#nt-ja.nt-ja .mk104-li-name span{color: var(--muted); font-size: 0.9rem;} #nt-ja.nt-ja .mk104-dl{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px 18px; margin: 6px 0px 0px;} #nt-ja.nt-ja .mk104-dl div{display: grid; gap: 2px; min-width: 0px;} #nt-ja.nt-ja .mk104-dl dt{font-size: 0.8rem; color: var(--muted);} #nt-ja.nt-ja .mk104-dl dd{margin: 0px; font-weight: 700; overflow-wrap: anywhere;} #nt-ja.nt-ja .mk104-more{justify-self: start; font-weight: 700; color: var(--leaf); text-decoration: none;} #nt-ja.nt-ja .mk104-more:hover{text-decoration: underline;} #nt-ja.nt-ja .mk104-quick .btn{width: 100%;} #nt-ja.nt-ja .mk104-hint{color: var(--muted); font-size: 0.85rem; margin: 0px;} #nt-ja.nt-ja .mk104-tiles{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px;} #nt-ja.nt-ja .mk104-tile{text-decoration: none; color: var(--ink); gap: 6px; transition: transform 0.18s, box-shadow 0.18s;} #nt-ja.nt-ja .mk104-tile svg{width: 30px; height: 30px; color: var(--box);} #nt-ja.nt-ja .mk104-tile span{color: var(--muted); font-size: 0.88rem;} #nt-ja.nt-ja .mk104-tile:hover{transform: translateY(-2px);} #nt-ja.nt-ja .mk104-st{display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font-size: 0.84rem; font-weight: 700; white-space: nowrap;} #nt-ja.nt-ja .mk104-st::before{content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentcolor;} #nt-ja.nt-ja .st-proc{background: rgb(255, 244, 220); color: rgb(122, 80, 0);} #nt-ja.nt-ja .st-ship{background: rgb(227, 241, 251); color: rgb(31, 95, 139);} #nt-ja.nt-ja .st-done{background: rgb(229, 244, 236); color: rgb(34, 112, 90);} #nt-ja.nt-ja .mk104-table{width: 100%; border-collapse: collapse; margin-top: 8px;} #nt-ja.nt-ja .mk104-table th{font-size: 0.82rem; color: var(--muted); font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1.5px solid var(--line);} #nt-ja.nt-ja .mk104-table td{padding: 16px 12px; border-bottom: 1px solid var(--line); vertical-align: middle;} #nt-ja.nt-ja .mk104-table td small{display: block; color: var(--muted); font-size: 0.84rem; margin-top: 2px;} #nt-ja.nt-ja .mk104-td-act{text-align: right;} #nt-ja.nt-ja .btn.mk104-sm{min-height: 40px; padding: 0px 20px; font-size: 0.92rem;} #nt-ja.nt-ja .mk104-sr{position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap;} #nt-ja.nt-ja .mk104-steps{list-style: none; margin: 16px 0px 4px; padding: 0px; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr));} #nt-ja.nt-ja .mk104-steps li{position: relative; display: grid; justify-items: center; align-content: start; text-align: center; gap: 4px;} #nt-ja.nt-ja .mk104-steps li::before{content: ""; position: absolute; top: 18px; left: -50%; right: 50%; height: 4px; background: var(--line);} #nt-ja.nt-ja .mk104-steps li:first-child::before{display: none;} #nt-ja.nt-ja .mk104-steps li.done::before,#nt-ja.nt-ja .mk104-steps li.now::before{background: rgb(84, 178, 147);} #nt-ja.nt-ja .mk104-steps i{position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 1rem/1 var(--f-num); background: rgb(255, 255, 255); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line);} #nt-ja.nt-ja .mk104-steps i svg{width: 20px; height: 20px;} #nt-ja.nt-ja .mk104-steps li.done i{background: rgb(84, 178, 147); color: rgb(255, 255, 255); box-shadow: none;} #nt-ja.nt-ja .mk104-steps li.now i{color: var(--leaf); box-shadow: rgb(84, 178, 147) 0px 0px 0px 3px inset, rgba(84, 178, 147, 0.18) 0px 0px 0px 5px;} #nt-ja.nt-ja .mk104-steps b{font-size: 0.95rem;} #nt-ja.nt-ja .mk104-steps li.now b{color: var(--leaf);} #nt-ja.nt-ja .mk104-steps span{font-size: 0.8rem; color: var(--muted);} #nt-ja.nt-ja .mk104-line-item{display: grid; grid-template-columns: 72px minmax(0px, 1fr) auto auto; gap: 12px 24px; align-items: center; padding: 12px 0px; border-bottom: 1px solid var(--line);} #nt-ja.nt-ja .mk104-li-qty{color: var(--muted); font-size: 0.9rem; white-space: nowrap;} #nt-ja.nt-ja .mk104-li-amt{font-weight: 700; white-space: nowrap;} #nt-ja.nt-ja .mk104-sum{display: grid; gap: 8px; margin: 14px 0px 0px auto; width: min(320px, 100%);} #nt-ja.nt-ja .mk104-sum div{display: flex; justify-content: space-between; gap: 12px;} #nt-ja.nt-ja .mk104-sum dt{color: var(--muted);} #nt-ja.nt-ja .mk104-sum dd{margin: 0px;} #nt-ja.nt-ja .mk104-sum .tot{border-top: 1.5px solid var(--line); padding-top: 10px; font-weight: 700; font-size: 1.1rem;} #nt-ja.nt-ja .mk104-sum .tot dt{color: var(--ink);} #nt-ja.nt-ja .mk104-addr{display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: var(--mist);} #nt-ja.nt-ja .mk104-pin{width: 44px; height: 44px; border-radius: 50%; background: rgb(255, 255, 255); display: grid; place-items: center; color: var(--box); flex: 0 0 auto;} #nt-ja.nt-ja .mk104-pin svg{width: 24px; height: 24px;} #nt-ja.nt-ja .mk104-addr div{display: grid; flex: 1 1 0%; min-width: 0px;} #nt-ja.nt-ja .mk104-addr div span{color: var(--muted); font-size: 0.9rem;} #nt-ja.nt-ja .mk104-tag{background: rgb(84, 178, 147); color: rgb(255, 255, 255); border-radius: 999px; padding: 2px 12px; font-size: 0.8rem; font-weight: 700; white-space: nowrap;} #nt-ja.nt-ja .mk104-form{gap: 16px;} #nt-ja.nt-ja .mk104-formact{display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;} @media (max-width: 900px){#nt-ja.nt-ja .mk104-acct{grid-template-columns: 1fr; gap: 16px;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-side{padding: 12px 10px;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-me{padding: 2px 6px 10px; margin-bottom: 8px;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-side ul{grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 2px;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-side a{flex-direction: column; gap: 4px; padding: 8px 2px; font-size: 0.8rem; text-align: center; justify-content: center; white-space: nowrap;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-side a[aria-current]{box-shadow: inset 0 -3px 0 var(--box);}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-grid2,#nt-ja.nt-ja .mk104-tiles{grid-template-columns: 1fr;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-main .card{padding: 20px 18px;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-table thead{display: none;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-table,#nt-ja.nt-ja .mk104-table tbody,#nt-ja.nt-ja .mk104-table td{display: block;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-table tr{display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 10px 12px; border: 1.5px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 12px;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-table td{border: 0px; padding: 0px;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-table td[data-label]::before{content: attr(data-label); display: block; font-size: 0.78rem; color: var(--muted);}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-table td:first-child,#nt-ja.nt-ja .mk104-td-act{grid-column: 1 / -1; text-align: left;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-td-act .btn{width: 100%;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-steps b{font-size: 0.85rem;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-steps span{font-size: 0.72rem;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-line-item{grid-template-columns: 64px minmax(0px, 1fr); gap: 6px 14px;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-line-item img{width: 64px; height: 64px; grid-row: span 3;}} @media (max-width: 900px){#nt-ja.nt-ja .mk104-acts .btn{width: 100%;}} #nt-ja.nt-ja .mk104-line{background: rgb(6, 199, 85); color: rgb(255, 255, 255); border: 0px; text-shadow: none; box-shadow: none; overflow: visible; z-index: 1;} #nt-ja.nt-ja .mk104-line::before{content: none;} #nt-ja.nt-ja .mk104-line:hover{background: rgb(5, 184, 78); color: rgb(255, 255, 255); transform: none; box-shadow: none;} #nt-ja.nt-ja .mk104-line:active{background: rgb(4, 169, 74); transform: none; box-shadow: none;} #nt-ja.nt-ja :is(summary, .btn, button, nav a, nav li){text-wrap-style: balance;} @media (max-width: 374px){#nt-ja.nt-ja .mk104-side a{font-size: 0.75rem; padding-inline: 0px;}} /* ── 3. 甲1 沒畫、真功能才有的樣子（用甲1 的顏色、圓角、字） ── */ /* 按鈕：甲1 是 ，真表單要用