@layer components{.catalog{padding:28px 0 56px}.catalog .breadcrumb{font-size:13px;color:var(--muted);margin-bottom:18px}.catalog .breadcrumb,.catalog .breadcrumb ol{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.catalog .breadcrumb ol{margin:0;padding:0;list-style:none}.catalog .breadcrumb li{display:inline-flex;align-items:center;gap:8px}.catalog .breadcrumb a{color:var(--muted);transition:color .15s}.catalog .breadcrumb a:hover{color:var(--ink)}.catalog .breadcrumb .sep{color:var(--line)}.catalog .breadcrumb [aria-current]{color:var(--ink);font-weight:600}.cat-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:24px}.cat-head h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.03em;font-weight:900;margin:0 0 6px;display:flex;align-items:center;gap:12px}.cat-head h1 .bar{display:inline-block;width:9px;height:32px;background:var(--accent);border-radius:3px;flex-shrink:0}.cat-head h1 em{font-style:normal;color:var(--accent-ink);background:var(--accent);padding:0 8px;border-radius:6px;min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.cat-head .count{font-family:var(--mono);font-size:13.5px;color:var(--muted);font-weight:600}.cat-head .count b{color:var(--ink)}.cat-head .sub{font-size:14px;color:var(--muted);margin:6px 0 0;max-width:60ch}.state-toggle{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);box-shadow:var(--shadow)}.state-toggle .lbl{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 8px 0 10px;align-self:center}.state-toggle button{font-size:12.5px;font-weight:700;color:var(--muted);background:transparent;padding:7px 13px;border-radius:999px;min-height:34px;transition:background .15s,color .15s}.state-toggle button:hover{color:var(--ink)}.state-toggle button.is-on{background:var(--ink);color:var(--bg)}.layout{display:grid;grid-template-columns:264px 1fr;gap:28px;align-items:start}.sidebar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px 18px 18px;box-shadow:var(--shadow);position:sticky;top:96px}.filter-group{padding:18px 0;border-bottom:1px solid var(--line)}.filter-group:last-child{border-bottom:none}.filter-group h3{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}.cat-list a,.cat-list button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;background:transparent;border:none;font-size:13.5px;font-weight:600;color:var(--ink);padding:8px 10px;border-radius:8px;min-height:36px;transition:background .15s}.cat-list a:hover,.cat-list button:hover{background:var(--surface-hi)}.cat-list a.is-active,.cat-list button.is-active{background:var(--surface-hi);font-weight:800}.cat-list a .n,.cat-list button .n{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:600}.check{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);padding:7px 4px;min-height:38px;cursor:pointer;border-radius:8px}.check:hover{background:var(--surface-hi)}.check input{width:18px;height:18px;accent-color:var(--ink);flex-shrink:0;cursor:pointer}.check .n{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:600}.show-more{margin-top:6px;font-size:12.5px;font-weight:700;color:var(--ink);background:transparent;padding:6px 4px;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:2px}.price-row{display:flex;align-items:center;gap:8px}.filter-group input[type=number]{width:100%;min-width:0;padding:10px 11px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:13.5px;font-family:var(--mono);font-weight:600;color:var(--ink);transition:border-color .15s,box-shadow .15s}.filter-group input[type=number]:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,213,0,.5);outline:none}.price-row .dash{color:var(--muted);font-weight:700;flex-shrink:0}.price-apply{margin-top:10px;width:100%;min-height:40px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:13.5px;border-radius:var(--r);transition:.15s}.price-apply:hover{background:var(--accent-600)}.toggle-line{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;cursor:pointer}.toggle-line .tl-txt{font-size:13.5px;font-weight:600;color:var(--ink)}.toggle-line .tl-txt small{display:block;font-size:12px;font-weight:500;color:var(--muted)}.toggle-switch{position:relative;width:42px;height:24px;border-radius:999px;background:#d1d5db;flex-shrink:0;transition:background .15s}.toggle-switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}.toggle-line input{position:absolute;opacity:0;width:0;height:0}.toggle-line input:checked+.toggle-switch{background:var(--ok)}.toggle-line input:checked+.toggle-switch:after{transform:translateX(18px)}.toggle-line input:focus-visible+.toggle-switch{outline:3px solid var(--ink);outline-offset:2px}.size-chips{display:flex;flex-wrap:wrap;gap:8px}.size-chip{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:40px;padding:0 12px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:13px;font-weight:800;color:var(--ink);transition:border-color .15s,background .15s,color .15s}.size-chip.is-on,.size-chip:hover{border-color:var(--ink)}.size-chip.is-on{background:var(--ink);color:var(--bg)}.size-chip[aria-pressed=true]{box-shadow:0 0 0 2px rgba(255,213,0,.6)}.swatches{display:flex;flex-wrap:wrap;gap:10px}.swatch{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:4px;background:transparent;padding:2px;border-radius:10px}.swatch .dot{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);box-shadow:inset 0 0 0 2px #fff;transition:transform .12s}.swatch .lbl{font-size:11px;font-weight:600;color:var(--muted)}.swatch:hover .dot{transform:scale(1.08)}.swatch.is-on .dot{border-color:var(--ink);box-shadow:inset 0 0 0 2px #fff,0 0 0 2px var(--ink)}.swatch.is-on .lbl{color:var(--ink);font-weight:800}.clear-filters{display:inline-flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:42px;margin-top:6px;border:1px solid var(--line);border-radius:var(--r);background:transparent;color:var(--ink);font-weight:700;font-size:13.5px;transition:border-color .15s}.clear-filters:hover{border-color:var(--ink)}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;box-shadow:var(--shadow);margin-bottom:18px}.toolbar .results{font-size:13.5px;color:var(--muted);font-weight:600}.toolbar .results b{color:var(--ink)}.sort-wrap{display:flex;align-items:center;gap:10px}.sort-wrap label{font-size:13px;font-weight:700;color:var(--muted)}.sort-sel{position:relative}.sort-sel select{appearance:none;-webkit-appearance:none;padding:9px 34px 9px 13px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:13.5px;font-weight:700;color:var(--ink);cursor:pointer;min-height:40px;transition:border-color .15s,box-shadow .15s}.sort-sel select:hover{border-color:var(--muted)}.sort-sel select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,213,0,.5);outline:none}.sort-sel:after{content:"";position:absolute;right:13px;top:50%;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-65%) rotate(45deg);pointer-events:none}.drawer-btn{display:inline-flex;align-items:center;gap:8px;padding:0 14px;min-height:42px;border:1.5px solid var(--ink);border-radius:var(--r);background:var(--surface);color:var(--ink);font-weight:700;font-size:13.5px}.drawer-btn .fc{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-size:11px;font-weight:800;padding:0 4px}.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}.filter-chip button{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;color:var(--muted);transition:background .15s,color .15s}.filter-chip button:hover{background:var(--surface-hi);color:var(--ink)}.pager{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:34px;flex-wrap:wrap}.pager a,.pager button.page,.pager span.page{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);font-size:14px;font-weight:700;color:var(--ink);font-family:var(--mono);transition:border-color .15s}.pager a:hover,.pager button.page:hover{border-color:var(--ink)}.pager button.page.is-active,.pager span.page.is-active{background:var(--ink);color:var(--bg);border-color:var(--ink)}.pager .gap{color:var(--muted);font-weight:700;padding:0 4px}.pager .nav-arrow{gap:6px;font-family:inherit}.pager .nav-arrow:disabled{opacity:.4;cursor:not-allowed}.empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:var(--r-lg);padding:54px 24px;box-shadow:var(--shadow)}.empty-state .mascot{width:96px;height:96px;margin-bottom:18px;object-fit:contain}.empty-state h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}.empty-state p{font-size:14.5px;color:var(--muted);margin:0 0 22px;max-width:42ch}.empty-state .es-clear{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:14px;padding:12px 22px;border-radius:var(--r);min-height:44px;transition:.15s}.empty-state .es-clear:hover{background:var(--accent-600)}.skeleton-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.skeleton{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}.sk-media{aspect-ratio:1/1;border-bottom:1px solid var(--line)}.sk-body{padding:15px 16px 16px;display:flex;flex-direction:column;gap:10px}.sk-line{height:12px;border-radius:6px}.sk-shimmer{background:linear-gradient(90deg,#eef0f2,#f6f7f8 50%,#eef0f2);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.subcat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.subcat{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px;min-height:74px;transition:transform .16s,box-shadow .16s,border-color .16s}.subcat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--line-hi)}.subcat__ico{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:var(--bg);color:var(--ink);display:grid;place-items:center;transition:background .16s,color .16s}.subcat:hover .subcat__ico{background:var(--accent);color:var(--accent-ink)}.subcat__ico svg{display:block}.subcat__text{min-width:0}.subcat__name{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.25}.subcat__count{font-size:12.5px;color:var(--muted);font-weight:600;font-family:var(--mono);margin-top:2px}.brandband{background:var(--surface);border-bottom:1px solid var(--line);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--shadow);margin-bottom:24px}.brandband__inner{padding:30px 24px;display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap}.brand-logo{flex-shrink:0;width:104px;height:104px;border-radius:var(--r-lg);background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;box-shadow:var(--shadow);overflow:hidden}.brand-logo .brand-mark{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--ink);text-align:center;padding:0 8px;line-height:1.15;text-transform:uppercase}.brandband__main{flex:1 1 320px;min-width:0}.brand-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}.brand-eyebrow svg{color:var(--ok)}.brandband h1{font-size:clamp(30px,4.6vw,42px);letter-spacing:-.03em;font-weight:900;margin:0 0 8px;line-height:1.05}.brandband .desc{color:var(--muted);font-size:15.5px;margin:0 0 6px;max-width:62ch;line-height:1.55}.brand-count{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--ink);font-family:var(--mono);margin:6px 0 0}.hl-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.hl-chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);padding:7px 13px;border-radius:999px;line-height:1.2}.hl-chip svg{flex-shrink:0;color:var(--ok)}.compare .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:18px 0 26px}.compare .page-head h1{font-size:clamp(26px,3.6vw,38px);letter-spacing:-.025em;font-weight:800;margin:0;display:flex;align-items:center;gap:13px}.compare .page-head h1 .bar{display:inline-block;width:8px;height:32px;background:var(--accent);border-radius:3px}.compare .page-head__sub{margin:8px 0 0 21px;color:var(--muted);font-size:14.5px}.slots-count{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 14px;white-space:nowrap}.slots-count .num{color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:1px 8px;font-weight:800}.cmp-wrap{overflow-x:auto;overflow-y:visible;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}.cmp{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;table-layout:fixed}.cmp col.col-label{width:190px}.cmp col.col-prod{width:240px}.cmp td,.cmp th{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}.cmp td:last-child,.cmp th:last-child{border-right:none}.cmp tbody tr:last-child .cmp__cell,.cmp tbody tr:last-child .cmp__rowlabel{border-bottom:none}.cmp__rowlabel{position:sticky;left:0;z-index:3;background:var(--bg);font-size:13px;font-weight:700;color:var(--ink);padding:14px 16px}.cmp__rowlabel .hint{display:block;font-size:12px;font-weight:500;color:var(--muted);margin-top:2px}.cmp tbody tr:nth-child(odd) .cmp__rowlabel{background:#f3f3f2}.cmp tbody tr:nth-child(odd) .cmp__cell{background:#fafafa}.cmp thead th{position:sticky;top:0;z-index:5}.cmp__corner{position:sticky;left:0;top:0;z-index:6;background:var(--surface)}.cmp__producthead{background:var(--surface);padding:0}.cmp__product{position:relative;padding:18px 16px 16px;display:flex;flex-direction:column;gap:9px;height:100%}.cmp__remove{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:8px;background:hsla(0,0%,100%,.92);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);transition:color .15s,background .15s,border-color .15s}.cmp__remove:hover{color:var(--sale);background:#fff;border-color:var(--sale)}.cmp__media{aspect-ratio:1/1;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;justify-content:center;padding:14px;position:relative;overflow:hidden}.cmp__media .ph-label{position:absolute;bottom:8px;left:8px;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--muted)}.cmp__brand{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.cmp__name{font-size:14.5px;font-weight:700;line-height:1.35;margin:0;color:var(--ink)}.cmp__name a:hover{color:var(--muted)}.cmp__price{font-family:var(--mono);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}.cmp__addcart{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin-top:auto;background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:14px;border-radius:10px;transition:transform .12s,box-shadow .15s}.cmp__addcart:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,213,0,.45)}.cmp__addcart:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed;transform:none;box-shadow:none}.cmp__cell{padding:14px 16px;font-size:13.5px;color:var(--ink-soft);background:var(--surface)}.cmp__cell .strong,.cmp__cellprice{font-weight:700;color:var(--ink)}.cmp__cellprice{font-family:var(--mono);font-size:17px}.cmp tbody tr:nth-child(odd) .cmp__cell.is-diff,.cmp__cell.is-diff{background:var(--surface-hi)}.cmp-actions{justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:18px}.cmp-actions,.cmp-note{display:flex;align-items:center}.cmp-note{gap:9px;font-size:13px;color:var(--muted)}.cmp-note svg{color:var(--ok);flex-shrink:0}.cmp-empty{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:54px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.cmp-empty .mascot{width:96px;height:96px;margin-bottom:8px;object-fit:contain}.cmp-empty h2{font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.02em;margin:0}.cmp-empty p{color:var(--muted);font-size:15px;max-width:46ch;margin:6px 0 4px}@media (max-width:1024px){.catalog-grid,.skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.layout{grid-template-columns:228px 1fr;gap:20px}.subcat-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:860px){.layout{grid-template-columns:1fr}.subcat-grid{grid-template-columns:repeat(2,1fr)}.state-toggle .lbl{display:none}}@media (max-width:600px){.catalog-grid,.skeleton-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.cat-head{flex-direction:column;align-items:flex-start}.subcat-grid{grid-template-columns:1fr}}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.sk-shimmer{animation:none}}:root[data-theme=dark] .drawer-btn,:root[data-theme=dark] .empty-state,:root[data-theme=dark] .filter-group input[type=number],:root[data-theme=dark] .pager a,:root[data-theme=dark] .pager button.page,:root[data-theme=dark] .pager span.page,:root[data-theme=dark] .sidebar,:root[data-theme=dark] .size-chip,:root[data-theme=dark] .sort-sel select,:root[data-theme=dark] .state-toggle,:root[data-theme=dark] .swatch,:root[data-theme=dark] .toolbar{background:var(--surface)}:root[data-theme=dark] .sort-sel select{color:var(--ink)}:root[data-theme=dark] .toolbar{background:var(--surface)}:root[data-theme=dark] .cat-list a:hover,:root[data-theme=dark] .cat-list button:hover{background:hsla(0,0%,100%,.07)}:root[data-theme=dark] .cat-list a.is-active,:root[data-theme=dark] .cat-list button.is-active{background:var(--surface-2)}:root[data-theme=dark] .size-chip:hover{border-color:var(--ink)}:root[data-theme=dark] .size-chip.is-on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}:root[data-theme=dark] .filter-group input[type=number]{color:var(--ink)}:root[data-theme=dark] .pager a:hover{border-color:var(--ink)}:root[data-theme=dark] .pager button.page.is-active,:root[data-theme=dark] .pager span.page.is-active{background:var(--ink);color:var(--bg)}:root[data-theme=dark] .skeleton{background:var(--surface)}:root[data-theme=dark] .sk-shimmer{background:linear-gradient(90deg,var(--surface-2) 0,#2e2e2e 50%,var(--surface-2) 100%)}:root[data-theme=dark] .state-toggle button.is-on{background:var(--ink);color:var(--bg)}:root[data-theme=dark] .drawer-btn{background:var(--surface)}:root[data-theme=dark] .subcat__ico,:root[data-theme=dark] .toggle-switch{background:var(--surface-2)}:root[data-theme=dark] .brandband{background:var(--surface)}:root[data-theme=dark] .brand-logo,:root[data-theme=dark] .hl-chip{background:var(--surface-2)}:root[data-theme=dark] .cmp,:root[data-theme=dark] .cmp__cell{background:var(--surface)}:root[data-theme=dark] .cmp__rowlabel{background:var(--surface-2)}:root[data-theme=dark] .cmp tbody tr:nth-child(odd) .cmp__cell{background:#202020}:root[data-theme=dark] .cmp tbody tr:nth-child(odd) .cmp__rowlabel{background:#2a2a2a}:root[data-theme=dark] .cmp__corner,:root[data-theme=dark] .cmp__producthead{background:var(--surface)}:root[data-theme=dark] .cmp__remove{background:rgba(26,26,26,.9)}:root[data-theme=dark] .cmp__remove:hover{background:var(--surface)}:root[data-theme=dark] .cmp__media .ph-label{color:hsla(0,0%,96%,.4)}:root[data-theme=dark] .cmp tbody tr:nth-child(odd) .cmp__cell.is-diff,:root[data-theme=dark] .cmp__cell.is-diff{background:var(--surface-2)}:root[data-theme=dark] .cmp-empty{background:var(--surface)}