/* Fondo del contenido migrado desde tu sitio anterior. */
.sitePage > div {
    background-color: rgba(255, 255, 255, 0.72);
}
/* Selectores específicos de SitioSimple para el pie de página */
.siteFooter,
.site-footer,
.ss-footer,
.footer-container,
#siteFooter,
#footer,
[data-role="footer"],
.sitePage + div,
.sitePage > div:last-child {
    background-color: #212529 !important;
    background-image: none !important;
}

/* Color claro para textos, enlaces e iconos dentro del pie */
.siteFooter *,
.site-footer *,
.ss-footer *,
.footer-container *,
#siteFooter * {
    color: #e9ecef !important;
}

/* ====================================================
   1. OCULTAR PESTAÑAS DE ENVÍO, PAGO Y LA BARRA GRIS
   ==================================================== */
#methods-tabs nav,
#nav-shipping,
#nav-payment {
    display: none !important;
}

/* Quitar bordes y fondos de caja que traen las pestañas */
#product-detail-tabs-content,
#nav-description {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

/* ====================================================
   2. MOVER LA DESCRIPCIÓN AL LADO DE LA FOTO (DESKTOP)
   ==================================================== */
@media (min-width: 992px) {
    /* 1. Definir el área del producto como marco de referencia */
    .item-details > .container {
        position: relative !important;
    }

    /* 2. Subir todo el bloque de descripción */
    #methods-tabs {
        position: absolute !important;
        /* La foto ocupa el 50% izquierdo; la descripción va en el 50% derecho */
        left: 50% !important;
        right: 0 !important;
        /* Se ubica a la altura donde terminan el precio y el botón de WhatsApp */
        top: 260px !important;
        width: 50% !important;
        margin: 0 !important;
        padding-left: 20px !important;
        padding-right: 15px !important;
        z-index: 5 !important;
    }

    /* Anular el contenedor interno de Bootstrap que le mete márgenes raros */
    #methods-tabs > .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 3. Evitar que el pie de página o la sección de abajo choquen con la descripción */
    .item-details {
        padding-bottom: 220px !important;
    }
}