/* ============================================================================
   NAFASOLINA — styles.css
   ----------------------------------------------------------------------------
   Structure:
     1. Design tokens        (every color measured from the physical packaging)
     2. Base & resets
     3. Utilities            (.wrap, .kicker, .btn, .sr-only, .skip-link)
     4. Header
     5. Hero
     6. Marquee
     7. Uses
     8. Directions
     9. Gallery
    10. Wordmark band        (brand signature)
    11. Drug Facts
    12. Buy
    13. Wholesale
    14. Footer
    15. Thanks page
    16. Scroll reveal
    17. Responsive (<= 760px)
    18. Reduced motion
   Conventions: kebab-case component classes; buttons are square (the box has
   sharp corners), cards/media use a 6px radius; hairline rules over borders.
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* Measured from product photography (median pixel sampling) */
  --green:       #136E25;  /* box field green            */
  --green-deep:  #066117;  /* box green, 20th percentile — footer */
  --orange:      #EB7A15;  /* banner orange              */
  --orange-dark: #C96407;  /* hover state, derived       */
  --paper:       #F5F4F2;  /* label white                */
  --studio:      #F8F9FB;  /* the photos' own backdrop   */

  /* Derived neutrals */
  --ink:       #17251A;    /* body text                  */
  --ink-soft:  #3A4A3E;    /* secondary text             */
  --ink-faint: #5A675D;    /* captions, notes            */
  --hairline:  #D8DCD8;    /* rules on light backgrounds */
  --tint-green:#CDE7CF;    /* text tint on green         */
  --tint-warm: #F9C68F;    /* text tint on deep green    */

  /* Layout */
  --measure: 1180px;
  --radius: 6px;
}

/* 2. Base & resets ------------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }
html { background: #fff; scroll-behavior: smooth; }

body {
  font-family: 'Archivo', Arial, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

section { padding: 92px 40px; }

h2 {
  font-weight: 800;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

/* 3. Utilities ----------------------------------------------------------- */
.wrap { max-width: var(--measure); margin: 0 auto; }

.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.kicker--on-green { color: var(--tint-warm); }

.section-lede {
  font-size: 17px;
  line-height: 1.7;
  max-width: 46em;
  color: var(--ink-soft);
}

.btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 26px;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--orange-dark); }
.btn:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }

.btn--ghost {
  background: transparent;
  border: 2px solid var(--paper);
  color: var(--paper);
  padding: 11px 24px;
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--orange);
  color: #fff;
  padding: 12px 18px;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 12px; top: 12px; }

/* 4. Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 14px 40px;
  border-bottom: 1px solid #E7E9E6;
}

.brand { display: inline-flex; align-items: center; }
.brand img { width: 210px; height: auto; }
.brand:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav a:not(.btn) { text-decoration: none; color: var(--ink); padding: 6px 2px; }
.nav a:not(.btn):hover { color: var(--green); }
.nav a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

.lang {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.lang a { text-decoration: none; color: var(--ink-faint); padding: 4px 2px; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current] {
  color: var(--ink);
  border-bottom: 2px solid var(--orange);
}
.lang a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* 5. Hero ---------------------------------------------------------------- */
.hero { background: var(--green); color: var(--paper); }

.hero-inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 84px 40px 96px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: stretch; /* photo card matches the height of the text column */
}
.hero-copy { align-self: center; }

.hero h1 {
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.hero .lede {
  font-size: 18px;
  line-height: 1.65;
  max-width: 34em;
  color: #E8F3E9;
  margin-bottom: 34px;
}

.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Specimen plate: photo presented like a museum object with its own caption */
.specimen {
  background: var(--studio); /* matches the photos' own backdrop — no ring */
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 30px 60px -25px rgba(0, 40, 10, 0.55);
  display: flex;
}
.specimen img {
  border-radius: 3px;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills the card; the photo's studio margin absorbs the crop */
}

/* 7. Uses — editorial hairline columns ----------------------------------- */
.uses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 46px;
  border-top: 1px solid var(--hairline);
}
.use {
  padding: 30px 28px 8px;
  border-left: 1px solid var(--hairline);
}
.use:first-child { border-left: 0; padding-left: 2px; }
.use .use-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}
.use h3 { font-size: 19px; font-weight: 800; color: var(--green); margin-bottom: 10px; }
.use p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); }

/* 8. Directions ---------------------------------------------------------- */
.directions { background: var(--studio); }

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 46px;
}
.step {
  background: #fff;
  border-radius: var(--radius);
  padding: 26px 24px;
}
.step .num {
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--orange);
  margin-bottom: 14px;
}
.step h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

.dosage-note {
  margin-top: 34px;
  background: #fff;
  border-left: 4px solid var(--green);
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.dosage-note strong { color: var(--ink); }

/* 10. Wordmark band — the brand signature -------------------------------- */
/* The traced letterforms at architectural scale, edges cropped, like the
   diagonal banner wrapping the box. Confident, typographic, unmistakable. */
.wordmark-band {
  background: var(--orange);
  border-top: 3px solid var(--green-deep);
  border-bottom: 3px solid var(--green-deep);
  font-size: 0; /* no baseline gap under the image */
}
.wordmark-band img {
  width: 100%;
  display: block;
}

/* 11. Drug Facts --------------------------------------------------------- */
.facts { background: var(--green); }
.facts h2 { color: var(--paper); }
.facts .section-lede { color: #DCEDDD; }

.panel {
  background: #fff;
  color: #000;
  max-width: 760px;
  margin: 44px auto 0;
  border: 2px solid #000;
  border-radius: 2px;
  padding: 26px 28px 30px;
  font-family: 'Archivo Narrow', Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.5;
}
.panel h3 {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  border-bottom: 8px solid #000;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.panel .row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #000;
  padding: 7px 0;
}
.panel .row b { font-weight: 700; }
.panel h4 {
  font-weight: 700;
  font-size: 16px;
  border-bottom: 1px solid #000;
  margin-top: 14px;
  padding-bottom: 3px;
}
.panel p { padding: 7px 0; border-bottom: 1px solid #CFCFCF; }
.panel p:last-child { border-bottom: 0; }
.panel .hard { border-bottom: 1px solid #000; }

/* 12. Buy ----------------------------------------------------------------- */
.buy { background: var(--studio); }

.buy-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
  margin-top: 10px;
}
.buy-photo {
  background: var(--studio); /* matches the photos' own backdrop — no ring */
  border-radius: var(--radius);
  padding: 14px;
  margin: 0;
}

.buy-card {
  background: #fff;
  border-radius: var(--radius);
  border-top: 4px solid var(--orange);
  box-shadow: 0 18px 45px -22px rgba(23, 37, 26, 0.25);
  padding: 34px;
}
.buy-card h2 { margin-bottom: 8px; }

.buy-price {
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.01em;
  margin-bottom: 26px;
}

.buy-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.buy-field { margin-bottom: 22px; }

/* Size toggle: square, decisive, like the box itself */
.buy-sizes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.buy-size {
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 12px;
  background: #fff;
  border: 1.5px solid #C7CEC8;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink);
  text-align: center;
}
.buy-size small {
  display: block;
  font-weight: 500;
  font-size: 12.5px;
  color: var(--ink-faint);
  margin-top: 3px;
}
.buy-size:hover { border-color: var(--green); }
.buy-size.is-selected {
  border-color: var(--green);
  background: var(--green);
  color: var(--paper);
}
.buy-size.is-selected small { color: var(--tint-green); }
.buy-size:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Delivery plan rows: hairline editorial, not boxes */
.buy-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 2px;
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
}
.buy-plan:first-of-type { border-top: 1px solid var(--hairline); }
.buy-plan input {
  width: 18px;
  height: 18px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.buy-plan-name { flex: 1; font-weight: 600; font-size: 15px; }
.buy-plan-name small {
  display: block;
  font-weight: 400;
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 2px;
}
.buy-plan-price { font-weight: 800; font-size: 16px; }
.buy-plan.is-selected .buy-plan-price { color: var(--green); }

.buy-actions { display: flex; gap: 14px; margin-top: 24px; }
.buy-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid #C7CEC8;
  border-radius: 4px;
  overflow: hidden;
}
.buy-qty button {
  font: inherit;
  font-size: 18px;
  width: 40px;
  height: 100%;
  background: #fff;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.buy-qty button:hover { background: var(--studio); }
.buy-qty input {
  width: 44px;
  border: 0;
  text-align: center;
  font: inherit;
  font-weight: 600;
  -moz-appearance: textfield;
}
.buy-qty input::-webkit-outer-spin-button,
.buy-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.buy-submit { flex: 1; font-size: 15px; }
.buy-submit:disabled { opacity: 0.6; cursor: default; }

.buy-note {
  font-size: 13px;
  color: var(--ink-faint);
  margin-top: 14px;
}
.buy-fallback {
  font-size: 14px;
  margin-top: 14px;
  color: var(--ink-soft);
}
.buy-fallback a { color: var(--orange-dark); font-weight: 600; }

/* 13. Wholesale ---------------------------------------------------------- */
.wholesale-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  margin-top: 10px;
}
.props { margin-top: 26px; border-top: 1px solid var(--hairline); }
.props div { padding: 16px 2px; border-bottom: 1px solid var(--hairline); }
.props b { display: block; font-size: 16px; margin-bottom: 4px; }
.props span { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

.wholesale-form {
  background: #fff;
  border-radius: var(--radius);
  border-top: 4px solid var(--orange);
  box-shadow: 0 18px 45px -22px rgba(23, 37, 26, 0.25);
  padding: 32px;
}
.wholesale-form h3 { font-size: 20px; font-weight: 800; margin-bottom: 20px; }

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px;
  font: inherit;
  font-size: 15px;
  border: 1.5px solid #C7CEC8;
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
  border-color: var(--orange);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wholesale-form .btn { width: 100%; margin-top: 6px; }
.form-note { font-size: 13px; color: var(--ink-faint); margin-top: 12px; line-height: 1.55; }

/* 14. Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--green-deep);
  color: #fff;
  margin-top: auto;
  padding: 44px 48px calc(44px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.footer-contact {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.9;
}
.footer-contact strong { font-weight: 700; }
.footer-contact a { color: var(--tint-warm); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.footer-address {
  font-size: 13px;
  line-height: 1.7;
  text-align: right;
  text-transform: uppercase;
  color: var(--tint-green);
}
.footer-address strong { color: #fff; font-weight: 700; }

.footer-family {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: 26px;
  padding-top: 20px;
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #A9D3AE;
}
.footer-family a { color: var(--tint-warm); text-decoration: none; }
.footer-family a:hover { text-decoration: underline; }

/* 15. Thanks page -------------------------------------------------------- */
.standalone {
  background: var(--green);
  color: var(--paper);
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}
.standalone-card { max-width: 520px; }
.standalone-badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 18px;
  margin-bottom: 26px;
}
.standalone h1 {
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.standalone p {
  font-size: 17px;
  line-height: 1.7;
  color: #E8F3E9;
  margin-bottom: 30px;
}

/* 16. Scroll reveal (progressively enhanced by js/main.js) ---------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* 17. Responsive --------------------------------------------------------- */
@media (max-width: 760px) {
  html, body { overflow-x: clip; overscroll-behavior-y: none; }

  /* Bottom canvas stays green during overscroll; top stays white. */
  .site-footer { box-shadow: 0 60vh 0 60vh var(--green-deep); }

  .site-header { justify-content: center; padding: 14px 16px; position: relative; }
  .nav { display: none; }
  .lang { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }

  section { padding: 60px 22px; }

  .hero-inner {
    grid-template-columns: 1fr;
    padding: 56px 22px 64px;
    gap: 34px;
    text-align: center;
  }
  /* Reading order: headline -> photo -> actions */
  .hero-copy { display: contents; }
  .hero-copy h1 { order: 1; }
  .hero-copy .lede { order: 1; margin-left: auto; margin-right: auto; }
  .hero-photo { order: 2; margin: 0 auto; max-width: 420px; }
  .hero-ctas { order: 3; justify-content: center; }

  .uses-grid { grid-template-columns: 1fr; border-top: 0; }
  .use { border-left: 0; border-top: 1px solid var(--hairline); padding: 26px 2px 8px; }
  .use:first-child { border-top: 1px solid var(--hairline); }

  .steps, .wholesale-grid, .buy-grid { grid-template-columns: 1fr; }
  .buy-photo { max-width: 440px; margin: 0 auto; }
  .buy-card { padding: 26px 22px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-address { text-align: left; }
}

/* 18. Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}