/* PNS 換季穿搭指南 —— 版面（方向 C：沉浸式）。
   所有數值都在 tokens.css，這裡只引用 var()。 */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden; /* 最後一道防線；真正的修正一律在造成溢出的元素上做 */
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; }

h1 {
  font-size: var(--fs-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: var(--ls-display);
}
h2 {
  font-family: var(--font-narrow);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--muted);
}
.eyebrow {
  font-family: var(--font-narrow);
  font-size: var(--fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-2);
}

/* ── Hero：照片就是版面 ───────────────────────────────── */
/* 照片往上鑽到選擇器底下，讓條件真的浮在照片上（--picker-h 由 JS 量測後寫入）。 */
.hero { position: relative; margin-top: calc(-1 * var(--picker-h, 0px)); }
/* 高度是原本的 75%（Evan 指定）：3/4 → 1/1，16/9 → 21/9。 */
.hero-pic { display: block; }
.hero-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 42%;
}
@media (min-width: 760px) { .hero-pic { display: block; }
.hero-photo { aspect-ratio: 21 / 9; } }

/* 上下各壓一道暗，讓浮在上面的字永遠讀得到 */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(23, 23, 26, 0.55) 0%,
    rgba(23, 23, 26, 0) 26%,
    rgba(23, 23, 26, 0.08) 52%,
    rgba(23, 23, 26, 0.94) 100%);
}
.hero-title {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: var(--s5); max-width: var(--max);
}
.hero-title h1 { margin-top: var(--s2); }
.hero-title { z-index: 1; }

.lang {
  margin-left: auto; flex: none;
  background: rgba(255, 255, 255, 0.16);
  border: none; border-radius: var(--radius-pill);
  padding: var(--s2) var(--s4);
  font-family: var(--font-narrow); font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.08em; color: #fff;
  cursor: pointer; backdrop-filter: blur(14px);
  transition: background-color var(--dur) var(--ease);
}
.lang:hover { background: rgba(255, 255, 255, 0.3); }

/* ── 選擇器：一路釘在頂端的深色玻璃條 ───────────────────
   一律半透明深色＋模糊，不隨捲動切換狀態。

   原本做的是「在照片上透明、捲過去才變實心」，但那需要 scroll 事件，
   而我在這裡驗不到它有沒有真的觸發（headless 不派送 scroll）。
   驗不了的行為就不留：這個版本壓在照片上緣時靠照片自己的暗角讀得到，
   壓在內容上時後面本來就是深色，兩邊都成立，而且沒有會壞的狀態。 */
.picker {
  position: sticky; top: 0; z-index: 20;
  background: rgba(23, 23, 26, 0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.picker-inner {
  position: relative;
  max-width: var(--max);
  padding: var(--s3) var(--gutter);
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6);
  align-items: center;
}
.field { min-width: 0; display: flex; align-items: center; gap: var(--s3); }
.flabel {
  flex: none;
  font-family: var(--font-narrow); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--muted);
}
.opts { display: flex; gap: var(--s1); min-width: 0; }
.opt {
  background: rgba(255, 255, 255, 0.1);
  border: none; border-radius: var(--radius);
  padding: var(--s2) var(--s4);
  font-family: var(--font-narrow); font-size: var(--fs-opt); font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer; white-space: nowrap;
  backdrop-filter: blur(10px);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.opt:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.opt[aria-pressed="true"] { background: var(--plate); color: var(--on-plate); }

.field-rain { align-self: center; }
.switch {
  display: inline-flex; align-items: center; gap: var(--s2);
  cursor: pointer;
  font-family: var(--font-narrow); font-size: var(--fs-opt); font-weight: 600;
  color: var(--muted);
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.track {
  width: 36px; height: 20px; flex: none; position: relative;
  border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.18);
  transition: background-color var(--dur) var(--ease);
}
.track::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 14px; height: 14px; border-radius: 50%; background: #fff;
  transition: transform var(--dur) var(--ease);
}
.switch input:checked + .track { background: var(--plate); }
.switch input:checked + .track::after { transform: translateX(16px); background: var(--on-plate); }
.switch input:checked ~ span:last-child { color: #fff; }
.switch input:focus-visible + .track { outline: 2px solid #fff; outline-offset: 3px; }

/* ── 條件算出來的溫度：先看溫度，再看該穿什麼 ─────────── */
.climate { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7); margin-bottom: var(--s5); }
.climate-item { display: flex; flex-direction: column; gap: 2px; }
.climate-item span {
  font-family: var(--font-narrow); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--on-plate-muted);
}
.climate-item strong {
  font-size: clamp(24px, 5.5vw, 34px); font-weight: 700;
  letter-spacing: -0.03em; line-height: 1.05;
}
.climate-note {
  flex-basis: 100%; margin: 0;
  font-size: var(--fs-small); color: var(--on-plate-muted);
}

/* ── 層次帶：商品站在淺色板上 ─────────────────────────────
   實測 33 張商品去背圖有 16 張亮度低於 70，直接放深色底上會消失
   （最暗的 Logo Toe Cover 只有 23.4，跟深底同亮度）。
   深底配淺色商品板是刻意的對比，不是補丁。 */
.band { background: var(--plate); color: var(--on-plate); padding-bottom: var(--s6); }
.band-head { max-width: var(--max); padding: var(--s6) var(--gutter) 0; }
.band-head h2 { color: var(--on-plate-muted); }
.note {
  color: var(--on-plate); max-width: var(--measure);
  margin: var(--s3) 0 0; font-size: var(--fs-lead); line-height: 1.5;
}

.scroller {
  margin-top: var(--s5);
  padding: 0 var(--gutter);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.layers { display: flex; gap: var(--s4); align-items: stretch; max-width: var(--max); }

.layer {
  flex: 0 0 clamp(150px, 40vw, 210px);
  background: none; border: none; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  opacity: 0; transform: translateY(10px);
  animation: in 0.34s var(--ease) forwards;
}
@keyframes in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .layer { animation: none; opacity: 1; transform: none; }
}

.layer .idx {
  font-family: var(--font-narrow); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--on-plate-muted);
}
.layer .thumb {
  height: clamp(150px, 38vw, 230px);
  background: no-repeat center / contain;
  margin: var(--s2) 0 var(--s3);
  filter: drop-shadow(0 12px 20px rgba(23, 23, 26, 0.16));
  transition: transform var(--dur) var(--ease);
}
.layer:hover .thumb { transform: translateY(-4px); }
.layer .pname { font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; }
.layer[aria-expanded="true"] .pname { text-decoration: underline; text-underline-offset: 3px; }

.detail {
  max-width: var(--max); margin: var(--s5) auto 0;
  padding: var(--s5) var(--gutter) 0;
  border-top: 1px solid rgba(23, 23, 26, 0.14);
}
.detail h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; }
.detail p { margin: var(--s2) 0 0; color: var(--on-plate-muted); max-width: var(--measure); }
.detail a {
  display: inline-block; margin-top: var(--s3);
  font-family: var(--font-narrow); font-weight: 600; font-size: var(--fs-ui);
  color: var(--on-plate);
}

/* ── 一般深色區塊 ─────────────────────────────────────── */
.block { max-width: var(--max); padding: var(--section) var(--gutter) 0; }

/* ── 配件與人形 ───────────────────────────────────────── */
.acc-wrap {
  display: flex; gap: var(--s6); align-items: flex-start;
  margin-top: var(--s5); flex-wrap: wrap;
}
.figure { flex: none; width: clamp(150px, 36vw, 224px); display: flex; gap: var(--s3); }
/* 部位標註畫在去背的真人照片上（男女各一）。照片壓暗，被標到的部位用半透明白框點亮。 */
.fig-body { position: relative; flex: 1 1 0; min-width: 0; }
.fig-body img {
  width: 100%; height: auto; display: block;
  filter: brightness(0.6) contrast(0.92) grayscale(0.4);
}
.fig-body .part {
  position: absolute;
  border-radius: 2px;
  background: transparent;
  border: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.fig-body .part.on {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.55);
}

.acc-list { flex: 1 1 300px; min-width: 0; }
#accessories {
  display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
}
.acc-card {
  background: var(--plate); color: var(--on-plate);
  border-radius: var(--radius);
  padding: var(--s3) var(--s2); text-align: center; min-width: 0;
}
.acc-card .thumb { height: clamp(62px, 15vw, 84px); background: no-repeat center / contain; }
.acc-card .part-tag {
  font-family: var(--font-narrow); font-size: var(--fs-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--on-plate-muted); margin-top: var(--s2);
}
.acc-card .pname {
  font-size: var(--fs-small); font-weight: 600;
  line-height: 1.3; margin-top: 2px; word-break: break-word;
}

/* ── 行銷區塊 ─────────────────────────────────────────── */
.camp { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); }
.camp h3 { font-size: var(--fs-h3); font-weight: 600; }
.camp p { margin: var(--s2) 0 0; color: var(--fg-2); max-width: 56ch; }
.camp img { margin-top: var(--s4); border-radius: var(--radius); }
.camp a {
  display: inline-block; margin-top: var(--s3);
  font-family: var(--font-narrow); font-weight: 600; font-size: var(--fs-ui); color: var(--fg);
}

/* ── Footer ───────────────────────────────────────────── */
footer {
  max-width: var(--max);
  padding: var(--section) var(--gutter) var(--s7);
  margin-top: var(--section);
  border-top: 1px solid var(--line);
}
.stores {
  list-style: none; padding: 0; margin: var(--s4) 0 0;
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6);
  font-size: var(--fs-body); font-weight: 500;
}
footer a { color: var(--muted); }
/* 遞減率的出處。情境文案裡好幾個數字是從它推出來的，
   頁面上一定要有一處說得出來這些數字哪裡來。 */
.source { font-size: var(--fs-small); color: var(--muted); margin: var(--s5) 0 0; max-width: 56ch; }
footer a:hover { color: var(--fg); }

/* ── 手機 ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* 手機上拿掉欄位標籤：選項本身就說得清楚（季節名、溫度、公尺數），
     留著標籤會讓選擇器高達 225px，把 469px 的照片吃掉一半。 */
  .picker-inner { gap: var(--s1) 0; padding: var(--s2) var(--gutter); }
  .field { width: 100%; }
  .flabel { display: none; }
  .lang { position: absolute; top: var(--s2); right: var(--gutter); }
  .opts {
    flex: 1 1 auto; min-width: 0;
    overflow-x: auto; scrollbar-width: none; padding: 3px 0;
  }
  .opts::-webkit-scrollbar { display: none; }
}

/* 沒有配件時（例如夏末平地），隱藏的配件區會在淺色帶與換算器之間
   留下一段沒有內容的純黑空白。留一點間隔當節奏，但不要留成一個洞。 */
/* 沒有配件時（例如夏末平地），隱藏的配件區不該在版面上留一個洞。 */
#accessories-block[hidden] + #campaign { margin-top: 0; }

/* ── 桌機：商品跟著版面長大 ───────────────────────────── */
@media (min-width: 900px) {
  .layers { gap: var(--s6); }
  .layer { flex: 1 1 0; min-width: 190px; max-width: 300px; }
  .layer .thumb { height: 280px; }
  .layer .pname { font-size: var(--fs-body); }
  .acc-card .thumb { height: 96px; }
}