/* CSS Variables & Custom Theme Rules */
:root {
  --color-bg-primary: #FAF6F2;
  --color-bg-secondary: #F3ECE3;
  --color-primary: #748761;
  --color-secondary: #C58A97;
  --color-accent: #C8A57A;
  --color-beige: #EAD9DA;
  --color-text: #502A3A;
  --color-text-muted: #7A6870;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-serif {
  font-family: 'Playfair Display', serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--color-beige);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Glassmorphism Classes */
.glass-nav {
  background: rgba(252, 250, 245, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(139, 94, 60, 0.12);
  box-shadow: 0 8px 32px 0 rgba(139, 94, 60, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-nav.scrolled {
  margin-top: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  width: 78% !important;
  box-shadow: 0 10px 40px 0 rgba(112, 130, 56, 0.08);
}

.glass-card {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(139, 94, 60, 0.08);
  box-shadow: 0 10px 30px -5px rgba(139, 94, 60, 0.03);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(112, 130, 56, 0.25);
  box-shadow: 0 20px 40px -10px rgba(112, 130, 56, 0.12);
  transform: translateY(-6px);
}

.leaf-card-right {
  border-radius: 80px 20px 80px 20px;
  border: 1px solid rgba(200, 165, 122, 0.18);
}

.leaf-card-right:hover {
  transform: translateY(-8px) rotate(2deg) !important;
  border-color: var(--color-primary) !important;
  background: rgba(250, 246, 242, 0.7);
}

.leaf-card-left {
  border-radius: 20px 80px 20px 80px;
  border: 1px solid rgba(200, 165, 122, 0.18);
}

.leaf-card-left:hover {
  transform: translateY(-8px) rotate(-2deg) !important;
  border-color: var(--color-primary) !important;
  background: rgba(250, 246, 242, 0.7);
}

/* Elegant Page Transitions */
.page-container {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 120px);
  padding-top: 10rem;
}

.page {
  animation: pageFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Organic Floating Animation */
@keyframes floatUp {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.floating-herb {
  animation: floatUp 8s ease-in-out infinite;
}

.floating-herb-delayed {
  animation: floatUp 10s ease-in-out infinite;
  animation-delay: -3s;
}

/* Custom CSS Gradients */
.gradient-warm {
  background: linear-gradient(135deg, var(--color-bg-primary) 0%, var(--color-bg-secondary) 100%);
}

.gradient-olive-glow {
  background: radial-gradient(circle at center, rgba(112, 130, 56, 0.08) 0%, transparent 70%);
}

.gradient-gold-glow {
  background: radial-gradient(circle at center, rgba(197, 164, 109, 0.08) 0%, transparent 70%);
}

/* Custom SVGs and Dividers */
.organic-divider-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

.organic-divider-top svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 60px;
}

/* ---------------------------------------------------------------------------
   Cycle of Vitality

   Eight nodes on a ring. The old version jumped in scale and threw a coloured
   glow on hover, which read as a jolt; this lifts the node gently, fills it
   with the brand plum and lets the ring underneath settle. The whole node is
   positioned by its centre so the maths in the script stays simple.
--------------------------------------------------------------------------- */
.cycle-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 6rem;
  height: 6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  padding: 0.4rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(160, 130, 109, 0.18);
  box-shadow: 0 6px 18px -8px rgba(80, 42, 58, 0.25);
  cursor: pointer;
  z-index: 5;
  /* One easing for everything, so nothing arrives out of step. */
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s ease,
              border-color 0.35s ease;
}

.cycle-node:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.cycle-node-icon {
  font-size: 1.35rem;
  line-height: 1;
  color: var(--color-primary);
  transition: color 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.cycle-node-label {
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  font-size: 0.56rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  transition: color 0.35s ease;
}

/* Hover and the active state are the same treatment, so moving the pointer
   across the wheel feels like one continuous thing rather than two effects. */
.cycle-node:hover,
.cycle-node.is-active {
  transform: translate(-50%, -50%) scale(1.07);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 14px 30px -10px rgba(112, 130, 56, 0.55);
  z-index: 6;
}

.cycle-node:hover .cycle-node-icon,
.cycle-node.is-active .cycle-node-icon,
.cycle-node:hover .cycle-node-label,
.cycle-node.is-active .cycle-node-label {
  color: #ffffff;
}

.cycle-node:hover .cycle-node-icon,
.cycle-node.is-active .cycle-node-icon {
  transform: translateY(-1px);
}

/* The dashed ring turns slowly, which gives the section a pulse without
   anything moving under the pointer. */
.cycle-ring-spin {
  animation: cycleRingSpin 70s linear infinite;
}

@keyframes cycleRingSpin {
  to { transform: rotate(360deg); }
}

/* Legend dots under the card: a compact control on narrow screens. */
.cycle-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: rgba(160, 130, 109, 0.3);
  transition: background-color 0.3s ease, width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.cycle-dot:hover { background: rgba(112, 130, 56, 0.5); }

.cycle-dot.is-active {
  width: 1.5rem;
  background: var(--color-primary);
}

/* The card's own fade, driven by the script. */
#cycle-body {
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 640px) {
  .cycle-node {
    width: 4.4rem;
    height: 4.4rem;
    padding: 0.25rem;
  }
  .cycle-node-icon { font-size: 1.1rem; }
  .cycle-node-label { font-size: 0.48rem; letter-spacing: 0.05em; }
}

/* Anyone who has asked for less movement gets none of the drift. */
@media (prefers-reduced-motion: reduce) {
  .cycle-ring-spin { animation: none; }
  .cycle-node,
  .cycle-node-icon,
  #cycle-body { transition-duration: 0.01ms; }
}

.pulse-glow {
  box-shadow: 0 0 0 0 rgba(112, 130, 56, 0.4);
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(112, 130, 56, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(112, 130, 56, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(112, 130, 56, 0);
  }
}

/* Cart Side Drawer */
#cart-drawer {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#cart-drawer.translate-x-full {
  transform: translateX(100%);
}

#cart-drawer.translate-x-0 {
  transform: translateX(0);
}

/* Video Section Overlay */
.video-card-glow {
  position: relative;
  overflow: hidden;
}

.video-card-glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(139, 94, 60, 0.1), transparent);
  pointer-events: none;
}

/* Dynamic slider animation */
.slider-container {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.slide-content {
  flex: 0 0 100%;
  width: 100%;
}

/* Brand wordmark ------------------------------------------------------------
   The name is a sentence, so the copula is set small and italic to give the
   phrase its rhythm. Kept monochrome on purpose: the emblem beside it already
   carries the pink, gold and olive, and two focal points would fight. */
.wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.012em;
  word-spacing: 0.04em;
  color: #502A3A;
}

.wordmark .is {
  font-style: italic;
  font-weight: 400;
  font-size: 0.64em;
  letter-spacing: 0.05em;
  opacity: 0.72;
}

/* Footer sits on deep plum */
.wordmark.on-dark {
  color: #F6EFE9;
  font-weight: 400;
}

.wordmark.on-dark .is {
  opacity: 0.66;
}

/* ===========================================================================
   Mobile
   The desktop layout assumes room to breathe; on a phone the same content
   needs a tighter rhythm rather than a shrunken copy of the wide layout.
   =========================================================================== */

/* Nothing should ever push the page sideways on a narrow screen. */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Mobile navigation links: large, serif, one per line, with hairline rules
   that read as structure rather than decoration. */
.mobile-link {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.65rem;
  line-height: 1;
  color: #502A3A;
  padding: 1.05rem 0;
  border-bottom: 1px solid rgba(197, 138, 151, 0.18);
  transition: color 0.25s ease, padding-left 0.25s ease;
}

.mobile-link:last-child {
  border-bottom: 0;
}

.mobile-link:active,
.mobile-link:hover {
  color: #748761;
  padding-left: 0.4rem;
}

/* Open state for the slide-down panel */
#mobile-menu.is-open #mobile-menu-panel {
  transform: translateY(0);
}

#mobile-menu.is-open #mobile-menu-backdrop {
  opacity: 1;
}

@media (max-width: 767px) {
  /* The header is shorter on mobile, so the page starts higher. */
  .page-container {
    padding-top: 7rem;
  }

  /* The hero is a stack on a phone, not a two-column grid squeezed thin. */
  .hero-slide-grid {
    gap: 2.5rem !important;
  }

  /* Keep the decorative blurs from adding scroll width. */
  .floating-herb,
  .floating-herb-delayed {
    max-width: 100vw;
  }
}

/* Respect a reduced-motion preference for the menu and page transitions. */
@media (prefers-reduced-motion: reduce) {
  #mobile-menu-panel,
  #mobile-menu-backdrop,
  .page,
  .slider-container {
    transition: none !important;
    animation: none !important;
  }
}

/* Focus styling for the mobile menu: the panel takes focus when it opens so a
   keyboard or screen-reader user lands inside it, but the default outline is a
   hard black rectangle. This keeps the affordance and loses the harshness. */
.mobile-link:focus {
  outline: none;
}

.mobile-link:focus-visible {
  outline: none;
  color: #748761;
  padding-left: 0.4rem;
  box-shadow: inset 3px 0 0 #C8A57A;
}

@media (max-width: 767px) {
  /* The hero slides are absolutely positioned, so the section height cannot be
     content-driven without breaking the slider. Trim it instead, and let the
     slide scroll internally if a small phone needs more room than it gives. */
  .hero-section {
    min-height: 70vh;
    padding-top: 0.5rem;
  }
}