/*
 Theme Name:   Astra Child
 Theme URI:    https://www.ommi.com/
 Description:  Astra Child Theme para OMMVI.
 Author:       OMMVI Development
 Author URI:   https://www.ommi.com/
 Template:     astra
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child
*/

/* =====================================================
   PERSONALIZACIONES OMNVI - CSS MIGRADO
===================================================== */

/* === PRODUCTO PAGINA ================================ */

/* BOTÓN "COMPRAR AHORA" PERSONALIZADO */
.omv-buy-now-button.button.alt {
  background-color: #26c054 !important;
  color: #ffffff !important;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  border: none;
  border-radius: 5px;
  padding: 12px 80px;
  display: inline-block;
  margin-top: 10px;
  margin-left: 0;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.omv-buy-now-button.button.alt:hover {
  background-color: #414141 !important;
}

/* Agrega borde negro a imágenes dentro de listas ordenadas (si se usan en blogs o instrucciones) 
ol > li > img {
    border: 1px solid #000000;
}*/

/* Oculta el detalle de disponibilidad de stock en la página de producto */
.ast-stock-detail {
    display: none;
}

/* === ESTILO DE TÍTULO EN PÁGINA DE PRODUCTO ================================
   Personaliza el título principal (.product_title.entry-title) en la ficha
   individual del producto:
   - Ajusta márgenes, tamaño y estilo tipográfico
   - Usa fuente Rubik con peso y color definidos
============================================================================= */

.product_title.entry-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 35px;
    font-weight: 500;
    font-style: normal;
    line-height: 100%;
    font-family: 'Rubik', sans-serif !important;
    color: #1b1b1b !important;
}

/* === ESTILO PARA PRECIO REBAJADO EN PRODUCTOS =============================
   Aplica fondo, bordes y padding al nuevo precio (dentro de <ins>),
   que se muestra cuando hay una rebaja:
   - Fondo amarillo para destacar el precio con oferta
   - Bordes redondeados
   - Espaciado lateral para mejorar legibilidad
============================================================================= */

.price > ins {
    background: #ffea28 !important;
    border-radius: 5px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* === ESTILO PARA LA IMAGEN ACTIVA EN LA GALERÍA DE PRODUCTO ================
   Aplica un borde sutil a la imagen actualmente activa en la galería
   de productos en la página individual. Mejora la distinción visual
   cuando se usan varias imágenes del producto.
============================================================================= */

.woocommerce-product-gallery__image.flex-active-slide {
    border-style: solid !important;
    border-width: 0.8px !important;
    border-color: #8080802e !important; /* Gris claro con transparencia */
}

/* === ESTILO DE BORDES EN GALERÍA DE PRODUCTO (ASTRA) =======================
   Aplica un borde sutil a todas las imágenes dentro de la galería de producto
   en el tema Astra, incluyendo la imagen destacada y miniaturas.
============================================================================= */

.ast-woocommerce-product-gallery__image {
    border-style: solid !important;
    border-width: 0.8px !important;
    border-color: #8080802e !important; /* Gris claro con transparencia */
}

/* === ESTILO DE ETIQUETA " % de OFERTA" EN TARJETA DE PRODUCTO ===
.ast-on-card-button.ast-onsale-card {
    background: #ed1d24;
    color: white;
    font-size: medium;
}*/

/* === OCULTAR CONTADOR DE PRODUCTOS EN CATEGORÍAS ====*/
.count{
	display: none !important;
}

/* === Aviso de Envío gratuito  "Enhorabuena, tu envio es gratis!" en checkout: visualmente destacado pero liviano ===*/
.devnet_fsl-free-shipping {
  background-color: #e9fbe9; /* Verde muy suave de fondo */
  border: 1.5px solid #28a745;
  border-radius: 10px;
  padding: 12px;
  /*box-shadow: 0 0 12px -4px rgba(40, 167, 69, 0.4);  sombra verde ligera */
  font-weight: 600;
  color: #155724; /* Verde oscuro para buen contraste */
  text-align: center;
}

/* === ESTILO UNIFICADO PARA BOTONES DE ENVÍO EN Formularios WPForms ===
   Aplica a todos los formularios WPForms. Mejora el diseño del botón "Enviar"
   con colores de marca, tipografía clara y separación ajustada.
*/
#wpforms-submit-5017,
#wpforms-submit-1244 {
    color: #FFFFFF;
    background-color: #ED1D24;
    font-size: 14px;
    line-height: 1.2em;
    letter-spacing: 1.3px;
    margin-bottom: 3px;
    margin-right: 0px;
    padding: 10px 18px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* === Oculta la descripción de la categoría en las páginas de archivo de productos ===
.categoria-descripcion-abajo {
	display: none !important;
}*/

/* Oculta las pestañas de descripción, valoraciones, etc., en productos para pantallas pequeñas */
@media (max-width: 600px) {
  
  /* Oculta el contenedor de pestañas en páginas de producto */
  .woocommerce #content div.product .woocommerce-tabs,
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce-page #content div.product .woocommerce-tabs,
  .woocommerce-page div.product .woocommerce-tabs {
    display: none;
  }

/* Oculta el aviso de "Envío Gratis" en productos (probablemente el label del plugin) */
  .devnet_fsl-label {
    display: none !important;
  }

}

/* Ajuste de márgenes del título principal de la página */
.page-title {
	margin-bottom: 0 !important; /* Elimina espacio debajo del título */
	margin-top: 1%;              /* Añade un pequeño margen superior */
}

/* Elimina el espacio interior debajo de cada tarjeta de producto */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	padding-bottom: 0 !important;
}

/* ===== Ajuste visual para la etiqueta de envío gratuito ===== */
.devnet_fsl-label {
    display: inline-block;
    background-color: #27c83f;     /* Verde llamativo */
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    padding: 6px 14px;             /* Espacio interno cómodo */
    border-radius: 6px;            /* Bordes redondeados suaves */
    margin-top: 8px;               /* Separación respecto al precio */
    margin-bottom: 6px;            /* Separación del botón */
    text-align: center;
    width: 80%;                   /* Se adapta al contenido */
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);  /* Sombra sutil */
}

/* ===== Ajuste visual para la etiqueta de envío gratuito para móviles ===== */
@media (max-width: 768px) {
    .devnet_fsl-label {
        width: 100%;         /* En móviles que use todo el ancho */
    }
}

/* Ajuste del tamaño de fuente en enlaces de entradas recientes (bloque Gutenberg) */
.wp-block-latest-posts > li > a {
	font-size: 14px !important;
}

/* Añade una línea inferior a cada ítem de lista en la barra lateral */
#secondary li {
	border-bottom: 1px solid #ccc;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

/* Evita scroll horizontal en toda la web */
html,
body {
  width: 100%;
  overflow-x: hidden;
}



/* === HEADER - ESTRUCTURA Y MENÚ ================================ */

/* Distribuye el header en 3 columnas: logotipo, buscador (doble ancho), carrito */
.ast-builder-grid-row.ast-grid-center-col-layout {
    grid-template-columns: 1fr 2fr 1fr;
}

/* Permite que el contenido del centro (el buscador) se expanda sin límite visual */
.site-header-primary-section-center.site-header-section.ast-flex.ast-grid-section-center {
    display: contents !important;
}

/* Aplica color verde solo al ítem del menú "OFERTAS" para destacarlo visualmente */
#menu-item-1205 {
    background-color: #26c054;
}

/* === ESTILOS PARA EL HEADER FIJO Y MENÚ DE NAVEGACIÓN === */

/* Fuerza que el texto de los ítems del menú tenga color blanco */
.site-header .menu-text {
	color: white !important;
}

/* Cambia el fondo del header fijo cuando se activa (al hacer scroll) */
#ast-fixed-header .ast-below-header {
	background: #c71016 !important;
}

/* Ajustes de márgenes para mayor compactación visual */
.woocommerce .ast-shop-toolbar-container {
	margin-bottom: 0 !important;
}

.woocommerce-js .woocommerce-breadcrumb {
	margin: 0 !important;
}