/* The compare tray (js/compare-store.js, tray), moved out of catalog.css on 2026-11-02 so the
 * finders, which show it over their results (js/layouts.js, cmpTray), can load it too. The two
 * values it borrowed from the catalog are set on it here. */
.cmp-tray { --card: #efeeec; --out: cubic-bezier(.22, 1, .36, 1) }

/* The tray (js/compare-store.js): a white bar in the bottom right corner while anything is picked,
   its thumbnails on the cards' grey, and the dark Compare button, which stays grey until there are
   two (Patryk, 2026-11-01: no "up to ten more" and no count). Each
   thumbnail names its product under the pointer, and "+N" opens the list of the rest. It floats over
   the list, so it has the search card's shadow; it rises in once, when the first pick lands, and
   shakes when an eleventh is refused. Corners of 6px and 10px, the Compare tick's family. */
.cmp-tray {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 40px);
  padding: 8px;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.cmp-tray[hidden] { display: none }
.cmp-tray.is-in { animation: cmp-rise .32s var(--out) both }
.cmp-tray.is-full { animation: cmp-shake .36s var(--out) }
@keyframes cmp-rise { from { opacity: 0; transform: translateY(16px) } }
@keyframes cmp-shake { 25% { transform: translateX(-5px) } 50% { transform: translateX(4px) } 75% { transform: translateX(-2px) } }
.cmp-tray-shots { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none }
.cmp-tray-shots > li { position: relative; width: 44px; height: 44px; border-radius: 8px; background: var(--card) }
.cmp-tray-shots > li > img { width: 100%; height: 100%; padding: 4px; object-fit: contain; mix-blend-mode: multiply }
/* The remove cross, on a thumbnail's corner and on a row of the list. */
.cmp-tray-out {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--raised);
  cursor: pointer;
  transition: opacity .15s, background .15s;
}
.cmp-tray-out svg { width: 11px; height: 11px }
.cmp-tray-shots > li > .cmp-tray-out { position: absolute; top: -6px; right: -6px; opacity: 0 }
.cmp-tray-shots > li:hover > .cmp-tray-out, .cmp-tray-out:focus-visible { opacity: 1 }
/* The thumbnail under the pointer comes forward, so the next one does not cover its cross. */
.cmp-tray-shots > li:hover, .cmp-tray-shots > li:focus-within { z-index: 1 }
@media (hover: none) { .cmp-tray-shots > li > .cmp-tray-out { opacity: 1 } }
/* The name over a thumbnail: a small dark label, as the Amazon button is dark. */
.cmp-tray-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 4px;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--raised);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s, translate .16s var(--out);
}
.cmp-tray-shots > li:hover > .cmp-tray-tip { opacity: 1; translate: -50% 0 }
/* "+N": a tile like the thumbnails; under the pointer or the focus, the rest of the picks in a white
   card over it. The card's padding below bridges the gap, so the pointer can travel up into it. */
.cmp-tray-more { background: none }
.cmp-tray-more:not(.is-wide), .cmp-tray-more-btn .is-narrow, .cmp-tray-pop li:nth-child(-n+4) { display: none }
.cmp-tray-more-btn {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cmp-tray-more:hover .cmp-tray-more-btn, .cmp-tray-more:focus-within .cmp-tray-more-btn { background: var(--card); border-color: transparent; color: var(--ink) }
.cmp-tray-pop {
  position: absolute;
  right: -8px;
  bottom: 100%;
  padding-bottom: 12px;
  visibility: hidden;
  opacity: 0;
  translate: 0 4px;
  transition: opacity .15s, translate .2s var(--out), visibility 0s .15s;
}
.cmp-tray-more:hover .cmp-tray-pop, .cmp-tray-more:focus-within .cmp-tray-pop { visibility: visible; opacity: 1; translate: none; transition-delay: 0s }
.cmp-tray-pop ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 260px;
  max-height: min(360px, 60vh);
  margin: 0;
  padding: 6px 0;
  overflow-y: auto;
  list-style: none;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
/* The row under the pointer takes the list rows' grey across the card's whole width (2026-11-02). */
.cmp-tray-pop li { display: flex; align-items: center; gap: 10px; padding: 4px 10px; transition: background .12s }
.cmp-tray-pop li:hover { background: var(--tile) }
.cmp-tray-pop-shot { flex: 0 0 36px; height: 36px; border-radius: 6px; background: var(--card) }
.cmp-tray-pop-shot img { width: 100%; height: 100%; padding: 3px; object-fit: contain; mix-blend-mode: multiply }
.cmp-tray-pop-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cmp-tray-pop-name small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted) }
.cmp-tray-pop .cmp-tray-out { flex: 0 0 24px; height: 24px; background: none; color: var(--muted); opacity: 0 }
.cmp-tray-pop li:hover .cmp-tray-out, .cmp-tray-pop .cmp-tray-out:focus-visible { opacity: 1 }
.cmp-tray-pop .cmp-tray-out:hover { background: var(--tile-hover); color: var(--ink) }
@media (hover: none) { .cmp-tray-pop .cmp-tray-out { opacity: 1 } }
.cmp-tray-txt { margin: 0 2px; font-size: 12.5px; color: var(--muted); white-space: nowrap }
.cmp-tray-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--raised);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, transform .16s var(--out);
}
a.cmp-tray-go:hover { background: var(--ink-deep) }
a.cmp-tray-go:active { transform: scale(.97) }
.cmp-tray-go[aria-disabled] { background: var(--tile); color: var(--dim) }
.cmp-tray-clear {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cmp-tray-clear:hover { background: var(--tile); color: var(--ink) }
.cmp-tray-clear svg { width: 16px; height: 16px }
/* A phone: across the foot of the screen, two thumbnails and "+N" for the rest (tapped, it opens the
   list), the button at the right. */
@media (max-width: 700px) {
  .cmp-tray { right: 12px; left: 12px; bottom: 12px; max-width: none; gap: 8px }
  .cmp-tray-shots { flex: 1 }
  .cmp-tray-shots > li { width: 40px; height: 40px }
  .cmp-tray-shots > li:nth-child(n+3):not(.cmp-tray-more) { display: none }
  .cmp-tray-more:not(.is-wide) { display: block }
  .cmp-tray-pop li:nth-child(n+3) { display: flex }
  /* The list takes the tray's width, over it: "+N" lets go of its place so the card sits on the tray. */
  .cmp-tray-shots > li.cmp-tray-more { position: static }
  .cmp-tray-pop { left: 0; right: 0 }
  .cmp-tray-pop ul { width: auto }
  .cmp-tray-more-btn .is-narrow { display: inline }
  .cmp-tray-more-btn .is-wide { display: none }
  /* Over a product's sheet, as wide as the card above it, 24px from the screen's edges (Patryk,
     2026-11-02; layouts.css). */
  #details .cmp-tray { left: 24px; right: 24px; bottom: 8px }
  /* Its words in two lines at most, so the tray stays as tall as its thumbnails (56px) and clear of
     the card's dropdown: three lines made it 80px on a list's narrower card. */
  .cmp-tray:has(.cmp-tray-txt) .cmp-tray-shots { flex: 0 0 auto }
  .cmp-tray-txt { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.3 }
  .cmp-tray-txt { flex: 1; white-space: normal }
  .cmp-tray-go { height: 40px }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-tray.is-in, .cmp-tray.is-full { animation: none }
}