/**
 * =============================================================================
 * 宅家雙主題系統 (Zhai Dual Theme System)
 * =============================================================================
 * 
 * 主題切換方式：
 * - 奶油風（預設）：不需加任何 class
 * - 童趣風：在 Section 加上 .theme-playful class
 * 
 * Elementor 設定：Section → Advanced → CSS Classes → theme-playful
 * 
 * =============================================================================
 */

/* =============================================================================
   PART 1: 共用 Token（兩套主題皆相同）
   ============================================================================= */

:root {
    /* --- 間距系統 --- */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --space-2xl: 64px;

    /* --- 字級系統 --- */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 28px;
    --font-size-2xl: 42px;

    /* --- 行高 --- */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* --- 動畫 --- */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* =============================================================================
   PART 2: 奶油風主題 Token（預設）
   ============================================================================= */

:root {
    /* --- 色彩系統 --- */
    --color-bg-page: #FFF8F2;
    --color-bg-card: #FFFFFF;
    --color-bg-accent: #F9D8C6;
    --color-bg-highlight: #FFE1CF;
    --color-bg-muted: #FAF7F4;

    --color-text-primary: #4A4A4A;
    --color-text-secondary: #777777;
    --color-text-muted: rgba(0, 0, 0, 0.55);
    --color-text-brand: #8A5E3C;
    --color-text-inverse: #FFFFFF;

    --color-brand: #8A5E3C;
    --color-brand-hover: #7A4A33;
    --color-brand-light: #B3835C;
    --color-accent: #A7CFE7;
    --color-accent-hover: #8BC4E2;

    --color-border: rgba(0, 0, 0, 0.14);
    --color-border-strong: rgba(0, 0, 0, 0.22);

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Lora', serif;

    /* --- 圓角系統 --- */
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    --radius-card: 20px;

    /* --- 邊框系統 --- */
    --border-style: solid;
    --border-width: 1px;
    --border-color: var(--color-border);

    /* --- 陰影系統 --- */
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.10);
    --shadow-button: 0 6px 14px rgba(0, 0, 0, 0.12);
    --shadow-button-hover: 0 10px 22px rgba(0, 0, 0, 0.18);

    /* --- 特殊效果 --- */
    --bg-pattern: none;
    --title-decoration: none;
}

/* =============================================================================
   PART 3: 童趣風主題 Token
   ============================================================================= */

.theme-playful {
    /* --- 色彩系統 --- */
    --color-bg-page: #FFF9E1;
    --color-bg-card: #FFFFFF;
    --color-bg-accent: #FFEDD5;
    --color-bg-highlight: #E1F5FE;
    --color-bg-muted: #FFF5E6;

    --color-text-primary: #5D4037;
    --color-text-secondary: #8D6E63;
    --color-text-muted: #6D4C41;
    --color-text-brand: #5D4037;
    --color-text-inverse: #FFFFFF;

    --color-brand: #FFAB91;
    --color-brand-hover: #FF8A65;
    --color-brand-light: #FFCCBC;
    --color-accent: #81D4FA;
    --color-accent-hover: #4FC3F7;

    --color-border: #FFAB91;
    --color-border-strong: #FF8A65;

    /* --- 字型系統 --- */
    --font-base: "Microsoft JhengHei", "Rounded Mplus 1c", sans-serif;
    --font-heading: "Microsoft JhengHei", "Rounded Mplus 1c", sans-serif;

    /* --- 圓角系統（不對稱感） --- */
    --radius-sm: 10px;
    --radius-md: 20px;
    --radius-lg: 50px 20px 50px 20px;
    --radius-xl: 40px;
    --radius-pill: 999px;
    --radius-card: 50px 20px 50px 20px;

    /* --- 邊框系統（虛線風格） --- */
    --border-style: dashed;
    --border-width: 3px;
    --border-color: #FFAB91;

    /* --- 陰影系統（偏移感） --- */
    --shadow-sm: 2px 2px 0px #FFE0B2;
    --shadow-md: 4px 4px 0px #FFE0B2;
    --shadow-lg: 6px 6px 0px #FFE0B2;
    --shadow-button: 3px 3px 0px #FFE0B2;
    --shadow-button-hover: 4px 4px 0px #FFCCBC;

    /* --- 特殊效果 --- */
    --bg-pattern: radial-gradient(#FFEDD5 1.5px, transparent 1.5px);
    --title-decoration: var(--border-width) var(--border-style) var(--border-color);
}

/* =============================================================================
   PART 3-B: 中國新年風主題 Token
   ============================================================================= */

.theme-cny {
    /* --- 色彩系統 --- */
    --color-bg-page: #FFF5F5;
    --color-bg-card: #FFFFFF;
    --color-bg-accent: #FFE4E1;
    --color-bg-highlight: #FFD700;
    --color-bg-muted: #FFF0F0;

    --color-text-primary: #8B0000;
    --color-text-secondary: #CD5C5C;
    --color-text-muted: #DC143C;
    --color-text-brand: #B22222;
    --color-text-inverse: #FFFFFF;

    --color-brand: #DC143C;
    --color-brand-hover: #B22222;
    --color-brand-light: #FF6B6B;
    --color-accent: #FFD700;
    --color-accent-hover: #FFA500;

    --color-border: rgba(220, 20, 60, 0.3);
    --color-border-strong: #DC143C;

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Noto Serif TC", serif;

    /* --- 圓角系統 --- */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-pill: 999px;
    --radius-card: 24px;

    /* --- 邊框系統 --- */
    --border-style: solid;
    --border-width: 2px;
    --border-color: rgba(220, 20, 60, 0.3);

    /* --- 陰影系統（帶金色調） --- */
    --shadow-sm: 0 4px 12px rgba(255, 215, 0, 0.15);
    --shadow-md: 0 10px 30px rgba(255, 215, 0, 0.2);
    --shadow-lg: 0 18px 40px rgba(255, 215, 0, 0.25);
    --shadow-button: 0 6px 14px rgba(220, 20, 60, 0.2);
    --shadow-button-hover: 0 10px 22px rgba(220, 20, 60, 0.3);

    /* --- 特殊效果 --- */
    --bg-pattern: none;
    --title-decoration: none;
}

/* 中國新年風：金色邊框裝飾 */
.theme-cny .theme-card,
.theme-cny .product-card,
.theme-cny .article-card,
.theme-cny .classpage-card,
.theme-cny .course-entry-card {
    border: 2px solid var(--color-accent) !important;
}

/* =============================================================================
   PART 3-C: 情人節風主題 Token
   ============================================================================= */

.theme-valentine {
    /* --- 色彩系統 --- */
    --color-bg-page: #FFF0F5;
    --color-bg-card: #FFFFFF;
    --color-bg-accent: #FFB6C1;
    --color-bg-highlight: #FF69B4;
    --color-bg-muted: #FFF5FA;

    --color-text-primary: #C71585;
    --color-text-secondary: #DB7093;
    --color-text-muted: #FF1493;
    --color-text-brand: #C71585;
    --color-text-inverse: #FFFFFF;

    --color-brand: #FF1493;
    --color-brand-hover: #C71585;
    --color-brand-light: #FF69B4;
    --color-accent: #FFB6C1;
    --color-accent-hover: #FF69B4;

    --color-border: rgba(255, 105, 180, 0.3);
    --color-border-strong: #FF69B4;

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Lora', serif;

    /* --- 圓角系統 --- */
    --radius-sm: 14px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --radius-xl: 40px;
    --radius-pill: 999px;
    --radius-card: 26px;

    /* --- 邊框系統 --- */
    --border-style: solid;
    --border-width: 2px;
    --border-color: rgba(255, 105, 180, 0.3);

    /* --- 陰影系統（帶粉色調） --- */
    --shadow-sm: 0 4px 12px rgba(255, 105, 180, 0.12);
    --shadow-md: 0 10px 30px rgba(255, 105, 180, 0.15);
    --shadow-lg: 0 18px 40px rgba(255, 105, 180, 0.18);
    --shadow-button: 0 6px 14px rgba(255, 20, 147, 0.2);
    --shadow-button-hover: 0 10px 22px rgba(255, 20, 147, 0.3);

    /* --- 特殊效果 --- */
    --bg-pattern: none;
    --title-decoration: none;
}

/* 情人節風：粉色邊框 */
.theme-valentine .theme-card,
.theme-valentine .product-card,
.theme-valentine .article-card,
.theme-valentine .classpage-card,
.theme-valentine .course-entry-card {
    border: 2px solid var(--color-bg-highlight) !important;
}

/* =============================================================================
   PART 3-D: 母親節風主題 Token
   ============================================================================= */

.theme-mother {
    /* --- 色彩系統 --- */
    --color-bg-page: #F3E5F5;
    --color-bg-card: #FFFFFF;
    --color-bg-accent: #E1BEE7;
    --color-bg-highlight: #CE93D8;
    --color-bg-muted: #F8F0FA;

    --color-text-primary: #6A1B9A;
    --color-text-secondary: #8E24AA;
    --color-text-muted: #9C27B0;
    --color-text-brand: #7B1FA2;
    --color-text-inverse: #FFFFFF;

    --color-brand: #9C27B0;
    --color-brand-hover: #7B1FA2;
    --color-brand-light: #BA68C8;
    --color-accent: #FFB3BA;
    --color-accent-hover: #FF8A95;

    --color-border: rgba(156, 39, 176, 0.3);
    --color-border-strong: #9C27B0;

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Lora', serif;

    /* --- 圓角系統 --- */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 26px;
    --radius-xl: 34px;
    --radius-pill: 999px;
    --radius-card: 22px;

    /* --- 邊框系統 --- */
    --border-style: solid;
    --border-width: 2px;
    --border-color: rgba(156, 39, 176, 0.3);

    /* --- 陰影系統（帶紫色調） --- */
    --shadow-sm: 0 4px 12px rgba(156, 39, 176, 0.1);
    --shadow-md: 0 10px 30px rgba(156, 39, 176, 0.12);
    --shadow-lg: 0 18px 40px rgba(156, 39, 176, 0.15);
    --shadow-button: 0 6px 14px rgba(156, 39, 176, 0.18);
    --shadow-button-hover: 0 10px 22px rgba(156, 39, 176, 0.25);

    /* --- 特殊效果 --- */
    --bg-pattern: none;
    --title-decoration: none;
}

/* 母親節風：紫色邊框 */
.theme-mother .theme-card,
.theme-mother .product-card,
.theme-mother .article-card,
.theme-mother .classpage-card,
.theme-mother .course-entry-card {
    border: 2px solid var(--color-border-strong) !important;
}

/* =============================================================================
   PART 3-E: 父親節風主題 Token
   ============================================================================= */

.theme-father {
    /* --- 色彩系統 --- */
    --color-bg-page: #F5F5F0;
    --color-bg-card: #FFFFFF;
    --color-bg-accent: #D4D4CE;
    --color-bg-highlight: #34495E;
    --color-bg-muted: #FAFAF5;

    --color-text-primary: #2C3E50;
    --color-text-secondary: #34495E;
    --color-text-muted: #7F8C8D;
    --color-text-brand: #2C3E50;
    --color-text-inverse: #FFFFFF;

    --color-brand: #2C3E50;
    --color-brand-hover: #1A252F;
    --color-brand-light: #34495E;
    --color-accent: #D4AF37;
    --color-accent-hover: #B8941F;

    --color-border: rgba(44, 62, 80, 0.3);
    --color-border-strong: #2C3E50;

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Lora', serif;

    /* --- 圓角系統（方正感） --- */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;
    --radius-card: 10px;

    /* --- 邊框系統（粗線） --- */
    --border-style: solid;
    --border-width: 3px;
    --border-color: rgba(44, 62, 80, 0.3);

    /* --- 陰影系統（低調） --- */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.12);
    --shadow-button: 0 3px 8px rgba(44, 62, 80, 0.15);
    --shadow-button-hover: 0 5px 12px rgba(44, 62, 80, 0.2);

    /* --- 特殊效果 --- */
    --bg-pattern: none;
    --title-decoration: none;
}

/* 父親節風：深色粗邊框 */
.theme-father .theme-card,
.theme-father .product-card,
.theme-father .article-card,
.theme-father .classpage-card,
.theme-father .course-entry-card {
    border: 3px solid var(--color-border-strong) !important;
}

/* =============================================================================
   PART 3-F: 中秋節風主題 Token
   ============================================================================= */

.theme-moonfestival {
    /* --- 色彩系統 --- */
    --color-bg-page: #1C1C3C;
    --color-bg-card: #2A2A4A;
    --color-bg-accent: #3A3A5A;
    --color-bg-highlight: #FFD700;
    --color-bg-muted: #252545;

    --color-text-primary: #F5F5DC;
    --color-text-secondary: #D4D4BC;
    --color-text-muted: #B4B49C;
    --color-text-brand: #FFD700;
    --color-text-inverse: #1C1C3C;

    --color-brand: #FFD700;
    --color-brand-hover: #FFA500;
    --color-brand-light: #FFE55C;
    --color-accent: #87CEEB;
    --color-accent-hover: #6BB6D9;

    --color-border: rgba(255, 215, 0, 0.4);
    --color-border-strong: #FFD700;

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Noto Serif TC", serif;

    /* --- 圓角系統（圓形感） --- */
    --radius-sm: 16px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --radius-xl: 50px;
    --radius-pill: 999px;
    --radius-card: 36px;

    /* --- 邊框系統（發光） --- */
    --border-style: solid;
    --border-width: 2px;
    --border-color: rgba(255, 215, 0, 0.4);

    /* --- 陰影系統（月光效果） --- */
    --shadow-sm: 0 0 10px rgba(255, 215, 0, 0.2);
    --shadow-md: 0 0 20px rgba(255, 215, 0, 0.3);
    --shadow-lg: 0 0 30px rgba(255, 215, 0, 0.4);
    --shadow-button: 0 0 12px rgba(255, 215, 0, 0.4);
    --shadow-button-hover: 0 0 18px rgba(255, 215, 0, 0.6);

    /* --- 特殊效果（星空） --- */
    --bg-pattern: radial-gradient(circle, rgba(255, 215, 0, 0.3) 1px, transparent 1px);
    --title-decoration: none;
}

/* 中秋節風：金色發光邊框 + 星空背景 */
.theme-moonfestival .theme-card,
.theme-moonfestival .product-card,
.theme-moonfestival .article-card,
.theme-moonfestival .classpage-card,
.theme-moonfestival .course-entry-card {
    border: 2px solid var(--color-brand) !important;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5) !important;
}

.theme-moonfestival {
    background-image: var(--bg-pattern);
    background-size: 50px 50px;
}

/* =============================================================================
   PART 3-G: 感恩節風主題 Token
   ============================================================================= */

.theme-thanksgiving {
    /* --- 色彩系統 --- */
    --color-bg-page: #FFF8E7;
    --color-bg-card: #FFFFFF;
    --color-bg-accent: #F4E4C1;
    --color-bg-highlight: #CD853F;
    --color-bg-muted: #FFFBF0;

    --color-text-primary: #5C4033;
    --color-text-secondary: #8B6F47;
    --color-text-muted: #A0826D;
    --color-text-brand: #8B4513;
    --color-text-inverse: #FFFFFF;

    --color-brand: #D2691E;
    --color-brand-hover: #A0522D;
    --color-brand-light: #E9967A;
    --color-accent: #CD853F;
    --color-accent-hover: #B8732D;

    --color-border: rgba(210, 105, 30, 0.3);
    --color-border-strong: #8B4513;

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Lora', serif;

    /* --- 圓角系統（溫暖） --- */
    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 999px;
    --radius-card: 20px;

    /* --- 邊框系統 --- */
    --border-style: solid;
    --border-width: 2px;
    --border-color: rgba(210, 105, 30, 0.3);

    /* --- 陰影系統（秋季色調） --- */
    --shadow-sm: 0 4px 12px rgba(139, 69, 19, 0.1);
    --shadow-md: 0 10px 30px rgba(139, 69, 19, 0.12);
    --shadow-lg: 0 18px 40px rgba(139, 69, 19, 0.15);
    --shadow-button: 0 6px 14px rgba(210, 105, 30, 0.2);
    --shadow-button-hover: 0 10px 22px rgba(210, 105, 30, 0.3);

    /* --- 特殊效果 --- */
    --bg-pattern: none;
    --title-decoration: none;
}

/* 感恩節風：棕色邊框 */
.theme-thanksgiving .theme-card,
.theme-thanksgiving .product-card,
.theme-thanksgiving .article-card,
.theme-thanksgiving .classpage-card,
.theme-thanksgiving .course-entry-card {
    border: 2px solid var(--color-brand) !important;
}

/* =============================================================================
   PART 3-H: 萬聖節風主題 Token
   ============================================================================= */

.theme-halloween {
    /* --- 色彩系統 --- */
    --color-bg-page: #1A1A2E;
    --color-bg-card: #16213E;
    --color-bg-accent: #0F3460;
    --color-bg-highlight: #FF6600;
    --color-bg-muted: #1F1F3A;

    --color-text-primary: #E94560;
    --color-text-secondary: #FF6B9D;
    --color-text-muted: #C23B5C;
    --color-text-brand: #FF6600;
    --color-text-inverse: #FFFFFF;

    --color-brand: #FF6600;
    --color-brand-hover: #E65C00;
    --color-brand-light: #FF8533;
    --color-accent: #9B59B6;
    --color-accent-hover: #8E44AD;

    --color-border: rgba(255, 102, 0, 0.5);
    --color-border-strong: #FF6600;

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: "Noto Serif TC", serif;

    /* --- 圓角系統（不規則） --- */
    --radius-sm: 8px 16px 8px 16px;
    --radius-md: 16px 24px 16px 24px;
    --radius-lg: 30px 60px 30px 60px;
    --radius-xl: 40px 80px 40px 80px;
    --radius-pill: 999px;
    --radius-card: 25px 50px 25px 50px;

    /* --- 邊框系統（霓虹） --- */
    --border-style: solid;
    --border-width: 3px;
    --border-color: rgba(255, 102, 0, 0.5);

    /* --- 陰影系統（霓虹發光） --- */
    --shadow-sm: 0 0 8px rgba(255, 102, 0, 0.4);
    --shadow-md: 0 0 16px rgba(255, 102, 0, 0.5);
    --shadow-lg: 0 0 24px rgba(255, 102, 0, 0.6);
    --shadow-button: 0 0 12px rgba(255, 102, 0, 0.6);
    --shadow-button-hover: 0 0 20px rgba(255, 102, 0, 0.8);

    /* --- 特殊效果 --- */
    --bg-pattern: none;
    --title-decoration: none;
}

/* 萬聖節風：不規則圓角 + 雙色霓虹效果 */
.theme-halloween .theme-card,
.theme-halloween .product-card,
.theme-halloween .article-card,
.theme-halloween .classpage-card,
.theme-halloween .course-entry-card {
    border: 3px solid var(--color-brand) !important;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% !important;
    box-shadow: 0 0 15px #FF6600, 0 0 30px #9B59B6 !important;
}

/* =============================================================================
   PART 3-I: 聖誕節風主題 Token
   ============================================================================= */

.theme-christmas {
    /* --- 色彩系統 --- */
    --color-bg-page: #F0F8FF;
    --color-bg-card: #FFFFFF;
    --color-bg-accent: #FFE4E4;
    --color-bg-highlight: #228B22;
    --color-bg-muted: #F8FCFF;

    --color-text-primary: #2F4F2F;
    --color-text-secondary: #556B2F;
    --color-text-muted: #6B8E23;
    --color-text-brand: #DC143C;
    --color-text-inverse: #FFFFFF;

    --color-brand: #DC143C;
    --color-brand-hover: #B22222;
    --color-brand-light: #FF6B6B;
    --color-accent: #228B22;
    --color-accent-hover: #1A6B1A;

    --color-border: rgba(220, 20, 60, 0.3);
    --color-border-strong: #DC143C;

    /* --- 字型系統 --- */
    --font-base: "Noto Sans TC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: 'Lora', serif;

    /* --- 圓角系統（圓潤） --- */
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 36px;
    --radius-pill: 999px;
    --radius-card: 24px;

    /* --- 邊框系統 --- */
    --border-style: solid;
    --border-width: 3px;
    --border-color: rgba(220, 20, 60, 0.3);

    /* --- 陰影系統 --- */
    --shadow-sm: 0 4px 12px rgba(34, 139, 34, 0.1);
    --shadow-md: 0 10px 30px rgba(34, 139, 34, 0.12);
    --shadow-lg: 0 18px 40px rgba(34, 139, 34, 0.15);
    --shadow-button: 0 6px 14px rgba(220, 20, 60, 0.2);
    --shadow-button-hover: 0 10px 22px rgba(220, 20, 60, 0.3);

    /* --- 特殊效果 --- */
    --bg-pattern: none;
    --title-decoration: none;
}

/* 聖誕節風：紅綠雙色邊框 */
.theme-christmas .theme-card,
.theme-christmas .product-card,
.theme-christmas .article-card,
.theme-christmas .classpage-card,
.theme-christmas .course-entry-card {
    border: 3px solid var(--color-brand) !important;
    box-shadow: inset 0 0 0 1px var(--color-accent), 0 10px 30px rgba(34, 139, 34, 0.15) !important;
}

/* =============================================================================
   PART 4: 全站基礎樣式
   ============================================================================= */

/* --- 字型載入 --- */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Noto+Sans+TC:wght@400;500;600;700&display=swap');

/* --- Body 基礎 --- */
body {
    font-family: var(--font-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
}

/* --- 標題 --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

/* --- Elementor 內文歸零 --- */
[class^="elementor-"] p {
    color: initial;
    font-size: initial;
    font-weight: initial;
    line-height: initial;
}

/* --- Elementor 容器邊框重置（奶油風預設無邊框） --- */
/* 這是全局規則，確保所有 Elementor 容器預設沒有邊框 */
.e-con,
.e-con-inner,
.e-con-full,
.e-con-boxed,
.e-flex,
[class*="e-con"],
[class*="elementor-element-"] {
    border: none !important;
    outline: none !important;
}

/* 只有 .theme-playful 內的特定元件才會套用虛線邊框 */
.theme-playful .theme-card,
.theme-playful .product-card,
.theme-playful .article-card,
.theme-playful .classpage-card,
.theme-playful .classpage-faq-item,
.theme-playful .course-entry-card,
.theme-playful .cta-box,
.theme-playful .featured {
    border: var(--border-width) var(--border-style) var(--border-color) !important;
}

/* =============================================================================
   PART 5: 按鈕系統
   ============================================================================= */

/* --- 按鈕基底 --- */
.btn,
.elementor-button,
.eba-ghost-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 12px 22px !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-base);
    font-weight: 600 !important;
    font-size: var(--font-size-md);
    line-height: var(--line-height-tight) !important;
    text-decoration: none !important;
    border: var(--border-width) var(--border-style) transparent;
    cursor: pointer;
    transition: all var(--transition-normal);
}

/* --- 主按鈕（咖啡/品牌色） --- */
.btn-primary,
.btn-coffee,
.elementor-button.btn-coffee,
.eba-ghost-button.btn-coffee {
    background: var(--color-brand) !important;
    border-color: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button);
}

.btn-primary:hover,
.btn-coffee:hover,
.elementor-button.btn-coffee:hover,
.eba-ghost-button.btn-coffee:hover {
    background: var(--color-brand-hover) !important;
    border-color: var(--color-brand-hover) !important;
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-2px);
}

/* --- 次要按鈕（天藍/輔助色） --- */
.btn-secondary,
.btn-sky {
    background: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: var(--color-text-primary) !important;
    box-shadow: var(--shadow-button);
}

.btn-secondary:hover,
.btn-sky:hover {
    background: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-2px);
}

/* --- 幽靈按鈕（透明邊框） --- */
.btn-ghost,
.btn-outline,
.eba-ghost-button:not(.btn-coffee):not(.btn-primary) {
    background: transparent !important;
    border-color: var(--color-bg-accent) !important;
    color: var(--color-text-brand) !important;
    box-shadow: none !important;
}

.btn-ghost:hover,
.btn-outline:hover,
.eba-ghost-button:not(.btn-coffee):not(.btn-primary):hover {
    background: var(--color-bg-accent) !important;
    border-color: var(--color-bg-accent) !important;
    color: var(--color-text-primary) !important;
}

/* --- 按鈕寬度控制 --- */
.elementor-widget-button .elementor-button,
.elementor-widget-eba-ghost-button {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    padding: 0 !important;
    margin: 0 auto !important;
    background: transparent !important;
}

.elementor-widget-eba-ghost-button .elementor-widget-container {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.eba-ghost-button-wrapper {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    flex: 0 0 auto !important;
    align-self: center !important;
}

/* --- Ghost Button 置中對齊 --- */
.eba-ghost-button-align-center {
    text-align: center !important;
}

.eba-ghost-button-align-center .elementor-widget-container,
.eba-ghost-button-align-center .eba-ghost-button-wrapper {
    justify-content: center !important;
    width: 100% !important;
}

.btn-block {
    width: 100% !important;
    max-width: 100% !important;
}

/* --- btn-block 時外層也改 block/100% --- */
.eba-ghost-button-wrapper:has(.btn-block),
.elementor-widget-eba-ghost-button .elementor-widget-container:has(.btn-block) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

.elementor-widget-eba-ghost-button:has(.btn-block) {
    display: block !important;
    width: 100% !important;
}

.elementor-widget-eba-ghost-button .elementor-widget-container:has(.btn-block) {
    display: flex;
    width: 100%;
}

/* --- 童趣風按鈕文字顏色修正 --- */
.theme-playful .btn-coffee .eba-ghost-button-text,
.theme-playful .eba-ghost-button.btn-coffee .eba-ghost-button-text {
    color: #5D4037 !important;
}

/* =============================================================================
   PART 6: 卡片元件系統
   ============================================================================= */

/* ============================================
   6-A: 主題卡片（三大主題卡片 Grid）
   ============================================ */

/* --- Grid 容器 --- */
.theme-cards {
    padding: 20px 24px 72px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 960px) {
    .theme-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .theme-cards {
        grid-template-columns: 1fr;
    }
}

/* --- 卡片本體 --- */
.theme-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
}

/* 童趣風卡片 */
.theme-playful .theme-card {
    border: var(--border-width) var(--border-style) var(--border-color);
    box-shadow: var(--shadow-md);
}

/* --- 卡片圖片 --- */
.card-media img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    display: block;
}

/* --- 卡片內容區 --- */
.card-body {
    padding: 20px 20px 24px;
    display: grid;
    gap: 10px;
}

/* --- 卡片標題 --- */
.card-title {
    font-family: var(--font-heading);
    font-size: 22px;
    color: var(--color-text-primary);
    margin: 0;
}

/* --- 卡片描述 --- */
.card-text {
    font-size: 15px;
    color: var(--color-text-primary);
    margin: 0;
}

/* --- 卡片內按鈕 --- */
.theme-card .eba-ghost-button,
.theme-card .theme-card-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 22px;
    border-radius: 22px;
    border: 2px solid var(--color-bg-accent);
    background: transparent;
    color: var(--color-text-brand);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    box-shadow: none;
    outline: none;
}

.theme-card .eba-ghost-button:hover,
.theme-card .theme-card-btn:hover {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
    color: var(--color-text-primary);
}

.theme-card .eba-ghost-button:focus-visible,
.theme-card .theme-card-btn:focus-visible {
    outline: 2px solid rgba(138, 94, 60, 0.35);
    outline-offset: 2px;
}

/* 清除舊的 .btn-ghost 邊框 */
.theme-card .btn-ghost {
    border: none;
    box-shadow: none;
    background: transparent;
    outline: none;
}

/* ============================================
   6-B: 課程入口卡片（水平雙欄）
   ============================================ */

.course-entry {
    padding: 48px 24px 32px;
    background: var(--color-bg-page);
}

.course-entry-card {
    max-width: 1100px;
    margin: 0 auto;
    background: var(--color-bg-accent);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: 1.05fr 1.1fr;
    overflow: hidden;
}

.theme-playful .course-entry-card {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.course-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-body {
    padding: 28px 28px 28px 24px;
    display: grid;
    gap: 12px;
    align-content: center;
    border: none;
}

.eyebrow {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-brand);
    margin: 0 0 6px;
}

.course-title {
    font-family: var(--font-heading);
    font-size: 28px;
    color: var(--color-text-primary);
    margin: 0;
}

.course-desc {
    font-size: 16px;
    color: var(--color-text-primary);
    margin: 0 0 10px;
}

@media (max-width: 960px) {
    .course-entry-card {
        grid-template-columns: 1fr;
    }

    .course-body {
        padding: 24px;
    }
}

/* ============================================
   6-C: 商品卡片（小舖）
   ============================================ */

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.product-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-card);
    border: none;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.theme-playful .product-card {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.product-thumb {
    position: relative;
    padding-top: 62%;
    background: var(--color-bg-accent);
}

.product-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.product-price {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-brand);
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================
   6-D: 課程頁卡片
   ============================================ */

.classpage-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.theme-playful .classpage-card {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.classpage-faq-item {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.theme-playful .classpage-faq-item {
    border: var(--border-width) var(--border-style) var(--border-color);
}

/* ============================================
   6-E: 文章卡片
   ============================================ */

.article-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-card);
    border: none;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.article-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.theme-playful .article-card {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.article-card__thumb {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    display: block;
}

.article-card__body {
    padding: var(--space-lg);
    display: grid;
    gap: var(--space-md);
}

.article-card__title {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin: 0;
}

.article-card__excerpt {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin: 0;
}

/* =============================================================================
   PART 7: Hero 區塊
   ============================================================================= */

.hero-section {
    position: relative;
    width: 100%;
    min-height: 65vh;
    background: linear-gradient(120deg, rgba(249, 216, 198, 0.35), rgba(167, 207, 231, 0.35)),
        var(--color-bg-page);
    overflow: hidden;
    padding-bottom: var(--space-md);
    border: none !important;
}

/* --- 奶油風（預設）：首頁區塊明確移除邊框 --- */
/* 強制所有 Elementor 容器在首頁區塊內無邊框 */
.hero-section,
.hero-section .e-con,
.hero-section .e-con-inner,
.hero-section .e-con-full,
.hero-section .elementor-element,
.hero-section [class*="elementor-element-"],
.course-entry,
.course-entry .e-con,
.course-entry .e-con-inner,
.course-entry .e-con-full,
.course-entry .elementor-element,
.course-entry-card,
.course-entry-card .e-con,
.course-entry-card .e-con-inner,
.course-entry-card .e-con-full,
.course-entry-card .elementor-element,
.course-media,
.course-media .e-con,
.course-body,
.course-body .e-con,
.cta-section,
.cta-section .e-con,
.cta-box,
.cta-box .e-con,
.cta-box .e-con-inner,
.cta-box .elementor-element,
.cta-actions,
.cta-actions .e-con,
.cta-actions .elementor-element,
.brand-story,
.brand-story .e-con,
.brand-story .e-con-inner,
.brand-story .elementor-element,
.brand-photo,
.brand-photo .e-con,
.brand-text,
.brand-text .e-con,
.theme-cards,
.theme-cards .e-con,
.theme-card .e-con {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* 確保首頁區塊內部容器背景色統一 */
.brand-story .e-con,
.brand-story .e-con-inner,
.brand-photo,
.brand-photo.e-con,
.brand-text,
.brand-text.e-con,
.course-entry-card .e-con,
.course-entry-card .e-con-inner,
.course-media,
.course-media.e-con,
.course-body,
.course-body.e-con,
.cta-box .e-con,
.cta-box .e-con-inner,
.cta-actions,
.cta-actions.e-con {
    background: transparent !important;
}

/* 部分區塊不需要陰影 */
.hero-section,
.hero-section .e-con,
.hero-section .e-con-inner,
.hero-section .e-con-full,
.hero-section .elementor-element,
.course-entry,
.course-entry .e-con,
.cta-section,
.cta-section .e-con,
.cta-actions,
.cta-actions .e-con,
.cta-actions .elementor-element {
    box-shadow: none !important;
}

/* --- 小舖頁面：明確移除邊框 --- */
/* 小舖 Hero 區塊 */
.hero.e-con,
.hero.e-flex,
.hero .e-con,
.hero .e-con-inner,
.hero .e-con-full,
.hero .elementor-element,
.hero-text,
.hero-text.e-con,
.hero-text .e-con,
.hero-visual,
.hero-visual.e-con,
.hero-visual .e-con,
.hero-buttons,
.hero-buttons.e-con,
.hero-buttons .e-con,
.hero-buttons .elementor-element {
    border: none !important;
    outline: none !important;
}

/* 分類導覽 */
.category-nav,
.category-nav.e-con,
.category-nav .e-con,
.category-nav .elementor-element {
    border: none !important;
    outline: none !important;
}

/* EBA Shop Widget 區塊標題 */
.eba-shop-section,
.eba-shop-heading,
.eba-product-grid,
.eba-product-card,
.eba-promote-carousel,
.eba-promote-wrapper {
    border: none !important;
    outline: none !important;
}

/* 區塊標題：標題和副標垂直置中 */
.eba-shop-heading {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center !important;
    gap: 12px;
}

.eba-shop-heading h2 {
    margin: 0;
    font-size: 22px;
}

.eba-shop-heading p {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* 小舖類的 .e-con 父容器（不帶 .hero-.course-.cta- 等前綴的） */
[class*="elementor-element-"]>.e-con-inner,
.elementor>[class*="e-con-boxed"] {
    border: none !important;
}

.theme-playful .hero-section {
    background-color: var(--color-bg-card);
    background-image: var(--bg-pattern);
    background-size: 20px 20px;
}

.hero-overlay {
    background: rgba(255, 248, 242, 0.72);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 90px var(--space-lg);
    text-align: center;
}

.theme-playful .hero-overlay {
    background: transparent;
}

.hero-eyebrow,
.eyebrow {
    font-size: var(--font-size-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-brand);
    margin-bottom: var(--space-sm);
}

.hero-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-md);
    line-height: var(--line-height-tight);
}

.hero-subhead {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-lg);
}

/* --- 童趣風標題裝飾 --- */
.theme-playful .hero-title,
.theme-playful .section-title,
.theme-playful .warm-kids-title {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    border: var(--title-decoration) !important;
    box-shadow: var(--shadow-md);
    /* Frosted Glass Effect */
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 30px;
    }

    .hero-subhead {
        font-size: var(--font-size-md);
    }
}

/* =============================================================================
   PART 8: CTA 區塊
   ============================================================================= */

.cta-section {
    padding: 56px var(--space-lg) 72px;
    background: var(--color-bg-page);
}

.cta-box {
    max-width: 860px;
    margin: 0 auto;
    background: var(--color-bg-accent);
    border-radius: calc(var(--radius-lg) + 8px);
    border: none;
    padding: 36px 32px;
    text-align: center;
    box-shadow: var(--shadow-md);
}

/* 童趣風 CTA 加邊框 */
.theme-playful .cta-box {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.theme-playful .cta-box {
    background: var(--color-bg-card);
    background-image: var(--bg-pattern);
    background-size: 20px 20px;
}

.cta-box h2 {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    color: var(--color-text-primary);
}

.cta-box p {
    margin: 0 0 var(--space-lg);
    color: var(--color-text-secondary);
}

.cta-actions {
    display: flex;
    justify-content: center !important;
    gap: var(--space-md) !important;
    flex-wrap: wrap;
}

/* =============================================================================
   PART 8-B: 首頁專屬版面（分隔條、品牌故事、Elementor 容器修正）
   ============================================================================= */

/* --- 分隔條 --- */
.cshero-divider {
    position: relative !important;
    width: 100%;
    min-height: 72px;
    height: clamp(72px, 9vw, 96px);
    margin: 0;
    padding: 0;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    overflow: hidden;
}

.cshero-divider::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(249, 216, 198, 0.42), rgba(167, 207, 231, 0.36)) !important;
    border-radius: 0 0 16px 16px;
    z-index: 0;
}

.cshero-divider>* {
    position: relative;
    z-index: 1;
}

/* --- 品牌故事（關於宅媽）兩欄排版 --- */
.brand-story {
    padding: 60px 24px 80px;
    width: min(1200px, 100%);
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: center;
}

.brand-photo img {
    width: 100%;
    border-radius: var(--radius-lg);
    object-fit: cover;
    box-shadow: var(--shadow-md);
    display: block;
}

.brand-text h3 {
    margin: 0 0 12px;
    font-family: var(--font-heading);
    color: var(--color-text-primary);
}

.brand-text p {
    margin: 0 0 12px;
    color: var(--color-text-primary);
}

.brand-text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 960px) {
    .brand-story {
        grid-template-columns: 1fr;
    }
}

/* --- CTA 按鈕容器 Elementor 修正 --- */
.cta-actions>.elementor-element {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

.cta-actions>.elementor-element.elementor-column {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

.cta-actions .elementor-widget-container {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* =============================================================================
   PART 9: 商品/小舖元件
   ============================================================================= */

/* --- 小舖容器 --- */
.shop-wrapper {
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-md) 96px;
}

/* --- 小舖 Hero 區塊 --- */
.shop-wrapper .hero,
.hero-shop {
    background: var(--color-bg-accent);
    border-radius: var(--radius-xl);
    padding: 40px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    margin-bottom: 40px;
    border: none;
}

.theme-playful .shop-wrapper .hero,
.theme-playful .hero-shop {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.hero-text small {
    font-size: var(--font-size-sm);
    letter-spacing: 0.18em;
    color: var(--color-text-secondary);
}

.hero-text h1 {
    font-size: 32px;
    margin: 12px 0;
}

.hero-text p {
    margin: 0 0 24px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.hero-buttons {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center !important;
}

/* --- hero-buttons 內的按鈕 widget 也需要調整 --- */
.hero-buttons.e-con,
.hero-buttons.e-flex,
.hero-buttons.e-con.e-flex,
.hero-buttons.e-con-full.e-flex,
.e-con.hero-buttons,
.e-flex.hero-buttons,
div.hero-buttons.e-con,
div.hero-buttons.e-flex {
    justify-content: center !important;
    align-content: flex-start !important;
}

.hero-buttons>.elementor-element,
.hero-buttons.e-con>.elementor-element,
.hero-buttons.e-flex>.elementor-element {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: fit-content !important;
    margin: 0 !important;
}

/* --- PDF Bookstore Shelf Widget 標題垂直置中 --- */
.wb-section-header {
    align-items: center !important;
}

.hero-visual {
    text-align: center;
}

.hero-pill {
    display: inline-flex;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-sm);
}

.hero-thumbnail {
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

/* --- 分類導覽 --- */
.category-nav {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 10px;
    margin-bottom: 32px;
}

/* 分類導覽內的按鈕 margin 覆蓋 */
.category-nav>.elementor-element,
.category-nav.e-con>.elementor-element,
.category-nav.e-flex>.elementor-element,
.category-nav .elementor-widget-eba-ghost-button {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
}

.category-pill {
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-bg-accent);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all var(--transition-normal);
}

.category-pill:hover {
    background: var(--color-bg-accent);
    border-color: var(--color-bg-accent);
}

.category-pill.is-active {
    background: var(--color-brand);
    border-color: var(--color-brand);
    color: var(--color-text-inverse);
}

/* --- 本月主打 --- */
.featured {
    background: var(--color-bg-highlight);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    border: none;
}

.theme-playful .featured {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.featured-tag {
    font-size: var(--font-size-xs);
    letter-spacing: 0.18em;
    color: var(--color-text-brand);
    margin-bottom: 4px;
}

.featured-title {
    font-size: var(--font-size-lg);
    margin: 4px 0 8px;
}

.featured-desc {
    font-size: var(--font-size-sm);
    margin-bottom: 16px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.featured-meta {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 12px;
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    background: var(--color-bg-accent);
    color: var(--color-text-primary);
    margin-right: 6px;
}

.featured-image {
    border-radius: var(--radius-md);
    background: var(--color-bg-accent);
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* --- 區塊標題 --- */
.section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 32px 0 12px;
}

.section-heading h2 {
    font-size: 22px;
    margin: 0;
}

.section-heading span {
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* --- 備註框 --- */
.note-box {
    margin-top: 40px;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    background: var(--color-bg-highlight);
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.note-box strong {
    color: var(--color-text-brand);
}

/* --- 小舖 RWD --- */
@media (max-width: 900px) {

    .shop-wrapper .hero,
    .hero-shop,
    .featured {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .shop-wrapper {
        padding-top: 32px;
    }

    .shop-wrapper .hero,
    .hero-shop {
        padding: 28px 20px;
    }

    .hero-text h1 {
        font-size: 26px;
    }
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-sm);
    font-size: 32px;
    letter-spacing: 0.12em;
}

.section-subtitle {
    text-align: center;
    margin-bottom: 32px;
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
}

/* --- 商品網格 --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-lg);
}

.product-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-card);
    border: none;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.theme-playful .product-card {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.product-thumb {
    position: relative;
    padding-top: 62%;
    background: var(--color-bg-accent);
}

.product-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-body {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.product-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.product-price {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-brand);
}

@media (max-width: 900px) {
    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .product-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* =============================================================================
   PART 10: 課程列表頁專屬
   ============================================================================= */

.classpage-hero {
    padding: clamp(64px, 8vw, 96px) var(--space-lg) clamp(48px, 6vw, 72px);
    text-align: center;
    background: linear-gradient(180deg, rgba(249, 216, 198, 0.55), rgba(255, 248, 242, 0.85));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.classpage-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(34px, 5vw, 44px);
    margin: 0 0 var(--space-md);
    color: var(--color-text-primary);
}

.classpage-section {
    padding: clamp(56px, 7vw, 88px) var(--space-lg);
    background: var(--color-bg-page);
}

.classpage-heading {
    font-family: var(--font-heading);
    font-size: clamp(28px, 4vw, 36px);
    text-align: center;
    margin: 0 0 var(--space-md);
}

.classpage-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.theme-playful .classpage-card {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.classpage-faq-item {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.theme-playful .classpage-faq-item {
    border: var(--border-width) var(--border-style) var(--border-color);
}

.classpage-cta {
    text-align: center;
    padding: clamp(48px, 6vw, 72px) var(--space-lg) clamp(72px, 8vw, 96px);
    background: linear-gradient(160deg, rgba(249, 216, 198, 0.22), rgba(167, 207, 231, 0.22));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* =============================================================================
   PART 11: 電子書櫃專屬（童趣風原生樣式）
   ============================================================================= */

.warm-kids-title {
    font-family: var(--font-heading);
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-lg);
    border: var(--border-width) var(--border-style) var(--border-color);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-md);
    font-weight: bold;
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
}

.my-shelf-title {
    background-color: #FFF9E1;
    color: #5D4037;
}

.shop-shelf-title {
    background-color: #E1F5FE;
    border-color: #81D4FA !important;
    color: #0277BD;
    box-shadow: 4px 4px 0px #B3E5FC !important;
}

.warm-kids-content {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    text-align: center;
    margin: 0 auto var(--space-lg) auto;
    max-width: 600px;
    font-style: italic;
}

.warm-kids-container-bg {
    background-color: var(--color-bg-card);
    background-image: var(--bg-pattern);
    background-size: 20px 20px;
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg);
    margin-bottom: var(--space-xl);
    border: 2px solid var(--color-bg-muted);
}

/* =============================================================================
   PART 11-B: 導航列與 Tutor 子選單
   ============================================================================= */

/* --- 導航列品牌 --- */
.navbar-brand a {
    color: var(--color-text-brand);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
}

.navbar-brand a:hover {
    color: #b56b3e;
}

/* --- Avatar 樣式 --- */
.navbar-utils .tutor-avatar,
.navbar-utils .tutor-avatar .tutor-ratio {
    background-color: #f3c8b0 !important;
    border-radius: 50% !important;
}

.navbar-utils .tutor-avatar-text,
.tutor-avatar-text {
    background-color: #f3c8b0 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

/* --- 購物車 Icon --- */
.btn-cart svg path {
    fill: #f29b72 !important;
}

.btn-cart span {
    color: #f29b72 !important;
}

/* --- Tutor 子選單（下拉選單） --- */
.navbar-utils .tutor-header-submenu {
    background-color: #fde7da !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
}

/* --- 講師區塊（紫色 → 改桃粉色） --- */
.tutor-submenu-login-section-instructor {
    background: #f7c6b5 !important;
    border-radius: 16px !important;
    padding: 20px !important;
    color: #ffffff !important;
}

.tutor-submenu-login-section-instructor * {
    color: #ffffff !important;
}

/* --- 子選單連結 --- */
.tutor-submenu-links a {
    color: #444444 !important;
    font-weight: 500;
}

.tutor-submenu-links a:hover {
    color: #d67f61 !important;
}

.tutor-submenu-links li {
    margin-bottom: 8px !important;
}

/* --- 登入按鈕 --- */
.tutor-submenu-login-btn a {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 50% !important;
    padding: 10px !important;
}

/* =============================================================================
   PART 12: TutorLMS Dashboard
   ============================================================================= */

body .tutor-wrap.tutor-dashboard {
    background-color: var(--color-bg-page);
    font-family: var(--font-base);
    color: var(--color-text-secondary);
}

body .tutor-dashboard-header {
    background: transparent;
    border: none;
    box-shadow: none;
}

body .tutor-dashboard-left-menu {
    background: var(--color-bg-card);
    border-radius: var(--radius-xl);
    border: none;
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg);
}

body .tutor-dashboard-permalinks a {
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition-normal);
}

body .tutor-dashboard-permalinks a:hover {
    background-color: var(--color-bg-accent);
    color: var(--color-text-brand);
}

body .tutor-dashboard-permalinks .is-active a,
body .tutor-dashboard-permalinks li.current-menu-item a {
    background-color: var(--color-bg-highlight);
    color: var(--color-text-brand);
    font-weight: 600;
}

body .tutor-dashboard-content-inner>* {
    background: var(--color-bg-highlight);
    border-radius: var(--radius-xl);
    border: none;
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-lg);
}

body .tutor-btn,
body .tutor-button,
body .tutor-btn-primary {
    background-color: var(--color-brand) !important;
    border-radius: var(--radius-pill) !important;
    border: none !important;
    color: var(--color-text-inverse) !important;
    padding: var(--space-sm) var(--space-lg) !important;
    font-weight: 500;
    box-shadow: var(--shadow-button);
    transition: all var(--transition-normal);
}

body .tutor-btn:hover,
body .tutor-button:hover,
body .tutor-btn-primary:hover {
    background-color: var(--color-brand-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-button-hover);
}

body .tutor-progress-bar {
    background-color: var(--color-bg-muted);
    border-radius: var(--radius-pill);
}

body .tutor-progress-bar .tutor-progress-value {
    background-color: var(--color-brand);
    border-radius: var(--radius-pill);
}

/* --- 童趣風 TutorLMS 裝飾 --- */
.theme-playful .tutor-dashboard-left-menu,
.theme-playful .tutor-dashboard-content-inner>* {
    border: var(--border-width) var(--border-style) var(--border-color) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
}

/* =============================================================================
   PART 13: WooCommerce
   ============================================================================= */

body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account {
    background: var(--color-bg-page);
}

body.woocommerce-cart .wc-block-components-panel,
body.woocommerce-cart .wc-block-components-card,
body.woocommerce-checkout .wc-block-components-panel,
body.woocommerce-checkout .wc-block-components-card,
body.woocommerce-account .wc-block-components-panel {
    background: var(--color-bg-muted);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: var(--shadow-md);
}

/* --- WooCommerce 全站按鈕（覆蓋藍色） --- */
body.woocommerce-cart .wc-block-components-button,
body.woocommerce-checkout .wc-block-components-button,
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce .wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
button.single_add_to_cart_button,
a.added_to_cart {
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-md) var(--space-lg) !important;
    box-shadow: var(--shadow-button) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

body.woocommerce-cart .wc-block-components-button:hover,
body.woocommerce-checkout .wc-block-components-button:hover,
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .add_to_cart_button:hover,
.woocommerce .checkout-button:hover,
.woocommerce .wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
button.single_add_to_cart_button:hover,
a.added_to_cart:hover {
    background: var(--color-brand-hover) !important;
    box-shadow: var(--shadow-button-hover) !important;
    transform: translateY(-2px) !important;
}

/* --- WooCommerce 成功訊息（覆蓋藍色勾勾） --- */
.woocommerce-message,
.woocommerce-info,
.wc-block-components-notice-banner {
    background: var(--color-bg-highlight) !important;
    border-left-color: var(--color-brand) !important;
    border-radius: var(--radius-md) !important;
}

.woocommerce-message::before,
.wc-block-components-notice-banner__content::before,
.wc-block-components-notice-banner svg {
    color: var(--color-brand) !important;
    fill: var(--color-brand) !important;
}

/* --- WooCommerce Notice SVG Icon 覆蓋 --- */
.wc-block-components-notice-banner.is-success svg,
.wc-block-components-notice-banner.is-success svg path {
    fill: var(--color-brand) !important;
    stroke: var(--color-brand) !important;
}

.wc-block-components-notice-banner.is-success {
    background: var(--color-bg-highlight) !important;
    border-color: var(--color-brand) !important;
}

/* --- 童趣風 WooCommerce 裝飾 --- */
.theme-playful .wc-block-components-panel,
.theme-playful .wc-block-components-card,
.theme-playful .woocommerce-message,
.theme-playful .woocommerce-info,
.theme-playful .wc-block-components-notice-banner,
.theme-playful .wc-block-checkout__main,
.theme-playful .wc-block-checkout__sidebar {
    border: var(--border-width) var(--border-style) var(--border-color) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: var(--shadow-md) !important;
}

/* --- WooCommerce 區塊內所有按鈕（優惠碼確認、登入等） --- */
.wc-block-components-button,
.wc-block-components-form .wc-block-components-button,
.wc-block-checkout__actions button,
.wc-block-components-totals-coupon button,
.woocommerce-form-login button,
.woocommerce-form button[type="submit"],
.wp-block-woocommerce-checkout button,
.coupon-button,
button.coupon-button,
.woocommerce .coupon-button,
.woocommerce-checkout .coupon-button {
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
}

/* --- 童趣風：按鈕強制樣式 (修復購物車按鈕，改為與商品頁一致的膠囊型) --- */
.theme-playful.woocommerce div.product form.cart .button,
.theme-playful.woocommerce div.product .single_add_to_cart_button,
.theme-playful .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-playful .wc-block-components-product-button .wc-block-components-button,
.theme-playful .wc-block-grid__product .wp-block-button__link,
.theme-playful .add_to_cart_button.ajax_add_to_cart,
.theme-playful .single_add_to_cart_button {
    border-radius: 50px 20px 50px 20px !important;
    /* 改回原本的對稱圓角 (膠囊型) */
    border: none !important;
    background: #FFAB91 !important;
    color: #5D4037 !important;
    box-shadow: 2px 2px 0px #FFE0B2 !important;
    /* 改回原本的實心陰影 */
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-playful.woocommerce div.product form.cart .button:hover,
.theme-playful.woocommerce div.product .single_add_to_cart_button:hover,
.theme-playful .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-playful .wc-block-components-product-button .wc-block-components-button:hover,
.theme-playful .wc-block-grid__product .wp-block-button__link:hover,
.theme-playful .add_to_cart_button.ajax_add_to_cart:hover,
.theme-playful .single_add_to_cart_button:hover {
    background: #FF9E80 !important;
    transform: translateY(-2px) !important;
    /* 改回原本的上浮效果 */
    box-shadow: 4px 4px 0px #FFCCBC !important;
}

/* --- WooCommerce 單一商品頁面童趣優化 --- */
.theme-playful .product {
    padding: 24px;
    background-color: var(--color-bg-card);
    /* 恢復卡片背景色 */
    border-radius: var(--radius-card);
    /* 童趣風圓角 */
    border: var(--border-width) var(--border-style) var(--border-color);
    /* 虛線邊框 */
    box-shadow: var(--shadow-card);
    margin-bottom: 40px;
}

.theme-playful .product .woocommerce-product-gallery {
    border-radius: var(--radius-md) !important;
    border: 2px dashed #FFAB91 !important;
    overflow: hidden;
    padding: 10px;
    background: #fff;
    margin-bottom: 20px;
}

.theme-playful .product .summary.entry-summary {
    border-radius: var(--radius-md) !important;
    border: 2px dashed #FFAB91 !important;
    padding: 24px;
    background: #fff;
    margin-bottom: 20px;
}

.theme-playful .product_title {
    font-family: var(--font-heading) !important;
    color: var(--color-text-primary) !important;
    border-bottom: 3px dashed #FFAB91;
    padding-bottom: 15px;
    margin-bottom: 25px;
    font-weight: bold;
}

.theme-playful .quantity .input-text.qty {
    border: 2px dashed #FFAB91 !important;
    border-radius: 12px !important;
    color: var(--color-text-primary) !important;
    padding: 8px !important;
    text-align: center;
    min-height: 40px;
}

/* --- WooCommerce 購物車頁面商品網格 (Cross-sells/Recommended) 童趣化 --- */
.theme-playful .wc-block-grid__product {
    background-color: var(--color-bg-card);
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 15px;
    margin-bottom: 20px;
    list-style: none !important;
}

.theme-playful .wc-block-grid__product-image {
    border: 2px dashed #FFAB91;
    border-radius: var(--radius-md);
    padding: 5px;
    background: #fff;
    margin-bottom: 10px;
    overflow: hidden;
}

.theme-playful .wc-block-grid__product-image img {
    border-radius: 12px;
    display: block;
}

.theme-playful .wc-block-grid__product-title {
    font-family: var(--font-heading);
    font-weight: bold;
    color: var(--color-text-primary);
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.4;
}

.theme-playful .wc-block-grid__product-title a {
    text-decoration: none;
    color: inherit;
}

.theme-playful .wc-block-grid__product-price {
    font-family: var(--font-base);
    font-weight: 600;
    color: var(--color-brand);
    font-size: 15px;
    margin-bottom: 10px;
}

/* --- 商品頁加入購物車按鈕 --- */
.woocommerce div.product .single_add_to_cart_button {
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 28px !important;
    font-size: 16px !important;
}

/* --- WooCommerce 輸入框樣式（移除藍色邊框） --- */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout textarea,
#coupon_code,
input#coupon_code {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-bg-card) !important;
    transition: border-color 0.2s ease !important;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="tel"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce input[type="number"]:focus,
.woocommerce textarea:focus,
.woocommerce select:focus,
.woocommerce-checkout input:focus,
#coupon_code:focus,
input#coupon_code:focus {
    border-color: var(--color-brand) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(138, 94, 60, 0.15) !important;
}

/* --- 空購物車視覺 --- */
body.woocommerce-cart .wc-block-cart__empty-cart__title {
    position: relative;
    padding-top: 160px;
}

body.woocommerce-cart .wc-block-cart__empty-cart__title::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 140px;
    background-image: url("https://flystation.familyds.com/wordpress/wp-content/uploads/2025/12/31乾_工作區域-1.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* 移除預設的哭哭臉圖示 */
.wc-block-cart__empty-cart__title::before,
.with-empty-cart-icon::before {
    display: none !important;
    content: none !important;
}

/* 確保新圖示正確顯示並調整文字風格 */
.wc-block-cart__empty-cart__title {
    display: block !important;
    margin-top: 0 !important;
}

.theme-playful .wc-block-cart__empty-cart__title,
.theme-playful .with-empty-cart-icon {
    font-family: var(--font-heading) !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: var(--color-text-primary) !important;
    letter-spacing: 0.05em !important;
}

/* =============================================================================
   PART 14: Article System
   ============================================================================= */

.article-content {
    max-width: 720px;
    margin: 0 auto;
}

.article-block {
    margin-bottom: 2.2rem;
}

.article-text,
.article-text p {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    margin: 0;
}

.article-content h2 {
    font-size: 1.5rem;
    margin: 3rem 0 1rem;
}

.article-content h3 {
    font-size: 1.25rem;
    margin: 2.5rem 0 0.8rem;
}

.article-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-md);
}

.article-note {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.6rem;
    font-size: 0.95em;
}

.article-quote {
    font-size: 1.1em;
    padding-left: 1.2rem;
    border-left: 4px solid var(--color-border);
    opacity: 0.9;
}

/* =============================================================================
   PART 15: 登入頁面
   ============================================================================= */

.tutor-login-wrap {
    padding: var(--space-lg);
    background: var(--color-bg-page);
}

.tutor-login-wrap .tutor-login-form-wrapper {
    background: var(--color-bg-muted);
    border-radius: var(--radius-lg);
    border: none;
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.tutor-login-wrap .tutor-form-control {
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.98);
}

.tutor-login-wrap .tutor-btn.tutor-btn-primary {
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}

/* =============================================================================
   PART 16: RWD 響應式調整
   ============================================================================= */

@media (max-width: 768px) {
    body .tutor-wrap.tutor-dashboard {
        padding: var(--space-md);
    }

    .theme-cards {
        grid-template-columns: 1fr;
    }

    .cta-box {
        padding: var(--space-lg);
    }

    .classpage-card {
        padding: var(--space-lg);
    }
}

/* =============================================================================
   PART 17: Elementor Widget 修正
   ============================================================================= */

/* --- 文字編輯器統一字級 --- */
.elementor-widget-text-editor,
.elementor-widget-text-editor .elementor-widget-container,
.elementor-widget-text-editor .elementor-text-editor {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-normal);
}

/* --- Ghost Button Wrapper 修正 --- */
.elementor-widget-eba-ghost-button {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    background: transparent !important;
}

.elementor-widget-eba-ghost-button .elementor-widget-container {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.eba-ghost-button-wrapper {
    display: inline-flex !important;
    width: auto !important;
    max-width: max-content !important;
}

/* =============================================================================
   PART 8: WooCommerce 按鈕樣式 (Playful Theme)
   ============================================================================= */

/* 強制將所有 WooCommerce 按鈕改為童趣風膠囊樣式 */
.theme-playful .woocommerce button.button,
.theme-playful .woocommerce .button,
.theme-playful .woocommerce a.button,
.theme-playful .woocommerce input.button,
.theme-playful .woocommerce #respond input#submit,
.theme-playful .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.theme-playful .woocommerce-checkout #place_order {
    border-radius: 50px !important;
    /* 膠囊形狀 */
    padding: 12px 32px !important;
    font-weight: bold !important;
    border: 2px dashed #FFAB91 !important;
    /* 虛線邊框 */
    box-shadow: 3px 3px 0px #FFE0B2 !important;
    /* 偏移陰影 */
    transition: all 0.2s ease !important;
}

.theme-playful .woocommerce button.button:hover,
.theme-playful .woocommerce .button:hover,
.theme-playful .woocommerce a.button:hover,
.theme-playful .woocommerce input.button:hover,
.theme-playful .woocommerce #respond input#submit:hover,
.theme-playful .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.theme-playful .woocommerce-checkout #place_order:hover {
    transform: translateY(-2px) !important;
    box-shadow: 4px 4px 0px #FFCCBC !important;
}

/* 確保主要按鈕（如結帳）顏色正確 */
.theme-playful .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.theme-playful .woocommerce-checkout #place_order {
    background-color: #FFAB91 !important;
    color: #FFFFFF !important;
    border-style: dashed !important;
}

.theme-playful .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.theme-playful .woocommerce-checkout #place_order:hover {
    background-color: #FF8A65 !important;
}

/* --- 奶油風：按鈕強制樣式 --- */
.theme-creamy.woocommerce div.product form.cart .button,
.theme-creamy.woocommerce div.product .single_add_to_cart_button,
.theme-creamy .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-creamy .wc-block-components-product-button .wc-block-components-button,
.theme-creamy .wc-block-grid__product .wp-block-button__link,
.theme-creamy .add_to_cart_button.ajax_add_to_cart,
.theme-creamy .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-creamy.woocommerce div.product form.cart .button:hover,
.theme-creamy.woocommerce div.product .single_add_to_cart_button:hover,
.theme-creamy .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-creamy .wc-block-components-product-button .wc-block-components-button:hover,
.theme-creamy .wc-block-grid__product .wp-block-button__link:hover,
.theme-creamy .add_to_cart_button.ajax_add_to_cart:hover,
.theme-creamy .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}

/* --- 中國新年風：按鈕強制樣式 --- */
.theme-cny.woocommerce div.product form.cart .button,
.theme-cny.woocommerce div.product .single_add_to_cart_button,
.theme-cny .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-cny .wc-block-components-product-button .wc-block-components-button,
.theme-cny .wc-block-grid__product .wp-block-button__link,
.theme-cny .add_to_cart_button.ajax_add_to_cart,
.theme-cny .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-cny.woocommerce div.product form.cart .button:hover,
.theme-cny.woocommerce div.product .single_add_to_cart_button:hover,
.theme-cny .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-cny .wc-block-components-product-button .wc-block-components-button:hover,
.theme-cny .wc-block-grid__product .wp-block-button__link:hover,
.theme-cny .add_to_cart_button.ajax_add_to_cart:hover,
.theme-cny .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}

/* --- 情人節風：按鈕強制樣式 --- */
.theme-valentine.woocommerce div.product form.cart .button,
.theme-valentine.woocommerce div.product .single_add_to_cart_button,
.theme-valentine .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-valentine .wc-block-components-product-button .wc-block-components-button,
.theme-valentine .wc-block-grid__product .wp-block-button__link,
.theme-valentine .add_to_cart_button.ajax_add_to_cart,
.theme-valentine .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-valentine.woocommerce div.product form.cart .button:hover,
.theme-valentine.woocommerce div.product .single_add_to_cart_button:hover,
.theme-valentine .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-valentine .wc-block-components-product-button .wc-block-components-button:hover,
.theme-valentine .wc-block-grid__product .wp-block-button__link:hover,
.theme-valentine .add_to_cart_button.ajax_add_to_cart:hover,
.theme-valentine .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}

/* --- 母親節風：按鈕強制樣式 --- */
.theme-mother.woocommerce div.product form.cart .button,
.theme-mother.woocommerce div.product .single_add_to_cart_button,
.theme-mother .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-mother .wc-block-components-product-button .wc-block-components-button,
.theme-mother .wc-block-grid__product .wp-block-button__link,
.theme-mother .add_to_cart_button.ajax_add_to_cart,
.theme-mother .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-mother.woocommerce div.product form.cart .button:hover,
.theme-mother.woocommerce div.product .single_add_to_cart_button:hover,
.theme-mother .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-mother .wc-block-components-product-button .wc-block-components-button:hover,
.theme-mother .wc-block-grid__product .wp-block-button__link:hover,
.theme-mother .add_to_cart_button.ajax_add_to_cart:hover,
.theme-mother .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}

/* --- 父親節風：按鈕強制樣式 --- */
.theme-father.woocommerce div.product form.cart .button,
.theme-father.woocommerce div.product .single_add_to_cart_button,
.theme-father .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-father .wc-block-components-product-button .wc-block-components-button,
.theme-father .wc-block-grid__product .wp-block-button__link,
.theme-father .add_to_cart_button.ajax_add_to_cart,
.theme-father .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-father.woocommerce div.product form.cart .button:hover,
.theme-father.woocommerce div.product .single_add_to_cart_button:hover,
.theme-father .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-father .wc-block-components-product-button .wc-block-components-button:hover,
.theme-father .wc-block-grid__product .wp-block-button__link:hover,
.theme-father .add_to_cart_button.ajax_add_to_cart:hover,
.theme-father .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button) !important;
}

/* --- 中秋節風：按鈕強制樣式 --- */
.theme-moonfestival.woocommerce div.product form.cart .button,
.theme-moonfestival.woocommerce div.product .single_add_to_cart_button,
.theme-moonfestival .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-moonfestival .wc-block-components-product-button .wc-block-components-button,
.theme-moonfestival .wc-block-grid__product .wp-block-button__link,
.theme-moonfestival .add_to_cart_button.ajax_add_to_cart,
.theme-moonfestival .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-moonfestival.woocommerce div.product form.cart .button:hover,
.theme-moonfestival.woocommerce div.product .single_add_to_cart_button:hover,
.theme-moonfestival .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-moonfestival .wc-block-components-product-button .wc-block-components-button:hover,
.theme-moonfestival .wc-block-grid__product .wp-block-button__link:hover,
.theme-moonfestival .add_to_cart_button.ajax_add_to_cart:hover,
.theme-moonfestival .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}

/* --- 感恩節風：按鈕強制樣式 --- */
.theme-thanksgiving.woocommerce div.product form.cart .button,
.theme-thanksgiving.woocommerce div.product .single_add_to_cart_button,
.theme-thanksgiving .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-thanksgiving .wc-block-components-product-button .wc-block-components-button,
.theme-thanksgiving .wc-block-grid__product .wp-block-button__link,
.theme-thanksgiving .add_to_cart_button.ajax_add_to_cart,
.theme-thanksgiving .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-thanksgiving.woocommerce div.product form.cart .button:hover,
.theme-thanksgiving.woocommerce div.product .single_add_to_cart_button:hover,
.theme-thanksgiving .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-thanksgiving .wc-block-components-product-button .wc-block-components-button:hover,
.theme-thanksgiving .wc-block-grid__product .wp-block-button__link:hover,
.theme-thanksgiving .add_to_cart_button.ajax_add_to_cart:hover,
.theme-thanksgiving .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}

/* --- 萬聖節風：按鈕強制樣式 --- */
.theme-halloween.woocommerce div.product form.cart .button,
.theme-halloween.woocommerce div.product .single_add_to_cart_button,
.theme-halloween .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-halloween .wc-block-components-product-button .wc-block-components-button,
.theme-halloween .wc-block-grid__product .wp-block-button__link,
.theme-halloween .add_to_cart_button.ajax_add_to_cart,
.theme-halloween .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-halloween.woocommerce div.product form.cart .button:hover,
.theme-halloween.woocommerce div.product .single_add_to_cart_button:hover,
.theme-halloween .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-halloween .wc-block-components-product-button .wc-block-components-button:hover,
.theme-halloween .wc-block-grid__product .wp-block-button__link:hover,
.theme-halloween .add_to_cart_button.ajax_add_to_cart:hover,
.theme-halloween .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}

/* --- 聖誕節風：按鈕強制樣式 --- */
.theme-christmas.woocommerce div.product form.cart .button,
.theme-christmas.woocommerce div.product .single_add_to_cart_button,
.theme-christmas .wc-block-grid__product-add-to-cart .wp-block-button__link,
.theme-christmas .wc-block-components-product-button .wc-block-components-button,
.theme-christmas .wc-block-grid__product .wp-block-button__link,
.theme-christmas .add_to_cart_button.ajax_add_to_cart,
.theme-christmas .single_add_to_cart_button {
    border-radius: var(--radius-md) !important;
    border: none !important;
    background: var(--color-brand) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: var(--shadow-button) !important;
    padding: 10px 24px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.theme-christmas.woocommerce div.product form.cart .button:hover,
.theme-christmas.woocommerce div.product .single_add_to_cart_button:hover,
.theme-christmas .wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.theme-christmas .wc-block-components-product-button .wc-block-components-button:hover,
.theme-christmas .wc-block-grid__product .wp-block-button__link:hover,
.theme-christmas .add_to_cart_button.ajax_add_to_cart:hover,
.theme-christmas .single_add_to_cart_button:hover {
    background: var(--color-brand-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}/* =============================================================================
   END OF THEME FILE
   ============================================================================= */

/* =============================================================================
   PART 10: 節慶裝飾圖層
   ============================================================================= */

/* --- 中國新年風：紅燈籠裝飾 --- */
.theme-cny body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/decorations/cny-lanterns.png');
    background-repeat: repeat;
    background-size: 200px auto;
    opacity: 0.12;
    pointer-events: none;
    z-index: 9999;
}

/* --- 情人節風：愛心飄浮 --- */
.theme-valentine body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/decorations/valentine-hearts.png');
    background-repeat: repeat;
    background-size: 300px auto;
    opacity: 0.08;
    pointer-events: none;
    z-index: 9999;
}

/* --- 母親節風：康乃馨花瓣 --- */
.theme-mother body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/decorations/mother-flowers.png');
    background-repeat: repeat;
    background-size: 250px auto;
    opacity: 0.1;
    pointer-events: none;
    z-index: 9999;
}

/* --- 中秋節風：月亮與兔子邊框 --- */
.theme-moonfestival body::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90vw, 1400px);
    height: min(90vh, 1000px);
    background-image: url('../images/decorations/moonfestival-frame.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.15;
    pointer-events: none;
    z-index: 9999;
}

/* --- 聖誕節風：飄落的雪花 --- */
.theme-christmas body::before {
    content: '';
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    height: calc(100% + 200px);
    background-image: url('../images/decorations/christmas-snowflakes.png');
    background-repeat: repeat;
    background-size: 400px auto;
    opacity: 0.15;
    pointer-events: none;
    z-index: 9999;
    animation: snowfall 30s linear infinite;
}

@keyframes snowfall {
    from {
        transform: translateY(-100px);
    }

    to {
        transform: translateY(100px);
    }
}

/* --- 萬聖節風：簡約裝飾（暫時使用 CSS 圖案） --- */
.theme-halloween body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 102, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(155, 89, 182, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 9999;
}

/* --- 感恩節風：簡約裝飾（暫時使用 CSS 圖案） --- */
.theme-thanksgiving body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 15% 30%, rgba(210, 105, 30, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 85% 70%, rgba(139, 69, 19, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 9999;
}

/* --- 父親節風：無裝飾（保持簡約專業） --- */
/* 父親節風格不需要額外裝飾 */