/*
Theme Name: Astra Child - Yammbo Shop
Theme URI: https://yammboshop.com
Description: Child theme de Astra para Yammbo Shop. Pulido profesional y personalizaciones.
Author: Yammbo
Template: astra
Version: 1.0.3
Text Domain: astra-child
*/

/* =========================================================
   Hero (Electronic Store): en móvil el texto negro caía
   sobre la parte ocupada de la imagen de fondo y no se leía.
   La caja de texto debía tener fondo blanco (ast-global-color-5)
   pero no se aplicaba. Le damos un fondo blanco translúcido
   SOLO en móvil/tablet; el desktop queda intacto.
   ========================================================= */
@media (max-width: 921px){
  [data-spectra-id="spectra-mfqgciph-d089az"]{
    background-color: rgba(255,255,255,.82) !important;
    -webkit-backdrop-filter: saturate(140%) blur(4px);
    backdrop-filter: saturate(140%) blur(4px);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(17,17,26,.10);
  }
}

/* =========================================================
   Yammbo Shop — Professional polish (palette-neutral)
   Usa variables/colores heredados de Astra; solo refina
   forma, sombras, hover, tipografía y micro-interacciones.
   ========================================================= */
:root{
  --ys-radius: 12px;
  --ys-radius-sm: 8px;
  --ys-shadow: 0 6px 24px rgba(17,17,26,.08);
  --ys-shadow-hover: 0 16px 40px rgba(17,17,26,.16);
  --ys-ease: .3s cubic-bezier(.2,.7,.3,1);
}

/* Tipografía con más carácter */
h1,h2,h3,.entry-title{ letter-spacing:-.02em; }
h1{ line-height:1.08; }
h2{ line-height:1.15; }

/* Botones modernos con leve elevación al hover */
.ast-button,.button,.wp-block-button__link,
.woocommerce a.button,.woocommerce button.button,.woocommerce .button,
.woocommerce a.button.alt,.woocommerce #respond input#submit{
  border-radius: var(--ys-radius);
  font-weight:600;
  letter-spacing:.01em;
  transition: transform var(--ys-ease), box-shadow var(--ys-ease), background-color var(--ys-ease), filter var(--ys-ease);
}
.ast-button:hover,.button:hover,.wp-block-button__link:hover,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce .button:hover,
.woocommerce a.button.alt:hover,.woocommerce #respond input#submit:hover{
  transform: translateY(-2px);
  box-shadow: var(--ys-shadow);
  filter: brightness(.97);
}

/* Tarjetas de producto: hover refinado + zoom de imagen */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-woocommerce-product-template li{
  border-radius: var(--ys-radius);
  transition: transform var(--ys-ease), box-shadow var(--ys-ease);
}
.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover{
  transform: translateY(-4px);
  box-shadow: var(--ys-shadow-hover);
}
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img{
  border-radius: var(--ys-radius-sm);
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.woocommerce ul.products li.product:hover a img{ transform: scale(1.05); }

/* Imagen de producto contenida (evita que el zoom desborde) */
.woocommerce ul.products li.product a{ display:block; overflow:hidden; border-radius: var(--ys-radius-sm); }

/* Precio con más peso */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price{ font-weight:700; }

/* Badge de oferta tipo pill */
.woocommerce span.onsale{
  border-radius:999px;
  padding:.4em .8em;
  min-height:auto; min-width:auto;
  line-height:1.2; font-weight:600;
  box-shadow: var(--ys-shadow);
}

/* Inputs/redondeo coherente */
input[type=text],input[type=email],input[type=search],input[type=tel],
input[type=number],input[type=password],textarea,select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea{
  border-radius: var(--ys-radius-sm);
}

/* Imágenes más suaves */
.wp-block-image img,.wp-block-cover{ border-radius: var(--ys-radius); }

/* Enlaces de navegación con subrayado animado sutil */
.main-header-menu .menu-item > a{ transition: color var(--ys-ease); }

/* Scroll reveal — solo activo con JS; nunca afecta above-the-fold */
.ys-js .ys-reveal{
  opacity:0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.ys-js .ys-reveal.ys-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .ys-js .ys-reveal{ opacity:1 !important; transform:none !important; }
}

/* =========================================================
   Fuentes modernas (Manrope títulos / Inter cuerpo)
   ========================================================= */
body, button, input, select, textarea,
.ast-container, .woocommerce, .menu-item > a{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
}
h1,h2,h3,h4,h5,h6,.site-title,.entry-title,.widget-title,
.ast-button,.button,.wp-block-button__link,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce div.product .product_title{
  font-family:'Manrope','Inter',sans-serif !important;
  letter-spacing:-.02em;
}

/* =========================================================
   Menú móvil (Astra Pro off-canvas) — más moderno
   ========================================================= */
@media (max-width: 921px){
  /* Botón hamburguesa: con fondo y forma, no "desnudo" */
  .ast-mobile-menu-buttons .menu-toggle.main-header-menu-toggle{
    background: rgba(0,0,0,.05);
    border-radius: 12px;
    padding: 9px 11px;
    transition: transform var(--ys-ease), background-color var(--ys-ease);
  }
  .ast-mobile-menu-buttons .menu-toggle.main-header-menu-toggle:hover{
    transform: translateY(-1px);
    background: rgba(0,0,0,.09);
  }

  /* Panel del drawer: más premium + slide suave */
  .ast-mobile-popup-drawer.active .ast-mobile-popup-inner{
    box-shadow: -16px 0 48px rgba(17,17,26,.22);
  }
  .ast-mobile-popup-content,
  .ast-mobile-popup-drawer .ast-mobile-header-content{ padding-top: 6px; }

  /* Items: tap targets grandes + divisores + tipografía */
  .ast-mobile-popup-drawer .main-header-menu .menu-item > a,
  .ast-mobile-popup-drawer .main-navigation .menu-item > a,
  .ast-mobile-popup-drawer .menu-item > .menu-link{
    font-family:'Manrope','Inter',sans-serif !important;
    font-size: 1.06rem;
    font-weight: 600;
    padding: 15px 22px !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
    transition: background-color var(--ys-ease), padding-left var(--ys-ease), color var(--ys-ease);
  }
  .ast-mobile-popup-drawer .main-header-menu .menu-item > a:hover,
  .ast-mobile-popup-drawer .main-header-menu .menu-item > a:focus{
    background: rgba(0,0,0,.04);
    padding-left: 28px !important;
  }

  /* Flecha de submenús: área de toque cómoda */
  .ast-mobile-popup-drawer .ast-header-navigation-arrow{
    padding: 12px 16px;
    border-radius: 8px;
  }

  /* Botón cerrar (X) destacado y con giro al hover */
  .ast-mobile-popup-drawer .menu-toggle-close{
    width: 42px; height: 42px;
    border-radius: 50%;
    background: rgba(0,0,0,.05);
    transition: transform var(--ys-ease), background-color var(--ys-ease);
  }
  .ast-mobile-popup-drawer .menu-toggle-close:hover{
    transform: rotate(90deg);
    background: rgba(0,0,0,.1);
  }
}