/* =============================================================================
   B2B Product Result Card — single-DOM redesign

   ONE DOM per product: .product-row.pr-redesign.pr-font-v2 (rendered by
   b2b_card_result.ftlh). Layout switches via @media grid rules below:
     mobile   (max-width: 669px)
     tablet   (670-1039px)
     desktop  (1040px+)
   Per TIOR_Responsive_Breakpoints.md — fixed values, not to be changed.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   :root tokens — kept scoped to the results block so we don't leak into the
   rest of the page. Values mirror the mobile prototype's tokens.
   ----------------------------------------------------------------------------- */
.b2b-results {
	/* 2026-08-24 — Y/N закрито: текстова трійка переведена на passthrough.
	   Причина. DS §13 леґалізує для картки власну ШКАЛУ radius (4/8/12) і
	   spacing (10/14/20/28/64/104) — але не власну ПАЛІТРУ: §9.11 задає тут
	   саме глобальні ролі (.pr-model → --text-muted, .pr-brand → --text-on-light,
	   .pr-spec → --text-default). Хардкод давав два дефекти одночасно:
	     1) затемнення §16.3 (WCAG 1.4.3) не доходило до картки — а це
	        найзавантаженіший екран продукту (/b/search);
	     2) значення були INFR-літералами в бренд-агностичному неймспейсі, тож
	        Oponytomy отримував чужу сіру шкалу замість власної.
	   Фолбеки лишені як страховка на випадок, якщо блок колись відрендериться
	   поза сторінкою з підключеними бренд-токенами. */
	--pr-text-default: var(--text-default, #0d0e13);
	--pr-text-on-light: var(--text-on-light, #323744);
	--pr-text-muted: var(--text-muted, #595e6a);
	--pr-text-subtle: var(--text-subtle, #6d7788);
	--pr-text-inverted: var(--text-inverted, #fffaf2);

	/* 2026-09-11 — свідомо НЕ passthrough до --text-muted, і це виняток, а не
	   дрейф. Еталон тримає DOT, сегмент і назву моделі на #8A8A8A; наш
	   --text-muted у серпні затемнили під WCAG (§16.3), бо він фарбує ще й
	   ціну netto, EAN і лок-лейбл гостя — тобто значення, які читають, а не
	   пробігають оком. Ці три — підписи-орієнтири, тому для них лишаємо
	   світліший еталонний тон, а все, що треба ПРОЧИТАТИ, лишається на
	   --pr-text-muted із контрастом AA. Питання закрито з користувачкою
	   2026-09-11: «тільки ці три — як в еталоні». */
	--pr-text-meta: #8A8A8A;

	/* 2026-08-04: passthrough до brand tokens (раніше були хардкод-alias-и на INFR-значення,
	   через що на OTM chip рендерився світло-сірим замість темного per spec). --pr-bg-page
	   був тут (#d2d8db) — видалено як dead token (ніде не консюмиться).
	   2026-08-25: --pr-border-* теж переведено (див. нижче). */
	--pr-bg-input: var(--bg-input);
	--pr-bg-chip: var(--bg-chip);

	/* 2026-08-25 — той самий клас дефекту, що й текстова трійка вище: INFR-
	   літерали в бренд-агностичному неймспейсі. На Oponytomy картка малювалась
	   світло-сірою рамкою #eaeaea замість власної #cdc6c0 (§16.4), тобто
	   стилістичне затемнення рамки OP до картки товару не доходило.
	   --pr-border-subtle і --pr-border-chip лишаються літералами свідомо: обидва
	   заведені як «немає відповідного токена в системі» (див. коментарі нижче),
	   тобто це не дрейф, а задокументовані одноразові значення. */
	--pr-border-default: var(--border-default, #eaeaea);
	--pr-border-surface: var(--border-surface, #e5e7eb);
	--pr-border-module: var(--border-module, rgba(107, 114, 128, 0.4));
	/* --border-default at 50% α — softer inner outline на .pr-second (2026-08-12),
	   узгоджено з еталоном (var(--border-subtle) в prototype). */
	--pr-border-subtle: rgba(217, 217, 217, 0.5);
	/* INFR теплий-бежевий border для chip-і (info-tag) — hardcoded в prototype
	   як #BEC5C8, який не збігається з жодним іншим border-token (2026-08-12). */
	--pr-border-chip: #BEC5C8;
	/* Card soft-shadow — заміна hairline border-у на картці, per prototype
	   (2026-08-12). Дві-шарова тінь: близька для контуру + віддалена для
	   об'ємності. Не брендовий, однаковий на обох темах. */
	--pr-shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 6px 24px rgba(0,0,0,.12);

	--pr-accent-primary: var(--accent-primary, #005F6E);
	--pr-accent-pressed: var(--accent-pressed, #024B57);

	--pr-radius-sm: 4px;
	--pr-radius-md: 8px;
	--pr-radius-lg: 12px;

	--pr-space-xs: 4px;
	--pr-space-sm: 8px;
	--pr-space-sm-plus: 10px; /* між sm(8) і md(12) — tablet/desktop card padding +2 */
	--pr-space-md: 12px;
	--pr-space-md-plus: 14px; /* між md(12) і lg(16) — tablet/desktop рядки-інсети +2 */
	--pr-space-lg: 16px;
	--pr-space-20: 20px;
	--pr-space-xl: 24px;
	--pr-space-28: 28px; /* закриває tablet-рядок і desktop column-gap картки одним токеном */
	--pr-space-2xl: 32px;
	--pr-space-3xl: 40px;
	--pr-space-64: 64px;
	--pr-space-104: 104px;

	--pr-font-body: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pr-font-mono: 'JetBrains Mono', ui-monospace, monospace;

	/* 2026-08-24 — був хардкод #16a34a. DS §9.11 задає .pr-stock = --status-success,
	   і §9.22 прямо називає появу власного зеленого дефектом: «у системі з'явиться
	   п'ятий хардкод-зелений — рівно та проблема, яку §9.15 закривав 10.08.2026,
	   зводячи #056b4b і #15803d до одного токена».
	   Плюс доступність: #16a34a на білому ≈3.2:1 при вимозі 4.5:1 для тексту 18px.
	   Чинний --status-success (#1A6E63) дає 6.08:1 — запас потрібен саме тут, бо
	   крапка наявності 11px несе колір сама, без тексту й рамки (1.4.11). */
	--pr-stock-green: var(--status-success, #1A6E63);
}


/* Override b2b_results.css: the legacy .b2b-results__body has min-width:650px
   (needed by the old .b2b-results__row 7-column table). New card layout is
   fluid down to ~350px, so drop that constraint — and cancel the parent's
   overflow-x:auto — whenever the body contains new-style cards. Old layout
   is untouched: .b2b-results__row keeps its own min-width. */
.b2b-results:has(> .b2b-results__body > .product-row) {
	overflow-x: visible;
}
.b2b-results__body:has(> .product-row) {
	min-width: 0;
}


/* -----------------------------------------------------------------------------
   Shared components (all breakpoints)
   ----------------------------------------------------------------------------- */

/* Tooltip on hover — matches prototype .chip-tooltip-wrap */
.b2b-results .chip-tooltip-wrap {
	position: relative;
	display: inline-flex;
	justify-content: flex-end;
	outline: none;
}
.b2b-results .chip-tip {
	position: absolute;
	/* DS §2.3 — канонічний рецепт тултипа: фон var(--text-on-light), текст
	   var(--text-inverted), 14px, padding 5px 10px, радіус --radius-chip,
	   тінь 0 2px 8px rgba(0,0,0,.2). Окремого токена під заливку немає: 21.08
	   ДС прибрала --chip-tooltip-bg і зафіксувала практику.
	   Було #323744 літералом — тобто --text-on-light Inforeifen, через що на
	   Oponytomy тултип малювався синьо-сірим замість теплого чорного #282424. */
	background: var(--text-on-light);
	color: var(--text-inverted);
	font-family: var(--pr-font-body);
	font-size: 14px;
	line-height: 18px;
	padding: 5px 10px;
	border-radius: var(--radius-chip, 6px);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease;
	z-index: 2000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.b2b-results .chip-tip.above,
.b2b-results .chip-tip.below { right: 0; }
.b2b-results .chip-tip.above { bottom: calc(100% + 6px); }
.b2b-results .chip-tip.below { top: calc(100% + 6px); }
.b2b-results .chip-tip.above-center {
	bottom: calc(100% + 6px);
	left: 50%;
	transform: translateX(-50%);
}
.b2b-results .chip-tooltip-wrap:hover .chip-tip,
.b2b-results .chip-tooltip-wrap:focus-within .chip-tip { opacity: 1; }

/* EU badge (fuel/wet/noise: icon + letter chip) */
.b2b-results .eu-badge {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--pr-font-mono);
	font-size: 16px;
	color: var(--pr-text-default);
	font-variant-numeric: tabular-nums;
}
.b2b-results .eu-badge .letter {
	background: var(--pr-text-on-light);
	color: #ffffff;
	border-radius: var(--pr-radius-sm);
	padding: 0 6px;
	font-weight: 400;
	font-family: var(--pr-font-mono);
	font-size: 16px;
	line-height: 22px;
}
.b2b-results .eu-badge .eu-icon,
.b2b-results .eu-badge svg.eu-icon {
	width: 18px;
	height: 18px;
	flex: none;
	color: var(--pr-text-muted);
}

/* Guest price lock */
.b2b-results .pr-price-lock {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	width: 100%;
}
.b2b-results .lock-label {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	box-sizing: border-box;
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: var(--pr-text-muted);
	background: var(--pr-bg-chip);
	border-radius: var(--pr-radius-sm);
	padding: 5px 6px;
	text-align: right;
	white-space: normal;
	overflow-wrap: break-word;
}
.b2b-results .lock-login {
	background: none;
	border: none;
	padding: 0;
	color: var(--pr-accent-primary);
	font-family: var(--pr-font-body);
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}

/* EAN — hidden by default, toggled via .show-ean on .b2b-results parent */
.b2b-results .ean-val {
	display: none;
	font-family: var(--pr-font-mono);
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	color: var(--pr-text-muted);
	margin-top: 4px;
}
.b2b-results.show-ean .ean-val {
	 display: block; 
	display: block;
	grid-column: 3;
	grid-row: 7;
}

/* Add-to-cart button — shared TIOR-teal styling (states + hover + active + disabled) */
.b2b-results .add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pr-accent-primary);
	color: var(--pr-text-inverted);
	border: 0;
	border-radius: var(--pr-radius-md);
	font-family: var(--pr-font-body);
	font-weight: var(--btn-font-weight, 500);
	line-height: 1;
	cursor: pointer;
	transition: box-shadow 160ms ease, filter 160ms ease, background 160ms ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
/* .add-btn:hover — box-shadow-lift прибрано 2026-08-10 per design system §9.1
   (hover тепер тільки brightness/bg-swap, без кольорової тіні-підсвітки).
   Hover-ефект тепер повністю задається базовою кнопкою (filter/bg swap). */
.b2b-results .add-btn:active {
	background: var(--pr-accent-pressed);
	box-shadow: none;
	transform: scale(0.985);
}
.b2b-results .add-btn:focus-visible {
	outline: 2px solid var(--pr-text-default);
	outline-offset: 2px;
}
.b2b-results .add-btn:disabled {
	background: var(--accent-disabled-bg, #9ba3af);
	color: var(--accent-disabled-text, #fffaf2);
	cursor: not-allowed;
	box-shadow: none;
}

/* Qty stepper (Search-side) — layout/touch overrides only. Всі візуальні
   властивості (bg, border, radius, hover/active states, розміри) успадковано
   з базового .qty-stepper в main.css per design system §9.3 (2026-08-10). */
.b2b-results .qty-btn {
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	font-family: var(--pr-font-body);
}
.b2b-results .qty-btn:disabled { opacity: 0.5; }
.b2b-results .qty-value {
	font-family: var(--pr-font-body);
	font-variant-numeric: tabular-nums;
}

/* Out-of-stock visual dim (single DOM — sub-container selectors via
   .is-out-card descendants live in the mobile/tablet/desktop blocks). */
.b2b-results .stock-dot.is-out { background: var(--pr-text-subtle); }
.b2b-results .is-out.delivery-text { color: var(--pr-text-muted); }


/* =============================================================================
   MOBILE — .product-row .pr-*
   ============================================================================= */
.b2b-results .product-row {
	/* 2026-09-11: явна вага 400 на всю картку. base.css:19-24 задає body
	   font-weight:400, але в @media (max-width:768px) знижує його до 300 —
	   тобто на мобайлі й нижній частині таблету КОЖЕН елемент картки без
	   власного font-weight малювався Light. Наочно це давало різну вагу в
	   одному рядку: "WetProof" і "Premium" (мають явні 400) проти "112 szt.",
	   "2 dni" і DOT (не мали) — саме та розбіжність, якої в еталоні немає:
	   там body ваги не чіпає, тож усе успадковує 400.
	   Ставимо на контейнер, а не поелементно: усе, що свідомо важче
	   (бренд/ціна/CTA 700, spec 500), задає свою вагу явно й не зачеплене. */
	font-weight: 400;
	background: var(--pr-bg-input);
	/* 2026-08-12: soft-shadow замість hairline border per prototype (легка тінь
	   читається як картка + об'єм, без жорсткої лінії). border-radius 12→8
	   узгоджено з --radius-lg еталону. */
	border: none;
	box-shadow: var(--pr-shadow-card);
	border-radius: var(--pr-radius-md);
	padding: var(--pr-space-lg);
	display: flex;
	flex-direction: column;
	gap: var(--pr-space-md);
	font-family: var(--pr-font-body);
	color: var(--pr-text-default);
}
.b2b-results .product-row + .product-row { margin-top: var(--pr-space-md); }

/* --- Sub-panel 1: pr-top --- */
.b2b-results .pr-top {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"info price"
		"info stock";
	column-gap: var(--pr-space-md);
	row-gap: var(--pr-space-lg);
	align-items: start;
	border: 1px solid var(--pr-border-default);
	border-radius: var(--pr-radius-lg);
	padding: var(--pr-space-md) var(--pr-space-sm);
}
.b2b-results .pr-info {
	grid-area: info;
	display: flex;
	flex-direction: column;
	gap: var(--pr-space-sm);
	min-width: 0;
}
.b2b-results .pr-info-text {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}
.b2b-results .pr-spec {
	font-weight: 500;
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-text-default);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.b2b-results .pr-model {
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-text-meta);
	margin-top: -6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.b2b-results .pr-image-row {
	display: flex;
	align-items: flex-end;
	gap: var(--pr-space-xs);
}
.b2b-results .pr-image {
	flex: none;
	/* 2026-08-12: aligned з еталоном — elastic width up to 90px (не fixed),
	   border-radius 8px, щоб image мала візуальну рамку як у прототипі. */
	width: auto;
	max-width: 90px;
	height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: end;
	border-radius: var(--pr-radius-md);
	overflow: hidden;
}
.b2b-results .pr-image a,
.b2b-results .pr-image span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.b2b-results .pr-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Центроване — за проханням користувача (2026-08-12), відкат від `left center`. */
	object-position: center;
}
.b2b-results .pr-info-chips {
	display: flex;
	flex-direction: column;
	gap: var(--pr-space-xs);
	padding-bottom: 2px;
}
.b2b-results .pr-chips {
	display: flex;
	flex-direction: row;
	gap: var(--pr-space-xs);
	flex-wrap: wrap;
}
.b2b-results .info-tag {
	/* --pr-border-chip — warm-beige-grey #BEC5C8, свідомо тепліше за
	   --pr-border-default (2026-08-12, узгоджено з еталоном). */
	border: 1px solid var(--pr-border-chip);
	/* --pr-bg-chip token: INFR beige / OTM dark. */
	background: var(--pr-bg-chip);
	color: var(--pr-text-on-light);
	font-family: var(--pr-font-body);
	font-size: 14px;
	line-height: 18px;
	padding: 4px 10px;
	border-radius: var(--pr-radius-md);
	font-weight: 400;
}
.b2b-results .pr-icons {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--pr-text-muted);
}
.b2b-results .pr-icons .type-icon,
.b2b-results .pr-icons .season-icon { width: 24px; height: 24px; flex: none; padding: 0; }

/* Right col: price + stock/delivery */
.b2b-results .pr-price-col {
	grid-area: price;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	max-width: 112px;
}
.b2b-results .pr-price {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.b2b-results .pr-gross {
	font-family: var(--pr-font-body);
	font-weight: 500;
	font-size: 20px;
	line-height: 24px;
	color: var(--pr-text-default);
	font-variant-numeric: tabular-nums;
}
.b2b-results .pr-netto {
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-text-muted);
	font-variant-numeric: tabular-nums;
}
.b2b-results .pr-availability {
	grid-area: stock;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--pr-space-xs);
}
.b2b-results .pr-availability .stock-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--pr-font-body);
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-text-default);
	font-variant-numeric: tabular-nums;
}
.b2b-results .pr-availability .stock-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--pr-stock-green);
	flex: none;
}
.b2b-results .pr-availability .stock-dot.is-low { background: #f59e0b; }
/* curAmount=0 → «0 szt.» — крапка сіра. Специфічність 4>3, перебиває базове зелене
   правило вище (яке інакше вигравало каскад проти .stock-dot.is-out). */
.b2b-results .pr-availability .stock-dot.is-out { background: var(--pr-text-subtle); }
.b2b-results .pr-delivery {
	font-family: var(--pr-font-body);
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-stock-green);
	margin-top: 4px;
}

/* --- Sub-panel 2: pr-second (2026-08-12 aligned with prototype:
        added --pr-bg-input fill; softer half-alpha border; padding+gap tightened) --- */
.b2b-results .pr-second {
	display: flex;
	flex-direction: column;
	gap: var(--pr-space-xs);
	background: var(--pr-bg-input);
	border: 1px solid var(--pr-border-subtle);
	border-radius: var(--pr-radius-lg);
	padding: var(--pr-space-sm);
}
.b2b-results .pr-brand-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pr-space-sm);
}
.b2b-results .pr-brand {
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-text-on-light);
}
.b2b-results .pr-eu-labels {
	display: flex;
	align-items: center;
	gap: var(--pr-space-sm);
}
.b2b-results .pr-segment-row {
	display: flex;
	justify-content: space-between;
	font-family: var(--pr-font-body);
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-text-meta);
}
/* .dot-year прибрано 2026-09-11: рік виробництва переїхав у смугу етикетки
   як .pr-dot (див. нижче, блок REDESIGN). */
.b2b-results .pr-segment-row .segment-label {
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-text-meta);
}

/* --- Sub-panel 3: pr-purchase (qty + Add-to-cart) --- */
.b2b-results .pr-purchase {
	display: flex;
	align-items: center;
	gap: var(--pr-space-md);
}
/* .pr-qty: sizing per design system §7 + §9.3 (2026-08-10) — tokens джерело правди.
   Успадковує width/height через .qty-stepper базу; flex:none залишаємо явно
   бо .pr-purchase — flex-контейнер, а .qty-stepper базове flex:none могло б
   бути overridden іншими rule-ами всередині Search-скоупу. */
.b2b-results .pr-qty { flex: none; }
.b2b-results .pr-qty-btn { border-radius: 0; }
.b2b-results .pr-qty-value { line-height: 1; }
.b2b-results .pr-add-btn {
	flex: 1;
	height: var(--btn-md-height, 40px);
	padding: 0 var(--pr-space-20);
	border-radius: var(--btn-md-radius, 12px);
	font-size: var(--btn-md-font-size, 20px);
}

/* Out-of-stock dim (mobile) */
.b2b-results .product-row.is-out-card .pr-top,
.b2b-results .product-row.is-out-card .pr-second { opacity: 0.75; }
.b2b-results .product-row.is-out-card .pr-availability .stock-dot { filter: grayscale(1); opacity: 0.55; }
.b2b-results .product-row.is-out-card .pr-availability .stock-row,
.b2b-results .product-row.is-out-card .pr-delivery { color: var(--pr-text-muted); }



/* -----------------------------------------------------------------------------
   Проміжок між картками результатів:
     - залоговані (dealer):  12px
     - гості (isAuth=false): 24px (розрідженіший B2C-feel)
   Реалізовано через margin-bottom на всіх 3 варіантах картки (mobile/tablet/
   desktop). На mobile існуючий `.product-row + .product-row { margin-top: 12px }`
   вище — колапс з margin-bottom (max wins) дає стабільні 12/24 незалежно від
   активного правила. Клас `.is-guest` ставиться на container'i в
   b2b_search_result_block_new.ftlh коли isAuthenticated=false. */
.b2b-results .product-row {
	margin-bottom: 12px;
}
.b2b-results.is-guest .product-row {
	margin-bottom: 24px;
}


/* -----------------------------------------------------------------------------
   Seamless list on tablet + desktop — all cards touch, dividers between them
   come from adjacent 1px borders (drop the top border on non-first cards so
   there's a single 1px line between neighbours instead of two stacked). Only
   the outermost cards keep rounded corners: top of :first-child, bottom of
   :last-child. Mobile keeps the mobile spec (each card its own rounded card
   with a gap) — that block above stays as the base.

   NB: selectors carry .pr-font-v2 so they out-specify `.b2b-results .pr-font-v2`
   (line 847), which sets border-radius:8px on every card and otherwise re-rounds
   the middle cards under equal-specificity later-wins.
   ----------------------------------------------------------------------------- */
@media (min-width: 670px) {
	.b2b-results__body > .product-row.pr-font-v2 + .product-row.pr-font-v2 {
		margin-top: 0;
	}
	.b2b-results__body > .product-row.pr-font-v2 {
		margin-bottom: 0;
		border-radius: 0;
		border-top-width: 0;
	}
	.b2b-results__body > .product-row.pr-font-v2:first-child {
		border-top-width: 1px;
		border-top-left-radius: var(--pr-radius-lg);
		border-top-right-radius: var(--pr-radius-lg);
	}
	.b2b-results__body > .product-row.pr-font-v2:last-child {
		border-bottom-left-radius: var(--pr-radius-lg);
		border-bottom-right-radius: var(--pr-radius-lg);
		margin-bottom: 12px;   /* gap before .b2b-pagination */
	}
	.b2b-results.is-guest .b2b-results__body > .product-row.pr-font-v2:last-child {
		margin-bottom: 24px;
	}
}


/* -----------------------------------------------------------------------------
   Search results loader — math-curve SVG animation shown while /b/ajax/search_result
   is in flight (see /s/new/js/search.js: showResultLoader / hideResultLoader).
   Source of animation: prototype /?v=44 #globalPreloader (60 particles on a
   Lissajous-like curve). Colour follows --accent-primary so INFR/OTM theming
   works via the tokens.css override.
   ----------------------------------------------------------------------------- */
.search-loader{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 280px;
	color: var(--accent-primary, #005F6E);
	animation: search-loader-fade-in 200ms ease-out;
}
.search-loader[hidden]{
	display: none;
}
.search-loader__frame{
	width: 96px;
	height: 96px;
}
.search-loader__frame svg{
	width: 100%;
	height: 100%;
	overflow: visible;
}
@keyframes search-loader-fade-in{
	from { opacity: 0; }
	to   { opacity: 1; }
}


/* =============================================================================
   MOBILE REDESIGN — .product-row.pr-redesign.pr-font-v2 (2026-07-29)
   Port of prototype's Nokian WetProof card
   (nokian-results-page.html:4228, CSS lines 749-858).

   Layout diffs vs base .product-row:
     - Brand moves to top (.pr-brand-top) above spec/model
     - EU labels join top row in .pr-eu-labels-redesign (pill format)
     - .pr-second becomes flat row: segment/year + icons + XL/FR chips
     - Buttons/steppers keep functional classes (JS relies on them);
       new visual classes (.cta.cta-sm.pr-add / .qty-stepper) are aliases.
   Base .product-row rules still apply — this block only overrides what changes.
   Tokens are our --pr-* set, mirroring prototype's neutral names.
   ============================================================================= */

.b2b-results .product-row.pr-redesign {
	gap: var(--pr-space-xl);
	padding: var(--pr-space-lg) var(--pr-space-md);
}

/* Мобайл: перебиваємо базовий .pr-top{display:grid} на flex, щоб .pr-price-col
   міг стрeтчитись до висоти .pr-info (120px по фото) через align-self:stretch,
   а justify-content:space-between всередині розкидував .pr-price догори і
   .pr-availability донизу — точно як у прототипі (base .pr-top{display:flex;
   justify-content:space-between}). Grid-area:price/stock на .pr-price-col/
   .pr-availability стають інертні у flex-контексті — це очікувано.
   На tablet/desktop цей display перебивається на display:contents в @media
   нижче, тож регресії нема. */
.b2b-results .pr-redesign .pr-top--flat {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	border: none;
	padding: 0;
	gap: var(--pr-space-sm);
}

.b2b-results .pr-redesign .pr-info--redesign {
	flex-direction: row;
	align-items: stretch;
	/* 2026-08-12: gap 4px (не 8px) — matches еталон `.pr-info { gap: --space-xs }`.
	   Раніше було --pr-space-sm — вдвічі більший проміжок від image до text-col. */
	gap: var(--pr-space-xs);
	flex: 1 1 auto;
	min-width: 0;
}

.b2b-results .pr-redesign .pr-info--redesign .pr-image {
	width: 88px;
	height: 120px;
	max-width: none;
	overflow: hidden;
}

/* Runtime signal from search.js#analyzeTireImage: image has >85% white edge
   frame → tire is drowning in whitespace inside .pr-image. Switch to cover
   so the tire actually fills the box. Default (contain) stays for tight
   crops so we don't cut the tread. */
.b2b-results .pr-redesign .pr-info--redesign .pr-image img.has-margins {
	object-fit: cover;
}

.b2b-results .pr-redesign .pr-text-col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0;
	align-self: stretch;
	flex: 1 1 auto;
	min-width: 0;
}

.b2b-results .pr-redesign .pr-specmodel-eu-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--pr-space-xs);
}

.b2b-results .pr-redesign .pr-brand-top {
	font-family: var(--pr-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	color: var(--pr-accent-primary);
}

/* 2026-09-11 (еталон "мобайл картки з ДОТ"): смуга несе на один елемент більше
   (DOT), тож nowrap знято — з ним DOT виходив за текстову колонку й накладався
   на блок доставки. Переноситись має САМЕ DOT, а не бейджі етикетки: бейджі
   згруповані в нерозривну .eu-items, а .pr-dot нижче займає власний рядок
   смуги (flex-basis:100%). Від таблету DOT стає окремим grid-рядком — див.
   @media-блоки внизу файлу. */
.b2b-results .pr-redesign .pr-eu-labels-redesign {
	display: flex;
	align-items: center;
	gap: var(--pr-space-xs);
	flex-wrap: wrap;
	row-gap: var(--pr-space-xs);
	max-width: 100%;
}

/* Група бейджів етикетки — завжди один рядок, на всіх ширинах. За потреби
   виходить за текстову колонку так само, як до появи DOT. */
.b2b-results .pr-redesign .eu-items {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--pr-space-xs);
	flex: 0 1 auto;
	min-width: 0;
}

/* DOT (рік виробництва) — Outfit, не моно: на картці моно живе лише всередині
   бейджів етикетки й у рядку EAN (значення, яке звіряють посимвольно). Рік
   читають, а не звіряють. Стилі — ті самі, що вже стоять на моделі (muted).
   «DOT» — суцільний капслок, тому при однаковому кеглі читається щільнішим за
   сусідній текст; компенсуємо розрядкою, не кеглем. */
.b2b-results .pr-redesign .pr-dot {
	display: inline-flex;
	align-items: baseline;
	gap: var(--pr-space-xs);
	flex-basis: 100%;
	font-family: var(--pr-font-body);
	font-size: 16px;
	line-height: 20px;
	color: var(--pr-text-meta);
	white-space: nowrap;
}
.b2b-results .pr-redesign .pr-dot .dot-k {
	letter-spacing: 0.04em;
}

/* EU labels redesign (2026-08-12): вся `.eu-item` — це один pill з фоном
   `--pr-bg-chip` (INFR beige / OTM dark). Icon + value живуть всередині pill.
   Розміри (gap 5, padding 4/9/4/7, icon 16×16) та INFR icon-color (--text-on-light,
   не muted) — з еталонного прототипу 2026-08-10. OTM override перекриває icon+pill
   на --text-inverted (white). */
.b2b-results .pr-redesign .eu-item {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px 4px 7px;
	background: var(--pr-bg-chip);
	border-radius: var(--pr-radius-md);
}

.b2b-results .pr-redesign .eu-icon {
	width: 16px;
	height: 16px;
	color: var(--pr-text-on-light);
	flex: none;
}

.b2b-results .pr-redesign .eu-pill {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	height: auto;
	padding: 0;
	background: transparent;
	color: var(--pr-text-on-light);
	font-family: var(--pr-font-mono);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	box-sizing: border-box;
	flex: none;
}

.b2b-results .pr-redesign .eu-pill-wide {
	padding: 0;
}

/* Мобайл-ущільнення під правило «смуга етикетки — завжди один рядок»
   (еталон 2026-09-11). На 360px три бейджі не вміщались у текстову колонку й
   доти рятувались виходом у порожнє місце біля доставки; з рядком DOT колонка
   піднялась на лінію вище, і той самий вихід почав накладатись на наявність.
   Бракувало ~35px — їх дають фото −16, падінги бейджів −15, гепи −4.
   Діє лише нижче порогу таблету: там колонка широка й ущільнення зайве. */
@media (max-width: 669px) {
	.b2b-results .product-row.pr-redesign .pr-info--redesign .pr-image {
		width: 72px;
	}
	.b2b-results .product-row.pr-redesign .eu-item {
		padding: 4px 5px 4px 4px;
		gap: 3px;
	}
	.b2b-results .product-row.pr-redesign .eu-icon {
		width: 14px;
		height: 14px;
	}
	.b2b-results .product-row.pr-redesign .eu-items {
		gap: 2px;
	}
}

.b2b-results .pr-redesign .pr-price-col {
	justify-content: space-between;
	flex: none;
	align-self: stretch;
	gap: var(--pr-space-xs); /* 4px між .pr-price та .pr-availability, всі брейкпоінти */
}

/* Всередині ціни (gross+netto) і всередині наявності (stock+delivery) —
   нульовий gap. Розділення в 4px йде тільки між двома блоками через
   .pr-price-col gap вище. Прибираємо базовий .pr-availability{gap:4px}
   і всі margin/transform на .pr-delivery/.pr-stock, які додавала
   попередня версія (.pr-font-v2 переносила delivery на +4px і stock на
   +2px — це створювало візуальний "ялинковий" зсув). */
.b2b-results .pr-redesign .pr-price {
	gap: 0;
}
.b2b-results .pr-redesign .pr-availability {
	gap: 0;
	margin-top: 0;
}
.b2b-results .pr-redesign .pr-delivery {
	margin-top: 0;
	transform: none;
}
.b2b-results .pr-redesign .pr-stock {
	transform: none;
}

.b2b-results .pr-redesign .pr-spec {
	color: var(--pr-text-on-light);
	font-weight: 400;
	/* 2026-08-12: дозволяємо перенос розмір+load на 2-й рядок замість ellipsis
	   (напр. "225/45 R17 94Y XL FR" не влазить у 1 лінію на мобайлі). Прототип
	   був `nowrap+ellipsis` (line 803), але в реальних даних load index +
	   suffix-и часто обрізались. */
	white-space: normal;
	overflow-wrap: anywhere;
	max-width: 100%;
}

/* Модель шини (наприклад "CrossClimate 2 SUV") може бути довшою за одну
   лінію — дозволяємо перенос на 2 рядки з обрізанням "…" за третім.
   Резервуємо простір під 1 рядок (min-height 1em), щоб порожня модель
   не колапсувала висоту .pr-text-col. Другий рядок дозволений, але не
   обов'язковий — рядок виростає лише коли є довгий текст. */
.b2b-results .pr-redesign .pr-model {
	font-weight: 400;
	max-width: 100%;
	min-width: 0;              /* у grid/flex дозволяє шринкати нижче min-content, щоб max-width працював */
	white-space: normal;       /* явно скидаємо будь-який успадкований nowrap (напр. з базового .product-row .pr-model) */
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: anywhere;   /* переносить всередині довгих непробільних послідовностей */
	word-break: break-word;    /* fallback для старіших браузерів */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	min-height: 1em;
}

/* ---- Резервуємо слоти під потенційно-порожні поля, щоб мобайл-стек не
        стрибав, коли в товару відсутні segment/dot/EU-етикетки/чипи.
        На tablet+desktop висоти вже задаються фіксованими grid-треками —
        цим правилам не буде куди застосуватися (min-height ігнорується
        коли grid-track диктує розмір). ---- */
.b2b-results .pr-redesign .pr-brand-top       { min-height: 24px; }
.b2b-results .pr-redesign .pr-eu-labels-redesign { min-height: 18px; }
.b2b-results .pr-redesign .pr-segment-row     { min-height: 22px; }
.b2b-results .pr-redesign .pr-attrs-row       { min-height: 28px; }

.b2b-results .pr-redesign .pr-second--redesign {
	gap: var(--pr-space-xs);
	padding: var(--pr-space-sm) var(--pr-space-md);
}

/* gap як НИЖНЯ МЕЖА між парою іконок і чипами XL/FR. На мобайлі рядок на всю
   ширину, тож space-between і так розводить їх по краях — геп не спрацьовує.
   А на таблеті/десктопі колонка 3 має ширину за вмістом, розводити нічого, і
   без гепа чип ставав впритул до іконки сезону.
   Чому не покладаємось на поля всередині іконок, як еталон: наші season-іконки
   обрізані під нуль (summer_color.svg viewBox 0 0 24 24, малюнок займає всі
   24 одиниці; winter — 22 з 22), тобто власного поля праворуч у них НЕМАЄ.
   В еталоні там inline-SVG у рамці 33×33 з малюнком 25×24 — звідси ~3.4px
   повітря, які в нас взятися нізвідки. Тож відступ задаємо явно.
   Значення — 4px, за рішенням користувачки 2026-09-11 «як в еталоні»: саме
   стільки повітря дають еталонні поля іконки, просто в нас воно приходить
   із CSS, а не з файлу. Раніше тут стояло 8px. */
.b2b-results .pr-redesign .pr-attrs-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pr-space-xs);
}

/* 2026-09-11: еталон прибрав цей геп у нуль, бо його іконки несуть власні
   поля. Наші — ні (див. коментар вище), тому лишаємо 4px: у type-іконок
   (pcr/suv/ltt) є ~3.5px власного поля праворуч, разом виходить ~7.5px між
   малюнками — рівно той проміжок, по якому еталон і вирівнювався, прибираючи
   свої 4px. Нуль тут склеїв би тип авто з сезоном. */
.b2b-results .pr-redesign .pr-attrs-left {
	display: flex;
	align-items: center;
	gap: var(--pr-space-xs);
}

.b2b-results .pr-redesign .pr-attrs-left img,
.b2b-results .pr-redesign .pr-attrs-left svg {
	width: 28px;
	height: 28px;
}

/* ---- .pr-font-v2 layer: token consolidation (font/colour/radius/spacing)
        per designer notes in prototype (lines 783-858). ---- */

.b2b-results .pr-font-v2 {
	background: var(--pr-bg-input);
	border-radius: var(--pr-radius-md);
}

.b2b-results .pr-font-v2 .pr-top {
	border-radius: var(--pr-radius-md);
}

.b2b-results .pr-font-v2 .pr-second {
	background: var(--pr-bg-input);
	border-radius: var(--pr-radius-md);
}

.b2b-results .pr-font-v2 .pr-gross {
	font-family: var(--pr-font-body);
	font-weight: 700;
	font-size: 20px;
	color: var(--pr-text-on-light);
}

.b2b-results .pr-font-v2 .pr-stock,
.b2b-results .pr-font-v2 .pr-stock-text {
	color: var(--pr-text-on-light);
}

/* eu-pill radius aligned to --pr-radius-sm (=4px, prototype's --radius-xs).
   2026-09-11: кегль значення повернуто на 16px (було 14). З рядком DOT на 16
   трійка бейджів важила менше за дату — ієрархія перевернулась: етикетка це
   три виміряні параметри, дата один. */
.b2b-results .pr-font-v2 .eu-pill {
	border-radius: var(--pr-radius-sm);
	font-size: 16px;
}

/* Quantity stepper: alias for .quantity-cell.pr-qty when .qty-stepper class
   is added to the same node — matches prototype selector.
   2026-08-11: radius --pr-radius-sm (4px, brand-agnostic) → --qty-stepper-radius
   (8 IF / 999 OP) — брендовий токен per design system §9.3. Попередній
   --pr-radius-sm мав вищу специфічність (0,4,0) за базовий .qty-stepper
   (0,1,0) і переб'ював 999-фікс від 10.08. */
.b2b-results .pr-font-v2 .quantity-cell.qty-stepper {
	border-radius: var(--qty-stepper-radius);
}

/* CTA (Dodaj): visual class added alongside .add-btn on same element.
   2026-08-11: radius --pr-radius-lg (12px, brand-agnostic) → --btn-md-radius
   (12 IF / 999 OP), щоб .add-btn на OP-картці синхронізувалась з qty-стеpером
   поруч (--qty-stepper-radius OP = 999). DS §9.3: «узгоджено з CTA-кнопкою
   поруч (теж 999px, --btn-md-radius OP)». На IF візуально без змін (обидва 12). */
.b2b-results .pr-font-v2 .cta,
.b2b-results .pr-font-v2 .add-btn.cta {
	font-weight: 700;
	border-radius: var(--btn-md-radius);
}

.b2b-results .pr-redesign .cta.cta-sm,
.b2b-results .pr-redesign .add-btn.cta.cta-sm {
	height: 40px;
	/* 2026-09-11: кегль CTA зведено до 18px на обох брендах (еталон: OTM 15 -> 18,
	   INFR 20 -> 18). До того тут стояло значення --btn-md-font-size INFR (20),
	   яке не є кеглем CTA. */
	font-size: 18px;
}

.b2b-results .pr-redesign .pr-add {
	flex: 1;
}

/* ---- Мобайл: степер + Dodaj під прототип (nokian-results-page.html:715-750).
   Тримаємо все під .pr-redesign, щоб стара картка (b2b_search.ftlh) не
   рухалась. На tablet/desktop @media нижче перевизначить .pr-purchase
   layout (стовпчик у колонці 9), тож ці правила там не заважають. ---- */

/* .pr-purchase: 16px між степером і кнопкою (базовий 12px замалий проти
   прототипу). 2026-08-05: align-items: center за рішенням дизайнерки
   (було flex-start; при однаковій висоті контролів різниця не візуальна,
   але center робить намір явним і толерантним до майбутнього неспівпадіння). */
.b2b-results .pr-redesign .pr-purchase {
	align-items: center;
	gap: var(--pr-space-lg);
}


/* =============================================================================
   MANAGER COLUMN — .pr-purchase--mgr (prototype "Менеджери. Картка товару",
   Wersja 2). Replaces the customer stepper + Dodaj with supplier / purchase
   price on top and weight at the bottom. Rendered only for ROLE_MANAGER
   (b2b_card_result.ftlh -> isManagerView); admins/main managers never reach
   this card — they stay on the legacy b2b_card_res_prev.ftlh columns.

   No new geometry: the top/bottom split is the container's own
   justify-content:space-between, and every type recipe below is an existing
   one from this file, re-pointed at a different token.
   ============================================================================= */

/* Selector deliberately carries .product-row.pr-redesign: the customer rule
   `.b2b-results .pr-redesign .pr-purchase` (align-items:center, gap:16px) also
   matches this element and is MORE specific than a bare `.pr-purchase--mgr`, so
   a two-class selector here would lose despite coming later in the file. */
.b2b-results .product-row.pr-redesign .pr-purchase--mgr {
	/* Overrides the customer row's align-items:center + gap:16px. The gap must
	   go: it would compete with space-between for the free height inside the
	   96px content box on tablet/desktop and push the weight past the bottom
	   edge. Edges are set by space-between alone. */
	align-items: flex-end;
	justify-content: space-between;
	gap: 0;
	/* MOBILE only: .pr-second--redesign above has padding 12px + a 1px border,
	   so its text ("Premium", "2024") starts 13px inside the card edge. This row
	   sits directly underneath and would otherwise start 13px further left. */
	padding-left: calc(var(--pr-space-md) + 1px);
	padding-right: calc(var(--pr-space-md) + 1px);
}

/* Supplier name + purchase price are ONE block under one heading — a tight
   stack. The gap that separates them from the weight (set by space-between) is
   what shows where the supplier group ends. */
.b2b-results .pr-mgr-supply {
	display: flex;
	flex-direction: column;
	gap: var(--pr-space-xs);
	min-width: 0;
}

/* Supplier name takes the mono/caps recipe already used by .ean-val (14px,
   .5px tracking) and changes only the colour: --pr-text-muted -> accent. The
   token is brand-dependent, so the supplier reads red on Oponytomy and teal on
   Inforeisen — the same colour as .pr-brand-top, which it cannot be confused
   with because the recipe differs (mono/caps/14 vs Outfit 700/20). */
.b2b-results .pr-mgr-supplier {
	font-family: var(--pr-font-mono);
	font-weight: 700;
	font-size: 14px;
	line-height: 15.8px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--pr-accent-primary);
	/* Fixed-width column + long supplier names: clip rather than break the grid.
	   The full name stays available through the title attribute. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* Purchase price = exactly the customer gross-price recipe (.pr-font-v2
   .pr-gross): body 700 / 20px / --pr-text-on-light. Both of the card's prices
   are therefore one token — what tells them apart is which side of the divider
   they sit on, not a separate style. */
.b2b-results .pr-mgr-cost {
	font-family: var(--pr-font-body);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	color: var(--pr-text-on-light);
	white-space: nowrap;
}

/* Weight took the .pr-segment-row recipe: 18px, family and weight inherited.
   A reference value of the same rank as segment and DOT — deliberately not
   bold, so it cannot outweigh the price. The unit "kg" labels it, so it needs
   no caption.
   2026-09-11: the colour is where the two now part. Segment and DOT moved to
   --pr-text-meta (the reference's lighter #8A8A8A); weight is a number the
   manager reads off the row, not a signpost, so it stays on --pr-text-muted
   and keeps AA contrast. */
.b2b-results .pr-mgr-weight {
	font-size: 18px;
	line-height: 24px;
	color: var(--pr-text-muted);
	white-space: nowrap;
}

/* .chip-tooltip-wrap is justify-content:flex-end by default (built for the
   right-aligned price column); in this left-aligned column it would detach the
   value from the column edge. */
.b2b-results .pr-purchase--mgr .chip-tooltip-wrap {
	justify-content: flex-start;
	min-width: 0;
}

/* .pr-redesign qty-stepper: візуальні overrides прибрано 2026-08-10 разом з
   pill-outline редизайном (design system §9.3). Все успадковано з базового
   .qty-stepper в main.css через токени (--qty-stepper-*, --border-subtle,
   --qty-btn-*, --qty-value-*). */

/* .pr-font-v2 vertical alignment tweaks (translateY(4px) на delivery,
   translateY(2px) на stock) видалено 2026-07-30: користувачка попросила
   рівний layout без "ялинкового" зсуву. Тепер gap між stock і delivery
   = 0 (задано вище через .pr-redesign .pr-availability{gap:0}). */


/* =============================================================================
   TABLET REDESIGN — .product-row.pr-redesign horizontal grid (2026-07-30)
   Port of prototype's tablet section (product card 3 breakpoints (1).html
   lines 2961-3147). Single-DOM approach: mobile-first .pr-redesign markup
   stays, dissolve wrapper containers with display:contents so their children
   become direct grid items of the card.

   Columns (horizontal): картка 16/8 (--pr-space-lg/--pr-space-sm) padding;
   9 tracks — фото / gap4 / інфо1 / gap≥12(4fr) / інфо2 / gap≥12(1fr) /
   ціна / gap≥24(1fr) / [степер+кнопка стовпчиком].

   Rows (vertical): 3 фіксовані по висоті лінії (24 / 20 / 28px) з
   проміжком 4px між 1-2 та 20px між 2-3 (сума 96px). Фото 120px (12+96+12).
   Ціна/степер/кнопка мають +14px зверху і +14px знизу через явні
   "інсет"-треки — не padding, бо вони не одна група, а розкладені по
   різних grid-рядках.
   ============================================================================= */

@media (min-width: 670px) and (max-width: 1039px) {

	/* Службові обгортки, які на мобайлі лише групують — "розчиняємо" їх, щоб
	   їхні діти стали прямими grid-елементами картки. Жодна з них не має
	   інлайн style="display:...", тож !important не потрібен. */
	.b2b-results .product-row.pr-redesign .pr-top,
	.b2b-results .product-row.pr-redesign .pr-info,
	.b2b-results .product-row.pr-redesign .pr-text-col,
	.b2b-results .product-row.pr-redesign .pr-specmodel-eu-wrap,
	.b2b-results .product-row.pr-redesign .pr-info-text,
	.b2b-results .product-row.pr-redesign .pr-second {
		display: contents;
	}
	/* .pr-purchase НЕ розчиняємо: степер і кнопка йдуть одне під одним
	   (стовпчиком), тому сам .pr-purchase лишається звичайним flex-контейнером
	   і стає ОДНИМ grid-елементом колонки 9 (замість двох окремих колонок). */

	.b2b-results .product-row.pr-redesign {
		display: grid;
		grid-template-columns:
			auto                                       /* 1: фото */
			var(--pr-space-xs)                          /* 2: gap 4 (фото → інфо-блок) */
			auto                                        /* 3: бренд/розмір/іконки+чипи (інфо 1) */
			minmax(var(--pr-space-md), 4fr)             /* 4: gap мін. 12, росте НАЙШВИДШЕ (4fr) — головний "гумовий" геп між інфо1/інфо2 */
			minmax(auto, 200px)                         /* 5: модель/EU-лейбли/сегмент+рік — cap 200px; довша модель обрізається/переноситься в 2 рядки (line-clamp) */
			minmax(var(--pr-space-md), 3fr)             /* 6: gap мін. 12, теж росте, але вчетверо повільніше (1fr проти 4fr вище) */
			auto                                        /* 7: ціна */
			minmax(var(--pr-space-xl), 1fr)             /* 8: gap мін. 24, так само повільно росте (1fr) */
			auto;                                       /* 9: степер + кнопка Dodaj, одне під одним */
		grid-template-rows:
			var(--pr-space-md-plus)                     /* line1-2: верхній інсет 14px (вища "не-фото" зона, злиття pr-price/pr-availability в один контейнер потребує трохи більше повітря) */
			minmax(var(--pr-space-xl), auto)            /* line2-3: бренд / модель — базово 24px, росте до 2 рядків якщо модель довга */
			var(--pr-space-xs)                          /* line3-4: gap 4px */
			var(--pr-space-28)                          /* line4-5: розмір / етикетка (EU). 28, а не 20: бейдж має власну висоту 24px і з 20px вилазив із треку, через що проміжки навколо рядка DOT виходили нерівні */
			var(--pr-space-28)                          /* line5-6: колишній gap 20px; від 2026-09-11 тут лежить рядок DOT, і 20px на нього замало — рядок притискався до бейджів етикетки впритул */
			var(--pr-space-28)                          /* line6-7: чипи+іконки / сегмент */
			var(--pr-space-md-plus);                    /* line7-8: нижній інсет 14px */
		row-gap: 0;    /* рядки рознесені явними треками вище, а не gap-ом */
		column-gap: 0; /* так само колонки — явними "розпірковими" треками */
		/* 2026-09-11: start -> center, як в еталоні. Рядки 4-6 (етикетка / DOT /
		   сегмент) нижчі за свої 28px-треки, і при start кожен притискався до
		   верху свого треку — уся слабина збиралась ПІД елементом. Через це
		   проміжки навколо DOT виходили нерівні: 8px зверху, 4px знизу. При
		   center слабина ділиться навпіл і проміжки стають 6/7px. Заразом
		   сегмент вирівнюється по центру з 28px-іконками в колонці 3.
		   Фото, ціна й степер мають власні align-self і не зачеплені. */
		align-items: center;
		justify-items: start;
		padding: var(--pr-space-sm-plus) var(--pr-space-lg); /* верх/низ +2 (8→10) */
		gap: 0; /* перебиваємо базовий .pr-redesign gap:xl — рядки/колонки задані треками */
	}

	/* Колонка 1 — фото: впритул до падінгів картки, на всю висоту (120px) */
	.b2b-results .product-row.pr-redesign .pr-image {
		grid-column: 1;
		grid-row: 1 / 8;
		align-self: center;
	}

	/* Колонка 3 — бренд / розмір / чипи+іконки, зверху вниз */
	/* Рядок 2 — єдиний виняток з align-items:center вище. Наш трек тут
	   minmax(24, auto), а не фіксовані 24px еталону: довга модель переноситься
	   на 2 рядки й розтягує трек. При center бренд (24px) поїхав би вниз від
	   першого рядка моделі — верх картки перестав би бути рівним. */
	.b2b-results .product-row.pr-redesign .pr-brand-top { grid-column: 3; grid-row: 2; align-self: start; }
	.b2b-results .product-row.pr-redesign .pr-spec       { grid-column: 3; grid-row: 4; }
	.b2b-results .product-row.pr-redesign .pr-attrs-row  { grid-column: 3; grid-row: 6; }

	/* Колонка 5 — модель / EU-лейбли / сегмент+рік, зверху вниз.
	   Усе пакується ліворуч (natural width): для сегмент-рядка перебиваємо
	   базовий justify-content:space-between на flex-start, щоб уся колонка
	   виглядала лівовирівняною. */
	.b2b-results .product-row.pr-redesign .pr-model                { grid-column: 5; grid-row: 2; align-self: start; }
	/* 2026-09-11: DOT закріплено ОКРЕМИМ рядком під бейджами на всіх ширинах.
	   Тут смугу "розчиняємо" (display:contents), щоб її діти стали прямими
	   grid-елементами: бейджі лишаються в рядку 4 (лінія етикетки), DOT стає
	   в рядок 5. Інакше двохрядкова смуга розпирала 28px-трек і наїжджала на
	   модель зверху, а її ширина (бейджі + DOT в один рядок) розсувала
	   колонку 5 і збивала ціну зі степером на 670-760px. */
	.b2b-results .product-row.pr-redesign .pr-eu-labels-redesign   { display: contents; }
	.b2b-results .product-row.pr-redesign .eu-items                { grid-column: 5; grid-row: 4; }
	.b2b-results .product-row.pr-redesign .pr-dot {
		grid-column: 5; grid-row: 5;
		flex-basis: auto;
		align-self: center;
	}
	/* Рядок сегмента: від 2026-09-11 несе лише клас опони — рік переїхав у
	   смугу етикетки як DOT. */
	.b2b-results .product-row.pr-redesign .pr-segment-row {
		grid-column: 5; grid-row: 6;
		justify-content: flex-start;
		gap: var(--pr-space-md);
	}

	/* Колонка 7 — ціна (і lock-варіант для guest-mode на тому ж місці).
	   Базовий .pr-redesign вже проектує price-col як align-self:stretch +
	   justify-content:space-between (щоб ціна лежала впритул до верху, а
	   наявність — впритул до низу 120px-блоку, як фото). Лишаємо full span
	   (як фото) + stretch (не чіпаємо), а інсет 14/14 даємо через справжній
	   padding (price-col — це не "розчинений" елемент, а звичайний блок). */
	.b2b-results .product-row.pr-redesign .pr-price-col,
	.b2b-results .product-row.pr-redesign .pr-price-lock {
		grid-column: 7; grid-row: 1 / 8;
		align-self: stretch;
		padding: var(--pr-space-md-plus) 0;
		box-sizing: border-box;
	}
	/* .pr-price-col{gap:4px} + .pr-price{gap:0} + .pr-availability{gap:0} +
	   pr-delivery/pr-stock без margin/transform — усе визначено в базовому
	   .pr-redesign, тут не дублюємо. */

	/* Колонка 9 — степер + кнопка "Dodaj", одне під одним (вертикально).
	   .pr-purchase лишається звичайним flex-контейнером — full-height span
	   як фото/ціна (grid-row:1/8) + інсет 14/14 через padding + justify-
	   content:center (2026-08-05: степер+кнопка центровані як пара; було
	   space-between з розтяжкою по краях). Стовпчиком, а не двома сусідніми
	   колонками: економить ~89px по ширині. */
	.b2b-results .product-row.pr-redesign .pr-purchase {
		grid-column: 9; grid-row: 1 / 8;
		align-self: stretch;
		padding: var(--pr-space-md-plus) 0;
		box-sizing: border-box;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
	}
	/* align-items:stretch на .pr-purchase: ширину стовпчика задає фіксований
	   .qty-stepper (120px), а кнопка з width:auto під stretch природно
	   розтягується до ТІЄЇ Ж ширини — тому степер і кнопка тепер однакової
	   ширини, без вигаданих чисел. Базові .cta{width:100%} і .pr-add{flex:1}
	   розраховані на мобільний flex-рядок — у стовпчику вимикаємо. */
	.b2b-results .product-row.pr-redesign .pr-add {
		flex: none;
		width: auto;
	}

	/* .qty-stepper tablet width — design system §7 token per site (IF 108 / OP 120).
	   align-items:stretch на .pr-purchase підтягує "Dodaj" до тієї ж ширини. */
	.b2b-results .product-row.pr-redesign .qty-stepper {
		width: var(--qty-stepper-width-tablet);
	}

	/* Розмежування між картками — через margin-bottom як на мобайлі (не
	   seamless-list з дівайдерами як у прототипі). Кожна картка тримає
	   свій повний бордер + border-radius з базового .product-row. */

	/* ---- Manager column ---- */
	/* Aligned to the card's CONTENT, not to its full height: grid-row 2/7 spans
	   exactly the content tracks (24+4+20+20+28 = 96px) WITHOUT the 14px insets,
	   so the block's top edge lines up with brand/model/price and its bottom
	   with chips/segment. The photo is deliberately not the reference — it is
	   120px tall, centred separately, and overhangs the content both ways.
	   Inherited padding is zeroed: the customer column's 14px insets would shift
	   the block inside those 96px and break the alignment. */
	.b2b-results .product-row.pr-redesign .pr-purchase--mgr {
		grid-column: 9;
		grid-row: 2 / 7;
		/* stretch, NOT the grid's align-items:start default: space-between can
		   only push the weight to the bottom if the container actually fills all
		   five content tracks (96px). With `start` the box would shrink to its
		   own content and the two groups would sit glued together at the top. */
		align-self: stretch;
		padding: 0;
		flex-direction: column;
		align-items: flex-start;   /* overrides the mobile row's flex-end */
		justify-content: space-between;
		/* Divider: the same 1px --border-default that draws the card frame and
		   the stepper outline. --border-subtle would be too weak here — it is a
		   half-opacity variant meant to sit on the .pr-second fill, while this
		   line stands on the bare card background. */
		border-left: 1px solid var(--pr-border-default);
		/* WIDTH = exactly the customer column's footprint, with the padding and
		   the border INSIDE it (box-sizing:border-box is inherited). The token
		   is per-site (IF 108 / OP 120), so hardcoding the prototype's 120 would
		   push the manager column 12px wider than the customer one on Inforeisen
		   and the two roles' cards would stop lining up.
		   width, not min-width: the grid track is `auto`, so min-width would only
		   set a floor and a long supplier name would still widen the column from
		   row to row. Fixed width + ellipsis clips instead. */
		width: var(--qty-stepper-width-tablet);
		padding-left: var(--pr-space-md);
	}
}


/* =============================================================================
   DESKTOP REDESIGN — .product-row.pr-redesign horizontal grid (2026-07-30)
   Port of prototype's desktop section (product card 3 breakpoints (1).html
   lines 3149-3196). Tablet block above вже tру дає всю базову структуру —
   тут перевизначаємо тільки те, що пропорційно збільшується для 1040+:
   - геп між "інфо1" і "інфо2" (гумовий мінімум)
   - геп між "інфо2" і ціною
   - геп між ціною і степер/кнопкою
   - бокові падінги картки (28→40)
   - ширину степера (тягне за собою ширину кнопки через align-items:stretch)
   - фото (88×120 → 97×132, те саме співвідношення сторін ×1.1)
   Коефіцієнт масштабування — 1280/780 ≈ 1.64, застосований до ОРИГІНАЛЬНИХ
   figma-гепів (40/40/24), не до звужених-заради-tablet 12px значень, і
   округлений до чистих чисел.
   ============================================================================= */

@media (min-width: 1040px) {
	/* NB: правила з tablet-@media вище НЕ спрацьовують тут (min:670-max:1039),
	   тому треба продублювати dissolve-список і базову grid-структуру, а
	   потім перевизначити тільки те, що змінюється на десктопі. */

	.b2b-results .product-row.pr-redesign .pr-top,
	.b2b-results .product-row.pr-redesign .pr-info,
	.b2b-results .product-row.pr-redesign .pr-text-col,
	.b2b-results .product-row.pr-redesign .pr-specmodel-eu-wrap,
	.b2b-results .product-row.pr-redesign .pr-info-text,
	.b2b-results .product-row.pr-redesign .pr-second {
		display: contents;
	}

	.b2b-results .product-row.pr-redesign {
		display: grid;
		grid-template-columns:
			auto                                        /* 1: фото */
			var(--pr-space-28)                          /* 2: gap 28 (той самий токен, що й у tablet grid-rows) */
			auto                                        /* 3: інфо 1 */
			minmax(var(--pr-space-64), 4fr)             /* 4: gap мін. 64, росте НАЙШВИДШЕ (4fr) — головний гумовий геп інфо1/інфо2 */
			minmax(auto, 260px)                         /* 5: інфо 2 — cap 260px (десктоп); довша модель переноситься в 2 рядки */
			minmax(var(--pr-space-104), 1fr)            /* 6: gap мін. 104, росте вчетверо повільніше */
			auto                                        /* 7: ціна (інфо 3) */
			minmax(var(--pr-space-3xl), 1fr)            /* 8: gap мін. 40 */
			auto;                                       /* 9: степер + кнопка, стеком (як на tablet) */
		grid-template-rows:
			var(--pr-space-md-plus)
			minmax(var(--pr-space-xl), auto) /* бренд/модель — 2 рядки якщо треба */
			var(--pr-space-xs)
			var(--pr-space-28) /* розмір / етикетка (EU) — 28, як на tablet */
			var(--pr-space-28) /* рядок DOT (2026-09-11) */
			var(--pr-space-28)
			var(--pr-space-md-plus);
		row-gap: 0;
		column-gap: 0;
		align-items: center; /* див. коментар у tablet-блоці */
		justify-items: start;
		padding: var(--pr-space-sm-plus) var(--pr-space-3xl); /* бокові 40 (з 28), верх/низ +2 (8→10) */
		gap: 0;
	}

	/* Фото на десктопі — вища (132 замість 120), співвідношення сторін ×1.1
	   (88:120 → 97:132), інакше ширина 88 лишається "вузьким місцем" для
	   object-fit:contain і сама шина візуально не росте. */
	.b2b-results .product-row.pr-redesign .pr-image {
		grid-column: 1;
		grid-row: 1 / 8;
		align-self: center;
		width: 97px;
		height: 132px;
	}

	/* Рядок 2 лишається топ-вирівняним — див. коментар у tablet-блоці. */
	.b2b-results .product-row.pr-redesign .pr-brand-top { grid-column: 3; grid-row: 2; align-self: start; }
	.b2b-results .product-row.pr-redesign .pr-spec       { grid-column: 3; grid-row: 4; }
	.b2b-results .product-row.pr-redesign .pr-attrs-row  { grid-column: 3; grid-row: 6; }

	.b2b-results .product-row.pr-redesign .pr-model                { grid-column: 5; grid-row: 2; align-self: start; }
	/* DOT окремим рядком — та сама конструкція, що й на tablet (див. коментар там). */
	.b2b-results .product-row.pr-redesign .pr-eu-labels-redesign   { display: contents; }
	.b2b-results .product-row.pr-redesign .eu-items                { grid-column: 5; grid-row: 4; }
	.b2b-results .product-row.pr-redesign .pr-dot {
		grid-column: 5; grid-row: 5;
		flex-basis: auto;
		align-self: center;
	}
	.b2b-results .product-row.pr-redesign .pr-segment-row {
		grid-column: 5; grid-row: 6;
		justify-content: flex-start;
		gap: var(--pr-space-md);
	}

	.b2b-results .product-row.pr-redesign .pr-price-col,
	.b2b-results .product-row.pr-redesign .pr-price-lock {
		grid-column: 7; grid-row: 1 / 8;
		align-self: stretch;
		padding: var(--pr-space-md-plus) 0;
		box-sizing: border-box;
	}
	/* .pr-price-col{gap:4px} + внутрішні gap:0 — усе в базовому .pr-redesign */

	.b2b-results .product-row.pr-redesign .pr-purchase {
		grid-column: 9; grid-row: 1 / 8;
		align-self: stretch;
		padding: var(--pr-space-md-plus) 0;
		box-sizing: border-box;
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
	}
	.b2b-results .product-row.pr-redesign .pr-add {
		flex: none;
		width: auto;
	}

	/* .qty-stepper desktop width — design system §7 token per site (IF 120 / OP 132).
	   align-items:stretch на .pr-purchase підтягує "Dodaj" до тієї ж ширини. */
	.b2b-results .product-row.pr-redesign .qty-stepper {
		width: var(--qty-stepper-width-desktop);
	}

	/* Розмежування між картками — margin-bottom (те саме, що tablet). */

	/* ---- Manager column ---- */
	/* Same construction as tablet; only the two values that scale with the
	   breakpoint are restated — the column width follows the desktop stepper
	   token (IF 120 / OP 132) and the gap from the divider to the text grows
	   16 -> 24, in proportion with the card's other desktop gaps. */
	.b2b-results .product-row.pr-redesign .pr-purchase--mgr {
		grid-column: 9;
		grid-row: 2 / 7;
		/* stretch, NOT the grid's align-items:start default: space-between can
		   only push the weight to the bottom if the container actually fills all
		   five content tracks (96px). With `start` the box would shrink to its
		   own content and the two groups would sit glued together at the top. */
		align-self: stretch;
		padding: 0;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
		border-left: 1px solid var(--pr-border-default);
		width: var(--qty-stepper-width-desktop);
		padding-left: var(--pr-space-lg);
	}
}