/*
 * Qlimatix · compare tray — the sticky bottom bar that appears on category /
 * search pages when the visitor adds products via "Vergelijk dit product".
 * Self-contained tokens so it renders identically wherever it loads (it shares
 * the same markup + behaviour as the homepage tray in home.js). Ported from the
 * homepage's .cmpbar styling.
 */
.cmpbar {
  --navy: #01273f; --orange: #e77935; --orange-hover: #d96b27;
  --border: #e7eaee; --border-soft: #eef1f4; --muted: #5e6f7c;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -16px 40px -26px rgba(8,38,65,0.4);
  transform: translateY(112%); transition: transform .38s cubic-bezier(.4,0,.2,1);
  font-family: "Onest", system-ui, -apple-system, sans-serif;
}
.cmpbar.is-open { transform: translateY(0); }
.cmpbar__inner { max-width: var(--container, 1280px); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 22px; box-sizing: border-box; }
.cmpbar__label { font-size: 14px; font-weight: 600; color: var(--navy); flex-shrink: 0; }
.cmpbar__items { display: flex; gap: 12px; flex: 1; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.cmpbar__items::-webkit-scrollbar { display: none; }
.cmpitem { display: flex; align-items: center; gap: 11px; background: #f6f9fb; border: 1px solid var(--border-soft); border-radius: 12px; padding: 8px 12px 8px 8px; flex-shrink: 0; animation: cmpin .28s ease; }
@keyframes cmpin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.cmpitem__thumb { width: 44px; height: 44px; border-radius: 9px; background: #fff; border: 1px solid var(--border-soft); display: grid; place-items: center; flex-shrink: 0; }
.cmpitem__thumb img { max-width: 80%; max-height: 80%; object-fit: contain; }
.cmpitem__name { font-size: 12.5px; font-weight: 500; color: var(--navy); line-height: 1.25; max-width: 150px; }
.cmpitem__rm { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; color: #9aa6b0; background: #fff; border: 1px solid var(--border); flex-shrink: 0; font-size: 15px; line-height: 1; cursor: pointer; }
.cmpitem__rm:hover { color: #e8473b; border-color: #f3c4c0; }
.cmpbar__actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.cmpbar__clear { font-size: 13px; color: var(--muted); background: none; border: 0; cursor: pointer; }
.cmpbar__clear:hover { color: var(--navy); }
.cmpbar__go { height: 46px; padding: 0 24px; border-radius: 11px; background: var(--orange); color: #fff; font-size: 14.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; transition: background .15s, opacity .15s; border: 0; cursor: pointer; text-decoration: none; }
.cmpbar__go:hover { background: var(--orange-hover); }
/* <2 products selected: the bar still shows (so it's clear the click registered)
   and the count reads "(1)", but the action is a neutral grey, non-clickable. */
.cmpbar__go[disabled] { background: #c3ccd4; box-shadow: none; cursor: default; pointer-events: none; }

/* .pcard__compare active state (the toggle button on the product cards). */
.pcard__compare.is-active { color: var(--orange, #e77935); }

/* mobile + tablet: drop the "Vergelijken (N)" label so the bar stays uncluttered */
@media (max-width: 980px) { .cmpbar__label { display: none; } }

@media (max-width: 600px) {
  .cmpbar__inner { padding: 12px 16px; gap: 14px; }
  /* drop the product chips on phones (too wide) — keep just clear + compare */
  .cmpbar__items { display: none; }
  .cmpbar__actions { flex: 1; }
  .cmpbar__go { flex: 1; justify-content: center; }
}