.slideshow-container {
    position: relative;
    /* Full width setup */
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    height: 400px;
    overflow: hidden;
    margin-bottom: 16px;
    background-color: #eee; /* Optional: Placeholder background color */

    /* Reserve space for full-height arrows */
    --arrow-width: 48px; /* increased from 48px */
    /* Default hover color attempts to use common Woo/Theme vars, with a fallback */
    --arrow-icon-hover-color: #caec7d !important;
}

/* Ensure initial active slide fades in only after ready */
.slideshow-container:not(.slideshow-ready) .slide.active {
    opacity: 0;
}

/* Slides */
.slide {
    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* Fade in/out */
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.slide-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    margin: 0 auto;
    padding: 32px;
    background: rgba(0, 0, 0, 0.3); /* darker, no blur */
    box-shadow: 0px 0px 18px rgba(44, 47, 37, 0.136);
    border-radius: 8px; /* was 16px */
    text-shadow: 0 0 4rem black;
    max-width: 70%; /* Limit width relative to slide container */
    max-height: 80%; /* Limit height relative to slide container */
    overflow: hidden; /* Hide overflow if content is too large */
    box-sizing: border-box; /* Include padding in width/height calculation */

    /* Ensure content never sits under the full-height arrows */
    max-width: min(70%, calc(100% - (var(--arrow-width) * 2) - 32px));
}

.slide.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

.slide-title { color: white; font-weight: 600;}
.slide-text { color: white; font-size: medium; }

/* Navigation Dots */
.slideshow-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.slideshow-dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.slideshow-dot.active { background-color: rgba(255, 255, 255, 1); }

/* Arrow Buttons - full height with edge fade */
.slideshow-arrow {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%;
    width: var(--arrow-width);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border: none;
    cursor: pointer;
    z-index: 10;
    font-size: 0; /* Hide any text content */
    font-weight: 700;
    background: transparent; /* Will be overridden by specific sides below */
    transition: color 0.15s ease; /* focus on icon color change instead of darkening bg */
}

.slideshow-arrow::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 16px;
    color: inherit;
}

.slideshow-arrow.prev {
    left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.slideshow-arrow.prev::before {
    content: "\f053"; /* chevron-left */
}

.slideshow-arrow.next {
    right: 0;
    background: linear-gradient(to left, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.slideshow-arrow.next::before {
    content: "\f054"; /* chevron-right */
}

/* On hover, color the icon using the site/button color; keep background consistent */
.slideshow-arrow:hover {
    color: var(--arrow-icon-hover-color);
}

/* Tweak arrow icons for better hit target */
.slideshow-arrow:focus {
    outline: 2px solid rgba(255,255,255,0.6);
    outline-offset: -2px;
}

/* Responsive adjustments to avoid overlap on mobile */
@media (max-width: 600px) {
    .slideshow-container { --arrow-width: 40px; } /* slightly bigger than before for accessibility */
    .slideshow-dots { bottom: 12px; }
}