:root {
  /* ── Palette: 紙 · 墨 · 印 · 靛 (field-notebook ledger) ── */
  --paper:       #f6f3ea;   /* 暖帳本紙底 */
  --paper-card:  #fffdf7;   /* 卡片/表面，比紙底稍亮 */
  --ink:         #23292b;   /* 主文字（鋼筆墨色） */
  --ink-soft:    #5b615e;   /* 次要文字 */
  --seal:        #b23a2e;   /* 朱印硃紅 — 唯一品牌重點色 */
  --seal-deep:   #8f2c22;   /* seal hover/pressed */
  --indigo:      #2b4a6f;   /* 藍染靛 — 互動/連結主色 */
  --indigo-deep: #1f3a58;
  --indigo-bg:   #e7eef4;   /* 靛色淡底（active 態） */
  --line:        rgba(35, 41, 43, 0.14);
  --line-soft:   rgba(35, 41, 43, 0.07);
  --warn:        #b23a2e;
  --warn-bg:     #fbe9e6;

  /* 國家印章色（去飽和印泥色調，紅／藍／綠／琥珀／葡紫清楚分離） */
  --seal-tw: #bb3b2e;   /* 硃紅 */
  --seal-jp: #2f6f97;   /* 縹藍 */
  --seal-kr: #2f7d5b;   /* 松綠 */
  --seal-hk: #c0892f;   /* 琥珀金 */
  --seal-mo: #8a5a8f;   /* 葡紫 */

  /* 分類調色盤（固定，marker / 圖例 / chip 共用） */
  --cat-1: #c0563f; --cat-2: #c98a2b; --cat-3: #6f8f3a; --cat-4: #2f8f86;
  --cat-5: #3a6ea5; --cat-6: #7a5aa6; --cat-7: #b5497f; --cat-8: #7d6a55;
  --cat-9: #3f8a4a; --cat-10: #4a57a6; --cat-11: #b56b2e; --cat-12: #5f7a8c;

  /* 間距 scale（4px 基準） */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* 圓角 scale（偏直角「歸檔卡」感） */
  --radius-sm: 3px;
  --radius: 5px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* 型級 scale */
  --text-xs: 0.75rem; --text-sm: 0.85rem; --text-base: 0.95rem;
  --text-md: 1.05rem; --text-lg: 1.25rem; --text-xl: 1.6rem; --text-2xl: 2.1rem;

  /* 字體角色：display · body · data */
  --font-display: "Fraunces", "Noto Serif TC", "Noto Serif CJK TC", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", "Microsoft JhengHei",
    "Hiragino Sans", "Noto Sans CJK TC", sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 陰影 scale */
  --shadow-1: 0 1px 2px rgba(35, 41, 43, 0.06);
  --shadow-2: 0 4px 14px rgba(35, 41, 43, 0.10);
  --shadow-3: 0 14px 30px rgba(35, 41, 43, 0.14);

  /* 觸控最小命中區 + z-index scale */
  --tap: 44px;
  --z-dropdown: 30;
  --z-sticky-filter: 100;
  --z-popover: 200;
  --z-fab: 900;
  --z-header: 1400;
  --z-drawer: 1600;

  /* ── 向後相容別名（既有 CSS 不需大改） ── */
  --color-bg: var(--paper);
  --color-fg: var(--ink);
  --color-muted: var(--ink-soft);
  --color-border: var(--line);
  --color-accent: var(--indigo);
  --color-accent-bg: var(--indigo-bg);
  --color-warn: var(--warn);
  --color-warn-bg: var(--warn-bg);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
}

/* 等寬資料字：評分 / 價格帶 / 日期 / 座標 / 筆數（田野帳本感） */
.mono {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}
a:hover, a:focus { text-decoration: underline; }

button {
  font: inherit;
  cursor: pointer;
}

.visually-hidden, .aria-live-region {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 8px;
  background: var(--color-accent);
  color: #fff;
  padding: 8px 12px;
  border-radius: var(--radius);
  z-index: 1000;
}
.skip-link:focus { top: 8px; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1400;
  display: flex;
  flex-direction: column;
  padding: 0 24px;
  background: #fff;
  border-top: 3px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.site-header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 10px 0;
}
.site-logo {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--color-fg);
  white-space: nowrap;
}

/* 品牌印章標：藍染靛蓋印的「羅」字 */
.brand-seal {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  background: var(--indigo);
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.3);
}
a.site-logo { color: var(--color-fg); }
a.site-logo:hover { color: var(--color-accent); text-decoration: none; }

/* 手機導覽開關（桌機隱藏；行動裝置顯示） */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  margin-left: -8px;
  background: none;
  border: none;
  border-radius: var(--radius);
  color: var(--ink);
}
.nav-toggle:hover { color: var(--indigo); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-drawer) - 1);
  background: rgba(35, 41, 43, 0.45);
}
.nav-backdrop[hidden] { display: none; }

.lang-switcher {
  grid-column: 3;
  justify-self: end;
  align-self: center;
  margin: 0;
}
.lang-switcher select {
  font-size: 0.78rem;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-bg);
  color: var(--color-muted);
  cursor: pointer;
}
.lang-switcher select:hover {
  border-color: var(--color-accent);
  color: var(--color-fg);
}
.lang-switcher select:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

.country-nav-shell {
  grid-column: 2;
  display: flex;
  justify-content: center;
  width: auto;
}

.country-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.country-nav-item {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: -12px;
}

.country-nav-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.country-link {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  background: transparent;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  color: var(--color-fg);
  transition: background 0.15s ease, color 0.15s ease;
}
.country-link[aria-current="page"] {
  color: var(--color-accent);
  background: var(--color-accent-bg);
}
.country-link:hover,
.country-link:focus {
  color: var(--color-accent);
  background: var(--color-accent-bg);
  text-decoration: none;
}

.country-subnav {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  min-width: 180px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.12);
  z-index: 30;
}

.country-nav-item:hover .country-subnav,
.country-nav-item:focus-within .country-subnav {
  display: grid;
  gap: 4px;
}

.country-subnav-link {
  display: block;
  padding: 6px 10px;
  border-radius: var(--radius);
  color: var(--color-fg);
  text-align: center;
}

.country-subnav-link:hover,
.country-subnav-link:focus,
.country-subnav-link.is-active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  text-decoration: none;
}

.section-tablist { display: none; }
[role="tablist"] {
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 0;
  border-top: 1px solid var(--color-border);
}
[role="tablist"] [role="tab"] {
  padding: 5px 14px;
  border-radius: 20px;
  background: transparent;
  color: var(--color-muted);
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.15s ease, color 0.15s ease;
}
[role="tablist"] [role="tab"][aria-current="page"] {
  background: var(--color-accent);
  color: #fff;
}
[role="tablist"] [role="tab"]:hover:not([aria-current="page"]) {
  background: var(--color-accent-bg);
  color: var(--color-accent);
}

main {
  padding: 16px 24px 48px;
  max-width: 1600px;
  margin: 0 auto;
}
/* 資料密集的店家頁在大螢幕用更寬版面；內容頁維持 1600 收窄 */
body[data-current-section="shops"] main { max-width: 1920px; }

/* Landing page */
.landing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 0 4rem;
}

.landing-hero {
  position: relative;
  background: linear-gradient(135deg, #fdf8f2 0%, #fafaf7 60%, #f0f5fa 100%);
  border-radius: 12px;
  padding: 3rem 2.5rem;
  margin-bottom: 3rem;
  overflow: hidden;
}

.landing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
  border-radius: 12px;
}

.landing-hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  position: relative;
  z-index: 1;
}

.landing-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.landing-quote {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.3;
  color: var(--color-fg);
  margin: 0;
  padding: 0;
  border: none;
}

.landing-data {
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.landing-prose p {
  margin: 0 0 1rem;
  color: var(--color-muted);
  line-height: 1.75;
}

.landing-tips {
  margin: 0;
  padding: 0 0 0 1.2rem;
  color: var(--color-muted);
  font-size: 0.9rem;
  line-height: 1.9;
}

.landing-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin: 0 0 1.25rem;
}

.country-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0 0 2.5rem;
  padding: 0;
}

.country-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 1.25rem 1.5rem;
  background: var(--paper-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.country-card:hover {
  border-color: var(--seal-color, var(--indigo));
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
  text-decoration: none;
}

/* 地區印章：依國家上色的方形蓋印（國家代碼 TW / KR…） */
.region-seal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--seal-color, var(--seal));
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.28);
}

.country-card-flag { font-size: 2rem; line-height: 1; }

.country-card-name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-fg);
}

.country-card-sections { font-size: 0.8rem; color: var(--color-muted); }

.cta {
  display: inline-block;
  padding: 12px 28px;
  margin-top: 1rem;
  background: var(--color-accent);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: 1.05rem;
}
.cta:hover { background: #20587a; text-decoration: none; }

.cta-landing {
  padding: 14px 36px;
  letter-spacing: 0.02em;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.cta-landing:hover {
  background: #20587a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42, 111, 151, 0.28);
  text-decoration: none;
}

.empty-message {
  margin-top: 1rem;
  color: var(--color-muted);
  font-style: italic;
}

/* Error/404 */
.error-page { max-width: 700px; margin: 4rem auto; text-align: center; }
.error-page h1 { font-size: 1.6rem; }

/* Search bar */
.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 1rem 0;
}
.search-bar .search-label {
  flex: 1 1 280px;
}
.search-bar input[type="search"] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.filter-clear {
  flex: 0 0 auto;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.search-bar .filter-region {
  flex: 0 0 auto;
}

/* Controls bar */
.controls-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.875rem 1rem;
  margin: 1rem 0;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  /* 篩選列黏在 site-header 下方（商品/食記頁手機+桌機、店家頁桌機）。
     店家頁手機版改由 .shops-toolbar 處理，見下方 @media 覆寫。 */
  position: sticky;
  top: var(--header-h, 96px);
  z-index: var(--z-sticky-filter);
}
/* 手機篩選開關：桌機隱藏，行動裝置顯示 */
.controls-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}
.controls-toggle.has-active {
  background: var(--indigo-bg);
  border-color: var(--indigo);
  color: var(--indigo);
}
.controls-bar .filter-region, .controls-bar .filter-channel, .controls-bar .filter-category, .controls-bar label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.controls-bar .search-bar {
  flex: 0 0 auto;
  align-items: center;
  margin: 0;
}

.controls-bar .search-label {
  flex: 0 0 220px;
  min-width: 220px;
}

.controls-bar .filter-region,
.controls-bar .filter-channel,
.controls-bar .filter-category {
  flex-direction: row;
  flex-wrap: nowrap;
  min-width: 0;
}
.controls-bar .filter-region-label,
.controls-bar .filter-channel-label,
.controls-bar .filter-category-label,
.controls-bar label > span:first-child {
  color: var(--color-muted);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
}
.controls-bar select {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-fg);
  font-size: 0.95rem;
  min-width: 0;
  max-width: 100%;
}
.region-select {
  position: relative;
  min-width: 0;
}
.filter-region-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.region-select-trigger {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 160px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-fg);
  font-size: 0.95rem;
  cursor: pointer;
}

.controls-bar input[type="search"],
.filter-clear,
[data-role="sort-direction"] {
  min-height: 38px;
}

.controls-bar input[type="search"] {
  padding: 8px 10px;
  color: var(--color-fg);
  font-size: 0.95rem;
}

.filter-clear {
  padding: 8px 14px;
  font-size: 0.95rem;
  line-height: 1.2;
  cursor: pointer;
}

.region-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: min(320px, 80vw);
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.region-select-panel[hidden] {
  display: none;
}

.region-search input {
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.region-empty-message {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}

.region-options {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}

.region-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
}

.region-options label[hidden] {
  display: none;
}

.region-options label.active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
}

.region-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Channel multi-select (mirrors region-select) */
.channel-select {
  position: relative;
  min-width: 0;
}
.filter-channel-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.channel-select-trigger {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 160px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-fg);
  font-size: 0.95rem;
  cursor: pointer;
}
.channel-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: min(320px, 80vw);
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.channel-select-panel[hidden] {
  display: none;
}
.channel-options {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}
.channel-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
}
.channel-options label[hidden] {
  display: none;
}
.channel-options label.active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
}
.channel-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Category multi-select (mirrors region-select, includes search) */
.category-select {
  position: relative;
  min-width: 0;
}
.filter-category-label {
  flex: 0 0 auto;
  white-space: nowrap;
}
.category-select-trigger {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 160px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-fg);
  font-size: 0.95rem;
  cursor: pointer;
}
.category-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: min(320px, 80vw);
  padding: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.category-select-panel[hidden] {
  display: none;
}
.category-search input {
  width: 100%;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.category-empty-message {
  margin: 8px 0 0;
  color: var(--color-muted);
  font-size: 0.9rem;
}
.category-options {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
}
.category-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius);
  cursor: pointer;
}
.category-options label[hidden] {
  display: none;
}
.category-options label.active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
}
.category-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

/* Product card channel chips + purchase notes */
.card-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
/* FR-035: collapse long purchase-channel lists behind a 展開/收合 toggle. */
.card-channels.is-collapsed {
  max-height: 1.9em;
  overflow: hidden;
}
.channels-toggle {
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-accent, #b4632a);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

/* Table */
.table-wrap {
  overflow-x: auto;
}
.shop-table {
  width: 100%;
  min-width: 1000px;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.92rem;
}
.shop-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: #f0f0eb;
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  position: relative;
}
.col-resize-handle {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 1;
}
.col-resize-handle:hover,
.col-resize-handle.dragging { background: var(--color-accent); opacity: 0.5; }
.shop-table thead button {
  background: none;
  border: none;
  font-weight: inherit;
  padding: 0;
  text-align: left;
}
.shop-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.shop-table thead th:last-child,
.shop-table tbody td:last-child { min-width: 130px; white-space: nowrap; }
.shop-table thead th:nth-child(1),
.shop-table tbody td:nth-child(1) { min-width: 150px; }
.shop-table thead th:nth-child(2),
.shop-table tbody td:nth-child(2) { min-width: 60px; }
.shop-table thead th:nth-child(3),
.shop-table tbody td:nth-child(3) { min-width: 100px; }
.shop-table thead th:nth-child(4),
.shop-table tbody td:nth-child(4) { min-width: 100px; }
.shop-table thead th:nth-child(5),
.shop-table tbody td:nth-child(5) { min-width: 120px; }
.shop-table thead th:nth-child(6),
.shop-table tbody td:nth-child(6) { min-width: 60px; }
.shop-table thead th:nth-child(7),
.shop-table tbody td:nth-child(7) { min-width: 100px; }
.shop-table thead th:nth-child(8),
.shop-table tbody td:nth-child(8) { min-width: 100px; }
.shop-table thead th:nth-child(9),
.shop-table tbody td:nth-child(9) { min-width: 80px; }
.shop-table tbody td:nth-child(5) .addr-text {
  display: inline-block;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.shop-table tbody tr:nth-child(even):not(.highlighted) { background: #f8f8f3; }
.shop-table tbody tr.highlighted { background: #fff7d6; }
.shop-table tbody tr:hover { background: #f0f5fb; cursor: pointer; }
.shop-table tbody tr.no-map { opacity: 0.62; }
.shop-table tbody tr.no-map:hover { cursor: default; background: transparent; }
.shop-table tbody tr:nth-child(even).no-map:hover { background: #f8f8f3; }
.no-location-icon { color: #bbb; margin-right: 4px; display: inline-flex; align-items: center; vertical-align: middle; }
/* 桌機：地址 wrapper 不影響表格佈局（圖示+文字視同 td 直接子層） */
.cell-addr { display: contents; }

/* 店家表格 → 手機紀錄卡（<768px）：每列變一張卡，每格 label/value 並排 */
@media (max-width: 767px) {
  .shop-table { min-width: 0; border: 0; font-size: 0.9rem; }
  .shop-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .shop-table,
  .shop-table tbody,
  .shop-table tbody tr,
  .shop-table tbody td {
    display: block;
    width: 100%;
  }
  .shop-table tbody td { min-width: 0 !important; }
  .shop-table tbody tr,
  .shop-table tbody tr:nth-child(even):not(.highlighted) {
    margin: 0 0 12px;
    padding: 6px 12px 8px;
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
  }
  .shop-table tbody tr.highlighted { background: #fff7d6; }
  .shop-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed var(--line-soft);
    white-space: normal;
    text-align: right;
  }
  .shop-table tbody td:last-child { border-bottom: 0; }
  .shop-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 5em;
    text-align: left;
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
  /* 名稱列：當卡片標題，整列、左對齊、無 label */
  .shop-table tbody td:first-child {
    display: block;
    margin-bottom: 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-align: left;
  }
  .shop-table tbody td:first-child::before { display: none; }
  .shop-table tbody td .addr-text {
    max-width: none;
    white-space: normal;
    text-align: right;
  }
  .shop-table tbody td.empty-message { display: block; text-align: center; }
  .shop-table tbody td.empty-message::before { display: none; }
  /* 卡片內 chips 成組靠右、可換行（避免被 space-between 撐散） */
  .shop-table tbody td .cell-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
  }
  .shop-table tbody td .cell-chips .chip { margin: 0; }
  /* 地址：圖示 + 文字成組靠右 */
  .shop-table tbody td .cell-addr {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
  }
  /* 價位列：標籤與 info icon 靠左成組（icon 緊貼標籤），價位值（$$）靠右對齊 */
  .shop-table tbody td.price-band-cell { justify-content: flex-start; gap: 6px; }
  .shop-table tbody td.price-band-cell::before { flex: 0 0 auto; }
  .shop-table tbody td.price-band-cell .price-band-value { margin-left: auto; }
  /* 價位說明彈窗的表格是獨立元件，避免繼承店家「表格→卡片」攤平樣式
     （thead 隱藏 / td 攤平 / ::before 標籤）與桌機儲存格 padding / min-width，
     以高權重選擇器還原原生表格排版，與 products 頁一致。 */
  .shop-table .price-info-panel .price-tip-table {
    display: table;
    width: auto;
  }
  .shop-table .price-info-panel .price-tip-table thead {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    display: table-header-group;
  }
  .shop-table .price-info-panel .price-tip-table tbody {
    display: table-row-group;
  }
  .shop-table .price-info-panel .price-tip-table tr {
    display: table-row;
    background: none;
  }
  .shop-table .price-info-panel .price-tip-table th,
  .shop-table .price-info-panel .price-tip-table td {
    display: table-cell;
    min-width: 0;
    width: auto;
    margin: 0;
    text-align: left;
    white-space: nowrap;
    border-bottom: 0;
    background: none;
    font-family: var(--font-data);
    font-size: 1em;
    font-weight: normal;
    padding: 3px 5px;
  }
  .shop-table .price-info-panel .price-tip-table thead th {
    border-bottom: 1px solid var(--color-border);
  }
  .shop-table .price-info-panel .price-tip-table td::before { content: none; }
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.product-card, .review-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover, .review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Card image wrapper (for rating badge positioning) */
.card-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  border-radius: 4px;
  overflow: hidden;
}
.product-card img, .review-card .card-thumb,
.card-img-wrap img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}
.card-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.card-img-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.55);
  text-align: center;
  line-height: 1.4;
}
.card-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.product-card h3, .review-card h3 { margin: 0; font-size: 1rem; }
.chip-visits { background: var(--color-border); color: #666; }
.chip {
  display: inline-block;
  padding: 1px 8px;
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border-radius: 12px;
  font-size: 0.85rem;
  margin-right: 4px;
}
.chip-tag {
  border-radius: 3px;
  background: transparent;
  border: 1px solid var(--color-accent);
  padding: 1px 6px;
}
.warning-chip {
  display: inline-block;
  padding: 1px 8px;
  background: var(--color-warn-bg);
  color: var(--color-warn);
  border-radius: 12px;
  font-size: 0.85rem;
}
.status-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  margin-left: 4px;
  white-space: nowrap;
}
.status-closed_temp {
  background: #fff3cd;
  color: #856404;
}
.status-closed_perm {
  background: #e9ecef;
  color: #6c757d;
}
.purchase-channels.truncated { display: inline; }
.expand-btn {
  margin-left: 4px;
  padding: 0 6px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.85rem;
}

/* Map */
/* 工具列容器：桌機透明化（不影響 grid），手機才變成黏頂區塊 */
.shops-toolbar { display: contents; }
.map-wrap { position: relative; }
.map-toggle {
  display: none;
  width: 100%;
  margin-bottom: 8px;
  padding: 8px;
  background: var(--color-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
}
#map {
  width: 100%;
  height: 480px;
  border-radius: var(--radius);
  background: #f0f0eb;
}
.legend {
  margin-top: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.85rem;
}
.legend ul { list-style: none; margin: 0; padding: 0; }
.legend li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.legend .swatch {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.1);
}
.price-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.price-info-btn {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 0.65rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  color: var(--ink-soft);
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.price-info-btn:hover,
.price-info-btn:focus {
  color: var(--color-accent);
  border-color: var(--color-accent);
  outline: none;
}
/* 原生 popover：渲染在 top layer，位置由 JS 設定（position: fixed），
   不受任何祖先 overflow / z-index 影響，永不被地圖或表格容器遮擋。 */
.price-info-panel {
  position: fixed;
  inset: auto;           /* 覆蓋 popover 預設置中 (inset:0; margin:auto) */
  margin: 0;
  max-width: min(360px, 100vw - 24px);
  max-height: min(70vh, 480px);
  overflow: auto;
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  box-shadow: var(--shadow-2);
  font-weight: normal;
  font-size: 0.82rem;
}
/* 每張店家卡片內的價位 info：僅手機卡片模式顯示（桌機由表頭提供） */
.price-info-card-only { display: none; }
@media (max-width: 767px) {
  .shop-table td .price-info-card-only { display: inline-flex; }
}

.price-tip-table {
  border-collapse: collapse;
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
}
.price-tip-table th,
.price-tip-table td {
  padding: 3px 8px;
  text-align: left;
  white-space: nowrap;
}
/* 窄畫面：縮字距與字級，讓四欄價位表完整塞進視窗寬度 */
@media (max-width: 420px) {
  .price-info-panel { font-size: 0.76rem; padding: 8px; }
  .price-tip-table th,
  .price-tip-table td { padding: 3px 5px; }
}
.price-tip-table thead th {
  border-bottom: 1px solid var(--color-border);
  color: #555;
  font-size: 0.78rem;
}
.price-tip-table tbody tr:nth-child(even) {
  background: #f8f8f3;
}
.gmap-tip-text {
  margin: 0;
  line-height: 1.6;
}
.map-error {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.85);
  color: var(--color-warn);
  font-weight: 700;
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0;
  flex-wrap: wrap;
}
.pagination .page-numbers {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pagination button, .pagination .page-numbers button {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.pagination .page-numbers button[aria-current="page"] {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}
.pagination .total-count {
  font-size: 0.9rem;
  color: var(--color-muted);
}
.soft-warning {
  background: #fff8e1;
  color: #7a5a00;
  padding: 8px 12px;
  border-radius: var(--radius);
  margin: 8px 0;
  font-size: 0.9rem;
}

/* Review detail */
.review-detail {
  max-width: 960px;
  margin: 0 auto;
}

.review-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2.5rem;
  align-items: start;
}

.review-sidebar {
  position: sticky;
  top: 80px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.review-sidebar-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.review-big-rating {
  font-family: var(--font-data);
  font-size: 3.5rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--seal);
  line-height: 1;
}

.review-rating-denom {
  font-family: var(--font-data);
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.review-rating-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 4px;
}

.review-gmap-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  color: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 5px 10px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.review-gmap-link:hover {
  color: #EA4335;
  border-color: #EA4335;
  text-decoration: none;
}

.review-main { min-width: 0; }

.review-header h1 {
  margin-top: 0;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1.3;
}

/* 心得內文排版（diary 閱讀體驗）：舒適行寬、節奏與層次 */
.review-body { color: var(--ink); }
.review-body p {
  max-width: 38em;
  margin: 0 0 1.1rem;
  line-height: 1.85;
}
.review-body > p:first-of-type {
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ink);
}
.review-body h2,
.review-body h3 {
  font-family: var(--font-display);
  line-height: 1.3;
  margin: 2rem 0 0.6rem;
}
.review-body h2 { font-size: 1.3rem; }
.review-body h3 { font-size: 1.1rem; }
.review-body ul,
.review-body ol {
  max-width: 38em;
  margin: 0 0 1.1rem;
  padding-left: 1.4em;
  line-height: 1.8;
}
.review-body li { margin: 0.2rem 0; }
.review-body blockquote {
  max-width: 38em;
  margin: 1.2rem 0;
  padding: 0.4rem 0 0.4rem 1rem;
  border-left: 3px solid var(--seal);
  color: var(--ink-soft);
  font-style: italic;
}
.review-body a {
  color: var(--indigo);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.review-body code {
  font-family: var(--font-data);
  font-size: 0.9em;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.35em;
}

.review-meta, .card-dates { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; }
.review-meta dt, .card-dates dt { font-weight: 600; color: var(--color-muted); font-size: 0.82rem; }
.review-meta dd, .card-dates dd { font-size: 0.85rem; margin: 0; }
.card-dates { font-size: 0.9rem; margin: 0; }
.review-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.review-visits { border-top: 1px solid var(--color-border); padding-top: 0.75rem; }
.review-visits-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}
.review-visits ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.review-visit-item { font-size: 0.85rem; }
.review-visit-item a { color: var(--color-accent); }
.review-visit-item a:hover { text-decoration: underline; }
.review-visit-current { color: var(--color-muted); font-weight: 600; }

@media (max-width: 767px) {
  .review-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .review-sidebar { position: static; }
  .review-big-rating { font-size: 2.5rem; }
}

/* Sort direction toggle */
[data-role="sort-direction"] {
  padding: 0 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

/* Responsive: 雙欄並排 (>=1025px) — 表格左、地圖右；篩選列橫跨上方 */
@media (min-width: 1025px) {
  .page-shops {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 0 16px;
    grid-template-areas:
      "controls controls"
      "table    map";
    align-items: start;
  }
  .controls-bar { grid-area: controls; }
  .table-wrap { grid-area: table; }
  .map-wrap { grid-area: map; }
  .map-toggle { display: none; }
  #map { height: 600px; }
}

/* Mid-width (768-1024px): 篩選 → 地圖 → 表格 垂直堆疊 */
@media (min-width: 768px) and (max-width: 1024px) {
  .section-tablist {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0;
  }
  .map-toggle { display: none; }
  #map { height: 360px; }
  /* 中寬度：搜尋填滿該列剩餘空間，避免固定寬留下空隙 */
  .controls-bar .search-bar { flex: 1 1 240px; }
  .controls-bar .search-label { flex: 1 1 100%; min-width: 0; }
}

/* Narrow (≤767px): 地圖預設隱藏 + toggle 按鈕 */
@media (max-width: 767px) {
  main { padding: 12px 12px 32px; }
  .site-header { padding: 0 12px; }
  .nav-toggle { display: inline-flex; }
  .site-header-top {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    min-height: 56px;
  }
  .nav-toggle { grid-column: 1; }
  .site-logo { grid-column: 2; font-size: 1rem; }
  .lang-switcher { grid-column: 3; }
  .lang-switcher select { min-height: 40px; }

  /* 國家導覽 → 左側滑出抽屜（取代 hover-only 子選單） */
  .country-nav-shell {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(82vw, 320px);
    justify-content: flex-start;
    padding: 64px 16px 24px;
    background: var(--paper-card);
    box-shadow: var(--shadow-3);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    z-index: var(--z-drawer);
  }
  .site-header.nav-open .country-nav-shell { transform: translateX(0); }
  .country-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }
  .country-nav-item { padding-bottom: 0; margin-bottom: 0; }
  .country-nav-item::after { content: none; }
  .country-link {
    display: block;
    min-height: var(--tap);
    line-height: calc(var(--tap) - 12px);
    text-align: left;
    border-radius: var(--radius);
  }
  /* 抽屜內子選單常駐展開（不靠 hover） */
  .country-subnav {
    position: static;
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 2px 0 8px 12px;
    padding: 0 0 0 8px;
    border: none;
    border-left: 2px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
  .country-subnav-link {
    min-height: 40px;
    line-height: 28px;
    text-align: left;
  }

  /* 分節 tab：橫向可捲動，不換行 */
  .section-tablist {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 4px;
    margin: 0;
    -webkit-overflow-scrolling: touch;
  }
  [role="tablist"] [role="tab"] {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .pagination button,
  .pagination .page-numbers button {
    min-height: var(--tap);
    min-width: 40px;
  }
  /* 篩選 + 地圖 黏在頂部（site-header 下方），卡片在其下方捲動 */
  .shops-toolbar {
    display: block;
    position: sticky;
    top: var(--header-h, 96px);
    z-index: 5;
    background: var(--paper);
    padding-bottom: 8px;
    box-shadow: 0 6px 6px -6px rgba(35, 41, 43, 0.18);
  }
  /* 地圖預設收合，置於篩選與卡片之間；點「顯示地圖」才展開 */
  .map-wrap { display: block; }
  .map-toggle { display: block; width: 100%; margin-bottom: 0; }
  #map { height: 240px; display: none; margin-top: 8px; }
  .map-wrap.is-open #map { display: block; }
  /* 圖例只在地圖展開時顯示，為可水平捲動的印章帶 */
  .map-wrap:not(.is-open) .legend { display: none; }
  .legend {
    display: block;
    margin-top: 8px;
  }
  .legend ul {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
  }
  .legend li { white-space: nowrap; }
  .controls-bar {
    gap: 0.75rem;
  }
  /* 店家頁手機版交回給 .shops-toolbar 黏頂，避免巢狀 sticky */
  .page-shops .controls-bar {
    position: static;
    top: auto;
    z-index: auto;
  }
  /* 手機：顯示篩選開關；收合時只留這顆開關（含搜尋一起收起） */
  .controls-toggle { display: inline-flex; width: 100%; }
  .controls-bar.is-collapsed > :not(.controls-toggle) {
    display: none;
  }
  .controls-bar .search-bar,
  .controls-bar .filter-region,
  .controls-bar .filter-channel,
  .controls-bar .filter-category,
  .controls-bar .filter-kind,
  .controls-bar .filter-target-type,
  .controls-bar .sort-control {
    width: 100%;
  }
  .controls-bar .search-label,
  .region-select-trigger,
  .channel-select-trigger,
  .controls-bar select {
    width: 100%;
    min-width: 0;
  }
  /* 搜尋寬度與其他篩選一致（重置桌機的 220px 固定寬） */
  .controls-bar .search-label { flex: 1 1 100%; }
  .region-select,
  .channel-select { width: 100%; }
  .region-select-trigger,
  .channel-select-trigger { width: 100%; }
  .filter-clear {
    width: 100%;
    justify-content: center;
  }
}

.shop-table thead th[aria-sort="ascending"]::after { content: " ▲"; font-size: 0.7em; }
.shop-table thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 0.7em; }

button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Landing mobile */
@media (max-width: 767px) {
  .landing-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .landing-quote { font-size: 1.5rem; }
  .landing-hero { padding: 2rem 1.5rem; }
  .landing { padding: 1rem 0 3rem; }
}

/* Google Maps pin link in address column */
.gmap-pin {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: #5f6368;
  text-decoration: none;
  vertical-align: middle;
}
.gmap-pin:hover { color: #EA4335; }

/* 載入狀態：頂部不確定式進度條（清單/表格/地圖抓取時顯示） */
#main.is-loading::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: calc(var(--z-header) + 1);
  background: linear-gradient(90deg, transparent, var(--indigo), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: loading-bar 1s linear infinite;
}
@keyframes loading-bar {
  0% { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

/* 回到最上面：右下角浮動圓鈕，捲動超過一定距離才淡入 */
.scroll-top-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-2);
  z-index: var(--z-fab);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.scroll-top-btn.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top-btn:hover { background: var(--ink); }

/* 尊重「減少動態」：關閉動畫/轉場，中和位移類 hover */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .product-card:hover,
  .review-card:hover,
  .country-card:hover,
  .cta-landing:hover {
    transform: none !important;
  }
  /* 減少動態時，載入條改為靜態實心，仍提供回饋 */
  #main.is-loading::before {
    background: var(--indigo);
    animation: none !important;
  }
}