:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1a1d21;
  --muted: #6b7280;
  --border: #e5e7eb;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --danger: #dc2626;
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.08);
  /* 輸入框 focus 的外環色。預設是淺色底用的藍，深色前台在 .storefront 覆寫成青藍 */
  --focus-ring: rgba(37, 99, 235, 0.15);
  /* sticky header 的高度。側邊欄 sticky 位移、抽屜起點與錨點捲動留白都吃這個值。
     這裡只是 JS 執行前的暫定值：header 高度會隨內容與斷點變動（桌面 124px、
     手機 126px），寫死任何一個都會在另一個斷點對不上，所以 catalog.js 會實際
     量測後覆寫這個變數。改 header 樣式不必再手動同步這裡。 */
  --header-h: 124px;
}

/* ---- 前台深色主題 ----
   深色只作用在加了 .storefront 的頁面（index/products/about/contact），
   後台 admin 不帶這個 class，維持上面的淺色變數。
   寫在 :root 之後、元件樣式之前，元件只要用 var() 就會自動吃到深色。 */
.storefront {
  color-scheme: dark; /* 讓 <select> 下拉選單、捲軸也走深色 */
  --bg: #08090c;
  --surface: #101318;
  --text: #e7ebf2;
  --muted: #8b93a3;
  --border: #1f242d;
  --accent: #22d3ee;              /* cyan-400，深底上發光感最好 */
  --accent-hover: #67e8f9;
  --accent-glow: rgba(34, 211, 238, 0.35);
  --danger: #f87171;              /* 深底要亮一點的紅才看得清 */
  --focus-ring: rgba(34, 211, 238, 0.22);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
  /* 兩道極淡的光暈，讓近黑底不至於死板。min-height 讓短頁面（關於／聯絡）
     的背景盒也至少有視窗高，光暈才會跟長頁面出現在同一個位置。 */
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(34, 211, 238, 0.08), transparent 60%),
    radial-gradient(1000px 500px at 100% 0%, rgba(99, 102, 241, 0.06), transparent 55%),
    var(--bg);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.logo {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

/* 品牌色：ZD 用主色、COMPANY 用文字色（淺色後台近黑、深色前台變亮） */
.logo .logo-zd { color: var(--accent); }
.logo .logo-co { color: var(--text); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---- 手機版分類選單開關（三條線）---- */
/* 桌面版不需要，只在 ≤640px 的媒體查詢裡打開 */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}

.menu-toggle .bar {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.2s, opacity 0.2s;
}

/* 展開時三條線收成 X */
body.menu-open .menu-toggle .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-toggle .bar:nth-child(2) { opacity: 0; }
body.menu-open .menu-toggle .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* 抽屜背板：桌面版完全不存在（不給 display 的話會是個 opacity:1、
   預設 pointer-events:auto 的空 div，等於一層隱形全螢幕攔截層）。 */
.drawer-backdrop {
  display: none;
}

/* ---- 產品頁的篩選列（搜尋 + 分類）----
   放在 .content 內、商品網格正上方，不在 header 裡。這樣產品頁的 header 與其他三頁
   同高（都只有 logo 一列），側欄導航才會落在同一個高度。 */
.site-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.filter-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}

.category-filter {
  min-width: 200px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.category-filter:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ---- Container ---- */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ---- 靜態內頁（關於／聯絡）---- */
/* 標語沿用首頁 .hero-* 的視覺語彙，只把份量收斂一級：內頁是閱讀頁，
   不需要跟首頁的主視覺搶。 */
.page-hero {
  padding: 20px 4px 26px;
}

.page-hero .hero-title {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.point-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* 賣點卡與聯絡卡共用同一套卡片語彙（深色特調寫在檔尾 .storefront 段） */
.point-card,
.contact-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 18px 20px;
}

.point-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 650;
}

.point-body {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none; /* 電話／Email 是連結，但外觀維持卡片 */
}

.contact-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact-value {
  font-size: 0.95rem;
  color: var(--text);
  word-break: break-word; /* 長 Email／地址不撐破卡片 */
}

/* ---- 前台兩欄版面：左側分類欄 + 右側商品 ---- */
/* 側邊欄貼齊視窗左緣、滿版高度（不受 .container 置中與留白影響） */
.catalog-layout {
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  align-items: flex-start;
}

.sidebar {
  flex: 0 0 240px;
  position: sticky;
  top: var(--header-h); /* 避開 sticky header（值由 catalog.js 量測後寫入） */
  min-height: calc(100vh - var(--header-h)); /* 貼滿視窗左側 */
  background: #15171a;
  border-right: 1px solid #26292f;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- 內容區 ---- */
.content {
  flex: 1;
  min-width: 0; /* 讓網格可壓縮，不撐破 flex */
  max-width: 1120px;
  margin: 0 auto; /* 在側邊欄右側剩餘空間內置中 */
  padding: 24px 20px 48px;
}

/* ---- 搜尋框 ---- */
/* 只出現在產品頁 header 的第二列，跟分類下拉並排；四頁的側欄都只剩頁面連結，
   導航位置才會一致。 */
.search {
  width: 100%;
  max-width: 420px;
  padding: 11px 16px;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* 跟分類下拉同一列：搜尋框吃掉剩餘寬度，但不要長到失控。
   高度與 padding 對齊旁邊的 .category-filter。 */
.site-filter .search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 420px;
  padding: 8px 12px;
  font-size: 0.9rem;
  border-radius: 8px;
}

/* ---- 側欄內的頁面連結（深色底，沿用原分類項的視覺）---- */
.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-nav a {
  display: block;
  padding: 10px 14px;
  font-size: 0.9rem;
  border-radius: 8px;
  color: #c6cdd4;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.sidebar-nav a:hover {
  background: #23262c;
  color: #fff;
}

.sidebar-nav a.active {
  background: var(--accent);
  color: #fff;
}

/* ---- 主頁 Hero（大標語 banner）---- */
.hero {
  padding: 44px 4px 36px;
}

.hero-eyebrow {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

/* 漸層文字：白 → 主色。深色底上才有這種金屬光感 */
.hero-title {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  margin: 0 0 26px;
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 560px;
}

.hero-cta {
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 8px 24px var(--accent-glow);
}

.hero-cta:hover {
  background: var(--accent-hover);
}

/* ---- 主頁精選區塊（熱門／新品）---- */
.featured-section {
  margin-bottom: 28px;
}

.section-title {
  margin: 0 0 12px;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 標題左側的青藍短條，呼應科技感 */
.section-title::before {
  content: "";
  width: 4px;
  height: 1em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  flex: 0 0 auto;
}

/* ---- Result info ---- */
.result-info {
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 12px;
}

/* ---- Product grid ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  /* 翻頁時 catalog.js 會 scrollIntoView，這裡補掉 sticky header 蓋住的高度 */
  scroll-margin-top: calc(var(--header-h, 0px) + 16px);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  flex-direction: column;
  cursor: pointer; /* 整張卡可點開詳情 */
}

.card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* 圖片固定 3:2 高度：容器高度只由 aspect-ratio 決定，不受原始圖片長寬比影響，
   同一列的商品名稱才會落在相同高度。圖片脫離文件流（absolute）以確保這點。 */
.card-img {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #eef0f3;
}

.card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.card-cat {
  font-size: 0.75rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.card-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
}

/* 卡片只放圖、分類、名稱、價格；描述改到點開的詳情彈窗顯示 */

/* 價格推到卡片底部，同一列的卡片價格才會對齊 */
.card .card-price {
  margin-top: auto;
}

/* 兩行價：歐元在上（主）、委幣在下（輔），所以用直向排列 */
.card-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
}

.price-eur {
  display: block;
}

/* 換算出來的委幣價是輔助資訊，縮小並用次級色，不跟歐元搶 */
.price-bs {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

/* 特價：原價劃掉、特價用紅色標出 */
.price-original {
  text-decoration: line-through;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 400;
  margin-right: 8px;
}

.price-sale {
  color: var(--danger);
}

/* ---- 分頁 ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}

.pagination[hidden] {
  display: none;
}

.page-info {
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
}

.pagination .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.muted {
  color: var(--muted);
  text-align: center;
  padding: 24px 0;
  grid-column: 1 / -1;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.2;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-danger {
  background: #fff;
  border-color: #fecaca;
  color: var(--danger);
}

.btn-danger:hover {
  background: #fef2f2;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.82rem;
  border-radius: 8px;
}

/* ---- Lang toggle ---- */
.lang-toggle {
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
}

.lang-toggle:hover {
  border-color: var(--accent);
}

/* ---- Inputs ---- */
.input {
  width: 100%;
  padding: 10px 13px;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}

.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.input-file {
  padding: 8px;
}

.error {
  color: var(--danger);
  font-size: 0.9rem;
  margin: 0;
}

/* ---- Footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  padding: 18px 20px;
}

.admin-link {
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.admin-link:hover {
  color: var(--accent);
}

/* ---- 商品詳情彈窗 ---- */
.product-modal {
  position: fixed;
  inset: 0;
  z-index: 60; /* 高於 header(10) 與手機版抽屜(30) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* display:flex 會蓋掉 [hidden] 的 UA 樣式，必須明講，否則關不掉（同 admin.css） */
.product-modal[hidden] {
  display: none;
}

.product-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 40, 0.55);
}

.product-modal-dialog {
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
}

.product-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 24, 40, 0.55);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.product-modal-close:hover {
  background: rgba(16, 24, 40, 0.8);
}

/* 桌面：左圖右資訊 */
.product-modal-body {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  padding: 24px;
}

.gallery-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #f3f4f6;
  border-radius: 10px;
  overflow: hidden;
}

.gallery-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 24, 40, 0.5);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}

.gallery-nav:hover {
  background: rgba(16, 24, 40, 0.8);
}

.gallery-nav-prev {
  left: 10px;
}

.gallery-nav-next {
  right: 10px;
}

.gallery-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(16, 24, 40, 0.6);
  color: #fff;
  font-size: 0.78rem;
}

.gallery-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.gallery-thumb {
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb.active {
  border-color: var(--accent);
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.modal-name {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.modal-desc-title {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.modal-desc {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  white-space: pre-wrap; /* 描述裡的換行照原樣顯示 */
}

/* 彈窗開著時鎖住背景捲動 */
body.modal-open {
  overflow: hidden;
}

/* ---- 前台深色元件微調 ----
   只作用在 .storefront 之下，後台 admin 不受影響。
   放在檔案後段方便一次看完所有深色特調；這些選擇器都比原規則多一層，
   特異性較高，不依賴順序也能覆蓋。 */
.storefront .site-header {
  background: rgba(10, 12, 16, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

/* 卡片：上亮下暗的玻璃漸層，hover 時邊框與外光暈轉青藍 */
.storefront .card {
  background: linear-gradient(180deg, #151a21, #101318);
  border-radius: 16px;
}

.storefront .card:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(34, 211, 238, 0.25),
    0 0 26px var(--accent-glow);
}

/* 內頁（關於／聯絡）的卡片沿用同一套玻璃漸層 */
.storefront .point-card,
.storefront .contact-card {
  background: linear-gradient(180deg, #151a21, #101318);
  border-radius: 16px;
}

/* 只有真的可點的聯絡卡（電話／Email）才上浮發光；地址與營業時間是純顯示，
   跟著浮起來會誤導人以為可以點。 */
.storefront .contact-card[href] {
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.storefront .contact-card[href]:hover {
  transform: translateY(-4px);
  border-color: rgba(34, 211, 238, 0.5);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(34, 211, 238, 0.25),
    0 0 26px var(--accent-glow);
}

/* 圖片是 object-fit: cover 滿版，這層底只在載入中露出，用深色避免白閃 */
.storefront .card-img,
.storefront .gallery-stage {
  background: #161a21;
}

/* 滑過卡片時圖片極輕微放大，是那种說不上來但很有感的精緻度 */
.storefront .card-img img {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.storefront .card:hover .card-img img {
  transform: scale(1.06);
}

/* 亮青藍底配白字對比不足，按鈕文字改深色 */
.storefront .btn-primary {
  color: #05222a;
}

.storefront .sidebar {
  background: #0c0e12;
  border-right-color: #1c212a;
}

/* 選中項原本是一整塊亮青藍，在深色底上太吵；改成淡青底＋青字＋左側短條，
   保留辨識度但安靜得多。用 inset box-shadow 畫短條，不會撐動版面。 */
.storefront .sidebar-nav a.active {
  background: rgba(34, 211, 238, 0.12);
  color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.storefront .product-modal-backdrop {
  background: rgba(4, 6, 9, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.storefront .product-modal-dialog {
  border: 1px solid var(--border);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .header-inner {
    flex-wrap: wrap;
  }
  /* 彈窗改單欄：圖片在上、資訊在下；縮圖縮小以塞進窄螢幕 */
  .product-modal {
    padding: 12px;
  }
  .product-modal-dialog {
    max-height: 92vh;
  }
  .product-modal-body {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .modal-name {
    font-size: 1.15rem;
  }
  .gallery-thumb {
    width: 52px;
    height: 52px;
  }
  /* 窄螢幕改成上下堆疊：側邊欄疊到商品上方並取消 sticky */
  .catalog-layout {
    flex-direction: column;
    gap: 16px;
  }
  .menu-toggle {
    display: flex;
  }
  /* 篩選列：窄螢幕改成兩列 — 搜尋框獨佔一列，分类 label 與下拉擠第二列，
     不然 375px 塞不下（分類名稱是使用者自訂的，長度不可預期）。 */
  .site-filter {
    flex-wrap: wrap;
    gap: 8px;
  }
  .site-filter .search {
    flex: 1 1 100%;
    max-width: none;
  }
  .category-filter {
    flex: 1;
    min-width: 0;
  }
  /* 手機版側欄（頁面連結）改成「左側滑出抽屜」：平常滑出畫面外，
     點 ☰ 滑入蓋住商品，不是往下推開。 */
  .sidebar {
    position: fixed;
    top: var(--header-h);
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    flex: none;
    min-height: 0;
    z-index: 30;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto; /* 分類多時抽屜內可捲 */
  }
  body.menu-open .sidebar {
    transform: translateX(0);
  }
  /* 背板：蓋住商品區，點它關閉 */
  .drawer-backdrop {
    display: block;
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
    z-index: 20;
  }
  body.menu-open .drawer-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  /* 手機版固定一列 3 件（375px 下每張約 105px）。用固定 3 欄而非 auto-fill，
     寬一點的手機才不會突然跳成 5 欄、窄一點的也不會掉回 2 欄。 */
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  /* 卡片變窄，內距與字級要跟著收，否則名稱與「€ … ／ Bs. …」兩行會擠爆 */
  .card-body {
    padding: 10px 10px 12px;
    gap: 3px;
  }
  .card-cat {
    font-size: 0.62rem;
    letter-spacing: 0.02em;
  }
  /* 使用者反映手機版產品名稱太大。縮到 0.78rem 後一行塞得下更多字，
     長型號（如 HUMINIFICADOR）也比較不會被 overflow-wrap 從中間折斷。 */
  .card-title {
    font-size: 0.78rem;
    overflow-wrap: anywhere; /* 長型號不撐破卡片 */
  }
  .card-price {
    font-size: 0.95rem;
  }
  .price-original {
    font-size: 0.75rem;
    margin-right: 4px;
  }
  .price-bs {
    font-size: 0.72rem;
  }
  /* 翻頁鈕在窄螢幕上排成一列會擠，讓頁次資訊自己一行 */
  .pagination {
    flex-wrap: wrap;
    gap: 10px;
  }
}