
/* ========================================
   DYNAMIC COLOR STYLES FOR GLOBAL PRODUCT
   Auto-generated colors based on theme
======================================== */

:root {
    --header-color: #007bff !important;
    --header-color-15: rgba(0, 123, 255, 0.15) !important;
    --header-color-22: rgba(0, 123, 255, 0.22) !important;
    --header-color-dd: rgba(0, 123, 255, 0.87) !important;
    --header-color-44: rgba(0, 123, 255, 0.27) !important;
    --header-color-11: rgba(0, 123, 255, 0.07) !important;
}

/* Dynamic color overrides for specific elements */
.product-price {
    color: #007bff !important;
}

.info-value a {
    color: #007bff !important;
}

.info-value a::after {
    background: #007bff !important;
}

.variants-title {
    border-bottom-color: #007bff !important;
}

.attribute-option:hover,
.attribute-option.active {
    border-color: #007bff !important;
    background: rgba(0, 123, 255, 0.08) !important;
}

.attribute-option:hover .option-text {
    color: #007bff !important;
}

.attribute-option:hover .option-color {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3) !important;
}

.modern-btn-outline {
    color: #007bff !important;
    border-color: #007bff !important;
}

.modern-btn-outline::before {
    background: #007bff !important;
}

.modern-btn-outline:hover {
    border-color: #007bff !important;
}

.modern-btn-filled {
    background: #007bff !important;
    border-color: #007bff !important;
}

.modern-btn-filled:hover {
    background: rgba(0, 123, 255, 0.87) !important;
    border-color: rgba(0, 123, 255, 0.87) !important;
}

.secondary-actions .btn::after {
    background: rgba(0, 123, 255, 0.13) !important;
}

.secondary-actions .btn-outline-secondary:hover {
    background: rgba(0, 123, 255, 0.08) !important;
    border-color: #007bff !important;
    color: #007bff !important;
}

.secondary-actions .btn.active {
    background: #007bff !important;
    border-color: #007bff !important;
}

.secondary-actions .btn.active:hover {
    background: rgba(0, 123, 255, 0.87) !important;
}

.quick-view-footer .btn-link {
    color: #007bff !important;
}

.quick-view-footer .btn-link::before {
    background: rgba(0, 123, 255, 0.08) !important;
}

.quick-view-footer .btn-link:hover {
    color: #007bff !important;
}

.attribute-value:hover {
    border-color: #007bff !important;
    background: rgba(0, 123, 255, 0.07) !important;
}

.attribute-value.active {
    border-color: #007bff !important;
    background: rgba(0, 123, 255, 0.13) !important;
}
