/* BURST brand overrides — apply purple to headings/brand-prominent elements
   while keeping body text black (#000000) via Shopify color scheme tokens.
   Scoped to light color schemes so dark/hero schemes (purple/strawberry/bubblegum
   backgrounds) keep their white text. */

:root {
  --burst-purple: #440099;
  --burst-purple-90: #5518A2;
  --burst-blue: #74D1EA;
  --burst-strawberry: #FF5869;
}

/* Headings — purple across the storefront */
.color-scheme-1 h1, .color-scheme-1 h2, .color-scheme-1 h3, .color-scheme-1 h4, .color-scheme-1 h5, .color-scheme-1 h6,
.color-scheme-2 h1, .color-scheme-2 h2, .color-scheme-2 h3, .color-scheme-2 h4, .color-scheme-2 h5, .color-scheme-2 h6,
.color-scheme-3 h1, .color-scheme-3 h2, .color-scheme-3 h3, .color-scheme-3 h4, .color-scheme-3 h5, .color-scheme-3 h6,
.color-scheme-4 h1, .color-scheme-4 h2, .color-scheme-4 h3, .color-scheme-4 h4, .color-scheme-4 h5, .color-scheme-4 h6,
.color-scheme-6 h1, .color-scheme-6 h2, .color-scheme-6 h3, .color-scheme-6 h4, .color-scheme-6 h5, .color-scheme-6 h6,
.color-scheme-7 h1, .color-scheme-7 h2, .color-scheme-7 h3, .color-scheme-7 h4, .color-scheme-7 h5, .color-scheme-7 h6,
.color-scheme-10 h1, .color-scheme-10 h2, .color-scheme-10 h3, .color-scheme-10 h4, .color-scheme-10 h5, .color-scheme-10 h6,
.color-scheme-11 h1, .color-scheme-11 h2, .color-scheme-11 h3, .color-scheme-11 h4, .color-scheme-11 h5, .color-scheme-11 h6 {
  color: var(--burst-purple);
}

/* Common brand-prominent elements on light schemes */
.color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4,
.color-scheme-6, .color-scheme-7, .color-scheme-10, .color-scheme-11 {
  .product__title,
  .product__title *,
  .product__subtitle,
  .card__heading,
  .card__heading a,
  .collapsible-tab__heading,
  .accordion__title,
  .section-header__title,
  .section-header__subtitle,
  .collection__title,
  .footer__heading,
  .cart__heading,
  .drawer__heading,
  .price--on-sale .price-item--regular {
    color: var(--burst-purple);
  }
}

/* Navigation links — purple on light schemes */
.color-scheme-1 .header__inline-menu a,
.color-scheme-2 .header__inline-menu a,
.color-scheme-3 .header__inline-menu a,
.color-scheme-7 .header__inline-menu a,
.color-scheme-10 .header__inline-menu a {
  color: var(--burst-purple);
}

/* Star ratings — Blue (Loox/Okendo widgets typically render their own,
   but inline star SVGs in the Sleek theme can be tinted here) */
.color-scheme-1 .rating-star,
.color-scheme-2 .rating-star,
.color-scheme-3 .rating-star,
.color-scheme-4 .rating-star,
.color-scheme-7 .rating-star,
.color-scheme-10 .rating-star,
.color-scheme-11 .rating-star {
  color: var(--burst-blue);
}

/* Okendo widget stars → brand blue. Okendo draws each star with
   <use href="#oke-star-filled"> referencing a sprite symbol whose fill is baked
   in, so tinting the <use> element or its containers does NOT work — the fill
   must be overridden on the referenced sprite element itself (#oke-star-filled).
   Applies to every Okendo star widget (PDP rating, gift ratings, testimonials).
   NOTE: the supported control is Okendo Admin → On-Site Displays → star color;
   this is a theme-side override if that isn't used. */
#oke-star-filled,
#oke-star-filled *,
symbol#oke-star-filled *,
.oke-stars-foreground svg use[href="#oke-star-filled"] {
  fill: var(--burst-blue) !important;
  color: var(--burst-blue) !important;
}

/* Footer contact email (mailto link) sits directly under the social icons:
   right-aligned on desktop (below the socials), centered on mobile. */
.footer__social-email {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
@media (min-width: 990px) {
  .footer__social-email {
    align-items: flex-end;
  }
}
.footer__contact-email {
  font-size: 1.6rem;
}