
/* ========================================
   DYNAMIC STYLES FROM CUSTOMIZATION
   Generated: 2025-12-11 20:29:05   ======================================== */

:root {
    --primary-color: #7d8fb5;
    --primary-hover-color: #0d9488;
    --secondary-color: #6b7280;
    --background-color: #4d2a96;
    --card-background: #1e293b;
    --text-color: #cbd5e1;
    --heading-color: #838484;
    --link-color: #14b8a6;
    --button-text-color: #ffffff;
    --button-background: #4960b5;
    --button-hover-background: #0d9488;
    --font-family: 'Trebuchet MS', sans-serif;
    --heading-font-size: 2.5em;
    --body-font-size: 16px;
    --card-spacing: 20px;
    --section-padding: 30px;
    --border-radius: 15px;
    --max-width: 1200px;
    --card-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

/* Global Styles */
body {
    font-family: var(--font-family) !important;
    background: var(--background-color) !important;
    color: var(--text-color) !important;
    font-size: var(--body-font-size) !important;
}

/* Headers */
.header {
    background: #feffff !important;
}

.header h1 {
    color: var(--heading-color) !important;
    font-size: var(--heading-font-size) !important;
}

.header p {
    color: var(--text-color) !important;
}

/* Container */
.container {
    max-width: var(--max-width) !important;
}

/* Cards */
.product-card {
    background: var(--card-background) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow) !important;
}

.product-grid {
    gap: var(--card-spacing) !important;
}

/* Buttons */
.btn-comprar,
.search-box button,
button[type="submit"] {
    background: var(--button-background) !important;
    color: var(--button-text-color) !important;
    border-radius: var(--border-radius) !important;
}

.btn-comprar:hover,
.search-box button:hover,
button[type="submit"]:hover {
    background: var(--button-hover-background) !important;
}

/* Links */
a {
    color: var(--link-color) !important;
}

a:hover {
    color: var(--primary-hover-color) !important;
}

/* Search Container */
.search-container {
    background: rgba(255,255,255,0.05) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--section-padding) !important;
}

/* Filter Buttons */
.filter-btn {
    background: rgba(20, 184, 166, 0.2) !important;
    border: 2px solid var(--primary-color) !important;
    color: var(--text-color) !important;
    border-radius: var(--border-radius) !important;
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--primary-color) !important;
    color: var(--button-text-color) !important;
}

/* Product Details */
.product-name {
    color: var(--heading-color) !important;
}

.product-brand {
    color: var(--secondary-color) !important;
}

.product-description {
    color: var(--text-color) !important;
}

/* Rating Stars */
.stars {
    color: var(--primary-color) !important;
}

/* Sections */
section {
    padding: var(--section-padding) !important;
}

/* Input Fields */
input[type="text"],
input[type="email"],
textarea,
select {
    background: rgba(255,255,255,0.1) !important;
    border: 2px solid rgba(20, 184, 166, 0.3) !important;
    color: var(--text-color) !important;
    border-radius: var(--border-radius) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary-color) !important;
}

/* Age Verification Modal */
.modal-content {
    background: var(--card-background) !important;
    border-radius: var(--border-radius) !important;
}

/* Review Cards */
.review-card {
    background: var(--card-background) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: var(--card-shadow) !important;
}

/* Price Tags */
.price {
    color: var(--primary-color) !important;
}

/* Badges */
.badge {
    background: var(--primary-color) !important;
    color: var(--button-text-color) !important;
    border-radius: calc(var(--border-radius) / 2) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color) !important;
    font-family: var(--font-family) !important;
}

h1 { font-size: var(--heading-font-size) !important; }
h2 { font-size: calc(var(--heading-font-size) * 0.8) !important; }
h3 { font-size: calc(var(--heading-font-size) * 0.6) !important; }

/* Footer */
.footer {
    background: rgba(0,0,0,0.3) !important;
    color: var(--text-color) !important;
    padding: var(--section-padding) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header h1 {
        font-size: calc(var(--heading-font-size) * 0.7) !important;
    }
    
    body {
        font-size: calc(var(--body-font-size) * 0.9) !important;
    }
}
