/* ============================================================
   RESPONSIVE-FIX.CSS — MR CONSTRUCTOR
   Solo corrige: imágenes de productos + indicadores carousel
   NO toca: navbar, login, layout general
   ============================================================ */

/* ============================================================
   1. IMÁGENES DE PRODUCTO — Mostrar completas (sin recorte)
   ============================================================ */
.product-image-wrapper,
.product-image,
.producto-imagen {
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px !important;
}

.product-image-wrapper img,
.product-image img,
.producto-imagen img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* ============================================================
   2. INDICADORES DEL CAROUSEL — Círculos pequeños
      Bootstrap 5 los hace rectangulares por defecto,
      aquí los forzamos pequeños en todas las resoluciones
   ============================================================ */
.carousel-indicators {
    align-items: center !important;
    gap: 0 !important;
    margin-bottom: 0.75rem !important;
}

.carousel-indicators button,
.carousel-indicators [data-bs-target] {
    box-sizing: border-box !important;
    width: 10px !important;
    height: 10px !important;
    min-width: 10px !important;
    min-height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    background-color: transparent !important;
    background-clip: unset !important;
    opacity: 1 !important;
    padding: 0 !important;
    margin: 0 4px !important;
    display: block !important;
    flex: none !important;
    text-indent: 0 !important;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.carousel-indicators button.active,
.carousel-indicators [data-bs-target].active {
    background-color: #8B4513 !important;
    border-color: #8B4513 !important;
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    min-height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
}