/* Mobile shop categories in a compact, accessible modal. */
.ns-shop-menu {
 box-sizing:border-box; position:fixed; inset:auto 0 calc(92px + env(safe-area-inset-bottom,0px));
 width:min(360px,calc(100vw - 16px)); max-width:none; max-height:calc(100dvh - 112px - env(safe-area-inset-bottom,0px));
 margin:0 auto; padding:10px; overflow:auto; border:1px solid #bed6c5; border-radius:24px;
 background:linear-gradient(145deg,#fcfdf8,#e6f1e5); color:#174d36; font-family:inherit; direction:rtl;
 box-shadow:0 16px 54px rgba(7,48,32,.25);
}
.ns-shop-menu:not([open]) { display:none; }
.ns-shop-menu::backdrop { background:rgba(8,35,25,.4); }
.ns-shop-menu__head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 4px; }
.ns-shop-menu__head h2 { margin:0; font:inherit; font-size:15px; font-weight:700; color:#174d36; }
.ns-shop-menu__close { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; padding:0; border:1px solid #c5dbc9; border-radius:12px; background:#fff; color:#174d36; font:30px/1 Arial,sans-serif; cursor:pointer; }
.ns-shop-menu__wheel { position:relative; width:100%; aspect-ratio:.60; min-height:0; }
.ns-shop-menu__connections { position:absolute; inset:0; display:block; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.ns-shop-menu__connections line { stroke:#a6c7ae; stroke-width:1.5; stroke-dasharray:4 5; stroke-linecap:round; opacity:.8; }
.ns-shop-menu__connections line:nth-child(1) { stroke:#24CCB2; }
.ns-shop-menu__connections line:nth-child(2) { stroke:#8FC741; }
.ns-shop-menu__connections line:nth-child(3) { stroke:#36B34A; }
.ns-shop-menu__connections line:nth-child(4) { stroke:#016C3F; }
.ns-shop-menu__connections line:nth-child(5) { stroke:#B38FF8; }
.ns-shop-menu__connections line:nth-child(6) { stroke:#51D6FF; }
.ns-shop-menu__connections line:nth-child(7) { stroke:#FFDE17; }
.ns-shop-menu__connections line:nth-child(8) { stroke:#FE6915; }
.ns-shop-menu__connections line:nth-child(9) { stroke:#EE2A7B; }
.ns-shop-menu__connections line:nth-child(10) { stroke:#140E59; }
/* Paths run from the hub outward; positive dash offset flows toward the hub. */
@media(prefers-reduced-motion:no-preference) {
 .ns-shop-menu[open] .ns-shop-menu__connections line { animation:ns-shop-line-to-center 3.8s linear infinite; }
 @keyframes ns-shop-line-to-center { from { stroke-dashoffset:0; } to { stroke-dashoffset:18; } }
}
.ns-shop-menu__category {
 position:absolute; left:var(--shop-x); top:var(--shop-y); transform:translate(-50%,-50%); z-index:1;
 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
 width:clamp(64px,18.7vw,72.6px); min-height:77px; padding:2px 0; border-radius:12px;
 color:#244e38; text-decoration:none; font:inherit; font-size:10px; line-height:1.6; text-align:center;
 -webkit-tap-highlight-color:transparent;
}
.ns-shop-menu__category img {
 display:block; width:59.4px; height:59.4px; object-fit:contain; border-radius:50%;
 background:radial-gradient(ellipse at 30% 15%,#fff 0%,#f7fcf3 38%,#bfd5bd 100%);
 box-shadow:0 3px 3px #ffffffed inset,0 -5px 7px #174d3640 inset,0 2px 0 #d9e9d4,0 5px 0 #a5bea4,0 8px 0 #7e9e82,0 11px 0 #65896e,0 15px 12px #173f3452;
 transform:perspective(203px) rotateX(-30deg) translateY(-3px);
}
.ns-shop-menu__category:active img {
 transform:perspective(260px) rotateX(7deg) translateY(2px);
 box-shadow:0 2px 2px #fff inset,0 -3px 5px #174d3640 inset,0 2px 0 #a5bea4,0 4px 0 #65896e,0 7px 7px #173f3440;
}
.ns-shop-menu__category span { white-space:nowrap; }
.ns-shop-menu__category:hover,.ns-shop-menu__category:active { background:#d9ead8; color:#0b5f35; }
.ns-shop-menu__hub {
 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:86px; height:86px;
 border:4px solid #fff; border-radius:50%; background:#f7fbf3;
 color:#174d36; box-shadow:0 4px 6px #fff inset,0 -6px 10px #174d3640 inset,0 0 0 7px #d3e8d5,0 5px 0 6px #a5bea4,0 9px 0 5px #7e9e82,0 13px 0 4px #65896e,0 19px 22px #164e3452; text-decoration:none; font:inherit; font-size:11px;
}
.ns-shop-menu__hub img { display:block; width:52px; height:52px; object-fit:contain; }
.ns-shop-menu__hub span { font-size:10px; line-height:1.4; }
.ns-shop-menu__hub:hover { color:#174d36; background:#e7f2e3; }
.ns-shop-menu a:focus-visible,.ns-shop-menu button:focus-visible { outline:3px solid #087b49; outline-offset:3px; }
body.ns-shop-menu-open { overflow:hidden; }
@media(min-width:769px) { .ns-shop-menu { display:none !important; } }
@media(prefers-reduced-motion:no-preference) {
 .ns-shop-menu__category img { transition:transform .2s ease,box-shadow .2s ease; }
 .ns-shop-menu[open] .ns-shop-menu__wheel { animation:ns-shop-wheel-in .38s ease-out; }
 @keyframes ns-shop-wheel-in { from {opacity:0;transform:translateY(10px) scale(.97)} to {opacity:1;transform:none} }
}
@media(max-height:540px) and (max-width:768px) {
 .ns-shop-menu { inset:8px 0 auto; max-height:calc(100dvh - 16px); }
}