:root {
    --navy-banner: var(--brand-primary);
    --navy-light: var(--brand-primary-dark);
    --search-navy: var(--brand-primary);
    --futurohoy-azul: var(--brand-primary);
    --focus-ring-brand: rgba(163, 21, 44, 0.28);
    --focus-ring-strong-brand: rgba(163, 21, 44, 0.38);
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 163, 21, 44;
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-dark);
    --bs-nav-link-color: var(--brand-primary);
    --bs-nav-link-hover-color: var(--brand-primary-dark);
}

.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary-dark) !important;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.contact-input:focus {
    box-shadow: 0 0 0 0.25rem var(--focus-ring-brand) !important;
    border-color: var(--brand-primary) !important;
}

.form-check-input:checked,
.form-check-input:active {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

input[type="checkbox"],
input[type="radio"],
input[type="range"],
.filtros-switch {
    accent-color: var(--brand-primary);
}

.btn-futurohoy,
.btn-brand,
.btn-cart-header-login,
.btn-cart-header-logout,
.btn-cat-mobile,
.btn-cat-mobile.btn-cat-mobile-logo,
.btn-cat-mobile.btn-cat-mobile-panel,
.mobile-btn,
.blue-btn,
.custom-option-btn.active,
.color-option-btn.active,
.custom-option-btn.is-selected,
.filtros-switch:checked + .slider,
.filtro-col-slider input[type="range"]::-webkit-slider-thumb,
.filtro-col-slider input[type="range"]::-moz-range-thumb,
.filtro-col-slider input[type="range"]::-moz-range-progress,
.filtro-col-slider input[type="range"]::-ms-fill-lower,
.filtro-col-slider2 input[type="range"].slider2,
.page-item.active .page-link,
.add-to-cart-btn,
.swal2-confirm.swal2-styled {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.btn-cat-mobile:hover:enabled {
    background-color: var(--brand-primary-dark) !important;
}

.add-to-cart-btn:hover,
.swal2-confirm.swal2-styled:hover {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
    color: #fff !important;
}

.btn-cat-mobile:focus,
.btn-cat-mobile:active:focus {
    box-shadow: 0 0 0 0.25rem rgba(163, 21, 44, 0.35) !important;
}

.user-avatar-circle,
.resumen-orden-header,
.resumen-orden-card-header,
.main-header,
.card-title-header {
    background: var(--brand-gradient-main) !important;
    color: #fff !important;
}

.drawer-total,
.drawer-product-price {
    color: var(--brand-primary) !important;
}

.btn-outline-brand,
.logout-btn,
.btn-account-header,
.btn-clear,
.page-link,
.page-link,
button.page-link,
.page-link:hover,
.page-link:focus,
.page-link:active,
.pagination .page-link,
.pagination .page-link:hover,
.text-brand,
.user-greeting,
.random-products-title,
.filtros-title,
.switch-label,
.switch-filtros-label,
.filtro-col-slider label,
.filtro-col-slider2 label,
.product-price,
.mega-cat-link,
.mega-subcat-link,
.categoria-btn,
.icon-btn i,
.sku-pill,
.aside-title,
.product-aside .discount-table.card .discount-table__title,
.product-aside .discount-table.card h5,
.product-aside .discount-table.card h6,
.discount-table__table thead th {
    color: var(--brand-primary) !important;
}

.btn-outline-brand,
.logout-btn,
.btn-account-header,
.btn-clear,
.mega-subcat-link:hover,
.mega-subcat-link:focus {
    border-color: var(--brand-primary) !important;
}

.btn-outline-brand:hover,
.logout-btn:hover,
.btn-account-header:hover,
.btn-clear:hover,
.mega-subcat-link:hover,
.mega-subcat-link:focus,
.categoria-btn.active,
.categoria-btn:hover,
.categoria-dropdown:hover .categoria-btn,
.mega-cat-link.active,
.mega-cat-link:hover {
    background: var(--brand-gradient-soft) !important;
    color: var(--brand-primary-dark) !important;
}

.btn-user-panel-header,
.btn-user-panel-header i {
    color: #fff !important;
}

.btn-user-panel-header:hover {
    background: var(--brand-primary-dark) !important;
    color: #fff !important;
}

.categoria-btn.active,
.categoria-btn:hover,
.categoria-dropdown:hover .categoria-btn,
.mega-cat-link.active,
.mega-cat-link:hover {
    border-color: transparent;
}

.cart-badge,
.favorite-badge,
.random-products-icon {
    background: var(--brand-accent) !important;
    color: var(--brand-primary-dark) !important;
}

.slider {
    background: #f5d7de;
}

.thumbnail-new.active-thumb,
.gallery-nav,
.thumb.active {
    border-color: var(--brand-primary) !important;
}

.thumbnail-nav-btn:hover {
    color: var(--brand-primary) !important;
}

.btn-search-header,
.suggest-see-all {
    background: var(--brand-gradient-main) !important;
    color: #fff !important;
    background-size: cover !important;
    background-position: center !important;
}

.btn-search-header:hover,
.suggest-see-all:hover {
    background: var(--brand-primary-dark) !important;
    border-left-color: var(--brand-primary-dark) !important;
    color: #fff !important;
}

.form-control-custom:focus,
.form-control-custom:focus-visible,
.form-input:focus,
.form-input:focus-visible {
    outline: 3px solid var(--brand-primary) !important;
    box-shadow: 0 0 0 0.2rem var(--focus-ring-strong-brand) !important;
}

.personalization-options button,
.sku-pill {
    background: var(--brand-primary-soft) !important;
}

.color-buttons-container button {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
}

.color-buttons-container button:hover,
.color-buttons-container button.active {
    background: var(--brand-primary-dark) !important;
    color: #fff !important;
    border-color: var(--brand-primary-dark) !important;
}

.page-link,
button.page-link,
.pagination .page-link {
    border-color: var(--brand-primary-muted) !important;
    background-color: #fff !important;
}

.dark-bold:hover,
.nav-item.dark-bold:hover,
.nav-link.dark-bold:hover {
    color: var(--brand-primary-dark) !important;
}
