/*
Theme Name: Avedeno
Template: generatepress
Description: Дочерняя тема GeneratePress для avedeno.com (блок 98). Токены — нейтральные заглушки; значения заменит DESIGN.md оператора.
Version: 103.10.4
Text Domain: avedeno
*/

/* Tokens. Placeholders until the operator's DESIGN.md: neutral greys, the
   system font, one accent. Every rule below reads a token, never a value, so
   the design pass changes this block and nothing else. */
:root {
	--av-bg: #ffffff;
	--av-surface: #f6f6f6;
	--av-text: #1a1a1a;
	--av-muted: #6b6b6b;
	--av-line: #e2e2e2;
	--av-accent: #2b5fab;
	--av-warn: #9a5b00;
	--av-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--av-mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
	--av-radius: 4px;
	--av-gap: 1rem;
}

body {
	background: var(--av-bg);
	color: var(--av-text);
	font-family: var(--av-font);
}

a { color: var(--av-accent); }

/* Catalogue card (block 101, 101.4): printed from the presentation the
   pipeline built — header, the scheme of ports, facts, protocols, devices,
   then folded: several devices, ports, body and kit, measurements, power
   and identity; where to buy at the bottom. One reading column; a mark of
   the source is text in a tag, never a colour. */
.av-card { max-width: 48rem; }
.av-card__head { display: grid; gap: var(--av-gap); margin-bottom: var(--av-gap);
	grid-template-columns: 1fr; }
@media (min-width: 720px) {
	.av-card__head--cover { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
.av-card__cover img { width: 100%; height: auto; border-radius: var(--av-radius);
	background: var(--av-surface); }
.av-card__brand { color: var(--av-muted); font-size: .85em; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; }
.av-card__oneline { margin: .5em 0 0; font-size: 1.05em; display: flex; flex-wrap: wrap;
	align-items: baseline; row-gap: .15em; }
.av-card__oneline .av-sep { color: var(--av-line); margin: 0 .35em; }
.av-card__oneline .av-ol { white-space: nowrap; }
/* A wrapped line must not end on «·» (draft 565 at 390 px): on a narrow
   screen the dots go and the items keep a gap. */
@media (max-width: 560px) { .av-card__oneline { column-gap: .75em; }
	.av-card__oneline .av-sep { display: none; } }
.av-muted { color: var(--av-muted); }
.av-card__actions { display: flex; flex-wrap: wrap; gap: .6em; margin-top: var(--av-gap); }
.av-btn { display: inline-block; padding: .45em 1em; border: 1px solid var(--av-accent);
	border-radius: var(--av-radius); text-decoration: none; }
.av-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(var(--av-gap) / 2); margin: var(--av-gap) 0; }
@media (max-width: 560px) { .av-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.av-tile { background: var(--av-surface); border-radius: var(--av-radius);
	padding: .7em .9em; min-width: 0; }
.av-tile__v { font-size: 1.4em; font-weight: 700; line-height: 1.15;
	font-variant-numeric: tabular-nums; }
.av-tile__v small { font-size: .65em; font-weight: 600; }
.av-tile__l { color: var(--av-muted); font-size: .8em; margin-top: .25em; }
.av-section { margin-top: 2em; }
.av-section h2 { font-size: 1.25em; margin: 0 0 .6em; }
.av-section h2 small, .av-section summary small { color: var(--av-muted); font-weight: 400;
	font-size: .75em; margin-left: .5em; }
details.av-section { border-top: 1px solid var(--av-line); padding-top: .3em; }
details.av-section > summary { cursor: pointer; font-size: 1.1em; font-weight: 600; padding: .5em 0; }
.av-src { display: inline-block; font-size: .7em; line-height: 1; padding: .2em .35em;
	border-radius: 3px; background: var(--av-surface); color: var(--av-muted);
	border: 1px solid var(--av-line); margin-left: .3em; vertical-align: middle;
	white-space: nowrap; font-weight: 500; }
.av-legend { color: var(--av-muted); font-size: .82em; margin: 0 0 .6em; }
.av-legend span + span { margin-left: 1em; }
.av-more { margin-top: .6em; }
.av-more > summary { cursor: pointer; color: var(--av-accent); }
.av-sectnote { color: var(--av-muted); font-size: .88em; margin-top: .6em; }
.av-ports { width: 100%; border-collapse: collapse; }
.av-ports th, .av-ports td { text-align: left; vertical-align: top; padding: .5em .6em;
	border-top: 1px solid var(--av-line); }
.av-ports thead th { border-top: 0; color: var(--av-muted); font-size: .8em; font-weight: 600; }
.av-ports .av-port { font-weight: 600; white-space: nowrap; }
.av-ports .av-sub { display: block; color: var(--av-muted); font-size: .85em; font-weight: 400; }
@media (max-width: 640px) { .av-ports .av-col-proto { display: none; } }
/* Phone (operator 12.10): the ports table is a card per port, not a table
   to scroll — the PDO ladder broke a step per line in a 90-px column. The
   column order is fixed by the printer, so the labels come from it. */
@media (max-width: 560px) {
	.av-ports thead { display: none; }
	.av-ports, .av-ports tbody, .av-ports tr, .av-ports td { display: block; width: auto; }
	.av-ports tr { border-top: 1px solid var(--av-line); padding: .5em 0 .4em; }
	.av-ports tbody tr:first-child { border-top: 0; }
	.av-ports td { border-top: 0; padding: .15em .6em; }
	.av-ports td.av-port { font-size: 1.05em; }
	.av-ports td.av-port .av-sub { display: inline; margin-left: .5em; }
	.av-ports td:nth-child(2)::before { content: "Максимум"; }
	.av-ports td:nth-child(3)::before { content: "Ступени PDO"; }
	.av-ports td:nth-child(4)::before { content: "PPS"; }
	.av-ports td:not(.av-port)::before { display: block; color: var(--av-muted);
		font-size: .78em; font-weight: 600; } }
.av-dl { display: grid; grid-template-columns: minmax(8rem, 36%) 1fr; margin: 0;
	border-top: 1px solid var(--av-line); }
.av-dl dt, .av-dl dd { margin: 0; padding: .5em .6em; border-bottom: 1px solid var(--av-line); }
.av-dl dt { color: var(--av-muted); }
.av-dl dd small { display: block; color: var(--av-muted); font-size: .85em; }
@media (max-width: 480px) { .av-dl { grid-template-columns: 1fr; }
	.av-dl dt { border-bottom: 0; padding-bottom: 0; } }
.av-group { font-size: 1em; margin: 1em 0 .3em; }
/* Devices (block 101.4): a row is a fold — device and result in the
   summary, the condition inside. */
details.av-crow { border-top: 1px solid var(--av-line); }
details.av-crow:first-child { border-top: 0; }
details.av-crow > summary { list-style: none; cursor: pointer; display: grid;
	grid-template-columns: minmax(12em, 1fr) minmax(0, max-content); gap: .2em 1em;
	padding: .6em; align-items: baseline; }
details.av-crow > summary::-webkit-details-marker { display: none; }
details.av-crow .av-d { font-weight: 600; min-width: 0; }
details.av-crow .av-w { text-align: right; }
details.av-crow .av-c { padding: 0 .6em .6em; color: var(--av-muted); font-size: .88em; }
details.av-crow .av-c p { margin: 0 0 .3em; }
details.av-crow > summary::after { content: "почему"; font-size: .75em; color: var(--av-accent);
	grid-column: 1 / -1; }
details.av-crow[open] > summary::after { content: "свернуть"; }
/* Phone (operator 12.10, draft 565 at 430 px): the device and the result
   are two lines, never two squeezed columns — «Samsung Galaxy S / Note /
   Tab» broke letter by letter next to a long result. */
@media (max-width: 640px) { details.av-crow > summary { grid-template-columns: minmax(0, 1fr); }
	details.av-crow .av-w { text-align: left; } }
.av-note { display: block; color: var(--av-warn); font-size: .85em; }
.av-card__footer { color: var(--av-muted); font-size: .85em; margin-top: 2em;
	border-top: 1px solid var(--av-line); padding-top: calc(var(--av-gap) / 2); }

/* The first screen (block 101.4, mockup v3): the scheme of ports — the
   maximum above the pictogram, the label and lead protocol under it, the
   total on the right; the facts under it; the protocols as chips. The
   pictograms are currentColor symbols, so a dark theme recolours them. */
.av-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.av-scheme { background: var(--av-surface); border: 1px solid var(--av-line);
	border-radius: var(--av-radius); padding: 1em .9em .75em; }
.av-scheme__row { display: flex; align-items: flex-end; gap: .4em; }
/* Any number of ports (block 103): a grid of equal columns, each no
   narrower than a port's label and figure, that wraps between ports into
   rows — twelve ports at 360 px are rows of five, never twelve slivers with
   their text over the neighbours. One port spreads (auto-fit), five of X774
   stay one row on a phone. */
.av-scheme__ports { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.25em, 1fr));
	gap: .6em .2em; align-items: start; flex: 1 1 auto; min-width: 0; }
.av-pt { min-width: 0; text-align: center; }
/* The pictograms of a row stand on one line whatever is printed under them
   (block 103.9, the operator 14.10: a port without a lead protocol stood
   lower, the tiles were set by their bottom). A tile is four rows — power,
   pictogram, label, lead — shared by every tile of the row: a port whose
   power reads «нет данных» on one line still has its pictogram level with
   the ports whose unit goes under the number. Without subgrid the tiles
   stand by their top. */
@supports (grid-template-rows: subgrid) {
	.av-scheme__ports { row-gap: 0; }
	.av-pt { display: grid; grid-row: span 4; grid-template-rows: subgrid;
		align-content: start; margin-bottom: .6em; }
}
.av-pt__w { font-weight: 700; font-size: 1.05em; line-height: 1.1;
	font-variant-numeric: tabular-nums; white-space: nowrap; }
.av-pt__w small { font-weight: 500; font-size: .7em; color: var(--av-muted); margin-left: 2px; }
.av-pt__ico { display: block; width: 100%; max-width: 60px; height: auto; margin: .4em auto .25em;
	color: var(--av-text); }
.av-pt--hi .av-pt__ico { color: var(--av-accent); }
/* The label on one line: «USB-C1» broke on its hyphen (block 103.9); the page
   prints «C1» (`cardview.port_title`), and nothing else may break either. */
.av-pt__n { font-size: .8em; font-weight: 600; white-space: nowrap; }
.av-pt__p { font-size: .7em; color: var(--av-muted); line-height: 1.2; }
.av-scheme__total { flex: 0 0 auto; text-align: center; padding-left: .6em; margin-left: .4em;
	border-left: 1px solid var(--av-line); align-self: stretch; display: flex;
	flex-direction: column; justify-content: center; }
.av-scheme__total .av-pt__w { font-size: 1.35em; }
.av-scheme__l { font-size: .7em; color: var(--av-muted); max-width: 6em; }
.av-scheme__cap { font-size: .85em; color: var(--av-muted); margin: .6em 0 0; }
/* Narrow screen (operator 12.10, 430 px): «140 Вт» broke as «140 В / т»
   and the ports with a one-line value stood higher than the rest. The unit
   goes under its number for every port at once, so all values are two
   lines and the pictograms stand on one line. */
@media (max-width: 560px) { .av-pt__ico { max-width: 50px; } .av-pt__w { font-size: .95em; }
	.av-scheme__ports .av-pt__w small { display: block; margin-left: 0; }
	.av-scheme__total .av-pt__w small { display: block; margin-left: 0; } }
section.av-facts, section.av-scheme + section.av-facts { margin-top: .6em; }
.av-facts { color: var(--av-muted); font-size: .9em; margin: 0; }
.av-facts b { color: var(--av-text); font-weight: 500; }
.av-chips { display: flex; flex-wrap: wrap; gap: .5em; }
.av-chip { display: inline-flex; align-items: baseline; gap: .4em; border: 1px solid var(--av-line);
	border-radius: 999px; padding: .35em .8em; white-space: nowrap; background: var(--av-surface); }
.av-chip--core { border-color: var(--av-accent); }
.av-chip--dim { color: var(--av-muted); border-style: dashed; }
/* Badges are not links: no hover, no pointer — the state is in the glyph and the word. */
.av-pcard { border: 1px solid var(--av-line); border-radius: var(--av-radius); margin-top: .8em;
	overflow: hidden; background: var(--av-surface); }
.av-pcard__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .8em;
	padding: .7em .9em; border-bottom: 1px solid var(--av-line); }
.av-pcard__name { font-weight: 700; }
.av-pcard__max { font-weight: 600; }
.av-plist { list-style: none; margin: 0; padding: 0; }
.av-plist li { padding: .6em .9em; border-top: 1px solid var(--av-line); }
.av-plist li:first-child { border-top: 0; }
.av-pr { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .6em; }
.av-pr b { min-width: 5.2em; }
.av-pl { font-size: .85em; color: var(--av-muted); margin-top: .15em; }
.av-plist li.av-pl--off .av-pr b, .av-plist li.av-pl--off .av-pw { color: var(--av-muted); font-weight: 500; }
.av-pcard details.av-more { margin: 0; padding: .5em .9em .6em; border-top: 1px solid var(--av-line); }
.av-fnref { font-size: .75em; }
.av-fn { font-size: .8em; color: var(--av-muted); margin: 0; padding: .5em .9em .3em 2.4em;
	border-top: 1px solid var(--av-line); }
.av-fn li { margin: .2em 0; }
.av-fn-star { font-size: .8em; color: var(--av-muted); margin: 0; padding: 0 .9em .6em; }
/* A table wider than its box scrolls sideways, and says so (hotfix 101.9).
   Without script: a shadow at the edge where content is hidden — the cover
   gradients ride the content (local), the shadows stay at the edges
   (scroll), so a shadow shows only while there is more that way. With
   matrix.js: the hint above the table and the shadow of the sticky column of
   the matrix, which covers the left one. */
.av-tablewrap { overflow-x: auto;
	background:
		linear-gradient(to right, var(--av-bg) 40%, transparent) left center / 2.5em 100% no-repeat local,
		linear-gradient(to left, var(--av-bg) 40%, transparent) right center / 2.5em 100% no-repeat local,
		radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .28), transparent) left center / 1.1em 100% no-repeat scroll,
		radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .28), transparent) right center / 1.1em 100% no-repeat scroll;
	background-color: var(--av-bg); }
.av-scrollhint { margin: .3em 0; }
.av-scrollhint[hidden] { display: none; }
/* The matrix fits a box of 900 px and wider (hotfix 101.9): cells wrap, the
   number with its unit and the glyph with its value do not (no-break spaces
   from cardformat and the theme), the mark stands on its own line, the port
   columns share the width equally (<colgroup>), the first takes the rest. */
.av-matrix { border-collapse: collapse; width: 100%; }
.av-matrix th, .av-matrix td { text-align: left; vertical-align: top; padding: .4em .6em;
	border-top: 1px solid var(--av-line); font-size: .88em; overflow-wrap: break-word; }
.av-matrix .av-cv { display: block; }
.av-matrix .av-cm { display: block; margin-top: .2em; }
.av-matrix .av-cm .av-src { margin-left: 0; }
.av-matrix thead th { position: sticky; top: 0; background: var(--av-bg); z-index: 2; }
.av-matrix th:first-child, .av-matrix td:first-child { position: sticky; left: 0; z-index: 1;
	background: var(--av-bg); font-weight: 600; min-width: 6.5em; }
/* The corner stays above the headers that scroll under it. */
.av-matrix thead th:first-child { z-index: 3; }
/* A cell of a collapsed table paints no box-shadow: the shadow of the
   sticky column is a strip beside it. */
.av-tablewrap.is-scrolled .av-matrix th:first-child::after,
.av-tablewrap.is-scrolled .av-matrix td:first-child::after { content: ""; position: absolute;
	top: 0; bottom: 0; right: -.7em; width: .7em; pointer-events: none;
	background: linear-gradient(to right, rgba(0, 0, 0, .18), transparent); }
.av-matrix tr[hidden] { display: none; }
.av-toggle { display: inline-flex; align-items: center; gap: .5em; margin: .5em 0; cursor: pointer; }
.av-toggle[hidden] { display: none; }
.av-hint { color: var(--av-muted); font-size: .85em; }

/* Where to buy (п. 4): one button per store, the order of stores.yaml. */
.av-buy { margin: var(--av-gap) 0; }
.av-buy__list { display: flex; flex-wrap: wrap; gap: calc(var(--av-gap) / 2); margin: 0; }
.av-buy__button { display: inline-block; padding: .5em 1em; border-radius: var(--av-radius);
	background: var(--av-accent); color: var(--av-bg); text-decoration: none; font-weight: 600; }
.av-buy__button:hover, .av-buy__button:focus { opacity: .9; color: var(--av-bg); }

/* «Сравнить» and the bar of the set (compare.js, п. 16). */
.av-compare { display: inline-block; padding: .3em .8em; border: 1px solid var(--av-accent);
	border-radius: var(--av-radius); text-decoration: none; font-size: .9em; }
.av-compare.is-chosen { background: var(--av-accent); color: var(--av-bg); }
.av-compare.is-full { color: var(--av-muted); border-color: var(--av-line); cursor: default; }
.av-compare-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
	text-align: center; padding: calc(var(--av-gap) / 2); background: var(--av-surface);
	border-top: 1px solid var(--av-line); }
.av-compare-bar[hidden] { display: none; }
.av-compare-bar a { display: inline-block; padding: .5em 1.2em; border-radius: var(--av-radius);
	background: var(--av-accent); color: var(--av-bg); text-decoration: none; font-weight: 600; }

/* The comparison (catalog-compare.php, п. 15; layout of block 103.2). The
   wrapper is the container: the column count follows the width the table
   actually has — a foldable, a tablet, a phone — not the screen's. No
   horizontal scroll: fixed layout on the full width. From 600 px of table
   every model in one table, three included; below 600 px (a phone) the
   first two of the address and no switch, as GSMArena's mobile comparison
   (hotfix 103.10.4, the operator 16.10: «если телефон получает ссылку, где
   в сравнении сразу 3 устройства, он всегда оставляет первые два») — the
   phone's own layout is at the end of this part. The 900 px threshold of block 98.4 is gone
   (hotfix 103.10.3, the operator 15.10: «с ПК всегда сравнение с 3
   устройствами; никаких пиксельных ограничений»): on a computer it hid the
   third model beside the sidebar's empty column, which hooks.php now
   removes on the catalogue's pages.
   Lines (block 103.2, the operator 13.10): no vertical gridlines, no outer
   border — a thin separator under each row in the theme's line colour, the
   same padding everywhere. The parent theme draws borders on every table
   and cell; they are zeroed here, not left to chance. */
.av-cmp { container: av-cmp / inline-size; }
.av-cmp__table { width: 100%; table-layout: fixed; border-collapse: collapse; border: 0; margin: 0; }
.av-cmp[data-count="2"] .av-cmp__table { max-width: calc(220px + 2 * 360px); }
/* No mid-letter breaks (block 103): a value breaks at its spaces; the
   ports' line holds «C10 100» together by no-break spaces from cardview and
   breaks between ports. */
.av-cmp__table th, .av-cmp__table td { text-align: left; vertical-align: top;
	padding: .5em .6em; border: 0; border-bottom: 1px solid var(--av-line); color: var(--av-text); }
/* The label column: 220 px on a computer, never more than a quarter of the
   table on a tablet (three models in 600–880 px, hotfix 103.10.3) — min()
   instead of a second threshold; a third on a phone. The label is quieter
   than the value. */
.av-cmp__table .av-cmp__field { position: sticky; left: 0; background: var(--av-bg);
	width: min(220px, 25%);
	font-weight: 400; color: var(--av-muted); }
/* A section's heading: plain bold text with air above it, no fill. */
.av-cmp__table .av-cmp__section th { font-weight: 600; color: var(--av-text); padding-top: 1.5em; }
.av-cmp__table .av-cmp__section td { padding-top: 1.5em; }
/* The head (block 103.2): brand, name and × stay on screen, on a computer
   and a phone; the facts and the scheme under them scroll away. */
.av-cmp__headrow th { position: sticky; top: 0; z-index: 2; background: var(--av-bg); }
.av-cmp__headrow th[class^="av-cmp__m"], .av-cmp__title { position: relative; padding-right: 1.9em; }
.av-cmp__headrow th.av-cmp__field { z-index: 3; }
.av-cmp__intro td { border-bottom: 0; padding-top: 0; }
.av-cmp__brand { display: block; color: var(--av-muted); font-size: .75em; font-weight: 600;
	letter-spacing: .06em; text-transform: uppercase; }
.av-cmp__name { display: block; font-weight: 600; }
.av-cmp__facts { display: block; color: var(--av-muted); font-size: .8em; font-weight: 400; }
.av-cmp__remove { position: absolute; top: .35em; right: .35em; width: 1.4em; height: 1.4em;
	line-height: 1.3em; text-align: center; font-size: 1.1em; font-weight: 400;
	color: var(--av-muted); text-decoration: none; border-radius: 50%; }
.av-cmp__remove:hover, .av-cmp__remove:focus-visible { background: var(--av-surface); color: var(--av-text); }
/* The mark beside its value: smaller and lighter, on the value's line —
   the no-break space before it keeps it from wrapping alone. */
.av-cmp__table .av-src { font-size: .65em; padding: .15em .3em; margin-left: 0;
	background: none; font-weight: 400; }
/* The scheme in a column (block 103.2): the card's own markup, small; the
   ports wrap into rows, the total goes under them — never wider than the
   column, twelve ports included. */
.av-scheme--compact { font-size: .78em; padding: .6em .5em .5em; margin-top: .5em; max-width: 100%; }
.av-scheme--compact .av-scheme__row { flex-wrap: wrap; }
.av-scheme--compact .av-scheme__ports { grid-template-columns: repeat(auto-fill, minmax(2.7em, 1fr));
	flex: 1 1 100%; }
.av-scheme--compact .av-pt__ico { max-width: 36px; }
/* The unit under its number at every width, as on a phone: a column is
   narrow on a computer too, and «140 Вт» on one line overran its port. */
.av-scheme--compact .av-pt__w small { display: block; margin-left: 0; }
.av-scheme--compact .av-scheme__total { flex: 1 1 100%; flex-direction: row; align-items: baseline;
	justify-content: flex-start; gap: .4em; border-left: 0; margin: .3em 0 0; padding: .3em 0 0;
	border-top: 1px solid var(--av-line); }
.av-scheme--compact .av-scheme__total .av-pt__w { font-size: 1.1em; }
.av-scheme--compact .av-scheme__total .av-pt__w small { display: inline; margin-left: 2px; }
.av-scheme--compact .av-scheme__l { max-width: none; }
.av-cmp__table tfoot td { padding-top: .8em; }
.av-cmp__table tfoot .av-buy__list { display: flex; flex-direction: column; align-items: flex-start;
	gap: .4em; }
/* One model (block 103.2): its head, no table. */
.av-cmp__solo { max-width: 480px; }
.av-cmp__solo .av-scheme--compact { font-size: .9em; }
/* «Добавить к сравнению» (block 103.2): a list, a link per card, no script. */
.av-cmp-add { margin-top: 2em; }
.av-cmp-add h2 { font-size: 1.15em; margin: 0 0 .4em; }
.av-cmp-add__list { list-style: none; margin: 0; padding: 0; }
.av-cmp-add__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1em 1em;
	padding: .6em 0; border-bottom: 1px solid var(--av-line); }
.av-cmp-add__name { grid-column: 1; font-weight: 600; }
.av-cmp-add__item .av-cmp__facts { grid-column: 1; }
.av-cmp-add__go { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: .35em .9em;
	border: 1px solid var(--av-accent); border-radius: var(--av-radius); text-decoration: none;
	white-space: nowrap; }
/* «Только различия» (block 103): a checkbox before the table, no script —
   the rows the same in every column carry data-same and fold away; on a
   phone the rows the same in its two columns (data-same2, below). */
.av-cmp__diff { margin: 0 .4em .8em 0; vertical-align: middle; }
.av-cmp__difflabel { display: inline-block; margin-bottom: .8em; cursor: pointer; }
.av-cmp__diff:checked ~ .av-cmp__table tr[data-same] { display: none; }
/* A tablet (hotfix 103.10.3): three models from 600 px, a column about
   150 px at the narrowest — the table's text a step smaller, growing with
   the table to full size at 880 px (cqi — a hundredth of the container,
   the table's own width, not the screen's). */
.av-cmp__table { font-size: clamp(.82em, calc(.43em + 1.03cqi), 1em); }
/* A phone (block 103; layout of hotfix 103.10.4): two models, the first
   two of the address — the third column stays in the markup, one page for
   every width, and is hidden here. A row is a grid of two equal columns,
   its label across both above the values, small and grey, as GSMArena's
   mobile table; a section's heading across both; the head — brand, name, ×
   and facts, scheme — two columns on the full width, no empty label column.
   The table stays a <table>; only its boxes change. The head row stays on
   screen (block 103.2): the row is sticky, and its group gives way
   (display: contents) so the row sticks over the whole table, not over the
   head alone. The text is smaller, never broken mid-letter: a Russian word
   — «светодиодный», «Идентификация» — or a protocol with its figure must
   fit whole in half of 330 px. «Только различия» judges the two columns
   shown: data-same2. */
@container av-cmp (max-width: 599px) {
	.av-cmp__table { font-size: .82em; }
	.av-cmp__table, .av-cmp__table tbody, .av-cmp__table tfoot { display: block; }
	.av-cmp__table thead { display: contents; }
	.av-cmp__table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.av-cmp__table .av-cmp__m3 { display: none; }
	.av-cmp__table .av-cmp__field { position: static; width: auto; grid-column: 1 / -1;
		border-bottom: 0; padding-bottom: 0; font-size: .9em; }
	.av-cmp__headrow .av-cmp__field, .av-cmp__intro .av-cmp__field { display: none; }
	.av-cmp__headrow { position: sticky; top: 0; z-index: 2; background: var(--av-bg); }
	.av-cmp__headrow th { position: relative; }
	.av-cmp__table .av-cmp__section th { grid-column: 1 / -1; }
	.av-cmp__table .av-cmp__section td { display: none; }
	.av-cmp__diff:checked ~ .av-cmp__table tr[data-same2] { display: none; }
}
/* The page is a container too (hotfix 103.10.4): «Добавить к сравнению»
   stands outside the table's container, and on a phone two models are the
   most — beside two the list is hidden; beside one it stays, the list is
   how the second is chosen. The same 600 px. */
.av-compare-page { container: av-page / inline-size; }
@container av-page (max-width: 599px) {
	.av-compare-page[data-count="2"] .av-cmp-add { display: none; }
}
/* A card sold through its analog (block 103.2). */
.av-analog p { margin: 0 0 .6em; }
.av-analog__diff { color: var(--av-muted); font-size: .9em; }

/* The list (archive-charger.php). */
.av-list { width: 100%; border-collapse: collapse; }
.av-list th, .av-list td { text-align: left; padding: .35em .5em;
	border-bottom: 1px solid var(--av-line); }