/* Glowtto | Filtros boutique: categorías ilustradas y marcas compactas.
   Se carga DESPUÉS del tema y no sustituye la lógica de filtrado.
   Usa variables dinámicas para las 8 paletas de Glowtto.
*/
:root{
 --gl-chip-card-radius:13px;
 --gl-chip-icon-tile:clamp(29px,3vw,34px);
 --gl-chip-gap:8px;
 --gl-chip-shadow:0 4px 13px color-mix(in srgb,var(--theme-accent-strong) 7%,transparent);
 --gl-chip-shadow-selected:0 7px 18px color-mix(in srgb,var(--theme-accent-strong) 13%,transparent);
}
#shopView #categoryPills.category-pills{
 display:flex;align-items:stretch;flex-wrap:nowrap;
 gap:8px;overflow-x:auto;overflow-y:hidden;
 padding:4px 2px 8px;margin:10px 0 13px;
 width:100%;max-width:100%;min-width:0;
 scrollbar-width:none;-webkit-overflow-scrolling:touch;
 scroll-snap-type:x proximity;overscroll-behavior-inline:contain;
}
#categoryPills::-webkit-scrollbar,
#glowBrandChips::-webkit-scrollbar{display:none}
#shopView #categoryPills .glow-category-filter{
 display:inline-flex;align-items:center;justify-content:flex-start;
 flex:0 0 auto;gap:8px;
 min-height:52px;max-width:min(235px,68vw);
 padding:7px 15px 7px 8px;
 border:1px solid var(--theme-border);
 border-left:3px solid color-mix(in srgb,var(--theme-accent) 27%,var(--theme-border));
 border-radius:var(--gl-chip-card-radius);
 background:linear-gradient(160deg,#fff 12%,var(--theme-surface) 100%);
 color:var(--theme-accent-strong);
 box-shadow:var(--gl-chip-shadow);
 font-size:clamp(11px,1.6vw,13px);
 font-weight:700;line-height:1.25;
 text-align:left;white-space:nowrap;scroll-snap-align:start;
 transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background-color .2s ease;
}
#shopView #categoryPills .glow-category-filter:hover{
 transform:translateY(-1px);
 border-color:var(--theme-accent);
 box-shadow:0 7px 18px color-mix(in srgb,var(--theme-accent-strong) 13%,transparent);
}
#shopView #categoryPills .glow-category-filter.active,
#shopView #categoryPills .glow-category-filter[aria-pressed="true"]{
 background:linear-gradient(135deg,var(--theme-surface-soft),#fff 92%);
 border-color:var(--theme-accent);
 border-left:4px solid var(--theme-accent);
 color:var(--theme-accent-strong);
 box-shadow:var(--gl-chip-shadow-selected);
}
#shopView #categoryPills .glow-chip-icon-wrap,
#shopView #glowBrandChips .glow-chip-icon-wrap{
 display:grid;place-items:center;flex:0 0 auto;
 width:var(--gl-chip-icon-tile);height:var(--gl-chip-icon-tile);
 min-width:0;
 border-radius:10px;
 background:linear-gradient(145deg,var(--theme-surface-soft),#fff);
 border:1px solid color-mix(in srgb,var(--theme-border) 88%,#fff);
}
#shopView #categoryPills .glow-category-filter.active .glow-chip-icon-wrap{
 background:#fff;border-color:var(--theme-border);
}
#shopView #categoryPills .glow-chip-icon-wrap .g-icon,
#shopView #glowBrandChips .glow-chip-icon-wrap .g-icon{
 display:block;flex:0 0 auto;
 width:24px;height:24px;
 max-width:24px;object-fit:contain;
 filter:none;
}
#shopView #categoryPills .glow-chip-label,
#shopView #glowBrandChips .glow-chip-label{
 display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;
 max-width:100%;white-space:nowrap;
}
#shopView #categoryPills .glow-category-filter:focus-visible,
#shopView #glowBrandChips .glow-brand-filter:focus-visible{
 outline:3px solid var(--theme-accent);outline-offset:2px;
}
/* Marcas: etiquetas rectangulares más discretas que las categorías.
   Las marcas extensas tienen elipsis, sin crear una segunda línea. */
#shopView #glowBrandTags.glow-brand-tags{
 min-width:0;margin:8px 0 19px;
 padding:clamp(11px,2.1vw,16px);
 border-radius:14px;
 border:1px solid var(--theme-border);
 background:var(--theme-editorial-gradient);
 box-shadow:0 4px 14px color-mix(in srgb,var(--theme-accent-strong) 5%,transparent);
}
#shopView #glowBrandTags .glow-brand-heading{
 gap:7px 12px;align-items:center;
}
#shopView #glowBrandTags .glow-brand-heading h3{
 color:var(--theme-accent-strong);
 font-size:clamp(15px,2vw,19px);margin:1px 0;
 letter-spacing:-.02em;
}
#shopView #glowBrandTags .glow-brand-heading .eyebrow{
 color:var(--theme-accent);letter-spacing:.1em;font-size:9px;
}
#shopView #glowBrandTags .glow-brand-heading p{
 color:var(--pnl-muted);font-size:11px;margin:0;
}
#shopView #glowBrandTags #glowBrandMore{
 padding:7px 10px;border-radius:9px;
 min-height:36px;
 color:var(--theme-accent-strong);
 border-color:var(--theme-border);
 background:#fff;
}
#shopView #glowBrandChips.glow-brand-chips{
 display:flex;align-items:stretch;
 flex-wrap:wrap;gap:7px;
 min-width:0;max-width:100%;margin:10px 0 0;
}
#shopView #glowBrandChips .glow-brand-filter{
 display:inline-flex;justify-content:flex-start;
 align-items:center;gap:7px;
 max-width:min(270px,100%);min-width:0;
 min-height:42px;padding:5px 9px 5px 6px;
 border-radius:10px;
 border:1px solid var(--theme-border);
 background:#fff;color:var(--theme-accent-strong);
 box-shadow:0 2px 8px color-mix(in srgb,var(--theme-accent-strong) 5%,transparent);
 font-size:12px;line-height:1.2;
 white-space:nowrap;
 transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#shopView #glowBrandChips .glow-brand-filter:hover{
 border-color:var(--theme-accent);transform:translateY(-1px);
}
#shopView #glowBrandChips .glow-brand-filter.selected{
 border-color:var(--theme-accent);
 background:var(--theme-surface-soft);
 color:var(--theme-accent-strong);
 box-shadow:var(--gl-chip-shadow-selected);
}
#shopView #glowBrandChips .glow-chip-icon-wrap{
 width:28px;height:28px;border-radius:8px;
}
#shopView #glowBrandChips .glow-chip-icon-wrap .g-icon{
 width:19px;height:19px;max-width:19px;
}
#shopView #glowBrandChips .glow-chip-label{
 max-width:clamp(85px,15vw,160px);
 font-size:clamp(11px,1.3vw,12px);font-weight:700;
}
#shopView #glowBrandChips .glow-chip-count{
 display:grid;place-items:center;
 min-width:23px;height:23px;padding:0 5px;margin:0;
 border-radius:7px;
 background:var(--theme-surface-soft);
 color:var(--theme-accent-strong);
 font-size:10px;font-weight:800;
 line-height:1;white-space:nowrap;
}
#shopView #glowBrandChips .glow-brand-filter.selected .glow-chip-count{
 background:#fff;
}
#shopView #glowBrandTags #glowBrandFootnote{
 margin:6px 0 0;font-size:10px;
 color:var(--pnl-muted);
}
/* Búsqueda, ordenación y contador: commerce-layout.css. */
@media(prefers-reduced-motion:reduce){
 #shopView #categoryPills .glow-category-filter,
 #shopView #glowBrandChips .glow-brand-filter{transition:none;transform:none}
}
