/* =========================
   ADD TO CART – CLOSE BUTTON
   ========================= */

#addToCart .modal-content{
    position: relative; /* ancla la X */
}

#addToCart .atc-close{
    position: absolute;
    top: 14px;
    right: 14px;

    width: 40px;
    height: 40px;
    border-radius: 999px;

    background: rgba(17, 24, 39, 0.88);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 14px 30px rgba(0,0,0,0.28);

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    cursor: pointer;
    z-index: 9999;
}

#addToCart .atc-close:hover{
    background: rgba(17, 24, 39, 0.98);
}

#addToCart .atc-close span{
    color: #fff;
    font-size: 24px;
    line-height: 1;
    display: block;
    transform: translateY(-1px); /* centra ópticamente */
}

/* ===== FIX: Close button anchored to dialog corner (like screenshot) ===== */

/* el dialog es el “contenedor” real que queremos usar como referencia */
#addToCart .modal-dialog.product-modal{
    position: relative !important;
}

/* si el content recorta, la X nunca podrá quedar en la esquina real */
#addToCart .modal-content{
    overflow: visible !important;
}

/* tu botón actual */
#addToCart .atc-close{
    position: absolute !important;

    /* AJUSTA AQUÍ: esto lo deja en la esquina “pro” */
    top: -14px !important;
    right: -14px !important;

    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;

    background: rgba(17,24,39,.88) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.28) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    z-index: 999999 !important;
}

#addToCart .atc-close:hover{
    background: rgba(17,24,39,.98) !important;
}

#addToCart .atc-close span{
    color: #fff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    display: block !important;
    transform: translateY(-1px);
}