/* RBB Smart Upsell -- "Goes Great With This" strip.
   Two modes: --compact (narrow column, under the Add-to-Cart button)
   and --grid (full-width card row for the tab / bottom placements). */

#rbb-smart-upsell { margin: 20px 0; }
#rbb-smart-upsell[hidden] { display: none; }

.rbb-su__head { margin-bottom: 12px; }
.rbb-su__title {
    display: inline-block;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0a2548;
    border-bottom: 3px solid #c9a227;
    padding-bottom: 4px;
}

.rbb-su__imgwrap { position: relative; display: block; flex-shrink: 0; }
.rbb-su__img { display: block; max-width: 100%; height: auto; border: 1px solid #e5e5e5; border-radius: 6px; background: #fff; }

.rbb-su__badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: #1a8531;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 10px;
    white-space: nowrap;
}

.rbb-su__name {
    display: block;
    font-weight: 700;
    color: #0a2548;
    line-height: 1.3;
    margin-bottom: 4px;
}
.rbb-su__name:hover { color: #1d4f91; text-decoration: none; }

.rbb-su__price { margin-bottom: 6px; }
.rbb-su__price-old { color: #999; text-decoration: line-through; margin-right: 6px; font-size: 13px; }
.rbb-su__price-now { color: #0a2548; font-weight: 800; font-size: 15px; }

.rbb-su__btn { white-space: nowrap; }

/* ---------- compact mode: stacked rows in the buy column ---------- */

.rbb-su--compact .rbb-su__item {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
    background: #fbfbfb;
}
.rbb-su--compact .rbb-su__imgwrap { width: 72px; }
.rbb-su--compact .rbb-su__info { flex: 1 1 auto; min-width: 0; }
.rbb-su--compact .rbb-su__name { font-size: 13px; }
.rbb-su--compact .rbb-su__badge { font-size: 10px; padding: 3px 5px; }

/* ---------- grid mode: card row for full-width placements ---------- */

.rbb-su--grid .rbb-su__items {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.rbb-su--grid .rbb-su__item {
    flex: 1 1 150px;    /* 4 across fits the 750px description column */
    max-width: 260px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 12px;
    background: #fbfbfb;
    display: flex;
    flex-direction: column;
}
.rbb-su--grid .rbb-su__imgwrap { margin-bottom: 10px; }
.rbb-su--grid .rbb-su__name { font-size: 14px; }
.rbb-su--grid .rbb-su__info { display: flex; flex-direction: column; flex: 1 1 auto; }
.rbb-su--grid .rbb-su__cta { margin-top: auto; }

/* on phones the grid becomes a swipeable strip */
@media (max-width: 767px) {
    .rbb-su--grid .rbb-su__items {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    .rbb-su--grid .rbb-su__item { flex: 0 0 180px; }
}