/* ==========================================================================
   Rollpix_AdvancedCart — estilos base
   Los colores usan CSS custom properties `--rollpix-ac-*` definidas en :root
   via ConfigViewModel::getCssVariables() y pueden overrideaarse desde el
   theme del cliente sin tocar el módulo.
   ========================================================================== */

/* ==========================================================================
   Bundle Simple View — card "Contenido del pack" que reemplaza el selector
   nativo de opciones del bundle en PDP cuando `bundle/simple_view_enabled`
   está on. Fase 1-J.2.
   ========================================================================== */

.rollpix-ac-bundle-pack {
    border: 1px solid #e5e7eb;
    border-radius: var(--rollpix-ac-radius, 8px);
    padding: 16px 18px 14px;
    margin: 0 0 20px;
    background: #fff;
}

.rollpix-ac-bundle-pack__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
}

.rollpix-ac-bundle-pack__icon {
    flex: 0 0 20px;
    color: var(--rollpix-ac-primary, #1f2937);
}

.rollpix-ac-bundle-pack__title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--rollpix-ac-text, #1f2937);
    line-height: 1.2;
}

.rollpix-ac-bundle-pack__count {
    flex: 0 0 auto;
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
}

.rollpix-ac-bundle-pack__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rollpix-ac-bundle-pack__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
}

.rollpix-ac-bundle-pack__thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid #f3f4f6;
    border-radius: 6px;
    background: #fafafa;
}

.rollpix-ac-bundle-pack__thumb--placeholder {
    display: inline-block;
}

.rollpix-ac-bundle-pack__meta {
    flex: 1 1 auto;
    min-width: 0;
}

.rollpix-ac-bundle-pack__name {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    color: var(--rollpix-ac-text, #1f2937);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.rollpix-ac-bundle-pack__qty {
    flex: 0 0 auto;
    min-width: 36px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--rollpix-ac-primary, #1f2937);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
}

.rollpix-ac-add-to-cart {
    display: block;
    width: 100%;
    max-width: 280px;
    font-family: inherit;
}

/* State machine: button | success | stepper.
   button → idle visible, success/stepper hidden
   success → success span visible (verde + check), stepper hidden
   stepper → stepper visible, button hidden */
.rollpix-ac-add-to-cart[data-state="button"] .rollpix-ac-stepper,
.rollpix-ac-add-to-cart[data-state="success"] .rollpix-ac-stepper {
    display: none !important;
}
.rollpix-ac-add-to-cart[data-state="stepper"] .rollpix-ac-add-btn {
    display: none !important;
}

.rollpix-ac-add-btn__idle,
.rollpix-ac-add-btn__success {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.rollpix-ac-add-to-cart[data-state="button"] .rollpix-ac-add-btn__idle {
    display: inline-flex;
}
.rollpix-ac-add-to-cart[data-state="success"] .rollpix-ac-add-btn__success {
    display: inline-flex;
}

.rollpix-ac-add-btn__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ---------- Botón Add-to-Cart (estilo Hyvä reference) ----------
   Full width, py-3.5, rounded-lg, fondo color marca, transition de
   color cuando entra al estado success (verde). */

.rollpix-ac-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 24px;
    min-height: 48px;
    background-color: var(--rollpix-ac-primary, #1f2937);
    color: #fff !important;
    border: none;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}
/* Luma tiene reglas .action.primary:hover con color:#fff pero otros
   themes pueden overrideaarlo a gris. Forzamos white en todos los
   estados interactivos del botón + iconos SVG que heredan currentColor. */
.rollpix-ac-add-btn:hover,
.rollpix-ac-add-btn:focus,
.rollpix-ac-add-btn:active,
.rollpix-ac-add-btn:visited {
    color: #fff !important;
}
.rollpix-ac-add-btn:hover {
    background-color: var(--rollpix-ac-primary-hover, #111827);
}
.rollpix-ac-add-btn:active {
    transform: scale(0.98);
}
.rollpix-ac-add-btn:focus-visible {
    outline: 2px solid var(--rollpix-ac-primary, #1f2937);
    outline-offset: 2px;
}
.rollpix-ac-add-btn svg,
.rollpix-ac-add-btn span {
    color: inherit !important;
}

/* ==========================================================================
   Variante --listing: botón compacto para PLPs, related, upsell, cross-sell
   y widgets de producto. Mismo look & feel del PDP pero con ancho y alto
   reducidos para encajar en cards de grid densas. El stepper matchea la
   altura y el ancho del botón add-to-cart del PLP (no hereda del PDP).
   Fase 1-K.
   ========================================================================== */

.rollpix-ac-add-to-cart--listing {
    margin-top: 8px;
    max-width: 200px;
}

/* Botón add-to-cart del listing: altura fija 34px, font 12px, padding
   compacto. Proporcionado para cards de PLP donde el CTA compite con
   imagen, nombre, precio y wishlist. */
.rollpix-ac-add-to-cart--listing .rollpix-ac-add-btn {
    padding: 6px 12px !important;
    min-height: 34px !important;
    height: 34px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    border-radius: 6px !important;
}
.rollpix-ac-add-to-cart--listing .rollpix-ac-add-btn__icon {
    width: 14px !important;
    height: 14px !important;
}
.rollpix-ac-add-to-cart--listing .rollpix-ac-add-btn__idle,
.rollpix-ac-add-to-cart--listing .rollpix-ac-add-btn__success {
    gap: 5px !important;
}

/* Stepper del listing: MISMA altura (34px) que el botón add-to-cart
   compacto. Ancho controlado via max-width del wrapper (200px).
   Forzado con doble-clase + !important para no heredar del PDP. */
.rollpix-ac-add-to-cart--listing .rollpix-ac-stepper {
    height: 34px !important;
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    border-radius: 6px !important;
    overflow: hidden;
}
.rollpix-ac-add-to-cart--listing .rollpix-ac-stepper__btn {
    width: 30px !important;
    min-width: 30px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    border-radius: 0 !important;
    flex: 0 0 30px !important;
}
.rollpix-ac-add-to-cart--listing .rollpix-ac-stepper__input {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    height: 34px !important;
    font-size: 12px !important;
    line-height: 34px !important;
    padding: 0 !important;
    border: none !important;
    text-align: center !important;
}

/* Los forms nativos Luma quedan ocultos via display:none cuando el
   listing-enhancer los marca como `rollpix-ac-listing-enhanced`. Esto
   evita FOUC si el enhancer corre después del paint inicial. */
form[data-role="tocart-form"].rollpix-ac-listing-enhanced {
    display: none !important;
}

/* Low stock indicator: span con ícono warning + "¡Solo quedan N!" que
   aparece debajo del botón add-to-cart (PDP) o en la card del listing.
   Usa el warning color CSS var del módulo. Fase 1-I. */
.rollpix-ac-low-stock {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--rollpix-ac-warning, #f59e0b);
    line-height: 1.2;
}
.rollpix-ac-low-stock svg {
    flex: 0 0 14px;
}
.rollpix-ac-add-to-cart--listing .rollpix-ac-low-stock {
    font-size: 11px;
    margin-top: 4px;
}

/* Slot freeshipping: container vacío que el módulo externo
   Rollpix_FreeShippingBar rellena. Sólo aparece si tiene hijos. */
.rollpix-ac-freeshipping-slot:empty {
    display: none;
}
.rollpix-ac-cart__freeshipping-slot {
    margin: 0 0 16px;
}
.rollpix-ac-drawer__freeshipping-slot {
    padding: 0 20px;
}
/* Slot freeshipping dentro del summary panel — ubicado debajo del
   grand total y arriba del botón checkout. Padding horizontal 0 para
   que el bar alinee con los demás rows del summary; margen vertical
   para separarlo del grand total y del shipping estimator. El bar
   inyectado (`.freeship-progress`) hereda sus propios colores desde
   las CSS vars del módulo externo. */
.rollpix-ac-cart__summary-freeshipping-slot {
    margin: 14px 0 18px;
}
.rollpix-ac-cart__summary-freeshipping-slot:not(:empty) {
    padding-top: 14px;
    border-top: 1px solid #e5e7eb;
}

/* Estimador de envío en cart summary (Fase 1-I) */
.rollpix-ac-cart__shipping-estimator {
    margin: 16px 0;
    border-top: 1px solid #f3f4f6;
    padding-top: 14px;
}
.rollpix-ac-cart__shipping-estimator-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--rollpix-ac-text, #1f2937);
}
.rollpix-ac-cart__shipping-estimator-toggle svg {
    transition: transform 0.2s ease;
}
.rollpix-ac-cart__shipping-estimator[data-state="open"] .rollpix-ac-cart__shipping-estimator-toggle svg {
    transform: rotate(180deg);
}
.rollpix-ac-cart__shipping-estimator-body {
    display: none;
    padding-top: 10px;
}
.rollpix-ac-cart__shipping-estimator[data-state="open"] .rollpix-ac-cart__shipping-estimator-body {
    display: block;
}
.rollpix-ac-cart__shipping-estimator-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}
.rollpix-ac-cart__shipping-input {
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
}
.rollpix-ac-cart__shipping-estimate-btn {
    width: 100%;
    height: 36px;
    background: var(--rollpix-ac-primary, #1f2937);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.rollpix-ac-cart__shipping-estimate-btn:hover {
    background: var(--rollpix-ac-primary-hover, #111827);
}
.rollpix-ac-cart__shipping-results {
    margin-top: 10px;
    font-size: 12px;
}
.rollpix-ac-cart__shipping-loading,
.rollpix-ac-cart__shipping-empty {
    padding: 8px;
    color: #6b7280;
    text-align: center;
}
.rollpix-ac-cart__shipping-error {
    padding: 8px;
    color: var(--rollpix-ac-error, #dc2626);
    background: #fef2f2;
    border-radius: 4px;
    text-align: center;
}
.rollpix-ac-cart__shipping-methods {
    list-style: none;
    margin: 0;
    padding: 0;
}
.rollpix-ac-cart__shipping-method {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f3f4f6;
}
.rollpix-ac-cart__shipping-method:last-child {
    border-bottom: none;
}
.rollpix-ac-cart__shipping-method-amount {
    font-weight: 700;
    color: var(--rollpix-ac-text, #1f2937);
}

/* Success state: fondo verde sólido + check icon + "¡Agregado!".
   El verde aparece por ~successFlashMs (default 700ms) antes de
   transicionar al stepper. */
.rollpix-ac-add-to-cart[data-state="success"] .rollpix-ac-add-btn {
    background-color: var(--rollpix-ac-success, #16a34a) !important;
    cursor: default;
}
.rollpix-ac-add-to-cart[data-state="success"] .rollpix-ac-add-btn:hover {
    background-color: var(--rollpix-ac-success, #16a34a) !important;
}

/* ---------- Stepper transformable (estilo Hyvä reference) ----------
   h-12 (48px), rounded-lg, border-2 del color marca, botones grandes
   con fondo del color marca y texto blanco. */

.rollpix-ac-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 44px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--rollpix-ac-radius, 8px);
    overflow: hidden;
    position: relative;
    transition: opacity 0.15s ease;
}

/* Stepper transformable dentro del PDP add-to-cart wrapper:
   full width, h-12, border 2px del color marca, botones grandes
   con fondo color marca y texto blanco — estilo Hyvä reference. */
.rollpix-ac-add-to-cart .rollpix-ac-stepper {
    display: flex;
    width: 100%;
    height: 48px;
    border: 2px solid var(--rollpix-ac-primary, #1f2937);
}
.rollpix-ac-add-to-cart .rollpix-ac-stepper__btn {
    background-color: var(--rollpix-ac-primary, #1f2937) !important;
    color: #fff !important;
    width: 56px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}
.rollpix-ac-add-to-cart .rollpix-ac-stepper__btn:hover:not(:disabled),
.rollpix-ac-add-to-cart .rollpix-ac-stepper__btn:focus:not(:disabled),
.rollpix-ac-add-to-cart .rollpix-ac-stepper__btn:active:not(:disabled) {
    background-color: var(--rollpix-ac-primary-hover, #111827) !important;
    color: #fff !important;
}
.rollpix-ac-add-to-cart .rollpix-ac-stepper__input {
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    align-self: stretch;
    border: none !important;
    border-radius: 0;
    background: #fff;
    padding: 0 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 44px; /* match stepper inner height (48 - 2*2 border) */
    box-shadow: none !important;
}
.rollpix-ac-add-to-cart .rollpix-ac-stepper__input:focus {
    outline: none;
    box-shadow: none !important;
    border: none !important;
}

/* Leyenda opcional al lado de la cantidad en el stepper — estilo
   Mercado Libre ("2 en tu carrito"). Solo renderizada en PDP y
   listings, nunca en cart page ni minicart (el template del cart
   tiene su propio DOM y el minicart usa el native KO hoisted).
   El ancho del input cede espacio: en PDP el input pasa de flex-grow
   a auto cuando el suffix es sibling, y el suffix ocupa el flex:1. */
.rollpix-ac-add-to-cart .rollpix-ac-stepper__input ~ .rollpix-ac-stepper__suffix {
    flex: 1 1 auto;
    align-self: center;
    padding: 0 8px 0 0;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    line-height: 1.2;
    white-space: nowrap;
    text-align: left;
    user-select: none;
}
/* Cuando hay suffix, el input deja de ser flex-grow:1 y se contenta
   con su ancho minimo (solo para mostrar el numero). El suffix toma
   el grow. Usamos :has() — soporte ya 92% global, suficiente para v1. */
.rollpix-ac-add-to-cart .rollpix-ac-stepper:has(.rollpix-ac-stepper__suffix) .rollpix-ac-stepper__input {
    flex: 0 0 auto;
    min-width: 28px;
    width: auto;
    padding: 0 0 0 12px;
    text-align: left;
}
/* Fallback sin :has() — reducimos padding del input igual, con cost
   de un ancho un poco mas grande. */
@supports not selector(:has(*)) {
    .rollpix-ac-add-to-cart .rollpix-ac-stepper__input {
        padding-right: 4px;
    }
}

/* Variante listing: en cards del PLP / widgets el stepper es mas chico
   y el suffix tiene que caber sin romper el wrap. */
.rollpix-ac-add-to-cart--listing .rollpix-ac-stepper__suffix {
    font-size: 11px;
    padding: 0 6px 0 0;
}
.rollpix-ac-add-to-cart--listing .rollpix-ac-stepper:has(.rollpix-ac-stepper__suffix) .rollpix-ac-stepper__input {
    padding-left: 8px;
}

.rollpix-ac-stepper--loading {
    opacity: 0.6;
    pointer-events: none;
}

.rollpix-ac-stepper__btn {
    width: 42px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--rollpix-ac-text, #1f2937);
    border: none;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rollpix-ac-stepper__btn:hover:not(:disabled) {
    background-color: #f3f4f6;
}
.rollpix-ac-stepper__btn:active:not(:disabled) {
    background-color: #e5e7eb;
}
.rollpix-ac-stepper__btn:disabled {
    color: #d1d5db;
    cursor: not-allowed;
}
.rollpix-ac-stepper__btn:focus-visible {
    outline: 2px solid var(--rollpix-ac-primary, #1f2937);
    outline-offset: -2px;
}

.rollpix-ac-stepper__input {
    width: 52px;
    height: 100%;
    border: none;
    border-left: 1px solid #e5e7eb;
    border-right: 1px solid #e5e7eb;
    background: transparent;
    color: var(--rollpix-ac-text, #1f2937);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    -moz-appearance: textfield;
    appearance: textfield;
    transition: background-color 0.3s ease;
}
.rollpix-ac-stepper__input::-webkit-outer-spin-button,
.rollpix-ac-stepper__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rollpix-ac-stepper__input:focus {
    outline: none;
    background-color: #f9fafb;
}

/* Flash feedback cuando el valor fue snappeado al increment válido más cercano */
.rollpix-ac-stepper__input--flash {
    animation: rollpixAcFlash 0.45s ease;
}
@keyframes rollpixAcFlash {
    0%   { background-color: var(--rollpix-ac-warning, #f59e0b); color: #fff; }
    100% { background-color: transparent; color: inherit; }
}

/* ---------- Reducción de motion para accesibilidad ---------- */

@media (prefers-reduced-motion: reduce) {
    .rollpix-ac-add-btn,
    .rollpix-ac-stepper,
    .rollpix-ac-stepper__btn,
    .rollpix-ac-stepper__input {
        transition: none;
    }
    .rollpix-ac-stepper__input--flash {
        animation: none;
    }
}

/* ==========================================================================
   El mini cart nativo de Luma ya está oculto por default: jQuery UI
   dropdownDialog envuelve `.block-minicart` con un `.ui-dialog` que
   arranca con `display: none`. Solo se muestra si el user clickea el
   `.showcart` y dispara el dropdown — pero como el interceptor prevent
   default ese click, nunca se abre. No hace falta hide adicional.

   Dejamos solo el hide del popup genérico por si algún hook lo dispara.
   ========================================================================== */

.rollpix-ac-enabled .minicart-wrapper .ui-dialog.popup {
    display: none !important;
}

.rollpix-ac-body-locked {
    overflow: hidden;
}

/* ==========================================================================
   Drawer — layout base, 3 posiciones, 4 animaciones, backdrop con blur
   ========================================================================== */

.rollpix-ac-drawer {
    position: fixed;
    inset: 0;
    z-index: 9500;
    pointer-events: none;
    visibility: hidden;
}

.rollpix-ac-drawer[data-state="opening"],
.rollpix-ac-drawer[data-state="open"] {
    pointer-events: auto;
    visibility: visible;
}

.rollpix-ac-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}
.rollpix-ac-drawer[data-state="open"] .rollpix-ac-drawer__backdrop {
    opacity: 1;
    -webkit-backdrop-filter: blur(var(--rollpix-ac-drawer-blur, 0px));
    backdrop-filter: blur(var(--rollpix-ac-drawer-blur, 0px));
}
.rollpix-ac-drawer[data-backdrop="false"] .rollpix-ac-drawer__backdrop {
    display: none;
}

.rollpix-ac-drawer__content {
    position: absolute;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.18);
    will-change: transform, opacity;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.35s ease;
}

/* --- Posición: right --- */
.rollpix-ac-drawer[data-position="right"] .rollpix-ac-drawer__content {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--rollpix-ac-drawer-width-desktop, 400px);
    max-width: var(--rollpix-ac-drawer-width-mobile, 90%);
}

/* --- Posición: left --- */
.rollpix-ac-drawer[data-position="left"] .rollpix-ac-drawer__content {
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rollpix-ac-drawer-width-desktop, 400px);
    max-width: var(--rollpix-ac-drawer-width-mobile, 90%);
}

/* --- Posición: bottom --- */
.rollpix-ac-drawer[data-position="bottom"] .rollpix-ac-drawer__content {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: var(--rollpix-ac-drawer-bottom-max, 85vh);
    border-top-left-radius: var(--rollpix-ac-radius, 8px);
    border-top-right-radius: var(--rollpix-ac-radius, 8px);
}

/* ==========================================================================
   Bottom mode rediseñado: layout horizontal con items como tarjetas en una
   fila que scrollea horizontalmente, y a la derecha un panel fijo con
   subtotal + checkout button. El bottom drawer no necesita ser tan alto
   como el lateral porque la info se distribuye en horizontal.
   ========================================================================== */

/* El content del bottom drawer tiene altura fija más chica */
.rollpix-ac-drawer[data-position="bottom"] .rollpix-ac-drawer__content {
    max-height: var(--rollpix-ac-drawer-bottom-max, 380px);
}

/* Body interno: el shell ya tiene flex column con header y body */
.rollpix-ac-drawer[data-position="bottom"] .rollpix-ac-drawer__body {
    overflow: hidden;
}

/* block-content: grid de 2 columnas. Items a la izquierda (spans las 3
   rows para ocupar toda la altura), panel derecho con una row spacer
   arriba (1fr) para empujar subtotal+merged-actions al bottom. */
.rollpix-ac-drawer[data-position="bottom"] #minicart-content-wrapper > .block-content {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px;
    grid-template-rows: 1fr auto auto;
    grid-template-areas:
        "items ."
        "items subtotal"
        "items actions";
    gap: 0;
    height: 100%;
    min-height: 0;
}
.rollpix-ac-drawer[data-position="bottom"] #minicart-content-wrapper > .block-content > .rollpix-ac-drawer__merged-actions {
    grid-area: actions;
    padding: 0 24px 20px !important;
    background: transparent !important;
    justify-content: flex-end !important;
    align-self: end;
}

.rollpix-ac-drawer[data-position="bottom"] .minicart-items-wrapper {
    grid-area: items;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 16px 16px 16px 24px !important;
    height: auto !important;
    max-height: none !important;
    border-right: 1px solid #e5e7eb;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: #9ca3af transparent;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items-wrapper::-webkit-scrollbar {
    height: 8px;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items-wrapper::-webkit-scrollbar-track {
    background: transparent;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items-wrapper::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items-wrapper::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

.rollpix-ac-drawer[data-position="bottom"] .minicart-items {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: max-content !important;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* Cada item es una tarjeta vertical compacta de 200px de ancho */
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-item {
    flex: 0 0 200px !important;
    width: 200px !important;
    padding: 10px !important;
    border: 1px solid #e5e7eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin: 0 !important;
    background: #fff;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-item:last-child {
    border-bottom: 1px solid #e5e7eb !important;
}

.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-item > .product {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    height: 100%;
}

/* Thumbnail centrada arriba */
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-item-photo {
    flex: 0 0 90px !important;
    width: 100% !important;
    height: 90px !important;
    margin: 0 auto !important;
    align-self: center;
    max-width: 90px;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-image-container,
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-image-wrapper {
    width: 90px !important;
    height: 90px !important;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-image-photo {
    width: 90px !important;
    height: 90px !important;
}

/* Detalles abajo del thumbnail */
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-item-details {
    flex: 1 1 auto !important;
    align-items: flex-start !important;
    text-align: left;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-item-name {
    font-size: 12px !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    overflow: hidden !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    max-height: 32px;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product.options {
    font-size: 10px !important;
    margin-top: 2px !important;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-item-pricing {
    margin-top: 4px !important;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .price {
    font-size: 13px !important;
    font-weight: 700 !important;
}

/* Actions row (stepper + trash) compacta abajo del precio */
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .rollpix-ac-mc-actions {
    margin-top: 6px !important;
    justify-content: space-between !important;
}

/* Panel derecho — subtotal arriba, actions abajo.
   El subtotal es una row horizontal con label a la izquierda y precio a
   la derecha, con el MISMO horizontal padding que el merged-actions para
   que las columnas queden perfectamente alineadas con el botón "Finalizar
   compra" y el link "Ver y editar carrito" debajo. */
.rollpix-ac-drawer[data-position="bottom"] #minicart-content-wrapper > .block-content > .subtotal {
    grid-area: subtotal;
    border-top: none !important;
    align-self: end;
    padding: 20px 24px 8px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 12px;
}
.rollpix-ac-drawer[data-position="bottom"] .subtotal > .label,
.rollpix-ac-drawer[data-position="bottom"] .subtotal > span:first-child {
    font-size: 13px !important;
    color: #6b7280 !important;
    font-weight: 400 !important;
    flex: 0 1 auto;
    text-align: left;
}
.rollpix-ac-drawer[data-position="bottom"] .subtotal .price-container,
.rollpix-ac-drawer[data-position="bottom"] .subtotal .price-wrapper {
    flex: 0 0 auto;
    text-align: right;
}
.rollpix-ac-drawer[data-position="bottom"] .subtotal .price {
    font-size: 18px !important;
    font-weight: 700 !important;
    white-space: nowrap;
}

/* Las .actions originales quedan vacías después del _consolidateActions y
   se mantienen con `display: none` heredado de la regla base — NO les
   reasignamos grid-area acá porque, si lo hacemos, el browser las apila
   encima del merged wrapper y bloquea los clicks del checkout/viewcart
   aunque estén empty. */

/* Header del bottom drawer: full width arriba, mismo estilo que lateral */
.rollpix-ac-drawer[data-position="bottom"] .rollpix-ac-drawer__header {
    border-bottom: 1px solid #e5e7eb;
}

/* --- Animación: slide (default) --- */
.rollpix-ac-drawer[data-animation="slide"][data-position="right"] .rollpix-ac-drawer__content {
    transform: translateX(100%);
}
.rollpix-ac-drawer[data-animation="slide"][data-position="left"] .rollpix-ac-drawer__content {
    transform: translateX(-100%);
}
.rollpix-ac-drawer[data-animation="slide"][data-position="bottom"] .rollpix-ac-drawer__content {
    transform: translateY(100%);
}
.rollpix-ac-drawer[data-animation="slide"][data-state="open"] .rollpix-ac-drawer__content {
    transform: translate(0, 0);
}

/* --- Animación: fade --- */
.rollpix-ac-drawer[data-animation="fade"] .rollpix-ac-drawer__content {
    opacity: 0;
}
.rollpix-ac-drawer[data-animation="fade"][data-state="open"] .rollpix-ac-drawer__content {
    opacity: 1;
}

/* --- Animación: slide-fade --- */
.rollpix-ac-drawer[data-animation="slide-fade"][data-position="right"] .rollpix-ac-drawer__content {
    transform: translateX(25%);
    opacity: 0;
}
.rollpix-ac-drawer[data-animation="slide-fade"][data-position="left"] .rollpix-ac-drawer__content {
    transform: translateX(-25%);
    opacity: 0;
}
.rollpix-ac-drawer[data-animation="slide-fade"][data-position="bottom"] .rollpix-ac-drawer__content {
    transform: translateY(25%);
    opacity: 0;
}
.rollpix-ac-drawer[data-animation="slide-fade"][data-state="open"] .rollpix-ac-drawer__content {
    transform: translate(0, 0);
    opacity: 1;
}

/* --- Animación: scale --- */
.rollpix-ac-drawer[data-animation="scale"] .rollpix-ac-drawer__content {
    transform: scale(0.94);
    opacity: 0;
    transform-origin: center center;
}
.rollpix-ac-drawer[data-animation="scale"][data-state="open"] .rollpix-ac-drawer__content {
    transform: scale(1);
    opacity: 1;
}

/* --- Drawer inner UI --- */

.rollpix-ac-drawer__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.rollpix-ac-drawer__title-count {
    color: #9ca3af;
    font-weight: 400;
    font-size: 0.9em;
    margin-left: 4px;
}
.rollpix-ac-drawer__title-count:empty {
    display: none;
}
.rollpix-ac-drawer__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--rollpix-ac-text, #1f2937);
    letter-spacing: 0;
}

.rollpix-ac-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: var(--rollpix-ac-text, #1f2937);
    border: none;
    border-radius: var(--rollpix-ac-radius, 8px);
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.rollpix-ac-drawer__close:hover {
    background-color: #f3f4f6;
}
.rollpix-ac-drawer__close:focus-visible {
    outline: 2px solid var(--rollpix-ac-primary, #1f2937);
    outline-offset: 2px;
}

.rollpix-ac-drawer__body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.rollpix-ac-drawer__fallback {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}
.rollpix-ac-drawer__fallback p {
    margin: 0 0 20px;
    font-size: 15px;
}
.rollpix-ac-drawer__continue {
    display: inline-flex;
    padding: 10px 20px;
    background: transparent;
    color: var(--rollpix-ac-primary, #1f2937);
    border: 1px solid var(--rollpix-ac-primary, #1f2937);
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.rollpix-ac-drawer__continue:hover {
    background-color: var(--rollpix-ac-primary, #1f2937);
    color: #fff;
}

/* ==========================================================================
   Overrides del `#minicart-content-wrapper` nativo cuando está hoisted
   dentro del drawer. Magento/Luma renderiza todo el contenido del mini cart
   dentro de este wrapper via KnockoutJS template (items, subtotal, acciones,
   cross-sells). Los selectores actúan sobre los descendientes renderizados.
   ========================================================================== */

.rollpix-ac-drawer #minicart-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

.rollpix-ac-drawer #minicart-content-wrapper > .block-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

/* Luma muestra un título "You have N items" + close button propios — los
   escondemos porque el shell ya tiene su header con el botón cerrar. */
.rollpix-ac-drawer #minicart-content-wrapper > .block-title,
.rollpix-ac-drawer #minicart-content-wrapper .action.close {
    display: none !important;
}

.rollpix-ac-drawer .minicart-items-wrapper {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 24px !important;
    margin: 0 !important;
    border: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
}

/* Reorder via flex `order`: items list arriba (con scroll), después
   merged-actions (Ver carrito + Finalizar compra), y subtotal AL FINAL
   justo arriba del bottom del drawer. El user pidió explícitamente que
   el subtotal sea lo último visible (sobre el footer) para que el call
   to action quede más arriba sin tener que mirar hasta abajo. */
.rollpix-ac-drawer .block-content > .items-total {
    display: none !important;
}
.rollpix-ac-drawer .minicart-items-wrapper {
    order: 1;
}
.rollpix-ac-drawer .block-content > .rollpix-ac-drawer__merged-actions {
    order: 98;
    flex: 0 0 auto;
}
.rollpix-ac-drawer .block-content > .actions {
    order: 99;
    flex: 0 0 auto;
}
.rollpix-ac-drawer .block-content > .subtotal {
    order: 100;
    flex: 0 0 auto;
}
/* Native subtitle "Recently added items" — hide */
.rollpix-ac-drawer .block-content > .subtitle,
.rollpix-ac-drawer #minicart-content-wrapper .subtitle {
    display: none !important;
}

.rollpix-ac-drawer .minicart-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ==========================================================================
   Line items del drawer — layout compacto horizontal.
   Cada item ocupa ~72-80px de alto (vs ~150px del template nativo Luma).
   ========================================================================== */

.rollpix-ac-drawer .minicart-items .product-item {
    padding: 6px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #e5e7eb !important;
    list-style: none;
}
.rollpix-ac-drawer .minicart-items .product-item:last-child {
    border-bottom: none !important;
}

/* ==========================================================================
   Line item enter / exit animations — Fase 1-J.3.
   Las clases las aplica drawer-minicart-enhancer.js al recibir eventos
   ITEM_ADDED / click en delete respectivamente. Duraciones deben matchear
   las constantes MC_ENTER_MS / MC_EXIT_MS del JS.
   ========================================================================== */

/* Enter: el nuevo item fue movido al TOP del UL por drawer-minicart-enhancer.
   La animación lo hace crecer desde chico: max-height desde 0 (empuja a
   los items existentes hacia abajo), scale desde 0.5 (crece hasta su
   tamaño natural), y un highlight del color primario que decae al final.
   Dura ~1400ms para que el user note claramente el ingreso.
   Para bottom drawer (horizontal) usamos max-width en vez de max-height. */
@keyframes rollpix-ac-mc-enter-vertical {
    0% {
        max-height: 0;
        opacity: 0;
        transform: scale(0.55);
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-top-width: 0 !important;
        border-bottom-width: 0 !important;
        background-color: color-mix(in srgb, var(--rollpix-ac-primary, #1f2937) 32%, transparent);
    }
    45% {
        max-height: 320px;
        opacity: 1;
        transform: scale(0.7);
        background-color: color-mix(in srgb, var(--rollpix-ac-primary, #1f2937) 32%, transparent);
    }
    75% {
        max-height: 320px;
        opacity: 1;
        transform: scale(1);
        background-color: color-mix(in srgb, var(--rollpix-ac-primary, #1f2937) 20%, transparent);
    }
    100% {
        max-height: 320px;
        opacity: 1;
        transform: scale(1);
        background-color: transparent;
    }
}

@keyframes rollpix-ac-mc-enter-horizontal {
    0% {
        max-width: 0;
        opacity: 0;
        transform: scale(0.55);
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        border-left-width: 0 !important;
        border-right-width: 0 !important;
        background-color: color-mix(in srgb, var(--rollpix-ac-primary, #1f2937) 32%, transparent);
    }
    45% {
        max-width: 220px;
        opacity: 1;
        transform: scale(0.7);
        background-color: color-mix(in srgb, var(--rollpix-ac-primary, #1f2937) 32%, transparent);
    }
    75% {
        max-width: 220px;
        opacity: 1;
        transform: scale(1);
        background-color: color-mix(in srgb, var(--rollpix-ac-primary, #1f2937) 20%, transparent);
    }
    100% {
        max-width: 220px;
        opacity: 1;
        transform: scale(1);
        background-color: transparent;
    }
}

.rollpix-ac-drawer .minicart-items .product-item.rollpix-ac-mc-enter {
    transform-origin: center left;
    overflow: hidden;
    animation: rollpix-ac-mc-enter-vertical 1400ms ease-out;
}
.rollpix-ac-drawer[data-position="bottom"] .minicart-items .product-item.rollpix-ac-mc-enter {
    transform-origin: left center;
    animation: rollpix-ac-mc-enter-horizontal 1400ms ease-out;
}

/* Exit: item se va con fade + slide a la izquierda, y colapsa su altura
   vertical al final para que el resto del list suba suave. ~400ms total,
   el JS espera este tiempo antes de llamar al endpoint removeItem. */
@keyframes rollpix-ac-mc-exit-kf {
    0% {
        opacity: 1;
        transform: translateX(0);
        max-height: 240px;
    }
    45% {
        opacity: 0;
        transform: translateX(-24px);
        max-height: 240px;
    }
    100% {
        opacity: 0;
        transform: translateX(-24px);
        max-height: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-width: 0 !important;
    }
}
.rollpix-ac-drawer .minicart-items .product-item.rollpix-ac-mc-exit {
    animation: rollpix-ac-mc-exit-kf 400ms ease-in forwards;
    overflow: hidden !important;
    pointer-events: none;
}

/* A11y: respetar prefers-reduced-motion desactivando las animaciones —
   los elementos siguen apareciendo/desapareciendo pero sin transiciones. */
@media (prefers-reduced-motion: reduce) {
    .rollpix-ac-drawer .minicart-items .product-item.rollpix-ac-mc-enter,
    .rollpix-ac-drawer .minicart-items .product-item.rollpix-ac-mc-exit {
        animation: none !important;
    }
}
/* Neutralizar cualquier margin/padding vertical heredado de Luma en los
   descendientes del line item. Regla amplia pero scopeada al drawer. */
.rollpix-ac-drawer .minicart-items .product-item *,
.rollpix-ac-drawer .minicart-items .product-item *::before,
.rollpix-ac-drawer .minicart-items .product-item *::after {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Contenedor principal: flex row — thumbnail a la izquierda, details a la derecha */
.rollpix-ac-drawer .minicart-items .product-item > .product {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Thumbnail compacta: 56x56 */
.rollpix-ac-drawer .minicart-items .product-item-photo {
    flex: 0 0 56px !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
}
.rollpix-ac-drawer .minicart-items .product-image-container {
    display: block !important;
    width: 56px !important;
    height: 56px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.rollpix-ac-drawer .minicart-items .product-image-wrapper {
    padding-bottom: 0 !important;
    height: 56px !important;
}
.rollpix-ac-drawer .minicart-items .product-image-photo {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    position: static !important;
    max-width: none !important;
}

/* Details: columna que crece */
.rollpix-ac-drawer .minicart-items .product-item-details {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
}

/* Nombre del producto — 1 línea con ellipsis */
.rollpix-ac-drawer .minicart-items .product-item-name {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--rollpix-ac-text, #1f2937);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rollpix-ac-drawer .minicart-items .product-item-name a {
    color: inherit !important;
    text-decoration: none !important;
}

/* Options (variantes de configurable/bundle/custom options): mostrar siempre
   inline, sin toggle nativo. Es info crítica para diferenciar items con
   mismo nombre (ej. mismo producto en colores distintos). */
.rollpix-ac-drawer .minicart-items .product.options {
    font-size: 11px !important;
    color: #6b7280 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}
/* Hide native "See Details" toggle and "Options Details" subtitle —
   mostramos directo los dt/dd sin colapsar. */
.rollpix-ac-drawer .minicart-items .product.options > .toggle,
.rollpix-ac-drawer .minicart-items .product.options .subtitle {
    display: none !important;
}
/* Force the content visible regardless of native collapsible state */
.rollpix-ac-drawer .minicart-items .product.options > .content,
.rollpix-ac-drawer .minicart-items .product.options [data-role="content"] {
    display: block !important;
    visibility: visible !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Compact dl: "Color: Azul" inline, one line per option */
.rollpix-ac-drawer .minicart-items .product.options dl {
    margin: 0 !important;
    padding: 0 !important;
}
.rollpix-ac-drawer .minicart-items .product.options dl dt,
.rollpix-ac-drawer .minicart-items .product.options dl dd {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    font-weight: normal !important;
}
.rollpix-ac-drawer .minicart-items .product.options dl dt::after {
    content: ': ';
}
.rollpix-ac-drawer .minicart-items .product.options dl dd::after {
    content: ' ';
}

/* Pricing row: stepper + precio + trash en una sola línea horizontal */
.rollpix-ac-drawer .minicart-items .product-item-pricing {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

/* Precio unitario/subtotal compacto */
.rollpix-ac-drawer .minicart-items .price-container,
.rollpix-ac-drawer .minicart-items .price-wrapper,
.rollpix-ac-drawer .minicart-items .price {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--rollpix-ac-text, #1f2937);
    margin: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

/* Precio tachado (original) para items con descuento activo. Se inyecta
   via drawer-minicart-enhancer._renderOriginalPrice cuando
   `_advanced.items[i].original_price_formatted` está seteado. */
.rollpix-ac-drawer .minicart-items .rollpix-ac-mc-price-old {
    display: inline-block;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af;
    text-decoration: line-through;
}

/* Stepper compacto dentro del line item */
.rollpix-ac-stepper--line {
    height: 30px !important;
    margin: 0 !important;
    display: inline-flex !important;
    flex: 0 0 auto;
}
.rollpix-ac-stepper--line .rollpix-ac-stepper__btn {
    width: 26px !important;
    font-size: 14px !important;
}
.rollpix-ac-stepper--line .rollpix-ac-stepper__input {
    width: 32px !important;
    font-size: 13px !important;
}

/* El container `.product.actions` original queda vacío después de que el
   enhancer mueve el .action.delete a nuestro actions row. Lo ocultamos. */
.rollpix-ac-drawer .minicart-items .product.actions {
    display: none !important;
}
.rollpix-ac-drawer .minicart-items .product.actions .action.edit {
    display: none !important;
}

/* Actions row como SIBLING del .product-item-details dentro del .product
   flex container. El layout final del item es:
     [photo 56px] [details 1fr] [actions auto: stepper + trash]
   Todo en una sola row horizontal aprovechando el ancho del minicart.
   El actions tiene `flex: 0 0 auto` y `margin-left: auto` no hace falta
   porque el details ya tiene flex 1 que empuja al actions a la derecha. */
.rollpix-ac-drawer .minicart-items .rollpix-ac-mc-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}
.rollpix-ac-drawer .minicart-items .action.delete {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 !important;
    margin: 0 !important;
    color: #9ca3af;
    background: transparent;
    border: none;
    border-radius: 4px;
    text-decoration: none !important;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.rollpix-ac-drawer .minicart-items .action.delete:hover {
    color: var(--rollpix-ac-error, #dc2626);
    background: #fef2f2;
}
/* El icon nativo de Luma es un pseudo-element — lo normalizamos en tamaño */
.rollpix-ac-drawer .minicart-items .action.delete::before {
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 !important;
    color: inherit !important;
}
/* Esconder el texto "Remove" si es visible (algunos themes lo muestran) */
.rollpix-ac-drawer .minicart-items .action.delete > span:not([class]) {
    display: none !important;
}

/* El subtotal nativo por item (x-text del KO) — algunos templates muestran
   "Qty X" o similar; lo ocultamos si apareciese en formato extra. */
.rollpix-ac-drawer .minicart-items .product-item-qty .label,
.rollpix-ac-drawer .minicart-items .product-item-qty > label {
    display: none !important;
}

.rollpix-ac-drawer .subtotal {
    padding: 16px 24px 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    background: #fff;
    position: relative;
    transition: opacity 0.15s ease;
}
/* Recalculating: el subtotal queda levemente atenuado. El spinner es un
   span inyectado por el enhancer JS justo antes del precio (ver
   _setRecalculating en drawer-minicart-enhancer.js). */
.rollpix-ac-drawer .subtotal.rollpix-ac-recalculating {
    opacity: 0.75;
}
.rollpix-ac-recalc-spinner {
    display: inline-block;
    vertical-align: middle;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    margin-left: auto;
    align-self: center;
    border: 2px solid var(--rollpix-ac-border, #e5e7eb);
    border-top-color: var(--rollpix-ac-primary, #1f2937);
    border-radius: 50%;
    animation: rollpixAcSpin 0.6s linear infinite;
    pointer-events: none;
    flex-shrink: 0;
}
/* En bottom mode el subtotal es flex column, no row. Resetear el
   margin-left: auto que no aplica y agregar margen vertical. */
.rollpix-ac-drawer[data-position="bottom"] .rollpix-ac-recalc-spinner {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 4px;
    align-self: flex-start;
}
@keyframes rollpixAcSpin {
    to { transform: rotate(360deg); }
}
.rollpix-ac-drawer .subtotal > .label,
.rollpix-ac-drawer .subtotal > span:first-child {
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    text-transform: none;
}
.rollpix-ac-drawer .subtotal .price-container,
.rollpix-ac-drawer .subtotal .price-wrapper,
.rollpix-ac-drawer .subtotal .price {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: var(--rollpix-ac-text, #1f2937);
}

/* Las .actions originales quedan vac\u00edas despu\u00e9s que el enhancer JS
   movi\u00f3 sus children al merged wrapper. Las ocultamos. */
.rollpix-ac-drawer .block-content > .actions {
    display: none !important;
}

/* Merged actions wrapper: contiene .primary y .secondary consolidados,
   renderizados en flex column con el secondary (viewcart) ARRIBA del
   primary (checkout button). El orden se controla via CSS order. */
.rollpix-ac-drawer__merged-actions {
    padding: 8px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
}
.rollpix-ac-drawer__merged-actions > .secondary {
    order: -1;
}
.rollpix-ac-drawer__merged-actions > .primary {
    order: 0;
}
/* Ocultar children vac\u00edos (ej. PayPal paylater wrapper sin contenido) */
.rollpix-ac-drawer__merged-actions > .primary:empty,
.rollpix-ac-drawer__merged-actions > .secondary:empty {
    display: none;
}

.rollpix-ac-drawer .action.primary.checkout,
.rollpix-ac-drawer .action.primary.checkout:link,
.rollpix-ac-drawer .action.primary.checkout:visited,
.rollpix-ac-drawer .action.primary.checkout:hover,
.rollpix-ac-drawer .action.primary.checkout:active,
.rollpix-ac-drawer .action.primary.checkout:focus {
    color: var(--rollpix-ac-primary-text, #fff);
    text-decoration: none;
}
.rollpix-ac-drawer .action.primary.checkout {
    width: 100%;
    padding: 14px 20px;
    background-color: var(--rollpix-ac-primary, #1f2937);
    border: none;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.rollpix-ac-drawer .action.primary.checkout:hover {
    background-color: var(--rollpix-ac-primary-hover, #111827);
}

/* "View and Edit Cart" — antes era un botón con borde, ahora es text link
   centrado debajo del primary checkout, matching Hyvä reference */
.rollpix-ac-drawer .action.viewcart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 0;
    background: transparent !important;
    color: #6b7280 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}
.rollpix-ac-drawer .action.viewcart:hover {
    color: var(--rollpix-ac-text, #1f2937) !important;
    background: transparent !important;
    text-decoration: underline !important;
}

.rollpix-ac-drawer .items-total {
    padding: 12px 24px;
    font-size: 13px;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
}

/* Stepper hoisted dentro de un line item del drawer (versión compacta) */
.rollpix-ac-stepper--line {
    height: 36px;
    margin: 8px 0 4px;
    display: inline-flex;
}
.rollpix-ac-stepper--line .rollpix-ac-stepper__btn {
    width: 32px;
    font-size: 15px;
}
.rollpix-ac-stepper--line .rollpix-ac-stepper__input {
    width: 44px;
    font-size: 14px;
}

/* Slot para Rollpix_FreeShippingBar (u otros módulos que quieran inyectar
   contenido arriba de los line items del drawer). Se mantiene vacío por
   default; el módulo externo agrega children y los estilos los aporta él. */
.rollpix-ac-drawer__freeshipping-slot {
    flex: 0 0 auto;
}
.rollpix-ac-drawer__freeshipping-slot:empty {
    display: none;
}

/* Luma pone el label "Qty" + "Update" button junto al input — ya los
   ocultamos vía inline style en el enhancer. Estos fallback CSS los
   aseguran si el enhancer aún no corrió o si el markup tiene variantes. */
.rollpix-ac-drawer .product-item .details-qty[style*="none"] {
    display: none !important;
}
.rollpix-ac-drawer .product-item .details-qty .label {
    display: none;
}

/* ==========================================================================
   FAB (Floating Cart Button)
   ========================================================================== */

.rollpix-ac-fab {
    position: fixed;
    width: 56px;
    height: 56px;
    padding: 0;
    background-color: var(--rollpix-ac-primary, #1f2937);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 9000;
    transform: translateY(16px) scale(0.9);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease, background-color 0.15s ease;
}

.rollpix-ac-fab[data-position="bottom-right"] {
    right: var(--rollpix-ac-fab-offset-x, 20px);
    bottom: var(--rollpix-ac-fab-offset-y, 20px);
}
.rollpix-ac-fab[data-position="bottom-left"] {
    left: var(--rollpix-ac-fab-offset-x, 20px);
    bottom: var(--rollpix-ac-fab-offset-y, 20px);
}

.rollpix-ac-fab[data-visible="true"] {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.rollpix-ac-fab[data-drawer-open="true"] {
    transform: translateY(16px) scale(0.9);
    opacity: 0;
    pointer-events: none;
}

.rollpix-ac-fab:hover {
    background-color: var(--rollpix-ac-primary-hover, #111827);
}
.rollpix-ac-fab:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.rollpix-ac-fab__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background-color: var(--rollpix-ac-error, #dc2626);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
    .rollpix-ac-drawer__backdrop,
    .rollpix-ac-drawer__content,
    .rollpix-ac-fab {
        transition: none;
    }
}

/* ==========================================================================
   Toasts — 6 posiciones, 4 tipos, stack vertical, undo + hover-pause
   ========================================================================== */

.rollpix-ac-toasts {
    position: fixed;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    pointer-events: none;
    max-width: 100%;
    /* Offset desde el top en posiciones top-* para no tapar el header
       (donde vive el icono de cart). El default 140px corresponde a un
       Luma vanilla con welcome bar (~30px) + main header con logo/search/cart
       icon (~80px) + algunos px de respiración. Override-able via CSS var
       desde el theme si el header tiene altura distinta. */
    --rollpix-ac-toast-top-offset: 140px;
}

.rollpix-ac-toasts[data-position="top-right"]    { top: var(--rollpix-ac-toast-top-offset); right: 0; }
.rollpix-ac-toasts[data-position="top-left"]     { top: var(--rollpix-ac-toast-top-offset); left: 0; }
.rollpix-ac-toasts[data-position="top-center"]   { top: var(--rollpix-ac-toast-top-offset); left: 50%; transform: translateX(-50%); align-items: center; }
.rollpix-ac-toasts[data-position="bottom-right"] { bottom: 0; right: 0; flex-direction: column-reverse; }
.rollpix-ac-toasts[data-position="bottom-left"]  { bottom: 0; left: 0; flex-direction: column-reverse; }
.rollpix-ac-toasts[data-position="bottom-center"]{ bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }

.rollpix-ac-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 280px;
    max-width: 420px;
    padding: 14px 16px;
    background: #fff;
    border-left: 4px solid var(--rollpix-ac-primary, #1f2937);
    border-radius: var(--rollpix-ac-radius, 8px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    transform: translateX(110%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.2s ease;
    will-change: transform, opacity;
}
.rollpix-ac-toast[data-state="open"] {
    transform: translateX(0);
    opacity: 1;
}
.rollpix-ac-toast[data-state="closing"] {
    transform: translateX(110%);
    opacity: 0;
}

.rollpix-ac-toasts[data-position$="-left"] .rollpix-ac-toast,
.rollpix-ac-toasts[data-position$="-left"] .rollpix-ac-toast[data-state="closing"] {
    transform: translateX(-110%);
}
.rollpix-ac-toasts[data-position$="-left"] .rollpix-ac-toast[data-state="open"] {
    transform: translateX(0);
}

.rollpix-ac-toasts[data-position$="-center"] .rollpix-ac-toast,
.rollpix-ac-toasts[data-position$="-center"] .rollpix-ac-toast[data-state="closing"] {
    transform: translateY(-20px) scale(0.96);
}
.rollpix-ac-toasts[data-position$="-center"] .rollpix-ac-toast[data-state="open"] {
    transform: translateY(0) scale(1);
}

.rollpix-ac-toast--success { border-left-color: var(--rollpix-ac-success, #16a34a); }
.rollpix-ac-toast--error   { border-left-color: var(--rollpix-ac-error,   #dc2626); }
.rollpix-ac-toast--warning { border-left-color: var(--rollpix-ac-warning, #f59e0b); }
.rollpix-ac-toast--info    { border-left-color: var(--rollpix-ac-primary, #1f2937); }

.rollpix-ac-toast__icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rollpix-ac-primary, #1f2937);
}
.rollpix-ac-toast--success .rollpix-ac-toast__icon { color: var(--rollpix-ac-success, #16a34a); }
.rollpix-ac-toast--error   .rollpix-ac-toast__icon { color: var(--rollpix-ac-error,   #dc2626); }
.rollpix-ac-toast--warning .rollpix-ac-toast__icon { color: var(--rollpix-ac-warning, #f59e0b); }

.rollpix-ac-toast__thumbnail {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: calc(var(--rollpix-ac-radius, 8px) / 2);
    background: #f3f4f6;
}
.rollpix-ac-toast__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rollpix-ac-toast__content {
    flex: 1 1 auto;
    min-width: 0;
}
.rollpix-ac-toast__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--rollpix-ac-text, #1f2937);
    margin: 0 0 4px;
    line-height: 1.3;
}
.rollpix-ac-toast__message {
    font-size: 14px;
    color: var(--rollpix-ac-text, #1f2937);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.rollpix-ac-toast__actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.rollpix-ac-toast__action {
    padding: 6px 12px;
    background: transparent;
    color: var(--rollpix-ac-primary, #1f2937);
    border: 1px solid var(--rollpix-ac-primary, #1f2937);
    border-radius: calc(var(--rollpix-ac-radius, 8px) / 2);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rollpix-ac-toast__action:hover {
    background: var(--rollpix-ac-primary, #1f2937);
    color: #fff;
}
.rollpix-ac-toast__action:focus-visible {
    outline: 2px solid var(--rollpix-ac-primary, #1f2937);
    outline-offset: 2px;
}

.rollpix-ac-toast__close {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}
.rollpix-ac-toast__close:hover {
    color: var(--rollpix-ac-text, #1f2937);
}

/* ==========================================================================
   Skeletons — utility classes para loading state
   ========================================================================== */

.rollpix-ac-skeleton {
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: rollpixAcSkeleton 1.4s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
    color: transparent !important;
}
.rollpix-ac-skeleton--text      { height: 14px; margin-bottom: 6px; }
.rollpix-ac-skeleton--title     { height: 18px; margin-bottom: 8px; }
.rollpix-ac-skeleton--price     { height: 16px; width: 80px; }
.rollpix-ac-skeleton--button    { height: 44px; border-radius: var(--rollpix-ac-radius, 8px); }
.rollpix-ac-skeleton--thumbnail { aspect-ratio: 1; border-radius: var(--rollpix-ac-radius, 8px); }

@keyframes rollpixAcSkeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .rollpix-ac-toast,
    .rollpix-ac-skeleton {
        transition: none;
        animation: none;
    }
}

/* ==========================================================================
   Cart page rediseñada (checkout_cart_index)
   Layout 2 columnas desktop (items 66% + summary sticky 33%),
   1 columna mobile con CTA fixed bottom.
   ========================================================================== */

.rollpix-ac-cart-form {
    background: #fff;
}

/* En cart page, ampliamos el `.page-main` de Luma de 1280px default a
   1440px para dar más espacio horizontal al grid tabular de items.
   MANTENEMOS los márgenes boxed del body (padding lateral del page-main
   + margin auto) — sin esto el contenido del cart se pega a los bordes
   de la ventana y rompe el look-and-feel del theme. */
body.checkout-cart-index .page-main {
    max-width: 1440px !important;
}

/* `.rollpix-ac-cart` es el contenedor INTERNO del form — solo items.
   El summary es el block nativo `.cart-summary` que Magento renderiza
   FUERA del form, como sibling dentro de `.cart-container`. No hace
   falta un grid 2-col aca: el 2-col layout ya lo provee el theme via
   `.cart-container { display: grid }` o flex.

   Usamos display: block para ocupar todo el ancho del `.form-cart`.
   Un grid 2-col como teniamos antes dejaba una columna fantasma vacia
   a la derecha del grid de items (el "margen purpura" que se veia
   entre items y summary).*/
.rollpix-ac-cart {
    display: block;
    padding: 24px 0;
}

.rollpix-ac-cart__items {
    min-width: 0;
}

/* La regla `.cart-summary { background: none }` saca el background
   gris default del panel de summary como pidio el user. No tocamos
   el width/float de .form-cart ni .cart-summary — Luma usa 73%/23%
   con 4% de gap natural. Cualquier margin-right adicional causaria
   overflow y wrap (form-cart queda abajo del summary en vez de al
   costado). */
body.checkout-cart-index .cart-summary {
    background: none;
}

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

.rollpix-ac-cart__empty {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--rollpix-ac-radius, 8px);
}
.rollpix-ac-cart__empty p {
    margin: 0 0 20px;
    font-size: 16px;
    color: #6b7280;
}
.rollpix-ac-cart__continue {
    display: inline-flex;
    padding: 12px 28px;
    background: var(--rollpix-ac-primary, #1f2937);
    color: #fff;
    text-decoration: none;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.15s ease;
}
.rollpix-ac-cart__continue:hover {
    background: var(--rollpix-ac-primary-hover, #111827);
    color: #fff;
    text-decoration: none;
}

/* ---------- Header de items ---------- */

.rollpix-ac-cart__items-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.rollpix-ac-cart__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--rollpix-ac-text, #1f2937);
}
.rollpix-ac-cart__count {
    color: #9ca3af;
    font-weight: 500;
    font-size: 18px;
    margin-left: 6px;
}
.rollpix-ac-cart__clear {
    padding: 8px 16px;
    background: transparent;
    color: #6b7280;
    border: 1px solid #e5e7eb;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.rollpix-ac-cart__clear:hover {
    color: var(--rollpix-ac-error, #dc2626);
    border-color: var(--rollpix-ac-error, #dc2626);
    background: #fef2f2;
}

/* ---------- Grilla tabular de items ----------
   Layout en 5 columnas: [photo 72] [info 1fr] [qty auto] [price auto] [subtotal auto].
   El header de columnas arriba usa el mismo grid-template-columns para
   alinear los labels con cada celda. Cada item es una row horizontal
   chata, sin stacking vertical innecesario. */

/* Grid columns: [photo] [info] [qty] [price] [subtotal]. Info es 1fr con
   min 300px para que el nombre del producto tenga espacio real (~2x el
   ancho anterior). Las columnas auxiliares quedan lo más compactas
   posible. */
.rollpix-ac-cart__list-header {
    display: grid;
    grid-template-columns: 72px minmax(280px, 1fr) 120px 120px 130px;
    gap: 16px;
    align-items: center;
    padding: 12px 20px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-bottom: 0;
    border-radius: var(--rollpix-ac-radius, 8px) var(--rollpix-ac-radius, 8px) 0 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
}
.rollpix-ac-cart__list-header .rollpix-ac-cart__header-product {
    grid-column: 1 / 3;
}
.rollpix-ac-cart__list-header .rollpix-ac-cart__header-qty {
    text-align: center;
}
.rollpix-ac-cart__list-header .rollpix-ac-cart__header-price,
.rollpix-ac-cart__list-header .rollpix-ac-cart__header-subtotal {
    text-align: right;
}

.rollpix-ac-cart__list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-top: 0;
    border-radius: 0 0 var(--rollpix-ac-radius, 8px) var(--rollpix-ac-radius, 8px);
    overflow: hidden;
}

.rollpix-ac-cart__item {
    display: grid;
    grid-template-columns: 72px minmax(280px, 1fr) 120px 120px 130px;
    gap: 16px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #e5e7eb;
}
.rollpix-ac-cart__item:last-child {
    border-bottom: none;
}

.rollpix-ac-cart__item-photo {
    display: block;
    width: 72px;
    height: 72px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
    text-decoration: none;
    align-self: center;
}
.rollpix-ac-cart__item-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rollpix-ac-cart__item-details {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rollpix-ac-cart__item-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--rollpix-ac-text, #1f2937);
    text-decoration: none;
    line-height: 1.3;
    margin-bottom: 0;
    word-break: break-word;
}
.rollpix-ac-cart__item-name:hover {
    color: var(--rollpix-ac-primary, #1f2937);
    text-decoration: none;
}
.rollpix-ac-cart__item-sku {
    font-size: 12px;
    color: #9ca3af;
    margin-bottom: 2px;
}
.rollpix-ac-cart__item-options {
    margin: 4px 0 6px;
    padding: 0;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
.rollpix-ac-cart__item-option {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.rollpix-ac-cart__item-option dt {
    margin: 0;
    font-weight: 600;
    color: #4b5563;
}
.rollpix-ac-cart__item-option dd {
    margin: 0;
}
.rollpix-ac-cart__item-price {
    font-size: 14px;
    color: var(--rollpix-ac-text, #1f2937);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
    text-align: right;
}
.rollpix-ac-cart__item-price-old {
    color: #9ca3af;
    text-decoration: line-through;
    font-size: 12px;
}
.rollpix-ac-cart__item-price-main {
    color: var(--rollpix-ac-text, #1f2937);
    font-weight: 600;
}
.rollpix-ac-cart__item-price-alt,
.rollpix-ac-cart__item-subtotal-alt {
    display: block;
    width: 100%;
    font-size: 11px;
    font-weight: 400;
    color: #9ca3af;
}
.rollpix-ac-cart__item-messages {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    font-size: 12px;
}
.rollpix-ac-cart__item-message {
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 4px;
}
.rollpix-ac-cart__item-message--notice {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}
.rollpix-ac-cart__item-message--error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Columna Cantidad: contiene el stepper + botón trash, centrados en la
   celda (120px de ancho). El stepper compacto mide ~86px, trash 28px,
   gap 6 → total ~120px. */
.rollpix-ac-cart__item-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.rollpix-ac-stepper--cart {
    height: 32px;
    flex: 0 0 auto;
}
.rollpix-ac-stepper--cart .rollpix-ac-stepper__btn {
    width: 28px;
    font-size: 15px;
}
.rollpix-ac-stepper--cart .rollpix-ac-stepper__input {
    width: 32px;
    font-size: 13px;
}

.rollpix-ac-cart__item-subtotal {
    font-size: 16px;
    font-weight: 700;
    color: var(--rollpix-ac-text, #1f2937);
    text-align: right;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: center;
}
.rollpix-ac-cart__item-subtotal-main {
    line-height: 1.1;
}
.rollpix-ac-cart__order-actions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rollpix-ac-border, #e5e7eb);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}
.rollpix-ac-cart__total-row--custom dt {
    color: var(--rollpix-ac-text, #1f2937);
}

.rollpix-ac-cart__item-remove {
    width: 28px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
.rollpix-ac-cart__item-remove:hover {
    color: var(--rollpix-ac-error, #dc2626);
    background: #fef2f2;
    border-color: #fecaca;
}

/* ---------- Summary sticky ---------- */

.rollpix-ac-cart__summary {
    position: sticky;
    top: 20px;
    background: #fff;
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: var(--rollpix-ac-radius, 8px);
}

.rollpix-ac-cart__summary-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--rollpix-ac-text, #1f2937);
}

/* Cupón colapsable */
.rollpix-ac-cart__coupon {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}
.rollpix-ac-cart__coupon-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--rollpix-ac-text, #1f2937);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Luma aplica `.action:hover { background: #333; color: #fff }` a botones
   genericos. Overrideamos con specificidad suficiente para que el toggle
   mantenga su look propio (fondo transparente + highlight sutil), sin que
   Luma lo pinte completo y corte el texto al cambiar box-sizing. */
.rollpix-ac-cart__coupon-toggle:hover,
.rollpix-ac-cart__coupon-toggle:focus,
.rollpix-ac-cart__coupon-toggle:active {
    background: #f9fafb !important;
    border-color: var(--rollpix-ac-primary, #1f2937) !important;
    color: var(--rollpix-ac-text, #1f2937) !important;
    outline: none;
}
.rollpix-ac-cart__coupon[data-state="expanded"] .rollpix-ac-cart__coupon-toggle {
    border-radius: var(--rollpix-ac-radius, 8px) var(--rollpix-ac-radius, 8px) 0 0;
    border-bottom-color: transparent;
}
.rollpix-ac-cart__coupon-chevron {
    transition: transform 0.2s ease;
}
.rollpix-ac-cart__coupon[data-state="expanded"] .rollpix-ac-cart__coupon-chevron {
    transform: rotate(180deg);
}
.rollpix-ac-cart__coupon-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, margin-top 0.25s ease;
    margin-top: 0;
}
.rollpix-ac-cart__coupon[data-state="expanded"] .rollpix-ac-cart__coupon-body {
    max-height: 200px;
    margin-top: 12px;
}
.rollpix-ac-cart__coupon-input-row {
    display: flex;
    gap: 8px;
}
.rollpix-ac-cart__coupon-input {
    flex: 1;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 14px;
}
.rollpix-ac-cart__coupon-input:focus {
    outline: none;
    border-color: var(--rollpix-ac-primary, #1f2937);
    background: #fff;
}
.rollpix-ac-cart__coupon-apply,
.rollpix-ac-cart__coupon-remove {
    padding: 10px 16px;
    background: var(--rollpix-ac-primary, #1f2937);
    color: #fff;
    border: none;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.rollpix-ac-cart__coupon-apply:hover,
.rollpix-ac-cart__coupon-remove:hover {
    background: var(--rollpix-ac-primary-hover, #111827);
}
.rollpix-ac-cart__coupon-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 13px;
}
.rollpix-ac-cart__coupon-code {
    font-weight: 700;
    color: var(--rollpix-ac-success, #16a34a);
}
.rollpix-ac-cart__coupon-remove {
    padding: 6px 12px;
    background: transparent;
    color: var(--rollpix-ac-error, #dc2626);
    border: 1px solid var(--rollpix-ac-error, #dc2626);
}
.rollpix-ac-cart__coupon-remove:hover {
    background: var(--rollpix-ac-error, #dc2626);
    color: #fff;
}

/* Totales */
.rollpix-ac-cart__totals {
    margin: 0 0 20px;
}
.rollpix-ac-cart__total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 0;
    font-size: 14px;
    color: #6b7280;
}
.rollpix-ac-cart__total-row dt {
    margin: 0;
}
.rollpix-ac-cart__total-row dd {
    margin: 0;
    font-weight: 600;
    color: var(--rollpix-ac-text, #1f2937);
}
.rollpix-ac-cart__total-row--discount dd {
    color: var(--rollpix-ac-success, #16a34a);
}
.rollpix-ac-cart__total-row--grand {
    padding-top: 16px;
    margin-top: 8px;
    border-top: 1px solid #e5e7eb;
    font-size: 18px;
    font-weight: 700;
}
.rollpix-ac-cart__total-row--grand dt,
.rollpix-ac-cart__total-row--grand dd {
    color: var(--rollpix-ac-text, #1f2937);
    font-weight: 700;
}

/* CTA finalizar compra. Pseudo-classes :link/:visited explícitas para que
   el theme del cliente no nos pise el color del texto via reglas tipo
   `a, a:link { color: ... }`. */
.rollpix-ac-cart__checkout-btn,
.rollpix-ac-cart__checkout-btn:link,
.rollpix-ac-cart__checkout-btn:visited,
.rollpix-ac-cart__checkout-btn:hover,
.rollpix-ac-cart__checkout-btn:active,
.rollpix-ac-cart__checkout-btn:focus {
    color: var(--rollpix-ac-primary-text, #fff);
    text-decoration: none;
}
.rollpix-ac-cart__checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    background: var(--rollpix-ac-primary, #1f2937);
    border: none;
    border-radius: var(--rollpix-ac-radius, 8px);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease;
    letter-spacing: 0.02em;
}
.rollpix-ac-cart__checkout-btn:hover {
    background: var(--rollpix-ac-primary-hover, #111827);
}

/* Icon images al pie del summary */
.rollpix-ac-cart__payment-icons,
.rollpix-ac-cart__security-icons {
    margin-top: 16px;
    text-align: center;
}
.rollpix-ac-cart__payment-icons img,
.rollpix-ac-cart__security-icons img {
    max-width: 100%;
    height: auto;
}

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

@media (max-width: 900px) {
    .rollpix-ac-cart__list-header {
        display: none;
    }
    .rollpix-ac-cart {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .rollpix-ac-cart__summary {
        position: static;
    }
}

@media (max-width: 600px) {
    .rollpix-ac-cart__item {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        gap: 12px 14px;
        padding: 16px;
    }
    .rollpix-ac-cart__item-photo {
        width: 72px;
        height: 72px;
    }
    .rollpix-ac-cart__item-subtotal {
        font-size: 16px;
    }
    .rollpix-ac-stepper--cart {
        height: 36px;
    }
    .rollpix-ac-stepper--cart .rollpix-ac-stepper__btn {
        width: 34px;
    }
    .rollpix-ac-stepper--cart .rollpix-ac-stepper__input {
        width: 42px;
    }
}