:root {
    --bdc-sage: #8A9A86;
    --bdc-sage-dark: #6B7B67;
    --bdc-cream: #FDFBF7;
    --bdc-purple: #7E57C2;
    --bdc-dark: #2C3E35;
}

.sf-custom-component-wrapper {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--bdc-cream);
    color: var(--bdc-dark);
    opacity: 1 !important;
    visibility: visible !important;
}

/* Buttons */
.sf-custom-component-wrapper .bdc-btn-whatsapp {
    background-color: #25D366;
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}

.sf-custom-component-wrapper .bdc-btn-whatsapp:hover {
    background-color: #1DA851;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.3);
}

.sf-custom-component-wrapper .bdc-btn-primary {
    background-color: var(--bdc-sage);
    color: #ffffff;
    border: none;
    transition: all 0.3s ease;
}

.sf-custom-component-wrapper .bdc-btn-primary:hover {
    background-color: var(--bdc-sage-dark);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Filter Buttons */
.sf-custom-component-wrapper .bdc-filter-btn {
    background-color: #ffffff;
    color: var(--bdc-dark);
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.sf-custom-component-wrapper .bdc-filter-btn.active,
.sf-custom-component-wrapper .bdc-filter-btn:hover {
    background-color: var(--bdc-sage);
    color: #ffffff;
    border-color: var(--bdc-sage);
}

/* Hero Header */
.sf-custom-component-wrapper .bdc-sd-hero {
    min-height: 50vh;
    background: url('https://images.unsplash.com/photo-1527061011665-3652c757a4d4?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
}

.sf-custom-component-wrapper .bdc-sd-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(44, 62, 53, 0.8) 0%, rgba(126, 87, 194, 0.5) 100%);
}

.sf-custom-component-wrapper .bdc-sd-badge {
    background-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Product Cards */
.sf-custom-component-wrapper .bdc-sd-card {
    transition: all 0.3s ease;
}

.sf-custom-component-wrapper .bdc-sd-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.sf-custom-component-wrapper .bdc-sd-img {
    height: 280px;
    object-fit: cover;
}

/* CTA Banner */
.sf-custom-component-wrapper .bdc-sd-cta {
    background: linear-gradient(135deg, var(--bdc-sage) 0%, var(--bdc-purple) 100%);
}