/* Twilight Deco — Base CSS */
/* Template: art-deco-glamour, deep teal and rose gold, geometric evening glamour */
/* Colors overridden by variants/{color}/colors.css */

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

:root {
  --color-primary: #1A5C5E;
  --color-secondary: #162A30;
  --color-accent: #C09A7A;
  --color-text: #E8DFD0;
  --color-ink:            #E8DFD0;
  --color-on-ink:         #ffffff;
  --color-text-light: #9B9285;
  --color-bg: #0F1E24;
  --color-bg-alt: #132830;
  --color-border: #2A4048;
  --color-muted: #162A30;

  --font-heading: 'Crimson Pro', 'Georgia', serif;
  --font-body: 'Outfit', 'Helvetica Neue', sans-serif;
  --fs-hero: clamp(3rem, 7vw, 6rem);
  --fs-h1: clamp(2.25rem, 5vw, 4rem);
  --fs-h2: clamp(1.75rem, 3.5vw, 3rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --lh-heading: 1.1;
  --lh-body: 1.75;

  --space-section: 7rem;
  --space-component: 3rem;
  --space-element: 1.25rem;

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.5);

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

  --rose-gold: var(--color-accent);
  --teal: var(--color-primary);
  --gold-line: rgba(192, 154, 122, 0.4);
  --gradient-deco: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%);
  --gradient-deco-h: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-primary) 100%);
  --gradient-rose: linear-gradient(135deg, var(--color-accent) 0%, #D4B08C 50%, var(--color-accent) 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;
  position: relative;
}

/* Art-deco geometric pattern overlay */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C09A7A' stroke-width='0.5'%3E%3Cpath d='M0 40 L20 0 L40 40 L20 80 Z'/%3E%3Cpath d='M40 40 L60 0 L80 40 L60 80 Z'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 80px 80px;
}

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-text); }

/* ===== TYPOGRAPHY ===== */
h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-text);
  letter-spacing: 0.03em;
}
h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-heading);
  color: var(--color-text);
  letter-spacing: 0.02em;
}
h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-text);
}
h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 500;
  line-height: 1.3;
  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--alt { background: var(--color-bg-alt); }
.section--deco {
  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: calc(var(--space-component) * 1.5);
}
.section__header p {
  max-width: 600px;
  margin: var(--space-element) auto 0;
}
.section__subtitle {
  max-width: 600px;
  margin: var(--space-element) auto 0;
}

/* ===== 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: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

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

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

/* ===== DECO GRADIENT TEXT ===== */
.gradient-text {
  background: var(--gradient-deco);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.gradient-text--animated {
  background: var(--gradient-deco);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: deco-shimmer 6s ease-in-out infinite;
}

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

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

/* ===== GOLD LINE DIVIDERS ===== */
.deco-line {
  width: 80px;
  height: 1px;
  background: var(--gold-line);
  border: none;
  margin: 1rem 0;
}
.deco-line--center {
  width: 80px;
  height: 1px;
  background: var(--gold-line);
  border: none;
  margin: 1rem auto;
}
.deco-line--accent {
  background: var(--color-accent);
}

/* Gold line with deco diamond ornament */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: var(--space-component) 0;
}
.divider-ornament::before,
.divider-ornament::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--gold-line);
}
.divider-ornament::before { max-width: 140px; margin-left: auto; }
.divider-ornament::after { max-width: 140px; margin-right: auto; }
.divider-ornament span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  transform: rotate(45deg);
  opacity: 0.6;
}

.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin: var(--space-component) 0;
}

/* ===== GEOMETRIC ACCENT SHAPES ===== */
.geo-diamond {
  width: 12px;
  height: 12px;
  background: var(--color-accent);
  transform: rotate(45deg);
  display: inline-block;
  opacity: 0.6;
}
.geo-fan {
  width: 60px;
  height: 30px;
  border: 1px solid var(--gold-line);
  border-radius: 60px 60px 0 0;
  display: inline-block;
}
.geo-chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid var(--color-accent);
  opacity: 0.5;
}

/* ===== ANIMATED GRADIENT BORDER ===== */
.gradient-border {
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}
.gradient-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: var(--gradient-deco);
  background-size: 300% 100%;
  animation: gradient-border-sweep 4s linear infinite;
  z-index: -1;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: xor;
  -webkit-mask-composite: xor;
  padding: 1px;
}

@keyframes gradient-border-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.875rem 2rem;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: 0;
  position: relative;
}
.btn:hover {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-ink);
  border-color: var(--color-text);
  color: var(--color-bg);
}

.btn--accent {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.btn--accent:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

.btn--ghost {
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: transparent;
}

.btn--gradient {
  border: none;
  background: var(--gradient-deco);
  background-size: 200% 100%;
  color: var(--color-bg);
  animation: deco-shimmer 4s ease-in-out infinite;
}
.btn--gradient:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.btn--lg {
  padding: 1.125rem 2.75rem;
  font-size: var(--fs-body);
}

.btn--sm {
  padding: 0.625rem 1.5rem;
  font-size: 0.8125rem;
}

/* ===== NAV ===== */
.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: all 0.4s ease;
  background: transparent;
  border-bottom: 1px solid transparent;
}
.nav-bar.scrolled {
  background: rgba(15, 30, 36, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  transition: padding 0.4s ease;
}
.nav-bar.scrolled .nav {
  padding: 0.875rem 0;
}

.nav__logo {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: color 0.3s ease;
}
.nav__logo:hover { color: var(--color-accent); }

/* Deco accent diamond after logo */
.nav__logo::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  transform: rotate(45deg);
  margin-left: 0.5rem;
  vertical-align: middle;
}

.nav__links {
  display: flex;
  list-style: none;
  gap: 2.5rem;
}
.nav__links a {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-light);
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--color-accent);
  transition: width 0.3s ease;
}
.nav__links a:hover { color: var(--color-accent); }
.nav__links a:hover::after { width: 100%; }

.nav__cta {
  margin-left: 1rem;
}

@media (max-width: 768px) {
  .nav__links, .nav__cta { display: none; }
}

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

/* Mobile menu */
.nav__mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  z-index: 999;
  transform: translateY(-100%);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__mobile-menu.active {
  transform: translateY(0);
}
.nav__mobile-menu a {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.06em;
  transition: color 0.3s ease;
}
.nav__mobile-menu a:hover { color: var(--color-accent); }

/* Deco pattern in mobile menu background */
.nav__mobile-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C09A7A' stroke-width='0.5'%3E%3Cpath d='M0 40 L20 0 L40 40 L20 80 Z'/%3E%3Cpath d='M40 40 L60 0 L80 40 L60 80 Z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* ===== HERO ===== */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--space-section) * 2) var(--container-padding) var(--space-section);
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
}

/* Geometric deco pattern hero background */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.04;
  background-image:
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C09A7A' stroke-width='0.6'%3E%3Cpath d='M60 0 L120 60 L60 120 L0 60 Z'/%3E%3Cpath d='M60 20 L100 60 L60 100 L20 60 Z'/%3E%3Cpath d='M60 40 L80 60 L60 80 L40 60 Z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* Rose-gold radial glow */
.hero::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: radial-gradient(ellipse, rgba(192, 154, 122, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}

/* Geometric deco frame around hero content */
.hero__deco-frame {
  position: absolute;
  top: -2rem;
  left: -2rem;
  right: -2rem;
  bottom: -2rem;
  border: 1px solid var(--gold-line);
  pointer-events: none;
}
.hero__deco-frame::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  bottom: 8px;
  border: 1px solid rgba(192, 154, 122, 0.15);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.04em;
  margin-bottom: 1.5rem;
}

.hero__subtitle {
  font-size: 1.125rem;
  color: var(--color-text-light);
  max-width: 560px;
  margin: 0 auto var(--space-component);
  line-height: var(--lh-body);
}

.hero__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Decorative deco fan shapes flanking hero */
.hero__fan-left,
.hero__fan-right {
  position: absolute;
  width: 200px;
  height: 100px;
  border: 1px solid rgba(192, 154, 122, 0.1);
  border-radius: 200px 200px 0 0;
  pointer-events: none;
}
.hero__fan-left {
  bottom: 10%;
  left: -60px;
  transform: rotate(-15deg);
}
.hero__fan-right {
  top: 15%;
  right: -60px;
  transform: rotate(15deg);
}

/* ===== CARDS ===== */
.card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: var(--space-component);
  transition: all 0.4s ease;
  border-radius: 0;
  position: relative;
}
.card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
}
.card h3 { margin-bottom: 0.75rem; }
.card p { font-size: var(--fs-small); }

/* Deco-style card with gold corner accents */
.card--deco {
  background: var(--color-secondary);
  border: 1px solid var(--color-border);
  padding: var(--space-component);
  transition: all 0.4s ease;
  position: relative;
}
.card--deco::before,
.card--deco::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--color-accent);
  opacity: 0.4;
  transition: opacity 0.4s ease;
}
.card--deco::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.card--deco::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}
.card--deco:hover::before,
.card--deco:hover::after {
  opacity: 1;
}
.card--deco:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ===== ICON BOX ===== */
.icon-box {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  transform: rotate(45deg);
  transition: all 0.3s ease;
}
.icon-box > * {
  transform: rotate(-45deg);
}
.card:hover .icon-box,
.card--deco:hover .icon-box {
  border-color: var(--color-accent);
  background: rgba(192, 154, 122, 0.1);
}

/* ===== BADGE ===== */
.badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.375rem 1rem;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}
.badge--accent {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

/* ===== PORTFOLIO CARD ===== */
.portfolio-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  border: 1px solid var(--color-border);
}
.portfolio-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: sepia(15%) saturate(80%);
}
.portfolio-card:hover .portfolio-card__image {
  transform: scale(1.05);
  filter: sepia(0%) saturate(100%);
}
.portfolio-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(transparent, rgba(15, 30, 36, 0.9));
  transform: translateY(100%);
  transition: transform 0.5s ease;
}
.portfolio-card:hover .portfolio-card__overlay {
  transform: translateY(0);
}
.portfolio-card__category {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.portfolio-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: var(--color-text);
  margin-top: 0.25rem;
}

/* ===== TEAM CARD ===== */
.team-card { text-align: center; }
.team-card__image {
  width: 160px;
  height: 160px;
  border-radius: 0;
  object-fit: cover;
  margin: 0 auto 1.25rem;
  filter: grayscale(30%) sepia(10%);
  border: 1px solid var(--color-border);
  transition: all 0.5s ease;
  /* Deco octagonal clip */
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.team-card:hover .team-card__image {
  filter: grayscale(0%) sepia(0%);
  border-color: var(--color-accent);
}
.team-card__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.team-card__role {
  font-size: var(--fs-small);
  color: var(--color-text-light);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ===== TESTIMONIAL CARD ===== */
.testimonial-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: var(--space-component);
  position: relative;
  transition: border-color 0.3s ease;
}
/* Deco corner accents */
.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-top: 2px solid var(--color-accent);
  border-left: 2px solid var(--color-accent);
  opacity: 0.4;
}
.testimonial-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-bottom: 2px solid var(--color-accent);
  border-right: 2px solid var(--color-accent);
  opacity: 0.4;
}
.testimonial-card:hover {
  border-color: var(--color-accent);
}
.testimonial-card__quote {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--color-text-light);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  padding-top: 0.5rem;
}
.testimonial-card__author {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  color: var(--color-text);
  margin-bottom: 0.125rem;
}
.testimonial-card__role {
  font-size: var(--fs-small);
  color: var(--color-text-light);
  letter-spacing: 0.05em;
}

/* ===== BLOG CARD ===== */
.blog-card {
  border: 1px solid var(--color-border);
  overflow: hidden;
  transition: all 0.4s ease;
  background: var(--color-bg-alt);
}
.blog-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
}
.blog-card__image {
  aspect-ratio: 16 / 10;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
  filter: sepia(10%) saturate(85%);
}
.blog-card:hover .blog-card__image {
  transform: scale(1.03);
  filter: sepia(0%) saturate(100%);
}
.blog-card__body {
  padding: 1.5rem;
}
.blog-card__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}
.blog-card:hover .blog-card__title { color: var(--color-accent); }
.blog-card__excerpt {
  font-size: var(--fs-small);
  color: var(--color-text-light);
}

/* ===== FAQ ACCORDION ===== */
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.5rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-text);
  text-align: left;
  transition: color 0.3s ease;
}
.faq-item__question:hover { color: var(--color-accent); }
.faq-item__icon {
  font-family: var(--font-body);
  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.active {
  border-color: var(--color-accent);
}
.faq-item__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.active .faq-item__answer {
  max-height: 300px;
  padding-bottom: 1.5rem;
}
.faq-item__answer p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text-light);
}

/* ===== PRICING CARD ===== */
.pricing-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  padding: var(--space-component);
  text-align: center;
  transition: all 0.4s ease;
}
.pricing-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-hover);
}
.pricing-card--featured {
  border-color: var(--color-accent);
  position: relative;
}
/* Animated gradient top border on featured pricing card */
.pricing-card--featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-deco-h);
  background-size: 300% 100%;
  animation: gradient-border-sweep 4s linear infinite;
}
.pricing-card__name {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  margin-bottom: 0.75rem;
}
.pricing-card__price {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.pricing-card__features {
  list-style: none;
  margin-bottom: 2rem;
}
.pricing-card__features li {
  padding: 0.5rem 0;
  color: var(--color-text-light);
  font-size: var(--fs-small);
  border-bottom: 1px solid var(--color-border);
}
.pricing-card__features li:last-child { border-bottom: none; }

/* ===== PROCESS STEP ===== */
.process-step {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  padding: var(--space-component);
  border: 1px solid var(--color-border);
  transition: all 0.4s ease;
  position: relative;
}
.process-step:hover {
  border-color: var(--color-accent);
}
/* Deco corner accent on process step */
.process-step::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--color-accent);
  border-right: 1px solid var(--color-accent);
  opacity: 0.5;
}
.process-step__number {
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.5;
  flex-shrink: 0;
}
.process-step__content h3 { margin-bottom: 0.5rem; }
.process-step__content p { font-size: var(--fs-small); }

/* ===== CTA SECTION ===== */
.cta-section {
  padding: calc(var(--space-section) * 1.5) 0;
  text-align: center;
  background: var(--color-secondary);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
}
/* Deco fan pattern background */
.cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C09A7A' stroke-width='0.6'%3E%3Cpath d='M60 0 L120 60 L60 120 L0 60 Z'/%3E%3Cpath d='M60 20 L100 60 L60 100 L20 60 Z'/%3E%3Cpath d='M60 40 L80 60 L60 80 L40 60 Z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.cta-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(192, 154, 122, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.cta-section__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h1);
  margin-bottom: 1rem;
  position: relative;
  z-index: 1;
}
.cta-section__subtitle {
  font-size: 1.0625rem;
  color: var(--color-text-light);
  max-width: 500px;
  margin: 0 auto var(--space-component);
  position: relative;
  z-index: 1;
}

/* ===== CONTACT FORM ===== */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-element);
}
.form__group { display: flex; flex-direction: column; gap: 0.5rem; }
.form__label {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-light);
}
.form__input,
.form__textarea {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  transition: border-color 0.3s ease;
  border-radius: 0;
  outline: none;
}
.form__input:focus,
.form__textarea:focus {
  border-color: var(--color-accent);
}
.form__textarea {
  min-height: 140px;
  resize: vertical;
}

/* ===== CONTACT BOX ===== */
.contact-box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  border: 1px solid var(--color-border);
  transition: border-color 0.3s ease;
  position: relative;
}
/* Deco corner accent on contact box */
.contact-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--color-accent);
  border-left: 1px solid var(--color-accent);
  opacity: 0.4;
}
.contact-box:hover { border-color: var(--color-accent); }
.contact-box__icon {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.contact-box__text h4 {
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.contact-box__text p { font-size: var(--fs-small); }

/* ===== MAP PLACEHOLDER ===== */
.map-placeholder {
  width: 100%;
  height: 400px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-light);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
}
/* Deco diamond pattern for map */
.map-placeholder::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C09A7A' stroke-width='0.4'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z'/%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

/* ===== STAT ===== */
.stat { text-align: center; padding: var(--space-component) 0; }
.stat__value {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 400;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}
.stat__label {
  font-size: var(--fs-small);
  color: var(--color-text-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
/* Gold diamond divider between stats */
.stat + .stat {
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  opacity: 0.3;
}

/* ===== ABOUT IMAGE ===== */
.about-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--color-border);
  filter: sepia(10%) saturate(90%);
  transition: all 0.4s ease;
}
.about-image:hover {
  border-color: var(--color-accent);
  filter: sepia(0%) saturate(100%);
}

/* ===== QUOTE ELEGANT ===== */
.quote-elegant {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-style: italic;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.5;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-component) 0;
  position: relative;
}
.quote-elegant::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  transform: rotate(45deg);
  margin: 0 auto 1.5rem;
}

/* ===== IMAGE FRAME ===== */
.image-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.image-frame:hover img { transform: scale(1.02); }
/* Animated gradient border on hover */
.image-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  transition: border-color 0.4s ease;
}
.image-frame:hover::after {
  border-color: var(--color-accent);
}

/* ===== FOOTER ===== */
.footer {
  background: var(--color-secondary);
  color: var(--color-text);
  padding: calc(var(--space-section) * 0.75) 0 0;
  position: relative;
}
/* Gold gradient top border */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-deco-h);
  background-size: 300% 100%;
  animation: gradient-border-sweep 6s linear infinite;
}
.footer h3 {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--color-text);
  margin-bottom: 1rem;
}
.footer h4 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.25rem;
}
.footer p,
.footer a {
  color: rgba(232, 223, 208, 0.5);
  font-size: var(--fs-small);
  transition: color 0.3s ease;
}
.footer a:hover { color: var(--color-accent); }
.footer ul { list-style: none; }
.footer li { margin-bottom: 0.625rem; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-component);
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr; }
}

.footer__brand-desc {
  margin-bottom: 1.5rem;
  line-height: 1.7;
  max-width: 280px;
}

.footer__social {
  display: flex;
  gap: 1rem;
}
.footer__social a {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 223, 208, 0.15);
  transition: all 0.3s ease;
  /* Deco diamond shape for social icons */
  transform: rotate(45deg);
}
.footer__social a > * {
  transform: rotate(-45deg);
}
.footer__social a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: rgba(192, 154, 122, 0.1);
}

.footer__bottom {
  margin-top: calc(var(--space-section) * 0.5);
  padding: 1.5rem 0;
  border-top: 1px solid rgba(232, 223, 208, 0.1);
  text-align: center;
}
.footer__bottom p {
  font-size: var(--fs-small);
  color: rgba(232, 223, 208, 0.3);
}

/* ===== REVEAL ANIMATIONS ===== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.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; }

/* ===== ANIMATIONS ===== */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes gold-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

@keyframes deco-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== DECO-SPECIFIC EXTRAS ===== */

/* Gold-glow text shadow */
.text-glow {
  text-shadow: 0 0 20px rgba(192, 154, 122, 0.3);
}
.text-glow--accent {
  text-shadow: 0 0 20px rgba(26, 92, 94, 0.3);
}

/* Deco glow effect for elements */
.deco-glow {
  box-shadow: 0 0 20px rgba(192, 154, 122, 0.15), 0 0 60px rgba(192, 154, 122, 0.05);
}
.deco-glow--accent {
  box-shadow: 0 0 20px rgba(26, 92, 94, 0.2), 0 0 60px rgba(26, 92, 94, 0.05);
}

/* Glass effect for dark bg cards */
.glass {
  background: rgba(15, 30, 36, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(192, 154, 122, 0.15);
}

/* Feature number (large watermark) */
.feature-number {
  font-family: var(--font-heading);
  font-size: 5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.12;
}

/* Deco repeating border pattern */
.deco-border {
  border: 1px solid var(--color-border);
  position: relative;
}
.deco-border::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(192, 154, 122, 0.15);
  pointer-events: none;
}

/* Animated gradient border section */
.deco-border--animated {
  position: relative;
}
.deco-border--animated::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--gradient-deco);
  background-size: 300% 100%;
  animation: gradient-border-sweep 4s linear infinite;
  z-index: -1;
}
.deco-border--animated::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-bg-alt);
  z-index: -1;
}

/* Pulse dot indicator (diamond) */
.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  transform: rotate(45deg);
  animation: gold-pulse 2s ease-in-out infinite;
}

/* Divider variants */
.divider--deco {
  height: 1px;
  background: var(--gradient-deco-h);
  background-size: 200% 100%;
  border: none;
  margin: var(--space-component) 0;
}

/* Card variants */
.card--accent-glow {
  box-shadow: 0 0 20px rgba(192, 154, 122, 0.1);
  border-color: rgba(192, 154, 122, 0.3);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  :root {
    --space-section: 5rem;
    --space-component: 2.5rem;
  }
}
@media (max-width: 768px) {
  :root {
    --space-section: 4rem;
    --space-component: 2rem;
    --container-padding: 1.25rem;
  }
  .hero {
    min-height: 80vh;
    padding: 8rem var(--container-padding) var(--space-section);
  }
  .hero__title { font-size: clamp(2.25rem, 8vw, 3.5rem); }
  .hero__actions { flex-direction: column; align-items: center; }
  .hero__deco-frame { display: none; }
  .hero__fan-left, .hero__fan-right { display: none; }
  .two-col { gap: var(--space-component); }
  .stat + .stat::before { display: none; }
}

/* ─── 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: #E8DFD0;
  --color-text-light: #9B9285;
  --color-bg: #0F1E24;
  --color-bg-alt: #132830;
  --color-border: #2A4048;
  --color-muted: #162A30;
}

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