/*
* uhl_customer_account — кабінет покупця, вітрина.
*
* Перенесено з погодженого макета (mockup/assets/cabinet.css) — лише те, що вже є на сторінках модуля;
* решта переїжджає разом зі своїм екраном.
*
* Жетони --uxc-* — КОПІЯ дизайн-системи головної (uhl_home 2.97.32, core.css), оголошена на .uxa, а не на
* :root і не через клас .uhl-home: стилі uhl_home на сторінках кабінету не вантажаться, а кабінет мусить
* працювати й без нього («копія, а не залежність»). Значення не міняти «під кабінет» — лише слідом за
* uhl_home. Шрифти Onest і Geologica сайт вантажить сам на всіх сторінках (uhl_header).
*
* Кільце фокуса — box-shadow, не outline: FilterVier глушить outline на всьому сайті з !important.
*/
.uxa,
.uxa-skip {
--uxc-blue: #1f4f9e;
--uxc-gold: #f5c518;
--uxc-ink: #16243a;
--uxc-ink2: #16222f;
--uxc-ink3: #3c4859;
--uxc-ink-head: #1e1e1e;
--uxc-gold-cta: #fdd226;
--uxc-gold-cta-hover: #f0c40f;
--uxc-gold-eyebrow: #f5d049;
--uxc-badge-hit-bg: #fdede0;
--uxc-badge-hit-ink: #b34f00;
--uxc-badge-new-bg: #e4f2f4;
--uxc-badge-new-ink: #1a7884;
--uxc-badge-sale: #e03131;
--uxc-badge-sale-bg: #fbe6e6;
--uxc-badge-sale-ink: #c72c2c;
--uxc-mut: #5d6b7c;
--uxc-mut2: #6d7785;
--uxc-line: #e4e9f0;
--uxc-line2: #e9eef5;
--uxc-line3: #eef2f7;
--uxc-tint: #f5f8fc;
--uxc-tint2: #fbfcfe;
--uxc-page: #f7f9fc;
--uxc-in: 1480px;
--uxc-pad: 24px;
--ux-dur-fast: 180ms;
--ux-ease: cubic-bezier(.4, 0, .2, 1);
--uxa-r: 14px; /* радіус панелей — як у карток категорій */
--uxa-r-s: 10px; /* пункти меню, поля */
--uxa-side: 280px;
--uxa-gap: 28px;
--uxa-ring: 0 0 0 3px rgba(31, 79, 158, .32);
}
.uxa {
display: block;
padding-bottom: 64px;
background: var(--uxc-page);
font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 16.5px;
line-height: 1.5;
color: var(--uxc-ink2);
text-align: left;
}
.uxa [hidden] { display: none !important; }
/* Фон сторінки під кабінетом: між кабінетом і підвалом видно body теми іншого тону (так само робить uhl_home). */
body:has(#uxa) { background-color: #f7f9fc; }
.uxa-in {
max-width: var(--uxc-in);
margin: 0 auto;
padding: 0 var(--uxc-pad);
}
/* Ширина сторінки — ті самі значення, що в uhl_home і uhl_category: normal 1480, wide 1760, full — від краю до
краю з відступом 24 (типово, як шапка й підвал сайту). */
.uxa[data-width="wide"] { --uxc-in: 1760px; }
.uxa[data-width="full"] { --uxc-in: 100%; --uxc-pad: 24px; }
.uxa a:focus-visible,
.uxa button:focus-visible,
.uxa summary:focus-visible {
outline: none;
box-shadow: var(--uxa-ring);
}
.uxa h1[tabindex="-1"]:focus,
.uxa-main:focus { outline: none; }
/* «Перейти до кабінету» — скрипт переносить її на початок body, перед шапку з мегаменю. */
.uxa-skip {
position: fixed;
left: 16px;
top: 12px;
z-index: 2000;
padding: 12px 18px;
border-radius: 10px;
background: var(--uxc-ink);
color: #fff;
font: 700 15px/1 'Onest', sans-serif;
text-decoration: none;
transform: translateY(-160%);
transition: transform .18s;
}
.uxa-skip:focus { transform: none; color: #fff; text-decoration: none; outline: 3px solid var(--uxc-gold); outline-offset: 2px; }
/* ---- Крихти: розмітка теми, лише відступи ------------------------------ */
.uxa .uxa-crumbs {
margin: 0;
padding: 18px 0 14px;
background: none;
}
/* Без крихт (0.13.21, типово) — той самий відступ від шапки сайту, що давали крихти. */
.uxa.is-flat .uxa-layout { padding-top: 24px; }
/* ---- Розкладка ----------------------------------------------------------- */
.uxa-layout {
display: grid;
grid-template-columns: var(--uxa-side) minmax(0, 1fr);
gap: var(--uxa-gap);
align-items: start;
}
/* ---- Ліва колонка -------------------------------------------------------- */
.uxa-side {
position: sticky;
top: 16px;
background: #fff;
border: 1px solid var(--uxc-line);
border-radius: var(--uxa-r);
padding: 18px 12px 12px;
}
.uxa-me {
display: flex;
align-items: center;
gap: 12px;
padding: 0 8px 16px;
margin-bottom: 8px;
border-bottom: 1px solid var(--uxc-line2);
}
.uxa-me__av {
flex: none;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--uxc-blue);
color: var(--uxc-gold);
font: 700 16px/1 'Geologica', 'Onest', sans-serif;
letter-spacing: .02em;
}
/* Колонка тексту не ширша за блок (0.13.25): у сітці з auto-колонкою break-word не зменшує мінімальну ширину, і email
без пробілів (покупець без імені) розтягував колонку за межі. anywhere — запобіжник для задовгої частини до «@». */
.uxa-me__tx { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.uxa-me__nm {
font-size: 16px;
font-weight: 700;
color: var(--uxc-ink);
line-height: 1.25;
overflow-wrap: anywhere;
}
.uxa-me__co {
font-size: 13.5px;
color: var(--uxc-mut);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.uxa-nav { display: grid; gap: 2px; }
.uxa-nav__a {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 9px 12px;
border-radius: var(--uxa-r-s);
font-size: 15.5px;
font-weight: 500;
color: var(--uxc-ink2);
text-decoration: none;
transition: background var(--ux-dur-fast) var(--ux-ease), color var(--ux-dur-fast) var(--ux-ease);
}
.uxa-nav__a:hover,
.uxa-nav__a:focus {
background: var(--uxc-tint);
color: var(--uxc-blue);
text-decoration: none;
}
.uxa-nav__a[aria-current="page"] {
background: #eaf0fa;
color: var(--uxc-blue);
font-weight: 700;
}
/* Золота риска — та сама, що в надзаголовках головної (.ux-eyebrow::before). */
.uxa-nav__a[aria-current="page"]::before {
content: '';
position: absolute;
left: 0;
top: 10px;
bottom: 10px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--uxc-gold);
}
.uxa-ic {
flex: none;
width: 22px;
height: 22px;
}
.uxa-nav__a--out {
margin-top: 6px;
border-top: 1px solid var(--uxc-line2);
border-radius: 0 0 var(--uxa-r-s) var(--uxa-r-s);
padding-top: 14px;
color: var(--uxc-mut);
}
/* ---- Екрани --------------------------------------------------------------- */
.uxa-main { min-width: 0; }
.uxa-scr__hd { margin-bottom: 22px; }
/* Заголовок — як .ux-h2 головної (h1-розмір), своїм класом. */
.uxa .uxa-h1 {
margin: 0 0 6px;
font-family: 'Geologica', 'Onest', system-ui, sans-serif;
font-size: clamp(28px, 3vw, 40px);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.015em;
color: var(--uxc-ink-head);
}
.uxa-lead {
margin: 0;
font-size: 17px;
color: var(--uxc-ink3);
}
/* Повідомлення з іншої сторінки («Дані збережено» після редагування). */
.uxa-flash {
margin: 0 0 18px;
padding: 12px 16px;
border: 1px solid #bfe0e4;
border-left: 4px solid var(--uxc-badge-new-ink);
border-radius: var(--uxa-r-s);
background: var(--uxc-badge-new-bg);
color: var(--uxc-ink);
font-size: 15px;
}
.uxa-card {
background: #fff;
border: 1px solid var(--uxc-line);
border-radius: var(--uxa-r);
padding: 22px 24px;
}
.uxa .uxa-card__t {
margin: 0 0 12px;
font: 700 19px/1.25 'Geologica', 'Onest', sans-serif;
color: var(--uxc-ink-head);
}
/* ---- Огляд: дві колонки ------------------------------------------------ */
.uxa-ov {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 20px;
align-items: start;
}
.uxa-ov__main, .uxa-ov__side { display: grid; gap: 20px; min-width: 0; }
/* ---- «Потрібна допомога?» ---------------------------------------------- */
.uxa-help__dep { margin: 0; font-size: 13.5px; color: var(--uxc-mut); }
.uxa-help__tel {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 2px 0 14px;
font: 700 21px/1.3 'Geologica', 'Onest', sans-serif;
color: var(--uxc-blue);
text-decoration: none;
white-space: nowrap;
}
.uxa-help__tel:hover { color: #163a73; text-decoration: none; }
.uxa-help__tel .uxa-ic { width: 20px; height: 20px; }
/* Номерів у відділу кілька (у шапці — 5): перший великим, решта розгортаються. */
.uxa-help__more { margin: -2px 0 12px; }
.uxa-help__more summary {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 32px;
font-size: 14px;
font-weight: 700;
color: var(--uxc-blue);
cursor: pointer;
list-style: none;
}
.uxa-help__more summary::-webkit-details-marker { display: none; }
.uxa-help__more summary::after {
content: '';
width: 7px;
height: 7px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform var(--ux-dur-fast) var(--ux-ease);
}
.uxa-help__more[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.uxa-help__more summary:focus-visible { border-radius: 6px; }
.uxa-help__tels { display: grid; gap: 2px; margin: 4px 0 0; padding: 0 0 0 28px; list-style: none; }
.uxa-help__tels a { display: inline-block; padding: 4px 0; font-size: 16px; font-weight: 700; color: var(--uxc-blue); text-decoration: none; white-space: nowrap; }
.uxa-help__tels a:hover { text-decoration: underline; }
/* Месенджери — вигляд як у вікні «Зв'язатися з нами» в шапці, своїм класом. */
.uxa-msgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.uxa-msg {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
padding: 10px 4px 8px;
border: 1px solid #e6ecf4;
border-radius: var(--uxa-r-s);
background: #fff;
color: var(--uxc-ink);
font-size: 12.5px;
font-weight: 600;
text-decoration: none;
transition: border-color var(--ux-dur-fast) var(--ux-ease);
}
.uxa-msg:hover,
.uxa-msg:focus { border-color: #cdd9ea; color: var(--uxc-ink); text-decoration: none; }
.uxa-msg svg { display: block; width: 28px; height: 28px; flex: none; }
/* ==========================================================================
Спільні деталі екранів: кнопки, статуси, надзаголовок, плашки
========================================================================== */
.uxa-vh {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.uxa-mut { color: var(--uxc-mut); }
.uxa-ok { color: #1f8a52; font-weight: 600; }
.uxa-bad { color: var(--uxc-badge-sale-ink); font-weight: 600; }
.uxa-card__n { margin-left: 4px; font: 500 14px/1 'Onest', sans-serif; color: var(--uxc-mut); }
/* Надзаголовок із золотою рискою — як .ux-eyebrow головної. */
.uxa .uxa-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
font-size: 12px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--uxc-blue);
}
.uxa-eyebrow::before { content: ''; flex: none; width: 22px; height: 2px; background: var(--uxc-gold); }
/* Кнопки. Золота — головна дія (як кошик картки), синя — перехід далі, контурна — другорядне. Висота 44 — під палець. */
.uxa .uxa-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid transparent;
border-radius: var(--uxa-r-s);
font: 700 15px/1.2 'Onest', sans-serif;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background var(--ux-dur-fast) var(--ux-ease), border-color var(--ux-dur-fast) var(--ux-ease), color var(--ux-dur-fast) var(--ux-ease);
}
.uxa .uxa-btn:hover { text-decoration: none; }
.uxa .uxa-btn:active { transform: scale(.98); }
.uxa .uxa-btn[disabled], .uxa .uxa-btn[aria-busy="true"] { opacity: .6; cursor: progress; transform: none; }
.uxa-btn .uxa-ic { width: 19px; height: 19px; }
.uxa .uxa-btn--gold { background: var(--uxc-gold-cta); color: var(--uxc-ink); }
.uxa .uxa-btn--gold:hover { background: var(--uxc-gold-cta-hover); color: var(--uxc-ink); }
.uxa .uxa-btn--blue { background: var(--uxc-blue); color: #fff; }
.uxa .uxa-btn--blue:hover { background: #163a73; color: #fff; }
.uxa .uxa-btn--line { background: #fff; border-color: #cfdaea; color: var(--uxc-blue); }
.uxa .uxa-btn--line:hover { border-color: var(--uxc-blue); color: var(--uxc-blue); }
.uxa .uxa-btn--s { min-height: 40px; padding: 8px 14px; font-size: 14px; }
.uxa .uxa-btn--wide { width: 100%; min-height: 50px; font-size: 16px; }
.uxa .uxa-btn--s.uxa-btn--wide { min-height: 40px; font-size: 14px; }
/* Посилання-кнопка: другорядні дії (ТТН). */
.uxa .uxa-lnk {
min-height: 40px;
padding: 8px 2px;
border: 0;
background: none;
font: 700 14.5px/1.2 'Onest', sans-serif;
color: var(--uxc-blue);
text-decoration: none;
cursor: pointer;
}
.uxa .uxa-lnk:hover { color: #163a73; text-decoration: underline; }
/* Статус замовлення. Кольори — з бейджів картки головної: хіт → чекає, новинка → виконано, знижка → помилка. */
.uxa-st {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
.uxa-st::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.uxa-st--new { background: #eaf0fa; color: var(--uxc-blue); }
.uxa-st--work { background: var(--uxc-blue); color: #fff; }
.uxa-st--work::before { background: var(--uxc-gold); }
.uxa-st--paid { background: var(--uxc-badge-new-bg); color: var(--uxc-badge-new-ink); }
.uxa-st--done { background: var(--uxc-badge-new-bg); color: var(--uxc-badge-new-ink); }
.uxa-st--wait { background: var(--uxc-badge-hit-bg); color: var(--uxc-badge-hit-ink); }
.uxa-st--err { background: var(--uxc-badge-sale-bg); color: var(--uxc-badge-sale-ink); }
.uxa-st--off { background: var(--uxc-line3); color: var(--uxc-mut); }
/* Потребує дії: червоний лише в значку й рамці зліва, не заливкою — це прохання, а не аварія. */
.uxa-alert {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: #fff;
border: 1px solid #f3cccc;
border-left: 4px solid var(--uxc-badge-sale);
border-radius: var(--uxa-r);
}
.uxa-alert__ic {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--uxc-badge-sale-bg);
color: var(--uxc-badge-sale-ink);
}
.uxa-alert__tx { display: grid; gap: 3px; }
.uxa-alert__tx b { font-size: 16px; color: var(--uxc-ink); }
.uxa-alert__tx span { font-size: 14.5px; color: var(--uxc-ink3); line-height: 1.45; }
.uxa-alert__act { display: flex; gap: 8px; flex-wrap: wrap; }
.uxa-alert--off { border-color: var(--uxc-line); border-left-color: var(--uxc-mut2); }
.uxa-alert--off .uxa-alert__ic { background: var(--uxc-line3); color: var(--uxc-mut); }
/* ==========================================================================
Замовлення: картка в огляді, кроки, рядки товарів
========================================================================== */
.uxa-ord__hd {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.uxa .uxa-ord__no {
margin: 10px 0 0;
font: 700 24px/1.2 'Geologica', 'Onest', sans-serif;
color: var(--uxc-ink-head);
}
.uxa-ord__no span {
margin-left: 6px;
font: 400 15px/1.2 'Onest', sans-serif;
color: var(--uxc-mut);
}
/* Кроки статусу: кружечки на лінії. Пройдене — синє з галочкою, поточне — золоте кільце, майбутнє — сіре. */
.uxa .uxa-steps {
display: grid;
grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
margin: 22px 0 6px;
padding: 0;
list-style: none;
}
.uxa-steps li {
position: relative;
display: grid;
justify-items: center;
gap: 2px;
text-align: center;
font-size: 13px;
color: var(--uxc-mut);
}
/* лінія — від центру цього кроку до центру наступного */
.uxa-steps li:not(:last-child)::after {
content: '';
position: absolute;
top: 14px;
left: calc(50% + 18px);
right: calc(-50% + 18px);
height: 2px;
background: var(--uxc-line);
}
.uxa-steps li.is-done:not(:last-child)::after { background: var(--uxc-blue); }
.uxa-steps i {
display: grid;
place-items: center;
width: 30px;
height: 30px;
margin-bottom: 6px;
border-radius: 50%;
border: 2px solid var(--uxc-line);
background: #fff;
color: #fff;
}
.uxa-steps i .uxa-ic { width: 16px; height: 16px; }
.uxa-steps .is-done i { background: var(--uxc-blue); border-color: var(--uxc-blue); }
.uxa-steps .is-now i { border: 3px solid var(--uxc-gold); box-shadow: 0 0 0 4px rgba(245, 197, 24, .22); }
.uxa-steps .is-err i { background: var(--uxc-badge-sale); border-color: var(--uxc-badge-sale); box-shadow: 0 0 0 4px var(--uxc-badge-sale-bg); }
.uxa-steps .is-err b, .uxa-steps .is-err span { color: var(--uxc-badge-sale-ink); }
.uxa-steps b { font-size: 14px; font-weight: 600; color: var(--uxc-ink3); }
.uxa-steps .is-done b, .uxa-steps .is-now b { color: var(--uxc-ink); }
.uxa-steps .is-now b { font-weight: 700; }
.uxa .uxa-ois {
margin: 18px 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--uxc-line2);
}
.uxa-oi {
display: grid;
grid-template-columns: 72px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid var(--uxc-line2);
}
.uxa .uxa-oi__img {
width: 72px;
height: 56px;
object-fit: contain;
border-radius: 8px;
background: var(--uxc-tint);
}
/* Заглушка фото: товар без зображення (вимкнений, видалений) — значок на тлі, а не зламаний ![]()
. */
.uxa .uxa-noimg {
flex: none;
display: grid;
place-items: center;
width: 56px;
height: 44px;
border-radius: 7px;
background: var(--uxc-tint);
color: #b8c5d8;
}
.uxa .uxa-oi__img.uxa-noimg { width: 72px; height: 56px; border-radius: 8px; }
.uxa-noimg .uxa-ic { width: 22px; height: 22px; }
.uxa-oi__tx { display: grid; gap: 2px; min-width: 0; }
.uxa-oi__tx > * { min-width: 0; overflow-wrap: break-word; }
.uxa .uxa-oi__nm { font-size: 15px; font-weight: 600; color: var(--uxc-ink); text-decoration: none; line-height: 1.35; }
.uxa a.uxa-oi__nm:hover { color: var(--uxc-blue); text-decoration: underline; }
.uxa-oi__op { font-size: 13px; color: var(--uxc-ink3); }
.uxa-oi__q { font-size: 13.5px; color: var(--uxc-mut); }
.uxa-oi__sum { font-size: 15.5px; color: var(--uxc-ink); white-space: nowrap; }
.uxa .uxa-ord__meta {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px 24px;
margin: 16px 0 0;
align-items: end;
}
.uxa-ord__meta dt { font-size: 13px; font-weight: 500; color: var(--uxc-mut); }
.uxa-ord__meta dd { margin: 2px 0 0; font-size: 15px; color: var(--uxc-ink); line-height: 1.4; }
.uxa-ord__tot { text-align: right; }
.uxa-ord__tot dd { font: 700 24px/1.15 'Geologica', 'Onest', sans-serif; white-space: nowrap; }
.uxa-ord__act {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid var(--uxc-line2);
}
/* Кілька активних замовлень в огляді — розгортні картки (): відкрита — як картка вище, згорнута — рядок
«номер, дата, статус, сума». Сума в рядку лише згорнутої: у відкритій вона внизу картки. */
.uxa-ords { display: grid; gap: 10px; }
/* Сторінки поточних замовлень (0.13.22) — вигляд пагінації модуля категорій; праворуч «Усі замовлення (N)». */
.uxa-ords__ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 4px; }
.uxa-pager { display: flex; flex-wrap: wrap; gap: 8px; }
.uxa-pager[hidden] { display: none; }
.uxa .uxa-pager__i {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid #dfe4ec;
border-radius: 10px;
background: #fff;
font: 600 14px/1 'Onest', system-ui, sans-serif;
color: var(--uxc-ink3);
cursor: pointer;
transition: border-color var(--ux-dur-fast) var(--ux-ease), color var(--ux-dur-fast) var(--ux-ease), background var(--ux-dur-fast) var(--ux-ease);
}
.uxa .uxa-pager__i:hover:not(:disabled):not([aria-current]) { border-color: var(--uxc-blue); color: var(--uxc-blue); }
.uxa .uxa-pager__i[aria-current="page"] { background: var(--uxc-blue); border-color: var(--uxc-blue); color: #fff; cursor: default; }
.uxa .uxa-pager__i:focus-visible { outline: 2px solid var(--uxc-blue); outline-offset: 2px; }
.uxa .uxa-pager__i:disabled { opacity: .4; cursor: default; }
.uxa-pager__i .uxa-ic { width: 16px; height: 16px; transform: rotate(-90deg); }
.uxa-pager__i[data-p="prev"] .uxa-ic { transform: rotate(90deg); }
/* Сторінки «Усі …» (0.13.23): посилання й неактивні «назад / далі» — той самий вигляд, що в кнопок вище. */
.uxa a.uxa-pager__i { text-decoration: none; }
.uxa .uxa-pager__i[aria-disabled="true"], .uxa .uxa-pager__i[aria-disabled="true"]:hover { opacity: .4; cursor: default; border-color: #dfe4ec; color: var(--uxc-ink3); }
.uxa-pager__gap { display: inline-flex; align-items: flex-end; justify-content: center; min-width: 18px; padding-bottom: 8px; color: var(--uxc-mut); }
.uxa-pagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 28px; }
.uxa-pagebar__res { font-size: 13px; color: var(--uxc-mut); }
@media (max-width: 575.98px) {
.uxa-pagebar { flex-direction: column-reverse; align-items: stretch; }
.uxa-pagebar .uxa-pager { justify-content: center; }
.uxa-pagebar__res { text-align: center; }
}
/* Частини, які підміняє скрипт (пошук, фільтр, сторінки): обгортка не ламає розкладку панелі, список під час
завантаження блідне. */
.uxa-swapc { display: contents; }
[data-uxa-swap="list"][aria-busy="true"] { opacity: .55; transition: opacity var(--ux-dur-fast) var(--ux-ease); }
.uxa a.uxa-seg__b { text-decoration: none; }
.uxa-seg__b[aria-current="page"] i { color: var(--uxc-blue); }
@media (max-width: 1023.98px), (pointer: coarse) {
.uxa .uxa-pager__i { min-width: 44px; height: 44px; }
}
.uxa .uxa-ords__t { margin: 0 0 2px; }
.uxa .uxa-ord--fold:not([open]) { padding-top: 14px; padding-bottom: 14px; }
.uxa .uxa-ord__sum {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
align-items: center;
gap: 8px 16px;
list-style: none;
cursor: pointer;
border-radius: var(--uxa-r-s);
}
.uxa-ord__sum::-webkit-details-marker { display: none; }
.uxa .uxa-ord__sum:focus-visible { outline: none; box-shadow: var(--uxa-ring); }
.uxa .uxa-ord--fold .uxa-ord__no { margin: 0; font-size: 19px; }
.uxa-ord__stot { font: 700 17px/1.2 'Geologica', 'Onest', sans-serif; color: var(--uxc-ink); white-space: nowrap; }
.uxa-ord--fold[open] .uxa-ord__stot { visibility: hidden; }
.uxa .uxa-ord__chev { width: 20px; height: 20px; color: var(--uxc-mut); transition: transform var(--ux-dur-fast) var(--ux-ease); }
.uxa-ord--fold[open] .uxa-ord__chev { transform: rotate(180deg); }
.uxa-ord__sum:hover .uxa-ord__chev { color: var(--uxc-blue); }
.uxa-ord__body { margin-top: 6px; }
@media (max-width: 575.98px) {
.uxa .uxa-ord__sum { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "no chev" "st tot"; }
.uxa-ord__sum .uxa-ord__no { grid-area: no; }
.uxa-ord__sum .uxa-st { grid-area: st; justify-self: start; }
.uxa-ord__stot { grid-area: tot; }
.uxa-ord__chev { grid-area: chev; }
.uxa .uxa-ord--fold .uxa-ord__no { font-size: 17px; }
}
/* Перші кроки новачка — пронумеровані картки-посилання. */
.uxa .uxa-start { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Огляд без активних замовлень (0.13.10): останнє замовлення рядком і перехід до всіх, під ним — кроки. */
.uxa-last { display: grid; gap: 10px; }
.uxa .uxa-last__all { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--uxc-blue); text-decoration: none; }
.uxa .uxa-last__all:hover { text-decoration: underline; }
.uxa .uxa-last__all .uxa-ic { width: 16px; height: 16px; }
.uxa-last + .uxa-start { margin-top: 24px; }
/* Колонка огляду вужча за сторінку «Замовлення»: рядок останнього — завжди компактний (як у переліку нижче 1280 px), інакше кнопки ховаються під праву колонку. */
.uxa-last .uxa-orow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "id st" "th sum" "act act"; gap: 12px 16px; }
.uxa-last .uxa-orow__id { grid-area: id; }
.uxa-last .uxa-orow__st { grid-area: st; }
.uxa-last .uxa-orow__th { grid-area: th; flex-wrap: wrap; }
.uxa-last .uxa-orow__nm { flex-basis: 100%; }
.uxa-last .uxa-orow__sum { grid-area: sum; }
.uxa-last .uxa-orow__act { grid-area: act; justify-content: flex-start; padding-top: 12px; border-top: 1px solid var(--uxc-line2); }
.uxa .uxa-start a {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 2px 16px;
padding: 18px 20px;
background: #fff;
border: 1px solid var(--uxc-line);
border-radius: var(--uxa-r);
text-decoration: none;
transition: border-color var(--ux-dur-fast) var(--ux-ease), box-shadow var(--ux-dur-fast) var(--ux-ease);
}
.uxa .uxa-start a:hover { border-color: #cdd9ea; box-shadow: 0 10px 22px -16px rgba(31, 79, 158, .45); text-decoration: none; }
.uxa-start__n {
grid-row: span 2;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--uxc-gold);
color: var(--uxc-ink);
font: 700 17px/1 'Geologica', 'Onest', sans-serif;
}
.uxa-start b { font-size: 17px; color: var(--uxc-ink); }
.uxa-start a > span:last-child { font-size: 14.5px; line-height: 1.45; color: var(--uxc-ink3); }
/* «Передзвоніть мені» */
.uxa-help__cb { display: grid; gap: 4px; margin: 0 0 14px; }
.uxa-help__cbn { margin: 0; text-align: center; font-size: 12.5px; color: var(--uxc-mut); }
.uxa-help__cbn.is-ok { color: #1f8a52; font-weight: 600; }
.uxa-help__cbn.is-bad { color: var(--uxc-badge-sale-ink); font-weight: 600; }
/* ==========================================================================
Замовлення — перелік
========================================================================== */
.uxa-tools {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
/* Перемикач-сегменти: одна смуга з тлом, натиснутий — білий з тінню. */
.uxa-seg {
display: inline-flex;
gap: 4px;
max-width: 100%;
padding: 4px;
border-radius: 12px;
background: var(--uxc-line3);
overflow-x: auto;
scrollbar-width: none;
}
.uxa-seg::-webkit-scrollbar { display: none; }
.uxa .uxa-seg__b {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
padding: 8px 14px;
border: 0;
border-radius: 9px;
background: none;
color: var(--uxc-ink3);
font: 600 14.5px/1 'Onest', sans-serif;
white-space: nowrap;
cursor: pointer;
}
.uxa .uxa-seg__b:hover { color: var(--uxc-blue); }
.uxa-seg__b i { font-style: normal; font-size: 12.5px; color: var(--uxc-mut); }
.uxa .uxa-seg__b[aria-pressed="true"] { background: #fff; color: var(--uxc-ink); box-shadow: 0 1px 3px rgba(22, 36, 58, .14); }
.uxa-seg__b[aria-pressed="true"] i { color: var(--uxc-blue); }
.uxa .uxa-search { position: relative; display: flex; align-items: center; flex: 0 1 320px; margin: 0; font-weight: 400; }
.uxa-search .uxa-ic { position: absolute; left: 13px; width: 19px; height: 19px; color: var(--uxc-mut); pointer-events: none; }
.uxa .uxa-search input {
width: 100%;
height: 46px;
padding: 0 14px 0 42px;
border: 1px solid #cfdaea;
border-radius: var(--uxa-r-s);
background: #fff;
font: 400 15px/1 'Onest', sans-serif;
color: var(--uxc-ink);
}
.uxa .uxa-search input:focus { outline: none; border-color: var(--uxc-blue); box-shadow: var(--uxa-ring); }
.uxa-olist { display: grid; gap: 10px; }
/* Рядок: номер і дата | статус | мініатюри | сума | дії. Колонки фіксовані, щоб статуси й суми стояли стовпчиком. */
.uxa-orow {
display: grid;
grid-template-columns: 150px 190px minmax(0, 1fr) 130px auto;
align-items: center;
gap: 16px;
padding: 14px 18px;
background: #fff;
border: 1px solid var(--uxc-line);
border-radius: var(--uxa-r);
transition: border-color var(--ux-dur-fast) var(--ux-ease), box-shadow var(--ux-dur-fast) var(--ux-ease);
}
.uxa-orow:hover { border-color: #cdd9ea; box-shadow: 0 10px 22px -16px rgba(31, 79, 158, .45); }
.uxa-orow__id { display: grid; gap: 2px; }
.uxa .uxa-orow__no { font: 700 17px/1.2 'Geologica', 'Onest', sans-serif; color: var(--uxc-ink); text-decoration: none; }
.uxa .uxa-orow__no:hover { color: var(--uxc-blue); text-decoration: underline; }
.uxa-orow__dt { font-size: 13.5px; color: var(--uxc-mut); }
.uxa-orow__st .uxa-st { white-space: normal; }
.uxa-orow__th { display: flex; align-items: center; gap: 8px 14px; min-width: 0; }
.uxa-orow__pics { display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; overflow: hidden; }
/* Назва — до двох рядків, «і ще N товарів» — дрібним рядком під нею: уміщається у звичну висоту рядка (0.13.15). */
.uxa-orow__nm { display: grid; gap: 2px; flex: 1 1 0; min-width: 140px; font-size: 14px; line-height: 1.3; color: var(--uxc-ink); }
.uxa-orow__nm b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-weight: 500; }
.uxa-orow__nm span { font-size: 13px; color: var(--uxc-mut); white-space: nowrap; }
.uxa .uxa-orow__th img { width: 56px; height: 44px; object-fit: contain; border-radius: 7px; background: var(--uxc-tint); }
.uxa-orow__sum { display: grid; gap: 1px; text-align: right; }
.uxa-orow__sum b { font-size: 16.5px; color: var(--uxc-ink); white-space: nowrap; }
.uxa-orow__sum span { font-size: 13px; color: var(--uxc-mut); }
.uxa-orow__act { display: flex; gap: 8px; justify-content: flex-end; }
.uxa-empty {
display: grid;
justify-items: center;
gap: 6px;
padding: 40px 20px;
border: 2px dashed #d5dfee;
border-radius: var(--uxa-r);
text-align: center;
color: var(--uxc-ink3);
}
.uxa-empty b { font-size: 17px; color: var(--uxc-ink); }
.uxa-empty p { max-width: 460px; margin: 0 0 8px; line-height: 1.5; }
.uxa-empty__ic {
display: grid;
place-items: center;
width: 56px;
height: 56px;
margin-bottom: 6px;
border-radius: 50%;
background: #eaf0fa;
color: var(--uxc-blue);
}
.uxa-empty__ic .uxa-ic { width: 26px; height: 26px; }
.uxa-empty__act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* ==========================================================================
Замовлення — сторінка
========================================================================== */
.uxa .uxa-back {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 40px;
margin: -6px 0 6px;
font-size: 14.5px;
font-weight: 700;
color: var(--uxc-blue);
text-decoration: none;
}
.uxa .uxa-back:hover { color: #163a73; text-decoration: none; }
.uxa-back .uxa-ic { width: 18px; height: 18px; transition: transform var(--ux-dur-fast) var(--ux-ease); }
.uxa-back:hover .uxa-ic { transform: translateX(-3px); }
.uxa-od__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.uxa-od__hd .uxa-st { margin-top: 10px; font-size: 14px; padding: 7px 14px; }
.uxa-alert + .uxa-od__steps, .uxa-alert + .uxa-od { margin-top: 16px; }
.uxa-od__steps { padding: 6px 24px 12px; }
.uxa-od__steps .uxa-steps { margin: 18px 0 4px; }
.uxa-od__steps + .uxa-od { margin-top: 20px; }
.uxa-od { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.uxa-od__main, .uxa-od__side { display: grid; gap: 20px; min-width: 0; }
.uxa .uxa-od .uxa-ois { margin-top: 4px; }
.uxa .uxa-od__tot { display: grid; gap: 6px; margin: 14px 0 0; }
.uxa-od__tot div { display: flex; justify-content: space-between; gap: 16px; }
.uxa-od__tot dt { font-weight: 500; color: var(--uxc-ink3); }
.uxa-od__tot dd { margin: 0; color: var(--uxc-ink); text-align: right; }
.uxa-od__sum { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--uxc-line2); }
.uxa-od__sum dt { font-size: 17px; font-weight: 700; color: var(--uxc-ink); }
.uxa-od__sum dd { font: 700 24px/1.15 'Geologica', 'Onest', sans-serif; white-space: nowrap; }
/* Історія — вертикальна стрічка, свіже зверху. */
.uxa .uxa-hist { margin: 0; padding: 0; list-style: none; }
.uxa-hist li { position: relative; display: flex; justify-content: space-between; gap: 16px; padding: 0 0 14px 22px; }
.uxa-hist li::before {
content: '';
position: absolute;
left: 3px;
top: 6px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--uxc-line);
}
.uxa-hist li:first-child::before { background: var(--uxc-blue); box-shadow: 0 0 0 4px #eaf0fa; }
.uxa-hist li:not(:last-child)::after {
content: '';
position: absolute;
left: 7px;
top: 18px;
bottom: 2px;
width: 1px;
background: var(--uxc-line);
}
.uxa-hist li:last-child { padding-bottom: 0; }
.uxa-hist__tx { display: grid; gap: 4px; min-width: 0; }
.uxa-hist b { font-size: 15px; font-weight: 600; color: var(--uxc-ink); }
.uxa-hist__cm { font-size: 14px; line-height: 1.5; color: var(--uxc-ink3); white-space: pre-line; overflow-wrap: break-word; }
.uxa-hist time { font-size: 13.5px; color: var(--uxc-mut); white-space: nowrap; }
.uxa .uxa-dl { display: grid; gap: 12px; margin: 0; }
.uxa-dl dt { font-size: 13px; font-weight: 500; color: var(--uxc-mut); }
.uxa-dl dd { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: var(--uxc-ink); overflow-wrap: break-word; }
.uxa-od__docs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.uxa .uxa-dl + .uxa-od__docs { margin-top: 16px; }
.uxa-card__t + .uxa-od__docs { margin-top: 0; }
.uxa .uxa-od__cm { margin: 0; font-size: 15px; line-height: 1.55; color: var(--uxc-ink3); white-space: pre-line; overflow-wrap: break-word; }
.uxa-ttn__no { display: block; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.uxa-ttn__act { display: flex; gap: 16px; }
.uxa-ttn__act .uxa-lnk { min-height: 32px; padding: 4px 0; font-size: 14px; }
.uxa-od__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 20px; }
/* Рядок дій стоїть над сіткою блоків (0.13.9): той самий проміжок, що між кроками й сіткою. */
.uxa-od__foot + .uxa-od { margin-top: 20px; }
.uxa .uxa-od__lnk {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
font-size: 15px;
font-weight: 700;
color: var(--uxc-blue);
text-decoration: none;
}
.uxa .uxa-od__lnk:hover { color: #163a73; text-decoration: none; }
/* «Скасувати замовлення» (фаза 8) — значення з макета (cabinet.css, .uxa-od__lnk--del, .uxa-opt, .uxa-cn__). */
.uxa .uxa-od__lnk--del { border: 0; background: none; padding: 0; cursor: pointer; color: var(--uxc-badge-sale-ink); font-family: inherit; }
.uxa .uxa-od__lnk--del:hover { color: #a31f1f; }
.uxa .uxa-btn--del { background: var(--uxc-badge-sale-ink); color: #fff; }
.uxa .uxa-btn--del:hover { background: #a31f1f; color: #fff; }
.uxa-opts { display: grid; gap: 6px; }
/* Сильніше за .uxa .uxa-fld label (жирний підпис поля): варіант причини — звичайним шрифтом. Висота — 44 px
на дотик (у макеті 8 px відступу давали ~37 px). */
.uxa .uxa-fld .uxa-opt { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; margin: 0; padding: 10px 0; box-sizing: border-box; font-weight: 400; font-size: 15px; cursor: pointer; }
.uxa-opt input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--uxc-blue); }
.uxa-cn__act { display: flex; flex-wrap: wrap; gap: 10px; }
.uxa-cn__act .uxa-btn { flex: 1 1 200px; }
.uxa .uxa-cn__tip { margin: -6px 0 0; }
.uxa .uxa-cn__tip .uxa-lnk { display: inline; min-height: 0; padding: 0; font-size: inherit; vertical-align: baseline; }
/* «Питання щодо замовлення» і переписка (фаза 8) — значення з макета (cabinet.css, .uxa-chips, .uxa-qa, .uxa-help__q,
.uxa-ord__ans). Посилання й чипи тут — кнопки й мітки, тому скидаємо рамку й тло кнопки та жирність .uxa-fld label. */
.uxa .uxa-help__q {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 44px;
margin-top: 14px;
padding: 14px 0 0;
border: 0;
border-top: 1px solid var(--uxc-line2);
background: none;
font-family: inherit;
font-size: 14.5px;
font-weight: 700;
color: var(--uxc-blue);
text-align: left;
cursor: pointer;
}
.uxa .uxa-help__q:hover { color: #163a73; }
.uxa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.uxa .uxa-fld .uxa-chips label { position: relative; margin: 0; font-weight: 600; cursor: pointer; }
.uxa-chips input { position: absolute; opacity: 0; }
/* 44 px на дотик (у макеті 38). */
.uxa-chips span {
display: block;
min-height: 44px;
padding: 12px 14px;
box-sizing: border-box;
border: 1px solid #cfdaea;
border-radius: 999px;
font-size: 14px;
line-height: 18px;
color: var(--uxc-ink3);
background: #fff;
}
.uxa-chips input:checked + span { background: var(--uxc-blue); border-color: var(--uxc-blue); color: #fff; }
.uxa-chips input:focus-visible + span { box-shadow: var(--uxa-ring); }
.uxa .uxa-ord__news { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 14px; }
.uxa .uxa-ord__ans { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14.5px; font-weight: 700; color: var(--uxc-blue); text-decoration: none; }
.uxa .uxa-ord__ans::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--uxc-badge-sale-ink); }
.uxa-qa__list { display: grid; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; }
.uxa-qa__m { display: grid; gap: 4px; max-width: 86%; padding: 10px 14px; border-radius: 4px 14px 14px 14px; background: #f1f4f8; justify-self: start; }
.uxa-qa__m--me { justify-self: end; border-radius: 14px 4px 14px 14px; background: #eaf0fa; }
.uxa .uxa-qa__m p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--uxc-ink); overflow-wrap: anywhere; }
.uxa-qa__who { font-size: 12.5px; color: var(--uxc-mut); }
.uxa-qa__m .uxa-st { justify-self: start; margin-top: 2px; }
.uxa .uxa-qa .uxa-od__lnk { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
.uxa .uxa-od__foot button.uxa-od__lnk { border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
@media (max-width: 719.98px) {
.uxa-qa__m { max-width: 100%; }
}
/* Повернення (фаза 10) — форма за макетом (cabinet.css, .uxa-ret, .uxa-ris, .uxa-ri); перелік заявок — свій.
Мітки товарів — сильніші за .uxa .uxa-fld label (жирний підпис поля). */
.uxa-ret { max-width: 820px; }
/* Форма повернення з бічною колонкою (0.13.13): форма займає свою колонку цілком. */
.uxa-retgrid .uxa-ret { max-width: none; }
.uxa-next__ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: uxanext; }
.uxa-next__ol li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; counter-increment: uxanext; }
.uxa-next__ol li::before { content: counter(uxanext); grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--uxc-gold, #f6c518); color: var(--uxc-ink); font-weight: 700; font-size: 14px; }
.uxa-next__ol b { font-size: 15px; color: var(--uxc-ink); }
.uxa-next__ol span { font-size: 14px; line-height: 1.45; color: var(--uxc-ink3); }
.uxa-ris { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--uxc-line2); }
.uxa-ri { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--uxc-line2); }
.uxa .uxa-fld .uxa-ri__ch { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; font-weight: 400; cursor: pointer; min-width: 0; }
.uxa-ri__ch input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--uxc-blue); }
.uxa .uxa-ri__ch img, .uxa .uxa-ri__ch .uxa-noimg { flex: none; width: 56px; height: 44px; object-fit: contain; border-radius: 7px; background: var(--uxc-tint); }
.uxa-ri__nm { display: grid; font-size: 15px; font-weight: 600; color: var(--uxc-ink); line-height: 1.35; min-width: 0; overflow-wrap: break-word; }
.uxa-ri__nm small { font-size: 13px; font-weight: 400; color: var(--uxc-mut); }
.uxa .uxa-fld .uxa-ri__q { margin: 0; }
.uxa .uxa-ri__q select { height: 44px; padding: 0 10px; border: 1px solid #cfdaea; border-radius: 8px; font: 500 15px/1 'Onest', sans-serif; }
.uxa .uxa-ret__who { margin: 0; font-size: 14px; color: var(--uxc-ink3); }
.uxa .uxa-ret__who a { font-weight: 700; color: var(--uxc-blue); }
.uxa-rets { margin: 0; padding: 0; list-style: none; }
.uxa-retrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; padding: 16px 24px; border-top: 1px solid var(--uxc-line2); }
.uxa-retrow:first-child { border-top: 0; }
.uxa .uxa-retrow__main { display: grid; gap: 2px; min-width: 0; color: var(--uxc-ink); text-decoration: none; }
.uxa .uxa-retrow__main:hover b { color: var(--uxc-blue); }
.uxa-retrow__pr { font-size: 15px; overflow-wrap: anywhere; }
.uxa-retrow__meta { display: grid; justify-items: end; gap: 4px; font-size: 14px; }
@media (max-width: 575.98px) {
.uxa-retrow { padding: 14px 16px; }
.uxa-retrow__meta { justify-items: start; }
}
/* ==========================================================================
Вікно й повідомлення внизу
Вікно — своя оболонка в межах .uxa (жетони доходять), не Bootstrap .modal.
========================================================================== */
.uxa-modal {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: 16px;
}
.uxa-modal__bg { position: absolute; inset: 0; background: rgba(22, 36, 58, .55); }
.uxa-modal__box {
position: relative;
display: grid;
gap: 16px;
width: min(440px, 100%);
max-height: calc(100vh - 32px);
overflow: auto;
padding: 30px 30px 26px;
border-radius: 18px;
background: #fff;
box-shadow: 0 30px 60px -20px rgba(22, 36, 58, .5);
animation: uxa-pop .34s cubic-bezier(.23, 1, .32, 1);
}
.uxa-modal__box--wide { width: min(560px, 100%); }
@keyframes uxa-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
/* padding-right — місце під хрестик: довгий заголовок інакше заходив під нього на телефоні. */
.uxa .uxa-modal__t { margin: 0; padding-right: 36px; font: 700 24px/1.2 'Geologica', 'Onest', sans-serif; color: var(--uxc-ink-head); }
.uxa-modal__lead { margin: -8px 0 0; font-size: 15px; line-height: 1.5; color: var(--uxc-ink3); }
.uxa .uxa-modal__x {
position: absolute;
top: 10px;
right: 10px;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: none;
color: var(--uxc-mut);
cursor: pointer;
}
.uxa .uxa-modal__x:hover { background: var(--uxc-line3); color: var(--uxc-ink); }
.uxa-lock, .uxa-lock body { overflow: hidden; }
.uxa-form { display: grid; gap: 18px; }
.uxa-fld__err { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--uxc-badge-sale-ink); }
.uxa-fld__err::before { content: '! '; }
/* Повтор замовлення: позначки товарів, «було → зараз», підсумок позначеного. */
.uxa .uxa-reps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--uxc-line2); }
.uxa-reps:empty { display: none; }
.uxa-rep {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--uxc-line2);
}
.uxa .uxa-rep__ch { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; font-weight: 400; cursor: pointer; }
.uxa-rep__ch input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--uxc-blue); }
.uxa .uxa-rep__ch img { flex: none; width: 56px; height: 44px; object-fit: contain; border-radius: 7px; background: var(--uxc-tint); }
.uxa-rep__nm { display: grid; gap: 1px; min-width: 0; font-size: 14.5px; font-weight: 600; color: var(--uxc-ink); line-height: 1.35; overflow-wrap: break-word; }
.uxa-rep__nm small { font-size: 13px; font-weight: 400; color: var(--uxc-mut); }
.uxa-rep__chg { font-size: 12.5px; font-weight: 600; color: var(--uxc-badge-new-ink); }
.uxa-rep__chg.is-up { color: var(--uxc-badge-hit-ink); }
.uxa-rep__sum { font-size: 15px; white-space: nowrap; }
.uxa-rep:has(input:not(:checked)) { opacity: .5; }
.uxa-rep.is-gone .uxa-rep__ch { cursor: default; }
.uxa-reps__tot { display: flex; align-items: baseline; justify-content: space-between; color: var(--uxc-ink3); }
.uxa-reps__tot b { font: 700 22px/1.1 'Geologica', 'Onest', sans-serif; color: var(--uxc-ink); }
.uxa-toast {
position: fixed;
left: 50%;
bottom: 24px;
z-index: 1300;
display: flex;
align-items: center;
gap: 18px;
max-width: min(560px, calc(100vw - 32px));
padding: 12px 14px 12px 20px;
border-radius: 12px;
background: var(--uxc-ink);
color: #fff;
font-size: 15px;
line-height: 1.4;
box-shadow: 0 16px 36px -14px rgba(22, 36, 58, .55);
opacity: 0;
transform: translate(-50%, 12px);
transition: opacity .24s cubic-bezier(.23, 1, .32, 1), transform .24s cubic-bezier(.23, 1, .32, 1);
}
.uxa-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.uxa .uxa-toast [data-a] {
flex: none;
padding: 6px 12px;
border-radius: 8px;
color: var(--uxc-gold);
font: 700 14.5px/1.6 'Onest', sans-serif;
text-decoration: none;
white-space: nowrap;
}
.uxa .uxa-toast [data-a]:hover { background: rgba(255, 255, 255, .08); color: var(--uxc-gold); }
/* ==========================================================================
Планшет і телефон: ліва колонка стає смугою над вмістом.
Межа 1024 — нижче в колонці 280px вмісту лишається менше 680px.
========================================================================== */
@media (max-width: 1023.98px) {
.uxa-layout {
grid-template-columns: minmax(0, 1fr);
gap: 18px;
}
.uxa-side {
position: static;
padding: 0;
background: none;
border: 0;
}
.uxa-me {
padding: 0 0 14px;
margin: 0;
border: 0;
}
/* Смуга-перемикач: прокручується вбік, не переноситься. */
.uxa-nav {
display: flex;
gap: 6px;
overflow-x: auto;
/* 0.13.22: тонка видима смуга — видно, що стрічка гортається (раніше схована). Chrome і Safari — ::-webkit-scrollbar
нижче; стандартні scrollbar-width/-color лише для Firefox (@supports), бо в Chrome вони перебивають тонкий
стиль і додають стрілочки на кінцях. */
margin: 0 calc(var(--uxc-pad) * -1);
padding: 2px var(--uxc-pad) 10px;
scroll-padding-inline: var(--uxc-pad);
}
/* Тема сайту глобально ховає горизонтальні смуги (::-webkit-scrollbar:horizontal { display: none }) і фарбує повзунок
у зелений — тож тут і стан :horizontal (вища точність), і доріжка без тіні теми. */
.uxa-nav::-webkit-scrollbar, .uxa-nav::-webkit-scrollbar:horizontal { display: block; height: 4px; }
.uxa-nav::-webkit-scrollbar-track, .uxa-nav::-webkit-scrollbar-track:horizontal { background: transparent; -webkit-box-shadow: none; box-shadow: none; }
.uxa-nav::-webkit-scrollbar-thumb, .uxa-nav::-webkit-scrollbar-thumb:horizontal, .uxa-nav::-webkit-scrollbar-thumb:horizontal:hover { background: #c3cdda; border-radius: 4px; }
.uxa-nav__a {
flex: none;
min-height: 42px;
padding: 8px 13px;
gap: 8px;
background: #fff;
border: 1px solid var(--uxc-line);
border-radius: 999px;
font-size: 15px;
white-space: nowrap;
}
.uxa-nav__a .uxa-ic { width: 20px; height: 20px; }
.uxa-nav__a[aria-current="page"] {
background: var(--uxc-blue);
border-color: var(--uxc-blue);
color: #fff;
font-weight: 700;
}
.uxa-nav__a[aria-current="page"]::before { content: none; }
/* У макеті «Вийти» на смузі сховано — він живе у вкладках профілю. Вкладок профілю ще немає (фаза 2),
тому поки «Вийти» лишається останньою пігулкою, інакше з телефона вийти нема як. */
.uxa-nav__a--out {
margin: 0;
padding-top: 8px;
border-top: 1px solid var(--uxc-line);
border-radius: 999px;
}
}
/* Огляд: права колонка під основну — двома картками поруч, поки є місце. */
@media (max-width: 1279.98px) {
.uxa-ov { grid-template-columns: minmax(0, 1fr); }
.uxa-ov__side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Відступ від краю — як у шапки сайту (uhl_header: --uhd-gut 24 → 16 з 760 px), щоб вміст стояв під логотипом. */
@media (max-width: 760px) {
.uxa, .uxa-skip, .uxa[data-width="full"] { --uxc-pad: 16px; }
}
@media (max-width: 719.98px) {
.uxa-ov__side { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
.uxa { padding-bottom: 40px; }
.uxa-card { padding: 18px 16px; }
.uxa .uxa-crumbs { padding: 12px 0 10px; }
.uxa.is-flat .uxa-layout { padding-top: 16px; }
.uxa-me__av { width: 40px; height: 40px; font-size: 14px; }
.uxa-scr__hd { margin-bottom: 16px; }
.uxa-lead { font-size: 15.5px; }
}
/* ==========================================================================
Профіль: меню з підпунктами, вкладки, форми
========================================================================== */
/* Група «Профіль»: заголовок веде на перший підпункт, підсвічується підпункт. */
.uxa-nav__a--grp[data-open] { color: var(--uxc-ink); font-weight: 600; }
.uxa-nav__sub {
display: grid;
gap: 2px;
margin: 0 0 4px 23px;
padding-left: 10px;
border-left: 1px solid var(--uxc-line);
}
.uxa .uxa-nav__sub .uxa-nav__a { min-height: 40px; padding: 8px 12px; font-size: 14.5px; }
/* Вкладки профілю — лише на планшеті й телефоні (там у смузі підпунктів немає). */
.uxa-ptabs { display: none; }
.uxa-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
/* align-content: start — інакше поле поруч із сусідом, у якого є підказка, розтягувалось. */
.uxa-fld { display: grid; gap: 6px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.uxa .uxa-fld label,
.uxa .uxa-fld legend {
float: none;
width: auto;
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.3;
color: var(--uxc-ink);
}
.uxa .uxa-fld legend { margin-bottom: 6px; }
.uxa-fld label i, .uxa-fld legend i, .uxa-form__note i { color: var(--uxc-badge-sale); font-style: normal; }
/* Поля — свої, не bootstrap: тема дає .form-control іншу висоту й рамку на кожній сторінці. 16px — iOS не
збільшує сторінку при фокусі. */
.uxa .uxa-fld input[type="text"],
.uxa .uxa-fld input[type="tel"],
.uxa .uxa-fld input[type="email"],
.uxa .uxa-fld input[type="password"],
.uxa .uxa-fld input[type="time"],
.uxa .uxa-fld select {
width: 100%;
height: 48px;
padding: 0 14px;
border: 1px solid #cfdaea;
border-radius: var(--uxa-r-s);
background: #fff;
font: 400 16px/1.2 'Onest', sans-serif;
color: var(--uxc-ink);
box-shadow: none;
transition: border-color var(--ux-dur-fast) var(--ux-ease), box-shadow var(--ux-dur-fast) var(--ux-ease);
}
.uxa .uxa-fld select { appearance: auto; }
.uxa .uxa-fld input:hover, .uxa .uxa-fld select:hover { border-color: #b5c6de; }
.uxa .uxa-fld input:focus, .uxa .uxa-fld select:focus { outline: none; border-color: var(--uxc-blue); box-shadow: var(--uxa-ring); }
.uxa .uxa-fld input::placeholder { color: #98a3b3; }
.uxa .uxa-fld input[aria-invalid="true"],
.uxa .uxa-fld select[aria-invalid="true"] { border-color: var(--uxc-badge-sale); background: #fffafa; }
.uxa .uxa-fld input[aria-invalid="true"]:focus,
.uxa .uxa-fld select[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(224, 49, 49, .22); }
.uxa-fld__hint { margin: 0; font-size: 13px; line-height: 1.4; color: var(--uxc-mut); }
/* Підказки під полем (місто, відділення НП — 0.13.17, замість