/* ---------------------------------------------------------------
   Paulette's African Hair Braiding — public site styles
   Palette pulled from the logo: deep navy + sky blue accent.
   Variable names (--green-*, --gold*) are kept from the original green/gold
   theme to avoid touching every reference — only the values changed.
   --------------------------------------------------------------- */

:root {
  --green-900: #123a54;
  --green-800: #1a4a6b;
  --green-700: #2b6690;
  --gold: #4fa3d1;
  --gold-light: #a8d4ec;
  --blush: #8fc4e3;
  --blush-light: #dceaf5;
  --cream: #faf7f0;
  --ink: #1c2420;
  --muted: #5c6a63;
  --white: #ffffff;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --shadow: 0 10px 30px rgba(18, 58, 84, 0.12);
  --shadow-sm: 0 4px 14px rgba(18, 58, 84, 0.08);
  --glow-gold: 0 8px 30px rgba(79, 163, 209, 0.35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  /* Scroll-linked color wash: background-position is driven by JS as the page scrolls,
     drifting gently through the brand palette instead of sitting flat. */
  background-image: linear-gradient(115deg, var(--cream) 0%, var(--blush-light) 35%, var(--gold-light) 65%, var(--cream) 100%);
  background-size: 260% 260%;
  background-position: 0% 50%;
  background-color: var(--cream);
  transition: background-position 0.2s linear;
}

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

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Page + scroll-reveal animations */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageFadeIn 0.5s ease both; }

/* Everything defaults to fully visible, no clipping, no hidden opacity.
   The `.js-ready` class is only added by JS once it has actually run, so these
   elements only ever get hidden right before JS is about to reveal them again.
   If JS fails to load, errors, or the reveal trigger misses for any reason,
   content simply stays visible instead of disappearing forever. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.98);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-ready .reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }

/* Sharp image entrance: fast opacity + scale + slide, snappier than the text reveal
   and alternating direction per card. Built on opacity/transform (not clip-path) —
   clip-path combined with the 3D tilt-on-hover transform on the same elements caused
   the image to never repaint back in after scrolling away and back. Replays every
   time the image crosses the viewport. */
.js-ready .reveal-img {
  opacity: 0;
  transform: scale(1.1) translateX(-26px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready .reveal-img.reveal-from-right { transform: scale(1.1) translateX(26px); }
.js-ready .reveal-img.is-visible { opacity: 1; transform: scale(1) translateX(0); }

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulseScale {
  0% { transform: scale(1); }
  30% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

h1, h2, h3, h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  color: var(--green-900);
  margin: 0 0 0.5em;
  line-height: 1.2;
}

.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }

.section-heading { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.section-heading p { color: var(--muted); }

.section-flourish {
  width: 150px;
  color: var(--gold);
  margin: 6px auto 18px;
}
.section-flourish svg { width: 100%; height: auto; display: block; }

.eyebrow {
  display: inline-block;
  color: var(--green-700);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 10px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-pill { background: var(--green-900); color: var(--white); }
.btn-pill:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); background: var(--green-800); }
.btn-gold { background: var(--gold); color: var(--green-900); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: var(--glow-gold); }
.btn-outline { background: transparent; border-color: var(--green-900); color: var(--green-900); }
.btn-outline:hover { background: var(--green-900); color: var(--white); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.7s ease;
}
.btn-shine:hover::after { left: 130%; }

/* Header */
.site-header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(18, 58, 84, 0.05);
  transition: box-shadow 0.25s ease, padding 0.25s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(18, 58, 84, 0.14); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  transition: padding 0.25s ease;
}
.site-header.scrolled .header-inner { padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 12px; line-height: 1; }
.brand-text { display: flex; flex-direction: column; }
.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(18, 58, 84, 0.25);
  flex-shrink: 0;
}
.footer-brand .brand-mark { width: 52px; height: 52px; }
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.shimmer-text {
  background: linear-gradient(90deg, var(--green-900) 30%, var(--gold) 45%, var(--gold-light) 50%, var(--gold) 55%, var(--green-900) 70%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5s linear infinite;
}

.brand-script {
  font-family: "Alex Brush", cursive;
  font-size: 2rem;
  color: var(--green-900);
}
.brand-bold {
  font-weight: 800;
  letter-spacing: 0.03em;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--green-700);
}
.footer-brand .brand-script { color: var(--gold-light); }
.footer-brand .brand-bold { color: var(--white); }

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-weight: 600;
}
.site-nav a:not(.nav-cta) {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}
.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.25s ease;
}
.site-nav a:not(.nav-cta):hover { color: var(--gold); }
.site-nav a:not(.nav-cta):hover::after,
.site-nav a:not(.nav-cta).active::after { width: 100%; }
.site-nav a:not(.nav-cta).active { color: var(--green-900); }
.nav-cta { padding: 10px 22px; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.nav-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: var(--shadow-sm); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--green-900); }

/* Hero */
.hero {
  background: linear-gradient(180deg, var(--cream) 0%, #f1ead9 100%);
  padding: 60px 0 40px;
  position: relative;
  overflow: hidden;
}
.hero-leaf {
  position: absolute;
  width: 160px;
  height: 160px;
  color: var(--green-700);
  opacity: 0.16;
  pointer-events: none;
  animation: floatY 7s ease-in-out infinite;
}
.hero-leaf svg { width: 100%; height: 100%; }
.hero-leaf-tl { top: -30px; left: -30px; }
.hero-leaf-br { bottom: -30px; right: -30px; transform: rotate(180deg); animation-delay: 1.4s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}
.sparkle {
  position: absolute;
  color: var(--gold);
  font-size: 1.4rem;
  pointer-events: none;
  animation: twinkle 3.2s ease-in-out infinite;
  text-shadow: 0 0 12px rgba(79, 163, 209, 0.6);
}
.sparkle-1 { top: 12%; left: 42%; font-size: 1.1rem; animation-delay: 0s; }
.sparkle-2 { top: 65%; left: 8%; font-size: 1.6rem; color: var(--blush); animation-delay: 0.8s; }
.sparkle-3 { top: 22%; right: 6%; font-size: 1.3rem; animation-delay: 1.6s; }
.sparkle-4 { top: 78%; right: 32%; font-size: 1rem; color: var(--blush); animation-delay: 2.3s; }
@media (max-width: 640px) { .sparkle { display: none; } }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
  perspective: 1200px;
}
.hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.2rem);
  margin-bottom: 0.35em;
}
.hero-script {
  font-family: "Alex Brush", cursive;
  font-size: clamp(2.6rem, 6vw, 4rem);
  color: var(--green-900);
  display: block;
}
.hero p.lead { font-size: 1.05rem; color: var(--muted); max-width: 46ch; }
.hero-actions { display: flex; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.hero-image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 5;
  background: var(--green-800);
  transition: transform 0.3s ease, box-shadow 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.hero-image:hover { box-shadow: 0 26px 50px rgba(18, 58, 84, 0.25), var(--glow-gold); }
.hero-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.hero-image:hover img.active { transform: scale(1.05); }
.hero-image-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px rgba(79, 163, 209, 0.35);
  pointer-events: none;
  z-index: 2;
}

/* Hero showcase: several style photos crossfading on a timer, independent of
   scroll position, so it's always alive rather than relying on a scroll trigger. */
.hero-showcase-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transition: opacity 1s ease, transform 0.6s ease;
}
.hero-showcase-img.active { opacity: 1; z-index: 1; }
.hero-showcase-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 3;
  padding: 0;
  margin: 0;
}
.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.hero-dot:hover { background: rgba(255, 255, 255, 0.85); }
.hero-dot.active { background: var(--gold); transform: scale(1.35); }

/* Feature badges */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.feature-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}
.feature-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green-900);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: transform 0.4s ease;
}
.feature-card:hover .feature-icon { animation: pulseScale 0.5s ease; background: var(--gold); }
.feature-card h4 { margin-bottom: 2px; font-size: 1rem; }
.feature-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* Category pills */
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 36px;
}
.category-pill {
  padding: 9px 20px;
  border-radius: 999px;
  border: 2px solid var(--green-900);
  color: var(--green-900);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  background: var(--white);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.category-pill.active,
.category-pill:hover {
  background: var(--green-900);
  color: var(--white);
  transform: translateY(-2px);
}
.category-pill:active { transform: translateY(0) scale(0.96); }

/* Style / service cards */
.style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px;
  perspective: 1200px;
}
.style-card {
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  will-change: transform;
}
.style-card:hover,
.style-card.tilt-active {
  box-shadow: 0 22px 40px rgba(18, 58, 84, 0.2), var(--glow-gold);
}
.style-card:not(.tilt-active):hover { transform: translateY(-6px); }
.style-card-image {
  aspect-ratio: 1 / 1;
  background: var(--green-800);
  overflow: hidden;
}
.style-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.style-card:hover .style-card-image img { transform: scale(1.08); }
.style-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.style-card-body h3 { font-size: 1.02rem; margin: 0; }
.style-card-category { color: var(--gold); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }
.style-card-price {
  font-weight: 700;
  margin-top: auto;
  background: linear-gradient(90deg, var(--green-700), var(--green-900) 60%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.style-card .btn { margin-top: 6px; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

/* Style detail */
.style-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
}
.style-gallery-main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/5;
  background: var(--green-800);
  margin-bottom: 12px;
  cursor: zoom-in;
}
.style-gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.2s ease, transform 0.5s ease; }
.style-gallery-main:hover img { transform: scale(1.03); }
.gallery-zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(18, 58, 84, 0.65);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.style-gallery-main:hover .gallery-zoom-hint { opacity: 1; }

.style-gallery-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.style-gallery-thumbs img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.75;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.style-gallery-thumbs img:hover { opacity: 1; transform: translateY(-2px); }
.style-gallery-thumbs img.active { border-color: var(--gold); opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 15, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  padding: 30px;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  transform: scale(0.94);
  transition: transform 0.25s ease;
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute;
  top: 22px;
  right: 26px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.25); transform: rotate(90deg); }

.price-box {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  margin: 20px 0;
}
.price-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
  border-radius: 6px;
  transition: background 0.2s ease;
}
.price-row:hover { background: rgba(79, 163, 209, 0.08); }
.price-row:last-child { border-bottom: none; }
.price-row .amount { font-weight: 700; color: var(--green-900); }
.badge {
  display: inline-block;
  background: var(--gold-light);
  color: var(--green-900);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.success-check {
  position: relative;
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  color: var(--green-900);
}
.success-check svg { width: 100%; height: 100%; }
.success-check circle {
  stroke: var(--gold);
  stroke-width: 3;
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
  animation: drawCheck 0.6s ease forwards;
}
.success-check path {
  stroke: var(--green-900);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: drawCheck 0.4s ease 0.55s forwards;
}

@keyframes confettiBurst {
  0% { opacity: 0; transform: translate(0, 0) scale(0.3) rotate(0deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1) rotate(140deg); }
}
.confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1.1rem;
  color: var(--gold);
  opacity: 0;
  animation: confettiBurst 1.1s ease-out 0.75s both;
}
.confetti.c1 { --tx: -46px; --ty: -40px; color: var(--gold); }
.confetti.c2 { --tx: 44px; --ty: -46px; color: var(--blush); }
.confetti.c3 { --tx: -54px; --ty: 18px; color: var(--blush); }
.confetti.c4 { --tx: 52px; --ty: 22px; color: var(--gold); }
.confetti.c5 { --tx: -18px; --ty: -58px; color: var(--gold-light); font-size: 0.85rem; }
.confetti.c6 { --tx: 20px; --ty: 56px; color: var(--gold-light); font-size: 0.85rem; }

/* Forms */
.form-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
  max-width: 640px;
  margin: 0 auto;
}
.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.92rem;
  color: var(--green-900);
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="url"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #dfd8c6;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--cream);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(79, 163, 209, 0.18);
}
.radio-group { display: flex; gap: 20px; flex-wrap: wrap; }
.radio-option {
  border: 1.5px solid #dfd8c6;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  flex: 1;
  min-width: 200px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.radio-option:hover { transform: translateY(-2px); border-color: var(--gold); }
.radio-option input { margin-top: 3px; }
.radio-option.checked { border-color: var(--gold); background: #fbf5e7; }

#addressGroup {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-bottom 0.35s ease;
}
#addressGroup.field-open { max-height: 160px; opacity: 1; margin-bottom: 20px; }
#addressGroup.field-init:not(.field-open) { display: block; }

@keyframes pricePulse {
  0% { transform: scale(1); color: var(--green-900); }
  40% { transform: scale(1.14); color: var(--gold); }
  100% { transform: scale(1); color: var(--green-900); }
}
.price-pulse { animation: pricePulse 0.45s ease; display: inline-block; }
.help-text { color: var(--muted); font-size: 0.82rem; margin-top: 4px; }
.error-text { color: #b3261e; font-size: 0.82rem; margin-top: 4px; }
.errorlist { list-style: none; padding: 0; margin: 4px 0 0; color: #b3261e; font-size: 0.82rem; }

@keyframes alertIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.alert { padding: 14px 18px; border-radius: var(--radius-sm); margin: 20px 0; font-weight: 500; animation: alertIn 0.35s ease both; }
.alert-success { background: #e4f3e9; color: #1c5b32; }
.alert-error, .alert-danger { background: #fbe6e4; color: #8c261d; }
.alert-info { background: #eaf1fb; color: #1c3d6b; }

/* Checklist strip */
.strip-checklist { background: var(--green-900); color: var(--white); }
.strip-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 12px;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 0.9rem;
}
.strip-inner span { transition: transform 0.2s ease, color 0.2s ease; }
.strip-inner span:hover { transform: translateY(-2px); color: var(--gold-light); }

/* Footer */
.site-footer { background: var(--green-800); color: #e7efe9; margin-top: 60px; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 32px;
  padding: 44px 0 24px;
}
.footer-col h4 { color: var(--gold-light); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.footer-col p { margin: 0 0 8px; color: #cdd9d1; font-size: 0.92rem; }
.footer-col a { transition: color 0.2s ease; }
.footer-col a:hover { color: var(--gold-light); }
.pulse-heart { display: inline-block; animation: pulseScale 1.6s ease-in-out infinite; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 16px 0; font-size: 0.8rem; color: #a9bab0; }

/* About page */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.info-card { background: var(--white); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); }
.info-card h4 { font-size: 0.95rem; margin-bottom: 6px; }
.info-card + .info-card { margin-top: 18px; }

/* Responsive */
@media (max-width: 860px) {
  .hero-grid, .style-detail-grid, .about-grid { grid-template-columns: 1fr; }
  .hero-image { order: -1; }
  .features { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .nav-toggle { display: flex; }
  .nav-toggle span { transition: transform 0.25s ease, opacity 0.25s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: flex-start;
    padding: 0 20px;
    gap: 16px;
    box-shadow: var(--shadow-sm);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, opacity 0.3s ease, padding 0.35s ease;
  }
  .site-nav.open { max-height: 360px; opacity: 1; padding: 16px 20px 24px; }
  .nav-cta { align-self: flex-start; }
}