/* ============================================================
   PPShop Customer Themes — v49 Pastel Pro + Conversion-Optimized
   
   Research-backed design:
   - Soft pastel backgrounds (Pantone-inspired) → premium feel
   - Warm orange/coral accents → 5-10% higher conversion (Amazon proven)
   - WCAG AA contrast minimum → readable everywhere
   - Pet shop trend 2026: Earth tones + sage + cream + pastels
   
   หมวด EDITORIAL (3): magazine luxury
     '' (default)  Warm Espresso
     ctheme-ivory  Boutique Linen
     ctheme-cocoa  Midnight Cocoa
   
   หมวด PASTEL PRO (7): Pantone palette-inspired
     ctheme-sakura   Sakura Bloom   — ชมพูพาสเทล premium
     ctheme-macaron  Macaron Mix    — Pantone หลากสี
     ctheme-seaside  Seaside Calm   — ฟ้าน้ำทะเล
     ctheme-sherbet  Sherbet Sunset — ส้มพีช
     ctheme-lilac    Lilac Mist     — ม่วงพาสเทล
     ctheme-sage     Sage Garden    — เซจกรีน
     ctheme-butter   Butter Cream   — เหลืองนุ่ม
============================================================ */


/* ============================================================
   EDITORIAL THEMES (keep existing 3)
============================================================ */

/* THEME: BOUTIQUE LINEN */
html.ctheme-ivory {
  --color-primary: #6B4423;
  --color-primary-dark: #4A2F18;
  --color-primary-light: #D8C2A5;
  --color-accent: #B8956A;
  --color-bg: #FBF8F3;
  --color-bg-alt: #F0E9DB;
  --color-surface: #FFFFFF;
  --color-ink: #1A1208;
  --color-ink-light: #3D2A18;
  --color-muted: #8A7560;
  --color-border: #E5D9C5;
  --color-border-light: #F0E5D2;
  --radius-card: 6px;
  --radius-btn: 4px;
}
html.ctheme-ivory body { background: #FBF8F3; font-family: 'Inter','Noto Sans Thai',sans-serif; color: #1A1208; }
html.ctheme-ivory h1, html.ctheme-ivory h2, html.ctheme-ivory h3, html.ctheme-ivory h4,
html.ctheme-ivory .logo, html.ctheme-ivory .product-name, html.ctheme-ivory .summary-total, html.ctheme-ivory .footer-title {
  font-family: 'Cormorant Garamond','Noto Serif Thai',Georgia,serif !important; letter-spacing: 0.01em;
}
html.ctheme-ivory h1 { font-weight: 500; }
html.ctheme-ivory .logo-text { color: var(--color-primary); }
html.ctheme-ivory .navbar { background: rgba(251,248,243,0.94) !important; border-bottom: 1px solid #E5D9C5; }
html.ctheme-ivory .hero { background: linear-gradient(180deg,#FBF8F3 0%,#F0E9DB 100%) !important; padding: 96px 0 80px !important; text-align: center; }
html.ctheme-ivory .hero::before, html.ctheme-ivory .hero::after { display: none; }
html.ctheme-ivory .hero-grid { grid-template-columns: 1fr !important; max-width: 720px; margin: 0 auto; text-align: center; }
html.ctheme-ivory .hero-content { max-width: 100%; margin: 0 auto; }
html.ctheme-ivory .hero-visual { display: none !important; }
html.ctheme-ivory .hero-eyebrow { font-family:'Inter',sans-serif !important; font-size:0.7rem; letter-spacing:0.25em; text-transform:uppercase; background:transparent; border:1px solid var(--color-primary); color:var(--color-primary); box-shadow:none; padding:8px 18px; }
html.ctheme-ivory .hero h1 { font-size: clamp(2.5rem,6vw,4.5rem); font-style: italic; font-weight: 400; }
html.ctheme-ivory .hero h1 .underline::after { display: none; }
html.ctheme-ivory .hero h1 .wiggle { animation: none; }
html.ctheme-ivory .hero-lead { max-width: 480px; margin: 0 auto 32px; font-size: 1rem; }
html.ctheme-ivory .hero-ctas { justify-content: center; }
html.ctheme-ivory .hero-stats { justify-content: center; border-top: 1px solid var(--color-border); padding-top: 32px; }
html.ctheme-ivory .btn { border-radius: 4px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.78rem; padding: 14px 28px; }
html.ctheme-ivory .btn-primary { background: var(--color-ink); color: white; box-shadow: none; }
html.ctheme-ivory .btn-primary:hover { background: var(--color-primary); transform: none; }
html.ctheme-ivory .product-card { border-radius: 0; border: none; background: transparent; box-shadow: none; }
html.ctheme-ivory .product-card:hover { transform: none; box-shadow: none; }
html.ctheme-ivory .product-image { background: white; border: 1px solid var(--color-border); border-radius: 0; transition: border-color 0.3s; }
html.ctheme-ivory .product-card:hover .product-image { border-color: var(--color-primary); }
html.ctheme-ivory .product-info { padding: 20px 4px 8px; text-align: center; }
html.ctheme-ivory .product-brand { font-size: 0.65rem; letter-spacing: 0.2em; color: var(--color-muted); }
html.ctheme-ivory .product-name { font-style: italic; font-weight: 400; color: var(--color-ink); font-size: 1.05rem; }
html.ctheme-ivory .product-price { font-style: normal; font-weight: 500; color: var(--color-primary); font-family: 'Inter',sans-serif !important; letter-spacing: 0.04em; }
html.ctheme-ivory .feature-strip { background: transparent; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 32px 0; margin: 0 0 60px; }
html.ctheme-ivory .feature-item { background: transparent; border: none; box-shadow: none; padding: 16px; }
html.ctheme-ivory .feature-item:hover { transform: none; box-shadow: none; }
html.ctheme-ivory .feature-icon { font-size: 1.6rem; filter: grayscale(0.3); }
html.ctheme-ivory .animal-pill { border-radius: 4px; border: 1px solid var(--color-border); background: white; box-shadow: none; padding: 16px 24px; color: var(--color-ink); }
html.ctheme-ivory .animal-pill:hover { transform: none; border-color: var(--color-primary); box-shadow: none; }
html.ctheme-ivory .section-head h2 { font-style: italic; font-weight: 400; }
html.ctheme-ivory .footer { background: var(--color-ink) !important; }
html.ctheme-ivory .section-eyebrow { font-family:'Inter',sans-serif !important; letter-spacing:0.2em; background:transparent; border:1px solid var(--color-primary); color:var(--color-primary); }


/* THEME: MIDNIGHT COCOA */
html.ctheme-cocoa {
  --color-primary: #D98E3F;
  --color-primary-dark: #B8882E;
  --color-primary-light: #3D2810;
  --color-accent: #E8B583;
  --color-bg: #0A0604;
  --color-bg-alt: #1A0F08;
  --color-surface: #1A0F08;
  --color-ink: #F5EDE0;
  --color-ink-light: #C4A882;
  --color-muted: #7A6248;
  --color-border: #2C1A0E;
  --color-border-light: #1A0F08;
  --color-success: #84CC16;
  --color-danger: #DC2626;
  color-scheme: dark;
}
html.ctheme-cocoa body { background: #0A0604; color: #F5EDE0; }
html.ctheme-cocoa h1, html.ctheme-cocoa h2, html.ctheme-cocoa h3, html.ctheme-cocoa h4,
html.ctheme-cocoa .product-name, html.ctheme-cocoa .summary-total, html.ctheme-cocoa .logo {
  font-family: 'Bodoni Moda','Noto Serif Thai',Georgia,serif !important; color: #F5EDE0; letter-spacing: -0.01em;
}
html.ctheme-cocoa h1 { font-weight: 900; }
html.ctheme-cocoa .logo-text { color: var(--color-accent); }
html.ctheme-cocoa .navbar { background: rgba(10,6,4,0.92) !important; border-bottom: 1px solid var(--color-border); }
html.ctheme-cocoa .nav-links a { color: var(--color-ink-light); }
html.ctheme-cocoa .nav-links a:hover, html.ctheme-cocoa .nav-links a.active { color: var(--color-primary); }
html.ctheme-cocoa .lang-btn { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-ink); }
html.ctheme-cocoa .cart-btn { background: var(--color-primary); color: var(--color-bg); }
html.ctheme-cocoa .cart-btn:hover { background: var(--color-accent); }
html.ctheme-cocoa .cart-badge { background: var(--color-bg); color: var(--color-primary); }
html.ctheme-cocoa .mobile-toggle { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-ink); }
html.ctheme-cocoa .mobile-menu { background: var(--color-bg-alt); border-top-color: var(--color-border); }
html.ctheme-cocoa .mobile-menu a { background: var(--color-bg); border-color: var(--color-border); color: var(--color-ink); }
html.ctheme-cocoa .mobile-menu a:hover, html.ctheme-cocoa .mobile-menu a.active { color: var(--color-primary); border-color: var(--color-primary); }
html.ctheme-cocoa .user-avatar { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-ink); }
html.ctheme-cocoa .user-dropdown { background: var(--color-bg-alt); border-color: var(--color-border); }
html.ctheme-cocoa .user-info { background: var(--color-bg); }
html.ctheme-cocoa .user-dropdown a { color: var(--color-ink); }
html.ctheme-cocoa .user-dropdown a:hover { background: var(--color-bg); }
html.ctheme-cocoa .lang-dropdown { background: var(--color-bg-alt); border-color: var(--color-border); }
html.ctheme-cocoa .lang-dropdown a { color: var(--color-ink); }
html.ctheme-cocoa .lang-dropdown a:hover { background: var(--color-bg); }
html.ctheme-cocoa .hero { background: linear-gradient(135deg,#0A0604 0%,#1A0F08 50%,#2C1A0E 100%) !important; padding: 80px 0 100px !important; }
html.ctheme-cocoa .hero::before { background-image: radial-gradient(circle at 20% 30%,rgba(212,168,83,0.18) 0%,transparent 50%), radial-gradient(circle at 80% 70%,rgba(193,123,63,0.15) 0%,transparent 50%) !important; }
html.ctheme-cocoa .hero::after { opacity: 0.06 !important; }
html.ctheme-cocoa .hero-eyebrow { background: rgba(212,168,83,0.1) !important; border: 1px solid rgba(212,168,83,0.3); color: var(--color-accent); box-shadow: none; }
html.ctheme-cocoa .hero h1 { font-family: 'Bodoni Moda',Georgia,serif !important; font-weight: 900; font-size: clamp(2.5rem,6vw,4rem); color: #F5EDE0; }
html.ctheme-cocoa .hero h1 .underline::after { background: linear-gradient(90deg,var(--color-primary),var(--color-accent)) !important; opacity: 0.7; height: 12px; }
html.ctheme-cocoa .hero-lead { color: var(--color-ink-light); }
html.ctheme-cocoa .hero-stats { border-top: 1px solid var(--color-border); }
html.ctheme-cocoa .stat-num { color: var(--color-primary); }
html.ctheme-cocoa .stat-label { color: var(--color-muted); }
html.ctheme-cocoa .hero-card { background: var(--color-bg-alt) !important; border: 1px solid var(--color-border); box-shadow: 0 12px 48px rgba(0,0,0,0.5) !important; color: var(--color-ink); }
html.ctheme-cocoa .hero-card-1 { background: linear-gradient(145deg,#2C1A0E,#1A0F08) !important; }
html.ctheme-cocoa .hero-card-2 { background: linear-gradient(145deg,#1A2010,#0A0F04) !important; }
html.ctheme-cocoa .hero-card-3 { background: linear-gradient(145deg,#2C200C,#1A1408) !important; }
html.ctheme-cocoa .hero-card .title { color: var(--color-ink); }
html.ctheme-cocoa .hero-card .price { color: var(--color-primary); }
html.ctheme-cocoa .blob-1 { background: rgba(212,168,83,0.3); }
html.ctheme-cocoa .blob-2 { background: rgba(193,123,63,0.2); }
html.ctheme-cocoa .btn-primary { background: linear-gradient(135deg,var(--color-primary),var(--color-accent)); color: var(--color-bg); box-shadow: 0 4px 24px rgba(212,168,83,0.3); }
html.ctheme-cocoa .btn-primary:hover { background: linear-gradient(135deg,var(--color-accent),var(--color-primary)); box-shadow: 0 8px 32px rgba(212,168,83,0.4); }
html.ctheme-cocoa .btn-secondary { background: var(--color-bg-alt); color: var(--color-ink); }
html.ctheme-cocoa .btn-outline { border-color: var(--color-border); color: var(--color-ink-light); }
html.ctheme-cocoa .btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); }
html.ctheme-cocoa .feature-strip { margin: -30px 0 60px; }
html.ctheme-cocoa .feature-item { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-ink); }
html.ctheme-cocoa .feature-item:hover { border-color: var(--color-primary); box-shadow: 0 12px 48px rgba(212,168,83,0.15); }
html.ctheme-cocoa .feature-title { color: var(--color-ink); }
html.ctheme-cocoa .feature-sub { color: var(--color-muted); }
html.ctheme-cocoa .section-eyebrow { background: rgba(212,168,83,0.12); color: var(--color-primary); }
html.ctheme-cocoa .animal-pill { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-ink); }
html.ctheme-cocoa .animal-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
html.ctheme-cocoa .product-card { background: var(--color-bg-alt); border-color: var(--color-border); }
html.ctheme-cocoa .product-card:hover { border-color: var(--color-primary); box-shadow: 0 12px 48px rgba(212,168,83,0.2); }
html.ctheme-cocoa .product-image { background: var(--color-bg); }
html.ctheme-cocoa .product-name { color: var(--color-ink); }
html.ctheme-cocoa .product-brand { color: var(--color-primary); }
html.ctheme-cocoa .product-price { color: var(--color-primary); }
html.ctheme-cocoa .shop-header { background: linear-gradient(135deg,rgba(212,168,83,0.05),rgba(10,6,4,0.5)) !important; border-bottom-color: var(--color-border); }
html.ctheme-cocoa .animal-tab, html.ctheme-cocoa .maincat-pill, html.ctheme-cocoa .subcat-chip { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-ink); }
html.ctheme-cocoa .animal-tab:hover { border-color: var(--color-primary); }
html.ctheme-cocoa .animal-tab.active, html.ctheme-cocoa .maincat-pill.active, html.ctheme-cocoa .subcat-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-bg); }
html.ctheme-cocoa .maincat-pill:not(.active) .count { background: var(--color-bg); color: var(--color-muted); }
html.ctheme-cocoa .input, html.ctheme-cocoa input, html.ctheme-cocoa textarea, html.ctheme-cocoa select { background: var(--color-bg-alt) !important; border-color: var(--color-border) !important; color: var(--color-ink) !important; }
html.ctheme-cocoa input:focus, html.ctheme-cocoa textarea:focus, html.ctheme-cocoa select:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(212,168,83,0.15) !important; }
html.ctheme-cocoa input::placeholder { color: var(--color-muted); }
html.ctheme-cocoa .cart-item, html.ctheme-cocoa .cart-summary, html.ctheme-cocoa .checkout-section,
html.ctheme-cocoa .account-panel, html.ctheme-cocoa .account-sidebar, html.ctheme-cocoa .filter-card,
html.ctheme-cocoa .tracking, html.ctheme-cocoa .success-card, html.ctheme-cocoa .empty-state {
  background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-ink);
}
html.ctheme-cocoa .cart-item-image, html.ctheme-cocoa .ci-img { background: var(--color-bg); }
html.ctheme-cocoa .summary-total { color: var(--color-primary); }
html.ctheme-cocoa .pd-image { background: var(--color-bg-alt); border-color: var(--color-border); }
html.ctheme-cocoa .pd-brand { color: var(--color-primary); }
html.ctheme-cocoa .size-option { background: var(--color-bg-alt); border-color: var(--color-border); color: var(--color-ink); }
html.ctheme-cocoa .size-option.selected { border-color: var(--color-primary); background: rgba(212,168,83,0.1); }
html.ctheme-cocoa .size-option .price { color: var(--color-primary); }
html.ctheme-cocoa .qty-control { background: var(--color-bg-alt); border-color: var(--color-border); }
html.ctheme-cocoa .qty-control button { color: var(--color-ink); }
html.ctheme-cocoa .qty-control button:hover { background: var(--color-bg); }
html.ctheme-cocoa .qty-control input { background: transparent !important; color: var(--color-ink) !important; }
html.ctheme-cocoa .footer { background: linear-gradient(180deg,#000000,#0A0604) !important; }


/* ============================================================
   PASTEL PRO THEMES — Pantone-inspired, conversion-optimized
============================================================ */

/* ============================================================
   SAKURA BLOOM (ctheme-sakura)
   จาก palette #1: #FFB6B9 #FAE3D9 #BBDED6 #8AC6D1
   STRUCTURE: Floating organic shapes, soft pink dominant
============================================================ */
html.ctheme-sakura {
  --color-primary: #A8345B;
  --color-primary-dark: #7A2342;
  --color-primary-light: #FFE4EC;
  --color-accent: #FAE3D9;
  --color-accent-2: #BBDED6;
  --color-bg: #FFF5F7;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-ink: #4A1830;
  --color-ink-light: #7A3854;
  --color-muted: #9B6680;
  --color-border: #FFD4E0;
  --color-border-light: #FFE8EF;
  --radius-card: 28px;
}
html.ctheme-sakura body { background: linear-gradient(180deg,#FFF5F7 0%,#FFE8EF 100%); color: var(--color-ink); font-family:'Quicksand','Noto Sans Thai',sans-serif !important; }
html.ctheme-sakura h1, html.ctheme-sakura h2, html.ctheme-sakura h3, html.ctheme-sakura .logo,
html.ctheme-sakura .product-name, html.ctheme-sakura .summary-total {
  font-family:'Quicksand','Noto Sans Thai',sans-serif !important; font-weight: 700;
}
html.ctheme-sakura .logo-text { color: var(--color-primary); }
html.ctheme-sakura .navbar { background: rgba(255,245,247,0.92) !important; border-bottom: 1px solid var(--color-border); }
html.ctheme-sakura .hero { background: linear-gradient(135deg,#FFE4EC 0%,#FAE3D9 40%,#BBDED6 100%) !important; }
html.ctheme-sakura .hero::before { background-image: radial-gradient(circle at 20% 50%,rgba(255,182,185,0.4) 0%,transparent 55%),radial-gradient(circle at 75% 25%,rgba(186,222,214,0.4) 0%,transparent 50%) !important; }
html.ctheme-sakura .hero-eyebrow { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); border-radius: 999px; }
html.ctheme-sakura .hero h1 .underline::after { background: linear-gradient(90deg,#FFB6B9,#FAE3D9) !important; }
html.ctheme-sakura .hero-card { border-radius: 28px; }
html.ctheme-sakura .hero-card-1 { background: linear-gradient(145deg,#FFE4EC,#FFB6B9) !important; }
html.ctheme-sakura .hero-card-2 { background: linear-gradient(145deg,#FAE3D9,#FFD6CD) !important; }
html.ctheme-sakura .hero-card-3 { background: linear-gradient(145deg,#BBDED6,#8AC6D1) !important; }
html.ctheme-sakura .btn { border-radius: 999px; }
html.ctheme-sakura .btn-primary { background: linear-gradient(135deg,#E5638A 0%,#A8345B 100%); color: white; box-shadow: 0 8px 24px rgba(168,52,91,0.35); }
html.ctheme-sakura .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(168,52,91,0.5); }
html.ctheme-sakura .product-card { background: white; border-color: var(--color-border); border-radius: 28px; box-shadow: 0 2px 12px rgba(168,52,91,0.06); }
html.ctheme-sakura .product-card:hover { border-color: var(--color-primary); box-shadow: 0 20px 48px rgba(168,52,91,0.2); transform: translateY(-8px); }
html.ctheme-sakura .product-image { border-radius: 24px 24px 0 0; background: linear-gradient(135deg,#FFF5F7,#FFE4EC); }
html.ctheme-sakura .feature-item { background: white; border-color: var(--color-border); border-radius: 24px; }
html.ctheme-sakura .feature-item:hover { border-color: var(--color-primary); transform: translateY(-6px) rotate(-1deg); }
html.ctheme-sakura .animal-pill { background: white; border-color: var(--color-border); border-radius: 999px; }
html.ctheme-sakura .animal-pill:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-4px) scale(1.05); }
html.ctheme-sakura .section-eyebrow { background: rgba(168,52,91,0.1); color: var(--color-primary); border-radius: 999px; }
html.ctheme-sakura .footer { background: linear-gradient(180deg,#7A2342 0%,#4A1830 100%) !important; }


/* ============================================================
   MACARON MIX (ctheme-macaron)
   จาก palette #5: #F38181 #FCE38A #EAFFD0 #95E1D3
   STRUCTURE: หลากสีพาสเทล สดใส, coral CTA (conversion ดี)
============================================================ */
html.ctheme-macaron {
  --color-primary: #A8482F;
  --color-primary-dark: #7A2F1F;
  --color-primary-light: #FCE5C8;
  --color-accent: #95E1D3;
  --color-accent-2: #FCE38A;
  --color-bg: #FFFCF7;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-ink: #3D2418;
  --color-ink-light: #6B4530;
  --color-muted: #9C7F66;
  --color-border: #F5E2D0;
  --color-border-light: #FAEEDE;
  --radius-card: 24px;
}
html.ctheme-macaron body { background: #FFFCF7; color: var(--color-ink); font-family:'Outfit','Noto Sans Thai',sans-serif !important; }
html.ctheme-macaron h1, html.ctheme-macaron h2, html.ctheme-macaron h3, html.ctheme-macaron .logo,
html.ctheme-macaron .product-name, html.ctheme-macaron .summary-total {
  font-family:'Outfit','Noto Sans Thai',sans-serif !important; font-weight: 700;
}
html.ctheme-macaron .logo-text { color: #E07B5E; }
html.ctheme-macaron .navbar { background: rgba(255,252,247,0.92) !important; border-bottom: 1px solid var(--color-border); }
html.ctheme-macaron .hero { background: linear-gradient(135deg,#FCE38A 0%,#F8C8A6 40%,#95E1D3 100%) !important; }
html.ctheme-macaron .hero::before { background-image: radial-gradient(circle at 25% 40%,rgba(243,129,129,0.3) 0%,transparent 55%),radial-gradient(circle at 80% 70%,rgba(149,225,211,0.4) 0%,transparent 50%) !important; }
html.ctheme-macaron .hero-eyebrow { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); }
html.ctheme-macaron .hero h1 .underline::after { background: linear-gradient(90deg,#F38181,#FCE38A) !important; height: 14px; }
html.ctheme-macaron .hero-card-1 { background: linear-gradient(145deg,#FCE38A,#F8D78A) !important; }
html.ctheme-macaron .hero-card-2 { background: linear-gradient(145deg,#EAFFD0,#95E1D3) !important; }
html.ctheme-macaron .hero-card-3 { background: linear-gradient(145deg,#FFE4D1,#F38181) !important; }
html.ctheme-macaron .btn-primary { background: linear-gradient(135deg,#E07B5E,#C25A3F); color: white; box-shadow: 0 8px 22px rgba(224,123,94,0.4); }
html.ctheme-macaron .btn-primary:hover { box-shadow: 0 12px 30px rgba(224,123,94,0.55); transform: translateY(-2px); }
html.ctheme-macaron .product-card { background: white; border-color: var(--color-border); }
html.ctheme-macaron .product-card:hover { border-color: var(--color-primary); box-shadow: 0 18px 44px rgba(224,123,94,0.18); }
html.ctheme-macaron .product-image { background: linear-gradient(135deg,#FFFCF7,#FCE38A33); }
html.ctheme-macaron .feature-item { background: white; border-color: var(--color-border); }
html.ctheme-macaron .animal-pill { background: white; border-color: var(--color-border); }
html.ctheme-macaron .animal-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
html.ctheme-macaron .section-eyebrow { background: rgba(224,123,94,0.1); color: #C25A3F; }
html.ctheme-macaron .footer { background: linear-gradient(180deg,#7A2F1F 0%,#3D2418 100%) !important; }


/* ============================================================
   SEASIDE CALM (ctheme-seaside)
   จาก palette #7: #4ABBF3 #61BFBE #BADDD6 #FFB5BA + ฟ้าพาสเทล
   STRUCTURE: น้ำเงินสบายตา ดู trustworthy
============================================================ */
html.ctheme-seaside {
  --color-primary: #1E7A99;
  --color-primary-dark: #155A75;
  --color-primary-light: #CCEDF7;
  --color-accent: #FFB5BA;
  --color-accent-2: #B6E3E9;
  --color-bg: #F2FAFD;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-ink: #0C3E50;
  --color-ink-light: #1F5F7A;
  --color-muted: #5A8BA0;
  --color-border: #C8E8F2;
  --color-border-light: #E0F2F7;
  --radius-card: 18px;
}
html.ctheme-seaside body { background: #F2FAFD; color: var(--color-ink); font-family:'Outfit','Noto Sans Thai',sans-serif !important; }
html.ctheme-seaside h1, html.ctheme-seaside h2, html.ctheme-seaside h3, html.ctheme-seaside .logo,
html.ctheme-seaside .product-name, html.ctheme-seaside .summary-total {
  font-family:'Outfit','Noto Sans Thai',sans-serif !important; font-weight: 700;
}
html.ctheme-seaside .logo-text { color: var(--color-primary); }
html.ctheme-seaside .navbar { background: rgba(242,250,253,0.92) !important; border-bottom: 1px solid var(--color-border); }
html.ctheme-seaside .hero { background: linear-gradient(135deg,#D9F1F7 0%,#B6E3E9 40%,#4ABBF3 100%) !important; }
html.ctheme-seaside .hero::before { background-image: radial-gradient(circle at 25% 40%,rgba(74,187,243,0.3) 0%,transparent 55%),radial-gradient(circle at 80% 70%,rgba(255,181,186,0.35) 0%,transparent 50%) !important; }
html.ctheme-seaside .hero-eyebrow { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); }
html.ctheme-seaside .hero h1 .underline::after { background: linear-gradient(90deg,#4ABBF3,#FFB5BA) !important; }
html.ctheme-seaside .hero-card-1 { background: linear-gradient(145deg,#CCEDF7,#B6E3E9) !important; }
html.ctheme-seaside .hero-card-2 { background: linear-gradient(145deg,#FFE0E0,#FFB5BA) !important; }
html.ctheme-seaside .hero-card-3 { background: linear-gradient(145deg,#E0F2F7,#4ABBF3) !important; }
/* CTA = warm coral (research: ขัดสีฟ้า = conversion สูงสุด) */
html.ctheme-seaside .btn-primary { background: linear-gradient(135deg,#FF7A85,#E5556B); color: white; box-shadow: 0 8px 24px rgba(229,85,107,0.4); }
html.ctheme-seaside .btn-primary:hover { box-shadow: 0 12px 32px rgba(229,85,107,0.55); transform: translateY(-2px); }
html.ctheme-seaside .product-card { background: white; border-color: var(--color-border); }
html.ctheme-seaside .product-card:hover { border-color: var(--color-primary); box-shadow: 0 18px 40px rgba(30,122,153,0.15); }
html.ctheme-seaside .product-image { background: linear-gradient(135deg,#F2FAFD,#CCEDF7); }
html.ctheme-seaside .product-price { color: #C44A5C; }
html.ctheme-seaside .feature-item { background: white; border-color: var(--color-border); }
html.ctheme-seaside .animal-pill { background: white; border-color: var(--color-border); }
html.ctheme-seaside .animal-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
html.ctheme-seaside .section-eyebrow { background: rgba(30,122,153,0.1); color: var(--color-primary); }
html.ctheme-seaside .footer { background: linear-gradient(180deg,#155A75 0%,#0C3E50 100%) !important; }


/* ============================================================
   SHERBET SUNSET (ctheme-sherbet)
   จาก palette ส้ม: #FBD4AD #F8D7C1 #EDAB94 #FFAE92
   STRUCTURE: ส้มอบอุ่น = best conversion color (Amazon proven)
============================================================ */
html.ctheme-sherbet {
  --color-primary: #B84A2A;
  --color-primary-dark: #8C3719;
  --color-primary-light: #FFE0CC;
  --color-accent: #FFB088;
  --color-accent-2: #FBD4AD;
  --color-bg: #FFF7F0;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-ink: #3D1A0A;
  --color-ink-light: #6B3018;
  --color-muted: #A06850;
  --color-border: #FFD6BA;
  --color-border-light: #FFE5D2;
  --radius-card: 20px;
}
html.ctheme-sherbet body { background: linear-gradient(180deg,#FFF7F0 0%,#FFEEDD 100%); color: var(--color-ink); font-family:'Outfit','Noto Sans Thai',sans-serif !important; }
html.ctheme-sherbet h1, html.ctheme-sherbet h2, html.ctheme-sherbet h3, html.ctheme-sherbet .logo,
html.ctheme-sherbet .product-name, html.ctheme-sherbet .summary-total {
  font-family:'Outfit','Noto Sans Thai',sans-serif !important; font-weight: 800;
}
html.ctheme-sherbet .logo-text { color: var(--color-primary); }
html.ctheme-sherbet .navbar { background: rgba(255,247,240,0.92) !important; border-bottom: 1px solid var(--color-border); }
html.ctheme-sherbet .hero { background: linear-gradient(135deg,#FBD4AD 0%,#F8D7C1 40%,#FFAE92 100%) !important; }
html.ctheme-sherbet .hero::before { background-image: radial-gradient(circle at 25% 40%,rgba(255,174,146,0.35) 0%,transparent 55%),radial-gradient(circle at 80% 70%,rgba(251,212,173,0.45) 0%,transparent 50%) !important; }
html.ctheme-sherbet .hero-eyebrow { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); }
html.ctheme-sherbet .hero h1 .underline::after { background: linear-gradient(90deg,#FFB088,#FBD4AD) !important; }
html.ctheme-sherbet .hero-card-1 { background: linear-gradient(145deg,#FBD4AD,#F8D7C1) !important; }
html.ctheme-sherbet .hero-card-2 { background: linear-gradient(145deg,#FFE0CC,#FFB088) !important; }
html.ctheme-sherbet .hero-card-3 { background: linear-gradient(145deg,#FFCFB6,#EDAB94) !important; }
html.ctheme-sherbet .btn-primary { background: linear-gradient(135deg,#D9603D,#B84A2A); color: white; box-shadow: 0 8px 24px rgba(217,96,61,0.4); font-weight: 700; }
html.ctheme-sherbet .btn-primary:hover { box-shadow: 0 14px 32px rgba(217,96,61,0.55); transform: translateY(-3px); }
html.ctheme-sherbet .product-card { background: white; border-color: var(--color-border); }
html.ctheme-sherbet .product-card:hover { border-color: var(--color-primary); box-shadow: 0 18px 44px rgba(184,74,42,0.18); transform: translateY(-6px); }
html.ctheme-sherbet .product-image { background: linear-gradient(135deg,#FFF7F0,#FFE0CC); }
html.ctheme-sherbet .feature-item { background: white; border-color: var(--color-border); }
html.ctheme-sherbet .animal-pill { background: white; border-color: var(--color-border); }
html.ctheme-sherbet .animal-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
html.ctheme-sherbet .section-eyebrow { background: rgba(184,74,42,0.1); color: var(--color-primary); }
html.ctheme-sherbet .footer { background: linear-gradient(180deg,#8C3719 0%,#3D1A0A 100%) !important; }


/* ============================================================
   LILAC MIST (ctheme-lilac)
   จาก palette ม่วง: #E7D2EF #EFE5EE #C4B3C3 #C6A5C7 #E2D0DC #D9B0CD #DFA5D6 #E5A8DE
   STRUCTURE: ม่วงพาสเทลละมุน - premium luxury feel
============================================================ */
html.ctheme-lilac {
  --color-primary: #7A4292;
  --color-primary-dark: #5B2E70;
  --color-primary-light: #EFE0F5;
  --color-accent: #F5B8E0;
  --color-accent-2: #E7D2EF;
  --color-bg: #FAF5FB;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-ink: #2E0F3D;
  --color-ink-light: #5A2070;
  --color-muted: #8A6FA0;
  --color-border: #E8D4F0;
  --color-border-light: #F3E8F7;
  --radius-card: 22px;
}
html.ctheme-lilac body { background: linear-gradient(180deg,#FAF5FB 0%,#F5EBF7 100%); color: var(--color-ink); font-family:'Playfair Display','Noto Serif Thai',serif !important; }
html.ctheme-lilac h1, html.ctheme-lilac h2, html.ctheme-lilac h3, html.ctheme-lilac .logo,
html.ctheme-lilac .product-name, html.ctheme-lilac .summary-total {
  font-family:'Playfair Display','Noto Serif Thai',serif !important; font-weight: 700;
}
html.ctheme-lilac .logo-text { color: var(--color-primary); }
html.ctheme-lilac .navbar { background: rgba(250,245,251,0.92) !important; border-bottom: 1px solid var(--color-border); }
html.ctheme-lilac .hero { background: linear-gradient(135deg,#F3E8F7 0%,#E7D2EF 40%,#DFA5D6 100%) !important; }
html.ctheme-lilac .hero::before { background-image: radial-gradient(circle at 30% 50%,rgba(223,165,214,0.4) 0%,transparent 55%),radial-gradient(circle at 70% 25%,rgba(231,210,239,0.6) 0%,transparent 50%) !important; }
html.ctheme-lilac .hero-eyebrow { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); }
html.ctheme-lilac .hero h1 { font-style: italic; }
html.ctheme-lilac .hero h1 .underline::after { background: linear-gradient(90deg,#DFA5D6,#E7D2EF) !important; }
html.ctheme-lilac .hero-card-1 { background: linear-gradient(145deg,#F3E8F7,#E7D2EF) !important; }
html.ctheme-lilac .hero-card-2 { background: linear-gradient(145deg,#FDF4FF,#F5B8E0) !important; }
html.ctheme-lilac .hero-card-3 { background: linear-gradient(145deg,#EFE0F5,#D9B0CD) !important; }
html.ctheme-lilac .btn-primary { background: linear-gradient(135deg,#9B5DB8,#7A4292); color: white; box-shadow: 0 8px 22px rgba(122,66,146,0.35); }
html.ctheme-lilac .btn-primary:hover { box-shadow: 0 12px 32px rgba(122,66,146,0.5); transform: translateY(-2px); }
html.ctheme-lilac .product-card { background: white; border-color: var(--color-border); }
html.ctheme-lilac .product-card:hover { border-color: var(--color-primary); box-shadow: 0 18px 44px rgba(122,66,146,0.18); }
html.ctheme-lilac .product-image { background: linear-gradient(135deg,#FAF5FB,#EFE0F5); }
html.ctheme-lilac .feature-item { background: white; border-color: var(--color-border); }
html.ctheme-lilac .animal-pill { background: white; border-color: var(--color-border); }
html.ctheme-lilac .animal-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
html.ctheme-lilac .section-head h2 { font-style: italic; }
html.ctheme-lilac .section-eyebrow { background: rgba(122,66,146,0.1); color: var(--color-primary); }
html.ctheme-lilac .footer { background: linear-gradient(180deg,#5B2E70 0%,#2E0F3D 100%) !important; }


/* ============================================================
   SAGE GARDEN (ctheme-sage)
   Pet shop premium trend 2026: เซจกรีน + cream
   STRUCTURE: ดูธรรมชาติ มีเมตตา เหมาะร้าน pet โดยเฉพาะ
============================================================ */
html.ctheme-sage {
  --color-primary: #3F6A40;
  --color-primary-dark: #2D4E2E;
  --color-primary-light: #D8E8D5;
  --color-accent: #F4C4A0;
  --color-accent-2: #BED7D1;
  --color-bg: #F5F8F3;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-ink: #1A2E1B;
  --color-ink-light: #2F4F30;
  --color-muted: #6A8068;
  --color-border: #D0DCC8;
  --color-border-light: #E5EDDD;
  --radius-card: 16px;
}
html.ctheme-sage body { background: #F5F8F3; color: var(--color-ink); font-family:'Outfit','Noto Sans Thai',sans-serif !important; }
html.ctheme-sage h1, html.ctheme-sage h2, html.ctheme-sage h3, html.ctheme-sage .logo,
html.ctheme-sage .product-name, html.ctheme-sage .summary-total {
  font-family:'Outfit','Noto Sans Thai',sans-serif !important; font-weight: 700;
}
html.ctheme-sage .logo-text { color: var(--color-primary); }
html.ctheme-sage .navbar { background: rgba(245,248,243,0.92) !important; border-bottom: 1px solid var(--color-border); }
html.ctheme-sage .hero { background: linear-gradient(135deg,#E8EFDD 0%,#D8E8D5 40%,#BED7D1 100%) !important; }
html.ctheme-sage .hero::before { background-image: radial-gradient(circle at 25% 40%,rgba(91,140,90,0.2) 0%,transparent 55%),radial-gradient(circle at 80% 70%,rgba(244,196,160,0.3) 0%,transparent 50%) !important; }
html.ctheme-sage .hero-eyebrow { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); }
html.ctheme-sage .hero h1 .underline::after { background: linear-gradient(90deg,#5B8C5A,#D8E8D5) !important; }
html.ctheme-sage .hero-card-1 { background: linear-gradient(145deg,#D8E8D5,#BED7D1) !important; }
html.ctheme-sage .hero-card-2 { background: linear-gradient(145deg,#F5E8DA,#F4C4A0) !important; }
html.ctheme-sage .hero-card-3 { background: linear-gradient(145deg,#E5EDDD,#D8E8D5) !important; }
/* CTA = ส้ม peach contrast กับเขียว = conversion สูง */
html.ctheme-sage .btn-primary { background: linear-gradient(135deg,#E89766,#D9603D); color: white; box-shadow: 0 8px 24px rgba(217,96,61,0.4); font-weight: 700; }
html.ctheme-sage .btn-primary:hover { box-shadow: 0 14px 32px rgba(217,96,61,0.55); transform: translateY(-3px); }
html.ctheme-sage .product-card { background: white; border-color: var(--color-border); }
html.ctheme-sage .product-card:hover { border-color: var(--color-primary); box-shadow: 0 18px 40px rgba(63,106,64,0.18); }
html.ctheme-sage .product-image { background: linear-gradient(135deg,#F5F8F3,#D8E8D5); }
html.ctheme-sage .product-price { color: #B84A2A; }
html.ctheme-sage .feature-item { background: white; border-color: var(--color-border); }
html.ctheme-sage .animal-pill { background: white; border-color: var(--color-border); }
html.ctheme-sage .animal-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
html.ctheme-sage .section-eyebrow { background: rgba(63,106,64,0.1); color: var(--color-primary); }
html.ctheme-sage .footer { background: linear-gradient(180deg,#2D4E2E 0%,#1A2E1B 100%) !important; }


/* ============================================================
   BUTTER CREAM (ctheme-butter)
   เหลืองพาสเทล: #F9FBBA + cream
   STRUCTURE: นุ่มนวลอบอุ่น เหมาะร้านสำหรับเด็ก
============================================================ */
html.ctheme-butter {
  --color-primary: #7A540B;
  --color-primary-dark: #553905;
  --color-primary-light: #FCF0BB;
  --color-accent: #FFE599;
  --color-accent-2: #F9FBBA;
  --color-bg: #FFFCEC;
  --color-bg-alt: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-ink: #3D2E08;
  --color-ink-light: #6A4E10;
  --color-muted: #998A60;
  --color-border: #F5E8B5;
  --color-border-light: #FAF1C8;
  --radius-card: 20px;
}
html.ctheme-butter body { background: #FFFCEC; color: var(--color-ink); font-family:'Quicksand','Noto Sans Thai',sans-serif !important; }
html.ctheme-butter h1, html.ctheme-butter h2, html.ctheme-butter h3, html.ctheme-butter .logo,
html.ctheme-butter .product-name, html.ctheme-butter .summary-total {
  font-family:'Quicksand','Noto Sans Thai',sans-serif !important; font-weight: 700;
}
html.ctheme-butter .logo-text { color: var(--color-primary); }
html.ctheme-butter .navbar { background: rgba(255,252,236,0.92) !important; border-bottom: 1px solid var(--color-border); }
html.ctheme-butter .hero { background: linear-gradient(135deg,#FFF8D6 0%,#FCF0BB 40%,#F9FBBA 100%) !important; }
html.ctheme-butter .hero::before { background-image: radial-gradient(circle at 25% 40%,rgba(255,229,153,0.4) 0%,transparent 55%),radial-gradient(circle at 80% 70%,rgba(249,251,186,0.5) 0%,transparent 50%) !important; }
html.ctheme-butter .hero-eyebrow { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); }
html.ctheme-butter .hero h1 .underline::after { background: linear-gradient(90deg,#FFE599,#FCF0BB) !important; }
html.ctheme-butter .hero-card-1 { background: linear-gradient(145deg,#FCF0BB,#F9FBBA) !important; }
html.ctheme-butter .hero-card-2 { background: linear-gradient(145deg,#FFF8D6,#FFE599) !important; }
html.ctheme-butter .hero-card-3 { background: linear-gradient(145deg,#FAEEDE,#F5DCB3) !important; }
/* CTA = ส้มเข้ม contrast กับเหลือง */
html.ctheme-butter .btn-primary { background: linear-gradient(135deg,#D9603D,#B84A2A); color: white; box-shadow: 0 8px 24px rgba(184,74,42,0.4); }
html.ctheme-butter .btn-primary:hover { box-shadow: 0 14px 32px rgba(184,74,42,0.55); transform: translateY(-3px); }
html.ctheme-butter .product-card { background: white; border-color: var(--color-border); }
html.ctheme-butter .product-card:hover { border-color: var(--color-primary); box-shadow: 0 18px 40px rgba(122,84,11,0.18); }
html.ctheme-butter .product-image { background: linear-gradient(135deg,#FFFCEC,#FCF0BB); }
html.ctheme-butter .product-price { color: #B84A2A; }
html.ctheme-butter .feature-item { background: white; border-color: var(--color-border); }
html.ctheme-butter .animal-pill { background: white; border-color: var(--color-border); }
html.ctheme-butter .animal-pill:hover { border-color: var(--color-primary); color: var(--color-primary); }
html.ctheme-butter .section-eyebrow { background: rgba(122,84,11,0.1); color: var(--color-primary); }
html.ctheme-butter .footer { background: linear-gradient(180deg,#553905 0%,#3D2E08 100%) !important; }


/* ============================================================
   GLOBAL CONVERSION-OPTIMIZED ENHANCEMENTS (ทุกธีม pastel)
   - SALE badge สีแดงสด (urgency)
   - Trust badges
   - Price emphasis
   - CTA hover micro-interactions
============================================================ */

/* SALE/Hot badge - urgency color */
.product-card-badge { background: linear-gradient(135deg,#E5556B,#C44A5C) !important; color: white !important; }
.product-card .badge-sale { background: linear-gradient(135deg,#FF4757,#E5556B) !important; color: white !important; }

/* Better hover lift for all pastel themes */
html.ctheme-sakura .product-card,
html.ctheme-macaron .product-card,
html.ctheme-seaside .product-card,
html.ctheme-sherbet .product-card,
html.ctheme-lilac .product-card,
html.ctheme-sage .product-card,
html.ctheme-butter .product-card {
  transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
}

/* Pastel price emphasis */
html.ctheme-sakura .product-price,
html.ctheme-macaron .product-price,
html.ctheme-lilac .product-price,
html.ctheme-sherbet .product-price {
  font-weight: 800;
  font-size: 1.2rem;
}

/* Readability enforcement */
html[class*="ctheme-"] .product-card { color: var(--color-ink); }
html[class*="ctheme-"] .feature-item .feature-title { color: var(--color-ink); }
html[class*="ctheme-"] .feature-item .feature-sub { color: var(--color-muted); }
html[class*="ctheme-"] .empty-state h3 { color: var(--color-ink); }
html[class*="ctheme-"] .empty-state p { color: var(--color-muted); }
html[class*="ctheme-"] .btn-primary { color: white; }
html.ctheme-cocoa .btn-primary { color: var(--color-bg); }