/* Comparison page /sravnenie/. Everything comes from the design-system tokens (tokens.css):
   --primary/--accent/--accent-soft, --line, --disabled, --focus, --r*, --target; the table is the DS .spec-table. */
.starina-compare{display:grid;gap:var(--s4);padding-top:var(--s6);border-top:1px solid var(--line)}
.starina-compare[hidden]{display:none}
.starina-compare__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s4)}
.starina-compare__head h2{margin:0}
.starina-compare .microcopy{margin:0}
.starina-compare__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.starina-compare__scroll:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.starina-compare__table{width:100%;min-width:max-content;border-collapse:collapse}
.starina-compare__table th,.starina-compare__table td{min-width:168px;max-width:280px;padding:var(--s3);vertical-align:top;text-align:left;overflow-wrap:anywhere}
.starina-compare__table thead th{font-weight:600}
.starina-compare__table thead img{display:block;width:100%;max-width:160px;height:auto;aspect-ratio:4/3;object-fit:cover;margin-bottom:var(--s2);border-radius:var(--r-sm)}
.starina-compare__table thead a{display:block;color:inherit}
.starina-compare__table thead a:hover{text-decoration:underline}
.starina-compare__table thead .text-link{display:inline-flex;align-items:center;margin-top:var(--s2);min-height:var(--target);font-size:.875rem}
/* Row labels stay visible while the models scroll sideways on a phone. */
.starina-compare__table tbody th,.starina-compare__corner{position:sticky;left:0;z-index:1;min-width:112px;background:var(--surface);font-weight:600}
.starina-compare__table tr.is-diff td{background:var(--accent-soft)}
/* 04.11.2026, Pavel: columns of one width, the × in the card corner, the model row repeated under the table. */
.starina-compare__table{table-layout:fixed;min-width:0;width:max-content}
.starina-compare__col-label{width:200px}
.starina-compare__table col:not(.starina-compare__col-label){width:240px}
.starina-compare__table th,.starina-compare__table td{min-width:0;max-width:none}
.starina-compare__table thead th,.starina-compare__table tfoot th{vertical-align:top;background:var(--surface)}
.starina-compare__table tfoot th{border-top:1px solid var(--line)}
.starina-compare__model{position:relative;display:grid;gap:var(--s2)}
.starina-compare__pic{display:block;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-2)}
.starina-compare__pic img{display:block;width:100%;max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover;margin:0;border-radius:0}
.starina-compare__name{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3 * 1.35em);line-height:1.35;color:inherit;font-weight:600}
.starina-compare__name:hover{text-decoration:underline}
.starina-compare__price{margin:0;font-size:1.0625rem;font-weight:700}
.starina-compare__drop{position:absolute;top:6px;right:6px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--ink);font:400 22px/1 var(--sans,inherit);cursor:pointer;box-shadow:0 1px 4px rgb(20 20 19 / .12)}
.starina-compare__drop:hover{border-color:var(--danger);color:var(--danger)}
.starina-compare__drop:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.starina-compare__corner{vertical-align:top}
.starina-compare__clear{display:inline-flex;align-items:center;min-height:36px;padding:0 var(--s3);border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
.starina-compare__clear:hover{border-color:var(--primary)}
.starina-compare__same{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s4);font-size:.9375rem;font-weight:500;line-height:1.35;cursor:pointer}
.starina-compare__same input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--primary)}
.starina-compare__table.is-same-hidden tbody tr:not(.is-diff){display:none}
@media(max-width:699px){
  .starina-compare__col-label{width:120px}
  .starina-compare__table col:not(.starina-compare__col-label){width:168px}
  .starina-compare__drop{width:32px;height:32px;font-size:20px}
  .starina-compare__clear{min-height:32px;padding:0 var(--s2);font-size:.8125rem}
  .starina-compare__same{margin-top:var(--s3);font-size:.8125rem;overflow-wrap:normal;word-break:normal}
  .starina-compare__table thead .starina-compare__corner,.starina-compare__table tfoot .starina-compare__corner{padding:var(--s2)}
}
@media print{
  .starina-compare__drop,.starina-compare__clear,.starina-compare__same,.starina-compare__table tfoot{display:none!important}
}
.starina-compare__actions{display:flex}
@media(max-width:699px){
  .starina-compare__table th,.starina-compare__table td{min-width:148px;padding:10px}
  .starina-compare__table tbody th,.starina-compare__corner{min-width:96px}
  .starina-compare__actions .button{width:100%}
}

.starina-compare-page{display:flex;flex-direction:column;gap:var(--s5)}
.starina-compare__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
.starina-compare-page [hidden],.starina-compare__bar[hidden],.starina-compare__groups[hidden],.starina-compare__note[hidden],.starina-compare__foot[hidden]{display:none}
.starina-compare__groups{display:flex;flex-wrap:wrap;gap:var(--s3)}
/* Big switch buttons: the type of item is the main choice on this page. */
.starina-compare__group{display:inline-flex;align-items:center;min-height:var(--target);padding:0 var(--s5);border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font:inherit;font-size:1.0625rem;font-weight:600;cursor:pointer}
.starina-compare__group:hover{border-color:var(--primary)}
.starina-compare__group:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.starina-compare__group[aria-pressed="true"]{border-color:var(--primary);background:var(--primary);color:var(--primary-ink)}
/* «All together» is a forced mode: dashed, so it never looks like one more type. */
.starina-compare__group--mixed{border-style:dashed}
.starina-compare__group--mixed[aria-pressed="true"]{border-style:solid;border-color:var(--accent);background:var(--accent);color:var(--primary-ink)}
.starina-compare__note{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-sm);background:var(--surface-2);color:var(--ink);font-size:.9375rem;line-height:1.5}
.starina-compare__note.is-mixed{border-left:4px solid var(--accent);background:var(--accent-soft)}
.starina-compare__table.is-mixed thead th{border-bottom:3px solid var(--accent)}
.starina-compare__foot{display:grid;gap:var(--s2)}
.starina-compare__foot .microcopy{margin:0}
.starina-compare__empty p{margin:0 0 var(--s4)}
@media(max-width:699px){
  .starina-compare__group{flex:1 1 auto;justify-content:center;padding:0 var(--s4)}
}
@media print{
  @page{size:landscape;margin:12mm}
  .starina-compare__bar,.starina-compare__foot,.starina-compare__table .text-link,.starina-compare__head .microcopy,.starina-compare-page>.starina-favorites__status{display:none!important}
  .starina-compare{border:0;padding-top:0}
  .starina-compare__scroll{overflow:visible}
  .starina-compare__table{min-width:0;font-size:9pt}
  .starina-compare__table th,.starina-compare__table td{min-width:0;max-width:none;padding:6px}
  .starina-compare__table tbody th,.starina-compare__corner{position:static}
  .starina-compare__table thead img{max-width:110px}
  /* A document, not a screen: the address of each model under its name. */
  .starina-compare__table thead a::after{content:attr(href);display:block;margin-top:2px;color:var(--muted);font-size:7pt;font-weight:400;word-break:break-all}
  .starina-compare__table tr.is-diff td{background:transparent}
  .starina-compare__note{padding:4px 0;background:transparent}
}