/* Glowtto · storefront layout, single source of truth.
   Catálogo, categorías, búsqueda y listados dinámicos. Composición mobile-first.
   Los tokens de color provienen de theme-color-sync.css. Los controles interactivos
   conservan button-system.css. Ninguna variante es específica para Android/iOS. */
#shopView{
 --store-gap:clamp(10px,1.6vw,18px);
 --store-section:clamp(24px,3.5vw,44px);
 --store-radius:var(--gl-radius-card,13px);
 min-width:0;
}
/* Búsqueda y navegación contextual se ajustan al ancho de su CONTENEDOR. */
#shopView .ys-discover-head{
 container:store-discovery / inline-size;
 display:grid;
 gap:clamp(8px,1.4cqi,15px);
 padding:clamp(10px,1.8cqi,20px);
 margin-block:clamp(9px,1.4vw,18px) 0;
 border:1px solid var(--theme-border);
 border-radius:var(--gl-radius-panel,14px);
 background:linear-gradient(115deg,var(--theme-surface),var(--theme-surface-soft));
 box-shadow:0 4px 18px color-mix(in srgb,var(--theme-accent-strong) 7%,transparent);
}
#shopView .ys-discover-head::before,
#shopView .ys-discover-head::after{content:none}
#shopView .ys-quick-search{
 display:flex;align-items:center;gap:clamp(7px,1.1cqi,13px);
 width:100%;min-width:0;min-height:clamp(44px,4.4vw,54px);
 padding:5px clamp(6px,1.1cqi,12px) 5px clamp(9px,1.3cqi,17px);
 border:1px solid var(--theme-border);border-radius:var(--gl-radius-control,10px);
 background:white;box-shadow:none;
}
#shopView .ys-quick-search svg{flex:0 0 21px;color:var(--theme-accent-strong)}
#shopView .ys-quick-search input{
 flex:1 1 auto;min-width:0;width:100%;padding:6px 2px;
 border:0;border-radius:0;box-shadow:none;background:transparent;
 font-size:clamp(12px,calc(9px + .85vw),15px);color:var(--theme-hero-ink);
}
#shopView .ys-quick-search input:focus-visible{outline-offset:-2px}
#shopView .ys-quick-search button{
 flex:none;min-height:36px;min-width:clamp(64px,9cqi,96px);
 padding:8px clamp(9px,1.3cqi,17px);font-size:clamp(11px,1cqi,13px);
 border-radius:var(--gl-radius-control,10px);
}
#shopView .ys-shop-nav{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(66px,17cqi,160px)),1fr));
 align-items:stretch;gap:clamp(5px,.9cqi,10px);min-width:0;
}
#shopView .ys-shop-nav button{
 display:inline-flex;align-items:center;justify-content:center;gap:6px;
 min-width:0;width:100%;min-height:40px;
 padding:clamp(7px,.8cqi,10px) clamp(3px,.8cqi,9px);
 border:1px solid var(--theme-border);border-radius:var(--gl-radius-control,10px);
 background:white;color:var(--theme-accent-strong);
 font-weight:700;font-size:clamp(10px,calc(8px + .7vw),13px);line-height:1.25;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
#shopView .ys-shop-nav:has(>button:only-child) button{
 max-width:min(100%,200px);justify-self:center;
}
#shopView .ys-shop-nav button:hover,
#shopView .ys-shop-nav button.active,
#shopView .ys-shop-nav button[aria-current="page"]{
 background:var(--theme-surface-soft);border-color:var(--theme-accent);
}
#shopView .ys-shop-nav .g-icon{width:18px;height:18px;max-width:18px;flex:none;object-fit:contain}
#shopView .ys-service-note{
 display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
 gap:clamp(7px,1.5vw,20px);
 min-width:0;margin:10px 0 0;
 padding:clamp(7px,1vw,11px) 12px;
 border:1px solid var(--theme-border);border-radius:10px;
 background:var(--theme-surface-soft);color:var(--theme-hero-muted);
}
#shopView .ys-service-note span{font-size:clamp(9px,.95vw,11px);white-space:normal}
#shopView .ys-service-note span+span{border-inline-start:1px solid var(--theme-border);padding-inline-start:clamp(7px,1vw,14px)}
/* Jerarquía tipográfica consistente. */
#shopView .ys-categories,
#shopView .ys-shelf,
#shopView .top-section{min-width:0;margin-block:var(--store-section)}
#shopView .ys-heading,
#shopView .top-section .section-heading{
 display:flex;align-items:flex-end;justify-content:space-between;
 flex-wrap:wrap;gap:clamp(8px,1.5vw,15px);margin:0 0 clamp(12px,1.6vw,18px);
}
#shopView .ys-heading>div{min-width:0}
#shopView .ys-heading small{
 display:block;font-size:clamp(9px,.8vw,11px);
 letter-spacing:.12em;text-transform:uppercase;font-weight:800;
 color:var(--theme-accent-strong);
}
#shopView .ys-heading h2,
#shopView .top-section .section-heading h2,
#shopView .catalog-top h2{
 font-size:clamp(21px,2.7vw,33px);letter-spacing:-.035em;
 line-height:1.19;margin:4px 0;color:var(--theme-hero-ink);text-wrap:balance;
}
#shopView .ys-more-link{flex:none;padding:8px 0;border:0;background:none;color:var(--theme-accent-strong);font-size:12px;font-weight:750}
/* Categorías: cuadrícula intrínseca sin reglas especiales a 390/680/740px. */
#shopView .ys-categories{container:store-categories / inline-size}
#shopView #glowShopCategories{
 display:grid;
 grid-template-columns:repeat(auto-fit,minmax(min(100%,clamp(132px,20cqi,225px)),1fr));
 gap:var(--store-gap);
 align-items:stretch;min-width:0;width:100%;padding:0;
 overflow:visible;
}
#shopView #glowShopCategories>.ys-category-card{
 display:flex;flex-direction:column;align-items:stretch;gap:clamp(6px,.85cqi,11px);
 min-width:0;width:100%;padding:clamp(8px,1cqi,12px);text-align:left;
 border:1px solid var(--theme-border);
 border-radius:var(--store-radius);
 background:var(--theme-surface);
 box-shadow:0 3px 12px color-mix(in srgb,var(--theme-accent-strong) 6%,transparent);
 transition:transform .2s ease,border-color .2s ease;
}
#shopView #glowShopCategories>.ys-category-card:hover{transform:translateY(-2px);border-color:var(--theme-accent)}
#shopView #glowShopCategories .ys-category-image{
 display:grid;place-items:center;flex:0 0 auto;width:100%;height:auto;
 min-width:0;aspect-ratio:4 / 3;overflow:hidden;
 border-radius:calc(var(--store-radius) - 4px);
 background:var(--theme-surface-soft);
}
#shopView #glowShopCategories .ys-category-image img{
 display:block;width:100%;height:100%;object-fit:cover;object-position:center;
}
/* La categoría puede usar también una ilustración de producto sin recortar. */
#shopView #glowShopCategories .ys-category-image img[data-fit="contain"]{object-fit:contain}
#shopView #glowShopCategories .ys-category-label{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%}
#shopView #glowShopCategories .ys-category-label-icon .g-icon{
 flex:none;width:clamp(18px,2.3cqi,23px);height:clamp(18px,2.3cqi,23px);object-fit:contain;
}
#shopView #glowShopCategories .ys-category-label-text,
#shopView #glowShopCategories .ys-category-card strong{
 min-width:0;max-width:100%;font-size:clamp(12px,calc(8px + 1.2vw),17px);
 color:var(--theme-accent-strong);font-weight:750;line-height:1.3;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#shopView #glowShopCategories .ys-category-card small{
 display:block;font-size:clamp(10px,calc(8px + .6vw),12px);color:var(--theme-hero-muted);line-height:1.4;
}
/* Novedades y descuentos mantienen un carrusel horizontal deliberadamente.
   No cambiar a auto-fit: los botones de desplazamiento requieren una pista. */
#shopView .ys-shelf-frame{container:store-shelf / inline-size;position:relative;min-width:0}
#shopView .ys-product-rail{
 display:grid;grid-auto-flow:column;
 grid-auto-columns:clamp(160px,24cqi,246px);
 gap:var(--store-gap);min-width:0;
 overflow-x:auto;overflow-y:hidden;
 padding:2px 2px 12px;scroll-padding-inline:2px;
 overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
 scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
#shopView .ys-product-rail::-webkit-scrollbar{display:none}
#shopView .ys-product{
 display:flex;flex-direction:column;min-width:0;
 border:1px solid var(--theme-border);border-radius:var(--store-radius);
 overflow:hidden;background:white;scroll-snap-align:start;
 box-shadow:0 3px 12px color-mix(in srgb,var(--theme-accent-strong) 6%,transparent);
}
#shopView .ys-product-visual{
 position:relative;display:grid;place-items:center;
 width:100%;aspect-ratio:1/1;border:0;padding:clamp(9px,1.4cqi,16px);
 background:var(--theme-surface-soft);overflow:hidden;
}
#shopView .ys-product-visual img{
 display:block;width:100%;height:100%;object-fit:contain;object-position:center;
 transition:transform .22s ease;
}
#shopView .ys-product-visual:hover img{transform:scale(1.04)}
#shopView .ys-no-image{font-family:Georgia,serif;font-size:clamp(45px,5vw,62px);color:var(--theme-accent)}
#shopView .ys-discount{position:absolute;top:8px;left:8px;padding:3px 7px;border-radius:7px;background:var(--theme-accent);color:white;font-weight:800;font-size:10px}
#shopView .ys-product-details{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;padding:clamp(10px,1.2cqi,14px)}
#shopView .ys-product-details small{font-size:10px;color:var(--theme-hero-muted)}
#shopView .ys-product-name{border:0;padding:0;width:100%;background:none;text-align:left;font-size:clamp(11px,calc(9px + .4vw),14px);line-height:1.4;min-height:2.8em;font-weight:750;color:var(--theme-hero-ink);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
#shopView .ys-product-details strong{font-size:clamp(13px,calc(10px + .75vw),17px);color:var(--theme-accent-strong)}
#shopView .ys-supplier-note{font-size:10px;color:var(--theme-hero-muted)}
#shopView .ys-product-link{margin-top:auto;border:0;background:none;color:var(--theme-accent-strong);font-size:11px;font-weight:750}
#shopView .ys-shelf-frame .ys-rail-controls{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
#shopView .ys-shelf-frame .ys-rail-controls button{min-width:36px;min-height:36px;border:1px solid var(--theme-border);border-radius:10px;background:white;color:var(--theme-accent-strong);cursor:pointer}
#shopView .ys-deals .ys-heading h2{color:var(--theme-accent-strong)}
/* Catálogo: columnas por espacio disponible, jamás por modelo de teléfono. */
#shopView .catalog-top{
 display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;
 gap:clamp(9px,1.5vw,17px);margin-block:var(--store-section) 0;
 scroll-margin-top:clamp(75px,9vw,115px);
}
#shopView .catalog-top>div{min-width:0}
#shopView .catalog-top .search{
 display:flex;align-items:center;gap:9px;
 width:min(100%,390px);min-height:44px;padding:6px 12px;
 border:1px solid var(--theme-border);border-radius:var(--gl-radius-control,10px);
 background:var(--theme-surface);
}
#shopView .catalog-top .search .g-icon{flex:none;width:24px;height:24px;object-fit:contain}
#shopView .catalog-top .search input{
 min-width:0;flex:1;width:100%;border:0;border-radius:0;
 padding:4px 2px;background:transparent;box-shadow:none;
 font-size:clamp(12px,1.2vw,14px);
}
#shopView .catalog-top .search input:focus-visible{outline-offset:-2px}
#shopView .filters{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;min-width:0;margin-block:clamp(10px,1.5vw,19px)}
#shopView .catalog-top .search:focus-within{
 border-color:var(--theme-accent);
 box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent) 12%,transparent);
}
#shopView .filters select,
#shopView #sortSelect{
 width:auto;max-width:min(100%,225px);min-width:min(100%,145px);
 min-height:40px;border:1px solid var(--theme-border);
 border-radius:var(--gl-radius-control,10px);
 background:white;color:var(--theme-accent-strong);
 padding:8px 30px 8px 11px;font-size:clamp(11px,1vw,13px);
}
#shopView #resultCount{min-width:0;color:var(--theme-hero-muted);font-size:clamp(11px,1vw,13px)}
#shopView #productsGrid.products{
 display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(148px,18vw,218px)),1fr));
 gap:var(--store-gap);align-items:stretch;min-width:0;
 margin-block:0 var(--store-section);
}
#shopView #productsGrid>.product{
 container:store-product / inline-size;
 display:flex;flex-direction:column;min-width:0;
 overflow:hidden;border:1px solid var(--theme-border);
 border-radius:var(--store-radius);background:white;
 box-shadow:0 3px 13px color-mix(in srgb,var(--theme-accent-strong) 6%,transparent);
}
#shopView #productsGrid .product .image{
 display:grid;place-items:center;position:relative;width:100%;height:auto;
 min-width:0;aspect-ratio:1/1;overflow:hidden;background:var(--theme-surface-soft);
}
#shopView #productsGrid .product-cover{display:block;width:100%;height:100%;border:0;padding:0;background:none;overflow:hidden}
#shopView #productsGrid .product-cover img,
#shopView #productsGrid .product .image>img{
 display:block;width:100%;height:100%;object-fit:contain;object-position:center;
}
/* Esta excepción es para fotografía editorial, no para envases aislados. */
#shopView #productsGrid .product .image img[data-fit="cover"]{object-fit:cover}
#shopView #productsGrid .product-body{
 display:flex;flex:1;flex-direction:column;gap:clamp(5px,.9cqi,9px);
 min-width:0;padding:clamp(9px,1.2cqi,15px);
}
#shopView #productsGrid .product-body h3{font-size:clamp(12px,6.3cqi,16px);line-height:1.35;overflow-wrap:anywhere}
#shopView #productsGrid .product-body .product-name{font:inherit;line-height:inherit;overflow-wrap:anywhere;text-align:left}
#shopView #productsGrid .product-body p{font-size:clamp(10px,5.5cqi,12px);line-height:1.45;min-width:0}
#shopView #productsGrid .product-body .price{font-size:clamp(15px,8.3cqi,21px);line-height:1.25}
#shopView #productsGrid .product-purchase-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:auto}
#shopView #productsGrid .product-purchase-actions button{min-width:0;width:100%;overflow-wrap:anywhere;white-space:normal}
@container store-product (max-width:195px){
 #shopView #productsGrid .product-purchase-actions{grid-template-columns:minmax(0,1fr)}
}
/* Los productos de perfume también comparten proporciones y alturas de texto. */
#shopView .perfume-discovery-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(150px,19vw,218px)),1fr));gap:var(--store-gap)}
#shopView .fragrance-card{min-width:0;overflow:hidden;border-radius:var(--store-radius)}
#shopView .fragrance-card-picture{width:100%;aspect-ratio:1/1;overflow:hidden}
#shopView .fragrance-card-picture img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
#shopView .fragrance-card-details h3{font-size:clamp(12px,1.2vw,16px);line-height:1.4;overflow-wrap:anywhere}
#shopView .glow-makeup-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(145px,18vw,195px)),1fr));gap:var(--store-gap)}
#shopView .glow-makeup-home-card{min-width:0}
#shopView .glow-makeup-home-photo{width:100%;aspect-ratio:1/1;overflow:hidden}
#shopView .glow-makeup-home-photo img{width:100%;height:100%;object-fit:contain}
#shopView .glow-accessory-home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,clamp(145px,18vw,195px)),1fr));gap:var(--store-gap)}
#shopView .glow-accessory-home-card{min-width:0}
@media(max-width:740px){
 /* En pantallas compactas el aviso de servicios duplica contenido del pie. */
 #shopView .ys-service-note{display:none}
}
@container store-discovery (max-width:470px){
 #shopView .ys-shop-nav .g-icon{display:none}
}
@media(prefers-reduced-motion:reduce){
 #shopView .ys-category-card,
 #shopView .ys-product-visual img{transition:none}
}