/*
Theme Name: ePavilion
Author: Custom
Version: 1.0
Description: Custom WooCommerce Theme for ePavilion
*/

:root {
    --brand-color: #7D116C;
    --brand-hover: #5e0c51;
    --brand-light: #f8f0f7;
}

/* Utility Classes using Brand Color */
.text-brand { color: var(--brand-color) !important; }
.bg-brand { background-color: var(--brand-color) !important; }
.border-brand { border-color: var(--brand-color) !important; }

/* Buttons */
.btn-brand {
    background-color: var(--brand-color);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
}
.btn-brand:hover {
    background-color: var(--brand-hover);
    color: #fff;
}
.btn-outline-brand {
    color: var(--brand-color);
    border-color: var(--brand-color);
}
.btn-outline-brand:hover {
    background-color: var(--brand-color);
    color: #fff;
}

/* Categories Sidebar & Cards */
.category-list .list-group-item.active {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.category-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(125, 17, 108, 0.15);
}

/* Product Cards */
.product-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.product-card .badge-sale {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--brand-color);
    z-index: 2;
}

/* Hero Banner */
.hero-banner {
    background: linear-gradient(135deg, var(--brand-color) 0%, #4a0a40 100%);
    color: white;
    border-radius: 12px;
}