/*
 * XTRONIC — katalog pojazdów i części.
 *
 * Paleta i typografia jak w motywie (Poppins, tło #0B0C0F, akcent --accent).
 * Reguły dotykające kolorów odnośników mają wariant z prefiksem #xt, bo motyw
 * ustawia `#xt a{color:var(--accent)}` z wyższą specyficznością.
 */

.xtc {
	--xtc-card: #14171D;
	--xtc-line: rgba(255, 255, 255, .08);
	--xtc-dim: #9AA1AC;
	--xtc-soft: #6C727C;
	font-family: 'Poppins', system-ui, sans-serif;
}

/* ---------- okruszki ---------- */
.xtc-crumbs {
	margin: 0 0 clamp(26px, 4vw, 40px);
	font-size: 13px;
}

.xtc-crumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
}

.xtc-crumbs li {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--xtc-soft);
}

.xtc-crumbs li + li::before {
	content: "›";
	color: #3A3F49;
}

#xt .xtc-crumbs a,
.xtc-crumbs a {
	color: var(--xtc-dim);
	transition: color .2s;
}

#xt .xtc-crumbs a:hover,
.xtc-crumbs a:hover {
	color: #fff;
}

/* ---------- nagłówki sekcji ---------- */
.xtc-h2,
.xtc-block > h2 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: clamp(21px, 2.4vw, 29px);
	letter-spacing: -.02em;
	color: #F2F3F5;
	margin: clamp(38px, 5vw, 62px) 0 22px;
}

.xtc-block:first-child > h2,
.xtc > .xt-wrap > .xtc-h2:first-of-type {
	margin-top: 0;
}

.xtc-years {
	display: inline-block;
	margin-left: 12px;
	font-size: .5em;
	font-weight: 500;
	letter-spacing: .1em;
	color: var(--xtc-dim);
	vertical-align: middle;
}

.xtc-empty {
	color: var(--xtc-dim);
	font-size: 15px;
	background: var(--xtc-card);
	border: 1px solid var(--xtc-line);
	border-radius: 14px;
	padding: 26px 24px;
	margin: 0;
}

/* ==========================================================================
   Strona /katalog/ — jasny pas w układzie sekcji „Wyszukiwarka” z landingu
   ========================================================================== */
.xtc-root {
	padding: 0;
}

.xtc-root-prose {
	padding: clamp(48px, 7vw, 90px) clamp(20px, 4vw, 56px) 0;
}

.xtc-section {
	background-color: #F4F5F7;
	background-image: radial-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px);
	background-size: 22px 22px;
	color: #12141A;
	padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 56px);
	scroll-margin-top: 88px;
}

.xtc-section-inner {
	max-width: 1280px;
	margin: 0 auto;
}

.xtc-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 48px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 44px;
}

.xtc-section-intro {
	flex: 1 1 380px;
}

.xtc-section-tools {
	flex: 1 1 360px;
	max-width: 460px;
	width: 100%;
}

.xtc-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 18px;
}

.xtc-eyebrow-line {
	width: 34px;
	height: 1px;
	background: var(--accent, #FF2E2E);
	flex: 0 0 auto;
}

.xtc-eyebrow-text {
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent, #FF2E2E);
}

.xtc-eyebrow-num {
	font-size: 12px;
	letter-spacing: .14em;
	color: #A6ADB8;
}

.xtc-section-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 3.7vw, 48px);
	line-height: 1.06;
	letter-spacing: -.025em;
	color: #12141A;
	margin: 0 0 14px;
}

.xtc-section-title .xtc-accent {
	color: var(--accent, #FF2E2E);
}

.xtc-section-lead {
	font-size: 15.5px;
	line-height: 1.6;
	color: #565C67;
	margin: 0;
	max-width: 440px;
}

.xtc-section-note {
	text-align: center;
	font-size: 13.5px;
	color: #7A828E;
	margin: 28px 0 0;
}

.xtc-section-empty {
	font-size: 15px;
	line-height: 1.6;
	color: #565C67;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 12px;
	padding: 26px 24px;
	margin: 0;
}

/* ---------- pole wyszukiwania ---------- */
.xtc-searchbox {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 12px;
	padding: 6px 6px 6px 16px;
	box-shadow: 0 8px 24px rgba(15, 17, 22, .06);
	transition: border-color .2s, box-shadow .2s;
}

.xtc-searchbox:focus-within {
	border-color: var(--accent, #FF2E2E);
	box-shadow: 0 8px 28px var(--glow-soft, rgba(255, 46, 46, .14));
}

.xtc-searchbox svg {
	flex: 0 0 auto;
}

#xt .xtc-searchbox input[type="search"],
.xtc-searchbox input[type="search"] {
	flex: 1;
	min-width: 0;
	width: auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 13px 0;
	color: #12141A;
	font-family: 'Poppins', sans-serif;
	font-size: 15px;
	outline: none;
	box-shadow: none;
}

#xt .xtc-searchbox input[type="search"]:focus,
.xtc-searchbox input[type="search"]:focus {
	border: 0;
	box-shadow: none;
}

.xtc-searchbox-count {
	font-size: 12px;
	font-weight: 600;
	color: #8A909B;
	white-space: nowrap;
	cursor: default;
}

#xt .xtc-searchbox-go,
.xtc-searchbox-go {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 9px;
	background: var(--accent, #FF2E2E);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 17px;
	box-shadow: 0 6px 18px var(--glow-soft, rgba(255, 46, 46, .14));
	transition: filter .2s;
}

#xt .xtc-searchbox-go:hover,
.xtc-searchbox-go:hover {
	color: #fff;
}

/* ---------- skróty do popularnych marek ---------- */
.xtc-popular {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	align-items: center;
}

.xtc-popular-label {
	font-size: 12px;
	letter-spacing: .06em;
	color: #8A909B;
	margin-right: 2px;
}

#xt .xtc-popular-chip,
.xtc-popular-chip {
	font-family: 'Poppins', sans-serif;
	font-size: 12.5px;
	font-weight: 600;
	color: #3A3F49;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 99px;
	padding: 6px 13px;
}

/* ---------- siatka marek ---------- */
.xtc-brands {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: 1px;
	/* Kreski między kafelkami rysują cienie samych kafelków, a nie tło siatki —
	   dzięki temu niedokończony ostatni rząd zostaje biały zamiast szarego pola.
	   Bez overflow:hidden, żeby kafelek mógł się unieść na :hover jak na landingu. */
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .09);
	border-radius: 12px;
}

#xt .xtc-brand,
.xtc-brand {
	position: relative;
	background: #fff;
	padding: 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: #20242B;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .09);
	transition: background .25s, transform .25s, box-shadow .25s;
}

.xtc-brand-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.xtc-brand .xt-brand-idx {
	font-size: 11px;
	letter-spacing: .14em;
	color: #A6ADB8;
}

.xtc-brand-count {
	font-size: 11px;
	color: #A6ADB8;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.xtc-brand:hover .xtc-brand-count {
	color: rgba(255, 255, 255, .72);
}

.xtc-brand-logo {
	width: auto;
	max-height: 30px;
	object-fit: contain;
	object-position: left center;
	margin-top: -4px;
}

/* Znak marki z zestawu wtyczki wchodzi maską, a nie obrazkiem — dzięki temu bierze
   kolor kafelka i bieli się razem z nazwą po najechaniu. Bez obsługi maski zostaje
   sam odstęp, nigdy kolorowy prostokąt. */
.xtc-brand-mark {
	display: block;
	height: 30px;
	margin-top: -2px;
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
	.xtc-brand-mark {
		background-color: currentColor;
		-webkit-mask-image: var(--xtc-mark);
		mask-image: var(--xtc-mark);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: left center;
		mask-position: left center;
		-webkit-mask-size: auto 30px;
		mask-size: auto 30px;
	}
}

/* marki spoza zestawu — monogram trzyma wysokość kafelka, żeby siatka nie falowała */
.xtc-brand-mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	height: 30px;
	margin-top: -2px;
	min-width: 30px;
	padding: 0 7px;
	border-radius: 8px;
	background: rgba(0, 0, 0, .05);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #6B7280;
	transition: background .25s, color .25s;
}

#xt .xtc-brand:hover .xtc-brand-mark,
.xtc-brand:hover .xtc-brand-mark {
	background-color: #fff;
}

#xt .xtc-brand:hover .xtc-brand-mono,
.xtc-brand:hover .xtc-brand-mono {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

.xtc-brand-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

.xtc-brand .xt-brand-name {
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -.01em;
	color: #20242B;
}

.xtc-brand .xt-brand-arrow {
	color: #fff;
	font-size: 15px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity .25s, transform .25s;
}

/* ---------- znak marki w nagłówku podstrony ---------- */
/* Nagłówek jest ciemny, więc znak jedzie w kolorze tytułu — maska bierze go
   z `background-color`, a wgrana grafika zostaje taka, jaka jest. */
.xt-page-media {
	margin: 0 0 18px;
}

.xtc-page-mark {
	display: block;
	height: 44px;
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
	.xtc-page-mark {
		background-color: #F2F3F5;
		-webkit-mask-image: var(--xtc-mark);
		mask-image: var(--xtc-mark);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: left center;
		mask-position: left center;
		-webkit-mask-size: auto 44px;
		mask-size: auto 44px;
	}
}

.xtc-page-logo {
	display: block;
	width: auto;
	max-height: 44px;
	object-fit: contain;
	object-position: left center;
}

.xtc-page-mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	min-width: 44px;
	padding: 0 12px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .12);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #F2F3F5;
}

/* ---------- siatka modeli ---------- */
.xtc-models {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

#xt .xtc-model,
.xtc-model {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: var(--xtc-card);
	border: 1px solid var(--xtc-line);
	border-radius: 12px;
	padding: 18px 20px;
	color: #F2F3F5;
	transition: border-color .25s, transform .25s, box-shadow .25s;
}

#xt .xtc-model:hover,
.xtc-model:hover {
	border-color: var(--accent, #FF2E2E);
	transform: translateY(-4px);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
	color: #fff;
}

.xtc-model-name {
	font-weight: 600;
	font-size: 16px;
}

.xtc-model-years {
	font-size: 12.5px;
	color: var(--xtc-dim);
}

.xtc-model-count {
	font-size: 12px;
	color: var(--xtc-soft);
}

/* ---------- filtry kategorii ---------- */
.xtc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

#xt .xtc-filter,
.xtc-filter {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #C7CBD1;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--xtc-line);
	border-radius: 99px;
	padding: 8px 15px;
	transition: background .2s, color .2s, border-color .2s;
}

#xt .xtc-filter:hover,
.xtc-filter:hover,
#xt .xtc-filter.is-on,
.xtc-filter.is-on {
	background: var(--accent, #FF2E2E);
	border-color: var(--accent, #FF2E2E);
	color: #fff;
}

.xtc-filter span {
	font-size: 11px;
	opacity: .7;
	font-variant-numeric: tabular-nums;
}

/* ---------- kafelki części ---------- */
.xtc-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 18px;
}

.xtc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--xtc-card);
	border: 1px solid var(--xtc-line);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s;
}

.xtc-card:hover {
	transform: translateY(-6px);
	border-color: rgba(255, 46, 46, .45);
	box-shadow: 0 26px 54px rgba(0, 0, 0, .5);
}

.xtc-card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow: hidden;
	background: #08090B;
}

.xtc-card-media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
}

.xtc-card:hover .xtc-card-media img {
	transform: none;
}

.xtc-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 20px 22px;
}

.xtc-card-cat {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent, #FF2E2E);
	margin-bottom: 10px;
}

.xtc-card-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.32;
	margin: 0 0 8px;
}

#xt .xtc-card-title a,
.xtc-card-title a {
	color: #fff;
}

#xt .xtc-card-title a:hover,
.xtc-card-title a:hover {
	color: var(--accent, #FF2E2E);
}

.xtc-card-pn {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: #E4E6EA;
	margin: 0 0 6px;
	letter-spacing: .02em;
}

.xtc-card-car {
	font-size: 12.5px;
	color: var(--xtc-dim);
	margin: 0 0 10px;
}

.xtc-card-symptom {
	font-size: 13px;
	line-height: 1.5;
	color: var(--xtc-soft);
	margin: 0 0 16px;
	flex: 1;
}

.xtc-card-go {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--accent, #FF2E2E);
	transition: letter-spacing .3s, color .3s;
}

.xtc-card:hover .xtc-card-go {
	color: #fff;
	letter-spacing: .12em;
}

/* ---------- strona części ---------- */
.xtc-part {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: clamp(28px, 4vw, 48px);
	align-items: start;
}

@media (max-width: 900px) {
	.xtc-part {
		grid-template-columns: minmax(0, 1fr);
	}
}

.xtc-part-photo {
	margin: 0 0 28px;
}

.xtc-part-photo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 16px;
}

.xtc-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	background: var(--xtc-card);
	border: 1px solid var(--xtc-line);
	border-radius: 14px;
	overflow: hidden;
}

.xtc-specs th,
.xtc-specs td {
	text-align: left;
	padding: 14px 18px;
	border-bottom: 1px solid var(--xtc-line);
	vertical-align: top;
}

.xtc-specs tr:last-child th,
.xtc-specs tr:last-child td {
	border-bottom: 0;
}

.xtc-specs th {
	width: 40%;
	font-weight: 500;
	color: var(--xtc-soft);
	letter-spacing: .02em;
}

.xtc-specs td {
	color: #E4E6EA;
}

.xtc-pn {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 15px;
	color: #fff;
	letter-spacing: .03em;
}

.xtc-block {
	margin-top: clamp(30px, 4vw, 46px);
}

.xtc-symptoms {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.xtc-symptoms li {
	position: relative;
	padding-left: 26px;
	font-size: 15px;
	line-height: 1.55;
	color: #B0B6BF;
}

.xtc-symptoms li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: .6em;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent, #FF2E2E);
}

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

.xtc-codes span {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: #E4E6EA;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--xtc-line);
	border-radius: 8px;
	padding: 7px 12px;
}

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

#xt .xtc-chip,
.xtc-chip {
	font-size: 13px;
	color: #C7CBD1;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--xtc-line);
	border-radius: 99px;
	padding: 8px 15px;
	transition: background .2s, color .2s, border-color .2s;
}

#xt .xtc-chip:hover,
.xtc-chip:hover {
	background: var(--accent, #FF2E2E);
	border-color: var(--accent, #FF2E2E);
	color: #fff;
}

.xtc-prose {
	margin-top: 22px;
}

/* ---------- karta zamówienia ---------- */
.xtc-part-side {
	position: sticky;
	top: 110px;
}

@media (max-width: 900px) {
	.xtc-part-side {
		position: static;
	}
}

.xtc-order {
	background: linear-gradient(180deg, #171A21, #101318);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 18px;
	padding: 26px 24px 28px;
}

.xtc-order-kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--accent, #FF2E2E);
	margin-bottom: 12px;
}

.xtc-order-title {
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	margin: 0 0 4px;
}

.xtc-order-car {
	font-size: 13.5px;
	color: var(--xtc-dim);
	margin: 0 0 20px;
}

.xtc-order .xt-btn {
	width: 100%;
	justify-content: center;
	margin-bottom: 10px;
}

.xtc-order-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 18px 0 0;
	border-top: 1px solid var(--xtc-line);
	display: grid;
	gap: 10px;
	font-size: 13.5px;
	color: var(--xtc-dim);
}

.xtc-order-list li {
	position: relative;
	padding-left: 22px;
}

.xtc-order-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--accent, #FF2E2E);
	font-weight: 700;
}

/* ---------- wezwanie do działania ---------- */
.xtc-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: clamp(48px, 6vw, 80px);
	padding: clamp(28px, 4vw, 44px);
	background: linear-gradient(120deg, #17191F, #101216);
	border: 1px solid var(--xtc-line);
	border-radius: 18px;
}

.xtc-cta h2 {
	font-size: clamp(20px, 2.2vw, 27px);
	font-weight: 700;
	letter-spacing: -.02em;
	color: #F2F3F5;
	margin: 0 0 8px;
}

.xtc-cta p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--xtc-dim);
	margin: 0;
	max-width: 520px;
}

.xtc-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---------- lista podpowiedzi wyszukiwarki ---------- */
.xtc-finder {
	position: relative;
}

/* podpowiedzi w katalogu wychodzą nad treść, żeby siatka marek nie skakała */
.xtc-finder .xtc-search-out {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 5;
	max-width: none;
}

.xtc-search-out {
	margin-top: 12px;
	background: var(--xtc-card);
	border: 1px solid var(--xtc-line);
	border-radius: 12px;
	overflow: hidden;
}

.xtc-search-out p {
	margin: 0;
	padding: 16px 18px;
	font-size: 13.5px;
	color: var(--xtc-dim);
}

#xt .xtc-search-out a,
.xtc-search-out a {
	display: block;
	padding: 13px 18px;
	border-bottom: 1px solid var(--xtc-line);
	color: #E4E6EA;
	font-size: 14px;
	transition: background .2s, color .2s;
}

.xtc-search-out a:last-child {
	border-bottom: 0;
}

#xt .xtc-search-out a:hover,
.xtc-search-out a:hover {
	background: rgba(255, 255, 255, .05);
	color: #fff;
}

.xtc-search-out b {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--accent, #FF2E2E);
	font-weight: 600;
}

.xtc-search-out small {
	display: block;
	font-size: 12px;
	color: var(--xtc-soft);
	margin-top: 3px;
}

/* wariant na jasnym tle — sekcja „Szukaj części” na stronie głównej */
.xtc-search-light {
	background: #fff;
	border-color: rgba(0, 0, 0, .12);
	box-shadow: 0 8px 24px rgba(15, 17, 22, .06);
	max-width: 720px;
}

.xtc-search-light p {
	color: #565C67;
}

#xt .xtc-search-light a,
.xtc-search-light a {
	color: #20242B;
	border-bottom-color: rgba(0, 0, 0, .08);
}

#xt .xtc-search-light a:hover,
.xtc-search-light a:hover {
	background: rgba(0, 0, 0, .04);
	color: #000;
}

.xtc-search-light small {
	color: #8A909B;
}

/* ---------- podsumowanie nad formularzem zamówienia ---------- */
.xtc-order-note {
	background: #14171D;
	border: 1px solid var(--xtc-line, rgba(255, 255, 255, .08));
	border-left: 3px solid var(--accent, #FF2E2E);
	border-radius: 14px;
	padding: 22px 24px;
	margin: 0 0 32px;
	font-family: 'Poppins', system-ui, sans-serif;
}

.xtc-order-note h2 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent, #FF2E2E);
	margin: 0 0 14px;
}

.xtc-order-note dl {
	display: grid;
	gap: 8px;
	margin: 0 0 12px;
}

.xtc-order-note dl > div {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
}

.xtc-order-note dt {
	min-width: 120px;
	font-size: 13px;
	color: #6C727C;
}

.xtc-order-note dd {
	margin: 0;
	font-size: 14.5px;
	font-weight: 600;
	color: #F2F3F5;
}

.xtc-order-note p {
	margin: 0;
	font-size: 13px;
	color: #6C727C;
}

/* ==========================================================================
   Strona części (.xtp) — układ prowadzony jak sekcje landingu
   --------------------------------------------------------------------------
   Nagłówek ze zdjęciem modułu, potem pary paneli (objawy / zamówienie, dane /
   kody), przebieg naprawy, pas z wezwaniem i powiązane moduły. Kolory, kreski
   i ikony te same co na stronie głównej — strona części jest jej przedłużeniem.
   ========================================================================== */
.xtp {
	--xtp-panel: #12151B;
	--xtp-panel-2: #0F1217;
	--xtp-line: rgba(255, 255, 255, .09);
	display: block;
	font-family: 'Poppins', system-ui, sans-serif;
}

/* ---------- nagłówek ---------- */
.xtp-hero {
	position: relative;
	overflow: hidden;
	background: radial-gradient(120% 120% at 78% 0%, #1a1d24 0%, #0E0F13 46%, #08090B 100%);
	padding: clamp(120px, 13vw, 172px) clamp(20px, 4vw, 56px) clamp(30px, 3.6vw, 46px);
}

/* siatka techniczna — ta sama co w nagłówkach podstron motywu */
.xtp-hero-grid-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: .5;
	background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: linear-gradient(180deg, black, transparent 88%);
	mask-image: linear-gradient(180deg, black, transparent 88%);
	pointer-events: none;
}

/* czerwony ukos z prawej — sygnał marki znany z hero landingu */
.xtp-hero-streak {
	position: absolute;
	top: -30%;
	right: -12%;
	width: 58%;
	height: 170%;
	z-index: 0;
	background: linear-gradient(198deg, rgba(255, 46, 46, .55) 0%, rgba(255, 46, 46, .10) 34%, transparent 62%);
	transform: skewX(-16deg);
	pointer-events: none;
}

.xtp-hero-glow {
	position: absolute;
	top: -18%;
	right: 4%;
	width: 620px;
	height: 620px;
	max-width: 70vw;
	z-index: 0;
	background: radial-gradient(circle, rgba(255, 46, 46, .18), transparent 62%);
	pointer-events: none;
}

.xtp-hero-inner {
	position: relative;
	z-index: 1;
}

.xtp-hero .xtc-crumbs {
	margin-bottom: clamp(24px, 3vw, 36px);
}

.xtp-hero-cols {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}

@media (max-width: 940px) {
	.xtp-hero-cols {
		grid-template-columns: minmax(0, 1fr);
	}
}

.xtp-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent, #FF2E2E);
}

.xtp-kicker-line {
	width: 34px;
	height: 2px;
	background: var(--accent, #FF2E2E);
	flex: 0 0 auto;
}

.xtp-title {
	margin: 0 0 14px;
	font-family: 'Poppins', sans-serif;
	font-weight: 800;
	font-size: clamp(34px, 5.2vw, 62px);
	line-height: 1.02;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: #fff;
}

.xtp-title-lead,
.xtp-title-name {
	display: block;
}

.xtp-title .xtp-accent {
	color: var(--accent, #FF2E2E);
}

.xtp-car {
	margin: 0 0 8px;
	font-size: clamp(19px, 2.1vw, 25px);
	font-weight: 600;
	letter-spacing: -.01em;
	color: #F2F3F5;
}

.xtp-pn-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin: 0 0 18px;
}

.xtp-pn {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14.5px;
	letter-spacing: .03em;
	color: #C7CBD1;
}

.xtp-pn.is-main {
	color: #fff;
}

.xtp-pn + .xtp-pn::before {
	content: "·";
	margin-right: 10px;
	color: #4A4F58;
}

.xtp-lead {
	max-width: 520px;
	margin: 0 0 28px;
	font-size: 15.5px;
	line-height: 1.65;
	color: #9AA1AC;
}

/* ---------- rękojmie pod tytułem ---------- */
.xtp-badges {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 22px 34px;
	margin: 0;
	padding: 0;
}

.xtp-badge {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 132px;
}

.xtp-badge-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 46, 46, .45);
	background: rgba(255, 46, 46, .10);
	transition: background .3s, border-color .3s, transform .3s;
}

.xtp-badge:hover .xtp-badge-ic {
	background: var(--accent, #FF2E2E);
	border-color: var(--accent, #FF2E2E);
	transform: translateY(-3px);
}

.xtp-badge:hover .xtp-badge-ic svg {
	stroke: #fff;
}

.xtp-badge-txt {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #E4E6EA;
}

/* ---------- kolumna ze zdjęciem ---------- */
.xtp-hero-media {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) max-content;
	gap: 20px;
	align-items: center;
	min-width: 0;
	min-height: 260px;
}

.xtp-hero-brand {
	grid-column: 1 / -1;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 44px;
}

.xtp-hero-logo {
	display: block;
	width: auto;
	max-height: 54px;
	object-fit: contain;
}

.xtp-hero-mark {
	display: block;
	width: 120px;
	height: 46px;
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
	.xtp-hero-mark {
		background-color: #fff;
		-webkit-mask-image: var(--xtc-mark);
		mask-image: var(--xtc-mark);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: right center;
		mask-position: right center;
		-webkit-mask-size: auto 46px;
		mask-size: auto 46px;
	}
}

.xtp-hero-mono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	min-width: 46px;
	padding: 0 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .12);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .04em;
	color: #fff;
}

.xtp-hero-photo {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.xtp-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
	filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .6));
}

/* moduł bez zdjęcia — znak półki z kafli „Co naprawiamy”, oparty o tę samą
   poświatę co zdjęcie, żeby kolumna nie wyglądała na pustą */
.xtp-hero-photo.is-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 18px 0 0;
}

.xtp-hero-photo.is-icon img {
	width: auto;
	max-width: 62%;
	max-height: 210px;
	height: auto;
	filter: drop-shadow(0 24px 46px rgba(0, 0, 0, .55));
}

/* pionowe hasła przy krawędzi — detal z projektu, chowany na wąskich ekranach */
.xtp-hero-words {
	grid-column: 2;
	list-style: none;
	margin: 0;
	padding: 0 0 0 14px;
	border-left: 1px solid rgba(255, 255, 255, .22);
	display: grid;
	gap: 9px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
}

@media (max-width: 1120px) {
	.xtp-hero-media {
		grid-template-columns: minmax(0, 1fr);
	}

	.xtp-hero-words {
		display: none;
	}

	.xtp-hero-photo {
		padding-right: 0;
	}

	.xtp-hero-photo.is-icon {
		padding-right: 0;
	}
}

/* ---------- korpus strony ---------- */
.xtp-body {
	padding: clamp(24px, 3vw, 36px) clamp(20px, 4vw, 56px) clamp(20px, 3vw, 32px);
	background: #0B0C0F;
}

.xtp-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(18px, 2.2vw, 26px);
	margin-bottom: clamp(18px, 2.2vw, 26px);
	align-items: stretch;
}

.xtp-panel {
	background: linear-gradient(180deg, var(--xtp-panel), var(--xtp-panel-2));
	border: 1px solid var(--xtp-line);
	border-radius: 18px;
	padding: clamp(24px, 2.6vw, 32px);
}

.xtp-panel-title {
	margin: 0 0 8px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.1vw, 26px);
	letter-spacing: -.02em;
	color: #F2F3F5;
}

.xtp-panel-sub {
	margin: 26px 0 10px;
	font-size: 16px;
	font-weight: 600;
	color: #E4E6EA;
}

.xtp-panel-lead {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.6;
	color: #8A909B;
}

.xtp-panel .xtc-prose {
	margin-top: 0;
}

/* ---------- objawy ---------- */
.xtp-symptoms {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 13px;
}

.xtp-symptoms li {
	display: flex;
	align-items: flex-start;
	gap: 13px;
	font-size: 15px;
	line-height: 1.5;
	color: #D6D9DE;
}

.xtp-symptom-ic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-top: -1px;
	border-radius: 50%;
	background: var(--accent, #FF2E2E);
	box-shadow: 0 4px 14px var(--glow-soft, rgba(255, 46, 46, .14));
}

/* ---------- panel zamówienia ---------- */
.xtp-order {
	background: linear-gradient(180deg, #181B22, #101317);
	border-color: rgba(255, 255, 255, .12);
}

.xtp-order-title {
	margin: 0 0 22px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: clamp(17px, 1.8vw, 21px);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}

.xtp-order-list {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	gap: 16px;
}

.xtp-order-list li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	font-size: 15px;
	line-height: 1.45;
	color: #B0B6BF;
}

.xtp-order-list li > svg {
	flex: 0 0 auto;
}

.xtp-order-list strong {
	font-weight: 600;
	color: #fff;
}

/* przycisk zamówienia — szeroki pas z ikoną i strzałką, jak w projekcie */
#xt .xtp-order-btn,
.xtp-order-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 17px 22px;
	border-radius: 4px;
}

.xtp-order-btn-in {
	display: inline-flex;
	align-items: center;
	gap: 11px;
}

.xtp-order-btn-go {
	font-size: 16px;
	line-height: 1;
	transition: transform .25s;
}

.xtp-order-btn:hover .xtp-order-btn-go {
	transform: translateX(4px);
}

.xtp-order-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	margin-top: 12px;
}

#xt .xtp-order-link,
.xtp-order-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	color: #E4E6EA;
	transition: border-color .25s, background .25s, color .25s;
}

#xt .xtp-order-link:hover,
.xtp-order-link:hover {
	border-color: var(--accent, #FF2E2E);
	background: rgba(255, 46, 46, .08);
	color: #fff;
}

/* ---------- dane techniczne ---------- */
.xtp-specs {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	background: rgba(255, 255, 255, .02);
	border: 1px solid var(--xtp-line);
	border-radius: 12px;
	overflow: hidden;
}

.xtp-specs th,
.xtp-specs td {
	text-align: left;
	padding: 14px 18px;
	border-bottom: 1px solid var(--xtp-line);
	vertical-align: top;
}

.xtp-specs tr:last-child th,
.xtp-specs tr:last-child td {
	border-bottom: 0;
}

.xtp-specs th {
	width: 42%;
	font-weight: 500;
	color: #8A909B;
	letter-spacing: .02em;
}

.xtp-specs td {
	color: #E4E6EA;
}

#xt .xtp-specs a,
.xtp-specs a {
	color: #E4E6EA;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}

#xt .xtp-specs a:hover,
.xtp-specs a:hover {
	color: #fff;
	border-bottom-color: rgba(255, 255, 255, .35);
}

#xt .xtp-specs .xtp-specs-accent,
.xtp-specs .xtp-specs-accent {
	color: var(--accent, #FF2E2E);
	font-weight: 600;
}

#xt .xtp-specs .xtp-specs-accent:hover,
.xtp-specs .xtp-specs-accent:hover {
	color: #fff;
	border-bottom-color: var(--accent, #FF2E2E);
}

/* ---------- kody błędów ---------- */
.xtp-codes {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.xtp-codes li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--xtp-line);
	border-radius: 10px;
	transition: background .25s, border-color .25s;
}

.xtp-codes li:hover {
	background: rgba(255, 46, 46, .10);
	border-color: rgba(255, 46, 46, .45);
}

.xtp-code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	color: #fff;
	min-width: 96px;
}

.xtp-code-desc {
	font-size: 13.5px;
	color: #9AA1AC;
}

.xtp-code-help {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--xtp-line);
	border-radius: 12px;
}

.xtp-code-help-ic {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--xtp-line);
}

.xtp-code-help strong {
	display: block;
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 4px;
}

.xtp-code-help p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: #8A909B;
}

/* ---------- przebieg naprawy ---------- */
.xtp-steps-panel {
	grid-column: 1 / -1;
}

.xtp-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
	gap: 14px;
}

.xtp-step {
	position: relative;
	background: rgba(255, 255, 255, .03);
	border: 1px solid var(--xtp-line);
	border-radius: 14px;
	padding: 20px 20px 22px;
	transition: border-color .3s, transform .3s, background .3s;
}

.xtp-step:hover {
	border-color: rgba(255, 46, 46, .45);
	background: rgba(255, 46, 46, .06);
	transform: translateY(-4px);
}

.xtp-step + .xtp-step::before {
	content: "›";
	position: absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	line-height: 1;
	color: var(--accent, #FF2E2E);
	pointer-events: none;
}

/* na wąskim ekranie kroki stoją w kolumnie, więc strzałka między nimi znika */
@media (max-width: 940px) {
	.xtp-step + .xtp-step::before {
		display: none;
	}
}

.xtp-step-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 18px;
}

.xtp-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid rgba(255, 46, 46, .5);
	background: rgba(255, 46, 46, .10);
	font-weight: 700;
	font-size: 14px;
	color: #fff;
	transition: background .3s, border-color .3s;
}

.xtp-step:hover .xtp-step-num {
	background: var(--accent, #FF2E2E);
	border-color: var(--accent, #FF2E2E);
}

.xtp-step-ic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
}

.xtp-step-ic .xt-ico-img {
	max-width: 100%;
	height: auto;
}

.xtp-step-title {
	margin: 0 0 7px;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
}

.xtp-step-desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #8A909B;
}

/* ---------- pas z wezwaniem ---------- */
.xtp-band {
	position: relative;
	overflow: hidden;
	padding: clamp(34px, 4.5vw, 56px) clamp(20px, 4vw, 56px);
	background: #0E0F13;
	border-top: 1px solid var(--xtp-line);
	border-bottom: 1px solid var(--xtp-line);
}

.xtp-band-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(90deg, rgba(11, 12, 15, .96) 30%, rgba(11, 12, 15, .55) 62%, rgba(255, 46, 46, .22));
	pointer-events: none;
}

.xtp-band-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 26px 40px;
}

.xtp-band-copy {
	flex: 1 1 420px;
}

.xtp-band-title {
	margin: 0 0 10px;
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.1;
	letter-spacing: -.025em;
	color: #fff;
}

.xtp-band-copy p {
	margin: 0;
	max-width: 560px;
	font-size: 15.5px;
	line-height: 1.6;
	color: #9AA1AC;
}

.xtp-band-actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	flex: 0 1 300px;
}

#xt .xtp-band-phone,
.xtp-band-phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: #fff;
	transition: color .2s;
}

#xt .xtp-band-phone:hover,
.xtp-band-phone:hover {
	color: var(--accent, #FF2E2E);
}

/* ---------- powiązane moduły ---------- */
.xtp-related {
	padding: clamp(40px, 5vw, 68px) clamp(20px, 4vw, 56px) clamp(52px, 6vw, 84px);
	background: #0B0C0F;
}

.xtp-related-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px 32px;
	margin-bottom: 26px;
}

.xtp-related-head .xtp-panel-lead {
	margin-bottom: 0;
}

#xt .xtp-related-all,
.xtp-related-all {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 20px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: #E4E6EA;
	transition: background .25s, border-color .25s, color .25s;
}

#xt .xtp-related-all:hover,
.xtp-related-all:hover {
	background: var(--accent, #FF2E2E);
	border-color: var(--accent, #FF2E2E);
	color: #fff;
}

.xtp-related-grid {
	display: grid;
	/* auto-fit, nie auto-fill — pięć kafelków ma wypełnić rząd, a nie zostawić
	   pustą kolumnę; na telefonie mieszczą się dwa w rzędzie */
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
}

#xt .xtp-related-card,
.xtp-related-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: #F2F3F5;
}

.xtp-related-media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 11;
	margin-bottom: 12px;
	overflow: hidden;
	border: 1px solid var(--xtp-line);
	border-radius: 12px;
	background: #101318;
	transition: border-color .3s, transform .3s;
}

.xtp-related-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.xtp-related-media .xtp-related-icon {
	width: auto;
	max-width: 46%;
	height: auto;
	max-height: 58%;
	object-fit: contain;
	opacity: .78;
}

.xtp-related-card:hover .xtp-related-media {
	border-color: rgba(255, 46, 46, .45);
	transform: translateY(-4px);
}

.xtp-related-card:hover .xtp-related-media img {
	transform: none;
}

.xtp-related-name {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	color: #fff;
	transition: color .25s;
}

.xtp-related-card:hover .xtp-related-name {
	color: var(--accent, #FF2E2E);
}

.xtp-related-car {
	font-size: 12.5px;
	color: #8A909B;
}

/* Cała powierzchnia karty prowadzi do oferty, także bez JavaScriptu. */
.xtc-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.xtc-card:focus-within { outline: 2px solid var(--xtc-accent, #ff2e2e); outline-offset: 3px; }
.xtp-order-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.xtp-order-actions .xtp-order-btn { flex: 1 1 180px; justify-content: center; text-align: center; }