/* ============================================================
   Products page — category sidebar layout (PRODUCTION)
   Loaded by products.html. Provides the sticky category nav,
   the 2-column shell and the responsive 4-column model grid.
   Source of truth: tools/promote_sidebar_to_prod.py
   ============================================================ */

html { scroll-padding-top: calc(var(--nav-height) + 18px); }

/* ---------- 2-column shell ---------- */
.pcat-shell {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 32px 24px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* neutralize the nested .container inside the narrower content column */
.pcat-shell .pcat-content > .product-category-section > .container {
  max-width: none;
  padding: 0;
}

/* keep cards proportionate inside the narrower column */
.pcat-shell .pcat-content .model-image { height: 230px; }

.pcat-content { min-width: 0; }
.pcat-content > .product-category-section:last-child { border-bottom: none; }

/* ---------- sidebar panel ---------- */
.pcat-sidebar {
  position: sticky;
  top: calc(var(--nav-height) + 20px);
  align-self: start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* header bar */
.pcat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 14px 14px 16px;
  background: var(--primary);
  color: #fff;
}
.pcat-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  line-height: 1.3;
}
.pcat-head-title svg { width: 17px; height: 17px; flex-shrink: 0; }
.pcat-head-btn {
  background: transparent;
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.pcat-head-btn:hover { background: rgba(255, 255, 255, 0.16); }
.pcat-head-btn svg { width: 16px; height: 16px; }
.pcat-chevron { display: none; width: 16px; height: 16px; transition: transform 0.25s ease; }

/* search box */
.pcat-search { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--border-light); }
.pcat-search > svg {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: #94a3b8;
  pointer-events: none;
}
.pcat-search input {
  width: 100%;
  padding: 9px 12px 9px 34px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pcat-search input::placeholder { color: #94a3b8; }
.pcat-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.08);
}

/* nav list */
.pcat-nav {
  padding: 8px 0 10px;
  max-height: calc(100vh - var(--nav-height) - 200px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pcat-nav::-webkit-scrollbar { width: 6px; }
.pcat-nav::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

.pcat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pcat-item:hover { background: var(--bg-alt); color: var(--primary); }
.pcat-item.active {
  background: #eef3f9;
  border-left-color: var(--primary);
  color: var(--primary);
  font-weight: 600;
}

.pcat-check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 3.5px;
  position: relative;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.pcat-item:hover .pcat-check { border-color: #94a3b8; }
.pcat-item.active .pcat-check { border-color: var(--primary); background: var(--primary); }
.pcat-item.active .pcat-check::after {
  content: '';
  position: absolute;
  left: 4.5px;
  top: 1.5px;
  width: 3.5px;
  height: 7.5px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}

.pcat-name { flex: 1 1 auto; min-width: 0; }

/* group divider between the two machinery blocks */
.pcat-item[data-group-start="1"] { border-top: 1px solid var(--border-light); margin-top: 6px; padding-top: 14px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pcat-shell { grid-template-columns: 1fr; gap: 16px; padding: 0 24px 20px; }
  .pcat-sidebar { position: static; }
  .pcat-shell .pcat-content .model-image { height: 240px; }

  .pcat-head { cursor: pointer; }
  .pcat-head-btn { display: none; }
  .pcat-chevron { display: block; }
  .pcat-sidebar.open .pcat-chevron { transform: rotate(180deg); }
  .pcat-search, .pcat-nav { display: none; }
  .pcat-sidebar.open .pcat-search { display: block; }
  .pcat-sidebar.open .pcat-nav { display: block; max-height: 60vh; }
}

@media (max-width: 768px) {
  .pcat-shell { padding: 0 20px 16px; }
  .pcat-shell .pcat-content .model-image { height: 250px; }
}

@media print {
  .pcat-sidebar { display: none; }
  .pcat-shell { grid-template-columns: 1fr; }
}

/* ---------- neutralise zebra striping inside the sidebar layout ---------- */
/* style.css paints `.product-category-section:nth-child(even)` with --bg-alt,
   assuming the sections are direct children of <body>. Wrapping them in
   .pcat-content shifts the parity and leaves stray grey bands (notably above
   the first category title). The sidebar already separates the blocks, so we
   drop the stripes and keep the column on a uniform white background. */
.pcat-shell .pcat-content > .product-category-section {
  background: transparent;
}

/* ============================================================
   Responsive width tiers (from the confirmed trial build)
   ============================================================ */

/* Zebra striping: style.css paints `.product-category-section:nth-child(even)`
   with --bg-alt, assuming the sections are direct children of <body>. Inside
   .pcat-content the parity shifts and leaves stray grey bands, so we drop the
   stripes and keep the content column uniformly white. */
.pcat-shell .pcat-content > .product-category-section {
  background: #fff !important;
}

/* Desktop: 4-column grid, scoped to the content column so the tablet/mobile
   rules that collapse the sidebar itself still win. */
@media (min-width: 1025px) {
  .pcat-shell .pcat-content .model-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Default desktop tier: 230px image + tighter card padding. */
.pcat-shell .pcat-content .model-image { height: 230px; }
.pcat-shell .pcat-content .model-card { padding: 14px; }

/* Mid desktop (>=1600px): image grows to 260px. The shell width itself is no
   longer set here -- it inherits --max-width, which style.css raises to 1440px
   at this breakpoint (and 1520px at >=1920px), so the header and footer stay
   exactly as wide as the product column. */
@media (min-width: 1600px) {
  .pcat-shell .pcat-content .model-image { height: 260px; }
}

/* Large desktop (>=1920px): taller image, same shared width tier. */
@media (min-width: 1920px) {
  .pcat-shell .pcat-content .model-image { height: 280px; }
}