/*
Theme Name:   Astra OMMVI Shop Child
Template:     astra
Version:      7.0
Author:       Diseñador Ore y Manu + MIA OMMVI
Description:  Tema hijo de élite para OMMVI Shop v-7.0
*/

/**
======================================================================
   Truco Visual para dividir todos los elementos con una linea verde
======================================================================
*/

/* === MEJORA UX GLOBAL === */
/* Activa el desplazamiento suave para todos los enlaces de anclaje del sitio. */
html {
  scroll-behavior: smooth;
}

/*
==========================================================================
 MEJORA VISUAL BOTONES WOOCOMMERCE - ICONO DE CARRITO v2.0
==========================================================================
*/

/* * 1. Unificamos selectores para cubrir todos los tipos de botón "Añadir":
 * - single_add_to_cart_button (Página de Producto)
 * - add_to_cart_button (Archivo, producto simple)
 * - ajax_add_to_cart (Archivo, con AJAX activado)
 */
.woocommerce button.button.single_add_to_cart_button,
.woocommerce a.button.add_to_cart_button,
.woocommerce a.button.ajax_add_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
}

/*
 * 2. Aplicamos el pseudo-elemento a todos los selectores.
 */
.woocommerce button.button.single_add_to_cart_button::before,
.woocommerce a.button.add_to_cart_button::before,
.woocommerce a.button.ajax_add_to_cart::before {
    content: '';
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    
    /* * ATENCIÓN A LA RUTA:
     * Esta ruta asume que tu estructura es:
     * /wp-content/themes/astra-ommvi-shop-child/style.css
     * /wp-content/themes/astra-ommvi-shop-child/assets/icons/cart-icon.svg
     */
    -webkit-mask-image: url('assets/icons/cart-icon.svg');
    mask-image: url('assets/icons/cart-icon.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/*
 ==========================================================================                                                                             
AJUSTE DE ESPACIADO INFERIOR ENTRE EL BOTON Y EL BORDE INFERIOR 
EN TARJETAS DE PRODUCTO DE LA REJILLA                                                                                                 
==========================================================================                                                                               
*/
/* Reduce el margen inferior de las tarjetas de producto en las páginas de archivo. */                                                                   	
.woocommerce-js ul.products li.product,                                                                                                                   
.woocommerce-page ul.products li.product {                                                                                                               
	margin-bottom: 0em; /* Original era 2.5em, reducido para menor espacio. */                                                                               
}

/*
==========================================================================
 ESTILOS PERSONALIZADOS DEL FOOTER v1.0
==========================================================================
*/
.footer-widget-area .widget-title,
.footer-widget-area .menu,
.ast-footer-copyright {
    text-align: center;
}

.om-payment-methods {
     justify-content: center;
     padding-top: 1rem;
}

/* Centrar copyright y pagos en la barra inferior */
.ast-footer-builder-grid-row-container.ast-footer-builder-grid-row-tablet-2-first,
.ast-footer-builder-grid-row-container.ast-footer-builder-grid-row-mobile-2-first {
     justify-content: center;
     text-align: center;
}

/* --- Estilos Móvil para el Footer --- */
.footer-widget-area .menu-item a {
      font-size: 16px;
}

@media (min-width: 769px) {
  
/* --- Títulos de los Widgets del Footer --- */
	.footer-widget-area .widget-title {
    	margin-bottom: 0rem; /* Espaciado del título */
    	font-size: 16px; /* Tamaño de fuente del título */
    	font-weight: 600; /* Semibold */
    	text-transform: uppercase;
	}

/* --- Enlaces de los Menús del Footer --- */
	.footer-widget-area .menu-item a {
    	color: #a0a0a0; /* Color de enlace grisáceo, ajústalo a tu paleta */
    	font-size: 16px;
    	padding-top: 5px;
    	padding-bottom: 5px;
	}

	.footer-widget-area .menu-item a:hover {
    	color: #ffffff; /* Color al pasar el ratón */
	}

/* --- Barra Inferior (Copyright & Pagos) --- */
	.ast-footer-copyright {
    	color: #a0a0a0;
	}

	.om-payment-methods img {
    	/* Dejamos que el navegador calcule el ancho/alto para mantener la proporción */
    	transition: opacity 0.2s ease-in-out;
	}

	.om-payment-methods img:hover {
    	opacity: 1;
	}
}

/*
==========================================================================
 CORRECCIÓN DE ALINEACIÓN EN LA FILA DE WIDGETS SUPERIORES DEL FOOTER
==========================================================================
*/

.site-footer .ast-builder-grid-row-above-footer .inner-wrap {
    /* Aplicamos un ajuste para asegurar que el contenido se alinee correctamente.
       A menudo, el problema es que el contenedor interno tiene paddings inconsistentes
       o no está centrado correctamente. */

    /* Reducimos los paddings laterales a un valor consistente (por ejemplo, 15px) 
       si no están alineados con el contenedor global de Astra. */
    padding-left: 15px; 
    padding-right: 15px; 

}

/* ==========================================================================
 ESTILOS PARA ICONOS SOCIALES EN EL FOOTER
========================================================================== 
*/

/* * 1. Aseguramos que el wrapper ocupe el ancho completo y su contenido esté centrado.
 */
.om-social-icons-wrapper {
    width: 100%; 
    box-sizing: border-box; /* Incluimos padding y borde en el cálculo del ancho */
    text-align: center; 
}

/* * 2. Aseguramos que el contenedor flex .om-social-icons esté centrado 
 * y maneje sus propios márgenes.
 */
.om-social-icons {
    display: flex;
    justify-content: center; /* Centra los iconos dentro del flexbox */
    gap: 1.5rem; 
    /* Usamos margin: 0 auto; para centrar el bloque en caso de que no ocupe el 100% */
    margin-top: 1.8rem; 
    /* Importante: Anulamos cualquier margen o padding por defecto si Astra lo está aplicando al widget */
    padding: 0; 
}

/* El resto de estilos de iconos */
.om-social-icons a {
    display: inline-flex;
}

.om-social-icons img {
    width: 48px;
    height: 48px;
    transition: transform 0.2s; 
}

.om-social-icons a:hover img {
    transform: scale(1.1);
}

/*Estilo para el boton de Añadir al Carrito */
.single_add_to_cart_button.added {
  background: #31c48d;      /* verde Woo */
  border-color: #31c48d;
}

.single_add_to_cart_button.added:hover {
  background: #28a178;
}

/* ====== HEADER MÓVIL OMMVISHOP (Astra) ====== */

/* 1) Fila y secciones centradas verticalmente */
.ast-header-break-point .ast-mobile-header-wrap .ast-builder-grid-row,
.ast-header-break-point .ast-mobile-header-wrap .ast-builder-layout-element {
  display:flex;
  align-items:center;
}

/* ===== SOLO MÓVIL (≤544px) ===== */
/* ===== Header móvil: menú izq, logo centrado, carrito a la derecha ===== */
@media (max-width: 544px) {
 
  /* 4) Tamaño del logo móvil */
  .ast-header-break-point .site-branding picture img,
  .ast-header-break-point .site-branding img,
  .ast-header-break-point .custom-logo-link img {
    width:auto !important; max-width:none !important;
    height:auto; max-height: 35px; /* ajusta 48–64px */
  }
  
  /* OFF-CANVAS: ancho y espaciados */
  .ast-mobile-popup-drawer .ast-mobile-popup-inner{
    width:92vw; max-width:92vw;
  }
  .ast-mobile-popup-drawer .main-header-menu .menu-item > a{
    padding:12px 16px; font-size:16px; line-height:1.2; font-weight:500;
  }
  .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle{
    right:8px;
  }
  
  /* Contenedor centrado */
  .ast-mobile-popup-drawer .oc-search{
    display:flex;
    justify-content:center;
    padding: 8px 0 14px;
  }
  /* Caja de FiboSearch más ancha y centrada */
  .ast-mobile-popup-drawer .dgwt-wcas-search-wrapp{
    width:100%;
    max-width:360px;              /* prueba 320–380 */
    margin:0 auto;
  }
  /* Alto del input */
  .ast-mobile-popup-drawer .dgwt-wcas-search-input{
    height:44px;                  /* 40–48 según gusto */
  }
  
  /* Altura y legibilidad de cada opción del menú */
  .ast-mobile-popup-drawer .main-header-menu .menu-item > a{
    display:flex; align-items:center;
    padding:14px 16px;            /* sube/baja para más/menos alto */
    min-height:48px;
    font-size:16px;
  }
  /* Botón de desplegar submenús más grande */
  .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle{
    width:36px; height:36px; right:10px;
  }
  /* Un poco de aire arriba del listado */
  .ast-mobile-popup-drawer .main-header-menu{ margin-top:8px; }
  
}

/* ===== OFF-CANVAS móvil (≤544px) ===== */
@media (max-width:544px){

  /* Ancho del panel y sin márgenes raros */
  .ast-mobile-popup-drawer .ast-mobile-popup-inner{
    width:92vw !important; max-width:92vw !important;
  }

  /* Centrar FiboSearch */
  .ast-mobile-popup-drawer .dgwt-wcas-search-wrapp{
    width:100% !important;
    max-width:360px !important;   /* 320–400 a gusto */
    margin:8px auto 14px !important;
  }
  /* Alto del input */
  .ast-mobile-popup-drawer .dgwt-wcas-search-input{
    height:44px !important;       /* 40–48 según gusto */
  }

  /* Ítems del menú: más altos y cómodos */
  .ast-mobile-popup-drawer .main-header-menu .menu-item > a{
    display:flex !important;
    align-items:center !important;
    min-height:48px !important;
    padding:14px 16px !important;
    font-size:16px !important;
    line-height:1.2 !important;
  }

  /* Toggle de submenús más grande y bien colocado */
  .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle{
    width:36px !important; height:36px !important; right:10px !important;
  }

  /* Un poco de aire antes del listado */
  .ast-mobile-popup-drawer .main-header-menu{ margin-top:8px !important; }
  
  .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle{
    width:28px; height:28px;
    background:none !important;    /* quita el círculo */
    border:none !important; box-shadow:none !important;
    right:10px;                     /* posición */
    top:50%; transform:translateY(-50%);
    color:#1A1A1A;                  /* color del chevron (cámbialo si quieres) */
  }
  /* chevron más fino */
  .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle .ast-icon{
    width:18px; height:18px;
  }
  /* gira al abrir */
  .ast-mobile-popup-drawer li.ast-submenu-expanded > .menu-link .ast-menu-toggle .ast-icon{
    transform:rotate(180deg);
  }
  /* El enlace padre debe ser relativo para posicionar el toggle */
  .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link{
    position: relative;
    padding-right: 44px; /* deja hueco al toggle */
  }

  /* Botón toggle: tamaño, centrado y sin bordes raros */
  .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;           /* ajusta 28–36 */
    height: 32px;
    padding: 0 !important;
    line-height: 1 !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 999px;
    display: grid;         /* centrado perfecto */
    place-items: center;
    background: #f5f7fa;   /* o 'transparent' si no quieres círculo */
    color: #1A1A1A;
  }

  /* Icono interno (chevron) centrado y tamaño controlado */
  .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle .ast-icon,
  .ast-mobile-popup-drawer .main-header-menu .ast-menu-toggle .ast-icon svg{
    width: 16px;           /* ajusta 14–18 */
    height: 16px;
    display: block;
  }

  /* Giro al expandir */
  .ast-mobile-popup-drawer li.ast-submenu-expanded
  > .menu-link .ast-menu-toggle .ast-icon{
    transform: rotate(180deg);
  }
  
/* === Alinear lupa con los iconos del header móvil === */

  /* El wrapper se comporta como un icono más */
  .ast-header-break-point .dgwt-wcas-search-wrapp{
    display:inline-flex;
    align-items:center;
    margin:0;
    padding:0;
    height:auto;
  }

  /* El trigger (a/button) sin padding y con caja cuadrada */
  .ast-header-break-point .dgwt-wcas-search-wrapp .dgwt-wcas-search-open,
  .ast-header-break-point .dgwt-wcas-open-mobile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    padding:0;
    margin:0;
    background:transparent;
    border:0;
    line-height:1;
  }

  /* El icono y su SVG sin baseline “caído” */
  .ast-header-break-point .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier,
  .ast-header-break-point .dgwt-wcas-search-wrapp .dgwt-wcas-ico-magnifier svg{
    display:block;
    width:24px;
    height:24px;
  }
}

/* ===== Solo ESCRITORIO (≥769px) ===== */
@media (min-width: 769px) {

  /* Asegurar que el bloque del logo exista visualmente */
  .site-branding,
  .ast-site-identity,
  .custom-logo-link {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Forzar visibilidad del logo de escritorio */
  .site-branding img,
  .ast-site-identity img,
  .custom-logo-link img,
  img.custom-logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-height: 60px !important;
  }

  /* Dar aire al header */
  .ast-primary-header-bar .ast-builder-grid-row-container {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 921px) {

  /* Evitar desbordes raros */
  .ast-header-break-point .ast-builder-grid-row,
  .ast-header-break-point .site-header-section-right {
    min-width: 0;
  }

  /* Padding exterior del header */
  .ast-header-break-point #masthead .ast-mobile-header-wrap .main-header-bar,
  .ast-header-break-point #masthead .ast-mobile-header-wrap .ast-above-header-bar {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /* Estructura general */
  .ast-mobile-header-wrap .ast-builder-grid-row.ast-builder-grid-row-has-sides.ast-builder-grid-row-no-center {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Lado izquierdo */
  .ast-mobile-header-wrap .site-header-above-section-left {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  /* Lado derecho */
  .ast-mobile-header-wrap .site-header-above-section-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    gap: 10px !important;
    padding-left: 5px !important;
    padding-right: 0 !important;
  }

  /* Items del header: alineación vertical consistente */
  .ast-mobile-header-wrap .site-header-above-section-right .site-header-focus-item,
  .ast-mobile-header-wrap .site-header-above-section-right .ast-builder-layout-element {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }

  /* Logo y hamburguesa */
  .ast-mobile-header-wrap .custom-logo-link,
  .ast-mobile-header-wrap .menu-toggle,
  .ast-mobile-header-wrap .ast-button-wrap {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Carrito: forzar alineación */
  .ast-mobile-header-wrap .ast-header-woo-cart,
  .ast-mobile-header-wrap .ast-header-woo-cart a,
  .ast-mobile-header-wrap .ast-header-woo-cart .ast-cart-menu-wrap {
    display: flex !important;
    align-items: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Badge del carrito */
  .ast-mobile-header-wrap .count,
  .ast-mobile-header-wrap .ast-cart-menu-wrap .count {
    top: -4px !important;
  }
}

/* =========================================
   BADGE OFERTA - SOLO EN LISTADOS / GRILLAS
========================================= */

.woocommerce ul.products li.product span.onsale,
.woocommerce ul.products li.product .astra-onsale-card,
.woocommerce-page ul.products li.product span.onsale,
.woocommerce-page ul.products li.product .astra-onsale-card {
    top: 14px;
    right: 14px;
    left: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    min-width: 88px;
    min-height: 34px;
    padding: 0 16px;
    border-radius: 999px;

    background: #e63946;
    color: #fff;

    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.3px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.14);
}