/* Glowtto | Diseño editorial armónico.
   Referencia de ritmo visual: tienda de belleza con tarjetas discretas,
   carruseles fluidos y navegación despejada. No reutiliza diseños ni recursos ajenos.
   Última capa del frontend: compatible con las ocho paletas dinámicas existentes.
*/
:root{
 --gl-radius-card:12px;
 --gl-radius-panel:14px;
 --gl-radius-control:10px;
 --gl-section-space:clamp(26px,4.5vw,45px);
 --gl-ease:cubic-bezier(.22,1,.36,1);
 --gl-shade:color-mix(in srgb,var(--theme-accent-strong) 7%,transparent);
}
#shopView{min-width:0}
#shopView .ys-discover-head{
 padding:clamp(13px,2vw,19px)!important;
 margin-top:clamp(12px,2vw,18px)!important;
 background:linear-gradient(115deg,var(--theme-surface),var(--theme-surface-soft))!important;
 border:1px solid var(--theme-border)!important;
 border-radius:var(--gl-radius-panel)!important;
 box-shadow:0 4px 18px var(--gl-shade)!important;
}
#shopView .ys-discover-head::before,
#shopView .ys-discover-head::after{display:none!important}
#shopView .ys-quick-search{
 min-width:0;max-width:100%;min-height:47px!important;
 border-radius:var(--gl-radius-control)!important;
 box-shadow:none!important;
 border:1px solid var(--theme-border)!important;
}
#shopView .ys-quick-search input{min-width:0;flex:1;font-size:13px!important;text-overflow:ellipsis}
#shopView .ys-quick-search button{flex:0 0 auto;border-radius:8px!important;min-height:35px!important}
#shopView .ys-shop-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible}
#shopView .ys-shop-nav button{
 display:inline-flex!important;align-items:center;justify-content:center;
 min-width:0;max-width:100%;
 padding:9px 7px!important;
 border-radius:var(--gl-radius-control)!important;
 background:#fff!important;
 border:1px solid var(--theme-border)!important;
 color:var(--theme-accent-strong)!important;
 font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
 gap:6px;
}
#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)!important;
 border-color:var(--theme-accent)!important;
 color:var(--theme-accent-strong)!important;
}
#shopView .ys-shop-nav .g-icon{width:18px!important;height:18px!important;max-width:18px;flex:none}
#shopView .ys-service-note{
 margin:10px 0 0!important;
 padding:9px 13px!important;border-radius:10px!important;
 box-shadow:none!important;gap:clamp(8px,1.8vw,24px);
}
#shopView .ys-service-note span{white-space:nowrap!important;min-width:0}
/* Carruseles: la pista y sus gestos permanecen implementados en el motor
   existente; el tema únicamente reduce capas visuales y compacta controles. */
#shopView #homeHero.hero-carousel{
 border-radius:var(--gl-radius-panel)!important;
 margin-top:15px!important;margin-bottom:var(--gl-section-space)!important;
 box-shadow:0 7px 22px var(--gl-shade)!important;
}
#shopView #homeHero .hero-static-footer .primary,
#shopView #topCarousel .primary{
 border-radius:var(--gl-radius-control)!important;
 min-height:40px;letter-spacing:0;
}
#shopView #homeHero .hero-controls{
 gap:5px!important;
 background:transparent!important;
 align-items:center;
}
#shopView #homeHero .hero-arrow,
#shopView #topCarousel .top-gallery-controls button,
#shopView .ys-rail-controls button{
 width:33px;height:33px;min-width:33px;
 border-radius:9px!important;
 box-shadow:none!important;
 border:1px solid var(--theme-border)!important;
}
#shopView #homeHero .hero-dots{gap:5px}
#shopView #homeHero .hero-dots button{
 width:7px;height:7px;min-width:7px;
 border-radius:99px;opacity:.64;
}
#shopView #homeHero .hero-dots button.is-active{
 width:21px!important;opacity:1;
}
#shopView #topCarousel{
 border-radius:var(--gl-radius-panel)!important;
 box-shadow:0 5px 18px var(--gl-shade)!important;
}
#shopView #topCarousel .top-slide{min-width:0}
#shopView #topCarousel .top-slide-copy{min-width:0;overflow-wrap:break-word}
#shopView #topCarousel .top-buy-actions{gap:8px}
#shopView #topCarousel .top-buy-actions button{
 min-width:0;white-space:nowrap;font-size:clamp(11px,1.6vw,13px);
 overflow:hidden;text-overflow:ellipsis;
}
#shopView #topCarousel .top-product-image img{
 object-fit:contain!important;border-radius:8px!important;
}
/* Secciones: jerarquía clara y menos pequeñas etiquetas repetidas. */
#shopView .ys-categories,
#shopView .ys-shelf{margin:var(--gl-section-space) 0!important}
#shopView .top-section{margin:var(--gl-section-space) 0!important}
#shopView .ys-heading,
#shopView .top-section .section-heading{margin-bottom:14px!important;gap:10px}
#shopView .ys-heading h2,
#shopView .top-section .section-heading h2{font-size:clamp(21px,2.65vw,30px)!important;line-height:1.2}
#shopView .ys-heading small,
#shopView .top-section .eyebrow{letter-spacing:.11em!important;font-size:10px!important}
#shopView .ys-category-grid{gap:clamp(8px,1.5vw,15px)!important}
#shopView #glowShopCategories>.ys-category-card{
 min-width:0;max-width:100%;
 padding:10px!important;gap:6px!important;
 border-radius:var(--gl-radius-card)!important;
 box-shadow:0 3px 12px var(--gl-shade)!important;
 transition:transform .22s var(--gl-ease),border-color .22s ease,box-shadow .22s ease;
}
#shopView #glowShopCategories>.ys-category-card:hover{
 transform:translateY(-2px)!important;
 box-shadow:0 7px 18px var(--gl-shade)!important;
}
#shopView #glowShopCategories .ys-category-image{
 border-radius:8px!important;
 overflow:hidden;
}
#shopView #glowShopCategories .ys-category-label,
#shopView #glowShopCategories .ys-category-label-text{min-width:0;max-width:100%}
#shopView #glowShopCategories .ys-category-card strong{
 font-size:clamp(12px,1.35vw,16px)!important;line-height:1.25;
}
#shopView #glowShopCategories .ys-category-card small{
 font-size:11px!important;line-height:1.35;
}
#shopView .ys-product,
#shopView .products .product,
.glow-immediate-card,
.glow-makeup-home-card{
 border-radius:var(--gl-radius-card)!important;
 box-shadow:0 3px 12px var(--gl-shade)!important;
}
#shopView .ys-product-visual,
#shopView .product .image,
.glow-makeup-home-card .glow-makeup-home-photo{
 border-radius:8px!important;
}
#shopView .ys-product-name{line-height:1.38;overflow-wrap:anywhere}
#shopView .product-purchase-actions button{min-width:0}
#shopView #categoryPills button{white-space:nowrap;max-width:100%;border-radius:9px!important}
#shopView .ys-rail-controls button{transition:transform .18s ease}
#shopView .ys-rail-controls button:active{transform:scale(.95)}
#shopView .catalog-top{scroll-margin-top:90px}
/* Bloques no editoriales y footer también se ven parte de la misma tienda. */
.glow-immediate-head>span{border-radius:9px!important}
.glow-immediate-card .empty-picture{border-radius:8px!important}
.glowtto-footer{margin-top:var(--gl-section-space)!important}
.glowtto-footer .glowtto-footer-inner{gap:clamp(15px,2.5vw,27px)}
.panel,.line-card,.fragrance-card{border-radius:var(--gl-radius-panel)!important}
.primary,.secondary{border-radius:var(--gl-radius-control)!important}
.glow-help-sheet{border-radius:var(--gl-radius-panel)!important}
/* Móvil: los cuatro accesos caben en una sola fila sin desplazamiento lateral.
   Se elimina la tira duplicada de servicios, que ya figura en la información
   de cada producto y en el pie. Los iconos se conservan en categorías y barra. */
@media(max-width:740px){
 #shopView .ys-discover-head{
  margin-top:10px!important;padding:10px!important;
  border-radius:12px!important;gap:9px!important;
 }
 #shopView .ys-quick-search{min-height:45px!important;padding-left:10px!important}
 #shopView .ys-quick-search input{font-size:12px!important;min-width:0}
 #shopView .ys-quick-search button{
  padding:0 12px!important;min-width:68px;
  font-size:11px;white-space:nowrap;
 }
 #shopView .ys-shop-nav{
  width:100%;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:5px!important;overflow:visible!important;padding:0!important;
 }
 #shopView .ys-shop-nav button{
  min-width:0!important;min-height:37px!important;
  padding:7px 2px!important;gap:0!important;
  font-size:clamp(9px,2.45vw,11px)!important;
  line-height:1.15;white-space:nowrap!important;
  text-align:center;
 }
 /* Cuando la tienda oculta categorías sin catálogo, no deja columnas vacías. */
 #shopView .ys-shop-nav:has(>button:only-child){grid-template-columns:minmax(0,180px);justify-content:center}
 #shopView .ys-shop-nav:has(>button:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
 #shopView .ys-shop-nav:has(>button:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
 #shopView .ys-shop-nav .g-icon{display:none!important}
 #shopView .ys-service-note{display:none!important}
 #shopView #homeHero.hero-carousel{margin:12px 0 26px!important;border-radius:12px!important}
 #shopView #homeHero .hero-copy h1,
 #shopView #homeHero .hero-copy h2{font-size:clamp(27px,7.5vw,40px)!important}
 #shopView #homeHero .hero-static-footer .primary{min-height:39px;padding:9px 13px!important}
 #shopView #homeHero .hero-controls{gap:4px!important}
 #shopView .ys-categories,#shopView .ys-shelf{margin:25px 0!important}
 #shopView .top-section{margin:26px 0!important}
 #shopView .ys-heading{margin-bottom:12px!important}
 #shopView .ys-heading h2,#shopView .top-section .section-heading h2{
  font-size:clamp(20px,5.4vw,25px)!important;
 }
 #shopView #glowShopCategories{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
 }
 #shopView #glowShopCategories>.ys-category-card{
  border-radius:11px!important;padding:8px!important;
  min-height:0!important;
 }
 #shopView #glowShopCategories .ys-category-image{
  aspect-ratio:1.55!important;max-height:115px!important;border-radius:7px!important;
 }
 #shopView #glowShopCategories .ys-category-label{
  display:flex!important;align-items:center;justify-content:center;min-width:0;
  gap:4px!important;
 }
 #shopView #glowShopCategories .ys-category-label-icon .g-icon{
  display:block!important;width:21px!important;height:21px!important;max-width:21px;
 }
 #shopView #glowShopCategories .ys-category-label-text{
  width:auto!important;max-width:calc(100% - 28px)!important;
  font-size:clamp(11px,3vw,13px)!important;
  white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
  padding:0!important;
 }
 #shopView #glowShopCategories .ys-category-card small{
  display:none!important;
 }
 #shopView #topCarousel{border-radius:11px!important}
 #shopView #topCarousel .glow-top-track>.top-slide{
  padding:12px!important;gap:10px!important;
 }
 #shopView #topCarousel .top-slide-copy strong{
  font-size:clamp(15px,4vw,19px);line-height:1.25!important;
 }
 #shopView #topCarousel .top-buy-actions{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
 }
 #shopView #topCarousel .top-buy-actions button{
  font-size:clamp(10px,2.8vw,12px)!important;
  padding:9px 5px!important;min-width:0;
 }
 #shopView #topCarousel .top-gallery-controls{margin:0 9px 8px}
 .mobile-bottom{
  gap:0!important;justify-content:space-between!important;
  padding-left:4px!important;padding-right:4px!important;
 }
 .mobile-bottom button{min-width:0!important;flex:1 1 0!important;gap:3px!important;padding:4px 1px!important}
 .mobile-bottom button .g-icon{width:23px!important;height:23px!important}
 .mobile-bottom button small{
  white-space:nowrap!important;font-size:clamp(9px,2.55vw,11px)!important;
  line-height:1.2!important;
 }
 .glowtto-footer .glowtto-footer-welcome h2{font-size:clamp(23px,6vw,28px)}
 .glowtto-footer .glowtto-footer-affirmations p:nth-child(n+3){display:none}
}
@media(max-width:375px){
 .head-inner{gap:3px!important}
 #shopView .ys-shop-nav button{font-size:9px!important}
 #shopView #glowShopCategories .ys-category-label-icon .g-icon{
  width:19px!important;height:19px!important;
 }
 #shopView #glowShopCategories .ys-category-label-text{font-size:11px!important}
 #shopView #topCarousel .top-buy-actions button{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){
 #shopView #glowShopCategories>.ys-category-card,
 #shopView .ys-rail-controls button{transition:none!important;transform:none!important}
}