/* Worn Out Vegan collection card carousel — a Loox "cards carousel" replacement.
 * A horizontally scrolling strip of five-star photo reviews, each card showing
 * the photo, five stars and a snippet; clicking opens a lightbox.
 *
 * Layout/colour knobs come from CSS custom properties the wov-cards-carousel
 * section sets on the mount (#wov-cards-carousel); the fallbacks below mirror
 * the Loox widget's defaults so the widget also stands on its own.
 *
 * Sizes are in rem to track the Glozin theme's 62.5% root (1rem = 10px). */

#wov-cards-carousel {
    --wov-cc-per: 5;            /* cards visible on desktop */
    --wov-cc-per-mobile: 2;     /* cards visible on mobile */
    --wov-cc-gap: 1.6rem;
    --wov-cc-radius: 20px;
    --wov-cc-ratio: 1.25;       /* image height as a multiple of its width */
    --wov-cc-max-width: 1600px;
    --wov-cc-card-bg: #ffffff;
    --wov-cc-text-color: #000000;
    --wov-cc-name-color: #000000;
    --wov-cc-stars-color: #ffc107;
    --wov-cc-arrow-bg: #ffffff;
    --wov-cc-arrow-icon: #9a9a9a;
    --wov-cc-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);

    /* The shared reviews lightbox is injected inside this mount and reads these
       (same values as widget.css's #wov-reviews) so it renders identically. */
    --wov-rev-star: #ffc107;
    --wov-rev-star-empty: #d8d8d8;
    --wov-rev-accent: #111;
    --wov-rev-accent-text: #fff;
    --wov-rev-border: #e6e6e6;
    --wov-rev-muted: #777;
    --wov-rev-radius: 12px;

    display: block;
    max-width: var(--wov-cc-max-width);
    margin-inline: auto;
    box-sizing: border-box;
}

#wov-cards-carousel *,
#wov-cards-carousel *::before,
#wov-cards-carousel *::after { box-sizing: border-box; }

.wov-cc__viewport { position: relative; }

/* ------------------------------------------------------------ track ----- */

.wov-cc__track {
    display: flex;
    gap: var(--wov-cc-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* arrows do the navigating */
    padding: 1.2rem 0.6rem 2rem;    /* room so the soft shadow isn't clipped */
}

.wov-cc__track::-webkit-scrollbar { display: none; }

.wov-cc__card {
    /* Mobile-first: show --wov-cc-per-mobile cards across; desktop bumps this up
       in the min-width media query below. (The count vars are set inline on the
       mount, so a media query can't override them — it must switch the rule.) */
    flex: 0 0 calc((100% - (var(--wov-cc-gap) * (var(--wov-cc-per-mobile) - 1))) / var(--wov-cc-per-mobile));
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: var(--wov-cc-border, 0);
    text-align: left;
    background: var(--wov-cc-card-bg);
    border-radius: var(--wov-cc-radius);
    box-shadow: var(--wov-cc-shadow);
    overflow: hidden;
    cursor: pointer;
    font: inherit;
    color: var(--wov-cc-text-color);
    transition: transform 0.15s ease;
}

.wov-cc__card:hover { transform: translateY(-2px); }
.wov-cc__card:focus-visible { outline: 2px solid #111; outline-offset: 2px; }

.wov-cc__img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / var(--wov-cc-ratio);
    background: #f3f3f3;
}

.wov-cc__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wov-cc__panel {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1.2rem 1.4rem 1.4rem;
}

.wov-cc__stars { display: inline-flex; gap: 0.1em; line-height: 0; }
.wov-cc-star-ico { width: 1.6rem; height: 1.6rem; fill: var(--wov-cc-stars-color); }

.wov-cc__text {
    font-size: 1.4rem;
    line-height: 1.45;
    color: var(--wov-cc-text-color);
    /* Keep cards even when snippets vary in length */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wov-cc__author {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--wov-cc-name-color);
}

.wov-cc__flag { font-size: 1.6rem; line-height: 1; }
.wov-cc__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ------------------------------------------------------------ arrows ---- */

/* Overlaid just inside the track edges (like the reviews photo carousel) and
   shown on every viewport, so it's always clear the strip scrolls. The JS hides
   the left arrow at the start and the right arrow at the end. */
.wov-cc__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 4rem;
    height: 4rem;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--wov-cc-arrow-bg);
    color: var(--wov-cc-arrow-icon);
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    transition: background 0.15s ease, opacity 0.15s ease;
}

.wov-cc__arrow[hidden] { display: none; }
.wov-cc__arrow--prev { left: 0.6rem; }
.wov-cc__arrow--next { right: 0.6rem; }
.wov-cc__arrow:hover { opacity: 0.88; }

/* Smaller, snug-to-the-edge arrows on mobile so they don't cover the cards */
@media (max-width: 749px) {
    .wov-cc__arrow { width: 3.2rem; height: 3.2rem; font-size: 2rem; }
    .wov-cc__arrow--prev { left: 0.2rem; }
    .wov-cc__arrow--next { right: 0.2rem; }
}

/* ------------------------------------------------------------ desktop --- */

@media (min-width: 750px) {
    /* Bump from the mobile card count up to the desktop count */
    .wov-cc__card {
        flex-basis: calc((100% - (var(--wov-cc-gap) * (var(--wov-cc-per) - 1))) / var(--wov-cc-per));
    }
}

/* The image popup is the shared reviews lightbox (lightbox.js + widget.css) —
   no lightbox styles live here. Its markup is injected inside this mount, so it
   inherits the --wov-rev-* variables declared on #wov-cards-carousel above. */