/* Right-side category panel, category-linked color field, and mobile drawer. */
#products {
  --category-accent: #d7ee8c;
  --category-shade: #47613b;
  border: 1px solid color-mix(in srgb, var(--category-accent) 25%, var(--line));
  border-radius: 28px;
  padding: 18px 16px 16px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--category-accent) 10%, var(--surface)), var(--surface) 48%);
  transition: background 320ms cubic-bezier(.22,.8,.22,1), border-color 320ms ease, box-shadow 320ms ease;
}
#products .prodhead { border-color: color-mix(in srgb, var(--category-accent) 35%, var(--line)); }
#products .prodhead h2 { color: var(--category-shade); transition: color 320ms ease; }
#products .item { border-color: color-mix(in srgb, var(--category-accent) 28%, var(--line)); transition: transform 260ms cubic-bezier(.22,.8,.22,1), box-shadow 260ms ease, border-color 320ms ease; }
#products .item:hover { border-color: color-mix(in srgb, var(--category-accent) 62%, var(--line)); box-shadow: 0 14px 28px color-mix(in srgb, var(--category-shade) 18%, transparent); }
#products .price-ready { color: var(--category-shade); transition: color 320ms ease; }
#products .quote { background: color-mix(in srgb, var(--category-accent) 30%, var(--surface)); color: var(--category-shade); transition: background 240ms ease, color 240ms ease, transform 180ms ease; }
#products .quote:hover { background: var(--category-accent); color: #172017; }
.category-panel-toggle, .category-drawer-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 11px; font-weight: 800;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--line) 65%, transparent), 0 8px 16px #00000012;
  cursor: pointer; transition: transform 220ms cubic-bezier(.22,.8,.22,1), background 260ms ease, border-color 260ms ease;
}
.category-panel-toggle:hover, .category-drawer-trigger:hover { transform: translateY(-2px); border-color: var(--selected-accent, var(--lime)); }
.category-panel-toggle:focus-visible, .category-drawer-trigger:focus-visible { outline: 3px solid color-mix(in srgb, var(--selected-accent, var(--lime)) 70%, white); outline-offset: 3px; }
.category-panel-toggle svg, .category-drawer-trigger svg { width: 24px; height: 24px; flex: none; }
.category-panel-toggle svg { transition: transform 300ms cubic-bezier(.22,.8,.22,1); }
.category-drawer-trigger, .category-drawer-overlay { display: none; }
.category-sidebar .head-title-row { flex-wrap: wrap; }
.category-panel-toggle { margin-inline-start: auto; }
.category-sidebar { border-color: color-mix(in srgb, var(--selected-accent, var(--lime)) 38%, var(--line)); transition: border-color 320ms ease, box-shadow 320ms ease, transform 340ms cubic-bezier(.2,.85,.25,1); }
:root[data-theme="dark"] #products { background: linear-gradient(155deg, color-mix(in srgb, var(--category-accent) 12%, var(--surface)), var(--surface) 56%); }
:root[data-theme="dark"] #products .prodhead h2 { color: color-mix(in srgb, var(--category-accent) 72%, white); }
:root[data-theme="dark"] #products .price-ready { color: color-mix(in srgb, var(--category-accent) 75%, white); }
:root[data-theme="dark"] #products .quote { background: color-mix(in srgb, var(--category-accent) 24%, #1e2822); color: #edf2e9; }
:root[data-theme="dark"] #products .quote:hover { background: color-mix(in srgb, var(--category-accent) 75%, #172019); }
@media (min-width: 741px) {
  .catalog-layout.is-collapsed { grid-template-columns: 82px minmax(0,1fr); gap: 18px; transition: grid-template-columns 320ms cubic-bezier(.22,.8,.22,1); }
  .catalog-layout.is-collapsed #categories { grid-column: 1; }
  .catalog-layout.is-collapsed #products { grid-column: 2; }
  .category-sidebar.is-collapsed { padding: 12px 8px; }
  .category-sidebar.is-collapsed .head { margin: 0 0 10px; }
  .category-sidebar.is-collapsed .head-title-row { justify-content: center; }
  .category-sidebar.is-collapsed .head-title-row h2, .category-sidebar.is-collapsed .head p,
  .category-sidebar.is-collapsed .liquid-sound-toggle, .category-sidebar.is-collapsed .cat b,
  .category-sidebar.is-collapsed .cat small, .category-sidebar.is-collapsed .cat .count { display: none; }
  .category-sidebar.is-collapsed .category-panel-toggle { margin: 0; padding: 7px; }
  .category-sidebar.is-collapsed .category-panel-toggle svg { transform: rotate(180deg); }
  .category-sidebar.is-collapsed .cats { gap: 8px; }
  .category-sidebar.is-collapsed .cat { display: flex; justify-content: center; min-height: 58px; padding: 5px; }
  .category-sidebar.is-collapsed .cat .icon { width: 48px; height: 48px; }
  .category-sidebar.is-collapsed .cat .icon svg { width: 34px; height: 34px; }
}
@media (max-width: 740px) {
  #products { padding: 15px 10px 12px; border-radius: 22px; }
  .category-drawer-overlay.is-visible { display: block; position: fixed; inset: 0; z-index: 1100; width: 100%; height: 100%; border: 0; background: #07110c9c; backdrop-filter: blur(5px); }
  .category-drawer-trigger { display: inline-flex; position: fixed; right: 16px; left: auto; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 1102; min-height: 50px; padding: 8px 14px; border-color: color-mix(in srgb, var(--selected-accent, var(--lime)) 60%, var(--line)); background: color-mix(in srgb, var(--surface) 92%, var(--selected-accent, var(--lime))); }
  .category-sidebar { position: fixed !important; top: 14px; right: 12px; left: auto; bottom: 14px; z-index: 1101; width: min(350px, calc(100vw - 24px)); max-height: calc(100dvh - 28px); margin: 0 !important; padding: 18px 13px !important; overflow: auto; overscroll-behavior: contain; border-radius: 26px !important; transform: translateX(calc(100% + 24px)); visibility: hidden; transition: transform 340ms cubic-bezier(.2,.85,.25,1), visibility 340ms; }
  .category-sidebar.drawer-open { transform: translateX(0); visibility: visible; }
  .category-sidebar .head-title-row { align-items: center; flex-wrap: wrap; }
  .category-sidebar .category-panel-toggle { display: none; }
  .category-sidebar .cats { display: flex; flex-direction: column; overflow: visible; padding: 4px 2px 10px; }
  .category-sidebar .cat { flex: auto; width: 100%; min-height: 68px; }
  .category-sidebar .cat b { display: block; }
  .category-sidebar .cat small, .category-sidebar .cat .count { display: block; }
  body.category-drawer-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  #products, #products *, .category-panel-toggle, .category-drawer-trigger, .category-sidebar { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}