/*
Theme Name: Divi Child
Theme URI: http://www.elegantthemes.com/gallery/divi/
Template: Divi
Author: Elegant Themes
Author URI: http://www.elegantthemes.com
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 5.0.0-public-alpha.24.1760023530
Updated: 2025-10-09 17:25:30

*/




/*/
████████ ██ ███████ ███    ██ ██████   █████  
   ██    ██ ██      ████   ██ ██   ██ ██   ██ 
   ██    ██ █████   ██ ██  ██ ██   ██ ███████ 
   ██    ██ ██      ██  ██ ██ ██   ██ ██   ██ 
   ██    ██ ███████ ██   ████ ██████  ██   ██
/*/


/** 
BOTÓN "COMPRAR"
PARA TODOS 
LOS PRODUCTOS
**/

.woocommerce ul.products li.product .button {
font-size:14px!important;
padding: 3px 12px 3px 12px !important;
background-color:#ff0832!important;
width: fit-content;
margin:auto 15px 10px 15px;}

.woocommerce ul.products li.product .button:hover{
font-size:14px!important;
padding: 3px 12px 3px 12px !important;
background-color:#f7f7f7!important;
color:#333!important;
width: fit-content;}

/* Tamaño de botón de comprar en movil */
@media all and (max-width:768px) {
.woocommerce a.button{font-size: 12px!important;}}




/*  MARGEN LATERAL PAGINA DE TIENDA */

/* --- ESTILO GENERAL (ESCRITORIO) --- */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  float: left;
  position: relative;
  width: 23.5%;           /* 4 columnas */
  margin: 0 2% 2% 0;    /* margen lateral y abajo del 1.5% */
  padding: 0;
}

/* Quitar margen derecho al último producto de cada fila */
.woocommerce ul.products li.product:nth-child(4n),
.woocommerce-page ul.products li.product:nth-child(4n) {
  margin-right: 0;
}




/* AJUSTANDO SHOPCARDS */
h2.woocommerce-loop-product__title,
ul.products li.product .price
{padding:0 15px!important;}

/**
BARRA DE ORDERNAR POR...
EN PAGINAS DE TIENDA
**/
.orderby{
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: url('/wp-content/uploads/ordernar-dq.png');
background-repeat: no-repeat, repeat;
background-position: right 0em top 50%, 0 0;
background-size:1.5em auto, 100%;
display: block;
outline-color: initial;
outline-style: none;
outline-width: initial;
white-space: nowrap;
text-overflow: ellipsis;
background-color: transparent;
box-shadow: none;
cursor: pointer;
width: 100%;
height: 22px;
padding:0px 32px 0px 0px;
z-index: 1;
font-size: 14px;
margin-right:15px;
color:#f7f7f7!important;
float: right;}

.orderby:hover {
opacity: 0.6;}

@media all and (min-width: 768px) and (max-width: 980px){
.orderby{
width: 100%;
height: 25px;
float: right;}

.woocommerce .woocommerce-ordering {
margin-bottom: 20px!important;
margin-right: 1%!important;}}

@media all and (max-width:768px) {
.orderby{
width:1px;
background-size:22px auto, 100%;
padding:0px 30px 0px 0px;
height: 25px;
float: right;
margin-right: 4px;
font-size: 13px;}}

.woocommerce .woocommerce-ordering {
margin-bottom: 15px;}

@media all and (max-width:768px) {
.woocommerce .woocommerce-ordering {
margin:2px 0px 12px 0px !important;}}

/* Cambia el alineado del texto del selector de ordernar */
.woocommerce-ordering select.orderby {
direction: rtl;}

/* Mostrando resultados */
.woocommerce .woocommerce-result-count {
color:#f7f7f7;
margin-bottom: 15px !important;
margin-left:10px;}

@media all and (max-width:980px) {
.woocommerce .woocommerce-result-count {
padding-top: 2px;}}

@media all and (min-width: 768px) and (max-width: 980px) {
.woocommerce .woocommerce-result-count {
margin-bottom: 20px!important;
margin-left: 1.5%!important;}}

@media all and (max-width:768px) {
.woocommerce .woocommerce-result-count {
margin:2px 0px 14px 0px !important;
font-size:13px;}}


/* --- Igualar altura de las tarjetas de producto en la tienda --- */
ul.products li.product {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  min-height: 450px; /* ajusta según tu diseño */
}

/* Hacer que el enlace principal ocupe todo el espacio posible
ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
} */

/* Empujar el botón al fondo de la tarjeta */
ul.products li.product .button {
  margin-top: auto;
}

/* (Opcional) Alinear títulos y precios visualmente */
ul.products li.product .woocommerce-loop-product__title
/*, ul.products li.product .price*/ {
  min-height: 2.5em; /* fuerza una altura mínima */
}

/* (Opcional) Truncar los títulos largos a 2 líneas */
ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}





/** 
BADGES(CARTELES)
DE OFERTA Y AGOTADO 
**/

.et-db #et-boc .et-l .et_pb_shop_0_tb_body.et_pb_shop .woocommerce ul.products li.product .onsale {
margin: 0px !important;
padding:7px 12px !important;}


/* Cartel de oferta CSS COMUNES */
.woocommerce span.onsale, 
.woocommerce-page span.onsale,
.woocommerce ul.products li.product .onsale, 
.woocommerce-page ul.products li.product .onsale{
color: #fff;
background-color: #a82451!important;
position: absolute;
margin:0px!important;	
left: auto!important;
line-height: 100% !important;
border-radius:20px!important;}

/* EN GENERAL */
.woocommerce ul.products li.product .onsale, 
.woocommerce-page ul.products li.product .onsale{
top: 10px !important;
right: auto !important;
left: 10px !important;}

@media all and (max-width: 768px) {
.woocommerce ul.products li.product .onsale, 
.woocommerce-page ul.products li.product .onsale{
top: 18px !important;
right: -15px !important;
font-size: 10px !important;
padding: 5px!important;}}

/* Cartel de Agotado */
.woocommerce span.now_sold , 
.woocommerce-page span.now_sold , 
.woocommerce ul.products li.product .now_sold , 
.woocommerce-page ul.products li.product .now_sold {

position: absolute;
/*transform: rotate(90deg);*/
top: 10px !important;
right: auto !important;
left: 10px !important;
line-height: 100% !important;
padding: 7px 12px!important;
border-radius:20px!important;
z-index:10!important;
    font-family: 'Host Grotesk' !important;
    font-weight: 700 !important;
    background: #4a4a4a;
color: #fff;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
}

@media all and (max-width: 768px) {
.woocommerce span.now_sold , 
.woocommerce-page span.now_sold , 
.woocommerce ul.products li.product .now_sold , 
.woocommerce-page ul.products li.product .now_sold {
top: 19px !important;
right: -17px !important;
font-size: 10px !important;
padding: 5px!important;}}