/* ---------- Variables ---------- */
:root{
  --rbx-red:#c91f2c;
  --rbx-gray:#e9e9ea;
  --rbx-dark:#1c1c1c;
  --rbx-blue:#0078d7;
  --rbx-yellow:#f9c802;
  --rbx-accent:#2b2b2b;
  --text:#111;
  --container-max:1400px;
  --gap:16px;
}

/* ---------- Contenedor principal ---------- */
.sliderarcade-design-roblox .sliderarcade-container{
  background:linear-gradient(180deg,var(--rbx-gray) 0%,#fff 100%);
  border:4px solid var(--rbx-red);
  border-radius:12px;
  max-width:var(--container-max);
  margin:0 auto 100px;
  padding:clamp(16px,2.2vw,24px) clamp(12px,2.5vw,24px) clamp(80px,8vh,120px);
  position:relative;
  overflow:visible;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
  box-sizing:border-box;
}

/* Optional: track/grid wrapper for slides (keeps layout fluid) */
.sliderarcade-design-roblox .sliderarcade-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(260px,1fr);
  gap:var(--gap);
  align-items:start;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:8px;
}

/* When not using horizontal scroll, this makes slides wrap responsively */
.sliderarcade-design-roblox .sliderarcade-track.grid-wrap{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--gap);
  overflow:visible;
  scroll-snap-type:none;
}

/* ---------- Slides ---------- */
.sliderarcade-design-roblox .sliderarcade-slide{
  padding:0 10px;
  scroll-snap-align:start;
  box-sizing:border-box;
}

/* ---------- Tarjeta de producto estilo bloque ---------- */
.sliderarcade-design-roblox .sliderarcade-product{
  background:linear-gradient(180deg,#ffffff 0%,var(--rbx-gray) 100%);
  border:3px solid var(--rbx-dark);
  border-radius:10px;
  padding:clamp(10px,1.6vw,16px);
  text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio:4/3;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  box-sizing:border-box;
}
.sliderarcade-design-roblox .sliderarcade-product:hover{
  transform:translateY(-4px) scale(1.015);
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

/* ---------- Imagen ---------- */
.sliderarcade-design-roblox .sliderarcade-product-img{
  width:100%;
  height:auto;
  max-height:280px;
  object-fit:contain;
  margin:0 auto 10px;
  display:block;
  border-radius:6px;
  border:2px solid var(--rbx-blue);
  background:#fff;
}

/* Make images responsive within grid/track */
.sliderarcade-design-roblox .sliderarcade-product .sliderarcade-product-img{
  max-width:100%;
}

/* ---------- Título, descripción y precio ---------- */
.sliderarcade-design-roblox .sliderarcade-product-title{
  font-weight:800;
  color:var(--rbx-dark);
  margin:6px 0;
  font-size:clamp(1rem,1.1vw + .4rem,1.3rem);
  text-shadow:0 1px 0 #fff;
  line-height:1.1;
}
.sliderarcade-design-roblox .sliderarcade-product-description{
  color:#333;
  font-size:clamp(.85rem,.9vw + .2rem,1rem);
  margin:6px 0 10px;
  line-height:1.3;
  min-height:2.5em;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sliderarcade-design-roblox .sliderarcade-product-price{
  color:var(--rbx-red);
  font-size:clamp(1.05rem,1.6vw,1.4rem);
  font-weight:900;
  margin-bottom:10px;
}

/* ---------- Acciones ---------- */
.sliderarcade-design-roblox .sliderarcade-actions{
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-top:10px;
  flex-wrap:wrap;
}
.sliderarcade-design-roblox .sliderarcade-qty{
  width:80px;
  padding:8px;
  border:2px solid var(--rbx-dark);
  border-radius:6px;
  text-align:center;
  font-weight:700;
  background:#fff;
  color:var(--text);
  box-sizing:border-box;
}
.sliderarcade-design-roblox .sliderarcade-add-to-cart{
  background:var(--rbx-yellow);
  border:2px solid var(--rbx-dark);
  color:#000;
  padding:clamp(8px,1.1vw,14px) clamp(12px,1.8vw,22px);
  border-radius:6px;
  cursor:pointer;
  font-weight:800;
  text-transform:uppercase;
  transition:.18s ease;
  min-width:clamp(140px,18vw,260px);
  box-shadow:0 3px 0 var(--rbx-accent);
  box-sizing:border-box;
}
.sliderarcade-design-roblox .sliderarcade-add-to-cart:hover{
  background:var(--rbx-blue);
  color:#fff;
  box-shadow:0 3px 0 var(--rbx-red);
}

/* Allow smaller buttons when space is tight */
.sliderarcade-design-roblox .sliderarcade-actions .small-button{
  min-width:auto;
  padding:.5em .8em;
  font-size:.95rem;
}

/* ---------- Spinner ---------- */
.sliderarcade-design-roblox .sliderarcade-spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(0,0,0,0.2);
  border-top-color:var(--rbx-blue);
  border-radius:50%;
  display:inline-block;
  animation:sliderarcade-spin .8s linear infinite;
  margin-right:8px;
  vertical-align:middle;
}
@keyframes sliderarcade-spin{to{transform:rotate(360deg);}}

.sliderarcade-design-roblox .sliderarcade-no-products{
  text-align:center;
  color:#666;
  padding:2rem;
  font-weight:700;
}

/* ---------- Dots estilo bloque ---------- */
.sliderarcade-design-roblox .slick-dots{
  position:absolute;
  bottom:-60px;
  left:0;
  right:0;
  display:flex !important;
  justify-content:center;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}
.sliderarcade-design-roblox .slick-dots li{width:14px;height:14px;}
.sliderarcade-design-roblox .slick-dots button{
  width:14px;height:14px;border-radius:4px;background:var(--rbx-dark);border:none;cursor:pointer;
}
.sliderarcade-design-roblox .slick-dots .slick-active button{
  background:var(--rbx-red);box-shadow:0 0 6px var(--rbx-blue);
}

/* ---------- Flechas estilo consola ---------- */
.sliderarcade-design-roblox .slick-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;height:44px;border-radius:6px;background:var(--rbx-blue);
  border:2px solid var(--rbx-dark);cursor:pointer;transition:.18s ease;
  display:flex;align-items:center;justify-content:center;
}
.sliderarcade-design-roblox .slick-arrow:hover{background:var(--rbx-red);border-color:#fff;}
.sliderarcade-design-roblox .slick-prev{left:-28px;}
.sliderarcade-design-roblox .slick-next{right:-28px;}
.sliderarcade-design-roblox .slick-arrow::before{
  font-family:"Font Awesome 5 Free";font-weight:900;font-size:20px;color:#fff;
}
.sliderarcade-design-roblox .slick-prev::before{content:"\f104";}
.sliderarcade-design-roblox .slick-next::before{content:"\f105";}

/* ---------- Escalas por tamaño (aumentadas 20%) ---------- */
/* Thumbnail */
.sliderarcade-design-roblox.size-sliderarcade_thumbnail .sliderarcade-product{max-width:343px;}
.sliderarcade-design-roblox.size-sliderarcade_thumbnail .sliderarcade-product-img{max-height:224px;}
.sliderarcade-design-roblox.size-sliderarcade_thumbnail .sliderarcade-add-to-cart{
  min-width:198px;padding:10px 16px;font-size:.95rem;
}

/* Medium */
.sliderarcade-design-roblox.size-sliderarcade_medium .sliderarcade-product{max-width:449px;}
.sliderarcade-design-roblox.size-sliderarcade_medium .sliderarcade-product-img{max-height:290px;}
.sliderarcade-design-roblox.size-sliderarcade_medium .sliderarcade-add-to-cart{
  min-width:220px;padding:12px 18px;font-size:1rem;
}

/* Large */
.sliderarcade-design-roblox.size-sliderarcade_large .sliderarcade-product{max-width:581px;}
.sliderarcade-design-roblox.size-sliderarcade_large .sliderarcade-product-img{max-height:370px;}
.sliderarcade-design-roblox.size-sliderarcade_large .sliderarcade-add-to-cart{
  min-width:250px;padding:14px 22px;font-size:1.05rem;
}

/* ---------- Responsivo ---------- */
/* Móvil: 1 columna visual, cartas cómodas */
@media (max-width:576px){
  .sliderarcade-design-roblox .sliderarcade-container{
    padding:18px 12px 140px;
    margin:0 auto 80px;
    max-width:100%;
  }
  .sliderarcade-design-roblox .sliderarcade-slide{padding:0 8px;}
  .sliderarcade-design-roblox .sliderarcade-product{
    aspect-ratio:auto;
    padding:12px;
    border-radius:8px;
  }
  .sliderarcade-design-roblox .sliderarcade-product-img{max-height:208px;}
  .sliderarcade-design-roblox .slick-prev{left:-18px;}
  .sliderarcade-design-roblox .slick-next{right:-18px;}
  .sliderarcade-design-roblox .slick-dots{bottom:-80px;}
  .sliderarcade-design-roblox .sliderarcade-add-to-cart{min-width:140px;padding:10px 14px;font-size:.95rem;}
  /* When using the horizontal track, make slides more compact */
  .sliderarcade-design-roblox .sliderarcade-track{grid-auto-columns:minmax(210px,85%);}
}

/* Tablet: 2 columnas cómodas */
@media (min-width:577px) and (max-width:992px){
  :root{--container-max:1200px;}
  .sliderarcade-design-roblox .sliderarcade-container{max-width:1200px;padding:20px;}
  .sliderarcade-design-roblox .sliderarcade-slide{padding:0 10px;}
  .sliderarcade-design-roblox .sliderarcade-product{aspect-ratio:4/3;}
  .sliderarcade-design-roblox .sliderarcade-product-img{max-height:258px;}
  .sliderarcade-design-roblox .slick-dots{bottom:-72px;}
  .sliderarcade-design-roblox .sliderarcade-track.grid-wrap{
    grid-template-columns:repeat(2,minmax(240px,1fr));
    gap:18px;
  }
}

/* Desktop ancho: 3–4 columnas */
@media (min-width:993px){
  :root{--container-max:1400px;}
  .sliderarcade-design-roblox .sliderarcade-container{max-width:var(--container-max);padding:24px;}
  .sliderarcade-design-roblox .sliderarcade-slide{padding:0 12px;}
  .sliderarcade-design-roblox .slick-dots{bottom:-70px;}
  .sliderarcade-design-roblox .sliderarcade-track.grid-wrap{
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
  }
}

/* ---------- Utility: container query if supported ---------- */
/* Enables fine tuning by container width when the parent declares container-type */
@container (max-width:600px){
  .sliderarcade-design-roblox .sliderarcade-product-img{max-height:200px;}
  .sliderarcade-design-roblox .sliderarcade-product-title{font-size:1rem;}
}