/*
 * custompage.css — Custom Page Builder Frontend Overrides
 * =========================================================
 * Loaded AFTER styles.css to selectively override default styles.
 * Use this file for CPB-specific customizations (e.g., dynamic colors
 * driven by admin-configured CSS custom properties like --pb-tab-color).
 *
 * DO NOT edit styles.css for CPB-driven overrides — add them here instead
 * to keep the risk of unintended side-effects contained.
 */

/* ========================================================================
  Product Tabs: --pb-tab-color support
   When the product-tabs element has a custom tabColor configured in admin,
  HtmlRendererService sets --pb-tab-color as an inline CSS variable on the
   container and each nav-link button. The rules below ensure that variable
   is actually applied instead of the hardcoded --troy-red default.
   ======================================================================== */

/* Active tab button background */
.product-tabs .nav-link.active {
  background-color: var(--pb-tab-color, var(--troy-red));
}

/* Active tab arrow indicator */
.product-tabs .nav-link.active::after {
  border-top-color: var(--pb-tab-color, var(--troy-red));
}

/* Product card accent line (inside product-tabs context) */
.product-tabs-content .product-card-line {
  background-color: var(--pb-tab-color, var(--troy-red));
}

/* Featured product card divider (inside product-tabs context) */
.product-tabs-content .product-card-featured-divider {
  background-color: var(--pb-tab-color, var(--troy-red));
}

/* ========================================================================
   Add further CPB-specific overrides below as needed.
   ======================================================================== */

/* ========================================================================
   Hero Banner: Swiper navigation & pagination colors
   ======================================================================== */

/* Pagination dots */
.hero-swiper .swiper-pagination-bullet-active {
  background-color: var(--troy-red);
}

.hero-swiper .swiper-pagination-bullet {
  opacity: 0.5;
  background-color: var(--troy-red);
}

/* Navigation arrows */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  color: var(--troy-red);
}