/* =============================================================================
   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 {
	--pr-text-default: #0d0e13;
	--pr-text-on-light: #323744;
	--pr-text-muted: #6b7280;
	--pr-text-subtle: #9ba3af;
	--pr-text-inverted: #fffaf2;

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

	--pr-border-default: #eaeaea;
	--pr-border-surface: #e5e7eb;
	--pr-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;

	--pr-stock-green: #16a34a;
}


/* 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;
	background: #323744;
	color: #ffffff;
	font-family: var(--pr-font-body);
	font-size: 14px;
	line-height: 18px;
	padding: 5px 10px;
	border-radius: 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 {
	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-muted);
	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-muted);
}
.b2b-results .pr-segment-row .segment-label,
.b2b-results .pr-segment-row .dot-year {
	font-family: var(--pr-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 22px;
	color: var(--pr-text-muted);
}

/* --- 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);
}

.b2b-results .pr-redesign .pr-eu-labels-redesign {
	display: flex;
	align-items: center;
	gap: var(--pr-space-xs);
	flex-wrap: nowrap;
}

/* 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;
}

.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);
}

.b2b-results .pr-redesign .pr-attrs-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.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) */
.b2b-results .pr-font-v2 .eu-pill {
	border-radius: var(--pr-radius-sm);
	font-size: 14px;
}

/* 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;
	font-size: 20px;
}

.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);
}

/* .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-20)                          /* line4-5: розмір / етикетка (EU) */
			var(--pr-space-20)                          /* line5-6: gap 20px */
			var(--pr-space-28)                          /* line6-7: чипи+іконки / сегмент+рік */
			var(--pr-space-md-plus);                    /* line7-8: нижній інсет 14px */
		row-gap: 0;    /* рядки рознесені явними треками вище, а не gap-ом */
		column-gap: 0; /* так само колонки — явними "розпірковими" треками */
		align-items: start; /* при 2-рядковій моделі бренд/модель топ-алайняться — верх картки лишається рівний; фото і price-col/purchase мають власні align-self */
		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 — бренд / розмір / чипи+іконки, зверху вниз */
	.b2b-results .product-row.pr-redesign .pr-brand-top { grid-column: 3; grid-row: 2; }
	.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 з малим gap між
	   "Premium" і роком, щоб уся колонка виглядала лівовирівняною. */
	.b2b-results .product-row.pr-redesign .pr-model                { grid-column: 5; grid-row: 2; }
	.b2b-results .product-row.pr-redesign .pr-eu-labels-redesign   { grid-column: 5; grid-row: 4; }
	.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. */
}


/* =============================================================================
   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-20)
			var(--pr-space-20)
			var(--pr-space-28)
			var(--pr-space-md-plus);
		row-gap: 0;
		column-gap: 0;
		align-items: start;
		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;
	}

	.b2b-results .product-row.pr-redesign .pr-brand-top { grid-column: 3; grid-row: 2; }
	.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; }
	.b2b-results .product-row.pr-redesign .pr-eu-labels-redesign   { grid-column: 5; grid-row: 4; }
	.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). */
}