/* ==========================================================================
   WINHO — 輕珠寶
   設計語言：台港輕珠寶文藝風（對標 artewhite.com）
   ── 中文宋體、置中排版、白色圓角商品卡、純白底、英文標題半粗寬字距。
   全站自足：無 CDN、無外部字型、無 inline script/style，維持最嚴格的 CSP。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 字型
   Cormorant Garamond 走拉丁標題；Noto Serif TC 走中文與內文。
   中文是「書卷氣」的來源，所以連內文、價格、按鈕都用宋體，不混黑體。
   CJK 檔案是依全站實際用字裁切過的子集（約 900 字，兩個字重共 420KB）。
   改過中文文案後要重新產生子集，否則新字會掉回系統宋體。
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif TC";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/notoseriftc-subset-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif TC";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/notoseriftc-subset-600.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* 底色：純白為主，極淺暖白做區塊分隔，米色做窄帶 */
  --paper: #ffffff;
  --paper-2: #faf9f7;
  --paper-3: #f3efe9;

  /* 墨色：標題近黑，內文是 artewhite 的那個淺灰 #6f6f6f */
  --ink: #1a1a1a;
  --ink-2: #6f6f6f;
  --ink-3: #9d968c;
  --ink-soft: #8b8175; /* 商品名的柔棕灰 */

  --line: #e6e2dc;
  --line-2: #d8d2c8;
  --gold: #b99f72;
  --danger: #9b4436;

  --font-display: "Cormorant Garamond", "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-body: "Noto Serif TC", "Songti TC", "PMingLiU", "MingLiU", serif;

  /* 置中排版的小標籤：寬字距大寫 */
  --caps-size: 0.6875rem;
  --caps-track: 0.24em;

  --content: 1200px;
  --gutter: clamp(20px, 5vw, 60px);
  --page-gutter: max(var(--gutter), calc((100vw - var(--content)) / 2));
  --header-height: 84px;
  --section-y: clamp(64px, 9vw, 132px);

  --radius: 10px;
  --radius-sm: 6px;
  --card-shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 10px 30px rgba(26, 26, 26, 0.05);
  --card-shadow-hover: 0 2px 6px rgba(26, 26, 26, 0.06), 0 18px 44px rgba(26, 26, 26, 0.09);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 560ms;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0.05em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.is-scroll-locked {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

/* 拉丁標題：Cormorant 半粗 + 正字距（不是細體負字距，那是另一種審美） */
h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-wrap: balance;
}

/* 中文標題落在同一組字級上，但宋體要更寬的字距才撐得住 */
:lang(zh) h1,
:lang(zh) h2,
:lang(zh) h3 {
  letter-spacing: 0.1em;
}

p {
  text-wrap: pretty;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   4. 共用排版
   -------------------------------------------------------------------------- */
.aw-kicker,
.eyebrow,
.product-kicker,
.checkout-index,
.policy-number,
.support-card-number {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-body);
  font-size: var(--caps-size);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: var(--caps-track);
  text-transform: uppercase;
}

/* 區塊標題一律置中——這是台港輕珠寶最明顯的版式特徵 */
.aw-section-heading,
.aw-section-heading-left {
  display: grid;
  gap: 14px;
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}

.aw-section-heading h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.375rem);
}

.aw-section-heading > p:last-child:not(.aw-kicker) {
  max-width: 30em;
  margin-inline: auto;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   5. 按鈕與連結
   小、細框、宋體、寬字距。不要大色塊。
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 32px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease),
    border-color var(--slow) var(--ease);
}

.button-primary {
  background: var(--ink);
  color: #fff;
}

.button-primary:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
}

.button-secondary:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.full-width {
  width: 100%;
}

/* Hero 的 SHOP 連結：白底細框小方按鈕 */
.aw-outline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 30px;
  border: 1px solid var(--ink);
  border-radius: 2px;
  color: var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease);
}

.aw-outline-link:hover {
  background: var(--ink);
  color: #fff;
}

.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: var(--caps-size);
  letter-spacing: var(--caps-track);
  transition: color var(--slow) var(--ease);
}

.text-button:hover {
  color: var(--ink);
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 2px;
  background: var(--ink);
  color: #fff;
  font-size: var(--caps-size);
  letter-spacing: var(--caps-track);
  transform: translateY(-160%);
  transition: transform 200ms var(--ease);
}

.skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   6. 公告帶 + 頁首
   -------------------------------------------------------------------------- */
.announcement {
  background: var(--paper-3);
  color: var(--ink);
  text-align: center;
}

.announcement p {
  margin: 0;
  padding: 12px var(--gutter);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(12px);
}

/* logo 靠左、主選單置中、功能鍵靠右 */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: var(--header-height);
  padding-inline: var(--page-gutter);
}

.checkout-header-inner,
.policy-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  min-height: var(--header-height);
  padding-inline: var(--page-gutter);
}

.brand {
  justify-self: start;
  grid-column: 1;
  grid-row: 1;
  display: block;
}

.checkout-header-inner .brand,
.policy-header-inner .brand {
  justify-self: center;
  grid-column: 2;
}

.brand-logo {
  width: auto;
  height: 26px;
}

.primary-nav {
  justify-self: center;
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: 38px;
}

.primary-nav a {
  position: relative;
  padding-block: 4px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  transition: color var(--slow) var(--ease);
}

.primary-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform 380ms var(--ease);
}

.primary-nav a:hover {
  color: var(--gold);
}

.primary-nav a:hover::after {
  transform: scaleX(1);
}

.header-actions {
  justify-self: end;
  grid-column: 3;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.header-action,
.mobile-menu-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  transition: opacity var(--slow) var(--ease);
}

.header-action:hover,
.mobile-menu-button:hover {
  opacity: 0.5;
}

.header-icon,
.inline-icon {
  width: 17px;
  height: 17px;
}

.mobile-menu-button {
  display: none;
  justify-self: start;
  grid-column: 1;
  grid-row: 1;
}

.favorites-trigger.is-active {
  color: var(--gold);
}

.cart-count,
.favorites-count {
  position: absolute;
  top: 3px;
  right: 1px;
  min-width: 15px;
  height: 15px;
  padding-inline: 4px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.5625rem;
  line-height: 15px;
  letter-spacing: 0;
  text-align: center;
}

.favorites-count {
  background: var(--gold);
}

.site-language-switch,
.modal-language-switch,
.checkout-header nav {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 4px;
}

.site-language-switch button,
.modal-language-switch button,
.checkout-header nav button {
  padding: 6px 8px;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  transition: color var(--slow) var(--ease);
}

.site-language-switch button + button,
.modal-language-switch button + button,
.checkout-header nav button + button {
  border-left: 1px solid var(--line);
}

.site-language-switch button:hover,
.modal-language-switch button:hover,
.checkout-header nav button:hover,
.site-language-switch button[aria-pressed="true"],
.modal-language-switch button[aria-pressed="true"],
.checkout-header nav button[aria-pressed="true"] {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   7. Hero — 左文案、右大圖（照 artewhite 的結構）
   -------------------------------------------------------------------------- */
/* 整幅橫幅：圖鋪滿整個區塊，文字壓在左側那片光影牆上。
   海報本身就是為這個排版拍的——右邊是人，左邊整片留白給字。
   用 grid 疊圖層而不是 absolute，兩層都在文件流裡，區塊高度由圖決定，
   不會出現「父層塌掉」那種要靠固定高度硬撐的情況。 */
.aw-hero {
  display: grid;
  background: var(--paper);
}

.aw-hero-media,
.aw-hero-copy {
  grid-area: 1 / 1;
}

.aw-hero-media {
  margin: 0;
  overflow: hidden;
  /* 不要被 grid 拉伸：一拉伸，下面的 aspect-ratio 就失效，
     圖會被撐高再從左右裁掉，左邊那片亮牆先不見。 */
  align-self: start;
}

.aw-hero-media img {
  width: 100%;
  height: auto;
  /* 完全跟著海報自己的比例（1947×808），整張都看得到。
     這裡刻意不設 max-height：設了之後，寬螢幕上高度會被夾住，
     cover 就改成上下裁切——切掉的正好是她的頭頂與半張臉。
     海報本來就是為這個版面拍的，讓它自然決定高度就對了。 */
  aspect-ratio: 1947 / 808;
  object-fit: cover;
  object-position: right center;
  display: block;
}

.aw-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 20px;
  /* 比一般版心再往內一點，字才不會貼著畫面邊緣 */
  padding-inline: max(var(--page-gutter), 10vw);
  /* 寬度剛好讓標題斷在逗號後成兩行；再窄就會擠成三、四行，
     重心整個往下沉，跟效果圖差很多。右半留給人物。 */
  max-width: min(660px, 52%);
  text-align: left;
}

.aw-hero h1 {
  /* 寬度交給 .aw-hero-copy 控制：那裡的 max-width 已經算過，
     「Quiet Jewellery, / Distinctly Winho」剛好斷成兩行。
     這裡再加 max-width 只會又把它擠窄。 */
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.02em;
}

/* 小標底下那條金線。比文字再長一截，收在文字右緣外面一點，
   跟效果圖一樣是「壓在字下」而不是「框住字」。 */
.aw-hero .aw-kicker {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gold);
  padding-right: 2.2em;
}

.aw-hero-lead {
  /* 24em 讓中文剛好斷成兩行：「…每日穿戴，」/「陪伴每一個值得紀念的時刻。」 */
  max-width: 24em;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 2.1;
  letter-spacing: 0.08em;
}

/* CTA：文字 + 箭頭，底下一條通到底的細線 */
.aw-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.4em;
  min-width: 15em;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-decoration: none;
  transition: color 240ms var(--ease), border-color 240ms var(--ease);
}

/* 箭頭用字元而不是圖檔：少一個請求，而且會跟著文字顏色走 */
.aw-hero-cta::after {
  content: "\2192";
  font-size: 1.15em;
  letter-spacing: 0;
  transition: transform 240ms var(--ease);
}

.aw-hero-cta:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.aw-hero-cta:hover::after {
  transform: translateX(5px);
}

/* 窄螢幕不疊字：圖再怎麼裁，左邊那片留白都會先被切掉，
   字壓上去就會落在人物身上，讀不清楚。改成圖在上、字在下。 */
@media (max-width: 760px) {
  .aw-hero {
    grid-template-rows: auto auto;
  }

  .aw-hero-media {
    grid-area: 1 / 1;
  }

  .aw-hero-media img {
    height: clamp(320px, 62vw, 420px);
    object-position: 72% center;
  }

  .aw-hero-copy {
    grid-area: 2 / 1;
    max-width: none;
    padding: clamp(28px, 7vw, 44px) var(--page-gutter) clamp(34px, 8vw, 52px);
  }
}

/* --------------------------------------------------------------------------
   7b. 品牌承諾帶（hero 底下那條四格）
   -------------------------------------------------------------------------- */
.aw-assurances {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding: clamp(22px, 3vw, 34px) var(--page-gutter);
}

.aw-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 4px clamp(10px, 2vw, 26px);
}

/* 分隔線用 border 而不是每格都畫，最後一格才不會多一條 */
.aw-assurance + .aw-assurance {
  border-left: 1px solid var(--line);
}

.aw-assurance img {
  flex: none;
  width: 30px;
  height: 30px;
}

.aw-assurance p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.aw-assurance span {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--ink);
}

.aw-assurance em {
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

/* 四格擠不下就折成兩排，字級不再縮——縮到最後兩種語言都會斷行 */
@media (max-width: 900px) {
  .aw-assurances {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 3vw, 24px) 0;
  }

  .aw-assurance:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 480px) {
  .aw-assurances {
    grid-template-columns: 1fr;
  }

  .aw-assurance {
    justify-content: flex-start;
    border-left: 0;
  }
}

/* --------------------------------------------------------------------------
   8. 商品區
   -------------------------------------------------------------------------- */
.aw-catalogue {
  padding: var(--section-y) var(--page-gutter);
  background: var(--paper-2);
}

.aw-catalogue-controls {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin-top: clamp(30px, 4vw, 50px);
}

/* 分類做成細框小方塊，置中一排 */
.aw-category-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.aw-category-links button {
  padding: 9px 20px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: #fff;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  transition: border-color var(--slow) var(--ease), color var(--slow) var(--ease),
    background var(--slow) var(--ease);
}

.aw-category-links button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.aw-category-links button.is-selected,
.aw-category-links button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.aw-catalogue-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.search-field input,
.sort-field select,
.category-field select {
  min-width: 190px;
  padding: 8px 2px;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-align: center;
  transition: border-color var(--slow) var(--ease);
}

.sort-field select,
.category-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 6px top 58%, right 1px top 58%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.search-field input::placeholder {
  color: var(--ink-3);
}

.search-field input:focus,
.sort-field select:focus,
.category-field select:focus {
  border-bottom-color: var(--gold);
  outline: none;
}

.category-field {
  display: none;
}

.catalog-status {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 26px;
  color: var(--ink-3);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
}

.catalog-status p,
.catalog-status div {
  margin: 0;
}

/* 三欄格：卡片大一圈，商品照才有存在感 */
.aw-catalogue .product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 34px);
  margin-top: clamp(28px, 3vw, 44px);
}

/* --- 商品卡：白色圓角盒 + 淺陰影 + 內邊距 + 文字置中 ---------------------- */
.product-card {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 12px 12px 28px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
  transition: box-shadow var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.product-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}

.product-image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}

.product-image-button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
}

.product-image-button img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 1100ms var(--ease);
}

/* 佩戴圖疊在商品圖正上方，平常透明。滑鼠移入商品卡時淡入，
   兩張同時做那個 1.05 倍的緩慢放大，所以切換過程不會有跳動。
   淡入刻意放慢到 800ms：這是精品目錄不是後台介面，切換要像翻頁，
   不是像開關。放大比淡入更慢一點，讓畫面在圖換完之後還在動。 */
/* 選擇器要比上面的 `.product-image-button img` 更具體，否則那條的
   `transition: transform` 會整個蓋掉這裡的 opacity 過場，圖片就會硬切。 */
.product-image-button img.product-image-hover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 0;
  transition: opacity 800ms var(--ease), transform 1100ms var(--ease);
}

/* 觸控裝置沒有 hover，淡入永遠不會發生——不加這道保護的話，
   iOS 上第一次點擊會被當成 hover，圖片切一半才進商品詳情。 */
@media (hover: hover) {
  .product-card:hover .product-image-button img.product-image-hover {
    opacity: 1;
  }

  .product-image-button:hover img {
    transform: scale(1.05);
  }
}

.product-card-body {
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 22px 12px 0;
}

.product-kicker {
  color: var(--ink-3);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: none;
}

.product-card h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

.product-card-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  letter-spacing: inherit;
  transition: color var(--slow) var(--ease);
}

.product-card-link:hover {
  color: var(--gold);
}

.product-price {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.product-card.is-sold .product-image-button img {
  opacity: 0.45;
}

.product-card.is-sold .product-price::after {
  content: " · SOLD";
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.16em;
}

.empty-state {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: clamp(50px, 8vw, 110px) 20px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
}

.empty-state h3 {
  font-size: 1.5rem;
}

.empty-state p {
  max-width: 24em;
  color: var(--ink-2);
}

/* 分頁：沿用分類鍵那組細框小方塊，不另外發明一種樣式 */
.catalog-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: clamp(34px, 4vw, 56px);
}

.catalog-pagination button {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: #fff;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  transition: border-color var(--slow) var(--ease), color var(--slow) var(--ease),
    background var(--slow) var(--ease);
}

.catalog-pagination button:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}

.catalog-pagination button.is-selected {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.catalog-pagination button:disabled {
  opacity: 0.3;
}

.catalog-page-step {
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   9. 品牌故事帶
   -------------------------------------------------------------------------- */
.aw-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 76px);
  padding: var(--section-y) var(--page-gutter);
  background: var(--paper);
}

.aw-story-media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
}

.aw-story-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.aw-story-copy {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.aw-story-copy h2 {
  max-width: 14ch;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}

.aw-story-copy > p:not(.aw-kicker) {
  max-width: 26em;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   10. 購買指引
   -------------------------------------------------------------------------- */
.aw-support {
  padding: var(--section-y) var(--page-gutter);
  background: var(--paper-2);
}

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(32px, 4vw, 52px);
}

.support-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 12px;
  padding: clamp(28px, 3vw, 42px) clamp(20px, 2.4vw, 32px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
}

.support-card-number {
  color: var(--gold);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.support-grid h3 {
  font-size: 1.375rem;
}

.support-grid p:not(.support-card-number) {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.support-flow {
  margin-top: clamp(40px, 4.5vw, 70px);
}

.support-flow-heading {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: clamp(24px, 3vw, 40px);
  text-align: center;
}

.support-flow-heading h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
}

.support-flow-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

.support-flow-step {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 18px 28px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
}

.support-flow-step span {
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.support-flow-step p {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.support-trust-note {
  max-width: 44em;
  margin: clamp(28px, 3vw, 42px) auto 0;
  color: var(--ink-3);
  font-size: 0.6875rem;
  line-height: 2;
  text-align: center;
}

/* --------------------------------------------------------------------------
   11. 聯絡 / 查詢表單
   -------------------------------------------------------------------------- */
.aw-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 84px);
  padding: var(--section-y) var(--page-gutter);
  background: var(--paper);
}

.contact-copy {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.contact-copy h2 {
  max-width: 12ch;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}

.contact-copy > p:not(.aw-kicker) {
  max-width: 26em;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.contact-copy address {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: 380px;
  margin-top: 10px;
  font-style: normal;
}

.contact-copy address a {
  display: grid;
  gap: 2px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  text-align: center;
  transition: color var(--slow) var(--ease);
}

.contact-copy address a:last-child {
  border-bottom: 1px solid var(--line);
}

.contact-copy address a:hover {
  color: var(--gold);
}

.contact-copy address span {
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
}

.contact-copy address strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.inquiry-form {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.inquiry-cart-summary {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
  color: var(--ink-2);
  font-size: 0.75rem;
  text-align: center;
}

.inquiry-cart-summary strong {
  color: var(--ink);
  font-weight: 600;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

.form-span {
  grid-column: 1 / -1;
}

.inquiry-form label {
  display: grid;
  gap: 6px;
}

.inquiry-form label > span {
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.inquiry-form input,
.inquiry-form textarea {
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.875rem;
  transition: border-color var(--slow) var(--ease);
}

.inquiry-form textarea {
  resize: vertical;
  line-height: 1.9;
}

.inquiry-form input:focus,
.inquiry-form textarea:focus {
  border-bottom-color: var(--gold);
  outline: none;
}

.inquiry-form ::placeholder {
  color: var(--ink-3);
}

.form-actions {
  display: grid;
  gap: 10px;
}

.form-note {
  color: var(--ink-3);
  font-size: 0.6875rem;
  text-align: center;
}

/* --------------------------------------------------------------------------
   12. 頁尾
   -------------------------------------------------------------------------- */
.site-footer,
.checkout-footer {
  display: grid;
  justify-items: center;
  gap: 26px;
  padding: clamp(48px, 6vw, 82px) var(--page-gutter) clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--line);
  background: var(--paper-3);
  text-align: center;
}

.footer-brand {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.footer-logo {
  width: auto;
  height: 26px;
}

.footer-brand span {
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.26em;
}

.footer-column {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
}

.footer-column strong {
  color: var(--ink-3);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.22em;
}

.footer-column a {
  color: var(--ink-2);
  font-size: 0.8125rem;
  transition: color var(--slow) var(--ease);
}

.footer-column a:hover {
  color: var(--gold);
}

.site-footer > p,
.checkout-footer > p {
  padding-top: 20px;
  border-top: 1px solid var(--line);
  width: 100%;
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

/* --------------------------------------------------------------------------
   13. 對話框
   -------------------------------------------------------------------------- */
dialog {
  padding: 0;
  border: 0;
  color: var(--ink-2);
}

dialog::backdrop {
  background: rgba(26, 26, 26, 0.4);
  backdrop-filter: blur(3px);
}

.dialog-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px 16px;
  background: linear-gradient(to bottom, #fff 62%, transparent);
}

.dialog-corner-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  transition: border-color var(--slow) var(--ease), color var(--slow) var(--ease);
}

.dialog-corner-control img {
  width: 14px;
  height: 14px;
}

.dialog-corner-control:hover {
  border-color: var(--gold);
}

.dialog-favorite {
  margin-right: auto;
}

.dialog-favorite.is-favorite,
.dialog-favorite[aria-pressed="true"] {
  border-color: var(--gold);
  color: var(--gold);
}

.product-dialog {
  width: min(1080px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100vh - 40px);
  margin: auto;
  overflow: auto;
  border-radius: var(--radius);
  background: #fff;
}

.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3.4vw, 52px);
  padding: 0 clamp(22px, 3vw, 48px) clamp(32px, 3.6vw, 52px);
}

.product-detail-media {
  display: grid;
  gap: 12px;
  align-content: start;
}

.product-detail-main-image {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}

.product-detail-main-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 56vh;
  object-fit: cover;
  transition: transform 900ms var(--ease);
}

.product-detail-main-image:hover img {
  transform: scale(1.03);
}

.product-thumbnails {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.product-thumbnails button {
  width: 64px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: var(--paper-2);
  transition: border-color var(--slow) var(--ease);
}

.product-thumbnails button:hover {
  border-color: var(--gold);
}

.product-thumbnails img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-detail-copy {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 14px;
  padding-top: clamp(4px, 1vw, 14px);
  text-align: center;
}

.product-detail-copy h2 {
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
}

.product-detail-price {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.product-detail-description {
  max-width: 26em;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 2;
}

.detail-specs {
  display: grid;
  width: 100%;
  margin-top: 4px;
  border-top: 1px solid var(--line);
}

.detail-spec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.detail-spec dt {
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.detail-spec dd {
  color: var(--ink);
  font-size: 0.75rem;
  text-align: right;
}

.detail-actions {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
}

.detail-note {
  color: var(--ink-3);
  font-size: 0.6875rem;
}

.detail-accordions {
  display: grid;
  width: 100%;
  margin-top: 6px;
  text-align: left;
}

.detail-accordions details {
  border-top: 1px solid var(--line);
}

.detail-accordions summary {
  padding: 14px 0;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  list-style: none;
}

.detail-accordions summary::-webkit-details-marker {
  display: none;
}

.detail-accordions summary::after {
  content: "+";
  float: right;
  color: var(--ink-3);
}

.detail-accordions details[open] summary::after {
  content: "–";
}

.detail-accordions p {
  padding-bottom: 15px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 2;
}

.product-delivery-note {
  padding: 15px 0 0;
  border-top: 1px solid var(--line);
}

.product-delivery-note h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
}

.product-delivery-note p {
  padding-top: 8px;
  padding-bottom: 0;
  color: var(--ink-3);
  font-size: 0.75rem;
}

.image-dialog {
  width: min(880px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100vh - 40px);
  margin: auto;
  overflow: auto;
  border-radius: var(--radius);
  background: #fff;
}

.image-dialog > img {
  width: 100%;
  height: auto;
  padding: 0 clamp(16px, 3vw, 36px) clamp(16px, 3vw, 36px);
}

/* --- 購物袋抽屜 ----------------------------------------------------------- */
.cart-panel {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100vw);
  max-width: none;
  max-height: 100vh;
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border-radius: 0;
  background: #fff;
  border-left: 1px solid var(--line);
  transform: translateX(100%);
  transition: transform 420ms var(--ease);
}

.cart-panel[open] {
  transform: translateX(0);
}

.cart-panel:not([open]) {
  display: none;
}

.cart-panel::backdrop {
  background: rgba(26, 26, 26, 0.36);
}

.cart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 24px clamp(18px, 2.6vw, 28px) 18px;
  border-bottom: 1px solid var(--line);
}

.cart-header h2 {
  margin-top: 4px;
  font-size: 1.625rem;
}

.cart-header-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cart-items {
  padding: 4px clamp(18px, 2.6vw, 28px);
  overflow-y: auto;
}

.cart-item {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.cart-item-image {
  width: 76px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}

.cart-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cart-item h3 {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-soft);
}

.cart-item-head strong {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.cart-item-price {
  margin-top: 3px;
  color: var(--ink-3);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.cart-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.quantity-control {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-2);
  border-radius: 2px;
}

.quantity-control button {
  width: 30px;
  height: 28px;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1;
  transition: background var(--slow) var(--ease);
}

.quantity-control button:hover {
  background: var(--paper-2);
}

.quantity-control span {
  min-width: 26px;
  font-size: 0.75rem;
  text-align: center;
}

.remove-button,
.cart-clear-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--slow) var(--ease);
}

.remove-button:hover,
.cart-clear-link:hover:not(:disabled) {
  color: var(--ink);
}

.cart-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  text-align: center;
}

.cart-empty > div {
  display: grid;
  gap: 8px;
}

.cart-empty h3 {
  font-size: 1.5rem;
}

.cart-empty p:last-child {
  max-width: 28ch;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.cart-footer {
  display: grid;
  gap: 10px;
  padding: 20px clamp(18px, 2.6vw, 28px) 24px;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}

.cart-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink-3);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
}

.cart-total-row strong {
  color: var(--ink);
  font-weight: 600;
}

.cart-total {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.cart-total strong {
  font-family: var(--font-display);
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.cart-footer-actions {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  justify-items: center;
}

.cart-footer-actions .button {
  width: 100%;
}

.toast-region {
  position: fixed;
  inset: auto 0 24px;
  z-index: 120;
  display: grid;
  justify-items: center;
  pointer-events: none;
}

.toast {
  padding: 12px 24px;
  border-radius: 2px;
  background: var(--ink);
  color: #fff;
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  animation: toast-in 300ms var(--ease) both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* --------------------------------------------------------------------------
   14. 結帳
   -------------------------------------------------------------------------- */
.checkout-page {
  background: var(--paper-2);
}

.checkout-header,
.policy-header {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(140%) blur(12px);
}

.checkout-back-link,
.policy-back-link {
  justify-self: start;
  grid-column: 1;
  grid-row: 1;
  color: var(--ink-3);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  transition: color var(--slow) var(--ease);
}

.checkout-back-link::before,
.policy-back-link::before {
  content: "← ";
}

.checkout-back-link:hover,
.policy-back-link:hover {
  color: var(--ink);
}

.checkout-header nav,
.policy-header-inner .site-language-switch {
  justify-self: end;
  grid-column: 3;
  grid-row: 1;
}

.checkout-main {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
  padding: clamp(36px, 5vw, 76px) var(--page-gutter) clamp(48px, 6vw, 92px);
}

.checkout-intro {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 12px;
  max-width: 46ch;
  margin: 0 auto clamp(10px, 2vw, 24px);
  text-align: center;
}

.checkout-intro h1 {
  font-size: clamp(1.875rem, 4vw, 3rem);
}

.checkout-intro > p:last-child {
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.checkout-details {
  /* summary 的 <aside> 在 DOM 裡排在 details 前面，兩者都要寫死 row，
     否則 grid 稀疏放置會把表單擠到下一列，中間空一大塊。 */
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 22px;
}

/* 右欄裝的不只是訂單摘要——摘要本身很短，單獨放會在長表單旁邊留一大片空白。
   購買流程與聯絡方式一起搬進來，兩欄高度才配得上。 */
.checkout-aside {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  grid-column: 2;
  grid-row: 2;
  display: grid;
  gap: 16px;
  align-content: start;
}

.checkout-summary {
  display: grid;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.checkout-section-heading {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.checkout-section-heading > div {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.checkout-section-heading h2 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
}

.checkout-section-heading > p {
  color: var(--ink-3);
  font-size: 0.6875rem;
}

.checkout-count {
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.checkout-lines {
  display: grid;
}

.checkout-line {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.checkout-line-image {
  width: 56px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper-2);
}

.checkout-line-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.checkout-line > strong {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.checkout-line-sku {
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
}

.checkout-totals {
  display: grid;
  gap: 9px;
}

.checkout-totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink-3);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
}

.checkout-totals dd {
  color: var(--ink-2);
}

.checkout-grand-total {
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.checkout-grand-total dd {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.checkout-grand-total dd span {
  color: var(--ink-3);
  font-size: 0.625rem;
}

.checkout-grand-total strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}

.checkout-currency-note,
.checkout-empty {
  color: var(--ink-3);
  font-size: 0.6875rem;
  line-height: 1.9;
  text-align: center;
}

#checkoutForm {
  display: grid;
  gap: 20px;
}

.checkout-form-card {
  display: grid;
  gap: 18px;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.checkout-card-heading {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.checkout-card-heading h3 {
  font-size: 1.375rem;
}

.checkout-card-lead {
  color: var(--ink-3);
  font-size: 0.75rem;
}

.checkout-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 20px;
}

.checkout-field {
  display: grid;
  gap: 6px;
  align-content: start;
}

.checkout-field-wide,
.checkout-phone-row.checkout-field-wide {
  grid-column: 1 / -1;
}

.checkout-phone-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.5fr) 1fr;
  gap: 18px 20px;
}

/* 州／省、城市、郵遞區號在兩欄網格裡會剩一個落單，右邊空一格很難看。
   配送卡改三欄，三個短欄位剛好排成一列。 */
.checkout-form-card[data-checkout-card="delivery"] .checkout-form-grid {
  grid-template-columns: repeat(3, 1fr);
}

.checkout-field label {
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.checkout-field :is(input, select, textarea) {
  width: 100%;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.875rem;
  transition: border-color var(--slow) var(--ease);
}

.checkout-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 20px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: right 6px top 60%, right 1px top 60%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.checkout-field textarea {
  resize: vertical;
  line-height: 1.9;
}

.checkout-field :is(input, select, textarea):focus {
  border-bottom-color: var(--gold);
  outline: none;
}

.checkout-field :is(input, select):disabled {
  color: var(--ink-3);
  opacity: 0.6;
}

.checkout-field [aria-invalid="true"] {
  border-bottom-color: var(--danger);
}

#checkoutUnsupportedCountry {
  color: var(--ink-3);
}

.checkout-error {
  color: var(--danger);
  font-size: 0.6875rem;
}

.checkout-error:empty {
  display: none;
}

.checkout-payment-note {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--radius);
  background: var(--paper-3);
  text-align: center;
}

.checkout-payment-note h3 {
  font-size: 1.125rem;
}

.checkout-payment-note > p:not(.checkout-index) {
  color: var(--ink-2);
  font-size: 0.75rem;
}

.checkout-acknowledgement {
  color: var(--ink-3);
  font-size: 0.6875rem;
  line-height: 2;
  text-align: center;
}

.checkout-acknowledgement a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

#checkoutClearDetails {
  justify-self: center;
  min-height: 40px;
  padding-inline: 20px;
  border-color: var(--line-2);
  color: var(--ink-3);
  font-size: 0.625rem;
}

.checkout-submit {
  width: 100%;
  min-height: 52px;
}

.checkout-status {
  color: var(--ink-3);
  font-size: 0.6875rem;
  text-align: center;
}

.checkout-status[data-tone="error"] {
  color: var(--danger);
}

.checkout-contact {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  font-style: normal;
  text-align: center;
}

.checkout-contact p {
  color: var(--ink-3);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
}

.checkout-contact a {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  transition: color var(--slow) var(--ease);
}

.checkout-contact a:hover {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   15. 付款狀態頁
   -------------------------------------------------------------------------- */
.payment-state-page .checkout-main {
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 60vh;
}

.payment-state-card {
  display: grid;
  gap: 14px;
  max-width: 52ch;
  padding: clamp(30px, 3.6vw, 52px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
  text-align: center;
  justify-items: center;
}

.payment-state-card h1 {
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
}

.payment-state-card > p {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.payment-state-warning {
  color: var(--danger);
}

.payment-state-reference strong {
  color: var(--ink);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
}

.payment-state-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

/* --------------------------------------------------------------------------
   16. 條款 / 私隱
   -------------------------------------------------------------------------- */
.policy-main {
  padding: clamp(36px, 5vw, 82px) var(--page-gutter) clamp(48px, 6vw, 92px);
  background: var(--paper-2);
}

.policy-shell {
  max-width: 1000px;
  margin: 0 auto;
}

.policy-hero {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-bottom: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.policy-hero h1 {
  font-size: clamp(1.875rem, 4vw, 3rem);
}

.policy-lead {
  max-width: 40em;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

.policy-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(26px, 3.4vw, 60px);
  margin-top: clamp(26px, 3.4vw, 48px);
}

.policy-index {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  align-self: start;
}

.policy-index nav {
  display: grid;
  gap: 9px;
}

.policy-index a {
  color: var(--ink-3);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  transition: color var(--slow) var(--ease);
}

.policy-index a:hover {
  color: var(--gold);
}

.policy-section-block {
  display: grid;
  gap: 10px;
  max-width: 46em;
  padding: clamp(20px, 2.4vw, 30px);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--card-shadow);
}

.policy-section-block + .policy-section-block {
  margin-top: clamp(16px, 2vw, 24px);
}

.policy-section-block h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
}

.policy-section-block p:not(.policy-number) {
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 2.05;
}

.policy-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: clamp(30px, 3.6vw, 52px);
}

/* --------------------------------------------------------------------------
   17. 響應式
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .checkout-main {
    grid-template-columns: 1fr;
  }

  .checkout-details,
  .checkout-aside {
    grid-column: 1;
    grid-row: auto;
  }

  .checkout-aside {
    position: static;
    order: -1;
  }
}

@media (max-width: 980px) {
  :root {
    --header-height: 68px;
  }

  .primary-nav {
    display: none;
  }

  .mobile-menu-button {
    display: inline-flex;
  }

  .brand {
    justify-self: center;
    grid-column: 2;
  }

  .primary-nav.is-open {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: 6px var(--page-gutter) 18px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    text-align: center;
  }

  .primary-nav.is-open a {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9375rem;
  }

  .aw-hero {
    grid-template-columns: 1fr;
  }

  .aw-hero-media {
    order: 1;
  }

  .aw-hero-media img {
    aspect-ratio: 4 / 3;
    max-height: none;
  }

  .aw-hero-copy {
    order: 2;
    justify-items: center;
    text-align: center;
  }

  .aw-hero h1 {
    max-width: none;
  }

  .aw-story,
  .aw-contact {
    grid-template-columns: 1fr;
  }

  .product-detail {
    grid-template-columns: 1fr;
  }

  .aw-catalogue .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .checkout-form-card[data-checkout-card="delivery"] .checkout-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .support-flow-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .policy-layout {
    grid-template-columns: 1fr;
  }

  .policy-index {
    position: static;
  }

  .policy-index nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 18px;
    overflow-x: auto;
    padding-bottom: 6px;
  }
}

@media (max-width: 760px) {
  :root {
    --caps-track: 0.18em;
  }

  .announcement p {
    padding-block: 10px;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
  }

  .brand-logo,
  .footer-logo {
    height: 22px;
  }

  .header-actions {
    gap: 0;
  }

  .site-language-switch button {
    padding: 6px 5px;
    font-size: 0.5625rem;
  }

  .header-action {
    width: 34px;
  }

  #globalSearchButton {
    display: none;
  }

  .aw-hero h1 {
    font-size: clamp(2.25rem, 10vw, 3.25rem);
  }

  .aw-category-links {
    gap: 8px;
  }

  .aw-category-links button {
    padding: 8px 14px;
    font-size: 0.6875rem;
  }

  .aw-catalogue .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .product-card {
    padding: 8px 8px 20px;
  }

  .product-card-body {
    padding: 16px 6px 0;
  }

  .product-card h3 {
    font-size: 0.9375rem;
  }

  .product-price {
    font-size: 0.875rem;
  }

  .catalog-pagination button {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    font-size: 0.75rem;
  }

  .support-grid {
    grid-template-columns: 1fr;
  }

  .support-flow-list {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid,
  .checkout-form-grid,
  .checkout-form-card[data-checkout-card="delivery"] .checkout-form-grid,
  .checkout-phone-row {
    grid-template-columns: 1fr;
  }

  .cart-panel {
    width: 100vw;
  }

  .product-dialog,
  .image-dialog {
    width: 100vw;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    border-radius: 0;
  }

  .product-detail {
    padding-inline: 18px;
  }
}

@media (max-width: 420px) {
  .aw-catalogue .product-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .product-card h3 {
    font-size: 1.0625rem;
  }

  .support-flow-list {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------------
   18. 動效偏好
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}