@import url("https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@300;400;500;600;700&display=swap");
/* =====================================================================
   Hoptimist Taiwan — Global design system  (style.css)
   Owner: Core / design-system agent. Page-specific styles go in
   assets/css/pages/<page>.css. Mobile-first; breakpoints 768 / 1024 / 1366.
   Light mode only.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --c-bg: #FFFFFF;
  --c-stage: #EDEDED;
  --c-stage-2: #F5F5F4;
  --c-ink: #1A1A19;
  --c-text: #333333;
  --c-muted: #6E6E6E;
  --c-line: #D3D3D3;
  --c-line-soft: #EDEDED;
  --c-black: #000000;
  --c-white: #FFFFFF;
  --c-cta: #D97933;
  --c-cta-hover: #CB6301;
  --c-cta-strong: #B4561A;
  --c-brick: #BA6C68;
  --c-brick-strong: #A0524E;
  --c-red: #DE0618;
  --c-yellow: #F6BA00;
  --c-blue: #30B4EA;
  --c-sky: #8AD2F0;
  --c-mustard: #C5A669;
  --c-ended-bg: #EDEDED;
  --c-ended-fg: #555555;
  --c-line-green: #06C755;
  --c-line-green-hover: #05B34C;
  --c-success: #1F7A4D;
  --c-error: #DE0618;
  --c-footer-muted: #BDBDBD;

  --font-display: "Yanone Kaffeesatz", "Chiron GoRound TC", "Noto Sans TC", sans-serif;
  --font-body: "Open Sans", "Chiron GoRound TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-zh: "Chiron GoRound TC", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;

  --radius-pill: 999px;
  --radius-card: 16px;
  --radius-input: 8px;
  --radius-sm: 4px;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --container: 1280px;
  --container-narrow: 800px;
  --gutter: 16px;
  --grid-gap: 16px;
  --section-y: 64px;
  --head-gap: 32px;

  --hello-h: 36px;
  --header-h: 56px;

  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .12);
  --shadow-soft: 0 4px 16px rgba(0, 0, 0, .06);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-bob: cubic-bezier(.34, 1.56, .64, 1);
  --dur: 250ms;

  color-scheme: light;
}
@media (min-width: 768px) {
  :root { --gutter: 24px; --grid-gap: 24px; --section-y: 96px; --head-gap: 40px; --hello-h: 40px; }
}
@media (min-width: 1024px) {
  :root { --header-h: 88px; }
}
@media (min-width: 1366px) {
  :root { --gutter: 40px; }
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 88px;
  background: var(--c-bg);
}
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }
main { display: block; flex: 1 0 auto; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
/* zero specificity so any single-class rule can set its own padding / list-style */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-zh); font-weight: 500; color: var(--c-ink); line-height: 1.45; letter-spacing: .04em; }
/* Chinese line breaks: avoid one-character last lines (zero specificity, any rule can override) */
:where(p, li, dd, figcaption, blockquote, h1, h2, h3, h4) { text-wrap: pretty; }
img, picture, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--s-6) 0; }
[hidden] { display: none !important; }
::selection { background: var(--c-yellow); color: var(--c-ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; border-radius: 4px; }
.on-dark :focus-visible, .site-footer :focus-visible, .hello-bar :focus-visible { outline-color: #fff; }

/* ---------- 3. Typography ---------- */
.display { font-family: var(--font-display); font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: .02em; color: var(--c-ink); }
.title-en { font-family: var(--font-display); font-weight: 200; font-size: 44px; line-height: 1.05; letter-spacing: .02em; color: var(--c-ink); }
.subtitle-zh { font-family: var(--font-zh); font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: .2em; color: var(--c-ink); }
.h1, .h1-zh { font-family: var(--font-zh); font-weight: 500; font-size: 28px; line-height: 1.4; letter-spacing: .04em; color: var(--c-ink); }
.h2, .h2-zh { font-family: var(--font-zh); font-weight: 500; font-size: 22px; line-height: 1.45; letter-spacing: .04em; color: var(--c-ink); }
.h3, .h3-zh { font-family: var(--font-zh); font-weight: 500; font-size: 18px; line-height: 1.5; letter-spacing: .02em; color: var(--c-ink); }
.h4 { font-family: var(--font-zh); font-weight: 500; font-size: 16px; line-height: 1.6; color: var(--c-ink); }
.lead { font-size: 17px; line-height: 1.9; color: var(--c-text); }
.body { font-size: 16px; line-height: 1.8; }
.small { font-size: 14px; line-height: 1.7; }
.caption { font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--c-muted); }
.eyebrow { font-family: "Open Sans", var(--font-zh); font-weight: 700; font-size: 12px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink); }
.en { font-family: var(--font-display); letter-spacing: .03em; }
.num { font-family: "Open Sans", sans-serif; font-variant-numeric: tabular-nums; }
.price { font-family: "Open Sans", var(--font-zh); font-weight: 600; font-size: 16px; line-height: 1.4; letter-spacing: .02em; color: var(--c-ink); }
.price--lg { font-size: 24px; }
.price__from { font-family: var(--font-zh); font-weight: 400; font-size: .8125em; margin-left: 2px; color: var(--c-muted); }
.price__note { font-family: var(--font-zh); font-size: 12px; font-weight: 400; color: var(--c-muted); margin-left: 6px; letter-spacing: 0; }
.price__hidden { font-family: var(--font-zh); font-size: 14px; font-weight: 500; color: var(--c-muted); letter-spacing: .04em; }
@media (min-width: 768px) {
  .display { font-size: 96px; }
  .title-en { font-size: 64px; }
  .subtitle-zh { font-size: 14px; }
  .h1, .h1-zh { font-size: 40px; }
  .h2, .h2-zh { font-size: 28px; }
  .h3, .h3-zh { font-size: 20px; }
  .lead { font-size: 18px; }
}

.text-muted { color: var(--c-muted) !important; }
.text-ink { color: var(--c-ink) !important; }
.text-cta { color: var(--c-cta-strong) !important; }
.text-red { color: var(--c-red) !important; }
.text-success { color: var(--c-success) !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.fw-500 { font-weight: 500 !important; }
.fw-700 { font-weight: 700 !important; }
.nowrap { white-space: nowrap; }
.balance { text-wrap: balance; }

.text-link { color: var(--c-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur) var(--ease); }
.text-link:hover { color: var(--c-cta-strong); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; color: var(--c-ink); letter-spacing: .04em; min-height: 44px; }
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow:hover { color: var(--c-cta-strong); }

/* Rich text (legal pages, news body, product description) */
.prose { font-size: 16px; line-height: 1.9; color: var(--c-text); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 22px; margin-top: 2em; }
.prose h3 { font-size: 18px; margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li + li { margin-top: .35em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; color: var(--c-ink); }
.prose a:hover { color: var(--c-cta-strong); }
.prose strong { color: var(--c-ink); font-weight: 700; }
.prose table { font-size: 14px; }
.prose th, .prose td { border-bottom: 1px solid var(--c-line); padding: 10px 8px; text-align: left; vertical-align: top; }
.prose th { color: var(--c-ink); font-weight: 500; background: var(--c-stage-2); }
.prose blockquote { border-left: 2px solid var(--c-ink); padding-left: 1em; color: var(--c-muted); }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide { max-width: calc(1600px + var(--gutter) * 2); }
.container--full { max-width: none; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--stage { background: var(--c-stage); }
.section--soft { background: var(--c-stage-2); }
.section--black { background: var(--c-black); color: #fff; }
.section--black h1, .section--black h2, .section--black h3 { color: #fff; }
.section--yellow { background: var(--c-yellow); color: var(--c-ink); }

.grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr)); }
.grid--m1d1 { --cols-m: 1; --cols-t: 1; --cols-d: 1; }
.grid--m2d2 { --cols-m: 2; --cols-t: 2; --cols-d: 2; }
.grid--m1d2 { --cols-m: 1; --cols-t: 2; --cols-d: 2; }
.grid--m1d3 { --cols-m: 1; --cols-t: 2; --cols-d: 3; }
.grid--m1d4 { --cols-m: 1; --cols-t: 2; --cols-d: 4; }
.grid--m2d3 { --cols-m: 2; --cols-t: 3; --cols-d: 3; }
.grid--m2d4 { --cols-m: 2; --cols-t: 3; --cols-d: 4; }
.grid--m2d5 { --cols-m: 2; --cols-t: 3; --cols-d: 5; }
.grid--m3d6 { --cols-m: 3; --cols-t: 6; --cols-d: 6; }
.grid--gap-lg { gap: calc(var(--grid-gap) * 1.5) var(--grid-gap); }
.grid--rows-lg { row-gap: var(--s-7); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(var(--cols-t, var(--cols-d, 1)), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(var(--cols-d, 1), minmax(0, 1fr)); } }
.span-all { grid-column: 1 / -1; }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
.stack--sm { --stack-gap: var(--s-2); }
.stack--lg { --stack-gap: var(--s-6); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--row-gap, var(--s-3)); }
.row--sm { --row-gap: var(--s-2); }
.row--lg { --row-gap: var(--s-5); }
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }
.row--nowrap { flex-wrap: nowrap; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.btn-row--center { justify-content: center; }

/* Media + text split (M1D2) */
.split { display: grid; gap: var(--s-6); align-items: center; }
.split__media { border-radius: var(--radius-card); overflow: hidden; background: var(--c-stage); }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body { display: flex; flex-direction: column; gap: var(--s-4); }
@media (min-width: 768px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .split--reverse .split__media { order: 2; }
  .split--wide-media { grid-template-columns: 1.3fr 1fr; }
}

/* Two-column page layout (e.g. product detail, checkout) */
.layout-2col { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .layout-2col { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-8); align-items: start; }
  .layout-2col--wide-aside { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .layout-2col__aside--sticky { position: sticky; top: calc(64px + var(--s-5)); }
}

/* Horizontal scroll strip (contained, never causes page overflow) */
.scroll-row { display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: var(--grid-gap); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); padding-bottom: var(--s-2); scrollbar-width: none; }
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { scroll-snap-align: start; }
.scroll-row--wide { grid-auto-columns: 80%; }
@media (min-width: 768px) { .scroll-row { grid-auto-columns: 31%; } .scroll-row--wide { grid-auto-columns: 45%; } }
@media (min-width: 1024px) { .scroll-row { grid-auto-columns: calc((100% - var(--grid-gap) * 3) / 4); margin-inline: 0; padding-inline: 0; } .scroll-row--wide { grid-auto-columns: calc((100% - var(--grid-gap) * 2) / 3); } }

/* Aspect-ratio media boxes */
.ratio { position: relative; overflow: hidden; background: var(--c-stage); }
.ratio > img, .ratio > video, .ratio > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
.rounded { border-radius: var(--radius-card); overflow: hidden; }
.img-cover { width: 100%; height: 100%; object-fit: cover; }
.stage { background: var(--c-stage); border-radius: var(--radius-card); }
.stage-img { background: var(--c-stage); border-radius: var(--radius-card); overflow: hidden; }
.stage-img img { mix-blend-mode: multiply; width: 100%; height: 100%; object-fit: contain; }
img.img-broken { opacity: 0; }

/* Spacing utilities */
.mt-0 { margin-top: 0 !important; } .mt-1 { margin-top: var(--s-1) !important; } .mt-2 { margin-top: var(--s-2) !important; } .mt-3 { margin-top: var(--s-3) !important; } .mt-4 { margin-top: var(--s-4) !important; } .mt-5 { margin-top: var(--s-5) !important; } .mt-6 { margin-top: var(--s-6) !important; } .mt-7 { margin-top: var(--s-7) !important; } .mt-8 { margin-top: var(--s-8) !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: var(--s-1) !important; } .mb-2 { margin-bottom: var(--s-2) !important; } .mb-3 { margin-bottom: var(--s-3) !important; } .mb-4 { margin-bottom: var(--s-4) !important; } .mb-5 { margin-bottom: var(--s-5) !important; } .mb-6 { margin-bottom: var(--s-6) !important; } .mb-7 { margin-bottom: var(--s-7) !important; } .mb-8 { margin-bottom: var(--s-8) !important; }
.mx-auto { margin-inline: auto !important; }
.w-full { width: 100% !important; }
.max-prose { max-width: 680px; }

.sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 767.98px) { .hide-mobile { display: none !important; } }
@media (min-width: 768px) { .hide-tablet-up, .show-mobile-only { display: none !important; } }
@media (max-width: 1023.98px) { .show-desktop-only { display: none !important; } }
@media (min-width: 1024px) { .hide-desktop { display: none !important; } }

.divider { height: 1px; background: var(--c-line); border: 0; margin: var(--s-6) 0; }
.divider--soft { background: var(--c-line-soft); }

/* ---------- 5. Icons ---------- */
.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ---------- 6. Buttons ---------- */
.btn {
  --btn-bg: var(--c-ink); --btn-fg: #fff; --btn-bd: var(--c-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 28px;
  border-radius: var(--radius-pill); border: 1px solid var(--btn-bd);
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-zh); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: .06em;
  text-align: center; white-space: nowrap; cursor: pointer; user-select: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 120ms var(--ease);
}
.btn:active:not(:disabled):not(.btn--disabled) { transform: scale(.98); }
.btn .icon { width: 20px; height: 20px; }
@media (min-width: 768px) { .btn { min-height: 52px; padding: 0 32px; } }
.btn--primary:hover, .btn:not([class*="btn--"]):hover { --btn-bg: #333; --btn-bd: #333; }
.btn--accent { --btn-bg: var(--c-cta); --btn-bd: var(--c-cta); --btn-fg: #fff; font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.btn--accent:hover { --btn-bg: var(--c-cta-hover); --btn-bd: var(--c-cta-hover); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-bd: var(--c-ink); }
.btn--outline:hover { --btn-bg: var(--c-ink); --btn-fg: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--c-ink); --btn-bd: transparent; padding-inline: 16px; }
.btn--ghost:hover { --btn-bg: var(--c-stage); }
.btn--white { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-bd: #fff; }
.btn--white:hover { --btn-bg: var(--c-stage); --btn-bd: var(--c-stage); }
.btn--outline-white { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .7); }
.btn--outline-white:hover { --btn-bg: #fff; --btn-fg: var(--c-ink); --btn-bd: #fff; }
.btn--line { --btn-bg: var(--c-line-green); --btn-bd: var(--c-line-green); --btn-fg: #fff; }
.btn--line:hover { --btn-bg: var(--c-line-green-hover); --btn-bd: var(--c-line-green-hover); }
.btn--line .icon { width: 22px; height: 22px; }
.btn--disabled, .btn:disabled, .btn[aria-disabled="true"] { --btn-bg: var(--c-stage); --btn-fg: var(--c-muted); --btn-bd: var(--c-stage); cursor: not-allowed; pointer-events: none; }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
@media (min-width: 768px) { .btn--sm { min-height: 44px; padding: 0 22px; } }
.btn--xs { min-height: 36px; padding: 0 14px; font-size: 13px; }
/* Compact controls keep their look but get a 44px tap area (touch target rule) */
a.chip--sm, button.chip--sm, .btn--xs, button.text-link { position: relative; }
a.chip--sm::after, button.chip--sm::after, .btn--xs::after, button.text-link::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: 44px; transform: translate(-50%, -50%); }
.btn--lg { min-height: 56px; padding: 0 40px; font-size: 17px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { width: 44px; min-height: 44px; height: 44px; padding: 0; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-color: var(--btn-fg) transparent var(--btn-fg) transparent; animation: spin .8s linear infinite; }

.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--c-ink); transition: background-color var(--dur) var(--ease); }
.icon-btn:hover { background: var(--c-stage); }
.icon-btn .icon { width: 24px; height: 24px; }
.icon-btn__badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-badge, #2FA3DA); color: #fff; font: 600 11px/18px "Open Sans", sans-serif; text-align: center; letter-spacing: 0; pointer-events: none; }
.icon-btn__badge:empty, .icon-btn__badge[data-count="0"] { display: none; }
.icon-btn__badge.is-bump { animation: badge-bump .45s var(--ease-bob); }

/* ---------- 7. Badges & tags ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--radius-pill); font-family: var(--font-zh); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .08em; white-space: nowrap; background: var(--c-ink); color: #fff; }
.badge--now { background: var(--c-red); color: #fff; }
.badge--now::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse-dot 1.6s ease-in-out infinite; }
.badge--soon { background: var(--c-yellow); color: var(--c-ink); }
.badge--ended { background: var(--c-ended-bg); color: var(--c-ended-fg); }
.badge--limited, .badge--new { background: var(--c-brick-strong); color: #fff; }
.badge--new { font-family: "Open Sans", sans-serif; letter-spacing: .12em; }
.badge--cert { background: #fff; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
.badge--cert .icon { width: 13px; height: 13px; }
.badge--outline { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-line); font-weight: 500; }
.badge--dark { background: var(--c-ink); color: #fff; }
.badge--white { background: #fff; color: var(--c-ink); }
.badge--sample { height: 20px; padding: 0 8px; background: #EFEFEF; color: #6E6E6E; font-size: 11px; font-weight: 500; letter-spacing: .1em; box-shadow: inset 0 0 0 1px #E0E0E0; }
.badge--sm { height: 20px; padding: 0 8px; font-size: 11px; }
.badge-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }

/* ---------- 8. Chips, size chips, swatches ---------- */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); font-family: var(--font-zh); font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: .04em; white-space: nowrap; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.chip:hover { border-color: var(--c-ink); }
.chip.is-active, .chip[aria-pressed="true"], .chip[aria-selected="true"], .chip[aria-checked="true"], .chip[aria-current="true"], input:checked + .chip { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.chip__count { font-family: "Open Sans", sans-serif; font-size: 12px; font-weight: 400; opacity: .7; }
.chip__dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.chip--sm { min-height: 28px; padding: 0 12px; font-size: 12px; cursor: default; }
.chip--sm:hover { border-color: var(--c-line); }
.chip--city { min-height: 26px; padding: 0 10px; border: 0; background: #fff; font-size: 12px; font-weight: 500; cursor: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.chip--stage { border-color: transparent; background: var(--c-stage); }
.chip--removable .icon { width: 14px; height: 14px; }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip-scroll { display: flex; flex-wrap: nowrap; gap: var(--s-2); overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
.chip-scroll::-webkit-scrollbar { display: none; }
.chip-scroll > * { flex: 0 0 auto; }
@media (min-width: 1024px) { .chip-scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }

.size-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.size-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 52px; padding: 6px 16px; border-radius: var(--radius-pill); border: 1px solid var(--c-line); background: #fff; color: var(--c-ink); cursor: pointer; line-height: 1.15; transition: all var(--dur) var(--ease); }
.size-chip:hover { border-color: var(--c-ink); }
.size-chip__label { font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.size-chip__dim { font-size: 11px; color: var(--c-muted); margin-top: 2px; }
.size-chip.is-active, .size-chip[aria-pressed="true"], .size-chip[aria-checked="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.size-chip.is-active .size-chip__dim, .size-chip[aria-pressed="true"] .size-chip__dim, .size-chip[aria-checked="true"] .size-chip__dim { color: rgba(255, 255, 255, .75); }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; display: inline-block; width: 32px; height: 32px; border-radius: 50%; padding: 0; background: var(--sw, #ccc); background-size: cover; background-position: 50% 35%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); cursor: pointer; transition: box-shadow var(--dur) var(--ease); }
.swatch img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 35%; }
button.swatch { width: 44px; height: 44px; background: transparent; box-shadow: none; display: inline-flex; align-items: center; justify-content: center; }
button.swatch::before { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
button.swatch.has-img::before { display: none; }
button.swatch img { position: absolute; width: 32px; height: 32px; top: 6px; left: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); background: var(--c-stage); }
.swatch.is-active, .swatch[aria-pressed="true"], .swatch[aria-checked="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c-ink); }
button.swatch.is-active, button.swatch[aria-pressed="true"], button.swatch[aria-checked="true"] { box-shadow: none; }
button.swatch.is-active::after, button.swatch[aria-pressed="true"]::after, button.swatch[aria-checked="true"]::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c-ink); }
.swatch--sm { width: 14px; height: 14px; cursor: inherit; }
.swatch--white { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
/* Sold-out colour (product page): muted with a diagonal stroke; still selectable — the buy box offers 到貨通知. */
button.swatch.swatch--out::before { background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgba(40, 40, 40, .75) calc(50% - 1px), rgba(40, 40, 40, .75) calc(50% + 1px), transparent calc(50% + 1px)), var(--sw, #ccc); opacity: .55; }
button.swatch.swatch--out img { opacity: .45; }

/* ---------- 9. Forms ---------- */
.form { display: flex; flex-direction: column; gap: var(--s-5); }
.form-grid { display: grid; gap: var(--s-5) var(--s-4); }
@media (min-width: 768px) { .form-grid--2 { grid-template-columns: 1fr 1fr; } .form-grid--3 { grid-template-columns: repeat(3, 1fr); } .form-grid .span-all { grid-column: 1 / -1; } }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.fieldset__legend, .form-section-title { font-family: var(--font-zh); font-weight: 500; font-size: 18px; color: var(--c-ink); margin-bottom: var(--s-4); padding: 0; letter-spacing: .04em; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: 14px; font-weight: 500; color: var(--c-ink); letter-spacing: .04em; }
.field__req { color: var(--c-red); margin-left: 2px; }
.field__opt { color: var(--c-muted); font-weight: 400; font-size: 12px; margin-left: 4px; }
.field__hint { font-size: 12px; color: var(--c-muted); line-height: 1.6; }
.field__error { display: none; font-size: 12px; color: var(--c-error); line-height: 1.5; }
.field.is-invalid .field__error, .field.is-error .field__error { display: block; }
.input, .select, .textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--c-line); border-radius: var(--radius-input);
  background: #fff; color: var(--c-ink); font-size: 16px; line-height: 1.4;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #9A9A9A; }
.input:hover, .select:hover, .textarea:hover { border-color: #A8A8A8; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-ink); outline: none; box-shadow: 0 0 0 1px var(--c-ink); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--c-stage-2); color: var(--c-muted); }
.textarea { min-height: 140px; resize: vertical; }
.select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%231A1A19' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px; cursor: pointer; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea, .input.is-invalid, .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--c-error); box-shadow: 0 0 0 1px var(--c-error); }
.input-group { display: flex; gap: var(--s-2); }
.input-group .input { flex: 1; min-width: 0; }
.input-group .btn { flex-shrink: 0; min-height: 48px; }
.input--pill { border-radius: var(--radius-pill); padding-inline: 20px; }

.check, .radio { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 15px; line-height: 1.6; color: var(--c-text); }
.check input, .radio input { -webkit-appearance: none; appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 2px 0 0; border: 1.5px solid #8A8A8A; background: #fff; cursor: pointer; transition: all var(--dur) var(--ease); }
.check input { border-radius: 5px; }
.radio input { border-radius: 50%; }
.check input:checked { background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--c-ink); }
.radio input:checked { border-color: var(--c-ink); box-shadow: inset 0 0 0 4px #fff; background: var(--c-ink); }
.check input:focus-visible, .radio input:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.check.is-invalid input { border-color: var(--c-error); }

.radio-cards { display: grid; gap: var(--s-3); }
@media (min-width: 768px) { .radio-cards--2 { grid-template-columns: 1fr 1fr; } .radio-cards--3 { grid-template-columns: repeat(3, 1fr); } }
.radio-card { position: relative; display: block; cursor: pointer; }
.radio-card > input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.radio-card__box { display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: 12px; background: #fff; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.radio-card__box::before { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; border: 1.5px solid #8A8A8A; background: #fff; transition: all var(--dur) var(--ease); }
.radio-card > input[type="checkbox"] + .radio-card__box::before { border-radius: 5px; }
.radio-card__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.radio-card__title { font-weight: 500; color: var(--c-ink); font-size: 15px; line-height: 1.5; }
.radio-card__desc { font-size: 13px; color: var(--c-muted); line-height: 1.6; }
.radio-card__aside { margin-left: auto; padding-left: 8px; font-family: "Open Sans", var(--font-zh); font-weight: 600; font-size: 14px; color: var(--c-ink); white-space: nowrap; }
.radio-card:hover .radio-card__box { border-color: #A8A8A8; }
.radio-card > input:checked + .radio-card__box { border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); background: #FCFCFB; }
.radio-card > input:checked + .radio-card__box::before { border-color: var(--c-ink); background: var(--c-ink); box-shadow: inset 0 0 0 4px #fff; }
.radio-card > input[type="checkbox"]:checked + .radio-card__box::before { box-shadow: none; background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 14px no-repeat; }
.radio-card > input:focus-visible + .radio-card__box { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.radio-card > input:disabled + .radio-card__box { opacity: .5; cursor: not-allowed; }
.radio-card__extra { display: none; padding: 12px 18px 4px 50px; }
.radio-card > input:checked ~ .radio-card__extra { display: block; }

/* Quantity stepper */
.qty { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--c-line); border-radius: var(--radius-pill); background: #fff; }
.qty__btn { width: 44px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--c-ink); border-radius: 50%; }
.qty__btn:hover { background: var(--c-stage-2); }
.qty__btn:disabled { color: #BDBDBD; background: none; }
.qty__btn .icon { width: 18px; height: 18px; }
.qty__input, .qty__value { width: 40px; height: 42px; border: 0; background: transparent; text-align: center; font: 600 15px/42px "Open Sans", sans-serif; color: var(--c-ink); -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { height: 40px; } .qty--sm .qty__btn { width: 40px; height: 38px; } .qty--sm .qty__input, .qty--sm .qty__value { width: 32px; height: 38px; line-height: 38px; font-size: 14px; }

/* ---------- 10. Accordion ---------- */
.accordion { border-top: 1px solid var(--c-line); }
.accordion:last-of-type, .accordion-group > .accordion:last-child { border-bottom: 1px solid var(--c-line); }
.accordion__head { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 56px; padding: 14px 0; cursor: pointer; font-family: var(--font-zh); font-size: 16px; font-weight: 500; color: var(--c-ink); line-height: 1.5; letter-spacing: .02em; }
.accordion__head::-webkit-details-marker { display: none; }
.accordion__head::marker { content: ""; }
.accordion__head::after { content: ""; flex-shrink: 0; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A19' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") center / 20px no-repeat; transition: transform var(--dur) var(--ease); }
.accordion[open] > .accordion__head::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A19' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); transform: rotate(180deg); }
.accordion__head:hover { color: var(--c-cta-strong); }
.accordion__q-mark { font-family: var(--font-display); font-size: 22px; font-weight: 300; color: var(--c-muted); margin-right: 4px; }
.accordion__body { padding: 0 0 var(--s-5); color: var(--c-text); font-size: 15px; line-height: 1.9; }
.accordion[open] > .accordion__body { animation: acc-open var(--dur) var(--ease); }
.accordion__body > * + * { margin-top: .8em; }

/* ---------- 11. Tabs ---------- */
.tabs__list { display: flex; gap: var(--s-1); border-bottom: 1px solid var(--c-line); overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tabs__tab { position: relative; flex-shrink: 0; min-height: 48px; padding: 0 18px; font-family: var(--font-zh); font-size: 15px; font-weight: 500; color: var(--c-muted); letter-spacing: .06em; white-space: nowrap; transition: color var(--dur) var(--ease); }
.tabs__tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--c-ink); transform: scaleX(0); transition: transform var(--dur) var(--ease); }
.tabs__tab:hover { color: var(--c-ink); }
.tabs__tab[aria-selected="true"], .tabs__tab.is-active { color: var(--c-ink); }
.tabs__tab[aria-selected="true"]::after, .tabs__tab.is-active::after { transform: scaleX(1); }
.tabs__panel { padding-top: var(--s-6); }
.tabs__panel[hidden] { display: none; }
.tabs--pill .tabs__list { border-bottom: 0; gap: var(--s-2); }
.tabs--pill .tabs__tab { min-height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--c-line); color: var(--c-ink); }
.tabs--pill .tabs__tab::after { display: none; }
.tabs--pill .tabs__tab[aria-selected="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.tabs--center .tabs__list { justify-content: center; }
@media (max-width: 767.98px) { .tabs--center .tabs__list { justify-content: flex-start; } }

/* ---------- 12. Breadcrumbs ---------- */
.breadcrumb { font-size: 12px; color: var(--c-muted); letter-spacing: .04em; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.breadcrumb li + li::before { content: "/"; color: #BDBDBD; margin-right: 2px; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: 32px; color: var(--c-muted); transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb [aria-current="page"] { color: var(--c-ink); }
/* Phones: one line; a long current-page crumb (article / product title) ends in an ellipsis instead of wrapping under a lone "/" */
@media (max-width: 767.98px) {
  .breadcrumb ol { flex-wrap: nowrap; }
  .breadcrumb li { flex-shrink: 0; white-space: nowrap; }
  .breadcrumb li:last-child { flex-shrink: 1; min-width: 0; }
  .breadcrumb li:last-child [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- 13. Section head & page head ---------- */
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: var(--head-gap); }
.section-head__title { display: flex; flex-direction: column; gap: 6px; margin: 0; font-weight: inherit; letter-spacing: 0; }
.section-head__en { font-family: var(--font-display); font-weight: 200; font-size: 44px; line-height: 1.05; letter-spacing: .02em; color: var(--c-ink); }
.section-head__zh { font-family: var(--font-zh); font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: .2em; color: var(--c-ink); }
.section-head__lead { flex: 0 0 100%; max-width: none; padding-right: max(0px, calc(100% - 640px)); color: var(--c-text); font-size: 15px; line-height: 1.9; }
.section-head__link { margin-left: auto; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-head--center .section-head__title { align-items: center; }
.section-head--center .section-head__link { margin-left: 0; }
.section-head--center .section-head__lead { flex: 0 1 auto; max-width: 640px; padding-right: 0; margin-inline: auto; }
.section-head--light .section-head__en, .section-head--light .section-head__zh, .section-head--light .section-head__lead, .section-head--light .link-arrow { color: #fff; }
@media (min-width: 768px) {
  .section-head__en { font-size: 64px; }
  .section-head__zh { font-size: 14px; }
}

.page-head { padding: var(--s-5) 0 var(--s-7); }
.page-head__title { display: flex; flex-direction: column; gap: 8px; margin-top: var(--s-5); letter-spacing: 0; }
.page-head__en { font-family: var(--font-display); font-weight: 200; font-size: 48px; line-height: 1; letter-spacing: .02em; color: var(--c-ink); }
.page-head__zh { font-family: var(--font-zh); font-weight: 500; font-size: 15px; letter-spacing: .2em; color: var(--c-ink); line-height: 1.5; }
.page-head__lead { margin-top: var(--s-4); max-width: 680px; color: var(--c-text); font-size: 15px; line-height: 1.9; }
.page-head--center { text-align: center; }
.page-head--center .page-head__title { align-items: center; }
.page-head--center .page-head__lead { margin-inline: auto; }
.page-head--center .breadcrumb ol { justify-content: center; }
.page-head--stage { background: var(--c-stage); }
@media (min-width: 768px) {
  .page-head { padding: var(--s-6) 0 var(--s-8); }
  .page-head__en { font-size: 80px; }
}

/* Banner (21:9 image with overlay copy) */
.banner { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--c-stage); color: var(--c-ink); }
.banner__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.banner__content { position: absolute; inset: auto 0 0 0; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.banner--dark { color: #fff; }
.banner--dark .banner__content { background: linear-gradient(to top, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); }
.banner--dark h1, .banner--dark h2, .banner--dark .title-en { color: #fff; }
@media (min-width: 768px) {
  .banner__img { aspect-ratio: 21 / 9; }
  .banner__content { inset: 0 auto 0 0; justify-content: center; max-width: 560px; padding: var(--s-8); }
  .banner--dark .banner__content { background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); max-width: 60%; }
}

/* Bands (full-width colour strips) */
.band { padding-block: var(--s-8); }
.band--yellow { background: var(--c-yellow); color: var(--c-ink); }
.band--stage { background: var(--c-stage); }
.band--black { background: var(--c-black); color: #fff; }
.band--black h2, .band--black h3 { color: #fff; }

/* ---------- 14. Cards (generic) ---------- */
.card { background: #fff; border: 1px solid var(--c-line-soft); border-radius: var(--radius-card); padding: var(--s-5); }
.card--stage { background: var(--c-stage); border-color: transparent; }
.card--soft { background: var(--c-stage-2); border-color: transparent; }
.card--outline { border-color: var(--c-line); }
.card--lg { padding: var(--s-6); }
@media (min-width: 768px) { .card--lg { padding: var(--s-7); } }
.card__title { font-size: 18px; font-weight: 500; color: var(--c-ink); margin-bottom: var(--s-2); }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: var(--c-stage-2); color: var(--c-text); font-size: 14px; line-height: 1.7; }
.notice .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--c-ink); }
.notice--warn { background: #FFF6DA; }
.notice--error { background: #FDECEE; color: #8F0410; }
.notice--error .icon { color: var(--c-red); }
.notice--success { background: #E9F5EE; }
.notice--success .icon { color: var(--c-success); }
.legal-note { font-size: 12px; line-height: 1.7; color: var(--c-muted); }

/* Key/value spec table */
.spec-table { width: 100%; border-radius: var(--radius-card); background: var(--c-stage-2); padding: var(--s-2) var(--s-5); font-size: 14px; }
.spec-table__row, .spec-table tr { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.spec-table__row:last-child, .spec-table tr:last-child { border-bottom: 0; }
.spec-table dt, .spec-table th { color: var(--c-muted); font-weight: 400; text-align: left; }
.spec-table dd, .spec-table td { color: var(--c-ink); margin: 0; overflow-wrap: anywhere; }
@media (min-width: 768px) { .spec-table__row, .spec-table tr { grid-template-columns: 160px minmax(0, 1fr); } }

/* Order / price summary */
.summary { display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.summary-row__label { color: var(--c-text); }
.summary-row__value { font-family: "Open Sans", var(--font-zh); font-weight: 600; color: var(--c-ink); white-space: nowrap; }
.summary-row--muted .summary-row__label, .summary-row--muted .summary-row__value { color: var(--c-muted); font-weight: 400; }
.summary-row--total { padding-top: var(--s-3); margin-top: var(--s-1); border-top: 1px solid var(--c-line); font-size: 17px; }
.summary-row--total .summary-row__label { color: var(--c-ink); font-weight: 500; }
.summary-row--total .summary-row__value { font-size: 22px; }

/* Checkout steps */
.steps { display: flex; align-items: center; justify-content: center; gap: var(--s-2); list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--c-muted); }
.steps__item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.steps__num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-line); font: 600 12px/1 "Open Sans", sans-serif; color: var(--c-muted); background: #fff; }
.steps__item + .steps__item::before { content: ""; width: 24px; height: 1px; background: var(--c-line); margin-right: 4px; }
.steps__item.is-current { color: var(--c-ink); font-weight: 500; }
.steps__item.is-current .steps__num { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.steps__item.is-done .steps__num { background: var(--c-stage); border-color: var(--c-stage); color: var(--c-ink); }
@media (min-width: 768px) { .steps { gap: var(--s-3); font-size: 14px; } .steps__item + .steps__item::before { width: 48px; } }
@media (max-width: 420px) { .steps__label { display: none; } .steps__item.is-current .steps__label { display: inline; } }

/* ---------- 15. Product card ---------- */
.product-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.product-card__link { display: flex; flex-direction: column; gap: var(--s-3); color: inherit; }
.product-card__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); background: var(--c-stage); overflow: hidden; }
.product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform-origin: 50% 100%; transition: opacity 200ms var(--ease); }
.product-card__badges { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; }
.product-card__wish { position: absolute; top: 4px; right: 4px; z-index: 3; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--c-ink); transition: transform 200ms var(--ease-bob), color var(--dur); }
.product-card__wish .icon { width: 22px; height: 22px; }
.product-card__wish:hover { transform: scale(1.1); }
.product-card__wish[aria-pressed="true"] { color: var(--c-red); }
.product-card__body { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.product-card__swatches { display: flex; align-items: center; gap: 6px; min-height: 18px; margin-bottom: 4px; }
.product-card__swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--sw, #ccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); transition: box-shadow 150ms var(--ease); }
.product-card__swatch.is-active { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3), 0 0 0 1.5px #fff, 0 0 0 2.5px var(--c-ink); }
.product-card__more { font: 400 12px/1 "Open Sans", sans-serif; color: var(--c-muted); }
.product-card__name-en { font-family: var(--font-display); font-weight: 300; font-size: 22px; line-height: 1.1; letter-spacing: .05em; color: var(--c-ink); }
.product-card__name-zh { font-family: var(--font-zh); font-size: 14px; line-height: 1.6; color: var(--c-text); }
.product-card__price { margin-top: 4px; font-family: "Open Sans", var(--font-zh); font-weight: 600; font-size: 16px; line-height: 1.4; letter-spacing: .02em; color: var(--c-ink); }
.product-card__note { font-size: 12px; color: var(--c-muted); }
.product-card--pending .product-card__img { opacity: .92; }
.product-card__link:hover .product-card__name-en { color: var(--c-cta-strong); }
@media (min-width: 768px) {
  .product-card__name-en { font-size: 26px; }
  .product-card__badges { top: 14px; left: 14px; }
  .product-card__wish { top: 8px; right: 8px; }
}
@media (hover: hover) {
  .product-card__swatch { cursor: pointer; }
}

/* ---------- 16. Event card ---------- */
.event-card { position: relative; min-width: 0; }
.event-card__link { display: flex; flex-direction: column; gap: var(--s-4); height: 100%; color: inherit; }
.event-card__media { position: relative; aspect-ratio: 1 / 1; border-radius: var(--radius-card); overflow: hidden; background: var(--c-stage); }
.event-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.event-card__link:hover .event-card__img { transform: scale(1.03); }
.event-card__status { position: absolute; top: 12px; left: 12px; z-index: 1; }
.event-card__city { position: absolute; top: 12px; right: 12px; z-index: 1; }
.event-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; }
.event-card__title { font-size: 13px; color: var(--c-muted); letter-spacing: .04em; line-height: 1.6; }
.event-card__venue { font-family: var(--font-zh); font-size: 16px; font-weight: 500; color: var(--c-ink); line-height: 1.5; }
.event-card__floor { font-weight: 400; font-size: 14px; color: var(--c-text); margin-left: 4px; }
.event-card__meta { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.6; color: var(--c-text); }
.event-card__meta .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--c-muted); }
.event-card__hours { color: var(--c-muted); }
.event-card__hours > span { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event-card__countdown { font-size: 14px; font-weight: 600; color: var(--c-cta-strong); letter-spacing: .04em; }
.event-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; } /* countdown rows line up across a card row */
.event-card.is-ended .event-card__img { filter: grayscale(1); opacity: .75; }
.event-card.is-ended .event-card__countdown { color: var(--c-muted); font-weight: 400; }
.event-card.is-last-days .event-card__countdown { color: var(--c-red); }

/* ---------- 17. Store card ---------- */
.store-card { display: flex; flex-direction: column; gap: var(--s-3); height: 100%; padding: var(--s-5); border: 1px solid var(--c-line-soft); border-radius: var(--radius-card); background: #fff; }
.store-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.store-card__name { font-family: var(--font-zh); font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--c-ink); letter-spacing: .02em; }
.store-card__meta { display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 1.6; }
.store-card__meta li { display: flex; align-items: flex-start; gap: 8px; }
.store-card__meta .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--c-muted); }
.store-card__map { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--c-cta-strong); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.store-card__series { display: flex; flex-wrap: wrap; gap: 6px; }
.store-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--c-line-soft); }
.store-card__url { display: inline-flex; align-items: center; min-height: 32px; font-size: 13px; color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 18. Series tile ---------- */
.series-tile { display: flex; flex-direction: column; gap: var(--s-3); color: inherit; min-width: 0; }
.series-tile__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-card); overflow: hidden; background: var(--c-stage); }
.series-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.series-tile:hover .series-tile__img { transform: scale(1.03); }
.series-tile__badge { position: absolute; top: 12px; left: 12px; }
.series-tile__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 2px; }
.series-tile__en { font-family: var(--font-display); font-weight: 300; font-size: clamp(20px, 5.6vw, 24px); line-height: 1.05; letter-spacing: .03em; color: var(--c-ink); } /* "Chrome & Gold" stays on one line in a 2-up mobile grid */
.series-tile__zh { font-family: var(--font-zh); font-size: 13px; color: var(--c-text); line-height: 1.6; margin-top: 2px; }
.series-tile__arrow { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-ink); transition: all var(--dur) var(--ease); }
.series-tile__arrow .icon { width: 18px; height: 18px; }
.series-tile:hover .series-tile__arrow { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
@media (min-width: 768px) { .series-tile__en { font-size: 28px; letter-spacing: .04em; } .series-tile__zh { font-size: 14px; } }

/* ---------- 19. Hello bar ---------- */
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--c-ink); color: #fff; font-size: 14px; font-weight: 500; transition: top 150ms var(--ease); }
.skip-link:focus { top: 8px; }
.hello-bar { position: relative; height: var(--hello-h); background: var(--c-black); color: #fff; font-size: 13px; line-height: 1.3; letter-spacing: .04em; overflow: hidden; }
.hello-bar__track { position: relative; height: 100%; }
.hello-bar__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 var(--gutter); color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; visibility: hidden; transition: opacity 500ms var(--ease), visibility 0s linear 500ms; }
.hello-bar__item.is-active { opacity: 1; visibility: visible; transition: opacity 500ms var(--ease), visibility 0s; }
.hello-bar__item .icon { width: 16px; height: 16px; flex-shrink: 0; }
.hello-bar__text { overflow: hidden; text-overflow: ellipsis; }
.hello-bar__cta { flex-shrink: 0; text-decoration: underline; text-underline-offset: 3px; }
.hello-bar__sample { flex-shrink: 0; padding: 1px 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); font-size: 10px; letter-spacing: .1em; color: #ddd; }
a.hello-bar__item:hover .hello-bar__text { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 768px) { .hello-bar { font-size: 14px; } }
@media (max-width: 767.98px) { .hello-bar__extra { display: none; } }
@media (max-width: 420px) { .hello-bar__cta { display: none; } }

/* ---------- 20. Header ---------- */
/* #site-header is only an injection mount; display:contents lets the sticky
   header use <body> as its containing block. */
#site-header { display: contents; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.site-header.is-scrolled { border-bottom-color: var(--c-line-soft); }
.site-header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); height: var(--header-h); transition: height var(--dur) var(--ease); }
.site-header__left, .site-header__actions { display: flex; align-items: center; gap: 2px; }
.site-header__logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-header__logo img { width: 110px; height: auto; aspect-ratio: 383 / 133; transition: width var(--dur) var(--ease); }
.site-header__logo:hover img { animation: hop-bob-y .9s var(--ease-bob) 1; }
.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-ink); color: #fff; }
.menu-toggle .icon { width: 22px; height: 22px; }
.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.site-nav__link { position: relative; display: inline-flex; align-items: center; height: 44px; font-family: var(--font-zh); font-size: 15px; font-weight: 500; letter-spacing: .08em; color: var(--c-ink); white-space: nowrap; }
.site-nav__link::after { content: ""; position: absolute; left: 0; right: .08em; bottom: 6px; height: 2px; background: var(--c-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); }
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-header__member-label { display: none; }
@media (max-width: 1023.98px) {
  .site-header__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .site-header__actions .icon-btn--desktop { display: none; }
}
@media (min-width: 1024px) {
  .menu-toggle { display: none; }
  .site-header__left { display: none; }
  .site-header__logo img { width: 130px; }
  .site-header.is-scrolled .site-header__inner { height: 64px; }
  .site-header.is-scrolled .site-header__logo img { width: 110px; }
  .site-nav { display: block; position: absolute; left: 50%; transform: translateX(-50%); }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .site-nav__list { gap: 20px; }
  .site-nav__link { font-size: 14px; letter-spacing: .06em; }
}

/* ---------- 21. Mobile menu ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 300; visibility: hidden; opacity: 0; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: opacity 300ms var(--ease), visibility 0s linear 300ms; overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu.is-open { visibility: visible; opacity: 1; transition: opacity 300ms var(--ease), visibility 0s; }
.mobile-menu__inner { display: flex; flex-direction: column; min-height: 100%; padding: 0 var(--gutter) var(--s-7); }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; height: 56px; flex-shrink: 0; }
.mobile-menu__top img { width: 110px; height: auto; }
.mobile-menu__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-ink); color: #fff; }
.mobile-menu__list { list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.mobile-menu__list li { opacity: 0; transform: translateY(12px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); }
.mobile-menu.is-open .mobile-menu__list li { opacity: 1; transform: none; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(2) { transition-delay: 40ms; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) { transition-delay: 80ms; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(4) { transition-delay: 120ms; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(5) { transition-delay: 160ms; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(6) { transition-delay: 200ms; }
.mobile-menu__link { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-line-soft); color: var(--c-ink); }
.mobile-menu__en { font-family: var(--font-display); font-weight: 200; font-size: 40px; line-height: 1.1; letter-spacing: .02em; }
.mobile-menu__zh { font-family: var(--font-zh); font-size: 15px; font-weight: 500; letter-spacing: .1em; }
.mobile-menu__link[aria-current="page"] .mobile-menu__en { font-weight: 400; }
.mobile-menu__link[aria-current="page"] .mobile-menu__zh::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--c-cta); vertical-align: middle; }
.mobile-menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); list-style: none; margin: var(--s-5) 0 0; padding: 0; }
.mobile-menu__sub a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--c-ink); }
.mobile-menu__sub .icon { width: 18px; height: 18px; color: var(--c-muted); }
.mobile-menu__foot { display: flex; flex-direction: column; gap: var(--s-3); margin-top: auto; padding-top: var(--s-6); }
.mobile-menu__foot .btn { width: 100%; }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* ---------- 22. Search overlay ---------- */
.search-overlay { position: fixed; inset: 0; z-index: 310; visibility: hidden; transition: visibility 0s linear 300ms; }
.search-overlay.is-open { visibility: visible; transition: visibility 0s; }
.search-overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity 300ms var(--ease); }
.search-overlay.is-open .search-overlay__backdrop { opacity: 1; }
.search-overlay__panel { position: relative; background: #fff; padding: var(--s-4) 0 var(--s-6); transform: translateY(-100%); transition: transform 300ms var(--ease); max-height: 100vh; overflow-y: auto; box-shadow: var(--shadow-pop); }
.search-overlay.is-open .search-overlay__panel { transform: none; }
.search-overlay__form { display: flex; align-items: center; gap: var(--s-2); }
.search-overlay__field { position: relative; flex: 1; min-width: 0; }
.search-overlay__field .icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-muted); pointer-events: none; }
.search-overlay__input { width: 100%; height: 52px; padding: 0 16px 0 46px; border: 1px solid var(--c-line); border-radius: var(--radius-pill); font-size: 16px; background: var(--c-stage-2); -webkit-appearance: none; appearance: none; }
.search-overlay__input:focus { outline: none; border-color: var(--c-ink); background: #fff; }
.search-overlay__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-overlay__label { margin: var(--s-5) 0 var(--s-3); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--c-muted); }
.search-overlay__results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.search-result { display: flex; align-items: center; gap: var(--s-3); padding: 8px; border-radius: 12px; color: var(--c-ink); }
.search-result:hover, .search-result:focus-visible { background: var(--c-stage-2); }
.search-result__img { width: 56px; height: 56px; flex-shrink: 0; border-radius: 10px; background: var(--c-stage); overflow: hidden; }
.search-result__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.search-result__name { font-size: 15px; font-weight: 500; line-height: 1.4; }
.search-result__meta { font-size: 13px; color: var(--c-muted); }
.search-overlay__empty { font-size: 14px; color: var(--c-muted); padding: 8px 0; }
@media (min-width: 768px) { .search-overlay__panel { padding: var(--s-6) 0 var(--s-7); } .search-overlay__results { grid-template-columns: 1fr 1fr; } }

/* ---------- 23. Drawer, modal, overlay ---------- */
html.is-locked { overflow: hidden; }
.drawer { position: fixed; inset: 0; z-index: 400; visibility: hidden; transition: visibility 0s linear 320ms; }
.drawer.is-open { visibility: visible; transition: visibility 0s; }
.drawer__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity 320ms var(--ease); }
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 85vh; max-height: 85dvh; background: #fff; border-radius: 20px 20px 0 0; box-shadow: var(--shadow-pop); transform: translateY(100%); transition: transform 320ms var(--ease); outline: none; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer__handle { flex-shrink: 0; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--c-line); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-5) var(--s-3); border-bottom: 1px solid var(--c-line-soft); flex-shrink: 0; }
.drawer__title { font-family: var(--font-zh); font-size: 18px; font-weight: 500; color: var(--c-ink); letter-spacing: .04em; display: flex; align-items: center; gap: 8px; }
.drawer__title-count { font: 400 14px "Open Sans", sans-serif; color: var(--c-muted); }
.drawer__close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px; border-radius: 50%; color: var(--c-ink); }
.drawer__close:hover { background: var(--c-stage); }
.drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-4) var(--s-5); -webkit-overflow-scrolling: touch; }
.drawer__foot { flex-shrink: 0; padding: var(--s-4) var(--s-5) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-line-soft); background: #fff; display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 768px) {
  .drawer__panel { left: auto; top: 0; width: 440px; max-width: 100%; max-height: none; height: 100%; border-radius: 0; transform: translateX(100%); }
  .drawer__handle { display: none; }
  .drawer__head { padding: var(--s-5) var(--s-6) var(--s-4); }
  .drawer__body { padding: var(--s-4) var(--s-6); }
  .drawer__foot { padding: var(--s-5) var(--s-6); }
  .drawer--left .drawer__panel { right: auto; left: 0; transform: translateX(-100%); }
  .drawer--left.is-open .drawer__panel, .drawer.is-open .drawer__panel { transform: none; }
}
/* Modal variant (centred dialog on desktop, bottom sheet on mobile) */
@media (min-width: 768px) {
  .drawer--modal .drawer__panel { top: 50%; left: 50%; right: auto; bottom: auto; width: min(520px, calc(100vw - 48px)); height: auto; max-height: calc(100vh - 64px); border-radius: var(--radius-card); transform: translate(-50%, -46%); opacity: 0; transition: transform 320ms var(--ease), opacity 320ms var(--ease); }
  .drawer--modal.is-open .drawer__panel { transform: translate(-50%, -50%); opacity: 1; }
  .drawer--modal .drawer__head { border-bottom: 0; padding-bottom: 0; }
  .drawer--modal .drawer__foot { border-top: 0; padding-top: 0; }
}

/* ---------- 24. Cart drawer items & free-shipping bar ---------- */
.cart-list { list-style: none; margin: 0; padding: 0; }
.cart-item { display: grid; grid-template-columns: 84px 1fr; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--c-line-soft); }
.cart-item:last-child { border-bottom: 0; }
.cart-item__img { display: block; width: 84px; height: 84px; border-radius: 12px; background: var(--c-stage); overflow: hidden; }
.cart-item__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cart-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-item__top { display: flex; justify-content: space-between; gap: 8px; }
.cart-item__name { font-size: 15px; font-weight: 500; color: var(--c-ink); line-height: 1.45; }
.cart-item__name-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; }
.cart-item__variant { font-size: 13px; color: var(--c-muted); }
.cart-item__unit { font: 400 13px "Open Sans", sans-serif; color: var(--c-muted); }
.cart-item__bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: var(--s-2); }
.cart-item__price { font: 600 15px "Open Sans", sans-serif; color: var(--c-ink); white-space: nowrap; }
.cart-item__remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: -6px -8px 0 0; border-radius: 50%; color: var(--c-muted); flex-shrink: 0; }
.cart-item__remove:hover { color: var(--c-ink); background: var(--c-stage-2); }
.cart-item__remove .icon { width: 18px; height: 18px; }
/* 44px tap area for the compact stepper buttons and the drawer remove button */
.qty--sm .qty__btn, .cart-item__remove { position: relative; }
.qty--sm .qty__btn::after, .cart-item__remove::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.cart-item__warn { font-size: 12px; color: var(--c-red); }

.ship-progress { display: flex; flex-direction: column; gap: 8px; padding: var(--s-3) var(--s-4); border-radius: 12px; background: var(--c-stage-2); }
.ship-progress__text { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.5; color: var(--c-ink); }
.ship-progress__text .icon { width: 18px; height: 18px; flex-shrink: 0; }
.ship-progress__text strong { font-family: "Open Sans", var(--font-zh); font-weight: 700; }
.ship-progress__bar { position: relative; height: 4px; border-radius: 2px; background: var(--c-line); overflow: hidden; }
.ship-progress__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 2px; background: var(--c-ink); transition: width 500ms var(--ease); }
.ship-progress.is-free .ship-progress__fill { background: var(--c-success); }
.ship-progress.is-free .ship-progress__text .icon { color: var(--c-success); }

/* ---------- 25. Floating LINE button ---------- */
.line-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-line-green); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity 250ms var(--ease), transform 250ms var(--ease-bob); }
.line-float .icon { width: 30px; height: 30px; }
.line-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
@media (min-width: 768px) { .line-float { display: none; } }

/* ---------- 26. Toast ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 600; display: flex; flex-direction: column; align-items: center; gap: 8px; width: calc(100% - 32px); max-width: 420px; transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; padding: 12px 18px; border-radius: var(--radius-pill); background: var(--c-ink); color: #fff; font-size: 14px; line-height: 1.5; box-shadow: var(--shadow-pop); pointer-events: auto; animation: toast-in 300ms var(--ease-bob); }
.toast .icon { width: 18px; height: 18px; flex-shrink: 0; }
.toast--success .icon { color: #7CE0A8; }
.toast--error { background: #8F0410; }
.toast--warn .icon { color: var(--c-yellow); }
.toast.is-leaving { animation: toast-out 250ms var(--ease) forwards; }
@media (min-width: 768px) { .toast-wrap { left: auto; right: 24px; bottom: 24px; transform: none; align-items: flex-end; } }
/* While a drawer/sheet is open, move toasts away from its action buttons */
html.is-locked .toast-wrap { top: calc(16px + env(safe-area-inset-top, 0px)); bottom: auto; }
@media (min-width: 768px) { html.is-locked .toast-wrap { top: 24px; left: 24px; right: auto; align-items: flex-start; } }

/* ---------- 27. Footer ---------- */
.site-footer { margin-top: auto; background: var(--c-black); color: #fff; font-size: 14px; padding: var(--s-8) 0 var(--s-6); }
.site-footer a { color: #fff; }
.site-footer__top { display: flex; flex-direction: column; gap: var(--s-5); padding-bottom: var(--s-6); border-bottom: 1px solid rgba(255, 255, 255, .14); }
.site-footer__logo img { width: 140px; height: auto; }
.site-footer__tagline { max-width: 460px; color: #D6D6D6; font-size: 14px; line-height: 1.9; }
.site-footer__social { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.site-footer__social .btn { min-height: 44px; padding: 0 20px; font-size: 14px; }
.site-footer__cols { display: grid; padding: var(--s-4) 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer-col { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.footer-col:last-child { border-bottom: 0; }
.footer-col__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; color: #fff; font-family: var(--font-zh); font-size: 15px; font-weight: 500; letter-spacing: .08em; text-align: left; }
.footer-col__toggle .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.footer-col.is-open .footer-col__toggle .icon { transform: rotate(180deg); }
.footer-col__list { display: none; list-style: none; margin: 0; padding: 0 0 var(--s-4); }
.footer-col.is-open .footer-col__list { display: block; }
.footer-col__list li a, .footer-col__list li > span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: #D6D6D6; font-size: 14px; transition: color var(--dur) var(--ease); }
.footer-col__list li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-col__list .icon { width: 16px; height: 16px; color: #9A9A9A; }
.site-footer__pay { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5) 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.site-footer__pay-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.site-footer__pay-label { font-size: 12px; color: #9A9A9A; letter-spacing: .1em; margin-right: 6px; min-width: 56px; }
.pay-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .25); color: #E8E8E8; font: 600 11px/1 "Open Sans", var(--font-zh); letter-spacing: .04em; white-space: nowrap; }
.pay-chip--light { border-color: var(--c-line); color: var(--c-ink); background: #fff; }
.site-footer__legal { padding: var(--s-5) 0 var(--s-3); font-size: 12px; line-height: 1.9; color: var(--c-footer-muted); }
.site-footer__legal strong { color: #fff; font-weight: 500; letter-spacing: .04em; }
.site-footer__legal p + p { margin-top: 6px; }
.site-footer__legal .sep { margin: 0 6px; color: #666; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding-top: var(--s-3); font-size: 12px; color: #9A9A9A; }
.site-footer__bottom-links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.site-footer__bottom-links a { color: #BDBDBD; display: inline-flex; min-height: 32px; align-items: center; }
.site-footer__bottom-links a:hover { color: #fff; }
@media (min-width: 768px) {
  .site-footer { padding: var(--s-9) 0 var(--s-6); }
  .site-footer__top { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .site-footer__top-main { display: flex; flex-direction: column; gap: var(--s-4); }
  .site-footer__cols { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); padding: var(--s-7) 0; }
  .footer-col { border-bottom: 0; }
  .footer-col__toggle { min-height: 0; margin-bottom: var(--s-3); pointer-events: none; cursor: default; }
  .footer-col__toggle .icon { display: none; }
  .footer-col__list { display: block; padding: 0; }
  .footer-col__list li a, .footer-col__list li > span { min-height: 34px; }
  .site-footer__pay { flex-direction: row; flex-wrap: wrap; gap: var(--s-3) var(--s-7); }
}

/* ---------- 28. Pagination, empty state, skeleton ---------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; list-style: none; padding: 0; margin: var(--s-7) 0 0; }
.pagination__item { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border-radius: 50%; font: 600 14px "Open Sans", sans-serif; color: var(--c-ink); transition: background-color var(--dur) var(--ease); }
.pagination__item:hover { background: var(--c-stage); }
.pagination__item.is-current, .pagination__item[aria-current="page"] { background: var(--c-ink); color: #fff; }
.pagination__item.is-disabled, .pagination__item[aria-disabled="true"] { color: #BDBDBD; pointer-events: none; }
.pagination__item .icon { width: 18px; height: 18px; }
.pagination__ellipsis { color: var(--c-muted); padding: 0 4px; }
.load-more { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-7); font-size: 13px; color: var(--c-muted); }

.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-8) var(--s-4); text-align: center; }
.empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--c-stage); color: var(--c-ink); margin-bottom: var(--s-2); }
.empty-state__icon .icon { width: 30px; height: 30px; }
.empty-state__title { font-family: var(--font-zh); font-size: 18px; font-weight: 500; color: var(--c-ink); }
.empty-state__text { max-width: 360px; font-size: 14px; color: var(--c-muted); line-height: 1.8; }
.empty-state .btn { margin-top: var(--s-3); }
.empty-state--compact { padding: var(--s-6) var(--s-3); }

.skeleton { position: relative; overflow: hidden; background: var(--c-stage); border-radius: 8px; }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); animation: shimmer 1.4s infinite; }
.skeleton--tile { aspect-ratio: 1 / 1; border-radius: var(--radius-card); }
.skeleton--portrait { aspect-ratio: 4 / 5; border-radius: var(--radius-card); }
.skeleton--text { height: 14px; margin-top: 10px; }
.skeleton--title { height: 22px; width: 60%; margin-top: 12px; }
.skeleton--short { width: 40%; }

/* ---------- 29. Misc components ---------- */
.kv-list { display: flex; flex-direction: column; gap: 8px; list-style: none; padding: 0; margin: 0; font-size: 14px; }
.kv-list li { display: flex; gap: 8px; align-items: flex-start; }
.kv-list .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--c-muted); }
.icon-list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.icon-list li { display: flex; align-items: flex-start; gap: 10px; }
.icon-list .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--c-ink); flex-shrink: 0; }
.feature-row { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .feature-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: var(--s-4) var(--s-2); }
.feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-stage); }
.feature__icon .icon { width: 24px; height: 24px; }
.feature__title { font-size: 15px; font-weight: 500; color: var(--c-ink); }
.feature__text { font-size: 13px; color: var(--c-muted); line-height: 1.7; }
.share-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.share-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line); color: var(--c-ink); background: #fff; transition: all var(--dur) var(--ease); }
.share-btn:hover { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.share-btn--line:hover { background: var(--c-line-green); border-color: var(--c-line-green); }
.share-btn .icon { width: 20px; height: 20px; }
.map-embed { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--c-stage); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) { .map-embed { aspect-ratio: 16 / 9; } }
.circle-link { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--c-ink); }
.circle-link__img { width: 100%; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--c-stage); }
.circle-link__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.circle-link:hover .circle-link__img img { transform: scale(1.05); }
.circle-link__label { font-size: 14px; font-weight: 500; letter-spacing: .04em; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-stage); color: var(--c-ink); font: 600 20px var(--font-zh); flex-shrink: 0; }
.avatar--line { background: var(--c-line-green); color: #fff; }

/* Reveal on scroll (only when JS active) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- 30. Motion ---------- */
@keyframes hop-bob { 0% { transform: translateY(0) scaleY(1); } 18% { transform: translateY(-8px) scaleY(1.02); } 36% { transform: translateY(0) scaleY(.97); } 54% { transform: translateY(-4px); } 72% { transform: translateY(0) scaleY(.99); } 86% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
@keyframes hop-bob-y { 0% { transform: translateY(0); } 18% { transform: translateY(-5px); } 36% { transform: translateY(0); } 54% { transform: translateY(-2.5px); } 72% { transform: translateY(0); } 86% { transform: translateY(-1px); } 100% { transform: translateY(0); } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes acc-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

.bob:hover img, .bob:focus-within img, .bob.is-bobbing img,
.product-card:hover .product-card__img, .product-card.is-bobbing .product-card__img {
  animation: hop-bob .9s var(--ease-bob) 1; transform-origin: 50% 100%;
}
.bob-once { animation: hop-bob .9s var(--ease-bob) 1; transform-origin: 50% 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .bob:hover img, .bob:focus-within img, .product-card:hover .product-card__img, .site-header__logo:hover img, .bob-once { animation: none !important; }
  .badge--now::before { animation: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- 31. Print ---------- */
@media print {
  .hello-bar, .site-header, .site-footer, .drawer, .mobile-menu, .search-overlay, .line-float, .toast-wrap, .skip-link, .product-card__wish { display: none !important; }
  body { color: #000; background: #fff; font-size: 12pt; }
  a { text-decoration: underline; }
  .section { padding-block: 16pt; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* DK-style header icons (Hoptimist head = member, heart = wishlist, bag = cart) */
.icon--brand { display: block; }
.icon-btn--member .icon--brand-head { width: 30px; height: 28px; }
.icon-btn--member.is-logged-in::after { content: ""; position: absolute; right: 6px; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-green); box-shadow: 0 0 0 2px #fff; }

/* ---------- Main nav, hoptimist.jp style: English (Yanone) by default, Chinese on hover/focus ---------- */
@media (min-width: 1024px) {
  .site-header__inner { justify-content: flex-start; }
  .site-nav { position: static; transform: none; flex: 1 1 auto; min-width: 0; }
  .site-nav__list { justify-content: center; gap: 36px; }
  .site-header__actions { margin-left: auto; }
}
/* Item width follows the English label only (even visual gaps); the Chinese label is centred over it and may extend a little sideways. */
.site-nav__link { display: inline-grid; place-items: center; height: 44px; clip-path: inset(0 -40px); font-family: var(--font-display); letter-spacing: 0; }
.site-nav__en, .site-nav__zh { grid-area: 1 / 1; white-space: nowrap; transition: opacity .28s var(--ease), transform .28s var(--ease); }
.site-nav__zh { position: absolute; inset: 0 -40px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.site-nav__en { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1; letter-spacing: .01em; }
.site-nav__zh { font-family: var(--font-zh); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: .12em; opacity: 0; transform: translateY(70%); }
.site-nav__link:hover .site-nav__en, .site-nav__link:focus-visible .site-nav__en { opacity: 0; transform: translateY(-70%); }
.site-nav__link:hover .site-nav__zh, .site-nav__link:focus-visible .site-nav__zh { opacity: 1; transform: translateY(0); }
.site-nav__link:hover::after { transform: scaleX(0); }
.site-nav__link::after { bottom: 3px; right: 0; background: currentColor; }
.site-nav__link[aria-current="page"] { color: #B3B3B3; }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .site-nav__list { gap: 26px; }
  .site-nav__en { font-size: 21px; }
  .site-nav__zh { font-size: 14px; letter-spacing: .08em; }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .site-nav__list { gap: 26px; }
  .site-nav__en { font-size: 20px; }
  .site-nav__zh { letter-spacing: .04em; }
}
@media (prefers-reduced-motion: reduce) {
  .site-nav__en, .site-nav__zh { transition: opacity .15s linear; transform: none !important; }
}

/* Browse-only launch: 「線上購物即將開放」 block (HOP.shopSoonHTML — product buy box, cart, checkout, drawer, account) */
.shop-soon { display: flex; gap: var(--s-4); align-items: flex-start; padding: var(--s-5); border-radius: var(--radius-card); background: var(--c-stage-2); color: var(--c-text); }
.shop-soon__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--c-ink); }
.shop-soon__body { flex: 1; min-width: 0; }
.shop-soon__title { margin: 0 0 6px; font-family: var(--font-zh); font-size: 18px; font-weight: 500; line-height: 1.4; color: var(--c-ink); }
.shop-soon__text { margin: 0; font-size: 14px; line-height: 1.8; }
.shop-soon__note { margin: var(--s-3) 0 0; font-size: 13px; line-height: 1.7; color: var(--c-muted); }
.shop-soon__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.shop-soon__actions .btn { flex: 0 1 auto; }
.shop-soon--compact { padding: var(--s-4); gap: var(--s-3); }
.shop-soon--compact .shop-soon__icon { width: 40px; height: 40px; }
.shop-soon--compact .shop-soon__title { font-size: 16px; }
.shop-soon--drawer { margin: var(--s-2) 0; flex-direction: column; align-items: center; text-align: center; }
.shop-soon--drawer .shop-soon__actions { justify-content: center; }
.shop-soon--page { max-width: 640px; margin: var(--s-5) auto; flex-direction: column; align-items: center; text-align: center; padding: var(--s-7) var(--s-5); }
.shop-soon--page .shop-soon__icon { width: 64px; height: 64px; }
.shop-soon--page .shop-soon__title { font-size: 22px; }
.shop-soon--page .shop-soon__actions { justify-content: center; }
@media (max-width: 479px) {
  .shop-soon { flex-direction: column; }
  .shop-soon__actions .btn { flex: 1 1 100%; justify-content: center; }
}