/**
 * BuildLine specification No. 5.
 *
 * This stylesheet intentionally contains only the compact fixed header and
 * product-category presentation. It is loaded after the legacy theme CSS so
 * the change can be reviewed and rolled back without touching unrelated UI.
 */

/* The SVG has large intrinsic HTML dimensions; width alone left a 166px-tall
 * box. Explicit auto height fixes both the 292px desktop and 180px mobile
 * headers at their source. */
body > .header .main .left img,
.mobile-header .logo img {
	display: block;
	height: auto;
}

/* Off-canvas navigation and the side cart are intentionally positioned beyond
 * the viewport while closed. `clip` prevents those fixed panels from creating
 * a horizontal document scrollbar without changing their opening animation. */
html,
body {
	overflow-x: clip;
}

@media (min-width: 981px) {
	body > .header {
		position: sticky;
		top: 0;
		z-index: 10000;
		width: 100%;
		background: #fff;
		box-shadow: 0 6px 22px rgba(28, 31, 34, .09);
	}

	body.admin-bar > .header {
		top: 32px;
	}

	body > .header .top-menu {
		padding: 6px 0;
		line-height: 1.2;
	}

	body > .header .top-menu > ul {
		gap: 16px;
	}

	body > .header .top-menu > ul a {
		font-size: 13px;
	}

	body > .header .main {
		min-height: 68px;
		padding: 7px 0;
	}

	body > .header .main .left {
		flex: 0 0 180px;
	}

	body > .header .main .left img {
		width: 180px;
	}

	body > .header .main .right {
		min-width: 0;
		gap: 18px;
	}

	body > .header .contacts {
		gap: 10px;
	}

	body > .header .contacts .cont {
		gap: 0;
	}

	body > .header .contacts .phone {
		font-size: 16px;
	}

	body > .header .contacts .mail,
	body > .header .contacts .txt {
		font-size: 12px;
		line-height: 1.25;
	}

	body > .header .main-menu,
	body > .header .main-menu.is-sticky {
		position: static;
		top: auto;
		left: auto;
		height: 42px;
		margin-top: 0;
		box-shadow: none;
	}

	body > .header .main-menu .container {
		align-items: stretch;
	}

	body > .header .main-menu .button button,
	body > .header .main-menu a {
		height: 42px;
	}

	body > .header .main-menu .button button {
		padding: 0 22px;
	}

	body > .header .main-menu .main-ul {
		min-width: 0;
		/* Preserve the original, predictable navigation rhythm. Distributing the
		 * links across the remaining width made this row visibly drift at wide
		 * desktop widths after the compact-header release. */
		justify-content: flex-start;
		gap: 28px;
		margin-left: 24px;
	}

	body > .header .main-menu .main-ul > li > a {
		padding: 0 7px;
		font-size: 11.5px;
		white-space: nowrap;
	}

	body > .header .main-menu .main-li > .child-area {
		top: 42px;
	}

	body > .header .main-menu .main-ul > li:nth-last-child(-n+2) > .child-area {
		right: 0;
		left: auto;
	}

	body > .header .wrong-main-menu,
	body > .header .wrong-main-menu.is-active {
		display: none;
	}

	body > .header .main-catalog,
	body > .header .main-catalog.is-sticky {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}
}

@media (min-width: 981px) and (max-width: 1100px) {
	body > .header .main .left {
		flex-basis: 160px;
	}

	body > .header .main .left img {
		width: 160px;
	}

	body > .header .main .right {
		gap: 12px;
	}

	body > .header .contacts .txt {
		display: none;
	}

	body > .header .main-menu .button button {
		padding: 0 16px;
	}

	body > .header .main-menu .main-ul {
		gap: 12px;
		margin-left: 8px;
	}

	body > .header .main-menu .main-ul > li > a {
		padding: 0 5px;
		font-size: 10.5px;
	}
}

@media (max-width: 980px) {
	.mobile-header {
		min-height: 62px;
		padding: 8px 16px;
		z-index: 10000;
	}

	.mobile-header .top {
		gap: 12px;
	}

	.mobile-header .logo img {
		width: 145px;
	}

	.mobile-header .button button,
	.mobile-header .contacts a {
		width: 44px;
		height: 44px;
	}

	.wrapper-content {
		padding-top: 72px !important;
	}
}

/* Large category cards requested for every parent product section. */
.buildline-tz5-page-header {
	margin: 0 0 28px;
}

.buildline-tz5-page-header h1 {
	margin: 0;
}

.subcategories.buildline-tz5-subcategories {
	display: grid;
	/* One shared four-column grid: the catalogue below uses its first column
	 * for filters and the remaining three for products. Categories use all four
	 * columns, so their cards have precisely the same width and 20px gutter. */
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 42px;
	padding: 0;
	border-radius: 4px;
	background: #fff;
}

/* The legacy `.subcategories a` rule centres flex children. Match its
 * specificity here so every card label has the same full-width left edge. */
.subcategories.buildline-tz5-subcategories .buildline-tz5-category-card {
	min-width: 0;
	align-items: stretch;
	justify-content: flex-start;
	gap: 0;
	overflow: hidden;
	border: 1px solid #e4dfd6;
	border-radius: 4px;
	color: var(--black);
	background: #f3f1ed;
	box-shadow: 0 7px 20px rgba(27, 30, 32, .06);
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.buildline-tz5-category-card:hover,
.buildline-tz5-category-card:focus-visible {
	border-color: rgba(215, 25, 32, .45);
	color: var(--black);
	box-shadow: 0 12px 28px rgba(27, 30, 32, .11);
	transform: translateY(-2px);
}

.buildline-tz5-category-card__media {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 8.5;
	overflow: hidden;
	background: #e9e5df;
}

.buildline-tz5-category-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .28s ease;
}

.buildline-tz5-category-card:hover .buildline-tz5-category-card__image,
.buildline-tz5-category-card:focus-visible .buildline-tz5-category-card__image {
	transform: scale(1.025);
}

.buildline-tz5-category-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 0 46%, rgba(255, 255, 255, .42) 46% 54%, transparent 54% 100%),
		repeating-linear-gradient(0deg, #ded8cf 0 18px, #ebe7e1 18px 20px);
}

.subcategories.buildline-tz5-subcategories .buildline-tz5-category-card__name {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	min-height: 76px;
	align-items: flex-start;
	padding: 17px 18px 20px;
	justify-content: flex-start;
	background: #f3f1ed;
	font-family: var(--font-bold);
	font-size: 18px;
	line-height: 1.25;
	text-align: left !important;
}

.buildline-tz5-products-header {
	gap: 24px;
	margin: 0 0 24px;
}

.buildline-tz5-products-title {
	margin: 0;
	font-family: var(--font-bold);
	font-size: 28px;
	line-height: 1.3;
	text-transform: uppercase;
}

.buildline-tz5-products-header--ordering-only {
	justify-content: flex-end;
}

@media (min-width: 981px) and (max-width: 1180px) {
	.subcategories.buildline-tz5-subcategories {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 980px) {
	.subcategories.buildline-tz5-subcategories {
		grid-template-columns: 1fr !important;
		gap: 20px;
		margin: 0 0 32px;
		padding: 0;
	}

	.buildline-tz5-category-card__name {
		min-height: 68px;
		padding: 14px;
		font-size: 16px;
	}

	.buildline-tz5-products-header {
		align-items: stretch !important;
	}

	.buildline-tz5-products-title {
		font-size: 24px;
	}
}

@media (max-width: 520px) {
	/* The single long word in the privacy-page H1 is wider than its 320px
	 * content column at the legacy 28px size. A local font adjustment avoids
	 * horizontal scrolling and keeps words intact. */
	body.privacy-policy .archive-product-header h1 {
		font-size: 25px;
		line-height: 1.3;
	}

	.buildline-tz5-page-header {
		margin-bottom: 22px;
	}

	.buildline-tz5-category-card__media {
		aspect-ratio: 16 / 7.5;
	}

	.buildline-tz5-category-card__name {
		min-height: 60px;
	}

	.buildline-tz5-products-title {
		font-size: 21px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.buildline-tz5-category-card,
	.buildline-tz5-category-card__image {
		transition: none;
	}
}