/* Carbon Fiber — Base CSS */
/* Template: industrial-dark, matte black with steel blue highlights */
/* Colors overridden by variants/{color}/colors.css */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --color-primary: #4682B4;
  --color-secondary: #12121A;
  --color-accent: #00A8E8;
  --color-text: #D4D4D8;
  --color-text-light: #8A8A96;
  --color-bg: #0A0A0F;
  --color-bg-alt: #070710;
  --color-border: #1E1E2E;
  --color-muted: #101018;

  --font-heading: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --fs-hero: clamp(3.5rem, 8vw, 7rem);
  --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
  --fs-h2: clamp(2rem, 4vw, 3.25rem);
  --fs-h3: clamp(1.35rem, 2.5vw, 1.85rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-heading: 1.0;
  --lh-body: 1.7;

  --space-section: 6rem;
  --space-component: 2.5rem;
  --space-element: 1rem;

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.6);
  --shadow-hover: 0 12px 40px rgba(70, 130, 180, 0.12), 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-glow-primary: 0 0 20px rgba(70, 130, 180, 0.2), 0 0 40px rgba(70, 130, 180, 0.08);
  --shadow-glow-accent: 0 0 20px rgba(0, 168, 232, 0.25), 0 0 40px rgba(0, 168, 232, 0.1);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.8);

  --max-width: 1200px;
  --container-padding: 1.5rem;

  --steel: var(--color-primary);
  --electric: var(--color-accent);
  --gradient-carbon: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-carbon-h: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-dark: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-alt) 100%);

  --tilt-perspective: 800px;
}

/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-primary); }

/* ===== DOT GRID PATTERN OVERLAY ===== */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  background-image: radial-gradient(circle, rgba(70, 130, 180, 0.4) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ===== TYPOGRAPHY ===== */
h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: #FFFFFF;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: #FFFFFF;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: #FFFFFF;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-text);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
p { color: var(--color-text-light); }

/* ===== LAYOUT ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section {
  padding: var(--space-section) 0;
  position: relative;
}
.section--muted { background: var(--color-muted); }
.section--dark { background: var(--color-bg-alt); }
.section--primary {
  background: var(--color-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.section__header {
  text-align: center;
  margin-bottom: var(--space-component);
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.section__subtitle {
  color: var(--color-text-light);
  font-size: clamp(1rem, 1.75vw, 1.15rem);
  margin-top: 0.75rem;
  line-height: var(--lh-body);
  font-family: var(--font-body);
  font-weight: 300;
}

/* ===== ANIMATIONS ===== */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes carbon-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes counter-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes dot-drift {
  0% { background-position: 0 0; }
  100% { background-position: 24px 24px; }
}

@keyframes steel-sweep {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes line-expand {
  from { width: 0; }
  to { width: 60px; }
}

/* Scroll-triggered reveals */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.1rem;
  cursor: pointer;
  border: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  position: relative;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
}
/* Steel sweep on hover */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: skewX(-15deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.btn:hover::after {
  left: 120%;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-bg);
}
.btn--primary:hover {
  box-shadow: var(--shadow-glow-primary);
  color: var(--color-bg);
  transform: translateY(-2px);
  filter: brightness(1.15);
}
.btn--accent {
  background: var(--color-accent);
  color: #FFFFFF;
}
.btn--accent:hover {
  box-shadow: var(--shadow-glow-accent);
  color: #FFFFFF;
  transform: translateY(-2px);
  filter: brightness(1.15);
}
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
}
.btn--outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 20px rgba(70, 130, 180, 0.1);
}
.btn--ghost {
  background: rgba(70, 130, 180, 0.06);
  color: var(--color-primary);
  border: 1px solid rgba(70, 130, 180, 0.15);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(70, 130, 180, 0.12);
  color: #FFFFFF;
  border-color: var(--color-primary);
}
.btn--gradient {
  background: var(--gradient-carbon);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
  color: #FFFFFF;
  font-weight: 400;
  border: none;
}
.btn--gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-accent);
  color: #FFFFFF;
}
.btn--lg { padding: 1.15rem 3rem; font-size: 1.2rem; letter-spacing: 0.15em; }
.btn--sm { padding: 0.5rem 1.25rem; font-size: 0.95rem; }

/* ===== GRID ===== */
.grid { display: grid; gap: var(--space-component); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  :root { --space-section: 4rem; --container-padding: 1rem; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== CARDS (3D TILT) ===== */
.card {
  background: var(--color-muted);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-component);
  border: 1px solid var(--color-border);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
/* Steel highlight edge on top of cards */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-carbon-h);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.card:hover {
  border-color: var(--color-border);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.card:hover::before {
  opacity: 0.7;
}
.card img {
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
}
.card h3 { margin-bottom: 0.5rem; color: #FFFFFF; }
.card p { color: var(--color-text-light); }

/* Card variant: carbon edge */
.card--carbon {
  background: rgba(70, 130, 180, 0.02);
  border-color: rgba(70, 130, 180, 0.1);
}
.card--carbon:hover {
  box-shadow: var(--shadow-glow-primary);
  border-color: rgba(70, 130, 180, 0.25);
}

/* Card variant: accent glow */
.card--accent-glow:hover {
  box-shadow: var(--shadow-glow-accent);
}
.card--accent-glow:hover::before {
  background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
  opacity: 0.8;
}

/* 3D tilt card — JS adds inline transform on mousemove */
.tilt-card {
  transition: transform 0.15s ease-out, box-shadow 0.4s ease;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: var(--tilt-perspective);
}
.tilt-card:hover {
  box-shadow: var(--shadow-hover);
}

/* ===== HERO — FULL-SCREEN WITH DOT GRID PATTERN ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding-top: 5rem;
  text-align: center;
}
/* Hero background image */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
/* Dark overlay on hero bg */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 10, 15, 0.85) 0%,
    rgba(10, 10, 15, 0.7) 40%,
    rgba(10, 10, 15, 0.9) 100%
  );
  z-index: 1;
}
/* Dot grid pattern overlay on hero */
.hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0.12;
  background-image: radial-gradient(circle, rgba(70, 130, 180, 0.5) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: dot-drift 20s linear infinite;
}
/* Content */
.hero__content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  padding: var(--space-section) var(--container-padding);
}
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #FFFFFF;
  letter-spacing: 0.08em;
  line-height: 0.95;
  text-transform: uppercase;
}
.hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--color-text-light);
  margin-bottom: 2.5rem;
  line-height: var(--lh-body);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-weight: 300;
}
.hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}
/* Steel accent line above hero title */
.hero__steel-line {
  width: 60px;
  height: 2px;
  background: var(--gradient-carbon-h);
  margin: 0 auto 2rem;
  box-shadow: 0 0 10px rgba(70, 130, 180, 0.3);
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: calc(var(--space-section) * 2) 0 var(--space-section);
  }
  .hero__content {
    max-width: 100%;
  }
  .hero__pattern {
    background-size: 24px 24px;
  }
}

/* ===== NAVBAR ===== */
.nav-bar {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
}
.nav-bar.scrolled {
  background: rgba(10, 10, 15, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.5);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem var(--container-padding);
  max-width: var(--max-width);
  margin: 0 auto;
}
.nav__logo {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 400;
  color: #FFFFFF;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__logo:hover {
  color: var(--color-primary);
}
.nav__links {
  display: flex;
  list-style: none;
  gap: 2.25rem;
  align-items: center;
}
.nav__links a {
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s ease;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-primary);
  transition: width 0.3s ease;
}
.nav__links a:hover {
  color: #FFFFFF;
}
.nav__links a:hover::after {
  width: 100%;
}
.nav__cta { margin-left: 1.5rem; }

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
  z-index: 200;
}
.nav__hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--color-primary);
  transition: all 0.3s ease;
}
.nav__hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav__hamburger.active span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile menu */
.nav__mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 15, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.nav__mobile-menu.active {
  display: flex;
}
.nav__mobile-menu a {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color 0.2s ease;
}
.nav__mobile-menu a:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__hamburger { display: flex; }
  .nav { padding: 1rem var(--container-padding); }
}

/* ===== FOOTER ===== */
.footer {
  background: var(--color-muted);
  color: var(--color-text-light);
  padding: var(--space-section) 0 var(--space-component);
  border-top: 1px solid var(--color-border);
  position: relative;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gradient-carbon-h);
  opacity: 0.3;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.25fr;
  gap: var(--space-component);
}
.footer h3, .footer h4 {
  color: #FFFFFF;
  font-weight: 400;
  margin-bottom: 1rem;
  letter-spacing: 0.06em;
}
.footer__brand-desc {
  color: var(--color-text-light);
  margin-top: 0.75rem;
  line-height: var(--lh-body);
  font-weight: 300;
}
.footer__social {
  display: flex;
  gap: 1rem;
  margin-top: 1.25rem;
}
.footer__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  background: rgba(70, 130, 180, 0.06);
  border: 1px solid rgba(70, 130, 180, 0.12);
  color: var(--color-primary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}
.footer__social a:hover {
  background: rgba(0, 168, 232, 0.1);
  border-color: rgba(0, 168, 232, 0.3);
  box-shadow: 0 0 12px rgba(0, 168, 232, 0.2);
  color: var(--color-accent);
  transform: translateY(-2px);
}
.footer__bottom {
  margin-top: var(--space-component);
  padding-top: var(--space-element);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--color-text-light);
  position: relative;
}
.footer__bottom::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-border);
}
.footer a { color: var(--color-text-light); }
.footer a:hover { color: var(--color-accent); }
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.5rem; }

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

/* ===== FORMS ===== */
.form__group { margin-bottom: var(--space-element); }
.form__label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text-light);
  font-family: var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.form__input, .form__textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  background: rgba(70, 130, 180, 0.02);
  color: var(--color-text);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form__input:focus, .form__textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.1), 0 0 15px rgba(0, 168, 232, 0.06);
  background: rgba(0, 168, 232, 0.02);
}
.form__textarea { min-height: 130px; resize: vertical; }

/* ===== BADGE ===== */
.badge {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-small);
  font-weight: 400;
  font-family: var(--font-heading);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(70, 130, 180, 0.08);
  color: var(--color-primary);
  border: 1px solid rgba(70, 130, 180, 0.15);
}
.badge--accent {
  background: rgba(0, 168, 232, 0.08);
  color: var(--color-accent);
  border-color: rgba(0, 168, 232, 0.15);
}

/* ===== DIVIDER ===== */
.divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-component) 0;
}
.divider--carbon {
  height: 1px;
  background: var(--gradient-carbon-h);
  margin: var(--space-component) 0;
  border: none;
  opacity: 0.35;
}

/* ===== UTILITIES ===== */
.text-center { text-align: center; }
.text-light { color: var(--color-text-light); }
.mb-1 { margin-bottom: var(--space-element); }
.mb-2 { margin-bottom: var(--space-component); }
.mt-2 { margin-top: var(--space-component); }

/* ===== CARBON FIBER SPECIFIC CLASSES ===== */

/* Steel glow */
.steel-glow {
  box-shadow: var(--shadow-glow-primary);
}
.steel-glow--accent {
  box-shadow: var(--shadow-glow-accent);
}

/* Gradient text */
.gradient-text {
  background: var(--gradient-carbon);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text--animated {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%);
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Steel sweep text */
.steel-text {
  background: linear-gradient(
    90deg,
    var(--color-text) 0%,
    var(--color-primary) 25%,
    #FFFFFF 50%,
    var(--color-primary) 75%,
    var(--color-text) 100%
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: steel-sweep 6s linear infinite;
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.75rem;
  display: inline-block;
}

/* Glass panel */
.glass {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-lg);
}

/* Icon box */
.icon-box {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  background: rgba(70, 130, 180, 0.06);
  border: 1px solid rgba(70, 130, 180, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  color: var(--color-primary);
}
.icon-box:hover,
.card:hover .icon-box {
  background: rgba(0, 168, 232, 0.1);
  border-color: rgba(0, 168, 232, 0.3);
  box-shadow: 0 0 15px rgba(0, 168, 232, 0.15);
  color: var(--color-accent);
}

/* Feature number (01, 02, etc.) */
.feature-number {
  font-family: var(--font-heading);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
  background: var(--gradient-carbon);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.3;
  margin-bottom: 1rem;
  display: block;
  letter-spacing: 0.05em;
}

/* Stat / animated counter */
.stat {
  text-align: center;
  padding: var(--space-component);
  position: relative;
}
.stat::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 50%;
  background: var(--color-border);
}
.stat:last-child::after { display: none; }
.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: #FFFFFF;
  line-height: 1.0;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}
.stat__value .counter-suffix {
  color: var(--color-accent);
}
.stat__label {
  font-size: var(--fs-small);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-heading);
}
/* Counter animation trigger */
.stat.visible .stat__value {
  animation: counter-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Pricing card */
.pricing-card {
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  text-align: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.pricing-card:hover {
  border-color: rgba(70, 130, 180, 0.25);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.pricing-card--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow-accent);
  background: rgba(0, 168, 232, 0.03);
}
.pricing-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-carbon-h);
}
.pricing-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 0.75rem;
  letter-spacing: 0.08em;
}
.pricing-card__price {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 400;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}
.pricing-card__features {
  list-style: none;
  margin-bottom: 2rem;
  text-align: left;
}
.pricing-card__features li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-light);
  font-size: var(--fs-small);
}
.pricing-card__features li::before {
  content: '\2713';
  margin-right: 0.75rem;
  color: var(--color-accent);
  font-weight: 700;
}

/* Testimonial card */
.testimonial-card {
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
}
.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  font-size: 3.5rem;
  line-height: 1;
  font-family: var(--font-heading);
  color: var(--color-accent);
  opacity: 0.12;
}
.testimonial-card:hover {
  border-color: rgba(0, 168, 232, 0.2);
  box-shadow: 0 0 20px rgba(0, 168, 232, 0.06);
}
.testimonial-card__quote {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  font-style: italic;
  font-weight: 300;
}
.testimonial-card__author {
  font-family: var(--font-heading);
  font-weight: 400;
  color: #FFFFFF;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
}
.testimonial-card__role {
  font-size: var(--fs-small);
  color: var(--color-primary);
  margin-top: 0.2rem;
}

/* Team member card */
.team-card {
  text-align: center;
  padding: var(--space-component);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all 0.4s ease;
}
.team-card:hover {
  border-color: rgba(70, 130, 180, 0.25);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.team-card__image {
  width: 120px;
  height: 120px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  margin: 0 auto 1.25rem;
  border: 2px solid var(--color-border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, filter 0.4s ease;
  filter: grayscale(0.3);
}
.team-card:hover .team-card__image {
  border-color: var(--color-accent);
  box-shadow: 0 0 20px rgba(0, 168, 232, 0.15);
  filter: grayscale(0);
}
.team-card__name {
  font-family: var(--font-heading);
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 0.25rem;
  letter-spacing: 0.06em;
  font-size: 1.15rem;
}
.team-card__role {
  font-size: var(--fs-small);
  color: var(--color-primary);
}

/* Process / timeline step */
.process-step {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: var(--space-component);
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
  position: relative;
}
.process-step:hover {
  border-color: rgba(0, 168, 232, 0.2);
  box-shadow: 0 0 20px rgba(0, 168, 232, 0.06);
}
.process-step__number {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-bg);
  background: var(--gradient-carbon);
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.process-step__content h3 { margin-bottom: 0.5rem; }
.process-step__content p { color: var(--color-text-light); }

/* FAQ accordion */
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: var(--color-muted);
  transition: border-color 0.3s ease;
}
.faq-item:hover {
  border-color: rgba(70, 130, 180, 0.2);
}
.faq-item.active {
  border-color: rgba(0, 168, 232, 0.25);
  box-shadow: 0 0 15px rgba(0, 168, 232, 0.05);
}
.faq-item__question {
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 400;
  color: #FFFFFF;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: color 0.2s ease;
  text-transform: uppercase;
}
.faq-item__question:hover { color: var(--color-accent); }
.faq-item__icon {
  font-size: 1.25rem;
  color: var(--color-primary);
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}
.faq-item.active .faq-item__icon {
  transform: rotate(45deg);
}
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
  padding: 0 1.5rem;
}
.faq-item.active .faq-item__answer {
  max-height: 500px;
  padding: 0 1.5rem 1.25rem;
}
.faq-item__answer p {
  color: var(--color-text-light);
  line-height: var(--lh-body);
  font-weight: 300;
}

/* Blog card */
.blog-card {
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.blog-card:hover {
  border-color: rgba(70, 130, 180, 0.2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.blog-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  filter: grayscale(0.2);
  transition: filter 0.4s ease;
}
.blog-card:hover .blog-card__image {
  filter: grayscale(0);
}
.blog-card__body {
  padding: 1.5rem;
}
.blog-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 0.5rem;
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
}
.blog-card__excerpt {
  color: var(--color-text-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 300;
}

/* Portfolio card */
.portfolio-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 1px solid var(--color-border);
  transition: all 0.4s ease;
}
.portfolio-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
  transform: scale(1.02);
}
.portfolio-card__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: grayscale(0.3);
}
.portfolio-card:hover .portfolio-card__image {
  transform: scale(1.05);
  filter: grayscale(0);
}
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 15, 0.9) 0%,
    rgba(10, 10, 15, 0.2) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.portfolio-card:hover .portfolio-card__overlay {
  opacity: 1;
}
.portfolio-card__title {
  font-family: var(--font-heading);
  font-weight: 400;
  color: #FFFFFF;
  font-size: var(--fs-h3);
  margin-bottom: 0.25rem;
  letter-spacing: 0.06em;
}
.portfolio-card__category {
  font-size: var(--fs-small);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* CTA section */
.cta-section {
  position: relative;
  padding: calc(var(--space-section) * 1.25) 0;
  text-align: center;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(70, 130, 180, 0.04) 0%,
    rgba(0, 168, 232, 0.04) 50%,
    rgba(70, 130, 180, 0.04) 100%
  );
  background-size: 300% 300%;
  animation: gradient-shift 6s ease infinite;
}
/* Dot grid on CTA */
.cta-section::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image: radial-gradient(circle, rgba(70, 130, 180, 0.4) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section__title {
  font-size: var(--fs-h1);
  font-weight: 400;
  color: #FFFFFF;
  margin-bottom: 1rem;
  letter-spacing: 0.06em;
}
.cta-section__subtitle {
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto 2rem;
  font-size: clamp(1rem, 1.75vw, 1.15rem);
  font-weight: 300;
}

/* Contact info boxes */
.contact-box {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}
.contact-box:hover {
  border-color: rgba(0, 168, 232, 0.2);
  box-shadow: 0 0 15px rgba(0, 168, 232, 0.06);
}
.contact-box__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 168, 232, 0.06);
  border: 1px solid rgba(0, 168, 232, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.contact-box__text h4 { color: #FFFFFF; margin-bottom: 0.25rem; }
.contact-box__text p { color: var(--color-text-light); font-size: var(--fs-small); }

/* Map placeholder */
.map-placeholder {
  width: 100%;
  height: 400px;
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-family: var(--font-heading);
  font-size: 1rem;
  letter-spacing: 0.1em;
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(70, 130, 180, 0.08) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Two column layout */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-component);
  align-items: center;
}
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; }
}

/* About section image */
.about-image {
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-elevated);
  filter: grayscale(0.15);
  transition: filter 0.4s ease;
}
.about-image:hover {
  filter: grayscale(0);
}

/* Steel accent line decoration */
.steel-line {
  width: 60px;
  height: 2px;
  background: var(--color-primary);
  margin-bottom: 1.5rem;
  box-shadow: 0 0 8px rgba(70, 130, 180, 0.25);
}
.steel-line--center {
  margin-left: auto;
  margin-right: auto;
}
.steel-line--accent {
  background: var(--gradient-carbon-h);
}

/* Dot grid decorative panel */
.dot-grid-panel {
  position: relative;
  padding: var(--space-component);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.dot-grid-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(circle, rgba(70, 130, 180, 0.5) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}

/* Pulse dot */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 8px rgba(0, 168, 232, 0.6);
  animation: carbon-pulse 2s ease-in-out infinite;
  display: inline-block;
}

/* Carbon divider (angled industrial line) */
.carbon-divider {
  width: 100%;
  height: 80px;
  position: relative;
  overflow: hidden;
}
.carbon-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -5%;
  right: -5%;
  height: 1px;
  background: var(--gradient-carbon-h);
  opacity: 0.3;
  transform: rotate(-1deg);
}

/* ===== SCROLL REVEAL SCRIPT PLACEHOLDER ===== */
/* JS added via header.html script tag */

/* ─── PHASE-1-MOBILE-FOUNDATIONS (auto-injected 2026-05-04) ─── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe, svg { max-width: 100%; height: auto; }
input, select, textarea { font-size: max(16px, 1rem); }
.mobile-nav { z-index: 1100; }
.mobile-nav .hamburger, .hamburger.is-active, .mobile-nav-close { z-index: 1110; }
/* ─── /PHASE-1-MOBILE-FOUNDATIONS ─── */

/* ─── PHASE-3-MOBILE-GRIDS (auto-injected 2026-05-04) ─── */
@media (max-width: 640px) {
  .team-grid, .pricing-grid, .portfolio-grid, .blog-grid,
  .services-grid, .process-grid, .gallery-grid, .testimonials-grid,
  .features-grid, .stats-grid, .about-grid, .cards-grid,
  .product-grid, .related-products-grid, .woocommerce ul.products,
  .grid--3, .grid--4, .grid-3, .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}
/* ─── /PHASE-3-MOBILE-GRIDS ─── */

/* ─── A11Y SKIP-LINK (added 2026-05-11) ─── */
/* The skip-to-content link must be visually hidden until keyboard-focused.
   Theme outputs <a class="sr-only" href="#main-content">. Default WP CSS
   sometimes leaves it visible — pin it via a robust visually-hidden rule. */
.sr-only,
a.sr-only,
.skip-link,
a.skip-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.sr-only:focus,
a.sr-only:focus,
.skip-link:focus,
a.skip-link:focus {
  position: fixed !important;
  top: 1rem !important;
  left: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0.75rem 1rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  z-index: 99999 !important;
}

/* ─── WOOCOMMERCE LAYOUT OVERRIDES (added 2026-05-11) ─── */
/* Three WC default-loop artifacts break our CSS grid:
   1. ::before / ::after clearfix pseudo-elements on ul.products get
      counted as grid items, eating slots — produces 3-4-1 instead of
      4-4 for 8 products.
   2. `.first` items have `clear: both` to start each row of N (legacy
      float layout, ignored by grid but kept for safety).
   3. `.product` items may carry `float: left` from WC core. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
  display: none !important;
  content: none !important;
}
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce-page ul.products li.product.first,
.woocommerce-page ul.products li.product.last {
  clear: none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: none !important;
}

/* ─── PRODUCT SEARCH BAR (added 2026-05-11) ─── */
.shop-search {
  max-width: 560px;
  margin: 0 auto var(--space-xl);
}
.shop-search__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.35rem 0.35rem 0.35rem 1.25rem;
  box-shadow: var(--shadow-card);
}
.shop-search__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  padding: 0.5rem 0;
}
.shop-search__input::placeholder { color: var(--color-text-muted); }
.shop-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.shop-search__submit:hover { background: var(--color-accent-dark); }

/* ─── HEADER PADDING (added 2026-05-11) ─── */
/* Fixed header overlaps page top on WC auto-pages (cart/checkout/shop
   archive/single product). SitePilot's own pages compensate with
   `padding-top: calc(var(--space-section) * 2)` on their first section;
   WC pages have no such wrapper. Set body padding-top for WC contexts
   and any page that doesn't begin with a `.section` element. */
body.woocommerce,
body.woocommerce-page,
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account,
body.single-product,
body.archive.tax-product_cat,
body.post-type-archive-product {
  padding-top: 96px;
}
@media (max-width: 768px) {
  body.woocommerce,
  body.woocommerce-page,
  body.woocommerce-cart,
  body.woocommerce-checkout,
  body.woocommerce-account,
  body.single-product,
  body.archive.tax-product_cat,
  body.post-type-archive-product {
    padding-top: 76px;
  }
}

/* ─── WOOCOMMERCE STYLING (added 2026-05-11) ─── */
/* Match WC's default product grid + cart + checkout to the SitePilot
   design system. Without this WC's default Storefront-ish styles win
   and the site looks like vanilla WordPress. */

/* WC body adds .woocommerce + .woocommerce-page classes itself, so the
   selector below also matches <body>. Excluding body keeps the centered
   max-width clamp on the inner content wrapper only — without it the
   whole site (header, hero, footer) ends up capped to --max-width on
   cart/shop/checkout/single-product pages. Bug discovered 2026-05-12. */
.woocommerce:not(body), .woocommerce-page:not(body) {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
body.woocommerce, body.woocommerce-page {
  font-family: var(--font-body);
  color: var(--color-text);
}

/* Single-product page reuses the theme blog `single.php` template, which
   wraps `the_content()` in `.container.container--narrow` (max-width 720px,
   designed for blog-post readable line length). On product pages that
   squeezes WC's 4-col related-products grid down to ~128px per card and
   stacks the "Add to cart" label across 3 lines. Widen the narrow
   container only on single-product pages — blog single posts stay narrow.
   Bug discovered 2026-05-12. */
body.single-product .container--narrow {
  max-width: var(--max-width);
}

/* Block-based WC cart + checkout (Gutenberg blocks `wp-block-woocommerce-*`)
   render full-bleed by default — content sits flush against viewport
   edges on both desktop and mobile (form fields kiss left edge, "Order
   summary" sidebar kisses right edge, "Return to cart" link cropped on
   mobile). Apply the same max-width clamp + side padding the legacy WC
   wrapper gets via `.woocommerce:not(body)`. Bug discovered 2026-05-12. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
  box-sizing: border-box;
}

/* WC product breadcrumb (rendered above single-product page via the
   `woocommerce_before_main_content` action). Default WC markup is plain
   text `Home / Category / Product`; style it to match `.sp-single__meta`
   muted-label rhythm so it reads as a navigation crumb, not body text. */
.woocommerce-breadcrumb {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--color-text-muted, var(--color-text-secondary, #888));
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-md);
}
.woocommerce-breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast, 150ms) var(--ease-out, ease-out);
}
.woocommerce-breadcrumb a:hover {
  color: var(--color-accent);
}

/* Product archive (shop + category) */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: var(--space-lg) !important;
  list-style: none;
  margin: var(--space-xl) 0 !important;
  padding: 0 !important;
}
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 768px)  { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } }

.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  display: flex !important;
  flex-direction: column;
  text-align: left !important;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.woocommerce ul.products li.product a {
  text-decoration: none;
  color: inherit;
}
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.woocommerce ul.products li.product img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  height: auto;
  margin: 0 !important;
  display: block;
  background: var(--color-surface);
  transition: transform var(--duration-slow) var(--ease-out);
}
.woocommerce ul.products li.product:hover img { transform: scale(1.05); }

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3 {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
  line-height: 1.3 !important;
  padding: var(--space-md) var(--space-md) 0 !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product .price {
  display: block !important;
  font-family: var(--font-heading) !important;
  font-size: var(--text-lg) !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  padding: 0 var(--space-md) var(--space-md) !important;
  margin: 0.4rem 0 0 !important;
}
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .price del { color: var(--color-text-muted); margin-right: 0.4rem; }

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 var(--space-md) var(--space-md) !important;
  padding: 0.6rem 1rem !important;
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  text-transform: uppercase !important;
  transition: background var(--duration-fast) var(--ease-out) !important;
}
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover {
  background: var(--color-accent-dark) !important;
  color: var(--color-text-inverse) !important;
}

/* Shop result count + ordering toolbar */
.woocommerce .woocommerce-result-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-md) 0;
}
.woocommerce .woocommerce-ordering select {
  padding: 0.5rem var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
}

/* Single product page */
.woocommerce div.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}
@media (max-width: 900px) { .woocommerce div.product { grid-template-columns: 1fr; gap: var(--space-xl); } }

.woocommerce div.product .woocommerce-product-gallery {
  width: 100% !important;
}
.woocommerce div.product .woocommerce-product-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.woocommerce div.product .product_title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.1;
  margin: 0 0 var(--space-md);
}
.woocommerce div.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-heading) !important;
  font-size: var(--text-3xl) !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
  margin: 0 0 var(--space-md) !important;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-md);
}

.woocommerce div.product form.cart {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.woocommerce div.product form.cart .quantity input.qty {
  width: 4rem;
  padding: 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  padding: 0.75rem 1.5rem !important;
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  text-transform: uppercase !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--color-accent-dark) !important;
}

.woocommerce .product_meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.woocommerce .product_meta a { color: var(--color-primary); }

/* Tabs (Description / Additional info / Reviews) */
.woocommerce div.product .woocommerce-tabs {
  grid-column: 1 / -1;
  margin-top: var(--space-2xl);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--space-md);
  margin: 0 0 var(--space-md);
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: none !important;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.woocommerce div.product .woocommerce-tabs .panel {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.woocommerce div.product .related,
.woocommerce div.product .upsells {
  grid-column: 1 / -1;
  margin-top: var(--space-2xl);
}
.woocommerce div.product .related > h2,
.woocommerce div.product .upsells > h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-ink);
  margin: 0 0 var(--space-md);
}

/* Cart page */
.woocommerce-cart .cart_totals h2,
.woocommerce-cart h2,
.woocommerce table.shop_table th,
.woocommerce-cart .woocommerce-cart-form .product-name {
  font-family: var(--font-heading);
  color: var(--color-ink);
}
.woocommerce table.shop_table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
}
.woocommerce table.shop_table thead th {
  background: var(--color-surface);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woocommerce .cart_totals {
  background: var(--color-surface);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
}
.woocommerce .cart_totals table tr.order-total .amount {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button,
.woocommerce input.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem !important;
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: var(--radius-md) !important;
  border: none !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background var(--duration-fast) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover,
.woocommerce input.button:hover {
  background: var(--color-accent-dark) !important;
}

/* Checkout page */
.woocommerce-checkout #customer_details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.woocommerce-checkout form .form-row input,
.woocommerce-checkout form .form-row textarea,
.woocommerce-checkout form .form-row select {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-bg);
  color: var(--color-text);
}
.woocommerce-checkout form .form-row label {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.25rem;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review h3 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  margin: var(--space-md) 0;
}

/* WC notices */
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-info,
.woocommerce-message {
  background: var(--color-surface);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-error {
  background: rgba(224, 122, 122, 0.08);
  border-left: 4px solid var(--color-error);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
}

/* My-account */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

/* Empty cart icon WC default */
.woocommerce-page .wc-empty-cart-message,
.woocommerce-page .cart-empty {
  text-align: center;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  padding: var(--space-2xl) 0;
}
.woocommerce-page .return-to-shop {
  text-align: center;
  margin: var(--space-md) 0;
}

/* WC Block-based Cart (WC 10+ uses Cart block instead of [woocommerce_cart]
   shortcode by default). Targets .wc-block-* classnames specifically.
   Cart sidebar (totals) + main (line items) get themed; Proceed-to-Checkout
   becomes a proper primary CTA button instead of an underlined link. */
.wp-block-woocommerce-cart {
  font-family: var(--font-body);
  color: var(--color-text);
}
.wp-block-woocommerce-cart .wc-block-cart {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  grid-template-areas: "main sidebar";
  gap: var(--space-2xl);
  align-items: start;
}
.wp-block-woocommerce-cart .wc-block-cart__main {
  grid-area: main;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}
.wp-block-woocommerce-cart .wc-block-cart__sidebar {
  grid-area: sidebar;
  min-width: 280px;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}
/* WC ships an empty placeholder div as first child of .wc-block-cart that
   would otherwise occupy grid slot 1 and squeeze main+sidebar into the
   remaining slots. Hide it. */
.wp-block-woocommerce-cart .wc-block-cart > div:not(.wc-block-cart__main):not(.wc-block-cart__sidebar) {
  display: none !important;
}
@media (max-width: 900px) {
  .wp-block-woocommerce-cart .wc-block-cart {
    grid-template-columns: 1fr;
    grid-template-areas: "main" "sidebar";
    gap: var(--space-lg);
  }
}
.wp-block-woocommerce-cart .wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.wp-block-woocommerce-cart .wc-block-cart__totals-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 0 var(--space-sm) !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Cart items table */
.wc-block-cart-items {
  border-collapse: collapse;
  width: 100%;
}
.wc-block-cart-items thead th,
.wc-block-cart-items__header-image,
.wc-block-cart-items__header-product,
.wc-block-cart-items__header-total {
  font-family: var(--font-body);
  font-size: var(--text-xs) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--color-text-muted) !important;
  padding: var(--space-sm) var(--space-md) !important;
  border-bottom: 1px solid var(--color-border) !important;
}
.wc-block-cart-items__row {
  border-bottom: 1px solid var(--color-border-subtle);
}
.wc-block-cart-items__row td {
  padding: var(--space-md) !important;
  vertical-align: top;
}
.wc-block-cart-item__image img,
.wc-block-cart-item__image-placeholder,
.wc-block-cart-item__image > a {
  display: block;
  width: 96px !important;
  height: 96px !important;
  aspect-ratio: 1/1 !important;
  object-fit: cover !important;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.wc-block-components-product-name {
  font-family: var(--font-heading) !important;
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
  text-decoration: none !important;
  line-height: 1.3 !important;
}
.wc-block-components-product-name:hover {
  color: var(--color-primary) !important;
}
.wc-block-components-product-metadata,
.wc-block-cart-item__product-metadata,
.wc-block-components-product-details {
  font-size: var(--text-sm) !important;
  color: var(--color-text-secondary) !important;
  margin-top: 0.25rem !important;
}
.wc-block-components-product-price,
.wc-block-components-product-price__value {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

/* Quantity stepper */
.wc-block-components-quantity-selector {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  background: var(--color-bg) !important;
  display: inline-flex !important;
  align-items: center;
}
.wc-block-components-quantity-selector input {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  text-align: center !important;
  border: none !important;
  background: transparent !important;
  width: 2.5rem !important;
}
.wc-block-components-quantity-selector__button {
  background: transparent !important;
  border: none !important;
  color: var(--color-text) !important;
  font-size: var(--text-lg) !important;
  width: 2rem !important;
  height: 2rem !important;
  cursor: pointer !important;
}
.wc-block-components-quantity-selector__button:hover {
  color: var(--color-primary) !important;
  background: var(--color-surface) !important;
}

/* Trash / remove link */
.wc-block-cart-item__remove-link,
.wc-block-cart-item__remove,
button.wc-block-cart-item__remove-link {
  color: var(--color-text-muted) !important;
  background: transparent !important;
  border: none !important;
  font-size: var(--text-sm) !important;
  cursor: pointer;
}
.wc-block-cart-item__remove-link:hover,
button.wc-block-cart-item__remove-link:hover {
  color: var(--color-error) !important;
}

/* Totals box */
.wc-block-components-totals-item {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0 !important;
  border-bottom: 1px solid var(--color-border-subtle);
  background: transparent !important;
  font-size: var(--text-base) !important;
  color: var(--color-text) !important;
}
.wc-block-components-totals-item__label {
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}
.wc-block-components-totals-item__value {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  color: var(--color-ink) !important;
}
.wc-block-components-totals-footer-item {
  border-top: 1px solid var(--color-border) !important;
  padding: var(--space-md) 0 !important;
  margin-top: var(--space-sm) !important;
  border-bottom: none !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  color: var(--color-primary) !important;
}

/* Coupon expandable */
.wc-block-components-totals-coupon-link,
.wc-block-components-panel__button {
  color: var(--color-primary) !important;
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
}

/* Proceed-to-Checkout primary CTA — was rendering as plain link */
.wc-block-cart__submit-button,
.wc-block-components-button,
.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-components-button,
a.wc-block-cart__submit-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 0.85rem 1.5rem !important;
  margin-top: var(--space-md) !important;
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button:hover,
a.wc-block-cart__submit-button:hover {
  background: var(--color-accent-dark) !important;
  color: var(--color-text-inverse) !important;
}

/* "Continue shopping" + secondary buttons keep ghost style */
.wc-block-cart__submit-container .wc-block-cart__submit-button--full-width--secondary,
.wc-block-components-button.outlined {
  background: transparent !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-primary) !important;
}

/* Apply Coupon button */
.wc-block-components-totals-coupon__button {
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
}

/* Empty cart (block variant) */
.wp-block-woocommerce-empty-cart-block,
.wc-block-cart__empty-cart__title {
  text-align: center !important;
  font-family: var(--font-heading) !important;
  color: var(--color-text) !important;
}

/* WC Block-based Checkout (WC 10+ uses Checkout block by default).
   Mirrors cart styling but targets .wp-block-woocommerce-checkout. */
.wp-block-woocommerce-checkout {
  font-family: var(--font-body);
  color: var(--color-text);
}
.wp-block-woocommerce-checkout .wc-block-checkout {
  display: grid !important;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr) !important;
  grid-template-areas: "main sidebar" !important;
  gap: var(--space-2xl) !important;
  align-items: start;
  flex: initial !important;
}
.wp-block-woocommerce-checkout .wc-block-checkout__main {
  grid-area: main;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}
.wp-block-woocommerce-checkout .wc-block-checkout__sidebar {
  grid-area: sidebar;
  min-width: 320px;
  width: 100% !important;
  max-width: none !important;
  flex: 1 1 auto !important;
}
.wp-block-woocommerce-checkout .wc-block-checkout > div:not(.wc-block-checkout__main):not(.wc-block-checkout__sidebar):not(.wc-block-components-notices) {
  display: none !important;
}
@media (max-width: 900px) {
  .wp-block-woocommerce-checkout .wc-block-checkout {
    grid-template-columns: 1fr !important;
    grid-template-areas: "sidebar" "main" !important;
    gap: var(--space-lg) !important;
  }
}

/* Section blocks within the checkout main column */
.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
  padding: var(--space-md) 0;
  border: none;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__heading,
.wp-block-woocommerce-checkout .wc-block-components-title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-2xl) !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
  margin: 0 0 var(--space-md) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-step__description {
  color: var(--color-text-muted) !important;
  font-size: var(--text-sm) !important;
  margin-bottom: var(--space-sm);
}

/* Form inputs — TEXT inputs only. Checkboxes / radios handled below
   so global padding/border rules don't bloat a 16x16px checkbox into
   a 108x29px box (the 'Add a note to your order' bug). */
.wp-block-woocommerce-checkout .wc-block-components-text-input input:not([type="checkbox"]):not([type="radio"]),
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea,
.wp-block-woocommerce-checkout select,
.wp-block-woocommerce-checkout .wc-block-components-form input:not([type="checkbox"]):not([type="radio"]),
.wp-block-woocommerce-checkout .wc-block-components-form textarea {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  padding: 0.85rem 1rem !important;
  width: 100% !important;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout .wc-block-components-text-input textarea:focus,
.wp-block-woocommerce-checkout select:focus {
  border-color: var(--color-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--color-accent-glow) !important;
}

/* Checkbox / radio — explicit small box, label inline */
.wp-block-woocommerce-checkout .wc-block-components-checkbox {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox > label {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--color-text) !important;
  font-weight: 500;
  margin: 0 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-bg) !important;
  accent-color: var(--color-primary);
  flex: 0 0 auto !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__label {
  flex: 1 1 auto !important;
  display: inline !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  color: var(--color-text) !important;
  white-space: normal !important;
  line-height: 1.4 !important;
  width: auto !important;
  height: auto !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkbox__mark {
  display: none !important;
}
.wp-block-woocommerce-checkout .wc-block-checkout__add-note {
  width: 100% !important;
  height: auto !important;
}
.wp-block-woocommerce-checkout label,
.wp-block-woocommerce-checkout .wc-block-components-text-input label {
  font-size: var(--text-sm) !important;
  color: var(--color-text-muted) !important;
  font-weight: 500;
}

/* Sidebar order summary box */
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-lg) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-order-summary__title,
.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-order-summary-block > h2 {
  font-family: var(--font-heading) !important;
  font-size: var(--text-xl) !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
  margin: 0 0 var(--space-sm) !important;
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: var(--space-sm) !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image img,
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__image {
  width: 64px !important;
  height: 64px !important;
  border-radius: var(--radius-sm) !important;
  background: var(--color-bg) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__title {
  font-family: var(--font-heading) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__price {
  color: var(--color-primary) !important;
  font-weight: 700 !important;
}
.wp-block-woocommerce-checkout .wc-block-components-order-summary-item__description {
  color: var(--color-text-secondary) !important;
  font-size: var(--text-sm) !important;
}

/* Payment options notice */
.wp-block-woocommerce-checkout .wc-block-components-validation-error,
.wp-block-woocommerce-checkout .wc-block-components-notice-banner.is-error,
.wp-block-woocommerce-checkout .wc-block-checkout__no-payment-methods,
.wp-block-woocommerce-checkout .wc-block-checkout-payment-block .wc-block-components-notice-banner {
  background: rgba(224, 122, 122, 0.08) !important;
  border-left: 4px solid var(--color-error) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--color-error) !important;
  padding: var(--space-sm) var(--space-md) !important;
}

/* Place Order button — primary CTA */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout button.wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-checkout .wp-block-button__link {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  padding: 1rem 1.5rem !important;
  background: var(--color-primary) !important;
  color: var(--color-text-inverse) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover,
.wp-block-woocommerce-checkout .wp-block-button__link:hover {
  background: var(--color-accent-dark) !important;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button[disabled],
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* "Return to Cart" + small links */
.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button {
  color: var(--color-text-muted) !important;
  font-size: var(--text-sm) !important;
  text-decoration: none;
}
.wp-block-woocommerce-checkout .wc-block-components-checkout-return-to-cart-button:hover {
  color: var(--color-primary) !important;
}

/* Checkbox / radio */
.wp-block-woocommerce-checkout .wc-block-components-checkbox__input,
.wp-block-woocommerce-checkout input[type="checkbox"],
.wp-block-woocommerce-checkout input[type="radio"] {
  accent-color: var(--color-primary);
}

/* Terms & Conditions paragraph */
.wp-block-woocommerce-checkout .wc-block-components-checkout-terms,
.wp-block-woocommerce-checkout .wc-block-checkout__terms {
  font-size: var(--text-sm) !important;
  color: var(--color-text-muted) !important;
  border-top: 1px solid var(--color-border-subtle) !important;
  padding-top: var(--space-md);
  margin-top: var(--space-md);
}

/* ─── ECOMMERCE (added 2026-05-11 for woocommerce-ecommerce-pages spec) ─── */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}
@media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .product-grid { grid-template-columns: repeat(2, 1fr); } }

.product-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.product-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.product-card__category {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.product-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
  margin: 0;
}
.product-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
  flex: 1;
}
.product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
}
.product-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
}
.product-card__action {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.product-card__action:hover { color: var(--color-accent-dark); }

/* Single product detail */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
}
@media (max-width: 900px) { .product-detail { grid-template-columns: 1fr; gap: var(--space-xl); } }

.product-detail__gallery { display: flex; flex-direction: column; gap: var(--space-sm); }
.product-detail__main-image {
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.product-detail__main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-detail__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}
.product-detail__thumb {
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--color-border);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.product-detail__thumb:hover { border-color: var(--color-primary); }
.product-detail__thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-detail__info { display: flex; flex-direction: column; gap: var(--space-md); }
.product-detail__category {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.product-detail__name {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.1;
  margin: 0;
}
.product-detail__price {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
}
.product-detail__desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}
.product-detail__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.product-detail__features li {
  padding-left: 1.5rem;
  position: relative;
  color: var(--color-text-secondary);
}
.product-detail__features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}
.product-detail__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
.product-detail__spec-label {
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 0.25rem;
}
.product-detail__spec-value {
  font-size: var(--text-sm);
  color: var(--color-ink);
  font-weight: 600;
}
.product-detail__shipping {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border-subtle);
}

.related-products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
@media (max-width: 1024px) { .related-products-grid { grid-template-columns: repeat(2, 1fr); } }

/* Header cart icon */
.cart-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  color: var(--color-ink);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background var(--duration-fast) var(--ease-out);
}
.cart-link:hover { background: var(--color-surface); }
.cart-link svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; }
.cart-link__count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.cart-link__label {
  font-size: var(--text-sm);
  font-weight: 500;
}
/* ─── /ECOMMERCE ─── */


/* Auto-generated dark color variant: electric-blue */
/* Dark-based template — surface tokens preserved from base.css, only
   accent/primary/secondary rotate across variants. */
:root {
  --color-primary: #3B82F6;
  --color-accent: #06B6D4;
  --color-secondary: #A855F7;
  --color-text: #D4D4D8;
  --color-text-light: #8A8A96;
  --color-bg: #0A0A0F;
  --color-bg-alt: #070710;
  --color-border: #1E1E2E;
  --color-muted: #101018;
}

/* SitePilot: skip link */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sr-only:focus{position:static;width:auto;height:auto;padding:8px 16px;margin:0;overflow:visible;clip:auto;white-space:normal;background:#fff;color:#000;z-index:10000}
/* SitePilot: mobile nav toggle */
nav.nav{position:relative;z-index:1000}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:inherit}
.nav__links{list-style:none;padding:0;margin:0}
.nav__links li{display:inline}
@media(max-width:768px){
  .nav-toggle{display:block}
  .nav__cta{display:none}
  .nav__links{flex-direction:column;position:absolute;top:100%;left:0;right:0;z-index:999;background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);padding:16px 24px;box-shadow:0 4px 12px rgba(0,0,0,0.1);gap:12px}
  .nav__links li{display:block}
  .nav__links a{color:#1f2937!important}
}
/* SitePilot: language flags */
.sp-lang-flags{display:flex;align-items:center;gap:4px;margin-left:auto}
.sp-lang-flags button{background:none;border:none;cursor:pointer;font-size:20px;opacity:0.35;transition:opacity 0.15s;padding:2px;line-height:1}
.sp-lang-flags button.active{opacity:1}
/* SitePilot: nav brand spacing */
.nav__brand,.nav__logo{margin-right:32px;flex-shrink:0;white-space:nowrap}
/* SitePilot: CF7 form styling */
.wpcf7 .wpcf7-form p{margin-bottom:16px}
.wpcf7 .wpcf7-form label{display:block;font-weight:500;margin-bottom:4px;font-size:0.95rem}
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit){width:100%;padding:12px 16px;border:1px solid rgba(255,255,255,0.15);border-radius:8px;background:rgba(255,255,255,0.06);color:inherit;font-size:1rem;transition:border-color 0.2s,box-shadow 0.2s;box-sizing:border-box}
.wpcf7 .wpcf7-form-control:not(.wpcf7-submit):focus{outline:none;border-color:var(--color-primary,#3b82f6);box-shadow:0 0 0 3px rgba(59,130,246,0.15)}
.wpcf7 textarea.wpcf7-form-control{min-height:140px;resize:vertical}
.wpcf7 .wpcf7-submit{display:inline-block;padding:12px 32px;background:var(--color-primary,#3b82f6);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background 0.2s,transform 0.1s}
.wpcf7 .wpcf7-submit:hover{background:var(--color-primary-dark,#2563eb);transform:translateY(-1px)}
.wpcf7 .wpcf7-submit:active{transform:translateY(0)}
.wpcf7 .wpcf7-spinner{display:inline-block;margin-left:8px}
.wpcf7 .wpcf7-response-output{margin:16px 0;padding:12px 16px;border-radius:8px;font-size:0.9rem}
/* SitePilot: Google Maps embed */
.contact-map iframe{width:100%;height:350px;border:none;border-radius:12px;margin-top:8px}
.contact-map{margin-bottom:24px}
/* SitePilot: prevent mobile horizontal overflow — html element (body already covered; html needed for documentElement.scrollWidth) */
html{overflow-x:hidden}

/* SP-BLOG-FIX-v1 */
.sp-archive,.sp-single{min-height:50vh}
.sp-archive__head{margin-bottom:var(--space-xl,3rem);text-align:center}
.sp-archive__title,.sp-single__title{font-family:var(--font-heading);color:var(--color-text);font-size:clamp(1.75rem,4vw,2.75rem);line-height:1.2;margin:0}
.sp-archive__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-lg,2rem)}
.sp-archive__card{background:var(--color-bg-card,var(--color-bg-alt,rgba(0,0,0,0.03)));border:1px solid var(--color-border,rgba(0,0,0,0.1));border-radius:var(--radius-md,8px);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.sp-archive__card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,0.08)}
.sp-archive__thumb{display:block;aspect-ratio:16/9;overflow:hidden}
.sp-archive__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sp-archive__body{padding:var(--space-md,1.5rem);display:flex;flex-direction:column;gap:.5rem;flex:1}
.sp-archive__meta,.sp-single__meta{font-size:.75rem;color:var(--color-text-muted,var(--color-text-light,var(--color-text-secondary,#888)));text-transform:uppercase;letter-spacing:.08em}
.sp-archive__heading{font-family:var(--font-heading);font-size:1.25rem;line-height:1.3;margin:0;color:var(--color-text)}
.sp-archive__heading a{color:inherit;text-decoration:none}
.sp-archive__heading a:hover{color:var(--color-accent)}
.sp-archive__excerpt{font-family:var(--font-body);color:var(--color-text-secondary,var(--color-text-light,var(--color-text)));font-size:1rem;line-height:1.6}
.sp-archive__excerpt p{margin:0}
.sp-archive__more{margin-top:auto;font-size:.875rem;font-weight:600;color:var(--color-accent);text-decoration:none;letter-spacing:.05em}
.sp-archive__pagination{margin-top:var(--space-xl,3rem);display:flex;justify-content:center}
.sp-archive__pagination .nav-links{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}
.sp-archive__pagination .page-numbers{padding:.5rem .9rem;border:1px solid var(--color-border,rgba(0,0,0,0.1));border-radius:var(--radius-sm,4px);color:var(--color-text);text-decoration:none}
.sp-archive__pagination .page-numbers.current{background:var(--color-accent);color:var(--color-bg,#fff);border-color:var(--color-accent)}
.sp-archive__empty{text-align:center;color:var(--color-text-muted,var(--color-text));font-size:1.125rem;padding:var(--space-xl,3rem) 0}
.sp-single__head{margin-bottom:var(--space-lg,2rem);text-align:center}
.sp-single__thumb{margin-bottom:var(--space-lg,2rem);border-radius:var(--radius-md,8px);overflow:hidden}
.sp-single__thumb img{width:100%;height:auto;display:block}
.sp-single__content{font-family:var(--font-body);color:var(--color-text);font-size:1.0625rem;line-height:1.75}
.sp-single__content h2{font-family:var(--font-heading);font-size:1.75rem;margin:2rem 0 1rem}
.sp-single__content h3{font-family:var(--font-heading);font-size:1.375rem;margin:1.75rem 0 .75rem}
.sp-single__content p{margin:0 0 1rem}
.sp-single__content a{color:var(--color-accent)}
.sp-single__content img{max-width:100%;height:auto;border-radius:var(--radius-sm,4px)}