* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #FFF9F5;

    color: #46220F;

    padding-bottom: 100px;
}


/* =====================================================
   ENCABEZADO
===================================================== */

.encabezado {

    background: #46220F;

    color: white;

    min-height: 78px;

    padding: 14px 5%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.15);

}


.logo {

    display: flex;

    align-items: center;

    gap: 12px;

}


.logo-icono {

    width: 48px;

    height: 48px;

    background: #AA7444;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;

}


.logo h1 {

    margin: 0;

    font-size: 23px;

}


.logo span {

    display: block;

    margin-top: 3px;

    color: #EADDD2;

    font-size: 13px;

}


/* =====================================================
   BOTÓN CARRITO
===================================================== */

.boton-carrito {

    border: none;

    background: white;

    color: #46220F;

    padding: 11px 16px;

    border-radius: 10px;

    font-weight: bold;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 8px;
}


.boton-carrito strong {

    background: #AA7444;

    color: white;

    min-width: 23px;

    height: 23px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

}


/* =====================================================
   CONTENEDOR
===================================================== */

.contenedor {

    width: min(1200px, 92%);

    margin: 25px auto;

}


/* =====================================================
   BUSCADOR
===================================================== */

.buscador {

    margin-bottom: 18px;

}


.buscador input {

    width: 100%;

    border: 1px solid #D8C9BC;

    border-radius: 12px;

    background: white;

    color: #46220F;

    padding: 15px 18px;

    font-size: 16px;

    outline: none;

    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.05);

}


.buscador input:focus {

    border-color: #AA7444;

    box-shadow:
        0 0 0 3px rgba(170, 116, 68, 0.15);

}


/* =====================================================
   CATEGORÍAS
===================================================== */

.categorias {

    display: flex;

    gap: 9px;

    overflow-x: auto;

    padding-bottom: 8px;

    margin-bottom: 12px;

}


.categorias::-webkit-scrollbar {

    height: 5px;

}


.categorias::-webkit-scrollbar-thumb {

    background: #AA7444;

    border-radius: 10px;

}


.categoria {

    flex: 0 0 auto;

    border: none;

    background: white;

    color: #46220F;

    padding: 11px 17px;

    border-radius: 9px;

    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 2px 7px rgba(0, 0, 0, 0.06);

    transition: 0.2s;

}


.categoria:hover {

    background: #F0E3D8;

}


.categoria.activa {

    background: #704214;

    color: white;

}


/* =====================================================
   INFORMACIÓN
===================================================== */

.informacion-productos {

    margin-bottom: 15px;

    color: #777;

    font-size: 14px;

}


/* =====================================================
   GRILLA DE PRODUCTOS
===================================================== */

.productos {

    display: grid;

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

    gap: 18px;

}


/* =====================================================
   TARJETA
===================================================== */

.producto-card {

    background: white;

    border-radius: 15px;

    overflow: hidden;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.08);

    display: flex;

    flex-direction: column;

    transition:
        transform 0.2s,
        box-shadow 0.2s;

}


.producto-card:hover {

    transform: translateY(-3px);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.12);

}


/* =====================================================
   IMAGEN
===================================================== */

.producto-imagen {

    width: 100%;

    height: 210px;

    background: #F7F1EB;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.producto-imagen img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 12px;

}


.sin-imagen {

    font-size: 45px;

    opacity: 0.35;

}


/* =====================================================
   INFORMACIÓN PRODUCTO
===================================================== */

.producto-info {

    padding: 15px;

    display: flex;

    flex-direction: column;

    flex: 1;

}


.producto-categoria {

    font-size: 11px;

    color: #AA7444;

    font-weight: bold;

    text-transform: uppercase;

    margin-bottom: 5px;

}


.producto-info h2 {

    margin: 0;

    font-size: 17px;

    line-height: 1.25;

}


.producto-descripcion {

    color: #777;

    font-size: 13px;

    line-height: 1.4;

    margin: 7px 0 12px;

}


.producto-abajo {

    margin-top: auto;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 10px;

}


.precio {

    font-size: 21px;

    font-weight: bold;

    color: #46220F;

}


.stock {

    font-size: 12px;

    color: #777;

    margin-top: 3px;

}


.sin-stock {

    font-size: 12px;

    color: #A52A2A;

    font-weight: bold;

    margin-top: 4px;

}


/* =====================================================
   BOTÓN AGREGAR
===================================================== */

.boton-agregar {

    border: none;

    background: #704214;

    color: white;

    padding: 10px 13px;

    border-radius: 8px;

    font-weight: bold;

    cursor: pointer;

    transition: 0.2s;

}


.boton-agregar:hover:not(:disabled) {

    background: #46220F;

}


.boton-agregar:disabled {

    background: #CCC;

    cursor: not-allowed;

}


/* =====================================================
   SIN RESULTADOS
===================================================== */

.sin-resultados {

    grid-column: 1 / -1;

    text-align: center;

    background: white;

    border-radius: 15px;

    padding: 50px 20px;

    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.06);

}


.sin-resultados>div {

    font-size: 45px;

}


.sin-resultados h2 {

    margin: 10px 0 5px;

}


.sin-resultados p {

    color: #777;

}


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

.barra-carrito {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    background: #46220F;

    color: white;

    padding: 13px 5%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    box-shadow:
        0 -3px 15px rgba(0, 0, 0, 0.18);

    z-index: 1000;

}


.barra-carrito>div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.barra-carrito strong {

    color: #EADDD2;

    font-size: 13px;

}


.barra-carrito button {

    border: none;

    background: #AA7444;

    color: white;

    padding: 11px 17px;

    border-radius: 9px;

    font-weight: bold;

    cursor: pointer;

}


.barra-carrito button:hover {

    background: #704214;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .productos {

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

    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 700px) {

    .encabezado {

        padding: 12px 4%;

    }


    .logo h1 {

        font-size: 18px;

    }


    .logo span {

        font-size: 11px;

    }


    .logo-icono {

        width: 42px;

        height: 42px;

        font-size: 21px;

    }


    .boton-carrito span {

        display: none;

    }


    .contenedor {

        width: 94%;

        margin-top: 18px;

    }


    .productos {

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

        gap: 12px;

    }


    .producto-imagen {

        height: 165px;

    }


    .producto-info {

        padding: 12px;

    }


    .producto-info h2 {

        font-size: 15px;

    }


    .producto-descripcion {

        font-size: 12px;

    }


    .precio {

        font-size: 18px;

    }


    .boton-agregar {

        padding: 9px 10px;

        font-size: 12px;

    }

}


/* =====================================================
   CELULAR PEQUEÑO
===================================================== */

@media (max-width: 430px) {

    .productos {

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

    }


    .producto-imagen {

        height: 145px;

    }


    .producto-abajo {

        flex-direction: column;

        align-items: stretch;

    }


    .boton-agregar {

        width: 100%;

    }

}
/* =====================================================
   MODAL DEL CARRITO
===================================================== */

.modal-carrito {

    position: fixed;

    inset: 0;

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

    z-index: 2000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    transition: 0.2s;

}


.modal-carrito.visible {

    opacity: 1;

    visibility: visible;

}


.carrito-contenido {

    width: min(650px, 100%);

    max-height: 90vh;

    background: #FFF9F5;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 10px 40px rgba(0,0,0,0.25);

    display: flex;

    flex-direction: column;

}


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

.carrito-cabecera {

    background: #46220F;

    color: white;

    padding: 17px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.carrito-cabecera h2 {

    margin: 0;

    font-size: 21px;

}


.carrito-cabecera span {

    display: block;

    margin-top: 4px;

    color: #EADDD2;

    font-size: 13px;

}


.cerrar-carrito {

    border: none;

    background: transparent;

    color: white;

    font-size: 32px;

    line-height: 1;

    cursor: pointer;

    width: 40px;

    height: 40px;

    border-radius: 8px;

}


.cerrar-carrito:hover {

    background: rgba(255,255,255,0.12);

}


/* =====================================================
   LISTA
===================================================== */

.lista-carrito {

    padding: 15px 20px;

    overflow-y: auto;

    max-height: 50vh;

}


/* =====================================================
   ITEM
===================================================== */

.item-carrito {

    background: white;

    border-radius: 12px;

    padding: 12px;

    margin-bottom: 10px;

    display: grid;

    grid-template-columns:
        65px 1fr auto;

    gap: 12px;

    align-items: center;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.06);

}


.item-carrito-imagen {

    width: 65px;

    height: 65px;

    border-radius: 9px;

    background: #F7F1EB;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    font-size: 25px;

}


.item-carrito-imagen img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    padding: 5px;

}


.item-carrito-info h3 {

    margin: 0 0 3px;

    color: #46220F;

    font-size: 15px;

}


.item-carrito-info > span {

    color: #777;

    font-size: 12px;

}


.item-carrito-precio {

    font-weight: bold;

    color: #46220F;

    white-space: nowrap;

}


/* =====================================================
   CONTROLES
===================================================== */

.controles-cantidad {

    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 8px;

}


.controles-cantidad strong {

    min-width: 22px;

    text-align: center;

}


.boton-cantidad {

    border: 1px solid #D8C9BC;

    background: white;

    color: #46220F;

    width: 28px;

    height: 28px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 17px;

    font-weight: bold;

}


.boton-cantidad:hover {

    background: #F0E3D8;

}


.boton-eliminar {

    border: none;

    background: transparent;

    cursor: pointer;

    margin-left: 4px;

    font-size: 16px;

}


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

.carrito-vacio {

    text-align: center;

    padding: 45px 20px;

}


.carrito-vacio > div {

    font-size: 45px;

    opacity: 0.45;

}


.carrito-vacio h3 {

    margin: 10px 0 5px;

}


.carrito-vacio p {

    margin: 0;

    color: #777;

    font-size: 14px;

}


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

.resumen-carrito-modal {

    background: white;

    border-top: 1px solid #E5D9D0;

    padding: 18px 20px;

}


.linea-resumen {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 5px 0;

    color: #555;

}


.linea-resumen.total {

    border-top: 1px solid #E5D9D0;

    margin-top: 8px;

    padding-top: 12px;

    color: #46220F;

    font-size: 20px;

}


.boton-continuar {

    width: 100%;

    margin-top: 15px;

    border: none;

    background: #704214;

    color: white;

    padding: 14px;

    border-radius: 10px;

    font-weight: bold;

    font-size: 15px;

    cursor: pointer;

}


.boton-continuar:hover {

    background: #46220F;

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .modal-carrito {

        padding: 0;

        align-items: flex-end;

    }


    .carrito-contenido {

        width: 100%;

        max-height: 94vh;

        border-radius:
            18px 18px 0 0;

    }


    .lista-carrito {

        max-height: 52vh;

        padding: 12px;

    }


    .item-carrito {

        grid-template-columns:
            58px 1fr auto;

        gap: 9px;

        padding: 9px;

    }


    .item-carrito-imagen {

        width: 58px;

        height: 58px;

    }


    .item-carrito-info h3 {

        font-size: 14px;

    }


    .item-carrito-precio {

        font-size: 14px;

    }


    .resumen-carrito-modal {

        padding: 15px;

    }

}
/* =====================================================
   DETALLE DEL PRODUCTO
===================================================== */

.modal-producto {

    position: fixed;

    inset: 0;

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

    z-index: 3000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.2s,
        visibility 0.2s;

}


.modal-producto.visible {

    opacity: 1;

    visibility: visible;

}


.producto-detalle {

    position: relative;

    width: min(800px, 100%);

    max-height: 90vh;

    overflow: auto;

    background: #FFF9F5;

    border-radius: 20px;

    box-shadow:
        0 15px 50px
        rgba(0,0,0,0.30);

    display: grid;

    grid-template-columns:
        1fr 1fr;

    overflow: hidden;

}


/* =====================================================
   BOTÓN CERRAR
===================================================== */

.cerrar-producto {

    position: absolute;

    right: 15px;

    top: 15px;

    z-index: 10;

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 50%;

    background:
        rgba(70,34,15,0.85);

    color: white;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

}


.cerrar-producto:hover {

    background: #46220F;

}


/* =====================================================
   IMAGEN
===================================================== */

.detalle-imagen {

    min-height: 430px;

    background: #F7F1EB;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 30px;

}


.detalle-imagen img {

    width: 100%;

    height: 100%;

    max-height: 400px;

    object-fit: contain;

}


/* =====================================================
   INFORMACIÓN
===================================================== */

.detalle-informacion {

    padding: 45px 35px 30px;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


.detalle-informacion h2 {

    color: #46220F;

    font-size: 28px;

    margin: 5px 0 12px;

}


.detalle-descripcion {

    color: #666;

    line-height: 1.6;

    margin: 0 0 20px;

}


.detalle-precio {

    color: #46220F;

    font-size: 30px;

    font-weight: bold;

    margin-bottom: 8px;

}


.detalle-stock {

    color: #777;

    font-size: 14px;

    margin-bottom: 25px;

}


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

.selector-cantidad {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;

    padding: 12px;

    background: white;

    border-radius: 10px;

}


.selector-cantidad > span {

    font-weight: bold;

    color: #46220F;

}


.controles-detalle {

    display: flex;

    align-items: center;

    gap: 12px;

}


.controles-detalle button {

    width: 36px;

    height: 36px;

    border: 1px solid #D8C9BC;

    background: white;

    color: #46220F;

    border-radius: 8px;

    font-size: 21px;

    font-weight: bold;

    cursor: pointer;

}


.controles-detalle button:hover {

    background: #F0E3D8;

}


.controles-detalle strong {

    min-width: 25px;

    text-align: center;

    font-size: 17px;

}


/* =====================================================
   BOTÓN AGREGAR
===================================================== */

.detalle-agregar {

    width: 100%;

    border: none;

    background: #704214;

    color: white;

    padding: 15px;

    border-radius: 10px;

    font-size: 15px;

    font-weight: bold;

    cursor: pointer;

}


.detalle-agregar:hover:not(:disabled) {

    background: #46220F;

}


.detalle-agregar:disabled {

    background: #CCC;

    cursor: not-allowed;

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 650px) {

    .modal-producto {

        padding: 0;

        align-items: flex-end;

    }


    .producto-detalle {

        width: 100%;

        max-height: 94vh;

        border-radius:
            20px 20px 0 0;

        grid-template-columns: 1fr;

        overflow-y: auto;

    }


    .detalle-imagen {

        min-height: 260px;

        height: 260px;

        padding: 20px;

    }


    .detalle-imagen img {

        max-height: 240px;

    }


    .detalle-informacion {

        padding: 25px 20px 25px;

    }


    .detalle-informacion h2 {

        font-size: 23px;

    }


    .detalle-precio {

        font-size: 26px;

    }


    .cerrar-producto {

        background:
            rgba(70,34,15,0.9);

    }

}
/* =====================================================
   CHECKOUT
===================================================== */

.modal-checkout {

    position: fixed;

    inset: 0;

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

    z-index: 4000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    opacity: 0;

    visibility: hidden;

    transition: 0.2s;
}


.modal-checkout.visible {

    opacity: 1;

    visibility: visible;
}


.checkout-contenido {

    width: min(720px, 100%);

    max-height: 92vh;

    background: #FFF9F5;

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 15px 50px rgba(0,0,0,0.30);

    display: flex;

    flex-direction: column;
}


/* CABECERA */

.checkout-cabecera {

    background: #46220F;

    color: white;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.checkout-cabecera h2 {

    margin: 0;

    font-size: 21px;
}


.checkout-cabecera span {

    display: block;

    margin-top: 4px;

    color: #EADDD2;

    font-size: 13px;
}


.cerrar-checkout {

    border: none;

    background: transparent;

    color: white;

    font-size: 32px;

    cursor: pointer;

    width: 40px;

    height: 40px;
}


/* BODY */

.checkout-body {

    padding: 20px;

    overflow-y: auto;
}


/* SECCIONES */

.checkout-seccion {

    background: white;

    border-radius: 12px;

    padding: 18px;

    margin-bottom: 15px;

    box-shadow:
        0 2px 8px rgba(0,0,0,0.05);
}


.checkout-seccion h3 {

    margin: 0 0 15px;

    color: #46220F;

    font-size: 17px;
}


/* CAMPOS */

.campo-checkout {

    margin-bottom: 13px;
}


.campo-checkout label {

    display: block;

    margin-bottom: 6px;

    font-size: 13px;

    font-weight: bold;

    color: #46220F;
}


.campo-checkout input,
.campo-checkout textarea {

    width: 100%;

    border: 1px solid #D8C9BC;

    border-radius: 8px;

    padding: 12px;

    font-family: inherit;

    font-size: 15px;

    color: #46220F;

    background: #FFFDFB;

    outline: none;
}


.campo-checkout input:focus,
.campo-checkout textarea:focus {

    border-color: #AA7444;

    box-shadow:
        0 0 0 3px rgba(170,116,68,0.12);
}


/* ENTREGA */

.opciones-entrega,
.opciones-pago {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 10px;
}


.opcion-entrega,
.opcion-pago {

    border: 1px solid #D8C9BC;

    border-radius: 10px;

    padding: 13px;

    display: flex;

    gap: 10px;

    cursor: pointer;

    transition: 0.2s;
}


.opcion-entrega:hover,
.opcion-pago:hover {

    background: #F7F1EB;
}


.opcion-entrega input,
.opcion-pago input {

    accent-color: #704214;

    margin-top: 4px;
}


.opcion-entrega strong,
.opcion-pago strong {

    display: block;

    color: #46220F;

    font-size: 14px;
}


.opcion-entrega span,
.opcion-pago span {

    display: block;

    color: #777;

    font-size: 12px;

    margin-top: 4px;
}


/* UBICACIÓN */

.datos-delivery {

    margin-top: 15px;

    padding-top: 15px;

    border-top: 1px solid #E8DDD5;
}


.boton-ubicacion {

    width: 100%;

    border: none;

    background: #704214;

    color: white;

    padding: 12px;

    border-radius: 9px;

    font-weight: bold;

    cursor: pointer;
}


.boton-ubicacion:hover {

    background: #46220F;
}


.estado-ubicacion {

    margin-top: 8px;

    padding: 10px;

    background: #F7F1EB;

    border-radius: 8px;

    color: #777;

    font-size: 12px;
}


/* TRANSFERENCIA */

.transferencia-info {

    background: #F7F1EB;

    border-radius: 10px;

    padding: 14px;
}


.transferencia-info strong {

    color: #46220F;

    font-size: 13px;
}


.alias {

    margin: 7px 0;

    font-size: 21px;

    font-weight: bold;

    color: #704214;

}


.transferencia-info p {

    margin: 5px 0 0;

    color: #777;

    font-size: 12px;
}


/* VUELTO */

.vuelto {

    background: #F7F1EB;

    color: #46220F;

    border-radius: 9px;

    padding: 13px;

    font-weight: bold;

    text-align: center;

    margin-top: 10px;
}


/* RESUMEN */

.checkout-resumen-productos {

    border-bottom: 1px solid #E8DDD5;

    margin-bottom: 10px;

    padding-bottom: 10px;
}


.checkout-producto-resumen {

    display: flex;

    justify-content: space-between;

    gap: 10px;

    padding: 6px 0;

    font-size: 14px;
}


.checkout-producto-resumen span {

    color: #555;
}


.checkout-producto-resumen strong {

    color: #46220F;

    white-space: nowrap;
}


.checkout-totales > div {

    display: flex;

    justify-content: space-between;

    padding: 5px 0;

    color: #555;
}


.checkout-totales .checkout-total {

    border-top: 1px solid #E8DDD5;

    margin-top: 7px;

    padding-top: 12px;

    color: #46220F;

    font-size: 20px;
}


/* ERROR */

.checkout-error {

    background: #FCE8E8;

    color: #9B2226;

    border: 1px solid #E8BABA;

    border-radius: 9px;

    padding: 12px;

    margin-bottom: 12px;

    font-size: 14px;
}


/* CONFIRMAR */

.boton-confirmar-pedido {

    width: 100%;

    border: none;

    background: #704214;

    color: white;

    padding: 15px;

    border-radius: 10px;

    font-weight: bold;

    font-size: 16px;

    cursor: pointer;
}


.boton-confirmar-pedido:hover {

    background: #46220F;
}


.boton-confirmar-pedido:disabled {

    background: #AAA;

    cursor: not-allowed;
}


/* MÓVIL */

@media (max-width: 600px) {

    .modal-checkout {

        padding: 0;

        align-items: flex-end;
    }


    .checkout-contenido {

        width: 100%;

        max-height: 95vh;

        border-radius:
            18px 18px 0 0;
    }


    .checkout-body {

        padding: 12px;
    }


    .opciones-entrega,
    .opciones-pago {

        grid-template-columns: 1fr;
    }
}
    /* =====================================================
   BOTONES SECUNDARIOS DEL CHECKOUT
===================================================== */

.acciones-checkout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.boton-cancelar-checkout,
.boton-seguir-comprando {
    border: 1px solid #D8C9BC;
    background: white;
    color: #46220F;
    padding: 13px 14px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition:
        background 0.2s,
        border-color 0.2s,
        transform 0.15s;
}

/* CANCELAR */

.boton-cancelar-checkout:hover {
    background: #F7F1EB;
    border-color: #AA7444;
}

/* SEGUIR COMPRANDO */

.boton-seguir-comprando:hover {
    background: #F0E3D8;
    border-color: #AA7444;
}

/* Efecto al presionar */

.boton-cancelar-checkout:active,
.boton-seguir-comprando:active {
    transform: scale(0.98);
}


/* =====================================================
   SEGUIR COMPRANDO - CARRITO
===================================================== */

#seguir-comprando {
    width: 100%;
    margin-top: 10px;
}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .acciones-checkout {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .boton-cancelar-checkout,
    .boton-seguir-comprando {
        padding: 12px;
    }

}