/* ============================================
   Ceolé — Care for the Soul
   Editorial luxury, spa-quiet styling
   ============================================ */

:root {
  --navy: #10203f;
  --navy-soft: #1c3157;
  --gold: #b6913c;
  --gold-light: #d8b978;
  --cream: #faf5ee;
  --warm-white: #fffdfa;
  --blush: #f4e4de;
  --blush-soft: #f8ece7;
  --ink: #2b2620;
  --ink-soft: #675f54;
  --line: #e7dcce;

  --sage: #7c9483;
  --sage-deep: #46594c;
  --sage-wash: #eef1ec;
  --peach: #eab98f;
  --peach-deep: #cf8a5c;
  --rose: #c98fa0;
  --rose-deep: #a85f74;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--warm-white);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--navy);
  letter-spacing: 0.01em;
  line-height: 1.2;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 500; line-height: 1.12; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

p { margin: 0 0 1.2em; color: var(--ink-soft); }

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

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9em;
}

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

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: 96px 0;
}

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

.section--cream { background: var(--cream); }
.section--blush { background: var(--blush-soft); }
.section--navy {
  background: var(--navy);
  color: var(--blush-soft);
}
.section--navy h2, .section--navy h3 { color: var(--warm-white); }
.section--navy p { color: #cdd4e2; }

.center { text-align: center; }

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 253, 250, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: 1180px;
  margin: 0 auto;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__brand img {
  height: 44px;
  width: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.nav__brand-text {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--navy);
}

.nav__links {
  display: flex;
  gap: 30px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s ease;
  position: relative;
}

.nav__links a:hover,
.nav__links a[aria-current="page"] {
  color: var(--gold);
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--navy);
  margin: 5px 0;
}

@media (max-width: 860px) {
  .nav__toggle { display: block; }
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--warm-white);
    flex-direction: column;
    padding: 20px 32px 28px;
    gap: 18px;
    border-bottom: 1px solid var(--line);
  }
  .nav__links.is-open { display: flex; }
}

/* ---------- Nav / Collections dropdown ---------- */

.nav__dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav__dropdown-toggle:hover,
.nav__dropdown-toggle[aria-expanded="true"],
.nav__dropdown-toggle.is-current {
  color: var(--gold);
}

.nav__caret {
  font-size: 0.6rem;
  transition: transform 0.2s ease;
}

.nav__dropdown-toggle[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.nav__dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  min-width: 220px;
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 20px 40px -20px rgba(16, 32, 63, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 10;
}

.nav__dropdown-menu li a {
  display: block;
  padding: 10px 24px;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink);
  white-space: nowrap;
}

.nav__dropdown-menu li a:hover,
.nav__dropdown-menu li a[aria-current="page"] {
  color: var(--gold);
  background: var(--cream);
}

.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown.is-open .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 860px) {
  .nav__dropdown {
    align-self: stretch;
  }

  .nav__dropdown-toggle {
    width: 100%;
    justify-content: center;
    padding: 2px 0;
  }

  .nav__dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: transparent;
    width: 100%;
    padding: 6px 0 0;
    margin: 0;
    text-align: center;
    display: none;
  }

  .nav__dropdown.is-open .nav__dropdown-menu {
    display: block;
    transform: none;
  }

  .nav__dropdown-menu li a {
    padding: 12px 0;
  }
}

/* ---------- Nav / Cart icon ---------- */

.nav__cart a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--navy);
}

.nav__cart a:hover { color: var(--gold); }

.nav__cart-icon {
  width: 22px;
  height: 22px;
}

.nav__cart-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--warm-white);
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 17px;
  text-align: center;
}

.nav__cart-badge.is-empty {
  background: var(--line);
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .nav__cart { align-self: center; margin-top: 4px; }
}

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

.btn {
  display: inline-block;
  max-width: 100%;
  padding: 14px 34px;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 2px;
  border: 1px solid var(--navy);
  transition: all 0.25s ease;
  cursor: pointer;
  overflow-wrap: break-word;
}

.btn--primary {
  background: var(--navy);
  color: var(--warm-white);
}
.btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn:disabled {
  background: var(--line);
  border-color: var(--line);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.btn:disabled:hover { background: var(--line); border-color: var(--line); color: var(--ink-soft); }

.btn--outline {
  background: transparent;
  color: var(--navy);
}
.btn--outline:hover { background: var(--navy); color: var(--warm-white); }

.btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--warm-white);
}
.btn--gold:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

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

.hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
  padding: 88px 0 100px;
}

.hero__image {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(16, 32, 63, 0.25);
}

.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 1.2em;
}

.hero__concept {
  font-size: 1.05rem;
  max-width: 46ch;
}

.divider {
  width: 64px;
  height: 1px;
  background: var(--gold);
  margin: 28px 0;
  border: none;
}

.center .divider { margin-left: auto; margin-right: auto; }

/* ---------- Coming-soon / future-facing badge ---------- */

.badge-soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--gold);
  color: var(--gold);
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 20px;
}

.badge-soon::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 56px; }
  .hero__image { order: -1; max-width: 420px; margin: 0 auto; }
}

/* ---------- Split (image + text) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split__image {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(16, 32, 63, 0.18);
}

.split__image--arch { border-radius: 220px 220px 12px 12px; }
.split__image--soft { border-radius: 28px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split__image { order: -1; }
  .split__image--arch { border-radius: 140px 140px 12px 12px; }
}

/* ---------- Cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

@media (max-width: 900px) {
  .card-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--warm-white);
  border: 1px solid var(--line);
  padding: 40px 32px;
  border-radius: 4px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(16, 32, 63, 0.3);
}

.card__label {
  font-family: var(--serif);
  font-size: 1.5rem;
  margin-bottom: 0.3em;
}

.card a.card__link {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}

/* ---------- Testimonials ---------- */

/* Six columns, each card spanning two, so a partly-filled last row (one or
   two cards) centers itself instead of hugging the left edge. */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
}

.testimonial-card { grid-column: span 2; }
.testimonial-card:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
.testimonial-card:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
.testimonial-card:last-child:nth-child(3n + 2) { grid-column: 4 / span 2; }

@media (max-width: 900px) {
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-card,
  .testimonial-card:last-child:nth-child(3n + 1),
  .testimonial-card:nth-last-child(2):nth-child(3n + 1),
  .testimonial-card:last-child:nth-child(3n + 2) { grid-column: auto; }
}

.testimonial-card {
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 32px 28px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px rgba(16, 32, 63, 0.3);
}

.testimonial-card__mark {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

.testimonial-card__quote {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  margin: 0 0 16px;
}

.testimonial-card__attribution {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Collection blocks ---------- */

.collection {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid var(--line);
}

.collection:last-child { border-bottom: none; }

.collection__swatch {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--warm-white);
  font-family: var(--serif);
  font-size: 1rem;
  text-align: center;
  padding: 24px;
}

.collection__swatch--photo {
  padding: 0;
  overflow: hidden;
}

.collection__swatch--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.collection__number {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 0.4em;
  display: block;
}

.collection__phrase {
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1.15rem;
}

@media (max-width: 860px) {
  .collection { grid-template-columns: 1fr; }
}

/* scent gradient swatches — color accents per collection */
.swatch--eucalyptus { background: linear-gradient(135deg, #35604f, #10203f); }
.swatch--peach { background: linear-gradient(135deg, #e8a06a, #c96b53); }
.swatch--strawberry { background: linear-gradient(135deg, #d68a95, #b6913c); }
.swatch--pineapple { background: linear-gradient(135deg, #e8c468, #e39a6b); }

/* ---------- Pricing tables ---------- */

.price-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 8px;
}

.price-table th, .price-table td {
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.price-table th {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--gold);
}

.price-table td.price { color: var(--navy); font-weight: 500; text-align: right; }

.product-block {
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 36px;
  margin-bottom: 28px;
}

.note-box {
  background: var(--blush-soft);
  border-left: 3px solid var(--gold);
  padding: 20px 26px;
  border-radius: 2px;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 24px 0;
}

.note-box strong { color: var(--navy); }

/* ---------- Ingredient Guide ---------- */

.ingredient-list {
  display: grid;
  gap: 32px;
}

.ingredient-item {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.ingredient-item:last-child { border-bottom: none; padding-bottom: 0; }

.ingredient-item h3 {
  font-size: 1.2rem;
  margin-bottom: 6px;
}

.ingredient-item details { margin-top: 12px; }

.ingredient-item summary {
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.ingredient-item details p {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Product selector (Body Care / Lips / Hair Care) ---------- */

.product-selector-list {
  display: grid;
  gap: 40px;
}

.product-selector {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}

.product-selector:last-child { border-bottom: none; padding-bottom: 0; }

.product-selector__image {
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream);
  aspect-ratio: 4 / 5;
}

.product-selector__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.product-selector__image:hover img { transform: scale(1.03); }

/* For product photos that aren't pre-cropped square (e.g. Facial Care's
   taller bottle shots) — matches the box shape to the photo's own portrait
   proportions instead of forcing a square, so the bottle fills the box
   edge-to-edge (no letterbox bars, no visible background) with only a
   sliver cropped at the very top/bottom instead of a quarter of the photo. */
.product-selector__image--contain {
  aspect-ratio: 4 / 5;
}

.product-selector__image--contain img {
  object-fit: cover;
}

.product-selector__image--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.product-selector__image--pair img { aspect-ratio: 1 / 1; }

/* ---------- Product image lightbox ---------- */
/* Injected once by main.js on every page; click any product photo to see
   it larger. Hidden (opacity 0 + pointer-events none) until .is-open. */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: rgba(16, 32, 63, 0.86);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
}

.lightbox__close {
  position: absolute;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  color: var(--warm-white);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.product-selector__meta {
  color: var(--ink-soft);
  font-size: 0.92rem;
  margin-bottom: 1em;
}

.product-selector__variant-label {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: -0.6em 0 0.8em;
}

.product-selector__note {
  min-height: 1.4em;
  font-size: 0.85rem;
  color: var(--sage-deep);
  margin: 10px 0 0;
}

.note-box--butter { margin-bottom: 20px; }

.scent-fieldset {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.scent-fieldset legend {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0;
  margin-bottom: 10px;
}

.scent-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.scent-option {
  position: relative;
  cursor: pointer;
}

.scent-option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.scent-option span {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 30px;
  font-size: 0.85rem;
  color: var(--ink);
  transition: all 0.2s ease;
}

.scent-option input:checked + span {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--warm-white);
}

.scent-option input:focus-visible + span {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

.qty-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.qty-row label {
  margin: 0;
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 30px;
}

.qty-stepper button {
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  font-size: 1.1rem;
  color: var(--navy);
  cursor: pointer;
}

.qty-stepper button:disabled,
.qty-stepper input:disabled {
  color: var(--ink-soft);
  cursor: not-allowed;
  opacity: 0.5;
}

.qty-stepper input {
  width: 42px;
  text-align: center;
  border: none;
  padding: 0;
  font-size: 0.95rem;
}

.qty-stepper input:focus { outline: none; }

.qty-row__limit {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

@media (max-width: 780px) {
  .product-selector { grid-template-columns: 1fr; }
  .product-selector__image { max-width: 340px; margin: 0 auto; }
}

/* ---------- Cart page ---------- */

.cart-row {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.cart-row__image {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--cream);
}

.cart-row__info h3 {
  font-size: 1.15rem;
  margin-bottom: 0.2em;
}

.cart-row__meta {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0;
}

.cart-row__qty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.cart-row__remove {
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

.cart-row__remove:hover { color: var(--rose-deep); }

.cart-row__line-total {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--navy);
  min-width: 70px;
  text-align: right;
}

@media (max-width: 700px) {
  .cart-row {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "image info"
      "qty qty"
      "total total";
  }
  .cart-row__image { grid-area: image; width: 64px; height: 64px; }
  .cart-row__info { grid-area: info; }
  .cart-row__qty { grid-area: qty; flex-direction: row; justify-content: space-between; }
  .cart-row__line-total { grid-area: total; text-align: left; }
}

.cart-summary {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 28px;
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--navy);
}

.cart-summary__amount { font-size: 1.6rem; }

/* ---------- Forms ---------- */

form {
  display: grid;
  gap: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 700px) {
  .form-row { grid-template-columns: 1fr; }
}

label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  display: block;
  margin-bottom: 8px;
}

input, select, textarea {
  width: 100%;
  padding: 13px 16px;
  font-family: var(--sans);
  font-size: 0.95rem;
  border: 1px solid var(--line);
  background: var(--warm-white);
  border-radius: 2px;
  color: var(--ink);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--gold);
}

textarea { resize: vertical; min-height: 120px; }

.inline-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 460px;
}

.inline-form input { flex: 1; min-width: 200px; }

.form-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------- Checkbox group ---------- */

.checkbox-group {
  border: none;
  padding: 0;
  margin: 0;
}

.checkbox-group legend {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0;
  margin-bottom: 4px;
}

.checkbox-group__hint {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.checkbox-group__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

@media (max-width: 700px) {
  .checkbox-group__grid { grid-template-columns: 1fr; }
}

.checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  font-size: 0.92rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
}

.checkbox-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--gold);
  cursor: pointer;
}

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

.site-footer {
  background: var(--navy);
  color: #cdd4e2;
  padding: 56px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr 0.9fr;
  gap: 32px;
  margin-bottom: 40px;
}

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-grid h4 {
  color: var(--gold-light);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--sans);
  margin-bottom: 1em;
}

.footer-grid a, .footer-grid p { color: #cdd4e2; font-size: 0.92rem; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-grid a:hover { color: var(--gold-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 24px;
  font-size: 0.8rem;
  color: #9aa4bc;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Page hero (interior pages) ---------- */

.page-hero {
  padding: 72px 0 48px;
  text-align: center;
}

.page-hero p {
  max-width: 62ch;
  margin: 0 auto;
}

.page-hero--cream {
  background: var(--cream);
}

.page-hero__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-top: 0.4em;
}

/* ============================================
   Homepage — Cinematic Spa Redesign
   ============================================ */

.section--sage { background: var(--sage-wash); }

/* ---------- Cinematic hero ---------- */

.hero-cinematic {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-cinematic__media {
  position: absolute;
  inset: 0;
}

.hero-cinematic__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.hero-cinematic__overlay {
  position: absolute;
  inset: 0;
  /* Default treatment for heroes without a specific mood correction below
     (About, Collections, Body Care, Contact) — unchanged from the original. */
  background: linear-gradient(180deg, rgba(16, 32, 63, 0.4) 0%, rgba(16, 32, 63, 0.48) 40%, rgba(16, 32, 63, 0.58) 65%, rgba(16, 32, 63, 0.78) 100%);
}

/* If a hero's real photo isn't in place yet, fail gracefully to a warm
   navy/gold gradient instead of a broken image — the onerror handler on
   the <img> adds this class. Reused by any interior hero still waiting on
   its real photo (see Party page history; Facial Care currently uses it). */
.hero-cinematic--fallback .hero-cinematic__media img { display: none; }
.hero-cinematic--fallback .hero-cinematic__media {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 55%, var(--gold) 140%);
}
.hero-cinematic--fallback .hero-cinematic__overlay { background: none; }

/* ---------- Home hero — warm, directional (not uniform navy) ----------
   Gradient is concentrated behind the left-side text and fades out well
   before the product bottles on the right, so labels/gold lids stay clear.
   Warm charcoal-brown instead of navy removes the cool/blue cast; a very
   soft gold wash restores poolside-sunset warmth without oversaturating. */
.hero-cinematic--home .hero-cinematic__overlay {
  background:
    radial-gradient(120% 90% at 82% 78%, rgba(214, 165, 96, 0.14) 0%, rgba(214, 165, 96, 0) 55%),
    linear-gradient(112deg, rgba(26, 20, 15, 0.66) 0%, rgba(26, 20, 15, 0.48) 26%, rgba(26, 20, 15, 0.22) 48%, rgba(26, 20, 15, 0.06) 66%, rgba(26, 20, 15, 0) 80%);
}

.hero-cinematic--home .hero-cinematic__media img {
  filter: saturate(1.1) brightness(1.03) contrast(1.02);
}

/* ---------- Lips hero — preserve warmth, scoped independently ----------
   The source photo is already a warm sunset tone; only a touch darker at
   the very top keeps the eyebrow/heading readable against bright sky. */
.hero-cinematic--lips .hero-cinematic__overlay {
  /* Minimal +0.05 nudge on the darkest stops only — measured body-text
     contrast was 4.47:1 (just under the 4.5:1 AA threshold) against the
     brightest sampled photo pixel; this closes the gap to ~5:1 without
     visibly darkening or flattening the warm sunset tones. */
  background: linear-gradient(115deg, rgba(30, 16, 14, 0.55) 0%, rgba(30, 16, 14, 0.38) 30%, rgba(30, 16, 14, 0.14) 55%, rgba(30, 16, 14, 0) 78%);
}

/* ---------- Hair Care hero — warm, softer/calmer than Lips ----------
   Directional dark gradient only behind the left text; modest warmth and
   contrast restore skin/cream/gold tones without oversaturating the
   eucalyptus greens or tipping the whole scene golden. */
.hero-cinematic--hair-care .hero-cinematic__overlay {
  background: linear-gradient(112deg, rgba(32, 25, 19, 0.58) 0%, rgba(32, 25, 19, 0.4) 28%, rgba(32, 25, 19, 0.16) 52%, rgba(32, 25, 19, 0.03) 72%, rgba(32, 25, 19, 0) 85%);
}

.hero-cinematic--hair-care .hero-cinematic__media img {
  filter: saturate(1.06) brightness(1.05) contrast(1.03);
}

.hero-cinematic__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero-cinematic__content--left {
  text-align: left;
  margin: 0;
  max-width: 620px;
}

.hero-cinematic__content--left .btn-row { justify-content: flex-start; }

/* Left alignment is required at every breakpoint, including mobile — do not
   recenter here. Buttons may stack vertically on narrow screens but stay
   left-aligned (.btn-row already wraps via flex-wrap). */
@media (max-width: 700px) {
  .hero-cinematic__content--left {
    max-width: 100%;
    padding-right: 12px;
  }
}

/* Lips and Hair Care have longer body copy than Home/About at this width —
   full-width text wraps down over the product bottle/face on the right of
   the photo. Reserving a clear right-hand margin keeps the text block
   within a "safe zone" over the darker part of the image instead of
   spilling across the whole frame. Text stays left-aligned, full reading
   size, and complete — only the wrap width changes. */
@media (max-width: 700px) {
  .hero-cinematic--lips .hero-cinematic__content--left {
    max-width: 74%;
    padding-right: 0;
  }
  /* Hair Care's two side-by-side bottles span more of the frame than Lips'
     single bottle, so the safe text zone needs to be narrower; shifting the
     crop further right also moves the bottles further from the text. */
  /* The source photo has no real gap between the bottles (~35-54% of the
     frame) and the woman (~55-100%) — they sit immediately adjacent. Only
     the far-left ~33% (greenery/mirror/wall) is genuinely clear. Anchoring
     the crop near the left edge puts that clear background behind the
     text, at the cost of only a partial glimpse of the bottles' left edge
     (the full product shot is already the norm at desktop/tablet, and on
     the product cards elsewhere on this page). */
  .hero-cinematic--hair-care .hero-cinematic__content--left {
    max-width: 66%;
    padding-right: 0;
  }
  .hero-cinematic--hair-care .hero-cinematic__media img {
    object-position: 8% 55%;
  }
}

.hero-cinematic__content .eyebrow,
.hero-cinematic__title,
.hero-cinematic__body {
  text-shadow: 0 2px 16px rgba(16, 32, 63, 0.45);
}

/* The site's gold eyebrow color reads beautifully over solid cream/white
   section backgrounds, but against a photo it can't guarantee accessible
   contrast at every possible pixel brightness — white keeps the same
   robust contrast the title/body already have, regardless of what's behind
   it in the image. */
.hero-cinematic__content .eyebrow {
  color: var(--warm-white);
}

.hero-cinematic__title {
  color: var(--warm-white);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  margin-bottom: 0.3em;
}

.hero-cinematic__body {
  color: #f1ece2;
  font-size: 1.1rem;
  max-width: 46ch;
  margin: 0 auto 2.2em;
}

.btn-row--center { justify-content: center; }

.btn--outline-light {
  background: transparent;
  border-color: rgba(255, 253, 250, 0.7);
  color: var(--warm-white);
}
.btn--outline-light:hover {
  background: var(--warm-white);
  border-color: var(--warm-white);
  color: var(--navy);
}

@media (max-width: 700px) {
  .hero-cinematic { min-height: 78vh; }
}

.hero-cinematic--interior { min-height: 62vh; }

/* Root cause of body copy overlapping the product/subject at 375px: a
   fixed min-height (56vh ≈ 454px at a 812px-tall viewport) forced the hero
   into a short box regardless of how many lines the body copy wrapped to,
   so longer paragraphs (Lips, Hair Care) ran down over the image instead of
   the box growing to fit them. Fixed by letting the hero's height come from
   its content (padding + text) instead of a viewport fraction — the
   absolutely-positioned background image still fills whatever height that
   produces via object-fit: cover, so it's simply shown taller/less cropped,
   never squished or replaced. */
@media (max-width: 700px) {
  .hero-cinematic--interior {
    min-height: 0;
    padding: 88px 0 56px;
  }
}

/* ---------- Scent stories ---------- */

.scent-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

@media (max-width: 1100px) {
  .scent-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .scent-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .scent-grid { grid-template-columns: 1fr; }
}

.scent-card {
  position: relative;
  border-radius: 6px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 24px;
  text-align: center;
  text-decoration: none;
  color: var(--warm-white);
  box-shadow: 0 20px 40px -26px rgba(16, 32, 63, 0.28);
  transition: transform 0.3s ease;
  overflow: hidden;
}

.scent-card:hover { transform: translateY(-4px); }

.scent-card--photo { padding: 0; }

.scent-card--photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scent-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 32, 63, 0.05) 45%, rgba(16, 32, 63, 0.65) 100%);
}

.scent-card__text {
  position: relative;
  z-index: 1;
  padding: 24px;
}

.scent-card__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--warm-white);
  margin-bottom: 0.3em;
}

.scent-card__mood {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--warm-white);
  opacity: 0.92;
  margin: 0;
}

.swatch--eucalyptus-soft { background: linear-gradient(155deg, var(--sage), var(--sage-deep)); }
.swatch--pineapple-soft { background: linear-gradient(155deg, #e8d9b5, #c19a63); }
.swatch--peach-soft { background: linear-gradient(155deg, var(--peach), var(--peach-deep)); }
.swatch--strawberry-soft { background: linear-gradient(155deg, #e3bcc0, var(--rose-deep)); }

/* ---------- Ritual collage ---------- */

.ritual-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--navy);
  margin-top: 1.4em;
}

/* Wide editorial split, ~45% text / 55% media, restoring the original
   overlapping-inset composition (not a stacked diptych). Root cause of the
   previous "narrow, vertically stacked" bug: aspect-ratio on a flex-column
   item (the <img> itself) doesn't reliably resolve against the flex main
   axis in some engines — the image fell back to its raw `height` HTML
   attribute (941px) instead of scaling to its column width, making the
   whole section absurdly tall/narrow. Fix: aspect-ratio now lives on a
   plain block wrapper div (not a flex item), with the <img> absolutely
   filling that wrapper via object-fit — this sidesteps flex/aspect-ratio
   interaction entirely. */
.ritual-layout {
  display: grid;
  grid-template-columns: 9fr 11fr; /* ~45% / 55% */
  gap: 80px;
  align-items: center;
}

.ritual-layout__media {
  position: relative;
}

.ritual-media__primary {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(16, 32, 63, 0.2);
}

.ritual-media__secondary {
  position: absolute;
  width: 42%;
  right: -8%;
  bottom: -10%;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  border: 6px solid var(--warm-white);
  box-shadow: 0 24px 48px -20px rgba(16, 32, 63, 0.28);
}

.ritual-media__primary img,
.ritual-media__secondary img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.ritual-media__primary img { object-position: 64% 38%; }
.ritual-media__secondary img { object-position: 48% 45%; }

@media (max-width: 1100px) {
  .ritual-layout { gap: 48px; }
  .ritual-media__secondary { width: 38%; right: -6%; bottom: -8%; }
}

@media (max-width: 860px) {
  .ritual-layout { grid-template-columns: 1fr; gap: 32px; }
  .ritual-layout__media { margin-top: 8px; }
  .ritual-media__secondary { width: 40%; right: -4%; bottom: -6%; }
}

@media (max-width: 480px) {
  .ritual-media__secondary { width: 42%; right: -2%; bottom: -5%; }
}

/* ---------- Contact — Join the List layout ---------- */

/* Root cause of the previous "narrow, cropped to a thin strip" bug: the
   section had an inline `style="max-width:980px"` shrinking it below the
   site's normal 1180px container, AND the image (naturally landscape,
   1672×941) was forced into a 4:5 *portrait* aspect-ratio box — cropping
   that much off a wide scene reads as a thin, heavily-zoomed sliver of the
   original photo. Fixed here: standard 1180px container, 45/55 grid, and a
   landscape-appropriate frame for the image. */
.contact-join-layout {
  display: grid;
  grid-template-columns: 9fr 11fr; /* ~45% / 55% */
  gap: 80px;
  align-items: center;
}

/* aspect-ratio lives on this wrapper div, not on the <img> — an <img> that
   carries HTML width/height attributes plus its own CSS aspect-ratio
   resolves inconsistently in this engine (the raw height attribute wins
   over the CSS ratio); a plain wrapper box sidesteps that entirely. */
/* The source photo is 1672×941 — essentially exact 16:9 (1.7768 vs
   1.7778). Matching the wrapper's aspect-ratio to the image's own native
   ratio means object-fit: cover crops nothing at all: the full frame
   (including the woman's hand, the ribbon, and the presentation box on the
   right) renders edge to edge. A narrower box (4:3, used previously) forced
   a real left/right crop that cut off that content — object-position alone
   could shift *which* portion was cropped but not restore what a narrower
   box discards. */
.contact-join-layout__media {
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(16, 32, 63, 0.18);
}

.contact-gift-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

@media (max-width: 1100px) {
  .contact-join-layout { gap: 48px; }
}

@media (max-width: 860px) {
  .contact-join-layout { grid-template-columns: 1fr; gap: 32px; }
  .contact-join-layout__media { margin-top: 8px; }
}

/* ---------- Join panel ---------- */

.join-panel {
  background: var(--warm-white);
  border-radius: 8px;
  padding: 56px 48px;
  box-shadow: 0 30px 70px -30px rgba(16, 32, 63, 0.18);
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.join-panel .inline-form {
  justify-content: center;
  margin: 0 auto;
}

@media (max-width: 560px) {
  .join-panel { padding: 40px 24px; }
}