/* 暖冬選物對外網站的共用樣式。首頁與所有內頁都吃這一份，改一次全站一致。
   內頁是 scripts/build-store-site.js 產生的，但樣式不由產生器輸出，
   這樣手動調版面不會被下一次重建蓋掉。 */

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Noto Sans TC', sans-serif; background:#F3ECE0; color:#3A2E22; line-height:1.7; }
h1,h2,h3 { font-family:'Noto Serif TC', serif; font-weight:600; }
a { color:inherit; text-decoration:none; }
.wrap { max-width:1080px; margin:0 auto; padding:0 24px; }
header { padding:20px 0; border-bottom:1px solid #DCCFB8; }
header .wrap { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.logo { font-family:'Noto Serif TC', serif; font-size:20px; font-weight:600; }
/* 目前在哪一頁要一眼看得出來，只換文字顏色太弱。
   改成實心膠囊＋反白字＋加粗，三個訊號一起給。
   padding 放在所有連結上，只有選中的那顆有底色，切換頁面時字不會左右跳動。 */
nav a { margin-left:4px; padding:8px 15px; border-radius:999px; font-size:14px; color:#6B5D4C; transition:color .15s ease, background-color .15s ease; }
nav a:hover { color:#B5502E; background:#F1E4D2; }
nav a[aria-current="page"] { color:#FBEEE6; font-weight:600; background:#B5502E; }
nav a[aria-current="page"]:hover { color:#FBEEE6; background:#A6431F; }
.btn-primary { background:#B5502E; color:#FBEEE6; border:none; padding:12px 26px; border-radius:6px; font-size:15px; display:inline-block; cursor:pointer; }
.btn-outline { background:transparent; border:1px solid #8B7355; color:#3A2E22; padding:11px 24px; border-radius:6px; font-size:15px; display:inline-block; }

/* ---------- 首頁 ---------- */
.hero { padding:56px 0 40px; }
.hero h1 { font-size:clamp(30px,3.4vw,38px); line-height:1.3; max-width:none; margin-bottom:10px; text-wrap:balance; }
.hero .sub { color:#6B5D4C; font-size:15px; margin-bottom:24px; }
.card-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px; margin-top:8px; }
/* 底色留著當圖片載入前與載入失敗時的替代色，文字永遠壓在暗角上才讀得到。 */
.card { position:relative; overflow:hidden; border-radius:10px; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; min-height:150px; color:#F8F2E8; background-size:cover; background-position:center 30%; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(58,46,34,.18); }
.card:focus-visible { outline:3px solid #B5502E; outline-offset:3px; }
.card::after { content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(30,22,14,0.72) 0%, rgba(30,22,14,0.28) 45%, rgba(30,22,14,0.06) 100%); }
.card .tag, .card .note { position:relative; z-index:1; text-shadow:0 1px 3px rgba(30,22,14,0.45); }
.card .tag { font-size:13px; font-weight:500; }
.card .note { font-size:12px; opacity:0.9; margin-top:2px; }
.card.scarf { background-color:#8B5E3C; background-image:url('scarf-winter.jpg'); grid-row:span 2; min-height:320px; }
.card.hat { background-color:#5F6B4F; background-image:url('hat-winter.jpg'); }
.card.glove { background-color:#C9A876; background-image:url('glove-winter.jpg'); }
.card.legging { background-color:#3A2E22; background-image:url('legging-winter.jpg'); background-position:center 20%; }
/* 五張卡剛好填滿 3 欄 × 2 列（圍巾占滿左欄兩列）。包款不能再跨兩欄，
   否則第二列只剩一格放不下，會被推到第三列，右下就空一大塊。 */
.card.bag { background-color:#D8C9AE; background-image:url('bag-winter.jpg'); background-position:center 42%; }

section.category { padding:48px 0; border-top:1px solid #DCCFB8; }
section.category .inner { display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:start; }
section.category .swatch { display:block; width:100%; height:220px; object-fit:cover; border-radius:10px; background:#E3D8C4; }
section.category h2 { font-size:26px; margin-bottom:10px; }
section.category p { color:#5A4D3E; font-size:15px; max-width:52ch; }
section.category ul { margin-top:14px; padding-left:20px; color:#5A4D3E; font-size:14px; }
section.category li { margin-bottom:6px; }
/* reverse 段落的 HTML 本來就是「文字在前、圖在後」，照正常順序排就是圖在右，
   不需要 direction:rtl（那會再翻一次而抵消，只留下欄寬被鏡射的副作用）。
   這裡只把欄寬對調，讓文字欄兩種段落一樣寬。 */
section.category.reverse .inner { grid-template-columns:1.1fr 0.9fr; }
.more-link { display:inline-block; margin-top:16px; font-size:14px; color:#B5502E; border-bottom:1px solid rgba(181,80,46,0.35); }

section.faq { padding:56px 0; border-top:1px solid #DCCFB8; }
section.faq h2 { font-size:26px; margin-bottom:24px; }
.qa { border-bottom:1px solid #E3D8C4; padding:18px 0; }
.qa .q { font-size:16px; font-weight:500; margin-bottom:8px; }
.qa .a { font-size:14px; color:#5A4D3E; }

section.cta { padding:56px 0; text-align:center; background:#EAE0CD; }
section.cta h2 { font-size:26px; margin-bottom:12px; }
section.cta p { color:#6B5D4C; margin-bottom:22px; }

footer { padding:30px 0; text-align:center; font-size:13px; color:#8A7C69; }
footer .meta { margin-top:6px; font-size:12px; color:#A2937E; }

/* ---------- 內頁 ---------- */
.crumbs { padding:18px 0 0; font-size:13px; color:#8A7C69; }
.crumbs a { margin-left:0; border-bottom:1px solid transparent; }
.crumbs a:hover { border-bottom-color:#C9B79A; }
.crumbs span { margin:0 6px; }

.page-head { padding-top:20px; padding-bottom:8px; }
.page-head h1 { font-size:clamp(28px,3vw,34px); line-height:1.35; max-width:none; text-wrap:balance; }

/* 直接回答框：搜尋引擎與 AI 摘要最容易整段引用的位置，放在第一屏。 */
.answer { margin:22px 0 8px; padding:24px 26px; background:#FBF5EA; border:1px solid #E0D2B8; border-left:4px solid #B5502E; border-radius:8px; }
.answer p { font-size:16px; line-height:1.85; color:#3A2E22; }
.answer .facts { margin:16px 0 0; padding-left:20px; }
.answer .facts li { font-size:14px; color:#5A4D3E; margin-bottom:6px; }

section.block { padding:44px 0; border-top:1px solid #DCCFB8; }
section#products { scroll-margin-top:20px; }
section.block h2 { font-size:25px; margin-bottom:18px; }
section.block h3 { font-size:17px; margin:26px 0 8px; }
section.block p { color:#5A4D3E; font-size:15px; max-width:58ch; }

.spec-table { width:100%; border-collapse:collapse; margin-top:8px; font-size:14px; }
.spec-table caption { text-align:left; color:#8A7C69; font-size:13px; padding-bottom:10px; }
.spec-table th, .spec-table td { padding:11px 14px; border-bottom:1px solid #E3D8C4; text-align:left; vertical-align:top; }
.spec-table thead th { background:#EAE0CD; color:#5A4D3E; font-weight:500; white-space:nowrap; }
.spec-table tbody th { font-weight:400; color:#6B5D4C; width:34%; }
.table-scroll { overflow-x:auto; }

.product-list { display:grid; gap:20px; margin-top:8px; }
.product { display:grid; grid-template-columns:220px minmax(0,1fr); gap:24px; padding:20px; background:#FBF5EA; border:1px solid #E6DAC4; border-radius:10px; }
.product img { display:block; width:100%; height:220px; object-fit:cover; border-radius:8px; background:#E3D8C4; }
.product h3 { font-size:19px; margin:0 0 6px; }
.product .blurb { color:#5A4D3E; font-size:14px; margin-bottom:12px; }
.product .spec-table { margin-top:0; }
.product .actions { margin-top:14px; }
.product .actions { display:flex; flex-wrap:wrap; gap:10px; }
.product > a { display:block; }
.product h3 a:hover { color:#B5502E; }

/* ---------- 單一商品頁 ---------- */
.product-page { padding-top:36px; padding-bottom:56px; }
.product-page-hero { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:46px; align-items:center; }
/* height:auto 是必要的：img 標籤上有 width/height 屬性（避免載入時版面跳動），
   少了它，height 屬性會贏過 aspect-ratio，方形商品照會被拉成直長條再裁掉左右。 */
.product-page-hero > img, .product-page-hero > .placeholder { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:contain; border-radius:12px; background:#E3D8C4; }
.product-kicker { display:block; margin-bottom:8px; color:#B5502E; font-size:13px; font-weight:500; letter-spacing:.08em; }
.product-page h1 { font-size:clamp(30px,4vw,44px); line-height:1.3; text-wrap:balance; }
.product-summary { margin:18px 0 24px; color:#5A4D3E; font-size:16px; line-height:1.9; }
.product-copy, .product-specs { max-width:800px; margin:48px auto 0; padding-top:36px; border-top:1px solid #DCCFB8; }
.product-copy h2, .product-specs h2 { margin-bottom:16px; font-size:25px; }
.product-copy p { margin-bottom:14px; color:#5A4D3E; font-size:15px; line-height:1.9; }
.product-back { margin-top:40px; color:#B5502E; }

.related { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }
.related a { padding:8px 16px; border:1px solid #D8C9AE; border-radius:999px; font-size:14px; color:#5A4D3E; background:#FBF5EA; }
.related a:hover { border-color:#B5502E; color:#B5502E; }

@media (max-width:720px) {
  .card-grid { grid-template-columns:1fr 1fr; }
  /* 手機是 2 欄：圍巾一張橫的，其餘四張兩兩並排，同樣不留空格。 */
  .card.scarf { grid-column:span 2; grid-row:auto; min-height:180px; }
  section.category .inner, section.category.reverse .inner { grid-template-columns:1fr; }
  /* 單欄時圖一律排在文字前面，兩種段落的閱讀順序才一致 */
  .reverse .swatch { order:-1; }
  header .wrap { flex-direction:column; align-items:flex-start; gap:10px; }
  /* 手機導覽列會換行，膠囊之間要有上下間距才不會黏在一起 */
  nav { display:flex; flex-wrap:wrap; gap:4px; margin-left:-14px; }
  nav a { margin:0; }
  .page-head h1 { font-size:27px; }
  .product { grid-template-columns:1fr; }
  .product img { height:240px; }
  .product-page { padding-top:24px; }
  .product-page-hero { grid-template-columns:1fr; gap:24px; }
  .product-page-hero > img, .product-page-hero > .placeholder { max-height:420px; }
}