/* SYSTEM FONTS FOR NORMAL LOOK */
:root {
    --bg: #000000;
    --text: #ffffff;
    --card: #0a0a0a;
    --glass: rgba(0,0,0,0.8);
}

[data-theme="light"] {
    --bg: #ffffff;
    --text: #000000;
    --card: #f4f4f4;
    --glass: rgba(255,255,255,0.8);
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    overflow-x: hidden;
}

.glass-header {
    background: var(--glass);
    backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(128,128,128,0.2);
}

.sidebar-bg { background-color: var(--bg); }
.footer-bg { background-color: var(--card); }

/* PRODUCT LIST LAYOUT */
.product-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .product-card {
        flex-direction: row;
        align-items: center;
        gap: 2.5rem;
    }
    .product-card:nth-child(even) {
        flex-direction: row-reverse;
    }
}

.product-image-wrapper {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1/1;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
    .product-image-wrapper {
        max-width: 320px;
    }
}

.product-image-wrapper img,
.product-image-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.product-card:hover .product-image-wrapper img,
.product-card:hover .product-image-wrapper video {
    transform: scale(1.05);
}

.product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.buy-btn {
    align-self: flex-start;
}

[dir="rtl"] .buy-btn {
    align-self: flex-start;
}

@media (min-width: 768px) {
    [dir="rtl"] .product-card {
        flex-direction: row-reverse;
    }
    [dir="rtl"] .product-card:nth-child(even) {
        flex-direction: row;
    }
}

/* HERO ANIMATION */
@keyframes zoom { from { transform: scale(1); } to { transform: scale(1.1); } }
.hero-zoom { animation: zoom 20s infinite alternate linear; }

/* SMOOTH SCROLLING */
html { scroll-behavior: smooth; }