/* Cart, checkout and order. Loaded after tokens.css and base.css.
   Every colour comes from a token — no hex below this line. */

.page{max-width:1120px;margin:0 auto;padding:118px var(--pad) 90px}
.page__h{font-size:clamp(30px,4vw,42px);margin-bottom:8px}
.page__sub{color:var(--silver);font-size:15.5px;line-height:1.6;margin-bottom:34px}

.cols2{display:grid;grid-template-columns:1.55fr 1fr;gap:44px;align-items:start}
@media(max-width:900px){.cols2{grid-template-columns:1fr;gap:32px}}

/* ============ NOTICES ============
   Not live regions. The banner is rendered at boot, and content present at
   first render is never announced anyway; a live region here would only
   collide with the browser's own page-load announcement. It is discoverable
   because it precedes the h1, it is named in the title, and it is the
   aria-describedby of the button it blocks. */
.note{border-radius:var(--r-md);padding:18px 22px;margin-bottom:26px;border-left:4px solid var(--line)}
.note[hidden]{display:none}
.note__h{font-size:17px;font-weight:600;margin-bottom:6px}
.note p{font-size:14.5px;line-height:1.6;color:var(--silver)}
.note--warn{background:var(--mist);border-left-color:var(--volt)}
.note--warn .note__h{color:var(--ink)}
.note a{text-decoration:underline}

/* Error summary. Focus is what announces it, so it is NOT role=alert — being
   both focused and live means the screen reader reads it twice. */
.formerr{border-radius:var(--r-md);padding:20px 24px;margin-bottom:26px;
  background:var(--volt-bg);border-left:4px solid var(--volt-ink)}
.formerr[hidden]{display:none}
.formerr__h{font-size:18px;font-weight:600;margin-bottom:6px}
.formerr p{font-size:14.5px;color:var(--ink);margin-bottom:10px}
.formerr ul{list-style:none;display:flex;flex-direction:column;gap:7px}
.formerr li a{color:var(--volt-ink);text-decoration:underline;font-size:14.5px;font-weight:600}

/* ============ QUANTITY ============
   --ctrl-line, not --line: this is the visible boundary of an active control,
   and --line is 1.26:1 on white. Buttons carry no border of their own — the
   group border is the boundary and two would double-line. */
.qty{display:inline-flex;align-items:center;gap:2px;flex:none;
  border:1.5px solid var(--ctrl-line);border-radius:var(--pill);padding:3px}
.qty button{width:34px;height:34px;border-radius:var(--pill);display:grid;place-items:center;
  font-size:17px;line-height:1}
.qty button:hover{background:var(--mist)}
/* aria-disabled, never disabled — the reason has to stay reachable. And
   therefore no opacity: a focusable control still has to meet contrast. */
.qty button[aria-disabled="true"]{color:var(--silver);cursor:not-allowed}
.qty button[aria-disabled="true"]:hover{background:none}
.qty input{width:46px;min-height:34px;text-align:center;border:0;background:none;
  font-family:'JetBrains Mono',monospace;font-size:15px;
  -moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ============ CART LINES ============ */
.clines{list-style:none;display:flex;flex-direction:column;gap:2px}
.cline{display:grid;grid-template-columns:78px 1fr auto;gap:18px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--line)}
.cline__img{background:var(--mist);border-radius:var(--r-sm);padding:9px;overflow:hidden}
.cline__img svg{width:100%;height:auto}
/* Поле розраховане на намальований силует; навколо знімка воно читається як
   рамка. Те саме рішення, що в картці каталогу. */
.cline__img:has(.art__photo){padding:0}
.cline__t b{font-family:'Outfit',sans-serif;font-size:16.5px;font-weight:600;display:block;margin-bottom:4px}
.cline__t span{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--silver);line-height:1.5}
.cline__right{display:flex;align-items:center;gap:20px}
.cline__money{font-family:'Outfit',sans-serif;font-size:17px;font-weight:600;min-width:88px;text-align:right}

/* Status is never colour alone — the words carry it, the left rule is a second
   channel, and the glyph is aria-hidden. Deliberately NOT opacity dimming:
   .pcard.nofit used to fade the whole card and dropped its own text to 2.79:1.
   It now fades only the photograph, for the reason written out there. */
.cline__status{grid-column:2/-1;font-size:13.5px;font-weight:600;margin-top:8px;
  display:flex;align-items:center;gap:7px}
.cline__status--stop{color:var(--volt-ink)}
.cline__status--warn{color:var(--warn)}
.cline--problem{border-left:3px solid var(--volt-ink);padding-left:13px}
.cline--warn{border-left:3px solid var(--warn);padding-left:13px}

@media(max-width:620px){
  /* Reflow to 320px without display:block, which would destroy the semantics. */
  .cline{grid-template-columns:64px 1fr;gap:14px}
  .cline__right{grid-column:1/-1;justify-content:space-between}
}

.cline__rm{font-size:13px;color:var(--silver);text-decoration:underline}
.cline__rm:hover{color:var(--volt)}

.cart-empty{padding:60px 0;text-align:center}
.cart-empty h2{font-size:24px;margin-bottom:10px}
.cart-empty p{color:var(--silver);margin-bottom:24px}

/* ============ TOTALS ============
   Not live regions: on one settle the line prices, subtotal, shipping, tax,
   total and shipping sentence all change in the same tick, and marking any of
   them live means the reader picks one and drops the rest. The composed
   announcement carries the numbers. */
.totals{background:var(--mist);border-radius:var(--r-lg);padding:28px;position:sticky;top:96px}
.totals h2{font-size:19px;margin-bottom:18px}
.totals dl{display:grid;grid-template-columns:1fr auto;gap:11px 16px;margin-bottom:16px}
.totals dt{font-size:14.5px;color:var(--silver)}
.totals dd{font-size:14.5px;font-weight:600;text-align:right}
/* Пара dt/dd у <div>, щоб ховати їх разом одним [hidden]. display:contents
   повертає обидва до сітки батька — інакше div став би одним осередком і
   рядок знижки з'їхав би в лівий стовпчик. */
.totals dl > div{display:contents}
.totals dl > div[hidden]{display:none}
.totals dl > div dd{color:var(--go-ink)}

/* Промокод. Поле й кнопка в один рядок, підказка під ними. */
.promo{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.promo label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.promo__row{display:flex;gap:8px}
.promo__row input{flex:1;min-width:0;padding:11px 13px;font:inherit;font-size:14.5px;
  text-transform:uppercase;border:1px solid var(--ctrl-line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink)}
.promo__row .btn{flex:none;white-space:nowrap}
.promo .hint{font-size:12.5px;color:var(--silver);margin-top:8px}
.promo .hint:empty{display:none}
.promo #discountClear{margin-top:10px}
.totals__grand{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:16px;border-top:1px solid var(--line);margin-bottom:20px}
.totals__grand span{font-size:15px;font-weight:600}
.totals__grand b{font-family:'Outfit',sans-serif;font-size:26px;font-weight:600}
/* Progress bar is decorative and aria-hidden: its accessible value would be a
   percentage of an unnamed total, while #shipTxt already states the actionable
   fact in dollars. Fill vs track is 4.94:1, which is what 1.4.11 asks of a
   meter — the track-vs-page edge conveys nothing the sentence does not. */
.ship{margin-bottom:18px}
.ship p{font-size:13px;font-weight:600;margin-bottom:9px}
.ship.is-free p{color:var(--go-ink)}
.ship__bar{height:8px;border-radius:var(--pill);background:var(--cloud);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.ship__fill{height:100%;width:var(--pct,0%);background:var(--go-ink);border-radius:var(--pill);
  transition:width .4s var(--ease)}
@media(forced-colors:active){
  .ship__bar{background:Canvas;border:1px solid CanvasText;box-shadow:none}
  .ship__fill{background:Highlight}
}

/* ============ SUMMARY TABLE ============
   A table, not a dl: tfoot + th[scope=row] expresses that the totals summarise
   the rows above, which a dl cannot. Two columns so it reflows to 320px
   without display:block, which would destroy the table semantics. */
.summary{width:100%;border-collapse:collapse}
.summary th,.summary td{text-align:left;padding:13px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;vertical-align:top}
.summary td{text-align:right;white-space:nowrap;font-weight:600}
.summary thead th{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silver);font-weight:500}
.summary tbody th{font-weight:600;font-family:'Outfit',sans-serif;font-size:15px;padding-right:16px}
.summary__opt,.summary__qty{display:block;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;color:var(--silver);font-weight:400;margin-top:3px}
.summary tfoot th{font-weight:500;color:var(--silver);font-size:14.5px}
.summary tfoot .summary__total th,
.summary tfoot .summary__total td{font-family:'Outfit',sans-serif;font-size:19px;font-weight:600;
  color:var(--ink);border-bottom:0;padding-top:16px}

/* ============ FORM ============ */
.fset{border:0;padding:0;margin:0 0 32px}
.fset__legend{font-family:'Outfit',sans-serif;font-size:20px;font-weight:600;margin-bottom:16px;padding:0}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.frow{grid-template-columns:1fr}}
/* [hidden]{display:none} — правило БРАУЗЕРА, і будь-яке авторське display його
   перебиває, незалежно від специфічності. .field2 ставить display:flex, а
   #npFallback — це .field2, який має зʼявлятися лише коли список відділень
   недоступний. Тобто резервне поле «Номер відділення» показувалося на КОЖНОМУ
   оформленні, поруч із робочим списком, разом із написом «пошук тимчасово
   недоступний».
   Це не косметика: покупець заповнював саме його, бо воно виглядало як те, що
   треба заповнити, — і замовлення не проходило, бо форма читала список.
   Цей файл уже двічі латав це місцево (.note і .formerr вище). Один guard
   замість третьої латки.

   ⚠ ПЕРЕЇХАВ У base.css, і саме тому тут його вже немає. Він стояв у файлі,
   якого сторінка товару НЕ вантажить (fonts, tokens, base, product — і все),
   тож на ній кожен [hidden] із власним display лишався видимим. product.css
   через це носив шість місцевих латок, а сьомою став би калькулятор. */

.field2{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field2 label{font-size:13.5px;font-weight:600}
.field2 .opt-tag{color:var(--silver);font-weight:400}
/* min-height not height, so the box grows under WCAG 1.4.12 text spacing.
   16px font — under that, iOS Safari zooms the viewport on focus and breaks
   reflow on a form that cannot afford it. --ctrl-line for the boundary. */
.field2 input,.field2 select{min-height:52px;padding:12px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--ctrl-line);background:var(--paper);font-size:16px;width:100%}
.field2 input:focus,.field2 select:focus{border-color:var(--graphite)}
.field2 input:focus:not(:focus-visible),
.field2 select:focus:not(:focus-visible){outline:none}
/* Border WIDTH changes too — invalid must not be signalled by hue alone. */
.field2 input[aria-invalid="true"],.field2 select[aria-invalid="true"]{
  border-color:var(--volt-ink);border-width:2px}
/* Starts empty. A node referenced by aria-describedby is read even when
   hidden, so pre-filled text would be appended to the field on every focus. */
.fielderr{color:var(--volt-ink);font-size:13px;font-weight:600}
.fielderr:empty{display:none}
/* Textarea повторює input рядок у рядок, бо форма звернення її має, а
   .field2 знала лише input і select — поле «Що сталося» приїхало б у стилі
   браузера поруч із трьома оформленими. font-size:16px тут із тієї самої
   причини, що вище: під ним iOS Safari масштабує сторінку на фокусі. */
.field2 textarea{padding:12px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--ctrl-line);background:var(--paper);font-size:16px;
  width:100%;font-family:inherit;line-height:1.55;resize:vertical;min-height:120px}
.field2 textarea:focus{border-color:var(--graphite)}
.field2 textarea:focus:not(:focus-visible){outline:none}
.field2 textarea[aria-invalid="true"]{border-color:var(--volt-ink);border-width:2px}
.hint{color:var(--silver);font-size:13px}
/* Підказка, яку треба ПОМІТИТИ. Не помилка — людина має право замовити на
   чужу адресу, — але й не шепіт кольору --silver, який читається як службовий
   текст. Смуга ліворуч, а не колір тексту: у режимі високої контрастності
   колір зникає, а рамка лишається. */
.hint--note{color:var(--ink);background:var(--warn-bg);border-left:3px solid var(--warn);
  border-radius:var(--r-sm);padding:10px 12px;margin-top:8px;line-height:1.55}
@media(forced-colors:active){
  .hint--note{background:Canvas;border-left-color:CanvasText}
}

/* ============ FORCED COLORS ============
   Tints, gradients and shadows are all discarded in Windows contrast themes,
   which would collapse every status into identical plain text. The words
   already distinguish them; these rules restore the boundaries. */
@media(forced-colors:active){
  /* border-color і background у .payopt:has(input:checked) знімаються обидва,
     тож обрана картка ставала така сама, як решта. Стан лишався на самому
     кружечку радіо — тобто не зникав зовсім, — але рамка, якою тут показано
     вибір, переставала його показувати саме там, де щось означає. */
  .payopt{border-color:CanvasText}
  .payopt:has(input:checked){border-width:2px}
  /* Пунктир — єдине, що відрізняє недоступний спосіб, тож він має пережити
     примусові кольори. */
  .payopt--soon{border-style:dashed}
  .qty,.field2 input,.field2 select{border-color:CanvasText}
  .field2 input[aria-invalid="true"],
  .field2 select[aria-invalid="true"]{border-color:CanvasText;border-style:dashed}
  .cline--problem,.cline--warn{border-left-color:CanvasText;border-left-style:dashed}
  .cline__img{background:Canvas;border:1px solid CanvasText}
  .status{border:1px solid CanvasText;background:Canvas;color:CanvasText}
  .status--cancelled,.status--refunded{border-style:dashed}
  .note,.formerr{border:1px solid CanvasText}
}

/* ============ RECEIPT ============ */
/* Рядок звʼязку над кнопкою «Далі за покупками»: він для того, у кого
   проблема, а кнопка — для того, у кого все добре. Підкреслення на
   посиланнях явне, бо вони йдуть усередині речення, де колір сам по собі
   посилання не позначає. */
.receipt__talk{margin-top:30px;font-size:14.5px;line-height:1.65;color:var(--silver)}
.receipt__talk a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.receipt__next{margin-top:14px}
.lookup__form{max-width:440px}
.paysec{margin-top:26px}
.payblock{margin-top:22px}
.hint--sp{margin-top:10px}
.summary__back{margin-top:18px}
/* Опис категорії. Ширина обмежена не для краси: рядок довший за 70 символів
   читається помітно гірше, а сітка товарів над ним іде на всю ширину. */
.catprose{margin-top:56px;max-width:68ch}
.catprose .subh{margin:28px 0 10px}
.catprose .subh:first-child{margin-top:0}
.catprose p{color:var(--silver);line-height:1.7;margin:0}
.catprose a{color:var(--white);text-decoration:underline;text-underline-offset:3px}

.othercats{margin-top:56px}
.cats--gap{margin-bottom:24px}
.feature__cta{margin-top:12px}
.receipt__meta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:30px}
.receipt__meta div{display:flex;flex-direction:column;gap:3px}
.receipt__meta span{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silver)}
.receipt__meta b{font-family:'Outfit',sans-serif;font-size:16px;font-weight:600}
.status{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:var(--pill);
  font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
/* The status WORD is inside the badge, so the tint is a third channel, not the
   signal. Text ratios: pending 5.39, paid 5.21, shipped 14.71, cancelled 5.10. */
.status--pending{background:var(--warn-bg);color:var(--warn)}
.status--paid,.status--delivered{background:var(--go-bg);color:var(--go-ink)}
.status--shipped{background:var(--cloud);color:var(--graphite)}
.status--cancelled,.status--refunded{background:var(--volt-bg);color:var(--volt-ink)}
.addr{font-size:14.5px;line-height:1.7;color:var(--silver)}
.addr b{color:var(--ink);display:block;font-weight:600}

/* ============ CONTENT PAGES ============
   Legal, policy and support. Measure is capped near 70 characters because
   these are the only pages on the site people actually read at length. */
.page--doc{max-width:760px}
.page--doc h2{font-family:'Outfit',sans-serif;font-size:23px;font-weight:600;
  margin:38px 0 12px;line-height:1.25}
.page--doc h3{font-family:'Outfit',sans-serif;font-size:18px;font-weight:600;margin:26px 0 10px}
.page--doc p{font-size:16px;line-height:1.7;margin-bottom:14px;max-width:70ch}
.page--doc a{text-decoration:underline;text-underline-offset:3px}
.page--doc code{font-family:'JetBrains Mono',monospace;font-size:13.5px;
  background:var(--mist);padding:2px 6px;border-radius:6px}

.plist{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:16px;max-width:70ch}
.plist li{position:relative;padding-left:20px;font-size:16px;line-height:1.7}
.plist li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;
  border-radius:var(--pill);background:var(--volt)}

/* Policy tables carry real relationships — a term, why it exists, how long it
   lasts — so they stay tables rather than becoming stacked divs at narrow
   widths, which would destroy the header association. */
.ptable{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px}
.ptable th,.ptable td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;
  border-bottom:1px solid var(--line);line-height:1.6}
.ptable thead th{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--silver);font-weight:500}
.ptable tbody th{font-weight:600;padding-right:20px;min-width:9rem}

.faq{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;list-style:none;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary h2{font-size:17.5px;margin:0;font-weight:600}
.faq summary::after{content:"+";font-size:22px;color:var(--silver);flex:none;line-height:1}
.faq[open] summary::after{content:"\2212"}
.faq summary:hover h2{color:var(--volt-ink)}
.faq p{padding-bottom:20px;color:var(--silver);max-width:70ch}

.doc-nav{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
.doc-nav h2{font-size:15px;margin:0 0 14px}
.doc-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.doc-nav a{display:inline-block;padding:8px 16px;border-radius:var(--pill);
  border:1px solid var(--line);font-size:14px;text-decoration:none}
.doc-nav a:hover{border-color:var(--graphite)}


/* ============ NOVA POSHTA PICKER ============
   Every colour here is a token. The list sits over the field below it, so it
   needs a solid background of its own — a transparent one would let the next
   label show through the options. */
.field2 { position: relative; }

.ac {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--ctrl-line);
  border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(23, 26, 32, .14);
}

.ac__opt {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 14.5px;
  line-height: 1.4;
  cursor: pointer;
}

/* aria-selected is the state a screen reader reads, so it is also the state
   the highlight is drawn from — one source of truth, and they cannot drift. */
.ac__opt:hover,
.ac__opt[aria-selected="true"] {
  background: var(--mist);
}

/* ============ PAYMENT METHOD ============ */
.paylist { display: grid; gap: 10px; }

.payopt {
  display: flex;
  /* flex-start, не center: під назвою тепер стоїть пояснення, і по центру
     кружечок радіо відʼїжджав би до середини двох рядків, від своєї назви. */
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--ctrl-line);
  border-radius: var(--r-md);
  font-size: 15px;
}

/* Ціллю зроблено ВСЮ картку. Раніше клікався тільки напис — одна коротка
   стрічка тексту, і 2.5.8 проходив лише через виняток на відстань між
   сусідніми цілями. Виняток закриває норму, але не закриває незручність:
   у людини з тремором чи на телефоні однією рукою промах по рядку в 20px
   означає, що спосіб оплати не обрався, а вона цього не помітила.

   Накладка з ::after, а не cursor:pointer на .payopt: вказівник над карткою
   мусить означати, що клік спрацює по всій картці, а не лише виглядати так. */
.payopt { position: relative }
.payopt__body { display: grid; gap: 3px; flex: 1 }
.payopt input { margin-top: 2px; flex: none }
.payopt__lbl { font-weight: 500; cursor: pointer; justify-self: start }
.payopt__lbl::after { content: ''; position: absolute; inset: 0 }
/* Пояснення лишається текстом, а не частиною цілі. Накладка інакше накриває
   і його — а вона належить label, тож подвійний клік, щоб виділити слово в
   умовах кредитування, перемикав спосіб оплати: жест, який нічого не мав
   активувати, міняв значення форми. І сам текст не виділявся й не копіювався,
   хоч це рядки, які люди вставляють у перекладач. Ціль і далі вся картка,
   крім цих двох рядків. */
.payopt__note { position: relative; z-index: 1; cursor: auto }

/* Пояснення наслідку — не виноска. 13.5px і --silver дають 5.95:1 на --mist:
   це те, що покупець читає, аби зрозуміти, куди його зараз відправлять. */
.payopt__note { font-size: 13.5px; line-height: 1.5; color: var(--silver) }

/* Спосіб, який видно, але обрати не можна. Приглушений пунктиром, а не сірим
   текстом: сірішати нема куди — пояснення вже --silver, і робити його ще
   блідішим означало б заховати саме той рядок, задля якого блок і показано.
   Пунктир каже «ще не готове» так, як не каже колір, і в примусових кольорах
   він теж лишається. */
.payopt--soon { border-style: dashed; gap: 14px; align-items: center }
.payopt--soon .payopt__lbl { font-weight: 500 }
.payopt__logo { width: 88px; height: auto; flex: none; border-radius: 4px }

/* Єдиний доступний спосіб: назва без органа керування, бо обирати нема з
   чого. Вага та сама, що в .payopt__lbl — це той самий рядок, лише без
   кружечка поруч. */
.payone { font-weight: 500; margin: 0 0 4px }

/* Рядок «підтвердіть у застосунку» на сторінці замовлення. */
.waitp { margin: 0 0 8px }

/* :has, not a JS-applied class — the checked state is already in the DOM and
   duplicating it in a class is one more thing to get out of step. */
.payopt:has(input:checked) {
  border-color: var(--ink);
  background: var(--mist);
}

/* Дослівне нормативне розкриття від банку. Дрібніше за основний текст, але не
   дрібніше 13px і не сірішим за --silver: це умови кредитування, а не виноска,
   і робити їх важкочитними — рівно те, за що цей жанр тексту й має погану
   славу. */
.legal{font-size:13.5px;line-height:1.6;color:var(--silver);margin-top:14px;
  padding-top:14px;border-top:1px solid var(--line)}
.legal a{text-decoration:underline;text-underline-offset:3px}

/* ============ КАБІНЕТ ============ */

.page--acct{max-width:860px}

/* Перший стан сторінки. Жодного фокусованого елемента всередині — саме це
   робить перемикання станів безпечним: вирвати з-під фокуса нема чого. */
.acct__boot{color:var(--silver);font-size:15.5px;padding:8px 0}

.acct__form{max-width:420px}
.acct__code{letter-spacing:.3em;font-size:19px}
.acct__ok{color:var(--go-ink);font-size:13.5px}

.acct__alt{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}

/* Кнопка, що виглядає як посилання. Саме кнопка, а не <a href="#">: вона
   нікуди не веде, і читалка не має обіцяти переходу. */
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:14px;
  font-weight:600;color:var(--graphite);text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.linkbtn:hover{color:#000}
.linkbtn[aria-disabled="true"]{color:var(--silver);text-decoration:none;cursor:default}

.acct__top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.acct__top .page__sub{margin-bottom:26px}
.acct__count{color:var(--silver);font-size:14px;margin-bottom:16px}
/* Посилання на панель адміністратора: бачить його одна людина, тож воно не
   змагається за увагу з рештою сторінки. */
.acct__admin{margin-top:4px;font-size:14px}
.acct__admin a{color:var(--silver)}
.acct__admin a:hover{color:var(--white)}

/* ---- картки замовлень ---- */

.ocards{list-style:none;padding:0;margin:0;display:grid;gap:14px}

.ocard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 22px}
.ocard__h{font-family:'Outfit',sans-serif;font-size:17px;font-weight:600;margin:0 0 14px}

/* Ціль дотику — уся строчка заголовка, а не самі цифри номера. */
.ocard__link{display:block;color:var(--ink);text-decoration:none}
.ocard__link:hover{text-decoration:underline;text-underline-offset:4px}
.ocard__when{color:var(--silver);font-weight:400;white-space:nowrap}

.ocard__meta{display:flex;flex-wrap:wrap;gap:10px 34px;margin:0}
.ocard__meta dt{color:var(--silver);font-size:12px;margin-bottom:4px}
.ocard__meta dd{margin:0;font-size:15px;font-weight:600}
.ocard__sum{font-family:'JetBrains Mono',monospace;font-size:15px}

.ocards__empty{background:var(--mist);border-radius:var(--r-lg);padding:40px 32px;
  text-align:center;max-width:560px;margin:0 auto}
.ocards__empty h2{font-family:'Outfit',sans-serif;font-size:22px;margin-bottom:10px}
.ocards__empty p{font-size:15.5px;line-height:1.6;margin-bottom:16px}
.ocards__empty p:last-child{margin-bottom:0}

@media (max-width:640px){
  .acct__top{flex-direction:column}
  .ocard__when{display:block;white-space:normal}
}

/* ============ ОЦІНКА НА ЧЕКУ ============ */

.rate__lede{color:var(--silver);font-size:14px;line-height:1.55;margin-bottom:16px}

.rate__set{border:0;padding:0;margin:0 0 18px}
.rate__set legend{font-size:14px;font-weight:600;margin-bottom:8px;padding:0}

.rate__stars{display:flex;flex-wrap:wrap;gap:8px}

/* Підпис — сама ціль натискання, тож радіо ховати не можна: воно й далі
   приймає фокус, і рамка фокуса має бути видима на всьому, що клікається. */
.rate__star{display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border:1px solid var(--line);border-radius:var(--pill);
  background:var(--paper);font-size:13.5px;cursor:pointer;min-height:44px}
.rate__star:hover{border-color:var(--graphite)}
.rate__star input{width:16px;height:16px;margin:0;accent-color:var(--volt)}
.rate__star:has(input:checked){border-color:var(--graphite);background:var(--mist);font-weight:600}
.rate__star:has(input:focus-visible){outline:3px solid var(--graphite);outline-offset:2px}

.rate__done{background:var(--go-bg);color:var(--go-ink);border-radius:var(--r-sm);
  padding:14px 18px;font-size:14.5px;line-height:1.55}

/* ============ СТОРІНКА МОДЕЛІ ============ */

/* Роки випуску — єдиний факт, якого немає на сторінці категорії, і водночас
   відповідь на питання, з яким сюди приходять найчастіше. Тому окремим рядком
   під лідом, а не рядком у списку характеристик. */
.mdyears{background:var(--mist);border-radius:var(--r-sm);padding:12px 16px;
  font-size:14.5px;line-height:1.55;color:var(--ink);margin:-18px 0 34px;max-width:70ch}
.mdyears[hidden]{display:none}

.mdgroup{margin-bottom:52px}
.mdgroup:last-child{margin-bottom:34px}

/* Заголовок полиці й посилання на неї в одному рядку: людина, яка дійшла до
   потрібної полиці, здебільшого хоче побачити її цілком, а не лише те, що
   підходить одній моделі. */
.mdgroup__h{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.mdgroup__h .subh{margin:0}
.mdgroup__all{font-size:13.5px;font-weight:600;color:var(--silver);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.mdgroup__all:hover{color:var(--ink)}

@media (max-width:520px){
  .mdgroup__all{white-space:normal}
}

/* ---- форма звернення на /contact --------------------------------------- */

.cform{max-width:620px}

/* Підтвердження, що заміщає форму. Отримує фокус, тому має бути видимим
   блоком, а не рядком у потоці. */
.qsent{padding:4px 0;max-width:620px}
.qsent p{margin:0 0 8px;line-height:1.55}
.qsent p:last-child{margin-bottom:0;color:var(--silver)}

/* Пастка для ботів.
 *
 * НЕ .sr-only: той клас робить елемент невидимим, але лишає його в дереві
 * доступності — тобто скрінрідер зачитує «Не заповнюйте це поле», і саме
 * користувач скрінрідера сумлінно його заповнює. Пастка для ботів, яка ловить
 * незрячих, — це не пастка, а бар'єр.
 *
 * Тому aria-hidden у розмітці плюс повне прибирання тут: display:none і
 * tabindex="-1" разом означають, що дістатися до поля не може ні миша, ні
 * клавіатура, ні допоміжна технологія. Бот, який читає HTML, — може. */
.hpot{display:none}