.category-layer, .mobile-menu-layer { position: fixed; z-index: var(--z-110); inset: 0; visibility: hidden; pointer-events: none; }
.category-layer.is-open, .mobile-menu-layer.is-open { visibility: visible; pointer-events: auto; }
.category-overlay, .navigation-overlay { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(3,10,6,.42); opacity: 0; cursor: default; transition: opacity .24s ease; }
.category-layer.is-open .category-overlay, .mobile-menu-layer.is-open .navigation-overlay { opacity: 1; }
.category-panel { --category-panel-top: calc(var(--jaroni-header-height) + 8px); position: absolute; top: var(--category-panel-top); left: 50%; width: min(calc(100% - 40px),var(--container-width)); min-height: 390px; padding: var(--space-24); overflow: hidden; background: white; border: 1px solid var(--jaroni-border); border-radius: var(--radius-20); box-shadow: var(--jaroni-shadow); opacity: 0; visibility: hidden; transform: translate(-50%,-9px); transition: opacity .24s ease,visibility .24s ease,transform .24s ease; }
.category-layer.is-open .category-panel { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.category-panel__header { display: flex; align-items: center; justify-content: space-between; min-height: 54px; margin: -8px 0 15px; padding-bottom: var(--space-14); border-bottom: 1px solid var(--jaroni-border); }
.category-panel__header > div { display: grid; }
.category-panel__header span, .category-detail__panel > span { color: var(--jaroni-green); font-size: .64rem; font-weight: var(--font-weight-850); letter-spacing: .14em; text-transform: uppercase; }
.category-panel__header strong { margin-top: var(--space-2); font-size: 1.1rem; }
.category-panel__close { color: var(--jaroni-dark); font-size: 1.6rem; }
.category-panel__layout { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: var(--space-34); }
.category-sidebar { padding-right: var(--space-22); border-right: 1px solid var(--jaroni-border); }
.category-sidebar button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 43px; padding: var(--space-8) var(--space-12); color: var(--jaroni-gray); border: 0; border-radius: var(--radius-10); background: transparent; font-size: var(--text-sm); font-weight: var(--font-weight-680); text-align: left; cursor: pointer; transition: color var(--duration-fast),background var(--duration-fast),transform var(--duration-fast); }
.category-sidebar button:hover, .category-sidebar button.is-active { color: var(--jaroni-dark); background: var(--jaroni-light); transform: translateX(3px); }
.category-sidebar button.is-active { box-shadow: inset 4px 0 var(--jaroni-yellow); }
.category-sidebar b { font-size: 1.15rem; font-weight: var(--font-regular); }
.category-detail { position: relative; min-height: 260px; }
.category-detail__panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(7px); transition: opacity var(--duration-normal),visibility var(--duration-normal),transform var(--duration-normal); }
.category-detail__panel.is-active { opacity: 1; visibility: visible; transform: none; }
.category-detail__panel h2 { margin: var(--space-7) 0 23px; font-size: clamp(1.8rem,4vw,2.7rem); letter-spacing: -.045em; }
.subcategory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-11); }
.subcategory-grid a { display: flex; align-items: center; min-height: 56px; padding: var(--space-12) var(--space-16); color: var(--jaroni-dark); background: var(--jaroni-light); border: 1px solid transparent; border-radius: var(--radius-12); font-size: var(--text-sm); font-weight: var(--font-weight-720); transition: color var(--duration-fast),border-color var(--duration-fast),background var(--duration-fast),transform var(--duration-fast); }
.subcategory-grid a::after { margin-left: auto; color: var(--jaroni-red); content: "→"; }
.subcategory-grid a:hover { color: var(--jaroni-green); background: white; border-color: rgba(0,166,81,.25); transform: translateY(-2px); }
.mobile-menu-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw,360px); padding: 0 var(--space-24) var(--space-28); overflow-y: auto; color: var(--jaroni-dark); background: white; box-shadow: 25px 0 70px rgba(0,0,0,.2); transform: translateX(-105%); transition: transform .26s cubic-bezier(.2,.72,.25,1); }
.mobile-menu-layer.is-open .mobile-menu-panel { transform: none; }
.mobile-menu__header { display: flex; align-items: center; justify-content: space-between; min-height: 76px; border-bottom: 1px solid var(--jaroni-border); }
.mobile-menu__brand { display: inline-flex; align-items: center; gap: var(--space-9); }
.mobile-menu__brand img { width: 42px; height: 42px; object-fit: contain; }
.mobile-menu__brand strong { letter-spacing: .05em; }
.mobile-menu__shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); padding: var(--space-14) 0 var(--space-2); }
.mobile-menu__shortcuts :is(a, button) { display: flex; align-items: center; gap: var(--space-8); min-height: 42px; padding: var(--space-8) var(--space-10); color: var(--jaroni-dark); border: 1px solid var(--jaroni-border); border-radius: var(--radius-4); background: white; font-size: var(--text-xs); font-weight: var(--font-weight-720); cursor: pointer; }
.mobile-menu__shortcuts :is(a, button):hover { color: var(--jaroni-green); background: var(--jaroni-light); }
.mobile-menu__shortcuts svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.mobile-menu-panel nav { display: grid; padding-block: var(--space-17); }
.mobile-menu-panel nav a, .mobile-menu-panel nav button { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: var(--space-9) var(--space-4); color: var(--jaroni-dark); border: 0; border-bottom: 1px solid var(--jaroni-border); background: transparent; font-size: .88rem; font-weight: var(--font-weight-740); text-align: left; cursor: pointer; }
.mobile-menu-panel nav a:hover, .mobile-menu-panel nav button:hover { color: var(--jaroni-green); }
.mobile-menu__help { display: grid; gap: var(--space-3); margin-top: var(--space-14); padding: var(--space-17); background: var(--jaroni-light); border-left: 4px solid var(--jaroni-yellow); border-radius: var(--radius-11); }
.mobile-menu__help span { color: var(--jaroni-gray); font-size: .67rem; text-transform: uppercase; }
.mobile-menu__help strong,
.mobile-menu__help a { color: var(--jaroni-dark); font-size: var(--text-sm); font-weight: var(--font-bold); text-decoration: none; }
.mobile-menu__help a:hover { color: var(--jaroni-green); }
.mobile-navigation { display: grid; padding-block: var(--space-17); }
.mobile-navigation > a, .mobile-accordion__row { min-height: 50px; }
.mobile-accordion { border-bottom: 1px solid var(--jaroni-border); }
.mobile-accordion__row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: stretch; }
.mobile-menu-panel nav .mobile-accordion__row > a { min-height: 50px; padding-right: var(--space-10); border: 0; }
.mobile-accordion__row > button { width: 48px; min-height: 50px; padding: 0; justify-content: center; border-bottom: 0; border-left: 1px solid var(--jaroni-border); }
.mobile-accordion__row > button span { color: var(--jaroni-gray); font-size: 1.25rem; transition: transform var(--duration-soft) ease; }
.mobile-accordion.is-open .mobile-accordion__row { color: var(--jaroni-green); }
.mobile-accordion.is-open .mobile-accordion__row > button span { transform: rotate(90deg); }
.mobile-navigation a.is-active { color: var(--jaroni-green); }
.mobile-accordion__panel { display: grid; max-height: 0; padding: 0 var(--space-8); overflow: hidden; opacity: 0; transition: max-height .26s ease, opacity var(--duration-normal) ease, padding .26s ease; }
.mobile-accordion.is-open .mobile-accordion__panel { max-height: 380px; padding: var(--space-2) var(--space-8) var(--space-12); opacity: 1; }
.mobile-menu-panel nav .mobile-accordion__panel a { min-height: 40px; padding: var(--space-7) var(--space-12); color: var(--jaroni-gray); border: 0; border-radius: var(--radius-8); font-size: .79rem; font-weight: var(--font-weight-620); }
.mobile-menu-panel nav .mobile-accordion__panel a:hover { color: var(--jaroni-green); background: var(--jaroni-light); }
.mobile-accordion__panel small { margin-left: auto; color: var(--jaroni-red); font-size: .58rem; letter-spacing: .08em; }