/* Multi-supplier main buy-box live counter (ms-buybox.js).
   Mirrors the "Other sellers" drawer counter (ms-drawer.css), sized to sit
   inline with the buy box's primary button. */

.ms-buybox-add-state[hidden],
.ms-buybox-cart-state[hidden] { display: none; }

.ms-buybox-cart-state {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
}
/* Mobile fixed bar: match the bar's horizontal breathing room (the bar itself
   only pads vertically). */
.fixed-button-cart > .ms-buybox-cart-state { padding: 0 12px; }

/* Temu-style pill: − qty + flanking flat tap targets. Pink to match brand. */
.ms-bb-counter {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    min-width: 124px;
    border: 1px solid rgb(255, 51, 153);
    border-radius: 999px;
    background: #ffffff;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 1px 2px rgba(255, 51, 153, 0.18);
}
.ms-bb-btn {
    appearance: none;
    background: transparent;
    border: none;
    color: rgb(255, 51, 153);
    width: 42px;
    height: 42px;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.ms-bb-btn:hover:not(:disabled) { background: rgba(255, 51, 153, 0.10); }
.ms-bb-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ms-bb-val {
    flex: 1 1 auto;
    text-align: center;
    min-width: 28px;
    padding: 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
    user-select: none;
}

/* "View cart" takes the primary button's footprint (inherits theme `.button`),
   just grows to fill the row beside the counter. */
.ms-bb-gotocart {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* Brand pink, matching the counter pill border and the "Other sellers" drawer.
   !important to beat the deeply-specific theme `.button` rules (and the
   journal-cache generated styles) on both desktop and the mobile fixed bar. */
.ms-bb-gotocart.button,
.ms-bb-gotocart.button:link,
.ms-bb-gotocart.button:visited {
    background: rgb(255, 51, 153) !important;
    border-color: rgb(255, 51, 153) !important;
    color: #ffffff !important;
}
.ms-bb-gotocart.button:hover,
.ms-bb-gotocart.button:focus {
    background: rgb(230, 30, 130) !important;
    border-color: rgb(230, 30, 130) !important;
    color: #ffffff !important;
}