/* ============================================================
   CoreyChem Design System v2.0
   Brand: Professional Chemical B2B
   Primary: #0A3D62 (Deep Blue)
   Accent: #2980B9 (Bright Blue)
   ============================================================ */

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Brand Colors */
  --cc-brand: #0A3D62;
  --cc-brand-light: #1A5C85;
  --cc-brand-lighter: #2980B9;
  --cc-brand-dark: #062A44;
  --cc-brand-accent: #C0392B;

  /* Semantic Colors */
  --cc-primary: var(--cc-brand);
  --cc-primary-foreground: #FFFFFF;
  --cc-primary-hover: var(--cc-brand-dark);
  --cc-primary-active: #041E33;
  --cc-success: #1B7A4E;
  --cc-warning: #B7791F;
  --cc-error: #B91C1C;
  --cc-info: var(--cc-brand-lighter);

  /* Background */
  --cc-background: #FFFFFF;
  --cc-background-alt: #F5F7FA;
  --cc-background-muted: #EDF1F5;
  --cc-background-dark: var(--cc-brand-dark);

  /* Foreground */
  --cc-foreground: #1A2332;
  --cc-foreground-muted: #4A5568;
  --cc-foreground-subtle: #718096;
  --cc-foreground-inverse: #FFFFFF;

  /* Card */
  --cc-card: #FFFFFF;
  --cc-card-foreground: #1A2332;
  --cc-card-border: #E2E8F0;
  --cc-card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --cc-card-shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);

  /* Border */
  --cc-border: #E2E8F0;
  --cc-border-strong: #CBD5E0;
  --cc-border-focus: var(--cc-brand-lighter);

  /* Input */
  --cc-input-bg: #FFFFFF;
  --cc-input-border: #CBD5E0;
  --cc-input-focus: var(--cc-brand-lighter);
  --cc-input-placeholder: #A0AEC0;

  /* Ring */
  --cc-ring: rgba(41,128,185,0.3);

  /* Typography */
  --cc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;

  /* Font Sizes */
  --cc-text-xs: 0.75rem;
  --cc-text-sm: 0.8125rem;
  --cc-text-base: 0.9375rem;
  --cc-text-lg: 1.0625rem;
  --cc-text-xl: 1.25rem;
  --cc-text-2xl: 1.5rem;
  --cc-text-3xl: 1.875rem;
  --cc-text-4xl: 2.25rem;
  --cc-text-5xl: 3rem;

  /* Line Heights */
  --cc-leading-tight: 1.25;
  --cc-leading-snug: 1.375;
  --cc-leading-normal: 1.5;
  --cc-leading-relaxed: 1.625;

  /* Font Weights */
  --cc-weight-normal: 400;
  --cc-weight-medium: 500;
  --cc-weight-semibold: 600;
  --cc-weight-bold: 700;

  /* Spacing */
  --cc-space-1: 0.25rem;
  --cc-space-2: 0.5rem;
  --cc-space-3: 0.75rem;
  --cc-space-4: 1rem;
  --cc-space-5: 1.25rem;
  --cc-space-6: 1.5rem;
  --cc-space-8: 2rem;
  --cc-space-10: 2.5rem;
  --cc-space-12: 3rem;
  --cc-space-16: 4rem;
  --cc-space-20: 5rem;

  /* Border Radius */
  --cc-radius-sm: 4px;
  --cc-radius-md: 6px;
  --cc-radius-lg: 8px;
  --cc-radius-xl: 12px;
  --cc-radius-2xl: 16px;
  --cc-radius-full: 9999px;

  /* Shadows */
  --cc-shadow-sm: 0 1px 2px rgba(0,0,0,0.03);
  --cc-shadow-md: 0 2px 8px rgba(0,0,0,0.06);
  --cc-shadow-lg: 0 4px 16px rgba(0,0,0,0.08);
  --cc-shadow-xl: 0 8px 24px rgba(0,0,0,0.10);

  /* Transitions */
  --cc-transition-fast: 150ms ease;
  --cc-transition-base: 200ms ease;
  --cc-transition-slow: 300ms ease;

  /* Z-Index */
  --cc-z-dropdown: 100;
  --cc-z-sticky: 200;
  --cc-z-modal: 300;
  --cc-z-tooltip: 400;
  --cc-z-toast: 500;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--cc-font-sans);
  font-size: var(--cc-text-base);
  line-height: var(--cc-leading-normal);
  color: var(--cc-foreground);
  background: var(--cc-background);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cc-brand-lighter); text-decoration: none; transition: color var(--cc-transition-fast); }
a:hover { color: var(--cc-brand); }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ---------- Layout ---------- */
.cc-container { max-width: 80rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 640px) { .cc-container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .cc-container { padding: 0 2rem; } }

.cc-section { padding: var(--cc-space-16) 0; }
.cc-section-alt { background: var(--cc-background-alt); }
.cc-section-dark { background: var(--cc-background-dark); color: var(--cc-foreground-inverse); }

/* ---------- Typography ---------- */
.cc-heading-1 { font-size: var(--cc-text-4xl); font-weight: var(--cc-weight-bold); line-height: var(--cc-leading-tight); letter-spacing: -0.02em; }
.cc-heading-2 { font-size: var(--cc-text-3xl); font-weight: var(--cc-weight-bold); line-height: var(--cc-leading-tight); letter-spacing: -0.01em; }
.cc-heading-3 { font-size: var(--cc-text-2xl); font-weight: var(--cc-weight-semibold); line-height: var(--cc-leading-snug); }
.cc-heading-4 { font-size: var(--cc-text-xl); font-weight: var(--cc-weight-semibold); line-height: var(--cc-leading-snug); }
.cc-heading-5 { font-size: var(--cc-text-lg); font-weight: var(--cc-weight-medium); line-height: var(--cc-leading-snug); }
.cc-text-lead { font-size: var(--cc-text-lg); line-height: var(--cc-leading-relaxed); color: var(--cc-foreground-muted); }
.cc-text-body { font-size: var(--cc-text-base); line-height: var(--cc-leading-relaxed); color: var(--cc-foreground-muted); }
.cc-text-small { font-size: var(--cc-text-sm); color: var(--cc-foreground-subtle); }
.cc-text-mono { font-family: var(--cc-font-mono); font-size: var(--cc-text-sm); }
.cc-text-brand { color: var(--cc-brand-lighter); font-weight: var(--cc-weight-medium); }

/* ---------- Buttons ---------- */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: var(--cc-text-sm); font-weight: var(--cc-weight-semibold);
  border-radius: var(--cc-radius-md);
  transition: all var(--cc-transition-fast);
  text-decoration: none; white-space: nowrap;
}
.cc-btn:focus-visible { outline: 2px solid var(--cc-ring); outline-offset: 2px; }

.cc-btn-primary {
  background: var(--cc-primary); color: var(--cc-primary-foreground);
}
.cc-btn-primary:hover { background: var(--cc-primary-hover); color: var(--cc-primary-foreground); }
.cc-btn-primary:active { background: var(--cc-primary-active); }

.cc-btn-secondary {
  background: transparent; color: var(--cc-primary);
  border: 1.5px solid var(--cc-primary);
}
.cc-btn-secondary:hover { background: var(--cc-primary); color: var(--cc-primary-foreground); }

.cc-btn-outline {
  background: transparent; color: var(--cc-foreground);
  border: 1px solid var(--cc-border-strong);
}
.cc-btn-outline:hover { border-color: var(--cc-primary); color: var(--cc-primary); }

.cc-btn-ghost {
  background: transparent; color: var(--cc-brand-lighter);
  padding: 0.375rem 0.75rem;
}
.cc-btn-ghost:hover { background: var(--cc-background-muted); color: var(--cc-brand); }

.cc-btn-lg { padding: 0.875rem 1.75rem; font-size: var(--cc-text-base); border-radius: var(--cc-radius-lg); }
.cc-btn-sm { padding: 0.375rem 0.875rem; font-size: var(--cc-text-xs); }
.cc-btn-block { width: 100%; }

/* ---------- Cards ---------- */
.cc-card {
  background: var(--cc-card);
  border: 1px solid var(--cc-card-border);
  border-radius: var(--cc-radius-lg);
  box-shadow: var(--cc-card-shadow);
  transition: box-shadow var(--cc-transition-base), transform var(--cc-transition-base);
  overflow: hidden;
}
.cc-card:hover { box-shadow: var(--cc-card-shadow-hover); transform: translateY(-2px); }

.cc-card-body { padding: var(--cc-space-5); }
.cc-card-header { padding: var(--cc-space-5) var(--cc-space-5) 0; }
.cc-card-footer { padding: 0 var(--cc-space-5) var(--cc-space-5); }

/* ---------- Product Card ---------- */
.cc-product-card {
  display: flex; flex-direction: column;
  background: var(--cc-card); border: 1px solid var(--cc-card-border);
  border-radius: var(--cc-radius-lg); overflow: hidden;
  transition: all var(--cc-transition-base);
}
.cc-product-card:hover { box-shadow: var(--cc-shadow-lg); border-color: var(--cc-border-strong); }

.cc-product-card-img {
  width: 100%; aspect-ratio: 1; object-fit: contain;
  padding: var(--cc-space-6); background: var(--cc-background-alt);
}
.cc-product-card-body { padding: var(--cc-space-4) var(--cc-space-5); flex: 1; display: flex; flex-direction: column; }
.cc-product-card-name { font-size: var(--cc-text-base); font-weight: var(--cc-weight-semibold); color: var(--cc-foreground); margin-bottom: var(--cc-space-1); }
.cc-product-card-name a { color: inherit; }
.cc-product-card-name a:hover { color: var(--cc-brand-lighter); }
.cc-product-card-cas { font-family: var(--cc-font-mono); font-size: var(--cc-text-xs); color: var(--cc-foreground-subtle); margin-bottom: var(--cc-space-2); }
.cc-product-card-formula { font-size: var(--cc-text-xs); color: var(--cc-foreground-muted); }
.cc-product-card-footer { padding: var(--cc-space-3) var(--cc-space-5); border-top: 1px solid var(--cc-border); display: flex; gap: var(--cc-space-2); }

/* ---------- Blog Card ---------- */
.cc-blog-card {
  display: flex; flex-direction: column;
  background: var(--cc-card); border: 1px solid var(--cc-card-border);
  border-radius: var(--cc-radius-lg); overflow: hidden;
  transition: all var(--cc-transition-base);
}
.cc-blog-card:hover { box-shadow: var(--cc-shadow-lg); }
.cc-blog-card-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.cc-blog-card-body { padding: var(--cc-space-5); flex: 1; }
.cc-blog-card-meta { display: flex; align-items: center; gap: var(--cc-space-3); margin-bottom: var(--cc-space-3); }
.cc-blog-card-category { font-size: var(--cc-text-xs); font-weight: var(--cc-weight-semibold); color: var(--cc-brand-lighter); text-transform: uppercase; letter-spacing: 0.05em; }
.cc-blog-card-date { font-size: var(--cc-text-xs); color: var(--cc-foreground-subtle); }
.cc-blog-card-title { font-size: var(--cc-text-lg); font-weight: var(--cc-weight-semibold); line-height: var(--cc-leading-snug); margin-bottom: var(--cc-space-2); }
.cc-blog-card-title a { color: var(--cc-foreground); }
.cc-blog-card-title a:hover { color: var(--cc-brand-lighter); }
.cc-blog-card-excerpt { font-size: var(--cc-text-sm); color: var(--cc-foreground-muted); line-height: var(--cc-leading-relaxed); }

/* ---------- Badges & Tags ---------- */
.cc-badge {
  display: inline-flex; align-items: center; padding: 0.25rem 0.625rem;
  font-size: var(--cc-text-xs); font-weight: var(--cc-weight-medium);
  border-radius: var(--cc-radius-full);
  background: var(--cc-background-muted); color: var(--cc-foreground-muted);
}
.cc-badge-brand { background: rgba(41,128,185,0.1); color: var(--cc-brand-lighter); }
.cc-badge-success { background: rgba(27,122,78,0.1); color: var(--cc-success); }
.cc-badge-warning { background: rgba(183,121,31,0.1); color: var(--cc-warning); }
.cc-badge-error { background: rgba(185,28,28,0.1); color: var(--cc-error); }

/* ---------- Forms ---------- */
.cc-form-group { margin-bottom: var(--cc-space-5); }
.cc-label { display: block; font-size: var(--cc-text-sm); font-weight: var(--cc-weight-medium); color: var(--cc-foreground); margin-bottom: var(--cc-space-2); }
.cc-label-required::after { content: " *"; color: var(--cc-error); }

.cc-input, .cc-textarea, .cc-select {
  display: block; width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: var(--cc-text-base); font-family: var(--cc-font-sans);
  color: var(--cc-foreground); background: var(--cc-input-bg);
  border: 1px solid var(--cc-input-border); border-radius: var(--cc-radius-md);
  transition: border-color var(--cc-transition-fast), box-shadow var(--cc-transition-fast);
}
.cc-input::placeholder, .cc-textarea::placeholder { color: var(--cc-input-placeholder); }
.cc-input:focus, .cc-textarea:focus, .cc-select:focus {
  outline: none; border-color: var(--cc-input-focus);
  box-shadow: 0 0 0 3px var(--cc-ring);
}
.cc-textarea { min-height: 120px; resize: vertical; }
.cc-input-error { border-color: var(--cc-error); }
.cc-input-error:focus { box-shadow: 0 0 0 3px rgba(185,28,28,0.15); }
.cc-form-error { font-size: var(--cc-text-xs); color: var(--cc-error); margin-top: var(--cc-space-1); }

/* ---------- Navigation ---------- */
.cc-nav { background: var(--cc-background); border-bottom: 1px solid var(--cc-border); }
.cc-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 4rem; }
.cc-nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.cc-nav-logo img { height: 2.25rem; width: auto; }
.cc-nav-links { display: flex; align-items: center; gap: var(--cc-space-5); list-style: none; }
.cc-nav-link {
  font-size: 1.0625rem; font-weight: var(--cc-weight-medium);
  color: var(--cc-foreground); padding: var(--cc-space-3) var(--cc-space-1);
  position: relative; transition: color var(--cc-transition-fast);
}
.cc-nav-link:hover { color: var(--cc-brand-lighter); }
.cc-nav-link.is-active { color: var(--cc-brand-lighter); font-weight: var(--cc-weight-semibold); }
.cc-nav-link.is-active::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 2px; background: var(--cc-brand-lighter);
}
.cc-nav-cta { display: flex; align-items: center; gap: var(--cc-space-3); }

/* Top utility bar */
.cc-topbar {
  background: var(--cc-brand-dark); color: rgba(255,255,255,0.85);
  font-size: var(--cc-text-xs); padding: var(--cc-space-2) 0;
}
.cc-topbar a { color: rgba(255,255,255,0.85); }
.cc-topbar a:hover { color: #fff; }

/* Mobile menu */
.cc-mobile-menu-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--cc-radius-md); color: var(--cc-foreground); }
.cc-mobile-menu-btn:hover { background: var(--cc-background-muted); }
.cc-mobile-menu { display: none; padding: var(--cc-space-4) 0; border-top: 1px solid var(--cc-border); }
.cc-mobile-menu.is-open { display: block; }
.cc-mobile-menu .cc-nav-link { display: block; padding: var(--cc-space-3) 0; font-size: var(--cc-text-base); }

/* ---------- Hero ---------- */
.cc-hero {
  position: relative; padding: var(--cc-space-20) 0;
  background: linear-gradient(135deg, var(--cc-brand-dark) 0%, var(--cc-brand) 50%, var(--cc-brand-light) 100%);
  color: var(--cc-foreground-inverse); overflow: hidden;
}
.cc-hero::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.cc-hero-content { position: relative; z-index: 1; }
/* Hero with photo background */
.cc-hero-has-img { background: var(--cc-brand-dark); }
.cc-hero-has-img::before { display: none; }
.cc-hero-bg {
  position: absolute; inset: 0;
  background: url("/static/images/lab-panorama.webp") center 35% / cover no-repeat;
}
.cc-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(6,42,68,0.94) 0%, rgba(10,61,98,0.88) 55%, rgba(26,92,133,0.78) 100%);
}
.cc-hero-title { font-size: var(--cc-text-5xl); font-weight: var(--cc-weight-bold); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--cc-space-6); }
.cc-hero-subtitle { font-size: var(--cc-text-xl); line-height: var(--cc-leading-relaxed); opacity: 0.9; margin-bottom: var(--cc-space-8); max-width: 36rem; }
.cc-hero-actions { display: flex; flex-wrap: wrap; gap: var(--cc-space-4); }
.cc-hero .cc-btn-primary { background: #fff; color: var(--cc-brand); }
.cc-hero .cc-btn-primary:hover { background: rgba(255,255,255,0.9); color: var(--cc-brand-dark); }
.cc-hero .cc-btn-secondary { border-color: rgba(255,255,255,0.4); color: #fff; }
.cc-hero .cc-btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }

/* ---------- Stats Bar ---------- */
.cc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cc-space-6); }
@media (min-width: 768px) { .cc-stats { grid-template-columns: repeat(4, 1fr); } }
.cc-stat { text-align: center; }
.cc-stat-number { font-size: var(--cc-text-4xl); font-weight: var(--cc-weight-bold); color: var(--cc-brand-lighter); line-height: 1; margin-bottom: var(--cc-space-2); }
.cc-stat-label { font-size: var(--cc-text-sm); color: var(--cc-foreground-muted); font-weight: var(--cc-weight-medium); }

/* ---------- Breadcrumbs ---------- */
.cc-breadcrumb { display: flex; align-items: center; gap: var(--cc-space-2); font-size: var(--cc-text-sm); color: var(--cc-foreground-subtle); margin-bottom: var(--cc-space-6); }
.cc-breadcrumb a { color: var(--cc-brand-lighter); }
.cc-breadcrumb a:hover { color: var(--cc-brand); }
.cc-breadcrumb-sep { color: var(--cc-border-strong); }
.cc-breadcrumb-current { color: var(--cc-foreground-muted); }

/* ---------- Tables ---------- */
.cc-table { width: 100%; border-collapse: collapse; font-size: var(--cc-text-sm); }
.cc-table th { text-align: left; padding: var(--cc-space-3) var(--cc-space-4); font-weight: var(--cc-weight-semibold); color: var(--cc-foreground); border-bottom: 2px solid var(--cc-border-strong); white-space: nowrap; }
.cc-table td { padding: var(--cc-space-3) var(--cc-space-4); border-bottom: 1px solid var(--cc-border); color: var(--cc-foreground-muted); vertical-align: top; }
.cc-table tr:hover td { background: var(--cc-background-alt); }
.cc-table-mono td { font-family: var(--cc-font-mono); font-size: var(--cc-text-xs); }

/* ---------- Spec Table (product detail) ---------- */
.cc-spec-table { width: 100%; border-collapse: collapse; }
.cc-spec-table td { padding: var(--cc-space-3) var(--cc-space-4); border-bottom: 1px solid var(--cc-border); font-size: var(--cc-text-sm); }
.cc-spec-table td:first-child { font-weight: var(--cc-weight-medium); color: var(--cc-foreground-muted); width: 40%; }
.cc-spec-table td:last-child { color: var(--cc-foreground); font-family: var(--cc-font-mono); font-size: var(--cc-text-xs); word-break: break-all; }

/* ---------- Pagination ---------- */
.cc-pagination { display: flex; align-items: center; justify-content: center; gap: var(--cc-space-2); margin-top: var(--cc-space-8); }
.cc-pagination-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem;
  font-size: var(--cc-text-sm); font-weight: var(--cc-weight-medium);
  color: var(--cc-foreground); border: 1px solid var(--cc-border);
  border-radius: var(--cc-radius-md); transition: all var(--cc-transition-fast);
}
.cc-pagination-btn:hover { border-color: var(--cc-brand-lighter); color: var(--cc-brand-lighter); }
.cc-pagination-btn.is-active { background: var(--cc-primary); color: var(--cc-primary-foreground); border-color: var(--cc-primary); }
.cc-pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---------- Footer ---------- */
.cc-footer { background: var(--cc-brand-dark); color: rgba(255,255,255,0.7); padding: var(--cc-space-12) 0 var(--cc-space-6); }
.cc-footer a { color: rgba(255,255,255,0.7); }
.cc-footer a:hover { color: #fff; }
.cc-footer-title { color: #fff; font-size: var(--cc-text-sm); font-weight: var(--cc-weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--cc-space-4); }
.cc-footer-bottom { margin-top: var(--cc-space-8); padding-top: var(--cc-space-6); border-top: 1px solid rgba(255,255,255,0.1); font-size: var(--cc-text-xs); color: rgba(255,255,255,0.5); }

/* ---------- Floating CTA ---------- */
.cc-float-cta {
  position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: var(--cc-z-sticky);
  opacity: 0; visibility: hidden; transform: translateY(1rem);
  transition: all var(--cc-transition-slow);
}
.cc-float-cta.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.cc-float-cta .cc-btn { box-shadow: var(--cc-shadow-lg); }

/* ---------- Toast ---------- */
.cc-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem);
  padding: var(--cc-space-3) var(--cc-space-5); border-radius: var(--cc-radius-md);
  font-size: var(--cc-text-sm); font-weight: var(--cc-weight-medium);
  box-shadow: var(--cc-shadow-lg); z-index: var(--cc-z-toast);
  opacity: 0; visibility: hidden; transition: all var(--cc-transition-slow);
  max-width: 90vw;
}
.cc-toast.is-visible { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.cc-toast-success { background: var(--cc-success); color: #fff; }
.cc-toast-error { background: var(--cc-error); color: #fff; }

/* ---------- Loading Spinner ---------- */
.cc-spinner {
  display: inline-block; width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--cc-border); border-top-color: var(--cc-brand-lighter);
  border-radius: 50%; animation: cc-spin 0.6s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }

.cc-loading { display: flex; align-items: center; justify-content: center; padding: var(--cc-space-12); }
.cc-loading .cc-spinner { width: 2rem; height: 2rem; border-width: 3px; }

/* ---------- Grid Utilities ---------- */
.cc-grid { display: grid; gap: var(--cc-space-6); }
.cc-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cc-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .cc-grid-4 { grid-template-columns: repeat(2, 1fr); } .cc-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cc-grid-4, .cc-grid-3, .cc-grid-2 { grid-template-columns: 1fr; } }

/* ---------- Flex Utilities ---------- */
.cc-flex { display: flex; }
.cc-flex-col { flex-direction: column; }
.cc-items-center { align-items: center; }
.cc-justify-between { justify-content: space-between; }
.cc-gap-2 { gap: var(--cc-space-2); }
.cc-gap-3 { gap: var(--cc-space-3); }
.cc-gap-4 { gap: var(--cc-space-4); }
.cc-gap-6 { gap: var(--cc-space-6); }
.cc-flex-wrap { flex-wrap: wrap; }

/* ---------- Spacing Utilities ---------- */
.cc-mb-2 { margin-bottom: var(--cc-space-2); }
.cc-mb-3 { margin-bottom: var(--cc-space-3); }
.cc-mb-4 { margin-bottom: var(--cc-space-4); }
.cc-mb-6 { margin-bottom: var(--cc-space-6); }
.cc-mb-8 { margin-bottom: var(--cc-space-8); }
.cc-mt-4 { margin-top: var(--cc-space-4); }
.cc-mt-6 { margin-top: var(--cc-space-6); }
.cc-mt-8 { margin-top: var(--cc-space-8); }
.cc-mt-12 { margin-top: var(--cc-space-12); }

/* ---------- Text Utilities ---------- */
.cc-text-center { text-align: center; }
.cc-text-muted { color: var(--cc-foreground-muted); }
.cc-text-subtle { color: var(--cc-foreground-subtle); }
.cc-text-xs { font-size: var(--cc-text-xs); }
.cc-text-sm { font-size: var(--cc-text-sm); }
.cc-text-lg { font-size: var(--cc-text-lg); }
.cc-font-semibold { font-weight: var(--cc-weight-semibold); }
.cc-font-bold { font-weight: var(--cc-weight-bold); }

/* ---------- Visibility ---------- */
.cc-hidden { display: none !important; }
@media (max-width: 767px) { .cc-hidden-mobile { display: none !important; } }
@media (min-width: 768px) { .cc-hidden-desktop { display: none !important; } }

/* ---------- Search Box ---------- */
.cc-search-box { position: relative; max-width: 32rem; margin: 0 auto; }
.cc-search-input {
  width: 100%; padding: 0.875rem 1.25rem 0.875rem 3rem;
  font-size: var(--cc-text-base);
  border: 2px solid rgba(255,255,255,0.2); border-radius: var(--cc-radius-full);
  background: rgba(255,255,255,0.1); color: #fff;
  backdrop-filter: blur(8px);
  transition: all var(--cc-transition-base);
}
.cc-search-input::placeholder { color: rgba(255,255,255,0.5); }
.cc-search-input:focus { outline: none; border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.15); box-shadow: 0 0 0 4px rgba(255,255,255,0.1); }
.cc-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.5); pointer-events: none; }
.cc-search-btn {
  position: absolute; right: 0.375rem; top: 50%; transform: translateY(-50%);
  padding: 0.5rem 1.25rem; background: #fff; color: var(--cc-brand);
  border-radius: var(--cc-radius-full); font-size: var(--cc-text-sm); font-weight: var(--cc-weight-semibold);
  transition: all var(--cc-transition-fast);
}
.cc-search-btn:hover { background: rgba(255,255,255,0.9); }

/* ---------- Category Pills ---------- */
.cc-pills { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); }
.cc-pill {
  display: inline-flex; align-items: center; padding: 0.375rem 0.875rem;
  font-size: var(--cc-text-sm); font-weight: var(--cc-weight-medium);
  border-radius: var(--cc-radius-full);
  border: 1px solid var(--cc-border); color: var(--cc-foreground-muted);
  transition: all var(--cc-transition-fast); cursor: pointer;
}
.cc-pill:hover, .cc-pill.is-active {
  border-color: var(--cc-brand-lighter); color: var(--cc-brand-lighter);
  background: rgba(41,128,185,0.05);
}

/* ---------- Image Gallery ---------- */
.cc-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--cc-space-3); }
@media (min-width: 768px) { .cc-gallery { grid-template-columns: repeat(3, 1fr); } }
.cc-gallery-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--cc-radius-md); transition: transform var(--cc-transition-base); }
.cc-gallery-img:hover { transform: scale(1.02); }

/* ---------- Feature List ---------- */
.cc-feature { display: flex; gap: var(--cc-space-4); }
.cc-feature-icon {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center;
  background: rgba(41,128,185,0.1); border-radius: var(--cc-radius-md);
  color: var(--cc-brand-lighter); font-size: 1.25rem;
}
.cc-feature-content h4 { font-size: var(--cc-text-base); font-weight: var(--cc-weight-semibold); margin-bottom: var(--cc-space-1); }
.cc-feature-content p { font-size: var(--cc-text-sm); color: var(--cc-foreground-muted); line-height: var(--cc-leading-relaxed); }

/* ---------- Responsive Hero ---------- */
@media (max-width: 768px) {
  .cc-hero { padding: var(--cc-space-12) 0; }
  .cc-hero-title { font-size: var(--cc-text-3xl); }
  .cc-hero-subtitle { font-size: var(--cc-text-base); }
  .cc-section { padding: var(--cc-space-10) 0; }
  .cc-heading-1 { font-size: var(--cc-text-3xl); }
  .cc-heading-2 { font-size: var(--cc-text-2xl); }
}

/* ---------- Print ---------- */
@media print {
  .cc-nav, .cc-footer, .cc-float-cta, .cc-topbar { display: none; }
}