:root {
    --primary-color: #8B2FA0;
    --primary-dark: #6A1B7A;
    --magenta: #E91E8A;
    --lime: #8B2FA0;
    --green: #25D366;
    --teal: #0EA5E9;
    --text-color: #1A1625;
    --muted-text: #5C5666;
    --page-bg: #FFFFFF;
    --white: #FFFFFF;
    --border-color: #E8E4EE;
    --primary-hover: #E91E8A;
    --magenta-hover: #C21875;
    --primary-soft: #F7EEF9;
    --hover-text: #E91E8A;
}

html,
body {
    background-color: var(--page-bg);
    color: var(--text-color);
}

/* Do not recolor every link on hover — that hid text on purple bars */
a.bg-yellow-1:hover,
button.bg-yellow-1:hover,
.btn-add-to-cart:hover,
.add-to-cart:hover,
.primary-btn:hover,
.cm-float-contact a:hover {
    color: var(--white) !important;
}

a.first-list:hover,
a.header-nav-link:hover,
.header a.first-list:hover,
.header .custom-bottom-border:hover,
.header-menu-nav a:hover,
.cool-link:hover,
footer a:hover,
footer .hover\:text-orange-500:hover,
.hover\:text-orange-500:hover {
    color: var(--hover-text) !important;
}

.bg-yellow-1 {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}
.text-yellow-1,
.fill-yellow-1 {
    color: var(--primary-color) !important;
    fill: var(--primary-color) !important;
}
.hover\:bg-yellow-1:hover {
    background-color: var(--primary-hover) !important;
    color: var(--white) !important;
}
.bg-yellow-4,
.bg-yellow-5 {
    background-color: var(--primary-soft) !important;
}

.bg-green-1,
.bg-green-3,
.bg-green-4,
.bg-green-5 {
    background-color: var(--green) !important;
}
.text-green-1,
.text-green-3,
.text-green-4,
.text-green-5 {
    color: var(--green) !important;
}

.border-gray-2,
.border-gray-6 {
    border-color: var(--border-color) !important;
}
.text-gray-1,
.text-gray-10,
.text-gray-13,
.text-gray-7,
.text-gray-18 {
    color: var(--muted-text) !important;
}
.text-gray-12,
.text-gray-3,
.text-black-1 {
    color: var(--text-color) !important;
}
.bg-gray-11,
.bg-gray-20,
.bg-gray-17 {
    background-color: #F8F7FA !important;
}

.bg-reds-5,
.text-reds-5 {
    background-color: var(--magenta);
}
.text-reds-5 {
    background-color: transparent;
    color: var(--magenta) !important;
}

.border-yellow,
.border-color-yellow {
    border-color: var(--primary-color) !important;
}

button.bg-yellow-1,
a.bg-yellow-1,
.btn-add-to-cart,
.add-to-cart,
.primary-btn {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
    border-color: var(--primary-color) !important;
}

button.bg-yellow-1:hover,
a.bg-yellow-1:hover {
    background-color: var(--primary-hover) !important;
}

.swiper-pagination-bullet-active,
.slick-dots li.slick-active button {
    background: var(--magenta) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.15rem var(--semi-primary-color) !important;
}

::selection {
    background: var(--magenta);
    color: var(--white);
}

img.brand-logo,
img.header-brand-logo {
    background: transparent !important;
    border-radius: 0;
    padding: 0;
    object-fit: contain;
    box-shadow: none;
}

.primary-bg-hover:hover,
.primary-bg-hover:hover a,
.primary-bg-hover:hover span,
.primary-bg-hover:hover .text-one,
.category-hover:hover,
.category-hover:hover span {
    background-color: var(--primary-color) !important;
    color: var(--white) !important;
}

.primary-bg-color,
.primary-bg-color a,
.primary-bg-color span {
    color: var(--white) !important;
}

.cm-float-contact {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cm-float-contact a {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(26, 22, 37, 0.22);
}
.cm-float-contact a:first-child { background: #25D366; }
.cm-float-contact a:last-child { background: #8B2FA0; }
.cm-float-contact a:hover { opacity: .92; color: #fff !important; }

.jnova-credit a { color: #E91E8A; }