/*
|--------------------------------------------------------------------------
| Elite Branding Skin — Multi-Niche Edition (DEEP TRANSFORMATION)
|--------------------------------------------------------------------------
*/

:root {
    /* These are injected by BrandService */
    --brand-color-primary: #1a1a1a;
    --brand-color-accent: #c5a059;
    --brand-color-background: #ffffff;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --ui-radius-md: 0px;
}

/* 1. GLOBAL OVERRIDES */
body {
    font-family: var(--font-body) !important;
    background-color: var(--brand-color-background) !important;
    color: var(--brand-color-text) !important;
    line-height: 1.8;
    border: 20px solid var(--brand-color-primary) !important; /* UNDENIABLE BORDER */
}

h1, h2, h3, h4, h5, h6, .sitename, .logo h1 {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
}

/* 2. LOGO TRANSFORMATION */
.logo h1 {
    font-size: 2.5rem !important;
    color: var(--brand-color-primary) !important;
}

.logo h1 span {
    color: var(--brand-color-accent) !important;
}

/* 3. BUTTONS (Targeting actual classes) */
.btn-primary, .btn-search, .btn-shop, .add-to-cart-btn {
    background-color: var(--brand-color-primary) !important;
    border: none !important;
    color: white !important;
    border-radius: var(--ui-radius-md) !important; /* 0px for Fashion */
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 700;
    padding: 0.8rem 2rem !important;
}

.btn-primary:hover, .btn-search:hover {
    background-color: var(--brand-color-accent) !important;
    color: white !important;
}

/* 4. CARDS */
.product-card, .card {
    border-radius: 0 !important;
    border: 1px solid #eee !important;
    box-shadow: none !important;
    transition: all 0.4s ease;
}

.product-card:hover {
    border-color: var(--brand-color-accent) !important;
    transform: translateY(-5px);
}

/* 5. HERO */
.slide-content h1 {
    font-size: 3.5rem !important;
}

/* 6. SEARCH BAR */
.search-form input {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
}

/* 7. BADGES */
.badge, .action-badge {
    border-radius: 0 !important;
    background-color: var(--brand-color-accent) !important;
    text-transform: uppercase;
    font-weight: 700;
}