/* ═══════════════════════════════════════
   VOVOSnap Store Templates
   7 themes with color + font + UI variations
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Serif+TC:wght@400;500;700&family=Klee+One:wght@400;600&family=M+PLUS+Rounded+1c:wght@400;500;700&family=Kosugi+Maru&family=Shippori+Mincho:wght@400;500;700&display=swap');

/* ── Template: default (原有抹茶暖色) ── */
/* No overrides needed — uses styles.css :root (Zen Maru Gothic) */


/* ══════════════════════════════════════════
   Template: ink-blue (墨藍)
   知性文藝風 — 襯線字體 + 冷色調
   ══════════════════════════════════════════ */
[data-template="ink-blue"] {
  font-family: "Noto Serif TC", "Georgia", serif;
  --bg-color: #F4F6F8;
  --card-bg: #FAFBFC;
  --primary-color: #4A6178;
  --primary-hover: #3B5064;
  --text-color: #2C3E50;
  --accent-warm: #7A6855;
  --accent-warm-hover: #665744;
  --accent-warm-subtle: #F0EBE5;
  --accent-gold: #9E8A5A;
  --accent-gold-bg: #F8F4EB;
  --muted: #7B8A99;
  --muted-brand: #6B7B8D;
  --line: #DDE2E8;
  --shadow: 0 4px 12px rgba(74, 97, 120, 0.08);
  --btn-secondary: #5A7088;
  --btn-secondary-hover: #4A6078;
  --btn-added: #4A7A6A;
  --card-border: rgba(74, 97, 120, 0.1);
  --brand-shadow-sm: rgba(74, 97, 120, 0.15);
  --brand-shadow-md: rgba(74, 97, 120, 0.2);
  --brand-shadow-lg: rgba(74, 97, 120, 0.28);
  --focus-ring: rgba(74, 97, 120, 0.1);
}
[data-template="ink-blue"] .page-header {
  border-image: linear-gradient(90deg, #4A6178 0%, #7A6855 60%, #9E8A5A 100%) 1;
}
[data-template="ink-blue"] .promo-badge {
  color: #4A3A1E;
  background: linear-gradient(135deg, #E8DFC8, #D4C9A8);
  border-color: #9E8A5A;
  box-shadow: 0 2px 6px rgba(158, 138, 90, 0.2);
}
[data-template="ink-blue"] .btn-pill.secondary {
  background: #E8ECF0;
  color: #4A6178;
  border-color: #CCD3DB;
}
[data-template="ink-blue"] .btn-pill.secondary:hover {
  background: #DCE2E8;
  color: #3B5064;
}
/* Buttons: 查看詳情 / 加入需求單 / 返回 */
[data-template="ink-blue"] .button {
  background: #4A6178;
  border-radius: 6px;
}
[data-template="ink-blue"] .button:hover {
  background: #3B5064;
}
[data-template="ink-blue"] .button.secondary {
  background: #E8ECF0;
  color: #4A6178;
  border: 1px solid #CCD3DB;
}
[data-template="ink-blue"] .button.secondary:hover {
  background: #DCE2E8;
  color: #3B5064;
}
/* Floating cart */
[data-template="ink-blue"] .floating-request-btn {
  background: #4A6178;
  box-shadow: 0 4px 16px rgba(74, 97, 120, 0.35);
}
[data-template="ink-blue"] .floating-request-btn:hover {
  background: #3B5064;
  box-shadow: 0 6px 24px rgba(74, 97, 120, 0.4);
}
/* Card styling — subtle borders for literary feel */
[data-template="ink-blue"] .product-card {
  border: 1px solid #DDE2E8;
}
[data-template="ink-blue"] .qty-stepper__btn:hover {
  background: #E8ECF0;
  color: #4A6178;
}


/* ══════════════════════════════════════════
   Template: sand (暖沙灰)
   手寫溫暖風 — 手寫字體 + 暖色
   ══════════════════════════════════════════ */
[data-template="sand"] {
  font-family: "Klee One", "Zen Maru Gothic", cursive;
  --bg-color: #F7F5F0;
  --card-bg: #FDFCF9;
  --primary-color: #8C7B6B;
  --primary-hover: #76675A;
  --text-color: #3E3630;
  --accent-warm: #A07858;
  --accent-warm-hover: #8A6548;
  --accent-warm-subtle: #F2ECE4;
  --accent-gold: #B09060;
  --accent-gold-bg: #FAF5EC;
  --muted: #8A8078;
  --muted-brand: #7A7068;
  --line: #E5DFD6;
  --shadow: 0 4px 12px rgba(140, 123, 107, 0.08);
  --btn-secondary: #7A6E62;
  --btn-secondary-hover: #6A5E52;
  --btn-added: #6A8A68;
  --card-border: rgba(140, 123, 107, 0.12);
  --brand-shadow-sm: rgba(140, 123, 107, 0.15);
  --brand-shadow-md: rgba(140, 123, 107, 0.2);
  --brand-shadow-lg: rgba(140, 123, 107, 0.28);
  --focus-ring: rgba(140, 123, 107, 0.1);
}
[data-template="sand"] .page-header {
  border-image: linear-gradient(90deg, #8C7B6B 0%, #A07858 60%, #B09060 100%) 1;
}
[data-template="sand"] .promo-badge {
  color: #5A4428;
  background: linear-gradient(135deg, #EDE3D0, #DDD0B8);
  border-color: #B09060;
  box-shadow: 0 2px 6px rgba(176, 144, 96, 0.2);
}
[data-template="sand"] .btn-pill.secondary {
  background: #EDE8E0;
  color: #6E6258;
  border-color: #D8D0C5;
}
[data-template="sand"] .btn-pill.secondary:hover {
  background: #E3DCD2;
  color: #5A4E44;
}
[data-template="sand"] .button {
  background: #8C7B6B;
  border-radius: 20px;
}
[data-template="sand"] .button:hover {
  background: #76675A;
}
[data-template="sand"] .button.secondary {
  background: #EDE8E0;
  color: #6E6258;
  border: 1px solid #D8D0C5;
  border-radius: 20px;
}
[data-template="sand"] .button.secondary:hover {
  background: #E3DCD2;
  color: #5A4E44;
}
[data-template="sand"] .floating-request-btn {
  background: #A07858;
  box-shadow: 0 4px 16px rgba(160, 120, 88, 0.35);
}
[data-template="sand"] .floating-request-btn:hover {
  background: #8A6548;
  box-shadow: 0 6px 24px rgba(160, 120, 88, 0.4);
}
[data-template="sand"] .product-card {
  border-radius: 16px;
}
[data-template="sand"] .qty-stepper__btn:hover {
  background: #F2ECE4;
  color: #A07858;
}


/* ══════════════════════════════════════════
   Template: moss (苔蘚灰綠)
   自然柔和風 — 圓體 + 綠色調
   ══════════════════════════════════════════ */
[data-template="moss"] {
  font-family: "M PLUS Rounded 1c", "Zen Maru Gothic", sans-serif;
  --bg-color: #F3F5F2;
  --card-bg: #FAFBF9;
  --primary-color: #6B7F6B;
  --primary-hover: #5A6D5A;
  --text-color: #2E3830;
  --accent-warm: #7A6D58;
  --accent-warm-hover: #665C48;
  --accent-warm-subtle: #EDE8E0;
  --accent-gold: #8E8050;
  --accent-gold-bg: #F5F2E8;
  --muted: #788078;
  --muted-brand: #687868;
  --line: #DDE2DA;
  --shadow: 0 4px 12px rgba(107, 127, 107, 0.08);
  --btn-secondary: #5E7060;
  --btn-secondary-hover: #4E6050;
  --btn-added: #4A7A5A;
  --card-border: rgba(107, 127, 107, 0.1);
  --brand-shadow-sm: rgba(107, 127, 107, 0.15);
  --brand-shadow-md: rgba(107, 127, 107, 0.2);
  --brand-shadow-lg: rgba(107, 127, 107, 0.28);
  --focus-ring: rgba(107, 127, 107, 0.1);
}
[data-template="moss"] .page-header {
  border-image: linear-gradient(90deg, #6B7F6B 0%, #7A6D58 60%, #8E8050 100%) 1;
}
[data-template="moss"] .promo-badge {
  color: #3E3A20;
  background: linear-gradient(135deg, #E0DCC8, #D0C8A8);
  border-color: #8E8050;
  box-shadow: 0 2px 6px rgba(142, 128, 80, 0.2);
}
[data-template="moss"] .btn-pill.secondary {
  background: #E5EAE3;
  color: #5A6D5A;
  border-color: #CDD6CA;
}
[data-template="moss"] .btn-pill.secondary:hover {
  background: #DAE0D7;
  color: #4A5C4A;
}
[data-template="moss"] .button {
  background: #6B7F6B;
  border-radius: 12px;
}
[data-template="moss"] .button:hover {
  background: #5A6D5A;
}
[data-template="moss"] .button.secondary {
  background: #E5EAE3;
  color: #5A6D5A;
  border: 1px solid #CDD6CA;
  border-radius: 12px;
}
[data-template="moss"] .button.secondary:hover {
  background: #DAE0D7;
  color: #4A5C4A;
}
[data-template="moss"] .floating-request-btn {
  background: #6B7F6B;
  box-shadow: 0 4px 16px rgba(107, 127, 107, 0.35);
}
[data-template="moss"] .floating-request-btn:hover {
  background: #5A6D5A;
  box-shadow: 0 6px 24px rgba(107, 127, 107, 0.4);
}
[data-template="moss"] .product-card {
  border-radius: 14px;
}
[data-template="moss"] .qty-stepper__btn:hover {
  background: #E5EAE3;
  color: #6B7F6B;
}


/* ══════════════════════════════════════════
   Template: slate (石板灰藍)
   現代俐落風 — 無襯線 + 冷灰
   ══════════════════════════════════════════ */
[data-template="slate"] {
  font-family: "Noto Sans TC", "Helvetica Neue", sans-serif;
  --bg-color: #F2F3F5;
  --card-bg: #F9FAFB;
  --primary-color: #5E6B7A;
  --primary-hover: #4D5968;
  --text-color: #2A3040;
  --accent-warm: #7A6860;
  --accent-warm-hover: #665650;
  --accent-warm-subtle: #EDE8E5;
  --accent-gold: #8A7E5E;
  --accent-gold-bg: #F4F2EB;
  --muted: #7A8090;
  --muted-brand: #6A7080;
  --line: #DCDFE5;
  --shadow: 0 4px 12px rgba(94, 107, 122, 0.08);
  --btn-secondary: #58657A;
  --btn-secondary-hover: #48556A;
  --btn-added: #4A7A6A;
  --card-border: rgba(94, 107, 122, 0.1);
  --brand-shadow-sm: rgba(94, 107, 122, 0.15);
  --brand-shadow-md: rgba(94, 107, 122, 0.2);
  --brand-shadow-lg: rgba(94, 107, 122, 0.28);
  --focus-ring: rgba(94, 107, 122, 0.1);
}
[data-template="slate"] .page-header {
  border-image: linear-gradient(90deg, #5E6B7A 0%, #7A6860 60%, #8A7E5E 100%) 1;
}
[data-template="slate"] .promo-badge {
  color: #3A3520;
  background: linear-gradient(135deg, #E0DCC8, #D0C8A8);
  border-color: #8A7E5E;
  box-shadow: 0 2px 6px rgba(138, 126, 94, 0.2);
}
[data-template="slate"] .btn-pill.secondary {
  background: #E4E7EC;
  color: #5E6B7A;
  border-color: #CDD2DA;
}
[data-template="slate"] .btn-pill.secondary:hover {
  background: #D8DCE3;
  color: #4D5968;
}
[data-template="slate"] .button {
  background: #5E6B7A;
  border-radius: 4px;
}
[data-template="slate"] .button:hover {
  background: #4D5968;
}
[data-template="slate"] .button.secondary {
  background: #E4E7EC;
  color: #5E6B7A;
  border: 1px solid #CDD2DA;
  border-radius: 4px;
}
[data-template="slate"] .button.secondary:hover {
  background: #D8DCE3;
  color: #4D5968;
}
[data-template="slate"] .floating-request-btn {
  background: #5E6B7A;
  box-shadow: 0 4px 16px rgba(94, 107, 122, 0.35);
}
[data-template="slate"] .floating-request-btn:hover {
  background: #4D5968;
  box-shadow: 0 6px 24px rgba(94, 107, 122, 0.4);
}
/* Sharp corners for modern feel */
[data-template="slate"] .product-card {
  border-radius: 6px;
}
[data-template="slate"] .product-card__media {
  border-radius: 4px 4px 0 0;
}
[data-template="slate"] .qty-stepper {
  border-radius: 4px;
}
[data-template="slate"] .qty-stepper__btn:hover {
  background: #E4E7EC;
  color: #5E6B7A;
}
[data-template="slate"] .input-cute {
  border-radius: 6px;
}
[data-template="slate"] .detail-price-block {
  border-radius: 4px;
}


/* ══════════════════════════════════════════
   Template: bold-gold (白黃黑)
   奢華大膽風 — 明朝體 + 金黑對比
   ══════════════════════════════════════════ */
[data-template="bold-gold"] {
  font-family: "Shippori Mincho", "Noto Serif TC", serif;
  --bg-color: #FAFAF5;
  --card-bg: #FFFFFF;
  --primary-color: #C8A415;
  --primary-hover: #B08E0A;
  --text-color: #1A1A1A;
  --accent-warm: #2A2A2A;
  --accent-warm-hover: #1A1A1A;
  --accent-warm-subtle: #F5F0D8;
  --accent-gold: #C8A415;
  --accent-gold-bg: #FFF9E0;
  --muted: #6A6A6A;
  --muted-brand: #8A8A5A;
  --line: #E8E4D0;
  --shadow: 0 4px 12px rgba(30, 30, 20, 0.08);
  --btn-secondary: #3A3A3A;
  --btn-secondary-hover: #2A2A2A;
  --btn-added: #2A7A3A;
  --card-border: rgba(200, 164, 21, 0.15);
  --brand-shadow-sm: rgba(200, 164, 21, 0.15);
  --brand-shadow-md: rgba(200, 164, 21, 0.22);
  --brand-shadow-lg: rgba(200, 164, 21, 0.3);
  --focus-ring: rgba(200, 164, 21, 0.12);
}
[data-template="bold-gold"] .page-header {
  border-image: linear-gradient(90deg, #C8A415 0%, #2A2A2A 100%) 1;
}
[data-template="bold-gold"] .promo-badge {
  color: #1A1A1A;
  background: linear-gradient(135deg, #FFE066, #FFCC00);
  border-color: #C8A415;
  box-shadow: 0 2px 6px rgba(200, 164, 21, 0.3);
}
[data-template="bold-gold"] .btn-pill.secondary {
  background: #F0ECE0;
  color: #2A2A2A;
  border-color: #D8D0B8;
}
[data-template="bold-gold"] .btn-pill.secondary:hover {
  background: #E8E2D0;
  color: #1A1A1A;
}
/* Gold primary button with dark text for contrast */
[data-template="bold-gold"] .button {
  background: #C8A415;
  color: #1A1A1A;
  font-weight: 700;
  border-radius: 2px;
  letter-spacing: 0.5px;
}
[data-template="bold-gold"] .button:hover {
  background: #B08E0A;
  color: #1A1A1A;
}
/* Secondary: dark button */
[data-template="bold-gold"] .button.secondary {
  background: #2A2A2A;
  color: #FFD700;
  border: none;
  border-radius: 2px;
}
[data-template="bold-gold"] .button.secondary:hover {
  background: #1A1A1A;
  color: #FFE066;
}
[data-template="bold-gold"] .floating-request-btn {
  background: #1A1A1A;
  box-shadow: 0 4px 16px rgba(30, 30, 20, 0.4);
}
[data-template="bold-gold"] .floating-request-btn:hover {
  background: #000;
  box-shadow: 0 6px 24px rgba(30, 30, 20, 0.5);
}
[data-template="bold-gold"] .floating-cart-badge {
  background: #C8A415;
  color: #1A1A1A;
}
/* Bold card styling */
[data-template="bold-gold"] .product-card {
  border: 1px solid #E8E4D0;
  border-radius: 2px;
}
[data-template="bold-gold"] .product-card__media {
  border-radius: 0;
}
[data-template="bold-gold"] .detail-price-block {
  background: #FFF9E0;
  border-left: 3px solid #C8A415;
  border-radius: 2px;
}
[data-template="bold-gold"] .detail-price-twd {
  color: #1A1A1A;
}
[data-template="bold-gold"] .qty-stepper {
  border-radius: 2px;
  border-color: #2A2A2A;
}
[data-template="bold-gold"] .qty-stepper__btn:hover {
  background: #FFF9E0;
  color: #C8A415;
}
[data-template="bold-gold"] .input-cute {
  border-radius: 2px;
}
[data-template="bold-gold"] .detail-thumb-btn.is-active .detail-thumb {
  border-color: #C8A415;
  box-shadow: 0 0 0 3px rgba(200, 164, 21, 0.25);
}


/* ══════════════════════════════════════════
   Template: bold-ocean (白藍黑)
   活力科技風 — 圓體 + 亮藍
   ══════════════════════════════════════════ */
[data-template="bold-ocean"] {
  font-family: "Kosugi Maru", "Noto Sans TC", sans-serif;
  --bg-color: #F5F8FA;
  --card-bg: #FFFFFF;
  --primary-color: #2563EB;
  --primary-hover: #1D4ED8;
  --text-color: #1A1A2E;
  --accent-warm: #1E293B;
  --accent-warm-hover: #0F172A;
  --accent-warm-subtle: #E0ECFF;
  --accent-gold: #3B82F6;
  --accent-gold-bg: #EFF6FF;
  --muted: #64748B;
  --muted-brand: #4A6FA5;
  --line: #D4DEE8;
  --shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
  --btn-secondary: #334155;
  --btn-secondary-hover: #1E293B;
  --btn-added: #16A34A;
  --card-border: rgba(37, 99, 235, 0.1);
  --brand-shadow-sm: rgba(37, 99, 235, 0.12);
  --brand-shadow-md: rgba(37, 99, 235, 0.18);
  --brand-shadow-lg: rgba(37, 99, 235, 0.25);
  --focus-ring: rgba(37, 99, 235, 0.1);
}
[data-template="bold-ocean"] .page-header {
  border-image: linear-gradient(90deg, #2563EB 0%, #1E293B 100%) 1;
}
[data-template="bold-ocean"] .promo-badge {
  color: #1E3A8A;
  background: linear-gradient(135deg, #93C5FD, #60A5FA);
  border-color: #3B82F6;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
[data-template="bold-ocean"] .btn-pill.secondary {
  background: #E8EEF5;
  color: #334155;
  border-color: #CBD5E1;
}
[data-template="bold-ocean"] .btn-pill.secondary:hover {
  background: #DCE4EE;
  color: #1E293B;
}
[data-template="bold-ocean"] .button {
  background: #2563EB;
  border-radius: 8px;
  font-weight: 600;
}
[data-template="bold-ocean"] .button:hover {
  background: #1D4ED8;
}
[data-template="bold-ocean"] .button.secondary {
  background: #E8EEF5;
  color: #334155;
  border: 1px solid #CBD5E1;
  border-radius: 8px;
}
[data-template="bold-ocean"] .button.secondary:hover {
  background: #DCE4EE;
  color: #1E293B;
}
[data-template="bold-ocean"] .floating-request-btn {
  background: #2563EB;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
}
[data-template="bold-ocean"] .floating-request-btn:hover {
  background: #1D4ED8;
  box-shadow: 0 6px 24px rgba(37, 99, 235, 0.5);
}
[data-template="bold-ocean"] .product-card {
  border-radius: 10px;
  border: 1px solid #D4DEE8;
}
[data-template="bold-ocean"] .detail-price-block {
  background: #EFF6FF;
  border-left: 3px solid #2563EB;
}
[data-template="bold-ocean"] .detail-price-twd {
  color: #1D4ED8;
}
[data-template="bold-ocean"] .qty-stepper__btn:hover {
  background: #EFF6FF;
  color: #2563EB;
}
[data-template="bold-ocean"] .detail-thumb-btn.is-active .detail-thumb {
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}