/* Задача 04: мегаменю з 4 груп, шухляда, бокове меню, «Каталог товарів», «Усі категорії». Із макетів design/grand-auto-home.html та grand-auto-catalog.html */

.mm{grid-template-columns:310px minmax(0,1fr)}
.mm-l{gap:1px!important;padding:10px!important;max-height:calc(100vh - 170px);overflow-y:auto;scrollbar-width:thin}
.mm-l .mm-gh{list-style:none;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--fg-3);padding:10px 10px 3px}
.mm-l .mm-gh:first-child{padding-top:2px}
.mm-l button{grid-template-columns:30px minmax(0,1fr) auto 14px!important;gap:10px!important;padding:5px 10px 5px 6px!important;border-radius:11px!important}
.mm-l button b{font-size:14.5px!important;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-l button em.z{background:none;border:0;padding:0}
.mm-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--accent)}
.mm-l button .mm-ic svg{width:17px;height:17px;color:inherit;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mm-l button[aria-selected="true"] .mm-ic{background:var(--accent);color:#fff;border-color:var(--accent)}
.mm-l button[aria-selected="true"] .mm-ic svg{color:#fff}
.mm-chips{margin-bottom:6px}
.mm-shapes a{display:inline-flex;align-items:center;gap:8px;font-family:var(--font)!important;font-weight:700}
.shp{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.mm-brands{margin:10px 32px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fafbfd}
.mb-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.mb-h span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--fg-2)}
.mb-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.mb-g a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-g a:hover{border-color:var(--accent);color:var(--accent)}
.mb-g i,.d-brands i{font-style:normal;flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);font-size:11.5px;font-weight:800;color:var(--fg-2)}
.mg-sub{background:linear-gradient(180deg,var(--accent-tint),var(--accent-tint2))!important;border-color:rgba(var(--accent-rgb),.16)!important}
.mg-sub h5 svg{fill:none;stroke:currentColor;stroke-width:1.8}
.mm-tbd{color:var(--fg-3);font-size:14px}
.si-all{flex:0 0 auto!important}
.sc-all{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px 14px 22px;border-radius:16px;background:var(--accent);color:#fff;text-align:left;box-shadow:0 14px 30px -18px rgba(var(--accent-rgb),.9)}
.sc-all b{display:block;font-size:16px}.sc-all small{display:block;font-size:12px;opacity:.85;margin-top:2px}.sc-all svg{width:20px;height:20px;flex:none}
.sc-all:hover{background:var(--accent-lt)}
.d-ic{display:grid!important;place-items:center;color:var(--accent)}
.d-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.d-cat em.z{display:none}
.d-shapes a{display:inline-flex;align-items:center;gap:6px;font-family:var(--font)!important}
.d-brands{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.d-brands a{display:flex;align-items:center;gap:6px;padding:8px;border-radius:10px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:13px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.d-brands a.all{grid-column:1/-1;justify-content:center;color:var(--accent)}.d-brands a.all svg{width:16px;height:16px}
.d-sh .ph.d-ic{width:52px;height:52px;border-radius:14px;background:#fff;border:1px solid var(--line)}
@media(max-width:1400px){.mb-g{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mm.mm3{grid-template-columns:280px 310px minmax(0,1fr)!important;max-width:1480px}
.mm3 #mmL{background:#eef2f8}
.mm3 #mmL button{padding:10px 10px 10px 8px!important;grid-template-columns:38px minmax(0,1fr) 0 14px!important}
.mm3 #mmL .mm-ic{width:38px;height:38px;border-radius:11px}
.mm3 #mmL button b{font-size:15.5px!important;white-space:nowrap;overflow:visible;text-overflow:clip}
.mm3 #mmL button b small{display:block;font-size:12px;font-weight:500;color:var(--fg-3);margin-top:1px}
.mm3 #mmL button[aria-selected="true"] b small{color:var(--fg-2)}
.mm3 #mmL{gap:6px!important;padding:14px 10px!important}
.mm-c{background:#fff!important;border-right:1px solid var(--line)}
.mm3 .mb-g{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1400px){.mm.mm3{grid-template-columns:220px 270px minmax(0,1fr)!important}.mm3 #mmL button b{white-space:normal!important}.mp-subs{grid-template-columns:repeat(2,minmax(0,1fr))}.mm3 .mm-foot span:nth-child(2){display:none}.mm3 .mb-g{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* права панель v3: тільки навігація */
.mp{display:flex;flex-direction:column;gap:22px;padding:4px 32px 26px;flex:1}
.mp-t{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:800;color:var(--fg-2)}
.mp-t small{font-family:var(--mono);letter-spacing:0;font-size:11px;padding:2px 7px;border-radius:999px;background:#f1f4f9;color:var(--fg-3);font-weight:600}
.mp-more{margin-left:auto;display:inline-flex;align-items:center;gap:6px;letter-spacing:0;text-transform:none;font-size:14px;color:var(--accent);font-weight:700}
.mp-more svg,.mp-subs a>svg{width:16px;height:16px}
.mp-subs{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:10px}
.mp-subs a{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:12px 14px 12px 12px;border-radius:14px;border:1px solid var(--line);background:#fff;transition:.15s}
.mp-subs a b{font-size:15px;line-height:1.25}
.mp-subs a>svg{color:var(--fg-3);transition:.15s}
.mp-si{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent)}
.mp-si svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mp-subs a:hover{border-color:rgba(var(--accent-rgb),.4);box-shadow:0 14px 28px -20px rgba(var(--accent-rgb),.6);transform:translateY(-1px)}
.mp-subs a:hover>svg{color:var(--accent);transform:translateX(2px)}
.mp-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));grid-auto-flow:dense;gap:8px}
.mp-chips a{display:grid;place-items:center;height:46px;padding:0 6px;border-radius:12px;border:1px solid var(--line);background:#f8fafd;font-family:var(--mono);font-size:14px;font-weight:700;white-space:nowrap;transition:.15s}
.mp-chips a.w{grid-column:span 2}
.mp-chips a:hover{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 10px 22px -14px rgba(var(--accent-rgb),.9)}
.mp-shapes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.mp-shapes a{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px 14px;border-radius:16px;border:1px solid var(--line);background:#f8fafd;transition:.15s}
.mp-shapes svg{width:46px;height:46px;fill:rgba(var(--accent-rgb),.08);stroke:var(--accent);stroke-width:1.6}
.mp-shapes b{font-size:14px}
.mp-shapes a:hover{background:#fff;border-color:rgba(var(--accent-rgb),.45);box-shadow:0 14px 28px -20px rgba(var(--accent-rgb),.6)}
.mp-shapes a:hover svg{fill:rgba(var(--accent-rgb),.18)}
.mp-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mp-brands a{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 9px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:.15s}
.mp-brands i{font-style:normal;flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#f3f6fb,#e5ebf4);font-size:12.5px;font-weight:900;color:#2b3442}
.mp-brands a:hover{border-color:rgba(var(--accent-rgb),.45);color:var(--accent)}
.mp-help{display:flex;gap:20px;align-items:flex-start;padding:26px;border-radius:18px;background:linear-gradient(135deg,var(--accent-tint),var(--accent-tint2));border:1px solid rgba(var(--accent-rgb),.14)}
.mp-hic{flex:none;width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--accent);box-shadow:0 14px 30px -22px rgba(var(--accent-rgb),.8)}
.mp-hic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mp-help b{display:block;font-size:18px;margin-bottom:6px}.mp-help p{margin:0 0 16px;color:var(--fg-2);font-size:14.5px;line-height:1.55;max-width:560px}
.mp-ha{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.mp-m{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font-weight:700;font-size:14px}
.mp-m svg{width:18px;height:18px;color:var(--c);flex:none}.mp-m:hover{border-color:var(--c);color:var(--c)}
.mp-ha .btn{height:42px}
.mm-r .mm-head{padding-bottom:18px}
.fly .mp{padding:4px 28px 28px}
.mm-head h3{flex-wrap:wrap}.mm-all{white-space:nowrap;flex:none}
.mm3 .mm-r{min-height:420px}
/* телефон */
.d-chp{grid-template-columns:repeat(auto-fill,minmax(70px,1fr))}
.d-chp a{height:44px;background:#fff}
.d-shp{grid-template-columns:repeat(3,minmax(0,1fr))}.d-shp a{padding:14px 6px 10px;background:#fff}.d-shp svg{width:36px;height:36px}.d-shp b{font-size:13px}
.d-help{margin:6px 2px 10px;color:var(--fg-2);font-size:14.5px;line-height:1.5}.d-ha{margin:0 2px 8px}
@media(max-width:1400px){.mm3 .mm-head h3{font-size:24px}.mp{padding:4px 24px 22px}.mp-brands{grid-template-columns:repeat(3,minmax(0,1fr))}.mp-shapes{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v4: фото, синя група, банер */
.mm3 #mmL button[aria-selected="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2))!important;border-color:transparent!important;box-shadow:0 18px 32px -18px rgba(var(--accent-rgb),.95)!important}
.mm3 #mmL button[aria-selected="true"]::before{opacity:0!important}
.mm3 #mmL button[aria-selected="true"] b,.mm3 #mmL button[aria-selected="true"] b small,.mm3 #mmL button[aria-selected="true"]>svg{color:#fff!important}
.mm3 #mmL button[aria-selected="true"] .mm-ic{background:rgba(255,255,255,.18)!important;border-color:transparent!important}
.mm3 #mmL button{min-height:62px}
.mm-c{display:flex!important;flex-direction:column;padding:12px 12px 14px!important;gap:4px!important}
.mm-c button{grid-template-columns:58px minmax(0,1fr) auto 14px!important;padding:6px 10px 6px 6px!important;border-radius:14px!important;min-height:58px}
.mm-ph{width:58px;height:46px;border-radius:11px;display:grid;place-items:center;background:radial-gradient(60% 60% at 50% 50%,#fff,#eef2f8);overflow:hidden;color:var(--accent)}
.mm-ph img{width:100%;height:100%;object-fit:contain;padding:4px;transition:transform .25s}
.mm-ph svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}
.mm-c button:hover .mm-ph img,.mm-c button[aria-selected="true"] .mm-ph img{transform:scale(1.08)}
.mm-c button[aria-selected="true"]{background:var(--accent-tint)!important;border-color:rgba(var(--accent-rgb),.18)!important;box-shadow:none!important}
.mm-c button[aria-selected="true"]::before{top:20%!important;bottom:20%!important}
.mm-c button b{font-size:15px!important;white-space:normal!important;overflow:visible!important;line-height:1.2!important}
.mm-c button{grid-template-columns:54px minmax(0,1fr) auto 14px!important}.mm-ph{width:54px}
.mm-ban{list-style:none;margin-top:auto;padding-top:12px}
.mm-ban a{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;min-height:178px;padding:20px;border-radius:18px;overflow:hidden;color:#fff;background:linear-gradient(95deg,rgba(5,13,40,.94) 0%,rgba(5,13,40,.72) 45%,rgba(5,13,40,.08) 100%),var(--bg) center/cover;box-shadow:0 20px 40px -26px rgba(5,13,40,.9)}
.mm-ban b{font-size:18px;line-height:1.25;font-weight:800;letter-spacing:-.01em;max-width:85%}
.mm-ban span{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:11px;background:#fff;color:var(--accent-navy2);font-weight:800;font-size:14px;transition:.15s}
.mm-ban span svg{width:16px;height:16px;color:var(--accent)}
.mm-ban a:hover span{background:var(--accent);color:#fff}.mm-ban a:hover span svg{color:#fff}
.mh2{position:relative!important;display:flex!important;align-items:center!important;gap:24px!important;min-height:210px;padding:26px 32px 10px!important;border-bottom:0!important}
.mh-t{flex:1;min-width:0;position:relative;z-index:1}
.mh2 h3{display:block!important;color:var(--fg)!important;font-size:34px!important;line-height:1.1;letter-spacing:-.025em;margin:6px 0 16px!important}
.mh-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.mh-c{font-size:13.5px;font-weight:700;color:var(--fg-2);padding:7px 12px;border-radius:999px;background:#f1f4f9}
.mh-img{flex:none;width:250px;height:170px;display:grid;place-items:center;margin-right:46px;position:relative}
.mh-img::before{content:"";position:absolute;inset:-30px -40px;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.16),transparent);z-index:0}
.mh-img::after{content:"";position:absolute;left:12%;right:12%;bottom:4px;height:18px;border-radius:50%;background:radial-gradient(closest-side,rgba(10,30,80,.22),transparent)}
.mh-img img{position:relative;z-index:1;max-width:100%;max-height:170px;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(10,30,80,.28));animation:mhIn .35s ease-out}
@keyframes mhIn{from{opacity:0;transform:translateX(14px) scale(.96)}to{opacity:1;transform:none}}
.mh2 .mm-x{position:absolute;top:18px;right:18px;z-index:2}
.mp-hic img{width:100%;height:100%;object-fit:contain;padding:6px}
.fly .mh2{padding:22px 28px 10px!important;min-height:170px}.fly .mh-img{width:200px;height:140px;margin-right:0}.fly .mh-img img{max-height:140px}
.d-ic img{width:100%;height:100%;object-fit:contain;padding:4px}
.d-cat .ph.d-ic{background:radial-gradient(60% 60% at 50% 50%,#fff,#eef2f8)!important}
@media(max-width:1400px){.mp-subs{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important}.mh2 h3{font-size:26px!important}.mh-img{width:170px;height:120px;margin-right:40px}.mh-img img{max-height:120px}.mm-ban b{font-size:16px}.mm-ban a{min-height:150px;padding:16px}}
@media (prefers-reduced-motion:reduce){.mh-img img{animation:none}}
/* Акції / Новинки */
.mpr,.sd-pr .spr,.dpr{--c:#e5484d;--b:#fff1f1;display:grid;grid-template-columns:38px minmax(0,1fr) 14px;align-items:center;gap:10px;padding:9px 10px 9px 8px;border-radius:14px;border:1px solid transparent;transition:.15s}
.mpr-new,.sd-pr .spr-new,.dpr-new{--c:#12a150;--b:#ecfbf1}
.pi{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--b);color:var(--c)}
.pi svg{width:20px;height:20px;fill:currentColor;stroke:none}.pi svg.st{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.pi svg.st circle{fill:currentColor;stroke:none}
.mpr b,.sd-pr .spr b,.dpr b{display:block;font-size:15px;font-weight:800;color:var(--c)}
.mpr small,.sd-pr .spr small,.dpr small{display:block;font-size:12px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mpr>svg,.sd-pr .spr>svg,.dpr>svg{width:14px;height:14px;color:var(--fg-3)}
.mpr:hover,.sd-pr .spr:hover,.dpr:hover{background:#fff;border-color:color-mix(in srgb,var(--c) 30%,transparent);box-shadow:0 12px 26px -20px var(--c)}
.mm-pr{list-style:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:grid;gap:4px}
.d-pr{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 6px}
.dpr{grid-template-columns:34px minmax(0,1fr);background:#fff;border-color:var(--line);padding:10px}.dpr>svg{display:none}.dpr small{display:none}.dpr b{font-size:15.5px}.dpr{align-items:center;min-height:56px}.dpr .pi{width:34px;height:34px}
/* бокове меню головної v3: великі фото груп, Акції/Новинки внизу */
.sd{display:flex;flex-direction:column;gap:10px;height:100%}
.sd-g{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;flex:1}
.sdi{position:relative;flex:1;display:flex;--gc:var(--accent)}
.sdc{position:relative;flex:1;display:grid;grid-template-columns:44px minmax(0,1fr) 40%;align-items:center;gap:12px;min-height:128px;padding:18px 16px 18px 18px;border-radius:20px;overflow:hidden;isolation:isolate;background:#fff;border:1px solid var(--line);box-shadow:0 12px 32px -26px rgba(14,17,22,.4);transition:border-color .2s,box-shadow .2s,background .2s}
.sdc::before{content:"";position:absolute;right:-30px;bottom:-40px;width:78%;height:150%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--gc) 22%,transparent),transparent 72%);transition:.3s}
.sdc::after{content:"";position:absolute;left:0;top:14%;bottom:14%;width:4px;border-radius:0 4px 4px 0;background:var(--gc);opacity:0;transition:.2s}
.sd-gi{align-self:start;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--gc) 12%,#fff);color:var(--gc);transition:.2s}
.sd-gi svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.sd-t{position:relative;z-index:2;min-width:0;align-self:start;padding-top:2px}
.sd-t b{display:block;font-size:16px;hyphens:auto;line-height:1.2;font-weight:850;letter-spacing:-.01em;transition:color .2s}
.sd-t small{display:block;margin-top:4px;font-size:12.5px;color:var(--fg-3)}
.sdc>svg{position:absolute;z-index:3;right:12px;top:16px;width:16px;height:16px;color:var(--fg-3);transition:.2s}
.sd-art{position:relative;align-self:stretch;margin:-6px 14px -10px 0;min-height:96px;z-index:1;pointer-events:none}
.sd-art img{position:absolute;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(10,30,80,.28));transition:transform .35s}
.sd-art img.a{right:0;bottom:0;width:100%;height:100%}
.sd-art.two img.b{right:-6px;top:0;width:62%;height:66%;z-index:0}
.sd-art.two img.a{left:0;right:auto;bottom:0;width:78%;height:74%;z-index:1}
.sdi:hover .sdc,.sdi:focus-within .sdc,.sdi.open .sdc{background:linear-gradient(90deg,color-mix(in srgb,var(--gc) 7%,#fff),#fff 70%);border-color:color-mix(in srgb,var(--gc) 35%,transparent);box-shadow:0 22px 44px -28px color-mix(in srgb,var(--gc) 80%,transparent)}
.sdi:hover .sdc::after,.sdi:focus-within .sdc::after,.sdi.open .sdc::after{opacity:1}
.sdi:hover .sd-t b,.sdi:focus-within .sd-t b,.sdi.open .sd-t b{color:var(--gc)}
.sdi:hover .sdc>svg,.sdi.open .sdc>svg{color:var(--gc);transform:translateX(2px)}
.sdi:hover .sd-art img.a{transform:scale(1.05) translateX(-3px)}.sdi:hover .sd-art img.b{transform:scale(1.04) translateY(-2px)}
.sd-pr{display:grid;gap:10px}
.sd-pr .spr{position:relative;overflow:hidden;isolation:isolate;min-height:74px;padding:12px 14px 12px 12px!important;border-radius:18px!important;background:#fff;border:1px solid var(--line)!important;box-shadow:0 12px 32px -26px rgba(14,17,22,.4);grid-template-columns:44px minmax(0,1fr) 14px!important}
.sd-pr .spr::before{content:"";position:absolute;right:-10px;top:-40%;width:55%;height:180%;z-index:-1;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 14%,transparent),transparent)}
.sd-pr .spr::after{content:"";position:absolute;left:0;top:18%;bottom:18%;width:4px;border-radius:0 4px 4px 0;background:var(--c);opacity:0;transition:.2s}.sd-pr .spr:hover::after{opacity:1}
.sd-pr .spr .pi{width:44px;height:44px;border-radius:13px}
.sd-pr .spr>span:nth-child(2){position:relative;z-index:2}
.sd-pr .spr>svg{position:relative;z-index:2}
.sp-art{position:absolute;right:28px;top:4px;bottom:4px;width:86px;z-index:1;transition:transform .3s}
.sp-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(10,30,80,.28))}
.sp-b{position:absolute;left:-6px;top:6px;z-index:2;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.02em;color:#fff;padding:3px 8px;border-radius:999px;background:var(--c);box-shadow:0 6px 14px -6px var(--c);transform:rotate(-8deg)}
.sd-pr .spr-new .sp-b{text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.sd-pr .spr:hover .sp-art{transform:scale(1.06) translateX(-2px)}
.sd-pr .spr small{max-width:none}
.sdf{position:absolute;left:calc(100% + 10px);top:0;z-index:40;display:grid;grid-template-columns:290px minmax(0,1fr);width:min(62vw,1180px);min-height:100%;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 40px 90px -40px rgba(14,17,22,.45);opacity:0;visibility:hidden;transform:translateX(-8px);transition:.18s}
.sdi[data-g="3"] .sdf{top:auto;bottom:0}
.sdi:hover .sdf,.sdi:focus-within .sdf,.sdi.open .sdf{opacity:1;visibility:visible;transform:none}
.sdf::before{content:"";position:absolute;right:100%;top:0;bottom:0;width:14px}
.sd-c{background:#f6f8fc!important;border-right:1px solid var(--line);padding:14px 12px!important}
.sd-p{display:flex;flex-direction:column;min-width:0}
.sd-p .mh2{padding:24px 28px 8px!important;min-height:180px}.sd-p .mh-img{width:210px;height:150px;margin-right:0}.sd-p .mh-img img{max-height:150px}
.sd-p .mp{padding:4px 28px 26px}
.sd .sc-all{margin-top:0}
@media(max-width:1400px){.sdf{grid-template-columns:265px minmax(0,1fr);width:min(68vw,1000px)}.sd-t b{font-size:15px}.sd-t b{font-size:14.5px}.sdc{min-height:112px;grid-template-columns:40px minmax(0,1fr) 38%;padding:16px 14px;gap:10px}.sd-gi{width:40px;height:40px}.sp-art{display:none}.sd-pr .spr small{max-width:none}}


.mp-shapes a{padding:12px 8px 12px!important;gap:10px!important;border-color:var(--line)!important;background:#fff!important}
.mp-shapes a>svg.wl{width:100%!important;height:96px!important;padding:6px 4px;border-radius:12px;fill:none!important;stroke:none!important;background:radial-gradient(70% 80% at 50% 45%,var(--accent-navy3),var(--accent-navy2) 75%);box-shadow:inset 0 0 0 1px rgba(var(--glow-rgb),.25)}
.wl .hs{fill:#232c3a}
.wl .fn{fill:none;stroke:#6b7a90;stroke-width:1.6}
.wl .gl{fill:var(--accent-bd);opacity:.22}
.wl .ld{fill:#fff;filter:drop-shadow(0 0 2.5px var(--accent-glow)) drop-shadow(0 0 5px var(--accent-lt))}
.wl .bk{fill:#2b3442;stroke:#495466;stroke-width:1}
.mp-shapes a b{font-size:14px}
.mp-shapes a:hover{border-color:rgba(var(--accent-rgb),.5)!important;box-shadow:0 16px 30px -20px rgba(var(--accent-rgb),.8)!important;transform:translateY(-2px)}
.mp-shapes a:hover svg.wl{background:radial-gradient(70% 80% at 50% 45%,var(--accent-2),var(--accent-navy) 75%)}
.mp-shapes a:hover .wl .gl{opacity:.32}
.d-shp a>svg.wl{height:64px!important}

/* прості категорії: одразу перехід, справа — огляд групи */
.mm-c button.go>svg:last-child,.sd-c button.go>svg:last-child{color:var(--accent)!important;width:15px;height:15px}
.d-cat>svg:last-child{flex:none}
.gv-h{position:relative;display:flex;justify-content:space-between;align-items:flex-start;padding:26px 32px 14px}
.gv-h h3{margin:6px 0 0;font-size:26px;font-weight:900;letter-spacing:-.02em}
.gv-h .mm-x{position:absolute;top:18px;right:18px}
.gv{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px;padding:4px 32px 28px;flex:1;align-content:start}
.gv-c{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px;border-radius:18px;border:1px solid var(--line);background:#fff;overflow:hidden;isolation:isolate;transition:.2s}
.gv-c::before{content:"";position:absolute;left:50%;top:70px;width:220px;height:170px;transform:translate(-50%,-50%);z-index:-1;background:radial-gradient(closest-side,rgba(var(--accent-rgb),.13),transparent)}
.gv-im{height:118px;display:grid;place-items:center;margin-bottom:6px}
.gv-im img{max-width:100%;max-height:118px;object-fit:contain;filter:drop-shadow(0 14px 16px rgba(10,30,80,.25));transition:transform .3s}
.gv-im svg{width:40px;height:40px;fill:none;stroke:var(--accent);stroke-width:1.6}
.gv-c b{font-size:16px;line-height:1.2}.gv-c small{font-size:12.5px;color:var(--fg-3)}
.gv-go{position:absolute;right:12px;bottom:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent);transition:.2s}.gv-go svg{width:15px;height:15px}
.gv-c:hover,.gv-c.on{border-color:rgba(var(--accent-rgb),.45);box-shadow:0 18px 36px -24px rgba(var(--accent-rgb),.7)}
.gv-c.on{background:linear-gradient(180deg,var(--accent-tint),#fff)}
.gv-c:hover .gv-im img,.gv-c.on .gv-im img{transform:scale(1.06)}
.gv-c:hover .gv-go,.gv-c.on .gv-go{background:var(--accent);color:#fff}
.sd-p .gv-h{padding:22px 26px 10px}.sd-p .gv{padding:4px 26px 24px}.sd-p .gv-im{height:96px}.sd-p .gv-im img{max-height:96px}
@media(max-width:1400px){.gv{--n:2!important}.gv-im{height:90px}.gv-im img{max-height:90px}.gv-h h3{font-size:22px}}


/* фото банерів груп: 1× / 2× */
.mm-ban a{--bg:var(--b1)}
@media (min-resolution:1.5dppx){.mm-ban a{--bg:var(--b2,var(--b1))}}
.sd-t b,.hc-c b,.mm-l button b{hyphens:manual;-webkit-hyphens:manual}
/* живий пошук: блок «Категорії та фільтри» */
.sr-lk .sr-cats a{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;padding:9px 12px;background:var(--accent-tint2);border:1px solid rgba(var(--accent-rgb),.14)}
.sr-lk .sr-cats a b{grid-column:1;grid-row:1;font-weight:700;color:var(--fg);line-height:1.25}
.sr-lk .sr-cats a em{grid-column:1;grid-row:2;white-space:nowrap}
.sr-lk .sr-cats a svg{grid-column:2;grid-row:1/3;width:15px;height:15px;color:var(--accent)}
.sr-lk .sr-cats a:hover{background:var(--accent);color:#fff}
.sr-lk .sr-cats a:hover b,.sr-lk .sr-cats a:hover em,.sr-lk .sr-cats a:hover svg{color:#fff}
/* низьке вікно: меню не вище за екран, права панель прокручується всередині, низ меню лишається видимим */
.mega .mm{max-height:calc(100vh - 190px)}
.mega .mm-r{max-height:calc(100vh - 190px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.mega .mm-r .mm-foot{position:sticky;bottom:0;background:#fff;z-index:2}
.mega .mm-l{max-height:calc(100vh - 215px)}
.mega .mm{min-height:0}.mega .mm-r{min-height:0}

/* прості категорії в кінці групи: розділювач, перехід без правої панелі */
.mm-c button.go,.sd-c button.go{min-height:48px!important}
.mm-c button.go .mm-ph,.sd-c button.go .mm-ph{width:44px!important;height:36px}
.mm-c button.go b,.sd-c button.go b{font-weight:600!important;font-size:14.5px!important}
.mm-c button.go:hover,.sd-c button.go:hover{background:#fff!important;border-color:rgba(var(--accent-rgb),.25)!important}
.mm-c button.go:hover>svg:last-child{transform:translateX(3px)}
.mm-sep{list-style:none;height:1px;margin:8px 10px;background:var(--line)}
.mm.mm3.nopan{grid-template-columns:280px 310px 0!important;max-width:592px!important;margin-left:max(0px,calc((100% - 1480px)/2))}
.mm.mm3.nopan #mmR{display:none}
.mm.mm3.nopan #mmC{border-right:0}
.sdf.nopan{grid-template-columns:290px 0!important;width:292px!important}
.sdf.nopan .sd-p{display:none}
.mm-c button.go[aria-selected="true"],.sd-c button.go[aria-selected="true"]{background:#fff!important;border-color:rgba(var(--accent-rgb),.25)!important}
.mm-c button.go[aria-selected="true"] b,.sd-c button.go[aria-selected="true"] b{color:var(--accent)!important}
.mm-c button.go[aria-selected="true"]::before,.sd-c button.go[aria-selected="true"]::before{opacity:0!important}