:root {
  /* === 色票（完全對齊 geow-yong-brand-site）=== */
  --paper: #f5f0e7;
  --paper-soft: #fbf8f2;
  --paper-deep: #e8dfd0;
  --ink: #2d2a25;
  --muted: #6f695f;
  --quiet: #9b9285;
  --gold: #b79a5d;
  --gold-soft: rgba(183, 154, 93, 0.34);
  --brown: #514235;
  --smoke: #181714;
  --line: rgba(81, 66, 53, 0.14);
  --white: #fffdf8;
  --shadow: 0 28px 90px rgba(50, 40, 28, 0.16);

  /* DM（亮色區塊文字色，與 guide site 一致）*/
  --dm-heading: #5a5650;
  --dm-body: #5a5650;
  --dm-secondary: #5a5650;
  --dm-line: #c7c0b5;
  --dm-line-soft: rgba(199, 192, 181, 0.64);
  --dm-line-faint: rgba(199, 192, 181, 0.46);
  --dm-accent: #a08a55;
  --dm-accent-soft: rgba(160, 138, 85, 0.38);
  --header-ink: #1f1f1f;

  /* === 字型（與 guide site 一致）=== */
  --font-serif: "Noto Serif TC", "Songti TC", "STSong", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang SC", "Hiragino Sans", "Microsoft JhengHei", sans-serif;
  --font-en-serif: Georgia, "Times New Roman", serif;

  /* === 容器（與 guide site 一致）=== */
  --max-w: 1360px;
  --page-gutter: 32px;        /* 64px total = 32px each side */
  --page-gutter-sm: 17px;     /* 34px total mobile */

  /* === 圓角（與 guide site 一致）=== */
  --radius-card: 6px;         /* 卡片、brew-card、store-card */
  --radius-image: 6px;        /* 圖片圓角 */
  --radius-mobile: 4px;       /* 手機版圓角 */

  /* === 細線 divider（漸層，不是 solid）=== */
  --divider-left: linear-gradient(90deg, var(--dm-accent), transparent);
  --divider-center: linear-gradient(90deg, transparent, var(--dm-accent), transparent);
}

@supports (-webkit-touch-callout: none) {
  :root {
    --font-serif: "Noto Serif TC", "Songti TC", "STSong", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "PingFang SC", sans-serif;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-sans);
  line-height: 1.78;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.3;
  margin: 0;
}

p {
  margin: 0;
}

/* 共用容器：對齊 guide site 的 .page-frame */
.inner {
  width: min(var(--max-w), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
}

@media (max-width: 860px) {
  .inner {
    width: min(100% - var(--page-gutter-sm) * 2, 720px);
  }
}

/* 小型標籤（category / section label）*/
.section-label {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dm-accent);
}

/* 漸層細線 divider（左對齊） */
.divider-line {
  display: block;
  width: 100%;
  height: 1px;
  margin: 13px 0 11px;
  background: var(--divider-left);
}

/* 居中漸層細線 */
.divider-line--center {
  background: var(--divider-center);
}

/* 舊版 divider-gold 保留相容，對應商品頁各 section */
.divider-gold {
  display: block;
  width: clamp(112px, 18vw, 220px);
  height: 1px;
  background: var(--divider-left);
}

/* 商品頁 section title：映射 brand guide 的 .section-title / .catalog-title / .stores-head */
.gift-section-title {
  width: min(620px, 100%);
  margin: 0 0 48px;
  text-align: left;
}

.gift-section-title h2 {
  margin: 0;
  color: var(--dm-heading);
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: 0;
}

.card-section-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  object-fit: contain;
  opacity: 0.92;
}

.gift-section-title span {
  display: block;
  width: 100%;
  height: 1px;
  margin: 13px 0 11px;
  background: linear-gradient(90deg, var(--dm-accent), transparent);
}

.gift-section-title p {
  margin: 0;
  color: var(--dm-secondary);
  font-family: var(--font-en-serif);
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1.45;
}

.gift-section-title--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.gift-section-title--center span {
  background: linear-gradient(90deg, transparent, var(--dm-accent), transparent);
}

.gift-section-title--catalog {
  width: min(760px, 100%);
  margin-right: auto;
  margin-bottom: 54px;
  margin-left: auto;
  text-align: center;
}

.gift-section-title--catalog h2 {
  width: fit-content;
  margin: 0 auto;
  padding-bottom: 0;
  border-bottom: none;
}

.gift-section-title--catalog span {
  display: block;
  width: min(520px, 100%);
  height: 1px;
  margin: 20px auto 18px;
  background: linear-gradient(90deg, transparent, var(--dm-accent), transparent);
}

.gift-section-title--catalog p {
  margin: 0;
  text-transform: none;
}

.gift-section-title__intro {
  margin: 26px auto 0;
  color: var(--dm-body);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 350;
  line-height: 1.9;
  text-transform: none;
}

@media (max-width: 860px) {
  .gift-section-title {
    margin-bottom: 34px;
    text-align: left;
  }

  .gift-section-title:not(.gift-story__title):not(.gift-section-title--catalog) {
    transform: translateX(12px);
  }

  .gift-section-title.card-section-header--center {
    transform: none;
  }

  .gift-section-title h2 {
    font-size: 34px;
  }

  .gift-section-title span,
  .gift-section-title--center span {
    background: linear-gradient(90deg, var(--gold), transparent);
  }

  .gift-section-title--catalog {
    width: min(620px, 100%);
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 20px;
    text-align: left;
  }

  .gift-section-title--catalog h2 {
    width: 100%;
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .gift-section-title--catalog span {
    width: calc(100% - 12px);
    margin: 20px 0 11px;
    transform: translateX(12px);
    background: linear-gradient(90deg, var(--gold), transparent);
  }

  .gift-section-title--catalog p {
    margin: 0;
  }

  .gift-section-title--catalog h2,
  .gift-section-title--catalog p {
    transform: translateX(12px);
  }

  .gift-section-title__intro {
    width: calc(100% - 24px);
    margin-top: 20px;
    margin-right: auto;
    margin-left: auto;
  }
}

@media (max-width: 560px) {
  .card-section-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
  }

  .gift-section-title p {
    font-size: 16px;
  }

  .gift-section-title h2 {
    font-size: 30px;
  }
}