/* Banner Container - 2100x900 ratio for consistent hero sizing */
.banner-container {
    width: 100%;
    aspect-ratio: 2100 / 900;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Ensure banner section doesn't overflow */
#banner-carousel {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.banner-slide {
    width: 100%;
    position: relative;
}

/* Responsive image sizing */
@media (max-width: 767px) {
    .banner-image {
        object-fit: cover;
        object-position: center;
    }
}

/* Touch-friendly controls */
.touch-manipulation {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Carousel dot active state */
.carousel-dot-active {
    background-color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.2);
}

.carousel-dot {
    cursor: pointer;
}

.carousel-dot:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

/* Banner slide transitions */
.banner-slide {
    position: relative;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.banner-slide[style*="display: none"] {
    opacity: 0;
}

#category-slider {
    position: relative;
    width: 100%;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    overflow: hidden;
    cursor: grab;
}

#category-slider:active {
    cursor: grabbing;
}

#category-slider-track {
    display: flex;
    will-change: transform;
    touch-action: pan-x;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.category-slide {
    flex-shrink: 0;
    touch-action: pan-y;
    pointer-events: auto;
}

.category-slide a {
    display: block;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    touch-action: manipulation;
}

@media (max-width: 640px) {
    .category-slide {
        width: calc((100% - 24px) / 2) !important;
        min-width: 140px !important;
    }

    #category-prev,
    #category-next {
        display: none !important;
    }
}

@media (min-width: 640px) and (max-width: 1024px) {
    .category-slide {
        width: calc((100% - 72px) / 4) !important;
        min-width: 120px !important;
    }
}

@media (min-width: 1024px) {
    .category-slide {
        width: calc((100% - 168px) / 8) !important;
        min-width: 120px !important;
    }
}

/* Product Image 1:1 Aspect Ratio */
.product-card .aspect-square {
    aspect-ratio: 1 / 1;
    width: 100%;
}

/* Ensure images maintain 1:1 ratio */
.product-card img {
    object-fit: cover;
    object-position: center;
}

/* Line clamp utilities for text truncation */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive product card adjustments */
@media (max-width: 640px) {
    .product-card {
        min-width: 0;
    }
}

/* Wishlist Button Styles */
.wishlist-btn {
    transition: all 0.3s ease;
}

.wishlist-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
}

.wishlist-btn.active svg path {
    fill: var(--theme-accent);
}

.wishlist-btn svg {
    transition: all 0.3s ease;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

.animate-pulse {
    animation: pulse 0.6s ease-in-out;
}