/* "N more" under the Products list while some products sit below its visible part.
   The list fades by masking itself, so the fade matches the menu in either theme. */
.product-menu-list-wrap{position:relative;min-width:0;min-height:0}
.product-menu-list-wrap[data-more]>.product-menu-list{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent calc(100% - 30px));mask-image:linear-gradient(to bottom,#000 calc(100% - 72px),transparent calc(100% - 30px))}
.product-menu-more{position:absolute;z-index:1;left:50%;bottom:4px;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 6px;border:0;background:none;color:var(--muted,#6b7280);font-family:inherit;font-size:12px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease,color .12s ease}
.product-menu-list-wrap[data-more]>.product-menu-more{opacity:1;pointer-events:auto;transform:translate(-50%,0)}
.product-menu-more:hover{color:var(--ink,#2e2e2e)}
.product-menu-more-status{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.product-menu-more svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* The menu is display:none while closed, so the drift replays on every open. */
@media (prefers-reduced-motion:no-preference){
  .nav-products[open] .product-menu-more svg{animation:product-menu-more-drift 1.6s ease-in-out 3}
}
@keyframes product-menu-more-drift{0%,100%{transform:translateY(-2px);opacity:.35}50%{transform:translateY(2px);opacity:1}}