/*
  preset-radical.css
  Purpose: make each theme preset visually distinct (beyond just light/dark) by:
  - driving header/page chroma from preset variables (--accent/--accent2)
  - setting per-preset typographic + shape + density traits
  - overriding a few hard-coded colors in template.css with variable-based mixes

  Loaded AFTER template.css and brand-themes.css.
*/

/* === BRIDGE: map preset palettes -> template design tokens ================== */
/* Template uses: --bg, --surface, --text, --muted, --accent, --accent2, --border, --radius */
body[class*="theme-preset-"]{
  /* alias preset palette for easier switching */
  --bg-light: var(--ch-bg-light);
  --surface-light: var(--ch-surface-light);
  --text-light: var(--ch-text-light);
  --muted-light: var(--ch-muted-light);
  --accent-light: var(--ch-accent-light);
  --accent2-light: var(--ch-accent2-light);
  --border-light: var(--ch-border-light);

  --bg-dark: var(--ch-bg-dark);
  --surface-dark: var(--ch-surface-dark);
  --text-dark: var(--ch-text-dark);
  --muted-dark: var(--ch-muted-dark);
  --accent-dark: var(--ch-accent-dark);
  --accent2-dark: var(--ch-accent2-dark);
  --border-dark: var(--ch-border-dark);

  /* defaults (will be overridden by theme-variant-*) */
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --accent: var(--accent-light);
  --accent2: var(--accent2-light);
  --border: var(--border-light);

  /* generic UI tokens (preset-specific overrides below) */
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 22px;

  --ui-border-w: 1px;
  --ui-shadow: 0 18px 50px rgba(0,0,0,.10);
  --ui-shadow-strong: 0 22px 70px rgba(0,0,0,.16);

  --head-bg: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  --head-border: color-mix(in srgb, var(--border) 70%, transparent);
  --nav-bg: color-mix(in srgb, var(--surface) 90%, var(--bg) 10%);

  --btn-radius: 999px;
  --btn-border-w: 1px;
  --btn-shadow: 0 14px 34px rgba(0,0,0,.16);
  --btn-shadow-hover: 0 18px 44px rgba(0,0,0,.22);
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 80%, var(--accent) 20%)
    );
  --btn-fg-theme: #fff;

  --card-bg: color-mix(in srgb, var(--surface) 92%, var(--bg) 8%);
  --card-border: color-mix(in srgb, var(--border) 70%, transparent);
  --card-shadow: var(--ui-shadow);
  --card-radius: var(--radius-lg);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-head: var(--font-body);
  --title-transform: none;
  --title-spacing: 0px;
}

/* Explicit variants (admin selection) */
body.theme-variant-light, body.theme-light{
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --accent: var(--accent-light);
  --accent2: var(--accent2-light);
  --border: var(--border-light);
}
body.theme-variant-dark, body.theme-dark{
  --bg: var(--bg-dark);
  --surface: var(--surface-dark);
  --text: var(--text-dark);
  --muted: var(--muted-dark);
  --accent: var(--accent-dark);
  --accent2: var(--accent2-dark);
  --border: var(--border-dark);

  /* slightly stronger shadows in dark */
  --ui-shadow: 0 18px 55px rgba(0,0,0,.38);
  --ui-shadow-strong: 0 26px 86px rgba(0,0,0,.52);
  --btn-shadow: 0 18px 46px rgba(0,0,0,.55);
  --btn-shadow-hover: 0 22px 60px rgba(0,0,0,.62);
}

/* System variant support (if you ever use it) */
body.theme-variant-system{
  --bg: var(--bg-light);
  --surface: var(--surface-light);
  --text: var(--text-light);
  --muted: var(--muted-light);
  --accent: var(--accent-light);
  --accent2: var(--accent2-light);
  --border: var(--border-light);
}
@media (prefers-color-scheme: dark){
  body.theme-variant-system:not(.theme-light){
    --bg: var(--bg-dark);
    --surface: var(--surface-dark);
    --text: var(--text-dark);
    --muted: var(--muted-dark);
    --accent: var(--accent-dark);
    --accent2: var(--accent2-dark);
    --border: var(--border-dark);
  }
}

/* Apply tokens to key components for BIG visual differences */
body[class*="theme-preset-"]{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}
body[class*="theme-preset-"] a{ color: color-mix(in srgb, var(--accent) 92%, var(--text) 8%); }
body[class*="theme-preset-"] .header,
body[class*="theme-preset-"] .navbar-car{
  background: var(--head-bg);
  border-bottom: var(--ui-border-w) solid var(--head-border);
  backdrop-filter: blur(10px);
}
body[class*="theme-preset-"] .navbar-car{ background: var(--nav-bg); }

body[class*="theme-preset-"] .panel,
body[class*="theme-preset-"] .card,
body[class*="theme-preset-"] .ch-card{
  border-radius: var(--card-radius);
}

body[class*="theme-preset-"] .panel{
  background: var(--card-bg);
  border: var(--ui-border-w) solid var(--card-border);
  box-shadow: var(--card-shadow);
}
body[class*="theme-preset-"] .ch-card{
  background: var(--card-bg) !important;
  border: var(--ui-border-w) solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}

/* Buttons (global)
   IMPORTANT: these are part of the preset "personality" system.
   They MUST apply only when CTA theme-style is enabled.
   In manual mode (cta-manual-style) ALL button appearance is controlled from
   "Контент → Посилання та кнопки" and the base button system in template.css.
*/
body.site.cta-theme-style[class*="theme-preset-"] .btn-car,
body.site.cta-theme-style[class*="theme-preset-"] .brandPhone{
  border-radius: var(--btn-radius) !important;
  border: var(--btn-border-w) solid color-mix(in srgb, var(--border) 68%, transparent) !important;
  box-shadow: var(--btn-shadow) !important;
}
body.site.cta-theme-style[class*="theme-preset-"] .btn-car{

  --btn-bg: var(--btn-bg-theme, var(--btn-bg)) !important;
  --btn-fg: var(--btn-fg-theme, var(--btn-fg)) !important;
  background: var(--btn-bg) !important;
  color: var(--btn-fg) !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}
body.site.cta-theme-style[class*="theme-preset-"] .btn-car:hover{
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover) !important;
}
body[class*="theme-preset-"] .brand__title{
  font-family: var(--font-head);
  text-transform: var(--title-transform);
  letter-spacing: var(--title-spacing);
}



/* ===== Global variable-driven chrome (works for any preset) ===== */

/* Page background glow uses preset accent colors */
body.site.theme-light::before{
  background:
    radial-gradient(1100px 520px at 70% 30%, color-mix(in srgb, var(--accent) 58%, transparent) 0%, transparent 62%),
    radial-gradient(900px 520px at 20% -10%, color-mix(in srgb, var(--accent2) 52%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 84%, #ffffff) 0%, var(--bg) 100%);
}
body.site.theme-dark::before{
  background:
    radial-gradient(1200px 560px at 70% 28%, color-mix(in srgb, var(--accent) 46%, transparent) 0%, transparent 66%),
    radial-gradient(920px 540px at 18% -12%, color-mix(in srgb, var(--accent2) 40%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 92%, #000000) 0%, var(--bg) 100%);
}

/* Header + navbar are the biggest "this theme changed" signals */
.header{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 82%, var(--accent) 6%) 0%,
      color-mix(in srgb, var(--surface2) 88%, transparent) 100%
    );
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
}

.navbar-car{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--surface) 90%, var(--accent2) 4%) 0%,
      color-mix(in srgb, var(--surface) 94%, transparent) 100%
    );
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}

/* Panels/cards: make palette visible without rewriting components */
.panel,
.card,
.moduletable,
.ch-card{
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 3%);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}

/* Links + accents */
a{color: var(--link, var(--accent));}

/* Make borders/shadows feel different per preset via vars */
body.site{
  --ch-radius-sm: 10px;
  --ch-radius-md: 16px;
  --ch-radius-lg: 22px;
  --ch-density: 1;
  --ch-title-transform: none;
  --ch-title-spacing: .2px;
  --ch-btn-radius: 999px;
  --ch-btn-weight: 800;
  --ch-btn-letter: .2px;
  --ch-btn-pad-y: 11px;
  --ch-btn-pad-x: 16px;
  --ch-card-shadow: 0 12px 34px rgba(0,0,0,.14);
}

/* Apply radius vars broadly */
.panel,
.card,
.moduletable,
.navbar-car,
.header,
.brandPhone,
.ch-card,
.ch-search,
.form-control{
  border-radius: var(--ch-radius-md);
}

/* Buttons: override shape classes by being more specific and loaded later */
body.site.cta-theme-style .btn-car,
body.site.cta-theme-style .brandPhone{
  border-radius: var(--ch-btn-radius);
  font-weight: var(--ch-btn-weight);
  letter-spacing: var(--ch-btn-letter);
}
body.site.cta-theme-style .btn-car.btn-car--md{ padding: var(--ch-btn-pad-y) var(--ch-btn-pad-x); }

/* Headings: allow presets to change "voice" */
body.site h1,
body.site h2,
body.site h3,
body.site .brand__title{
  text-transform: var(--ch-title-transform);
  letter-spacing: var(--ch-title-spacing);
}

/* Density: small spacing shifts across the site */
body.site{
  --ch-space: calc(16px * var(--ch-density));
}
body.site .container{ padding-left: var(--ch-space); padding-right: var(--ch-space); }
body.site .row.g-4{ --bs-gutter-x: calc(1.5rem * var(--ch-density)); --bs-gutter-y: calc(1.5rem * var(--ch-density)); }

/* ===== Preset personality packs =====
   Each preset still uses its palette from brand-themes.css.
   These packs add shape/typography/density differences so presets "feel" different.
*/

/* Performance / Motorsport: sharp, tight, slightly denser */
body.site.cta-theme-style.theme-preset-bmw,
body.site.cta-theme-style.theme-preset-tesla,
body.site.cta-theme-style.theme-preset-spacex,
body.site.cta-theme-style.theme-preset-nike,
body.site.cta-theme-style.theme-preset-spotify{
  --ch-radius-sm: 8px;
  --ch-radius-md: 12px;
  --ch-radius-lg: 16px;
  --ch-density: .92;
  --ch-title-transform: uppercase;
  --ch-title-spacing: .8px;
  --ch-btn-radius: 12px;
  --ch-btn-letter: .9px;
  --ch-btn-weight: 900;
}

/* Minimal / Premium: roomy, subtle, low shadow */
body.site.cta-theme-style.theme-preset-apple,
body.site.cta-theme-style.theme-preset-airbnb,
body.site.cta-theme-style.theme-preset-uber{
  --ch-radius-sm: 14px;
  --ch-radius-md: 18px;
  --ch-radius-lg: 26px;
  --ch-density: 1.06;
  --ch-title-transform: none;
  --ch-title-spacing: .1px;
  --ch-btn-radius: 999px;
  --ch-btn-weight: 700;
  --ch-card-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* Friendly / Retail: round, soft, playful */
body.site.cta-theme-style.theme-preset-amazon,
body.site.cta-theme-style.theme-preset-google,
body.site.cta-theme-style.theme-preset-microsoft,
body.site.cta-theme-style.theme-preset-facebook,
body.site.cta-theme-style.theme-preset-disney{
  --ch-radius-sm: 14px;
  --ch-radius-md: 20px;
  --ch-radius-lg: 28px;
  --ch-density: 1;
  --ch-title-transform: none;
  --ch-title-spacing: .15px;
  --ch-btn-radius: 999px;
  --ch-btn-letter: .25px;
  --ch-btn-weight: 800;
}

/* Bold / Media: heavy, punchy, big titles */
body.site.cta-theme-style.theme-preset-netflix,
body.site.cta-theme-style.theme-preset-youtube,
body.site.cta-theme-style.theme-preset-tiktok,
body.site.cta-theme-style.theme-preset-coca,
body.site.cta-theme-style.theme-preset-mcd,
body.site.cta-theme-style.theme-preset-twitch{
  --ch-radius-sm: 10px;
  --ch-radius-md: 16px;
  --ch-radius-lg: 22px;
  --ch-density: .98;
  --ch-title-transform: uppercase;
  --ch-title-spacing: 1px;
  --ch-btn-radius: 999px;
  --ch-btn-letter: 1px;
  --ch-btn-weight: 900;
}

/* Finance / Enterprise: square-ish, conservative */
body.site.cta-theme-style.theme-preset-paypal,
body.site.cta-theme-style.theme-preset-salesforce,
body.site.cta-theme-style.theme-preset-adobe,
body.site.cta-theme-style.theme-preset-ibm,
body.site.cta-theme-style.theme-preset-linkedin{
  --ch-radius-sm: 6px;
  --ch-radius-md: 10px;
  --ch-radius-lg: 14px;
  --ch-density: .96;
  --ch-title-transform: none;
  --ch-title-spacing: .25px;
  --ch-btn-radius: 10px;
  --ch-btn-letter: .2px;
  --ch-btn-weight: 800;
}

/* Travel / Nature: airy + softer shadows */
body.site.cta-theme-style.theme-preset-starbucks,
body.site.cta-theme-style.theme-preset-nasa,
body.site.cta-theme-style.theme-preset-ikea,
body.site.cta-theme-style.theme-preset-samsung,
body.site.cta-theme-style.theme-preset-sony{
  --ch-radius-sm: 12px;
  --ch-radius-md: 18px;
  --ch-radius-lg: 24px;
  --ch-density: 1.02;
  --ch-card-shadow: 0 12px 30px rgba(0,0,0,.12);
}

/* Ensure shadows apply */
.panel,
.card,
.moduletable,
.ch-card{
  box-shadow: var(--ch-card-shadow);
}

/* Make the brand badge pop with accent */
.badge-car{
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Inputs/search use palette */
.form-control,
.ch-search .form-control{
  background: color-mix(in srgb, var(--surface) 92%, var(--accent2) 3%);
  border-color: color-mix(in srgb, var(--line) 70%, transparent);
}
.form-control:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Slightly different nav link styling per preset via accent */
.navbar-car a,
.navbar-car .nav-link{
  color: color-mix(in srgb, var(--text) 92%, var(--accent) 6%);
}

/* Fallback for older browsers without color-mix: keep it readable */
@supports not (color: color-mix(in srgb, #000 50%, #fff)){
  body.site.theme-light::before{ background: linear-gradient(180deg, #ffffff 0%, var(--bg) 100%); }
  body.site.theme-dark::before{ background: linear-gradient(180deg, #000000 0%, var(--bg) 100%); }
}



/* === ADOBE (minimal) =========================================== */
body.site.cta-theme-style.theme-preset-adobe{
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --card-radius: 24px;

  --btn-radius: 12px;
  --ui-border-w: 1px;
  --ui-shadow: 0 14px 40px rgba(0,0,0,.10);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  --nav-bg: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === AIRBNB (rounded) =========================================== */
body.site.cta-theme-style.theme-preset-airbnb{
  --radius: 22px;
  --radius-sm: 16px;
  --radius-lg: 28px;
  --card-radius: 30px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 20px 60px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.4px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  --nav-bg: color-mix(in srgb, var(--surface) 82%, var(--bg) 18%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === AMAZON (rounded) =========================================== */
body.site.cta-theme-style.theme-preset-amazon{
  --radius: 22px;
  --radius-sm: 16px;
  --radius-lg: 28px;
  --card-radius: 30px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 20px 60px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.4px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  --nav-bg: color-mix(in srgb, var(--surface) 82%, var(--bg) 18%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === APPLE (minimal) =========================================== */
body.site.cta-theme-style.theme-preset-apple{
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --card-radius: 24px;

  --btn-radius: 12px;
  --ui-border-w: 1px;
  --ui-shadow: 0 14px 40px rgba(0,0,0,.10);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  --nav-bg: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === BMW (sharp) =========================================== */
body.site.cta-theme-style.theme-preset-bmw{
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --card-radius: 18px;

  --btn-radius: 8px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 46px rgba(0,0,0,.14);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%);
  --nav-bg: color-mix(in srgb, var(--surface) 86%, var(--bg) 14%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === COCA (retro) =========================================== */
body.site.cta-theme-style.theme-preset-coca{
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --card-radius: 28px;

  --btn-radius: 18px;
  --ui-border-w: 2px;
  --ui-shadow: 0 10px 0 rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 0.6px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
  --nav-bg: color-mix(in srgb, var(--surface) 84%, var(--bg) 16%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === DISNEY (retro) =========================================== */
body.site.cta-theme-style.theme-preset-disney{
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --card-radius: 28px;

  --btn-radius: 18px;
  --ui-border-w: 2px;
  --ui-shadow: 0 10px 0 rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 0.6px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
  --nav-bg: color-mix(in srgb, var(--surface) 84%, var(--bg) 16%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === FACEBOOK (glass) =========================================== */
body.site.cta-theme-style.theme-preset-facebook{
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --card-radius: 28px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 70px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.2px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 78%, var(--accent) 22%);
  --nav-bg: color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === GOOGLE (minimal) =========================================== */
body.site.cta-theme-style.theme-preset-google{
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --card-radius: 24px;

  --btn-radius: 12px;
  --ui-border-w: 1px;
  --ui-shadow: 0 14px 40px rgba(0,0,0,.10);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  --nav-bg: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === IBM (minimal) =========================================== */
body.site.cta-theme-style.theme-preset-ibm{
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --card-radius: 24px;

  --btn-radius: 12px;
  --ui-border-w: 1px;
  --ui-shadow: 0 14px 40px rgba(0,0,0,.10);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  --nav-bg: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === IKEA (retro) =========================================== */
body.site.cta-theme-style.theme-preset-ikea{
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --card-radius: 28px;

  --btn-radius: 18px;
  --ui-border-w: 2px;
  --ui-shadow: 0 10px 0 rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 0.6px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
  --nav-bg: color-mix(in srgb, var(--surface) 84%, var(--bg) 16%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === LINKEDIN (minimal) =========================================== */
body.site.cta-theme-style.theme-preset-linkedin{
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --card-radius: 24px;

  --btn-radius: 12px;
  --ui-border-w: 1px;
  --ui-shadow: 0 14px 40px rgba(0,0,0,.10);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  --nav-bg: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === MCD (retro) =========================================== */
body.site.cta-theme-style.theme-preset-mcd{
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --card-radius: 28px;

  --btn-radius: 18px;
  --ui-border-w: 2px;
  --ui-shadow: 0 10px 0 rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 0.6px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
  --nav-bg: color-mix(in srgb, var(--surface) 84%, var(--bg) 16%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === MICROSOFT (minimal) =========================================== */
body.site.cta-theme-style.theme-preset-microsoft{
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --card-radius: 24px;

  --btn-radius: 12px;
  --ui-border-w: 1px;
  --ui-shadow: 0 14px 40px rgba(0,0,0,.10);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 92%, var(--accent) 8%);
  --nav-bg: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === NASA (glass) =========================================== */
body.site.cta-theme-style.theme-preset-nasa{
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --card-radius: 28px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 70px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.2px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 78%, var(--accent) 22%);
  --nav-bg: color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === NETFLIX (neon) =========================================== */
body.site.cta-theme-style.theme-preset-netflix{
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --card-radius: 26px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 64px color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.18));
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1.2px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  --nav-bg: color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === NIKE (glass) =========================================== */
body.site.cta-theme-style.theme-preset-nike{
  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --card-radius: 28px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 70px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.2px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 78%, var(--accent) 22%);
  --nav-bg: color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === PAYPAL (rounded) =========================================== */
body.site.cta-theme-style.theme-preset-paypal{
  --radius: 22px;
  --radius-sm: 16px;
  --radius-lg: 28px;
  --card-radius: 30px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 20px 60px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.4px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  --nav-bg: color-mix(in srgb, var(--surface) 82%, var(--bg) 18%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === SALESFORCE (rounded) =========================================== */
body.site.cta-theme-style.theme-preset-salesforce{
  --radius: 22px;
  --radius-sm: 16px;
  --radius-lg: 28px;
  --card-radius: 30px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 20px 60px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.4px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  --nav-bg: color-mix(in srgb, var(--surface) 82%, var(--bg) 18%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === SAMSUNG (sharp) =========================================== */
body.site.cta-theme-style.theme-preset-samsung{
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --card-radius: 18px;

  --btn-radius: 8px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 46px rgba(0,0,0,.14);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%);
  --nav-bg: color-mix(in srgb, var(--surface) 86%, var(--bg) 14%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === SONY (sharp) =========================================== */
body.site.cta-theme-style.theme-preset-sony{
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --card-radius: 18px;

  --btn-radius: 8px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 46px rgba(0,0,0,.14);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%);
  --nav-bg: color-mix(in srgb, var(--surface) 86%, var(--bg) 14%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === SPACEX (sharp) =========================================== */
body.site.cta-theme-style.theme-preset-spacex{
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --card-radius: 18px;

  --btn-radius: 8px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 46px rgba(0,0,0,.14);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%);
  --nav-bg: color-mix(in srgb, var(--surface) 86%, var(--bg) 14%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === SPOTIFY (neon) =========================================== */
body.site.cta-theme-style.theme-preset-spotify{
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --card-radius: 26px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 64px color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.18));
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1.2px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  --nav-bg: color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === STARBUCKS (rounded) =========================================== */
body.site.cta-theme-style.theme-preset-starbucks{
  --radius: 22px;
  --radius-sm: 16px;
  --radius-lg: 28px;
  --card-radius: 30px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 20px 60px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.4px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  --nav-bg: color-mix(in srgb, var(--surface) 82%, var(--bg) 18%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === TESLA (sharp) =========================================== */
body.site.cta-theme-style.theme-preset-tesla{
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --card-radius: 18px;

  --btn-radius: 8px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 46px rgba(0,0,0,.14);
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 90%, var(--accent) 10%);
  --nav-bg: color-mix(in srgb, var(--surface) 86%, var(--bg) 14%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === TIKTOK (neon) =========================================== */
body.site.cta-theme-style.theme-preset-tiktok{
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --card-radius: 26px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 64px color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.18));
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1.2px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  --nav-bg: color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === TWITCH (neon) =========================================== */
body.site.cta-theme-style.theme-preset-twitch{
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --card-radius: 26px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 64px color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.18));
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1.2px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  --nav-bg: color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === UBER (rounded) =========================================== */
body.site.cta-theme-style.theme-preset-uber{
  --radius: 22px;
  --radius-sm: 16px;
  --radius-lg: 28px;
  --card-radius: 30px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 20px 60px rgba(0,0,0,.12);
  --card-shadow: var(--ui-shadow);

  --title-transform: none;
  --title-spacing: 0.4px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 86%, var(--accent) 14%);
  --nav-bg: color-mix(in srgb, var(--surface) 82%, var(--bg) 18%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}


/* === YOUTUBE (neon) =========================================== */
body.site.cta-theme-style.theme-preset-youtube{
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 24px;
  --card-radius: 26px;

  --btn-radius: 999px;
  --ui-border-w: 1px;
  --ui-shadow: 0 18px 64px color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.18));
  --card-shadow: var(--ui-shadow);

  --title-transform: uppercase;
  --title-spacing: 1.2px;

  /* header/nav */
  --head-bg: color-mix(in srgb, var(--surface) 82%, var(--accent) 18%);
  --nav-bg: color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);

  /* buttons */
  --btn-bg-theme: linear-gradient(135deg,
      color-mix(in srgb, var(--accent) 92%, #fff 8%),
      color-mix(in srgb, var(--accent2) 82%, var(--accent) 18%)
    );
  --btn-fg-theme: #fff;
}

/* === PROFILE-SPECIFIC COMPONENT RULES ==================================== */

body.site.cta-theme-style.theme-preset-apple .header,
body.site.cta-theme-style.theme-preset-google .header,
body.site.cta-theme-style.theme-preset-microsoft .header,
body.site.cta-theme-style.theme-preset-ibm .header,
body.site.cta-theme-style.theme-preset-linkedin .header,
body.site.cta-theme-style.theme-preset-adobe .header{
  backdrop-filter: blur(14px);
}
body.site.cta-theme-style.theme-preset-apple .btn-car,
body.site.cta-theme-style.theme-preset-google .btn-car,
body.site.cta-theme-style.theme-preset-microsoft .btn-car,
body.site.cta-theme-style.theme-preset-ibm .btn-car,
body.site.cta-theme-style.theme-preset-linkedin .btn-car,
body.site.cta-theme-style.theme-preset-adobe .btn-car{
  --btn-bg-theme: color-mix(in srgb, var(--accent) 92%, var(--surface) 8%);
}


body.site.cta-theme-style.theme-preset-amazon .brand__title,
body.site.cta-theme-style.theme-preset-airbnb .brand__title,
body.site.cta-theme-style.theme-preset-uber .brand__title,
body.site.cta-theme-style.theme-preset-paypal .brand__title,
body.site.cta-theme-style.theme-preset-salesforce .brand__title,
body.site.cta-theme-style.theme-preset-starbucks .brand__title{
  text-transform: none;
}
body.site.cta-theme-style.theme-preset-amazon .navbar-car,
body.site.cta-theme-style.theme-preset-airbnb .navbar-car,
body.site.cta-theme-style.theme-preset-uber .navbar-car,
body.site.cta-theme-style.theme-preset-paypal .navbar-car,
body.site.cta-theme-style.theme-preset-salesforce .navbar-car,
body.site.cta-theme-style.theme-preset-starbucks .navbar-car{
  border-bottom-style: dashed;
  border-bottom-width: 2px;
  border-bottom-color: color-mix(in srgb, var(--accent) 22%, var(--border) 78%);
}


body.site.cta-theme-style.theme-preset-bmw .header,
body.site.cta-theme-style.theme-preset-tesla .header,
body.site.cta-theme-style.theme-preset-sony .header,
body.site.cta-theme-style.theme-preset-samsung .header,
body.site.cta-theme-style.theme-preset-spacex .header{
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--surface) 84%, var(--accent) 16%),
    color-mix(in srgb, var(--surface) 92%, var(--bg) 8%)
  );
}
body.site.cta-theme-style.theme-preset-bmw .navbar-car,
body.site.cta-theme-style.theme-preset-tesla .navbar-car,
body.site.cta-theme-style.theme-preset-sony .navbar-car,
body.site.cta-theme-style.theme-preset-samsung .navbar-car,
body.site.cta-theme-style.theme-preset-spacex .navbar-car{
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
body.site.cta-theme-style.theme-preset-bmw .btn-car,
body.site.cta-theme-style.theme-preset-tesla .btn-car,
body.site.cta-theme-style.theme-preset-sony .btn-car,
body.site.cta-theme-style.theme-preset-samsung .btn-car,
body.site.cta-theme-style.theme-preset-spacex .btn-car{
  text-transform: uppercase;
  letter-spacing: .8px;
}


body.site.cta-theme-style.theme-preset-netflix,
body.site.cta-theme-style.theme-preset-spotify,
body.site.cta-theme-style.theme-preset-tiktok,
body.site.cta-theme-style.theme-preset-twitch,
body.site.cta-theme-style.theme-preset-youtube{
  --btn-shadow: 0 18px 60px color-mix(in srgb, var(--accent) 30%, rgba(0,0,0,.22));
  --btn-shadow-hover: 0 22px 80px color-mix(in srgb, var(--accent) 42%, rgba(0,0,0,.26));
  --card-shadow: 0 18px 72px color-mix(in srgb, var(--accent) 18%, rgba(0,0,0,.18));
}
body.site.cta-theme-style.theme-preset-netflix .btn-car,
body.site.cta-theme-style.theme-preset-spotify .btn-car,
body.site.cta-theme-style.theme-preset-tiktok .btn-car,
body.site.cta-theme-style.theme-preset-twitch .btn-car,
body.site.cta-theme-style.theme-preset-youtube .btn-car{
  filter: saturate(1.2);
}


body.site.cta-theme-style.theme-preset-ikea,
body.site.cta-theme-style.theme-preset-coca,
body.site.cta-theme-style.theme-preset-mcd,
body.site.cta-theme-style.theme-preset-disney{
  --btn-bg-theme: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 88%, #fff 12%),
    color-mix(in srgb, var(--accent2) 70%, var(--accent) 30%)
  );
  --btn-shadow: 0 10px 0 rgba(0,0,0,.18);
  --btn-shadow-hover: 0 12px 0 rgba(0,0,0,.22);
}
body.site.cta-theme-style.theme-preset-ikea .btn-car:hover,
body.site.cta-theme-style.theme-preset-coca .btn-car:hover,
body.site.cta-theme-style.theme-preset-mcd .btn-car:hover,
body.site.cta-theme-style.theme-preset-disney .btn-car:hover{
  transform: translateY(-2px);
}
body.site.cta-theme-style.theme-preset-ikea .header,
body.site.cta-theme-style.theme-preset-coca .header,
body.site.cta-theme-style.theme-preset-mcd .header,
body.site.cta-theme-style.theme-preset-disney .header{
  background:
    radial-gradient(1200px 220px at 10% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    var(--head-bg);
}


body.site.cta-theme-style.theme-preset-facebook,
body.site.cta-theme-style.theme-preset-nike,
body.site.cta-theme-style.theme-preset-nasa{
  --card-bg: color-mix(in srgb, var(--surface) 76%, transparent);
  --card-border: color-mix(in srgb, var(--border) 60%, transparent);
  --head-bg: color-mix(in srgb, var(--surface) 64%, transparent);
  --nav-bg: color-mix(in srgb, var(--surface) 56%, transparent);
}
body.site.cta-theme-style.theme-preset-facebook .header,
body.site.cta-theme-style.theme-preset-nike .header,
body.site.cta-theme-style.theme-preset-nasa .header,
body.site.cta-theme-style.theme-preset-facebook .navbar-car,
body.site.cta-theme-style.theme-preset-nike .navbar-car,
body.site.cta-theme-style.theme-preset-nasa .navbar-car{
  backdrop-filter: blur(16px);
}


/* =====================================================================
   RADICAL PRESET KITS (header + navbar + search + buttons)
   Each brand preset must feel visually distinct beyond just accent.
   ===================================================================== */

/* 1) Common wiring: components consume the kit variables */
body[class*="theme-preset-"]{
  --kit-header-bg: var(--head-bg, var(--surface));
  --kit-header-fg: var(--text);
  --kit-header-border: color-mix(in srgb, var(--border) 70%, transparent);
  --kit-header-shadow: 0 14px 40px rgba(0,0,0,.18);

  --kit-nav-bg: var(--nav-bg, color-mix(in srgb, var(--surface) 70%, #000 30%));
  --kit-nav-fg: var(--text);
  --kit-nav-border: color-mix(in srgb, var(--border) 70%, transparent);

  --kit-btn-radius: var(--radius-pill, 999px);
  --kit-btn-weight: 850;
  --kit-btn-letter: .2px;
  --kit-btn-shadow: 0 10px 22px rgba(0,0,0,.18);
  --kit-btn-shadow-hover: 0 16px 36px rgba(0,0,0,.22);

  --kit-title-weight: 900;
  --kit-title-letter: .8px;
  --kit-title-transform: uppercase;

  --kit-badge-radius: 999px;
  --kit-badge-bg: var(--accent);
  --kit-badge-fg: var(--bg);

  --kit-search-bg: color-mix(in srgb, var(--surface) 86%, rgba(0,0,0,.35));
  --kit-search-border: color-mix(in srgb, var(--border) 80%, transparent);
  --kit-search-fg: var(--text);
}

/* Header + brand */
body[class*="theme-preset-"] .ch-header .header{
  background: var(--kit-header-bg) !important;
  color: var(--kit-header-fg);
  border-bottom: 1px solid var(--kit-header-border);
  box-shadow: var(--kit-header-shadow);
}
body[class*="theme-preset-"] .brand__title{
  font-weight: var(--kit-title-weight) !important;
  letter-spacing: var(--kit-title-letter) !important;
  text-transform: var(--kit-title-transform) !important;
}
body[class*="theme-preset-"] .badge-car--in-brand{
  background: var(--kit-badge-bg) !important;
  color: var(--kit-badge-fg) !important;
  border-radius: var(--kit-badge-radius) !important;
  padding: 6px 10px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--kit-badge-bg) 24%, transparent);
}

/* Navbar */
body[class*="theme-preset-"] .navbar-car{
  background: var(--kit-nav-bg) !important;
  color: var(--kit-nav-fg);
  border-bottom: 1px solid var(--kit-nav-border);
}
body[class*="theme-preset-"] .navbar-car a{color: inherit;}

/* Buttons (preset kit)
   Same rule: apply ONLY when CTA theme-style is enabled.
*/
body.site.cta-theme-style[class*="theme-preset-"] .btn-car{
  border-radius: var(--kit-btn-radius) !important;
  font-weight: var(--kit-btn-weight) !important;
  letter-spacing: var(--kit-btn-letter) !important;
  box-shadow: var(--kit-btn-shadow) !important;
}
body.site.cta-theme-style[class*="theme-preset-"] .btn-car:hover{
  box-shadow: var(--kit-btn-shadow-hover) !important;
  transform: translateY(-1px);
}

/* Search: pinned must never be transparent and must inherit preset colors */
body[class*="theme-preset-"] .ch-search--pin-fixed{
  --ch-search-bg: var(--kit-search-bg);
  --ch-search-border: var(--kit-search-border);
  --ch-search-fg: var(--kit-search-fg);
}
body[class*="theme-preset-"] .ch-search--pin-fixed,
body[class*="theme-preset-"] .ch-search--pin-fixed .mod-finder,
body[class*="theme-preset-"] .ch-search--pin-fixed .awesomplete{
  background: var(--kit-search-bg) !important;
}
body[class*="theme-preset-"] .ch-search--pin-fixed .form-control{
  color: var(--kit-search-fg) !important;
}
body[class*="theme-preset-"] .ch-search--pin-fixed .form-control::placeholder{
  color: color-mix(in srgb, var(--kit-search-fg) 55%, transparent);
}
/* Common fixed markers */
body[class*="theme-preset-"] .ch-search.is-fixed,
body[class*="theme-preset-"] .ch-search[data-ch-search-fixed="1"],
body[class*="theme-preset-"] .ch-search--pin-fixed.is-fixed{
  background: var(--kit-search-bg) !important;
  border-color: var(--kit-search-border) !important;
  backdrop-filter: blur(12px);
}

/* 2) Extra-strong brand differences (light) */
body.site.cta-theme-style.theme-preset-amazon.theme-light{
  --kit-title-transform: none;
  --kit-title-letter: .2px;
  --kit-btn-radius: 12px;
  --kit-badge-bg: #ff9900;
  --kit-badge-fg: #111827;
  --kit-search-border: rgba(255,153,0,.35);
}
body.site.cta-theme-style.theme-preset-bmw.theme-light{
  --kit-title-letter: 1.2px;
  --kit-btn-radius: 8px;
  --kit-btn-weight: 900;
  --kit-search-bg: rgba(6,13,22,.92);
  --kit-search-border: rgba(0,176,255,.34);
}
body.site.cta-theme-style.theme-preset-apple.theme-light{
  --kit-title-transform: none;
  --kit-title-letter: 0px;
  --kit-btn-weight: 700;
  --kit-badge-bg: #0b1220;
  --kit-badge-fg: #ffffff;
}
body.site.cta-theme-style.theme-preset-netflix.theme-light,
body.site.cta-theme-style.theme-preset-spotify.theme-light,
body.site.cta-theme-style.theme-preset-github.theme-light,
body.site.cta-theme-style.theme-preset-stripe.theme-light,
body.site.cta-theme-style.theme-preset-adobe.theme-light,
body.site.cta-theme-style.theme-preset-audi.theme-light,
body.site.cta-theme-style.theme-preset-mercedes.theme-light{
  --kit-header-shadow: 0 18px 56px rgba(0,0,0,.30);
}

/* 3) Dark variants tweaks */
body.site.cta-theme-style.theme-preset-amazon.theme-dark{
  --kit-title-transform: none;
  --kit-btn-radius: 12px;
  --kit-badge-bg: #ff9900;
  --kit-badge-fg: #111827;
  --kit-search-border: rgba(255,153,0,.30);
}
body.site.cta-theme-style.theme-preset-apple.theme-dark{
  --kit-title-transform: none;
  --kit-title-letter: 0px;
  --kit-badge-bg: #ffffff;
  --kit-badge-fg: #0b1220;
}