/* Menue · grilla / carrusel 2026 · sólo afecta el área de productos. */
body .menue-category-emoji {font-style:normal;display:inline-block;margin-right:.27em;vertical-align:baseline;font-family:system-ui,"Apple Color Emoji","Segoe UI Emoji",sans-serif}
/* El botón utiliza la misma forma, material y tamaños del sol/luna. */
body .hero-integrated-top>.menue-layout-toggle {
  display:grid!important;place-items:center!important;position:relative!important;
  flex:0 0 40px!important;width:40px!important;height:40px!important;min-width:40px!important;
  padding:0!important;margin:0!important;border-radius:50%!important;
  background:color-mix(in srgb,var(--md-header-ink) 7%,var(--md-header-color))!important;
  border:1px solid color-mix(in srgb,var(--md-header-ink) 24%,transparent)!important;
  color:var(--md-header-accent)!important;cursor:pointer!important;
  align-self:center!important;box-shadow:none!important;z-index:2!important;
  -webkit-tap-highlight-color:transparent!important
}
body .hero-integrated-top>.menue-layout-toggle svg{width:21px!important;height:21px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
body .hero-integrated-top>.menue-layout-toggle:hover{border-color:var(--md-yellow)!important}
body .hero-integrated-top>.menue-layout-toggle:focus-visible{outline:3px solid var(--md-yellow)!important;outline-offset:3px!important}
@media(min-width:701px){
 body .hero-integrated-top{grid-template-columns:minmax(0,1fr) minmax(0,auto) 40px 40px!important;gap:12px!important}
 body .hero-integrated-top>.menue-layout-toggle{grid-column:3!important;grid-row:1!important;justify-self:end!important}
 body .hero-integrated-top>.menue-theme-toggle{grid-column:4!important;grid-row:1!important;justify-self:end!important}
}
@media(max-width:700px){
 body .hero-integrated-top{grid-template-columns:minmax(0,1fr) 39px 39px!important;gap:9px!important}
 body .hero-integrated-top>.menue-layout-toggle{grid-column:2!important;grid-row:1!important;justify-self:end!important;width:39px!important;height:39px!important;min-width:39px!important}
 body .hero-integrated-top>.menue-theme-toggle{grid-column:3!important;grid-row:1!important;justify-self:end!important}
}
/* Grilla no sufre ninguna modificación de estilos. */
body[data-product-layout="carousel"] .menu-main .section{min-width:0}
body[data-product-layout="carousel"] .menu-main .section-head{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:9px!important}
body[data-product-layout="carousel"] .menu-main .product-grid{
  display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;
  overscroll-behavior-x:contain!important;touch-action:pan-x pan-y!important;
  scroll-snap-type:x mandatory!important;scroll-padding-inline:2px!important;
  gap:14px!important;padding:5px 4px 18px 2px!important;min-width:0!important;
  scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important;
}
body[data-product-layout="carousel"] .menu-main .product-grid::-webkit-scrollbar{display:none!important}
body[data-product-layout="carousel"] .menu-main .product{
  flex:0 0 calc((100% - 28px)/3.5)!important;
  width:calc((100% - 28px)/3.5)!important;
  max-width:none!important;min-width:0!important;
  height:322px!important;min-height:322px!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
  grid-template-columns:none!important;gap:11px!important;padding:11px!important;
  scroll-snap-align:start!important;scroll-snap-stop:normal!important;
  border-radius:18px!important;
}
body[data-product-layout="carousel"] .menu-main .product-img{
  display:block!important;flex:0 0 52%!important;width:100%!important;
  height:52%!important;max-height:none!important;min-height:0!important;
  aspect-ratio:auto!important;object-fit:cover!important;border-radius:13px!important;
}
body[data-product-layout="carousel"] .menu-main .product-body{
  display:flex!important;flex:1 1 auto!important;min-height:0!important;min-width:0!important;
  padding:0 2px!important;overflow:hidden!important;
}
body[data-product-layout="carousel"] .menu-main .product h4{font-size:clamp(13px,1.3vw,17px)!important;line-height:1.2!important}
body[data-product-layout="carousel"] .menu-main .product p{font-size:12px!important;line-height:1.35!important;overflow:hidden!important}
body[data-product-layout="carousel"] .menu-main .product-bottom{margin-top:auto!important;padding-top:6px!important;gap:4px!important;flex-wrap:wrap!important}
body[data-product-layout="carousel"] .menu-main .price{font-size:clamp(13px,1.35vw,17px)!important}
body[data-product-layout="carousel"] .menu-main .product-add{max-width:100%!important;flex-wrap:wrap!important}
body[data-product-layout="carousel"] .menu-main .product-qty{max-width:100%!important}
body[data-product-layout="carousel"] .menue-carousel-controls{display:flex;align-items:center;gap:6px;margin-left:auto}
body[data-product-layout="carousel"] .menue-carousel-arrow{
  display:grid;place-items:center;width:32px;height:32px;padding:0;
  border-radius:50%;border:1px solid var(--md-line,#ddd);
  background:var(--md-surface,#fff);color:var(--md-text,#222);
  font-size:25px;line-height:1;cursor:pointer
}
body[data-product-layout="carousel"] .menue-carousel-arrow:disabled{opacity:.35;cursor:default}
body[data-product-layout="carousel"] .menue-carousel-arrow:focus-visible{outline:2px solid var(--accent,#777);outline-offset:2px}
body .menue-carousel-controls{display:none}
@media(max-width:800px){
 body[data-product-layout="carousel"] .menu-main .product{height:302px!important;min-height:302px!important}
 body[data-product-layout="carousel"] .menu-main .product-img{flex-basis:49%!important;height:49%!important}
}
@media(max-width:650px){
 body[data-product-layout="carousel"] .menu-main .product-grid{gap:12px!important;padding-bottom:15px!important}
 /* Una tarjeta completa + media siguiente, visible permanentemente. */
 body[data-product-layout="carousel"] .menu-main .product{
   flex:0 0 calc((100% - 12px)/1.5)!important;
   width:calc((100% - 12px)/1.5)!important;
   height:314px!important;min-height:314px!important;padding:10px!important;
 }
 body[data-product-layout="carousel"] .menu-main .product-img{flex-basis:51%!important;height:51%!important}
 body[data-product-layout="carousel"] .menu-main .product h4{font-size:15px!important}
 body[data-product-layout="carousel"] .menu-main .product p{font-size:12px!important}
}
@media(prefers-reduced-motion:reduce){body[data-product-layout="carousel"] .menu-main .product-grid{scroll-behavior:auto!important}}
