/* Hallmark · component: category navigation · existing Aleksiev tokens.
 * Pre-emit critique: P4 H4 E4 S4 R5 V4 */
.storefront-page > .catalog-layout { width:90%; max-width:1440px; margin:0 auto; padding:24px 0 40px; display:grid; grid-template-columns:264px minmax(0,1fr); gap:24px; align-items:start; }
.catalog-sidebar { min-width:0; position:sticky; top:100px; z-index:20; }
.catalog-category-panel { position:relative; inset:auto; width:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; border-right:1px solid var(--ui-rule); background:var(--ui-paper); color:var(--ui-ink); overflow:visible; }
.category-panel-header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px; }
.category-panel-header h2,.catalog-subcategories h2 { font-family:var(--ui-font-heading); font-size:18px; margin:0; letter-spacing:0; }
.category-navigation { max-height:calc(100dvh - 182px); overflow:auto; overscroll-behavior:contain; padding:0 6px 8px; }
.category-tree,.category-subgrid,.category-descendants { list-style:none; padding:0; margin:0; }
.category-root-row { display:flex; align-items:center; border-left:3px solid transparent; border-radius:4px; }
.category-root-row[data-active],.category-root-row:has([aria-expanded="true"]),.category-root-row:hover { background:color-mix(in srgb,var(--clr-accent) 13%,var(--ui-paper)); border-left-color:var(--clr-accent); }
.category-picture-link { display:flex; align-items:center; gap:10px; min-width:0; min-height:52px; padding:6px; color:var(--ui-ink); text-decoration:none; font-size:14px; font-weight:600; line-height:1.35; }
.category-root-row > a { flex:1; }
.category-picture-link span { min-width:0; overflow-wrap:anywhere; }
.category-picture { display:block; width:40px; height:40px; flex:0 0 40px; object-fit:contain; }
.category-picture[src$=".svg"] { padding:6px; background:transparent; }
.category-expand { display:flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; min-height:44px; border:0; background:transparent; color:var(--ui-ink); cursor:pointer; border-radius:4px; }
.category-expand img { transition:transform 160ms ease; }
.category-expand[aria-expanded="true"] img { transform:rotate(90deg); }
.category-all {
  --category-glass-ink:#12452e;
  --category-glass-fill:rgba(151,224,181,.7);
  --category-glass-edge:rgba(40,126,77,.55);
  display:flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:100%; min-height:52px; margin:8px 0 14px; padding:12px 8px;
  border:1px solid var(--category-glass-edge); border-radius:8px;
  background:linear-gradient(165deg,rgba(255,255,255,.62),rgba(255,255,255,0) 65%),var(--category-glass-fill);
  -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
  color:var(--category-glass-ink); font-size:14px; font-weight:700; line-height:1.4;
  letter-spacing:0; text-align:center; text-decoration:none; overflow-wrap:anywhere;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(40,126,77,.12),0 4px 10px rgba(22,101,52,.15);
  transition:transform 180ms ease,box-shadow 180ms ease,background-color 180ms ease;
  touch-action:manipulation;
}
.category-all[aria-current] { border-color:var(--category-glass-ink); }
@media (hover:hover) and (pointer:fine) {
  .category-all:hover { transform:translateY(-2px); background-color:rgba(126,215,161,.85); box-shadow:inset 0 1px 0 #fff,0 7px 14px rgba(22,101,52,.24); }
}
.category-all:active { transform:translateY(0) scale(.98); box-shadow:inset 0 1px 3px rgba(22,101,52,.18),0 2px 4px rgba(22,101,52,.12); }
@media (prefers-reduced-motion:reduce) { .category-all { transition:none; } .category-all:hover,.category-all:active { transform:none; } }
@media (prefers-reduced-transparency:reduce), (prefers-contrast:more) {
  .category-all { background:#d5f2df; -webkit-backdrop-filter:none; backdrop-filter:none; border-color:var(--category-glass-ink); }
}
@media (forced-colors:active) { .category-all { color:LinkText; border-color:LinkText; box-shadow:none; } }
.category-flyout { position:absolute; left:calc(100% - 1px); top:var(--flyout-top,0px); z-index:2; width:min(760px,calc(90vw - 264px)); max-height:var(--flyout-max-height,calc(100dvh - 120px)); overflow:auto; overscroll-behavior:contain; padding:16px; border:1px solid var(--ui-rule); border-top:3px solid var(--clr-accent); border-radius:0 8px 8px 0; background:var(--ui-paper); box-shadow:0 14px 30px color-mix(in srgb,var(--clr-primary) 12%,transparent); animation:category-reveal 160ms ease; }
.category-flyout-bridge { position:absolute; z-index:1; background:transparent; }
.category-flyout-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.category-flyout-header > a { color:var(--ui-ink); font-size:15px; font-weight:700; min-height:44px; display:flex; align-items:center; text-underline-offset:4px; overflow-wrap:anywhere; }
.category-subgrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.category-subgrid > .category-subnode { min-width:0; border:1px solid var(--ui-rule); border-radius:6px; padding:6px; background:var(--ui-paper); }
.category-subgrid > .category-subnode:hover { border-color:var(--clr-accent); }
.category-subgrid .category-picture-link { min-height:68px; }
.category-descendants { padding-left:8px; border-left:1px solid var(--ui-rule); margin:4px 0 0 10px; }
.category-descendants .category-picture-link { min-height:44px; font-size:13px; font-weight:400; }
.category-descendants .category-picture { width:28px; height:28px; flex-basis:28px; }
.category-descendants .category-picture[src$=".svg"] { padding:3px; }
.category-picture-link[aria-current] { text-decoration:underline; text-decoration-color:var(--clr-accent); text-decoration-thickness:2px; text-underline-offset:4px; }
.category-close { flex:0 0 44px; width:44px; height:44px; border:0; background:transparent; color:var(--ui-ink); font-size:28px; cursor:pointer; }
.catalog-filter-toggle { min-height:44px; padding:10px 16px; border:1px solid var(--clr-primary); border-radius:8px; font:inherit; font-weight:600; background:var(--clr-primary); color:var(--ui-paper); cursor:pointer; }
.catalog-category-panel :is(a,button):focus-visible,.catalog-filter-toggle:focus-visible,.category-breadcrumbs a:focus-visible,.catalog-subcategories a:focus-visible { outline:3px solid var(--ui-focus); outline-offset:2px; }
.catalog-category-panel [hidden],.catalog-filter-toggle[hidden] { display:none; }
.catalog-results { min-width:0; }
.catalog-subcategories { margin-bottom:24px; }
.catalog-subcategories h2 { margin-bottom:14px; }
.category-breadcrumbs { margin-bottom:18px; color:var(--ui-muted); font-size:13px; line-height:1.5; }
.category-breadcrumbs ol { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; list-style:none; margin:0; padding:0; }
.category-breadcrumbs li { min-width:0; overflow-wrap:anywhere; }
.category-breadcrumbs li + li::before { content:"/"; padding-right:8px; color:var(--ui-muted); }
.category-breadcrumbs a { display:inline-block; padding:8px 0; color:var(--ui-ink); text-underline-offset:4px; }
.catalog-results-summary { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px; color:var(--ui-muted); font-size:14px; }
.catalog-active-filters { display:flex; flex-wrap:wrap; gap:8px; }
.catalog-active-filters a { display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 12px; border:1px solid var(--ui-rule); border-radius:6px; color:var(--ui-ink); background:var(--ui-paper); text-decoration:none; overflow-wrap:anywhere; }
.catalog-results .catalog-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.catalog-empty-results { padding:48px 16px; text-align:center; color:var(--ui-muted); }
.catalog-empty-results a { display:inline-flex; align-items:center; min-height:44px; color:var(--ui-ink); }
.category-empty { padding:12px; font-size:14px; }
@keyframes category-reveal { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .category-flyout { animation:none; } .category-expand img { transition:none; } }
@media (max-width:1100px) { .catalog-results .catalog-grid,.category-subgrid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) {
  .storefront-page > .catalog-layout { grid-template-columns:minmax(0,1fr); gap:16px; }
  .catalog-sidebar { position:static; z-index:auto; }
  .catalog-category-panel { border-right:0; overflow:auto; }
  .catalog-category-panel:modal { position:fixed; inset:0; margin:auto; width:calc(100% - 24px); max-width:480px; height:min(720px,85dvh); max-height:85dvh; border:1px solid var(--ui-rule); border-radius:8px; overscroll-behavior:contain; padding-bottom:env(safe-area-inset-bottom); }
  .catalog-category-panel::backdrop { background:color-mix(in srgb,var(--ui-ink) 40%,transparent); }
  .catalog-category-panel:modal .category-panel-header { position:sticky; top:0; z-index:1; background:var(--ui-paper); border-bottom:1px solid var(--ui-rule); }
  .category-navigation { max-height:none; overflow:visible; }
  .category-flyout-bridge { display:none; }
  .category-expand { width:44px; flex-basis:44px; }
  .category-flyout { position:static; width:auto; max-height:none; overflow:visible; padding:8px 8px 12px; margin-left:12px; border:0; border-left:2px solid var(--clr-accent); border-radius:0; box-shadow:none; animation:none; }
  .category-flyout .category-subgrid { grid-template-columns:minmax(0,1fr); gap:0; }
  .category-flyout .category-subnode { border:0; padding:0; }
  .category-flyout .category-picture-link { min-height:48px; }
  .category-flyout-header { margin:0; }
  .category-flyout-header > a { font-size:13px; }
  .category-breadcrumbs a { min-height:44px; display:inline-flex; align-items:center; }
}
@media (max-width:414px) { .catalog-subcategories > .category-subgrid { grid-template-columns:minmax(0,1fr); } }