/* --- Base Styles (Desktop First Approach) --- */
.testimonial-wrapper {
    position: relative;
    width: 100%; /* Ensure wrapper takes full available width */
    max-width: 1280px; /* Max width for the overall slider container */
    margin: 40px auto; /* Center the wrapper and provide vertical spacing */
    overflow: hidden; /* Crucial: Hides items outside the visible area */
    box-sizing: border-box;
    padding: 0 20px; /* Inner padding for desktop, keeps arrows on edges */
    user-select: none; /* Prevent text selection during drag */
    touch-action: pan-y; /* Allow vertical scrolling, but handle horizontal pan */
}

.testimonial-slider {
    display: flex;
    /* transition is applied dynamically in JS for smooth slides */
    will-change: transform; /* Performance hint */
    width: fit-content; /* Allow flex container to naturally expand beyond viewport */
}

.testimonial-card {
    flex-shrink: 0; /* Prevent cards from shrinking */
    width: 320px; /* Fixed width for desktop cards */
    margin-right: 20px; /* Space between cards */
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    padding: 20px;
    cursor: grab; /* Indicate draggable */
    transition: transform 0.2s ease-out; /* Smooth hover effect if desired */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

.testimonial-card:last-child {
    margin-right: 0; /* No margin on the very last card */
}

.testimonial-card:active {
    cursor: grabbing; /* Indicate currently dragging */
}

.testimonial-card img {
    width: 100%;
    height: 180px; /* Fixed height for consistent image size in cards */
    border-radius: 10px;
    margin-bottom: 15px;
    object-fit: cover; /* Ensures image covers the area without distortion */
}

.stars {
    font-size: 20px;
    color: #f5a623;
    margin-bottom: 8px;
}

.testimonial-card h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 5px 0;
}

.testimonial-card p {
    font-size: 14px;
    color: #444;
    margin: 8px 0;
}

.testimonial-card .desc {
    font-size: 13px;
    color: #666;
    margin-top: 10px;
    min-height: 60px; /* Min height for description to prevent layout shifts */
    overflow: hidden; /* Hide overflow if description is too long */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
}

.shop-button {
    display: inline-block;
    margin-top: 15px;
    padding: 8px 16px;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}

.shop-button:hover {
    background-color: #444;
}

/* Navigation Arrows */
.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0,0,0,0.5);
    border: none;
    color: #fff;
    padding: 12px; /* Slightly larger hit area */
    cursor: pointer;
    font-size: 24px; /* Larger arrow symbols */
    z-index: 10; /* Ensure arrows are above cards */
    border-radius: 50%; /* Perfect circle */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.arrow:hover {
    background-color: rgba(0,0,0,0.7);
    transform: translateY(-50%) scale(1.1); /* Slight grow effect */
}

.arrow-left {
    left: 0px; /* Flush with wrapper edge */
}

.arrow-right {
    right: 0px; /* Flush with wrapper edge */
}

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
    .testimonial-card {
        width: 280px; /* Slightly smaller cards */
        margin-right: 15px;
    }
    .testimonial-wrapper {
        padding: 0 10px; /* Reduced padding */
    }
    .arrow {
        padding: 10px;
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .testimonial-card {
        width: 240px; /* Moderate width for mobile vertical videos */
        margin-right: 10px;
    }
    .testimonial-wrapper {
        padding: 0 5px; /* Minimal padding */
    }
    .arrow {
        padding: 8px;
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        width: 200px; /* Even smaller for very small screens */
        margin-right: 10px;
    }
    .testimonial-card .desc {
        min-height: 55px; /* Adjust height slightly */
        -webkit-line-clamp: 3; /* Maintain 3 lines */
    }
    .arrow {
        padding: 6px;
        font-size: 18px;
        opacity: 0.8; /* Slightly less opaque for very small screens */
    }
    .arrow:hover {
        transform: translateY(-50%) scale(1); /* No scale on hover for mobile */
    }
}