/*!
 * carousel.css — styles for the discrete stepped circular carousel.
 *
 * .car-wrap       — outer clipping container
 * .car-track      — flex row driven by carousel.js
 * .rv-car-item    — review card slot  (desktop 4 / mobile 1)
 * .rel-car-item   — related product slot  (desktop 4 / mobile 2)
 * .car-sec-hdr    — section header row (title left, nav buttons right)
 * .car-nav        — prev/next button group
 * .car-nbtn       — individual prev or next button
 * .car-dots-row   — dot indicator container below the carousel
 * .car-dot        — single dot; .act = active
 */

/* ── Outer wrapper ───────────────────────────────────────────────── */
.car-wrap {
    overflow: hidden;
    position: relative;
}

/* ── Track ───────────────────────────────────────────────────────── */
.car-track {
    display: flex;
    flex-wrap: nowrap;
    will-change: transform;
}

/* ── Section header with nav buttons ────────────────────────────── */
.car-sec-hdr {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 24px;
    gap: 16px;
    flex-wrap: wrap;
}

/* ── Nav button group ────────────────────────────────────────────── */
.car-nav {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.car-nbtn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--bd, #e8e0d5);
    background: #fff;
    color: var(--mg, #1C4A35);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
    flex-shrink: 0;
    line-height: 1;
}

.car-nbtn:hover {
    background: var(--mg, #1C4A35);
    color: #fff;
    border-color: var(--mg, #1C4A35);
}

/* ── Dots row ────────────────────────────────────────────────────── */
.car-dots-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    flex-wrap: wrap;
    min-height: 18px;
}

.car-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(28, 74, 53, .2);
    transition: background .28s, transform .28s;
    flex-shrink: 0;
}

.car-dot.act {
    background: var(--mg, #1C4A35);
    transform: scale(1.35);
}

/* ── Review card slots ───────────────────────────────────────────── */
/* align-self defaults to stretch — all slots match the tallest card */
.rv-car-item {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 9px;
    display: flex;
    flex-direction: column;
}

/* Card fills the full slot height */
.rv-car-item .rv-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Review text expands so the verified badge is always at the bottom */
.rv-car-item .rv-card .rv-tx {
    flex: 1;
}

/* ── Related product slots ───────────────────────────────────────── */
.rel-car-item {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.rel-car-item .pc {
    width: 100%;
    max-width: 320px;
}

/* ── Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .car-sec-hdr    { margin-bottom: 16px; }
    .rv-car-item    { padding: 0 7px; }
    .rel-car-item   { padding: 0 8px; }
    .rel-car-item .pc { max-width: 280px; }
}