/* i.ast-icon-shopping-bag,
i.ast-icon-shopping-bag * {
  background-color: red !important;
} */

/**
 * Brand Palette Theme Variables & Custom Utility Framework
 */
:root {
  /* Canonical brand palette */
  --btfp-brand-purple: var(--wp--preset--color--purple);
  --btfp-brand-bright-purple: var(--wp--preset--color--bright-purple);
  --btfp-brand-purple-dark: var(--wp--preset--color--dark-purple);
  --btfp-brand-grey: var(--wp--preset--color--grey);
  --btfp-brand-yellow: var(--wp--preset--color--yellow);
  --btfp-brand-pink: var(--wp--preset--color--pink);
  --btfp-pale-yellow: var(--wp--preset--color--pale-yellow);

  /* Brand Primary Palette */
  --brand-purple: var(--btfp-brand-purple);
  --brand-bright-purple: var(--btfp-brand-bright-purple);
  --brand-purple-bright: var(--btfp-brand-bright-purple);
  --brand-purple-dark: var(--btfp-brand-purple-dark);
  --brand-grey: var(--btfp-brand-grey);

  /* Brand Secondary Palette */
  --brand-yellow: var(--btfp-brand-yellow);
  --brand-pink: var(--btfp-brand-pink);
  --brand-mint: var(--wp--preset--color--mint);
  --brand-soft-mint: var(--wp--preset--color--soft-mint);
  --soft-pink: var(--btfp-brand-pink);
  --pale-yellow: var(--btfp-pale-yellow);
  --cream: var(--btfp-pale-yellow);

  /* Optional Brand Accent Extensions */
  --brand-pale-purple: var(--wp--preset--color--pale-purple);
  --brand-pale-teal: var(--wp--preset--color--pale-teal);
  --brand-pale-grey: #d1cfccce;
  --brand-off-white: var(--wp--preset--color--off-white);

  /* Section colours */
  --footer-background: var(--brand-purple);

  /* Shared text hover colours */
  --hover-color-white-text: var(--wp--preset--color--white);
  --hover-color-black-text: var(--brand-purple);
  --hover-color-faded-text: var(--brand-purple-dark);

  /* Compatibility aliases for plugins and embedded app styles */
  --primary-cta: var(--brand-bright-purple);
  --primary-cta-hover: var(--brand-purple-dark);
  --primary: var(--brand-purple-bright);
  --primary-hover: var(--brand-purple-dark);
  --warm-grey: var(--brand-grey);
  --golden-yellow: var(--brand-yellow);
  --text-on-primary: var(--hover-color-white-text);
  --bg: var(--wp--preset--color--white);
  --bg-dark: #f5f7fa;
  --bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #ebebe4 100%);
  --surface: var(--wp--preset--color--white);
  --text: var(--wp--preset--color--dark-text);
  --text-muted: var(--warm-grey);
  --border: rgba(158, 88, 147, 0.15);
  --border-strong: rgba(158, 88, 147, 0.3);
  --danger: var(--wp--preset--color--danger);
  --warning: #f59e0b;
  --success: var(--wp--preset--color--success);
  --success-bg: #d1fae5;
  --focus: rgba(158, 88, 147, 0.3);
  --shadow-sm: 0 2px 8px rgba(158, 88, 147, 0.08);
  --shadow-md: var(--wp--custom--shadow--medium);
  --shadow-lg: 0 10px 40px rgba(158, 88, 147, 0.15);
  --white: var(--wp--preset--color--white);
  --background: var(--wp--preset--color--white);
  --text-dark: var(--wp--preset--color--dark-text);
  --text-medium: var(--wp--preset--color--body-text);
  --text-light: var(--brand-grey);
  --border-light: #e5e5e5;
  --grey-light: var(--wp--preset--color--light-grey);
  --grey-medium: #9e9e9e;
  --yellow: #ffd54f;
  --dark-yellow: #ffc107;
  --brand-purple-tint: rgba(158, 88, 147, 0.06);
  --brand-purple-tint-md: rgba(158, 88, 147, 0.08);
  --brand-purple-shadow: rgba(158, 88, 147, 0.15);
  --primary-cta-tint: rgba(175, 28, 151, 0.05);
  --primary-cta-tint-md: rgba(175, 28, 151, 0.12);
  --primary-cta-shadow: rgba(175, 28, 151, 0.3);
  --primary-cta-shadow-hover: rgba(175, 28, 151, 0.4);
  --golden-yellow-tint: rgba(255, 204, 50, 0.15);
  --golden-yellow-tint-light: rgba(255, 204, 50, 0.05);
  --btfp-button-font-family: var(--wp--preset--font-family--body);
  --btfp-button-font-size: 0.9375rem;
  --btfp-button-font-weight: 500;
  --btfp-button-line-height: 1.35;
  --btfp-button-letter-spacing: 0;
  --btfp-button-padding-y: 0.5rem;
  --btfp-button-padding-x: 1.25rem;
  --btfp-radius: var(--wp--custom--radius);
  --btfp-button-radius: var(--btfp-radius);
  --btfp-button-border-width: 0.0625rem;
  --btfp-button-primary-bg: var(--primary-cta);
  --btfp-button-primary-color: var(--hover-color-white-text);
  --btfp-button-primary-border: var(--primary-cta);
  --btfp-button-primary-hover-bg: var(--primary-cta-hover);
  --btfp-button-primary-hover-color: var(--hover-color-white-text);
  --btfp-button-primary-hover-border: var(--primary-cta-hover);
  --btfp-button-secondary-bg: var(--wp--preset--color--white);
  --btfp-button-secondary-color: var(--brand-bright-purple);
  --btfp-button-secondary-border: var(--border-light);
  --btfp-button-secondary-hover-bg: var(--pale-yellow);
  --btfp-button-secondary-hover-color: var(--hover-color-black-text);
  --btfp-button-secondary-hover-border: var(--grey-medium);

  /* Force Astra to read your variables directly for its core settings slots */
  --ast-global-color-0: var(--brand-purple) !important; /* Slot 1: Primary Accent / Buttons */
  --ast-global-color-1: var(--brand-purple) !important; /* Slot 2: Heading Fonts / Hover Links */
  --ast-global-color-2: var(--brand-bright-purple) !important; /* Slot 3: Secondary Elements */
  /* --ast-global-color-3: var(--brand-grey) !important; */ /* Slot 4: Normal Body Text */
  --ast-global-color-4: var(--wp--preset--color--white) !important; /* Slot 5: Site background */
  /* --ast-global-color-5: #ffffff !important; */ /* Slot 6: Clean Element Fallbacks */
  --ast-global-color-6: var(--brand-grey) !important; /* Slot 7: Banner Accents, Unselected menu items/nav */
  --ast-global-color-7: var(--brand-pale-purple) !important; /* Slot 8: Optional Extension 1 */
  /* --ast-global-color-8: var(--brand-pale-teal) !important; */ /* Slot 9: Optional Extension 2 */
}

/**
 * 1. Font Overrides (Montserrat - Gotham Profile Match)
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-button__link,
.btn {
  font-family: var(--wp--preset--font-family--body) !important;
}

body {
  font-size: var(--wp--preset--font-size--body) !important;
  color: var(--wp--preset--color--body-text);
}

h1,
h2,
.entry-content :where(h1, h2) {
  color: var(--wp--preset--color--purple);
  font-weight: 400 !important;
}

h3,
h4,
h5,
h6,
.entry-content :where(h3, h4, h5, h6) {
  color: var(--wp--preset--color--body-text);
  font-weight: 400 !important;
}

h1 {
  font-size: var(--wp--preset--font-size--heading-1) !important;
}

h2 {
  font-size: var(--wp--preset--font-size--heading-2) !important;
}

h3 {
  font-size: var(--wp--preset--font-size--heading-3) !important;
}

h4 {
  font-size: var(--wp--preset--font-size--heading-4) !important;
}

h5 {
  font-size: var(--wp--preset--font-size--heading-5) !important;
}

h6 {
  font-size: var(--wp--preset--font-size--heading-6) !important;
}

@media (max-width: 40rem) {
  h2 {
    font-size: 1.9rem !important;
  }
}

/**
 * 2. Core Button & Form Submit Styling
 */
.btn,
.wp-block-button__link,
.wp-element-button,
.ast-button,
.ast-custom-button,
button[type="submit"],
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .checkout-button,
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button,
.woocommerce-mini-cart__buttons .button,
.widget_shopping_cart .button,
.woocommerce .wc-forward {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  min-height: 0 !important;
  background-color: var(--btfp-button-bg, var(--btfp-button-primary-bg)) !important;
  color: var(--btfp-button-color, var(--btfp-button-primary-color)) !important;
  border: var(--btfp-button-border-width) solid var(--btfp-button-border, var(--btfp-button-primary-border)) !important;
  border-radius: var(--btfp-button-radius) !important;
  font-family: var(--btfp-button-font-family) !important;
  font-size: var(--btfp-button-font-size) !important;
  font-weight: var(--btfp-button-font-weight) !important;
  line-height: var(--btfp-button-line-height) !important;
  letter-spacing: var(--btfp-button-letter-spacing) !important;
  padding: var(--btfp-button-padding-y) var(--btfp-button-padding-x) !important;
  text-transform: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition:
    background-color 0.25s ease-in-out,
    border-color 0.25s ease-in-out,
    color 0.25s ease-in-out,
    transform 0.15s ease !important;
}

.btn:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.ast-button:hover,
.ast-custom-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .checkout-button:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .add_to_cart_button:hover,
.woocommerce-mini-cart__buttons .button:hover,
.widget_shopping_cart .button:hover,
.woocommerce .wc-forward:hover {
  background-color: var(--btfp-button-hover-bg, var(--btfp-button-primary-hover-bg)) !important;
  color: var(--btfp-button-hover-color, var(--btfp-button-primary-hover-color)) !important;
  border-color: var(--btfp-button-hover-border, var(--btfp-button-primary-hover-border)) !important;
  transform: translateY(-0.0625rem);
}

.btn-secondary,
.btn.btn-reversed,
.wp-block-button__link.btn-reversed {
  --btfp-button-bg: var(--btfp-button-secondary-bg);
  --btfp-button-color: var(--btfp-button-secondary-color);
  --btfp-button-border: var(--btfp-button-secondary-border);
  --btfp-button-hover-bg: var(--btfp-button-secondary-hover-bg);
  --btfp-button-hover-color: var(--btfp-button-secondary-hover-color);
  --btfp-button-hover-border: var(--btfp-button-secondary-hover-border);
}

.btn-secondary:hover,
.btn.btn-reversed:hover,
.wp-block-button__link.btn-reversed:hover {
  --btfp-button-hover-bg: var(--btfp-button-secondary-hover-bg);
  --btfp-button-hover-color: var(--btfp-button-secondary-hover-color);
  --btfp-button-hover-border: var(--btfp-button-secondary-hover-border);
}

.btn-lg {
  padding: 1.25rem 3rem !important;
  font-size: 1.125rem !important;
}

.btn:disabled,
.btn.disabled,
.wp-block-button__link:disabled,
.wp-element-button:disabled,
.ast-button:disabled,
button[type="submit"]:disabled,
input[type="submit"]:disabled,
.woocommerce #respond input#submit:disabled,
.woocommerce a.button:disabled,
.woocommerce button.button:disabled,
.woocommerce input.button:disabled,
.woocommerce .button.disabled,
.woocommerce .button:disabled,
.woocommerce .button:disabled[disabled] {
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  transform: none !important;
}

.wp-block-buttons .wp-block-button__link {
  white-space: nowrap !important;
}

.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
}

.ast-site-header-cart .widget_shopping_cart .woocommerce-mini-cart__buttons .button {
  width: 100%;
  margin: 0 !important;
}

/**
 * 5. Muted Purple Brand Footer & Secondary Center Alignment Override
 */

/* Shared footer link presentation; colours are controlled by Astra. */
.site-footer a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease;
}

/* Two-column navigation rendered inside an Astra footer widget. */
.btfp-footer-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  width: 100%;
}

.btfp-footer-navigation__column {
  justify-self: center;
  width: max-content;
  max-width: 100%;
}

.btfp-footer-navigation__menu {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.btfp-footer-navigation__menu a {
  display: inline-block;
  line-height: 1.4;
  padding: 0.25rem 0;
}

.btfp-footer-copyright {
  font-size: 0.8125rem;
  margin: 0;
}

@media (max-width: 40rem) {
  .btfp-footer-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding-inline: 1.5rem;
  }

  .btfp-footer-navigation__column,
  .btfp-footer-navigation__menu {
    display: contents;
  }

  #astra-footer-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    padding-inline: 1.5rem;
  }

  .btfp-footer-navigation__menu > li,
  #astra-footer-menu > li {
    min-width: 0;
    text-align: center;
  }

  .btfp-footer-navigation__menu .sub-menu {
    display: none;
  }
}

/* Centered Copyright Frame */
.footer-copyright-frame {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
  margin-top: 20px;
}

/**
 * 7. Structural Accent Borders
 * Adds a 3px bright purple top border to both the main navbar header and the site footer
 */
.site-header,
header#masthead,
.site-footer,
footer#colophon {
  border-top: 3px solid var(--brand-bright-purple) !important;
}

@media (max-width: 48rem) {
  body.woocommerce-checkout .site-content,
  body.woocommerce-cart .site-content {
    padding-top: 1rem;
  }
}

/* TRY THIS FR SHOPPING BAG */

/**
 * 8. Core Cart Reconstruction (Naked CSS Target)
 * Bypasses the outer 'i' element and drops the background graphic straight into the span wrapper
 */

/* 1. Remove the internal SVG code entirely */
i.ast-icon-shopping-bag span.icon-bag svg,
.ast-mobile-header-wrap .ast-mobile-header-item .ast-icon svg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* 2. Target the inner span wrapper and transform it into your brand bag */
i.ast-icon-shopping-bag span.icon-bag {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  background-image: url("../images/web-res-shopping-bag.png") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  position: relative !important;
}

/* 3. Re-align the shopping cart container row items horizontally */
.ast-site-header-cart-li,
.ast-header-woo-cart,
.ast-addon-cart-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  white-space: nowrap !important;
  gap: 8px !important;
}

/* 4. Fix formatting for the text pricing strings */
.ast-woo-header-cart-total,
.theme-item-count,
.header-cart-amount {
  display: inline-block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

.btfp-lite-cart {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.btfp-lite-cart .ast-icon-shopping-bag {
  position: relative;
  display: inline-flex;
}

.btfp-lite-cart-fallback {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.ast-header-break-point #masthead :is(.ast-header-woo-cart, .btfp-lite-cart-menu-item, .btfp-lite-cart-fallback):has([data-cart-total="0"]) {
  display: none !important;
}

.site-header .custom-logo {
  width: 18.5rem;
  max-width: 100%;
}

.site-header .ast-site-identity {
  padding-block: 0.625rem;
}

@media (max-width: 48rem) {
  .ast-mobile-header-wrap .ast-primary-header-bar {
    padding-inline: 0.75rem !important;
    min-height: 4.25rem;
  }

  .ast-mobile-header-wrap .ast-builder-grid-row-no-center {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.5rem;
    min-width: 0;
  }

  .ast-mobile-header-wrap :is(.site-header-section-left, .site-header-section-left .ast-builder-layout-element, .ast-site-identity) {
    min-width: 0;
  }

  .ast-mobile-header-wrap .site-logo-img {
    max-width: 100%;
    padding-inline-end: 0;
  }

  .ast-mobile-header-wrap .custom-logo {
    width: 14.75rem;
    max-width: 100% !important;
  }

  .ast-mobile-header-wrap .site-description {
    max-width: 100%;
    font-size: 0.65rem !important;
    letter-spacing: 0 !important;
  }

  .ast-mobile-header-wrap .ast-woo-header-cart-info-wrap {
    display: none;
  }
}

.btfp-cart-item-options {
  width: 100%;
  max-width: 100%;
  margin: 0.5rem 0 0;
  padding: 0;
  border: 0;
  overflow-wrap: anywhere;
}

.btfp-cart-item-option {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: start;
  line-height: 1.35;
}

.btfp-cart-item-option__label {
  font-weight: 600;
}

.btfp-cart-item-option__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options) {
  position: relative;
  padding: 0.5rem 2rem 0.5rem 0;
}

.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options):has(.preview-container-wrapper) {
  padding-left: 4.75rem;
}

.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options) > a:not(.remove),
.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options) .quantity,
.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options) .btfp-cart-item-options {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options) .preview-container-wrapper {
  position: absolute;
  top: 2.5rem;
  left: 0;
  width: 4rem;
  max-width: 4rem;
  overflow: visible !important;
  background: transparent;
}

.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options) .preview-container-wrapper > img {
  display: none;
}

.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options) .preview-container {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  overflow: visible !important;
}

.ast-site-header-cart .widget_shopping_cart .product_list_widget li:has(.btfp-cart-item-options) .preview-container img {
  position: static !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  margin: 0 !important;
}

.ast-site-header-cart .widget_shopping_cart a.remove svg {
  display: block !important;
  fill: var(--danger) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.woocommerce a.remove {
  color: var(--danger) !important;
}

/* 5. Draw the item counter notification pill bubble cleanly using absolute CSS rules */
i.ast-icon-shopping-bag::after {
  content: attr(data-cart-total) !important;
  position: absolute !important;
  top: -5px !important;
  right: -8px !important;
  background-color: var(--brand-bright-purple) !important;
  color: var(--hover-color-white-text) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 2px 5px !important;
  border-radius: var(--btfp-radius) !important;
  z-index: 99 !important;
  display: block !important;
}

/* Hide the notification counter entirely if the shopping bag is empty */
i.ast-icon-shopping-bag[data-cart-total="0"]::after {
  display: none !important;
}

/* Ensure Header Builder Settings Match

Once you save the CSS file, double-check one simple toggle configuration option inside your administration backend:

    Navigate to Appearance > Customize > Header Builder.
    Click on the Cart element box layout block at the bottom row area.
    In the setting panel on the left side, look under Icon Type.
    Ensure it is set to Bag or Cart (either option works perfectly, as our new combined selector script catches both layout hooks in the code above and hides them cleanly).
    Click Publish at the top right of your customizer dashboard workspace.*/

/**
 * 12. Header Logo & Tagline Optimization
 * Stacks the tagline below the logo cleanly and applies smart contextual contrast rules
 */

/* ==========================================================================
   PART A: STRUCTURAL STACKING & RESPONSIVENESS
   ========================================================================== */

/* 1. Force the title and tagline wrapper wrapper block to stack vertically */
.ast-site-identity,
.ast-logo-title-inline .ast-site-title-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0.1875rem !important;
}

/* 2. Style the tagline typography baseline */
.site-description {
  display: block !important;
  color: var(--brand-grey) !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.03125rem !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   PART B: AUTOMATIC CONTEXTUAL CONTRAST/COLORS
   ========================================================================== */

/* 1. When on the HOME PAGE (Transparent/Dark Header style context) */
.home.ast-theme-transparent-header .site-description {
  color: rgba(255, 255, 255, 0.75) !important; /* Soft, highly visible crisp off-white text */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important; /* Subtle shadow shield to pop over image backgrounds */
}

/* 2. When on INNER PAGES (Standard Light/White Header style context) */
body:not(.home) .site-description,
.ast-header-break-point .site-description {
  color: var(--brand-grey) !important; /* Smooth gray brand matching text color on white page spaces */
  text-shadow: none !important;
}

/* Keep ordinary Gutenberg content readable on the otherwise full-bleed template. */
body.page-template-page-btfp-fullwidth .entry-content > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, figure, .wp-block-columns) {
  width: min(calc(100% - 3rem), 75rem);
  margin-right: auto;
  margin-left: auto;
}

/* 3. Handle stickiness (If your Astra layout changes color when scrolling down) */
.ast-sticky-active .site-description {
  color: var(--brand-grey) !important;
  text-shadow: none !important;
}

/**
 * 13. Complianz Manage Consent Tab
 */
#cmplz-manage-consent .cmplz-manage-consent {
  animation: none !important;
  background-color: var(--btfp-brand-purple) !important;
  border-radius: 50% !important;
  bottom: 1rem !important;
  color: var(--hover-color-white-text) !important;
  height: 3rem !important;
  min-width: 3rem !important;
  padding: 0.75rem !important;
  right: 1rem !important;
  width: 3rem !important;
  box-shadow: var(--shadow-md) !important;
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    color 0.2s ease-in-out !important;
}

#cmplz-manage-consent .cmplz-manage-consent svg {
  display: block;
  fill: none;
  height: 1.5rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  width: 1.5rem;
}

#ast-scroll-top.ast-scroll-to-top-right {
  bottom: 4.75rem;
}

/* Keep persistent navigation out of the way while the visitor reads down the page. */
#masthead,
#ast-scroll-top {
  transition:
    opacity 0.2s ease-in-out,
    transform 0.2s ease-in-out,
    visibility 0.2s ease-in-out;
}

#ast-scroll-top {
  opacity: 0 !important;
  pointer-events: none;
  transform: translateY(1rem);
  visibility: hidden;
}

body.btfp-scroll-down #masthead {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  visibility: hidden;
}

body.btfp-scroll-up #masthead,
body.btfp-scroll-up #masthead:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

body.btfp-scroll-up #ast-scroll-top {
  opacity: 1 !important;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  #masthead,
  #ast-scroll-top {
    transition: none;
  }
}

#cmplz-manage-consent .cmplz-manage-consent:hover,
#cmplz-manage-consent .cmplz-manage-consent:focus-visible {
  background-color: var(--white) !important;
  color: var(--text-dark) !important;
}

.btfp-youtube-facade {
  aspect-ratio: 16 / 9;
  background: var(--text-dark);
  overflow: hidden;
  position: relative;
}

.btfp-youtube-facade__trigger {
  display: block;
  height: 100%;
  position: relative;
}

.btfp-youtube-facade__trigger img,
.btfp-youtube-facade > iframe {
  border: 0;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.btfp-youtube-facade__play {
  align-items: center;
  background: var(--brand-bright-purple);
  border-radius: 50%;
  color: var(--white);
  display: flex;
  height: 4rem;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
  width: 4rem;
}

.btfp-youtube-facade__play svg {
  fill: currentColor;
  height: 2rem;
  width: 2rem;
}

.btfp-youtube-facade__trigger:hover .btfp-youtube-facade__play,
.btfp-youtube-facade__trigger:focus-visible .btfp-youtube-facade__play {
  background: var(--brand-purple-dark);
  transform: translate(-50%, -50%) scale(1.08);
}

.btfp-youtube-facade__trigger:focus-visible {
  outline: 0.1875rem solid var(--brand-bright-purple);
  outline-offset: 0.1875rem;
}

@media (prefers-reduced-motion: reduce) {
  .btfp-youtube-facade__play {
    transition: none;
  }
}