/* Homepage vertical rhythm: every section-to-section gap should read as the
   same height, while each section still keeps its own visible inset above
   its heading. Every section carries half the target gap on each side, so
   two consecutive sections together add up to one full gap; the hero
   contributes no padding of its own, so the first section after it (the
   promo cards) gets the full gap on its top side alone to match. */
body.is-home .section { padding-top: calc(var(--sp-lg) / 2); padding-bottom: calc(var(--sp-lg) / 2); }
body.is-home .hero-promo-section { padding-top: var(--sp-lg); }

/* Hero — full-bleed photo with a warm cream scrim fading in from the left,
   text overlaid on top of the scrim. Only the heading/subtext and the photo
   change between slides; the eyebrow, buttons and dot/counter controls stay
   put. Photo, scrim and text are stacked absolute/relative layers on one
   shared section rather than a two-column split. */
.hero-split {
  position: relative;
  height: min(82vh, 680px);
  overflow: hidden;
}
.hero-split__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.9s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero-split__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, var(--bg) 34%, rgba(242,231,213,0.55) 48%, rgba(242,231,213,0) 68%);
}
.hero-split__text {
  position: relative;
  z-index: 2;
  max-width: 560px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-xl) clamp(var(--sp-md), 6vw, 96px);
}
.hero-split__copy-slides { position: relative; }
.hero-split__copy {
  display: none;
}
.hero-split__copy.is-active { display: block; }
.hero-split__copy h1 { margin-bottom: var(--sp-md); }
.hero-split__copy p { font-size: 1.05rem; max-width: 460px; margin-bottom: var(--sp-lg); }
.hero-split__actions { display: flex; gap: var(--sp-sm); margin-bottom: var(--sp-lg); flex-wrap: nowrap; }
.hero-split__actions .btn { padding-left: 24px; padding-right: 24px; white-space: nowrap; }

@media (max-width: 480px) {
  .hero-split__actions { flex-wrap: wrap; }
}
.hero-split__nav { display: flex; align-items: center; gap: var(--sp-sm); }
.hero__dots { display: flex; gap: 10px; }
.hero__dots button,
.hero-promo-card__nav .hero__dots span {
  width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--accent); background: transparent; padding: 0; display: block;
}
.hero__dots button.is-active,
.hero-promo-card__nav .hero__dots span.is-active { background: var(--accent); }
.hero__counter { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--muted); }

.hero__arrow {
  position: absolute; z-index: 3; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: #FFFFFF; color: #141312;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.hero__arrow:hover { background: var(--accent-light); }
.hero__arrow--prev { left: 24px; }
.hero__arrow--next { right: 24px; }

/* Secondary promo-card strip below the hero: one card per hero slide, each
   reusing that slide's real copy and photo (with the same left-edge fade
   treatment as the hero) so shoppers can jump straight to a category. */
.hero-promo-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-md); }
.hero-promo-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hero-promo-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
}
.hero-promo-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--card) 0%, rgba(255,253,248,0.35) 22%, rgba(255,253,248,0) 45%);
}
.hero-promo-card__body { padding: var(--sp-md); }
.hero-promo-card__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.hero-promo-card__body p { font-size: 0.85rem; margin-bottom: var(--sp-md); }
.hero-promo-card .btn-sm { padding: 10px 18px; font-size: 0.72rem; }
.hero-promo-card__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  margin-top: auto;
  padding: 0 var(--sp-md) var(--sp-md);
}

@media (max-width: 900px) {
  .hero-split { height: 560px; }
  .hero-split__text { max-width: 100%; }
  .hero-split__scrim {
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 40%, rgba(242,231,213,0.6) 58%, rgba(242,231,213,0) 78%);
  }
  .hero-promo-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Category cards */
.category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.category-card { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-md); overflow: hidden; }
.category-card img, .category-card .ph-fill { width: 100%; height: 100%; object-fit: cover; }
.category-card::before {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(135deg, var(--bg) 0%, rgba(242,231,213,0.3) 18%, rgba(242,231,213,0) 38%);
}
.category-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(16,15,14,0.88) 0%, rgba(16,15,14,0.15) 55%, rgba(16,15,14,0.05) 100%);
}
.category-card span {
  position: absolute; left: var(--sp-sm); right: var(--sp-sm); bottom: var(--sp-sm); z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  /* Always sits over a photo + dark gradient overlay regardless of the
     surrounding section's light/dark context, so this stays forced-light. */
  color: #F7F4EE;
}

/* Trust strip */
.trust-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item .tick {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--accent); color: var(--accent-light);
  display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
}
.trust-item strong { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }

/* Product grid */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.product-card__media { position: relative; aspect-ratio: 1/1; background: var(--bg); }
.product-card__media img, .product-card__media .ph-fill { width: 100%; height: 100%; object-fit: cover; }
body.is-home .product-card__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--card) 0%, rgba(255,253,248,0.3) 20%, rgba(255,253,248,0) 40%);
}
.product-card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--accent); color: #14110D; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--radius-sm);
}
.product-card__brand { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 4px; }
.product-card__body { padding: var(--sp-sm) var(--sp-sm) var(--sp-md); }
.product-card__body h3 { margin-bottom: 6px; font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; }
.product-card__price { color: var(--accent-light); font-weight: 600; margin-bottom: var(--sp-sm); }
.product-card .btn { width: 100%; }

/* Order & shipping */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-lg); }
.step { padding: var(--sp-md); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.step__num { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); margin-bottom: var(--sp-sm); }
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; font-size: 0.9rem; }
.shipping-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.shipping-item { border-left: 2px solid var(--accent); padding-left: var(--sp-sm); }
.shipping-item strong { display: block; color: var(--ink); margin-bottom: 4px; }
.shipping-item span { color: var(--muted); font-size: 0.9rem; }

/* Partner brands */
.brand-panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
.brand-panel {
  position: relative; min-height: 380px; border-radius: var(--radius-md); overflow: hidden;
  display: flex; align-items: flex-end; padding: var(--sp-lg);
  border: 1px solid var(--border);
  background-size: cover; background-position: center;
}
.brand-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(16,15,14,0.92) 0%, rgba(16,15,14,0.35) 55%, rgba(16,15,14,0.15) 100%);
}
.brand-panel--altiore:not([style]) { background: radial-gradient(circle at 30% 20%, #3a2c17 0%, #1A1816 70%); }
.brand-panel--scentmatic:not([style]) { background: radial-gradient(circle at 70% 20%, #2a241a 0%, #1A1816 70%); }
.brand-panel__mark { display: none; position: absolute; top: var(--sp-lg); left: var(--sp-lg); width: 46px; height: 46px; opacity: 0.9; }
.brand-panel__body { position: relative; z-index: 2; }
.brand-panel__body h3 { font-size: 1.6rem; }
.brand-panel__body p { margin-bottom: var(--sp-md); }

@media (max-width: 1000px) {
  .category-grid, .product-grid, .steps, .trust-strip { grid-template-columns: repeat(2, 1fr); }
  .shipping-strip { grid-template-columns: 1fr; }
  .brand-panels { grid-template-columns: 1fr; }
}