/* 五個版面共用同一套顏色與字：要比的是呈現方式，不是配色。
   白底、細字、留白；紫色（AW26 Dark Purple）只當點綴，不做大面積底色。 */
:root {
  color-scheme: light;
  --white: #fff; --soft: #f6f4f2; --line: #e4dfdb;
  --plum: #5a1a3d; --plum-tint: #f1e8ec; --moss-tint: #eff0dc;
  --ink: #26211f; --mute: #6f6864;
  --num: "Sofia Sans Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  --zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --gut-l: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--soft); color: var(--ink); font: 400 15px/1.65 var(--zh); }
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }
.page { max-width: 560px; margin-inline: auto; background: var(--white); }
.in { padding-left: var(--gut-l); padding-right: var(--gut-r); }
.num { font-family: var(--num); font-weight: 500; line-height: 1.05; letter-spacing: 0; overflow-wrap: anywhere; }
h2 { font-size: 18px; font-weight: 500; line-height: 1.4; text-wrap: balance; }
.small { font-size: 13px; color: var(--mute); }
.on-plum { background: var(--soft); color: var(--ink); }

.bigdate { font-size: min(11.5vw, 56px); color: var(--ink); }

/* 商品圖：白底照片直接放在白底上 */
.ph { background: transparent; }
.ph img { width: 100%; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.it { min-width: 0; display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.4; color: var(--mute); }
.it figcaption { padding-top: 6px; }
.pr { display: block; margin-top: 3px; color: var(--ink); }
.pr s { color: var(--mute); }
.pr b { font: 500 17px/1 var(--num); }

/* 現折級距表 */
.ladder { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ladder th, .ladder td { padding: 10px 0; text-align: right; font-weight: 400; }
.ladder thead th { font-size: 13px; vertical-align: bottom; color: var(--mute); padding-top: 0; }
.ladder thead th:first-child, .ladder tbody th { text-align: left; }
.ladder small { display: block; font-size: 12px; }
.ladder tbody th { font: 400 17px/1 var(--num); }
.ladder td { font: 500 21px/1 var(--num); }
.ladder td:nth-child(2) { color: var(--plum); }
.ladder tbody tr { border-top: 1px solid var(--line); }
.ladder-note { font-size: 13px; color: var(--mute); margin-top: 8px; }

/* 滿額贈：長條寬度照金額比例 */
.gifts { display: grid; gap: 16px; }
.gifts .bar { display: block; background: var(--plum-tint); color: var(--plum); padding: 3px 8px; min-width: fit-content; }
.gifts .bar b { font-size: 18px; font-weight: 500; white-space: nowrap; }
.gifts .g { display: block; margin-top: 4px; }
.gifts small { display: block; font-size: 12.5px; color: var(--mute); }

.vouchers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vouchers li { background: var(--white); border: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.vouchers b { font-size: 26px; color: var(--plum); }
.vouchers small { font-size: 12px; color: var(--mute); text-wrap: balance; }

.shoes { display: grid; }
.shoes li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.shoes span { min-width: 0; }
.shoes b { font-size: 21px; }

.fine { font-size: 13px; line-height: 1.7; display: grid; gap: 8px; color: var(--mute); }
.fine li { padding-left: 12px; position: relative; overflow-wrap: anywhere; }
.fine li::before { content: ""; position: absolute; left: 0; top: .75em; width: 4px; height: 1px; background: var(--mute); }

.cta { display: grid; gap: 8px; }
.btn { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 8px 14px; background: var(--plum); color: var(--white); font-weight: 500; font-size: 14px; text-decoration: none; text-align: center; }
.btn.alt { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }