@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;
    }

    .slider .slide {
        aspect-ratio: auto !important;
        min-height: auto !important;
        height: auto !important;
        background: #fff;
    }

    .slider .slide-caption {
        display: none !important;
    }

    .slider .slide img {
        display: block;
        width: 100%;
        height: auto !important;
        object-fit: contain !important;
        object-position: center center !important;
    }
}

/* ══ HOME CAROUSEL ══ */
.hc-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: unset !important;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
    justify-content: unset !important;
    align-items: flex-start;
}
.hc-carousel::-webkit-scrollbar { display: none; }

/* منع الانكماش فقط — بدون تغيير أي مقاسات */
.hc-carousel > * { flex-shrink: 0 !important; }

/* موبايل: بطاقات المنتجات كانت width:100% في الغريد = نص شاشة
   نعيد نفس الحجم البصري بدون ما نغير المظهر */
@media (max-width: 767px) {
    .hc-carousel > .card,
    .hc-carousel > a.card {
        width: calc(50vw - 10px) !important;
        min-width: calc(50vw - 10px) !important;
    }
}

/* أسهم زجاجية — ديسكتوب فقط */
.hc-root { position: relative; }
.hc-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 20; width: 44px; height: 44px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,.6);
    background: rgba(255,255,255,.38);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #0f1a2b; font-size: 22px; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18);
    transition: background .18s, transform .18s;
    opacity: 0; pointer-events: none;
}
.hc-root:hover .hc-btn { opacity: 1; pointer-events: auto; }
.hc-btn:hover { background: rgba(255,255,255,.7); transform: translateY(-50%) scale(1.08); }
.hc-btn--prev { inset-inline-start: -16px; }
.hc-btn--next { inset-inline-end: -16px; }
.hc-btn:disabled { opacity: 0 !important; pointer-events: none; }
@media (max-width: 768px) { .hc-btn { display: none; } }