@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/* ─────────────────────────────────────────────────────────────────────────── */
/* Design tokens — v44 redesign (prototype :root)                              */
/* Consumed by cart-* / checkout-* / and future new-UI pages.                  */
/* Colors and spacing are the single source of truth here; do not hardcode.    */
/* ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* ─────────────────────────────────────────────────────────────────────── */
  /* UNIVERSAL TOKENS — shared by all brands.                                */
  /* Brand-specific tokens (colors, surfaces, borders, button geometry)     */
  /* live in `inforeisen/tokens.css` (siteId=1) and `oponytomy/tokens.css`  */
  /* (siteId=2); one of them loads right after this file via styles.ftlh.  */
  /* ─────────────────────────────────────────────────────────────────────── */

  /* border-module: neutral rgba grey used as generic divider, brand-agnostic */
  --border-module:rgba(107,114,128,.4);

  /* hover-grey: neutral hover/track fill (prototype DS token; b2b_results.css
     already consumed it via var(..., #eaeaea) fallback — defined here since
     the manager-orders pagination controls reuse it). */
  --hover-grey:#EAEAEA;

  /* radii scale — DS §5 (2026-08-21), 7 щаблів, порядок за значенням.
     Іменування історичне: -md (12) БІЛЬШЕ за -lg (8), а -lg дублює -sm —
     орієнтуватись на значення, не на суфікс. */
  --radius-xs:4px;      /* дрібні рядки-опції в панелях/дропдаунах */
  --radius-chip:6px;    /* тултипи, lock-label (не входить у 4/8/12) */
  --radius-sm:8px;      /* панелі, інпути, вкладені картки */
  --radius-lg:8px;      /* alias до -sm, використовується в live-коді */
  --radius-md:12px;     /* великі CTA-кнопки (48–56px) */
  --radius-sheet:16px;  /* bottom-sheet, картки-таблиці, модуль сторінки */
  --radius-pill:100px;  /* повне заокруглення */

  /* header — desktop horizontal padding (DS §9.12 desktop breakpoint) */
  --header-px:80px;

  /* spacing scale */
  --space-xs:4px;
  --space-sm:8px;
  --space-md:12px;
  --space-lg:16px;
  --space-xl:24px;
  --space-2xl:32px;
  --space-3xl:40px;

  /* typography */
  --font-mono:'JetBrains Mono', monospace;
  --font-body:'Outfit', sans-serif;
  /* DS §7 (22.08.2026): --font-heading переведено з 'Plus Jakarta Sans' на
     JetBrains Mono. Скоуп токена — ЗАГОЛОВКИ СТОРІНОК (§9.21), не будь-який
     акцентний текст. У проєкті лишається два шрифти: Outfit + JetBrains Mono.
     ⚠ Plus Jakarta Sans ще вантажиться у fonts.ftlh — його тримають base.css
     (body) і .addr-name; виводити з завантаження після їх переводу. */
  --font-heading:'JetBrains Mono', monospace;
  /* DS §7 виняток 1 — шапка колонки адмінської таблиці (thead th). Виняток діє
     ЛИШЕ разом з letter-spacing:0.06em (§16.5): без трекінгу капслок у дрібному
     кеглі першим злипається під накинутими користувачем інтервалами (1.4.12). */
  --font-col-head-size:12px;

  /* DS §8.1 (24.08.2026) — іконка це така сама драбина, як радіуси й spacing.
     Три розміри й дві товщини, і нічого поза ними: кожне «майже те саме, але
     15px» — це новий de facto токен, який наступний екран скопіює.
     Усі іконки малюються з viewBox="0 0 24 24" незалежно від кінцевого розміру;
     linecap/linejoin — round; колір через currentColor.
     Розмір іконки ≠ зона тапу: --icon-xs 14px не суперечить порогу 24×24,
     зона добирається окремо (§11.1). */
  --icon-xs:14px;            /* іконка при значенні всередині рядка: copy-btn, шеврон */
  --icon-sm:16px;            /* іконка в щільному контролі: лупа, дія в компактному рядку */
  --icon-md:24px;            /* базовий: хедер, заголовок секції, тост, порожній стан */
  --icon-stroke:1.6;         /* товщина за замовчуванням */
  --icon-stroke-strong:1.8;  /* лише на кольоровій/темній заливці, де тонший розчиняється */

  /* DS §8.2 (24.08.2026) — три тривалості, три задачі. Правило вибору просте:
     елемент лишається на місці → --motion-fast; з'являється або зникає → пара
     enter/exit. Локальні 120ms / .12s / 130ms у коді — усі до --motion-fast. */
  --motion-fast:120ms ease;

  /* shared (brand-agnostic) surfaces — design system §2.3, §3 */
  /* DS §4: значення оновлено 10.08.2026 (було .06/.08 + 4px 20px). Застосовується
     до .card, .checkout-card, .cart-items-card, .cart-summary-card,
     .results-search-input, .orl-row, .inv-row, .firma-card і дій хедера. */
  --shadow-card:     0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 24px rgba(0, 0, 0, 0.12);
  /* --chip-tooltip-bg видалено 2026-08-24 — DS §2.3 прибрала токен 21.08.2026:
     заливка тултипа це var(--text-on-light), окремого токена під неї немає.
     Токен був оголошений і ніде не консюмився. */

  /* DS §2.4 (23.08.2026) — крос-брендовий, легалізований з живого коду OP.
     Роль: помітна межа СТАНУ (hover непофарбованого контрола, відкритий тригер
     дропдауна, наведена картка-рядок). Не межа за замовчуванням — це
     --border-default, і не текст: у ролі тексту #323744 лишається токеном IF. */
  --border-hover-strong:#323744;

  /* DS §2.4 (24.08.2026, крос-брендовий) — межа, яка САМА несе інформацію.
     Решта токенів меж відділяють поверхню від поверхні: якщо така лінія зникне,
     макет стане гіршим, але жодної інформації не втратиться. Ця працює інакше —
     вона єдиний носій стану там, де заливки немає (крок чекауту, до якого
     користувач ще не дійшов), тому на неї діє 1.4.11, а не смак.
     ⚠ Замір 3.03:1 — поріг проходиться із запасом 0.03. Це НЕ «майже 3:1, можна
     округлити»: будь-яке освітлення цієї межі валить критерій. */
  --border-contrast:#949494;

  /* DS §2.5 (23.08.2026) — нова родина «closed»: гілка закрилась і більше не
     рухається, але без збою (Anulowane, Zwrócone). Сіра пара, яку до 23.08 без
     токена використовував Utworzone. Базового значення немає навмисно: піл
     малюється заливкою й рамкою, текст завжди --text-on-light. */
  --status-closed-soft:#eeeeec;
  --status-closed-ink: #ddd8d4;

  /* DS §9.22 — чистий білий для тексту/іконки на кольоровій статусній заливці.
     Навмисно не теплий --text-inverted (#fffaf2): на заливці тепла домішка
     читається як забруднений білий. */
  --text-on-dark:#ffffff;

  /* DS §15.2 — крапка-ескалація (.status-pill.is-escalated::before).
     ⚠ Значення потребує підтвердження власником системи: ДС рекомендує
     var(--status-danger) і саме його тримає у власній демці §15; альтернатива —
     var(--status-warning) (крапка лишається всередині родини). Споживача в коді
     ще немає — з'явиться разом із Po terminie (§15). */
  --escalation-dot:var(--status-danger);

  /* DS §8 — обвід :focus-visible. Значення не змінене, лише перестало
     дублюватись літералом у кожному правилі. Доповнення до §4, де описаний
     --focus-ring (box-shadow), але не outline. */
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;

  /* DS §8 — висота КОНТРОЛА ВВОДУ (інпут, селект, тригер фільтра, поле пошуку).
     Будувати на ньому кнопку не можна — це поле, а не кнопка. */
  --control-height:44px;

  /* ─────────────────────────────────────────────────────────────────────── */
  /* DS §9.22 — системне повідомлення (тост)                                 */
  /* ─────────────────────────────────────────────────────────────────────── */
  /* Освітлений danger для іконки на темній поверхні. Чистий #b3261e на
     #323744 дає 1.8:1 і фізично зникає. Використовується ЛИШЕ тут; будь-де
     на світлому фоні danger лишається #b3261e. Спільний для брендів. */
  --status-danger-on-dark:#E86A5C;
  /* Висота хедера — до §9.22 ніде не була токенізована.
     ⚠ Значення мобільне; таблет/десктоп у §9.12 не задокументовані (там
     min-height:64px, тобто висота плаваюча). Тост використовує його лише як
     fallback: реальний top рахується з getBoundingClientRect() у JS. */
  /* DS §14 (доповнено 24.08.2026) — 72 / 78 / 78px для Inforeifen; числа вже
     лежали в §1, заміряні з живого коду. Для Oponytomy лишається відкритим —
     §1 сам позначає його таблет і десктоп як незвірені.
     Тост використовує це лише як fallback: реальний top рахується з
     getBoundingClientRect() у JS. */
  --header-h:72px;
  /* DS §9.22 / §9.0a (закрито 24.08.2026) — поле сторінки по брейкпоінтах.
     Раніше правило тоста називало ДВА якорі одразу (поле контенту й лого
     хедера), а вони не збігаються ніде, крім десктопу. Згадка про лого була
     помилкою формулювання; якір один — оце. */
  --page-gutter:16px;
  --toast-min-h:52px;          /* ≥670px → 56px, у медіа-запиті toast.css */
  --toast-duration:4000ms;     /* база; 6000 / 8000 рахуються від неї */
  /* Перші motion-токени в системі. */
  --motion-enter:180ms cubic-bezier(.2, .8, .25, 1);
  --motion-exit:140ms cubic-bezier(.4, 0, 1, 1);

  /* ⚠ ВІДХИЛЕННЯ ВІД §9.22 — свідоме, за результатом інвентаризації.
     ДС пропонує шкалу 0/100/200/300/500/600/700 і сама позначає її як
     «не звірену з живим кодом; перед впровадженням потрібна інвентаризація».
     Інвентаризація (2026-08-25) показала, що 700 не працює: тост мусить бути
     вище за все, включно з модалкою (дію часто завершують усередині модалки —
     зміна пароля типовий приклад), а в проєкті зайнято:
        900   .flt-backdrop            1001  .addr-sheet / .addr-pick-sheet
        1050  bootstrap .modal-backdrop 1055  bootstrap .modal
        1080  .popover                 1090  .tooltip
        1100  .addr-banner             1501  .atc-drawer
        2000  .chip-tip, .firma-banner 9998  .cart-modal-backdrop
        9999  assistant widget
     На 700 тост опинився б під усім переліченим. Решту щаблів шкали НЕ
     оголошую навмисно: у них немає жодного споживача, а значення на кшталт
     --z-modal:600 при реальних 1055 вводили б в оману. Повне впровадження
     шкали = окрема міграція легасі-шарів, не частина §9.22. */
  --z-toast:10000;
}


/* DS §14 / §9.22 — брейкпоінтні значення двох токенів вище. */
@media (min-width: 670px) {
	:root { --header-h: 78px; --page-gutter: var(--space-xl); }   /* 24px */
}
@media (min-width: 1040px) {
	:root { --page-gutter: var(--header-px); }                     /* 80px */
}


.section {
        padding: 32px 0;
    }
	
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px 24px;
	border: 1px solid #ced4da;
	border-radius: 6px;
	background: var(--bg-input, #ffffff);
	@media screen and (max-width: 768px) {
		padding: 32px 5px 32px 15px; 
	}
}
	
.banner-slideshow {
	display: block;                                                                                     
	width: 700px;                                                                                                                
	height: 200px; 
	margin: 0 auto;
	padding: 35px 0;
	@media screen and (max-width: 740px) {
			display: none;
		}                                                                                                 
                                                                                                        
}                                                                                                                      
.banner-slide {                                                                                                        
	display: none;                                                                                                       
	width: 100%;                                                                                                         
	}                                                                                                                      
.banner-slide--active {                                                                                                
	display: block;                                                                                                      
	}                                                                                                                      
                                                                                                                    
a.banner-slide--active {
 	cursor: pointer;
	}

.banner-slide__title {
	margin: 12px 16px 8px;
	font-size: 18px;
	font-weight: 600;
}
.banner-slide__tire {
	display: flex;
    align-items: center;
	align-content: center;
	gap: 8px;
	padding: 2px 4px 4px 4px;
	

}
.banner-tire {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 160px;
	padding: 8px;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 6px;
	background: #fff;
	text-decoration: none;
	color: inherit;
}

.banner-tire__img {
	width: auto;
	max-width: 100%;
	height: 100px;
	object-fit: contain;
	display: block;
}
.banner-tire__brand {
	font-weight: 800;
	font-size: 20px;
}
.banner-tire__name {
	font-size: 12px;
	color: #555;
	text-align: center;
}
.banner-tire__meta {
	font-size: 12px;
	color: #777;
	margin-top: 2px;
}
.banner-tire__price {
	margin-top: 4px;
	font-weight: 600;
	font-size: 14px;
}


.banner-tire{
	display: flex;
	flex-direction: column;
	min-width: 224px;
	height: 200px;
	border: 1px solid #ddd8d4;
	border-radius: 4px;
	background: var(--bg-input, #ffffff);
	box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.25);
	text-decoration: none;
	padding: 12px 8px 8px 8px;
	position: relative;

}

.banner-tire {
	transition: border-color 0.3s ease;
}

.banner-tire:hover,
.banner-tire.active {
	border: 1px solid var(--Old-Blue, rgba(56, 109, 148, 0.95));
}

.b2b-results.from-banner .b2b-results__row {
	border: 1px solid var(--Old-Blue, rgba(56, 109, 148, 0.95));
	transition: border-color 0.3s ease;
}

.banner-tire__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	
	border-bottom: 0.5px solid var(--border-surface, #e5e7eb);
	overflow: hidden;
}

.banner-tire__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	width: 206px;
	padding-bottom: 8px;
}

.banner-tire__brand-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--Secondary-black, var(--text-on-light, #323744));
	font-size: 20px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
}

.banner-tire__specs-right {
	display: flex;
	align-items: flex-end;
	font-family: 'JetBrain Mono', monospace;
	font-size: 16px;
	font-weight: 600;
	flex-direction: column;
	color: var(--text-muted, #6b7280);
}


.banner-tire__image-container {
	display: flex;
	justify-content: start;
	align-items: center;
	flex: 1;
	position: relative;
	width: 170px;
    left: -33px;
    bottom: 6px;
	
}

.banner-tire__img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	display: block;
}

.bunner_season_icon{
	width: 20px;
}


.banner-tire__info {
	
	flex-direction: row;
	gap: 8px;
}

.banner-tire__attributes {
	display: flex;
	gap: 8px;
	align-items: center;
}

.banner-tire__attribute-icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.banner-tire__attribute-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.banner-tire__certifications {
	display: flex;
	gap: 4px;
}

.banner-tire__badge {
	background-color: #e8e1d7;
	border: 0.4px solid var(--text-subtle, #9ca3af);
	border-radius: 4px;
	padding: 4px 6px;
	font-family: 'JetBrain Mono', monospace;
	font-size: 14px;
	font-weight: 400;
	line-height: 18px;
	color: var(--text-on-light, #323744);
	white-space: nowrap;
}

.banner-tire__eu-labels {
	position: absolute;
  	bottom: 57px;
  	right: 5px;
  	text-align: right;

}

.banner-tire__eu-item {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.banner-tire__eu-badge {
	background-color: var(--text-on-light, #323744);
	border-radius: 3px;
	width: 20px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'JetBrain Mono', monospace;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;

}
.banner-tire__eu-noise{
	color:  var(--text-on-light, #323744);
	text-align: center;
	font-family: "JetBrains Mono";
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
	line-height: normal;
}
.banner-tire__eu-icon {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	object-fit: contain;
}

.banner-tire__footer {
	display: flex;
	height: 46px;
	padding-top: 10px;
	justify-content: space-between;
	justify-content: end;
	align-items: center;
	width: 224px;
}

.banner-tire__price-button {
	background-color: #d75831;
	border: none;
	border-radius: 0;
	padding: 8px 6px;
	width: 96px;
	height: 40px;
	display: flex;
	justify-content: end;
	gap: 4px;
	cursor: pointer;
	opacity: 0.94;
	transition: opacity 0.2s ease;
	position: relative;
	align-items: baseline;
}

.banner-tire__price-button:hover {
	opacity: 1;
}

.banner-tire__price-value {
	font-size: 36px;
	font-weight: 700;
	line-height: 28px;
	color: #ffffff;
	margin: 0;

}

.banner-tire__price-unit {
	font-size: 20px;
	color: #ffffff;
	
}

/* ================================================================
   HEADER — mobile-first, Stage2 prototype (2026-08-13)
   Structure: <header class="header"> > .header__inner (flex row).
   Left: <a.header__logo${siteId}> (img + optional tagline for OTM).
   Right: .header-actions (PL|EN toggle + profile icon + cart icon).
   Home-only elevated pill via .header_container--home-new — see below.
   Banner reserve (ROLE_USER only) kept on .header_container--with-banner.
   ================================================================ */
.header_container{
	position: relative;
	max-width: 100%;
	background: var(--bg-page, #d2d8db);
}

/* Only ROLE_USER sees the banner-slideshow — keep the 360px reserve for them. */
.header_container--with-banner{
	min-height: 360px;

	@media screen and (max-width: 740px) {
		min-height: 0;
	}
}

/* ── DS §9.12 base (mobile <670px): 72px fixed, accent hairline ────────── */
.header {
	background: transparent;
	max-width: 100%;
	margin: 0;
	border-radius: 0;
	border-bottom: 1px solid rgba(var(--accent-primary-rgb, 0, 95, 110), .06);
}

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md, 12px);
	height: 72px;
	padding: 0 var(--space-xl, 24px);
	max-width: 1400px;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative; /* anchor for the absolute-centred nav-menu (tablet+) */
	z-index: 3;
}

.header__logo1,
.header__logo2 {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs, 4px);
	text-decoration: none;
	flex: 0 0 auto;
	max-width: none;
}

.header__logo1 img,
.header__logo2 img {
	display: block;
	width: 80px;
	height: auto;
	max-width: 80px;
}

.header__logo-tagline {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: var(--text-muted, #6b7280);
	white-space: nowrap;
}

/* ── DS §9.12 tablet (670–1039px) ─────────────────────────────────────── */
@media (min-width: 670px) {
	.header {
		/* switch accent hairline → neutral module divider (DS decision) */
		border-bottom: 1px solid var(--border-module, rgba(107,114,128,.4));
	}
	.header__inner {
		height: auto;
		min-height: 64px;
		/* DS §9.12 (2026-08-21): horizontal padding aligned with desktop (was 32px). */
		padding: 16px var(--header-px, 80px);
	}
}

/* ── DS §9.12 desktop (≥1040px) ───────────────────────────────────────── */
@media (min-width: 1040px) {
	.header__inner {
		padding: 16px var(--header-px, 80px);
	}
}

/* DS §9.12 (updated 2026-08-21): nav-links (Dobór opon / Orders / Export Data)
   replace "Uzyskaj pomoc" — hidden on mobile, absolute-centred on tablet+,
   spans both brands. Text-muted flat text, 24px gap (--space-xl) between items
   — was 32px before 2026-08-21; the 8px saving is what allowed the flat-row
   divider on tablet to fit at the 670px lower bound. */
.header__menu {
	display: none;
}

@media (min-width: 670px) {
	.header__menu {
		display: flex;
		align-items: center;
		flex-direction: row;
		gap: var(--space-xl, 24px);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}
/* Manager role — tablet keeps only the 3 primary B2B links
   (Wyszukiwanie / Zamówienia / Użytkownicy); the tail (Tires,
   Export) surfaces at desktop 1024px+. */
.header__link--desktop-only { display: none; }
@media (min-width: 1024px) {
	.header__link--desktop-only { display: inline-block; }
}
.dropdown-menu{
	display: none;
}

/* DS §9.12 nav-links — matched to .tds-hdr-navlink from DS §14 visualization
   (design-system.html:3183-3184). Same rules as DS: Outfit 400 16px, muted,
   nowrap, cursor pointer, transition on color + text-decoration-color;
   hover swaps text-decoration to underline with 2px offset, no colour change. */
.header__link,
.header__link--active {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	color: var(--text-muted);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: color 140ms ease, text-decoration-color 140ms ease;
}

.header__link:hover,
.header__link:focus,
.header__link--active:hover,
.header__link--active:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Header actions row (right side) ---------------------------- */
.header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-md, 12px);
}

/* DS §9.12 EN|PL switcher — mono 14px 700 on ALL widths (updated 2026-08-14:
   §6 exception now applies at every breakpoint, was Outfit 16px on tablet+).
   Vertical divider before the profile icon lives on this block; padding-right
   matches the actions-row gap so the hairline sits centered between PL and
   the icon (DS §9.12 "Роздільник у плоскому рядку — оновлено 2026-08-21"):
     mobile non-Home flat row : 12px + --border-module (base rule here)
     mobile Home pill         : 8px  + --border-on-surface (overridden below)
     tablet + desktop         : 16px + --border-module (overridden below) */
.header__langs {
	display: flex;
	align-items: center;
	gap: var(--space-xs, 4px);
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	color: var(--text-default);
	/* DS §9.12, ревізія 11.25 (23.08.2026) — відступи навколо роздільника
	   зведені до 8/8 на ВСІХ ширинах. Було 8/8 мобайл / 12/12 таблет /
	   16/16 десктоп: роздільник скрізь стояв посередині, але сама «подушка»
	   росла разом із брейкпоінтом. Тепер мовний блок однаковий скрізь.
	   Правило симетрії від 21.08 збережене — змінилось лише значення, і
	   змінилось з обох боків одночасно (проміжний варіант, де звели лише бік
	   іконки, ламав симетрію і був відкинутий того ж дня). */
	padding-right: var(--space-sm, 8px);
	border-right: 1px solid var(--border-module, rgba(107,114,128,.4));
	position: relative;
}

/* Права половина «подушки». Ліву задає padding-right вище, праву — проміжок
   ряду .header__actions, а він 12px на мобайлі й 16px на таблеті+. Щоб риска
   стояла точно посередині, іконку профілю підтягуємо назад до 8px.
   −2px — компенсація чинного margin:-2px у .header__icon-btn (у ДС там -3px,
   тому її літерали −7/−11 у нас не збігаються; правило те саме, арифметика
   від наших проміжків).
   Мобільний Home виключений: у пігулці gap уже 8px, там симетрія без правок. */
@media (max-width: 669px) {
	.header_container:not(.header_container--home-new) .header__langs + .header__icon-btn {
		margin-left: -6px;   /* 8 − 12 − 2 */
	}
}
@media (min-width: 670px) {
	.header__langs + .header__icon-btn {
		margin-left: -10px;  /* 8 − 16 − 2 */
	}
}

/* DS §9.12 / §16.7 — зона тапу лейбла мови. Заміряний бокс 25.9×22.4:
   по ширині 24×24 (поріг AA 2.5.8) проходить, по висоті ні — і проходив лише
   через виняток інтервалу. Накладка-псевдоелемент доводить висоту до 44px, не
   чіпаючи бокс-модель: лейбл сам несе роздільник через border-right, тож
   будь-яка зміна padding зсунула б риску.
   ⚠ Розширюю ТІЛЬКИ вертикально. Горизонтальне розширення ДС робить
   асиметричним (праворуч лише 5px до іконки, симетричні 13.6px дали б перетин
   зон) і воно потребує заміру на живому екрані. Вертикального досить, щоб
   вийти з винятку інтервалу на пряме проходження AA. */
.header__lang,
.header__lang--active {
	color: var(--text-default);
	padding: 0;
	border-radius: 0;
	position: relative;
	text-decoration: none;
	transition: color 140ms ease;
}

.header__lang--active {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

.header__lang:hover,
.header__lang:focus,
.header__lang--active:hover,
.header__lang--active:focus {
	color: var(--text-default) !important;
	background-color: transparent;
	border: none;
	text-decoration: underline;
}

.header__lang::after,
.header__lang--active::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 44px;
}

.header__lang-divider {
	color: var(--text-default);
	font-weight: 400;
	opacity: .35;
}

/* DS §9.12 — mobile + tablet show only the active language label; the
   EN | PL switcher only appears at desktop (≥1040px). Inactive link and
   divider are hidden below 1040px. */
@media (max-width: 1039px) {
	.header__lang,
	.header__lang-divider {
		display: none;
	}
}

/* DS §9.12 (2026-08-21) — mobile-only "Dobór opon" link on non-Home.
   Lives inside .header__actions as the first element; the only divider in
   the row sits after PL (on .header__langs), not here. Hidden on tablet+ —
   that label is carried by the centered nav-menu instead. */
.header__tire-search {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	color: var(--text-default);
	text-decoration: none;
	white-space: nowrap;
	transition: color 140ms ease, text-decoration-color 140ms ease;
}

.header__tire-search:hover,
.header__tire-search:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}

@media (min-width: 670px) {
	.header__tire-search {
		display: none;
	}
}

/* Prototype-parity icon button (profile + cart share the same shell).
   DS §9.12 "Затверджені винятки" — touch target 28×28 (24×24 svg + 2px padding). */
.header__icon-btn {
	color: var(--text-default);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border: 0;
	background: transparent;
	border-radius: 6px;
	padding: 2px;
	margin: -2px;
	position: relative;
	text-decoration: none;
	transition: color 140ms ease, background-color 140ms ease;
}

.header__icon-btn:hover,
.header__icon-btn:focus {
	color: var(--accent-primary);
	background: rgba(var(--accent-primary-rgb, 0, 95, 110), .07);
	text-decoration: none;
}

.header__icon-btn:active {
	color: var(--accent-pressed, var(--accent-primary));
	background: rgba(var(--accent-primary-rgb, 0, 95, 110), .12);
}

.header__icon-btn svg {
	width: 24px;
	height: 24px;
	display: block;
	flex: none;
}

.header__cart-badge {
	position: absolute;
	top: -2px;
	right: -4px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	background: var(--accent-primary);
	color: var(--text-inverted, #fff);
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-mono, inherit);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	box-sizing: border-box;
	pointer-events: none;
}

.header__cart-badge.hide {
	display: none;
}

.hide {
	display: none;
}

/* ── DS §9.12 — Home elevated pill (MOBILE ONLY, updated 2026-08-21) ─────
   Pill actions cancelled on tablet+ across ALL pages 2026-08-21 — the white
   pill lives on mobile Home only. Prototype #screenHome parity. */
@media (max-width: 669px) {
	.header_container--home-new .header {
		box-shadow: inset 0 3px 6px -3px rgba(0, 0, 0, .14),
		            inset 0 -1px 0 rgba(255, 255, 255, .5);
	}

	.header_container--home-new .header__actions {
		background: var(--bg-surface-elevated, #ffffff);
		border-radius: var(--radius-pill, 100px);
		padding: 8px var(--space-lg, 16px);
		gap: var(--space-sm, 8px);
		box-shadow: var(--shadow-card);
	}

	/* padding-right успадковується з бази (8px) — тут лишається тільки підміна
	   токена межі: всередині світлої пігулки це --border-on-surface, а не
	   --border-module (§9.12, «токен межі залежить не від проміжку, а від
	   поверхні»). Для Oponytomy — --border-default, див. overrides.css. */
	.header_container--home-new .header__langs {
		border-right: 1px solid var(--border-on-surface, rgba(10,10,10,.12));
	}
}

/* ── DS §9.12 tablet+ — FLAT actions (updated 2026-08-21) ────────────────
   Pill cancelled on both Home and non-Home. Icons/EN|PL sit directly on the
   header surface; only gap is bumped for the wider viewport. */
@media (min-width: 670px) {
	.header__actions {
		gap: var(--space-lg, 16px);
	}
}
/* header dropdown */
.dropdown {
  position: relative;
}

.dropdown > a {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dropdown-menu {
  position: absolute;
  top: 20px;
  left: -5px;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border-surface, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.08);
  padding: 6px 0;
  display: none;
  z-index: 50;
  white-space: nowrap;
}


.dropdown.open .dropdown-menu {
  display: block;
}


.dropdown-menu .header__link,
.dropdown-menu .header__link--active { 
  display: block;
  padding: 8px 16px;
  color: var(--text-default);
  text-decoration: none;
  font-size: 14px;
}
.dropdown-menu .header__link:hover,
.dropdown-menu .header__link:focus {
  background: #f6f6f6;
  outline: none;
}


.dropdown > a::after {
  content: '⌄';
  font-size: 14px;
  margin-left: 6px;
  opacity: 0.9;
  transition: transform .18s;
  
}
.dropdown.open > a::after { transform: rotate(-180deg); }



/* MOBIL MENU (legacy .mobile-menu panel — kept for admin/manager old chrome;
   new-UI header no longer opens it, see layouts/new/header.ftlh 2026-08-13) */

.mobile-menu {
	position: absolute;
	top: 13px;
	right: 0;
	width: 350px;
	height: 100vh;
	background-color: var(--bg-input, #ffffff);
	box-shadow: 2px 0 18px rgba(15, 23, 42, 0.08);
	border-right: 1px solid  var(--border-surface, #E5E7EB);;
	transform: translateX(100%);
	transition: transform 0.3s;
	display: none;
	pointer-events: auto;
	overflow: auto;
	z-index: 50;
	padding: 24px 40px;
}


.menu-btn-close {
	margin-left: auto;
	background: transparent;
	border: 0;
	padding: 6px;
	cursor: pointer;
}

.mobile-menu__list {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.mobile-menu__item {
	padding: 12px 8px;
	border-radius: 8px;
	color: var(--black, #0A0A0A);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mobile-menu.is-open {
	pointer-events: auto;
	display: block;
	transform: translateX(0);
}


.mobile-menu.is-open .mobile-menu__panel {
	transform: translateX(0);
}

@media (min-width:720px) {
	.mobile-menu {
		display: none;
	}

	.header__burger {
		display: none;
	}
}



/*`  HERO SECTION */

.hero-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	
	position: absolute;
	left: 161px;
	bottom: 99px;
	@media screen and (max-width: 1010px) {
		left: 131px;
		bottom: 71px;
	}
	@media screen and (max-width: 910px) {
		left: 121px;
		bottom: 71px;
	}
	@media screen and (max-width: 820px) {
		left: 101px;
		bottom: 71px;
	}
	@media screen and (max-width: 730px) {
	  	left: 60px;
	  	bottom: 71px;
	 }
	 @media screen and (max-width: 576px) {
		left: 48px;
		bottom: 36px;
	}
	@media screen and (max-width: 430px) {
		left: 30px;
		bottom: 36px;
	}
	
}

.hero-pretitle {
	color: var(--color-old-blue);
	font-size: var(--font-size-body-m);
	line-height:var(--line-height-body-m);
	font-weight: var(--font-weight-regular);
	margin: 0;
	
	
	@media screen and (max-width: 820px) {
		font-size: 14px;
		font-weight: 400;
	  }
	  @media screen and (max-width: 730px) {
	  		font-size: 13px;
	  		font-weight: 400;
	  	  }
	 @media screen and (max-width: 576px) {
		font-size: 12px;
		font-weight: 400;
	  }
	@media screen and (max-width: 430px) {
		font-size: 11px;
		font-weight: 400;
	  	}
	  
}

.hero-title {
	color: var(--text-default);
	font-size: 32px;
	font-weight: var(--font-weight-semibold);
	letter-spacing: 1px;
	margin: 0;
	@media screen and (max-width: 820px) {
			font-size: 28px;
			font-weight: 500;
		  }
  	@media screen and (max-width: 576px) {
		font-size: 20px;
		font-weight: 500;
    }
  	@media screen and (max-width: 430px) {
	  	font-size: 18px;
	  	font-weight: 400;
		letter-spacing: 0.5;
    }
}
.btn{
	display: flex;
		width:100%;
		max-width:120px;
		min-width: 100px;
		height: 32px;
		justify-content: center;
		align-items: center;
		border-radius: 6px;
		border: 1px solid var(--color-old-blue);
		background: #FFF;
		color: var(--color-old-blue);
		font-size: 16px;
		font-style: normal;
		font-weight: 700;
		line-height: 18px;
	
}

.btn_second{
	border: 1px solid var(--color-old-blue);
	background: #FFF;
	color: var(--color-old-blue);
}

.btn_main{
	max-width: 120px;
	border: none;
	background:var(--color-old-blue);
	color: var(--color-white);
	
}
.btn_danger{
	
	border: 1px solid #FF5E5E;
	color: #FF5E5E;
}
.disabled{

	border: 1px solid #bbbbbb;
	color: #bbbbbb;
}
.long{
	max-width:100%;
}

.filter_holder{
	display: flex;
	flex-direction: row;
	gap: 50px;
	@media screen and (max-width: 760px) {
				gap: 10px;
			}
	@media screen and (max-width: 480px) {
			flex-direction: column;
		
		}
}
.filter_holder_row{
	display: flex;
	flex-direction: column;
	flex-basis: 50%;
	gap: 10px;
	
}
.filter_holder_column{
	display: flex;
	flex-direction: row;
	gap: 10px;
	@media screen and (max-width: 748px) {
		gap: 5px;
	}
}
.row{
	position: relative;
}


.col{
	display: flex;
}
.input__control, .select_control {
	position: relative;
	    flex: 1 1 auto;
		min-width: 0;
		width: 100%;
		padding: 6px 12px;
		font-size: 16px;
		font-weight: 400;
		line-height: 1.5;
		color: #212529;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid #ced4da;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		border-radius:  0 4px 4px 0;
		transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
		@media screen and (max-width: 748px) {
				font-size: 12px;
			}
}
	
.select_control {
	color: #757575
}
.input__control:active,
.input__control:focus,
.input__control:focus-visible,
.select_control:active,
.select_control:focus
.select_control:focus-visible{
	border-color: #757575 ;
	outline: none;
}
	
.cart_save{
	display: flex;
	align-items: center;
	flex-direction: column;
	margin: 20px 0 30px 0;
}
.form-check{
	padding-bottom: 20px;
}

.input-group-text{
	display: flex;
	align-items: center;
	padding: 6px 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: center;
	white-space: nowrap;
	background-color: #e9ecef;
	border: 1px solid #ced4da;
	border-radius:  4px 0 0 4px;
	
	@media screen and (max-width: 748px) {
		font-size: 14px;
	}
}

.withount_gap{
	margin-right: -10px;
}

.input__control::placeholder{ 
	@media screen and (max-width: 748px) {
	  font-size: 12px;
	}
}



.search_panel{
	display: flex;
	padding: 4px 24px;
	justify-content: flex-end;
	align-items: flex-end;
	align-self: stretch;
	border-radius: 8px;
	opacity: 0.8;
	background: #EAECEF;
	margin: 0 auto 16px;
	height: 32px;
	

}
.search_panel_btn{

	width: 100px;
	
	color: var(--black, #0A0A0A);
	text-align: center;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	text-decoration-line: underline;

}
.search_panel_holder{
	display: none;
}
.search_panel_holder.open{
	display: block;
}

.container_noresults{
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	height: 100px;
}


/*    CART    */
.checkout_container{
	max-width: 1300px;
	margin: 30px auto;
	padding: 0 20px;
	border: 1px #cccccc solid;
	background: var(--bg-input, #ffffff);
}
.checkout-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	height: 40px;
	color: var(--color-brand-dark);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: #fff;
	border-bottom: 1px solid var(--border-surface, #E5E7EB);
	padding: 0 20px;
	font-size: 14px;

}

.checkout-header__right {
	display: flex;
	gap: 24px;
	align-items: center;
}

.checkout-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 20px;
	
	border-bottom: 1px solid var(--border-surface, #E5E7EB);
}

.checkout-row__left {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 180px;
}

.checkout-row__title {
	color: #0A0A0A;
	font-weight: 600;
	
}

.checkout-row__subtitle {
	color: var(--text-muted, #6B7280);
	font-weight: 500;
	font-size: 14px;
}

.checkout-row__right {
	display: flex;
	gap: 24px;
	align-items: center;
}

.checkout-col {
	width: 100px;
	max-width: 150px;
	min-width: 48px;
	text-align: center;
	text-overflow: ellipsis;
	word-wrap: break-word;
	overflow: hidden;
}

.checkout-col--qty {
	min-width: 60px;
	
}
.btn-reduce,
.btn-increase{
	display: inline-block;
	padding: 0 5px;
}
.btn_qty:hover,
.btn_qty:active{
	transform: scale(1.1);
	color: #000000;
}
.checkout-subtotal{
	display: flex;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
}

.checkout-col_total {
	width: 130px;
	max-width: 150px;
	min-width: 48px;
	text-align: center;
}
.checkout-col_netto {
	width: 100px;
	max-width: 150px;
	min-width: 48px;
	text-align: center;
	font-weight: 400;
}

.cart_price_title{
	text-transform: lowercase;
	font-size: 10px;
}

.checkout-row__remove-btn {
	background: transparent;
	border: 0;
	padding: 6px;
	display: inline-flex;
	align-items: center;
}

.checkout-row__remove-btn img {
	width: 18px;
}

.checkout-row__remove-btn img:hover,
.checkout-row__remove-btn img:active{
	transform: scale(1.1);
}

.align-center{
	display: flex;
	align-content: center;
	  justify-content: center;
	  margin: 20px 0;
}

@media (max-width:640px) {

	.checkout-header__inner,
	.checkout-row {
		padding: 10px 12px;
	}

	.checkout-header__right {
		gap: 12px;
	}

	.checkout-row__right {
		gap: 12px;
	}
}
.note_holder{
	display: flex;
	padding: 25px 64px;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
}
.note_title{
	display: flex;
	padding-bottom: 8px;
	align-items: center;
	gap: 4px;
}
.note_icon{
	display: flex;
	width: 18px;
	height: 18px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	aspect-ratio: 1/1;
}
.note_title_text{
	color: var(--black, #0A0A0A);
	font-size: 14px;
	font-style: normal;
	font-weight: 800;
	line-height: 18px; 
}
.note_body{
	width: 100%;
	height: 30px;
	border: none;
	border-bottom: 1px solid var(--Stroke-grey, var(--border-surface, #E5E7EB));
	resize: none;
}
.note_body:active, 
.note_body:focus,
.note_body:focus-visible{
	border:none;
	border-bottom: 1px solid var(--Stroke-grey, var(--border-surface, #E5E7EB));
	outline: none;
}


.cart_addres_title{
	padding: 20px 0;
	    font-size: 18px;
	    font-weight: 600;
	}
	
	
.order_desc{
	
	  max-width: 300px;
	  width: 200px;
}
.order_ean{
	max-width: 130px;
	min-width: 130px;
	font-size: 14px;
	font-weight: 500;
}
.order_adress{
	margin: 20px 0;
}
.order_title{
	text-align: center;
	font-weight: 700;
	padding-top: 15px;
	margin-bottom: -15px;
	
}


/* TIERS */
.num{
	max-width: 30px;
}
.medium{
	max-width: 60px;
}

.lond_col{
	min-width: 120px;
}

/* ── Bootstrap utilities & components required by catalog_images ─────────── */
.container_images{
	
	.ci-result pre {
	    white-space: pre-wrap;
	    font-size: 0.9rem;
	}
	
	.ci-limit-input {
	    width: 180px;
	}
	
	.ci-options-section {
	    margin-bottom: 1rem;
	}
	
	
	
	/* Grid */
	.col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; padding-right: 12px; padding-left: 12px; }
	.offset-md-2 { margin-left: 16.6667%; }
	
	/* Card */
	.card {
	    position: relative;
	    display: flex;
	    flex-direction: column;
	    min-width: 0;
	    word-wrap: break-word;
	    background-color: #fff;
	    background-clip: border-box;
	    border: 1px solid rgba(0,0,0,.125);
	    border-radius: 0.375rem;
	}
	.card-header {
	    padding: 0.5rem 1rem;
	    background-color: rgba(0,0,0,.03);
	    border-bottom: 1px solid rgba(0,0,0,.125);
	}
	.card-header:first-child { border-radius: calc(0.375rem - 1px) calc(0.375rem - 1px) 0 0; }
	.card-body { flex: 1 1 auto; padding: 1rem 1rem; }
	
	/* Form */
	.form-label { margin-bottom: 0.5rem; display: inline-block; }
	.form-text { margin-top: 0.25rem; font-size: 0.875em; }
	.form-control {
	    display: block;
	    width: 100%;
	    padding: 0.375rem 0.75rem;
	    font-size: 1rem;
	    font-weight: 400;
	    line-height: 1.5;
	    color: #212529;
	    background-color: #fff;
	    background-clip: padding-box;
	    border: 1px solid #ced4da;
	    border-radius: 0.375rem;
	    box-sizing: border-box;
	}
	.form-control:focus {
	    border-color: #86b7fe;
	    outline: 0;
	    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
	}
	.form-check { display: block; min-height: 1.5rem; padding-left: 1.5em; }
	.form-check .form-check-input { float: left; margin-left: -1.5em; }
	.form-check-input {
	    width: 1em;
	    height: 1em;
	    margin-top: 0.25em;
	    vertical-align: top;
	    appearance: none;
	    background-color: #fff;
	    background-repeat: no-repeat;
	    background-position: center;
	    background-size: contain;
	    border: 1px solid rgba(0,0,0,.25);
	    border-radius: 0.25em;
	    cursor: pointer;
	}
	.form-check-input:checked {
	    background-color: #0d6efd;
	    border-color: #0d6efd;
	    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
	}
	.form-check-label { cursor: pointer; }
	
	/* Buttons */
	.btn {
		max-width: 200px;
	    display: inline-block;
	    font-weight: 400;
	    line-height: 1.5;
	    text-align: center;
	    text-decoration: none;
	    vertical-align: middle;
	    cursor: pointer;
	    user-select: none;
	    background-color: transparent;
	    border: 1px solid transparent;
	    padding: 0.375rem 0.75rem;
	    font-size: 1rem;
	    border-radius: 0.375rem;
	    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}
	.btn:disabled { opacity: .65; pointer-events: none; }
	.btn-outline-success {
	    color:var(--color-old-blue);
	    border-color:var(--color-old-blue);
	}
	.btn-outline-success:hover {
	    color: #fff;
	    background-color:var(--color-old-blue);
	    border-color:var(--color-old-blue);
	}
	
	/* Spinner */
	.spinner-border {
	    display: inline-block;
	    width: 2rem;
	    height: 2rem;
	    vertical-align: -0.125em;
	    border: 0.25em solid currentcolor;
	    border-right-color: transparent;
	    border-radius: 50%;
	    animation: spinner-border .75s linear infinite;
	}
	.spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.2em; }
	@keyframes spinner-border { to { transform: rotate(360deg); } }
	
	/* Display utilities */
	.d-none  { display: none !important; }
	.d-block { display: block !important; }
	
	/* Text utilities */
	.fw-bold     { font-weight: 700 !important; }
	.text-center { text-align: center !important; }
	.text-muted  { color: #6c757d !important; }
	
	/* Spacing utilities (t=top, b=bottom, s=start/left, e=end/right) */
	.mt-1 { margin-top: 0.25rem !important; }
	.mt-2 { margin-top: 0.5rem !important; }
	.mt-3 { margin-top: 1rem !important; }
	.mt-4 { margin-top: 1.5rem !important; }
	.mt-5 { margin-top: 3rem !important; }
	.mb-1 { margin-bottom: 0.25rem !important; }
	.mb-2 { margin-bottom: 0.5rem !important; }
	.mb-3 { margin-bottom: 1rem !important; }
	.mb-4 { margin-bottom: 1.5rem !important; }
	.mb-5 { margin-bottom: 3rem !important; }
	.ms-1 { margin-left: 0.25rem !important; }
	.ms-2 { margin-left: 0.5rem !important; }
	.ms-3 { margin-left: 1rem !important; }
	.ms-4 { margin-left: 1.5rem !important; }
	.ms-auto { margin-left: auto !important; }
	.me-1 { margin-right: 0.25rem !important; }
	.me-2 { margin-right: 0.5rem !important; }
	.p-1 { padding: 0.25rem !important; }
	.p-2 { padding: 0.5rem !important; }
	.p-3 { padding: 1rem !important; }

	
/* ─────────────────────────────────────────────────────────────────────────── */

}


/* ─────────────────────────────────────────────────────────────────────────── */
/* B2B CART — v44 redesign                                                     */
/* Prototype: https://designby-lyana.github.io/tior-prototype/?v=44 (#screenCart) */
/* Figma:     unFtURcfGKl6diAdIRZwih node 5381-14034                            */
/* Scope:     used by /b/cart?ui=v2 → layouts/new/b2b/b2b_cart_v2.ftlh          */
/* Design tokens live at the top of this file (see :root block near line 5).   */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Respect the HTML `hidden` attribute on cart blocks that also carry a
   `display:flex`-style rule (otherwise author `display:` beats UA default). */
.cart-empty[hidden],
.cart-summary-card[hidden],
.cart-items-card[hidden],
.cart-clear-all[hidden]{ display:none !important; }

/* Padding + max-width parity with /b/search .tior-search-page + __inner
   (see b2b_filters.css). Mobile 16/12, tablet+ 24/clamp(16..80). */
.cart-content{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 12px;
  box-sizing: border-box;
  display:flex; flex-direction:column; gap:var(--space-lg);
}
@media (min-width: 670px){
  .cart-content{
    padding: 24px clamp(16px, calc(16px + (80px - 16px) * ((100vw - 670px) / (1280px - 670px))), 80px);
  }
}
/* DS §9.21 — пара без підзаголовка: breadcrumb→заголовок 4px (було 0). */
.cart-header{ display:flex; flex-direction:column; gap:var(--space-xs); }
/* ── Universal back breadcrumb ────────────────────────────────────────────
   Single class for every "« Powrót" / back link across the new UI. Replaces
   the legacy .cart-back / .checkout-back / .pwd-back / .tior-search-page__back
   classes. The "«" arrow is injected via ::before, so templates just pass
   the label text. */
.od-breadcrumb{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:var(--space-xs);
  font-family:var(--font-body); font-weight:400;
  font-size:14px; line-height:20px;
  color:var(--text-on-light);
  text-decoration:none; cursor:pointer;
  /* Reset для <button>-варіанту: §9.13 фіксує, що той самий візуальний намір
     живе і на <a>, і на <button>, і що «різниця в тегу не вимагає різних
     стилів». Без цих чотирьох рядків кнопка тягне UA-дефолти. */
  appearance:none; background:none; border:0; padding:0;
}
/* DS §9.21 (змінено 22.08.2026) — стрілка більше не текстовий гліф.
   Було: content:"«" (U+00AB) у потоці тексту. Ширину й вертикальний зсув
   задавав гліф шрифту, тому стрілка «плавала» по baseline при зміні шрифту
   чи фолбеку, а скринридер зачитував її як пунктуацію.
   Стало: SVG-маска 14×14 (chevron-left, stroke-width 2.5), залита currentColor —
   геометрія фіксована, колір успадковується, тож hover і disabled працюють самі.
   ⚠ Лапки всередині url() мають бути СПРАВЖНІ. Якщо це правило колись переїде
   в інлайновий style="…" — там навпаки потрібні &quot;, інакше лапки рвуть
   атрибут; а в <style> браузер сутності в CSS не декодує і url() стає
   невалідним (баг ДС рев. 11.13). */
.od-breadcrumb::before{
  content:''; width:14px; height:14px; flex:none;
  background:currentColor;
  -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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18 9 12l6-6'/%3E%3C/svg%3E") no-repeat center/contain;
          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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18 9 12l6-6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.od-breadcrumb:hover{ color:var(--text-default); }

/* ── Universal page title ─────────────────────────────────────────────────
   Paired with .od-breadcrumb — the h1 rendered right under the back link
   on every new-UI page (Orders/Invoices/Order detail/Profile v2, search).
   Legacy .tior-search-page__title used to live in b2b_filters.css and was
   32px/Outfit/centred; unified here to the 20px prototype spec 2026-08-13. */
.od-title{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:20px;
  line-height:24px;
  /* DS §9.21 — обов'язкова пара до моно-гарнітури: компенсує ширину JetBrains
     Mono на 20px. Без неї заголовок ~+12% ширший і довгі польські заголовки
     ловлять перенос. Не прибирати окремо від --font-heading. */
  letter-spacing:-0.01em;
  color:var(--text-default);
  margin:0;
}

/* Wrap breadcrumb + title. Клас існує ще й тому, щоб пара не підхоплювала
   батьківський flex-gap на сторінках на кшталт /b/addresses (.addr-content
   gap:16px) — саме через це тут колись стояв gap:0.

   DS §9.21 (23.08.2026) розводить відступи ЗА ВИПАДКАМИ. Це не два різні
   рішення, а одне: відступ до breadcrumb показує, скільки рівнів під ним.
     • пара без підзаголовка   → breadcrumb→заголовок 4px  (--space-xs)
     • група з підзаголовком   → breadcrumb→заголовок 12px (--space-md),
                                  заголовок→підзаголовок  4px  (--space-xs)
   Чому 12, а не 8: щоб групування читалось, зовнішній відступ має перевищувати
   внутрішній у рази. Пара 8/4 давала різницю лише 4px, і її майже повністю
   з'їдав ледінг (line-height 20px при тексті 14px додає по 3px згори й знизу),
   тож оптична відстань виходила майже однаковою в обох місцях. Перевірено
   живим рендером на 8/4, 12/4 і 16/4. */
.od-title-wrap{
  display:flex;
  flex-direction:column;
  /* БЕЗ align-items:flex-start — інакше дочірні рядки на всю ширину
     (.cart-title-row, .manager-order-detail__title-row — обидва
     justify-content:space-between) стискаються до вмісту, і права дія
     («Wyczyść koszyk») притискається до заголовка. Breadcrumb хугає
     себе сам через align-self:flex-start у власному правилі. */
  gap:var(--space-xs);
}

/* Варіант «група з підзаголовком». Зовнішній контейнер тримає 4px між
   заголовковою парою і підзаголовком; внутрішній .od-title-head — 12px між
   breadcrumb і заголовком. Читається однозначно: заголовок належить
   підзаголовку, breadcrumb стоїть окремо. */
.od-title-wrap--group{
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
  margin-bottom:var(--space-lg);   /* група → наступний блок */
}
.od-title-head{
  display:flex;
  flex-direction:column;
  gap:var(--space-md);
}
/* Підзаголовок-опис — DS §9.21. Варіант B (Outfit 300/18px) розглядався
   й відхилений 23.08.2026: 18px проти 20px заголовка практично зрівнювало
   ієрархічну вагу (Outfit має більший x-height за JetBrains Mono). */
.od-subtitle{
  font-family:var(--font-body); font-weight:400;
  font-size:16px; line-height:20px;
  color:var(--text-muted);
  margin:0;
}

.cart-title-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-md);
}
/* Tertiary — DS §9.2a. Найлегший рівень: текст, обмежений власним контентом,
   без фону, рамки й геометрії. Не те саме, що --ghost: той тримає «слот»
   кнопки в розкладці навіть коли невидимий, tertiary — ні. */
.cart-clear-all{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--accent-primary); text-decoration:none;
  cursor:pointer; flex:none;
  /* Зона тапу — прозорий padding із компенсаційним від'ємним margin, щоб не
     зсувати сусідів (§9.2a, §11.1). Без нього зона дорівнює висоті рядка
     ≈19px при вимозі 48px. Візуально нічого не змінює. */
  padding:14px 8px; margin:-14px -8px;
  background:none; border:0;
}
.cart-clear-all:hover{ color:var(--accent-pressed); }
/* §9.2a: «box-shadow: var(--focus-ring) — обов'язково, за загальним правилом
   §12.2. У живому коді зараз відсутній на обох класах — це ДЕФЕКТ, а не
   виняток: жоден інший інтерактивний елемент системи focus-ring не пропускає.» */
.cart-clear-all:focus-visible{ outline:none; box-shadow:var(--focus-ring); border-radius:var(--radius-xs); }
.cart-clear-all:disabled,
.cart-clear-all[aria-disabled="true"]{ color:var(--text-muted); cursor:not-allowed; text-decoration:none; }
.cart-title{
  /* DS §9.21 (2026-08-24): приведено до канону заголовка сторінки — було
     Outfit 700 24px. Кошик і чекаут входять у скоуп ДС (§1) і будують ту саму
     пару breadcrumb+заголовок, тож геометрія береться з токенів, а не з
     власного літерала. §7: 20px, JetBrains Mono 700, line-height 24px,
     letter-spacing -0.01em. */
  font-family:var(--font-heading); font-weight:700;
  font-size:20px; line-height:24px; letter-spacing:-0.01em;
  color:var(--text-default);
  margin:0;
}

/* Two-column wrapper — no-op on mobile, side-by-side on tablet+ (see media queries
   at the bottom of the cart section). */
.cart-two-col{ display:block; }

.cart-items-card{
  background:var(--bg-surface-light);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
  margin-bottom: 16px;
}
/* Mobile layout: flat 2×2 grid.
   Row 1: [icon + product info ............] [trash]
   Row 2: [qty stepper ..................] [prices stacked right] */
.cart-item{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "product remove"
    "qty     right";
  padding:var(--space-lg);
  gap:var(--space-sm);
  align-items:center;
}
.cart-item + .cart-item{
  border-top:1px solid var(--border-surface);
}
.cart-item-product{
  grid-area:product;
  display:flex; align-items:flex-start; gap:var(--space-sm);
  min-width:0;
}
.cart-item-icon{ font-size:18px; flex:none; margin-top:1px; display:flex; align-items:center; justify-content:center; }
.cart-item-info{ flex:1; min-width:0; }
.cart-item-name{
  font-family:var(--font-body); font-weight:500;
  font-size:16px; color:var(--text-default);
  margin:0;
}
.cart-item-size{
  font-family:var(--font-mono); font-size:16px;
  color:var(--text-muted); margin-top:2px;
}
.cart-item .qty-stepper{
  grid-area:qty; justify-self:start;
  /* Cart-scoped override — prototype #screenCart values (120×40, тонший border,
     без внутрішнього padding), картка на /search лишається зі своїми токенами. */
  width:120px;
  min-width:120px;
  border-width:1px;
  padding:.5px;
}
.cart-item .qty-btn{ width:22px; font-size:14px; font-weight:700; }
.cart-item-unit{
  font-family:var(--font-body); font-weight:400;
  font-size:16px; color:var(--text-muted);
  text-align:right; margin-bottom:2px;
}
.cart-item-total{
  font-family:var(--font-body); font-weight:700;
  font-size:18px; color:var(--text-on-light);
  white-space:nowrap;
}
.cart-right{
  grid-area:right;
  display:flex; flex-direction:column; align-items:flex-end; gap:4px;
}
.cart-item .cart-item-remove{
  grid-area:remove;
  align-self:start;
  justify-self:end;
}

.cart-summary-card{
  background:#fff;
  border-radius:var(--radius-lg);
  display:flex; flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
  overflow:hidden;
}
.cart-summary-header{
  background:var(--bg-surface-light, #fafafa);
  border-bottom:1px solid #939496;
  padding:12px 16px;
  min-height:54px;
  display:flex; align-items:center;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.cart-summary-title{
  font-family:var(--font-body); font-weight:700;
  font-size:16px; line-height:18px; color:var(--text-default);
  margin:0; flex:1;
}
.cart-summary-body{
  padding:24px 0 0;
  display:flex; flex-direction:column; gap:16px;
}
.cart-summary-rows{
  display:flex; flex-direction:column; gap:8px;
  padding:0 16px;
}
.cart-summary-meta{
  font-family:var(--font-body); font-weight:500;
  font-size:14px; line-height:18px; color:var(--text-muted);
}
.cart-summary-row{
  display:flex; justify-content:space-between; align-items:center;
  height:18px;
}
.cart-summary-label{
  font-family:var(--font-body); font-weight:500;
  font-size:14px; line-height:18px; color:var(--text-muted);
  flex:0 0 80px;
}
.cart-summary-value{
  font-family:var(--font-body); font-weight:400;
  font-size:16px; line-height:18px; color:#111827;
}
.cart-summary-total-label{
  font-family:var(--font-body); font-weight:500;
  font-size:14px; line-height:18px; color:var(--text-muted);
  white-space:nowrap;
}
.cart-summary-total-value{
  font-family:var(--font-body); font-weight:700;
  font-size:16px; line-height:18px; color:#111827;
}
.cart-summary-actions{
  padding:0 20px var(--space-xl);
  display:flex; flex-direction:column; gap:var(--space-sm);
}
.btn-cart-primary{
  appearance:none; border:none; width:100%; height:var(--btn-cta-height);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-primary); color:var(--text-inverted);
  font-family:var(--font-body); font-weight:var(--btn-font-weight); font-size:var(--btn-cta-font-size);
  border-radius:var(--btn-cta-radius); cursor:pointer;
  text-decoration:none; box-sizing:border-box;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-cart-primary:hover,
.btn-cart-primary:visited,
.btn-cart-primary:focus{ color:var(--text-inverted); text-decoration:none; }
.btn-cart-primary:hover{ filter:brightness(1.06); }
.btn-cart-primary:active{ transform:scale(.985); background:var(--accent-pressed); }
.btn-cart-primary:disabled{
  background:var(--text-subtle, #9ca3af); cursor:not-allowed;
  filter:none;
}
.btn-cart-primary:disabled:hover{ filter:none; }
.btn-cart-secondary{
  appearance:none; width:100%; height:var(--btn-cta-height);
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1.5px solid var(--accent-primary);
  color:var(--accent-pressed); font-family:var(--font-body);
  font-weight:var(--btn-font-weight); font-size:var(--btn-cta-font-size);
  border-radius:var(--btn-cta-radius); cursor:pointer;
  text-decoration:none; box-sizing:border-box;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-cart-secondary:hover,
.btn-cart-secondary:visited,
.btn-cart-secondary:focus{ color:var(--accent-pressed); text-decoration:none; }
.btn-cart-secondary:hover{ background:#f0f9fa; }
.btn-cart-secondary:active{ transform:scale(.985); }

/* qty stepper — design system §9.3 (2026-08-10 pill-outline редизайн).
   Один компонент, два місця застосування — картка товару (Search) і кошик;
   значення нижче — джерело правди для обох. */
.qty-stepper{
  display:flex; align-items:center; justify-content:space-between;
  box-sizing:border-box;
  flex:none;
  width:var(--qty-stepper-width);
  min-width:calc(var(--qty-stepper-width) - 20px);
  height:var(--qty-stepper-height);
  /* 2026-08-12: прибрано `padding:0 var(--space-xs)` (додавалось 08-11 щоб +/-
     не липли до бордера). Прототип каже кнопки повинні заповнювати всю ширину
     до pill-краю, щоб hover-tint досягав border-у зліва/справа. Символи +/-
     лишаються оптично інсетнутими за рахунок centered-flex всередині 28px
     кнопки — до pill-краю ~14px нейтрального простору. */
  background:var(--bg-input);
  border:1.5px solid var(--border-default);
  border-radius:var(--qty-stepper-radius);
  overflow:hidden;
}
.qty-btn{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  border:none; padding:0; margin:0;   /* захист від browser-default button styling */
  width:var(--qty-btn-width); height:100%;
  flex:none;
  background:transparent;
  color:var(--text-on-light);
  font-family:var(--font-body);
  font-size:var(--qty-btn-font-size);
  line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.qty-btn:hover{ background:var(--border-subtle); }
.qty-btn:active{ background:transparent; color:var(--accent-primary); }
/* focus-ring-inset — виняток з канону (§3): контейнер має overflow:hidden,
   зовнішнє кільце було б обрізане. */
.qty-btn:focus-visible{ outline:none; box-shadow:var(--focus-ring-inset); }
.qty-btn:disabled{ color:var(--text-muted); cursor:not-allowed; }
.qty-value{
  flex:1; text-align:center;
  font-family:var(--font-body);
  font-size:var(--qty-value-font-size);
  font-weight:var(--qty-value-weight);
  line-height:1;
  color:var(--text-on-light);
  background:transparent;
  height:100%;
  display:flex; align-items:center; justify-content:center;
  user-select:none;
}

/* chip / Rozmiar — статичний бейдж-тег розміру шини (design system §9.6).
   Не інтерактивний (без hover/active/focus). Бренд-специфіка через токени:
   IF — світлий фон (--bg-chip #ddd8d4) + темний текст (--text-on-light #323744).
   OP — темний фон (--bg-chip #282424) + світлий текст (--text-inverted #FAFAFA;
   переопрацьовано в oponytomy/overrides.css, бо на OP --text-on-light теж #282424).
   font-family: fallback-ланцюг — home-scoped --font-family-mono (в межах Home),
   інакше OP-scoped --font-mono, інакше хардкод-стек. */
.chip-rozmiar{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:var(--chip-radius);
  font-family:var(--font-family-mono, var(--font-mono, 'JetBrains Mono', ui-monospace, monospace));
  font-weight:700;
  font-size:14px;
  background:var(--bg-chip);
  color:var(--text-on-light);
}

/* delete button — inline flex child at the right end of .cart-item-top */
.cart-item-remove{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--text-muted);
  transition:color 140ms ease;
}
.cart-item-remove:hover{ color:var(--text-default); }
.cart-item-remove svg{ display:block; }

/* Clear-cart confirmation modal — prototype v46+ */
.cart-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.4);
  z-index:9998;
  display:none; align-items:center; justify-content:center;
}
.cart-modal-backdrop.is-open{ display:flex; }
.cart-modal{
  background:#fff; border-radius:12px; padding:24px;
  max-width:320px; width:calc(100% - 48px);
  font-family:var(--font-body);
  display:flex; flex-direction:column; gap:16px;
}
.cart-modal-title{
  font-size:16px; font-weight:600; line-height:1.4;
  color:var(--text-default);
}
.cart-modal-actions{ display:flex; justify-content:flex-end; gap:12px; }
.btn-modal-cancel{
  height:44px; padding:0 20px;
  background:none; border:1px solid var(--border-default);
  border-radius:8px;
  font-family:var(--font-body); font-size:16px; color:var(--text-default);
  cursor:pointer;
}
.btn-modal-cancel:hover{ background:var(--bg-surface-light); }
.btn-modal-confirm{
  height:44px; padding:0 20px;
  background:var(--accent-primary); border:none;
  border-radius:8px;
  font-family:var(--font-body); font-size:16px; color:#fff; font-weight:500;
  cursor:pointer;
}
.btn-modal-confirm:hover{ filter:brightness(1.06); }
.btn-modal-confirm:active{ background:var(--accent-pressed); transform:scale(.985); }

/* guest activation block — shown to unauthenticated visitors on /b/cart */
.cart-guest-activate{
  padding:64px 0;
  display:flex; flex-direction:column; gap:var(--space-md);
}
.cart-guest-title{
  font-family:var(--font-body); font-weight:700;
  font-size:24px; color:var(--text-default); margin:0;
}
.cart-guest-text{
  font-family:var(--font-body); font-size:16px; line-height:1.5;
  color:var(--text-muted); margin:0 0 var(--space-sm);
}
.cart-guest-actions{ display:flex; flex-direction:column; gap:var(--space-sm); }
.btn-cart-guest-primary{
  width:100%; height:48px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent-primary); border:none;
  border-radius:var(--radius-lg);
  font-family:var(--font-body); font-weight:500; font-size:16px;
  color:var(--text-inverted, #fffaf2); text-decoration:none; cursor:pointer;
  box-sizing:border-box;
}
.btn-cart-guest-primary:hover{ filter:brightness(1.06); }
.btn-cart-guest-secondary{
  width:100%; height:48px;
  background:none; border:1.5px solid var(--accent-primary);
  border-radius:var(--radius-lg);
  font-family:var(--font-body); font-weight:500; font-size:16px;
  color:var(--accent-primary); cursor:pointer;
}
.btn-cart-guest-secondary:hover{ background:#f0f9fa; }

/* empty state — Section 8 */
.cart-empty{
  display:flex; flex-direction:column; align-items:center;
  padding:60px 24px 40px; text-align:center; gap:24px;
}
.cart-empty-icon{
  width:56px; height:56px; border-radius:50%;
  background:#e8eef0;
  display:flex; align-items:center; justify-content:center;
}
.cart-empty-title{
  font-family:var(--font-mono); font-weight:700; font-size:20px;
  color:var(--text-on-light, #323744); margin:0 0 12px;
}
.cart-empty-text{
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  color:var(--text-muted); margin:0;
}
.cart-empty-actions{
  display:flex; flex-direction:column; gap:12px; width:100%;
}

/* ── Tablet+ layout — Figma 5381:14153 ─────────────────────────────────────
   Items card and summary card sit side-by-side. Summary is a fixed-width
   sidebar; items card grows to fill the rest. Item row becomes a single
   5-column grid matching the header row above it. */
@media (min-width: 720px){
  .cart-two-col{
    display:flex;
    align-items:flex-start;
    gap:var(--space-xl);
  }
  .cart-two-col > .cart-items-card{
    flex:1 1 0;
    min-width:0;
  }
  .cart-two-col > .cart-summary-card{
    flex:none;
    width:216px;
    position:sticky;
    top:var(--space-xl);
  }

  /* Flatten item to a single row: [product | qty | unit | total | remove] */
  .cart-item{
    grid-template-columns:1fr 72px 90px 90px 20px;
    grid-template-areas:"product qty unit total remove";
    padding:var(--space-sm) var(--space-lg);
    gap:var(--space-xs);
    align-items:center;
  }
  .cart-item-product{ align-items:center; }
  /* Compact stepper on tablet+ per Figma 5381:14067 — 72×26 with a white
     interior (mobile keeps the prototype's 120×40 grey pill).
     No inner padding: buttons must reach the pill edge so hover-tint touches
     the border (same rule as base .qty-stepper, зафіксовано 2026-08-12).
     btn width — DS §9.3 dense (22 IF / 24 OP, OP через overrides.css). */
  .cart-item .qty-stepper{
    justify-self:center;
    width:72px; min-width:72px; height:26px;
    background:var(--bg-input);
    border-width:1.5px;
  }
  .cart-item .qty-btn{ width:22px; font-size:12px; }
  .cart-item .qty-value{ font-size:16px; }
  /* Lift .cart-right's children into the item grid so they occupy their own cells. */
  .cart-right{ display:contents; }
  .cart-item-unit{
    grid-area:unit;
    text-align:center;
    font-weight:400; font-size:16px; line-height:18px;
    color:var(--text-muted);
    margin-bottom:0;
    white-space:nowrap;
  }
  /* On tablet+ the unit-price cell is only 56px — hide the "/ szt." suffix to
     match Figma (5381:14037, 5381:14153) which shows just the amount. */
  .cart-item-unit-suffix{ display:none; }
  .cart-item-total{
    grid-area:total;
    text-align:center;
    font-weight:400; font-size:16px; line-height:18px;
    color:var(--text-on-light, var(--text-on-light, #323744));
  }
  .cart-item .cart-item-remove{
    grid-area:remove;
    align-self:center;
    justify-self:center;
  }
}

/* ── Desktop — Figma 5381:14037 ─────────────────────────────────────────────
   Wider summary sidebar; header row is hidden per the desktop mock. */
@media (min-width: 1024px){
  .cart-two-col > .cart-summary-card{ width:320px; }
  .cart-item{ gap:var(--space-lg); }
}

/* ==== Checkout v2 (2026-07-08) — reuses design tokens from cart v2 ==== */

/* ── Root container (prototype: .checkout-content) ──
   Padding + max-width parity with /b/search .tior-search-page + __inner
   (see b2b_filters.css). Mobile 16/12, tablet+ 24/clamp(16..80). */
.checkout-root{
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 12px;
  box-sizing: border-box;
  display:flex; flex-direction:column; gap:var(--space-lg);
}
@media (min-width: 670px){
  .checkout-root{
    padding: 24px clamp(16px, calc(16px + (80px - 16px) * ((100vw - 670px) / (1280px - 670px))), 80px);
  }
}

/* ── Top-bar block (back + steps + title). Named `.checkout-topbar` — NOT
   `.checkout-header` — because the legacy cart (b2b_cart_new.ftlh) and order
   detail (b2b_order_detail.ftlh) already use `.checkout-header` for their
   flex-row column headers (line ~1059) and the flex-column layout here would
   otherwise clobber their layout via cascade order. ── */
/* DS §9.21 — пара без підзаголовка: breadcrumb→заголовок 4px (було 0). */
.checkout-topbar{
  display:flex; flex-direction:column; gap:var(--space-xs);
}

/* ── Легасі-блок кроків видалено 2026-08-24 ────────────────────────────────
   .checkout-steps / .step-circle / .step-line більше не рендерились у жодному
   шаблоні (їх замінила горизонтальна .checkout-progress нижче, Figma
   5381:14516), але тримали ДРУГЕ, суперечливе визначення того самого
   компонента: radius 14px замість 16, mono 400/22px, і done з тим самим
   виглядом, що inactive. Лишати два описи одного компонента, з яких живий
   лише один, — прямий шлях полагодити не той. Канон — DS §9.17, реалізація
   на .checkout-progress-circle нижче. */

.checkout-title{
  /* DS §9.21 (2026-08-24): приведено до канону заголовка сторінки — було
     Outfit 700 24px. Кошик і чекаут входять у скоуп ДС (§1) і будують ту саму
     пару breadcrumb+заголовок, тож геометрія береться з токенів, а не з
     власного літерала. §7: 20px, JetBrains Mono 700, line-height 24px,
     letter-spacing -0.01em. */
  font-family:var(--font-heading); font-weight:700;
  font-size:20px; line-height:24px; letter-spacing:-0.01em;
  color:var(--text-default);
  margin:0;
}
/* ── New shared progress bar (Figma 5381:14516) ─────────────────────────────
   Horizontal 3-step panel that sits above the two-column body. Replaces the
   compact `.checkout-steps` that used to live inside every step's topbar. */
.checkout-progress{
  background:var(--bg-surface-light);
  border-radius:var(--radius-lg);
  padding:var(--space-lg) var(--space-3xl);
  display:flex; align-items:center; justify-content:center;
  gap:0;
  width:100%;
  box-sizing:border-box;
}
.checkout-progress-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-xs);
  flex:none;
  min-width:133px;
  padding:0 var(--space-lg);
  cursor:pointer;   /* 2026-08-11: clickable — переходить на крок через goto-step */
}
.checkout-progress-label{
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  line-height:15.84px; text-transform:uppercase; letter-spacing:0;
  color:var(--text-placeholder, var(--text-placeholder, #9ba3af));
  white-space:nowrap;
}
.checkout-progress-item.is-active .checkout-progress-label{ color:var(--text-default); }
/* is-completed: пройдений крок (або крок 1, що не вимагає дій) — solid чорний.
   Правило написане ПІСЛЯ is-active, щоб при обох класах (крок 1 при завантаженні)
   completed вигравав каскадом. */
.checkout-progress-item.is-completed .checkout-progress-label{ color:var(--text-default); }
/* ── Крок-індикатор — DS §9.17 ─────────────────────────────────────────────
   Розмір 32×32 → border-radius 16px: рівно половина розміру, справжнє коло,
   а не довільне число (загальне правило круглих індикаторів §5).
   Шрифт — JetBrains Mono 700 14px (було 400/22px).

   Рамка inactive — --border-contrast (§2.4, заведений 24.08.2026; до того
   жив літералом #949494 тут і в §16.4). */

.checkout-progress-circle{
  width:32px; height:32px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  /* inactive — стан за замовчуванням. Змінено 23.08.2026: залитий
     напівпрозорий (rgba(11,12,12,.48) + текст --bg-chip) давав 2.44:1 —
     провал 1.4.3. Освітлити цифру було неможливо: підкладка напівпрозора, над
     білим вона дає #8a8a8a, і навіть чистий білий має там лише 3.45:1.
     Тому змінено ФОРМУ, а не колір: «ще не заповнено» — це порожнеча, а не
     блідість. Тепер 6.49:1, і стан перестав залежати від того, що під рейкою. */
  background:var(--bg-input);
  border:1.5px solid var(--border-contrast);
  color:var(--text-muted);
  font-family:var(--font-mono); font-weight:700; font-size:14px; line-height:1;
  transition:background 140ms ease, border-color 140ms ease, color 140ms ease;
}

/* ЗАЛИВКА каже «пройдено або поточний», ГЛІФ каже — який саме (§9.17,
   правило заведено 24.08.2026). Три з чотирьох станів навмисно мають однакову
   заливку --text-on-light, і розрізняє їх виключно символ усередині:
   active — цифра кроку, done — «✓», step-error — «!». Обведеним лишається
   тільки inactive — те, куди користувач ще не дійшов.

   Історія, щоб не відкотити назад: 23.08 ДС зробила active і done буквально
   однаковими, і рейка перестала відповідати на єдине питання, заради якого
   існує — «де я зараз». 24.08 розділення повернуто, але іншим носієм:
   символом замість заливки чи півтону. Нових кольорів нуль, перезаміряти
   контраст не довелось, і побічно це закриває дальтонізм — три темні кружки
   однакового розміру відрізняються формою, а не відтінком. */
.checkout-progress-item.is-active .checkout-progress-circle,
.checkout-progress-item.is-completed .checkout-progress-circle{
  background:var(--text-on-light);
  border-color:var(--text-on-light);
  color:var(--text-inverted);
}

/* Гліф-стани. Цифра лишається в DOM (порядок кроків для АТ), символ кладеться
   поверх — JS не потрібен.
   :not(.is-active) навмисно: крок 1 несе ОБИДВА класи від рендера (він
   completed за правилом чекауту й active при завантаженні), і поки користувач
   на ньому — він мусить показувати цифру, а не «✓». Активність важливіша за
   пройденість саме тому, що рейка відповідає на «де я». */
.checkout-progress-item.is-completed:not(.is-active) .checkout-progress-circle,
.checkout-progress-item.step-error .checkout-progress-circle{
  color:transparent;
  position:relative;
}
.checkout-progress-item.is-completed:not(.is-active) .checkout-progress-circle::after,
.checkout-progress-item.step-error .checkout-progress-circle::after{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-inverted);
}
.checkout-progress-item.is-completed:not(.is-active) .checkout-progress-circle::after{ content:'\2713'; }

/* step-error — та сама заливка, що active/done. Червоного немає взагалі: ні
   заливки, ні кільця (змінено 23.08.2026, було суцільне var(--status-danger)).
   Причини: на Oponytomy --status-danger #b3261e і --accent-primary #B41522
   дають контраст 1.05:1, тобто фізично один колір — червоний кружечок там
   прочитався б як «цей крок акцентний / поточний», рівно навпаки. Кільце —
   та сама проблема меншого розміру. І колір не має нести стан сам: при
   дальтонізмі червоний і темно-синій кружечки одного розміру з однаковим
   білим гліфом майже не розрізняються.
   Єдиний носій стану — гліф «!» замість цифри (11.45:1). Цифра лишається в
   DOM (порядок кроків для АТ), гліф кладеться поверх — JS не потрібен.

   Наслідок, який варто тримати в полі зору: стан став дуже тихим — від active
   він відрізняється лише гліфом. Це прийнятно рівно тому, що рейка кроків не
   є поверхнею повідомлення про помилку: текст помилки живе інлайном біля
   поля, яке користувач виправляє (§9.22). */
.checkout-progress-item.step-error .checkout-progress-circle{
  background:var(--text-on-light);
  border-color:var(--text-on-light);
}
.checkout-progress-item.step-error .checkout-progress-circle::after{ content:'!'; }
.checkout-progress-divider{
  flex:1 1 0;
  min-width:24px;
  height:1px;
  background:var(--text-subtle, #9ca3af);
}

/* ── Two-column body wrapper ─────────────────────────────────────────────────
   Base (mobile) = display:contents so the wrapper is a layout no-op and the
   current wizard behavior (only .is-active visible under .checkout-root) is
   preserved. Media queries below promote it to a real flex/grid at tablet+. */
.checkout-two-col{ display:contents; }
.checkout-main-card{ display:contents; }
.checkout-side-card{ display:contents; }
.checkout-main-divider{ display:none; }

/* ── Mobile-only overrides ──────────────────────────────────────────────────
   Restore the compact wizard chrome that was there before the desktop/tablet
   restructure: progress bar reduces to just circles + lines (no var(--bg-surface-light, #fafafa) panel,
   no labels, no wide padding), and the new orange subtitle is dropped because
   it was designed for the desktop hero, not the mobile step page. */
@media (max-width: 719px){
  .checkout-progress{
    background:none;
    padding:0;
    margin-bottom:var(--space-sm);
    justify-content:flex-start;
    width:auto;
  }
  .checkout-progress-item{
    min-width:0;
    padding:0;
    flex-direction:row;
  }
  .checkout-progress-label{ display:none; }
  .checkout-progress-divider{
    min-width:0;
    margin:0 4px;
  }
}

/* ── Error banner ── */
.checkout-banner-error{
  background:#fef2f2; border:1px solid #fecaca;
  border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);
  font-family:var(--font-body); font-size:14px; color:#b91c1c;
  line-height:1.5;
}

/* ── Wizard step panels (.checkout-step / .checkout-step.is-active) ── */
.checkout-step{ display:none; }
.checkout-step.is-active{ display:contents; }

/* ── Delivery / checkout card ── */
.checkout-card{
  background:var(--bg-surface-light);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  display:flex; flex-direction:column; gap:var(--space-lg);
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
}

/* ── Section title (mono uppercase) ── */
.section-title{
  display:flex; align-items:center; gap:var(--space-sm);
  font-family:var(--font-mono); font-weight:700; font-size:16px;
  letter-spacing:0; line-height:15.84px; text-transform:uppercase;
  color:var(--text-default);
}
/* DS §9.18: SVG inherits color from the title via currentColor — no
   separate color/stroke/fill; kept in one place so icon and label
   move together automatically. */
.section-title svg{ width:20px; height:20px; flex:none; }

/* ── Delivery options ── */
.delivery-options{ display:flex; flex-direction:column; gap:0; }
.delivery-option{
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);
  cursor:pointer;
  transition:border-color 140ms ease;
  margin-bottom:var(--space-sm);
}
.delivery-option:last-child{ margin-bottom:0; }
/* DS §9.19 → §9.15 unified: selected radio-card sources from --status-success family. */
.delivery-option.selected{ background:var(--status-success-soft); border:1.5px solid var(--status-success); }
.delivery-option-top{
  display:flex; align-items:center; gap:var(--space-md);
  margin-bottom:4px;
}
.delivery-option-name{
  font-family:var(--font-body); font-weight:500;
  font-size:16px; color:var(--text-default);
}
.delivery-option-details{
  display:flex; justify-content:space-between;
  padding-left:24px;
}
.delivery-date{ font-family:var(--font-body); font-size:14px; color:var(--text-muted); }
.delivery-price{ font-family:var(--font-body); font-size:14px; color:var(--accent-primary); font-weight:500; }

/* ── Radio control (shared by delivery + address + payment) ── */
.radio{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--border-default);
  flex:none; display:flex; align-items:center; justify-content:center;
  transition:border-color 140ms ease;
}
.delivery-option.selected .radio{ border-color:var(--status-success); }
.radio-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--status-success);
  display:none;
}
.delivery-option.selected .radio-dot{ display:block; }

/* ── Address option (list item inside checkout delivery address card) ── */
.address-option{
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  cursor:pointer;
  transition:border-color 140ms ease, background 140ms ease;
  background:var(--bg-input);
}
/* DS §9.19 → §9.15 unified: selected radio-card sources from --status-success family.
   The dot needs no background of its own — it inherits --status-success from the
   shared .radio-dot rule above, same as .delivery-option / .pay-option. */
.address-option.selected{ background:var(--status-success-soft); border:1.5px solid var(--status-success); }
.address-option.selected .radio{ border-color:var(--status-success); }
.address-option.selected .radio-dot{ display:block; }
.address-name{
  font-family:var(--font-body); font-weight:700;
  font-size:16px; color:var(--text-default);
  display:flex; align-items:center; gap:6px;
}
.address-name svg{ width:18px; height:18px; color:var(--accent-primary); flex:none; }
.address-phone{
  font-family:var(--font-body); font-size:14px;
  color:var(--text-muted);
}

/* ── Add address button ── */
.btn-addr-add{
  appearance:none; flex:1; height:34px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:transparent;
  font-family:var(--font-body); font-size:14px;
  color:var(--text-default); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color 140ms ease;
}
.btn-addr-add:hover{ border-color:var(--accent-primary); }

/* ── Next step button ── */
.btn-checkout-next{
  appearance:none; width:100%; height:var(--btn-cta-height);
  border:none; border-radius:var(--btn-cta-radius);
  background:var(--accent-primary); color:var(--text-inverted);
  font-family:var(--font-body); font-weight:var(--btn-font-weight); font-size:var(--btn-cta-font-size);
  cursor:pointer;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-checkout-next:not(:disabled):hover{ filter:brightness(1.06); }
.btn-checkout-next:not(:disabled):active{ transform:scale(.985); background:var(--accent-pressed); }
.btn-checkout-next:disabled{
  background:var(--accent-disabled-bg);
  color:var(--accent-disabled-text);
  cursor:not-allowed; opacity:1; filter:none; transform:none;
}

/* ── Address bottom sheet ── */
.addr-sheet-backdrop{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.32); z-index:1000;
  pointer-events:none;
}
.addr-sheet-backdrop.is-open{ display:block; pointer-events:auto; }

.addr-sheet{
  display:none; position:fixed;
  bottom:0; left:50%; transform:translateX(-50%);
  width:390px; max-width:100%;
  background:var(--bg-input);
  border-radius:16px 16px 0 0;
  z-index:1001;
  flex-direction:column; gap:var(--space-lg);
  padding:var(--space-md) var(--space-xl) var(--space-2xl);
  box-sizing:border-box;
  max-height:90vh; overflow-y:auto;
}
.addr-sheet.is-open{ display:flex; pointer-events:auto; }

/* Panel element inside .addr-sheet (wraps form content) */
.addr-sheet-panel{
  display:flex; flex-direction:column; gap:var(--space-md);
  width:100%;
}

.addr-field{
  display:flex; flex-direction:column; gap:var(--space-xs);
}
.addr-field label{
  font-family:var(--font-mono); font-weight:700; font-size:14px;
  letter-spacing: 0.06em; text-transform:uppercase; color:var(--text-muted);
}
.addr-field input, .addr-field select{
  appearance:none; width:100%;
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  background:var(--bg-input);
  padding:10px var(--space-md);
  font-family:var(--font-body); font-size:16px;
  color:var(--text-default);
  outline:none; box-sizing:border-box;
  transition:border-color 140ms ease;
}
.addr-field input::placeholder{ color:var(--text-placeholder); }
.addr-field input:focus{ border-color:var(--accent-primary); border-width:1.5px; }

.addr-sheet-actions{
  display:flex; flex-direction:column; gap:var(--space-sm);
  margin-top:var(--space-sm);
}
.btn-addr-cancel{
  appearance:none; width:100%; height:44px;
  border:1.5px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:transparent;
  font-family:var(--font-body); font-weight:500; font-size:16px;
  color:var(--text-muted); cursor:pointer;
  transition:border-color 140ms ease, color 140ms ease;
}
.btn-addr-cancel:hover{ border-color:var(--text-muted); color:var(--text-default); }
.btn-addr-save{
  appearance:none; width:100%; height:44px;
  border:none; border-radius:var(--radius-lg);
  background:var(--accent-primary); color:var(--bg-input);
  font-family:var(--font-body); font-weight:500; font-size:16px;
  cursor:pointer;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-addr-save:not(:disabled):hover{ filter:brightness(1.06); }
.btn-addr-save:not(:disabled):active{ transform:scale(.985); background:var(--accent-pressed); }
.btn-addr-save:disabled{
  background:var(--accent-disabled-bg);
  color:var(--accent-disabled-text);
  cursor:not-allowed; opacity:1; filter:none; transform:none;
}
.addr-sheet-error{
  font-family:var(--font-body); font-size:14px; color:#b91c1c;
  background:#fef2f2; border:1px solid #fecaca;
  border-radius:var(--radius-sm);
  padding:var(--space-sm) var(--space-md);
  display:none;
}
.addr-sheet-error.is-visible{ display:block; }

/* ── Address sheet header (Task 8c) ── */
.addr-sheet-handle{
  width:40px; height:4px; background:var(--border-default);
  border-radius:2px; margin:0 auto 8px;
}
.addr-sheet-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}
.addr-sheet-title{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; font-size:16px; text-transform:uppercase;
  color:var(--text-default); margin:0;
}
.addr-sheet-close{
  appearance:none; background:none; border:none;
  font-size:20px; color:var(--text-muted); cursor:pointer; padding:4px;
  line-height:1;
}
.addr-sheet-close:hover{ color:var(--text-default); }

/* ── Prototype form fields: .adres-field / .adres-label / .adres-input ── */
.adres-field{ display:flex; flex-direction:column; gap:4px; }
.adres-label{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; font-size:14px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-on-light);
}
.adres-input{
  height:44px; padding:0 12px; box-sizing:border-box;
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  background:var(--bg-input); font-family:var(--font-body); font-size:15px;
  color:var(--text-default);
  appearance:none; width:100%; outline:none;
  transition:border-color 140ms ease;
}
.adres-input::placeholder{ color:var(--text-placeholder); }
.adres-input:focus{ outline:none; border-color:var(--accent-primary); }

/* ── Grid rows for zip+city (1fr : 1.6fr) and contact+phone (1.3fr : 1fr) ── */
.adres-grid-zip-city{
  display:grid; grid-template-columns:1fr 1.6fr; gap:var(--space-sm);
}
.adres-grid-contact-phone{
  display:grid; grid-template-columns:1.3fr 1fr; gap:var(--space-sm);
}

/* ── Address card company line — font inherited from .address-option-text ── */
.address-contact{
  margin-top:12px;
}

/* ── Payment options ── */
.pay-option{
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  padding:var(--space-md) var(--space-lg);
  cursor:pointer;
  margin-bottom:var(--space-sm);
  transition:border-color 140ms ease, background 140ms ease;
  background:var(--bg-input);
}
.pay-option:last-child{ margin-bottom:0; }
/* DS §9.19 → §9.15 unified: selected radio-card sources from --status-success family. */
.pay-option.pay-selected{ background:var(--status-success-soft); border:1.5px solid var(--status-success); }
.pay-option-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:var(--space-sm);
}
.pay-option-top{
  display:flex; align-items:center; gap:var(--space-md);
  margin-bottom:4px;
}
.pay-option-name{
  font-family:var(--font-body); font-size:16px;
  color:var(--text-on-light); font-weight:400;
}
.pay-option-desc{
  font-family:var(--font-body); font-size:16px;
  color:var(--text-muted); line-height:1.6;
  padding-left:24px;
}
.pay-option-desc strong{ color:var(--text-default); font-weight:700; }
.pay-radio{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--border-default);
  flex:none; display:flex; align-items:center; justify-content:center;
  transition:border-color 140ms ease;
}
.pay-option.pay-selected .pay-radio{ border-color:var(--status-success); }
.pay-radio-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--status-success);
  display:none;
}
.pay-option.pay-selected .pay-radio-dot{ display:block; }
/* Single-option variant: no choice to make, so hide the radio widget entirely. */
.pay-option.pay-option-single .pay-radio{ display:none; }
.pay-badge{
  border:1px solid var(--status-success);
  border-radius:var(--radius-sm);
  padding:2px 8px;
  font-family:var(--font-body); font-size:14px;
  color:var(--status-success); font-weight:500;
  margin-left:auto;
  margin-right:var(--space-sm);
}

/* ── Summary: brutto total ── */
.sum-brutto{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 0 var(--space-md);
}
.sum-brutto-label{
  font-family:var(--font-body); font-weight:500; font-size:14px;
  line-height:18px;
  color:var(--text-muted);
}
.sum-brutto-value{
  font-family:var(--font-body); font-weight:700; font-size:16px;
  line-height:20px;
  color:#111827;
}

/* ── Summary rows ── */
.sum-rows{ display:flex; flex-direction:column; gap:var(--space-md); }
.sum-row{
  display:flex; align-items:flex-start; gap:2px;
  padding:0;
}
.sum-row-label{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); flex:0 0 auto; line-height:18px;
  white-space:nowrap;
}
.sum-row-value{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:#111827; flex:1; text-align:right;
  line-height:18px; word-break:break-word;
}
.sum-row-value.accent{ color:var(--accent-primary); font-weight:500; }
.sum-row-value a{ color:var(--accent-primary); text-decoration:underline; cursor:pointer; }
.sum-section-title{
  display:flex; align-items:center; gap:var(--space-sm);
  font-family:var(--font-mono); font-weight:700; font-size:16px;
  letter-spacing:0; line-height:15.84px; text-transform:uppercase;
  color:var(--text-default);
  padding-bottom:var(--space-md);
  border-bottom:1px solid var(--border-surface);
}
/* DS §9.18 — svg успадковує колір тексту заголовка через currentColor;
   окремий color/stroke/fill не задається. Було color:var(--accent-primary):
   на Oponytomy це ще й порушення §2.2 (акцент поза Primary CTA). */
.sum-section-title svg{ width:18px; height:18px; flex:none; }

/* ── Summary: delivery address expandable row ── */
.addr-row-wrap{ display:flex; flex-direction:column; }
.addr-row-top{ display:flex; align-items:flex-start; gap:2px; padding:0; }
.addr-label{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); flex:0 0 auto; white-space:nowrap; line-height:18px;
}
.addr-value-col{ flex:1; display:flex; flex-direction:column; align-items:flex-end; text-align:right; gap:0; }
.addr-name{
  font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:16px;
  color:var(--text-default); line-height:18px; text-align:right;
}
.addr-toggle-btn{
  font-family:var(--font-body); font-weight:400; font-size:14px;
  color:var(--accent-primary); line-height:18px; text-align:right;
  background:none; border:none; padding:0; cursor:pointer; display:block;
  text-transform:capitalize;
}
.addr-expanded{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 280ms ease;
  margin-bottom:0;
}
.addr-expanded.open{ grid-template-rows:1fr; }
.addr-expanded-inner{ min-height:0; overflow:hidden; }
.addr-expanded-box{
  background: var(--bg-accent-tint-soft, rgba(0,95,110,0.06));
  border-radius:3px;
  padding:8px var(--space-md);
  margin-bottom:var(--space-md);
}
.addr-expanded-text{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); line-height:18px; text-align:right;
}

/* ── Summary: note textarea ── */
.sum-note{
  display:flex; flex-direction:column; gap:4px;
}
.sum-note-title{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); margin-bottom:var(--space-sm);
  display:flex; align-items:center; gap:6px;
}
.sum-note-title svg{ width:16px; height:16px; color:var(--text-muted); flex:none; }
.sum-note-text{
  width:100%; box-sizing:border-box;
  border:1px solid var(--border-default);
  border-radius:var(--radius-sm);
  background:var(--bg-input);
  padding:var(--space-md);
  outline:none;
  font-family:var(--font-body); font-size:16px; font-weight:400;
  color:var(--text-muted); line-height:18px;
  resize:vertical; overflow-y:auto;
  min-height:calc(4 * 18px + 2 * 12px);
  max-height:calc(8 * 18px + 2 * 12px);
  transition:border-color 140ms ease;
}
.sum-note-text::placeholder{ color:var(--text-muted); font-style:normal; font-weight:400; }
.sum-note-text:focus{ border-color:var(--accent-primary); }

/* ── Summary: terms checkbox row ── */
.sum-checkbox-row{
  display:flex; align-items:flex-start; gap:var(--space-sm);
  padding:var(--space-md) 0;
}
.sum-checkbox{
  width:16px; height:16px; min-width:16px; min-height:16px;
  border:1.5px solid var(--border-module);
  border-radius:2px; flex:none; margin-top:2px;
  cursor:pointer; appearance:none;
  display:flex; align-items:center; justify-content:center;
  transition:background 140ms ease, border-color 140ms ease;
}
.sum-checkbox:checked{ background:var(--accent-primary); border-color:var(--accent-primary); }
.sum-checkbox:checked::after{ content:'✓'; color:var(--bg-input); font-size:10px; line-height:1; }
.sum-checkbox-label{
  font-family:var(--font-body); font-size:14px; font-weight:400;
  color:var(--text-muted); line-height:18px; cursor:pointer;
}

/* ── Confirm button ── */
.btn-confirm{
  appearance:none; width:100%; height:var(--btn-cta-height);
  border:none; border-radius:var(--btn-cta-radius);
  background:var(--accent-primary); color:var(--text-inverted);
  font-family:var(--font-body); font-weight:var(--btn-font-weight); font-size:var(--btn-cta-font-size);
  cursor:pointer;
  transition:background 140ms ease, transform 100ms ease;
}
.btn-confirm:not(:disabled):hover{ filter:brightness(1.06); }
.btn-confirm:not(:disabled):active{ transform:scale(.985); background:var(--accent-pressed); }
.btn-confirm:disabled{
  background:var(--accent-disabled-bg);
  color:var(--accent-disabled-text);
  cursor:not-allowed; opacity:1; filter:none; transform:none;
}

/* ── Summary: consent text under submit ── */
.checkout-consent-text{
  font-family:var(--font-body); font-size:14px; font-weight:400;
  color:var(--text-muted); line-height:18px; text-align:center;
  margin-top:var(--space-sm);
}
.checkout-consent-text span{ text-decoration:underline; cursor:pointer; }

/* ── Summary: submit-blocked hint ── */
.checkout-step-hint{
  font-family:var(--font-body); font-size:14px; font-weight:400;
  color:#b3261e; line-height:18px; text-align:center;
  margin-top:var(--space-sm);
}
.checkout-step-hint[hidden]{ display:none; }

/* ── Tablet+ (Figma 5381:14696) ─────────────────────────────────────────────
   All 3 checkout-step sections become visible together. Delivery + Payment
   sit side-by-side inside .checkout-main-card, Summary is a separate card
   below (tablet) or beside (desktop). The wizard Next buttons disappear —
   user submits from the Summary card's confirm button. */
@media (min-width: 720px){
  .checkout-two-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-xl);
  }
  .checkout-main-card{
    display:flex;
    align-items:stretch;
    gap:var(--space-xl);
    padding:0 var(--space-lg);
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
    width:100%;
    box-sizing:border-box;
  }
  /* On tablet the summary card drops below Delivery+Payment and centers.
     Width matches roughly one of the two inner columns (~half of main-card). */
  .checkout-side-card{
    display:block;
    background:#fff;
    border-radius:var(--radius-lg);
    box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
    width:calc(50% - var(--space-xl) / 2);
    box-sizing:border-box;
    padding:0 var(--space-xl);
  }
  /* Force every step visible regardless of the wizard's hidden attr. Include
     the .is-active variant so it overrides the base `display: contents` rule
     that has higher specificity than the plain-tag one. */
  .checkout-step,
  .checkout-step[hidden],
  .checkout-step.is-active{
    display:flex;
    flex-direction:column;
    gap:var(--space-3xl);
  }
  .checkout-main-card > .checkout-step[data-step="1"],
  .checkout-main-card > .checkout-step[data-step="2"]{
    flex:1 1 0;
    min-width:0;
    padding:var(--space-xl) var(--space-md);
  }
  .checkout-side-card > .checkout-step[data-step="3"]{
    padding:var(--space-xl) 0;
    gap:var(--space-lg);
  }
  /* Vertical divider between Delivery (step 1) and Payment (step 2). */
  .checkout-main-divider{
    display:block;
    width:1px;
    background:var(--text-subtle, #9ca3af);
    margin:var(--space-3xl) var(--space-xs);
    flex:none;
  }
  /* Wizard nav buttons collapse — form is submitted from the summary card. */
  .btn-checkout-next{ display:none !important; }

  /* Cards inside a step lose their own drop-shadow — they're already inside
     a shadowed .checkout-main-card / .checkout-side-card. */
  .checkout-main-card .checkout-card,
  .checkout-side-card .checkout-card{
    background:transparent;
    box-shadow:none;
    padding:0;
  }
}

/* ── Desktop (Figma 5381:14506) ─────────────────────────────────────────────
   Two-column body: main card (Delivery + Payment) fixed at 800px, summary
   card grows to fill the rest. */
@media (min-width: 1024px){
  .checkout-two-col{
    flex-direction:row;
    align-items:stretch;
    justify-content:center;
  }
  /* Three equal-width columns: main-card holds Delivery + Payment (so flex:2),
     side-card holds Summary (flex:1). align-items:stretch above equalises height. */
  .checkout-main-card{
    flex:2 1 0;
    min-width:0;
    width:auto;
    max-width:none;
  }
  .checkout-side-card{
    flex:1 1 0;
    min-width:0;
    width:auto;
    max-width:none;
  }
}

@media (prefers-reduced-motion: reduce){
  /* .step-circle прибрано 2026-08-24 разом із легасі-блоком; крок-індикатор
     тепер .checkout-progress-circle (§12.3 — вимкнути його transition теж). */
  .checkout-progress-circle,
  .delivery-option,
  .radio, .radio-dot,
  .address-option,
  .pay-option, .pay-radio, .pay-radio-dot,
  .addr-expanded,
  .sum-checkbox,
  .sum-note-text,
  .btn-checkout-next,
  .btn-confirm,
  .btn-addr-save,
  .btn-addr-cancel,
  .addr-sheet{ transition:none !important; }
}

/* ── Task 12: Checkout success screen (prototype-matching layout) ─────── */
.checkout-success-root{
  max-width:480px; margin:0 auto; padding:60px 24px 40px;
  display:flex; flex-direction:column; align-items:center; box-sizing:border-box;
}
.checkout-success-card{
  width:100%; display:flex; flex-direction:column; align-items:center;
}

/* Green circle with white checkmark */
.checkout-success-check{
  width:48px; height:48px; background:#1e6b3c; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}

/* "Zamówienie #{id}\npotwierdzone" — monospace bold */
.checkout-success-title{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; font-size:20px; line-height:24px;
  color:var(--text-on-light); text-align:center;
  margin:0 0 52px 0;
}

/* Delivery info row (icon + labels) */
.checkout-success-eta{
  width:100%; display:flex; align-items:center; justify-content:center; gap:16px;
  margin-bottom:40px; color:var(--text-on-light);
}
.checkout-success-eta-body{ display:flex; flex-direction:column; gap:2px; }
.checkout-success-eta-label{
  font-family:var(--font-body); font-weight:400; font-size:16px; line-height:18px;
  color:var(--text-muted);
}
.checkout-success-eta-value{
  /* 2026-08-24: було var(--font-heading, var(--font-body)). DS §7 скоупить
     --font-heading на ЗАГОЛОВКИ СТОРІНОК (§9.21); це не заголовок, тож після
     оголошення токена правило мовчки перекинулось би в моно. Пришпилено. */
  font-family:var(--font-body); font-weight:600; font-size:18px; line-height:18px;
  color:var(--text-on-light);
}

/* Two-button stack: primary + secondary */
.checkout-success-actions{
  width:100%; display:flex; flex-direction:column; gap:16px;
}

/* Support card (below the success card) */
.checkout-success-support{
  width:100%; margin-top:60px; padding:18px 12px; box-sizing:border-box;
}
.checkout-success-support-head{
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
  color:var(--text-on-light);
}
.checkout-success-support-title{
  font-family:var(--font-body);   /* див. коментар вище — не заголовок сторінки */
  font-weight:600; font-size:18px; color:var(--text-on-light);
}
.checkout-success-support-text{
  font-family:var(--font-body); font-weight:400; font-size:16px; line-height:18px;
  color:var(--text-muted); margin:0 0 16px 0;
}
.checkout-support-phone{
  display:block; font-family:var(--font-body);   /* див. коментар вище — не заголовок сторінки */
  font-weight:600; font-size:18px; color:var(--text-default);
  text-decoration:none; margin:0 0 2px 0;
}
.checkout-support-phone:hover{ color:var(--accent-primary); }
.checkout-support-email{
  display:block; font-family:var(--font-body);
  font-weight:500; font-size:16px; color:var(--text-default);
  text-decoration:none; margin:2px 0 2px 0;
  word-break:break-all;
}
.checkout-support-email:hover{ color:var(--accent-primary); }
.checkout-success-support-hours{
  font-family:var(--font-body); font-weight:400; font-size:16px;
  color:var(--text-muted); margin:0;
}

/* ── Address card layout — matches prototype ─────────────────────────────── */

/* Top row: badge (left) + edit/delete icons (right) */
.address-option-topbar{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:8px; min-height:24px;
}
.address-option-icons{
  display:flex; align-items:center; gap:4px;
}

/* Radio + pin + name row */
.address-option-radio-row{
  display:flex; align-items:center; gap:10px;
}

/* Address text block: indented to align with name after the 16px pin + 6px gap.
   Font/color/line-height applied here so children inherit — matches prototype .address-text. */
.address-option-text{
  font-family:var(--font-body); font-size:14px;
  color:var(--text-muted); line-height:1.6;
  padding-left:24px;
}

/* Base icon button */
.addr-icon{
  appearance:none; border:none; background:transparent;
  padding:4px; cursor:pointer; color:var(--text-muted);
  border-radius:var(--radius-sm);
  display:flex; align-items:center; justify-content:center;
  transition:color 140ms ease, background 140ms ease;
}
.addr-icon:hover{ color:var(--text-default); background:var(--border-default); }
.addr-icon-delete:hover{ color:#b91c1c; }

/* Two-button row below address card list */
.address-actions{
  display:flex; gap:var(--space-md); margin-top:var(--space-md);
}
.address-actions .btn-addr-add{ flex:1; }

/* "Wybierz" button — same neutral style as .btn-addr-add (matches prototype) */
.btn-addr-sel{
  appearance:none; flex:1; height:34px;
  border:1px solid var(--border-default);
  border-radius:var(--radius-lg);
  background:transparent;
  font-family:var(--font-body); font-size:14px;
  color:var(--text-default); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  transition:border-color 140ms ease;
}
.btn-addr-sel:hover{ border-color:var(--accent-primary); }

/* Empty-state hint inside #addrList */
.addr-empty-hint{
  font-family:var(--font-body); font-size:14px; color:var(--text-muted);
  padding:var(--space-md) 0; text-align:center;
}

/* ── Address pick sheet (analogous to .addr-sheet) ── */
.addr-pick-sheet-backdrop{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.32); z-index:1000;
}
.addr-pick-sheet-backdrop.is-open{ display:block; }

.addr-pick-sheet{
  display:none; position:fixed;
  bottom:0; left:50%; transform:translateX(-50%);
  width:390px; max-width:100%;
  background:var(--bg-input);
  border-radius:16px 16px 0 0;
  z-index:1001;
  flex-direction:column;
  padding:var(--space-md) var(--space-xl) var(--space-2xl);
  box-sizing:border-box;
  max-height:70vh; overflow-y:auto;
}
.addr-pick-sheet.is-open{ display:flex; }

.addr-pick-panel{
  display:flex; flex-direction:column; gap:12px; width:100%;
}

/* Grip / handle at top of the bottom-sheet (visual affordance) */
.addr-pick-handle{
  width:40px; height:4px; background:var(--border-surface);
  border-radius:2px; margin:0 auto 8px;
}

/* Header row: title on the left, close X on the right */
.addr-pick-header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:4px;
}

.addr-pick-title{
  font-family:'JetBrains Mono', ui-monospace, monospace;
  font-weight:700; font-size:16px; letter-spacing:.02em;
  text-transform:uppercase; color:var(--text-default);
}

.addr-pick-close{
  appearance:none; background:none; border:none;
  font-size:20px; color:var(--text-muted); cursor:pointer; padding:4px;
  line-height:1;
}
.addr-pick-close:hover{ color:var(--text-default); }

.addr-pick-list{
  display:flex; flex-direction:column; gap:var(--space-sm);
}

.addr-pick-item{
  background:var(--bg-surface-light);
  border:1.5px solid transparent;
  border-radius:var(--radius-lg);
  padding:var(--space-lg);
  cursor:pointer;
  transition:border-color 150ms ease;
  box-shadow:0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.08);
  display:flex; align-items:flex-start; gap:var(--space-md);
}
.addr-pick-item:hover{ border-color:var(--accent-primary); }
/* DS §9.19 → §9.15 unified: same radio-card family as .delivery-option /
   .pay-option / .address-option — selected sources from --status-success.
   Not --accent-primary: on Oponytomy that resolves to cardinal #B41522, and
   §3.2 reserves the accent for the Primary CTA alone. */
.addr-pick-item.selected{ border-color:var(--status-success); background:var(--status-success-soft); }
.addr-pick-item.selected .addr-pick-radio{ border-color:var(--status-success); }
.addr-pick-item.selected .addr-pick-radio-dot{ display:block; }

.addr-pick-radio{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--border-surface);
  flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
  transition:border-color 150ms;
}
.addr-pick-radio-dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--status-success); display:none;
}

.addr-pick-item-body{ flex:1; min-width:0; }
.addr-pick-item-badge{ margin-bottom:4px; }
.addr-pick-item-name{
  font-family:var(--font-body); font-weight:700; font-size:16px;
  color:var(--text-default);
  display:flex; align-items:center; gap:6px;
}
.addr-pick-item-name svg{ width:16px; height:16px; color:var(--accent-primary); flex:none; }
.addr-pick-item-detail{
  font-family:var(--font-body); font-size:16px;
  color:var(--text-muted); margin-top:2px;
}

/* Shared default-address chip — mirrors prototype .firma-badge-default */
.firma-badge-default{
  display:inline-block;
  font-family:var(--font-body); font-size:14px; font-weight:500;
  color:#1e6b3c; background:#e8f4ed;
  border:1px solid #a8d4b8; border-radius:var(--radius-sm);
  padding:2px 10px;
}


/* SHELVED 2026-07-23: .cart-item-price-lock + .cart-flash / .cart-flash-warn
   classes belonged to the guest-cart / ATC drawer feature; removed with the
   shelve. */