/* Glowtto · accesos premium a categorías.
   Un componente, un propietario de estilos: no modifica el catálogo inferior. */
#shopView .ys-shop-nav{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(8.6rem,19cqi,14rem)),1fr));
 align-items:stretch;gap:clamp(7px,1cqi,14px);min-width:0;
}
#shopView .ys-shop-nav .ys-quick-card{
 appearance:none;
 display:grid;
 grid-template-columns:minmax(0,clamp(3.5rem,7cqi,5.5rem)) minmax(0,1fr);
 align-items:center;column-gap:clamp(8px,1cqi,13px);
 width:100%;min-width:0;min-height:clamp(70px,8cqi,96px);
 padding:clamp(6px,.8cqi,10px);
 border:1px solid var(--theme-border);
 border-radius:clamp(12px,1.3cqi,18px);
 background:var(--theme-surface,white);
 color:var(--theme-accent-strong);
 text-align:left;
 box-shadow:0 3px 12px color-mix(in srgb,var(--theme-accent-strong) 5%,transparent);
 cursor:pointer;
 transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
#shopView .ys-shop-nav .ys-quick-card__media{
 display:grid;place-items:center;min-width:0;overflow:hidden;
 width:100%;aspect-ratio:1;
 border-radius:clamp(9px,1.1cqi,14px);
 background:var(--theme-surface-soft);
}
#shopView .ys-shop-nav .ys-quick-card__media img{
 display:block;width:100%;height:100%;min-width:0;
 object-fit:cover;object-position:center;
 transition:transform .3s ease;
}
#shopView .ys-shop-nav .ys-quick-card__media img[data-fit="contain"]{object-fit:contain}
#shopView .ys-shop-nav .ys-quick-card__media img[data-fallback="true"]{
 object-fit:contain;
 width:72%;height:72%;
}
#shopView .ys-shop-nav .ys-quick-card__text{
 display:grid;gap:clamp(2px,.45cqi,5px);
 min-width:0;
}
#shopView .ys-shop-nav .ys-quick-card__title{
 display:block;min-width:0;
 font-size:clamp(12px,1.15cqi,16px);
 font-weight:750;line-height:1.25;
 color:var(--theme-accent-strong);
 overflow-wrap:anywhere;
}
#shopView .ys-shop-nav .ys-quick-card__subtitle{
 display:block;min-width:0;
 font-size:clamp(10px,.85cqi,12px);
 font-weight:450;line-height:1.3;color:var(--theme-hero-muted);
 overflow-wrap:anywhere;
}
#shopView .ys-shop-nav .ys-quick-card:hover,
#shopView .ys-shop-nav .ys-quick-card:focus-visible{
 transform:translateY(-2px);
 border-color:var(--theme-accent);
 background:var(--theme-surface-soft);
 box-shadow:0 7px 18px color-mix(in srgb,var(--theme-accent-strong) 12%,transparent);
}
#shopView .ys-shop-nav .ys-quick-card:hover .ys-quick-card__media img{
 transform:scale(1.05);
}
#shopView .ys-shop-nav .ys-quick-card:focus-visible{
 outline:2px solid var(--theme-accent);
 outline-offset:3px;
}
#shopView .ys-shop-nav .ys-quick-card:active{transform:translateY(0) scale(.985)}
#shopView .ys-shop-nav:has(>.ys-quick-card:only-child)>.ys-quick-card{
 max-width:min(100%,20rem);justify-self:center;
}
/* Composición intrínseca: una misma tarjeta cambia de fila a columna
   según espacio real, no según marca ni modelo de teléfono. */
@container store-discovery (max-width:520px){
 #shopView .ys-shop-nav .ys-quick-card{
  grid-template-columns:minmax(0,1fr);
  justify-items:stretch;
  gap:clamp(5px,1.3cqi,9px);
  min-height:0;
  padding:clamp(6px,1.5cqi,11px);
 }
 #shopView .ys-shop-nav .ys-quick-card__media{aspect-ratio:16 / 9}
 #shopView .ys-shop-nav .ys-quick-card__text{justify-items:center;text-align:center}
 #shopView .ys-shop-nav .ys-quick-card__title{font-size:clamp(12px,3.2cqi,15px)}
 #shopView .ys-shop-nav .ys-quick-card__subtitle{display:none}
}
@media(prefers-reduced-motion:reduce){
 #shopView .ys-shop-nav .ys-quick-card,
 #shopView .ys-shop-nav .ys-quick-card__media img{transition:none}
}