/* ===== MENÚ ===== */
.homs-sidemenu-productos{
  --hsmp-orange:#fe5000;
  --hsmp-orange-soft:rgba(242,106,27,.1);
  --hsmp-dark:#111418;
  --hsmp-text:#1d2025;
  --hsmp-muted:#6b7280;
  --hsmp-line:#eceef1;
  --hsmp-bg:#fff;
  --hsmp-hover:#f4f5f7;
  --hsmp-ease:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0 auto 0 0;z-index:100001;
  width:min(400px,100vw);height:100vh;height:100dvh;
  display:flex;flex-direction:column;
  background:#ffffffe0;
  color:var(--hsmp-text);
  /* font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; */
  box-shadow:24px 0 60px rgba(0,0,0,.18);
  transform:translateX(-102%);visibility:hidden;
  transition:transform .5s var(--hsmp-ease),visibility 0s .5s;
  outline:0;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);

}
.homs-sidemenu-productos.is-open{transform:none;visibility:visible;transition-delay:0s}
.homs-sidemenu-productos *,.homs-sidemenu-productos *::before,.homs-sidemenu-productos *::after{box-sizing:border-box}

/* Overlay (lo crea el JS) */
.homs-sidemenu-productos__overlay{
  position:fixed;inset:0;z-index:100000;
  /* background:rgba(10,12,16,.45);*/
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .4s ease;
}
.homs-sidemenu-productos__overlay.is-visible{opacity:1;pointer-events:auto}
html.homs-sidemenu-productos-lock{overflow:hidden}

/* Cabecera */
.homs-sidemenu-productos__header{padding:28px 24px 16px;flex-shrink:0}
.homs-sidemenu-productos__title{margin:0 56px 16px 0;font-size:20px;font-weight:900;line-height:1.2;color:#000}
.homs-sidemenu-productos__close{
  position:absolute;
  top: 31px;
  right: 10px;
  width: 34px;
  height: 34px;
  color:var(--hsmp-text);cursor:pointer;
  transition:transform .35s var(--hsmp-ease),background .2s,color .2s;
}

/* Buscador */
.homs-sidemenu-productos__search{
  display:flex;align-items:center;gap:10px;height:46px;
  border-radius:12px;color:var(--hsmp-muted);
  border:2px solid transparent;transition:border-color .2s,background .2s;
}
.homs-sidemenu-productos__search-input{flex:1;min-width:0;border:0;outline:0;background:none;font-family:inherit;font-weight:500;font-size:16px;line-height:1;color:var(--hsmp-text);box-shadow:none;margin:0;padding:0;height:auto}
.homs-sidemenu-productos__search-input::placeholder{color:var(--hsmp-muted)}

/* Navegación */
.homs-sidemenu-productos__nav{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px 16px;scrollbar-width:thin;scrollbar-color:#d4d7dd transparent}
.homs-sidemenu-productos__group{border-radius:14px}
.homs-sidemenu-productos__group[hidden],.homs-sidemenu-productos__list li[hidden],.homs-sidemenu-productos__empty[hidden]{display:none}
.homs-sidemenu-productos.is-open .homs-sidemenu-productos__group{animation:hsmp-in .55s var(--hsmp-ease) both;animation-delay:calc(120ms + var(--i,0) * 45ms)}
@keyframes hsmp-in{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}

.homs-sidemenu-productos__section{
  width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0;
  border:0;border-radius:12px;background:none;color:inherit;
  font-family:inherit;font-weight:600;font-size:15px;line-height:1.25;text-align:left;cursor:pointer;
  transition:background .2s;
}
.homs-sidemenu-productos__section:focus-visible,.homs-sidemenu-productos__list a:focus-visible,.homs-sidemenu-productos__btn:focus-visible,.homs-sidemenu-productos__close:focus-visible{outline:2px solid var(--hsmp-orange);outline-offset:2px}

.homs-sidemenu-productos__icon{
  flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;
  background:#ffffff;color:var(--hsmp-text);transition:background .25s,color .25s,transform .3s var(--hsmp-ease);
}
.homs-sidemenu-productos__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.homs-sidemenu-productos__section[aria-expanded="true"] .homs-sidemenu-productos__icon{background:var(--hsmp-orange);color:#fff;transform:scale(1.04)}
.homs-sidemenu-productos__label{flex:1;min-width:0}
.homs-sidemenu-productos__chev{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:var(--hsmp-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--hsmp-ease)}
.homs-sidemenu-productos__section[aria-expanded="true"] .homs-sidemenu-productos__chev{transform:rotate(180deg);stroke:var(--hsmp-orange)}

/* Acordeón: anima la altura sin medir con JS */
.homs-sidemenu-productos__content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--hsmp-ease)}
.homs-sidemenu-productos__section[aria-expanded="true"] + .homs-sidemenu-productos__content{grid-template-rows:1fr}
.homs-sidemenu-productos__list{min-height:0;overflow:hidden;list-style:none;margin:0 0 0 31px;padding:0;border-left:2px solid var(--hsmp-line)}
.homs-sidemenu-productos__list li{margin:0;padding:0;list-style:none}
.homs-sidemenu-productos__list li:first-child{margin-top:4px}
.homs-sidemenu-productos__list li:last-child{margin-bottom:8px}
.homs-sidemenu-productos__list a{
  display:flex;align-items:center;min-height:24px;padding:5px 12px 5px 20px;margin-left:-2px;border-left:2px solid transparent;border-radius:0 10px 10px 0;
  color:var(--hsmp-text);font-size:15px;line-height:1.3;text-decoration:none;
  transition:background .2s,color .2s,border-color .2s,padding .25s var(--hsmp-ease);
}
.homs-sidemenu-productos__list li:first-child a{font-weight:700;color:var(--hsmp-orange)}

.homs-sidemenu-productos__empty{margin:24px 12px;text-align:center;color:var(--hsmp-muted);font-size:15px}

/* CTAs fijos abajo */
.homs-sidemenu-productos__cta{flex-shrink:0;display:grid;gap:10px;padding:16px 20px calc(20px + env(safe-area-inset-bottom));border-top:1px solid #ffffff;}
.homs-sidemenu-productos__btn{display:block;text-align:center;font-weight:700;font-size:15px;line-height:1.2;text-decoration:none;}
.homs-sidemenu-productos__btn--orange{color: #000;text-align: left;}
.homs-sidemenu-productos__btn--dark{color: #000;text-align: left;}

/* Hover solo en ratón; en táctil se usa :active */
@media (hover:hover){
  .homs-sidemenu-productos__close:hover{color:#999;}
  .homs-sidemenu-productos__section:hover{background:var(--hsmp-hover)}
  .homs-sidemenu-productos__list a:hover{background:rgba(255, 255, 255, 0.6);color:#c24e0b;border-left-color:var(--hsmp-orange);padding-left:24px}
  .homs-sidemenu-productos__btn--orange:hover{ color:#999;}
  .homs-sidemenu-productos__btn--dark:hover{color:#999;}
}
.homs-sidemenu-productos__section:active{background:var(--hsmp-hover)}
.homs-sidemenu-productos__list a:active{background:var(--hsmp-orange-soft);color:#c24e0b}
.homs-sidemenu-productos__btn:active{transform:scale(.98)}

@media (prefers-reduced-motion:reduce){
  .homs-sidemenu-productos,.homs-sidemenu-productos__overlay,.homs-sidemenu-productos__content,.homs-sidemenu-productos__chev,.homs-sidemenu-productos__icon,.homs-sidemenu-productos__list a{transition-duration:.01ms!important}
  .homs-sidemenu-productos.is-open .homs-sidemenu-productos__group{animation:none}
}