:root {
    /*
     * Global Theme Color Configuration
     * Change these variables to update the entire site's color scheme.
     */
    --theme-color: #0d6efd;          /* Main Blue Color */
    --theme-color-rgb: 13, 110, 253;  /* Main Blue RGB */

    --theme-color-hover: #0b5ed7;    /* Darker shade for hover */
    --theme-color-active: #0a58ca;   /* Even darker for active state */

    --theme-color-light: rgba(13, 110, 253, 0.1); /* Light background for soft tags */

    /* Bootstrap Variable Overrides */
    --bs-primary: var(--theme-color);
    --bs-primary-rgb: var(--theme-color-rgb);

    --bs-link-color: var(--theme-color);
    --bs-link-hover-color: var(--theme-color-hover);

    /* Override purple variable used in contact icons and specific links */
    --bs-link-hover-light-color: var(--theme-color);

    --bs-btn-bg: var(--theme-color);
    --bs-btn-border-color: var(--theme-color);
    --bs-btn-hover-bg: var(--theme-color-hover);
    --bs-btn-hover-border-color: var(--theme-color-active);
    --bs-btn-active-bg: var(--theme-color-active);
    --bs-btn-active-border-color: var(--theme-color-active);

    /* Focus Ring */
    --bs-focus-border: var(--theme-color);
    --bs-focus-shadow-rgb: var(--theme-color-rgb);
}

/* =========================================
   Global Elements
   ========================================= */

/* Selection Highlight */
::selection {
    background-color: var(--theme-color);
    color: #fff;
}

/* Links */
a {
    color: var(--theme-color);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--theme-color-hover);
}

/* =========================================
   Bootstrap Component Overrides
   ========================================= */

/* Buttons */
.btn-primary {
    background-color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--theme-color-hover) !important;
    border-color: var(--theme-color-active) !important;
}

.btn-outline-primary {
    color: var(--theme-color) !important;
    border-color: var(--theme-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--theme-color-hover) !important;
    border-color: var(--theme-color-hover) !important;
    color: #fff !important;
}
.btn-outline-primary:active,
.btn-outline-primary.active {
    background-color: var(--theme-color-active) !important;
    border-color: var(--theme-color-active) !important;
    color: #fff !important;
}

/* Force override of Bootstrap variables defined in theme style.css */
.btn-outline-primary {
    --bs-btn-color: var(--theme-color) !important;
    --bs-btn-border-color: var(--theme-color) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: var(--theme-color-hover) !important;
    --bs-btn-hover-border-color: var(--theme-color-hover) !important;
    --bs-btn-focus-shadow-rgb: var(--theme-color-rgb) !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: var(--theme-color-active) !important;
    --bs-btn-active-border-color: var(--theme-color-active) !important;
    --bs-btn-disabled-color: rgba(var(--theme-color-rgb), 0.55) !important;
    --bs-btn-disabled-border-color: rgba(var(--theme-color-rgb), 0.55) !important;
}

/* =========================================
   Additional Fixes (Pagination, Product Hover, Borders)
   ========================================= */

/* Product List Item - Side Gradients on Hover */
.product-item::before {
    background: linear-gradient(to right, var(--theme-color) 0, rgba(13, 110, 253, 0) 11%, rgba(13, 110, 253, 0) 90%, var(--theme-color) 100%) !important;
    background: -webkit-linear-gradient(left, var(--theme-color) 0, rgba(13, 110, 253, 0) 11%, rgba(13, 110, 253, 0) 90%, var(--theme-color) 100%) !important;
    background: -moz-linear-gradient(left, var(--theme-color) 0, rgba(13, 110, 253, 0) 11%, rgba(13, 110, 253, 0) 90%, var(--theme-color) 100%) !important;
}

/* Pagination - Generic & Card Context */
.pagination,
.card .pagination {
    --bs-pagination-color: var(--theme-color) !important;
    --bs-pagination-border-color: var(--theme-color) !important;
    --bs-pagination-hover-bg: var(--theme-color-hover) !important;
    --bs-pagination-hover-border-color: var(--theme-color-hover) !important;
    --bs-pagination-active-bg: var(--theme-color) !important;
    --bs-pagination-active-border-color: var(--theme-color) !important;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(13, 110, 253, 0.25) !important;
}

.pagination .page-link,
.card .pagination .page-link {
    color: var(--bs-pagination-color);
}

.pagination .page-item.active .page-link,
.card .pagination .page-item.active .page-link {
    background-color: var(--bs-pagination-active-bg) !important;
    border-color: var(--bs-pagination-active-border-color) !important;
    color: #fff !important;
}

/* Buy Button Border */
.btn-buy,
.product-item__btn {
    border-color: var(--theme-color) !important;
    --bs-btn-border-color: var(--theme-color) !important;
}
.btn-buy:hover,
.product-item__btn:hover {
    border-color: var(--theme-color-hover) !important;
    --bs-btn-border-color: var(--theme-color-hover) !important;
}

/* Form Controls Focus - Purple Override */
.form-control:focus,
.form-select:focus {
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2) !important;
}

/* Dropdown Menu Items */
.dropdown-menu {
    --bs-dropdown-link-hover-color: var(--theme-color) !important;
}

/* Alert Primary */
.alert-primary {
    --bs-alert-color: var(--theme-color) !important;
    --bs-alert-bg: rgba(13, 110, 253, 0.1) !important;
    --bs-alert-border-color: rgba(13, 110, 253, 0.2) !important;
}

/* Payment Selection (Grid & List) */
.payments-grid__input:checked + .payments-grid__button-bg,
.payments-list__input:checked + .payments-list__button-bg {
    border-color: var(--theme-color) !important;
}

.payments-list__button:hover .payments-list__button-bg,
.payments-grid__button:hover .payments-grid__button-bg {
    border-color: rgba(13, 110, 253, 0.5) !important;
}



/* =========================================
   Specific Theme Overrides (Fixing Purple Hardcodes)
   ========================================= */

/* Buy Button - Override Gradient */
.btn-buy,
.product-item__btn {
    background: var(--theme-color) !important;
    background-color: var(--theme-color) !important; /* Force solid color */
    color: #fff !important;
    overflow: hidden;
}

.btn-buy::after {
    display: none !important; /* Hide the purple gradient overlay */
}

.btn-buy:hover,
.product-item__btn:hover {
    background-color: var(--theme-color-hover) !important;
}

/* Category Navigation (Header) */
.header__nav-list .nav-link--categories {
    color: var(--theme-color) !important;
    background-color: rgba(13, 110, 253, 0.08) !important; /* Light blue bg */
}

.header__nav-list .nav-link--categories::after {
    border-color: rgba(13, 110, 253, 0.5) !important; /* Blue border */
}

.header__nav-list .nav-link--categories:hover {
    background-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Mobile Category Navigation */
.mobile-side-fly__nav-list .nav-link--categories {
    color: var(--theme-color) !important;
    background-color: rgba(13, 110, 253, 0.08) !important;
}

.mobile-side-fly__nav-list .nav-link--categories::after {
    border-color: rgba(13, 110, 253, 0.5) !important;
}

.mobile-side-fly__nav-list .nav-link--categories:hover {
    background-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Contact Email & Links */
.box-contacts__link {
    color: var(--theme-color) !important;
}

.box-contacts__link:hover {
    color: var(--theme-color-hover) !important;
}

/* Fix dashed border in cart control */
.control-buy__cart .form-control {
    border-color: var(--theme-color) !important;
}

/* Logo Pulse Animation (Purple Circle) */
.header__logo-radius {
    background: var(--theme-color) !important;
}

@keyframes anim-logo-radius-pulse-blue {
    0% { box-shadow: 0 0 0 14px rgba(13, 110, 253, 0.17); }
    50% { box-shadow: 0 0 0 10px rgba(13, 110, 253, 0.17); }
    100% { box-shadow: 0 0 0 14px rgba(13, 110, 253, 0.17); }
}

.header__logo-radius {
    animation-name: anim-logo-radius-pulse-blue !important;
}

/* Alerts */
.alert-primary {
    color: var(--theme-color) !important;
    background-color: rgba(13, 110, 253, 0.1) !important;
    border-color: rgba(13, 110, 253, 0.2) !important;
}

/* Badges */
.badge-primary {
    background-color: var(--theme-color) !important;
    color: #fff !important;
}

/* Additional global theming overrides */
.form-check input {
    accent-color: var(--theme-color) !important;
}

.entities-grid__custom-scroll-thumb {
    background-color: var(--theme-color) !important;
}

.badge-outline-primary {
    border-color: var(--theme-color) !important;
    color: var(--theme-color) !important;
}

:root {
    --bs-panel-bg: #0b1220;
    --bs-panel-color: #fff;
}

.header__inner--nav::before {
    background: rgba(var(--theme-color-rgb), 0.2) !important;
}

.footer__line {
    border-top-color: var(--bs-panel-bg) !important;
}

.account-shop__btn-counter {
    background-color: var(--theme-color-light) !important;
    box-shadow: inset 0 0 0 1px rgba(var(--theme-color-rgb), 0.6) !important;
}

.card .card .card-header {
    background-color: rgba(var(--theme-color-rgb), 0.04) !important;
}

@media all and (max-width:800px){
    .product-item__left{
        flex-direction: column !important;
        align-items: center !important;
    }
    .product-item__title{
        text-align: center !important;
        width: 100% !important;
    }
}

.product-item__desc{
    font-size: 14px;
    line-height: 1.6;
    color: #6c757d;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.6em * 2);
    margin-top: 6px;
}

@media all and (max-width:800px){
    .product-item__desc{
        text-align: center;
        width: 100%;
        margin-top: 4px;
    }
}