/* Carousel Core */
.carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 20px 40px;
    /* Space for buttons */
}

.carousel-track-container {
    overflow: hidden;
    width: 100%;
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    gap: 30px;
    align-items: center;
}

.carousel-slide {
    min-width: 180px;
    /* Fixed width for consistent slide size */
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.carousel-slide img {
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.carousel-slide:hover img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 10;
    color: #333;
    font-size: 1.2rem;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: #000080;
    color: white;
}

.prev-btn {
    left: 0;
}

.next-btn {
    right: 0;
}

/* Placeholder Style */
.placeholder-logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #555;
    text-align: center;
    font-size: 0.9rem;
}

/* Promo Carousel Specifics */
.promo-carousel-container {
    padding: 0 40px;
    /* Space for arrows */
}

.promo-slide {
    min-width: 300px;
    height: 450px;
    /* Taller for vertical posters */
    padding: 0;
    border: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.15); Removed to handle varying aspect ratios cleanly */
    display: block;
    background: transparent;
    /* Override flex from carousel-slide if needed, or stick to flex but ensure full content */
}

.promo-slide img.promo-img {
    width: 100%;
    height: 100%;
    max-height: none;
    /* Override logo carousel restriction */
    max-width: none;
    object-fit: contain;
    /* Changed from cover to contain to prevent cutting */
    /* transition: transform 0.3s; inherited from carousel css? */
    border-radius: 12px;
    filter: none;
    /* Override default grayscale */
    opacity: 1;
    /* Override default opacity */
}

.promo-slide:hover img.promo-img {
    transform: scale(1.05);
}

.promo-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    /* Removed dark gradient */
    padding: 20px;
    text-align: center;
}

.promo-details .btn {
    padding: 8px 16px;
    /* Smaller padding */
    font-size: 0.9rem;
    /* Smaller text */
    min-width: auto;
    /* Allow it to shrink */
    width: auto;
    display: inline-block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.promo-details h3 {
    margin: 0 0 5px;
    font-size: 1.2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.promo-details p {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffcc00;
    /* Goldish price */
    margin-bottom: 15px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .promo-slide {
        min-width: 100%;
        /* Full width on mobile */
        height: 500px;
        /* Taller on mobile */
    }
}