/* Design System — Premium eCommerce */

:root {
    --brand-primary: #166534;
    --brand-secondary: #65a30d;
    --brand-accent: #f59e0b;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar hide */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Hover lift */
.hover-lift { transition: transform 200ms ease, box-shadow 200ms ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.07); }

/* Image zoom on hover */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 320ms ease; }
.img-zoom:hover img { transform: scale(1.04); }

/* ─── Carousel ─────────────────────────────── */
.carousel-container {
    position: relative; width: 100%; overflow: hidden; border-radius: 0.75rem;
}
.carousel-slides {
    display: flex; width: 100%; transform: translateX(0); transition: transform 420ms ease;
}
.carousel-slide {
    position: relative; flex: 0 0 100%; width: 100%;
    min-height: 260px; background-size: cover; background-position: center;
}
@media (min-width: 1024px) { .carousel-slide { min-height: 420px; } }

.hero-image-carousel .carousel-slide::before { display: none; }

.carousel-controls {
    position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%);
    display: flex; justify-content: space-between; padding: 0 1rem; z-index: 20; pointer-events: none;
}
.carousel-btn {
    width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.92);
    border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 180ms ease, transform 180ms ease; font-size: 1rem; color: #111; pointer-events: auto;
}
.carousel-btn:hover { background: #fff; transform: scale(1.08); }

.carousel-dots {
    position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
    display: flex; gap: 0.5rem; z-index: 10;
}
.carousel-dot {
    width: 6px; height: 6px; border-radius: 9999px;
    background: rgba(255,255,255,0.5); cursor: pointer; transition: all 200ms ease;
}
.carousel-dot.active { background: #fff; width: 20px; }