/*
 * Support and Innovations pages (pages/section-page, components/page-blocks, partials/section/*) and /search.
 * Mobile-first (360px), tokens only, rem only; hover effects inside (hover: hover). Pieces shared with the rest of
 * the shop (hud-btn, section-label, breadcrumb, prose, field, notice) come from hud.css / components.css.
 */
.section-page { padding-bottom: var(--space-12); }
.section-head { margin-bottom: var(--space-6); }
.section-head .lead, .feature-hero__summary { max-width: 62ch; margin: 0; color: var(--color-muted-text); font-size: var(--fs-lead); line-height: 1.55; }

/* ---------- feature hero: text + photo (photo first on phones? no: text first, it holds the H1) ---------- */
.feature-hero { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--space-4) var(--space-8); }
.feature-hero__text { display: grid; gap: var(--space-4); align-content: start; }
.feature-hero__title { margin: 0; font-size: var(--fs-h2); line-height: var(--leading-display); overflow-wrap: break-word; }
.section-page--hub .feature-hero__title { font-size: var(--fs-hero); }
.feature-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.feature-hero__media { display: grid; place-items: center; margin: 0; border-radius: var(--radius-md); overflow: hidden; background: var(--hud-media-bg, var(--color-surface)); }
/* the whole photo, in its own proportions; very tall or very wide photos are fitted inside, never cut */
/* width comes from the img width attribute (the file's real size): small photos are never blown up */
.feature-hero__img, .feature-hero__media img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(70vh, 34rem); object-fit: contain; }
/* catalogue product photos (cut-outs on white): shown whole */
.feature-hero__media--contain { background: var(--color-background); border: 1px solid var(--color-border); }
.feature-hero__media--contain img { object-fit: contain; padding: var(--space-4); }
@media (min-width: 64rem) {
  .feature-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-6) var(--space-12); }
}

/* ---------- support hub search ---------- */
.support-search { display: grid; gap: var(--space-2); margin-bottom: var(--space-8); max-width: 44rem; }
.support-search__label { font-weight: 600; color: var(--color-text-strong); }
.support-search__field { position: relative; display: flex; gap: var(--space-2); align-items: center; }
.support-search__field > .icon { position: absolute; left: var(--space-3); width: 1.25rem; height: 1.25rem; color: var(--color-muted-text); pointer-events: none; }
.support-search__input { flex: 1 1 auto; min-width: 0; padding-left: var(--space-10); }
.support-search__submit { flex: none; }
.support-search__hint { margin: 0; min-height: 1.25rem; font-size: var(--fs-small); color: var(--color-muted-text); }

/* ---------- cards for children (hub, group, related) ---------- */
.page-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0 0 var(--space-10); padding: 0; list-style: none; }
.page-cards--large { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5); }
.page-cards--compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.page-card { display: flex; }
.page-card[hidden] { display: none; }
.page-card__link {
  display: flex; flex-direction: column; width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-background); color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.page-card__media { display: block; aspect-ratio: 16 / 10; background: var(--hud-media-bg, var(--color-surface)); overflow: hidden; }
.page-card__img, .page-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.page-card__body { display: grid; gap: var(--space-2); align-content: start; flex: 1; padding: var(--space-4) var(--space-5) var(--space-5); }
.page-card__title { font-family: var(--font-hud-body); font-size: var(--fs-body); font-weight: 600; line-height: 1.3; color: var(--color-text-strong); }
.page-cards--large .page-card__title { font-family: var(--font-hud-display); font-size: var(--fs-h3); text-transform: uppercase; letter-spacing: var(--tracking-display); }
.page-card__text { font-size: var(--fs-small); line-height: 1.5; color: var(--color-muted-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.page-card__more { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; padding-top: var(--space-2); font-size: var(--fs-small); font-weight: 600; color: var(--color-text-strong); }
.page-card__more .icon { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--ease); }
@media (hover: hover) {
  .page-card__link:hover { border-color: var(--color-text-strong); box-shadow: var(--shadow-md); }
  .page-card__link:hover .page-card__more .icon { transform: translateX(0.25rem); }
}
.page-card__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- body with an optional table of contents ---------- */
.section-body { display: grid; gap: var(--space-8); }
.section-body__main { display: grid; gap: var(--space-10); min-width: 0; }
.section-body__main:empty { display: none; }
.page-toc { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.page-toc__title { margin: 0 0 var(--space-2); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-text); }
.page-toc__list { margin: 0; padding: 0; list-style: none; columns: 2 12rem; column-gap: var(--space-6); }
.page-toc__list a { display: flex; align-items: center; min-height: var(--tap); font-size: var(--fs-small); color: var(--color-text); text-decoration: none; }
@media (hover: hover) { .page-toc__list a:hover { color: var(--color-primary); } }
@media (min-width: 64rem) {
  .section-body--toc { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; gap: var(--space-12); }
  .page-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); max-height: calc(100vh - var(--header-h) - var(--space-8)); overflow: auto; }
  .page-toc__list { columns: 1; }
  .page-toc__list a { min-height: 2.25rem; }
}

/* ---------- blocks ---------- */
.block { display: grid; gap: var(--space-4); min-width: 0; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.block__title { margin: 0; font-size: var(--fs-h3); line-height: 1.15; scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.block__prose { max-width: 70ch; }
/* prose rhythm (product.css is not loaded here) */
.section-page .prose > * + *, .section-page .accordion__a > * + * { margin-top: var(--space-3); }
.section-page .prose :is(ul, ol) { padding-left: 1.25rem; }
.section-page .prose li + li { margin-top: var(--space-1); }
.section-page .prose h3 { margin-top: var(--space-5); font-size: var(--fs-body); font-family: var(--font-hud-body); text-transform: none; letter-spacing: 0; }
.block__prose a, .accordion__a a { color: var(--color-link); }

/* how it works */
.steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.steps__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.steps__num { font-family: var(--font-hud-mono); font-size: var(--fs-small); font-weight: 600; color: var(--color-primary); line-height: 1.6; }
.steps__body { display: grid; gap: var(--space-1); }
.steps__title { margin: 0; font-family: var(--font-hud-body); font-size: var(--fs-body); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-text-strong); }
.steps__text { margin: 0; color: var(--color-muted-text); line-height: 1.6; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }

/* tables: specs (label | value) and data tables (sticky first column when they scroll) */
.table-scroll { max-width: 100%; overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.specs-table, .data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); }
.specs-table caption, .data-table caption { padding: var(--space-3) var(--space-4); text-align: left; font-weight: 600; color: var(--color-text-strong); }
.specs-table th, .specs-table td, .data-table th, .data-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; line-height: 1.5; }
.specs-table tr:last-child > *, .data-table tbody tr:last-child > * { border-bottom: 0; }
.specs-table th { width: 40%; font-weight: 600; color: var(--color-muted-text); }
.specs-table td { color: var(--color-text-strong); }
.data-table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-surface); font-weight: 600; color: var(--color-text-strong); white-space: nowrap; }
.data-table tbody th { font-weight: 600; color: var(--color-text-strong); }
.data-table td.is-yes { color: var(--color-success); }
.data-table td.is-yes .icon { width: 1rem; height: 1rem; vertical-align: -0.15em; margin-right: var(--space-1); }
.data-table td.is-no { color: var(--color-subtle-text); }
.table-scroll--sticky .data-table { min-width: 40rem; }
.table-scroll--sticky .data-table :is(thead th, tbody th):first-child { position: sticky; left: 0; z-index: 2; min-width: 9rem; max-width: 12rem; background: var(--color-background); box-shadow: 1px 0 0 var(--color-border); }
.table-scroll--sticky .data-table thead th:first-child { z-index: 3; background: var(--color-surface); }
@media (min-width: 64rem) { .table-scroll--sticky .data-table :is(thead th, tbody th):first-child { max-width: 18rem; } }

/* code (data protocol) */
.code-block { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.code-block__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--tap); padding-left: var(--space-4); border-bottom: 1px solid var(--color-border); }
.code-block__lang { font-family: var(--font-hud-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted-text); }
.code-block__copy { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); border: 0; background: none; color: var(--color-text-strong); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.code-block__copy .icon { width: 1rem; height: 1rem; }
.code-block__copy:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.code-block__pre { margin: 0; padding: var(--space-4); overflow-x: auto; font-family: var(--font-hud-mono); font-size: var(--fs-small); line-height: 1.6; white-space: pre; color: var(--color-text-strong); }
.code-block__pre:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
@media (hover: hover) { .code-block__copy:hover { color: var(--color-primary); } }
.prose code, .data-table code, .steps__text code { font-family: var(--font-hud-mono); font-size: 0.9em; }

/* gallery (opens the viewer) */
.content-gallery { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.content-gallery__link { display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--hud-media-bg, var(--color-surface)); }
.content-gallery__img, .content-gallery__link img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; transition: transform var(--dur) var(--ease); }
.content-gallery__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (hover: hover) { .content-gallery__link:hover img { transform: scale(1.03); } }

/* info cards */
.info-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.info-card { position: relative; display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.info-card__media { margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-2); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--hud-media-bg, var(--color-surface)); }
.info-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.info-card__title { margin: 0; font-family: var(--font-hud-body); font-size: var(--fs-body); font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--color-text-strong); }
.info-card__title a { color: inherit; text-decoration: none; }
.info-card__title a::after { content: ""; position: absolute; inset: 0; }
.info-card__text { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--color-muted-text); }
@media (hover: hover) { .info-card--link:hover { border-color: var(--color-text-strong); } }
.info-card--link:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* accordion (FAQ) */
.accordion { border-top: 1px solid var(--color-border); }
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__item[hidden] { display: none; }
.accordion__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 3rem; padding-block: var(--space-3); cursor: pointer; list-style: none; font-weight: 600; color: var(--color-text-strong); line-height: 1.4; }
.accordion__q::-webkit-details-marker { display: none; }
.accordion__icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-muted-text); transition: transform var(--dur-fast) var(--ease); }
.accordion__item[open] .accordion__icon { transform: rotate(45deg); }
.accordion__q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.accordion__a { padding-bottom: var(--space-4); color: var(--color-text); max-width: 70ch; }
@media (hover: hover) { .accordion__q:hover { color: var(--color-primary); } }

/* call to action */
.callout { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-background); color: var(--color-text); }
.callout__title { margin: 0; font-size: var(--fs-h3); color: var(--color-text-strong); }
.callout__text { margin: 0; color: var(--color-muted-text); }

/* video (same facade as the review stories) */
.video-embed { max-width: 50rem; }
.video-embed .review-video__facade { display: flex; align-items: center; gap: var(--space-4); width: 100%; min-height: 10rem; padding: var(--space-6); border: 0; border-radius: var(--radius-md); background: var(--color-text-strong); color: var(--color-background); text-align: left; cursor: pointer; }
.video-embed .review-video__play { display: grid; place-items: center; flex: none; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-primary); }
.video-embed .review-video__play .icon { width: 1.5rem; height: 1.5rem; }
.video-embed .review-video__text { display: grid; gap: var(--space-1); font-weight: 600; font-size: var(--text-lg); }
.video-embed .review-video__note { font-weight: 400; font-size: var(--text-sm); opacity: 0.8; }
.video-embed .review-video__frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-md); }
@media (hover: hover) { .video-embed .review-video__facade:hover .review-video__play { background: var(--color-primary-hover); } }

/* downloads and links */
.download-list, .link-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.download-list__link, .link-list__link {
  display: flex; align-items: center; gap: var(--space-3); min-height: 3rem; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-strong); text-decoration: none;
}
.download-list__link .icon, .link-list__link .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--color-primary); }
.download-list__label { flex: 1; font-weight: 600; }
.download-list__meta { font-size: var(--fs-small); color: var(--color-muted-text); white-space: nowrap; }
.link-list__link { justify-content: space-between; font-weight: 600; }
.link-list__note { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--color-muted-text); }
@media (hover: hover) { .download-list__link:hover, .link-list__link:hover { border-color: var(--color-text-strong); } }
.download-list__link:focus-visible, .link-list__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Shop this ---------- */
.shop-this { margin-top: var(--space-12); padding-block: var(--space-12); background: var(--color-background); color: var(--color-text); }
.shop-this__head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.shop-this__title { margin: 0; font-size: var(--fs-h2); color: var(--color-text-strong); }
.shop-this__grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.shop-this__card { display: grid; gap: var(--space-2); align-content: start; height: 100%; padding: var(--space-3); border: 1px solid var(--hud-line-strong, var(--color-border)); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.shop-this__media { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: var(--color-text); overflow: hidden; }
.shop-this__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--space-2); mix-blend-mode: multiply; }
.shop-this__media .icon { width: 2rem; height: 2rem; color: var(--color-muted-text); }
.shop-this__name { font-weight: 600; line-height: 1.3; color: var(--color-text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-this__price { font-size: var(--fs-lead); font-weight: 600; color: var(--color-text-strong); }
.shop-this__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.shop-this__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--hud-line-strong, var(--color-border)); border-radius: var(--radius-pill); color: var(--color-text-strong); font-weight: 600; text-decoration: none; }
.shop-this__link .icon { width: 1rem; height: 1rem; }
@media (hover: hover) {
  .shop-this__card:hover, .shop-this__link:hover { border-color: var(--color-primary); }
  .shop-this__card:hover .shop-this__name { color: var(--color-primary); }
}
.shop-this__card:focus-visible, .shop-this__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.related-pages { padding-top: var(--space-12); display: grid; gap: var(--space-5); }
.related-pages .page-cards { margin-bottom: 0; }

/* ---------- Need help? ---------- */
.help-cta { padding-block: var(--section-y); background: var(--color-background); color: var(--color-text); border-top: 1px solid var(--color-border); }
.help-cta__inner { display: grid; gap: var(--space-6); }
.help-cta__text { display: grid; gap: var(--space-3); }
.help-cta__title { margin: 0; font-size: var(--fs-h2); color: var(--color-text-strong); }
.help-cta__lead { margin: 0; max-width: 52ch; color: var(--color-muted-text); }
.help-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.help-cta__channel { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--hud-line-strong, var(--color-border)); border-radius: var(--radius-pill); color: var(--color-text-strong); font-weight: 600; text-decoration: none; }
.help-cta__channel .icon { width: 1.125rem; height: 1.125rem; }
@media (hover: hover) { .help-cta__channel:hover { border-color: var(--color-primary); } }
@media (min-width: 64rem) { .help-cta__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }

/* ---------- firmware ---------- */
.firmware__filter { display: grid; gap: var(--space-2); max-width: 28rem; }
.firmware__filter-row { display: flex; gap: var(--space-2); }
.firmware__filter-row .select { flex: 1; min-width: 0; }
.firmware__table tr[hidden] { display: none; }
.firmware__version code { font-family: var(--font-hud-mono); white-space: nowrap; }
.firmware__log details summary { cursor: pointer; color: var(--color-link); font-weight: 600; min-height: var(--tap); display: flex; align-items: center; }
.firmware__log details[open] summary { margin-bottom: var(--space-2); }
.firmware__dl .btn { white-space: nowrap; gap: var(--space-2); }
.firmware__dl .icon { width: 1rem; height: 1rem; }
.firmware__count { margin: 0; font-size: var(--fs-small); }
/* phones: one card per build */
@media (max-width: 47.999rem) {
  .firmware__scroll { border: 0; overflow: visible; }
  .firmware__table, .firmware__table tbody, .firmware__table tr, .firmware__table th, .firmware__table td { display: block; }
  .firmware__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .firmware__table tr { margin-bottom: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .firmware__table th, .firmware__table td { padding: var(--space-1) 0; border: 0; }
  .firmware__table td[data-label] { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-2); }
  .firmware__table td[data-label]::before { content: attr(data-label); color: var(--color-muted-text); }
  .firmware__table .firmware__version { font-size: var(--fs-body); }
  .firmware__dl { padding-top: var(--space-2) !important; }
}

/* ---------- FAQ page ---------- */
.faq-page { gap: var(--space-8); }
.faq-page__tools { display: grid; gap: var(--space-2); max-width: 32rem; }
.faq-page__tools p { margin: 0; min-height: 1.25rem; font-size: var(--fs-small); }
.topic-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.topic-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-pill); color: var(--color-text-strong); font-size: var(--fs-small); font-weight: 600; text-decoration: none; }
.topic-chip__count { font-size: var(--fs-label); color: var(--color-muted-text); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .topic-chip:hover { border-color: var(--color-text-strong); } }
.faq-topic { display: grid; gap: var(--space-3); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.faq-topic[hidden] { display: none; }

/* ---------- certificates ---------- */
.cert-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.cert-card { display: grid; gap: var(--space-2); align-content: start; }
.cert-card__open { display: grid; gap: var(--space-3); color: inherit; text-decoration: none; }
.cert-card__media { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 4; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.cert-card__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--space-2); }
.cert-card__media .icon { width: 3rem; height: 3rem; color: var(--color-muted-text); }
.cert-card__title { font-weight: 600; line-height: 1.35; color: var(--color-text-strong); }
.cert-card__download { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--tap); font-size: var(--fs-small); font-weight: 600; color: var(--color-link); text-decoration: none; }
.cert-card__download .icon { width: 1rem; height: 1rem; }
.cert-card__open:focus-visible .cert-card__media { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (hover: hover) { .cert-card__open:hover .cert-card__media { border-color: var(--color-text-strong); } .cert-card__download:hover { text-decoration: underline; } }

/* ---------- viewer ---------- */
.viewer { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--color-text-strong); color: var(--color-background); }
.viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer::backdrop { background: var(--color-text-strong); }
.viewer__bar { display: flex; align-items: center; gap: var(--space-2); min-height: var(--header-h); padding: 0 var(--space-2) 0 var(--gutter); }
.viewer__caption { flex: 1; margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer__stage { display: grid; place-items: center; min-height: 0; padding: var(--space-2) var(--gutter) var(--space-6); }
.viewer__stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer__stage iframe { width: 100%; height: 100%; border: 0; background: var(--color-background); }
.viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); background: color-mix(in srgb, var(--color-text-strong) 60%, transparent); color: var(--color-background); }
.viewer__nav--prev { left: var(--space-2); }
.viewer__nav--next { right: var(--space-2); }
.viewer__nav[hidden] { display: none; }

/* ---------- trade-in form ---------- */
.trade-in__form { display: grid; gap: var(--space-4); max-width: 44rem; }
.form__grid { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.input--file { padding-block: var(--space-2); }
.form__privacy { margin: 0; font-size: var(--fs-small); }
.trade-in .notice--success { box-shadow: inset 0 0 0 1.5px var(--color-success); }
.trade-in .notice p { margin: 0; font-weight: 400; }

/* ---------- /search ---------- */
.search-page .support-search { margin-bottom: 0; }
.search-group { display: grid; gap: var(--space-4); margin-bottom: var(--space-10); }
.search-products { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.search-product { display: grid; grid-template-columns: 5rem minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.search-product__media { grid-row: span 2; aspect-ratio: 4 / 3; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.search-product__media { position: relative; }
.search-product__media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.search-product__name { font-weight: 600; line-height: 1.3; color: var(--color-text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-product__price { font-size: var(--fs-small); color: var(--color-muted-text); }
.search-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.search-hit { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.search-hit__kicker { font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted-text); }
.search-hit__title { font-weight: 600; color: var(--color-text-strong); }
.search-hit__text { font-size: var(--fs-small); color: var(--color-muted-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) { .search-product:hover, .search-hit:hover { border-color: var(--color-text-strong); } }
.search-product:focus-visible, .search-hit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .page-card__link, .page-card__more .icon, .content-gallery__img, .content-gallery__link img, .accordion__icon { transition: none; }
}