/* ==========================================================
   SPECTRA - CSS adicional (PROD) - Depurado
   Objetivo: estabilidad + eliminar bug iOS (pantalla blanca hasta scroll)
   ========================================================== */

/* ===== Estilos de precios ===== */
.price .woocommerce-Price-amount.amount {
  color: #0000FF;
  font-size: 18px;
}

/* ===== Ocultar meta del producto ===== */
.product_meta > span {
  display: none;
  padding: 6px 0;
  border-top: 1px dotted #eaecee;
}

/* ===== Ajustar imágenes de producto ===== */
div.product div.images img {
  display: unset;
  width: 100%;
  height: 95%;
  box-shadow: none;
}

/* ===== Posts relacionados Jetpack ===== */
#jp-relatedposts .jp-relatedposts-items p,
#jp-relatedposts .jp-relatedposts-items time,
#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title {
  font-size: 0;
  line-height: 20px;
  margin: 0;
}

/* ===== Hover en desktop ===== */
@media (min-width: 768px) {
  .categoria-link:hover img {
    transform: scale(1.10);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }

  .woocommerce ul.products li.product a:hover img {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
}

/* ===== Tipografía y fondo ===== */
body {
  font-family: sans-serif;
  transition: none;
}

/* Fondo blanco inicial */
html, body {
  background-color: #fff;
  margin: 0;
  padding: 0;
}

/* ==========================================================
   HEADER
   - Se ELIMINA sticky forzado aquí.
   - Si el tema Customify tiene sticky nativo, que lo maneje el tema.
   ========================================================== */

/* (Intencionalmente NO forzamos sticky aquí)
#masthead,
.site-header,
.header-main {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  min-height: 80px;
}
.site-header img.custom-logo {
  height: 60px;
  width: auto;
  display: block;
}
*/

/* ===== Ajustes en móvil ===== */
@media (max-width: 768px) {
  /* Solo mantenemos ajustes seguros */
  .producto {
    width: 300px;
    height: auto;
    margin: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 5px 8px 15px rgba(0, 0, 0, 0.15);
  }
}

/* ===== Botón filtros YITH ===== */
button.yith-wcan-filters-opener.enhanced {
  font-size: 0 !important;
  position: relative;
  background-color: #c41230 !important;
  padding: 12px 24px !important;
  border-radius: 6px;
  min-width: 130px;
}

button.yith-wcan-filters-opener.enhanced::after {
  content: "Busque aquí";
  font-size: 14px !important;
  color: #fff !important;
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ===== Categorías ===== */
.categoria-link img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  display: block;
}

/* ===== Oferta ===== */
.onsale {
  left: auto !important;
  right: 0 !important;
}

/* ===== Full width banners ===== */
.fullwidth-banner {
  position: relative;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.fullwidth-banner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Evitar barras horizontales */
body {
  overflow-x: hidden;
}

/* ===== Botones SPECTRA ===== */
.btn-spectra a,
.btn-spectra .vc_general {
  background-color: #C41230 !important;
  border-color: #C41230 !important;
  color: #ffffff !important;
  transition: all 0.25s ease !important;
}

.btn-spectra a:hover,
.btn-spectra .vc_general:hover {
  background-color: #a20f26 !important;
  border-color: #a20f26 !important;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0px 8px 20px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* ==========================================================
   FIX iOS (Chrome/Safari iOS)
   Evita “pantalla blanca / se arregla al hacer scroll”.
   - No toca desktop/Android.
   - No fuerza sticky.
   ========================================================== */
@supports (-webkit-touch-callout: none) {
  html, body {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }

  /* Si el tema aplica sticky, en iOS lo neutralizamos para evitar el bug */
  #masthead,
  .site-header,
  .header-main {
    position: relative !important;
    top: auto !important;
  }
}
/* ==========================================================
   FIX WooCommerce: imágenes de productos tamaño correcto
   (necesario al quitar a3 Lazy Load)
   ========================================================== */

/* Grid de productos */
.woocommerce ul.products li.product {
  display: flex;
  flex-direction: column;
}

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

/* Contenedor de imagen */
.woocommerce ul.products li.product a {
  display: block;
}

/* Evita colapso de altura en móvil */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  flex-grow: 1;
}
/* ==========================================================
   FIX: Categorías - imágenes pequeñas dentro de cuadros
   ========================================================== */

/* Asegura que el link/box use todo el ancho */
.categoria-link,
.categoria-link a {
  display: block;
  width: 100%;
}

/* Fuerza la imagen a ocupar el cuadro */
.categoria-link img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
  object-fit: cover;  /* si querés que llene el cuadro */
}

/* Si tu grid está usando un contenedor con padding grande,
   esto ayuda a que no se vea “flotando” */
.categoria-link {
  padding: 0 !important;
}
/* ==========================================================
   HOME (WPBakery): categorías - imágenes pequeñas
   - Afecta solo los bloques con .categoria-link (Home)
   ========================================================== */

.categoria-link {
  display: block;
  width: 100%;
}

/* Si el contenedor del bloque tiene un padding/borde grande, lo eliminamos */
.categoria-link,
.categoria-link a {
  padding: 0 !important;
}

/* Fuerza que la imagen llene el cuadro */
.categoria-link img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block !important;
  object-fit: contain; /* se ve completa (sin recorte) */
}

/* Si el "cuadro" es un contenedor WPBakery tipo vc_single_image,
   lo forzamos a no limitar el ancho */
.categoria-link .vc_single_image-wrapper,
.categoria-link .vc_single_image-wrapper img {
  width: 100% !important;
  max-width: none !important;
}
/* ==========================================================
   YITH Filters: evita texto montado (doble texto)
   ========================================================== */

/* Restaurar texto normal y evitar duplicado */
button.yith-wcan-filters-opener.enhanced {
  font-size: 14px !important;         /* vuelve el texto normal */
  color: #fff !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-indent: 0 !important;          /* por si estaba corrido */
}

/* Apagar el texto artificial para que NO se monte */
button.yith-wcan-filters-opener.enhanced::after {
  content: none !important;
}
/* ==========================================================
   HOME: forzar que las categorías NO se vean como miniaturas
   (WPBakery / vc_single_image)
   ========================================================== */

/* Quita padding/margen interno del wrapper de la imagen */
.categoria-link .vc_single_image-wrapper,
.categoria-link .wpb_wrapper,
.categoria-link .vc_figure,
.categoria-link .vc_single_image-wrapper {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Fuerza la imagen a ocupar el ancho real disponible */
.categoria-link img,
.categoria-link .vc_single_image-wrapper img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  transform: none !important; /* por si estaba escalada */
}
/* Reduce parpadeo/blanco inicial reservando espacio del header */
#masthead, .site-header, .header-main {
  min-height: 70px;
}
/* ==========================================================
   Customify + WooCommerce: quitar espacio de sidebar
   (Shop / Category / Archive)
   ========================================================== */

/* 1) Ocultar sidebar cuando el body está en modo content-sidebar */
body.woocommerce-page.content-sidebar #secondary,
body.woocommerce-page.main-layout-content-sidebar #secondary,
body.woocommerce-page.content-sidebar .sidebar,
body.woocommerce-page.main-layout-content-sidebar .sidebar {
  display: none !important;
}

/* 2) Darle 100% de ancho al contenido */
body.woocommerce-page.content-sidebar #primary,
body.woocommerce-page.main-layout-content-sidebar #primary,
body.woocommerce-page.content-sidebar .content-area,
body.woocommerce-page.main-layout-content-sidebar .content-area {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* 3) Por si el wrapper grid está distribuyendo espacios */
body.woocommerce-page.content-sidebar .customify-grid,
body.woocommerce-page.main-layout-content-sidebar .customify-grid {
  justify-content: center;
}