/* ==================================================
   CARRITO
================================================== */

.pagina-carrito {

    max-width: 1250px;

    margin: 0 auto;

    padding:
        75px
        5%
        120px;

}



/* ==================================================
   TÍTULO
================================================== */

.carrito-titulo {

    margin-bottom: 60px;

}


.carrito-titulo h1 {

    font-size:
        clamp(
            50px,
            7vw,
            90px
        );

    line-height: 0.95;

    font-weight: 900;

    letter-spacing: -3px;

}



/* ==================================================
   DISTRIBUCIÓN
================================================== */

.carrito-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(300px, 0.6fr);

    gap: 70px;

    align-items: start;

}



/* ==================================================
   CABECERA PRODUCTOS
================================================== */

.carrito-encabezado {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        130px
        110px;

    gap: 20px;

    padding-bottom: 15px;

    border-bottom:
        1px solid #cccccc;

    color: #777777;

    font-size: 11px;

}



/* ==================================================
   PRODUCTO DEL CARRITO
================================================== */

.item-carrito {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        130px
        110px;

    gap: 20px;

    align-items: center;

    padding:
        25px
        0;

    border-bottom:
        1px solid #dddddd;

}



/* INFORMACIÓN */

.item-producto {

    display: grid;

    grid-template-columns:
        105px
        minmax(0, 1fr);

    gap: 20px;

    align-items: center;

}


.item-producto img {

    width: 105px;

    height: 130px;

    object-fit: cover;

    background: #eeeeee;

}


.item-info {

    min-width: 0;

}


.item-info h2 {

    margin-bottom: 8px;

    font-size: 17px;

    font-weight: 400;

}


.item-info p {

    margin-bottom: 4px;

    color: #777777;

    font-size: 13px;

}


.item-precio {

    margin-top: 9px;

    color: #ff006e !important;

}



/* ==================================================
   CANTIDAD
================================================== */

.item-cantidad {

    width: 120px;

    height: 42px;

    display: grid;

    grid-template-columns:
        35px
        1fr
        35px;

    border:
        1px solid #aaaaaa;

}


.item-cantidad button {

    padding: 0;

    border: none;

    border-radius: 0;

    background: transparent;

    color: #111111;

    cursor: pointer;

    font-size: 18px;

}


.item-cantidad span {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 14px;

}



/* ==================================================
   TOTAL PRODUCTO
================================================== */

.item-total {

    font-size: 15px;

}



/* ==================================================
   ELIMINAR
================================================== */

.item-eliminar {

    margin-top: 10px;

    padding: 0;

    border: none;

    background: transparent;

    color: #777777;

    cursor: pointer;

    text-decoration: underline;

    font-size: 12px;

}



/* ==================================================
   CARRITO VACÍO
================================================== */

.carrito-vacio {

    display: none;

    padding:
        80px
        20px;

    text-align: center;

}


.carrito-vacio.visible {

    display: block;

}


.carrito-vacio h2 {

    margin-bottom: 12px;

    font-size: 30px;

}


.carrito-vacio p {

    margin-bottom: 30px;

    color: #777777;

}


.boton-seguir-comprando {

    display: inline-block;

    padding:
        15px
        28px;

    background: #111111;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

}



/* ==================================================
   RESUMEN
================================================== */

.resumen-carrito {

    padding:
        30px;

    background: #f3f3f3;

}


.resumen-carrito h2 {

    margin-bottom: 35px;

    font-size: 27px;

    font-weight: 400;

}


.resumen-fila {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding:
        13px
        0;

    border-bottom:
        1px solid #cccccc;

    font-size: 14px;

}


.resumen-fila span:last-child {

    text-align: right;

}



/* ==================================================
   TOTAL
================================================== */

.resumen-total {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;

    padding:
        22px
        0;

    font-size: 18px;

}


.resumen-total strong {

    color: #ff006e;

}



/* ==================================================
   BOTONES
================================================== */

.boton-finalizar {

    width: 100%;

    min-height: 55px;

    border: none;

    border-radius: 0;

    background: #111111;

    color: white;

    cursor: pointer;

    font-family: inherit;

    font-size: 13px;

}


.boton-finalizar:disabled {

    cursor: not-allowed;

    opacity: 0.35;

}


.seguir-comprando {

    display: block;

    margin-top: 18px;

    text-align: center;

    color: #111111;

    font-size: 13px;

}


.vaciar-carrito {

    width: 100%;

    margin-top: 25px;

    padding: 0;

    border: none;

    background: transparent;

    color: #777777;

    cursor: pointer;

    text-decoration: underline;

    font-size: 12px;

}


.mensaje-carrito {

    min-height: 20px;

    margin-top: 15px;

    color: #ff006e;

    text-align: center;

    font-size: 12px;

}



/* ==================================================
   CARRITO LATERAL
================================================== */

.carrito-overlay {

    position: fixed;

    inset: 0;

    z-index: 9998;

    display: none;

    background:
        rgba(
            0,
            0,
            0,
            0.35
        );

}


.carrito-overlay.visible {

    display: block;

}



/* PANEL */

.carrito-lateral {

    width: min(
        430px,
        100%
    );

    height: 100%;

    position: fixed;

    top: 0;

    right: 0;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    background: #fffef9;

    transform:
        translateX(100%);

    transition:
        transform
        0.3s ease;

}


.carrito-lateral.abierto {

    transform:
        translateX(0);

}



/* CABECERA */

.carrito-lateral-cabecera {

    min-height: 75px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        20px
        25px;

    border-bottom:
        1px solid #dddddd;

}


.carrito-lateral-cabecera h2 {

    font-size: 19px;

    font-weight: 400;

}


.cerrar-carrito {

    padding: 5px;

    border: none;

    background: transparent;

    color: #111111;

    cursor: pointer;

    font-size: 24px;

}



/* PRODUCTOS LATERALES */

.carrito-lateral-lista {

    flex: 1;

    overflow-y: auto;

    padding:
        10px
        25px;

}


.item-lateral {

    display: grid;

    grid-template-columns:
        80px
        minmax(0, 1fr);

    gap: 15px;

    padding:
        20px
        0;

    border-bottom:
        1px solid #dddddd;

}


.item-lateral img {

    width: 80px;

    height: 100px;

    object-fit: cover;

}


.item-lateral h3 {

    margin-bottom: 6px;

    font-size: 15px;

    font-weight: 400;

}


.item-lateral p {

    margin-bottom: 4px;

    color: #777777;

    font-size: 12px;

}


.item-lateral-precio {

    color: #ff006e !important;

}



/* PIE LATERAL */

.carrito-lateral-pie {

    padding:
        25px;

    border-top:
        1px solid #dddddd;

}


.lateral-total {

    display: flex;

    justify-content: space-between;

    margin-bottom: 20px;

    font-size: 17px;

}


.lateral-total strong {

    color: #ff006e;

}


.lateral-finalizar,
.lateral-ver-carrito {

    width: 100%;

    min-height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 13px;

}


.lateral-finalizar {

    margin-bottom: 10px;

    background: #111111;

    color: white;

}


.lateral-ver-carrito {

    border:
        1px solid #111111;

    color: #111111;

}



/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 850px) {

    .pagina-carrito {

        padding:
            50px
            20px
            80px;

    }


    .carrito-layout {

        grid-template-columns:
            1fr;

        gap: 45px;

    }


    .resumen-carrito {

        max-width: 600px;

        width: 100%;

    }

}



@media (max-width: 600px) {

    .carrito-encabezado {

        display: none;

    }


    .item-carrito {

        grid-template-columns:
            1fr;

        gap: 20px;

    }


    .item-producto {

        grid-template-columns:
            90px
            minmax(0, 1fr);

    }


    .item-producto img {

        width: 90px;

        height: 115px;

    }


    .item-total {

        font-weight: 700;

    }


    .carrito-lateral {

        width: 100%;

    }

}

/* ==================================================
   CÓDIGO DE DESCUENTO
================================================== */

.descuento-bloque {

    margin:
        22px
        0;

    padding-top: 20px;

    border-top:
        1px solid #e2e2e2;

}


.descuento-etiqueta {

    display: block;

    margin-bottom: 10px;

    color: #6e6e6e;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.04em;

}


.descuento-fila {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 8px;

}


.descuento-fila input {

    min-height: 46px;

    padding:
        0
        13px;

    border:
        1px solid #111111;

    border-radius: 0;

    background: #ffffff;

    color: #111111;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.descuento-fila input:focus-visible {

    outline: none;

    box-shadow:
        0 0 0 3px
        rgba(255, 0, 110, 0.28);

}


.descuento-fila button {

    min-height: 46px;

    padding:
        0
        18px;

    border:
        1px solid #111111;

    background: #111111;

    color: #ffffff;

    cursor: pointer;

    font-family: inherit;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.1em;

    transition:
        background .15s ease;

}


.descuento-fila button:hover:not(:disabled) {

    background: #ff006e;

    border-color: #ff006e;

}


.descuento-fila button:disabled {

    opacity: 0.55;

    cursor: wait;

}


.descuento-mensaje {

    min-height: 16px;

    margin-top: 9px;

    font-size: 11px;

    line-height: 1.45;

}


.descuento-mensaje-error {

    color: #ff006e;

}


.descuento-mensaje-exito {

    color: #087b87;

    font-weight: 700;

}


.resumen-descuento[hidden] {

    display: none;

}


.resumen-descuento strong {

    color: #087b87;

}


.descuento-chip {

    display: inline-block;

    margin-left: 6px;

    padding:
        2px
        6px;

    background: #ffd600;

    color: #111111;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.06em;

}