/* ==========================================================
   Sunshine State Extracts — Custom Styles
   Volcanic & Gulf Coast Fusion
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  --alabaster: #FAF9F6;
  --charcoal: #1E1E24;
  --teal: #007A87;
  --aqua: #7FE5D9;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--alabaster);
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
}

/* ---------- Typography utilities ---------- */

.font-cinzel {
  font-family: 'Cinzel', serif;
}

.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.price {
  letter-spacing: 0.06em;
}

/* Fallbacks so brand accent colors render even if the Tailwind CDN
   script (which generates these utilities at runtime) fails to load
   or execute in a given preview/browser context. */
.text-teal {
  color: var(--teal) !important;
}

.text-aqua {
  color: var(--aqua) !important;
}

/* ---------- Navbar ---------- */

#navbar {
  background: rgba(250, 249, 246, 0);
  border-bottom: 1px solid rgba(30, 30, 36, 0);
}

#navbar.nav-scrolled {
  background: rgba(250, 249, 246, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(30, 30, 36, 0.08);
}

/* ---------- Hero video ---------- */

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(30, 30, 36, 0.55) 0%,
    rgba(30, 30, 36, 0.32) 42%,
    rgba(30, 30, 36, 0.78) 100%
  );
}

/* Variant for photo-based heroes (as opposed to the volcano video).
   Radial rather than flat: darkest where the hero text block actually
   sits (roughly center, slightly below vertical middle), fading out
   toward the edges. This guarantees contrast exactly where it's
   needed without uniformly muting the whole photo — the edges keep
   more of their natural light and color. */
.hero-overlay--photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 65% 62% at 50% 54%,
    rgba(30, 30, 36, 0.8) 0%,
    rgba(30, 30, 36, 0.55) 55%,
    rgba(30, 30, 36, 0.22) 100%
  );
}

/* Extra legibility insurance for light text over photos — adapts
   per-pixel to whatever's directly behind each letter, so it helps
   even in the rare spot the scrim above doesn't fully cover. */
.hero-text-shadow {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
}

.hero-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  background-image: radial-gradient(rgba(255, 255, 255, 0.6) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  z-index: 10;
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.35);
  overflow: hidden;
}

.scroll-cue span {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--aqua);
  animation: pourDown 2.2s ease-in-out infinite;
}

@keyframes pourDown {
  0% { top: -100%; }
  60% { top: 100%; }
  100% { top: 100%; }
}

/* ---------- Signature divider ---------- */

.divider-wrap {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  background: var(--alabaster);
}

.divider-svg {
  width: 100%;
  height: 56px;
  display: block;
}

/* ---------- Buttons ---------- */

.btn-primary {
  display: inline-block;
  background-color: var(--teal);
  color: var(--alabaster);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--teal);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  text-align: center;
}

.btn-primary:hover {
  background-color: var(--aqua);
  border-color: var(--aqua);
  color: var(--charcoal);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.btn-outline-light {
  display: inline-block;
  background-color: transparent;
  color: var(--alabaster);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(250, 249, 246, 0.5);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.btn-outline-light:hover {
  background-color: var(--aqua);
  border-color: var(--aqua);
  color: var(--charcoal);
}

.btn-outline-light:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 3px;
}

/* ---------- Clean label stats ---------- */

.stat-card {
  background: var(--alabaster);
  padding: 2.75rem 1rem;
  text-align: center;
}

.stat-number {
  font-family: 'Cinzel', serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  color: var(--teal);
  font-weight: 600;
  line-height: 1;
}

.stat-number-sm {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--teal);
  font-weight: 600;
  line-height: 1;
}

.stat-unit {
  font-size: 0.9rem;
  vertical-align: super;
}

.stat-label {
  margin-top: 0.85rem;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(30, 30, 36, 0.55);
}

/* ---------- Product cards ---------- */

.product-card {
  background: rgba(250, 249, 246, 0.03);
  border: 1px solid rgba(250, 249, 246, 0.12);
  transition: border-color 0.4s ease, transform 0.4s ease;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  border-color: rgba(127, 229, 217, 0.5);
  transform: translateY(-4px);
}

.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #FFFFFF;
  overflow: hidden;
}

.product-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1.5rem;
  display: block;
}

.badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: rgba(30, 30, 36, 0.75);
  color: var(--aqua);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(127, 229, 217, 0.4);
}

.product-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  color: var(--alabaster);
}

.product-desc {
  font-size: 0.8rem;
  line-height: 1.6;
  color: rgba(250, 249, 246, 0.65);
  margin-top: 0.85rem;
  flex: 1;
}

.product-footer {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.product-footer .price {
  font-size: 1.05rem;
}

.add-btn {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--aqua);
  border: 1px solid rgba(127, 229, 217, 0.4);
  padding: 0.6rem 0.85rem;
  background: transparent;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  white-space: nowrap;
}

.add-btn:hover {
  background-color: var(--aqua);
  color: var(--charcoal);
  border-color: var(--aqua);
}

.add-btn.active {
  background-color: var(--teal);
  color: var(--alabaster);
  border-color: var(--teal);
}

.add-btn:focus-visible {
  outline: 2px solid var(--aqua);
  outline-offset: 2px;
}

/* ---------- Form ---------- */

.form-field label,
.checkbox-row {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  font-weight: 600;
  color: rgba(30, 30, 36, 0.55);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form-field input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(30, 30, 36, 0.25);
  padding: 0.6rem 0.1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: var(--charcoal);
  transition: border-color 0.3s ease;
}

.form-field input:focus {
  outline: none;
  border-bottom-color: var(--teal);
  box-shadow: 0 1px 0 0 var(--teal);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.85rem;
  color: var(--charcoal);
  font-weight: 400;
}

.checkbox-row input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  border: 1px solid rgba(30, 30, 36, 0.35);
  position: relative;
  cursor: pointer;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.checkbox-row input[type='checkbox']:checked {
  background-color: var(--teal);
  border-color: var(--teal);
}

.checkbox-row input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--alabaster);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checkbox-row input[type='checkbox']:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(30, 30, 36, 0.08);
}

.qty-stepper {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.qty-stepper.enabled {
  opacity: 1;
}

.qty-btn {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(30, 30, 36, 0.3);
  background: transparent;
  color: var(--charcoal);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.qty-btn:hover:not(:disabled) {
  background-color: var(--teal);
  color: var(--alabaster);
  border-color: var(--teal);
}

.qty-btn:disabled {
  cursor: not-allowed;
}

.qty-value {
  font-size: 0.85rem;
  min-width: 1rem;
  text-align: center;
}

.order-summary {
  border-top: 1px solid rgba(30, 30, 36, 0.12);
  padding-top: 1.5rem;
}

.checkout-status {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  min-height: 1rem;
}

.checkout-status.is-error {
  color: #b3261e;
}

.checkout-status.is-info {
  color: rgba(30, 30, 36, 0.55);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary:disabled:hover {
  background-color: var(--teal);
  color: var(--alabaster);
}

/* ---------- Brand mark (logo) ---------- */
/* The logo is used as a CSS mask rather than a plain <img>. That's
   what makes it possible to recolor it per-context (black in the nav,
   white/aqua in the footer) from one shared file: the browser treats
   the SVG purely as a stencil shape and paints it with `background-
   color`, which is set via `color` + `currentColor` below. This only
   works because the logo is a single flat color to begin with — a
   multi-color logo can't be recolored this way. */

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}

.brand-mark {
  display: inline-block;
  width: 34px;
  aspect-ratio: 7788.348 / 7908.49; /* logo's native proportions */
  flex-shrink: 0;
  color: var(--charcoal); /* recolor by setting `color` in a given context */
  background-color: currentColor;
  -webkit-mask: url('./assets/images/logo.svg') no-repeat center / contain;
  mask: url('./assets/images/logo.svg') no-repeat center / contain;
}

.brand-mark--footer {
  display: block;
  width: 72px;
  margin: 0 auto 1.1rem;
  color: var(--aqua);
}

/* ---------- Footer ---------- */

.footer-dark {
  background-color: var(--charcoal);
}

.footer-brand {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: 0.16em;
  color: var(--alabaster);
}

.footer-tagline {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: clamp(0.75rem, 1.6vw, 0.95rem);
  letter-spacing: 0.14em;
  color: var(--aqua);
  margin-top: 0.9rem;
  line-height: 1.7;
}

.footer-fine-print {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.45);
}

.footer-fine-print a {
  color: rgba(250, 249, 246, 0.45);
  transition: color 0.3s ease;
}

.footer-fine-print a:hover {
  color: var(--aqua);
}

/* ---------- Legal block ---------- */

.legal-block {
  border: 3px solid var(--teal);
  background: var(--alabaster);
  padding: 1.4rem 1.6rem;
}

.legal-block h2 {
  font-size: 0.84rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  font-weight: 600;
  text-align: center;
}

.legal-block p {
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--charcoal);
  font-weight: 500;
  text-align: center;
}

/* Address is populated at runtime from an encoded value in main.js so
   it doesn't sit in the page source as plain text. See main.js for
   how to update it. */
.address-reveal {
  font-weight: 600;
}

.footer-contact-line {
  text-align: center;
  margin-top: 1.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: rgba(250, 249, 246, 0.6);
}

.phone-reveal {
  color: var(--aqua);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-left: 0.4rem;
  transition: color 0.3s ease;
}

.phone-reveal:hover {
  color: var(--alabaster);
}

/* ---------- Scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }
  .scroll-cue span {
    animation: none;
  }
}

/* ==========================================================
   The Infinite — Vanilla Infusion Kit landing page
   All rules below reuse the existing color/type tokens above;
   no new colors or border-radius introduced.
   ========================================================== */

/* Hero quick-fact strip */
.fact-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.4rem;
  margin-top: 2.5rem;
  padding: 0;
  list-style: none;
}

.fact-strip li {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250, 249, 246, 0.85);
  position: relative;
}

.fact-strip li + li::before {
  content: '·';
  position: absolute;
  left: -0.85rem;
  color: var(--aqua);
}

/* How It Works — step list */
.step-item {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  padding: 2rem 0;
  border-bottom: 1px solid rgba(250, 249, 246, 0.12);
}

.step-item--last {
  border-bottom: none;
}

.step-number {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--aqua);
  min-width: 2.5rem;
  line-height: 1;
}

.step-title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.03em;
  color: var(--alabaster);
}

.step-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(250, 249, 246, 0.65);
  margin-top: 0.6rem;
}

/* Flavor guide cards */
.flavor-card {
  border: 1px solid rgba(30, 30, 36, 0.12);
  padding: 2.25rem 1.75rem;
  text-align: center;
  transition: border-color 0.35s ease;
}

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

/* Timing & Expectations — color-progression timeline */
.timeline {
  max-width: 32rem;
  margin: 3rem auto 0;
}

.timeline-track {
  display: flex;
  gap: 0.5rem;
}

.timeline-swatch {
  flex: 1;
  height: 3.25rem;
  display: block;
}

.timeline-labels {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.timeline-labels span {
  flex: 1;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: rgba(30, 30, 36, 0.5);
}

/* How to use — tag list */
.use-tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.use-tag {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--charcoal);
  border: 1px solid rgba(30, 30, 36, 0.18);
  padding: 0.6rem 1.1rem;
}

/* FAQ accordion (native details/summary — no JS required) */
.faq-item {
  border-bottom: 1px solid rgba(30, 30, 36, 0.12);
  padding: 1.4rem 0;
}

.faq-item summary {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '+';
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1.25rem;
  color: var(--teal);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(30, 30, 36, 0.65);
  margin-top: 0.9rem;
}

/* Care & refill tips */
.care-tips {
  max-width: 34rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.care-tips li {
  font-size: 0.85rem;
  line-height: 1.7;
  color: rgba(30, 30, 36, 0.7);
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(30, 30, 36, 0.1);
}

.care-tips li:last-child {
  border-bottom: none;
}

/* Cross-sell cards */
.cross-sell-card {
  display: block;
  border: 1px solid rgba(250, 249, 246, 0.14);
  padding: 1.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.35s ease, background-color 0.35s ease;
}

.cross-sell-card:hover {
  border-color: var(--aqua);
  background: rgba(127, 229, 217, 0.05);
}

.cross-sell-card span {
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--aqua);
}

.cross-sell-card p {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--alabaster);
  margin-top: 0.6rem;
  line-height: 1.4;
}

/* Dark-outline button (for CTAs on light backgrounds) */
.btn-outline-dark {
  display: inline-block;
  background-color: transparent;
  color: var(--charcoal);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid rgba(30, 30, 36, 0.35);
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  text-align: center;
}

.btn-outline-dark:hover {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--alabaster);
}

.btn-outline-dark:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* Scoped button variant for photo-based heroes: once surrounding
   hero text matches the button's own font-weight, a frosted-glass
   fill (rather than weight alone) keeps buttons reading clearly as
   discrete, clickable elements. Does not touch the shared
   .btn-outline-light used on the homepage's video hero. */
.btn-outline-light--framed {
  background-color: rgba(30, 30, 36, 0.4);
  border-color: rgba(250, 249, 246, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-outline-light--framed:hover {
  background-color: var(--aqua);
}