/* Price list, cart badge and cart page. */

/* ---- Price list ---- */

.sx-pricelist__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 2.5rem;
}

.sx-pricelist__filter {
	padding: 0.55rem 1.1rem;
	border: 1px solid var( --wp--preset--color--accent-6 );
	/* Rounded rectangle, like every other button on the site — the pill is the
	   header CTA's own shape. */
	border-radius: var( --sx-radius-btn );
	background: transparent;
	color: var( --wp--preset--color--contrast );
	font: inherit;
	font-size: var( --wp--preset--font-size--small );
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sx-pricelist__filter:hover {
	background: var( --wp--preset--color--accent-5 );
}

.sx-pricelist__filter.is-active {
	background: var( --wp--preset--color--brand-red );
	border-color: var( --wp--preset--color--brand-red );
	color: var( --sx-white );
}

/* ---- Two-column layout: filter sidebar beside the catalogue ---- */

.sx-pricelist--sidebar {
	display: grid;
	grid-template-columns: 280px minmax( 0, 1fr );
	align-items: start;
	gap: 2.5rem;
}

/* Filters stay in view while the (long) product list scrolls past, clearing
   whatever the header and admin bar have already taken at the top. */
.sx-pricelist__sidebar {
	position: sticky;
	top: calc( var( --sx-sticky-top ) + 1.5rem );
}

.sx-pricelist__main {
	min-width: 0;
}

/* The sidebar is always open on desktop; this button only appears once the
   layout collapses to a single column. */
.sx-pricelist__toggle {
	display: none;
}

/* ---- Facet blocks (functional block / industry) ---- */

.sx-facet + .sx-facet {
	margin-top: 1.5rem;
}

/*
 * A quiet header on the surface grey. It used to be a solid near-black band —
 * the one thing on the page painted that way, and nothing else in the current
 * design uses a filled dark bar for a heading.
 */
.sx-facet__title {
	margin: 0;
	padding: 0.8rem 1.1rem;
	border-radius: 10px 10px 0 0;
	background: var( --wp--preset--color--accent-5 );
	border-bottom: 1px solid var( --wp--preset--color--accent-6 );
	color: var( --wp--preset--color--contrast );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.sx-facet__list {
	/* Long facets scroll inside their own box instead of pushing the
	   catalogue down the page. */
	max-height: 320px;
	overflow-y: auto;
	padding: 0.5rem 1.1rem;
	border: 1px solid var( --wp--preset--color--accent-6 );
	border-top: none;
	border-radius: 0 0 10px 10px;
}

.sx-facet__option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0.6rem 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.4;
	cursor: pointer;
}

.sx-facet__option + .sx-facet__option {
	border-top: 1px dashed var( --wp--preset--color--accent-6 );
}

.sx-facet__option input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var( --wp--preset--color--brand-red );
	cursor: pointer;
}

.sx-facet__option:hover span {
	color: var( --wp--preset--color--brand-red );
}

.sx-pricelist__reset {
	margin-top: 1.25rem;
}

.sx-pricelist__reset {
	padding: 0.65rem 1.2rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var( --wp--preset--color--brand-red );
	font: inherit;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.sx-pricelist__reset:hover {
	text-decoration: underline;
}

.sx-pricelist__reset[ hidden ] {
	display: none;
}

.sx-pricelist__vat {
	margin: 0 0 1rem;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--accent-4 );
}

.sx-pricelist__no-results {
	padding: 3rem 0;
	text-align: center;
	color: var( --wp--preset--color--accent-4 );
}

.sx-pricelist__no-results[ hidden ] {
	display: none;
}

.sx-pricelist__group[ hidden ],
.sx-pricelist__row[ hidden ] {
	display: none;
}

/* Below the two-column breakpoint the sidebar becomes a collapsible panel
   above the catalogue — a 280px filter column would leave the product rows
   uselessly narrow. */
@media ( max-width: 900px ) {
	.sx-pricelist--sidebar {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1.5rem;
	}

	.sx-pricelist__sidebar {
		position: static;
	}

	.sx-pricelist__toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		justify-content: center;
		padding: 0.8rem 1.2rem;
		border: 1px solid var( --wp--preset--color--accent-6 );
		border-radius: 10px;
		background: transparent;
		color: inherit;
		font: inherit;
		font-weight: 600;
		cursor: pointer;
	}

	.sx-pricelist__toggle-count {
		min-width: 20px;
		height: 20px;
		padding: 0 5px;
		border-radius: 999px;
		background: var( --wp--preset--color--brand-red );
		color: var( --sx-white );
		font-size: 12px;
		line-height: 20px;
		text-align: center;
	}

	.sx-pricelist__toggle-count[ hidden ] {
		display: none;
	}

	/* The drawer is shut until the "Фільтри" button opens it; the fold itself
	   is defined once in tokens.css. */
	.sx-pricelist__sidebar:not( .is-open ) .sx-fold {
		grid-template-rows: 0fr;
	}

	/* On the fold, not on the panel inside it — see the category sections: a
	   gap belonging to the content survives the collapse and leaves the drawer
	   standing open by exactly its own margin. */
	.sx-pricelist__sidebar .sx-fold {
		transition:
			grid-template-rows var( --sx-transition-base ) var( --sx-ease ),
			padding var( --sx-transition-base ) var( --sx-ease );
	}

	.sx-pricelist__sidebar.is-open .sx-fold {
		padding-top: 1rem;
	}
}

.sx-pricelist__group + .sx-pricelist__group {
	margin-top: 1rem;
}

/* Collapsible section header — the bar you click to fold a category away. */
.sx-pricelist__group-title {
	margin: 0;
	font-size: var( --sx-title-section );
}

/*
 * A quiet header, like the facet titles. It was a solid near-black band with
 * large white type — the loudest thing on the page, and the only place on the
 * site painted that way.
 */
.sx-pricelist__group-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.9rem 1.25rem;
	border: 1px solid var( --wp--preset--color--accent-6 );
	border-radius: var( --sx-radius-lg );
	background: var( --wp--preset--color--accent-5 );
	color: var( --wp--preset--color--contrast );
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.sx-pricelist__group-toggle:hover {
	border-color: var( --wp--preset--color--neutral-300 );
}

.sx-pricelist__chevron {
	flex-shrink: 0;
	transition: transform 0.25s ease;
}

.sx-pricelist__group.is-open .sx-pricelist__chevron {
	transform: rotate( 90deg );
}

/*
 * Sections without a toggle (a single-category price list) have no header to
 * fold from, so their rows always show — otherwise the whole list would be
 * invisible for want of an is-open class that nothing can ever set.
 *
 * Keyed to the heading, not to the button inside it. The button is wrapped in
 * that <h2>, so it is not a sibling of the list, and "toggle ~ rows" matched
 * nothing at all — the class went on and off the section and the rows never
 * moved. The heading is rendered only where there is something to fold.
 */
/*
 * Folded rather than hidden. It was display: none, which cannot be animated at
 * all — a category snapped shut with fifty rows of the page vanishing under the
 * cursor. The panel now travels to its own height; see .sx-fold in tokens.css.
 */
.sx-pricelist__group:not( .is-open ) .sx-pricelist__group-title ~ .sx-fold {
	grid-template-rows: 0fr;
}

/*
 * The gap around the list belongs to the fold, not to the list.
 *
 * On the list it left a closed section 48px tall — a stripe of nothing under
 * every shut category. Margin sits outside the box the fold clips; padding is
 * inside it but still floors the track, because overflow can clip content and
 * never padding. Only spacing on the folding element itself can go away with
 * it, so it is animated alongside the height and the section closes to nothing.
 */
.sx-pricelist__group-title + .sx-fold {
	transition:
		grid-template-rows var( --sx-transition-base ) var( --sx-ease ),
		padding var( --sx-transition-base ) var( --sx-ease );
}

.sx-pricelist__group.is-open .sx-pricelist__group-title + .sx-fold {
	padding-top: 1rem;
	padding-bottom: 2rem;
}

.sx-pricelist__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * The hairline belongs to the group's heading — it closes it off from the rows
 * under it. Carried by the list itself, it also drew on lists that have no
 * heading at all: a single-category price list, and every catalogue page,
 * opened with a stray line floating above the first card.
 */
.sx-pricelist__group-title + .sx-pricelist__rows {
	border-top: 1px solid var( --wp--preset--color--accent-6 );
}

.sx-pricelist__row {
	display: grid;
	/* Name takes the slack; price and controls stay a fixed, aligned width so
	   the column edges line up down the whole list. */
	grid-template-columns: minmax( 0, 1fr ) auto auto;
	align-items: center;
	gap: 1rem 1.5rem;
	padding: 0.7rem 1rem;
	margin: 0;
	border-radius: var( --sx-radius-md );
}

/*
 * Banding rather than a rule between every row. A hairline under sixty
 * near-identical licence names turns the list into a ledger; a tint gives the
 * eye a whole band to follow across to the price, which is the one journey
 * anybody makes on this page.
 *
 * The class comes from JS, not from :nth-child. The facets hide rows without
 * removing them, and a nth-child stripe counts the hidden ones too — after one
 * filter the banding would fall out of step and read as a rendering fault.
 */
.sx-pricelist__row.is-odd {
	background: var( --sx-surface );
}

.sx-pricelist__name a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

.sx-pricelist__name a:hover {
	text-decoration: underline;
}

.sx-pricelist__price {
	font-weight: 700;
	white-space: nowrap;
}

.sx-pricelist__price.is-on-request {
	font-weight: 400;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--accent-4 );
}

.sx-pricelist__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* Term / purchase-type / buyer-type pickers on tiered products. */
.sx-tier {
	padding: 0.45rem 0.6rem;
	border: 1px solid var( --wp--preset--color--accent-6 );
	border-radius: 8px;
	background: var( --wp--preset--color--base );
	color: inherit;
	font: inherit;
	font-size: var( --wp--preset--font-size--small );
	cursor: pointer;
}

/* The price column shows a line total once options are picked, so give it
   room to breathe rather than wrapping mid-figure. */
.sx-pricelist__row.has-tiers .sx-pricelist__price {
	min-width: 7rem;
	text-align: right;
}

.sx-cart__options {
	margin-top: 0.2rem;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--accent-4 );
}

/* ---- Stepper ----
 *
 * Minus, a count, plus — and the count is what is in the cart, not what would
 * be added. It replaced a number field next to a "У кошик" button, which on a
 * phone meant aiming at a 4.5rem input, waiting for the numeric keyboard to
 * cover the list, then finding the button again. Two taps in the same place
 * now do the whole job, and the row states its own answer to "have I added
 * this?" instead of leaving a field reading 1 over an empty cart.
 */
.sx-stepper {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.sx-stepper__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 40px is the smallest target that is still comfortable with a thumb, and
	   the row has room for it once the button beside it is gone. */
	width: 40px;
	height: 40px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: none;
	color: var( --sx-brand-text );
	font: inherit;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sx-stepper__btn:hover {
	background: var( --sx-brand-50 );
}

/* Nothing to remove yet. Faded rather than recoloured — at this size a grey
   glyph and a red one are hard to tell apart, while a faded control is not. */
.sx-stepper__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.sx-stepper__btn:disabled:hover {
	background: none;
}

/*
 * Scoped through the wrapper rather than written as a bare class. The site's
 * form rule is input[type="number"], and an attribute selector outranks a
 * single class — so .sx-qty on its own lost every box-model property it set
 * here, and the field kept the 52px min-height meant for a full-size form
 * control while the buttons either side of it stood at 40.
 */
.sx-stepper .sx-qty {
	width: 3.25rem;
	height: 40px;
	min-height: 0;
	padding: 0 0.25rem;
	border: 1px solid var( --wp--preset--color--accent-6 );
	border-radius: 999px;
	background: var( --wp--preset--color--base );
	color: inherit;
	font: inherit;
	font-variant-numeric: tabular-nums;
	text-align: center;
	/* The spinners duplicate the two buttons on either side of the field and
	   are far too small to hit on a phone. */
	appearance: textfield;
	-moz-appearance: textfield;
}

.sx-stepper .sx-qty::-webkit-outer-spin-button,
.sx-stepper .sx-qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* In the cart: the number goes bold and the field takes the brand outline. */
.sx-stepper.is-active .sx-qty {
	border-color: var( --sx-brand );
	font-weight: 700;
}

/* The rounded rectangle the buttons on the product pages use, and sentence
   case — the pill and the shouting capitals were this page's alone. */
.sx-add {
	padding: 0.6rem 1.25rem;
	border: none;
	border-radius: var( --sx-radius-btn );
	background: var( --wp--preset--color--brand-red );
	color: var( --sx-white );
	font: inherit;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.sx-add:hover {
	background: var( --sx-brand-hover );
}

.sx-add.is-added {
	background: var( --wp--preset--color--accent-4 );
}

@media ( max-width: 700px ) {
	/* Stack: name on its own row, price and controls sharing the next one. */
	.sx-pricelist__row {
		grid-template-columns: minmax( 0, 1fr ) auto;
		gap: 0.5rem 1rem;
		padding: 0.7rem 0.75rem;
	}

	.sx-pricelist__name {
		grid-column: 1 / -1;
	}

	/* The price is the thing being compared down the list, so on a phone it
	   carries the weight the product name has on a desktop. */
	.sx-pricelist__price {
		font-size: 1.05rem;
	}

	/*
	 * Tiered rows get a stack instead.
	 *
	 * They carry two or three <select>s next to the stepper, and side by side
	 * with the price on a 375px screen that block wants more room than the row
	 * has: the auto column took everything, the price column collapsed to zero,
	 * and the price — which has a min-width so a figure never wraps mid-number
	 * — overflowed its empty cell and printed on top of the selects.
	 *
	 * Full width also lets the controls sit on one line instead of two, so the
	 * row ends up shorter than the broken version was.
	 */
	.sx-pricelist__row.has-tiers {
		grid-template-columns: minmax( 0, 1fr );
	}

	.sx-pricelist__row.has-tiers .sx-pricelist__price {
		min-width: 0;
		text-align: left;
	}

	/* A thumb, not a cursor. */
	.sx-stepper__btn {
		width: 44px;
		height: 44px;
	}

	.sx-stepper .sx-qty {
		height: 44px;
	}
}

/* ---- Header cart button ---- */

.sx-cart-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	color: inherit;
	text-decoration: none !important;
	transition: background-color 0.15s ease;
}

.sx-cart-btn:hover {
	background: color-mix( in srgb, currentColor 10%, transparent );
}

.sx-cart-btn svg {
	width: 22px;
	height: 22px;
}

.sx-cart-btn__count {
	position: absolute;
	top: 2px;
	right: 0;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var( --wp--preset--color--brand-red );
	color: var( --sx-white );
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* Hidden until the cart script has read localStorage, so a stale "0" never
   flashes before hydration. */
.sx-cart-btn__count[ hidden ] {
	display: none;
}

/* ---- Cart page ---- */

.sx-cart__empty {
	padding: 3rem 0;
	text-align: center;
	color: var( --wp--preset--color--accent-4 );
}

.sx-cart__rows {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	border-top: 1px solid var( --wp--preset--color--accent-6 );
}

/*
 * Name, stepper, unit price, line total, remove — five columns, and the row
 * fits on one line because none of them can grow: only the name takes slack.
 *
 * The columns are declared on the list and the rows take them with subgrid,
 * so every row measures them the same. Each row used to be its own grid, which
 * meant the auto columns were sized from that row alone: "1 023,60 ₴" made a
 * 69px unit column, "516 ₴" a 35px one, and the steppers ended up at four
 * different distances from the left. Nothing was broken, but a column that
 * wanders reads as one.
 *
 * min-width: 0 on the name is what stops the row overflowing. A grid item's
 * default minimum is its min-content width, and "BAS АГРО. Бухгалтерія,
 * клієнтська ліцензія на 1 р.м." is wider than a phone — the track refused to
 * shrink and pushed 35px of the page off the right edge.
 */
.sx-cart__rows {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) auto auto auto auto;
}

.sx-cart__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: subgrid;
	align-items: center;
	gap: 0.6rem 1.25rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var( --wp--preset--color--accent-6 );
}

/*
 * Without subgrid the rows are separate grids again, so the tracks are fixed
 * instead of measured. Wide enough for the longest figure this cart can hold
 * and identical on every row, which is the point.
 */
@supports not ( grid-template-columns: subgrid ) {
	.sx-cart__rows {
		display: block;
	}

	.sx-cart__row {
		grid-template-columns: minmax( 0, 1fr ) 9rem 7rem 7rem 32px;
	}
}

/* The stepper sits in the middle of its own column rather than against the
   price, so the three buttons line up down the list. */
.sx-cart__row .sx-stepper {
	justify-self: center;
}

.sx-cart__name {
	min-width: 0;
	overflow-wrap: break-word;
}

.sx-cart__name a {
	color: inherit;
	text-decoration: none;
	font-weight: 500;
}

.sx-cart__name a:hover {
	text-decoration: underline;
}

.sx-cart__unit {
	color: var( --wp--preset--color--accent-4 );
	font-size: var( --wp--preset--font-size--small );
	white-space: nowrap;
	justify-self: end;
	font-variant-numeric: tabular-nums;
}

/*
 * Right-aligned and on tabular figures, so the hryvnia signs stack and the
 * digits above each other are the same digits — the only way a column of
 * numbers can be compared at a glance.
 */
.sx-cart__sum {
	font-weight: 700;
	white-space: nowrap;
	justify-self: end;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.sx-cart__remove {
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: var( --wp--preset--color--accent-4 );
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.sx-cart__remove:hover {
	background: color-mix( in srgb, var( --wp--preset--color--brand-red ) 12%, transparent );
	color: var( --wp--preset--color--brand-red );
}

/*
 * The label sits next to the figure, not at the other end of the row. Spread
 * across a 780px column, "Разом" and the sum read as two unrelated things and
 * the eye has to travel the whole width to pair them.
 */
.sx-cart__total {
	display: flex;
	justify-content: flex-end;
	align-items: baseline;
	gap: 0.75rem;
	/* Pulled in by the width of the remove column and its gap, so the grand
	   total ends where the line totals above it end instead of 52px further
	   right, over the × buttons. */
	padding: 1rem calc( 32px + 1.25rem ) 2rem 0;
	font-size: var( --wp--preset--font-size--large );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sx-cart__note {
	margin: 0 0 2rem;
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	background: var( --wp--preset--color--accent-5 );
	color: var( --wp--preset--color--accent-4 );
	font-size: var( --wp--preset--font-size--small );
}

@media ( max-width: 700px ) {
	/*
	 * Name across the top, then the stepper on the left with the two figures
	 * and the remove button pushed to the right — the same shape the price
	 * list takes at this width.
	 */
	/*
	 * Four columns instead of five — the name moves to a line of its own — and
	 * they are still declared on the list, so the two figures line up down the
	 * cart here exactly as they do on a desktop.
	 */
	.sx-cart__rows {
		grid-template-columns: auto minmax( 0, 1fr ) auto auto;
	}

	.sx-cart__row {
		gap: 0.5rem 0.75rem;
	}

	.sx-cart__name {
		grid-column: 1 / -1;
	}

	/* Against the left edge under the name, where the eye already is. */
	.sx-cart__row .sx-stepper {
		justify-self: start;
	}

	.sx-cart__total {
		padding-right: calc( 32px + 0.75rem );
	}

	@supports not ( grid-template-columns: subgrid ) {
		.sx-cart__row {
			grid-template-columns: auto minmax( 0, 1fr ) auto 32px;
		}
	}
}

/*
 * Under about 400px the stepper, two figures and the remove button no longer
 * fit on one line: at 360px they want 337px of a 320px row, and the cells
 * started overlapping. The unit price moves up under the name — which is where
 * it belongs anyway, since it describes the item rather than the line — and
 * the line below is left with the stepper, the total and the ×.
 */
@media ( max-width: 400px ) {
	.sx-cart__rows {
		grid-template-columns: auto minmax( 0, 1fr ) auto;
	}

	/*
	 * Every row placed by hand. The unit price comes after the stepper in the
	 * markup, so a full-width span alone left auto-placement putting the
	 * stepper on the line above it and the total on the line below, each
	 * stranded in the first column.
	 */
	.sx-cart__name {
		grid-row: 1;
	}

	.sx-cart__unit {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
	}

	.sx-cart__row .sx-stepper {
		grid-column: 1;
		grid-row: 3;
	}

	.sx-cart__sum {
		grid-column: 2;
		grid-row: 3;
	}

	.sx-cart__remove {
		grid-column: 3;
		grid-row: 3;
	}

	@supports not ( grid-template-columns: subgrid ) {
		.sx-cart__row {
			grid-template-columns: auto minmax( 0, 1fr ) 32px;
		}
	}
}

/* ---- Order form ---- */

.sx-order-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 1.25rem 0 1.5rem;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	cursor: pointer;
}

.sx-order-form__consent input {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	/* The site's form rule gives inputs a 52px minimum meant for text fields. */
	min-height: 0;
	margin: 2px 0 0;
	accent-color: var( --wp--preset--color--brand-red );
	cursor: pointer;
}

.sx-order-form {
	max-width: 640px;
}

.sx-order-form__grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1rem;
}

.sx-order-form__field--wide {
	grid-column: 1 / -1;
}

.sx-order-form label {
	display: block;
	margin-bottom: 0.35rem;
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
}

/* Part of the label, so it is read out with it, but plainly the aside of the
   two — the field is still called "Коментар". */
.sx-order-form__hint {
	font-weight: 400;
	color: var( --wp--preset--color--accent-4 );
}

/*
 * Text fields only. Written as a bare "input" it also caught the consent
 * checkbox and stretched it to the full 640px of the form, with the label
 * stranded beside a tick box the width of the page.
 */
.sx-order-form input:not( [type="checkbox"] ):not( [type="radio"] ),
.sx-order-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	border: 1px solid var( --wp--preset--color--accent-6 );
	border-radius: 10px;
	background: var( --wp--preset--color--base );
	color: inherit;
	font: inherit;
}

.sx-order-form input:focus,
.sx-order-form textarea:focus {
	outline: 2px solid var( --wp--preset--color--brand-red );
	outline-offset: 1px;
}

.sx-order-form textarea {
	min-height: 110px;
	resize: vertical;
}

/*
 * Honeypot: a real field to a bot, invisible and unreachable to a person.
 * Kept out of the layout entirely rather than display:none, which some bots
 * specifically skip.
 */
.sx-order-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.sx-order-form__submit {
	margin-top: 1.5rem;
	padding: 0.9rem 2.5rem;
	border: none;
	border-radius: 999px;
	background: var( --wp--preset--color--brand-red );
	color: var( --sx-white );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.sx-order-form__submit:hover {
	opacity: 0.85;
}

.sx-order-form__submit[ disabled ] {
	opacity: 0.5;
	cursor: default;
}

.sx-order-form__message {
	margin-top: 1rem;
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	font-size: var( --wp--preset--font-size--small );
}

.sx-order-form__message.is-error {
	background: color-mix( in srgb, var( --wp--preset--color--brand-red ) 12%, transparent );
	color: var( --wp--preset--color--brand-red );
}

.sx-order-form__message.is-success {
	background: color-mix( in srgb, var( --sx-success ) 12%, transparent );
	color: var( --sx-success );
}

@media ( max-width: 700px ) {
	.sx-order-form__grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* ---- Category catalogue ----
   Same shell as the price list (so the filter script works on both), but the
   rows read like catalogue entries instead of order lines. */

.sx-catalog .sx-pricelist__group + .sx-pricelist__group,
.sx-catalog .sx-pricelist__rows {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sx-catalog__item {
	/* Overrides the price list's name/price/actions grid: picture, then the
	   text, then price and the link through. */
	display: grid;
	grid-template-columns: 140px minmax( 0, 1fr ) auto;
	align-items: center;
	gap: 1.5rem;
	padding: 1.1rem 1.5rem;
	border: 1px solid var( --wp--preset--color--accent-6 );
	border-radius: var( --sx-radius-lg );
	background: var( --wp--preset--color--base );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* The same lift the cards elsewhere on the site use. */
.sx-catalog__item:hover {
	border-color: var( --sx-brand-200 );
	box-shadow: var( --sx-shadow-card );
}

/* Without a picture the text takes the column back rather than leaving a gap. */
.sx-catalog__item:not( :has( .sx-catalog__media ) ) {
	grid-template-columns: minmax( 0, 1fr ) auto;
}

.sx-catalog__item + .sx-catalog__item {
	margin-top: 1rem;
}

/* The picture sets the height of its row, so it stays close to the height of a
   row without one — otherwise the list alternates tall and short. */
.sx-catalog__media img {
	display: block;
	width: 100%;
	height: 84px;
	object-fit: contain;
}

/* Long product names run their parts together with a plus sign, which the
   line breaker treats as one unbreakable word — see .sx-projects__title. */
.sx-catalog__title,
.sx-pricelist__name {
	overflow-wrap: break-word;
}

.sx-catalog__title {
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
	line-height: 1.3;
}

.sx-catalog__title a {
	color: inherit;
	text-decoration: none;
}

.sx-catalog__title a:hover {
	color: var( --sx-brand-text );
}

/* Two lines, so one product with a long description doesn't stand three times
   the height of the rows around it. */
.sx-catalog__desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	margin: 0.4rem 0 0;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.6;
	opacity: 0.75;
}

/*
 * Price and button side by side rather than stacked. Stacked, they made every
 * row two lines tall, and since most products carry a name and no description
 * the middle column held one short line in the centre of a 140px box — rows of
 * mostly empty white.
 */
.sx-catalog__aside {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	text-align: right;
	/*
	 * The price beside it is nowrap, which is right for "300 000 ₴" and wrong
	 * for "від 250 грн/рік одна ліцензія" — one product in the BAS catalogue
	 * carries a sentence where the others carry a number, and on a 375px phone
	 * it pushed the "Детальніше" button 45px past the edge of the page and gave
	 * the whole listing sideways scroll. Wrapping drops the button onto its own
	 * line instead.
	 */
	flex-wrap: wrap;
	justify-content: flex-end;
}

.sx-catalog__price {
	margin: 0;
	font-weight: 700;
	white-space: nowrap;
}

/*
 * On its own line rather than after the figure: .sx-catalog__price is nowrap,
 * and "від 2 509,20 ₴ за 1 р.м." on one unbreakable line is what pushes a
 * narrow card sideways. Block also reads better — the rate, then what it buys.
 */
.sx-catalog__price-unit {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	color: var( --sx-text-secondary );
}

/* The rounded rectangle the product pages use, not a pill — the pill is the
   header's own shape. */
.sx-catalog__more {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	border-radius: var( --sx-radius-btn );
	background: var( --wp--preset--color--accent-1 );
	color: var( --wp--preset--color--base );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sx-catalog__more:hover {
	background: var( --wp--preset--color--contrast );
	color: var( --wp--preset--color--base );
}

@media ( max-width: 700px ) {
	.sx-catalog__item,
	.sx-catalog__item:not( :has( .sx-catalog__media ) ) {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1rem;
		padding: 1.25rem;
	}

	.sx-catalog__media img {
		height: 120px;
	}

	.sx-catalog__aside {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		text-align: left;
	}
}

/* A price-list position has no page to open, so its name is plain text. It
   keeps the weight of a linked name — the row still reads as a product. */
.sx-pricelist__name span {
	color: inherit;
}

/* The same in the catalogue: a picture that leads nowhere is not a link, and
   without this it would lose the link's layout. */
span.sx-catalog__media {
	display: block;
}