/*
 * Home page: maps the existing Salient markup onto the design tokens
 * (fonts, text sizes, colors, spacing, radii, shadows). Layout is untouched.
 * `:where(body.home)` keeps specificity low so theme-dark.css can still win.
 * Salient and the page's inline styles use !important / style="", so overrides need it too.
 */

:where(body.home) {
  font-family: var(--ff-font-sans);
  font-size: var(--ff-fs-body);
  line-height: 1.6;
  color: var(--ff-text);
}

/* ---------- Header ---------- */
/* Nav link text is left as the original theme styling. */
:where(body.home) #header-cart-badge {
  background: var(--ff-accent-500) !important;
  color: var(--ff-brand-900) !important;
  font-size: var(--ff-fs-caption) !important;
  font-weight: 700 !important;
}

/* ---------- Hero ---------- */
/* The big "welcome" word (font_size_17vw) keeps its original size and color. */
:where(body.home) #hero .nectar-split-heading:not(.font_size_17vw) {
  font-size: inherit !important;
  line-height: inherit !important;
}
:where(body.home) #hero .column-bg-overlay { background-color: var(--ff-surface) !important; }
:where(body.home) #hero h3 {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-h2) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--ff-text);
}
:where(body.home) #hero h3 span { color: var(--ff-brand-700) !important; }
:where(body.home) #hero h3[style*="margin-bottom"] { margin-bottom: var(--ff-space-2) !important; }
:where(body.home) #hero .divider { height: var(--ff-space-9) !important; }

/* ---------- Intro band (video) ---------- */
:where(body.home) #rewards-panel {
  padding-top: var(--ff-section-py-lg) !important;
  padding-bottom: var(--ff-section-py-lg) !important;
}
:where(body.home) #rewards-panel h3,
:where(body.home) #rewards-panel h3 strong {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-h2) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--ff-brand-200) !important;
}
:where(body.home) #rewards-panel h4 {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-body-lg) !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ff-text-inverse) !important;
}
:where(body.home) #rewards-panel .nectar-button {
  background-color: var(--ff-brand-200) !important;
  color: var(--ff-brand-900) !important;
}
:where(body.home) #rewards-panel .nectar-button i { color: var(--ff-brand-900) !important; }

/* ---------- Buttons (all Salient buttons on the page) ---------- */
html body.home a.nectar-button.nectar-button.nectar-button {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--ff-radius-md) !important;
  box-shadow: none !important;
}

/* ---------- Our menu ---------- */
:where(body.home) #our-menu-wrapper {
  padding-top: var(--ff-section-py) !important;
  padding-bottom: var(--ff-space-7) !important;
}
:where(body.home) #our-menu-wrapper .row { margin-bottom: var(--ff-space-7) !important; }
:where(body.home) #our-menu-wrapper h6,
:where(body.home) #reviews-section h6 {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-h2) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--ff-text) !important;
}
:where(body.home) #our-menu-wrapper .nectar-button.extra-color-1 {
  background-color: var(--ff-brand-900) !important;
  color: var(--ff-text-inverse) !important;
}
:where(body.home) #our-menu-wrapper .nectar-button.extra-color-1 i { color: var(--ff-text-inverse) !important; }
:where(body.home) #our-menu-wrapper .nectar-button.extra-color-1:hover { background-color: var(--ff-brand-800) !important; }

/* ---------- Reviews ---------- */
:where(body.home) #reviews-section {
  padding-top: var(--ff-section-py) !important;
  padding-bottom: var(--ff-space-7) !important;
}
:where(body.home) #reviews-section .container > div { margin-bottom: var(--ff-space-7) !important; }
:where(body.home) #stagger-testimonials { background: var(--ff-surface) !important; }
:where(body.home) #stagger-testimonials .st-card {
  font-family: var(--ff-font-sans);
  border: 1px solid var(--ff-border);
  box-shadow: var(--ff-shadow-sm) !important;
}
:where(body.home) #stagger-testimonials .st-card:not(.center) {
  background: var(--ff-surface-raised);
  color: var(--ff-text-secondary) !important;
}
:where(body.home) #stagger-testimonials .st-card.center {
  box-shadow: var(--ff-shadow-md) !important;
}
:where(body.home) #stagger-testimonials .st-card h3 {
  font-family: var(--ff-font-sans);
  font-size: var(--ff-fs-body-sm) !important;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: inherit !important;
}
:where(body.home) #stagger-testimonials .st-card p {
  font-size: var(--ff-fs-caption) !important;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: inherit !important;
}
@media (min-width: 768px) {
  :where(body.home) #stagger-testimonials .st-card h3 { font-size: var(--ff-fs-body) !important; }
  :where(body.home) #stagger-testimonials .st-card p { font-size: var(--ff-fs-body-sm) !important; }
}
:where(body.home) #stagger-prev,
:where(body.home) #stagger-next {
  border: 1px solid var(--ff-border-strong) !important;
  border-radius: var(--ff-radius-full) !important;
  color: var(--ff-brand-900);
}
:where(body.home) #stagger-prev:hover,
:where(body.home) #stagger-next:hover {
  background: var(--ff-brand-900) !important;
  color: var(--ff-brand-200) !important;
  border-color: var(--ff-brand-900) !important;
}

/* ---------- Follow us ---------- */
:where(body.home) .carouse-rows .child_column > .vc_column-inner {
  padding-top: var(--ff-section-py-lg) !important;
  padding-bottom: var(--ff-section-py-lg) !important;
}
:where(body.home) .carouse-rows h2 {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-h2) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  text-transform: none !important;
  color: var(--ff-text-inverse) !important;
}
:where(body.home) .carouse-rows div:has(> a[aria-label^="Follow us on"]) {
  gap: var(--ff-space-5) !important;
  margin-top: var(--ff-space-5) !important;
}
:where(body.home) .carouse-rows a[aria-label^="Follow us on"] {
  box-shadow: var(--ff-shadow-md) !important;
  color: var(--ff-brand-900) !important;
}

/* ---------- Footer ---------- */
:where(body.home) #bb-footer {
  padding-top: var(--ff-section-py-sm) !important;
  padding-bottom: var(--ff-section-py-sm) !important;
}
:where(body.home) #bb-footer h3 {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-h3) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  color: var(--ff-brand-200) !important;
}
:where(body.home) #bb-footer .nectar-split-heading {
  font-size: inherit !important;
  line-height: inherit !important;
}
:where(body.home) #bb-footer .menu-large a {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-body) !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ff-brand-200) !important;
}
:where(body.home) #bb-footer .menu-small li,
:where(body.home) #bb-footer .menu-small a {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-body-sm) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  margin-bottom: var(--ff-space-2) !important;
  color: var(--ff-brand-200) !important;
}
:where(body.home) #bb-footer .nectar-responsive-text,
:where(body.home) #bb-footer .nectar-responsive-text p {
  font-family: var(--ff-font-sans) !important;
  font-size: var(--ff-fs-body-sm) !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--ff-brand-200) !important;
}
:where(body.home) #bb-footer .divider-border {
  margin-top: var(--ff-space-6) !important;
  margin-bottom: var(--ff-space-6) !important;
}