/* 淳安企業 官網型錄（靜態頁）
 * 由 CAPOS2「官網管理 → 發佈」產生後上傳到 R2，由 Cloudflare Worker 對外提供。
 * 這支檔案會原封複製到網站的 assets/site.css；改了之後重新發佈即可（檔名帶版本參數，不怕快取）。
 */
:root {
  --g: #2d934a;
  --g-dark: #1f6b35;
  --g-soft: #eaf5ed;
  --ink: #2b2b2b;
  --mute: #6b6b6b;
  --line: #dfe5e0;
  --bg: #ffffff;
  --bg-alt: #f6f9f7;
  --wrap: 1200px;
  --r: 10px;
  --shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font: 16px/1.7 "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--g-dark); text-decoration: none; }
a:hover { color: var(--g); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 頁首 ---------- */
.hd { background: #fff; border-bottom: 3px solid var(--g); position: sticky; top: 0; z-index: 20; }
.hd .wrap { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.hd .logo { flex: 0 0 auto; }
.hd .logo img { height: 52px; width: auto; }
/* 台塑三家 LOGO：高度一定要小於淳安 LOGO（使用者 2026-10-16） */
.hd .brands { height: 40px; width: auto; flex: 0 0 auto; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.nav a { display: block; padding: 8px 12px; color: var(--ink); border-radius: 6px; font-weight: 500; white-space: nowrap; }
.nav a:hover, .nav a.on { color: var(--g); background: var(--g-soft); }
.nav .ext::after { content: " ↗"; font-size: .8em; }
.hd-search { display: flex; }
.hd-search input {
  width: 13em; font: inherit; font-size: 15px; padding: 6px 10px;
  border: 1px solid var(--line); border-right: 0; border-radius: 6px 0 0 6px; outline: none;
}
.hd-search input:focus { border-color: var(--g); }
.hd-search button {
  font: inherit; font-size: 15px; padding: 6px 12px; border: 0; cursor: pointer;
  background: var(--g); color: #fff; border-radius: 0 6px 6px 0;
}
.menu-btn { display: none; margin-left: auto; font-size: 26px; line-height: 1; background: none; border: 0; padding: 6px 8px; cursor: pointer; color: var(--g-dark); }

/* 頁首放了台塑三家 LOGO 之後，1440 下只剩約 38px 餘裕：
   ≤1220 先收起頁首搜尋框（「產品型錄」頁本身就有搜尋）、≤920 改成 ☰ 選單（搜尋框回到選單裡）、≤540 兩組 LOGO 等比縮小、≤370 再縮一級（實測寬度見 CLAUDE.md） */
@media (min-width: 921px) and (max-width: 1220px) { .hd-search { display: none; } }
@media (max-width: 540px) {
  .hd .wrap { gap: 10px; }
  .hd .logo img { height: 34px; }
  .hd .brands { height: 26px; }
}
@media (max-width: 370px) {
  .hd .logo img { height: 28px; }
  .hd .brands { height: 22px; }
}
@media (max-width: 920px) {
  .menu-btn { display: block; }
  .hd .wrap { flex-wrap: wrap; }
  .nav, .hd-search { display: none; width: 100%; }
  .hd.open .nav { display: flex; flex-direction: column; align-items: stretch; margin: 0; padding-bottom: 8px; }
  .hd.open .hd-search { display: flex; padding-bottom: 12px; }
  .hd-search input { flex: 1; width: auto; }
}

/* ---------- 首頁 ---------- */
.hero { background: var(--g-dark) center / cover no-repeat; }
.hero img { width: 100%; min-height: 110px; object-fit: cover; }   /* 110：375 寬時橫幅上的標語剛好不被裁到 */
.sec { padding: 48px 0; }
.sec.alt { background: var(--bg-alt); }
.sec-hd { text-align: center; margin-bottom: 28px; }
.sec-hd small { display: block; color: var(--g); letter-spacing: .25em; font-weight: 700; font-size: 13px; }
.sec-hd h2 { margin: 2px 0 8px; font-size: 28px; }
.sec-hd p { margin: 0 auto; max-width: 720px; color: var(--mute); }
.series { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.sec-series { background: #f3f3f3 url(img/product_bg.jpg) center / cover no-repeat; }   /* 舊官網的淺灰橫線底 */
/* 系列卡：平常綠底白線稿、滑鼠停留換成商品圖；系列名稱直排白字（照舊官網）。線稿圖的綠是 #5faa74 */
.series a { position: relative; display: block; overflow: hidden; background: #5faa74; }
.series img { width: 100%; aspect-ratio: 288 / 474; object-fit: cover; transition: opacity .3s; }
.series .hover { position: absolute; inset: 0; opacity: 0; background: #fff; }
.series a:hover .hover, .series a:focus-visible .hover { opacity: 1; }
.series span {
  position: absolute; left: 22px; bottom: 26px; writing-mode: vertical-rl; letter-spacing: .25em;
  color: #fff; font-weight: 500; font-size: 20px; line-height: 1; transition: color .3s;
}
.series a:hover span, .series a:focus-visible span { color: var(--g); }   /* 換成白底商品圖時字改綠色，才看得到 */
@media (prefers-reduced-motion: reduce) { .series img, .series span { transition: none; } }
/* 首頁「關於我們」區塊：左文右圖（照舊官網） */
.values { background: #fff url(img/about_bg.jpg) center / cover no-repeat; }
.values-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.values-txt { max-width: 400px; justify-self: end; }
.values-txt small { color: var(--g); letter-spacing: .15em; font-weight: 700; font-size: 20px; }
.values-txt h2 { color: var(--g); font-size: 32px; margin: 4px 0 14px; letter-spacing: .05em; }
.values-sl { font-size: 20px; font-weight: 500; margin: 0 0 8px; letter-spacing: .05em; }
.values-txt .pre { color: var(--mute); font-size: 14px; line-height: 2.1; letter-spacing: .05em; margin: 0; }
.values-more { text-align: right; margin: 28px 0 0; }
.values-more a { display: inline-block; padding: 4px 8px; border-bottom: 1px solid var(--g); color: var(--g-dark); letter-spacing: .08em; font-size: 15px; }
.values-more a:hover { background: var(--g-soft); }
.values-in > img { width: 100%; max-width: 430px; justify-self: center; }
@media (max-width: 760px) {
  .values-in { grid-template-columns: 1fr; gap: 24px; }
  .values-txt { max-width: none; justify-self: stretch; }
  .values-in > img { max-width: 320px; }
}
.slogan { color: var(--g); font-weight: 700; letter-spacing: .2em; margin: 4px 0 12px; }
.pre { white-space: pre-line; }
.btn {
  display: inline-block; padding: 9px 22px; border-radius: 999px; background: var(--g); color: #fff;
  font-weight: 700; border: 0; font: inherit; font-weight: 700; cursor: pointer;
}
.btn:hover { background: var(--g-dark); color: #fff; }
.btn.line { background: #06c755; }
.btn.ghost { background: #fff; color: var(--g-dark); border: 1px solid var(--g); }
@media (max-width: 860px) {
  .series { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 型錄 ---------- */
.crumb { font-size: 14px; color: var(--mute); padding: 14px 0 0; }
.crumb a { color: var(--mute); }
.crumb a:hover { color: var(--g); }
.page-title { font-size: 26px; margin: 6px 0 18px; }
.cat-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; padding-bottom: 48px; }
.side h3 { margin: 0 0 6px; font-size: 15px; color: var(--g); }
.side ul { list-style: none; margin: 0 0 14px; padding: 0; }
.side li a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--ink); font-size: 15px; }
.side li a:hover { background: var(--g-soft); }
.side li a.on { background: var(--g); color: #fff; }
.side li a em { font-style: normal; color: var(--mute); font-size: 13px; }
.side li a.on em { color: #e5f3e9; }
.side details { border-bottom: 1px solid var(--line); }
.side summary { cursor: pointer; padding: 8px 4px; font-weight: 700; list-style: none; }
.side summary::-webkit-details-marker { display: none; }
.side summary::after { content: "＋"; float: right; color: var(--g); }
.side details[open] summary::after { content: "－"; }
@media (max-width: 860px) {
  .cat-layout { grid-template-columns: 1fr; }
  .side { order: 2; }
}
.sub-title { font-size: 20px; margin: 26px 0 12px; padding-left: 10px; border-left: 4px solid var(--g); }
.sub-title:first-child { margin-top: 0; }
.sub-title a { color: inherit; }
.sub-title small { color: var(--mute); font-weight: 400; font-size: 14px; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; color: var(--ink); transition: box-shadow .2s, transform .2s;
}
.card[hidden] { display: none; }   /* .card 的 display:flex 是作者樣式，會贏過瀏覽器預設的 [hidden] */
.card:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transform: translateY(-2px); color: var(--ink); }
.card .pic { aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; }
.card .pic img { width: 100%; height: 100%; object-fit: contain; }
.card .noimg { color: #b7c2ba; font-size: 13px; }
.card .txt { padding: 10px 12px 12px; border-top: 1px solid var(--line); flex: 1; }
.card .nm { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .cd { font-size: 12px; color: var(--mute); margin-top: 4px; }
@media (max-width: 480px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card .nm { font-size: 14px; }
}

/* 全部商品（搜尋） */
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.filter-bar input {
  flex: 1 1 260px; font: inherit; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; outline: none;
}
.filter-bar input:focus { border-color: var(--g); }
.filter-bar select { font: inherit; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.count { color: var(--mute); font-size: 14px; margin: 0 0 12px; }
.empty { text-align: center; color: var(--mute); padding: 40px 0; }

/* ---------- 商品頁 ---------- */
.prod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; padding: 6px 0 24px; }
.gallery .main { border: 1px solid var(--line); border-radius: var(--r); background: #fff; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery .main img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.thumbs button { width: 70px; height: 70px; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; }
.thumbs button.on { border-color: var(--g); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; }
.info h1 { font-size: 24px; margin: 0 0 8px; line-height: 1.45; }
.info .code { color: var(--mute); font-size: 14px; margin-bottom: 16px; }
.info .code b { color: var(--ink); font-weight: 500; }
.feat { list-style: none; padding: 14px 18px; margin: 0 0 18px; background: var(--g-soft); border-radius: var(--r); }
.feat li { padding-left: 1.2em; position: relative; }
.feat li::before { content: "●"; color: var(--g); position: absolute; left: 0; font-size: .75em; top: .35em; }
.ask { border-top: 1px dashed var(--line); padding-top: 16px; color: var(--mute); font-size: 15px; }
.ask .btn { margin: 8px 8px 0 0; }
.detail { max-width: 800px; margin: 0 auto; padding-bottom: 40px; }
.detail h2 { font-size: 20px; text-align: center; margin: 24px 0 16px; }
.detail img { margin: 0 auto; }
.detail .pre { margin: 18px 0; }
@media (max-width: 860px) { .prod { grid-template-columns: 1fr; gap: 18px; } }

/* 大圖檢視 */
.lb { position: fixed; inset: 0; background: rgba(0, 0, 0, .85); display: none; align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; padding: 16px; }
.lb.on { display: flex; }
.lb img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- 關於我們 ---------- */
.about { padding: 8px 0 48px; }
.about-img { margin: 0 auto; width: 100%; max-width: 1200px; }   /* 原圖 1200 寬，不放大 */

/* ---------- 頁尾 ---------- */
.ft { background: #20402a; color: #d7e6db; padding: 32px 0 20px; font-size: 14px; }
.ft .wrap { display: grid; grid-template-columns: 1fr 1.3fr auto; gap: 24px; }
.ft h4 { color: #fff; margin: 0 0 8px; font-size: 16px; }
.ft a { color: #d7e6db; }
.ft a:hover { color: #fff; }
/* 電話與 E-mail 看得出來可以點（手機點了直接撥號／開寫信畫面） */
.ft a.tap { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.ft ul { list-style: none; margin: 0; padding: 0; }
.ft .copy { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 14px; color: #a9c2b0; font-size: 13px; }
@media (max-width: 760px) {
  .ft .wrap { grid-template-columns: 1fr; }
  .ft .wrap > .ft-brand { justify-self: start; }   /* 手機排成一欄時跟另外兩欄一樣靠左，不要孤零零貼右 */
}

/* 頁尾右欄（使用者 2026-10-20）：QR code 在上、LINE 加好友按鍵在下，兩者一組置中、靠右；
   總高度＝左邊「系列產品」「聯絡資訊」的高度（標題 16px＋8px＋四列 23.8px ≈ 130.4px）：
   QR 88 ＋ 間距 8 ＋ 按鍵 34.1（13px×1.7＋上下 6px）≈ 130.1。改了頁尾字級或列數要重算這三個數。 */
.ft-brand { display: flex; flex-direction: column; align-items: center; gap: 8px; justify-self: end; align-self: start; }
.ft-brand .btn { font-size: 13px; padding: 6px 14px; }
.line-qr { flex: 0 0 auto; background: #fff; border-radius: 4px; line-height: 0; }
.line-qr svg, .line-qr img { display: block; width: 88px; height: 88px; }
.qr-pop { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: none; align-items: center; justify-content: center; z-index: 60; padding: 16px; cursor: pointer; }
.qr-pop.on { display: flex; }
.qr-card { background: #fff; border-radius: 12px; padding: 20px 24px 14px; text-align: center; color: var(--ink); }
.qr-card svg, .qr-card img { display: block; width: 260px; height: 260px; max-width: 100%; margin: 0 auto; }
.qr-card p { margin: 10px 0 0; }
.qr-card .qr-close { color: var(--mute); font-size: 13px; margin-top: 4px; }

.to-top { position: fixed; right: 16px; bottom: 16px; width: 44px; height: 44px; border-radius: 50%; background: var(--g); color: #fff; border: 0; font-size: 20px; cursor: pointer; display: none; box-shadow: var(--shadow); z-index: 30; }
.to-top.on { display: block; }