@import url("/assets/css/style.css");

:root {
    --bg: #f8f5f6;
    --ink: #24161a;
    --accent: #b3263b;
    --accent-soft: #ebc3ca;
    --card: rgba(255, 255, 255, 0.84);
    --glass-border: rgba(120, 45, 57, 0.16);
    --glass-shadow: 0 24px 60px rgba(95, 27, 40, 0.18);
    --detail-title-color: #2b171d;
    --detail-muted-color: #6d5960;
    --detail-text-color: #412830;
    --detail-strong-color: #8f1f32;
    --detail-label-color: #53353d;
    --detail-field-bg: rgba(255, 255, 255, 0.94);
    --detail-field-border: rgba(128, 52, 65, 0.18);
    --detail-field-text: #24161a;
}

body {
    background:
        radial-gradient(circle at top right, rgba(179, 38, 59, 0.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(84, 32, 48, 0.12), transparent 32%),
        linear-gradient(135deg, #f6f0f1 0%, #f3ecee 34%, #f9f7f8 100%);
}

body::before,
body::after {
    background: radial-gradient(circle, rgba(132, 29, 49, 0.22) 0%, rgba(132, 29, 49, 0) 70%);
}

.site-header {
    background: linear-gradient(135deg, #7b1f31 0%, #9f2238 52%, #c1374d 100%);
    border-bottom-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 34px rgba(65, 17, 30, 0.28);
}

.site-header {
    background: linear-gradient(135deg, #7b1f31 0%, #9f2238 52%, #c1374d 100%) !important;
}

.logo-kom,
.main-nav a,
.lang-switch,
.menu-toggle span {
    color: #fff7f8;
}

.menu-toggle {
    border-color: rgba(255, 240, 242, 0.24);
    background: rgba(255, 255, 255, 0.1);
}

.header-search-input {
    border-bottom-color: rgba(255, 241, 243, 0.58);
}

.header-search-btn,
.header-cart-link,
.logo {
    color: #fff9fa;
}

.header-cart-badge {
    background: #f4c542;
    border-color: rgba(123, 31, 49, 0.95);
}

.hero {
    background:
        radial-gradient(circle at top, rgba(179, 38, 59, 0.18), rgba(255, 255, 255, 0.78)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.74) 0%, rgba(241, 222, 226, 0.9) 100%);
    border-bottom-color: rgba(120, 45, 57, 0.12);
}

.hero.hero-inline,
.home-search-section {
    background:
        radial-gradient(circle at top, rgba(179, 38, 59, 0.18), rgba(255, 255, 255, 0.78)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.74) 0%, rgba(241, 222, 226, 0.9) 100%) !important;
}

.slider-section {
    background: linear-gradient(180deg, rgba(124, 32, 49, 0.14) 0%, rgba(255, 255, 255, 0.08) 100%) !important;
}

.brand-strip-section {
    background: linear-gradient(180deg, rgba(96, 35, 49, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
}

.products-section,
.products-section-latest {
    background: transparent !important;
}

.features-section {
    background: linear-gradient(180deg, rgba(86, 34, 46, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
}

.hero-card,
.card,
.home-search-form,
.home-search-results,
.panel,
.checkout-card,
.summary-card {
    border-color: rgba(120, 45, 57, 0.14);
    box-shadow: 0 24px 60px rgba(95, 27, 40, 0.12);
}

.slider,
.card {
    box-shadow: 0 24px 60px rgba(95, 27, 40, 0.14);
}

.card:hover {
    box-shadow: 0 30px 80px rgba(95, 27, 40, 0.18);
}

.home-search-btn,
.btn.primary,
button.primary,
.hero-card .btn,
.summary-card .btn.primary {
    background: linear-gradient(135deg, #8f1f32 0%, #b3263b 58%, #d14357 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(143, 31, 50, 0.22);
}

.btn,
button,
input[type="submit"],
input[type="button"] {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    transform: translateY(-1px);
}

.btn:not(.primary) {
    border-color: rgba(120, 45, 57, 0.16);
}

.slider-nav {
    background: rgba(77, 27, 39, 0.34);
    border-color: rgba(255, 244, 246, 0.22);
}

.slider-nav:hover {
    background: rgba(77, 27, 39, 0.52);
}

.slide-caption {
    background: rgba(50, 20, 29, 0.74);
}

.product-grid .card-price,
.related-product-grid .card-price,
.latest-products-row .card-body .card-price,
.price,
.product-price,
.card-price {
    color: #8f1f32;
}

.card .placeholder {
    color: #5b2f39;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(238, 218, 223, 0.86) 100%);
}

input,
select,
textarea {
    border-color: rgba(120, 45, 57, 0.16);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(179, 38, 59, 0.12);
}

.section-title,
.products-section h2,
.categories-section h2,
.brands-section h2,
.page-header h1,
.hero h1 {
    color: #2a171d;
}

.summary-note,
.muted,
small,
.card-body p {
    color: #705f65;
}

.status-badge.ok,
.badge-success {
    background: #efe1e4;
    color: #8f1f32;
}

.status-badge.warn,
.badge-warning {
    background: #f3e7e2;
    color: #8b4b34;
}

.status-badge,
.badge {
    border-radius: 999px;
}

.footer,
footer.site-footer {
    background: linear-gradient(180deg, #35272b 0%, #241a1d 100%);
    color: #c8bcc0;
}

.footer a,
footer.site-footer a {
    color: #b8adb1;
}

.footer p,
.footer small,
footer.site-footer p,
footer.site-footer small {
    color: #a99da1;
}

@media (max-width: 768px) {
    .site-header {
        box-shadow: 0 12px 24px rgba(65, 17, 30, 0.24);
    }

    .drawer-backdrop {
        background: rgba(35, 18, 23, 0.52);
    }

    .main-nav {
        background: linear-gradient(180deg, rgba(112, 27, 43, 0.98) 0%, rgba(55, 24, 31, 0.98) 100%);
        box-shadow: 0 18px 42px rgba(36, 14, 20, 0.34);
    }

    .main-nav a,
    .drawer-lang {
        color: #fff5f6;
    }

    .drawer-close {
        background: #b3263b !important;
        color: #ffffff !important;
        border-color: rgba(255,255,255,.2) !important;
    }

    .slide {
        aspect-ratio: unset;
        min-height: unset;
        height: auto;
    }

    .slide img {
        height: auto;
        object-fit: fill;
        object-position: unset;
    }
}