/* ==========================================================================
   Cajon del carro — componente compartido
   ==========================================================================
   Lo usan los dos carros, el mayorista y el de la tienda. Vive en su propio
   archivo y no en wholesale.css porque las paginas de la tienda no cargan ese,
   y duplicar 250 lineas de CSS para tener el mismo panel garantiza que dentro de
   un mes sean dos paneles distintos.

   El resumen del pedido tiene que estar en la pantalla en la que ya estas y no
   arriba de todo: la lista mayorista son 176 productos y habia que volver al
   principio para saber cuanto llevabas. En la tienda pasa lo mismo, y ademas
   obliga a abandonar la pagina del producto para ver el carro.
   ========================================================================== */

/* El atributo `hidden` del HTML es lo que mantiene el cajon cerrado hasta que
   alguien lo abre. Hay que defenderlo a mano: el `display` de mas abajo lo pisa
   —los estilos del autor le ganan a los del navegador— y entonces el fondo, que
   es invisible por opacity pero cubre toda la pantalla, se come todos los clics
   de la pagina, incluido el del propio boton del carro. */
.cart-drawer-backdrop[hidden],
.cart-drawer[hidden] {
    display: none !important;
}


/* Boton flotante: dice kilos y total, que es lo que se quiere saber sin
   abrir nada. */
.cart-drawer-fab {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 1040;
    padding: 10px 14px;
    border: 0;
    border-radius: 999px;
    background: #f0a92e;
    color: #2f3640;
    font-size: 13.5px;
    line-height: 1.2;
    box-shadow: 0 6px 20px rgba(47, 54, 64, .28);
}

.cart-drawer-fab .fa { font-size: 16px; }

.cart-drawer-fab-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cart-drawer-fab-text strong { font-size: 14px; }
.cart-drawer-fab-text span { font-size: 12px; opacity: .85; }

.cart-drawer-fab-go {
    padding-left: 10px;
    border-left: 1px solid rgba(47, 54, 64, .25);
    font-weight: 600;
}

.cart-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(47, 54, 64, .5);
    opacity: 0;
    transition: opacity .25s ease;
}

.cart-drawer-backdrop.is-open { opacity: 1; }

.cart-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1051;
    width: 420px;
    max-width: 90vw;
    background: #fff;
    box-shadow: -8px 0 24px rgba(47, 54, 64, .18);
    transform: translateX(100%);
    transition: transform .25s ease;
}

.cart-drawer.is-open { transform: translateX(0); }

/* Mientras el cajon esta abierto, la lista de atras no se desplaza: si lo
   hiciera, al cerrar se pierde el lugar en el que estaba leyendo. */
body.cart-drawer-locked { overflow: hidden; }

.cart-drawer-back {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 14px 18px;
    border: 0;
    border-bottom: 1px solid #eef1f5;
    background: #f7f8fa;
    color: #5b6472;
    font-size: 13.5px;
    text-align: left;
}

.cart-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 18px 8px;
}

.cart-drawer-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cart-drawer-heading h2 { margin: 0; font-size: 17px; }
.cart-drawer-heading span { color: #8a94a6; font-size: 13px; }

.cart-drawer-alert {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.45;
}

.cart-drawer-alert .fa { margin-top: 2px; }

.cart-drawer-alert--warn {
    border: 1px solid #f0d9a8;
    background: #fff8ec;
    color: #96620a;
}

.cart-drawer-alert--ok {
    border: 1px solid #cfe9d4;
    background: #f2faf4;
    color: #2f7a42;
}

.cart-drawer-progress {
    height: 4px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.cart-drawer-progress span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #f0a92e;
}

.cart-drawer-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-drawer-lines li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eef1f5;
}

.cart-drawer-line-img {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: #f4f6f9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c9d4;
}

.cart-drawer-line-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cart-drawer-line-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    color: #2f3640;
    line-height: 1.35;
}

.cart-drawer-line-name span {
    display: block;
    margin-top: 2px;
    color: #8a94a6;
    font-size: 12px;
}

.cart-drawer-line-total {
    flex: 0 0 auto;
    font-weight: 600;
    font-size: 14px;
    color: #2f3640;
}

.cart-drawer-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 4px;
    padding: 14px 0 10px;
    border-top: 2px solid #2f3640;
    font-size: 15px;
}

.cart-drawer-total strong { font-size: 18px; }

.cart-drawer-note {
    margin: 0 0 8px;
    color: #8a94a6;
    font-size: 12px;
    line-height: 1.45;
}

/* Las acciones quedan fijas al pie: con ocho productos, "Continuar al pago"
   no puede estar al final del scroll. */
.cart-drawer-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid #eef1f5;
    background: #fff;
    /* Barra de gestos del iPhone: sin esto el boton queda debajo de ella. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.cart-drawer-actions .ws-btn {
    width: 100%;
    text-align: center;
}

@media (max-width: 991px) {
    /* Con carro, en telefono el boton del toolbar lo reemplaza el flotante, que
       ademas dice kilos y total. Dejar los dos los hace chocar en pantalla. */
    .cart-hide-phone { display: none !important; }
}

@media (min-width: 992px) {
    /* Mas despegado de los bordes: en escritorio el puntero es preciso y el
       boton no necesita estar pegado a la esquina para alcanzarse. */
    .cart-drawer-fab {
        right: 24px;
        bottom: 24px;
        padding: 12px 18px;
        cursor: pointer;
    }

    .cart-drawer-back { cursor: pointer; }
}

/* Quien pidio menos animacion no quiere que el cajon se deslice. */
@media (prefers-reduced-motion: reduce) {
    .cart-drawer,
    .cart-drawer-backdrop {
        transition: none;
    }
}

/* Botones y miniatura vacia: el componente trae los suyos.
   Los de wholesale.css servian, pero las paginas de la tienda no cargan ese
   archivo, y el cajon quedaba con dos botones sin estilo. */
.cart-drawer-btn {
    display: inline-block;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.cart-drawer-btn--primary { background: #f0a92e; color: #2f3640; }

.cart-drawer-btn--primary:hover,
.cart-drawer-btn--primary:focus {
    background: #dd991f;
    color: #2f3640;
    text-decoration: none;
}

.cart-drawer-btn--ghost {
    background: #fff;
    border-color: #d8dde6;
    color: #2f3640;
}

.cart-drawer-btn--ghost:hover,
.cart-drawer-btn--ghost:focus {
    border-color: #b9c1cd;
    color: #2f3640;
    text-decoration: none;
}

.cart-drawer-thumb-empty { font-size: 18px; }

/* Cantidad y quitar. Solo el carro de la tienda los usa: el mayorista todavia no
   tiene rutas para cambiar una linea. */
.cart-drawer-qty {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 0 0;
}

.cart-drawer-qty input {
    width: 64px;
    padding: 5px 6px;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    /* 16px: por debajo de eso Safari en iPhone hace zoom al enfocar. */
    font-size: 16px;
    text-align: center;
}

.cart-drawer-qty button {
    padding: 5px 10px;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    background: #f7f8fa;
    color: #5b6472;
    font-size: 12px;
    cursor: pointer;
}

/* Con JS el formulario se envia solo al cambiar el numero, asi que el boton
   sobra y se esconde. Sin JS sigue ahi, que es lo que lo hace usable. */
.js-on .cart-drawer-qty button { display: none; }

.cart-drawer-line-side {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.cart-drawer-remove {
    color: #b9c1cd;
    font-size: 14px;
    line-height: 1;
    padding: 2px 4px;
}

.cart-drawer-remove:hover,
.cart-drawer-remove:focus { color: #c0392b; }