/* =====================================================================
   Hoptimist Taiwan — commerce pages
   cart.html / checkout.html / order-complete.html / login.html / account.html
   Owner: Page builder — commerce.  Builds on assets/css/style.css tokens.
   ===================================================================== */

/* ---------- Shared: compact page head with steps ---------- */
.commerce-head { padding: var(--s-4) 0 var(--s-5); }
.commerce-head__row { display: flex; flex-direction: column; gap: var(--s-4); margin-top: var(--s-3); }
.commerce-head__title { margin-top: 0; gap: 6px; }
.commerce-head .page-head__en { font-size: 44px; }
.commerce-head__count { font-family: "Open Sans", var(--font-zh); letter-spacing: .04em; color: var(--c-muted); font-weight: 400; }
.commerce-steps { justify-content: flex-start; }
.steps__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; }
.steps__link:hover .steps__label { text-decoration: underline; text-underline-offset: 3px; }
.steps__item.is-done .steps__num { font-size: 13px; }
@media (min-width: 768px) {
  .commerce-head { padding: var(--s-5) 0 var(--s-6); }
  .commerce-head__row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .commerce-head .page-head__en { font-size: 60px; }
  .commerce-steps { justify-content: flex-end; padding-bottom: 6px; }
}
.commerce-section { padding-bottom: var(--s-8); }
@media (min-width: 768px) { .commerce-section { padding-bottom: var(--s-9); } }

/* Prototype notices */
.proto-banner { display: flex; align-items: flex-start; gap: 10px; margin-bottom: var(--s-5); padding: 12px 16px; border-radius: 12px; background: #FFF6DA; color: var(--c-ink); font-size: 14px; line-height: 1.7; }
.proto-banner__icon { flex-shrink: 0; margin-top: 2px; color: var(--c-cta-strong); }
.proto-banner strong { font-weight: 700; color: var(--c-cta-strong); }
.proto-note { display: flex; align-items: flex-start; justify-content: flex-start; gap: 6px; margin-top: var(--s-3); font-size: 13px; line-height: 1.6; font-weight: 500; color: var(--c-cta-strong); }
.proto-note .icon { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.proto-note--center { justify-content: center; text-align: left; }
/* no one-character last lines in commerce copy (text-wrap also sets the wrap mode: target text blocks only, never a nested .nowrap) */
.proto-banner p, .proto-note > span, .cart-assure li > span, .co-confirm .notice p, .oc-steps__text, .oc-hero__text, .summary-card .legal-note, .co-ship-extra .legal-note, .field__hint, .co-option .radio-card__desc { text-wrap: pretty; }

/* Summary card (cart / checkout / order complete) */
.summary-card { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage-2); }
.summary-card__title { font-family: var(--font-zh); font-size: 18px; font-weight: 500; color: var(--c-ink); letter-spacing: .04em; }
.summary-card .ship-progress { background: #fff; }
@media (min-width: 768px) { .summary-card { padding: var(--s-6); } }
.co-fee-strike { margin-right: 6px; color: var(--c-muted); font-weight: 400; }

/* Copy button */
.copy-btn { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-left: 8px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: #fff; font-size: 12px; font-weight: 500; color: var(--c-ink); vertical-align: middle; white-space: nowrap; transition: border-color var(--dur) var(--ease); }
.copy-btn::after { content: ""; position: absolute; inset: -6px -2px; }
.copy-btn:hover { border-color: var(--c-ink); }
.copy-btn .icon { width: 16px; height: 16px; }

/* ---------- CART ---------- */
.cart-layout { align-items: start; }
.cart-main { min-width: 0; }
.cart-table-head { display: none; }
.cart-list--page { margin-top: var(--s-4); border-top: 1px solid var(--c-line-soft); }
.cart-list--page .cart-item { grid-template-columns: 96px minmax(0, 1fr); padding: var(--s-5) 0; }
.cart-list--page .cart-item:last-child { border-bottom: 1px solid var(--c-line-soft); }
.cart-list--page .cart-item__img { width: 96px; height: 96px; }
.cart-list--page .cart-item__remove { width: 44px; height: 44px; margin: -10px -10px 0 0; }
.cart-list--page .cart-item__price { font-size: 16px; }
@media (min-width: 768px) {
  .cart-table-head { display: flex; justify-content: space-between; margin-top: var(--s-5); padding-bottom: var(--s-2); font-size: 13px; color: var(--c-muted); letter-spacing: .08em; }
  .cart-table-head + .cart-list--page { margin-top: 0; }
  .cart-list--page .cart-item { grid-template-columns: 128px minmax(0, 1fr); gap: var(--s-5); }
  .cart-list--page .cart-item__img { width: 128px; height: 128px; }
  .cart-list--page .cart-item__name { font-size: 16px; }
  .cart-list--page .cart-item__name-en { font-size: 20px; }
}
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); }
.cart-aside .summary-card .btn { margin-top: var(--s-2); }
.ship-estimate { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: -2px 0 2px; }
.chip--estimate { min-height: 44px; padding: 0 14px; font-size: 13px; background: #fff; }
.chip--estimate .num { font-size: 12px; opacity: .8; }
.cart-assure { gap: 8px; margin-top: var(--s-2); font-size: 13px; line-height: 1.6; color: var(--c-text); }
.cart-assure .icon { width: 18px; height: 18px; margin-top: 2px; }
.cart-paychips { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--s-4); border-top: 1px solid var(--c-line); }
.cart-empty { padding-bottom: var(--s-4); }
.cart-empty .empty-state { padding-bottom: var(--s-4); }
.cart-empty__links { margin-top: 0; }

/* ---------- CHECKOUT ---------- */
.co-layout { align-items: start; }
.co-main { min-width: 0; }
@media (max-width: 1023.98px) { .co-aside { order: -1; } }

.co-auth { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage-2); }
.co-auth__title { font-size: 16px; font-weight: 500; color: var(--c-ink); line-height: 1.5; }
.co-auth__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.co-auth__actions .btn--line { grid-column: 1 / -1; }
.co-auth__actions .btn { padding-inline: 16px; }
.co-auth--member { flex-direction: row; align-items: center; gap: var(--s-3); }
.co-auth--member .co-auth__text { flex: 1; min-width: 0; }
.co-auth--member .co-auth__title { overflow-wrap: anywhere; }
.co-auth__link { flex-shrink: 0; font-size: 14px; }
.co-auth--guest { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); }
.co-auth--guest > p { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; color: var(--c-text); }
.co-auth--guest .icon { width: 18px; height: 18px; color: var(--c-muted); }
@media (max-width: 479.98px) { .co-auth--member .co-auth__link { display: none; } }
@media (min-width: 768px) {
  .co-auth__actions { display: flex; flex-wrap: wrap; }
  .co-auth__actions .btn--line { grid-column: auto; }
}

.co-section { padding: var(--s-6) 0; border-top: 1px solid var(--c-line-soft); }
.co-auth + .co-section, [data-auth] + .co-section { margin-top: var(--s-5); }
.co-section__title { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-4); font-size: 18px; font-weight: 500; color: var(--c-ink); letter-spacing: .04em; }
.co-section__num { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--c-ink); color: #fff; font: 700 13px/1 "Open Sans", sans-serif; letter-spacing: 0; }
.co-section__aside { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 12px; font-weight: 400; color: var(--c-muted); letter-spacing: .04em; }
.co-section__aside .icon { width: 14px; height: 14px; }
.co-section__title .field__opt { margin-left: 0; }
.co-saved { margin-bottom: var(--s-4); }
.co-saved .field__label { display: inline-flex; align-items: center; gap: 6px; }
.co-saved .icon { width: 16px; height: 16px; }

/* Radio card + attached extra panel */
.co-option[hidden] { display: none; }
.co-option__extra { margin-top: -1px; padding: var(--s-4) 18px var(--s-4); border: 2px solid var(--c-ink); border-top: 0; border-radius: 0 0 12px 12px; background: #FCFCFB; }
.co-option:has(.co-option__extra:not([hidden])) .radio-card__box { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.co-option .radio-card__title .badge { margin-left: 4px; vertical-align: 2px; }
.co-ship .radio-card__box { flex-wrap: wrap; row-gap: 4px; }
.co-ship .radio-card__main { flex: 1 1 calc(100% - 32px); }
.co-ship .radio-card__aside { display: flex; align-items: baseline; gap: 6px; flex: 0 0 calc(100% - 32px); margin-left: 32px; padding-left: 0; line-height: 1.4; }
.co-ship .co-fee-strike { margin-right: 0; }
.co-brands { display: inline-flex; gap: 4px; }
.co-brands span { display: inline-flex; align-items: center; height: 20px; padding: 0 5px; border: 1px solid var(--c-line); border-radius: 4px; font: 700 10px/1 "Open Sans", sans-serif; letter-spacing: .02em; color: var(--c-ink); background: #fff; }
@media (max-width: 419.98px) { .co-brands { display: none; } }
/* expiry + CVC side by side on phones too (short fields) */
@media (max-width: 767.98px) { .co-card.form-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .co-card .span-all { grid-column: 1 / -1; } }
.co-card__note { display: flex; align-items: flex-start; gap: 4px; margin-top: var(--s-3); }
.co-card__note .icon { width: 14px; height: 14px; margin-top: 3px; }
.co-upper { text-transform: uppercase; }
.co-upper::placeholder { text-transform: none; }

.co-ship-extra { margin-top: var(--s-4); }
.co-ship-extra .legal-note { display: block; margin-top: var(--s-2); }
.co-ship-extra .legal-note .icon, .store-picker-modal .legal-note .icon { width: 14px; height: 14px; vertical-align: -2px; }
.store-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: 14px 16px; border: 1px solid var(--c-ink); border-radius: 12px; background: #fff; }
.store-pick.is-empty { border-style: dashed; border-color: #A8A8A8; background: var(--c-stage-2); }
.store-pick.is-invalid { border: 1px solid var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.store-pick__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--c-stage); color: var(--c-ink); }
.store-pick__icon .icon { width: 22px; height: 22px; }
.store-pick__main { flex: 1 1 180px; min-width: 0; }
.store-pick__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--c-ink); line-height: 1.5; }
.store-pick__addr { font-size: 13px; color: var(--c-muted); line-height: 1.6; }
.store-pick .btn { margin-left: auto; }
@media (max-width: 479.98px) { .store-pick .btn { width: 100%; } }
.co-store-error.is-shown { display: block; margin-top: var(--s-2); }

.co-note { min-height: 96px; }
.co-confirm { display: flex; flex-direction: column; gap: var(--s-4); }
.co-confirm .notice p + p { margin-top: 4px; }
.co-confirm .notice .text-link { margin-left: 4px; white-space: nowrap; }
.co-confirm [data-preorder-notice]:empty { display: none; }
.co-agree { padding-bottom: 0; }
.co-submit { padding-top: var(--s-2); }
.co-submit__total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s-3); font-size: 15px; color: var(--c-ink); }
.co-submit__total strong { font: 700 24px/1.2 "Open Sans", sans-serif; letter-spacing: .01em; }

/* Order summary (sidebar desktop / collapsible on mobile) */
.co-summary { gap: var(--s-3); padding: 0; overflow: hidden; }
.co-summary__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); width: 100%; min-height: 56px; padding: 0 var(--s-4); color: var(--c-ink); font-size: 15px; font-weight: 500; text-align: left; }
.co-summary__toggle-label { display: inline-flex; align-items: center; gap: 8px; }
.co-summary__toggle-label .icon--chevron-down { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.co-summary.is-open .co-summary__toggle-label .icon--chevron-down { transform: rotate(180deg); }
.co-summary__toggle-total { font-weight: 700; font-size: 17px; }
.co-summary__heading { display: none; }
.co-summary__heading .text-muted { font-size: 14px; font-weight: 400; }
.co-summary__body { display: none; flex-direction: column; gap: var(--s-4); padding: 0 var(--s-4) var(--s-4); }
.co-summary.is-open .co-summary__body { display: flex; }
.co-summary__foot { display: none; }
.co-summary__edit { align-self: flex-start; font-size: 13px; display: inline-flex; align-items: center; min-height: 32px; }
@media (min-width: 1024px) {
  .co-summary { gap: var(--s-4); padding: var(--s-6); }
  .co-summary__toggle { display: none; }
  .co-summary__heading { display: block; }
  .co-summary__body, .co-summary.is-open .co-summary__body { display: flex; padding: 0; }
  .co-summary__foot { display: flex; flex-direction: column; gap: var(--s-2); }
  .co-summary__foot .legal-note { color: var(--c-cta-strong); font-weight: 500; }
  .co-items { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; margin-right: -8px; padding-right: 8px; }
}
.co-items { display: flex; flex-direction: column; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
/* desktop list scrolls: keep room so the qty badge (top:-6px) is not clipped */
@media (min-width: 1024px) { .co-items { margin: -8px -8px 0 0; padding: 8px 8px 0 0; } }
.co-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; }
.co-item__img { position: relative; width: 56px; height: 56px; border-radius: 10px; background: var(--c-stage); }
.co-item__img img { width: 100%; height: 100%; border-radius: 10px; object-fit: contain; mix-blend-mode: multiply; }
.co-item__qty { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--c-ink); color: #fff; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.co-item__info { display: flex; flex-direction: column; min-width: 0; }
.co-item__name { font-size: 14px; font-weight: 500; color: var(--c-ink); line-height: 1.45; }
.co-item__variant { font-size: 12px; color: var(--c-muted); }
.co-item__price { font-size: 14px; font-weight: 600; color: var(--c-ink); white-space: nowrap; }

/* Store picker modal */
.store-picker__search { position: relative; }
.store-picker__search .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-muted); pointer-events: none; }
.store-picker__search .input { padding-left: 46px; }
.store-picker { display: flex; flex-direction: column; gap: var(--s-2); list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.store-picker__item { display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; text-align: left; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.store-picker__item:hover { border-color: var(--c-ink); }
.store-picker__item.is-active { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); background: #FCFCFB; }
.store-picker__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--c-stage); }
.store-picker__icon .icon { width: 20px; height: 20px; }
.store-picker__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.store-picker__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--c-ink); line-height: 1.5; }
.store-picker__addr { font-size: 13px; color: var(--c-text); line-height: 1.6; }
.store-picker__no { font: 400 12px/1.5 "Open Sans", var(--font-zh); color: var(--c-muted); }
.store-picker__check { flex-shrink: 0; color: var(--c-ink); margin-top: 8px; }
.store-picker__empty { padding: var(--s-4) 0; font-size: 14px; color: var(--c-muted); }

/* ---------- ORDER rendering (shared) ---------- */
.order-items { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.order-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
.order-item:first-child { padding-top: 0; }
.order-item__img { display: block; width: 64px; height: 64px; border-radius: 10px; background: var(--c-stage); overflow: hidden; }
.order-item__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.summary-card .order-item__img { background: #fff; }
.summary-card .order-item__img img { mix-blend-mode: normal; }
.order-item__info { min-width: 0; }
.order-item__name { display: block; font-size: 14px; font-weight: 500; color: var(--c-ink); line-height: 1.45; }
.order-item__name:hover { color: var(--c-cta-strong); }
.order-item__en { display: block; font-family: var(--font-display); font-weight: 300; font-size: 17px; letter-spacing: .04em; color: var(--c-muted); line-height: 1.2; }
.order-item__meta { font-size: 12px; color: var(--c-muted); }
.order-item__meta .num { white-space: nowrap; }
.order-item__preorder { margin-top: 4px; color: var(--c-ink); }
.order-item__preorder .badge { margin-right: 2px; vertical-align: 1px; }
.order-item__price { font: 600 14px "Open Sans", sans-serif; color: var(--c-ink); white-space: nowrap; }
.order-items + .summary { margin-top: var(--s-4); }

.pay-info { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) 18px; border-radius: 12px; background: var(--c-stage-2); }
.pay-info--todo { background: #FFF6DA; }
.pay-info--done { background: #E9F5EE; }
.pay-info__title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 500; color: var(--c-ink); }
.pay-info__title .icon { width: 20px; height: 20px; }
.pay-info--done .pay-info__title .icon { color: var(--c-success); }
.pay-info--todo .pay-info__title .icon { color: var(--c-cta-strong); }
.pay-info__list { display: flex; flex-direction: column; gap: 8px; margin: 0; font-size: 14px; }
.pay-info__list > div { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.pay-info__list dt { color: var(--c-muted); }
.pay-info__list dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; color: var(--c-ink); overflow-wrap: anywhere; }
.pay-info__list dd .copy-btn { margin-left: 0; }
.pay-info__code { font-size: 17px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }

/* ---------- ORDER COMPLETE ---------- */
.oc-hero { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-7) var(--s-4) var(--s-6); border-radius: var(--radius-card); background: var(--c-stage-2); text-align: center; }
.oc-hero__check { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--c-yellow); color: var(--c-ink); }
.oc-hero__check .icon { width: 36px; height: 36px; stroke-width: 2; }
.oc-hero__title { max-width: 640px; }
.oc-hero__text { max-width: 560px; font-size: 15px; color: var(--c-text); }
.oc-no { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin-top: var(--s-3); padding: 10px 12px 10px 20px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-soft); }
.oc-no__label { font-size: 13px; color: var(--c-muted); letter-spacing: .08em; }
.oc-no__value { font-size: 20px; font-weight: 700; color: var(--c-ink); letter-spacing: .04em; }
.oc-no .copy-btn { margin-left: 0; }
.oc-hero__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--c-muted); }
.oc-layout { margin-top: var(--s-6); }
.oc-main { display: flex; flex-direction: column; gap: var(--s-6); min-width: 0; }
.oc-block__title { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-4); font-size: 18px; font-weight: 500; color: var(--c-ink); }
.oc-block__title .icon { width: 22px; height: 22px; }
.oc-steps { position: relative; display: flex; flex-direction: column; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.oc-steps__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); }
.oc-steps__item:not(:last-child)::before { content: ""; position: absolute; left: 15.5px; top: 34px; bottom: calc(var(--s-4) * -1 + 2px); width: 1px; background: var(--c-line); }
.oc-steps__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; font: 600 13px/1 "Open Sans", sans-serif; color: var(--c-muted); }
.oc-steps__item.is-done .oc-steps__num { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.oc-steps__item.is-current .oc-steps__num { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.oc-steps__num .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.oc-steps__title { font-size: 15px; font-weight: 500; color: var(--c-ink); line-height: 32px; }
.oc-steps__text { font-size: 14px; color: var(--c-text); line-height: 1.7; }
.oc-info dd strong { font-weight: 500; }
.oc-recent { max-width: 520px; margin: 0 auto; }
.oc-recent__list { display: flex; flex-direction: column; gap: var(--s-2); list-style: none; margin: var(--s-2) 0 0; padding: 0; }
.oc-recent__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); min-height: 52px; padding: 8px 16px; border: 1px solid var(--c-line); border-radius: 12px; font-size: 14px; color: var(--c-ink); }
.oc-recent__item:hover { border-color: var(--c-ink); }
.oc-follow__inner { display: grid; gap: var(--s-5); align-items: center; }
.oc-follow__media { border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-stage-2); }
.oc-follow__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
@media (max-width: 479.98px) { .oc-no { border-radius: 20px; padding: 12px 16px; } } /* wraps to 2 rows: pill → soft card */
.oc-follow__body { display: flex; flex-direction: column; gap: var(--s-4); }
.oc-follow__body .section-head__title { gap: 4px; }
@media (min-width: 768px) {
  .oc-hero { padding: var(--s-8) var(--s-6) var(--s-7); }
  .oc-follow__inner { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-8); }
  .oc-follow__media { aspect-ratio: 1 / 1; }
}

/* ---------- LOGIN ---------- */
.auth-page { padding: var(--s-4) 0 var(--s-8); }
.auth-grid { display: grid; gap: var(--s-6); margin-top: var(--s-4); align-items: start; }
.auth-card { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.auth-card__title { margin-top: 0; margin-bottom: var(--s-2); }
.auth-card [data-auth-forms] { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.auth-card .page-head__en { font-size: 48px; }
.auth-card__redirect { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--c-stage-2); font-size: 13px; color: var(--c-ink); }
.auth-card__redirect .icon { width: 16px; height: 16px; }
.auth-line { min-height: 56px; font-size: 17px; letter-spacing: .04em; }
.auth-line__icon { display: inline-flex; align-items: center; padding-right: 12px; margin-right: 4px; border-right: 1px solid rgba(0, 0, 0, .12); }
.auth-line__icon .icon { width: 26px; height: 26px; }
.auth-line__note { margin-top: calc(var(--s-2) * -1); font-size: 12px; color: var(--c-muted); text-align: center; }
.auth-divider { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0; font-size: 13px; color: var(--c-muted); letter-spacing: .08em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.auth-tabs .tabs__list { gap: 0; }
.auth-tabs .tabs__tab { flex: 1 1 0; font-size: 16px; }
.auth-tabs .tabs__panel { padding-top: var(--s-5); }
.auth-tabs .tabs__panel:focus-visible { outline-offset: 6px; }
.field__label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.auth-forgot { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; }
.auth-card .text-link[type="button"], .auth-card button.text-link { display: inline-flex; align-items: center; min-height: 32px; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 76px; }
.pw-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); min-width: 60px; height: 44px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--c-ink); }
.pw-toggle:hover { background: var(--c-stage-2); }
.pw-meter { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.pw-meter__bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-meter__bars span { height: 4px; border-radius: 2px; background: var(--c-line-soft); transition: background-color var(--dur) var(--ease); }
.pw-meter__label { font-size: 12px; color: var(--c-muted); }
.pw-meter[data-level="1"] .pw-meter__bars span:nth-child(-n+1) { background: var(--c-red); }
.pw-meter[data-level="2"] .pw-meter__bars span:nth-child(-n+2) { background: var(--c-cta); }
.pw-meter[data-level="3"] .pw-meter__bars span:nth-child(-n+3) { background: #5E9E3A; }
.pw-meter[data-level="4"] .pw-meter__bars span { background: var(--c-success); }
.auth-fineprint { margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--c-line-soft); }
.auth-fineprint strong { color: var(--c-text); font-weight: 500; }
.auth-logged { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage-2); }
.auth-logged__title { font-size: 16px; font-weight: 500; color: var(--c-ink); }
.auth-aside { border-radius: var(--radius-card); overflow: hidden; background: var(--c-stage-2); }
.auth-aside__media { aspect-ratio: 16 / 9; background: var(--c-stage); }
.auth-aside__media img { width: 100%; height: 100%; object-fit: cover; }
.auth-aside__body { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-5); }
.auth-aside .section-head__en { font-size: 40px; }
.auth-benefits { display: flex; flex-direction: column; gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.auth-benefits li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-3); align-items: center; }
.auth-benefits__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--c-ink); }
.auth-benefits__icon .icon { width: 22px; height: 22px; }
.auth-benefits__title { font-size: 15px; font-weight: 500; color: var(--c-ink); line-height: 1.5; }
.auth-benefits__text { font-size: 13px; color: var(--c-muted); line-height: 1.6; }
@media (min-width: 768px) {
  .auth-card { padding: var(--s-7); border: 1px solid var(--c-line-soft); border-radius: var(--radius-card); }
  .auth-card .page-head__en { font-size: 60px; }
  .auth-aside__body { padding: var(--s-6) var(--s-7) var(--s-7); }
  .auth-aside .section-head__en { font-size: 48px; }
}
@media (min-width: 1024px) {
  .auth-grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--s-8); }
  .auth-aside { position: sticky; top: calc(64px + var(--s-5)); }
}

/* ---------- ACCOUNT ---------- */
.acc-head__hello { font-size: 15px; color: var(--c-text); }
.acc-layout { display: grid; gap: var(--s-5); }
.acc-nav { min-width: 0; }
.acc-nav__user, .acc-nav__logout { display: none; }
.acc-tabs { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.acc-tab { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
.acc-tab .icon { width: 18px; height: 18px; }
.acc-tab__count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--c-stage); color: var(--c-ink); font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.acc-panels { min-width: 0; }
.acc-panel.tabs__panel { padding-top: var(--s-2); }
.acc-panel:focus-visible { outline-offset: 8px; }
.acc-panel__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.acc-panel__title { display: flex; flex-direction: column; gap: 4px; letter-spacing: 0; }
.acc-panel__en { font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 1; letter-spacing: .02em; color: var(--c-ink); }
.acc-panel__zh { font-size: 13px; font-weight: 500; letter-spacing: .2em; color: var(--c-ink); }
@media (min-width: 1024px) {
  .acc-layout { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-8); align-items: start; }
  .acc-nav { position: sticky; top: calc(64px + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-4); }
  .acc-nav__user { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--radius-card); background: var(--c-stage-2); }
  .acc-nav__user-text { min-width: 0; }
  .acc-nav__name { font-size: 16px; font-weight: 500; color: var(--c-ink); line-height: 1.4; overflow-wrap: anywhere; }
  .acc-nav__via { font-size: 12px; color: var(--c-muted); overflow-wrap: anywhere; }
  .acc-tabs { flex-direction: column; gap: 2px; margin: 0; padding: 0; border-bottom: 0; overflow: visible; }
  .acc-tab { justify-content: flex-start; gap: 12px; width: 100%; min-height: 48px; padding: 0 16px; border-radius: 12px; text-align: left; color: var(--c-text); }
  .acc-tab::after { display: none; }
  .acc-tab:hover { background: var(--c-stage-2); }
  .acc-tab[aria-selected="true"] { background: var(--c-stage); color: var(--c-ink); }
  .acc-tab .icon { width: 20px; height: 20px; }
  .acc-tab__count { margin-left: auto; background: #fff; }
  .acc-nav__logout { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border-top: 1px solid var(--c-line-soft); color: var(--c-muted); font-size: 15px; }
  .acc-nav__logout:hover { color: var(--c-ink); }
  .acc-nav__logout .icon { width: 20px; height: 20px; }
  .acc-panel.tabs__panel { padding-top: 0; }
  .acc-panel__en { font-size: 48px; }
}

.avatar--lg { width: 72px; height: 72px; font-size: 28px; }
.acc-hero { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage-2); }
.acc-hero__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-hero__name { font-size: 20px; font-weight: 500; color: var(--c-ink); line-height: 1.4; overflow-wrap: anywhere; }
.acc-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.acc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-4); }
.acc-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 84px; padding: var(--s-3) var(--s-2); border: 1px solid var(--c-line-soft); border-radius: var(--radius-card); background: #fff; transition: border-color var(--dur) var(--ease); }
.acc-stat:hover { border-color: var(--c-ink); }
.acc-stat__num { font-size: 28px; font-weight: 600; color: var(--c-ink); line-height: 1.3; }
.acc-stat__label { font-size: 13px; color: var(--c-muted); }
.acc-cards { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
@media (min-width: 768px) { .acc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); } }
.acc-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--c-line-soft); border-radius: var(--radius-card); background: #fff; min-width: 0; }
.acc-card > * { max-width: 100%; }
.acc-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); width: 100%; }
.acc-card__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; color: var(--c-ink); letter-spacing: .04em; }
.acc-card__title .icon { width: 22px; height: 22px; }
.acc-line .acc-card__title .icon { color: var(--c-line-green); }
.acc-card__more { min-height: 32px; font-size: 13px; }
.acc-card .notice { width: 100%; }
.badge--line-on { background: var(--c-line-green); color: #fff; }
.badge--line-on .icon { width: 13px; height: 13px; }
.acc-last { display: flex; align-items: center; gap: var(--s-3); width: 100%; }
.acc-last__thumbs { display: flex; flex-shrink: 0; }
.acc-last__thumbs .acc-thumb + .acc-thumb { margin-left: -14px; }
.acc-last__info { flex: 1; min-width: 0; font-size: 14px; }
.acc-last__info p { overflow-wrap: anywhere; }
.acc-thumb { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: var(--c-stage); overflow: hidden; box-shadow: 0 0 0 2px #fff; flex-shrink: 0; }
.acc-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.acc-thumb--more { font: 600 12px "Open Sans", sans-serif; color: var(--c-muted); }

.switch { position: relative; display: flex; align-items: flex-start; gap: var(--s-3); width: 100%; min-height: 44px; padding: 6px 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 26px; margin: 0; cursor: pointer; }
.switch__track { position: relative; flex-shrink: 0; width: 44px; height: 26px; margin-top: 2px; border-radius: 13px; background: #BDBDBD; transition: background-color var(--dur) var(--ease); }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform var(--dur) var(--ease-bob); }
.switch input:checked + .switch__track { background: var(--c-ink); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.switch__text { display: flex; flex-direction: column; font-size: 13px; color: var(--c-muted); line-height: 1.5; }
.switch__text strong { font-size: 15px; font-weight: 500; color: var(--c-ink); }

/* Orders */
.acc-filter { margin-bottom: var(--s-4); }
.chip--filter { min-height: 44px; }
.order-list { display: flex; flex-direction: column; gap: var(--s-3); }
.order-card { border: 1px solid var(--c-line-soft); border-radius: var(--radius-card); background: #fff; transition: border-color var(--dur) var(--ease); }
.order-card[open] { border-color: var(--c-line); }
.order-card__summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 24px; grid-template-areas: "main status chev" "thumbs total chev"; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-4); list-style: none; cursor: pointer; }
.order-card__summary::-webkit-details-marker { display: none; }
.order-card__summary::marker { content: ""; }
.order-card__summary:hover .order-card__no { color: var(--c-cta-strong); }
.order-card__main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.order-card__no { font-size: 15px; font-weight: 600; color: var(--c-ink); letter-spacing: .02em; overflow-wrap: anywhere; transition: color var(--dur); }
.order-card__date { font-size: 12px; color: var(--c-muted); }
.order-card__thumbs { grid-area: thumbs; display: flex; }
.order-card__thumbs .acc-thumb { width: 40px; height: 40px; border-radius: 10px; }
.order-card__thumbs .acc-thumb + .acc-thumb { margin-left: -10px; }
.order-card__status { grid-area: status; justify-self: end; }
.order-card__total { grid-area: total; justify-self: end; font-size: 16px; font-weight: 700; color: var(--c-ink); }
.order-card__chev { grid-area: chev; display: inline-flex; color: var(--c-muted); transition: transform var(--dur) var(--ease); }
.order-card[open] .order-card__chev { transform: rotate(180deg); }
.order-card__body { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-4); border-top: 1px solid var(--c-line-soft); }
.order-card__body > .btn { align-self: flex-start; }
.order-card__grid { display: grid; gap: var(--s-5); }
.order-card__info { display: flex; flex-direction: column; gap: var(--s-3); margin: 0; padding: var(--s-4); border-radius: 12px; background: var(--c-stage-2); font-size: 14px; }
.order-card__info dt { font-size: 12px; color: var(--c-muted); letter-spacing: .06em; }
.order-card__info dd { margin: 0; color: var(--c-ink); line-height: 1.7; overflow-wrap: anywhere; }
.order-card__info dd strong { font-weight: 500; }
.order-card__actions { padding-top: var(--s-2); }
@media (min-width: 768px) {
  .order-card__summary { grid-template-columns: minmax(0, 1fr) auto auto 110px 24px; grid-template-areas: "main thumbs status total chev"; padding: var(--s-4) var(--s-5); }
  .order-card__body { padding: var(--s-5); }
  .order-card__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
}

/* Addresses */
.addr-grid { display: grid; gap: var(--s-4); }
@media (min-width: 768px) { .addr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.addr-card { display: flex; flex-direction: column; gap: 4px; padding: var(--s-5); border: 1px solid var(--c-line-soft); border-radius: var(--radius-card); background: #fff; min-width: 0; }
.addr-card.is-default { border-color: var(--c-ink); }
.addr-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--s-2); }
.addr-card__head .chip .icon { width: 14px; height: 14px; }
.addr-card__label { font-size: 13px; font-weight: 500; color: var(--c-ink); }
.addr-card__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; font-weight: 500; color: var(--c-ink); }
.addr-card__name .num { font-size: 14px; font-weight: 400; color: var(--c-muted); }
.addr-card__line { font-size: 14px; color: var(--c-text); line-height: 1.7; overflow-wrap: anywhere; }
.addr-card__sub { font-size: 13px; color: var(--c-muted); line-height: 1.6; overflow-wrap: anywhere; }
.addr-card__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-3); }
.addr-card__actions .btn { padding-inline: 14px; }
.addr-card__actions .icon { width: 16px; height: 16px; }
.addr-card__del { color: var(--c-muted); }
.addr-card__del:hover { color: var(--c-red); }
.addr-form__types { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.radio-card--compact .radio-card__box { align-items: center; min-height: 52px; padding: 10px 12px; gap: 8px; }
.radio-card--compact .radio-card__box::before { margin-top: 0; width: 18px; height: 18px; }
.radio-card--compact .radio-card__title { font-size: 13px; line-height: 1.35; }
@media (min-width: 768px) { .radio-card--compact .radio-card__title { font-size: 14px; } }
.addr-form .store-pick { margin-top: 0; }
@media (min-width: 768px) {
  .addr-modal .drawer__panel { width: min(640px, calc(100vw - 48px)); }
}

/* Settings */
.acc-form { margin-bottom: var(--s-4); }
.acc-form.card { padding: var(--s-5); }
@media (min-width: 768px) { .acc-form.card { padding: var(--s-6); } }
.acc-form .input[readonly] { background: var(--c-stage-2); color: var(--c-muted); }
.acc-danger { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }