/* =========================
   CARD BASE
========================= */

.fluent-card-product {
    border-radius: var(--ms-radius-xl);
    overflow: hidden;
    background: var(--ms-color-bg-canvas);
    box-shadow: var(--ms-shadow-8);

    display: flex;
    flex-direction: column;

    transition: all var(--ms-motion-base);
}

.fluent-card-product:hover {
    transform: translateY(-4px);
    box-shadow: var(--ms-shadow-16);
}

/* =========================
   MEDIA / SLIDER
========================= */

.fluent-card-product__media {
    position: relative;
    height: 220px;
    overflow: hidden;
}

/* TRACK */
.fluent-card-product__track {
    display: flex;
    height: 100%;
    transition: transform 600ms var(--ms-ease);
}

/* SLIDE */
.fluent-card-product__slide {
    min-width: 100%;
    height: 100%;
}

.fluent-card-product__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* OVERLAY */
.fluent-card-product__overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0) 40%,
        var(--ms-color-overlay-strong)
    );

    pointer-events: none;
}

/* =========================
   NAV BUTTON
========================= */

.fluent-card-product__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 32px;
    height: 32px;

    border-radius: var(--ms-radius-pill);
    border: none;

    background: var(--ms-color-overlay-strong);
    color: var(--ms-color-text-inverse);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    opacity: 0;

    transition: all var(--ms-motion-fast);
}

.fluent-card-product__media:hover .fluent-card-product__nav {
    opacity: 1;
}

.fluent-card-product__nav.prev { left: var(--ms-space-sm); }
.fluent-card-product__nav.next { right: var(--ms-space-sm); }

/* =========================
   DOTS
========================= */

.fluent-card-product__dots {
    position: absolute;
    bottom: var(--ms-space-sm);
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: var(--ms-space-xs);
}

.fluent-card-product__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--ms-radius-pill);

    background: rgba(255,255,255,0.5);
}

.fluent-card-product__dot.is-active {
    width: 16px;
    background: #fff;
}

/* =========================
   FAVORITE
========================= */

.fluent-card-product__favorite {
    position: absolute;
    top: var(--ms-space-sm);
    right: var(--ms-space-sm);

    width: 36px;
    height: 36px;

    border-radius: var(--ms-radius-pill);
    background: var(--ms-color-bg-canvas);

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: var(--ms-shadow-4);
}

/* =========================
   BODY
========================= */

.fluent-card-product__body {
    padding: var(--ms-space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--ms-space-sm);
}

.fluent-card-product__title {
    font-size: var(--ms-font-size-h2);
    font-weight: var(--ms-font-weight-bold);
}

.fluent-card-product__location {
    color: var(--ms-color-text-muted);
}

.fluent-card-product__rating {
    display: flex;
    gap: var(--ms-space-md);
    align-items: center;
}

.fluent-card-product__score {
    background: var(--ms-color-primary-dark);
    color: #fff;
    padding: 4px 8px;
    border-radius: var(--ms-radius-sm);
}

.fluent-card-product__price {
    margin-top: auto;
    text-align: right;
}