/* Dynamic Primary Color */
:root {
    --c-primary: #ff0505;
    --c-primary-dark: #D10404;
    --c-primary-rgb: 255,5,5;
    --c-primary-light: rgba(255,5,5, .08);
}

/* ===== PRIMARY BG elements — hover goes DARKER ===== */
.btn-primary {
    background-color: #ff0505 !important;
    color: #fff !important;
}
.btn-primary:hover {
    background-color: #D10404 !important;
    color: #fff !important;
}

.category-header {
    background-color: #ff0505 !important;
}
.category-header,
.category-header:hover,
.category-header:hover span,
.category-header:hover svg {
    color: #fff !important;
}
.category-header:hover {
    background-color: #D10404 !important;
}

.menu-top-area {
    background-color: #ff0505;
}

.step.active .step-num,
.wa-float,
.scroll-to-top-btn,
.countdown-alt span,
.product-thumb .product-badge.bg-primary,
.p-badge-sale {
    background-color: #ff0505 !important;
}

.wa-float:hover {
    background-color: #D10404 !important;
}

.scroll-to-top-btn:hover {
    background-color: #D10404 !important;
}

/* Search button */
.search-box .input-group-btn button:hover {
    color: #ff0505 !important;
}

/* Owl carousel nav — white bg, hover goes primary bg */
.owl-carousel .owl-prev:hover,
.owl-carousel .owl-next:hover {
    background-color: #ff0505 !important;
    color: #fff !important;
}

/* ===== SECONDARY/WHITE BG elements — hover goes PRIMARY ===== */

/* ===== WHITE/LIGHT BG links — hover turns primary ===== */
/* Only target specific safe areas instead of blanket a:hover */
.site-footer a:not(.footer-social-links a):hover,
.t-h-dropdown .t-h-dropdown-menu a:hover,
.product-card-body a:hover,
.product-title a:hover,
.breadcrumb a:hover,
.co-section a:hover {
    color: #ff0505;
}

/* ===== PRIMARY BG links — stay white, subtle fade on hover ===== */
.menu-top-area a,
.menu-top-area a:hover,
.menu-top-area .right-area a,
.menu-top-area .right-area a:hover {
    color: #fff !important;
}
.menu-top-area a:hover {
    opacity: .75;
}

/* Nav menu links (dark text → hover primary) */
.site-menu ul li a:hover,
.site-menu ul li.active a {
    color: #ff0505 !important;
    border-bottom-color: #ff0505 !important;
}

/* Toolbar icons (dark → hover primary) */
.toolbar-item > a:hover {
    color: #ff0505 !important;
}

/* Mobile menu links */
.slideable-menu ul li a:hover {
    color: #ff0505 !important;
}

/* Category sidebar links */
.category-list .navi-link:hover {
    color: #ff0505 !important;
}

/* Footer links */
.site-footer a:hover {
    color: #ff0505 !important;
}
.site-footer .footer-social-links a:hover {
    border-color: #ff0505 !important;
    color: #ff0505 !important;
}

/* Section title links */
.section-title .links a.active,
.section-title .right_link {
    color: #ff0505 !important;
}
.section-title .links a:hover,
.section-title .links a.active {
    background: rgba(255,5,5, .08);
}

/* Steps */
.step.active {
    color: #ff0505;
}

/* Mobile menu tabs */
.mm-tabs span.active {
    color: #ff0505 !important;
    border-bottom-color: #ff0505 !important;
}

/* Product card: product title hover → go to primary (not faded) */
.product-card:hover .product-title a {
    color: #ff0505 !important;
}

/* Product price is always primary */
.product-price {
    color: #ff0505 !important;
}

/* Rating stars */
.rating-stars .filled {
    color: #ff0505;
}

/* Product action buttons (primary bg → hover darker) */
.product-button {
    background: #ff0505;
    color: #fff;
}
.product-button:hover {
    background-color: #D10404 !important;
    color: #fff !important;
}

/* ===== BORDERS ===== */
.product-card:hover {
    border-color: #ff0505 !important;
}
.bannner-section .genius-banner:hover {
    border-color: #ff0505 !important;
}
.sf-input:focus {
    border-color: #ff0505 !important;
}
.step.active .step-num {
    border-color: #ff0505 !important;
}
.site-footer .widget-title::after {
    background-color: #ff0505;
}
.t-h-dropdown .t-h-dropdown-menu {
    border-top-color: #ff0505 !important;
}

/* ===== ACCENT backgrounds ===== */
.toolbar-item .count-label,
.owl-carousel .owl-dot.active {
    background-color: #ff0505;
}

/* ===== FORM / CHECKOUT ===== */
.co-pay:has(input:checked) {
    border-color: #ff0505 !important;
    background: rgba(255,5,5, .04);
}
.co-pay input {
    accent-color: #ff0505;
}

/* ===== OUTLINE BUTTON — white bg, hover → primary bg ===== */
.btn-outline:hover {
    background-color: #ff0505 !important;
    border-color: #ff0505 !important;
    color: #fff !important;
}