/* 元佑成食品官網 v9｜手機優先
   色票（2026-10-07 豆子選定「番茄紅＋金」）：參考番茄醬品牌常見的搭配。
   深酒紅當深色、番茄紅當主色塊、金當線與小字、底是暖白；全站沒有灰，也沒有純黑。
   純白只留給商品卡與輸入框，跟白底商品照是同一個白。
   ⚠️ 金分三階：--gold 只當線；淺底上的字用 --gold-ink（對比才夠）；深底上的字用 --gold-hi。
   ⚠️ LINE 綠只給「加 LINE」的按鈕用，其他地方不要借這個顏色。
   ⚠️ 番茄紅底上的 LINE 按鈕改用奶油色：綠壓在紅上太衝。 */

/* 標題字只內嵌頁面上實際用到的字（build.py 每次重算），所以改標題文案後一定要重跑 build */
@font-face {
  font-family: "GY Display";
  src: url("gy-display.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --wine: #4a0f0a;        /* 深酒紅：頂列、首屏壓暗、底部列、頁尾 */
  --tomato: #c2281e;      /* 番茄紅：成本試算那一段；也是必填星號與錯誤訊息的顏色 */
  --gold: #b98f33;        /* 金：卡片底線、外框（只當線） */
  --gold-ink: #8a6524;    /* 深金：淺底上的編號與小字 */
  --gold-hi: #e3bd62;     /* 亮金：深底上的小字 */
  --paper: #fbf6ee;       /* 暖白：頁面底 */
  --paper-2: #f5ecdc;     /* 次區塊的底 */
  --card: #ffffff;        /* 商品卡、品類卡 */
  --ink: #2b1512;
  --ink-2: #6d5548;
  --rule: #e3d6c1;
  --on-dark: #fbf3e4;
  --on-dark-2: rgba(251, 243, 228, .78);
  --line: #06c755;
  --line-press: #05a847;
  --line-ink: #04210e;
  --display: "GY Display", "Noto Serif TC", "Songti TC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --wrap: 68rem;
  --bar-h: 3.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar-h) + .5rem); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.75 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.d { font-family: var(--display); font-weight: 900; letter-spacing: .01em; }
.wrap { width: min(100% - 2 * var(--pad), var(--wrap)); margin-inline: auto; }

/* ── 頂部列：品牌＋兩顆 ─────────────────────────────── */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: max(var(--pad), (100% - var(--wrap)) / 2);  /* 寬螢幕時跟內文左緣對齊 */
  background: rgba(74, 15, 10, .9); color: var(--on-dark);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bar__brand { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.125rem; text-decoration: none; }
.bar__nav { display: flex; align-items: center; gap: .25rem; }
.bar__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .5rem .75rem; font-size: .9375rem; text-decoration: none; color: var(--on-dark-2); }
.bar__link:hover { color: var(--on-dark); }

/* ── 按鈕 ──────────────────────────────────────────── */
.btn-line {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .75rem 1.5rem; border-radius: .5rem;
  background: var(--line); color: var(--line-ink);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.3; text-decoration: none;
}
.btn-line:hover { background: var(--line-press); }
.btn-line--sm { min-height: 2.75rem; padding: .375rem .875rem; font-size: .9375rem; }
.btn-line--wide { display: flex; width: 100%; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.25rem; padding: .75rem 1.5rem; border: 0; border-radius: .5rem;
  background: var(--ink); color: var(--on-dark);
  font: inherit; font-weight: 700; font-size: 1.0625rem; cursor: pointer;
}
.btn:disabled { opacity: .55; cursor: default; }
.textlink { text-underline-offset: .2em; }

/* ── 首屏：照片壓暗，兩種客人各一扇門 ─────────────────── */
.hero {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100svh; display: flex; align-items: flex-end;
  background: var(--wine); color: var(--on-dark);
}
.hero__img { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(74, 15, 10, .4) 0, rgba(74, 15, 10, .1) 9rem);
}
.hero__body { position: relative; padding-block: calc(var(--bar-h) + 2rem) clamp(1.5rem, 5vh, 3rem); }
/* 壓暗跟著文字區塊走，不照畫面高度的百分比：畫面再矮（手機瀏覽器有網址列時），標題底下都是暗的 */
.hero__body::before {
  content: ""; position: absolute; z-index: -1; inset-block: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(74, 15, 10, 0) 0, rgba(74, 15, 10, .8) calc(var(--bar-h) + 1.25rem), rgba(74, 15, 10, .93) 62%, var(--wine) 100%);
}
.kicker { font: 500 .875rem/1.4 var(--mono); letter-spacing: .14em; color: var(--gold-hi); }
.hero h1 { margin-top: .75rem; font-size: clamp(2rem, 8.6vw, 4rem); line-height: 1.22; }
.doors { display: grid; gap: .75rem; margin-top: clamp(1.5rem, 4vh, 2.5rem); }
.door {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(251, 243, 228, .28); border-radius: .625rem;
  background: rgba(74, 15, 10, .6); text-decoration: none;
}
.door__who { padding: .875rem 1rem 0; font-size: 1.375rem; line-height: 1.3; }
.door__what { flex: 1; padding: .25rem 1rem .875rem; font-size: .9375rem; line-height: 1.55; color: var(--on-dark-2); }
.door__go { padding: .75rem 1rem; background: var(--line); color: var(--line-ink); font-weight: 700; line-height: 1.3; }
.door:hover .door__go { background: var(--line-press); }
@media (min-width: 620px) { .doors { grid-template-columns: 1fr 1fr; max-width: 46rem; } }

/* ── 一般區塊 ──────────────────────────────────────── */
.sec { padding-block: clamp(3.5rem, 10vh, 6rem); }
.sec--plate { background: var(--paper-2); }
.band { padding-block: clamp(3.5rem, 10vh, 6rem); background: var(--tomato); color: var(--on-dark); }
.sec h2, .band h2 { font-size: clamp(1.625rem, 6.4vw, 2.5rem); line-height: 1.3; }
.lead { margin-top: .75rem; max-width: 34em; color: var(--ink-2); }
.fine { margin-top: .875rem; font-size: .875rem; color: var(--ink-2); }
.fine .textlink { display: inline-block; padding-block: .625rem; margin-block: -.625rem; }
.band .lead, .band .fine { color: var(--on-dark); opacity: .9; }
.band .btn-line, .sec .btn-line { margin-top: 1.75rem; }
/* 番茄紅底上不放 LINE 綠：按鈕改奶油色 */
.band .btn-line { background: var(--on-dark); color: var(--ink); }
.band .btn-line:hover { background: #f1e4cb; }

/* 品類卡：白卡片、底部一條金線 */
.tags { display: grid; gap: .75rem; margin-top: 1.75rem; }
.tag {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 1.125rem 1.125rem 1.125rem 1.25rem;
  background: var(--card); border: 1px solid var(--rule); border-bottom: 4px solid var(--gold); border-radius: 2px;
  text-decoration: none;
}
.tag:hover { border-color: var(--ink); border-bottom-color: var(--gold); }
.tag__name { font-size: 1.375rem; line-height: 1.3; }
.tag__n { font: 500 .875rem/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
@media (min-width: 620px) { .tags { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .tags { grid-template-columns: repeat(3, 1fr); } }

/* 有先後順序的步驟才用編號 */
.steps { counter-reset: s; margin-top: 1.75rem; border-top: 1px solid var(--rule); max-width: 40rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem 1fr; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.steps li::before { content: counter(s); font: 600 .9375rem/1 var(--mono); color: var(--gold-ink); }
.steps b { display: block; font-size: 1.0625rem; }
.steps span { font-size: .9375rem; color: var(--ink-2); }

.facts { margin-top: 1.75rem; border-top: 1px solid var(--rule); max-width: 40rem; }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-2); }
.facts dd { font-family: var(--mono); font-weight: 500; text-align: right; }

/* ── 詢價表單（欄位名稱與送出邏輯沿用 v8，收件端不用改）───── */
.rfq-form { margin-top: 1.75rem; max-width: 40rem; }
.rfq-grid { display: grid; gap: 1rem; }
.rfq-field { display: flex; flex-direction: column; gap: .375rem; }
.rfq-field > span { font-size: .9375rem; font-weight: 600; }
.rfq-field > span b { color: var(--tomato); }
.rfq-field input, .rfq-field select, .rfq-field textarea {
  width: 100%; min-height: 3rem; padding: .625rem .75rem;
  border: 1px solid #b9a892; border-radius: .375rem; background: #fff; color: var(--ink);
  font: inherit;
}
.rfq-field textarea { min-height: 7rem; resize: vertical; }
.rfq-field input:user-invalid, .rfq-field textarea:user-invalid { border-color: var(--tomato); }
.rfq-actions { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; margin-top: 1.25rem; }
.rfq-status { min-height: 1.5em; font-size: .9375rem; color: var(--ink-2); }
.rfq-status.is-error { color: var(--tomato); }
.rfq-form[data-sent="1"] .rfq-grid, .rfq-form[data-sent="1"] .rfq-actions .btn { display: none; }
@media (min-width: 620px) {
  .rfq-grid { grid-template-columns: 1fr 1fr; }
  .rfq-span2 { grid-column: 1 / -1; }
}

/* ── 訂購頁：客人在 LINE 內開啟，送出列取代固定 LINE 列 ───── */
.order-page { padding-bottom: calc(10.5rem + env(safe-area-inset-bottom)); }
.order-page [hidden], .order-status[hidden], .order-submitbar[hidden] { display: none !important; }
.order-head { padding-bottom: 1rem; }
.order-hint { margin-top: .375rem; font-size: .875rem; color: var(--ink-2); }
.order-section-title { margin: 1.5rem 0 .75rem; font-size: 1rem; line-height: 1.4; color: var(--ink-2); }
.order-products { display: grid; gap: .75rem; scroll-margin-top: calc(var(--bar-h) + 1rem); }
.order-products.is-error { outline: 3px solid var(--tomato); outline-offset: 4px; }
.order-cat { overflow: hidden; border: 1px solid var(--rule); border-radius: .5rem; background: var(--card); }
.order-cat summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .75rem 1rem; cursor: pointer; list-style: none; }
.order-cat summary::-webkit-details-marker { display: none; }
.order-cat__name { font-size: 1.125rem; line-height: 1.25; }
.order-cat__count { flex: 0 0 auto; font-size: .875rem; color: var(--ink-2); }
.order-cat__count b { font: 600 1rem/1 var(--mono); color: var(--ink); }
.order-cat__body { display: grid; gap: 1rem; padding: 0 1rem 1rem; }
.order-group h3 { padding-block: .5rem; border-bottom: 1px solid var(--rule); font: 600 .875rem/1.4 var(--sans); letter-spacing: .08em; color: var(--ink-2); }
.order-list { display: grid; margin-top: .5rem; border-top: 1px solid var(--rule); }
.order-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .625rem; min-height: 4.5rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.order-item__body { display: grid; gap: .25rem; min-width: 0; }
.order-item__name { font-size: 1rem; line-height: 1.35; overflow-wrap: anywhere; }
.order-item__spec { font: 500 .8125rem/1.3 var(--mono); color: var(--ink-2); overflow-wrap: anywhere; }
.qty { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .25rem; }
.qty__btn { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid var(--rule); border-radius: .375rem; background: #fff; color: var(--ink); font: 700 1.125rem/1 var(--sans); cursor: pointer; }
.qty__input { width: 3rem; min-width: 3rem; min-height: 2.75rem; border: 1px solid var(--rule); border-radius: .375rem; background: #fff; color: var(--ink); font: 600 1rem/1 var(--mono); text-align: center; }
.order-form { margin-top: 2rem; scroll-margin-top: calc(var(--bar-h) + 1rem); }
.order-grid { display: grid; gap: 1rem; }
.order-field { display: flex; flex-direction: column; gap: .375rem; }
.order-field > span { font-size: .9375rem; font-weight: 600; }
.order-field > span b { color: var(--tomato); }
.order-field input, .order-field textarea { width: 100%; min-height: 3rem; padding: .625rem .75rem; border: 1px solid #b9a892; border-radius: .375rem; background: #fff; color: var(--ink); font: inherit; }
.order-field textarea { min-height: 7rem; resize: vertical; }
.order-field.is-error input, .order-field.is-error textarea { border-color: var(--tomato); }
.order-check { display: flex; align-items: center; gap: .75rem; min-height: 3rem; font-size: .9375rem; cursor: pointer; }
.order-check input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; accent-color: var(--wine); }
.order-submitbar { position: fixed; inset: auto 0 0 0; z-index: 19; padding: .625rem var(--pad) calc(.625rem + env(safe-area-inset-bottom)); background: rgba(74, 15, 10, .95); color: var(--on-dark); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.order-submitbar__inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: min(100%, var(--wrap)); margin-inline: auto; }
.order-total { font-size: .9375rem; color: var(--on-dark-2); }
.order-total b { font: 700 1.125rem/1 var(--mono); color: var(--on-dark); }
.order-submit { flex: 0 0 auto; background: var(--on-dark); color: var(--ink); }
.order-submit:disabled { opacity: .5; }
.order-status { position: fixed; inset: auto max(var(--pad), (100% - var(--wrap)) / 2) calc(4.75rem + env(safe-area-inset-bottom)); z-index: 20; padding: .5rem .75rem; border: 1px solid var(--rule); border-radius: .375rem; background: var(--card); color: var(--ink-2); font-size: .875rem; line-height: 1.4; }
.order-status.is-error { border-color: var(--tomato); background: var(--card); color: var(--tomato); }
.order-success { margin: 2rem 0 4rem; padding: 1.5rem; border-radius: .5rem; background: var(--paper-2); border: 1px solid var(--rule); }
.order-success h2 { font-size: 1.75rem; line-height: 1.25; }
.order-success p { margin-top: .75rem; color: var(--ink-2); }
.order-success__id b { font-family: var(--mono); color: var(--ink); }
.order-summary { display: grid; gap: .5rem; margin-top: 1rem; }
.order-summary li { padding-top: .5rem; border-top: 1px solid var(--rule); font-size: .9375rem; }
.order-page ~ .foot { padding-bottom: calc(12rem + env(safe-area-inset-bottom)); }
@media (min-width: 620px) {
  .order-grid { grid-template-columns: 1fr 1fr; }
  .order-span2 { grid-column: 1 / -1; }
}
@media (max-width: 390px) {
  .order-cat__body { padding-inline: .75rem; }
  .order-item { gap: .5rem; }
  .order-submitbar__inner { gap: .5rem; }
}

.faq { margin-top: 1.75rem; border-top: 1px solid var(--rule); max-width: 40rem; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { position: relative; padding: 1rem 2rem 1rem 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; translate: 0 -50%; font: 400 1.25rem/1 var(--mono); color: var(--ink-2); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding-bottom: 1rem; color: var(--ink-2); }

/* ── 頁尾與手機底部固定列 ───────────────────────────── */
.foot { padding: 3rem 0 calc(6.5rem + env(safe-area-inset-bottom)); background: var(--wine); color: var(--on-dark-2); font-size: .9375rem; }
.foot a { color: var(--on-dark); text-underline-offset: .2em; }
.foot__brand { font-size: 1.25rem; color: var(--on-dark); }
.foot ul { display: grid; gap: 0; margin-top: 1rem; }
.foot ul li { display: flex; align-items: center; min-height: 2.75rem; }
.foot ul a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.foot__legal a { display: inline-block; padding-block: .625rem; margin-block: -.625rem; white-space: nowrap; }
.foot__legal { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(251, 243, 228, .18); font-size: .875rem; }
.dock {
  position: fixed; inset: auto 0 0 0; z-index: 19;
  padding: .625rem var(--pad) calc(.625rem + env(safe-area-inset-bottom));
  background: rgba(74, 15, 10, .95);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translateY(110%); transition: transform .25s ease;
}
.dock.is-on { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dock { transition: none; }
}
@media (min-width: 860px) {
  .dock { display: none; }
  .foot { padding-bottom: 3rem; }
}

/* ── 品類頁 ────────────────────────────────────────── */
.page { padding-top: var(--bar-h); }
.page__head { padding-block: 2.5rem 1.5rem; }
.crumb { font-size: .875rem; color: var(--ink-2); }
.crumb a { display: inline-block; padding-block: .625rem; margin-block: -.625rem; text-underline-offset: .2em; }
.page__head h1 { margin-top: .5rem; font-size: clamp(2.25rem, 10vw, 4rem); line-height: 1.15; }
.page__meta { margin-top: .75rem; color: var(--ink-2); }
.page__meta b { font: 600 1.125rem var(--mono); color: var(--ink); }
.group { padding-bottom: 2.5rem; }
.group > h2 { padding: .5rem 0; border-bottom: 1px solid var(--rule); font: 600 .9375rem/1.4 var(--sans); letter-spacing: .08em; color: var(--ink-2); }
.labels { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-top: 1rem; }
.label { display: flex; flex-direction: column; overflow: hidden; background: var(--card); border: 1px solid var(--rule); border-bottom: 4px solid var(--gold); border-radius: 2px; }
.label__shot { aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
/* 實拍是直幅、每張袋子的位置不太一樣：只小幅放大，寧可袋子小一點也不要切到 */
.label__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(1.15); }
/* 白底商品照（assets/packshot/）：底是純白，整張放進格子，不裁、不放大 */
.label__shot--white { background: #fff; }
.label__shot--white img { object-fit: contain; object-position: 50% 50%; transform: none; }
.label__body { display: flex; flex-direction: column; gap: .25rem; flex: 1; padding: .75rem .75rem .875rem; }
.label__code { font: 500 .8125rem/1 var(--mono); letter-spacing: .08em; color: var(--ink-2); }
.label__name { font-size: 1.0625rem; line-height: 1.35; }
.label__spec { margin-top: auto; padding-top: .375rem; font: 500 .875rem/1.2 var(--mono); }
@media (min-width: 620px) { .labels { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .labels { grid-template-columns: repeat(4, 1fr); } }
.cta { margin-bottom: 3rem; padding: 1.5rem 1.25rem; border-radius: .625rem; background: var(--wine); color: var(--on-dark); }
.cta h2 { font-size: 1.375rem; line-height: 1.35; }
.cta .btn-line { margin-top: 1rem; }
.others { padding-bottom: 3.5rem; }
.others > h2 { font: 600 .9375rem/1.4 var(--sans); letter-spacing: .08em; color: var(--ink-2); }
.others .tags { margin-top: .75rem; }

/* ── 文字頁（隱私權）與 LINE 中繼頁 ─────────────────── */
.prose { max-width: 40rem; padding-bottom: 4rem; }
.prose h2 { margin-top: 2rem; font-size: 1.125rem; }
.prose p, .prose ul { margin-top: .625rem; color: var(--ink-2); }
.prose ul { padding-left: 1.25rem; list-style: disc; }
.go { min-height: 100svh; display: grid; place-content: center; gap: 1.25rem; padding: var(--pad); background: var(--wine); color: var(--on-dark); text-align: center; }
.go p { color: var(--on-dark-2); }

/* 首屏照片：build.py 依 assets/ 裡有哪幾張產生 */
.hero__img { background-image: url(hero-v9.jpg); }