/* ============================================================
   MIDNIGHT NOIR — Premium Dark Editorial Theme
   Template: 001-midnight-noir
   Fonts: Playfair Display (heading) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&display=swap');

/* ─── Design Tokens ─── */
:root {
  /* Colors — Core */
  --color-bg:             #0a0e1a;
  --color-bg-alt:         #0f1424;
  --color-bg-card:        #141929;
  --color-bg-elevated:    #1a2035;
  --color-surface:        #1e2540;
  --color-border:         rgba(212, 160, 74, 0.12);
  --color-border-subtle:  rgba(255, 255, 255, 0.06);

  /* Colors — Text */
  --color-text:           #f0f0f0;
  --color-ink:            #f0f0f0;
  --color-on-ink:         #ffffff;
  --color-text-secondary: #a0a8c0;
  --color-text-muted:     #6b7394;
  --color-text-inverse:   #0a0e1a;

  /* Colors — Accent */
  --color-accent:         #d4a04a;
  --color-accent-light:   #e8c47a;
  --color-accent-dark:    #b8862e;
  --color-accent-glow:    rgba(212, 160, 74, 0.15);
  --color-accent-subtle:  rgba(212, 160, 74, 0.08);

  /* Colors — Semantic */
  --color-success:        #4ade80;
  --color-error:          #f87171;
  --color-info:           #60a5fa;

  /* Typography */
  --font-heading:         'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:            'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Font Sizes — fluid scale */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.5rem;
  --text-6xl:   4.5rem;
  --text-display: clamp(3rem, 6vw, 6rem);

  /* Spacing */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;
  --space-4xl:  8rem;
  --space-section: 8rem;

  /* Layout */
  --max-width:  1280px;
  --max-narrow: 800px;

  /* Border Radius */
  --radius-sm:  0.25rem;
  --radius-md:  0.5rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-full: 50%;

  /* Shadows */
  --shadow-card:     0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 15px 50px rgba(0, 0, 0, 0.4);
  --shadow-glow:     0 0 40px rgba(212, 160, 74, 0.1);
  --shadow-inner:    inset 0 1px 0 rgba(255, 255, 255, 0.03);

  /* Transitions */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   0.2s;
  --duration-base:   0.4s;
  --duration-slow:   0.7s;
  --duration-reveal: 0.9s;

  /* Z-index layers */
  --z-base:    1;
  --z-card:    10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-nav:     900;
}


/* ─── Reset & Base ─── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
  position: relative;
}

/* Noise texture overlay for depth */
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.9' 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;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--color-accent-light);
}

ul, ol {
  list-style: none;
}

::selection {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}


/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-display); }
h2 { font-size: var(--text-4xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  max-width: 65ch;
}


/* ─── Utility Classes ─── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.container--narrow {
  max-width: var(--max-narrow);
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }


/* ─── Section Commons ─── */
.section {
  padding: var(--space-section) 0;
  position: relative;
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* Gold diamond section marker */
.section-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.section-marker::before,
.section-marker::after {
  content: '';
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.section-marker span {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: var(--color-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-accent);
  display: block;
  margin-bottom: var(--space-xs);
}

.section-title {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-md);
}

.section-subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-lg);
  max-width: 600px;
}

.section-heading-group {
  margin-bottom: var(--space-3xl);
}


/* ─── Reveal Animations ─── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

.reveal.revealed {
  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; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--duration-reveal) var(--ease-out),
              transform var(--duration-reveal) var(--ease-out);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}


/* ─── 1. HEADER / NAV ─── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: var(--space-md) 0;
  transition: background var(--duration-base) var(--ease-out),
              padding var(--duration-base) var(--ease-out),
              backdrop-filter var(--duration-base) var(--ease-out);
}

.site-header.scrolled {
  background: rgba(10, 14, 26, 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: -0.02em;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.site-logo:hover {
  color: var(--color-accent);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav-links a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width var(--duration-base) var(--ease-out);
}

.nav-links a:hover {
  color: var(--color-text);
}

.nav-links a:hover::after {
  width: 100%;
}

/* CTA Button in nav */
.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-inverse);
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.nav-cta:hover {
  background: var(--color-accent-light);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: calc(var(--z-nav) + 10);
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
  transition: transform var(--duration-base) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  background: rgba(10, 14, 26, 0.97);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-out);
}

.mobile-nav.open {
  display: flex;
  opacity: 1;
  pointer-events: all;
}

.mobile-nav a {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.mobile-nav a:hover {
  color: var(--color-accent);
}


/* ─── 2. HERO ─── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl) var(--space-md);
}

/* Gradient mesh background */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(212, 160, 74, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 20% 80%, rgba(99, 75, 155, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 80% 20%, rgba(212, 160, 74, 0.05) 0%, transparent 50%);
  z-index: 0;
}

/* Animated glow orb */
.hero::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, rgba(212, 160, 74, 0.06), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: heroGlow 8s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes heroGlow {
  0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  100% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

.hero-content {
  position: relative;
  z-index: var(--z-base);
  max-width: 900px;
}

.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
}

.hero-overline::before,
.hero-overline::after {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--color-accent);
}

.hero h1 {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: var(--space-lg);
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-accent-light) 50%, var(--color-ink) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 6s ease-in-out infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 200% center; }
}

.hero-subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  line-height: 1.7;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

/* Scroll indicator */
.hero-scroll {
  position: absolute;
  bottom: var(--space-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  animation: scrollBounce 2s ease-in-out infinite;
}

.hero-scroll::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--color-accent), transparent);
}

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


/* ─── 3. BUTTONS (global) ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.btn:hover::before {
  opacity: 1;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.btn-primary:hover {
  background: var(--color-accent-light);
  color: var(--color-text-inverse);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(212, 160, 74, 0.25);
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-accent);
  padding: 0.9rem 1rem;
}

.btn-ghost:hover {
  color: var(--color-accent-light);
}

.btn-lg {
  padding: 1.1rem 2.8rem;
  font-size: var(--text-base);
}


/* ─── 4. ABOUT SECTION ─── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.about-image-wrapper {
  position: relative;
}

.about-image-wrapper img {
  border-radius: var(--radius-md);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: var(--shadow-elevated);
}

/* Gold accent corner frame */
.about-image-wrapper::before {
  content: '';
  position: absolute;
  top: -12px;
  left: -12px;
  width: 80px;
  height: 80px;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  z-index: var(--z-base);
}

.about-image-wrapper::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 80px;
  height: 80px;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  z-index: var(--z-base);
}

.about-content h2 {
  margin-bottom: var(--space-md);
}

.about-content p {
  margin-bottom: var(--space-md);
  line-height: 1.8;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.about-stat-number {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-accent);
  display: block;
}

.about-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}


/* ─── 5. SERVICES SECTION ─── */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.service-card {
  position: relative;
  padding: var(--space-xl);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--duration-base) var(--ease-out);
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.service-card:hover {
  border-color: var(--color-border);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.service-card:hover::before {
  opacity: 1;
}

.service-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  color: var(--color-accent);
  font-size: var(--text-xl);
}

.service-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

.service-card p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.service-number {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-border-subtle);
  line-height: 1;
}


/* ─── 6. PORTFOLIO SECTION ─── */
.portfolio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  aspect-ratio: 4/3;
  cursor: pointer;
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.portfolio-item:hover img {
  transform: scale(1.08);
}

.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 14, 26, 0.9) 0%, rgba(10, 14, 26, 0.2) 50%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-category {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.portfolio-overlay h3 {
  font-size: var(--text-xl);
  color: var(--color-text);
  transform: translateY(10px);
  transition: transform var(--duration-base) var(--ease-out);
}

.portfolio-item:hover .portfolio-overlay h3 {
  transform: translateY(0);
}


/* ─── 7. TEAM SECTION ─── */
.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.team-card {
  text-align: center;
  position: relative;
}

.team-photo-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto var(--space-md);
  border-radius: var(--radius-full);
  overflow: hidden;
  border: 2px solid var(--color-border);
  transition: border-color var(--duration-base) var(--ease-out);
}

.team-card:hover .team-photo-wrapper {
  border-color: var(--color-accent);
}

.team-photo-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out);
}

.team-card:hover .team-photo-wrapper img {
  transform: scale(1.05);
}

.team-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: 0.25rem;
}

.team-card .team-role {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
}


/* ─── 8. TESTIMONIALS SECTION ─── */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.testimonial-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  position: relative;
  transition: border-color var(--duration-base) var(--ease-out);
}

.testimonial-card:hover {
  border-color: var(--color-border);
}

.testimonial-quote-mark {
  font-family: var(--font-heading);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.3;
  position: absolute;
  top: var(--space-md);
  left: var(--space-lg);
}

.testimonial-card blockquote {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: var(--space-lg);
  padding-top: var(--space-lg);
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.testimonial-author-info .name {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  display: block;
}

.testimonial-author-info .role {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.testimonial-stars {
  display: flex;
  gap: 2px;
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
  font-size: var(--text-sm);
}


/* ─── 9. BLOG SECTION ─── */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.blog-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--duration-base) var(--ease-out);
}

.blog-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-border);
  box-shadow: var(--shadow-card);
}

.blog-card-image {
  aspect-ratio: 16/9;
  overflow: hidden;
}

.blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}

.blog-card-content {
  padding: var(--space-lg);
}

.blog-card-meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.blog-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
  color: var(--color-text);
  transition: color var(--duration-fast) var(--ease-out);
}

.blog-card:hover h3 {
  color: var(--color-accent);
}

.blog-card p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: var(--space-md);
  transition: gap var(--duration-fast) var(--ease-out);
}

.blog-read-more:hover {
  gap: 0.6rem;
}


/* ─── 10. FAQ SECTION ─── */
.faq-list {
  max-width: var(--max-narrow);
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--duration-fast) var(--ease-out);
}

.faq-question:hover {
  color: var(--color-accent);
}

.faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq-icon::before {
  width: 14px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 14px;
}

.faq-item.active .faq-icon::after {
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--duration-base) var(--ease-out),
              padding var(--duration-base) var(--ease-out);
}

.faq-answer-inner {
  padding-bottom: var(--space-lg);
  color: var(--color-text-secondary);
  line-height: 1.8;
  font-size: var(--text-base);
}


/* ─── 11. PRICING SECTION ─── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: stretch;
}

.pricing-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all var(--duration-base) var(--ease-out);
}

.pricing-card:hover {
  border-color: var(--color-border);
  transform: translateY(-4px);
}

.pricing-card.featured {
  border-color: var(--color-accent);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-glow);
}

.pricing-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 0.35rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

.pricing-card h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-sm);
}

.pricing-price {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
  line-height: 1;
}

.pricing-price span {
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.pricing-features {
  flex: 1;
  margin-bottom: var(--space-xl);
}

.pricing-features li {
  padding: 0.6rem 0;
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border-bottom: 1px solid var(--color-border-subtle);
}

.pricing-features li::before {
  content: '\2726';
  color: var(--color-accent);
  font-size: var(--text-sm);
  flex-shrink: 0;
}


/* ─── 12. PROCESS SECTION ─── */
.process-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  position: relative;
}

/* Vertical connection line */
.process-grid::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
}

.process-step {
  position: relative;
  padding-left: 80px;
}

/* Large faded number */
.process-number {
  position: absolute;
  left: 0;
  top: -10px;
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 900;
  color: var(--color-accent);
  opacity: 0.08;
  line-height: 1;
  z-index: 0;
}

/* Step dot on the line */
.process-dot {
  position: absolute;
  left: 22px;
  top: 8px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-accent);
  background: var(--color-bg);
  z-index: var(--z-base);
}

.process-step h3 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.process-step p {
  color: var(--color-text-secondary);
  line-height: 1.7;
}


/* ─── 13. CTA SECTION ─── */
.cta-section {
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212, 160, 74, 0.06) 0%, transparent 70%);
}

.cta-content {
  position: relative;
  z-index: var(--z-base);
}

.cta-section h2 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-md);
}

.cta-section p {
  font-size: var(--text-lg);
  margin: 0 auto var(--space-xl);
}


/* ─── 14. CONTACT SECTION ─── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
}

.contact-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

.contact-item h4 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}

.contact-item p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--color-accent);
}

.form-group textarea {
  min-height: 140px;
  resize: vertical;
}


/* ─── 15. MAP SECTION ─── */
.map-wrapper {
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  aspect-ratio: 21/9;
  background: var(--color-bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(0.8) brightness(0.7) contrast(1.1);
}

.map-placeholder {
  text-align: center;
  color: var(--color-text-muted);
}

.map-placeholder svg {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-sm);
  color: var(--color-accent);
}


/* ─── FOOTER ─── */
.site-footer {
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3xl) 0 var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.footer-brand .site-logo {
  display: inline-block;
  margin-bottom: var(--space-sm);
}

.footer-brand p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 300px;
  line-height: 1.7;
}

.footer-nav h4 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-nav a {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.footer-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.footer-contact-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-accent);
  flex-shrink: 0;
}

.footer-social {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.footer-social a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}

.footer-social a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.footer-bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

.footer-bottom p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ════════════════════════════════════════════ */

/* ─── Tablet (768px+) ─── */
@media (min-width: 768px) {
  :root {
    --space-section: 8rem;
  }

  .container {
    padding: 0 var(--space-xl);
  }

  .section-title {
    font-size: var(--text-5xl);
  }

  .about-grid {
    grid-template-columns: 1fr 1fr;
  }

  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-item:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
  }

  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pricing-card.featured {
    transform: scale(1.04);
  }

  .pricing-card.featured:hover {
    transform: scale(1.04) translateY(-4px);
  }

  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
  }

  .process-grid::before {
    display: none;
  }

  .process-step {
    padding-left: 0;
    padding-top: 60px;
    text-align: center;
  }

  .process-number {
    position: relative;
    left: auto;
    top: auto;
    font-size: 6rem;
    display: block;
    margin-bottom: -30px;
  }

  .process-dot {
    display: none;
  }

  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}


/* ─── Desktop (1024px+) ─── */
@media (min-width: 1024px) {
  :root {
    --space-section: 10rem;
  }

  .container {
    padding: 0 var(--space-2xl);
  }

  .hamburger {
    display: none !important;
  }

  .nav-links {
    display: flex !important;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .process-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}


/* ─── Mobile (<768px) specifics ─── */
@media (max-width: 767px) {
  :root {
    --space-section: 5rem;
    --text-display: clamp(2.2rem, 8vw, 3.5rem);
  }

  .hamburger {
    display: flex;
  }

  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .hero {
    min-height: 90vh;
    padding: var(--space-3xl) var(--space-md);
  }

  .hero h1 {
    font-size: clamp(2.2rem, 8vw, 3.5rem);
  }

  .hero-subtitle {
    font-size: var(--text-base);
  }

  .hero-scroll {
    display: none;
  }

  .section-title {
    font-size: var(--text-3xl);
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    text-align: center;
  }

  .pricing-card.featured {
    order: -1;
  }

  .process-number {
    font-size: 4rem;
  }

  .cta-section h2 {
    font-size: var(--text-3xl);
  }

  .map-wrapper {
    aspect-ratio: 16/9;
  }
}

/* ── Gallery Section (batch-1 addition) ─────────────────────────────────── */
.noir-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-element, 1.5rem);
  margin-top: var(--space-component, 3rem);
}
.noir-gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius, 4px);
}
.noir-gallery-frame {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.noir-gallery-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  display: block;
}
.noir-gallery-item:hover .noir-gallery-frame img {
  transform: scale(1.05);
}
.noir-gallery-caption {
  font-size: 0.85rem;
  color: var(--color-text-muted, #888);
  margin-top: 0.5rem;
  text-align: center;
}
@media (max-width: 600px) {
  .noir-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
}

/* ── Menu Section (batch-1 addition) ────────────────────────────────────── */
.noir-menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-component, 3rem);
  margin-top: var(--space-component, 3rem);
}
.noir-menu-category-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary, #111);
  margin-bottom: 0.75rem;
}
.noir-menu-divider {
  height: 2px;
  background: var(--color-primary, #111);
  opacity: 0.15;
  margin-bottom: 1.25rem;
}
.noir-menu-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.noir-menu-item-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.noir-menu-item-name {
  font-weight: 600;
  color: var(--color-text, #111);
}
.noir-menu-item-price {
  font-weight: 700;
  color: var(--color-primary, #111);
  white-space: nowrap;
}
.noir-menu-item-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted, #888);
  margin: 0.2rem 0 0;
}
@media (max-width: 700px) {
  .noir-menu-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ─── 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: purple-pink */
/* Dark-based template — surface tokens preserved from base.css, only
   accent/primary/secondary rotate across variants. */
:root {
  --color-primary: #A855F7;
  --color-accent: #EC4899;
  --color-secondary: #00F0FF;
  --color-text: #f0f0f0;
  --color-text-light: #8A8A9A;
  --color-bg: #0a0e1a;
  --color-bg-alt: #0f1424;
  --color-border: #1A1A2E;
  --color-muted: #0D0D1A;
}

/* 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-links{position:relative;z-index:1000}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:inherit}
.nav-links__links{list-style:none;padding:0;margin:0}
.nav-links__links li{display:inline}
@media(max-width:768px){
  .nav-toggle{display:block}
  .nav-links__cta{display:none}
  .nav-links__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__links li{display:block}
  .nav-links__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-links__brand,.nav-links__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)}