/* Merit Link public portal. Brand accent and fonts come from inline :root variables set per page. */
:root {
  --accent: #1A1A1A;
  --accent-ink: #FFFFFF;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --ink: #1A1A1A;
  --ink-2: #52585C;
  --paper: #FFFFFF;
  --panel: #F0F2F4;
  --line: #D9DDE1;
  --ok: #1F7A3A;
  --warn: #8A5A00;
  --error: #B3261E;
  --radius: 10px;
  --wrap: 880px;
}
:root[data-theme="dark"] {
  --ink: #F4F3EE;
  --ink-2: #B9BCC2;
  --paper: #0F0F10;
  --panel: #1B1C1E;
  --line: #34363A;
  --ok: #7FD48F;
  --warn: #FFD66B;
  --error: #FF8A80;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  min-width: 360px;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
/* A page that needs more room (the form and its illustration on /register) widens only its <main>, and to the right:
   the header and the footer keep the one --wrap of the portal and the content still starts under the logo. */
.wrap-wide { max-width: 1180px; padding-left: calc(20px + max(0px, (min(100%, 1180px) - var(--wrap)) / 2)); }
a { color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
h1, h2, h3, legend { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); }
h2 { font-size: clamp(1.35rem, 3.5vw, 1.75rem); margin-top: 2.5rem; }
p { margin: 0 0 1rem; }
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 40rem; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; font-weight: 700; color: var(--ink-2); margin-bottom: 0.75rem; }
.note, .hint, .muted, .optional { color: var(--ink-2); font-size: 0.95rem; }
.optional { font-weight: 400; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.95em; }

/* header / footer */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; }
.brand-bar, .card-bar { display: inline-block; width: 10px; height: 28px; border-radius: 3px; background: var(--accent); }
/* the logo of the brand site where there is one (BRAND_LOGOS): in the header, and on a white plate on the dark cards of
   / (the CROWN tagline and the PULS letters are dark); the brand site itself sits in the nav on wide screens and in the
   footer everywhere */
.brand-mark-logo img { display: block; height: 36px; width: auto; }
.card-logo { display: block; box-sizing: content-box; height: 32px; width: auto; padding: 10px 14px; border-radius: 8px; background: #FFFFFF; }
.nav-site { color: var(--ink-2); }
@media (max-width: 720px) { .site-nav > .nav-site { display: none; } .brand-mark-logo img { height: 30px; } }
.site-nav { display: flex; gap: 18px; font-size: 0.95rem; align-items: center; }
.nav-form { margin: 0; }
.nav-form .btn-link { padding: 0; font-size: inherit; color: var(--ink); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; cursor: pointer; }
/* Tap targets of the header links: 44 px tall inside the 64 px header row, 8 px wider on each side through a padding
   that a negative margin cancels, so neither the text nor the header moves. */
.site-nav > a, .nav-form .btn-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin: 0 -8px; }
.site-footer { border-top: 1px solid var(--line); margin-top: 4rem; padding: 2rem 0; color: var(--ink-2); font-size: 0.9rem; }
a[href^="tel:"] { white-space: nowrap; }
/* Short pages (cabinet login, privacy): the body is a column at least a screen tall and <main> takes the free space,
   so the footer sits at the bottom of the screen instead of in its middle. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body > main { flex: 1 0 auto; width: 100%; }

/* hero and cards */
.hero { padding: 4rem 0 2.5rem; }
.hero-compact { padding: 2.5rem 0 1.5rem; }
/* the edition of the warranty terms: a date, not a heading (visual audit 17.10.2026: «Версія політики 2…» set large) */
.edition { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.85rem; }
.brand-title { color: var(--ink); }
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-decoration: none; }
.brand-card .card-bar { background: var(--card-accent); }
.card h2 { margin: 0; font-size: 1.5rem; }
.card-link { color: var(--ink-2); font-size: 0.95rem; }
.card:hover { border-color: var(--ink); }
/* The four brand tiles: two by two (auto-fit of 240 px tracks made a row of three and a lone fourth in the 840 px
   column), one column on phones. */
.actions { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
@media (max-width: 600px) { .actions { grid-template-columns: minmax(0, 1fr); } }
/* three tiles while the brand has no documents to show (no «Документи» tile): one row of three, not two and a lone one */
.actions.actions-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 600px) { .actions.actions-3 { grid-template-columns: minmax(0, 1fr); } }
.actions + .note { margin-top: 1.5rem; }
.action { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.action span { color: var(--ink-2); font-size: 0.95rem; }
.action:hover { border-color: var(--accent); }
.empty, .callout { padding: 24px; border-radius: var(--radius); background: var(--panel); margin: 1.5rem 0; }
.callout h2 { margin-top: 0; }

/* buttons: one accent button per page */
.btn { display: inline-block; padding: 14px 24px; border-radius: var(--radius); border: 2px solid transparent; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(0.92); }
.btn-primary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn-link { background: none; border: 0; padding: 8px 0; color: var(--ink-2); text-decoration: underline; font-weight: 500; }

/* forms */
.form { max-width: 40rem; }
.form-inline { margin-top: 1rem; }
fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
legend { font-size: 1.25rem; margin-bottom: 1rem; padding: 0; }
.field { margin-bottom: 1.25rem; }
.field-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
label, .label { display: block; font-weight: 600; margin-bottom: 6px; }
label.sub { margin-top: 10px; font-weight: 500; }
.radio, .field-check > label { font-weight: 500; display: flex; align-items: flex-start; gap: 10px; }
/* In a flex label every text run and link is its own flex item and cannot wrap: the text goes in one <span>. */
.field-check > label > span { min-width: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 8px; min-height: 48px;
}
input[type="file"] { color: var(--ink-2); }
input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: 0 0 auto; }
input:disabled { opacity: 0.6; }
.is-invalid input, .is-invalid select, .is-invalid textarea { border-color: var(--error); }
.field-error { color: var(--error); font-size: 0.95rem; margin: 6px 0 0; font-weight: 600; }
.hint { margin: 6px 0 0; }
.hint-ok { color: var(--ok); }
.form-actions { margin-top: 2rem; }
.form + .note { margin-top: 2rem; }

/* alerts */
.alert { padding: 14px 18px; border-radius: var(--radius); margin: 1rem 0 1.5rem; border: 1.5px solid var(--line); }
.alert-error { border-color: var(--error); color: var(--error); }
.alert-ok { border-color: var(--ok); color: var(--ok); }
.alert-warn { border-color: var(--warn); color: var(--warn); }

/* tables and lists */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.table th, .table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.list { padding-left: 1.2rem; }
.list li { margin-bottom: 0.4rem; }
.defs dt { font-weight: 700; margin-top: 1rem; }
.defs dd { margin: 0.25rem 0 0; color: var(--ink-2); }
/* cabinet */
.items { display: grid; gap: 16px; margin-top: 1.5rem; }
.item { padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.item-head { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; }
.item-head h2 { margin: 0; font-size: 1.3rem; }
.item-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--ink-2); font-size: 0.95rem; margin: 8px 0 12px; }
.item-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; border: 1.5px solid var(--line); color: var(--ink-2); }
.badge-ok { color: var(--ok); border-color: var(--ok); }
.badge-warn { color: var(--warn); border-color: var(--warn); }
.badge-error { color: var(--error); border-color: var(--error); }
textarea { width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius); }
/* the contact form (DEC-14): the text of the message, the honeypot off screen (not display:none, which bots skip), the
   compact Turnstile widget of the confirmation step (150 px, fits a 320 px screen), a message as written — its line
   breaks kept, a long word or address wrapped anywhere (the confirmation step, the office card and list) */
textarea { min-height: 10rem; resize: vertical; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 0 0 1.25rem; }
.message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.cell-wrap { overflow-wrap: anywhere; }
.actions-row { display: flex; flex-wrap: wrap; gap: 12px; }
.talon-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(1.5rem, 5vw, 2.25rem); font-weight: 700; margin: 0.5rem 0 1rem; }

@media (max-width: 520px) {
  .field-row { grid-template-columns: 1fr; }
  .site-header .wrap { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
  .hero { padding-top: 2.5rem; }
}

/* office */
.office .site-nav { flex-wrap: wrap; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-top: 1rem; }
.stat { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); text-decoration: none; }
.stat-value { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; line-height: 1; }
.stat-label { color: var(--ink-2); font-size: 0.9rem; }
.stat-accent { border-color: var(--accent); }
.stat-error { border-color: var(--error); }
.stat-error .stat-value { color: var(--error); }
.filters { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin: 1rem 0 1.5rem; }
.filters label { margin: 0; font-size: 0.95rem; }
.filters select { min-width: 180px; }
/* the filters of the messages of the contact form: a number or an e-mail, a network, a span of Kyiv time */
.filters input[type="text"], .filters input[type="datetime-local"] { width: auto; min-width: 180px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; min-height: 48px; }
/* documents of the models: a line per model, its name and the links of its documents */
.docs-list li { padding: 6px 0; }
.docs-model { font-weight: 600; }
/* warranty terms as a matrix: a row per product type (its name a row header), a column per use */
.table-wrap + .note { margin-top: 0.75rem; }
.terms-matrix th[scope="row"] { font-size: 0.98rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); }
.table-dense { font-size: 0.92rem; }
.table-dense th, .table-dense td { padding: 8px 10px; }
.list-plain { margin: 0; padding-left: 1rem; }
.columns { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.small { font-size: 0.85em; word-break: break-word; }
.decision-form { max-width: none; }
input[type="password"] { width: 100%; padding: 12px 14px; font: inherit; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; min-height: 48px; }

/* service centre registry (/b/{slug}/centers) */
.centers { list-style: none; padding-left: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.center { padding: 20px; border-radius: var(--radius); background: var(--panel); }
.center h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.center p { margin: 0.2rem 0; }

/* generated visuals (static/img, see README «Візуали»): backgrounds and section illustrations only, never product
   photos. A dark scrim sits under every text that stands on a photo, so white text keeps AA contrast whatever the frame. */
.hero-brand { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 48vh; margin-top: 1.5rem; padding: 2rem 28px; border-radius: var(--radius); overflow: hidden; background: #0F0F10; color: #FFFFFF; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(15,15,16,0.92) 0%, rgba(15,15,16,0.82) 55%, rgba(15,15,16,0.2) 100%); }
.hero-brand-right { justify-content: flex-end; }
/* PULS ENERGY: the generator stands at 44–52 % of its 21:9 frame and the text goes right. The frame is right-aligned
   (the crop falls on the left, so the generator moves left), the text column is narrower and the scrim is dark only
   under it (stops measured from the right edge), fading out within 110 px: the generator stays clear on every width. */
.hero-brand-right::before { background: linear-gradient(270deg, rgba(15,15,16,0.92) 0, rgba(15,15,16,0.84) calc(20rem + 28px), rgba(15,15,16,0.12) calc(20rem + 138px), rgba(15,15,16,0.08) 100%); }
.hero-brand-right .hero-text { max-width: 20rem; }
.hero-bg-puls img { object-position: 100% 50%; }
.hero-text { max-width: 30rem; }
.hero-brand .brand-title { color: #FFFFFF; }
.hero-brand .eyebrow, .hero-brand .lead { color: rgba(255,255,255,0.88); }
.brand-card { position: relative; isolation: isolate; justify-content: flex-end; min-height: 200px; overflow: hidden; border-color: transparent; background: #0F0F10; color: #FFFFFF; }
.card-bg { position: absolute; inset: 0; z-index: -2; }
.card-bg img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The cards crop the 21:9 hero to about 4:3: keep the grinder and the shelf builder (right side of their frames) in;
   the PULS ENERGY generator (44–52 %) moves to the right of the name, where its scrim opens up. */
.card-bg-crown img { object-position: 85% 50%; }
.card-bg-mytol img { object-position: 80% 50%; }
.card-bg-puls img { object-position: 0% 50%; }
.brand-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,15,16,0.15) 0%, rgba(15,15,16,0.88) 65%); }
.brand-card:has(.card-bg-puls)::before { background: linear-gradient(60deg, rgba(15,15,16,0.9) 0%, rgba(15,15,16,0.82) 42%, rgba(15,15,16,0.15) 72%); }
.brand-card h2 { color: #FFFFFF; }
.brand-card .card-link { color: rgba(255,255,255,0.88); }
.brand-card:hover { border-color: var(--card-accent); }
.form-layout { display: grid; grid-template-columns: minmax(0, 40rem) minmax(0, 1fr); gap: 40px; align-items: start; }
.form-aside { position: sticky; top: 24px; margin: 0; }
.form-aside img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.empty-illustrated { padding: 0; overflow: hidden; }
/* The decorative frame of an empty state (centers, docs) is a band, not half a screen over one line of text; the
   centers frame is the brand's own «Сервіс і гарантія», cropped around its focus point of the brand sites. */
.empty-illustrated img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.empty-media-crown img { object-position: 39% 45%; }
.empty-media-mytol img { object-position: 50% 40%; }
.empty-media-puls img { object-position: 68% 50%; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.empty-text { padding: 24px; }
.empty-text p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .form-aside { display: none; }
}
@media (max-width: 720px) {
  .hero-brand { min-height: 60vw; padding: 1.5rem 20px; }
  .hero-brand:not(.hero-brand-right)::before { background: linear-gradient(180deg, rgba(15,15,16,0.25) 0%, rgba(15,15,16,0.9) 60%); }
}
/* Phones take the 3:4 portrait frame of the brand sites (hero-portrait-*) in a box of about its shape, with the focus
   point of the sites (merit-brand-sites inc/visuals.php), instead of a blurred strip from the middle of the panorama.
   The scrim follows the text block (a fade 72 px above it), so the subject stays clear at the other end of the frame:
   the text sits at the bottom for CROWN and MYTOL, at the top for PULS ENERGY, whose generator stands at the bottom. */
@media (max-width: 600px) {
  .hero-brand { min-height: min(140vw, 640px); }
  .hero-brand:not(.hero-brand-right)::before, .hero-brand-right::before { background: rgba(15,15,16,0.1); }
  .hero-bg-crown img { object-position: 36% 50%; }
  .hero-bg-mytol img { object-position: 90% 50%; }
  .hero-bg-puls img { object-position: 95% 50%; }
  .hero-brand .hero-text, .hero-brand-right .hero-text { position: relative; max-width: none; }
  .hero-text::before { content: ""; position: absolute; z-index: -1; inset: -72px -20px -1.5rem; background: linear-gradient(180deg, rgba(15,15,16,0) 0, rgba(15,15,16,0.86) 72px, rgba(15,15,16,0.9) 100%); }
  .hero-brand-right { align-items: flex-start; }
  .hero-brand-right .hero-text::before { inset: -1.5rem -20px -72px; background: linear-gradient(0deg, rgba(15,15,16,0) 0, rgba(15,15,16,0.86) 72px, rgba(15,15,16,0.9) 100%); }
}

/* breadcrumbs, FAQ (terms page), importer facts (index) */
.crumbs { margin: 1rem 0 0; font-size: 0.92rem; color: var(--ink-2); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
/* The FAQ closes the terms page (the conditions come first): hairlines between the questions and a chevron of our
   own instead of the system triangle; <details> opens without any script. */
.faq { margin: 3rem 0 2rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq h2 + details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 16px 0; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .kit > summary::after { content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin: 0.35em 6px 0 0; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform 0.15s ease; }
.faq details[open] > summary::after, .kit[open] > summary::after { transform: translateY(0.3em) rotate(-135deg); }
.faq summary:hover::after, .kit > summary:hover::after { border-color: var(--ink); }
.faq summary:focus-visible, .kit > summary:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.faq details p { margin: 0 0 18px; padding-right: 36px; color: var(--ink-2); max-width: 46rem; }
@media (prefers-reduced-motion: reduce) { .faq summary::after, .kit > summary::after { transition: none; } }
/* The optional kit (two batteries and a charger) of /register folds into one line under «Покупка». */
.kit { margin: 0.5rem 0 0; border: 1px solid var(--line); border-radius: var(--radius); }
.kit > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.kit > summary::-webkit-details-marker { display: none; }
.kit > summary::after { margin-top: 0; }
.kit-fields { padding: 4px 18px 2px; border-top: 1px solid var(--line); }
.kit-fields .field-row:first-child { margin-top: 1rem; }
.importer p { margin-bottom: 0.5rem; }

/* phones (360 px review): a grid track of 1fr is minmax(auto, 1fr) and a fieldset defaults to
   min-inline-size: min-content, so the registration form ran past the right edge. Tables marked .table-stack become
   one card per row with the column name in front of each value (data-label), instead of a cut-off scroller. */
fieldset { min-width: 0; }
.form { min-width: 0; }
@media (max-width: 600px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-stack, .table-stack tbody, .table-stack tr { display: block; width: 100%; }
  .table-stack tr { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .table-stack td { display: grid; grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr); gap: 10px; padding: 4px 0; border: 0; }
  .table-stack td::before { content: attr(data-label); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
  .table-stack td:not([data-label]) { display: block; }
  .table-stack td:not([data-label])::before { content: none; }
  .table-stack th[scope="row"] { display: block; padding: 0 0 6px; border: 0; }
}

/* service library (owner 10.11.2026): search, brand filter, model list, parts table */
.library-search { margin: 0 0 1rem; max-width: 44rem; }
.library-search label { display: block; font-weight: 600; margin-bottom: 6px; }
.library-search-row { display: flex; gap: 10px; }
.library-search-row input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 12px 14px; font: inherit; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 8px; min-height: 48px; }
.library-search-row .btn { flex: 0 0 auto; }
.library-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.5rem; }
.library-filters a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line);
  border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.library-filters a[aria-current="page"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.library-counts { color: var(--ink-2); }
.library-brand h2 { margin-top: 2rem; }
.library-brand h3 { font-size: 1.05rem; margin: 1.25rem 0 0.5rem; color: var(--ink-2); }
.library-models { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.library-model { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.library-model > a { min-width: 0; text-decoration: none; }
.library-model > a:hover .library-article { text-decoration: underline; text-decoration-color: var(--accent); }
.library-article { font-weight: 700; white-space: nowrap; }
.library-name { color: var(--ink-2); }
.library-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.badge-parts { border-color: var(--accent); color: var(--ink); }
/* the badges of the library are links (owner 10.11.2026: they looked like buttons and did nothing) */
a.badge { text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
a.badge:hover, a.badge:focus-visible { border-color: var(--ink); color: var(--ink); }
.library-docs, .library-parts { scroll-margin-top: 16px; }
.library-doc-list { list-style: none; padding: 0; display: grid; gap: 12px; }
.library-sheet { display: block; max-width: 720px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.library-sheet img { display: block; width: 100%; height: auto; }
.parts-table td { font-variant-numeric: tabular-nums; }
.parts-table .part-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; user-select: all; }
.parts-table .num { text-align: right; }
.parts-table .part-en { display: block; color: var(--ink-2); font-size: 0.85rem; }
.parts-table tr:target { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.library-order { margin-top: 2rem; }
@media (max-width: 600px) {
  .library-search-row { flex-direction: column; }
  /* a row is a card on a phone: number, code and quantity on the first line, the names under them */
  .parts-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .parts-table, .parts-table tbody { display: block; }
  .parts-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pos code qty" "name name name";
    gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .parts-table-hits tr { grid-template-areas: "model model qty" "pos code code" "name name name"; }
  .parts-table td { display: block; padding: 0; border: 0; }
  .parts-table .c-model { grid-area: model; font-weight: 700; }
  .parts-table .c-pos { grid-area: pos; color: var(--ink-2); }
  .parts-table .c-pos::before { content: "№ "; }
  .parts-table .c-code { grid-area: code; }
  .parts-table .c-qty { grid-area: qty; color: var(--ink-2); }
  .parts-table .c-qty:not(:empty)::before { content: "× "; }
  .parts-table .c-name { grid-area: name; }
}


/* text for screen readers only («відкривається в новому вікні» of the library links) */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }