/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/
/**
 * Mover el formulario de variaciones + botón comprar antes del excerpt/descr.
 */

/* Oculta el select nativo (Woo lo necesita) */
.variations_form select{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
}

.woocommerce-variation-availability {
    display: none;
}

/* Swatches */
.olivery-size-swatches{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:6px 0 14px;
}

.olivery-size-swatches .olivery-size-swatch{
  height:42px;
  min-width:42px;
  padding:0 14px;
  border-radius:999px;
  border:1.5px solid #000;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  user-select:none;
  font-weight:600;
  font-size:14px;
  line-height:1;
  background:transparent;
  white-space:nowrap;
  color:#000;
}

.olivery-size-swatches .olivery-size-swatch.is-active{
  background:#000 !important;
  color:#fff !important;
  border-color:#000 !important;
}

.olivery-size-swatches .olivery-size-swatch.is-disabled:hover,
.olivery-size-swatches .olivery-size-swatch:disabled:hover{
  background: inherit !important;
  color: inherit !important;
  border-color: rgba(0,0,0,.22) !important;
}

/* ==========================================================
   FILTRO DE TALLAS – SIDEBAR (GRID LIMPIO)
   ========================================================== */

.cl-size-filter{
  margin-bottom: 28px;
}

.cl-size-filter__title{
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cl-size-filter__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* Item */
.cl-size-filter__item{
  display: grid;
  place-items: center;
  height: 58px;
  padding: 8px;
  border-radius: 3px;
  background: #f3f3f3;
  border: 1.5px solid #000;
  color: #111;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transition: background .15s ease, border .15s ease, color .15s ease;
}

/* Hover */
.cl-size-filter__item:hover{
  background: #e9e9e9;
}

/* Activo */
.cl-size-filter__item.is-active{
  background: #111;
  border-color: #111;
  color: #fff;
}

/* Responsive */
@media (max-width: 1200px){
  .cl-size-filter__grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px){
  .cl-size-filter__grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 480px){
  .cl-size-filter__grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px){

@media (max-width: 768px){

  /* 1) Botón que abre el overlay */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay{
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,.10) !important;
    background: #fff !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
    line-height: 1 !important;
  }

  /* Icono */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay svg{
    width: 18px !important;
    height: 18px !important;
  }

  /* 2) Cambiar el texto “Filtrar productos” por “Filtros” sin tocar JS */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay span{
    font-size: 15px !important;
    font-weight: 600 !important;
    opacity: .95 !important;
  }

  /* Truco: oculto el texto real y pinto "Filtros" */
  .wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay span{
    position: relative !important;
    color: transparent !important;
  }
  .wp-block-woocommerce-product-filters .wc-block-product-filters__open-overlay span::after{
    content: "Filtros" !important;
    color: #111 !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    white-space: nowrap !important;
  }
}