/* =========================================================
   BLOQUE PRODUCTOS — SISTEMA DE LAYOUTS
   Este CSS funciona para TODOS los bloques .loq-cards
   No depende del ID del bloque.
   ========================================================= */


/* =========================================================
   CONTENEDOR GENERAL DEL BLOQUE
   Espaciado lateral dentro del layout del sitio
   ========================================================= */

.loq-cards__shell{
  margin-left:16px;
  margin-right:16px;
}


/* =========================================================
   HEADER DEL BLOQUE
   ========================================================= */

header.loq-cards__header{
  margin-bottom:20px;
   display:block;
}


/* =========================================================
   HEADER — BLOQUES DE PRODUCTO
   (mismo estilo que MacBooks)
   ========================================================= */

.loq-cards__title{

  font-size:22px;
  font-weight:var(--loq-font-semibold);
  color:var(--loq-text);
  line-height:1.1;

}

.loq-cards__title span{

  color:var(--loq-text);
  font-weight:600;

}

.loq-cards__subtitle{

  font-size:12px;
  color:var(--loq-text-muted);

}



/* =========================================================
   FOOTER — CENTRADO DEL BOTÓN
   ========================================================= */

.loq-cards__footer{

  display:flex;
  justify-content:center;

  margin-top:50px;
  margin-bottom:50px;

}



/* =========================================================
   BOTÓN CTA
   (idéntico al bloque MacBooks)
   ========================================================= */

.loq-cards__toggle{

  background:#fff!important;

  border:1px solid rgba(0,0,0,0.08);
  border-radius:999px;

  padding:8px 14px;

  display:inline-flex;
  align-items:center;

  font-size:13px;
  font-weight:var(--loq-font-medium);

  color:var(--loq-text)!important;

  cursor:pointer;

}



/* =========================================================
   FLECHA
   ========================================================= */

.loq-cards__toggle::after{

  content:"↓";

  display:inline-block;

  font-size:12px;
  margin-left:6px;

  animation:lq-arrow-down 1.4s ease-in-out infinite;

}

.loq-cards__toggle.is-link::after{

  content:"→";
  animation:none;

}



/* =========================================================
   ANIMACIÓN
   ========================================================= */

@keyframes lq-arrow-down{

  0%{transform:translateY(0);}
  50%{transform:translateY(2px);}
  100%{transform:translateY(0);}

}


/* =========================================================
   GRID LAYOUT (DEFAULT)
   Comparación rápida de productos
   ========================================================= */

/* mobile */

.loq-cards.layout-grid .loq-cards-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0.75rem;
}

/* phones grandes */

@media (min-width:480px){
  .loq-cards.layout-grid .loq-cards-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* desktop */

@media (min-width:768px){
  .loq-cards.layout-grid .loq-cards-grid{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  }
}



/* =========================================================
   VISIBILIDAD DE PRODUCTOS (JS)
   Sistema "ver más"
   ========================================================= */

.loq-cards.layout-grid .loq-cards-grid-item{
  display:none;
}

.loq-cards.layout-grid .loq-cards-grid-item.is-visible{
  display:block;
}



/* =========================================================
   LIST LAYOUT
   Vista tipo catálogo horizontal
   ========================================================= */

.loq-cards.layout-list .loq-cards-grid{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:30px;
}


/* mostrar solo 4 productos */

.loq-cards.layout-list .loq-cards-grid-item{
  display:none;
}

.loq-cards.layout-list .loq-cards-grid-item:nth-child(-n+4){
  display:block;
}


/* card horizontal */

.loq-cards.layout-list article.offer-card{
  display:flex;
  align-items:center;
  gap:5px;
  flex-direction:row;
}


/* SALE badge */

.loq-cards.layout-list .lq-badge-sale{
  top:14px;
  left:12px;
  right:auto !important;
}


/* media */

.loq-cards.layout-list .offer-card__media{
  width:130px;
  flex-shrink:0;
  overflow:visible;
}

.loq-cards.layout-list .offer-card__media img{
  width:100%;
  height:auto;
}


/* body */

.loq-cards.layout-list .offer-card__body{
  display:flex;
  flex-direction:column;
  padding:0;
}


/* chips */

.loq-cards.layout-list .offer-card__chips{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:4px;
  margin-top:4px;
}


/* orden visual */

.loq-cards.layout-list .offer-card__title{
  order:1;
}

.loq-cards.layout-list .lq-card-condition{
  order:2;
}

.loq-cards.layout-list .offer-card__chips{
  order:3;
}

.loq-cards.layout-list .offer-card__usd{
  order:4;
}

.loq-cards.layout-list .offer-card__price{
  order:5;
}



/* =========================================================
   CAROUSEL LAYOUT
   Scroll horizontal de productos
   ========================================================= */

.loq-cards.layout-carousel .loq-cards-grid{
  display:flex;
  overflow-x:auto;
  gap:16px;
  padding-bottom:15px;

  /* ocultar scrollbar */
  -ms-overflow-style:none;
  scrollbar-width:none;
}

.loq-cards.layout-carousel .loq-cards-grid::-webkit-scrollbar{
  display:none;
}


/* items del carrusel */

.loq-cards.layout-carousel .loq-cards-grid-item{
  display:block;
  flex:0 0 260px;
  scroll-snap-align:start;
}


/* romper el padding del contenedor */

.loq-cards.layout-carousel .loq-cards-grid{
  margin-left:-16px;
  margin-right:-16px;
  padding-left:16px;
  padding-right:16px;
  scroll-padding:16px;
}


/* ocultar botón en carrusel */

.loq-cards.layout-carousel .loq-cards__footer{
  display:none;
}


/* =========================================================
   MOBILE — CAROUSEL
   ========================================================= */

@media (max-width:768px){

  .loq-cards.layout-carousel .loq-cards-grid-item{
    flex:0 0 45%;
  }

}