/*
 * Carrito lateral (Side Cart Premium) — diseño "Carrito Sidebar" (Claude
 * Design). Carga después del CSS del plugin y de su inline de opciones;
 * los selectores van anclados en .xoo-wsc-modal para ganarles. Tokens
 * --bb-* y --shadow-* en style.css. Markup en templates/side-cart-woocommerce/
 * y template-parts/shipping/shipping-in-xoo-cart.php.
 */

/* ---------- Contenedor ---------- */

.xoo-wsc-modal .xoo-wsc-container {
    font-family: 'Nunito', sans-serif;
    color: var(--bb-ink);
    background: var(--bb-white);
    box-shadow: -12px 0 40px rgba(61, 58, 92, .18);
    overflow: hidden; /* que el radio recorte header/footer */
}

/* Desktop: el cajón está pegado al borde derecho → esquinas redondeadas solo a la izquierda */
@media (min-width: 721px) {
    .xoo-wsc-modal .xoo-wsc-container {
        border-radius: 24px 0 0 24px;
    }
}

.xoo-wsc-modal .xoo-wsc-header,
.xoo-wsc-modal .xoo-wsc-body,
.xoo-wsc-modal .xoo-wsc-footer {
    background: var(--bb-white);
    color: var(--bb-ink);
}

.xoo-wsc-modal .xoo-wsc-header {
    padding: 0;
    border-bottom: 1px solid var(--bb-line);
    box-shadow: none;
}

.xoo-wsc-modal .xoo-wsc-body {
    padding: 14px 18px 18px;
}

.xoo-wsc-modal .xoo-wsc-footer {
    padding: 10px 16px 12px; /* compacto: el footer es fixed */
    border-top: 1px solid var(--bb-line);
    box-shadow: 0 -8px 20px -18px rgba(61, 58, 92, .5);
}

/* Botones y píldoras */
.xoo-wsc-modal button {
    font-family: inherit;
}

.bb-sc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms, transform 150ms ease-out;
}

.xoo-wsc-modal .bb-sc__btn--primary,
.xoo-wsc-modal a.bb-sc__btn--primary {
    width: 100%;
    padding: 12px 16px;
    background: var(--color-primary-600) !important; /* el plugin pinta .xoo-wsc-btn con sus opciones */
    color: var(--bb-white) !important;
    font-size: 15px;
    box-shadow: 0 8px 18px -8px rgba(117, 121, 231, .55);
}

.xoo-wsc-modal .bb-sc__btn--primary:hover {
    background: var(--color-primary-700) !important;
}

.xoo-wsc-modal .bb-sc__btn--primary:active {
    transform: scale(.97);
}

.xoo-wsc-modal .bb-sc__btn--link,
.xoo-wsc-modal a.bb-sc__btn--link {
    width: 100%;
    padding: 8px;
    background: none !important;
    color: var(--bb-purple) !important;
    font-size: 14px;
    box-shadow: none;
}

.xoo-wsc-modal .bb-sc__btn--link:hover {
    text-decoration: underline;
}

.xoo-wsc-modal .bb-sc__btn--outline,
.xoo-wsc-modal a.bb-sc__btn--outline {
    flex: none;
    padding: 10px 14px;
    border: 1.5px solid var(--bb-line);
    background: var(--bb-white) !important;
    color: var(--bb-purple) !important;
    font-size: 13.5px;
    box-shadow: none;
}

.xoo-wsc-modal .bb-sc__btn--outline:hover {
    background: var(--bb-purple-50) !important;
    border-color: var(--bb-purple);
}

.bb-sc__actions-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.bb-sc__actions-row .bb-sc__btn--primary {
    flex: 1;
    width: auto;
    padding: 11px 14px;
}

/* Estado ocupado del botón de pago (spinner + "Actualizando…") */
.bb-sc__spinner {
    display: none;
    width: 15px;
    height: 15px;
    margin-right: 8px;
    border-radius: 999px;
    border: 2.5px solid rgba(255, 255, 255, .35);
    border-top-color: var(--bb-white);
    animation: bb-sc-spin 700ms linear infinite;
}

.bb-sc__pay-busy {
    display: none;
}

.xoo-wsc-modal.xoo-wsc-loading .bb-sc__spinner,
.xoo-wsc-modal.xoo-wsc-loading .bb-sc__pay-busy {
    display: inline-block;
}

.xoo-wsc-modal.xoo-wsc-loading .bb-sc__pay-label {
    display: none;
}

.xoo-wsc-modal .bb-sc__btn--ghost {
    flex: none;
    padding: 8px 14px;
    border: 1px solid var(--bb-line);
    background: var(--bb-white);
    color: var(--bb-purple);
    font-size: 13px;
}

.xoo-wsc-modal .bb-sc__btn--ghost:hover {
    background: var(--bb-purple-50);
    border-color: var(--bb-purple);
}

.bb-sc__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
}

.xoo-wsc-modal .bb-sc__chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 13px;
    border: 1px solid var(--bb-line);
    border-radius: 999px;
    background: var(--bb-white);
    color: var(--bb-ink);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
}

.xoo-wsc-modal .bb-sc__chip:hover {
    border-color: var(--bb-purple);
    background: var(--bb-purple-50);
}

.bb-sc__muted { color: var(--bb-ink-2); font-weight: 400; }
.bb-sc__free  { color: #1E9E6A; }

/* ---------- Header ---------- */

.xoo-wsc-modal .bb-sc__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    flex-wrap: wrap;
}

.xoo-wsc-modal .bb-sc__head .xoo-wsc-notice-container {
    flex: 0 0 100%;
    order: 10;
}

.bb-sc__head-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bb-purple-50);
    color: var(--bb-purple);
    flex: none;
}

.bb-sc__head-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.xoo-wsc-modal .xoo-wsch-text.bb-sc__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 19px;
    line-height: 1.2;
    color: var(--bb-ink);
    margin: 0;
    text-align: left;
}

.bb-sc__count {
    font-size: 12px;
    color: var(--bb-ink-2);
}

.xoo-wsc-modal .xoo-wsch-close.bb-sc__close {
    position: static;
    flex: none;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--bb-ink-2);
    font-size: 0; /* sin el glifo del icon-font del plugin */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms;
}

.xoo-wsc-modal .xoo-wsch-close.bb-sc__close::before {
    content: none;
}

.xoo-wsc-modal .xoo-wsch-close.bb-sc__close:hover {
    background: var(--bb-purple-50);
    color: var(--bb-ink);
}

/* Barra de progreso indeterminada bajo el header (mientras el modal carga) */
.xoo-wsc-modal .bb-sc__busy {
    display: none;
    height: 3px;
    background: var(--bb-purple-50);
    overflow: hidden;
}

.xoo-wsc-modal.xoo-wsc-loading .bb-sc__busy {
    display: block;
}

.bb-sc__busy-bar {
    display: block;
    width: 32%;
    height: 100%;
    border-radius: 999px;
    background: var(--bb-purple);
    animation: bb-sc-indeterminate 1.05s cubic-bezier(.65, 0, .35, 1) infinite;
}

@keyframes bb-sc-indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

@keyframes bb-sc-spin {
    to { transform: rotate(360deg); }
}

@keyframes bb-sc-toast-in {
    from { opacity: 0; transform: translateY(-10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

/* El loader del plugin se reemplaza por la barra + el botón ocupado */
.xoo-wsc-modal .xoo-wsc-loader {
    display: none !important;
}

/* Totales atenuados mientras se actualiza */
.xoo-wsc-modal .bb-sc__totals {
    transition: opacity 200ms ease, filter 200ms ease;
}

.xoo-wsc-modal.xoo-wsc-loading .bb-sc__totals {
    opacity: .45;
    filter: blur(1.2px);
}

/* ---------- Alertas: solo errores (las de éxito son redundantes) ----------
   Misma pieza para las nuestras (.bb-sc__alert, side-cart.js) y para los
   avisos del plugin (.xoo-wsc-notices), que se restilan; los de éxito se ocultan. */
.xoo-wsc-modal .xoo-wsc-notice-container {
    position: static;
}

.xoo-wsc-modal .xoo-wsc-notices {
    list-style: none;
    margin: 0;
    padding: 0;
}

.xoo-wsc-modal .xoo-wsc-notices li.xoo-wsc-notice-success,
.xoo-wsc-modal .xoo-wsc-notices li.xoo-wsc-notice-info {
    display: none !important;
}

.bb-sc__alert,
.xoo-wsc-modal .xoo-wsc-notices li.xoo-wsc-notice-error {
    position: absolute;
    z-index: 20;
    top: 72px;
    left: 14px;
    right: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 13px;
    border-radius: 16px;
    background: #FDECE9;
    border: 1px solid #F7C8C0;
    box-shadow: var(--shadow-pop);
    color: var(--bb-ink);
    font-size: 12.5px;
    line-height: 1.45;
    animation: bb-sc-toast-in 220ms cubic-bezier(.34, 1.4, .64, 1);
}

.bb-sc__alert--warn {
    background: #FFF4DC;
    border-color: #F2DDAA;
}

.xoo-wsc-modal .xoo-wsc-notices li.xoo-wsc-notice-error .xoo-wsc-icon-cross {
    display: none; /* icon-font del plugin: la alerta lleva su propio ícono vía ::before */
}

.xoo-wsc-modal .xoo-wsc-notices li.xoo-wsc-notice-error::before {
    content: '!';
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--bb-white);
    color: var(--bb-coral-deep);
    font-weight: 800;
    font-size: 15px;
}

.bb-sc__alert-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: var(--bb-white);
    color: var(--bb-coral-deep);
}

.bb-sc__alert--warn .bb-sc__alert-icon {
    color: #C58A1E;
}

.bb-sc__alert-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bb-sc__alert-title {
    font-weight: 800;
    font-size: 13.5px;
    line-height: 1.35;
    text-wrap: pretty;
}

.bb-sc__alert-text {
    color: var(--bb-ink-2);
    text-wrap: pretty;
}

.xoo-wsc-modal .bb-sc__alert-retry {
    align-self: flex-start;
    margin-top: 2px;
    padding: 2px 0;
    border: none;
    background: none;
    color: var(--bb-purple);
    font-weight: 800;
    font-size: 12.5px;
    text-decoration: underline;
    cursor: pointer;
}

.xoo-wsc-modal .bb-sc__alert-close {
    flex: none;
    display: inline-flex;
    padding: 2px;
    border: none;
    background: none;
    color: var(--bb-ink-2);
    cursor: pointer;
}

/* Ancla de la alerta: el propio cajón (position: fixed del plugin) ya es
   containing block de sus hijos absolutos — NO pisar su position. */

/* ---------- Estado vacío ---------- */

.xoo-wsc-modal .xoo-wsc-empty-cart.bb-sc__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 100%;
    padding: 28px 12px;
    text-align: center;
}

.bb-sc__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: var(--bb-purple-50);
    color: var(--bb-purple);
}

.bb-sc__empty-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bb-sc__empty-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 21px;
    color: var(--bb-ink);
}

.bb-sc__empty-copy {
    font-size: 14px;
    line-height: 1.55;
    color: var(--bb-ink-2);
    text-wrap: pretty;
}

/* ---------- Aviso "te guardamos el carrito" ---------- */

.xoo-wsc-modal .bb-sc__hold {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 4px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--bb-sky-50);
    color: var(--bb-ink);
    font-size: 12.5px;
    line-height: 1.4;
}

.xoo-wsc-modal .bb-sc__hold svg {
    flex: none;
    margin-top: 2px;
    color: var(--bb-purple);
}

.xoo-wsc-modal .bb-sc__hold[hidden] {
    display: none;
}

/* ---------- Productos ---------- */

.xoo-wsc-modal .xoo-wsc-products.bb-sc__items {
    display: block;
}

.xoo-wsc-modal .xoo-wsc-product.bb-sc__item {
    display: flex;
    align-items: flex-start; /* la foto no se estira con el cuerpo */
    gap: 12px;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--bb-line);
    background: transparent;
}

.xoo-wsc-modal .bb-sc__item-media {
    flex: none;
    align-self: self-start;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    overflow: hidden;
    padding: 0;
}

.xoo-wsc-modal .bb-sc__item-media a,
.xoo-wsc-modal .bb-sc__item-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    max-width: none;
}

.xoo-wsc-modal .bb-sc__item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.bb-sc__item-top {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.bb-sc__item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.xoo-wsc-modal .xoo-wsc-pname.bb-sc__item-name,
.xoo-wsc-modal .bb-sc__item-name a {
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--bb-ink);
    text-decoration: none;
    text-wrap: pretty;
}

/* Validación social: "+500 unidades vendidas" sobre el nombre */
.bb-sc__item-sales {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--bb-ink-2);
}

.xoo-wsc-modal .bb-sc__item-text .variation,
.xoo-wsc-modal .bb-sc__item-text dl {
    margin: 0;
    font-size: 11.5px;
    color: var(--bb-ink-2);
}

.xoo-wsc-modal .xoo-wsc-smr-del.bb-sc__item-remove {
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--bb-ink-2);
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}

.xoo-wsc-modal .xoo-wsc-smr-del.bb-sc__item-remove::before {
    content: none;
}

.xoo-wsc-modal .xoo-wsc-smr-del.bb-sc__item-remove:hover {
    background: #FDECE9;
    color: var(--bb-coral-deep);
}

.bb-sc__item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 2px;
}

/* Stepper del plugin, como píldora */
.xoo-wsc-modal .xoo-wsc-qty-box {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 2px;
    border: 1px solid var(--bb-line);
    border-radius: 999px;
    background: var(--bb-white);
}

.xoo-wsc-modal .xoo-wsc-qty-box .xoo-wsc-chng {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--bb-purple);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms;
}

.xoo-wsc-modal .xoo-wsc-qty-box .xoo-wsc-chng:hover {
    background: var(--bb-purple-50);
}

.xoo-wsc-modal input[type="number"].xoo-wsc-qty {
    width: 30px;
    height: 30px;
    min-width: 26px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    color: var(--bb-ink);
    -moz-appearance: textfield;
    appearance: textfield;
}

.xoo-wsc-modal input[type="number"].xoo-wsc-qty::-webkit-outer-spin-button,
.xoo-wsc-modal input[type="number"].xoo-wsc-qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bb-sc__item-qty {
    font-size: 13px;
    color: var(--bb-ink-2);
}

.bb-sc__item-prices {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Precio regular tachado (solo con descuento), arriba del total de línea */
.bb-sc__item-was,
.xoo-wsc-modal .bb-sc__item-was .amount {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--bb-ink-3);
    text-decoration: line-through;
}

.xoo-wsc-modal .xoo-wsc-smr-ptotal.bb-sc__item-total,
.xoo-wsc-modal .bb-sc__item-total .amount {
    font-weight: 800;
    font-size: 16px;
    color: var(--bb-ink);
}

.bb-sc__item-unit,
.xoo-wsc-modal .bb-sc__item-unit .amount {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--bb-ink-2);
}

/* ---------- Código postal ---------- */

.bb-sc__ship {
    margin-top: 16px;
}

.xoo-wsc-modal .bb-sc__cp-cta {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 0 0 10px;
    padding: 14px;
    border: 1.5px dashed var(--bb-purple);
    border-radius: 18px;
    background: var(--bb-purple-50);
    color: var(--bb-ink);
    text-align: left;
    cursor: pointer;
    transition: background 150ms;
}

.xoo-wsc-modal .bb-sc__cp-cta:hover {
    background: #E7E9FC;
}

.bb-sc__cp-cta-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: var(--bb-white);
    color: var(--bb-purple);
}

.bb-sc__cp-cta-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bb-sc__cp-cta-title {
    font-weight: 800;
    font-size: 14.5px;
}

.bb-sc__cp-cta-copy {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--bb-ink-2);
    text-wrap: pretty;
}

.bb-sc__cp-cta-chev {
    flex: none;
    color: var(--bb-purple);
}

.bb-sc__cp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 0 10px;
}

.bb-sc__cp-current {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bb-sc__cp-label {
    font-size: 13px;
    color: var(--bb-ink-2);
}

.bb-sc__cp-value {
    font-weight: 800;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-sc__cp-cta[hidden],
.bb-sc__cp-row[hidden],
.bb-sc__cp-search[hidden],
.bb-sc__cp-results[hidden],
.bb-sc__cp-empty[hidden],
.bb-sc__cp-recent[hidden],
.bb-sc__cp-clear[hidden] {
    display: none;
}

.bb-sc__cp-search {
    margin: 0 0 10px;
    padding: 12px;
    border-radius: 18px;
    background: var(--bb-purple-50);
}

.bb-sc__cp-search-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.bb-sc__cp-search-title {
    font-weight: 800;
    font-size: 13px;
}

.xoo-wsc-modal .bb-sc__cp-cancel {
    border: none;
    background: none;
    padding: 2px 4px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bb-ink-2);
    cursor: pointer;
}

.xoo-wsc-modal .bb-sc__cp-cancel:hover {
    color: var(--bb-ink);
}

.bb-sc__cp-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    border: 1.5px solid var(--bb-line);
    border-radius: 14px;
    background: var(--bb-white);
    color: var(--bb-ink-2);
    transition: border-color 150ms;
}

.bb-sc__cp-field:focus-within {
    border-color: var(--bb-purple);
}

.xoo-wsc-modal input.bb-sc__cp-input {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 11px 0;
    border: none;
    outline: none;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--bb-ink);
}

.xoo-wsc-modal .bb-sc__cp-clear {
    flex: none;
    display: inline-flex;
    padding: 2px;
    border: none;
    background: none;
    color: var(--bb-ink-2);
    cursor: pointer;
}

.bb-sc__cp-results {
    margin-top: 8px;
    max-height: 208px;
    overflow-y: auto;
    border-radius: 14px;
    background: var(--bb-white);
    box-shadow: var(--shadow-card);
}

.xoo-wsc-modal .bb-sc__cp-result {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid var(--bb-line);
    background: var(--bb-white);
    text-align: left;
    cursor: pointer;
    transition: background 120ms;
}

.xoo-wsc-modal .bb-sc__cp-result:last-child {
    border-bottom: none;
}

.xoo-wsc-modal .bb-sc__cp-result.is-active,
.xoo-wsc-modal .bb-sc__cp-result:hover {
    background: var(--bb-purple-50);
}

.bb-sc__cp-result-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--bb-sky-50);
    color: var(--bb-purple);
}

.bb-sc__cp-result-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bb-sc__cp-result-city {
    font-weight: 700;
    font-size: 14px;
    color: var(--bb-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-sc__cp-result-prov {
    font-size: 11.5px;
    color: var(--bb-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bb-sc__cp-result-cp {
    flex: none;
    font-weight: 800;
    font-size: 13px;
    color: var(--bb-purple);
}

.bb-sc__cp-empty {
    margin-top: 8px;
    padding: 14px;
    border-radius: 14px;
    background: var(--bb-white);
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-ink-2);
    text-wrap: pretty;
}

.bb-sc__cp-recent {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bb-sc__cp-recent .bb-sc__chips {
    justify-content: flex-start;
}

.bb-sc__cp-recent-title {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bb-ink-2);
}

/* ---------- Métodos de envío (radio-cards) ---------- */

.bb-sc__methods {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.xoo-wsc-modal .bb-sc__method {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    margin: 0;
    padding: 13px 14px;
    border: 1.5px solid var(--bb-line);
    border-radius: 16px;
    background: var(--bb-white);
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms, background 150ms;
}

.xoo-wsc-modal .bb-sc__method[data-active="true"] {
    border-color: var(--bb-purple);
    background: var(--bb-purple-50);
}

.xoo-wsc-modal .bb-sc__method-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.bb-sc__method-dot {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 999px;
    border: 2px solid var(--bb-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 150ms;
}

.bb-sc__method-dot::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--bb-purple);
    opacity: 0;
    transition: opacity 150ms;
}

.bb-sc__method[data-active="true"] .bb-sc__method-dot {
    border-color: var(--bb-purple);
}

.bb-sc__method[data-active="true"] .bb-sc__method-dot::after,
.bb-sc__method-input:checked ~ .bb-sc__method-dot::after {
    opacity: 1;
}

.bb-sc__method-input:focus-visible ~ .bb-sc__method-dot {
    outline: 2px solid var(--bb-purple-deep);
    outline-offset: 2px;
}

.bb-sc__method-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bb-sc__method-title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--bb-ink);
}

.bb-sc__method-sub {
    font-size: 12.5px;
    color: var(--bb-ink-2);
}

.bb-sc__method-price,
.xoo-wsc-modal .bb-sc__method-price .amount {
    flex: none;
    font-weight: 800;
    font-size: 14.5px;
    color: var(--bb-ink);
}

.bb-sc__method-price.bb-sc__free {
    font-size: 13px;
    color: #1E9E6A;
}

/* En el carrito lateral la urgencia de corte va sin info/popover (queda
   apretado en la card); el popover vive en la ficha y el checkout */
.xoo-wsc-modal .bb-cutoff-wrap {
    display: none;
}

/* ---------- Progreso hacia bonificación / envío gratis ----------
   Card "showProgress" del diseño "Carrito Sidebar": solo con envío elegido. */

.bb-sc__progress {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 8px;
    padding: 13px 14px;
    border-radius: 16px;
    background: var(--bb-sky-50, #EAF8FE);
    border: 1px solid rgba(117, 121, 231, .14);
}

.bb-sc__progress--free {
    background: #E6F6EE;
    border-color: rgba(30, 158, 106, .24);
}

.bb-sc__progress-head {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.bb-sc__progress-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--bb-white, #fff);
    color: var(--bb-purple, #7579E7);
}

.bb-sc__progress--free .bb-sc__progress-icon {
    color: #1E9E6A;
}

.bb-sc__progress-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bb-sc__progress-title {
    font-weight: 800;
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--bb-ink, #3D3A5C);
    text-wrap: pretty;
}

.bb-sc__progress--free .bb-sc__progress-title {
    color: #1E9E6A;
}

.bb-sc__progress-sub {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--bb-ink-2, #6B6890);
    text-wrap: pretty;
}

.bb-sc__progress-bar {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--bb-white, #fff);
    overflow: hidden;
}

.bb-sc__progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: var(--bb-purple, #7579E7);
    transition: width 320ms ease;
}

.bb-sc__progress--free .bb-sc__progress-fill {
    background: #1E9E6A;
}

.bb-sc__progress-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(61, 58, 92, .22);
}

.bb-sc__progress-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--bb-ink-2, #6B6890);
}

.bb-sc__progress-key {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.bb-sc__progress-key::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
}

.bb-sc__progress-key.is-on {
    color: #1E9E6A;
}

/* Regular tachado arriba del precio cuando el envío está bonificado
   (misma receta que .bb-sc__item-was en los ítems con descuento) */
.bb-sc__method-price .bb-shipping-was {
    display: block;
    text-align: right;
}
.bb-sc__method-price .bb-shipping-was,
.xoo-wsc-modal .bb-sc__method-price .bb-shipping-was .amount {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--bb-ink-3);
    text-decoration: line-through;
}

.bb-sc__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 2px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bb-purple);
}

.bb-sc__no-methods {
    margin: 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--bb-coral-50);
    font-size: 13px;
    line-height: 1.5;
    color: var(--bb-ink);
}

/* ---------- Upsells, compactos ---------- */

.xoo-wsc-modal #xoo-cart-upsellings {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--bb-line);
}

.xoo-wsc-modal #xoo-cart-upsellings h3 {
    margin: 0 0 10px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--bb-ink) !important;
}

.xoo-wsc-modal #xoo-cart-upsellings .ui-recommendations-card--horizontal {
    border: 1px solid var(--bb-line);
    border-radius: 14px;
    box-shadow: none;
}

/* ---------- Footer: totales y acciones ---------- */

.bb-sc__totals {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.xoo-wsc-modal .xoo-wsc-ft-amt.bb-sc__row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.35;
    color: var(--bb-ink-2);
}

.xoo-wsc-modal .bb-sc__row-value,
.xoo-wsc-modal .bb-sc__row-value .amount {
    color: var(--bb-ink);
    font-weight: 700;
}

.xoo-wsc-modal .bb-sc__row-value.bb-sc__free,
.xoo-wsc-modal .bb-sc__row-value.bb-sc__free .amount {
    color: #1E9E6A;
}

/* Regular tachado en la fila Envío del footer: inline, al lado del valor */
.xoo-wsc-modal .bb-sc__row-value .bb-shipping-was,
.xoo-wsc-modal .bb-sc__row-value .bb-shipping-was .amount {
    font-size: 12px;
    font-weight: 400;
    color: var(--bb-ink-3);
    text-decoration: line-through;
}
.xoo-wsc-modal .bb-sc__row-value .bb-shipping-was {
    margin-right: 2px;
}

.xoo-wsc-modal .xoo-wsc-ft-amt-total.bb-sc__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 2px 0 0;
    padding: 6px 0 0;
    border-top: 1px dashed var(--bb-line);
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--bb-ink);
}

.xoo-wsc-modal .bb-sc__total .xoo-wsc-ft-amt-label {
    font-size: 16px;
}

.xoo-wsc-modal .bb-sc__total .xoo-wsc-ft-amt-value,
.xoo-wsc-modal .bb-sc__total .amount {
    font-size: 20px;
    font-weight: 600;
    color: var(--bb-ink);
}

.xoo-wsc-modal .bb-sc__total small {
    font-family: 'Nunito', sans-serif;
    font-size: 13px;
}

.xoo-wsc-modal .xoo-wsc-ft-buttons-cont.bb-sc__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.xoo-wsc-modal .xoo-wsc-ft-extras:empty {
    display: none;
}

/* ---------- Mobile ---------- */

@media (max-width: 480px) {
    .xoo-wsc-modal .xoo-wsc-body {
        padding: 12px 14px 16px;
    }
    .xoo-wsc-modal .xoo-wsc-footer {
        padding: 8px 14px 10px;
    }
    .xoo-wsc-modal .bb-sc__head {
        padding: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bb-sc__btn,
    .xoo-wsc-modal .bb-sc__method,
    .xoo-wsc-modal .bb-sc__cp-result,
    .xoo-wsc-modal .bb-sc__totals {
        transition: none;
    }
    .bb-sc__busy-bar,
    .bb-sc__spinner,
    .bb-sc__alert,
    .xoo-wsc-modal .xoo-wsc-notices li.xoo-wsc-notice-error {
        animation: none;
    }
}

.bb-sc__item-sales {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-muted, #6B6890);
}