/* ==========================================================================
   Dom-Detal — pages app: info pages, FAQ, contacts, part request.
   Builds on base.css tokens and components (.btn, .card, .field, .input,
   .accordion, .alert, .chip, .icon-tile …). Mobile-first.

   1. Section shell & side nav     5. FAQ
   2. Reading layout (.info-*)     6. Forms (shared)
   3. Table of contents            7. Contacts
   4. "Залишились питання?" card   8. Part request
   ========================================================================== */

/* 1. Section shell & side nav ============================================== */
.info-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8);
  padding-top: var(--sp-2);
}
.info-main { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.info-aside { order: 2; min-width: 0; }
.info-rail { display: none; }
@media (min-width: 1024px) {
  .info-layout { grid-template-columns: 252px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .info-aside { order: 0; position: sticky; top: calc(var(--header-row) + 20px); }
}
@media (min-width: 1280px) {
  .info-layout--rail { grid-template-columns: 252px minmax(0, 1fr) 216px; gap: var(--sp-10); }
  .info-rail { display: block; position: sticky; top: calc(var(--header-row) + 28px); min-width: 0; }
  .info-layout--rail .toc--inline { display: none; }
}

.info-nav {
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl);
  padding: 10px;
}
.info-nav__heading { font-family: var(--font-head); font-weight: 800; font-size: var(--fs-lg); color: var(--c-ink); padding: 8px 10px 2px; letter-spacing: -.01em; }
.info-nav__group + .info-nav__group { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--c-line); }
.info-nav__title {
  padding: 10px 12px 6px;
  font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-400);
}
.info-nav__list { display: grid; gap: 2px; }
.info-nav__link {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 8px 10px 8px 12px; border-radius: var(--r-md);
  font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; color: var(--c-ink-700);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.info-nav__link > .icon { --icon-size: 18px; color: var(--c-ink-400); transition: color var(--dur-fast) var(--ease); }
.info-nav__link > span { flex: 1; min-width: 0; }
.info-nav__chev { --icon-size: 16px !important; opacity: 0; transform: translateX(-4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out); }
.info-nav__link:hover { background: var(--c-ink-50); color: var(--c-ink); }
.info-nav__link:hover > .icon { color: var(--c-primary); }
.info-nav__link:hover .info-nav__chev { opacity: .7; transform: none; }
.info-nav__link:focus-visible { outline: none; box-shadow: var(--ring); }
.info-nav__link.is-active { background: var(--c-primary-50); color: var(--c-primary-700); }
.info-nav__link.is-active > .icon { color: var(--c-primary); }
.info-nav__link.is-active .info-nav__chev { opacity: 1; transform: none; color: var(--c-primary); }
@media (min-width: 560px) and (max-width: 1023.98px) {
  .info-nav__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 6px; }
}
@media (min-width: 1024px) {
  .info-nav__heading { display: none; }
  .info-nav { max-height: calc(100vh - var(--header-row) - 40px); overflow-y: auto; scrollbar-width: thin; }
}

/* 2. Reading layout ========================================================= */
.info-head { padding-top: var(--sp-2); }
.info-head__title { font-size: var(--fs-3xl); margin-top: 10px; }
.info-head__sub { margin-top: 10px; max-width: 60ch; color: var(--c-ink-500); font-size: var(--fs-md); line-height: 1.55; }

.info-article.prose {
  max-width: none;
  padding: clamp(20px, .9rem + 2.4vw, 48px);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-xl);
  font-size: var(--fs-base); line-height: 1.75; color: var(--c-ink-700);
}
.info-article > * { max-width: 72ch; }
.info-article > .table-wrap { max-width: none; }
.info-article > .lead:first-child {
  font-size: var(--fs-lg); line-height: 1.6; color: var(--c-ink-800);
  padding-bottom: var(--sp-6); border-bottom: 1px solid var(--c-line); max-width: none;
}
.info-article h2 {
  position: relative;
  font-size: var(--fs-xl); line-height: var(--lh-snug); margin-top: 2.1em;
  padding-left: 16px; scroll-margin-top: calc(var(--header-row) + 72px);
}
.info-article h2::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 4px;
  background: linear-gradient(180deg, var(--c-primary), #6E97FF);
}
.info-article > .lead:first-child + h2 { margin-top: 1.6em; }
.info-article h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); margin-top: 1.7em; scroll-margin-top: calc(var(--header-row) + 72px); }
.info-article h2 + *, .info-article h3 + * { margin-top: .65em; }
.info-article strong { color: var(--c-ink); }
.info-article small { display: inline-block; font-size: var(--fs-sm); color: var(--c-ink-500); }
.info-article ul, .info-article ol { padding-left: 1.35em; }
.info-article li + li { margin-top: .5em; }
.info-article ol > li::marker { color: var(--c-primary); font-weight: 700; }
.info-article li > ul, .info-article li > ol { margin-top: .5em; }
.info-article a { word-break: break-word; }

/* Callout (<aside class="note">) */
.info-article .note {
  position: relative; max-width: none;
  margin-block: 1.6em; padding: 16px 18px 16px 54px;
  border-radius: var(--r-lg); background: var(--c-accent-50); border: 1px solid var(--c-accent-100);
  color: var(--c-ink-700); line-height: 1.6;
}
.info-article .note::before {
  content: ""; position: absolute; left: 18px; top: 17px; width: 22px; height: 22px; background: var(--c-accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.25'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E") center / contain no-repeat;
}
.info-article .note > * + * { margin-top: .6em; }

/* Tables (<div class="table-wrap"><table><caption>…) */
.info-article .table-wrap {
  margin-block: 1.4em; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  border: 1px solid var(--c-line); border-radius: var(--r-lg); background: var(--c-surface);
}
.info-article .table-wrap table { width: 100%; min-width: 480px; font-size: var(--fs-sm); line-height: 1.5; }
.info-article caption {
  caption-side: top; text-align: left; padding: 14px 16px 12px;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-base); color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
}
.info-article th, .info-article td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-line); }
.info-article thead th {
  background: var(--c-ink-50); white-space: nowrap;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-500);
}
.info-article tbody th { font-weight: 650; color: var(--c-ink); }
.info-article tbody tr:last-child > * { border-bottom: 0; }
.info-article tbody tr:hover > * { background: var(--c-ink-50); }
/* Phones: tables marked .table-wrap--stack turn into stacked rows (cells carry data-label). */
@media (max-width: 559.98px) {
  .info-article .table-wrap--stack { overflow: visible; }
  .info-article .table-wrap--stack table, .info-article .table-wrap--stack tbody,
  .info-article .table-wrap--stack tr, .info-article .table-wrap--stack caption { display: block; min-width: 0; width: 100%; }
  .info-article .table-wrap--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .info-article .table-wrap--stack tr { padding: 12px 16px; border-bottom: 1px solid var(--c-line); }
  .info-article .table-wrap--stack tr:last-child { border-bottom: 0; }
  .info-article .table-wrap--stack tbody th, .info-article .table-wrap--stack td { display: block; padding: 0; border: 0; background: none !important; }
  .info-article .table-wrap--stack tbody th { margin-bottom: 4px; }
  .info-article .table-wrap--stack td { display: flex; gap: 8px; font-size: var(--fs-sm); }
  .info-article .table-wrap--stack td[data-label]::before { content: attr(data-label) ":"; min-width: 72px; color: var(--c-ink-500); }
}

/* 3. Table of contents ====================================================== */
.toc__list { list-style: none; padding: 0; margin: 0; }
.toc__list a {
  display: block; padding: 6px 10px; border-radius: var(--r-sm);
  font-size: var(--fs-sm); line-height: 1.4; color: var(--c-ink-600);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.toc__list a:hover { color: var(--c-primary); }
.toc--inline { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg); }
.toc__summary {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; list-style: none;
  font-weight: 700; color: var(--c-ink); border-radius: var(--r-lg);
}
.toc__summary > .icon { --icon-size: 20px; color: var(--c-primary); }
.toc__summary:focus-visible { outline: none; box-shadow: var(--ring); }
.toc__summary::after {
  content: ""; width: 20px; height: 20px; flex: none; background: var(--c-ink-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.25 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.25 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur) var(--ease-out);
}
.toc--inline[open] > .toc__summary::after { transform: rotate(180deg); }
.toc__count {
  margin-left: auto; display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px;
  border-radius: var(--r-full); background: var(--c-ink-100); color: var(--c-ink-600); font-size: var(--fs-xs); font-weight: 700;
}
.toc--inline .toc__list { padding: 0 8px 12px; border-top: 1px solid var(--c-line); padding-top: 8px; animation: dd-fade var(--dur-slow) var(--ease); }
.toc--rail { border-left: 2px solid var(--c-line); max-height: calc(100vh - var(--header-row) - 56px); overflow-y: auto; scrollbar-width: thin; }
.toc__title { padding: 2px 14px 10px; font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-400); }
.toc--rail .toc__list a { margin-left: -2px; padding-left: 14px; border-left: 2px solid transparent; border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-xs); }
.toc--rail .toc__list a.is-active { color: var(--c-primary); border-left-color: var(--c-primary); font-weight: 650; background: linear-gradient(90deg, var(--c-primary-50), transparent); }

/* 4. "Залишились питання?" card ============================================= */
.help-card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 18px; align-items: center;
  padding: clamp(20px, 1rem + 1.6vw, 32px);
  border-radius: var(--r-xl);
  background: radial-gradient(120% 140% at 100% 0%, #3D78FF 0%, var(--c-primary) 40%, #1238B0 100%);
  color: #fff;
}
.help-card::after {
  content: ""; position: absolute; right: -70px; bottom: -110px; width: 280px; height: 280px; z-index: -1;
  background: radial-gradient(circle, rgba(255, 164, 27, .5), rgba(255, 164, 27, 0) 65%);
}
.help-card__lead { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.help-card__icon {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.help-card__icon .icon { --icon-size: 26px; color: #fff; }
.help-card__title { color: #fff; font-size: var(--fs-xl); }
.help-card__text { margin-top: 6px; max-width: 52ch; color: rgba(255, 255, 255, .92); line-height: 1.55; }
.help-card__hours { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: var(--fs-sm); color: rgba(255, 255, 255, .92); }
.help-card__hours .icon { --icon-size: 16px; flex: none; }
.help-card__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.help-card__btn { --btn-bg: rgba(255, 255, 255, .12); --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, .32); --btn-bg-hover: rgba(255, 255, 255, .22); }
.help-card .btn--white { font-family: var(--font-head); font-weight: 800; }
.help-card .btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .55); }
@media (max-width: 479.98px) {
  .help-card__actions .btn:not(.btn--icon) { flex: 1 1 100%; }
}
@media (min-width: 900px) {
  .help-card { grid-template-columns: minmax(0, 1fr) auto; }
  .help-card__actions { justify-content: flex-end; max-width: 360px; }
}

/* 5. FAQ ===================================================================== */
.faq { display: flex; flex-direction: column; gap: var(--sp-6); }
.faq-tools { display: flex; flex-direction: column; gap: 12px; }
.faq-search .input { min-height: 52px; border-radius: var(--r-lg); background: var(--c-surface); padding-right: 16px; }
.faq-search .input::-webkit-search-cancel-button { cursor: pointer; }
.faq-cats { padding-bottom: 4px; }
.faq-cats .chip { gap: 8px; }
@media (min-width: 768px) { .faq-cats.chips--scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.faq-group { scroll-margin-top: calc(var(--header-row) + 72px); }
.faq-group__title { font-size: var(--fs-xl); margin-bottom: 12px; display: flex; align-items: center; gap: 10px; }
.faq-group__title::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c-primary); transform: rotate(45deg); flex: none; }
.faq-item { scroll-margin-top: calc(var(--header-row) + 72px); }
.faq-item .accordion__head { font-size: var(--fs-base); padding-block: 16px; }
.faq-item .accordion__body > p { max-width: 70ch; }
.faq-item__link { margin-top: 10px; font-size: var(--fs-sm); }
.faq-item.is-hit .accordion__head { color: var(--c-primary-700); }
.faq mark { padding: 0 2px; }

/* 6. Forms (shared) ========================================================== */
.pages-head { padding-top: var(--sp-2); }
.pages-head .page-head__title { margin-top: 10px; }
.pages-head .page-head__sub { max-width: 64ch; font-size: var(--fs-md); line-height: 1.55; }

.form-card { padding: clamp(18px, .9rem + 1.6vw, 32px); border-radius: var(--r-xl); scroll-margin-top: calc(var(--header-row) + 72px); }
.form-card__title { font-size: var(--fs-xl); }
.form-card__sub { margin: 6px 0 var(--sp-5); color: var(--c-ink-500); font-size: var(--fs-sm); }
.form-alert { grid-column: 1 / -1; }
.form-alert p + p { margin-top: 4px; }
.field__opt { margin-left: 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--c-ink-400); }
.field.is-invalid .field__label { color: var(--c-danger); }
.field__error .icon { flex: none; }
.form-consent { font-size: var(--fs-xs); color: var(--c-ink-500); line-height: 1.5; }
.form-consent a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 2px; }
/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
.hp-field { position: absolute !important; left: -10000px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

.success-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: clamp(12px, 2vw, 28px) 4px; }
.success-state:focus { outline: none; }
.success-state__icon {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 28px; margin-bottom: 6px;
  background: var(--c-success-50); color: var(--c-success-ink);
  box-shadow: inset 0 0 0 8px rgba(255, 255, 255, .6);
  animation: dd-pop .5s var(--ease-spring) both;
}
.success-state__icon .icon { --icon-size: 40px; }
.success-state__title { font-size: var(--fs-2xl); }
.success-state__text { max-width: 46ch; color: var(--c-ink-600); }
.success-state__hours { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--c-ink-500); }
.success-state__hours .icon { --icon-size: 16px; }
.success-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

/* 7. Contacts ================================================================ */
.contacts-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .contacts-layout { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--sp-8); } }
@media (min-width: 1024px) { .contact-form { position: sticky; top: calc(var(--header-row) + 20px); } }
.contact-cards { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contact-card {
  display: flex; align-items: flex-start; gap: 14px; min-width: 0;
  padding: 18px; border-radius: var(--r-lg);
  background: var(--c-surface); border: 1px solid var(--c-line);
}
.contact-card .icon-tile { --tile: 44px; }
.contact-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-card__label { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-500); }
.contact-card__value { font-weight: 700; color: var(--c-ink); overflow-wrap: anywhere; line-height: 1.35; }
a.contact-card__value { transition: color var(--dur-fast) var(--ease); }
a.contact-card__value:hover { color: var(--c-primary); }
.contact-card__value--lg { font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.contact-card__value--text { font-style: normal; font-weight: 600; }
.contact-card__note { font-size: var(--fs-xs); color: var(--c-ink-500); line-height: 1.45; margin-top: 2px; }
.contact-card__link { margin-top: 4px; font-size: var(--fs-sm); }
.contact-card--primary { background: linear-gradient(135deg, var(--c-primary-50), var(--c-surface) 70%); border-color: var(--c-primary-100); }
.contact-card--wide { grid-column: 1 / -1; }
.contact-hours { list-style: none; padding: 0; display: grid; gap: 2px; font-weight: 600; color: var(--c-ink); font-size: var(--fs-sm); }
.contact-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.contacts-benefits { list-style: none; padding: 0; margin-top: var(--grid-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contacts-benefits .benefit { background: transparent; border-style: dashed; }
@media (min-width: 1024px) { .contacts-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.contacts-legal { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-500); }
.contacts-legal .icon { --icon-size: 18px; color: var(--c-ink-400); margin-top: 1px; }

.quick-links { display: grid; gap: var(--grid-gap); grid-template-columns: minmax(0, 1fr); margin-top: var(--section-y); }
@media (min-width: 768px) { .quick-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quick-link {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease);
}
.quick-link:hover { transform: translateY(-2px); box-shadow: var(--sh-md); border-color: transparent; }
.quick-link:focus-visible { outline: none; box-shadow: var(--ring); }
.quick-link__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.quick-link__text strong { color: var(--c-ink); font-weight: 700; }
.quick-link__text span { font-size: var(--fs-sm); color: var(--c-ink-500); line-height: 1.4; }
.quick-link__arrow { --icon-size: 20px; color: var(--c-ink-400); transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease); }
.quick-link:hover .quick-link__arrow { transform: translateX(3px); color: var(--c-primary); }

/* 8. Part request ============================================================ */
.pr-layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) { .pr-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-8); } }
@media (min-width: 1024px) { .pr-aside { position: sticky; top: calc(var(--header-row) + 20px); } }
.pr-form { display: flex; flex-direction: column; gap: var(--sp-6); }
.pr-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pr-fieldset + .pr-fieldset { padding-top: var(--sp-6); border-top: 1px dashed var(--c-line); }
/* Floated legend leaves the fieldset border alone (no line through the heading). */
.pr-legend + * { clear: both; }
.pr-legend {
  float: left; width: 100%;
  display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: var(--sp-4);
  font-family: var(--font-head); font-size: var(--fs-lg); font-weight: 800; color: var(--c-ink); letter-spacing: -.01em;
}
.pr-step {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--c-primary); color: #fff; font-size: var(--fs-sm); font-weight: 800;
}
.pr-submit { display: flex; flex-direction: column; gap: 12px; padding-top: var(--sp-2); }
.pr-submit .btn { width: 100%; }
@media (min-width: 640px) {
  .pr-submit { flex-direction: row; align-items: center; gap: 18px; }
  .pr-submit .btn { width: auto; flex: none; }
}

/* Product being asked about */
.product-mini {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 12px 48px 12px 12px; border-radius: var(--r-lg);
  background: var(--c-ink-50); border: 1px solid var(--c-line);
}
.product-mini__media {
  display: grid; place-items: center; flex: none; width: 72px; height: 72px; overflow: hidden;
  border-radius: var(--r-md); background: #fff; border: 1px solid var(--c-line); color: var(--c-ink-300);
}
.product-mini__media img { width: 100%; height: 100%; object-fit: contain; }
.product-mini__media .icon { --icon-size: 28px; }
.product-mini__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.product-mini__eyebrow { font-size: var(--fs-2xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c-primary); }
.product-mini__name { font-weight: 700; color: var(--c-ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-mini__name:hover { color: var(--c-primary); }
.product-mini__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-xs); color: var(--c-ink-500); }
.product-mini__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 2px; }
.product-mini__price { font-family: var(--font-head); font-weight: 800; color: var(--c-ink); white-space: nowrap; }
.product-mini__remove { position: absolute; top: 6px; right: 6px; --ib-size: 36px; }
.product-mini__remove .icon { --icon-size: 18px; }

/* Photo upload */
.upload { position: relative; display: flex; flex-direction: column; gap: 8px; }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.upload__zone {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon text" "icon hint";
  align-items: center; column-gap: 14px; row-gap: 2px;
  padding: 16px 18px; cursor: pointer;
  border: 1.5px dashed var(--c-line-strong); border-radius: var(--r-lg); background: var(--c-surface-2);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.upload__zone:hover, .upload.is-drag .upload__zone { border-color: var(--c-primary); background: var(--c-primary-50); }
.upload__input:focus-visible + .upload__zone { border-color: var(--c-primary); box-shadow: var(--ring); }
.upload__icon { grid-area: icon; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--c-surface); color: var(--c-primary); box-shadow: var(--sh-xs); }
.upload__icon .icon { --icon-size: 22px; }
.upload__text { grid-area: text; font-size: var(--fs-sm); color: var(--c-ink-600); line-height: 1.4; }
.upload__text strong { color: var(--c-primary); font-weight: 700; }
.upload__hint { grid-area: hint; font-size: var(--fs-xs); color: var(--c-ink-500); }
.field.is-invalid .upload__zone { border-color: var(--c-danger); background: #fffafa; }
.upload.has-file .upload__zone { display: none; }
.upload__preview {
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 10px;
  border: 1.5px solid var(--c-primary-100); border-radius: var(--r-lg); background: var(--c-primary-50);
}
.upload__thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--r-sm); background: #fff; flex: none; }
.upload__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.upload__name { font-weight: 650; font-size: var(--fs-sm); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__size { font-size: var(--fs-xs); color: var(--c-ink-500); }
.upload__remove { --ib-size: 40px; }
.upload__remove .icon { --icon-size: 20px; }
.upload__lost { display: flex; align-items: center; gap: 6px; color: var(--c-warning-ink); }

/* Aside */
.pr-aside { display: flex; flex-direction: column; gap: var(--grid-gap); }
.pr-side { padding: 20px; border-radius: var(--r-xl); }
.pr-side__title { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); margin-bottom: 14px; }
.pr-side__title .icon { --icon-size: 20px; color: var(--c-primary); }
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: none; }
.steps__item { position: relative; display: flex; gap: 14px; }
.steps__item:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 36px; bottom: -12px; width: 2px; border-radius: 2px; background: var(--c-primary-100);
}
.steps__num {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c-primary-50); color: var(--c-primary); font-weight: 800; font-size: var(--fs-sm);
  box-shadow: inset 0 0 0 1.5px var(--c-primary-200);
}
.steps__item strong { display: block; color: var(--c-ink); font-weight: 700; line-height: 1.35; padding-top: 5px; }
.steps__item p { margin-top: 3px; font-size: var(--fs-sm); color: var(--c-ink-500); line-height: 1.5; }
.pr-tip__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: var(--fs-sm); color: var(--c-ink-600); line-height: 1.45; }
.pr-tip__list span { display: block; font-weight: 700; color: var(--c-ink); }
.pr-tip__note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--c-line); font-size: var(--fs-xs); color: var(--c-ink-500); line-height: 1.5; }
.pr-call__phone { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: var(--fs-xl); font-weight: 800; color: var(--c-ink); letter-spacing: -.01em; }
.pr-call__phone .icon { --icon-size: 22px; color: var(--c-primary); }
.pr-call__phone:hover { color: var(--c-primary); }
.pr-call__hours { margin-top: 6px; font-size: var(--fs-sm); color: var(--c-ink-500); }
@media (max-width: 1023.98px) {
  .pr-call { display: none; } /* the phone is in the sticky header / bottom bar on mobile */
}

@media print {
  .info-aside, .info-rail, .toc, .help-card, .quick-links { display: none !important; }
  .info-layout { display: block; }
  .info-article.prose { border: 0; padding: 0; }
}