/* =====================================================================
   LA MARAAVILLA — CSS PERSONALIZADO PARA EASYBUILD (DONWEB)
   =====================================================================
   Generado a partir del análisis real del HTML/clases que EasyBuild
   renderiza en: https://la-maraavilla.myeasybuild.website/limpieza

   CÓMO USARLO:
   1. En el editor de EasyBuild: Diseño → Hoja de estilo en cascada (CSS)
   2. Activá el interruptor "Al activar el CSS podrás personalizar
      el código de tu sitio"
   3. Pegá TODO este archivo tal cual en el cuadro de CSS y guardá
   4. Ajustá las variables de la sección 1 (colores, radios, fuentes)
      a tu gusto — todo el resto del archivo las usa automáticamente

   IMPORTANTE:
   EasyBuild genera el HTML del catálogo (productos, precios, carrito,
   paginación, buscador) automáticamente vía Livewire. Este CSS NO
   toca esa lógica ni la base de productos: solo cambia la
   presentación visual, usando las clases reales que ese HTML ya trae.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1) VARIABLES DE MARCA — cambiá estos valores para tu identidad visual
   --------------------------------------------------------------------- */
:root {
  --lm-color-primario:      #2e7d32;   /* color principal (botones, acentos) */
  --lm-color-primario-hover:#1b5e20;
  --lm-color-texto:         #2b2b2b;
  --lm-color-texto-suave:   #6b6b6b;
  --lm-color-precio:        #1b5e20;
  --lm-color-fondo:         #f7f7f7;
  --lm-color-borde:         #e5e5e5;
  --lm-radio:               12px;
  --lm-fuente:              'Poppins', 'Segoe UI', Arial, sans-serif;

}

body {
  font-family: var(--lm-fuente);
  color: var(--lm-color-texto);
  background-color: var(--lm-color-fondo);
}


/* ---------------------------------------------------------------------
   2) ENCABEZADO / NAVBAR
   (clases reales: .navbar.navbar-dark, .nav-item, .ss-menu-item,
   .dropdown-item)
   --------------------------------------------------------------------- */
.navbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.navbar .nav-item,
.navbar .ss-menu-item {
  font-family: var(--lm-fuente);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.navbar .dropdown-item:hover {
  background-color: var(--lm-color-primario);
  color: #fff;
}

/* buscador del header (input real: placeholder="Buscar") */
input[placeholder="Buscar"] {
  border-radius: 10px !important;
  border: 1px solid var(--lm-color-borde) !important;
  font-family: var(--lm-fuente);
}


/* ---------------------------------------------------------------------
   3) SIDEBAR DE CATEGORÍAS
   (clases reales: .container-category, .tree, .subtitle-filter,
   .ul-subcategory)
   --------------------------------------------------------------------- */
.container-category {
  border-radius: var(--lm-radio);
  border: 1px solid var(--lm-color-borde);
  overflow: hidden;
}

.container-category > p {
  background-color: var(--lm-color-primario) !important;
  color: #fff !important;
  font-weight: 700 !important;
  margin: 0;
}

.container-category .subtitle-filter {
  color: var(--lm-color-texto);
  text-decoration: none !important;
  font-weight: 700;
}

.container-category .ul-subcategory li a {
  color: var(--lm-color-texto-suave);
  text-decoration: none;
  display: inline-block;
  padding: 3px 0;
  transition: color 0.15s ease;
}

.container-category .ul-subcategory li a:hover,
.container-category .subtitle-filter:hover {
  color: var(--lm-color-primario);
}

/* botón "Filtrar" en mobile */
.filter-button {
  border-radius: var(--lm-radio) !important;
  background-color: var(--lm-color-primario) !important;
  color: #fff !important;
  border: none !important;
}

.title-filter {
  font-weight: 700;
  color: var(--lm-color-texto);
}


/* ---------------------------------------------------------------------
   4) GRILLA DE PRODUCTOS
   (clases reales: .container-products = fila Bootstrap que envuelve
   cada producto en un <div class="col-lg-4 col-sm-6 col-12">)

   El toggle "4 / 6" funciona en TODAS las pantallas, celular incluido:

     Botón "4" (vista-4, por defecto) → celular/tablet: 2 columnas
                                          PC (≥992px):   4 columnas
     Botón "6" (vista-6)              → celular/tablet: 3 columnas
                                          PC (≥992px):   6 columnas

   OJO: si no ves el cambio al tocar los botones, revisá que:
   1) Este CSS esté completo y guardado en Diseño → Hoja de estilo
      en cascada (CSS), con el interruptor activado.
   2) Hiciste una recarga forzada (Ctrl+Shift+R / Cmd+Shift+R) para
      que el navegador no muestre una versión vieja en caché.
   --------------------------------------------------------------------- */
.container-products {
  display: flex;
  flex-wrap: wrap;
}

.container-products > [class*="col-"] {
  padding: 6px !important;
  margin: 0 !important;
}

/* Celular y tablet (<992px) */
@media (max-width: 991.98px) {
  .container-products.vista-6 > [class*="col-"] {
    flex: 0 0 33.3333% !important;   /* vista "6": 3 columnas */
    max-width: 33.3333% !important;
  }
  .container-products:not(.vista-6) > [class*="col-"] {
    flex: 0 0 50% !important;        /* vista "4" (default): 2 columnas */
    max-width: 50% !important;
  }
}

/* PC (≥992px) */
@media (min-width: 992px) {
  .container-products > [class*="col-"] {
    padding: 10px !important;
  }
  .container-products.vista-6 > [class*="col-"] {
    flex: 0 0 16.6666% !important;   /* vista "6": 6 columnas */
    max-width: 16.6666% !important;
  }
  .container-products:not(.vista-6) > [class*="col-"] {
    flex: 0 0 25% !important;        /* vista "4" (default): 4 columnas */
    max-width: 25% !important;
  }
}


/* ---------------------------------------------------------------------
   4.1) BOTONES DE VISTA (4 por fila / 6 por fila)
   Estos botones los inserta el JS (lamaravilla-vista-toggle.js) justo
   antes de .container-products. Se muestran en todas las pantallas.
   --------------------------------------------------------------------- */
.lm-vista-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 14px;
  flex-wrap: wrap;
}

/* grupo "Ver: 4 por fila / 6 por fila" (en celular, el botón Filtrar
   -reubicado por el JS- queda a la izquierda y este grupo a la derecha,
   gracias al space-between de arriba) */
.lm-vista-buttons-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lm-vista-label {
  font-size: 13px;
  color: var(--lm-color-texto-suave);
  margin-right: 2px;
}

.lm-vista-btn {
  border: 1px solid var(--lm-color-borde);
  background: #fff;
  color: var(--lm-color-texto);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--lm-fuente);
}

.lm-vista-btn:hover {
  border-color: var(--lm-color-primario);
  color: var(--lm-color-primario);
}

.lm-vista-btn.active {
  background: var(--lm-color-primario);
  border-color: var(--lm-color-primario);
  color: #fff;
}

/* con más columnas las tarjetas son más chicas: achicamos un poco
   tipografía, precio y botón para que no se vea apretado */
.container-products.vista-6 .product-info h4.title {
  font-size: 13px !important;
  min-height: 34px;
}
.container-products.vista-6 .div-price {
  font-size: 16px;
}
.container-products.vista-6 .product-btn .btn,
.container-products.vista-6 .product-btn .consultar {
  font-size: 12px;
  padding: 6px 8px !important;
}

@media (max-width: 575.98px) {
  .container-products.vista-6 .product-info h4.title {
    font-size: 11px !important;
    min-height: 28px;
  }
  .container-products.vista-6 .div-price {
    font-size: 13px;
  }
  .container-products.vista-6 .product-btn .btn,
  .container-products.vista-6 .product-btn .consultar {
    font-size: 10px;
    padding: 4px 6px !important;
  }
}


/* ---------------------------------------------------------------------
   5) TARJETA DE PRODUCTO
   (clases reales: .single-product, .product-image, .product-info,
   .title, .div-price, .product-btn, button.consultar)
   --------------------------------------------------------------------- */
.single-product {
  border: 1px solid var(--lm-color-borde) !important;
  border-radius: var(--lm-radio) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.single-product:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
  transform: translateY(-2px);
}

/* imagen del producto — la altura fija (240px) la define EasyBuild
   inline; si querés cambiarla, hacelo desde el panel de EasyBuild
   (Diseño → tarjetas de producto) para que aplique a todas parejo */
.product-image img {
  object-fit: contain !important;
  transition: transform 0.2s ease;
}

.single-product:hover .product-image img {
  transform: scale(1.04);
}

/* nombre del producto (h4.title) */
.product-info h4.title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--lm-color-texto) !important;
  min-height: 40px;
  line-height: 1.3;
}

/* subtítulo / marca (h5.title), si EasyBuild lo completa */
.product-info h5.title {
  font-size: 12px !important;
  color: var(--lm-color-texto-suave) !important;
}

/* precio */
.div-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--lm-color-precio) !important;
}

/* botón CONSULTAR y demás botones/links de la tarjeta */
.product-btn .btn,
.product-btn .consultar {
  background-color: var(--lm-color-primario) !important;
  border-color: var(--lm-color-primario) !important;
  border-radius: 8px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: background-color 0.2s ease;
}

.product-btn .btn:hover,
.product-btn .consultar:hover {
  background-color: var(--lm-color-primario-hover) !important;
  border-color: var(--lm-color-primario-hover) !important;
}

/* link "VER DETALLE" dentro de la tarjeta */
.product-btn a:not(.btn) {
  color: var(--lm-color-primario);
  font-size: 13px;
  text-decoration: underline;
}


/* ---------------------------------------------------------------------
   6) PAGINACIÓN / "MOSTRAR X POR PÁGINA"
   (clase real: .text-paginator select.form-select)
   --------------------------------------------------------------------- */
.text-paginator {
  font-size: 14px;
  color: var(--lm-color-texto-suave);
}

.text-paginator .form-select {
  border-radius: 8px;
  border: 1px solid var(--lm-color-borde);
}

/* si EasyBuild pinta los números de página con .pagination / .page-item */
.pagination .page-link {
  color: var(--lm-color-primario);
  border-radius: 8px !important;
  margin: 0 3px;
  border: 1px solid var(--lm-color-borde);
}

.pagination .page-item.active .page-link {
  background-color: var(--lm-color-primario) !important;
  border-color: var(--lm-color-primario) !important;
  color: #fff !important;
}


/* ---------------------------------------------------------------------
   7) PIE DE PÁGINA
   (clase real: .footer-custom-text-color)
   --------------------------------------------------------------------- */
.footer-custom-text-color {
  font-family: var(--lm-fuente);
}

.footer-custom-text-color a {
  color: inherit;
  text-decoration: none;
}

.footer-custom-text-color a:hover {
  text-decoration: underline;
}


/* ---------------------------------------------------------------------
   8) RESPONSIVE EXTRA — ajustes finos en celular
   --------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .single-product {
    padding: 8px !important;
  }

  /* la imagen del producto mide 240px de alto fijo (lo define EasyBuild
     inline) — en celular es lo que más espacio ocupa, así que la
     achicamos bastante para que entren mínimo 4 productos en pantalla
     (2 filas x 2 columnas) sin tener que hacer scroll. */
  .product-image {
    height: 120px !important;
  }
  .product-image img {
    height: 120px !important;
  }

  .product-info h4.title {
    font-size: 12px !important;
    min-height: 28px;
    margin-bottom: 2px;
  }
  .div-price {
    font-size: 15px;
  }
  .product-btn .btn,
  .product-btn .consultar {
    font-size: 12px;
    padding: 5px 8px !important;
  }
}


/* ---------------------------------------------------------------------
   9) CELULAR — ocultar buscador/"Ordenar por"/miga de pan "Catálogo" y
   mover el botón "Filtrar" a la misma fila que "Ver: 4/6 por fila"
   (pedido del cliente), para que entren mínimo 4 productos en pantalla
   sin scroll y no sobre espacio vacío arriba.

   El botón "Filtrar" lo reubica el JS (lamaravilla-hotlink-images.js,
   PARTE 1) dentro de .lm-vista-toggle. Cuando lo logra, le agrega la
   clase .lm-filter-moved a .container-search — recién ahí ocultamos
   .container-search del todo. Si por algo el JS no llegara a correr,
   .container-search se queda visible como red de seguridad (mejor
   que el cliente pierda el acomodo lindo a que pierda el filtro).

   (clases reales: .container-search .col-md-7.col-12 = buscador,
   .container-search .container-select = "Ordenar por",
   .breadcrumb-catalogo = "Catálogo > CATEGORÍA",
   .lm-vista-toggle = fila "Ver: 4 por fila / 6 por fila",
   .filter-button = botón "Filtrar")
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .container-search .row.g-3 > .col-md-7.col-12,
  .container-search .container-select {
    display: none !important;
  }

  /* una vez que el JS reubicó el botón Filtrar, esta caja ya no tiene
     nada adentro: la ocultamos del todo (ver nota arriba) */
  .container-search.lm-filter-moved {
    display: none !important;
  }

  /* miga de pan "Catálogo > CATEGORÍA": oculta, sin dejar espacio */
  .breadcrumb-catalogo {
    display: none !important;
  }

  /* fila "Ver: 4 por fila / 6 por fila" + Filtrar: pegada al grid */
  .lm-vista-toggle {
    margin: 6px 0 8px !important;
  }
  .lm-vista-label {
    font-size: 12px !important;
  }
  .lm-vista-btn {
    padding: 4px 10px !important;
    font-size: 12px !important;
  }

  /* Texto/ícono de "Filtrar": EasyBuild lo pinta azul (#045CF2) por
     estilo inline, y sobre el fondo verde del botón no se leía bien —
     lo forzamos a blanco para que contraste. Sin el ".lm-vista-toggle"
     adelante para que valga tanto si el botón ya se reubicó como si por
     algún motivo se quedó en su lugar de siempre (red de seguridad). */
  .filter-button span,
  .filter-button i {
    color: #fff !important;
    font-size: 12px !important;
  }

  /* botón Filtrar ya reubicado dentro de la fila "Ver: 4/6 por fila" */
  .lm-vista-toggle .filter-button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 4px 12px !important;
  }
}


/* ---------------------------------------------------------------------
   10) CELULAR — que "AGREGAR AL CARRITO" / "VER DETALLE" no tapen la
   foto del producto (pedido del cliente)

   EasyBuild arma esta caja de botones (.product-btn) como una capa que
   cubre TODA la tarjeta (position:absolute + top/left/right/bottom:0),
   pensada para mostrarse recién al pasar el mouse por encima ("hover"),
   algo que solo existe en PC. En el celular no hay mouse, así que el
   sitio la deja visible todo el tiempo — pero sigue "flotando" en esa
   posición, tapando la foto en vez de acomodarse debajo, que es lo que
   se ve en las capturas que mandó el cliente.

   La solución: en pantallas chicas, sacamos esa caja de la posición
   flotante y la volvemos a poner en su lugar normal dentro de la
   tarjeta (debajo de la foto, el nombre y el precio), como una fila
   más — así no tapa nada. Además se muestra más compacta.
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .product-btn {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    width: auto !important;
    pointer-events: auto !important;
    margin-top: 8px !important;
  }

  .product-btn .btn.addcart {
    font-size: 11px !important;
    padding: 6px 6px !important;
    line-height: 1.3;
  }

  .product-btn a:not(.btn) {
    font-size: 11px !important;
  }
}


/* ---------------------------------------------------------------------
   11) SELECTOR DE CANTIDAD EN LA TARJETA DEL CATÁLOGO (pedido del
   cliente)

   Lo inserta el JS (lamaravilla-hotlink-images.js, PARTE 3) justo
   arriba del botón "AGREGAR AL CARRITO" de cada producto, para elegir
   cuántas unidades agregar sin tener que entrar al detalle del
   producto.
   --------------------------------------------------------------------- */
/* El sitio trae reglas propias (para otros botones/cajas dentro de
   .product-btn) que ponen esta clase de contenedores en columna y
   estiran botones/inputs al 100% de ancho — sin querer, eso hacía que
   el selector de cantidad se viera apilado en 3 filas en vez de en una
   sola fila tipo "spinner" (reportado por el cliente). Por eso acá TODO
   lleva !important y ancho fijo: no alcanza con "display:flex", hay
   que forzar también flex-direction, y el ancho/alto de cada botón e
   input, para ganarle a esas reglas. */
.lm-qty-wrap {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 auto 6px !important;
  width: fit-content !important;
  border: 1px solid var(--lm-color-borde) !important;
  border-radius: 7px !important;
  overflow: hidden !important;
}

.lm-qty-wrap .lm-qty-btn {
  flex: 0 0 20px !important;
  width: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  height: 24px !important;
  border: none !important;
  border-radius: 0 !important;
  background: #f4ece4 !important;
  color: var(--lm-color-texto) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--lm-fuente);
}

.lm-qty-wrap .lm-qty-btn:hover {
  background: var(--lm-color-primario) !important;
  color: #fff !important;
}

.lm-qty-wrap .lm-qty-input {
  flex: 0 0 24px !important;
  width: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid var(--lm-color-borde) !important;
  border-right: 1px solid var(--lm-color-borde) !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--lm-fuente);
  color: var(--lm-color-texto) !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

@media (max-width: 767.98px) {
  .lm-qty-wrap {
    margin: 0 auto 4px !important;
  }
  .lm-qty-wrap .lm-qty-btn {
    flex-basis: 18px !important;
    width: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    height: 20px !important;
    font-size: 11px !important;
  }
  .lm-qty-wrap .lm-qty-input {
    flex-basis: 22px !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 20px !important;
    font-size: 10px !important;
  }
}