:root { --panel-width: min(510px, 40vw); }
header { position: sticky; top: 0; z-index: 6; }
.comparison-page { padding: 35px 5%; max-width: 1500px; margin: auto; }
.comparison-page[hidden] { display: none; }
.compare-open main, .compare-open footer, .compare-open .compare-bar, .compare-open .detail-panel { display: none !important; }
.detail-panel {
  position: fixed; right: 0; top: 90px; bottom: 0;
  width: var(--panel-width); overflow-y: auto; overscroll-behavior: contain;
  background: #fafbf7; border-left: 1px solid #d8dfd0; padding: 26px;
  z-index: 4; scrollbar-width: thin; box-shadow: -8px 0 25px #20382f06;
}
.detail-panel[hidden] { display: none; }
.detail-open main, .detail-open footer { margin-right: var(--panel-width); }
.detail-open main { padding: 26px; grid-template-columns: 180px minmax(0, 1fr); gap: 22px; }
.detail-open main > aside { display: block; padding-right: 18px; min-width: 0; }
.detail-open .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 195px), 1fr)); }
.detail-open .toolbar, .detail-open .toolbar-actions { flex-wrap: wrap; gap: 12px; }
.detail-open .card-image { height: 190px; }
.card.selected { border-color: #78936a; box-shadow: 0 0 0 2px #78936a; }
.detail-panel .modal-head { position: relative; padding-right: 35px; gap: 10px; margin-bottom: 18px; }
.detail-panel .modal-head h2 { font-size: 20px; line-height: 1.5; }
.detail-panel .close { position: absolute; right: 0; top: 0; }
.detail-panel .detail-grid { display: flex; flex-direction: column; gap: 10px; }
.detail-panel .detail-main-image { height: 280px; max-height: 280px; }
.detail-panel .detail-tags { margin-bottom: 12px; }
.detail-panel .detail-actions { margin: 8px 0 20px; flex-wrap: wrap; }
.detail-panel .description { font-size: 13px; }
.detail-panel h3 { font-size: 15px; }
.view-controls { display: flex; justify-content: flex-end; margin-bottom: 15px; }
.view-controls button[aria-pressed="true"] { background: #e4ecd8; border-color: #78936a; }
@media (min-width: 1600px) {
  .detail-open main { grid-template-columns: 210px minmax(0, 1fr); }
}
/* Compact screens keep the catalog AND its filters accessible above a bottom pane. */
@media (max-width: 1000px) {
  .detail-open main { margin-right: 0; padding-bottom: calc(46vh + 30px); }
  .detail-open footer { margin-right: 0; }
  .detail-panel { top: auto; height: 46vh; width: 100%; padding: 20px; border-left: 0; border-top: 1px solid #c7d2be; box-shadow: 0 -6px 24px #20382f14; }
  .detail-panel .detail-main-image { height: 240px; }
  .detail-open .compare-bar { bottom: calc(46vh + 12px); }
}
@media (max-width: 700px) {
  .detail-open main { display: block; padding: 22px 5% calc(46vh + 30px); }
  .detail-open main > aside { display: grid; padding-right: 0; }
  .detail-panel .modal-head h2 { font-size: 19px; }
  .detail-open .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}