/* Bestsellers section — Bootstrap card overrides scoped to .stw-bestsellers */

.stw-bestsellers .card {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

.stw-bestsellers .card-img-top {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background: #efece6;
    border-radius: 0;
}

.stw-bestsellers .card-body {
    padding-left: 0;
    padding-right: 0;
}

.stw-bestsellers .badge.text-bg-light {
    background: var(--stw-grey-100) !important;
    color: var(--stw-ink) !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: var(--stw-radius-pill);
    padding: 5px 10px;
}

.stw-bestsellers small.text-muted {
    font-size: 13px;
    font-weight: 600;
    color: var(--stw-grey-700) !important;
}

.stw-bestsellers .card-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--stw-ink);
    letter-spacing: -0.005em;
}

.stw-bestsellers .card-text.small.text-muted {
    font-size: 14px;
    color: var(--stw-grey-700) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stw-bestsellers .card-footer {
    background: transparent !important;
    border-top: 1px solid var(--stw-grey-200);
    padding: 14px 0 16px;
    padding-left: 0;
    padding-right: 0;
}

.stw-bestsellers del.text-muted {
    color: var(--stw-grey-500) !important;
    text-decoration: line-through;
    font-size: 15px;
    font-weight: 600;
}

/* Prices are ink, not pink. They're wrapped in <strong class="ms-1">, so they
   inherited the pink below; this targets the amount itself rather than changing
   that rule, leaving any other bold text in the section as it was. */
.stw-bestsellers .woocommerce-Price-amount {
    color: var(--stw-ink);
}

.stw-bestsellers strong {
    color: var(--stw-pink);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.01em;
}

.stw-bestsellers .badge.text-bg-success {
    color: var(--stw-pink) !important;
    background: var(--stw-pink-100) !important;
    font-size: 11px;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 4px 8px;
}

/* The footer row must NOT wrap: on a sale item the price cluster (strikethrough
   + price + SAVE badge) is wide enough to claim the whole row, which pushes the
   button onto a second line and stretches it. Keeping the row on one line and
   letting the price cluster shrink instead makes the badge drop below the price
   inside its own box, with the button staying alongside. */
.stw-bestsellers .card-footer > .d-flex {
    flex-wrap: nowrap;
    gap: 10px;
}

/* min-width:0 lets this shrink below its intrinsic width so its contents wrap
   internally — without it, a flex item refuses to shrink past its content and
   the row overflows the card instead. */
.stw-bestsellers .card-footer > .d-flex > :first-child {
    min-width: 0;
}

/* Below lg the grid is 2-up and a card's content box is only ~115px, which is
   narrower than the button alone. Holding one row there squeezed the price to
   zero width and pushed the button past the card edge, so stack instead: price
   on its own line, button full width beneath it at a size that fits. */
@media (max-width: 991.98px) {
    .stw-bestsellers .card-footer > .d-flex {
        flex-wrap: wrap;
    }

    .stw-bestsellers .btn.btn-primary {
        flex: 1 1 100%;
        padding: 11px 10px;
        font-size: 14px;
    }
}

/* nowrap + flex-shrink:0 are load-bearing: the footer is a
   .d-flex.justify-content-between and the label here is whatever
   add_to_cart_text() returns — "View product" for variable and mix-and-match
   items, which is long enough that the button broke onto two lines and stretched
   the card next to the price and SAVE badge. */
.stw-bestsellers .btn.btn-primary {
    background: var(--stw-pink);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 18px;
    border-radius: 8px;
    border: 2px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 150ms, color 150ms, border-color 150ms;
}

.stw-bestsellers .btn.btn-primary:hover {
    background: #fff;
    color: var(--stw-pink);
    border-color: var(--stw-pink);
}