/*
 * VIVAPET 模版樣式
 * 設計移植自 vivapeth（森林綠、薄荷綠、米白、金色；Outfit 及 Noto Sans TC）。
 * 全部選擇器以 body[data-template="vivapeth"] 限定，不影響其他模版。
 * 顏色可由後台「VIVAPET 模版專屬設定 → 品牌及外觀」更改（由 header.php 輸出變數）。
 */

/* ── 設計變數 ── */
body[data-template="vivapeth"] {
  --vp-forest: #365d37;
  --vp-forest-deep: #243f26;
  --vp-forest-mid: #4a7a4c;
  --vp-sage: #7ba17f;
  --vp-mint: #e6f1e7;
  --vp-mint-deep: #cfe0d1;
  --vp-cream: #f6f3ec;
  --vp-paper: #fffdf8;
  --vp-gold: #c4a35a;
  --vp-gold-deep: #9c7d36;
  --vp-gold-soft: #f3e6c4;
  --vp-ink: #2a2c29;
  --vp-muted: #5d635c;
  --vp-line: #d9d2c4;
  --vp-danger: #9b3d3d;
  --vp-success: #2f6b3a;
  --vp-footer: #243f26;
  --vp-font-display: "Outfit", "Noto Sans TC", sans-serif;
  --vp-font-body: "Noto Sans TC", "PingFang TC", "PingFang HK", "Microsoft JhengHei", sans-serif;
  --vp-text-sm: 0.875rem;
  --vp-text-lg: 1.125rem;
  --vp-text-xl: 1.375rem;
  --vp-space-4: 1rem;
  --vp-space-5: 1.5rem;
  --vp-space-6: 2rem;
  --vp-space-7: 3rem;
  --vp-space-8: 4.5rem;
  --vp-radius-sm: 8px;
  --vp-radius-md: 16px;
  --vp-radius-lg: 28px;
  --vp-radius-pill: 999px;
  --vp-shadow-sm: 0 8px 24px rgba(36, 63, 38, 0.08);
  --vp-shadow-md: 0 18px 40px rgba(36, 63, 38, 0.12);
  --vp-shadow-header: 0 10px 30px rgba(36, 63, 38, 0.1);
  --vp-container: 1160px;
  --vp-header-h: 84px;
  --vp-header-h-mobile: 68px;
  --vp-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* 系統共用元件（商品卡、購物車、結帳、會員）跟隨本模版色調 */
  --primary: var(--vp-forest);
  --primary-dark: var(--vp-forest-deep);
  --primary-light: var(--vp-mint);
  --primary-glow: rgba(54, 93, 55, 0.15);
  --accent: var(--vp-gold);
  --accent-light: var(--vp-gold-soft);
  --text: var(--vp-ink);
  --text-mid: var(--vp-muted);
  --bg: var(--vp-cream);
  --white: var(--vp-paper);
  --border: var(--vp-line);
  --border-light: #ece4d6;
  --radius: 16px;
  --btn-bg: var(--vp-forest);
  --btn-text: var(--vp-paper);
  --link: var(--vp-forest);
  --hover: var(--vp-gold-deep);
  --price: var(--vp-forest-deep);
  --header-bg: rgba(246, 243, 236, 0.92);
  --header-text: var(--vp-forest-deep);
  --footer-bg: var(--vp-footer);
  --footer-text: var(--vp-cream);
  --max-width: var(--vp-container);

  font-family: var(--vp-font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--vp-ink);
  background-color: var(--vp-cream);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(123, 161, 127, 0.12), transparent 28%),
    radial-gradient(circle at 88% 8%, rgba(196, 163, 90, 0.1), transparent 24%);
  min-height: 100dvh;
}
html[lang="en"] body[data-template="vivapeth"] { --vp-font-body: "Noto Sans", "Segoe UI", sans-serif; }
html[lang="zh-Hans"] body[data-template="vivapeth"] { --vp-font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
html:has(body[data-template="vivapeth"]) { scroll-behavior: smooth; }
body[data-template="vivapeth"].vp-menu-open { overflow: hidden; }
:where(body[data-template="vivapeth"]) *, :where(body[data-template="vivapeth"]) *::before, :where(body[data-template="vivapeth"]) *::after { box-sizing: border-box; }
:where(body[data-template="vivapeth"]) img { max-width: 100%; height: auto; }
/* 全域元素規則以 :where() 降低優先度，系統元件（例如結帳頁的按鈕）原有顏色不會被蓋過。 */
:where(body[data-template="vivapeth"]) a { color: var(--vp-forest); text-decoration: none; }
:where(body[data-template="vivapeth"]) a:hover { color: var(--vp-gold-deep); }
:where(body[data-template="vivapeth"]) h1, :where(body[data-template="vivapeth"]) h2, :where(body[data-template="vivapeth"]) h3, :where(body[data-template="vivapeth"]) h4 {
  font-family: var(--vp-font-body);
  font-weight: 700;
  line-height: 1.25;
  color: var(--vp-forest-deep);
  letter-spacing: 0.01em;
}
:where(body[data-template="vivapeth"]) :focus-visible { outline: 2px solid var(--vp-gold); outline-offset: 3px; }
body[data-template="vivapeth"] .vp-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body[data-template="vivapeth"] .vp-anchor { display: block; height: 0; outline: 0; }

/* ── 基本版面 ── */
body[data-template="vivapeth"] .vp-skip {
  position: absolute; left: 1rem; top: -100px; z-index: 3000;
  background: var(--vp-forest); color: var(--vp-paper);
  padding: 0.6rem 1rem; border-radius: var(--vp-radius-sm);
}
body[data-template="vivapeth"] .vp-skip:focus { top: 0.75rem; color: var(--vp-paper); }
body[data-template="vivapeth"] .vp-container { width: min(calc(100% - 2rem), var(--vp-container)); margin-inline: auto; }
body[data-template="vivapeth"] .vp-section { padding: var(--vp-space-8) 0; position: relative; }
body[data-template="vivapeth"] .vp-section--tight { padding: var(--vp-space-6) 0 0; }
body[data-template="vivapeth"] .vp-section--mint { background: var(--vp-mint); }
body[data-template="vivapeth"] .vp-section--paper { background: var(--vp-paper); }
body[data-template="vivapeth"] .vp-section--forest { background: var(--vp-forest-deep); color: var(--vp-cream); }
body[data-template="vivapeth"] .vp-section--forest h2, body[data-template="vivapeth"] .vp-section--forest h3 { color: var(--vp-paper); }
body[data-template="vivapeth"] .vp-section h2 { font-size: 1.5em; margin: 0 0 var(--vp-space-4); }
body[data-template="vivapeth"] .vp-section h3 { font-size: 1.17em; margin: 0 0 var(--vp-space-4); }
body[data-template="vivapeth"] .vp-section p { margin: 0 0 var(--vp-space-4); }
body[data-template="vivapeth"] .vp-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--vp-gold-deep);
  font-family: var(--vp-font-display);
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 0.75rem !important;
}
body[data-template="vivapeth"] .vp-eyebrow::before { content: ""; width: 1.5rem; height: 2px; background: var(--vp-gold); }
body[data-template="vivapeth"] .vp-eyebrow--on-dark { color: #e8d5a3; }
body[data-template="vivapeth"] .vp-lead { font-size: var(--vp-text-lg); color: var(--vp-muted); }
body[data-template="vivapeth"] .vp-section--forest .vp-lead, body[data-template="vivapeth"] .vp-section--forest p { color: var(--vp-cream); }
body[data-template="vivapeth"] .vp-muted { color: var(--vp-muted); }
body[data-template="vivapeth"] .vp-closing { margin-top: 2rem !important; }
body[data-template="vivapeth"] .vp-split { display: grid; gap: var(--vp-space-6); align-items: center; }
@media (min-width: 900px) {
  body[data-template="vivapeth"] .vp-split { grid-template-columns: 1.05fr 0.95fr; gap: var(--vp-space-7); }
  body[data-template="vivapeth"] .vp-split--reverse { grid-template-columns: 0.95fr 1.05fr; }
  body[data-template="vivapeth"] .vp-split--reverse > :first-child { order: 2; }
}
body[data-template="vivapeth"] .vp-split > :only-child { grid-column: 1 / -1; }

/* ── 按鈕 ── */
body[data-template="vivapeth"] .vp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.4rem;
  border: 0; border-radius: var(--vp-radius-pill);
  background: var(--vp-forest); color: var(--vp-paper);
  font-weight: 700; line-height: 1.3; text-align: center; cursor: pointer;
  transition: transform 0.25s var(--vp-ease), background 0.25s var(--vp-ease), box-shadow 0.25s var(--vp-ease);
  box-shadow: 0 8px 0 rgba(36, 63, 38, 0.18);
}
body[data-template="vivapeth"] .vp-btn:hover { background: var(--vp-forest-mid); color: var(--vp-paper); transform: translateY(-2px); }
body[data-template="vivapeth"] .vp-btn--ghost { background: transparent; color: var(--vp-forest); border: 1.5px solid var(--vp-forest); box-shadow: none; }
body[data-template="vivapeth"] .vp-btn--ghost:hover { background: var(--vp-forest); color: var(--vp-paper); }
body[data-template="vivapeth"] .vp-btn--gold { background: var(--vp-gold); color: var(--vp-forest-deep); box-shadow: 0 8px 0 rgba(156, 125, 54, 0.25); }
body[data-template="vivapeth"] .vp-btn--gold:hover { background: var(--vp-gold-deep); color: var(--vp-paper); }
body[data-template="vivapeth"] .vp-btn--on-dark { background: transparent; color: var(--vp-paper); border: 1.5px solid var(--vp-paper); box-shadow: none; }
body[data-template="vivapeth"] .vp-btn--on-dark:hover { background: var(--vp-paper); color: var(--vp-forest-deep); }
body[data-template="vivapeth"] .vp-btn--sm { min-height: 42px; padding: 0.5rem 1.1rem; font-size: var(--vp-text-sm); }
body[data-template="vivapeth"] .vp-btn--block { width: 100%; }
body[data-template="vivapeth"] .vp-btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: var(--vp-space-5); }

/* ── 公告列 ── */
body[data-template="vivapeth"] .vp-announce { background: var(--vp-forest-deep); color: var(--vp-cream); font-size: var(--vp-text-sm); text-align: center; padding: 0.45rem 0; }
body[data-template="vivapeth"] .vp-announce a { color: var(--vp-gold-soft); }

/* ── 頁首 ── */
body[data-template="vivapeth"] .vp-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(246, 243, 236, 0.92);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s var(--vp-ease), border-color 0.25s var(--vp-ease), height 0.25s var(--vp-ease);
}
body[data-template="vivapeth"] .vp-header.is-stuck { box-shadow: var(--vp-shadow-header); border-bottom-color: var(--vp-line); }
body[data-template="vivapeth"] .vp-header__bar { height: var(--vp-header-h-mobile); display: flex; align-items: center; gap: 1rem; }
body[data-template="vivapeth"] .vp-logo { display: inline-flex; align-items: center; line-height: 0; flex-shrink: 0; min-width: 0; max-width: min(240px, 52vw); }
body[data-template="vivapeth"] .vp-logo img { width: auto; height: 32px; max-width: 200px; object-fit: contain; display: block; }
/* 沒有 Logo 圖片時，文字品牌名稱可按空間收窄並以省略號截斷 */
body[data-template="vivapeth"] .vp-header .vp-logo:has(.vp-logo__text) { flex-shrink: 1; }
body[data-template="vivapeth"] .vp-logo__text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; font-family: var(--vp-font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: 0.04em; color: var(--vp-forest-deep); }
body[data-template="vivapeth"] .vp-nav { margin-left: auto; display: none; min-width: 0; }
body[data-template="vivapeth"] .vp-nav > ul { display: flex; align-items: center; gap: 0.15rem; list-style: none; margin: 0; padding: 0; }
body[data-template="vivapeth"] .vp-nav li { position: relative; list-style: none; }
body[data-template="vivapeth"] .vp-nav a {
  display: inline-flex; padding: 0.55rem 0.75rem;
  color: var(--vp-forest-deep); font-weight: 600; font-size: 0.95rem;
  border-radius: var(--vp-radius-pill); white-space: nowrap;
}
body[data-template="vivapeth"] .vp-nav a:hover, body[data-template="vivapeth"] .vp-nav a[aria-current="page"] { background: var(--vp-mint); color: var(--vp-forest); }
body[data-template="vivapeth"] .vp-subnav {
  position: absolute; top: 100%; left: 0; z-index: 20; min-width: 200px;
  list-style: none; margin: 0; padding: 0.5rem;
  background: var(--vp-paper); border-radius: var(--vp-radius-md); box-shadow: var(--vp-shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.2s var(--vp-ease), transform 0.2s var(--vp-ease), visibility 0.2s;
}
body[data-template="vivapeth"] .vp-has-sub:hover > .vp-subnav, body[data-template="vivapeth"] .vp-has-sub:focus-within > .vp-subnav { opacity: 1; visibility: visible; transform: none; }
body[data-template="vivapeth"] .vp-subnav a { display: flex; border-radius: var(--vp-radius-sm); }
body[data-template="vivapeth"] .vp-header__actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; flex-shrink: 0; }
body[data-template="vivapeth"] .vp-icon-btn, body[data-template="vivapeth"] .vp-cart {
  position: relative; width: 42px; height: 42px; border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  color: var(--vp-forest-deep); background: rgba(54, 93, 55, 0.08);
}
body[data-template="vivapeth"] .vp-icon-btn:hover, body[data-template="vivapeth"] .vp-cart:hover { background: var(--vp-mint); color: var(--vp-forest); }
body[data-template="vivapeth"] .vp-icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
body[data-template="vivapeth"] .vp-cart svg { width: 20px; height: 20px; fill: currentColor; }
body[data-template="vivapeth"] .vp-cart__count {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  background: var(--vp-gold); color: var(--vp-forest-deep);
  font-size: 0.68rem; font-weight: 700; line-height: 18px; text-align: center;
}
body[data-template="vivapeth"] .vp-cart__count[data-empty] { display: none; }
body[data-template="vivapeth"] .vp-desktop-only { display: none !important; }
body[data-template="vivapeth"] .vp-header__cta { display: none; }
body[data-template="vivapeth"] .vp-lang { display: flex; align-items: center; gap: 0.15rem; flex-shrink: 0; }
body[data-template="vivapeth"] .vp-lang a {
  min-width: 2rem; min-height: 32px; padding: 0.1rem 0.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--vp-radius-pill);
  font-family: var(--vp-font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--vp-forest-deep);
}
body[data-template="vivapeth"] .vp-lang a[aria-current="true"] { background: var(--vp-mint); color: var(--vp-forest); }
body[data-template="vivapeth"] .vp-currency { display: flex; align-items: center; }
body[data-template="vivapeth"] .vp-nav-toggle {
  margin-left: 0.15rem; width: 44px; height: 44px; border: 0; background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
body[data-template="vivapeth"] .vp-nav-toggle__bars, body[data-template="vivapeth"] .vp-nav-toggle__bars::before, body[data-template="vivapeth"] .vp-nav-toggle__bars::after {
  display: block; width: 22px; height: 2px; background: var(--vp-forest-deep); border-radius: 2px; position: relative;
}
body[data-template="vivapeth"] .vp-nav-toggle__bars::before, body[data-template="vivapeth"] .vp-nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
body[data-template="vivapeth"] .vp-nav-toggle__bars::before { top: -7px; }
body[data-template="vivapeth"] .vp-nav-toggle__bars::after { top: 7px; }
@media (min-width: 980px) {
  body[data-template="vivapeth"] .vp-header__bar { height: var(--vp-header-h); }
  body[data-template="vivapeth"] .vp-nav { display: block; flex: 1 1 auto; display: flex; justify-content: flex-end; }
  body[data-template="vivapeth"] .vp-header__actions { margin-left: 0; }
  body[data-template="vivapeth"] .vp-header__cta { display: inline-flex; margin-left: 0.25rem; }
  body[data-template="vivapeth"] .vp-desktop-only { display: flex !important; }
  body[data-template="vivapeth"] .vp-nav-toggle { display: none; }
  body[data-template="vivapeth"] .vp-logo img { height: 38px; }
  html[lang="en"] body[data-template="vivapeth"] .vp-nav a { padding: 0.45rem 0.5rem; font-size: 0.82rem; }
}
/* 手機頁首空間有限：語言多於三種時，語言切換只在選單內顯示 */
@media (max-width: 600px) {
  body[data-template="vivapeth"] .vp-lang--header:has(a:nth-child(4)) { display: none; }
}
@media (max-width: 380px) {
  body[data-template="vivapeth"] .vp-lang--header:has(a:nth-child(3)) { display: none; }
}
@media (max-width: 340px) {
  body[data-template="vivapeth"] .vp-lang--header { display: none; }
}
@media (max-width: 420px) {
  body[data-template="vivapeth"] .vp-header__bar { gap: 0.4rem; }
  body[data-template="vivapeth"] .vp-logo img { max-width: 132px; }
  body[data-template="vivapeth"] .vp-icon-btn, body[data-template="vivapeth"] .vp-cart { width: 38px; height: 38px; }
}

/* ── 手機選單（全螢幕） ── */
body[data-template="vivapeth"] .vp-mobile {
  position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 100000; /* 開啟時蓋過全站浮動聊天按鈕 */
  background: var(--vp-forest-deep);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--vp-ease), visibility 0.28s var(--vp-ease);
}
body[data-template="vivapeth"] .vp-mobile.is-open { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 0.28s var(--vp-ease), visibility 0s; }
body[data-template="vivapeth"] .vp-mobile__inner { min-height: 100dvh; padding: 1rem 1.25rem 2.5rem; display: flex; flex-direction: column; }
body[data-template="vivapeth"] .vp-mobile__head { display: flex; align-items: center; gap: 0.75rem; min-height: 56px; margin-bottom: 1.5rem; }
body[data-template="vivapeth"] .vp-mobile .vp-logo { background: var(--vp-paper); border-radius: 8px; padding: 0.35rem 0.65rem; }
body[data-template="vivapeth"] .vp-mobile .vp-logo img { height: 28px; }
body[data-template="vivapeth"] .vp-mobile .vp-cart { background: rgba(255, 253, 248, 0.12); color: var(--vp-paper); margin-left: auto; }
body[data-template="vivapeth"] .vp-mobile__close {
  width: 48px; height: 48px; border: 0; background: var(--vp-mint); border-radius: 50%;
  font-size: 1.75rem; line-height: 1; color: var(--vp-forest-deep); cursor: pointer; flex-shrink: 0;
}
body[data-template="vivapeth"] .vp-mobile__head .vp-cart + .vp-mobile__close { margin-left: 0; }
body[data-template="vivapeth"] .vp-mobile__head > .vp-logo + .vp-mobile__close { margin-left: auto; }
body[data-template="vivapeth"] .vp-mobile__nav ul { list-style: none; margin: 0 0 2rem; padding: 0; }
body[data-template="vivapeth"] .vp-mobile__nav a {
  display: flex; align-items: center; min-height: 56px; padding: 0.5rem 0;
  border-bottom: 1px solid rgba(246, 243, 236, 0.18);
  color: var(--vp-cream); font-size: 1.25rem; font-weight: 700;
}
body[data-template="vivapeth"] .vp-mobile__nav a:hover, body[data-template="vivapeth"] .vp-mobile__nav a[aria-current="page"] { color: var(--vp-gold-soft); }
body[data-template="vivapeth"] .vp-mobile__row { display: flex; align-items: center; border-bottom: 1px solid rgba(246, 243, 236, 0.18); }
body[data-template="vivapeth"] .vp-mobile__row a { flex: 1; border-bottom: 0; }
body[data-template="vivapeth"] .vp-mobile__expand {
  width: 44px; height: 44px; border: 1px solid rgba(246, 243, 236, 0.35); border-radius: 50%;
  background: transparent; color: var(--vp-cream); font-size: 1.3rem; cursor: pointer;
}
body[data-template="vivapeth"] .vp-mobile__expand[aria-expanded="true"] { background: var(--vp-paper); color: var(--vp-forest-deep); }
body[data-template="vivapeth"] .vp-mobile .vp-mobile__sub { margin: 0 0 0.5rem 1rem; }
body[data-template="vivapeth"] .vp-mobile__sub a { font-size: 1.05rem; min-height: 46px; font-weight: 600; }
body[data-template="vivapeth"] .vp-mobile__search { display: flex; gap: 0.5rem; margin: 0 0 1.25rem; }
body[data-template="vivapeth"] .vp-mobile__search input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0.6rem 0.9rem;
  border: 1px solid rgba(255, 253, 248, 0.35); border-radius: var(--vp-radius-pill);
  background: rgba(255, 253, 248, 0.1); color: var(--vp-paper); font: inherit;
}
body[data-template="vivapeth"] .vp-mobile__search input::placeholder { color: rgba(246, 243, 236, 0.7); }
body[data-template="vivapeth"] .vp-mobile__search button {
  min-height: 46px; padding: 0 1.1rem; border: 0; border-radius: var(--vp-radius-pill);
  background: var(--vp-gold); color: var(--vp-forest-deep); font-weight: 700; cursor: pointer;
}
body[data-template="vivapeth"] .vp-lang--menu { margin: 0 0 1.25rem; }
body[data-template="vivapeth"] .vp-mobile .vp-lang a { color: var(--vp-paper); border: 1px solid rgba(255, 253, 248, 0.35); }
body[data-template="vivapeth"] .vp-mobile .vp-lang a[aria-current="true"] { background: var(--vp-paper); color: var(--vp-forest-deep); }
body[data-template="vivapeth"] .vp-currency--menu { margin: 0 0 1.25rem; color: var(--vp-cream); }
body[data-template="vivapeth"] .vp-mobile__cta { margin-top: auto; }
@media (min-width: 980px) { body[data-template="vivapeth"] .vp-mobile { display: none; } }

/* ── 主視覺輪播 ── */
body[data-template="vivapeth"] .vp-hero { position: relative; overflow: hidden; min-height: min(78dvh, 720px); background: #efeae0; color: var(--vp-ink); }
body[data-template="vivapeth"] .vp-hero__slides { position: relative; min-height: min(78dvh, 720px); }
body[data-template="vivapeth"] .vp-hero__slide {
  position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.7s var(--vp-ease), visibility 0.7s var(--vp-ease);
}
body[data-template="vivapeth"] .vp-hero__slide.is-active { opacity: 1; visibility: visible; }
body[data-template="vivapeth"] .vp-hero__media { position: absolute; inset: 0; }
body[data-template="vivapeth"] .vp-hero__media picture { display: contents; }
body[data-template="vivapeth"] .vp-hero__media img, body[data-template="vivapeth"] .vp-hero__media video {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--vp-focus, 50%) center; display: block;
}
body[data-template="vivapeth"] .vp-hero__link { position: absolute; inset: 0; z-index: 1; }
body[data-template="vivapeth"] .vp-hero__copy {
  position: absolute; z-index: 2;
  left: max(1rem, calc((100% - var(--vp-container)) / 2)); bottom: 4.5rem;
  width: min(calc(100% - 2rem), 320px); max-width: 320px; margin: 0;
  padding: 0.95rem 1.05rem 1rem;
  background: rgba(255, 253, 248, 0.68);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 253, 248, 0.55); border-radius: 16px;
  box-shadow: 0 12px 28px rgba(36, 63, 38, 0.14);
}
body[data-template="vivapeth"] .vp-hero__copy--cta {
  left: 50%; bottom: 4.5rem; transform: translateX(-50%);
  width: auto; max-width: none; padding: 0.55rem 0.7rem;
  background: rgba(255, 253, 248, 0.5);
}
body[data-template="vivapeth"] .vp-hero__copy .vp-btn-row { margin-top: 0.75rem; flex-wrap: nowrap; }
body[data-template="vivapeth"] .vp-hero__copy--cta .vp-btn-row { margin-top: 0; }
body[data-template="vivapeth"] .vp-hero__copy .vp-btn { min-height: 40px; padding: 0.4rem 0.95rem; font-size: 0.88rem; white-space: nowrap; }
body[data-template="vivapeth"] .vp-hero h2 { color: var(--vp-forest-deep); font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.25; margin: 0 0 0.45rem; }
body[data-template="vivapeth"] .vp-hero .vp-hero__copy p { color: var(--vp-ink); font-size: 0.92rem; line-height: 1.5; margin: 0; }
body[data-template="vivapeth"] .vp-hero .vp-hero__copy .vp-hero__badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--vp-gold); color: var(--vp-forest-deep);
  border-radius: var(--vp-radius-pill); padding: 0.25rem 0.7rem;
  font-size: 0.72rem; font-weight: 700; margin-bottom: 0.5rem;
}
body[data-template="vivapeth"] .vp-hero__controls { position: absolute; right: 1rem; bottom: 1.25rem; z-index: 3; display: flex; align-items: center; gap: 0.5rem; }
body[data-template="vivapeth"] .vp-hero__dot, body[data-template="vivapeth"] .vp-hero__arrow {
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(36, 63, 38, 0.62); color: var(--vp-paper); cursor: pointer; font-size: 1.2rem; line-height: 1;
}
body[data-template="vivapeth"] .vp-hero__dots { display: flex; gap: 0.4rem; }
body[data-template="vivapeth"] .vp-hero__dot { width: 10px; height: 10px; padding: 0; }
body[data-template="vivapeth"] .vp-hero__dot.is-active { background: var(--vp-gold); }
@media (max-width: 800px) {
  body[data-template="vivapeth"] .vp-hero, body[data-template="vivapeth"] .vp-hero__slides { min-height: min(70dvh, 560px); }
  body[data-template="vivapeth"] .vp-hero__copy { left: 0.75rem; bottom: 4.25rem; width: min(calc(100% - 1.5rem), 280px); max-width: 280px; }
  body[data-template="vivapeth"] .vp-hero__copy--cta { left: 50%; bottom: 4.25rem; width: auto; max-width: min(calc(100% - 1.5rem), 320px); }
}
@media (max-width: 430px) {
  body[data-template="vivapeth"] .vp-container { width: min(calc(100% - 1.5rem), var(--vp-container)); }
  body[data-template="vivapeth"] .vp-mobile__nav a { font-size: 1.15rem; }
}

/* ── 內頁頁首 ── */
body[data-template="vivapeth"] .vp-page-hero {
  padding: 3.5rem 0 2.5rem;
  background: linear-gradient(180deg, var(--vp-mint) 0%, var(--vp-cream) 100%);
  border-bottom: 1px solid var(--vp-line);
}
body[data-template="vivapeth"] .vp-page-hero h1 { font-size: clamp(1.85rem, 4vw, 2.8rem); margin: 0 0 1rem; }
body[data-template="vivapeth"] .vp-page-hero .vp-lead { margin: 0; max-width: 760px; }

/* ── 卡片及格線 ── */
body[data-template="vivapeth"] .vp-grid-4, body[data-template="vivapeth"] .vp-grid-3 { display: grid; gap: var(--vp-space-5); }
@media (min-width: 700px) { body[data-template="vivapeth"] .vp-grid-3 { grid-template-columns: repeat(3, 1fr); } body[data-template="vivapeth"] .vp-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { body[data-template="vivapeth"] .vp-grid-4 { grid-template-columns: repeat(4, 1fr); } }
body[data-template="vivapeth"] .vp-grid-3, body[data-template="vivapeth"] .vp-grid-4 { margin-top: var(--vp-space-5); }
body[data-template="vivapeth"] .vp-card {
  background: var(--vp-paper); border-radius: var(--vp-radius-md); padding: var(--vp-space-5);
  box-shadow: var(--vp-shadow-sm); border: 1px solid rgba(54, 93, 55, 0.06); height: 100%;
}
body[data-template="vivapeth"] .vp-card p:last-child { margin-bottom: 0; }
body[data-template="vivapeth"] .vp-card--icon { text-align: center; }
body[data-template="vivapeth"] .vp-icon-orb {
  width: 72px; height: 72px; margin: 0 auto var(--vp-space-4); border-radius: 50%;
  background: var(--vp-forest); color: var(--vp-paper); display: grid; place-items: center;
}
body[data-template="vivapeth"] .vp-icon-orb svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-template="vivapeth"] .vp-frame {
  position: relative; border-radius: 50%; overflow: hidden; aspect-ratio: 1;
  max-width: 460px; margin: 0 auto; border: 10px solid var(--vp-paper); box-shadow: var(--vp-shadow-md);
}
body[data-template="vivapeth"] .vp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-template="vivapeth"] .vp-frame--rect { border-radius: var(--vp-radius-lg); aspect-ratio: 4 / 5; max-width: 520px; }
body[data-template="vivapeth"] img.vp-frame--poster, body[data-template="vivapeth"] img.vp-poster {
  display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto;
  border-radius: var(--vp-radius-lg); box-shadow: var(--vp-shadow-md);
}
body[data-template="vivapeth"] img.vp-frame--poster { border: 10px solid var(--vp-paper); aspect-ratio: 4 / 5; object-fit: cover; }
body[data-template="vivapeth"] .vp-article-card { background: var(--vp-paper); border-radius: var(--vp-radius-lg); overflow: hidden; box-shadow: var(--vp-shadow-sm); }
body[data-template="vivapeth"] .vp-article-card > img { display: block; width: 100%; height: 220px; object-fit: cover; }
body[data-template="vivapeth"] .vp-article-card__body { padding: var(--vp-space-5); }
body[data-template="vivapeth"] .vp-article-card__body p:last-child { margin-bottom: 0; }
body[data-template="vivapeth"] .vp-article-card--full h3::before { content: "✎ "; color: var(--vp-gold-deep); }
body[data-template="vivapeth"] .vp-meta { color: var(--vp-gold-deep); font-size: var(--vp-text-sm); font-weight: 700; letter-spacing: 0.04em; }
body[data-template="vivapeth"] .vp-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--vp-space-4) 0; }
body[data-template="vivapeth"] .vp-pills span {
  background: var(--vp-paper); border: 1px solid var(--vp-line); border-radius: var(--vp-radius-pill);
  padding: 0.35rem 0.85rem; font-size: var(--vp-text-sm); font-weight: 700; color: var(--vp-forest);
}
body[data-template="vivapeth"] .vp-cta-band { display: grid; gap: var(--vp-space-5); align-items: center; }
@media (min-width: 800px) { body[data-template="vivapeth"] .vp-cta-band { grid-template-columns: 1.4fr auto; } }
body[data-template="vivapeth"] .vp-cta-band .vp-btn-row { margin-top: 0; }

/* ── 文字內容 ── */
body[data-template="vivapeth"] .vp-prose > :last-child { margin-bottom: 0; }
body[data-template="vivapeth"] .vp-prose h2 { margin-top: var(--vp-space-6); }
body[data-template="vivapeth"] .vp-prose > h2:first-child, body[data-template="vivapeth"] .vp-prose > h3:first-child { margin-top: 0; }
body[data-template="vivapeth"] .vp-prose h3 { margin: 1.5rem 0 0.5rem; }
body[data-template="vivapeth"] .vp-prose ul, body[data-template="vivapeth"] .vp-prose ol { margin: 0 0 var(--vp-space-4); padding-left: 1.3rem; }
body[data-template="vivapeth"] .vp-prose li { margin-bottom: 0.5rem; }
body[data-template="vivapeth"] .vp-prose p + .vp-btn, body[data-template="vivapeth"] .vp-prose ul + .vp-btn { margin-top: 0.5rem; }
body[data-template="vivapeth"] .vp-cms-content img { max-width: 100%; height: auto; border-radius: 12px; }
body[data-template="vivapeth"] .vp-cms-content table { width: 100%; border-collapse: collapse; }
body[data-template="vivapeth"] .vp-cms-content td, body[data-template="vivapeth"] .vp-cms-content th { border: 1px solid var(--vp-line); padding: 0.6rem 0.8rem; }
body[data-template="vivapeth"] .vp-related { margin-top: var(--vp-space-7); }
body[data-template="vivapeth"] .vp-related ul { display: flex; flex-wrap: wrap; gap: 0.6rem; list-style: none; padding: 0; }
body[data-template="vivapeth"] .vp-related a { display: inline-flex; padding: 0.4rem 0.9rem; border: 1px solid var(--vp-line); border-radius: var(--vp-radius-pill); background: var(--vp-paper); }

/* ── 商品頁附加內容 ── */
body[data-template="vivapeth"] .vp-product-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
body[data-template="vivapeth"] .vp-product-badges .vp-btn-row { margin: 0 0 0 auto; }
body[data-template="vivapeth"] .vp-badge-gold {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 !important;
  background: var(--vp-gold-soft); color: var(--vp-gold-deep); border: 1px solid var(--vp-gold);
  border-radius: var(--vp-radius-pill); padding: 0.4rem 0.9rem; font-weight: 700; font-size: var(--vp-text-sm);
}
body[data-template="vivapeth"] .vp-detail-blocks h3 { margin: 1.75rem 0 0.5rem; }
body[data-template="vivapeth"] .vp-detail-blocks h3:first-child { margin-top: 0; }
body[data-template="vivapeth"] .vp-checklist { list-style: none; padding: 0; margin: 0 0 1rem; }
body[data-template="vivapeth"] .vp-checklist li { position: relative; padding-left: 2rem; margin-bottom: 0.75rem; }
body[data-template="vivapeth"] .vp-checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.35rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--vp-mint); box-shadow: inset 0 0 0 2px var(--vp-forest);
}
body[data-template="vivapeth"] .vp-prose ol.vp-steps, body[data-template="vivapeth"] ol.vp-steps { counter-reset: vp-step; list-style: none; padding: 0; }
body[data-template="vivapeth"] .vp-steps li { counter-increment: vp-step; position: relative; padding: 0 0 1.5rem 3.5rem; margin: 0; }
body[data-template="vivapeth"] .vp-steps li::before {
  content: counter(vp-step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--vp-font-display); font-weight: 700; color: var(--vp-gold-deep);
}
body[data-template="vivapeth"] .vp-gallery__item { margin: 0; background: var(--vp-paper); border-radius: var(--vp-radius-md); overflow: hidden; box-shadow: var(--vp-shadow-sm); }
body[data-template="vivapeth"] .vp-gallery__item img { display: block; width: 100%; height: auto; }
body[data-template="vivapeth"] .vp-gallery__item figcaption { padding: 0.75rem 1rem; font-weight: 700; color: var(--vp-forest-deep); }
body[data-template="vivapeth"] .vp-faq { margin-top: var(--vp-space-5); }
body[data-template="vivapeth"] .vp-faq details {
  background: var(--vp-paper); border-radius: var(--vp-radius-sm); margin-bottom: 0.75rem;
  border: 1px solid var(--vp-line); padding: 0.25rem 1rem;
}
body[data-template="vivapeth"] .vp-faq summary { cursor: pointer; font-weight: 700; color: var(--vp-forest-deep); padding: 0.9rem 0; list-style: none; }
body[data-template="vivapeth"] .vp-faq summary::-webkit-details-marker { display: none; }
body[data-template="vivapeth"] .vp-faq summary::before { content: "Q. "; color: var(--vp-gold-deep); }
body[data-template="vivapeth"] .vp-faq details[open] summary { color: var(--vp-forest); }
body[data-template="vivapeth"] .vp-faq details p { color: var(--vp-muted); padding-bottom: 1rem; margin: 0; }
body[data-template="vivapeth"] .vp-faq details p::before { content: "A. "; font-weight: 700; color: var(--vp-forest); }

/* ── 精選產品（系統商品卡） ── */
body[data-template="vivapeth"] .vp-products { margin-top: var(--vp-space-5); }

/* ── 頁尾 ── */
body[data-template="vivapeth"] .vp-footer { background: var(--vp-footer); color: var(--vp-cream); padding: var(--vp-space-8) 0 var(--vp-space-5); }
body[data-template="vivapeth"] .vp-footer a { color: var(--vp-cream); }
body[data-template="vivapeth"] .vp-footer a:hover { color: var(--vp-gold-soft); }
body[data-template="vivapeth"] .vp-footer h2, body[data-template="vivapeth"] .vp-footer h3 { color: var(--vp-paper); font-size: 1.1rem; margin: 0 0 1rem; }
body[data-template="vivapeth"] .vp-footer p { margin: 0 0 1rem; }
body[data-template="vivapeth"] .vp-footer__grid { display: grid; gap: var(--vp-space-6); }
@media (min-width: 800px) { body[data-template="vivapeth"] .vp-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
body[data-template="vivapeth"] .vp-logo--footer { background: var(--vp-paper); border-radius: 10px; padding: 0.45rem 0.75rem; margin-bottom: 1rem; }
body[data-template="vivapeth"] .vp-logo--footer img { height: 30px; }
body[data-template="vivapeth"] .vp-logo--footer .vp-logo__text { font-size: 1.1rem; }
body[data-template="vivapeth"] .vp-footer__nav { list-style: none; padding: 0; margin: 0; }
body[data-template="vivapeth"] .vp-footer__nav li { margin-bottom: 0.45rem; }
body[data-template="vivapeth"] .vp-socials { display: flex; flex-wrap: wrap; gap: 0.6rem; }
body[data-template="vivapeth"] .vp-socials a {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 253, 248, 0.1); color: var(--vp-paper); display: grid; place-items: center;
}
body[data-template="vivapeth"] .vp-socials svg { width: 20px; height: 20px; display: block; fill: currentColor; }
body[data-template="vivapeth"] .vp-socials svg.vp-socials__line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body[data-template="vivapeth"] .vp-newsletter {
  display: grid; gap: 1rem; align-items: center;
  padding-bottom: var(--vp-space-6); margin-bottom: var(--vp-space-6);
  border-bottom: 1px solid rgba(246, 243, 236, 0.15);
}
@media (min-width: 800px) { body[data-template="vivapeth"] .vp-newsletter { grid-template-columns: 1fr 1.2fr; } }
body[data-template="vivapeth"] .vp-newsletter h2 { margin: 0; }
body[data-template="vivapeth"] .vp-newsletter__form { display: flex; gap: 0.6rem; }
body[data-template="vivapeth"] .vp-newsletter__form input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 253, 248, 0.35); border-radius: var(--vp-radius-pill);
  background: rgba(255, 253, 248, 0.1); color: var(--vp-paper); font: inherit;
}
body[data-template="vivapeth"] .vp-newsletter__form input::placeholder { color: rgba(246, 243, 236, 0.7); }
body[data-template="vivapeth"] #nlMsg { margin-top: 0.5rem; font-size: var(--vp-text-sm); }
body[data-template="vivapeth"] .vp-footer__extras:empty { display: none; }
body[data-template="vivapeth"] .vp-footer__extras { margin-top: var(--vp-space-5); }
body[data-template="vivapeth"] .vp-copyright {
  margin-top: var(--vp-space-6); padding-top: var(--vp-space-4);
  border-top: 1px solid rgba(246, 243, 236, 0.15);
  font-size: var(--vp-text-sm); color: rgba(246, 243, 236, 0.75);
}
body[data-template="vivapeth"] .vp-copyright p { margin: 0; }
body[data-template="vivapeth"] .vp-copyright .vp-credit { margin-top: 0.35rem; font-size: 0.8rem; opacity: 0.85; }

/* ── 回到頂部按鈕及浮動查詢視窗 ── */
body[data-template="vivapeth"] .vp-top {
  position: fixed; right: 1rem; bottom: 5.25rem; z-index: 1900;
  width: 48px; height: 48px; border: 0; border-radius: 50%;
  background: var(--vp-forest); color: var(--vp-paper); font-size: 1.2rem; cursor: pointer;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.25s var(--vp-ease), transform 0.25s var(--vp-ease);
  box-shadow: var(--vp-shadow-md);
}
body[data-template="vivapeth"] .vp-top.show, body[data-template="vivapeth"] .vp-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
body[data-template="vivapeth"] .vp-chat { position: fixed; right: 1rem; bottom: 1rem; z-index: 1500; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; }
body[data-template="vivapeth"] .vp-chat__panel {
  width: min(320px, calc(100vw - 2rem)); background: var(--vp-paper); color: var(--vp-ink);
  border-radius: 16px; box-shadow: var(--vp-shadow-md); padding: 0.9rem 0.95rem 1rem;
}
body[data-template="vivapeth"] .vp-chat__panel[hidden] { display: none; }
body[data-template="vivapeth"] .vp-chat__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }
body[data-template="vivapeth"] .vp-chat__head strong { color: var(--vp-forest-deep); }
body[data-template="vivapeth"] .vp-chat__close {
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
  font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--vp-muted);
}
body[data-template="vivapeth"] .vp-chat__panel p { margin: 0 0 0.85rem; }
body[data-template="vivapeth"] .vp-chat__toggle {
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background: var(--vp-forest); color: var(--vp-paper); box-shadow: var(--vp-shadow-md); cursor: pointer;
  display: grid; place-items: center;
}
body[data-template="vivapeth"] .vp-chat__toggle svg { width: 26px; height: 26px; fill: currentColor; }
body[data-template="vivapeth"]:not(:has(.vp-chat)) .vp-top { bottom: 1rem; }

/* ── 捲動淡入 ── */
body[data-template="vivapeth"].vp-js .vp-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--vp-ease), transform 0.7s var(--vp-ease); }
body[data-template="vivapeth"].vp-js .vp-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body[data-template="vivapeth"].vp-js .vp-reveal { opacity: 1; transform: none; transition: none; }
  html:has(body[data-template="vivapeth"]) { scroll-behavior: auto; }
}

/* ── 系統原有頁面（商品、購物車、結帳、會員、聯絡、文章）── */
body[data-template="vivapeth"] main { display: block; }
body[data-template="vivapeth"] .vp-native { padding-bottom: var(--vp-space-7); }
body[data-template="vivapeth"] .vp-native h1 { color: var(--vp-forest-deep); }
body[data-template="vivapeth"] .vp-native .container { max-width: var(--vp-container); }
body[data-template="vivapeth"] .vp-native .breadcrumb, body[data-template="vivapeth"] .vp-native .ec-breadcrumb { font-size: 0.85rem; }
body[data-template="vivapeth"] .vp-native .breadcrumb a, body[data-template="vivapeth"] .vp-native .ec-breadcrumb a { color: var(--vp-muted); }
body[data-template="vivapeth"] .vp-native--product-detail { padding-top: 0.5rem; }
/* 結帳摘要黏貼位置避開本模版較高的頁首 */
@media (min-width: 980px) { body[data-template="vivapeth"] .checkout-summary { top: calc(var(--vp-header-h) + 1rem); } }
body[data-template="vivapeth"] .vp-native button[type="submit"],
body[data-template="vivapeth"] .vp-native .btn-primary,
body[data-template="vivapeth"] .vp-native .btn-add-cart,
body[data-template="vivapeth"] .vp-native .btn-checkout,
body[data-template="vivapeth"] .vp-native .btn-submit,
body[data-template="vivapeth"] .vp-native .auth-btn,
body[data-template="vivapeth"] .vp-native .btn-buy-now { border-radius: var(--vp-radius-pill); font-weight: 700; }
body[data-template="vivapeth"] .vp-native .btn-add-cart, body[data-template="vivapeth"] .vp-native .btn-primary, body[data-template="vivapeth"] .vp-native .btn-submit, body[data-template="vivapeth"] .vp-native .btn-checkout {
  background: var(--vp-forest); color: var(--vp-paper); border-color: var(--vp-forest);
}
body[data-template="vivapeth"] .vp-native .btn-add-cart:hover, body[data-template="vivapeth"] .vp-native .btn-primary:hover, body[data-template="vivapeth"] .vp-native .btn-submit:hover, body[data-template="vivapeth"] .vp-native .btn-checkout:hover {
  background: var(--vp-forest-mid); color: var(--vp-paper);
}
body[data-template="vivapeth"] .vp-native .btn-buy-now { background: var(--vp-gold); color: var(--vp-forest-deep); border-color: var(--vp-gold); }
body[data-template="vivapeth"] .vp-native input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), body[data-template="vivapeth"] .vp-native select, body[data-template="vivapeth"] .vp-native textarea { border-radius: var(--vp-radius-sm); }
/* 商品列表工具列在窄屏可換行（系統原有版面在 360px 會溢出 3px） */
body[data-template="vivapeth"] .vp-native .toolbar-right, body[data-template="vivapeth"] .vp-native .cat-toolbar-right { flex-wrap: wrap; max-width: 100%; }
body[data-template="vivapeth"] .vp-native .cat-layout > * { min-width: 0; }
body[data-template="vivapeth"] .vp-native input:focus, body[data-template="vivapeth"] .vp-native select:focus, body[data-template="vivapeth"] .vp-native textarea:focus { border-color: var(--vp-forest); outline: 2px solid rgba(54, 93, 55, 0.18); }

/* 聯絡頁：左邊聯絡資料，右邊表格（與原設計相同） */
body[data-template="vivapeth"] .vp-native--contact > .container > nav:first-child,
body[data-template="vivapeth"] .vp-native--contact .page-header { display: none !important; }
body[data-template="vivapeth"] .vp-native--contact > .container { padding-top: var(--vp-space-7); }
body[data-template="vivapeth"] .vp-native--contact .contact-layout { display: grid; gap: var(--vp-space-6); align-items: start; }
body[data-template="vivapeth"] .vp-native--contact .contact-layout > .contact-intro { order: -2; }
body[data-template="vivapeth"] .vp-native--contact .contact-layout > .contact-sidebar { order: -1; }
@media (min-width: 900px) {
  body[data-template="vivapeth"] .vp-native--contact .contact-layout { grid-template-columns: 0.9fr 1.1fr; }
}
body[data-template="vivapeth"] .vp-native--contact .contact-form-card, body[data-template="vivapeth"] .vp-native--contact .info-card {
  background: var(--vp-paper); border-radius: var(--vp-radius-md); box-shadow: var(--vp-shadow-sm); border: 1px solid rgba(54, 93, 55, 0.06);
}
body[data-template="vivapeth"] .vp-native--contact .info-card h3 { color: var(--vp-forest-deep); }
body[data-template="vivapeth"] .vp-native--contact .info-item .icon { background: var(--vp-mint); color: var(--vp-forest); }
body[data-template="vivapeth"] .vp-native--contact .btn-submit { background: var(--vp-forest); box-shadow: 0 8px 0 rgba(36, 63, 38, 0.18); }

/* 系統商品卡 */
body[data-template="vivapeth"] .product-card { border-radius: var(--vp-radius-md); background: var(--vp-paper); }
body[data-template="vivapeth"] .product-card .product-name, body[data-template="vivapeth"] .product-card h3 { color: var(--vp-forest-deep); }