/* ============================================================
   GASEX V3.8 — VITRINA PRODUCTOS
   Sistema GX estable + alineamiento perfecto cards
   + Botón WhatsApp + títulos completos sin recortar
============================================================ */

:root {
  --gx-dark: #1C244B;
  --gx-gray: #6b7280;
  --gx-border: rgba(0,0,0,0.06);
  --gx-bg: #ffffff;
  --gx-radius: 16px;
  --gx-wa: #25D366;
}

/* ------------------------------------------------------------
   SECTION
------------------------------------------------------------ */

.gx-products {
  padding: 50px 0;
  background: #fff;
}

.gx-products .gx-wrap {
  width: min(1400px, 92%);
  margin: 0 auto;
  padding: 0 1rem;
}

/* ------------------------------------------------------------
   CARD
------------------------------------------------------------ */

.gx-product-card{

  position: relative;
  background: var(--gx-bg);
  border: 1px solid var(--gx-border);
  border-radius: var(--gx-radius);

  padding: 1rem;

  display:flex;
  flex-direction:column;

  height:100%;
  min-height:480px;

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ------------------------------------------------------------
   IMAGEN
------------------------------------------------------------ */

.gx-product-thumb{
  display:block;
  width:100%;
  aspect-ratio:1/1;

  background: linear-gradient(145deg,#f4f6f9,#eef1f5);

  border-radius:12px;
  overflow:hidden;

  margin-bottom:0.75rem;

  flex-shrink:0;
}

.gx-product-thumb img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .4s ease;
}

/* ------------------------------------------------------------
   INFO
------------------------------------------------------------ */

.gx-product-info{
  display:flex;
  flex-direction:column;
  gap:.35rem;

  flex:1 1 auto;
  min-height:0;
  width:100%;
}

.gx-product-category{
  font-size:.65rem;
  font-weight:700;
  color:var(--gx-gray);
  text-transform:uppercase;
  letter-spacing:.05em;

  min-height:1em;
}

/* Título con altura FIJA de 4 líneas (alineación perfecta entre cards).
   Si el título es más corto, sobra espacio. Si supera 4 líneas, se trunca con "...". */
.gx-product-name{
  font-size:.95rem;
  font-weight:800;
  color:var(--gx-dark);
  line-height:1.3;

  /* Mostrar hasta 4 líneas, truncar si excede */
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;

  /* Altura FIJA reservada = 4 líneas × line-height 1.3 = 5.2em */
  height:5.2em;

  /* Para títulos con palabras largas */
  word-wrap:break-word;
  overflow-wrap:break-word;
}

/* ------------------------------------------------------------
   PRECIO — Slots con altura fija (alineamiento perfecto)
------------------------------------------------------------ */

.gx-product-price{
  margin-top:14px;
  height:60px;
  flex-shrink:0;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:0;
}

.gx-product-price del{
  display:block;
  height:24px;
  line-height:24px;
  font-size:.85rem;
  color:#9aa1a9;
  text-decoration:line-through;
}

.gx-product-price:not(:has(del))::before{
  content:"";
  display:block;
  height:24px;
}

.gx-product-price del .woocommerce-Price-amount{
  font-size:.85rem;
  font-weight:600;
  color:#9aa1a9;
}

.gx-product-price > .woocommerce-Price-amount,
.gx-product-price .price > .woocommerce-Price-amount,
.gx-product-price ins{
  display:block;
  height:30px;
  line-height:30px;
  font-size:1.15rem;
  font-weight:900;
  color:var(--gx-dark);
}

.gx-product-price ins{
  text-decoration:none;
}

.gx-product-price ins .woocommerce-Price-amount{
  display:inline-block;
  height:auto;
  line-height:inherit;
  font-size:1.15rem;
  font-weight:900;
  color:var(--gx-dark);
}

.gx-product-price bdi{
  font-size:inherit;
  font-weight:inherit;
  color:inherit;
  display:inline-block;
  vertical-align:baseline;
}

.gx-product-price .woocommerce-Price-currencySymbol{
  font-weight:700;
}

.gx-product-price .woocommerce-price-suffix{
  display:inline;
  font-size:.75rem;
  color:var(--gx-gray);
  font-weight:500;
  margin-left:4px;
  white-space:nowrap;
  line-height:30px;
}

.gx-product-price .screen-reader-text{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* ------------------------------------------------------------
   PRECIO MAYORISTA
------------------------------------------------------------ */

.gx-product-wholesale{
  margin-top:6px;
  padding-top:6px;

  border-top:1px dashed var(--gx-border);

  min-height:46px;
  flex-shrink:0;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:2px;
}

.gx-product-wholesale:empty::before{
  content:"";
  display:block;
  min-height:32px;
}

.gx-product-wholesale-label{
  font-size:.65rem;
  font-weight:700;
  color:var(--gx-gray);
}

.gx-product-wholesale-price{
  font-size:.95rem;
  font-weight:900;
  color:var(--gx-dark);
}

/* ------------------------------------------------------------
   BOTONES (contenedor + base + variantes)
------------------------------------------------------------ */

/* Contenedor que mantiene los botones siempre abajo de la card */
.gx-product-actions{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}

/* Base para todos los botones de la card */
.gx-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  border-radius:10px;
  font-weight:700;
  transition:all .25s ease;
}

.gx-product-info .gx-btn,
.gx-btn-product,
.gx-btn-whatsapp{
  width:100%;
  padding:.65rem;
  font-size:.85rem;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  border-radius:10px;
  font-weight:700;
  transition:all .25s ease;
}

/* Botón "Ver producto" */


.gx-btn-product:active{
  transform:translateY(1px);
}

/* Botón WhatsApp */
.gx-btn-whatsapp{
  background:var(--gx-wa);
  color:#fff !important;
}

.gx-btn-whatsapp svg{
  flex-shrink:0;
}

.gx-btn-whatsapp:active{
  transform:translateY(1px);
}

/* ------------------------------------------------------------
   BADGE SALE
------------------------------------------------------------ */

.gx-badge-sale{
  position:absolute;
  top:10px;
  left:10px;

  background:#fff;
  color:var(--gx-dark);

  font-size:.65rem;
  font-weight:900;

  padding:.4rem .8rem;

  border-radius:8px 0 10px 0;

  box-shadow:0 4px 12px rgba(0,0,0,.08);

  z-index:2;
}

/* ------------------------------------------------------------
   HOVER
------------------------------------------------------------ */

@media (hover:hover){

  .gx-product-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 30px rgba(0,0,0,.07);
  }

  .gx-product-card:hover .gx-product-thumb img{
    transform:scale(1.04);
  }

  .gx-btn-product:hover{
    background:#111936;
    transform:translateY(-2px);
  }

  .gx-btn-whatsapp:hover{
    background:#1ebe5b;
    transform:translateY(-2px);
    box-shadow:0 8px 16px rgba(37,211,102,.25);
  }

}

/* ------------------------------------------------------------
   DESKTOP
------------------------------------------------------------ */

@media (min-width:1200px){

  .gx-product-card{
    padding:1.1rem;
  }

}

/* ============================================================
   GX AUTO CAROUSEL
============================================================ */

.gx-carousel{
  position:relative;
  overflow:hidden;
}

.gx-carousel-track{
  display:flex;
  gap:20px;
  width:max-content;

  align-items:stretch;

  animation:gxAutoScroll 40s linear infinite;
}

.gx-carousel-track > .gx-product-card{
  flex:0 0 240px;
  height:auto;
}

.gx-carousel:hover .gx-carousel-track{
  animation-play-state:paused;
}

@keyframes gxAutoScroll{

  0%{
    transform:translateX(0);
  }

  100%{
    transform:translateX(-50%);
  }

}

/* ============================================================
   GX VITRINA — GRILLA FIJA (≤4 productos en desktop)
============================================================ */

@media (min-width: 900px) {

  .gx-carousel.is-grid-active {
    overflow: visible;
  }

  .gx-carousel.is-grid-active .gx-carousel-track {
    animation: none;
    transform: none;
    align-items: stretch;
  }

  .gx-carousel.is-grid-active .gx-carousel-track > .gx-product-card {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  .gx-carousel.is-grid-active[data-product-count="1"],
  .gx-carousel.is-grid-active[data-product-count="2"],
  .gx-carousel.is-grid-active[data-product-count="3"] {
    text-align: center;
  }

  .gx-carousel.is-grid-active[data-product-count="1"] .gx-carousel-track,
  .gx-carousel.is-grid-active[data-product-count="2"] .gx-carousel-track,
  .gx-carousel.is-grid-active[data-product-count="3"] .gx-carousel-track {
    display: inline-grid;
    gap: 20px;
    width: auto;
    text-align: left;
  }

  .gx-carousel.is-grid-active[data-product-count="1"] .gx-carousel-track {
    grid-template-columns: minmax(280px, 320px);
  }

  .gx-carousel.is-grid-active[data-product-count="2"] .gx-carousel-track {
    grid-template-columns: repeat(2, minmax(280px, 320px));
  }

  .gx-carousel.is-grid-active[data-product-count="3"] .gx-carousel-track {
    grid-template-columns: repeat(3, minmax(280px, 320px));
  }

  .gx-carousel.is-grid-active[data-product-count="4"] .gx-carousel-track {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    width: 100%;
    display: grid;
  }

}