/* The comparison (compare.html, js/compare.js). The page and the cards' greys are the catalog's
 * (catalog.css: --page, --card, --card-hover); everything else is here.
 *
 * One table on the white page, in x-kom's colours (Patryk, 2026-11-01, with a screenshot of its
 * comparison): a light hairline round it, between one product and the next and between the rows;
 * the rows alternating white and a pale grey; the bands (Key specs, Full specifications) a grey a
 * step darker across the whole table; the labels in ink and semibold in a column at the left. Show
 * only differences leaves the rows where the products differ (js/compare.js).
 *
 * Its head is the four categories as tabs with the actions at the right; under it the products'
 * cards, centred (the picture on the page's white with no tile of its own, the brand small over the
 * model, the price, the Amazon button), and an empty place after the last to add more. Every row is a subgrid of one grid,
 * so a column is as wide in the rows as at the head; the columns that do not fit scroll sideways,
 * the labels staying put: by x-kom's arrows at the ends of the row of cards, a column a click, or by
 * a scrollbar held to the foot of the screen while the table is on it (js/compare.js, the proxy bar),
 * since the table's own foot is a long way down. A column comes to rest against the labels.
 *
 * Sections: the head, the box and its bar, the grid, the cards, the rows, the scrollbar, the header
 * that follows the page, the empty state, the phone.
 */

/* On the body, not the main: the header that follows the page stands outside the main. */
.compare-page {
  --label: 200px;
  --rule: var(--line);
  --zebra: #f7f7f6;
  --band: #ececeb;
}

/* ==== The head ================================================================================ */
.cmp-head { margin: 8px 0 24px }
.cmp-head h1 { margin: 0; font-size: 30px; font-weight: 500; letter-spacing: -.8px; line-height: 1.2 }   /* the catalog's title (catalog.css, .c-title; 2026-11-02) */
/* The way back to the catalog: the article's white pill (fit.css, .es-back), set apart from the title
   (Patryk, 2026-11-02: the plain link sat too close to "Compare"). */
.cmp-head .crumbs { margin: 0 0 20px }
.cmp-head .crumb-back {
  height: 32px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-raised);   /* a hairline, so the white pill holds on the white page */
  color: var(--ink); text-decoration: none; transition: box-shadow .2s;
}
.cmp-head .crumb-back:hover { color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line), 0 1px 4px oklch(0 0 0 / .2) }
.cmp-head .crumb-back svg { transition: transform .2s var(--out) }
.cmp-head .crumb-back:hover svg { transform: translateX(-2px) }
@media (prefers-reduced-motion: reduce) { .cmp-head .crumb-back svg { transition: none } .cmp-head .crumb-back:hover svg { transform: none } }

/* ==== The box and its bar ======================================================================= */
.cmp-table.is-loading { opacity: .4; transition: opacity .2s .15s }
.cmp-box { border: 1px solid var(--rule); border-radius: 16px; background: var(--surface) }
/* The tabs: words, the category on screen in ink with a 3px rule under it on the bar's foot. */
.cmp-bar { display: flex; align-items: stretch; gap: 16px; padding: 0 12px 0 8px; border-bottom: 1px solid var(--rule) }
.cmp-tabs { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none }
.cmp-tabs::-webkit-scrollbar { display: none }
.cmp-tabs button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 60px; padding: 0 14px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 15px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: color .15s;
}
.cmp-tabs button:hover { color: var(--ink) }
.cmp-tabs button[aria-selected="true"] { color: var(--ink); font-weight: 600 }
.cmp-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--ink) }
.cmp-actions { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: flex-end }
.cmp-act, .cmp-switch {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s;
}
.cmp-act:hover, .cmp-switch:hover { background: var(--card) }
.cmp-act svg { width: 17px; height: 17px }
.cmp-act.is-icon { justify-content: center; width: 38px; padding: 0; text-decoration: none }
.cmp-act.is-icon svg { width: 19px; height: 19px }
.cmp-switch { margin-right: 6px }
/* Show only differences: a toggle switch, green when on as
   x-kom's is. */
/* The switch before its words, the two centred on one line (line-height 1, so the words do not sit
   low beside it), the words a step smaller than the tabs. */
.cmp-switch { gap: 10px; padding-left: 8px; font-size: 13px; line-height: 1 }
.cmp-switch i { flex: 0 0 auto }
.cmp-switch i { position: relative; width: 36px; height: 22px; border-radius: 999px; background: var(--tile-active); transition: background .2s }
.cmp-switch i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 2px oklch(0 0 0 / .2); transition: transform .2s var(--out);
}
.cmp-switch[aria-checked="true"] i { background: var(--fit-ok) }
.cmp-switch[aria-checked="true"] i::after { transform: translateX(14px) }
.cmp-switch:disabled { color: var(--dim); cursor: default; background: none }
.cmp-switch:disabled i { opacity: .5 }

/* ==== The grid ================================================================================ */
/* The box's own scrollbar is hidden; the proxy under the table stands in for it. */
.cmp-wrap { position: relative }
.cmp-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-left: var(--label) }
.cmp-card { scroll-snap-align: start }
/* The arrows: white squares with a soft shadow, x-kom's, standing on the rule at the start of the
   products and half out of the table at its end, level with the pictures. */
/* top: the middle of the row of cards, set by js/compare.js. */
.cmp-arrow {
  position: absolute; z-index: 5; top: var(--arrow-y, 160px); translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0;
  border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer;
  box-shadow: 0 0 0 1px var(--rule), 0 4px 12px oklch(0 0 0 / .12); transition: background .15s, transform .16s var(--out);
}
.cmp-arrow[hidden] { display: none }
.cmp-arrow svg { width: 20px; height: 20px }
.cmp-arrow:hover { background: var(--card) }
.cmp-arrow:active { transform: scale(.94) }
.cmp-arrow.is-prev { left: calc(var(--label) - 20px) }
.cmp-arrow.is-prev svg { transform: scaleX(-1) }
.cmp-arrow.is-next { right: -20px }
.cmp-scroll::-webkit-scrollbar { display: none }
/* Each column a quarter of the box less the labels (js/compare.js works it out: --colw), so four
   whole columns are in view and scrolling moves by one. */
.cmp-grid { display: grid; grid-template-columns: var(--label) repeat(var(--cols), var(--colw, 232px)); width: max-content }
.cmp-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; border-top: 1px solid var(--rule) }
.cmp-heads { border-top: 0 }
/* Every product column ruled off from the one before it; the label column stays at the left over the
   columns scrolled under it, on the row's own ground. */
.cmp-row > * + * { border-left: 1px solid var(--rule) }
.cmp-l, .cmp-corner { position: sticky; left: 0; z-index: 2; background: var(--surface) }
/* A sliver of the column scrolled under it showed at its left edge (subpixel); its own ground covers it. */
.cmp-l, .cmp-corner { box-shadow: -2px 0 0 var(--surface) }
.cmp-row.is-alt .cmp-l { box-shadow: -2px 0 0 var(--zebra) }
.cmp-band .cmp-l { box-shadow: -2px 0 0 var(--band) }

/* ==== The cards ================================================================================ */
.cmp-corner { padding: 18px 16px 18px 20px }
.cmp-count { margin: 0; font-size: 14.5px; font-weight: 600 }
.cmp-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted) }
.cmp-card { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 18px 16px 20px; text-align: center; animation: cmp-in .32s var(--out) both }
@keyframes cmp-in { from { opacity: 0; transform: translateY(8px) } }
/* No taller than four columns would make it, so two wide columns do not stand twice as tall. */
.cmp-shot { align-self: stretch; aspect-ratio: 4 / 3; max-height: 190px; margin-bottom: 14px; overflow: hidden }
.cmp-shot a { display: block; height: 100% }
.cmp-shot img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .32s var(--out) }
@media (hover: hover) { .cmp-card:hover .cmp-shot img { transform: scale(1.06) } }
/* Remove: a small grey square in the card's top right corner, where x-kom's menu stands, flat with
   no shadow, there under the pointer and always on a touch screen; the same in the header that
   follows the page. */
.cmp-out {
  position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0;
  border-radius: 8px; background: var(--card); color: var(--ink); cursor: pointer;
  transition: opacity .15s, background .15s, transform .16s var(--out);
}
.cmp-out svg { width: 14px; height: 14px }
.cmp-out:hover { background: var(--card-hover) }
.cmp-out:active { transform: scale(.92) }
@media (hover: hover) and (pointer: fine) {
  .cmp-out { opacity: 0 }
  .cmp-card:hover .cmp-out, .cmp-mini-p:hover .cmp-out, .cmp-out:focus-visible { opacity: 1 }
}
/* The brand small and grey over the model, as on a catalog card. */
.cmp-brand { margin: 0 0 3px; font-size: 13px; font-weight: 500; color: var(--muted) }
.cmp-name { margin: 0; font-size: 14.5px; font-weight: 600; letter-spacing: -.3px; line-height: 1.3; overflow-wrap: anywhere }
.cmp-name a { color: inherit; text-decoration: none }
.cmp-name a:hover { text-decoration: underline; text-decoration-color: var(--tile-active); text-underline-offset: 3px }
/* A tick or a cross in a cell (a feature the product has or not, a plain Yes or No), in the middle
   of the column with no round behind it (Patryk, 2026-11-01): the tick in the Fit tab's green, the
   cross grey, so the ticks are what the eye finds going down a column. */
.cmp-v.is-flag { display: flex; align-items: center; justify-content: center; gap: 6px }
.cmp-flag { flex: 0 0 auto; display: grid; place-items: center }
.cmp-flag svg { width: 22px; height: 22px }
.cmp-flag.is-yes { color: var(--fit-ok) }
.cmp-flag.is-no { color: var(--dim) }
.cmp-flag.is-no svg { width: 18px; height: 18px }

/* A term the glossary explains (js/spec-glossary.js): the label as it was, underlined with dashes;
   a click opens a dark card of words under it. */
.cmp-term {
  padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: help;
  text-decoration: underline dashed var(--dim); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .12s;
}
.cmp-term:hover, .cmp-term[aria-expanded="true"] { text-decoration-color: var(--ink) }
.cmp-term:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; border-radius: 3px }
.cmp-tip {
  position: fixed; z-index: 60; width: 280px; max-width: calc(100vw - 24px); padding: 12px 14px;
  border-radius: 12px; background: var(--ink); color: var(--raised); font-size: 13px; line-height: 1.45;
  box-shadow: var(--shadow-tip);
  animation: cmp-tip-in .16s var(--out);
}
.cmp-tip[hidden] { display: none }
.cmp-tip strong { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600 }
.cmp-tip p { margin: 0; color: color-mix(in srgb, var(--raised) 82%, transparent) }
@keyframes cmp-tip-in { from { opacity: 0; transform: translateY(-3px) } }

/* The size: a dropdown under the model with neither background nor border (Patryk, 2026-11-01), its
   word in grey and a chevron, ink under the pointer; a click opens the bar menu's white card under
   it (category-nav.css, .nav-menu), each size a line with its dimensions in grey and a tick on the
   one on screen. */
.cmp-size { position: relative; margin-top: 4px }
.cmp-size-btn {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 0; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: color .12s;
}
.cmp-size-btn svg { width: 15px; height: 15px; transition: rotate .2s var(--out) }
.cmp-size-btn:hover, .cmp-size-btn[aria-expanded="true"] { color: var(--ink) }
.cmp-size-btn[aria-expanded="true"] svg { rotate: 180deg }
.cmp-size-btn:focus-visible { outline: 2px solid var(--muted); outline-offset: 1px }
.cmp-card:has(.cmp-size-menu:not([hidden])) { z-index: 8 }
.cmp-size-menu {
  position: absolute; top: calc(100% + 6px); left: 50%; z-index: 8; min-width: 176px; padding: 6px 0;
  display: flex; flex-direction: column; translate: -50% 0;
  border-radius: 14px; background: var(--surface); text-align: left; letter-spacing: 0; overflow: hidden;
  box-shadow: var(--shadow-pop);
  transform-origin: top center; transition: opacity .16s, transform .2s cubic-bezier(.22, 1, .36, 1), visibility .2s;
}
.cmp-size-menu[hidden] { display: flex; opacity: 0; visibility: hidden; transform: scale(.96) translateY(-4px); pointer-events: none }
.cmp-size-menu button {
  display: flex; align-items: baseline; gap: 8px; padding: 8px 16px; border: 0; background: none;
  color: var(--ink); font: inherit; font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; cursor: pointer; transition: background .12s;
}
.cmp-size-menu button small { color: var(--muted); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums }
.cmp-size-menu .cmp-size-tick { align-self: center; width: 16px; height: 16px; margin-left: auto }
.cmp-size-menu button:hover, .cmp-size-menu button:focus-visible { background: var(--tile); outline: none }
.cmp-size-menu button[aria-checked="true"] { font-weight: 600 }
.cmp-size-menu button:disabled { color: var(--dim); cursor: not-allowed; background: none }
.cmp-size-menu button:disabled small { color: var(--dim) }
/* The price at the foot with the button, so the buttons line up whatever the names over them. */
.cmp-price { margin: auto 0 0; padding-top: 12px; font-size: 18px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums }
.cmp-price.is-none { font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--muted); padding-bottom: 4px }
.cmp-amz {
  display: flex; align-items: center; justify-content: center; gap: 8px; align-self: stretch; height: 38px; margin-top: 12px; padding: 0 12px;
  border-radius: 10px; background: var(--ink); color: var(--raised); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .15s, transform .16s var(--out);
}
.cmp-amz:hover { background: var(--ink-deep) }
.cmp-amz:active { transform: scale(.97) }
.cmp-amz img { display: block; width: 15px; height: 15.5px; transform: translateY(1px) }
.cmp-amz span { overflow: hidden; text-overflow: ellipsis }
/* Add: the whole column after the last product is the button, x-kom's "add products or change the
   category" in its middle under a round plus; the column a pale grey under the pointer. */
.cmp-add {
  justify-content: center; gap: 8px; text-decoration: none; border: 0; border-left: 1px solid var(--rule); background: none; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.cmp-add small { font-size: 12.5px; font-weight: 400; color: var(--muted) }
.cmp-add-ico {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--rule), 0 2px 6px oklch(0 0 0 / .08); transition: transform .2s var(--out);
}
.cmp-add svg { width: 20px; height: 20px }
.cmp-add:hover { background: var(--zebra) }
.cmp-add:hover .cmp-add-ico { transform: scale(1.06) }
.cmp-add:active .cmp-add-ico { transform: scale(.95) }
.cmp-add:focus-visible { outline: 2px solid var(--muted); outline-offset: -4px }

/* ==== The rows ================================================================================= */
.cmp-l { margin: 0; padding: 12px 16px 12px 20px; font-size: 14px; font-weight: 600; line-height: 1.4 }
.cmp-v { min-width: 0; padding: 12px 16px; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums }
.cmp-v.is-none { color: var(--dim) }
.cmp-row.is-alt, .cmp-row.is-alt .cmp-l { background: var(--zebra) }
/* Only differences, and nothing differs. */
.cmp-same .cmp-l { grid-column: 1 / -1; padding: 28px 20px; font-weight: 400; color: var(--muted) }
/* The two bands, across the table, the columns' rules stopping at them as on x-kom. */
.cmp-band, .cmp-band .cmp-l { background: var(--band) }
.cmp-band > * + * { border-left-color: transparent }
.cmp-band .cmp-l { padding: 14px 20px; font-size: 17px; letter-spacing: -.3px; white-space: nowrap }

/* ==== The scrollbar ============================================================================= */
/* Under the table and held to the foot of the screen while the table is on it, shown whenever the
   columns overflow (js/compare.js keeps it and the table in step). */
.cmp-hbar {
  position: sticky; bottom: 0; z-index: 4; padding: 5px 8px; overflow-x: auto; overflow-y: hidden;
  border-top: 1px solid var(--rule); border-radius: 0 0 16px 16px; background: var(--surface);
  scrollbar-width: thin; scrollbar-color: var(--tile-active) var(--card);
}
.cmp-hbar[hidden] { display: none }
.cmp-hbar div { height: 1px }
.cmp-hbar::-webkit-scrollbar { height: 10px }
.cmp-hbar::-webkit-scrollbar-track { background: var(--card); border-radius: 999px }
.cmp-hbar::-webkit-scrollbar-thumb { background: var(--tile-active); border-radius: 999px }
.cmp-hbar::-webkit-scrollbar-thumb:hover { background: var(--dim) }

/* ==== The header that follows the page ============================================================ */
/* Fixed under the bar once the cards have scrolled away (js/compare.js, sticky): a thumbnail and the
   name a column, ruled like the table and as wide as it, its top corners rounded, a soft shadow under
   it so the rows pass beneath. The outer box is square and the page's white, so nothing of the
   table shows behind the rounded corners (Patryk, 2026-11-01); the frame inside it carries the
   hairlines and the corners and clips the columns, and the arrows stand on the outer box, half out of
   the frame as on the table. */
.cmp-mini {
  position: fixed; z-index: 25; top: var(--top, 80px); left: var(--left, 0); width: var(--width, 100%);
  background: var(--surface); box-shadow: 0 10px 16px -12px oklch(0 0 0 / .18); animation: cmp-drop .2s var(--out);
}
.cmp-mini-frame { overflow: hidden; border: 1px solid var(--rule); border-radius: 12px 12px 0 0 }
.cmp-mini[hidden] { display: none }
/* On a phone the bar goes up while the page is read down (js/nav.js); the header follows it to the top. */
.cmp-mini { transition: top .28s cubic-bezier(.22, 1, .36, 1) }
.nav-tucked .cmp-mini { top: 0 }
@keyframes cmp-drop { from { opacity: 0; transform: translateY(-6px) } }
.cmp-mini-in { display: grid; will-change: transform }
.cmp-mini-in > * { padding: 10px 16px }
.cmp-mini-in > * + * { border-left: 1px solid var(--rule) }
.cmp-mini-corner { position: relative; z-index: 1; display: flex; align-items: center; padding-left: 20px !important; background: var(--surface); box-shadow: 1px 0 0 var(--rule); font-size: 13px; font-weight: 600 }
.cmp-mini-p { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0 }
.cmp-mini-p .cmp-out { top: 50%; right: 10px; translate: 0 -50% }
/* The header's arrows, smaller, inside its ends: one after the corner, one at the right. */
.cmp-mini .cmp-arrow { top: 50%; width: 32px; height: 32px; translate: 0 -50%; box-shadow: 0 0 0 1px var(--rule), 0 2px 8px oklch(0 0 0 / .1) }
.cmp-mini .cmp-arrow svg { width: 17px; height: 17px }
.cmp-mini .cmp-arrow.is-prev { left: calc(var(--label) - 16px) }
.cmp-mini .cmp-arrow.is-next { right: -16px }
.cmp-mini-p img { flex: 0 0 auto; width: 40px; height: 40px; object-fit: contain; mix-blend-mode: multiply }
/* A long name fades out at the right rather than ending in an ellipsis, more so under the pointer,
   where the remove button stands over its end. */
.cmp-mini-p span { min-width: 0; flex: 1; font-size: 13px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent) }
.cmp-mini-p:hover span { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%) }
.cmp-mini-p b { display: block; font-size: 12px; font-weight: 500; color: var(--muted) }
/* Add, over the Add column: the round plus and the words side by side, the cell a pale grey under the
   pointer, as the column's own button is. */
.cmp-mini-add {
  text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-left: 1px solid var(--rule); background: none;
  color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.cmp-mini-add .cmp-add-ico { width: 32px; height: 32px }
.cmp-mini-add .cmp-add-ico svg { width: 16px; height: 16px }
.cmp-mini-add:hover { background: var(--zebra) }
.cmp-mini-add:hover .cmp-add-ico { transform: scale(1.06) }
.cmp-mini-add:focus-visible { outline: 2px solid var(--muted); outline-offset: -4px }

/* ==== The empty state ============================================================================ */
.cmp-empty { display: flex; flex-direction: column; align-items: center; padding: 72px 24px 80px; text-align: center; animation: cmp-in .32s var(--out) both }
.cmp-empty-t { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.5px }
.cmp-empty-d { max-width: 420px; margin: 10px 0 28px; font-size: 15px; line-height: 1.55; color: var(--muted) }
.cmp-empty-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center }
.cmp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border: 0; border-radius: 10px;
  background: var(--card); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, transform .16s var(--out);
}
.cmp-btn:hover { background: var(--card-hover) }
.cmp-btn:active { transform: scale(.97) }
.cmp-btn.is-dark { background: var(--ink); color: var(--raised) }
.cmp-btn.is-dark:hover { background: var(--ink-deep) }
.cmp-btn svg { width: 18px; height: 18px }

/* The line that says a link was copied, or why a pick was refused: dark, at the foot of the screen. */
.cmp-toast {
  position: fixed; z-index: 55; left: 50%; bottom: 32px; margin: 0; padding: 12px 18px; border-radius: 999px; background: var(--ink);
  color: var(--raised); font-size: 14px; font-weight: 500; transform: translateX(-50%); animation: cmp-toast .24s var(--out);
  max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-toast[hidden] { display: none }
@keyframes cmp-toast { from { opacity: 0; transform: translate(-50%, 8px) } }

/* ==== The phone ================================================================================= */
/* The box runs to the screen's edges; no label column: each label stands over its row's figures,
   two columns and a slice of the third across. */
@media (max-width: 700px) {
  .compare-page { --label: 0px }
  .cmp-arrow { width: 36px; height: 36px }
  .cmp-arrow.is-prev { left: 6px }
  .cmp-arrow.is-next { right: 6px }
  .cmp-head { margin: 0 0 16px }
  .cmp-head h1 { font-size: 24px }
  .cmp-bar { flex-wrap: wrap; gap: 0; padding: 0 }
  .cmp-tabs { flex-basis: 100%; padding: 0 4px; border-bottom: 1px solid var(--rule) }
  .cmp-tabs button { height: 52px; padding: 0 10px; font-size: 14.5px }
  .cmp-tabs button[aria-selected="true"]::after { left: 10px; right: 10px }
  .cmp-actions { justify-content: flex-start; padding: 6px }
  .cmp-act, .cmp-switch { padding: 0 10px; font-size: 13.5px }
  /* The switch and the three marks on one line inside the box. */
  .cmp-switch { margin-right: 0 }
  .cmp-act.is-icon { width: 34px }
  /* The corner and each label stand over the columns, held at the box's left as the row scrolls; the
     first card or figure starts after the empty label track, not in it. They lie on top of the cells
     (one grid row for all), so a cell runs up under its label and the rules between the columns run
     unbroken from row to row (Patryk, 2026-11-02: they stopped at every label). */
  .cmp-row > * { grid-row: 1 }
  .cmp-corner, .cmp-l { grid-column: 1 / -1; align-self: start; position: static; z-index: 2; background: none; pointer-events: none }
  .cmp-l .cmp-term { pointer-events: auto }
  .cmp-corner { padding: 12px 16px 0 }
  .cmp-corner > *, .cmp-l > span { position: sticky; left: 16px }
  /* Every cell in its own column by number, since all of them share the label's row (ten products
     at most, the label track first). */
  .cmp-row > :nth-child(2) { grid-column: 2 } .cmp-row > :nth-child(3) { grid-column: 3 } .cmp-row > :nth-child(4) { grid-column: 4 } .cmp-row > :nth-child(5) { grid-column: 5 } .cmp-row > :nth-child(6) { grid-column: 6 } .cmp-row > :nth-child(7) { grid-column: 7 } .cmp-row > :nth-child(8) { grid-column: 8 } .cmp-row > :nth-child(9) { grid-column: 9 } .cmp-row > :nth-child(10) { grid-column: 10 } .cmp-row > :nth-child(11) { grid-column: 11 } .cmp-row > :nth-child(12) { grid-column: 12 }
  .cmp-row > .cmp-l + *, .cmp-row > .cmp-corner + * { border-left: 0 }
  .cmp-card { padding: 44px 10px 14px }
  .cmp-shot img { padding: 6px }
  .cmp-name { font-size: 14.5px }
  .cmp-price { font-size: 18px }
  .cmp-amz { height: 38px; gap: 6px; padding: 0 8px; font-size: 12.5px }
  /* "Amazon" alone: a half-screen column cut "Search on Amazon" short. */
  .cmp-amz-pre { display: none }
  /* The hint under the count ran into the first card's remove button; the Add column says it. */
  .cmp-hint { display: none }
  .cmp-out { opacity: 1; top: 6px; right: 6px; width: 30px; height: 30px }
  .cmp-l { padding: 10px 16px 0; font-size: 12.5px; font-weight: 500; line-height: 18px; color: var(--muted); white-space: nowrap }
  .cmp-row.is-alt .cmp-l { background: none }
  /* Under the label's 28px, the figure 4px below it, level with the label's left edge. */
  .cmp-v { padding: 32px 16px 11px; font-size: 13.5px }
  .cmp-band .cmp-v { display: none }
  .cmp-band .cmp-l { padding: 12px 16px; font-size: 16px; color: var(--ink) }
  /* The header's arrows lay over its remove buttons (Patryk, 2026-11-02); a finger drags it sideways
     instead (js/compare.js, touchmove). */
  .cmp-mini .cmp-arrow { display: none }
  .cmp-mini-p .cmp-out { right: 6px; width: 26px; height: 26px }
  .cmp-mini-corner { padding: 0 !important; font-size: 0 }
  .cmp-mini-in > * { padding: 8px 10px }
  .cmp-mini-p img { width: 34px; height: 34px }
  .cmp-mini-p span { font-size: 12.5px }
  .cmp-empty { padding: 48px 20px 56px }
}

/* A 360px Android: the switch and the three marks still on one line. */
@media (max-width: 374px) {
  .cmp-actions { padding: 6px 4px }
  .cmp-switch { padding: 0 6px }
  .cmp-act.is-icon { width: 30px }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-card, .cmp-empty, .cmp-mini, .cmp-toast { animation: none }
  .cmp-shot img, .cmp-add-ico, .cmp-switch i::after { transition: none }
}