/* Section compare (template/blocks/compare/default.twig): an intro tile with the neighbours and a table tile (sticky heads,
   the current column in the accent tint, best values with a light). Tile basics — elbuz_theme.css. */
[data-section="compare"].et-section[class*="et-scheme-"] { background: transparent; }
.et-cmp__grid { align-items: stretch; }
.et-cmp__intro { grid-column: span 4; display: flex; flex-direction: column; gap: 0.875rem; }
.et-cmp__lead { margin: 0; color: var(--et-text-secondary); }
.et-cmp__list { display: grid; gap: 0.5rem; margin: auto 0 0; padding: 0; list-style: none; }
.et-cmp__list li { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: var(--et-radius-sm); background: var(--et-surface-2); }
.et-cmp__list img { width: 4rem; height: 4rem; object-fit: contain; filter: var(--et-media-filter); }
.et-cmp__list span { display: grid; gap: 0.125rem; min-width: 0; font-size: var(--et-text-sm); }
.et-cmp__list a { overflow: hidden; color: var(--et-text); font-weight: 600; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.et-cmp__list a:hover { text-decoration: underline; }
.et-cmp__list b { font: 600 var(--et-text-sm) var(--et-font-mono); }
.et-cmp__cart { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--et-btn-radius); background: var(--et-accent); color: var(--et-accent-contrast); cursor: pointer; }
.et-cmp__cart:hover { background: var(--et-accent-hover); }

.et-cmp__table { grid-column: span 8; display: flex; flex-direction: column; padding: 0; }
.et-cmp__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 0.875rem; border-bottom: var(--et-border-width) solid var(--et-border); }
.et-cmp__diff { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: var(--et-text-sm); cursor: pointer; }
.et-cmp__diff input { width: 1.125rem; height: 1.125rem; accent-color: var(--et-accent); }
.et-cmp__pick { display: none; align-items: center; gap: 0.5rem; margin: 0 0 0 auto; font-size: var(--et-text-sm); }
.et-cmp__pick select { min-height: 2.5rem; border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-input-radius, var(--et-radius-sm)); background: var(--et-surface); color: var(--et-text); }
.et-cmp__scroll { max-height: 47.5rem; overflow: auto; }
.et-cmp__t { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--et-text-sm); }
.et-cmp__t th, .et-cmp__t td { padding: 0.625rem 0.875rem; border-bottom: var(--et-border-width) solid var(--et-border); text-align: start; vertical-align: top; }
.et-cmp__t thead th, .et-cmp__t thead td { position: sticky; top: 0; z-index: 2; background: var(--et-surface); vertical-align: bottom; }
.et-cmp__t tbody th { position: sticky; left: 0; z-index: 1; width: 12.5rem; background: var(--et-surface); color: var(--et-text-muted); font-weight: 400; }
.et-cmp__group th { padding-top: 1.375rem; border-bottom-color: var(--et-border-strong); font: 600 var(--et-text-xs) var(--et-font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--et-text) !important; }
.et-cmp__t .is-cur { background: color-mix(in srgb, var(--et-accent) 14%, var(--et-surface)); }
.et-cmp__t thead .is-cur { background: color-mix(in srgb, var(--et-accent) 30%, var(--et-surface)); }
.et-cmp__t td.is-best { font-weight: 600; }
.et-cmp__t td.is-best::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.45rem; border-radius: 50%; background: var(--et-success); box-shadow: 0 0 6px var(--et-success); vertical-align: 1px; }
.et-cmp__t.is-diff tr.is-same { display: none; }
.et-cmp__head { display: grid; gap: 0.375rem; min-width: 9.5rem; }
.et-cmp__head small { font: 600 0.6875rem var(--et-font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--et-text); } /* on the accent-tinted column: accent text fell to 2.8 with a red brand (#244) */
.et-cmp__head img { width: 5.5rem; height: 5.5rem; object-fit: contain; filter: var(--et-media-filter); }
.et-cmp__head a { color: var(--et-text); font-weight: 600; line-height: 1.2; text-decoration: none; }
.et-cmp__head a:hover { text-decoration: underline; }
.et-cmp__head b { font: 600 var(--et-text-lg) var(--et-font-mono); }

@media (max-width: 1099.98px) {
  .et-cmp__intro, .et-cmp__table { grid-column: span 12; }
}
/* phones: the current product + one neighbour (data-col on the table, the switch in the bar) */
@media (max-width: 767.98px) {
  .et-cmp__pick { display: inline-flex; }
  .et-cmp__t tbody th { width: auto; }
  .et-cmp__t:not([data-col="1"]) .is-n1, .et-cmp__t:not([data-col="2"]) .is-n2, .et-cmp__t:not([data-col="3"]) .is-n3, .et-cmp__t:not([data-col="4"]) .is-n4,
  .et-cmp__t:not([data-col="5"]) .is-n5, .et-cmp__t:not([data-col="6"]) .is-n6, .et-cmp__t:not([data-col="7"]) .is-n7, .et-cmp__t:not([data-col="8"]) .is-n8 { display: none; }
}