/* Carrito sin productos */
.cart-grid:has(.page-not-found) {
    margin: 2rem auto 5rem;
    max-width: 600px;
}

/* Carrito con productos. El margin-top acerca la tarjeta al título de la página
   (antes 2rem, dejaba demasiado hueco; 8px se quedaba corto). */
.cart-grid:not(:has(.page-not-found)) {
    margin: 1.25rem 0 3rem 0;
}

/* La cabecera de la página (título "Carrito") arrastra un min-height de 108px del
   grupo .section-header que dejaba mucho espacio vacío bajo el título, separándolo
   de la tarjeta. Se anula y se recorta el padding inferior, en todos los anchos. */
.header-cart-grid {
    min-height: 0;
    padding-bottom: 0;
}

/* Sin productos */
.cart-grid .page-not-found {
    background: var(--color-white);
}

.cart-grid .page-not-found h4 {
    margin: .5rem 0 1rem;
    font-size: 1rem;
}

/* Card principal del carrito */
.cart-grid-body .cart-container {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Card resumen */
.cart-grid-right .cart-summary {
    border: none;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

/* Barra titulo + continuar comprando. Fondo blanco con un borde inferior gris
   suave (antes era rosa). */
.cart-grid-body .card-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--color-dark-pink);
    background-color: var(--color-white);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px 16px 0 0;
}

.cart-grid-body .card-block h1 {
    font-size: 14px;
    font-family: var(--font-body);
    font-weight: 600;
    line-height: 1.1;
    color: inherit;
    padding: 0.4rem;
}

.cart-grid-body .card-block h1 i {
    margin-right: 0.3rem;
    vertical-align: middle;
}

/* "Continuar comprando": solo layout, estilo base en global.css (.btn-brand group) */
.cart-grid-body .card-block .label {
    margin-left: auto;
    width: auto;
}

.cart-grid-body .card-block .label i {
    vertical-align: middle;
    margin-right: 0.2rem;
}

.cart-grid-body .card-block a.label:hover {
    color: var(--color-white);
}

/* Inputs de cantidad. El borde y el radio los pone el .input-group contenedor;
   el input no debe llevar los suyos o se ve un doble borde interno. */
.cart-item .qty input[type="number"] {
    background-color: var(--color-white);
    border: none;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    text-align: center;
    width: 65px;
    color: var(--color-text-dark);
    -moz-appearance: textfield;
}

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

/* Icono eliminar */
.cart-line-product-actions .remove-from-cart i {
    color: var(--color-gray-dark);
    transition: color var(--transition-fast);
}

.cart-line-product-actions .remove-from-cart:hover i {
    color: var(--color-pink);
}

/* Total */
.cart-summary-totals .cart-total-products-no-checkout span {
    color: var(--color-pink);
    font-family: var(--font-brand);
    text-transform: uppercase;
    font-size: 100%;
}

/* Checkout: solo width, estilo base en global.css (.btn-brand group) */
.card-block.checkout .btn-primary {
    width: 100%;
}

.card-block.checkout .btn-primary.disabled {
    background: var(--color-gray-dark);
    cursor: not-allowed;
}

/* Fondo blanco de las cards. El tema padre pone `.card { background: inherit }`
   en <=767px, dejándolas transparentes (se ve el gris de la página); se fuerza
   blanco en las cards del carrito (mayor especificidad que `.card`). */
.cart-grid-body .cart-container,
.cart-grid-right .cart-summary {
    background-color: var(--color-white);
}

/* Separación entre "(impuestos inc.)" y el botón de tramitar, en desktop y
   responsive: el bloque del botón queda pegado al total. */
.cart-grid-right .cart-summary .card-block.checkout {
    margin-top: 1rem;
}

/* Precio de cada línea en azul secundario, en cualquier ancho (venía en gris). */
.product-line-grid .product-price,
.product-line-grid .product-price strong {
    color: var(--color-blue);
}

/* Todos los elementos de la línea (imagen, nombre, cantidad, precio, papelera)
   centrados verticalmente: el tema padre los alinea arriba. Se usa flex con
   align-items:center manteniendo el ancho de las columnas del grid. */
.product-line-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

/* La fila interna de acciones (cantidad, precio, papelera) centra sus elementos
   verticalmente. No se toca el display del contenedor para no encoger la fila. */
.product-line-grid-right .row {
    align-items: center;
}

/* Control de cantidad: el input medía 36px pero la columna de botones +/- medía
   48px (24+24), dejando huecos arriba y abajo. Se igualan (input 40, botones 20)
   para que no queden espacios. */
.cart-item .qty .input-group.bootstrap-touchspin {
    align-items: center;
}

.cart-item .qty input[type="number"] {
    height: 40px;
}

.cart-item .qty .input-group-btn-vertical .btn-touchspin {
    height: 20px;
}

/* El separador que sigue a la barra del título (panel izquierdo) no debe llevar
   borde: el título no lleva línea inferior. */
.cart-grid-body .card-block + .separator {
    border-top: none;
}

/* El separador entre items del tema padre es demasiado fuerte (negro al 25%). */
.cart-grid-body .cart-item + .separator {
    border-top-color: rgba(0, 0, 0, 0.08);
}

/* ===== Carrito en móvil ===== */
@media (max-width: 767.98px) {
    /* Cabecera del título más compacta en móvil (padding superior menor). El
       min-height y el gap ya se controlan en las reglas de todos los anchos. */
    .header-cart-grid {
        padding-top: 8px;
    }

    .header-cart-grid h1 {
        margin-top: 4px;
        margin-bottom: 4px;
    }

    /* Layout de la línea: la imagen ocupa la parte izquierda (flotada) y el nombre
       y los controles (cantidad, precio, papelera) se apilan a su derecha. Antes
       la columna de acciones era col-xs-12 y caía debajo de la imagen. El padding
       lateral de la línea da a la imagen su separación del borde de la card. */
    .product-line-grid {
        display: block;
        padding: 0 15px;
    }

    .product-line-grid-left {
        float: left;
        width: 84px;
        padding: 0;
    }

    .product-line-grid-body,
    .product-line-grid-right {
        float: none;
        width: auto;
        max-width: none;
        margin-left: 96px;
        padding-left: 0;
    }

    /* Precio y cantidad se apiñaban: el tema padre mete una columna vacía
       (col-xs-4 hidden-md-up) que desperdicia un tercio del ancho y encima el
       bloque cantidad+precio solo ocupa media fila. Se ocultan los huecos y se
       distribuye con flex para que cantidad, precio y papelera respiren. */
    .product-line-grid-right > .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
    }

    /* Se anulan los márgenes negativos y paddings de las columnas del grid: en la
       columna estrecha de la derecha inflan el ancho y hacían que el precio se
       solapara con la papelera. */
    .product-line-grid-right .row {
        margin-left: 0;
        margin-right: 0;
    }

    .product-line-grid-right .qty,
    .product-line-grid-right .price,
    .product-line-grid-right .text-xs-right {
        padding-left: 0;
        padding-right: 0;
    }

    .product-line-grid-right > .row > .hidden-md-up {
        display: none;
    }

    .product-line-grid-right > .row > .col-xs-6 {
        flex: 1 1 auto;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .product-line-grid-right > .row > .text-xs-right {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    .product-line-grid-right .col-md-10 > .row {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
    }

    .product-line-grid-right .col-md-10 > .row > .qty,
    .product-line-grid-right .col-md-10 > .row > .price {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
    }

    /* El input de unidades es demasiado ancho en móvil. */
    .cart-item .qty input[type="number"] {
        width: 48px;
    }

    /* Los card-block del resumen pierden el padding en móvil (regla del tema
       padre), así que el contenido de la tarjeta de totales toca los bordes. Se
       restaura el mismo padding que en desktop. */
    .cart-grid-right .cart-summary .card-block.cart-summary-totals {
        padding: 20px 20px 8px;
    }

    .cart-grid-right .cart-summary .card-block.checkout {
        padding: 0 20px 20px;
    }

    /* "Continuar comprando": el título "carrito" de la barra rosa es redundante
       (ya está el H1 de la página arriba) y hacía que el botón desbordara la card
       y se cortara (overflow:hidden). Se oculta el título y el botón pasa a ancho
       completo, con alto automático para que el texto no se salga. */
    .cart-grid-body .card-block h1 {
        display: none;
    }

    .cart-grid-body .card-block .label {
        margin-left: 0;
        width: 100%;
        height: auto;
        line-height: 1.15;
        padding: 10px 14px;
        white-space: nowrap;
        text-align: center;
    }

    /* La imagen llena la columna izquierda. */
    .product-line-grid-left img {
        width: 100%;
        height: auto;
    }
}