/*
Theme Name: AutoPartes Jara Child
Theme URI: https://autopartesjara.com.ar
Description: Tema hijo de Astra para AutoPartes Jara
Author: Pablo
Template: astra
Version: 1.0.0
Text Domain: autopartes-jara-child
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Syne:wght@700;800&display=swap');

/* ══════════════════════════════════════
   VARIABLES
══════════════════════════════════════ */
:root {
  --negro: #0f1014;
  --blanco: #ffffff;
  --fondo: #f5f6f8;
  --fondo2: #eef0f4;
  --texto: #1a1d24;
  --texto-suave: #5a6072;
  --borde: #e2e5ec;
  --rojo: #e02020;
  --rojo2: #c41a1a;
  --rojo-claro: #fff0f0;
  --gris-oscuro: #1e2128;
  --display: 'Syne', sans-serif;
  --cuerpo: 'Inter', sans-serif;
  --pad: clamp(20px, 5vw, 60px);
}

/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
body {
  background: var(--fondo) !important;
  color: var(--texto) !important;
  font-family: var(--cuerpo) !important;
  font-weight: 400;
}

/* ══════════════════════════════════════
   HEADER / NAV
══════════════════════════════════════ */
.site-header,
#masthead {
  background: var(--negro) !important;
  border-bottom: 3px solid var(--rojo) !important;
  position: sticky !important;
  top: 0;
  z-index: 200;
}

.site-branding .site-title a,
.ast-site-name-wrap .site-title a {
  color: var(--blanco) !important;
  font-family: var(--display) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

.main-navigation a,
.ast-nav-menu > li > a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  transition: color .2s !important;
}

.main-navigation a:hover,
.ast-nav-menu > li > a:hover {
  color: var(--blanco) !important;
}

/* Botón CTA del nav */
.ast-nav-menu > li.ast-menu-item-cta > a,
.menu-item-cta > a {
  background: var(--rojo) !important;
  color: #fff !important;
  padding: 8px 20px !important;
  border-radius: 5px !important;
  font-weight: 600 !important;
}

/* ══════════════════════════════════════
   WOOCOMMERCE - GRILLA DE PRODUCTOS
══════════════════════════════════════ */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 16px !important;
}

.woocommerce ul.products li.product {
  background: var(--blanco) !important;
  border: 1.5px solid var(--borde) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all .2s !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.1) !important;
  transform: translateY(-2px) !important;
  border-color: var(--rojo) !important;
}

/* Imagen del producto */
.woocommerce ul.products li.product a img {
  height: 160px !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Nombre del producto */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--texto) !important;
  padding: 14px 14px 4px !important;
  line-height: 1.3 !important;
}

/* Precio */
.woocommerce ul.products li.product .price {
  font-family: var(--display) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  color: var(--rojo) !important;
  padding: 0 14px !important;
}

/* Botón agregar al carrito */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button {
  background: var(--rojo) !important;
  color: #fff !important;
  border: none !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  margin: 8px 14px 14px !important;
  transition: background .2s !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.woocommerce ul.products li.product .button:hover {
  background: var(--rojo2) !important;
}

/* ══════════════════════════════════════
   WOOCOMMERCE - PÁGINA DE PRODUCTO
══════════════════════════════════════ */
.woocommerce div.product .product_title {
  font-family: var(--display) !important;
  font-size: clamp(26px, 3.5vw, 42px) !important;
  font-weight: 800 !important;
  color: var(--texto) !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--display) !important;
  color: var(--rojo) !important;
  font-size: 32px !important;
  font-weight: 800 !important;
}

.woocommerce div.product .single_add_to_cart_button {
  background: var(--rojo) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 13px 28px !important;
  transition: background .2s !important;
}

.woocommerce div.product .single_add_to_cart_button:hover {
  background: var(--rojo2) !important;
}

/* ══════════════════════════════════════
   BUSCADOR
══════════════════════════════════════ */
.woocommerce-product-search input[type="search"],
.search-field {
  border: 2px solid var(--borde) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  font-family: var(--cuerpo) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  background: var(--fondo) !important;
  transition: border-color .2s !important;
  width: 100% !important;
}

.woocommerce-product-search input[type="search"]:focus {
  border-color: var(--rojo) !important;
  background: var(--blanco) !important;
  outline: none !important;
}

/* ══════════════════════════════════════
   CATEGORÍAS
══════════════════════════════════════ */
.product-cat a {
  color: var(--texto-suave) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 5px 12px !important;
  border-radius: 100px !important;
  background: var(--fondo2) !important;
  border: 1px solid var(--borde) !important;
  transition: all .2s !important;
  text-decoration: none !important;
}

.product-cat a:hover,
.product-cat.current-cat a {
  background: var(--rojo) !important;
  color: #fff !important;
  border-color: var(--rojo) !important;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
.site-footer,
#colophon {
  background: var(--negro) !important;
  border-top: 3px solid var(--rojo) !important;
  color: rgba(255,255,255,0.35) !important;
}

.site-footer a,
#colophon a {
  color: rgba(255,255,255,0.35) !important;
  transition: color .2s !important;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--blanco) !important;
}

/* ══════════════════════════════════════
   BOTÓN WHATSAPP FLOTANTE
══════════════════════════════════════ */
.wsp-flotante {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 999;
  background: #25d366;
  color: #fff;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 20px rgba(37,211,102,0.4);
  text-decoration: none;
  transition: transform .2s;
}

.wsp-flotante:hover {
  transform: scale(1.1);
  color: #fff;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
  .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 960px) {
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
}