/*
Theme Name: Astra Child - V&A Indumentaria
Theme URI: https://vyaindumentaria.com.ar
Description: Child theme de Astra personalizado para V&A Indumentaria (paleta neutra/tierra, tipografia Jost + Work Sans).
Author: Rodrigo Fuenzalida
Template: astra
Version: 1.0.0
Text Domain: astra-child-vya
*/

/* ============================================================
   V&A INDUMENTARIA — CSS GLOBAL
   ============================================================ */

/* ---- 1. Tipografias (Google Fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Work+Sans:wght@300;400;500;600&display=swap');

/* ---- 2. Variables de marca ---- */
:root{
  --vya-blanco:  #f7f7f7;
  --vya-negro:   #1f1f1f;
  --vya-marron:  #9c8b7d;
  --vya-rosa:    #ab9da9;
  --vya-font-heading: 'Jost', sans-serif;
  --vya-font-body: 'Work Sans', sans-serif;
}

/* ---- 3. Base ---- */
body{
  background-color: var(--vya-blanco) !important;
  color: var(--vya-negro);
  font-family: var(--vya-font-body);
  font-weight: 400;
  letter-spacing: 0.01em;
}

h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family: var(--vya-font-heading) !important;
  color: var(--vya-negro) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
}

a{ color: var(--vya-negro); transition: color .25s ease; }
a:hover{ color: var(--vya-marron); }

/* ---- 4. Barra de anuncio superior ---- */
.ast-top-header-wrap,
.announcement-bar,
.top-bar{
  background-color: var(--vya-negro) !important;
  color: var(--vya-blanco) !important;
  font-family: var(--vya-font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 0;
}
.ast-top-header-wrap a{ color: var(--vya-blanco) !important; }

/* ---- 5. Header / menu principal ---- */
.main-header-bar, .ast-primary-header-bar {
    background-color: var(--vya-blanco) !important;
    border-bottom: 1px solid rgba(31, 31, 31, 0.00) !important;
}

.main-navigation ul li > a,
.ast-masthead-custom-menu-items a{
  font-family: var(--vya-font-heading);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vya-negro) !important;
  font-weight: 500;
}
.main-navigation ul li > a:hover{
  color: var(--vya-marron) !important;
}

.site-branding,
.ast-site-identity{
  text-align: center;
}

/* ---- 6. Botones (Elementor + WooCommerce) ---- */
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
input[type="submit"]{
  background-color: var(--vya-negro) !important;
  color: var(--vya-blanco) !important;
  font-family: var(--vya-font-heading) !important;
  font-size: 13px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  border: 1px solid var(--vya-negro) !important;
  padding: 14px 32px !important;
  transition: all .3s ease !important;
}
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
input[type="submit"]:hover{
  background-color: transparent !important;
  color: var(--vya-negro) !important;
}

.vya-btn-outline .elementor-button{
  background-color: transparent !important;
  color: var(--vya-negro) !important;
}
.vya-btn-outline .elementor-button:hover{
  background-color: var(--vya-negro) !important;
  color: var(--vya-blanco) !important;
}

/* ---- 7. Grilla de productos (WooCommerce shortcode) ---- */
ul.products{
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0 !important;
}
@media (max-width: 768px){
  ul.products{ grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

ul.products li.product{
  width: 100% !important;
  margin: 0 !important;
  text-align: left;
}

ul.products li.product img{
  border-radius: 0;
  transition: opacity .4s ease, transform .5s ease;
}
ul.products li.product:hover img{
  opacity: 0.85;
  transform: scale(1.015);
}

ul.products li.product .woocommerce-loop-product__title{
  font-family: var(--vya-font-heading);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vya-negro);
  margin-top: 12px;
}

ul.products li.product .price{
  font-family: var(--vya-font-body);
  color: var(--vya-marron);
  font-weight: 500;
}

ul.products li.product .button{
  opacity: 0;
  transition: opacity .3s ease;
}
ul.products li.product:hover .button{ opacity: 1; }

/* ---- 8. Seccion institucional / banner grande ---- */
.vya-institucional{
  background-color: var(--vya-negro);
  color: var(--vya-blanco);
  padding: 90px 40px;
  text-align: center;
}
.vya-institucional h2{
  color: var(--vya-blanco) !important;
}

/* ---- 9. Franja de contacto / local ---- */
.vya-contacto-strip{
  background-color: var(--vya-rosa);
  color: var(--vya-negro);
  padding: 50px 20px;
}

/* ---- 10. Footer ---- */
.site-footer,
.ast-footer-container{
  background-color: var(--vya-negro) !important;
  color: var(--vya-blanco) !important;
}
.site-footer a{ color: var(--vya-blanco) !important; }
.site-footer a:hover{ color: var(--vya-rosa) !important; }

/* ---- 11. Responsive ---- */
@media (max-width: 768px){
  .vya-institucional{ padding: 50px 20px; }
}