/* Forest Dusk — Base CSS */
/* Template: forest-dark, deep woodland greens with amber twilight accents */
/* Colors overridden by variants/{color}/colors.css */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap');

:root {
  --color-primary: #2D5E3A;
  --color-secondary: #122214;
  --color-accent: #D4A843;
  --color-text: #E8EDE4;
  --color-text-light: #9BAF96;
  --color-bg: #0D1B0E;
  --color-bg-alt: #0A150B;
  --color-border: #1E3521;
  --color-muted: #111E12;

  --font-heading: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --fs-hero: clamp(2.5rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 4vw, 3.5rem);
  --fs-h2: clamp(1.75rem, 3vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.75rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-heading: 1.2;
  --lh-body: 1.75;

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

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 8px 36px rgba(45, 94, 58, 0.25), 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow-primary: 0 0 25px rgba(45, 94, 58, 0.4), 0 0 50px rgba(45, 94, 58, 0.15);
  --shadow-glow-accent: 0 0 25px rgba(212, 168, 67, 0.4), 0 0 50px rgba(212, 168, 67, 0.15);
  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.7);

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

  --forest-green: var(--color-primary);
  --amber: var(--color-accent);
  --gradient-forest: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-forest-h: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-dusk: linear-gradient(180deg, rgba(13, 27, 14, 0.0) 0%, rgba(13, 27, 14, 0.85) 60%, var(--color-bg) 100%);
}

/* ===== 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.3s ease; }
a:hover { color: var(--color-primary); }

/* ===== NOISE TEXTURE OVERLAY ===== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* ===== TYPOGRAPHY ===== */
h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-text);
  letter-spacing: -0.02em;
}
h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-text);
  letter-spacing: -0.01em;
}
h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-text);
}
h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--color-text);
}
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);
}

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

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

@keyframes gentle-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes amber-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes leaf-sway {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  25% { transform: rotate(1deg) translateX(3px); }
  75% { transform: rotate(-1deg) translateX(-3px); }
}

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

/* Scroll-triggered reveals */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s 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 2rem;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  cursor: pointer;
  border: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
  position: relative;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text);
  box-shadow: 0 2px 12px rgba(45, 94, 58, 0.3);
}
.btn--primary:hover {
  box-shadow: var(--shadow-glow-primary);
  color: var(--color-text);
  transform: translateY(-2px);
  filter: brightness(1.15);
}
.btn--accent {
  background: var(--color-accent);
  color: var(--color-bg);
  box-shadow: 0 2px 12px rgba(212, 168, 67, 0.25);
}
.btn--accent:hover {
  box-shadow: var(--shadow-glow-accent);
  color: var(--color-bg);
  transform: translateY(-2px);
  filter: brightness(1.1);
}
.btn--outline {
  background: transparent;
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
}
.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: 0 0 20px rgba(212, 168, 67, 0.12);
}
.btn--ghost {
  background: rgba(45, 94, 58, 0.12);
  color: var(--color-text);
  border: 1px solid rgba(45, 94, 58, 0.3);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: rgba(45, 94, 58, 0.25);
  color: var(--color-text);
  border-color: var(--color-primary);
  box-shadow: 0 0 20px rgba(45, 94, 58, 0.2);
}
.btn--gradient {
  background: var(--gradient-forest);
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
  color: var(--color-text);
  font-weight: 700;
  border: none;
}
.btn--gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(45, 94, 58, 0.3), 0 0 25px rgba(212, 168, 67, 0.2);
  color: var(--color-text);
}
.btn--lg { padding: 1.1rem 2.75rem; font-size: 1.05rem; }
.btn--sm { padding: 0.5rem 1.25rem; font-size: var(--fs-small); }

/* ===== 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 ===== */
.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;
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.4s ease;
}
.card:hover {
  border-color: var(--color-primary);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.card:hover::before {
  background: var(--gradient-forest-h);
}
.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: var(--color-text); }
.card p { color: var(--color-text-light); }

/* Card variant: forest */
.card--forest {
  background: rgba(45, 94, 58, 0.06);
  border-color: rgba(45, 94, 58, 0.2);
}
.card--forest:hover {
  box-shadow: var(--shadow-glow-primary);
  border-color: var(--color-primary);
}

/* Card variant: amber glow */
.card--amber:hover {
  box-shadow: var(--shadow-glow-accent);
  border-color: var(--color-accent);
}
.card--amber:hover::before {
  background: var(--color-accent);
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: calc(var(--space-section) * 2) 0 var(--space-section);
}
/* Full-screen background image with dark overlay */
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}
/* Duotone overlay: green/amber filter */
.hero__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(45, 94, 58, 0.6) 0%,
    rgba(13, 27, 14, 0.75) 40%,
    rgba(212, 168, 67, 0.15) 80%,
    rgba(13, 27, 14, 0.85) 100%
  );
  z-index: 1;
}
/* Bottom gradient fade into page bg */
.hero__bg::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, var(--color-bg) 0%, transparent 100%);
  z-index: 2;
}
.hero > * { position: relative; z-index: 3; }

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 900;
  margin-bottom: 1.5rem;
  color: var(--color-text);
  letter-spacing: -0.03em;
  line-height: 1.1;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}
.hero__subtitle {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--color-text-light);
  max-width: 620px;
  margin: 0 auto 2.5rem;
  line-height: var(--lh-body);
}
.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===== PARALLAX BACKGROUND SECTIONS ===== */
.parallax-bg {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
}
.parallax-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 27, 14, 0.82);
}
.parallax-bg > * { position: relative; z-index: 1; }

/* ===== DUOTONE IMAGE FILTER (green/amber) ===== */
.duotone {
  position: relative;
  overflow: hidden;
}
.duotone img {
  filter: grayscale(100%) contrast(1.1) brightness(0.9);
  mix-blend-mode: multiply;
}
.duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45, 94, 58, 0.45) 0%, rgba(212, 168, 67, 0.3) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* ===== OVERLAPPING TEXT PANELS ===== */
.overlap-panel {
  position: relative;
  z-index: 2;
}
.overlap-panel__text {
  background: var(--color-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-component);
  margin-top: -4rem;
  position: relative;
  z-index: 2;
  box-shadow: var(--shadow-elevated);
}
@media (min-width: 769px) {
  .overlap-panel__text {
    margin-top: -6rem;
    margin-left: 3rem;
    margin-right: 3rem;
  }
}

/* ===== NAVBAR ===== */
.nav-bar {
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav-bar.scrolled {
  background: rgba(13, 27, 14, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: var(--color-border);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.4);
}
.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.35rem;
  font-weight: 900;
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.nav__logo:hover {
  color: var(--color-accent);
}
.nav__links {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
}
.nav__links a {
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.3s ease;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}
.nav__links a:hover {
  color: var(--color-text);
}
.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: 24px;
  height: 2px;
  background: var(--color-accent);
  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(13, 27, 14, 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: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  transition: color 0.3s 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-secondary);
  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: 2px;
  background: var(--gradient-forest-h);
  opacity: 0.4;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.25fr;
  gap: var(--space-component);
}
.footer h3, .footer h4 {
  color: var(--color-text);
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer__brand-desc {
  color: var(--color-text-light);
  margin-top: 0.75rem;
  line-height: var(--lh-body);
}
.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-md);
  background: rgba(45, 94, 58, 0.15);
  border: 1px solid rgba(45, 94, 58, 0.3);
  color: var(--color-primary);
  font-size: 0.9rem;
  transition: all 0.3s ease;
}
.footer__social a:hover {
  background: rgba(212, 168, 67, 0.15);
  border-color: var(--color-accent);
  box-shadow: 0 0 12px rgba(212, 168, 67, 0.25);
  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: 500;
  font-size: var(--fs-small);
  color: var(--color-text-light);
  font-family: var(--font-body);
}
.form__input, .form__textarea {
  width: 100%;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  background: rgba(45, 94, 58, 0.05);
  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(212, 168, 67, 0.12), 0 0 15px rgba(212, 168, 67, 0.08);
  background: rgba(45, 94, 58, 0.08);
}
.form__textarea { min-height: 130px; resize: vertical; }

/* ===== BADGE ===== */
.badge {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 100px;
  font-size: var(--fs-small);
  font-weight: 700;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
  background: rgba(45, 94, 58, 0.15);
  color: var(--color-primary);
  border: 1px solid rgba(45, 94, 58, 0.3);
  text-transform: uppercase;
}
.badge--accent {
  background: rgba(212, 168, 67, 0.12);
  color: var(--color-accent);
  border-color: rgba(212, 168, 67, 0.3);
}

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

/* ===== 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); }

/* ===== FOREST DUSK SPECIFIC CLASSES ===== */

/* Forest glow on element */
.forest-glow {
  box-shadow: var(--shadow-glow-primary);
}
.forest-glow--accent {
  box-shadow: var(--shadow-glow-accent);
}

/* Gradient text */
.gradient-text {
  background: var(--gradient-forest);
  -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 5s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Amber accent text */
.text-amber {
  color: var(--color-accent);
}

/* Text glow */
.text-glow {
  text-shadow: 0 0 20px rgba(45, 94, 58, 0.5), 0 0 40px rgba(45, 94, 58, 0.2);
}
.text-glow--accent {
  text-shadow: 0 0 20px rgba(212, 168, 67, 0.5), 0 0 40px rgba(212, 168, 67, 0.2);
}

/* Eyebrow label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
  display: inline-block;
}

/* Glass panel */
.glass {
  background: rgba(13, 27, 14, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(45, 94, 58, 0.15);
  border-radius: var(--radius-lg);
}

/* Icon box with forest tint */
.icon-box {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-md);
  background: rgba(45, 94, 58, 0.12);
  border: 1px solid rgba(45, 94, 58, 0.25);
  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-accent);
}
.icon-box:hover,
.card:hover .icon-box {
  background: rgba(212, 168, 67, 0.15);
  border-color: var(--color-accent);
  box-shadow: 0 0 15px rgba(212, 168, 67, 0.2);
}

/* Feature number (01, 02, etc.) */
.feature-number {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 900;
  line-height: 1;
  background: var(--gradient-forest);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.35;
  margin-bottom: 1rem;
  display: block;
}

/* Stat counter */
.stat {
  text-align: center;
  padding: var(--space-component);
}
.stat__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.stat__label {
  font-size: var(--fs-small);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
  font-weight: 700;
}

/* 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: var(--color-primary);
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.pricing-card--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-glow-accent);
  background: rgba(212, 168, 67, 0.04);
}
.pricing-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-forest-h);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pricing-card__name {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}
.pricing-card__price {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}
.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.3;
}
.testimonial-card:hover {
  border-color: rgba(212, 168, 67, 0.3);
  box-shadow: 0 0 20px rgba(212, 168, 67, 0.08);
}
.testimonial-card__quote {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--color-text);
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
  font-style: italic;
  font-family: var(--font-heading);
}
.testimonial-card__author {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--fs-body);
}
.testimonial-card__role {
  font-size: var(--fs-small);
  color: var(--color-accent);
  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: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.team-card__image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.25rem;
  border: 3px solid var(--color-border);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  filter: grayscale(30%) sepia(20%);
}
.team-card:hover .team-card__image {
  border-color: var(--color-accent);
  box-shadow: 0 0 20px rgba(212, 168, 67, 0.2);
  filter: grayscale(0%) sepia(0%);
}
.team-card__name {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.team-card__role {
  font-size: var(--fs-small);
  color: var(--color-accent);
}

/* 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(212, 168, 67, 0.3);
  box-shadow: 0 0 20px rgba(45, 94, 58, 0.1);
}
.process-step__number {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--color-bg);
  background: var(--gradient-forest);
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.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(45, 94, 58, 0.4);
}
.faq-item.active {
  border-color: rgba(212, 168, 67, 0.3);
  box-shadow: 0 0 15px rgba(212, 168, 67, 0.06);
}
.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: 700;
  color: var(--color-text);
  font-size: 1.05rem;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: color 0.2s ease;
}
.faq-item__question:hover { color: var(--color-accent); }
.faq-item__icon {
  font-size: 1.25rem;
  color: var(--color-accent);
  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);
}

/* 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: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.blog-card__image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  filter: sepia(15%) saturate(0.9);
  transition: filter 0.4s ease;
}
.blog-card:hover .blog-card__image {
  filter: sepia(0%) saturate(1);
}
.blog-card__body {
  padding: 1.5rem;
}
.blog-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
  font-size: var(--fs-h3);
}
.blog-card__excerpt {
  color: var(--color-text-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Portfolio card with duotone hover */
.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: sepia(20%) saturate(0.85);
}
.portfolio-card:hover .portfolio-card__image {
  transform: scale(1.06);
  filter: sepia(0%) saturate(1);
}
.portfolio-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(13, 27, 14, 0.92) 0%,
    rgba(13, 27, 14, 0.3) 50%,
    transparent 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.portfolio-card:hover .portfolio-card__overlay {
  opacity: 1;
}
.portfolio-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
  font-size: var(--fs-h3);
  margin-bottom: 0.25rem;
}
.portfolio-card__category {
  font-size: var(--fs-small);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* 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(45, 94, 58, 0.08) 0%,
    rgba(212, 168, 67, 0.06) 50%,
    rgba(45, 94, 58, 0.08) 100%
  );
  background-size: 300% 300%;
  animation: gradient-shift 8s ease infinite;
}
.cta-section > * { position: relative; z-index: 1; }
.cta-section__title {
  font-size: var(--fs-h1);
  font-weight: 900;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.cta-section__subtitle {
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto 2rem;
  font-size: clamp(1rem, 1.75vw, 1.15rem);
}

/* 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(212, 168, 67, 0.3);
  box-shadow: 0 0 15px rgba(212, 168, 67, 0.08);
}
.contact-box__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: rgba(45, 94, 58, 0.12);
  border: 1px solid rgba(45, 94, 58, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}
.contact-box__text h4 { color: var(--color-text); 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-body);
  font-size: var(--fs-small);
  position: relative;
  overflow: hidden;
}
.map-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 40px,
    rgba(45, 94, 58, 0.04) 40px,
    rgba(45, 94, 58, 0.04) 41px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 40px,
    rgba(45, 94, 58, 0.04) 40px,
    rgba(45, 94, 58, 0.04) 41px
  );
}

/* 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; }
}

/* Asymmetric two column (image heavier) */
.two-col--asymmetric {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-component);
  align-items: center;
}
.two-col--asymmetric-reverse {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-component);
  align-items: center;
}
@media (max-width: 768px) {
  .two-col--asymmetric,
  .two-col--asymmetric-reverse { 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: sepia(10%) saturate(0.9);
  transition: filter 0.4s ease;
}
.about-image:hover {
  filter: sepia(0%) saturate(1);
}

/* Forest line decoration */
.forest-line {
  width: 60px;
  height: 3px;
  background: var(--color-accent);
  margin-bottom: 1.5rem;
  border-radius: 2px;
}
.forest-line--center {
  margin-left: auto;
  margin-right: auto;
}
.forest-line--gradient {
  background: var(--gradient-forest-h);
}

/* Leaf icon decorative */
.leaf-icon {
  color: var(--color-primary);
  font-size: 1.5rem;
  animation: leaf-sway 6s ease-in-out infinite;
  display: inline-block;
}

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

/* Twilight divider ornament */
.divider-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: var(--space-component) auto;
  max-width: 200px;
}
.divider-ornament::before,
.divider-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.divider-ornament__icon {
  color: var(--color-accent);
  font-size: 0.75rem;
}

/* Image frame with forest/amber border glow */
.image-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 2px solid transparent;
  background: var(--gradient-forest) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.image-frame:hover::after {
  opacity: 1;
}

/* ===== 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: #E8EDE4;
  --color-text-light: #9BAF96;
  --color-bg: #0D1B0E;
  --color-bg-alt: #0A150B;
  --color-border: #1E3521;
  --color-muted: #111E12;
}

/* 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)}