:root{
  /* font family */
  --ff-body: "Inter", "Roboto", sans-serif;
  --ff-heading: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --ff-editorial: "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --fw-body: 400;

  --fs-body: 0.875rem;
  --fs-sm: 0.75rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;

  --fs-h6: 0.875rem;
  --fs-h5: 1rem;
  --fs-h4: 1.5rem;
  --fs-h3: 2rem;
  --fs-h2: 3rem;
  --fs-h1: 3.75rem;
  --fs-3xl: 2.5rem;
  /* Theme template color setting */
  --clr-body: #000000;

  --clr-primary: #1A1A1A;
  --clr-primary-400: rgba(26, 26, 26, 0.43);

  /* Bellerose editorial neutrals */
  --clr-cream: #F5F1EA;
  --clr-sand: #E8E2D5;
  --clr-ink: #1A1A1A;
  --clr-muted: #7A7A7A;
  --clr-hairline: #E5DFD3;
  --clr-sale: #B91C1C;

  --clr-black: #000000;
  --clr-black-500: rgba(0,0,0, 0.5);
  --clr-black-600: rgba(0,0,0, 0.6);
  --clr-black-700: rgba(0,0,0, 0.7);
  --clr-black-800: rgba(0,0,0, 0.8);


  --clr-white: #ffffff;
  --clr-white-400: rgba(217, 217, 217, 0.4);
  --clr-white-700: rgba(255, 255, 255, 0.69);

  --clr-gray: #667085;
  --clr-gray-300: #d0d5dd;
  --clr-gray-500: #f3f3f3;
  --clr-gray-600: #eaecf0;
  --clr-gray-700: #f9fafb;
  --clr-gray-800: #999fb5;
  --clr-gray-900: #e9ebf1;

  --clr-gradient-bg: #f8f3ea;
  --clr-gradient-mental: #d2ecff;

  --clr-border: rgba(217, 217, 217, 0.4);

  --hero-gradient: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  --testimonial-bg: linear-gradient(180deg, #f3f3f3 0%, #f9fafb 36.98%);
  --clr-join-vox-bg: linear-gradient(
    0deg,
    rgba(164, 14, 0, 0.4) 0%,
    rgba(164, 14, 0, 0.4) 100%
  ),
    linear-gradient(180deg, #ff0c00 9.43%, #ce004c 182.32%);
  --shadow-dropdown: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
  0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-card: 0 14px 16px rgba(14, 15, 59, 0.12);
  --shadow-join-vox: 0px 264px 74px 0px rgba(163, 9, 10, 0),
  0px 169px 68px 0px rgba(163, 9, 10, 0.02),
  0px 95px 57px 0px rgba(163, 9, 10, 0.08),
  0px 42px 42px 0px rgba(163, 9, 10, 0.13),
  0px 11px 23px 0px rgba(163, 9, 10, 0.15);

}

/* -----------------------------------------------------------------
   Bellerose editorial overlay — targeted typography for navbar + footer.
   Applied globally via config.css. Safe surgical CSS; no Liquid rewrite.
   ----------------------------------------------------------------- */

/* Navbar: quiet, uppercase, wide tracking (Bellerose look) */
.site-header .primary-menu > .menu-item > a,
.site-header .primary-menu > .menu-item > a.capitalize {
  font-family: var(--ff-body), sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--clr-ink, #1A1A1A);
}
.site-header .primary-menu > .menu-item > a:hover,
.site-header .primary-menu > .menu-item > a.is-active {
  color: var(--clr-ink, #1A1A1A);
  opacity: 0.65;
}
.site-header .mega-menu .mega-menu-column p.font-bold {
  font-family: var(--ff-body), sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--clr-ink, #1A1A1A) !important;
}
.site-header .mega-menu ul li a {
  font-family: var(--ff-body), sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: var(--clr-ink, #1A1A1A);
}
.site-header .header-right .language,
.site-header .header-right .country,
.site-header .header-right .lang-text {
  font-family: var(--ff-body), sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
  font-weight: 400 !important;
  color: var(--clr-ink, #1A1A1A);
}

/* Footer: cream background, editorial column titles, quiet links */
.footer {
  background-color: var(--clr-cream, #F5F1EA) !important;
  border-top: 1px solid var(--clr-hairline, #E5DFD3);
}
.footer .footer-links p.font-bold {
  font-family: var(--ff-body), sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--clr-ink, #1A1A1A) !important;
}
.footer .footer-links li a {
  font-family: var(--ff-body), sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: #4A4A4A;
  transition: color 0.2s ease;
}
.footer .footer-links li a:hover { color: var(--clr-ink, #1A1A1A); }
.footer .address-col p {
  font-family: var(--ff-body), sans-serif;
  font-size: 14px;
  color: #5C5C5C;
  line-height: 1.6;
}
.footer .copyright,
.footer .copyright-desktop,
.footer .copyright-mobile {
  font-family: var(--ff-body), sans-serif !important;
  color: var(--clr-muted, #7A7A7A) !important;
  letter-spacing: 0.02em;
}
.footer .social-icons a svg path {
  fill: var(--clr-ink, #1A1A1A) !important;
  fill-opacity: 0.5 !important;
  transition: fill-opacity 0.2s ease;
}
.footer .social-icons a:hover svg path { fill-opacity: 1 !important; }

/* Buttons: primary is already black via --clr-primary; ensure hover
   stays black instead of desaturating (was overriding to red before). */
.btn.btn-bg-primary:hover,
button.btn-bg-primary:hover,
a.btn.btn-bg-primary:hover {
  background-color: var(--clr-ink, #1A1A1A) !important;
  border-color: var(--clr-ink, #1A1A1A) !important;
  color: #fff !important;
  opacity: 0.88;
}