/* Glowtto | Estilo editorial del carrusel «Selección para ti».
   Los banners de inicio ya pertenecen exclusivamente a banner-unified.css. */
/* Destacados: imagen bien visible, información a la derecha y acciones separadas. */
.top-carousel .top-slide{
  grid-template-areas:"top-picture top-info" "top-picture top-actions";
  grid-template-rows:auto auto;
  align-content:center;
  align-items:center;
  gap:10px 22px;
}
.top-product-image{grid-area:top-picture;align-self:center;transition:transform .3s cubic-bezier(.22,1,.36,1);border-radius:16px}
.top-product-image:active{transform:scale(.97)}
.top-slide-copy{grid-area:top-info;align-self:end}
.top-buy-actions{grid-area:top-actions;display:flex;flex-wrap:wrap;align-items:center;gap:9px;min-width:0}
.top-buy-actions button{min-width:0;border-radius:11px;min-height:42px;white-space:normal}
.top-gallery-controls{pointer-events:auto}
.top-carousel .top-slide.is-active{will-change:opacity,transform}

/* Disposición editorial para teléfonos, incluido Poco F3 (CSS ~393 px).
   Mantiene la altura automática y deja la descripción bajo la imagen y el título. */

@media(max-width:680px){
 .top-carousel{min-height:0!important;height:auto!important}
 .top-carousel .top-slide{
  grid-template-columns:minmax(112px,35%) minmax(0,1fr)!important;
  grid-template-rows:auto auto;
  grid-template-areas:"top-picture top-info" "top-actions top-actions";
  gap:11px 13px!important;
  align-content:start;align-items:center;
  padding:15px 14px 11px!important;
 }
 .top-carousel .top-slide.is-active{animation:glowtto-editorial-in .35s cubic-bezier(.22,1,.36,1) both!important}
 .top-carousel[data-slide-direction="prev"] .top-slide.is-active{animation-name:glowtto-editorial-in-prev!important}
 .top-product-image{
  width:100%!important;
  height:154px!important;
  padding:7px!important;
  border-radius:15px;
 }
 .top-product-image img{width:100%;height:100%;object-fit:contain}
 .top-slide-copy{gap:6px;min-width:0}
 .top-slide-copy strong{line-height:1.2}
 .top-buy-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:9px}
 .top-buy-actions button{width:100%;min-height:40px!important;font-size:11px;line-height:1.25;padding:8px 10px}
 .top-gallery-controls{align-self:flex-end;margin:1px 14px 10px}
 .top-section .dots{padding-top:7px}
}
@media(max-width:390px){
 .top-carousel .top-slide{grid-template-columns:minmax(105px,34%) minmax(0,1fr)!important;padding:13px 11px 8px!important}
 .top-product-image{height:143px!important}
 .top-buy-actions button{font-size:10.5px}
}
@keyframes glowtto-editorial-in{
 from{opacity:.45;transform:translate3d(17px,0,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes glowtto-editorial-in-prev{
 from{opacity:.45;transform:translate3d(-17px,0,0)}
 to{opacity:1;transform:translate3d(0,0,0)}
}

@media(prefers-reduced-motion:reduce){
 .top-carousel .top-slide.is-active{animation:none}
 .top-carousel-arrow,.top-product-image{transition:none}
}
