/* 晶瑩寶庫核心商城 UI：共用導覽、信任資訊、流程與可及性。 */

/*
 * 品牌 Logo：與首頁同一張圖（Bunny CDN）。
 * 各頁原本各自寫死字級與字距，換成圖片後那些反而會影響排版，所以在這裡統一收斂。
 */
.commerce-shell .c-brand{display:inline-flex; align-items:center; line-height:0; flex:none;}
.commerce-shell .c-brand img{height:40px; width:auto; display:block;}
@media (max-width:640px){ .commerce-shell .c-brand img{height:32px;} }


/*
 * 頁面四周的白邊。
 *
 * 商城頁面只重置了 `.commerce-shell *`（外殼**內部**的元素），body 本身漏掉——
 * 瀏覽器預設的 `body{margin:8px}` 還在，於是整個米色頁面被往內推 8px，
 * 四周露出瀏覽器的白底，看起來像整頁被一個白框包住。
 *
 * 其他頁面（首頁、客製化、命理）都有裸的 `*{margin:0}`，所以沒有這個問題；
 * 九個商城頁（shop／cart／checkout／checkout-complete／product／g／terms／privacy／returns）
 * 全部中招。修在這支共用 CSS 一次解決。
 *
 * body 也給底色：內容比視窗短、或行動裝置的橡皮筋捲動時，
 * 露出來的仍是米色而不是白色。
 */
html, body { margin: 0; padding: 0; }
body { background: #F7F3ED; }
.commerce-skip{position:fixed;top:10px;left:14px;z-index:1000;transform:translateY(-160%);padding:10px 14px;border:2px solid #6d493f;border-radius:10px;background:#fff;color:#2f2524;font:800 13px/1.2 Inter,"Noto Sans TC",system-ui;text-decoration:none;transition:transform .16s}
.commerce-skip:focus{transform:translateY(0)}
.commerce-shell{--c-focus:rgba(161,109,89,.38);--c-shadow:0 18px 50px -34px rgba(47,37,36,.62);-webkit-font-smoothing:antialiased}
.commerce-shell button,.commerce-shell input,.commerce-shell textarea,.commerce-shell select{font:inherit}
.commerce-shell button,.commerce-shell a{touch-action:manipulation}
.commerce-shell :focus-visible,.member-page :focus-visible{outline:3px solid var(--c-focus,rgba(161,109,89,.38));outline-offset:3px}
.commerce-shell .c-announcement{display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px;padding:7px 18px;background:#2f2524;color:#f7eee7;font-size:11px;letter-spacing:.04em;text-align:center}
.commerce-shell .c-announcement span+span::before{content:"•";margin-right:10px;color:#c7977f}
.commerce-shell .c-top{position:sticky;top:0;z-index:50;min-height:68px;padding-top:12px;padding-bottom:12px;background:rgba(255,252,248,.95);backdrop-filter:blur(14px);box-shadow:0 12px 30px -29px rgba(47,37,36,.7)}
.commerce-shell .c-quicknav{display:flex;align-items:center;gap:4px;margin-left:18px}
.commerce-shell .c-quicknav a{position:relative;padding:9px 11px;border-radius:9px;color:#74615a;font-size:13px;font-weight:700;white-space:nowrap;transition:background .15s,color .15s}
.commerce-shell .c-quicknav a:hover,.commerce-shell .c-quicknav a[aria-current="page"]{background:#f2e9e2;color:#5c3d35}
.commerce-shell .c-cartlink,.commerce-shell .c-back{min-height:42px;display:inline-flex;align-items:center;justify-content:center}
.commerce-shell .c-flow{max-width:1180px;margin:0 auto;padding:18px 24px 0}
.commerce-shell .c-flow ol{display:grid;grid-template-columns:repeat(3,1fr);max-width:720px;margin:0 auto;padding:0;list-style:none}
.commerce-shell .c-flow li{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;color:#9b8981;font-size:14px;font-weight:700}
.commerce-shell .c-flow li::before{content:attr(data-step);position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border:2px solid #d8c8bd;border-radius:50%;background:#f6f1eb;font-size:13px}
.commerce-shell .c-flow li:not(:last-child)::after{content:"";position:absolute;left:calc(50% + 44px);right:calc(-50% + 44px);height:2px;background:#dfd3ca}
.commerce-shell .c-flow li.is-done,.commerce-shell .c-flow li[aria-current="step"]{color:#5c3d35}
.commerce-shell .c-flow li.is-done::before{content:"✓";border-color:#6d493f;background:#6d493f;color:#fff}
.commerce-shell .c-flow li[aria-current="step"]::before{border-color:#6d493f;background:#fff;color:#6d493f}
.commerce-shell .c-btn,.commerce-shell .btn,.commerce-shell .c-add,.commerce-shell .c-buy,.member-page .btn{min-height:46px;transition:transform .14s,box-shadow .14s,background .14s,border-color .14s}
.commerce-shell .c-btn:hover,.commerce-shell .btn:hover:not(:disabled),.commerce-shell .c-add:hover:not(:disabled),.commerce-shell .c-buy:hover:not(:disabled),.member-page .btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -17px rgba(47,37,36,.8)}
.commerce-shell input:focus,.commerce-shell textarea:focus,.commerce-shell select:focus{border-color:#a16d59!important;box-shadow:0 0 0 3px rgba(161,109,89,.12);outline:0}
.commerce-shell .c-card{box-shadow:var(--c-shadow);transition:transform .18s,box-shadow .18s,border-color .18s}
.commerce-shell .c-card:hover{transform:translateY(-4px);border-color:#cdb5a5;box-shadow:0 24px 55px -32px rgba(47,37,36,.75)}
.commerce-shell .c-card-cta{display:inline-flex;align-items:center;margin-top:12px;color:#6d493f;font-size:12px;font-weight:800}
.commerce-shell .c-hero-points{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.commerce-shell .c-hero-points span{padding:6px 10px;border:1px solid rgba(109,73,63,.18);border-radius:999px;background:rgba(255,252,248,.72);color:#6e5a52;font-size:11px;font-weight:700}

/* 結帳頁：桌機同時看得到資料與訂單摘要，手機回到單欄。 */
.commerce-shell .checkout-title{margin-bottom:7px}
.checkout-page .commerce-shell .c-wrap{max-width:1180px}
.commerce-shell .checkout-lead{margin-bottom:22px;color:#7c6a63;font-size:14px;line-height:1.7}
.commerce-shell .checkout-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,390px);align-items:start;gap:22px}
.commerce-shell .checkout-form,.commerce-shell .checkout-summary-card{border:1px solid var(--c-line);border-radius:16px;background:var(--c-surface);box-shadow:var(--c-shadow)}
.commerce-shell .checkout-form{padding:20px}
.commerce-shell .checkout-form h2{margin-top:0}
.commerce-shell .checkout-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.commerce-shell .checkout-summary{position:sticky;top:94px}
.commerce-shell .checkout-summary-card{padding:18px}
.commerce-shell .checkout-summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.commerce-shell .checkout-summary-head h2{margin:0;font-size:20px}
.commerce-shell .checkout-summary-head a{color:#6d493f;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.commerce-shell .checkout-summary .panel{padding:0;border:0;border-radius:0;background:transparent}
.commerce-shell .checkout-summary #totalBox{margin-top:14px;padding-top:12px;border-top:1px solid var(--c-line)}

/* 會員登入：先交代登入價值與資料用途，減少只剩一顆 LINE 按鈕的空白頁。 */
.member-page #loginGate.member-login-card{max-width:760px;margin:30px auto 70px;padding:34px;border:1px solid #e5d8cd;border-radius:20px;background:#fffdf9;box-shadow:0 24px 60px -42px rgba(47,37,36,.72);text-align:left}
.member-page .member-login-eyebrow{color:#a16d59;font-size:11px;font-weight:800;letter-spacing:.15em}
.member-page .member-login-card h2{margin:8px 0 7px;font-size:28px}
.member-page .member-login-copy{color:#76635c;line-height:1.75}
.member-page .member-login-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0;padding:0;list-style:none}
.member-page .member-login-benefits li{padding:14px;border:1px solid #eadfd6;border-radius:13px;background:#faf5f0;color:#5d4942;font-size:13px;font-weight:700;text-align:center}
.member-page .member-login-card .line{display:flex;align-items:center;justify-content:center;width:100%;max-width:360px;margin:0 auto;background:#06c755;color:#fff}
.member-page .member-login-privacy{margin:13px auto 0;max-width:520px;color:#927f77;font-size:11px;line-height:1.6;text-align:center}
.member-page .member-login-privacy a{color:#6d493f;text-decoration:underline;text-underline-offset:2px}

/* 舊交易頁橋接：保留既有訂單邏輯，統一導覽、信任資訊與錯誤狀態。 */
.journey-page .journey-trustbar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px;padding:7px 18px;background:#2f2524;color:#f7eee7;font:11px/1.5 Inter,"Noto Sans TC",system-ui;letter-spacing:.04em;text-align:center}
.journey-page .journey-trustbar span+span::before{content:"•";margin-right:10px;color:#c7977f}
.journey-page>nav{top:0!important;box-shadow:0 12px 30px -29px rgba(47,37,36,.7)}
.journey-page .journey-shop-link{color:#6d493f!important;font-weight:800!important}
.journey-page .hero{padding-top:54px;padding-bottom:42px}
.journey-page .hero h1{font-size:clamp(32px,4vw,44px)}
.journey-page main{min-height:360px}
.journey-page .journey-help{margin-top:20px;padding:14px 16px;border:1px solid #e2d5ca;border-radius:13px;background:#faf5f0;color:#6d5a53;font-size:13px;line-height:1.7;text-align:left}
.journey-page .journey-help b{display:block;margin-bottom:3px;color:#3f302d}
.payment-failed-page .hero{background:#f4ece6}
.payment-failed-page .hero .eyebrow{color:#9a4945}
.payment-failed-page .fail-card{border:1px solid #e2d5ca;box-shadow:0 24px 60px -45px rgba(47,37,36,.7)}
.payment-failed-page .fail-icon{width:74px;height:74px;background:#f6e0de;color:#9a4945;font-size:38px}
.payment-failed-page .btn-primary{background:#6d493f}
.payment-failed-page .btn-primary:hover{background:#563830}
.orders-page .hero{background:#f4ece6}
.orders-page .hero p{max-width:680px}
.orders-page #main{padding-top:36px}

@media(max-width:900px){
  .commerce-shell .c-quicknav{order:3;width:100%;margin:0;overflow:auto;padding-bottom:1px}
  .commerce-shell .c-top{flex-wrap:wrap}
  .commerce-shell .checkout-grid{grid-template-columns:1fr}
  .commerce-shell .checkout-summary{position:static;order:-1}
}
@media(max-width:620px){
  .commerce-shell .c-announcement{justify-content:flex-start;overflow:auto;white-space:nowrap}
  .commerce-shell .c-top{gap:8px;min-height:60px}
  .commerce-shell .c-brand{font-size:19px!important}
  .commerce-shell .c-quicknav{gap:2px}
  .commerce-shell .c-quicknav a{padding:8px 9px;font-size:12px}
  .commerce-shell .c-flow{padding:14px 12px 0}
  .commerce-shell .c-flow li{gap:6px;font-size:12px}
  .commerce-shell .c-flow li::before{width:28px;height:28px;font-size:12px}
  .commerce-shell .checkout-contact-grid{grid-template-columns:1fr;gap:0}
  .commerce-shell .checkout-form,.commerce-shell .checkout-summary-card{padding:15px}
  .member-page #loginGate.member-login-card{margin:22px 0 55px;padding:23px 18px}
  .member-page .member-login-benefits{grid-template-columns:1fr}
  .journey-page .journey-trustbar{justify-content:flex-start;overflow:auto;white-space:nowrap}
  .journey-page .hero{padding:38px 18px 30px}
}
@media(prefers-reduced-motion:reduce){
  .commerce-skip,.commerce-shell *,.member-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important}
}