/* Positioning context for the badge, which straddles the card's top edge (Figma 378:10647). */
.root {
    position: relative;
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-base-light);
    border: var(--border-width-sm) solid var(--border-color-light);
    border-radius: var(--border-radius-lg);
    /* No overflow: hidden — it would clip .main's -1px border overlay (below) and reintroduce the
       double-stroke seam. Inner content stays clear of the corners via its own padding. */
}

/* Product row: a self-contained rounded card, subtly elevated — its bordered bottom edge forms the
   rounded divider above the disclosure (matches MembershipCard's .topCard). Figma 368:7406: 24px top
   corners (radius-large), 16px bottom (radius-medium). */
.main {
    display: flex;
    align-items: center;
    gap: var(--spacing-18);
    padding: var(--spacing-16);
    position: relative;
    z-index: 1;
    /* Overlay this border on the outer .card border so the strokes coincide instead of stacking
       into a 2px seam (QA: consistent inside/outside strokes). */
    margin: -1px -1px 0;
    background: var(--color-bg-base-light);
    border: var(--border-width-sm) solid var(--border-color-light);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) var(--border-radius-md) var(--border-radius-md);
    box-shadow: 0 12px 10px -5px rgba(0, 0, 0, 0.04);
}

.thumb {
    flex-shrink: 0;
    width: var(--spacing-88);
    height: var(--spacing-88);
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    background: var(--color-bg-neutral-light);
}

.image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.imageFallback {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-bg-neutral-light);
}

.info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    flex: 1;
    min-width: 0;
}

.name {
    color: var(--color-text-primary);
}

/* Renewal (left) + price (right) share one row below the full-width title. */
.metaRow {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-8);
}

/* Takes the remaining width; wraps (never truncates) if it would otherwise push the price off. */
.renewal {
    color: var(--color-text-secondary-hover);
    flex: 1 1 auto;
    min-width: 0;
}

/* Badge straddles the card's top edge, right-aligned (Figma: top -10, right 15). */
.badge {
    position: absolute;
    top: calc(-1 * var(--spacing-8));
    right: var(--spacing-16);
    z-index: 2;
}

/* The DS grey Label fill is translucent (alpha-black-10) — it reads too light AND lets the card's top
   border show through where the badge straddles it. Figma "Blur Grey" is the opaque neutral-medium
   surface (#e5e5e5), so paint it solid here. */
.root .badge[data-color='grey'] {
    background-color: var(--color-bg-neutral-medium);
}

/* "Recommended" badge — same top-edge slot as the member-rate badge. Reuses Label
   color="indigo-gradient" size="pico" (identical gradient + the pico font-size that matches the
   member-rate badge); this rule only positions it and spaces the HS-mark from the text. */
.recommendedBadge {
    position: absolute;
    top: calc(-1 * var(--spacing-8));
    right: var(--spacing-16);
    z-index: 2;
    align-items: center;
    gap: var(--spacing-8);
}

.recommendedMark {
    width: 14px;
    height: auto;
    flex-shrink: 0;
}

.price {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    flex-shrink: 0;
    white-space: nowrap;
    /* Pin the price to the right whether or not a renewal label is present (one-time has none, so
       without this the lone flex child collapses to the left). */
    margin-left: auto;
}

/* Figma mobile: smaller thumb + tighter gap so the renewal + price row fits on one line. */
@media screen and (width <= 768px) {
    .main {
        gap: var(--spacing-14);
    }

    .thumb {
        width: var(--spacing-72);
        height: var(--spacing-72);
    }
}

.originalPrice {
    color: var(--color-text-secondary-hover);
}

.currentPrice {
    color: var(--color-text-primary);
    white-space: nowrap;
}

.includedRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-16);
    padding: var(--spacing-16);
    border-top: var(--border-width-sm) solid var(--border-color-light);
}

.includedLabel {
    color: var(--color-text-primary);
}