/**
 * Preview Gallery — 20 unique template styles.
 * Each template has a structurally distinct layout, not just color swaps.
 * ALL text elements have black text-stroke per spec.
 * No image overlays, no aspect-ratio locks, no repeated imagery.
 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* =========================================================
   GLOBAL: TEXT-STROKE ON EVERY CHARACTER
   ========================================================= */
/* Every single text character gets black outline for readability on any background */
.preview-wrap,
.preview-wrap * {
  -webkit-text-stroke: 0.8px rgba(0,0,0,0.7);
  paint-order: stroke fill;
}
/* Inputs and placeholders skip the stroke — they're on controlled backgrounds */
.preview-wrap .p-input,
.preview-wrap .p-input::placeholder,
.preview-wrap textarea {
  -webkit-text-stroke: none;
  paint-order: normal;
}

/* =========================================================
   BASE PREVIEW CONTAINER
   ========================================================= */
.preview-wrap {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: system-ui, -apple-system, sans-serif;
  scroll-behavior: smooth;
}
.preview-wrap * { box-sizing: border-box; }

/* =========================================================
   SHARED BASE ELEMENTS (all templates)
   ========================================================= */
.p-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.p-nav-logo { font-weight: 800; letter-spacing: 1px; }
.p-nav-links { display: flex; gap: 16px; align-items: center; }
.p-nav-links a { text-decoration: none; font-weight: 600; font-size: 0.78rem; }
.p-nav-cta { border: none; padding: 7px 14px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; cursor: pointer; }

.p-hero { padding: 36px 24px 28px; text-align: center; }
.p-badge {
  display: inline-block; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 1.5px; text-transform: uppercase; padding: 3px 10px; border-radius: 12px; margin-bottom: 12px;
}
.p-hero h1 { font-weight: 800; margin: 0 0 8px; line-height: 1.2; }
.p-hero p { font-size: 0.82rem; margin: 0 0 18px; }
.p-cta-btn { display: inline-block; border: none; padding: 10px 22px; border-radius: 6px; font-size: 0.82rem; font-weight: 700; cursor: pointer; }

.p-stats {
  display: grid;
  gap: 6px;
  padding: 14px 24px;
}
.p-stat-item { text-align: center; }
.p-stat-n { font-size: 1rem; font-weight: 800; }
.p-stat-l { font-size: 0.58rem; font-weight: 600; margin-top: 2px; }

.p-section-label {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; padding: 14px 24px 8px;
}
.p-cards { display: grid; gap: 8px; padding: 0 24px 14px; }
.p-card { border-radius: 10px; padding: 12px; text-align: center; }
.p-card-icon { font-size: 1.4rem; margin-bottom: 6px; }
.p-card-title { font-size: 0.72rem; font-weight: 700; margin-bottom: 4px; }
.p-card-sub { font-size: 0.6rem; }

.p-tabs { display: flex; padding: 12px 24px; gap: 6px; }
.p-tab {
  padding: 5px 12px; border-radius: 4px; font-size: 0.7rem; font-weight: 700;
  cursor: pointer; border: 1px solid; background: transparent; transition: all 0.2s;
}
.p-tab.active { font-weight: 800; }

.p-form-section { margin: 10px 24px; border-radius: 10px; padding: 14px; }
.p-form-title { font-size: 0.78rem; font-weight: 800; margin-bottom: 8px; }
.p-form { display: flex; flex-direction: column; gap: 6px; }
.p-input { padding: 7px 10px; border-radius: 6px; font-size: 0.72rem; outline: none; border: 1.5px solid; }
.p-input:focus { border-width: 2px; }
.p-submit { border: none; padding: 9px; border-radius: 6px; font-size: 0.78rem; font-weight: 700; cursor: pointer; }

/* =========================================================
   TEMPLATE 1: RESTAURANT
   Layout: Split hero — text left, image right. Tabbed menu below. Stats at top.
   Color: Warm cream + terracotta + sage green
   ========================================================= */
.tmpl-restaurant { background: #FEF9F5; color: #2D1810; }
.tmpl-restaurant .p-stats {
  grid-template-columns: repeat(4, 1fr);
  background: #C45001;
  border-top: 3px solid #8B3510;
}
.tmpl-restaurant .p-stat-n { color: #FFF3EC; font-family: 'Playfair Display', serif; font-size: 1.1rem; }
.tmpl-restaurant .p-stat-l { color: rgba(255,243,236,0.7); }

/* Split hero layout */
.tmpl-restaurant .p-hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 200px;
  background: linear-gradient(90deg, #FFF3EC 0%, #FFF9F5 100%);
}
.tmpl-restaurant .p-hero-left { padding: 28px 24px; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.tmpl-restaurant .p-hero-right {
  background: url('https://pub-629428d185ca4960a0a73c850d32294b.r2.dev/generated-images/company_188497/c1644183-b08b-49ff-93b8-ea2020499d66.jpg') center/cover no-repeat;
  min-height: 200px;
}
.tmpl-restaurant .p-hero h1 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #2D1810; }
.tmpl-restaurant .p-hero h1 .p-accent { color: #C45001; }
.tmpl-restaurant .p-hero p { color: #8B6550; }
.tmpl-restaurant .p-hero .p-badge { background: #FFF3EC; color: #C45001; border: 1px solid #F0D5C3; }
.tmpl-restaurant .p-cta-btn { background: #C45001; color: white; border-radius: 25px; }
.tmpl-restaurant .p-nav { background: white; border-bottom: 2px solid #E8DDD5; padding: 14px 24px; }
.tmpl-restaurant .p-nav-logo { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700; color: #C45001; }
.tmpl-restaurant .p-nav-links a { color: #6B3D2E; }
.tmpl-restaurant .p-nav-links a:hover { color: #C45001; }
.tmpl-restaurant .p-nav-cta { background: #C45001; color: white; }
.tmpl-restaurant .p-section-label { color: #C45001; }
.tmpl-restaurant .p-cards { grid-template-columns: repeat(2, 1fr); }
.tmpl-restaurant .p-card { background: white; border: 1px solid #F0DDD4; border-radius: 12px; }
.tmpl-restaurant .p-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(196,80,1,0.12); }
.tmpl-restaurant .p-card-icon { font-size: 1.6rem; }
.tmpl-restaurant .p-card-title { font-family: 'Playfair Display', serif; font-size: 0.78rem; font-weight: 700; color: #2D1810; }
.tmpl-restaurant .p-card-sub { font-size: 0.65rem; color: #8B6550; }
.tmpl-restaurant .p-tabs { padding: 12px 24px; gap: 6px; border-bottom: 1px solid #F0E8E3; }
.tmpl-restaurant .p-tab { border: 1px solid #E8DDD5; background: white; color: #8B6550; border-radius: 16px; }
.tmpl-restaurant .p-tab.active { background: #C45001; color: white; border-color: #C45001; }
.tmpl-restaurant .p-menu-list { padding: 12px 24px; }
.tmpl-restaurant .p-svc-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed #E8DDD5; font-size: 0.75rem; }
.tmpl-restaurant .p-svc-row:last-child { border-bottom: none; }
.tmpl-restaurant .p-svc-name { color: #2D1810; font-weight: 500; }
.tmpl-restaurant .p-svc-price { color: #C45001; font-weight: 700; }
.tmpl-restaurant .p-form-section { background: #FFF0E8; border: 1px solid #F0D5C3; }
.tmpl-restaurant .p-form-title { font-family: 'Playfair Display', serif; color: #2D1810; }
.tmpl-restaurant .p-input { border-color: #E8DDD5; background: white; color: #2D1810; }
.tmpl-restaurant .p-input:focus { border-color: #C45001; }
.tmpl-restaurant .p-submit { background: #C45001; color: white; }

/* =========================================================
   TEMPLATE 2: MEDICAL
   Layout: Full-width emergency banner, then wide hero banner with
   services in 4-column grid, appointment form below.
   Color: Clean white + teal/sage
   ========================================================= */
.tmpl-medical { background: #F5FAFB; color: #1A3A3A; }
.tmpl-medical .p-emergency-bar { background: #D42B2B; color: white; font-size: 0.7rem; font-weight: 700; padding: 8px 24px; text-align: center; }
.tmpl-medical .p-nav { background: white; border-bottom: 3px solid #00A896; padding: 12px 24px; }
.tmpl-medical .p-nav-logo { font-size: 1rem; font-weight: 800; color: #00A896; }
.tmpl-medical .p-nav-links a { color: #4A6B6B; }
.tmpl-medical .p-nav-links a:hover { color: #00A896; }
.tmpl-medical .p-nav-cta { background: #00A896; color: white; }
.tmpl-medical .p-stats { grid-template-columns: repeat(4, 1fr); background: white; border-bottom: 1px solid #E0F0EE; }
.tmpl-medical .p-stat-n { color: #00A896; font-size: 1.1rem; font-weight: 800; }
.tmpl-medical .p-stat-l { color: #4A6B6B; }
.tmpl-medical .p-hero { background: linear-gradient(135deg, #E8F8F5 0%, #F5FAFB 100%); padding: 36px 24px 28px; text-align: left; display: flex; align-items: center; gap: 40px; }
.tmpl-medical .p-hero-left { flex: 1; }
.tmpl-medical .p-hero-right {
  width: 220px; flex-shrink: 0;
  background: url('https://pub-629428d185ca4960a0a73c850d32294b.r2.dev/generated-images/company_188497/b543d0d4-853c-4842-8f86-d53cad358dd7.jpg') center/cover no-repeat;
  border-radius: 12px; min-height: 160px;
}
.tmpl-medical .p-hero h1 { font-size: 1.4rem; color: #1A3A3A; }
.tmpl-medical .p-hero h1 .p-accent { color: #00A896; }
.tmpl-medical .p-hero p { color: #4A6B6B; }
.tmpl-medical .p-badge { background: #E8F8F5; color: #00A896; border: 1px solid #B0E8E0; border-radius: 10px; }
.tmpl-medical .p-cta-btn { background: #00A896; color: white; border-radius: 6px; }
.tmpl-medical .p-section-label { color: #00A896; }
.tmpl-medical .p-cards { grid-template-columns: repeat(4, 1fr); padding: 0 24px 14px; }
.tmpl-medical .p-card { background: white; border: 1px solid #D8EEEB; border-left: 3px solid #00A896; border-radius: 10px; }
.tmpl-medical .p-card-icon { font-size: 1.4rem; }
.tmpl-medical .p-card-title { font-size: 0.75rem; font-weight: 700; color: #1A3A3A; }
.tmpl-medical .p-card-sub { font-size: 0.62rem; color: #5A7A7A; line-height: 1.4; }
.tmpl-medical .p-tabs { padding: 12px 24px; gap: 6px; border-bottom: 1px solid #E0F0EE; }
.tmpl-medical .p-tab { border: 1px solid #D8EEEB; background: white; color: #4A6B6B; border-radius: 6px; }
.tmpl-medical .p-tab.active { background: #00A896; color: white; border-color: #00A896; }
.tmpl-medical .p-form-section { background: white; border: 1px solid #D8EEEB; }
.tmpl-medical .p-form-title { color: #1A3A3A; }
.tmpl-medical .p-input { border-color: #C8E0DD; color: #1A3A3A; background: white; }
.tmpl-medical .p-input:focus { border-color: #00A896; }
.tmpl-medical .p-submit { background: #00A896; color: white; }

/* =========================================================
   TEMPLATE 3: LEGAL
   Layout: Dark, dramatic. Sticky "free consult" CTA bar, then
   full-width hero, practice areas in 3-col grid, results list.
   Color: Dark charcoal (#1A1A1A) + gold/brass (#C9A84C)
   ========================================================= */
.tmpl-legal { background: #1A1A1A; color: #F5F0E8; }
.tmpl-legal .p-sticky-cta { background: #C9A84C; color: #1A1A1A; font-size: 0.7rem; font-weight: 800; padding: 8px 24px; text-align: center; cursor: pointer; }
.tmpl-legal .p-nav { background: #141414; border-bottom: 1px solid #3A3020; padding: 14px 24px; }
.tmpl-legal .p-nav-logo { font-size: 0.95rem; font-weight: 800; color: #C9A84C; letter-spacing: 2px; text-transform: uppercase; }
.tmpl-legal .p-nav-links a { color: #A09080; }
.tmpl-legal .p-nav-links a:hover { color: #C9A84C; }
.tmpl-legal .p-nav-cta { background: transparent; color: #C9A84C; border: 1.5px solid #C9A84C; border-radius: 4px; }
.tmpl-legal .p-hero { background: linear-gradient(180deg, #222 0%, #1A1A1A 100%); border-bottom: 1px solid #3A3020; padding: 36px 24px 28px; text-align: center; }
.tmpl-legal .p-hero h1 { font-size: 1.45rem; font-weight: 800; color: #F5F0E8; letter-spacing: -0.5px; }
.tmpl-legal .p-hero h1 .p-accent { color: #C9A84C; }
.tmpl-legal .p-hero p { color: #908060; }
.tmpl-legal .p-badge { background: rgba(201,168,76,0.15); color: #C9A84C; border: 1px solid rgba(201,168,76,0.4); border-radius: 4px; }
.tmpl-legal .p-cta-btn { background: #C9A84C; color: #1A1A1A; border-radius: 4px; }
.tmpl-legal .p-stats { grid-template-columns: repeat(4, 1fr); background: #141414; border-bottom: 1px solid #3A3020; }
.tmpl-legal .p-stat-n { color: #C9A84C; font-size: 1rem; font-weight: 800; }
.tmpl-legal .p-stat-l { color: #706050; font-size: 0.58rem; font-weight: 500; margin-top: 2px; letter-spacing: 0.5px; }
.tmpl-legal .p-section-label { color: #C9A84C; }
.tmpl-legal .p-cards { grid-template-columns: repeat(2, 1fr); padding: 0 24px 14px; }
.tmpl-legal .p-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(201,168,76,0.2); border-radius: 8px; }
.tmpl-legal .p-card-icon { font-size: 1.4rem; }
.tmpl-legal .p-card-title { font-size: 0.72rem; font-weight: 700; color: #F5F0E8; }
.tmpl-legal .p-card-sub { font-size: 0.6rem; color: #706050; }
.tmpl-legal .p-tabs { padding: 12px 24px; gap: 6px; border-bottom: 1px solid #2A2A2A; }
.tmpl-legal .p-tab { border: 1px solid #333; background: transparent; color: #706050; border-radius: 4px; }
.tmpl-legal .p-tab.active { background: #C9A84C; color: #1A1A1A; border-color: #C9A84C; }
.tmpl-legal .p-form-section { background: rgba(201,168,76,0.08); }
.tmpl-legal .p-form-title { color: #C9A84C; }
.tmpl-legal .p-input { border: 1px solid rgba(201,168,76,0.3); background: rgba(255,255,255,0.05); color: #F5F0E8; }
.tmpl-legal .p-input::placeholder { color: #605040; }
.tmpl-legal .p-input:focus { border-color: #C9A84C; }
.tmpl-legal .p-submit { background: #C9A84C; color: #1A1A1A; }

/* =========================================================
   TEMPLATE 4: CONTRACTOR
   Layout: Dark hero with prominent CTA, services in horizontal
   strip (1-col wide cards), before/after comparison bar.
   Color: Light gray bg + dark asphalt (#1A1A1A) + bold orange (#FF6B00)
   ========================================================= */
.tmpl-contractor { background: #F4F4F4; color: #1A1A1A; }
.tmpl-contractor .p-emergency-bar { background: #D42B2B; color: white; font-size: 0.68rem; font-weight: 800; padding: 7px 24px; text-align: center; }
.tmpl-contractor .p-nav { background: #1A1A1A; padding: 14px 24px; }
.tmpl-contractor .p-nav-logo { font-size: 1rem; font-weight: 900; color: #FF6B00; letter-spacing: 1px; }
.tmpl-contractor .p-nav-links a { color: #CCC; }
.tmpl-contractor .p-nav-links a:hover { color: #FF6B00; }
.tmpl-contractor .p-nav-cta { background: #FF6B00; color: white; border-radius: 4px; }
.tmpl-contractor .p-hero { background: #1A1A1A; padding: 36px 24px 28px; text-align: center; }
.tmpl-contractor .p-hero h1 { font-size: 1.4rem; font-weight: 900; color: white; letter-spacing: -0.5px; }
.tmpl-contractor .p-hero h1 .p-accent { color: #FF6B00; }
.tmpl-contractor .p-hero p { color: #AAA; }
.tmpl-contractor .p-badge { background: rgba(255,107,0,0.2); color: #FF6B00; border: 1px solid rgba(255,107,0,0.4); border-radius: 4px; }
.tmpl-contractor .p-cta-btn { background: #FF6B00; color: white; border-radius: 4px; }
.tmpl-contractor .p-stats { grid-template-columns: repeat(4, 1fr); background: #2A2A2A; border-bottom: 1px solid #3A3A3A; }
.tmpl-contractor .p-stat-n { color: #FF6B00; font-size: 1rem; font-weight: 900; }
.tmpl-contractor .p-stat-l { color: #888; font-size: 0.58rem; font-weight: 600; }
.tmpl-contractor .p-section-label { color: #FF6B00; }
/* Contractor: horizontal strip — wide single column cards */
.tmpl-contractor .p-cards { grid-template-columns: 1fr; padding: 0 24px 12px; }
.tmpl-contractor .p-card { background: white; border-radius: 8px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; gap: 14px; align-items: center; text-align: left; }
.tmpl-contractor .p-card:hover { box-shadow: 0 4px 16px rgba(255,107,0,0.2); }
.tmpl-contractor .p-card-icon { font-size: 1.8rem; flex-shrink: 0; }
.tmpl-contractor .p-card-title { font-size: 0.78rem; font-weight: 800; color: #1A1A1A; margin-bottom: 2px; }
.tmpl-contractor .p-card-sub { font-size: 0.65rem; color: #666; }
.tmpl-contractor .p-beforeafter {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 24px 4px;
}
.tmpl-contractor .p-ba-before,
.tmpl-contractor .p-ba-after {
  background: #2A2A2A; color: white; padding: 8px 10px;
  border-radius: 6px; font-size: 0.65rem; font-weight: 600; text-align: center;
}
.tmpl-contractor .p-ba-after { background: #1A5A1A; }
.tmpl-contractor .p-area-badge { background: white; border: 1px solid #E0E0E0; padding: 6px 10px; border-radius: 6px; font-size: 0.65rem; font-weight: 700; color: #1A1A1A; text-align: center; }
.tmpl-contractor .p-form-section { background: white; border-radius: 8px; padding: 14px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.tmpl-contractor .p-form-title { color: #1A1A1A; }
.tmpl-contractor .p-input { border: 2px solid #E0E0E0; color: #1A1A1A; }
.tmpl-contractor .p-input:focus { border-color: #FF6B00; }
.tmpl-contractor .p-submit { background: #FF6B00; color: white; }

/* =========================================================
   TEMPLATE 5: FITNESS
   Layout: Dark aggressive, full-width schedule table,
   membership tiers in 3-col row, prominent CTA.
   Color: Near-black (#050505) + neon green (#00FF87)
   ========================================================= */
.tmpl-fitness { background: #050505; color: #FFFFFF; }
.tmpl-fitness .p-nav { background: #0A0A0A; border-bottom: 1px solid #1A1A1A; padding: 12px 24px; }
.tmpl-fitness .p-nav-logo { font-size: 1rem; font-weight: 900; color: #00FF87; letter-spacing: 2px; text-transform: uppercase; }
.tmpl-fitness .p-nav-links a { color: #666; text-transform: uppercase; letter-spacing: 1px; }
.tmpl-fitness .p-nav-links a:hover { color: #00FF87; }
.tmpl-fitness .p-nav-cta { background: #00FF87; color: #050505; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; }
.tmpl-fitness .p-hero { background: linear-gradient(180deg, #0D0D0D 0%, #050505 100%); padding: 32px 24px 24px; text-align: center; }
.tmpl-fitness .p-hero h1 { font-size: 1.35rem; font-weight: 900; color: white; text-transform: uppercase; letter-spacing: -0.5px; }
.tmpl-fitness .p-hero h1 .p-accent { color: #00FF87; }
.tmpl-fitness .p-hero p { color: #555; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.tmpl-fitness .p-badge { background: rgba(0,255,135,0.1); color: #00FF87; border: 1px solid rgba(0,255,135,0.3); border-radius: 3px; }
.tmpl-fitness .p-cta-btn { background: #00FF87; color: #050505; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; }
.tmpl-fitness .p-stats { grid-template-columns: repeat(4, 1fr); background: #0A0A0A; border-bottom: 1px solid #1A1A1A; }
.tmpl-fitness .p-stat-n { color: #00FF87; font-size: 1rem; font-weight: 900; }
.tmpl-fitness .p-stat-l { color: #444; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.tmpl-fitness .p-section-label { color: #00FF87; padding: 12px 24px 6px; text-transform: uppercase; letter-spacing: 2px; font-weight: 900; }
.tmpl-fitness .p-schedule { padding: 0 24px 12px; }
.tmpl-fitness .p-sched-row {
  display: grid;
  grid-template-columns: 60px 1fr 70px 60px;
  gap: 6px; padding: 8px 0; border-bottom: 1px solid #1A1A1A;
  font-size: 0.68rem; align-items: center;
}
.tmpl-fitness .p-sched-time { color: #00FF87; font-weight: 800; }
.tmpl-fitness .p-sched-cls { color: white; font-weight: 700; }
.tmpl-fitness .p-sched-trainer { color: #555; font-size: 0.6rem; }
.tmpl-fitness .p-sched-spots { color: #FF6B00; font-weight: 700; font-size: 0.6rem; }
.tmpl-fitness .p-pricing-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 24px 12px; }
.tmpl-fitness .p-price-tier { background: transparent; border: 1px solid #333; border-radius: 4px; padding: 10px 8px; text-align: center; }
.tmpl-fitness .p-price-badge { background: #333; color: #888; font-size: 0.6rem; font-weight: 800; padding: 2px 6px; border-radius: 3px; display: inline-block; margin-bottom: 4px; }
.tmpl-fitness .p-price-name { font-size: 0.8rem; font-weight: 800; color: white; margin-bottom: 2px; }
.tmpl-fitness .p-price-val { font-size: 1.2rem; font-weight: 900; color: white; margin-bottom: 2px; }
.tmpl-fitness .p-price-sub { font-size: 0.58rem; color: #444; margin-bottom: 6px; }
.tmpl-fitness .p-price-btn { background: transparent; color: #555; border: 1px solid #333; padding: 5px 8px; border-radius: 3px; font-size: 0.6rem; font-weight: 700; cursor: pointer; }
.tmpl-fitness .p-price-btn-active { background: #00FF87; color: #050505; border-color: #00FF87; }
.tmpl-fitness .p-form-section { background: rgba(0,255,135,0.05); border: 1px solid rgba(0,255,135,0.2); border-radius: 4px; }
.tmpl-fitness .p-form-title { color: #00FF87; text-transform: uppercase; letter-spacing: 1px; }
.tmpl-fitness .p-input { border: 1px solid #1A1A1A; background: #0A0A0A; color: #00FF87; font-weight: 700; border-radius: 3px; }
.tmpl-fitness .p-input::placeholder { color: #333; }
.tmpl-fitness .p-input:focus { border-color: #00FF87; }
.tmpl-fitness .p-submit { background: #00FF87; color: #050505; text-transform: uppercase; letter-spacing: 1px; }

/* =========================================================
   TEMPLATE 6: NONPROFIT
   Layout: Warm cream bg, sticky donate button, stats strip,
   tabbed programs in 4-col grid, donation form.
   Color: Cream (#FDFAF5) + rich green (#4A7C2F)
   ========================================================= */
.tmpl-nonprofit { background: #FDFAF5; color: #2C4A1E; }
.tmpl-nonprofit .p-nav { background: white; border-bottom: 2px solid #4A7C2F; padding: 12px 24px; }
.tmpl-nonprofit .p-nav-logo { font-size: 0.95rem; font-weight: 800; color: #4A7C2F; }
.tmpl-nonprofit .p-nav-links a { color: #5A6A4A; }
.tmpl-nonprofit .p-nav-links a:hover { color: #4A7C2F; }
.tmpl-nonprofit .p-nav-cta { background: #4A7C2F; color: white; border-radius: 18px; }
.tmpl-nonprofit .p-donate-sticky { position: fixed; bottom: 20px; right: 20px; background: #D42A2A; color: white; border: none; padding: 10px 16px; border-radius: 22px; font-size: 0.78rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 20px rgba(212,42,42,0.4); z-index: 100; }
.tmpl-nonprofit .p-hero { background: linear-gradient(180deg, #EFF5E8 0%, #FDFAF5 100%); padding: 36px 24px 28px; text-align: center; }
.tmpl-nonprofit .p-hero h1 { font-size: 1.35rem; font-weight: 800; color: #2C4A1E; line-height: 1.3; }
.tmpl-nonprofit .p-hero h1 .p-accent { color: #4A7C2F; }
.tmpl-nonprofit .p-hero p { color: #5A6A4A; }
.tmpl-nonprofit .p-badge { background: #EFF5E8; color: #4A7C2F; border: 1px solid #C0D8B0; border-radius: 12px; }
.tmpl-nonprofit .p-cta-btn { background: #4A7C2F; color: white; border-radius: 22px; }
.tmpl-nonprofit .p-stats { grid-template-columns: repeat(4, 1fr); background: white; border-bottom: 1px solid #E0EAD0; }
.tmpl-nonprofit .p-stat-n { color: #4A7C2F; font-size: 1rem; font-weight: 800; }
.tmpl-nonprofit .p-stat-l { color: #6A7A5A; font-size: 0.58rem; font-weight: 600; }
.tmpl-nonprofit .p-section-label { color: #4A7C2F; }
.tmpl-nonprofit .p-cards { grid-template-columns: repeat(4, 1fr); padding: 0 24px 12px; }
.tmpl-nonprofit .p-card { background: white; border: 1px solid #D8EAC8; border-radius: 10px; }
.tmpl-nonprofit .p-card-icon { font-size: 1.4rem; }
.tmpl-nonprofit .p-card-title { font-size: 0.72rem; font-weight: 700; color: #2C4A1E; }
.tmpl-nonprofit .p-card-sub { font-size: 0.6rem; color: #6A7A5A; }
.tmpl-nonprofit .p-tabs { padding: 12px 24px; gap: 6px; border-bottom: 1px solid #E0EAD0; }
.tmpl-nonprofit .p-tab { border: 1px solid #D8EAC8; background: white; color: #5A6A4A; border-radius: 12px; }
.tmpl-nonprofit .p-tab.active { background: #4A7C2F; color: white; border-color: #4A7C2F; }
.tmpl-nonprofit .p-form-section { background: #EFF5E8; border: 1px solid #C0D8B0; border-radius: 12px; }
.tmpl-nonprofit .p-form-title { color: #2C4A1E; }
.tmpl-nonprofit .p-input { border: 1.5px solid #C0D8B0; border-radius: 8px; background: white; color: #2C4A1E; }
.tmpl-nonprofit .p-input:focus { border-color: #4A7C2F; }
.tmpl-nonprofit .p-submit { background: #4A7C2F; color: white; border-radius: 8px; }

/* =========================================================
   TEMPLATE 7: WEDDING
   Layout: Centered elegant, countdown timer prominent between
   hero and stats, packages in horizontal 3-col row.
   Color: Blush (#FFF8F9) + rose gold (#C490A0)
   ========================================================= */
.tmpl-wedding { background: #FFF8F9; color: #5A2A40; }
.tmpl-wedding .p-nav { background: white; border-bottom: 1px solid #F0D5E0; padding: 12px 24px; }
.tmpl-wedding .p-nav-logo { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: #C490A0; letter-spacing: 1px; }
.tmpl-wedding .p-nav-links a { color: #9A7080; }
.tmpl-wedding .p-nav-links a:hover { color: #C490A0; }
.tmpl-wedding .p-nav-cta { background: #C490A0; color: white; border-radius: 18px; }
.tmpl-wedding .p-hero { background: linear-gradient(180deg, #FFF0F3 0%, #FFF8F9 100%); padding: 36px 24px 28px; text-align: center; }
.tmpl-wedding .p-hero h1 { font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700; color: #5A2A40; font-style: italic; }
.tmpl-wedding .p-hero h1 .p-accent { color: #C490A0; }
.tmpl-wedding .p-hero p { color: #9A7080; }
.tmpl-wedding .p-badge { background: #FFF0F3; color: #C490A0; border: 1px solid #E8C0D0; border-radius: 12px; }
.tmpl-wedding .p-cta-btn { background: #C490A0; color: white; border-radius: 20px; }
.tmpl-wedding .p-countdown { text-align: center; padding: 12px 24px; background: #FFF0F3; border-top: 1px solid #F0D5E0; border-bottom: 1px solid #F0D5E0; font-size: 0.65rem; color: #C490A0; font-weight: 600; letter-spacing: 1px; }
.tmpl-wedding .p-countdown span { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: #5A2A40; margin: 0 4px; }
.tmpl-wedding .p-stats { grid-template-columns: repeat(4, 1fr); background: white; border-bottom: 1px solid #F0D5E0; }
.tmpl-wedding .p-stat-n { color: #C490A0; font-size: 1rem; font-weight: 800; }
.tmpl-wedding .p-stat-l { color: #9A7080; font-size: 0.58rem; font-weight: 600; }
.tmpl-wedding .p-section-label { color: #C490A0; }
/* Wedding: packages in horizontal row */
.tmpl-wedding .p-cards { grid-template-columns: repeat(3, 1fr); padding: 0 24px 12px; }
.tmpl-wedding .p-card { background: white; border: 1px solid #F0D5E0; border-radius: 10px; }
.tmpl-wedding .p-card-icon { font-size: 1.4rem; }
.tmpl-wedding .p-card-title { font-family: 'Playfair Display', serif; font-size: 0.72rem; font-weight: 700; color: #5A2A40; }
.tmpl-wedding .p-card-sub { font-size: 0.6rem; color: #9A7080; }
.tmpl-wedding .p-form-section { background: #FFF0F3; border: 1px solid #F0D5E0; border-radius: 10px; }
.tmpl-wedding .p-form-title { font-family: 'Playfair Display', serif; color: #5A2A40; }
.tmpl-wedding .p-input { border: 1.5px solid #E8C0D0; border-radius: 8px; background: white; color: #5A2A40; }
.tmpl-wedding .p-input:focus { border-color: #C490A0; }
.tmpl-wedding .p-submit { background: #C490A0; color: white; border-radius: 8px; }

/* =========================================================
   TEMPLATE 8: E-COMMERCE
   Layout: Clean white, product grid (no aspect lock on images),
   category filter tabs, newsletter signup at bottom.
   Color: White + red (#D42B2B) accent
   ========================================================= */
.tmpl-ecommerce { background: #FFFFFF; color: #111111; }
.tmpl-ecommerce .p-nav { background: #111; padding: 12px 24px; }
.tmpl-ecommerce .p-nav-logo { font-size: 1rem; font-weight: 900; color: #D42B2B; letter-spacing: 1px; }
.tmpl-ecommerce .p-nav-links a { color: #888; }
.tmpl-ecommerce .p-nav-links a:hover { color: white; }
.tmpl-ecommerce .p-nav-cta { background: #D42B2B; color: white; border-radius: 4px; }
.tmpl-ecommerce .p-hero { background: linear-gradient(180deg, #FFF0F0 0%, #FFFFFF 100%); padding: 36px 24px 28px; text-align: center; }
.tmpl-ecommerce .p-hero h1 { font-size: 1.4rem; font-weight: 900; color: #111; }
.tmpl-ecommerce .p-hero h1 .p-accent { color: #D42B2B; }
.tmpl-ecommerce .p-hero p { color: #666; }
.tmpl-ecommerce .p-badge { background: #FFF0F0; color: #D42B2B; border: 1px solid #FFB3B3; border-radius: 4px; }
.tmpl-ecommerce .p-cta-btn { background: #D42B2B; color: white; border-radius: 4px; }
.tmpl-ecommerce .p-stats { grid-template-columns: repeat(4, 1fr); background: #FAFAFA; border-bottom: 1px solid #EEE; }
.tmpl-ecommerce .p-stat-n { color: #D42B2B; font-size: 1rem; font-weight: 900; }
.tmpl-ecommerce .p-stat-l { color: #888; font-size: 0.58rem; font-weight: 600; }
.tmpl-ecommerce .p-section-label { color: #111; }
/* E-commerce: product grid — no aspect ratio lock, images show natural size */
.tmpl-ecommerce .p-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px; padding: 0 24px 14px;
}
.tmpl-ecommerce .p-product { background: white; border: 1px solid #EEE; border-radius: 8px; padding: 10px; text-align: center; }
.tmpl-ecommerce .p-product:hover { border-color: #D42B2B; box-shadow: 0 4px 16px rgba(212,43,43,0.1); }
.tmpl-ecommerce .p-product-img {
  /* NO aspect-ratio lock — let natural image sizes show */
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; background: #FAFAFA; border-radius: 4px;
  min-height: 80px; margin-bottom: 8px;
}
.tmpl-ecommerce .p-product-name { font-size: 0.75rem; font-weight: 700; color: #111; margin-bottom: 4px; }
.tmpl-ecommerce .p-product-price { font-size: 0.85rem; font-weight: 800; color: #D42B2B; margin-bottom: 6px; }
.tmpl-ecommerce .p-add-btn { background: #111; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; cursor: pointer; width: 100%; }
.tmpl-ecommerce .p-add-btn:hover { background: #D42B2B; }
.tmpl-ecommerce .p-tabs { padding: 10px 24px; gap: 6px; }
.tmpl-ecommerce .p-tab { padding: 5px 12px; border: 1px solid #EEE; background: white; color: #666; border-radius: 4px; font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.tmpl-ecommerce .p-tab.active { background: #111; color: white; border-color: #111; }
.tmpl-ecommerce .p-newsletter { background: #F5F5F5; margin: 10px 24px; border-radius: 8px; padding: 14px; display: flex; gap: 8px; align-items: center; }
.tmpl-ecommerce .p-newsletter-title { font-size: 0.78rem; font-weight: 800; color: #111; margin-bottom: 4px; }
.tmpl-ecommerce .p-form-section { background: #F5F5F5; margin: 10px 24px; border-radius: 8px; padding: 14px; }
.tmpl-ecommerce .p-form-title { color: #111; font-size: 0.78rem; font-weight: 800; margin-bottom: 8px; }
.tmpl-ecommerce .p-form { display: flex; gap: 8px; }
.tmpl-ecommerce .p-input { border: 2px solid #111; border-radius: 0; color: #111; flex: 1; }
.tmpl-ecommerce .p-input:focus { border-color: #D42B2B; }
.tmpl-ecommerce .p-submit { background: #111; color: white; border: none; padding: 9px 16px; border-radius: 0; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }

/* =========================================================
   TEMPLATE 9: PORTFOLIO
   Layout: Asymmetric hero — big headline left, stats/image right,
   3-col project grid, contact form.
   Color: White + black + orange (#FF6B00) accent
   ========================================================= */
.tmpl-portfolio { background: #FFFFFF; color: #111; }
.tmpl-portfolio .p-nav { background: #111; padding: 12px 24px; }
.tmpl-portfolio .p-nav-logo { font-size: 1rem; font-weight: 900; color: #FF6B00; letter-spacing: 1px; }
.tmpl-portfolio .p-nav-links a { color: #888; }
.tmpl-portfolio .p-nav-links a:hover { color: white; }
.tmpl-portfolio .p-nav-cta { background: #FF6B00; color: white; border-radius: 4px; }
.tmpl-portfolio .p-hero { background: #F5F5F5; padding: 32px 24px 28px; text-align: left; display: flex; align-items: center; gap: 40px; }
.tmpl-portfolio .p-hero-left { flex: 1; }
.tmpl-portfolio .p-hero-right {
  width: 200px; flex-shrink: 0;
  background: url('https://pub-629428d185ca4960a0a73c850d32294b.r2.dev/generated-images/company_188497/e96b35ab-947e-4eed-89c7-462213ac4182.jpg') center/cover no-repeat;
  border-radius: 12px; min-height: 160px;
}
.tmpl-portfolio .p-hero h1 { font-size: 1.4rem; font-weight: 900; color: #111; }
.tmpl-portfolio .p-hero h1 .p-accent { color: #FF6B00; }
.tmpl-portfolio .p-hero p { color: #666; }
.tmpl-portfolio .p-badge { background: #FFF3EC; color: #FF6B00; border: 1px solid #FFD0B0; border-radius: 4px; }
.tmpl-portfolio .p-cta-btn { background: #FF6B00; color: white; border-radius: 4px; }
.tmpl-portfolio .p-stats { grid-template-columns: repeat(4, 1fr); background: #111; }
.tmpl-portfolio .p-stat-n { color: #FF6B00; font-size: 1rem; font-weight: 900; }
.tmpl-portfolio .p-stat-l { color: #555; font-size: 0.58rem; font-weight: 600; }
.tmpl-portfolio .p-section-label { color: #111; padding: 12px 24px 8px; font-weight: 900; letter-spacing: 2px; }
/* Portfolio: masonry-style project grid */
.tmpl-portfolio .p-cards { grid-template-columns: repeat(3, 1fr); padding: 0 24px 12px; }
.tmpl-portfolio .p-card { background: white; border: 1px solid #EEE; border-radius: 4px; padding: 8px; text-align: center; }
.tmpl-portfolio .p-card-img { width: 100%; min-height: 80px; background: #F5F5F5; border-radius: 4px; margin-bottom: 6px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.tmpl-portfolio .p-card-title { font-size: 0.72rem; font-weight: 700; color: #111; }
.tmpl-portfolio .p-card-sub { font-size: 0.6rem; color: #888; }
.tmpl-portfolio .p-tabs { padding: 10px 24px; gap: 6px; }
.tmpl-portfolio .p-tab { padding: 5px 12px; border: 1px solid #EEE; background: white; color: #111; border-radius: 4px; font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.tmpl-portfolio .p-tab.active { background: #FF6B00; color: white; border-color: #FF6B00; }
.tmpl-portfolio .p-form-section { background: #F5F5F5; border-radius: 8px; padding: 14px; }
.tmpl-portfolio .p-form-title { color: #111; }
.tmpl-portfolio .p-input { border: 2px solid #E0E0E0; color: #111; border-radius: 4px; }
.tmpl-portfolio .p-input:focus { border-color: #FF6B00; }
.tmpl-portfolio .p-submit { background: #FF6B00; color: white; border-radius: 4px; }

/* =========================================================
   TEMPLATE 10: REAL ESTATE
   Layout: Property listings with large image cards, search bar,
   mortgage calculator form.
   Color: Warm stone (#F4F0E8) + navy (#1A3050)
   ========================================================= */
.tmpl-realestate { background: #F4F0E8; color: #1A3050; }
.tmpl-realestate .p-nav { background: white; border-bottom: 2px solid #1A3050; padding: 12px 24px; }
.tmpl-realestate .p-nav-logo { font-size: 1rem; font-weight: 800; color: #1A3050; }
.tmpl-realestate .p-nav-links a { color: #4A6080; }
.tmpl-realestate .p-nav-links a:hover { color: #1A3050; }
.tmpl-realestate .p-nav-cta { background: #1A3050; color: white; border-radius: 4px; }
.tmpl-realestate .p-hero { background: linear-gradient(135deg, #E8EDF5 0%, #F4F0E8 100%); padding: 36px 24px 28px; text-align: center; }
.tmpl-realestate .p-hero h1 { font-size: 1.4rem; font-weight: 800; color: #1A3050; }
.tmpl-realestate .p-hero h1 .p-accent { color: #2A6080; }
.tmpl-realestate .p-hero p { color: #4A6080; }
.tmpl-realestate .p-badge { background: #E8EDF5; color: #1A3050; border: 1px solid #B0C0D8; border-radius: 4px; }
.tmpl-realestate .p-cta-btn { background: #1A3050; color: white; border-radius: 4px; }
.tmpl-realestate .p-stats { grid-template-columns: repeat(4, 1fr); background: white; border-bottom: 1px solid #D0D8E0; }
.tmpl-realestate .p-stat-n { color: #1A3050; font-size: 1rem; font-weight: 800; }
.tmpl-realestate .p-stat-l { color: #4A6080; font-size: 0.58rem; font-weight: 600; }
.tmpl-realestate .p-section-label { color: #1A3050; }
/* Real Estate: listing cards with large image sections */
.tmpl-realestate .p-listings { padding: 0 24px 12px; display: flex; flex-direction: column; gap: 10px; }
.tmpl-realestate .p-listing {
  background: white; border: 1px solid #D0D8E0; border-radius: 10px;
  padding: 12px; display: flex; gap: 14px; align-items: center; text-align: left;
}
.tmpl-realestate .p-listing:hover { border-color: #1A3050; box-shadow: 0 4px 16px rgba(26,48,80,0.12); }
.tmpl-realestate .p-listing-img {
  width: 120px; flex-shrink: 0; min-height: 80px;
  background: url('https://pub-629428d185ca4960a0a73c850d32294b.r2.dev/generated-images/company_188497/4e71b1bb-ee3f-4297-8d73-31140ef71cf4.jpg') center/cover no-repeat;
  border-radius: 8px;
}
.tmpl-realestate .p-listing-body { flex: 1; }
.tmpl-realestate .p-listing-price { font-size: 1rem; font-weight: 900; color: #1A3050; margin-bottom: 4px; }
.tmpl-realestate .p-listing-addr { font-size: 0.75rem; font-weight: 700; color: #1A3050; margin-bottom: 2px; }
.tmpl-realestate .p-listing-meta { font-size: 0.62rem; color: #4A6080; margin-bottom: 8px; }
.tmpl-realestate .p-listing-btn { background: #1A3050; color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; cursor: pointer; }
.tmpl-realestate .p-form-section { background: white; border: 1px solid #D0D8E0; border-radius: 10px; }
.tmpl-realestate .p-form-title { color: #1A3050; }
.tmpl-realestate .p-input { border: 1.5px solid #D0D8E0; color: #1A3050; border-radius: 6px; }
.tmpl-realestate .p-input:focus { border-color: #1A3050; }
.tmpl-realestate .p-submit { background: #1A3050; color: white; border-radius: 6px; }

/* =========================================================
   TEMPLATE 11: HOTEL
   Layout: Image-forward, room showcase with horizontal scroll feel,
   check-in form prominent.
   Color: Deep blue (#0A1A2E) + sand/gold (#D4A94A)
   ========================================================= */
.tmpl-hotel { background: #0A1A2E; color: #F0EBD8; }
.tmpl-hotel .p-nav { background: rgba(10,26,46,0.95); border-bottom: 1px solid #1A3A5A; padding: 12px 24px; }
.tmpl-hotel .p-nav-logo { font-size: 1rem; font-weight: 700; color: #D4A94A; letter-spacing: 1px; }
.tmpl-hotel .p-nav-links a { color: #8090A8; }
.tmpl-hotel .p-nav-links a:hover { color: #D4A94A; }
.tmpl-hotel .p-nav-cta { background: #D4A94A; color: #0A1A2E; border-radius: 4px; }
.tmpl-hotel .p-hero { background: linear-gradient(180deg, #0A1A2E 0%, #0F2040 100%); padding: 36px 24px 28px; text-align: center; }
.tmpl-hotel .p-hero h1 { font-size: 1.35rem; font-weight: 800; color: #F0EBD8; }
.tmpl-hotel .p-hero h1 .p-accent { color: #D4A94A; }
.tmpl-hotel .p-hero p { color: #8090A8; }
.tmpl-hotel .p-badge { background: rgba(212,169,74,0.15); color: #D4A94A; border: 1px solid rgba(212,169,74,0.4); border-radius: 4px; }
.tmpl-hotel .p-cta-btn { background: #D4A94A; color: #0A1A2E; border-radius: 4px; }
.tmpl-hotel .p-stats { grid-template-columns: repeat(4, 1fr); background: rgba(15,32,64,0.8); border-bottom: 1px solid #1A3A5A; }
.tmpl-hotel .p-stat-n { color: #D4A94A; font-size: 1rem; font-weight: 800; }
.tmpl-hotel .p-stat-l { color: #8090A8; font-size: 0.58rem; font-weight: 500; }
.tmpl-hotel .p-section-label { color: #D4A94A; }
/* Hotel: listings with room image blocks — no aspect ratio lock */
.tmpl-hotel .p-listings { padding: 0 24px 12px; display: flex; flex-direction: column; gap: 10px; }
.tmpl-hotel .p-listing { background: rgba(255,255,255,0.05); border: 1px solid rgba(212,169,74,0.2); border-radius: 10px; padding: 12px; display: flex; gap: 14px; align-items: center; }
.tmpl-hotel .p-listing-img {
  width: 140px; flex-shrink: 0; min-height: 90px;
  background: url('https://pub-629428d185ca4960a0a73c850d32294b.r2.dev/generated-images/company_188497/c1644183-b08b-49ff-93b8-ea2020499d66.jpg') center/cover no-repeat;
  border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.tmpl-hotel .p-listing-body { flex: 1; }
.tmpl-hotel .p-listing-price { font-size: 0.9rem; font-weight: 800; color: #D4A94A; margin-bottom: 4px; }
.tmpl-hotel .p-listing-addr { font-size: 0.75rem; font-weight: 700; color: #F0EBD8; margin-bottom: 2px; }
.tmpl-hotel .p-listing-meta { font-size: 0.62rem; color: #8090A8; margin-bottom: 8px; }
.tmpl-hotel .p-listing-btn { background: #D4A94A; color: #0A1A2E; border: none; padding: 6px 12px; border-radius: 4px; font-size: 0.65rem; font-weight: 700; cursor: pointer; }
.tmpl-hotel .p-tabs { padding: 10px 24px; gap: 6px; border-bottom: 1px solid rgba(212,169,74,0.2); }
.tmpl-hotel .p-tab { border: 1px solid rgba(212,169,74,0.3); background: transparent; color: #8090A8; border-radius: 4px; font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.tmpl-hotel .p-tab.active { background: #D4A94A; color: #0A1A2E; border-color: #D4A94A; }
.tmpl-hotel .p-form-section { background: rgba(212,169,74,0.08); border: 1px solid rgba(212,169,74,0.2); border-radius: 10px; }
.tmpl-hotel .p-form-title { color: #D4A94A; }
.tmpl-hotel .p-input { border: 1px solid rgba(212,169,74,0.3); background: rgba(255,255,255,0.05); color: #F0EBD8; border-radius: 4px; }
.tmpl-hotel .p-input:focus { border-color: #D4A94A; }
.tmpl-hotel .p-submit { background: #D4A94A; color: #0A1A2E; border-radius: 4px; }

/* =========================================================
   TEMPLATE 12: AUTOMOTIVE / MARINE
   Layout: Dark dramatic, inventory grid, featured listings,
   financing calculator in sidebar-style form.
   Color: Dark asphalt (#0A0A0A) + bold red (#E8180C)
   ========================================================= */
.tmpl-automotive { background: #0A0A0A; color: #FFFFFF; }
.tmpl-automotive .p-nav { background: #141414; border-bottom: 1px solid #2A2A2A; padding: 12px 24px; }
.tmpl-automotive .p-nav-logo { font-size: 1rem; font-weight: 900; color: #E8180C; letter-spacing: 1px; }
.tmpl-automotive .p-nav-links a { color: #666; }
.tmpl-automotive .p-nav-links a:hover { color: #E8180C; }
.tmpl-automotive .p-nav-cta { background: #E8180C; color: white; border-radius: 4px; }
.tmpl-automotive .p-hero { background: linear-gradient(180deg, #141414 0%, #0A0A0A 100%); border-bottom: 1px solid #2A2A2A; padding: 32px 24px 24px; text-align: center; }
.tmpl-automotive .p-hero h1 { font-size: 1.35rem; font-weight: 900; color: white; text-transform: uppercase; }
.tmpl-automotive .p-hero h1 .p-accent { color: #E8180C; }
.tmpl-automotive .p-hero p { color: #666; }
.tmpl-automotive .p-badge { background: rgba(232,24,12,0.15); color: #E8180C; border: 1px solid rgba(232,24,12,0.4); border-radius: 4px; }
.tmpl-automotive .p-cta-btn { background: #E8180C; color: white; border-radius: 4px; }
.tmpl-automotive .p-stats { grid-template-columns: repeat(4, 1fr); background: #141414; border-bottom: 1px solid #2A2A2A; }
.tmpl-automotive .p-stat-n { color: #E8180C; font-size: 1rem; font-weight: 900; }
.tmpl-automotive .p-stat-l { color: #555; font-size: 0.58rem; font-weight: 600; }
.tmpl-automotive .p-section-label { color: #E8180C; padding: 12px 24px 6px; text-transform: uppercase; letter-spacing: 2px; font-weight: 900; }
.tmpl-automotive .p-cards { grid-template-columns: repeat(2, 1fr); padding: 0 24px 12px; }
.tmpl-automotive .p-card { background: rgba(232,24,12,0.06); border: 1px solid rgba(232,24,12,0.2); border-radius: 8px; }
.tmpl-automotive .p-card-icon { font-size: 1.4rem; }
.tmpl-automotive .p-card-title { font-size: 0.72rem; font-weight: 800; color: white; }
.tmpl-automotive .p-card-sub { font-size: 0.6rem; color: #666; }
.tmpl-automotive .p-tabs { padding: 10px 24px; gap: 6px; border-bottom: 1px solid #2A2A2A; }
.tmpl-automotive .p-tab { padding: 5px 12px; border: 1px solid #333; background: transparent; color: #666; border-radius: 4px; font-size: 0.7rem; font-weight: 700; cursor: pointer; }
.tmpl-automotive .p-tab.active { background: #E8180C; color: white; border-color: #E8180C; }
.tmpl-automotive .p-form-section { background: rgba(232,24,12,0.05); border: 1px solid rgba(232,24,12,0.2); border-radius: 8px; }
.tmpl-automotive .p-form-title { color: #E8180C; }
.tmpl-automotive .p-input { border: 1px solid #333; background: #0A0A0A; color: white; border-radius: 4px; }
.tmpl-automotive .p-input:focus { border-color: #E8180C; }
.tmpl-automotive .p-submit { background: #E8180C; color: white; border-radius: 4px; }

/* =========================================================
   TEMPLATE 13: PHOTOGRAPHY
   Layout: B&W aesthetic, gallery grid, minimal contact form.
   Color: Pure white + black + gold (#D4A94A) accent
   ========================================================= */
.tmpl-photography { background: #FAFAFA; color: #1A1A1A; }
.tmpl-photography .p-nav { background: #111; padding: 12px 24px; }
.tmpl-photography .p-nav-logo { font-size: 1rem; font-weight: 800; color: #D4A94A; letter-spacing: 2px; text-transform: uppercase; }
.tmpl-photography .p-nav-links a { color: #666; }
.tmpl-photography .p-nav-links a:hover { color: #D4A94A; }
.tmpl-photography .p-nav-cta { background: #D4A94A; color: #111; border-radius: 4px; }
.tmpl-photography .p-hero { background: #111; padding: 36px 24px 28px; text-align: center; }
.tmpl-photography .p-hero h1 { font-size: 1.4rem; font-weight: 800; color: white; }
.tmpl-photography .p-hero h1 .p-accent { color: #D4A94A; }
.tmpl-photography .p-hero p { color: #666; }
.tmpl-photography .p-badge { background: rgba(212,169,74,0.2); color: #D4A94A; border: 1px solid rgba(212,169,74,0.4); border-radius: 4px; }
.tmpl-photography .p-cta-btn { background: #D4A94A; color: #111; border-radius: 4px; }
.tmpl-photography .p-stats { grid-template-columns: repeat(4, 1fr); background: #F0F0F0; border-bottom: 1px solid #E0E0E0; }
.tmpl-photography .p-stat-n { color: #111; font-size: 1rem; font-weight: 900; }
.tmpl-photography .p-stat-l { color: #666; font-size: 0.58rem; font-weight: 600; }
.tmpl-photography .p-section-label { color: #111; padding: 12px 24px 8px; font-weight: 900; letter-spacing: 2px; }
/* Photography: masonry grid — no aspect lock */
.tmpl-photography .p-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px; padding: 0 24px 12px;
}
.tmpl-photography .p-gallery-cell {
  background: #111; border-radius: 4px; min-height: 80px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; color: #D4A94A;
}
.tmpl-photography .p-gallery-cell:hover { opacity: 0.8; }
.tmpl-photography .p-tabs { padding: 10px 24px; gap: 6px; border-bottom: 1px solid #E0E0E0; }
.tmpl-photography .p-tab { padding: 5px 12px; border: 1px solid #E0E0E0; background: white; color: #666; border-radius: 4px; font-size: 0.7rem; font-weight: 600; cursor: pointer; }
.tmpl-photography .p-tab.active { background: #111; color: #D4A94A; border-color: #111; }
.tmpl-photography .p-form-section { background: #111; border-radius: 8px; }
.tmpl-photography .p-form-title { color: white; }
.tmpl-photography .p-input { border: 1px solid #333; background: #0A0A0A; color: white; border-radius: 4px; }
.tmpl-photography .p-input:focus { border-color: #D4A94A; }
.tmpl-photography .p-submit { background: #D4A94A; color: #111; border-radius: 4px; }

/* =========================================================
   TEMPLATE 14: SPA
   Layout: Serene sage green, service menu left,
   booking form right (2-col layout in content area),
   tabs for service categories.
   Color: Sage green (#4A7A5A) + white
   ========================================================= */
.tmpl-spa { background: #F5F9F5; color: #2A3A2A; }
.tmpl-spa .p-nav { background: white; border-bottom: 2px solid #4A7A5A; padding: 12px 24px; }
.tmpl-spa .p-nav-logo { font-size: 1rem; font-weight: 800; color: #4A7A5A; letter-spacing: 1px; }
.tmpl-spa .p-nav-links a { color: #5A6A5A; }
.tmpl-spa .p-nav-links a:hover { color: #4A7A5A; }
.tmpl-spa .p-nav-cta { background: #4A7A5A; color: white; border-radius: 18px; }
.tmpl-spa .p-hero { background: linear-gradient(135deg, #E8F0E8 0%, #F5F9F5 100%); padding: 36px 24px 28px; text-align: center; }
.tmpl-spa .p-hero h1 { font-size: 1.35rem; font-weight: 800; color: #2A3A2A; }
.tmpl-spa .p-hero h1 .p-accent { color: #4A7A5A; }
.tmpl-spa .p-hero p { color: #5A6A5A; }
.tmpl-spa .p-badge { background: #E8F0E8; color: #4A7A5A; border: 1px solid #B0C8B0; border-radius: 12px; }
.tmpl-spa .p-cta-btn { background: #4A7A5A; color: white; border-radius: 18px; }
.tmpl-spa .p-stats { grid-template-columns: repeat(4, 1fr); background: white; border-bottom: 1px solid #E0EAD0; }
.tmpl-spa .p-stat-n { color: #4A7A5A; font-size: 1rem; font-weight: 800; }
.tmpl-spa .p-stat-l { color: #5A6A5A; font-size: 0.58rem; font-weight: 600; }
.tmpl-spa .p-section-label { color: #4A7A5A; }
/* Spa: 2-col services */
.tmpl-spa .p-cards { grid-template-columns: repeat(2, 1fr); padding: 0 24px 14px; }
.tmpl-spa .p-card { background: white; border: 1px solid #D8E8D0; border-radius: 12px; border-left: 3px solid #4A7A5A; }
.tmpl-spa .p-card-icon { font-size: 1.4rem; }
.tmpl-spa .p-card-title { font-size: 0.75rem; font-weight: 700; color: #2A3A2A; }
.tmpl-spa .p-card-sub { font-size: 0.62rem; color: #5A6A5A; line-height: 1.4; }
.tmpl-spa .p-tabs { padding: 12px 24px; gap: 6px; border-bottom: 1px solid #E0EAD0; }
.tmpl-spa .p-tab { border: 1px solid #D8E8D0; background: white; color: #5A6A5A; border-radius: 18px; }
.tmpl-spa .p-tab.active { background: #4A7A5A; color: white; border-color: #4A7A5A; }
.tmpl-spa .p-form-section { background: white; border: 1px solid #D8E8D0; border-radius: 12px; }
.tmpl-spa .p-form-title { color: #2A3A2A; }
.tmpl-spa .p-input { border: 1.5px solid #D8E8D0; color: #2A3A2A; border-radius: 8px; }
.tmpl-spa .p-input:focus { border-color: #4A7A5A; }
.tmpl-spa .p-submit { background: #4A7A5A; color: white; border-radius: 8px; }

/* =========================================================
   TEMPLATE 15: COWORKING
   Layout: Bright, open, pricing tiers in horizontal 3-col row,
   community features in 4-col grid, tour booking.
   Color: White + bold yellow (#FFD600) + black
   ========================================================= */
.tmpl-coworking { background: #FFFFFF; color: #111111; }
.tmpl-coworking .p-nav { background: #111; padding: 12px 24px; }
.tmpl-coworking .p-nav-logo { font-size: 1rem; font-weight: 900; color: #FFD600; letter-spacing: 2px; text-transform: uppercase; }
.tmpl-coworking .p-nav-links a { color: #888; }
.tmpl-coworking .p-nav-links a:hover { color: #FFD600; }
.tmpl-coworking .p-nav-cta { background: #FFD600; color: #111; border-radius: 4px; font-weight: 900; }
.tmpl-coworking .p-hero { background: linear-gradient(135deg, #F5F500 0.03, #FFFFFF 100%); padding: 32px 24px 28px; text-align: center; }
.tmpl-coworking .p-hero h1 { font-size: 1.4rem; font-weight: 900; color: #111; }
.tmpl-coworking .p-hero h1 .p-accent { color: #FFD600; }
.tmpl-coworking .p-hero p { color: #555; }
.tmpl-coworking .p-badge { background: #FFD600; color: #111; border: 1px solid #E0C000; border-radius: 4px; font-weight: 900; }
.tmpl-coworking .p-cta-btn { background: #FFD600; color: #111; border-radius: 4px; font-weight: 800; }
.tmpl-coworking .p-stats { grid-template-columns: repeat(4, 1fr); background: #111; }
.tmpl-coworking .p-stat-n { color: #FFD600; font-size: 1rem; font-weight: 900; }
.tmpl-coworking .p-stat-l { color: #555; font-size: 0.58rem; font-weight: 600; }
.tmpl-coworking .p-section-label { color: #111; padding: 12px 24px 8px; font-weight: 900; letter-spacing: 2px; }
/* Coworking: 3-col pricing tiers */
.tmpl-coworking .p-cards { grid-template-columns: repeat(3, 1fr); padding: 0 24px 12px; }
.tmpl-coworking .p-card { background: white; border: 2px solid #111; border-radius: 8px; padding: 14px; text-align: center; }
.tmpl-coworking .p-card:hover { border-color: #FFD600; }
.tmpl-coworking .p-card-icon { font-size: 1.4rem; }
.tmpl-coworking .p-card-title { font-size: 0.72rem; font-weight: 900; color: #111; }
.tmpl-coworking .p-card-sub { font-size: 0.6rem; color: #555; }
.tmpl-coworking .p-tabs { padding: 10px 24px; gap: 6px; }
.tmpl-coworking .p-tab { padding: 5px 12px; border: 2px solid #111; background: white; color: #111; border-radius: 4px; font-size: 0.7rem; font-weight: 800; cursor: pointer; }
.tmpl-coworking .p-tab.active { background: #FFD600; color: #111; border-color: #FFD600; }
.tmpl-coworking .p-form-section { background: #FFFDF0; border: 2px solid #FFD600; border-radius: 8px; }
.tmpl-coworking .p-form-title { color: #111; }
.tmpl-coworking .p-input { border: 2px solid #111; color: #111; border-radius: 4px; }
.tmpl-coworking .p-input:focus { border-color: #FFD600; }
.tmpl-coworking .p-submit { background: #FFD600; color: #111; border-radius: 4px; font-weight: 800; }

/* =========================================================
   TEMPLATE 16: PET SERVICES
   Layout: Emergency bar at top, then asymmetric services layout,
   4 tabbed sections (medical, boarding, grooming, training).
   Color: Cream (#FFF8F0) + orange (#E87040)
   ========================================================= */
.tmpl-pets { background: #FFF8F0; color: #5A3A2A; }
.tmpl-pets .p-emergency-bar { background: #D42B2B; color: white; font-size: 0.68rem; font-weight: 800; padding: 7px 24px; text-align: center; }
.tmpl-pets .p-nav { background: white; border-bottom: 2px solid #E8C8A8; padding: 12px 24px; }
.tmpl-pets .p-nav-logo { font-size: 1rem; font-weight: 800; color: #E87040; letter-spacing: 1px; }
.tmpl-pets .p-nav-links a { color: #8A5A4A; }
.tmpl-pets .p-nav-links a:hover { color: #E87040; }
.tmpl-pets .p-nav-cta { background: #E87040; color: white; border-radius: 18px; }
.tmpl-pets .p-hero { background: linear-gradient(180deg, #FFF0E0 0%, #FFF8F0 100%); padding: 32px 24px 24px; text-align: center; }
.tmpl-pets .p-hero h1 { font-size: 1.35rem; font-weight: 800; color: #5A3A2A; }
.tmpl-pets .p-hero h1 .p-accent { color: #E87040; }
.tmpl-pets .p-hero p { color: #8A5A4A; }
.tmpl-pets .p-badge { background: #FFF0E0; color: #E87040; border: 1px solid #F0C0A0; border-radius: 12px; }
.tmpl-pets .p-cta-btn { background: #E87040; color: white; border-radius: 18px; }
.tmpl-pets .p-stats { grid-template-columns: repeat(4, 1fr); background: white; border-bottom: 1px solid #F0D8C0; }
.tmpl-pets .p-stat-n { color: #E87040; font-size: 1rem; font-weight: 800; }
.tmpl-pets .p-stat-l { color: #8A5A4A; font-size: 0.58rem; font-weight: 600; }
.tmpl-pets .p-section-label { color: #E87040; }
.tmpl-pets .p-cards { grid-template-columns: repeat(2, 1fr); padding: 0 24px 14px; }
.tmpl-pets .p-card { background: white; border: 1px solid #F0D8C0; border-radius: 10px; border-left: 3px solid #E87040; }
.tmpl-pets .p-card-icon { font-size: 1.4rem; }
.tmpl-pets .p-card-title { font-size: 0.75rem; font-weight: 700; color: #5A3A2A; }
.tmpl-pets .p-card-sub { font-size: 0.62rem; color: #8A5A4A; line-height: 1.4; }
.tmpl-pets .p-tabs { padding: 12px 24px; gap: 6px; border-bottom: 1px solid #F0D8C0; }
.tmpl-pets .p-tab { border: 1px solid #F0D8C0; background: white; color: #8A5A4A; border-radius: 12px; }
.tmpl-pets .p-tab.active { background: #E87040; color: white; border-color: #E87040; }
.tmpl-pets .p-form-section { background: white; border: 1px solid #F0D8C0; border-radius: 10px; }
.tmpl-pets .p-form-title { color: #5A3A2A; }
.tmpl-pets .p-input { border: 1.5px solid #F0D8C0; color: #5A3A2A; border-radius: 8px; background: white; }
.tmpl-pets .p-input:focus { border-color: #E87040; }
.tmpl-pets .p-submit { background: #E87040; color: white; border-radius: 8px; }

/* =========================================================
   TEMPLATE 17: LANDSCAPING
   Layout: Outdoor earthy, project gallery in 4-col grid,
   services in horizontal strip, quote form.
   Color: Warm white (#F5FBF0) + forest green (#2A5A2A)
   ========================================================= */
.tmpl-landscaping { background: #F5FBF0; color: #1A3A1A; }
.tmpl-landscaping .p-nav { background: white; border-bottom: 2px solid #2A5A2A; padding: 12px 24px; }
.tmpl-landscaping .p-nav-logo { font-size: 1rem; font-weight: 800; color: #2A5A2A; }
.tmpl-landscaping .p-nav-links a { color: #4A6A4A; }
.tmpl-landscaping .p-nav-links a:hover { color: #2A5A2A; }
.tmpl-landscaping .p-nav-cta { background: #2A5A2A; color: white; border-radius: 4px; }
.tmpl-landscaping .p-hero { background: linear-gradient(135deg, #E8F0E0 0%, #F5FBF0 100%); padding: 36px 24px 28px; text-align: center; }
.tmpl-landscaping .p-hero h1 { font-size: 1.35rem; font-weight: 800; color: #1A3A1A; }
.tmpl-landscaping .p-hero h1 .p-accent { color: #2A5A2A; }
.tmpl-landscaping .p-hero p { color: #4A6A4A; }
.tmpl-landscaping .p-badge { background: #E8F0E0; color: #2A5A2A; border: 1px solid #B0C8A0; border-radius: 12px; }
.tmpl-landscaping .p-cta-btn { background: #2A5A2A; color: white; border-radius: 4px; }
.tmpl-landscaping .p-stats { grid-template-columns: repeat(4, 1fr); background: white; border-bottom: 1px solid #D0E8D0; }
.tmpl-landscaping .p-stat-n { color: #2A5A2A; font-size: 1rem; font-weight: 800; }
.tmpl-landscaping .p-stat-l { color: #4A6A4A; font-size: 0.58rem; font-weight: 600; }
.tmpl-landscaping .p-section-label { color: #2A5A2A; }
/* Landscaping: horizontal service strip */
.tmpl-landscaping .p-cards { grid-template-columns: repeat(4, 1fr); padding: 0 24px 12px; }
.tmpl-landscaping .p-card { background: white; border: 1px solid #D0E8D0; border-radius: 10px; }
.tmpl-landscaping .p-card-icon { font-size: 1.4rem; }
.tmpl-landscaping .p-card-title { font-size: 0.72rem; font-weight: 700; color: #1A3A1A; }
.tmpl-landscaping .p-card-sub { font-size: 0.6rem; color: #4A6A4A; }
.tmpl-landscaping .p-project-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 24px 12px; }
.tmpl-landscaping .p-project-cell { background: #D0E8C0; border-radius: 6px; padding: 8px; text-align: center; }
.tmpl-landscaping .p-project-img { width: 100%; aspect-ratio: 1; background: #C0D8A0; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1rem; margin-bottom: 4px; }
.tmpl-landscaping .p-project-name { font-size: 0.6rem; font-weight: 700; color: #1A3A1A; }
.tmpl-landscaping .p-project-sub { font-size: 0.55rem; color: #4A6A4A; }
.tmpl-landscaping .p-form-section { background: white; border: 1px solid #D0E8D0; border-radius: 10px; }
.tmpl-landscaping .p-form-title { color: #1A3A1A; }
.tmpl-landscaping .p-input { border: 1.5px solid #D0E8D0; color: #1A3A1A; border-radius: 8px; }
.tmpl-landscaping .p-input:focus { border-color: #2A5A2A; }
.tmpl-landscaping .p-submit { background: #2A5A2A; color: white; border-radius: 8px; }

/* =========================================================
   TEMPLATE 18: SALON
   Layout: Dark nav + hero, then service menu in
   elegant list format, booking form.
   Color: Dark (#1A1A1A) + rose gold (#E8A0B0)
   ========================================================= */
.tmpl-salon { background: #FFF5F7; color: #2A1A20; }
.tmpl-salon .p-nav { background: #1A1A1A; padding: 12px 24px; }
.tmpl-salon .p-nav-logo { font-size: 1rem; font-weight: 800; color: #E8A0B0; letter-spacing: 2px; text-transform: uppercase; }
.tmpl-salon .p-nav-links a { color: #888; text-transform: uppercase; }
.tmpl-salon .p-nav-links a:hover { color: #E8A0B0; }
.tmpl-salon .p-nav-cta { background: #E8A0B0; color: white; border-radius: 18px; }
.tmpl-salon .p-hero { background: #1A1A1A; padding: 32px 24px 24px; text-align: center; }
.tmpl-salon .p-hero h1 { font-size: 1.35rem; font-weight: 800; color: white; }
.tmpl-salon .p-hero h1 .p-accent { color: #E8A0B0; }
.tmpl-salon .p-hero p { color: #888; }
.tmpl-salon .p-badge { background: rgba(232,160,176,0.15); color: #E8A0B0; border: 1px solid rgba(232,160,176,0.4); border-radius: 12px; }
.tmpl-salon .p-cta-btn { background: #E8A0B0; color: white; border-radius: 20px; }
.tmpl-salon .p-stats { grid-template-columns: repeat(4, 1fr); background: #222; border-bottom: 1px solid #333; }
.tmpl-salon .p-stat-n { color: #E8A0B0; font-size: 1rem; font-weight: 800; }
.tmpl-salon .p-stat-l { color: #666; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.tmpl-salon .p-section-label { color: #E8A0B0; }
/* Salon: service menu in elegant list */
.tmpl-salon .p-cards { grid-template-columns: repeat(2, 1fr); padding: 0 24px 14px; }
.tmpl-salon .p-card { background: white; border: 1px solid #F0D0D8; border-radius: 12px; }
.tmpl-salon .p-card-icon { font-size: 1.4rem; }
.tmpl-salon .p-card-title { font-size: 0.75rem; font-weight: 700; color: #2A1A20; }
.tmpl-salon .p-card-sub { font-size: 0.62rem; color: #8A6A7A; line-height: 1.4; }
.tmpl-salon .p-tabs { padding: 12px 24px; gap: 6px; border-bottom: 1px solid #F0D0D8; }
.tmpl-salon .p-tab { border: 1px solid #F0D0D8; background: white; color: #8A6A7A; border-radius: 12px; }
.tmpl-salon .p-tab.active { background: #E8A0B0; color: white; border-color: #E8A0B0; }
.tmpl-salon .p-form-section { background: white; border: 1px solid #F0D0D8; border-radius: 12px; }
.tmpl-salon .p-form-title { color: #2A1A20; }
.tmpl-salon .p-input { border: 1.5px solid #F0D0D8; color: #2A1A20; border-radius: 8px; background: #FFF5F7; }
.tmpl-salon .p-input:focus { border-color: #E8A0B0; }
.tmpl-salon .p-submit { background: #E8A0B0; color: white; border-radius: 8px; }

/* =========================================================
   TEMPLATE 19: EDUCATION / TUTORING
   Layout: Structured, subject cards in grid,
   testimonials section, enrollment form.
   Color: Navy (#1A2040) + gold (#B8860B) on cream
   ========================================================= */
.tmpl-education { background: #F5F4F0; color: #1A2040; }
.tmpl-education .p-nav { background: #1A2040; padding: 14px 24px; }
.tmpl-education .p-nav-logo { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: #B8860B; }
.tmpl-education .p-nav-links a { color: #8090B0; }
.tmpl-education .p-nav-links a:hover { color: #B8860B; }
.tmpl-education .p-nav-cta { background: transparent; color: #B8860B; border: 1.5px solid #B8860B; border-radius: 4px; }
.tmpl-education .p-hero { background: linear-gradient(180deg, #1A2040 0%, #1E2848 100%); padding: 36px 24px 28px; text-align: center; }
.tmpl-education .p-hero h1 { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 700; color: #F5F0E0; }
.tmpl-education .p-hero h1 .p-accent { color: #B8860B; }
.tmpl-education .p-hero p { color: #8090B0; }
.tmpl-education .p-badge { background: rgba(184,134,11,0.15); color: #B8860B; border: 1px solid rgba(184,134,11,0.4); border-radius: 4px; }
.tmpl-education .p-cta-btn { background: #B8860B; color: white; border-radius: 4px; }
.tmpl-education .p-stats { grid-template-columns: repeat(4, 1fr); background: #1E2848; border-bottom: 1px solid #2A3050; }
.tmpl-education .p-stat-n { color: #B8860B; font-size: 1rem; font-weight: 800; }
.tmpl-education .p-stat-l { color: #7080A0; font-size: 0.58rem; font-weight: 500; }
.tmpl-education .p-section-label { color: #B8860B; }
/* Education: 4-col subject grid */
.tmpl-education .p-cards { grid-template-columns: repeat(4, 1fr); padding: 0 24px 12px; }
.tmpl-education .p-card { background: white; border: 1px solid #E8E5DC; border-radius: 8px; }
.tmpl-education .p-card:hover { border-color: #B8860B; }
.tmpl-education .p-card-icon { font-size: 1.4rem; }
.tmpl-education .p-card-title { font-family: 'Playfair Display', serif; font-size: 0.72rem; font-weight: 700; color: #1A2040; }
.tmpl-education .p-card-sub { font-size: 0.6rem; color: #7080A0; }
.tmpl-education .p-tabs { padding: 12px 24px; gap: 6px; border-bottom: 1px solid #E8E5DC; }
.tmpl-education .p-tab { border: 1px solid #E8E5DC; background: white; color: #7080A0; border-radius: 4px; }
.tmpl-education .p-tab.active { background: #B8860B; color: white; border-color: #B8860B; }
.tmpl-education .p-form-section { background: white; border: 1px solid #E8E5DC; border-radius: 8px; }
.tmpl-education .p-form-title { font-family: 'Playfair Display', serif; color: #B8860B; }
.tmpl-education .p-input { border: 1.5px solid #E8E5DC; background: #F5F4F0; color: #1A2040; border-radius: 4px; }
.tmpl-education .p-input:focus { border-color: #B8860B; }
.tmpl-education .p-submit { background: #B8860B; color: white; border-radius: 4px; }

/* =========================================================
   TEMPLATE 20: TECH / SAAS
   Layout: Dark navy, feature grid with alternating layout,
   pricing tiers in 3-col row, free trial CTA.
   Color: Dark navy (#060B18) + electric blue (#00A8FF)
   ========================================================= */
.tmpl-tech { background: #060B18; color: #FFFFFF; }
.tmpl-tech .p-nav { background: rgba(0,10,30,0.95); border-bottom: 1px solid #0A1A3A; padding: 12px 24px; }
.tmpl-tech .p-nav-logo { font-size: 1rem; font-weight: 800; color: #00A8FF; letter-spacing: 1px; }
.tmpl-tech .p-nav-links a { color: #406080; }
.tmpl-tech .p-nav-links a:hover { color: #00A8FF; }
.tmpl-tech .p-nav-cta { background: #00A8FF; color: #060B18; border-radius: 4px; }
.tmpl-tech .p-hero { background: linear-gradient(180deg, #0A1430 0%, #060B18 100%); padding: 32px 24px 24px; text-align: center; }
.tmpl-tech .p-hero h1 { font-size: 1.35rem; font-weight: 900; color: white; letter-spacing: -0.5px; }
.tmpl-tech .p-hero h1 .p-accent { color: #00A8FF; }
.tmpl-tech .p-hero p { color: #406080; font-size: 0.8rem; letter-spacing: 0.5px; }
.tmpl-tech .p-badge { background: rgba(0,168,255,0.1); color: #00A8FF; border: 1px solid rgba(0,168,255,0.3); border-radius: 4px; }
.tmpl-tech .p-cta-btn { background: #00A8FF; color: #060B18; border-radius: 4px; }
.tmpl-tech .p-stats { grid-template-columns: repeat(4, 1fr); background: #0A1430; border-bottom: 1px solid #0A1A3A; }
.tmpl-tech .p-stat-n { color: #00A8FF; font-size: 1rem; font-weight: 800; }
.tmpl-tech .p-stat-l { color: #305060; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.5px; }
.tmpl-tech .p-section-label { color: #00A8FF; padding: 12px 24px 6px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; }
.tmpl-tech .p-cards { grid-template-columns: repeat(2, 1fr); padding: 0 24px 12px; }
.tmpl-tech .p-card { background: rgba(0,168,255,0.06); border: 1px solid rgba(0,168,255,0.2); border-radius: 6px; }
.tmpl-tech .p-card-icon { font-size: 1.4rem; }
.tmpl-tech .p-card-title { font-size: 0.72rem; font-weight: 700; color: white; }
.tmpl-tech .p-card-sub { font-size: 0.6rem; color: #305060; }
.tmpl-tech .p-pricing-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 24px 12px; }
.tmpl-tech .p-price-tier { background: rgba(0,168,255,0.05); border: 1px solid rgba(0,168,255,0.15); border-radius: 6px; padding: 12px 8px; text-align: center; }
.tmpl-tech .p-price-tier.p-price-featured { background: rgba(0,168,255,0.1); border-color: rgba(0,168,255,0.5); }
.tmpl-tech .p-price-badge { background: #00A8FF; color: #060B18; font-size: 0.55rem; font-weight: 800; padding: 2px 8px; border-radius: 3px; display: inline-block; margin-bottom: 6px; }
.tmpl-tech .p-price-name { font-size: 0.7rem; font-weight: 700; color: #80C0FF; margin-bottom: 4px; }
.tmpl-tech .p-price-val { font-size: 1rem; font-weight: 900; color: white; margin-bottom: 4px; }
.tmpl-tech .p-price-sub { font-size: 0.58rem; color: #305060; margin-bottom: 8px; }
.tmpl-tech .p-price-btn { background: rgba(0,168,255,0.1); color: #00A8FF; border: 1px solid rgba(0,168,255,0.3); padding: 5px 8px; border-radius: 4px; font-size: 0.6rem; font-weight: 800; cursor: pointer; }
.tmpl-tech .p-price-btn-active { background: #00A8FF; color: #060B18; border-color: #00A8FF; }
.tmpl-tech .p-form-section { background: rgba(0,168,255,0.04); border: 1px solid rgba(0,168,255,0.15); border-radius: 6px; }
.tmpl-tech .p-form-title { color: #00A8FF; }
.tmpl-tech .p-input { border: 1px solid rgba(0,168,255,0.2); background: rgba(0,168,255,0.05); color: #00A8FF; border-radius: 4px; }
.tmpl-tech .p-input::placeholder { color: #204060; }
.tmpl-tech .p-input:focus { border-color: #00A8FF; }
.tmpl-tech .p-submit { background: #00A8FF; color: #060B18; border-radius: 4px; }

/* =========================================================
   SHARED UTILITIES
   ========================================================= */
.p-toast {
  position: fixed; top: 16px; right: 16px;
  background: rgba(0,168,255,0.15); border: 1px solid rgba(0,168,255,0.4);
  color: white; padding: 10px 18px; border-radius: 8px;
  font-size: 0.72rem; font-weight: 600; z-index: 9999;
  backdrop-filter: blur(10px); opacity: 0;
  transform: translateY(-8px); transition: all 0.3s;
}
.p-toast.show { opacity: 1; transform: translateY(0); }