/* ============================================================
   slideshows.css — CSS-only image cycling, carousel layouts,
                    Splide overrides (when user interaction needed)
   MetaSlider is GONE. Default = CSS keyframes. Splide = user nav only.
   ============================================================ */

/* ---- CSS-ONLY IMAGE CYCLING (card grid) ------------------- */
/*
   Same technique as CuteWP anim-1/anim-4 heading animations
   scaled to images. Zero JS, zero library, zero failure surface.
*/

.fmo-card-images {
    position: relative;
    width: 100%;
    height: 100%;
}

.fmo-card-images img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
}

/* 4-image cycle, 8s total, staggered 2s apart */
.fmo-card-images img:nth-child(1) { animation: fmo-img-cycle 8s infinite 0s; }
.fmo-card-images img:nth-child(2) { animation: fmo-img-cycle 8s infinite 2s; }
.fmo-card-images img:nth-child(3) { animation: fmo-img-cycle 8s infinite 4s; }
.fmo-card-images img:nth-child(4) { animation: fmo-img-cycle 8s infinite 6s; }

/* Single image — no animation needed */
.fmo-card-images img:only-child {
    opacity: 1;
    animation: none;
    position: relative;
}

@keyframes fmo-img-cycle {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    25%  { opacity: 1; }
    30%  { opacity: 0; }
    100% { opacity: 0; }
}

/* ---- PRODUCT GALLERY (main + thumbs) ---------------------- */
.fmo-gallery-main {
    border: 1px solid var(--fmo-border);
    background: var(--fmo-light-gray);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 8px;
    cursor: zoom-in;
}
.fmo-gallery-main img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.fmo-gallery-thumbs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.fmo-gallery-thumb {
    width: 60px; height: 60px;
    border: 1px solid var(--fmo-border);
    overflow: hidden;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--fmo-transition), border-color var(--fmo-transition);
}
.fmo-gallery-thumb:hover,
.fmo-gallery-thumb.active {
    opacity: 1;
    border-color: var(--fmo-link);
}
.fmo-gallery-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* ---- ITEMS YOU MAY LIKE CAROUSEL -------------------------- */
.fmo-items-you-may-like { margin: var(--fmo-gap) 0; }

.fmo-carousel-wrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--fmo-gap-sm);
}

.fmo-carousel-item {
    background: var(--fmo-white);
    border: 1px solid var(--fmo-border);
    border-radius: 2px;
    overflow: hidden;
}

.fmo-carousel-item-image {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--fmo-light-gray);
    position: relative;
}
.fmo-carousel-item-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.fmo-carousel-item:hover .fmo-carousel-item-image img { transform: scale(1.04); }

.fmo-carousel-item-body { padding: 6px 8px; }

.fmo-carousel-item-title {
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--fmo-black);
    margin-bottom: 3px;
}
.fmo-carousel-item-price { font-size: 0.78rem; font-weight: 700; }

/* Carousel wishlist heart */
.fmo-carousel-item-wish {
    position: absolute;
    top: 5px; right: 5px;
    font-size: 0.85rem;
    color: #aaa;
    cursor: pointer;
    background: rgba(255,255,255,0.8);
    border: none;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--fmo-transition);
}
.fmo-carousel-item-wish:hover { color: #e63946; }

/* ---- SPLIDE OVERRIDES (user-nav carousels only) ----------- */
/*
   Splide is available in custom-scripts for cases requiring
   user interaction (manual carousel navigation).
   CSS-only is the default for auto-cycling.
*/

.splide__track { overflow: hidden; }
.splide__slide { opacity: 1; } /* Never hide slides from Googlebot */

.splide__arrow {
    background: rgba(0,0,0,0.4);
    border: none;
    border-radius: 50%;
    width: 32px; height: 32px;
    cursor: pointer;
    transition: background var(--fmo-transition);
}
.splide__arrow:hover { background: rgba(0,0,0,0.7); }
.splide__arrow svg { fill: var(--fmo-white); }

.splide__pagination__page {
    background: var(--fmo-border);
    border: none;
    border-radius: 50%;
    width: 8px; height: 8px;
    cursor: pointer;
    transition: background var(--fmo-transition);
}
.splide__pagination__page.is-active { background: var(--fmo-nav-bg); }

/* ---- RESPONSIVE ------------------------------------------- */
@media (max-width: 800px) {
    .fmo-carousel-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .fmo-gallery-thumbs { gap: 4px; }
    .fmo-gallery-thumb { width: 48px; height: 48px; }
}

/* 640px — Splide column reduction handled by Splide config in JS */
@media (max-width: 640px) {
    .fmo-carousel-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}