/*
 * Fabrica Child — main stylesheet (Prom Industry).
 *
 * Single source of truth for site-wide CSS variables that the migrated
 * native templates use. Brand colors are defined in the parent theme's
 * theme.json (exposed automatically as --wp--preset--color--*); this file
 * adds semantic aliases so template code reads naturally.
 */

:root {
	/* Brand palette — mirror of theme.json slugs with semantic names. */
	--pi-color-bg:           var(--wp--preset--color--bg-color,    #ffffff);
	--pi-color-border:       var(--wp--preset--color--bd-color,    #D3DCE0);
	--pi-color-text:         var(--wp--preset--color--text-dark,   #000000);
	--pi-color-text-muted:   var(--wp--preset--color--text-light,  #898A8E);
	--pi-color-link:         var(--wp--preset--color--text-link,   #000000);
	--pi-color-brand:        var(--wp--preset--color--text-hover,  #DB2B0E); /* Prom Industry orange */
	--pi-color-link-blue:    var(--wp--preset--color--text-link-2, #0868D7);
	--pi-color-link-blue-hi: var(--wp--preset--color--text-hover-2, #0051AF);
	--pi-color-link-green:   var(--wp--preset--color--text-link-3, #1FA713);
	--pi-color-link-green-hi:var(--wp--preset--color--text-hover-3, #118807);

	/* Typography. Parent already enqueues Golos Text via Elementor's
	   google-font cache; once Elementor is removed we'll move that enqueue
	   into functions.php. Keep the family alias so template code stays
	   stable across the transition. */
	--pi-font-body: "Golos Text", sans-serif;

	/* Layout — mirrors Elementor Kit container_width=1310 / theme.json
	   wide-size=1280. Native templates use these instead of inline px. */
	--pi-container-max:   1310px;
	--pi-content-max:     830px;
	--pi-container-pad-x: clamp(16px, 4vw, 40px);

	/* Vertical rhythm — matches Elementor Kit space_between_widgets=20. */
	--pi-space-xs:  8px;
	--pi-space-sm:  16px;
	--pi-space-md:  20px;
	--pi-space-lg:  40px;
	--pi-space-xl:  80px;
}

/* Native container helper — used by migrated templates in place of
   .elementor-section / .elementor-container. */
.pi-container {
	max-width: var(--pi-container-max);
	margin-inline: auto;
}

.pi-content-narrow {
	max-width: var(--pi-content-max);
	margin-inline: auto;
}

/* ============================================================
   Compact Elementor section padding on baked pages — AGGRESSIVE.
   ============================================================
   Default Elementor sections shipped with 80–150px padding; we cut to
   ~24px so consecutive sections sit tight like the reference site. */

.pi-baked-page .elementor-section.elementor-top-section,
.pi-baked-page section.elementor-section.elementor-top-section {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.pi-baked-page .elementor-top-section .elementor-column .elementor-element-populated,
.pi-baked-page .elementor-top-section .elementor-widget-wrap {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.pi-baked-page .elementor-widget:not(:last-child) {
	margin-bottom: 8px !important;
}
.pi-baked-page .elementor-widget-spacer .elementor-spacer-inner {
	height: 8px !important;
}
.pi-baked-page .elementor-widget-divider {
	margin-block: 6px !important;
	padding-block: 0 !important;
}

/* Hero section — keep larger but tighter than default */
.pi-baked-page > .elementor > .elementor-section:first-of-type,
.pi-baked-page .elementor-section.elementor-top-section:first-of-type {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}

/* Constrain content to container width — baked sections were full-bleed,
   but the user wants everything in a 1310px container with proper inner
   padding on every viewport. The process card section (9fe3651) opts out
   below because it draws its own white card chrome. */
.pi-baked-page .elementor-section .elementor-container {
	max-width: var(--pi-container-max) !important;
}

/* Inner sections — completely drop their padding so they don't compound */
.pi-baked-page .elementor-inner-section,
.pi-baked-page .elementor-section.elementor-inner-section {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ULTRA-AGGRESSIVE — match the reference rhythm. Spacers→2px, widget
   margins→2px, dividers→0. Use this for list-of-items rhythm. */
.pi-baked-page .elementor-widget-spacer,
.pi-baked-page .elementor-widget-spacer .elementor-widget-container,
.pi-baked-page .elementor-widget-spacer .elementor-spacer,
.pi-baked-page .elementor-widget-spacer .elementor-spacer-inner {
	height: 2px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.pi-baked-page .elementor-widget {
	margin-bottom: 2px !important;
}
.pi-baked-page .elementor-widget:last-child { margin-bottom: 0 !important; }
.pi-baked-page .elementor-widget-divider .elementor-divider {
	padding: 0 !important;
}
.pi-baked-page .elementor-widget-divider .elementor-divider-separator {
	margin: 0 !important;
}
.pi-baked-page .elementor-widget-divider {
	margin-block: 4px !important;
}
.pi-baked-page .elementor-widget-heading .elementor-heading-title {
	line-height: 1.3 !important;
	margin: 0 !important;
}

/* Heading rules — by default ALL headings bold + uppercase, EXCEPT
   h6 in process-step pattern where Elementor uses h6 to wrap a bold
   "01.Title." prefix + a plain description line. */
.pi-baked-page h1.elementor-heading-title,
.pi-baked-page h2.elementor-heading-title,
.pi-baked-page h3.elementor-heading-title,
.pi-baked-page h4.elementor-heading-title,
.pi-baked-page h5.elementor-heading-title {
	font-weight: 800 !important;
	text-transform: uppercase !important;
}
.pi-baked-page h6.elementor-heading-title {
	font-weight: 400 !important;
	text-transform: none !important;
}
.pi-baked-page h6.elementor-heading-title strong {
	font-weight: 800 !important;
	text-transform: uppercase;
}

/* Empty <p> tags in baked HTML cause phantom vertical space — collapse. */
.pi-baked-page p:empty {
	display: none !important;
	margin: 0 !important;
}
.pi-baked-page .elementor-widget-container > p:empty,
.pi-baked-page .elementor-widget-wrap > p {
	display: none !important;
}

/* Hide the decorative line dividers Elementor injects across the home
   page — we replace them with a clean border-bottom on each step heading. */
.pi-baked-2257 .elementor-widget-divider--view-line,
.pi-baked-7180 .elementor-widget-divider--view-line {
	display: none !important;
}

/* Apply the same border-bottom + uniform padding rhythm we use in the
   process steps card to the About + Trust numbered lists on the home
   page (h6 widgets each containing a "01.Title" bold + body line). */
.pi-baked-2257 .elementor-section.elementor-top-section .elementor-widget-heading:has(.elementor-heading-title h6),
.pi-baked-2257 .elementor-widget-heading .elementor-heading-title:is(h6),
.pi-baked-7180 .elementor-widget-heading .elementor-heading-title:is(h6) {}

/* Apply border-bottom + uniform spacing to every h6 list item on the home
   page (numbered "01. ..." items in about/trust sections). The process
   section (9fe3651) gets borders on its widget wrapper instead — see
   below — so it's excluded here to avoid double borders. */
html body .pi-baked-page.pi-baked-2257 .elementor-section:not(.elementor-element-9fe3651) .elementor-widget-heading h6.elementor-heading-title,
html body .pi-baked-page.pi-baked-7180 .elementor-section:not(.elementor-element-9fe3651) .elementor-widget-heading h6.elementor-heading-title {
	border-bottom: 1px solid #e6e6e6 !important;
	padding-bottom: 16px !important;
	margin: 0 !important;
}
html body .pi-baked-page.pi-baked-2257 .elementor-section:not(.elementor-element-9fe3651) .elementor-widget-heading:has(h6.elementor-heading-title),
html body .pi-baked-page.pi-baked-7180 .elementor-section:not(.elementor-element-9fe3651) .elementor-widget-heading:has(h6.elementor-heading-title) {
	margin-bottom: 16px !important;
}
/* Drop the border on the very last h6 in each column so the trailing CTA
   button has clean breathing space. */
html body .pi-baked-page.pi-baked-2257 .elementor-widget-heading:has(h6.elementor-heading-title):nth-last-of-type(-n+3):not(:has(~ .elementor-widget-heading)) h6.elementor-heading-title,
html body .pi-baked-page.pi-baked-7180 .elementor-widget-heading:has(h6.elementor-heading-title):nth-last-of-type(-n+3):not(:has(~ .elementor-widget-heading)) h6.elementor-heading-title {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Hide extra <br> tags that the baked Elementor HTML emits between bold
   title and description — these create double-line gaps inside steps.
   Limited to homepage where the process/about/trust sections use them;
   on other pages (about-us has multi-line working hours separated by
   single <br>), keep the breaks intact. */
.pi-baked-2257 br + br,
.pi-baked-7180 br + br,
.pi-baked-2257 p + br,
.pi-baked-7180 p + br,
.pi-baked-2257 br:first-child,
.pi-baked-7180 br:first-child {
	display: none !important;
}
/* Process section: hide divider widgets — we draw the line via
   border-bottom on each step heading instead, for cleaner rhythm. */
.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget-divider,
.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget-divider {
	display: none !important;
}

/* "Як ми працюємо" — per user spec: section has no margins; vertical
   padding 30px on the section itself; the inner populated wrap carries
   the visual 30px breathing room. */
.pi-baked-page.pi-baked-2257 .elementor-section.elementor-top-section.elementor-element-9fe3651,
.pi-baked-page.pi-baked-7180 .elementor-section.elementor-top-section.elementor-element-9fe3651 {
	margin-top: 0px !important;
	margin-bottom: 0 !important;
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}
html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-9fe3651 .elementor-element-populated.elementor-widget-wrap,
html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-9fe3651 .elementor-element-populated.elementor-widget-wrap,
html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-9fe3651 .elementor-element-populated,
html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-9fe3651 .elementor-element-populated {
	padding: 30px !important;
}
/* Process steps inside 9fe3651: every step heading gets a bottom border
   so visually we don't need divider widgets; uniform 16px gap above + 16px
   padding below — first item matches the rest. The very last item drops
   its border so the CTA button can breathe. */
.pi-baked-page.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget-heading,
.pi-baked-page.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget-heading {
	border-bottom: 1px solid #e6e6e6 !important;
	padding-bottom: 16px !important;
	margin-bottom: 16px !important;
	margin-top: 0 !important;
}
.pi-baked-page.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget-heading:last-of-type,
.pi-baked-page.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget-heading:last-of-type {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 24px !important;
}
/* Section title (ЯК МИ ПРАЦЮЄМО — first heading) should NOT have the
   thin line, because it sits above the steps and is visually their title. */
.pi-baked-page.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget-heading:first-of-type,
.pi-baked-page.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget-heading:first-of-type {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 28px !important;
}
/* Zero out other widget margins in this card so spacing depends only on
   the heading rules above. */
.pi-baked-page.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget:not(.elementor-widget-heading),
.pi-baked-page.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget:not(.elementor-widget-heading) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
/* Process button at bottom of card: keep some breathing room above. */
.pi-baked-page.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget-trx_sc_button,
.pi-baked-page.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget-trx_sc_button {
	margin-top: 8px !important;
}

/* Stretch image column to match text column height (no dead space below image). */
.pi-baked-page .elementor-section .elementor-container > .elementor-column.elementor-col-50 > .elementor-element-populated {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Desktop only: equal vertical gap below the section heading and
   horizontal gap between the image and content column inside the
   two-column rows (Про нас / Нам довіряють). 60px both directions. */
@media (min-width: 1024px) {
	.pi-baked-page .elementor-container > .elementor-col-50:nth-child(2) > .elementor-element-populated {
		margin-left: 0 !important;
	}
	.pi-baked-page .elementor-container > .elementor-col-50:first-child > .elementor-element-populated {
		margin-right: 0 !important;
	}
	/* Make the gap between the section that contains a 2-col image+text
	   row and the preceding heading section equal to the 60px horizontal
	   column gap. Scoped to the homepage (Про нас / Нам довіряють rows). */
	html body .pi-baked-2257 .elementor-section.elementor-top-section:has(> .elementor-container > .elementor-col-50),
	html body .pi-baked-7180 .elementor-section.elementor-top-section:has(> .elementor-container > .elementor-col-50) {
		padding-top: 20px !important;
		margin-top: 0 !important;
	}
	html body .pi-baked-2257 .elementor-section.elementor-top-section:not(:has(.elementor-widget-image)):not(:has(.elementor-widget-text-editor)):not(:has(.elementor-widget-trx_sc_icons)):has(+ .elementor-section.elementor-top-section:has(> .elementor-container > .elementor-col-50)),
	html body .pi-baked-7180 .elementor-section.elementor-top-section:not(:has(.elementor-widget-image)):not(:has(.elementor-widget-text-editor)):not(:has(.elementor-widget-trx_sc_icons)):has(+ .elementor-section.elementor-top-section:has(> .elementor-container > .elementor-col-50)) {
		padding-bottom: 0 !important;
		margin-bottom: 0 !important;
	}
}
.pi-baked-page .elementor-widget-image {
	width: 100% !important;
}
.pi-baked-page .elementor-widget-image .elementor-image {
	width: 100% !important;
}
.pi-baked-page .elementor-widget-image img {
	width: 100% !important;
	height: auto !important;
	max-height: 480px;
	object-fit: cover;
}

/* Desktop only: in homepage About + Trust two-column rows render the
   left image as a square (1:1) at its natural column width — no
   forced full-height stretch. */
@media (min-width: 1024px) {
	.pi-baked-2257 .elementor-section.elementor-top-section .elementor-column.elementor-col-50:first-child .elementor-widget-image img,
	.pi-baked-7180 .elementor-section.elementor-top-section .elementor-column.elementor-col-50:first-child .elementor-widget-image img {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 1 / 1 !important;
		max-height: none !important;
		object-fit: cover !important;
	}
}

/* About / clients sections specifically — the columns had vertical
   padding of 80px which made the text feel airy. Strip it. */
.pi-baked-page .elementor-column > .elementor-element-populated {
	padding: 0 !important;
}

/* Image + text sections tighten the line-height */
.pi-baked-page .elementor-widget-text-editor p {
	margin-bottom: 6px !important;
}
.pi-baked-page .elementor-widget-heading + .elementor-widget-divider,
.pi-baked-page .elementor-widget-divider + .elementor-widget-heading {
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}

/* Mobile: shrink even further */
@media (max-width: 768px) {
	.pi-baked-page .elementor-section.elementor-top-section {
		padding-top: 20px !important;
		padding-bottom: 20px !important;
	}
	.pi-baked-page > .elementor > .elementor-section:first-of-type {
		padding-top: 36px !important;
		padding-bottom: 36px !important;
	}
}

/* ============================================================
   Header — black bar matching prom-industry.com reference
   ============================================================ */

.pi-header {
	background: #000;
	color: #fff;
	font-family: var(--pi-font-body);
	position: sticky;
	top: 0;
	z-index: 100;
}
/* Fabrica wraps body content in body_wrap > page_wrap with html+body
   both scrolling, which breaks position:sticky. On mobile switch to
   position:fixed and offset content by header height. */
@media (max-width: 1100px) {
	.pi-header {
		position: fixed !important;
		top: 0;
		left: 0;
		right: 0;
		z-index: 200;
	}
	/* Fabrica sets body padding via theme styles; bump specificity and
	   use !important so the fixed header doesn't overlap content. */
	html body,
	html body.home,
	html body.page,
	html body.archive,
	html body.single {
		padding-top: 100px !important;
	}
}
.pi-header__search-panel {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
}

/* Brand-archive alphabet pagination — disable Fabrica's "shrink on hover"
   animation by overriding both transform and the wrapper styles. */
.trx_addons_letters_list a,
.trx_addons_letters_list span,
.brand-letters a,
.alphabet-pagination a,
.brands-letters-list a,
.trx_addons_brands_list_letters a,
.trx_addons_brands_list_letters span,
[class*="brand_letter"],
[class*="brand-letter"] {
	transition: color .15s, background .15s, border-color .15s !important;
	transform: none !important;
	font-size: inherit !important;
}
.trx_addons_letters_list a:hover,
.trx_addons_letters_list span:hover,
.brand-letters a:hover,
.alphabet-pagination a:hover,
.brands-letters-list a:hover,
.trx_addons_brands_list_letters a:hover,
[class*="brand_letter"]:hover,
[class*="brand-letter"]:hover {
	transform: none !important;
	scale: 1 !important;
	color: var(--pi-color-brand) !important;
	font-size: inherit !important;
}

.pi-header__topbar-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 10px 70px;
	min-height: 80px;
}

.pi-header__logo {
	flex-shrink: 0;
	display: inline-flex;
	line-height: 0;
}
.pi-header__logo img {
	max-height: 55px;
	width: auto;
	height: auto;
}

.pi-header__nav {
	flex: 1;
	min-width: 0;
}

.pi-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
}
.pi-menu > li > a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: .02em;
	text-transform: uppercase;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pi-menu > li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	border: 4px solid transparent;
	border-top-color: currentColor;
	margin-top: 5px;
}
.pi-menu > li > a:hover,
.pi-menu > li > a:focus,
.pi-menu > li.current-menu-item > a,
.pi-menu > li.current-menu-ancestor > a {
	color: var(--pi-color-brand) !important;
}

/* Submenus */
.pi-menu li {
	position: relative;
}
.pi-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 280px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: #111;
	border: 1px solid #222;
	box-shadow: 0 8px 24px rgba(0,0,0,.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s, visibility .15s, transform .15s;
	z-index: 10;
}
.pi-menu li:hover > .sub-menu,
.pi-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.pi-menu .sub-menu a {
	display: block;
	padding: 10px 18px;
	color: #ddd;
	text-decoration: none;
	font-size: 13px;
	text-transform: none;
	letter-spacing: 0;
}
.pi-menu .sub-menu a:hover {
	color: #fff;
	background: var(--pi-color-brand);
}
.pi-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

.pi-header__contacts {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 15px;
	line-height: 1.4;
	text-align: right;
	color: #fff;
	font-weight: 700;
}
.pi-header__contacts a {
	text-decoration: none;
	color: #fff;
	transition: color .15s;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pi-header__phone, .pi-header__email {
	font-weight: 700;
	font-size: 15px;
}
.pi-header__icon {
	flex-shrink: 0;
	color: var(--pi-color-brand);
}
.pi-header__contacts a:hover {
	color: var(--pi-color-brand);
}

.pi-header__lang {
	position: relative;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-weight: 700;
}
.pi-header__lang-current {
	background: transparent;
	border: 0;
	color: #fff;
	font: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 2px;
	font-weight: 700;
}
.pi-header__lang-current:hover { color: var(--pi-color-brand); }
.pi-header__lang-dot {
	display: none; /* red bullet removed per design */
}
.pi-header__lang-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 80px;
	background: #111;
	border: 1px solid #222;
	box-shadow: 0 8px 24px rgba(0,0,0,.5);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .15s, visibility .15s, transform .15s;
	z-index: 110;
}
.pi-header__lang.is-open .pi-header__lang-list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.pi-header__lang-list li { display: block; list-style: none; }
.pi-header__lang-list a {
	display: block;
	padding: 8px 14px;
	color: #ddd;
	text-decoration: none;
}
.pi-header__lang-list a:hover {
	color: #fff;
	background: var(--pi-color-brand);
}

.pi-header__cta {
	background: #B82308;
	color: #fff !important;
	border: 0;
	border-radius: 4px;
	padding: 16px 28px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	transition: background .15s, transform .15s;
	font-family: inherit;
	white-space: nowrap;
	letter-spacing: .03em;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1.2;
}
.pi-header__cta:hover {
	background: #971b06;
	color: #fff !important;
	transform: translateY(-1px);
}

.pi-header__search-toggle,
.pi-header__burger {
	background: transparent;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pi-header__search-toggle {
	width: 32px;
	height: 32px;
	margin-left: 4px;
}
.pi-header__search-toggle svg { width: 26px; height: 26px; }
.pi-header__search-toggle:hover,
.pi-header__burger:hover {
	color: var(--pi-color-brand);
}

.pi-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 5px;
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	box-sizing: content-box;
	padding: 4px !important;
	position: relative;
}
.pi-header__burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
	border-radius: 2px;
	transform-origin: center;
	transition: transform .3s ease, opacity .2s ease;
}
body.pi-mobile-open .pi-header__burger span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
body.pi-mobile-open .pi-header__burger span:nth-child(2) {
	opacity: 0;
	transform: scaleX(.2);
}
body.pi-mobile-open .pi-header__burger span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

.pi-header__search-panel {
	background: #111;
	border-top: 1px solid #222;
	padding-block: 16px;
}
.pi-header__search-panel form {
	display: flex;
	gap: 8px;
	max-width: var(--pi-container-max);
	margin-inline: auto;
	padding-inline: var(--pi-container-pad-x);
}
.pi-header__search-panel input[type="search"] {
	flex: 1;
	padding: 12px 16px;
	background: #000;
	border: 1px solid #333;
	border-radius: 4px;
	font-size: 15px;
	color: #fff !important;
	caret-color: #fff;
	font-family: inherit;
	outline: none;
	-webkit-appearance: textfield;
	appearance: textfield;
}
/* Placeholder colour — must override fabrica's global `input[placeholder]::placeholder`
   rules AND its `:focus`/`:active` variants (parent loads them in style.min.css).
   The input auto-focuses when the panel opens, so without the focus variant the
   parent rule wins and the placeholder renders dark on dark. */
html body .pi-header__search-panel input[type="search"]::-webkit-input-placeholder,
html body .pi-header__search-panel input[type="search"]:focus::-webkit-input-placeholder,
html body .pi-header__search-panel input[type="search"]:active::-webkit-input-placeholder {
	color: rgba(255, 255, 255, 0.55) !important;
	opacity: 1 !important;
}
html body .pi-header__search-panel input[type="search"]::-moz-placeholder,
html body .pi-header__search-panel input[type="search"]:focus::-moz-placeholder,
html body .pi-header__search-panel input[type="search"]:active::-moz-placeholder {
	color: rgba(255, 255, 255, 0.55) !important;
	opacity: 1 !important;
}
html body .pi-header__search-panel input[type="search"]::placeholder,
html body .pi-header__search-panel input[type="search"]:focus::placeholder,
html body .pi-header__search-panel input[type="search"]:active::placeholder {
	color: rgba(255, 255, 255, 0.55) !important;
	opacity: 1 !important;
}
.pi-header__search-panel input[type="search"]:focus {
	border-color: var(--pi-color-brand);
}
.pi-header__search-panel button {
	background: var(--pi-color-brand);
	color: #fff;
	border: 0;
	border-radius: 4px;
	padding: 12px 24px;
	cursor: pointer;
	font-weight: 600;
	font-family: inherit;
}
.pi-header__search-panel button:hover {
	background: #B82308;
}

/* Mobile breakpoint */
@media (max-width: 1280px) {
	.pi-header__topbar-inner {
		padding: 10px 24px;
	}
}
/* Mid-screen (1101-1300): nav stays visible but contacts (phone+email)
   compete for row space and push КОНТАКТИ to a second line. Hide the
   contacts block here so the nav fits in one row. The same info is still
   reachable in the footer and (on touch) the mobile drawer. */
@media (max-width: 1300px) and (min-width: 1101px) {
	.pi-header__contacts { display: none !important; }
}
/* Desktop only: hide the small mobile CTA. Higher specificity +
   `!important` needed because the unified-button-system rule at the
   end of this file sets `display: inline-flex !important` on
   `.pi-header__cta`. The matching mobile-only rule below shows the
   mobile variant + hides desktop variant under 1100px. */
@media (min-width: 1101px) {
	html body .pi-header__cta.pi-header__cta--mobile { display: none !important; }
}
@media (max-width: 1100px) {
	.pi-header__nav,
	.pi-header__contacts,
	.pi-header__lang {
		display: none;
	}
	.pi-header__burger {
		display: inline-flex;
	}
	/* Desktop CTA hidden on mobile; the compact mobile CTA appears between
	   search and burger instead. Specificity bumped to match the unified
	   button rule (`html body .pi-header__cta`) at the end of this file. */
	html body .pi-header__cta.pi-header__cta--desktop { display: none !important; }
	.pi-header__search-toggle { margin-left: auto; }
	.pi-header__cta--mobile {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 8px 14px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .02em;
		border-radius: 4px;
		background: #B82308;
		color: #fff !important;
		text-transform: uppercase;
		line-height: 1;
		white-space: nowrap;
		text-decoration: none;
	}
	.pi-header__cta--mobile:hover { background: #971b06; }
	/* Removed margin-left: 6px on .pi-header__cta--mobile and .pi-header__burger
	   — the parent .pi-header__topbar-inner already uses `gap: 6px`, so the
	   margins were double-counting and pushing the burger ~12px past the
	   topbar's right padding edge. */
}
@media (max-width: 760px) {
	/* Search panel: stack input over a full-width button so it doesn't
	   compete for the narrow row. Match button height to the input. */
	.pi-header__search-panel form {
		flex-direction: column;
		gap: 6px;
		padding-inline: 16px;
	}
	.pi-header__search-panel input[type="search"] {
		padding: 8px 14px;
		font-size: 14px;
		line-height: 1.3;
		height: 38px;
		box-sizing: border-box;
	}
	.pi-header__search-panel button {
		width: 100% !important;
		height: 38px !important;
		min-height: 38px !important;
		padding: 0 16px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		background: #B82308 !important;
		color: #fff !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		box-sizing: border-box !important;
		border-radius: 4px !important;
		border: 0 !important;
	}
	.pi-header__search-panel button:hover { background: #971b06 !important; }
}
@media (max-width: 380px) {
	/* Ultra-narrow phones — collapse CTA text to fit cluster width. */
	.pi-header__cta--mobile { padding: 8px 10px; font-size: 11px; }
}
@media (max-width: 520px) {
	.pi-header__topbar-inner {
		padding: 10px 14px;
		gap: 6px;
	}
	.pi-header__search-toggle { padding: 4px; }
	/* Logo: bigger on mobile, no extra right margin — the cluster gap (6px)
	   plus search/CTA padding already gives enough visual separation, and
	   adding margin pushed the burger off the right edge. */
	.pi-header__logo img { max-height: 50px; }
	html body .pi-header__logo { margin-right: 0; }
}
@media (max-width: 380px) {
	/* Ultra-narrow phones — keep logo prominent but small enough to leave
	   room for search + CTA + burger on a 360px viewport. */
	.pi-header__logo img { max-height: 42px; }
	html body .pi-header__logo { margin-right: 0; }
}

/* ============================================================
   Mobile slide-in menu (drawer) — full-black panel sliding from the
   left, sticky head + scrollable nav + sticky contacts at the bottom.
   Submenus expand inline on tap of the chevron button.
   ============================================================ */
.pi-mobile-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 200;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.pi-mobile-menu {
	position: fixed;
	inset: 0 auto 0 0;
	width: min(360px, 88vw);
	background: #000;
	color: #fff;
	transform: translateX(-100%);
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
	z-index: 210;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
body.pi-mobile-open .pi-mobile-overlay {
	opacity: 1;
	visibility: visible;
}
body.pi-mobile-open .pi-mobile-menu {
	transform: translateX(0);
}
body.pi-mobile-open { overflow: hidden; }

.pi-mobile-menu__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px 22px;
	border-bottom: 1px solid rgba(255,255,255,.08);
	flex: 0 0 auto;
}
.pi-mobile-menu__logo img {
	max-height: 44px;
	width: auto;
}
.pi-mobile-menu__close {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: #fff;
	padding: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	transition: background .15s, color .15s;
}
.pi-mobile-menu__close:hover {
	color: var(--pi-color-brand);
	background: rgba(255,255,255,.05);
}

.pi-mobile-menu__nav {
	flex: 1 1 0;
	min-height: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 8px 0;
}
.pi-mobile-menu__nav::-webkit-scrollbar { width: 4px; }
.pi-mobile-menu__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }

.pi-mobile-menu__list,
.pi-mobile-menu__list .sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pi-mobile-menu__list > li {
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.pi-mobile-menu__list > li:last-child { border-bottom: 0; }

/* Row = link + chevron button (injected by JS for items with submenus).
   Plain leaf items also live inside the same selector via :scope > a. */
.pi-mobile-menu__row {
	display: flex;
	align-items: stretch;
}
.pi-mobile-menu__list a {
	display: block;
	padding: 14px 22px;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	flex: 1 1 auto;
	transition: color .15s, background .15s;
}
.pi-mobile-menu__list a:hover {
	color: var(--pi-color-brand);
	background: rgba(255,255,255,.03);
}
.pi-mobile-menu__list .current-menu-item > a,
.pi-mobile-menu__list .current-menu-ancestor > a {
	color: var(--pi-color-brand);
}

/* Chevron toggle button */
.pi-mobile-menu__toggle {
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--pi-color-brand);
	padding: 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	min-height: 56px;
	border-left: 1px solid rgba(255,255,255,.06);
	transition: transform .15s;
}
/* Chevron is identical at every nesting depth: same size, same color,
   no inheritance from per-level font-size overrides. flex-shrink:0
   prevents the inline-flex toggle button from squishing the SVG in
   nested submenus where the row gets narrower. */
.pi-mobile-menu__list .pi-mobile-menu__toggle svg,
.pi-mobile-menu__list .sub-menu .pi-mobile-menu__toggle svg,
.pi-mobile-menu__list .sub-menu .sub-menu .pi-mobile-menu__toggle svg {
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	flex: 0 0 16px !important;
	aspect-ratio: 1 / 1 !important;
	color: var(--pi-color-brand) !important;
	transition: transform .25s ease;
}
.menu-item-has-children.is-open > .pi-mobile-menu__row > .pi-mobile-menu__toggle svg {
	transform: rotate(180deg);
}

/* Submenu container — collapsed by default, expands smoothly on .is-open.
   No bg-tint per depth: every submenu uses the same drawer background so
   nested items don't look darker / lighter. */
.pi-mobile-menu__list .sub-menu {
	max-height: 0;
	overflow: hidden;
	background: transparent;
	transition: max-height .35s ease;
}
.pi-mobile-menu__list .menu-item-has-children.is-open > .sub-menu {
	max-height: 4000px;
}
.pi-mobile-menu__list .sub-menu li {
	border-top: 1px solid rgba(255,255,255,.06);
}
/* Every link in the drawer (top-level + every nesting depth) renders
   identically: same color, same weight, same size. Only padding-left
   differs to show hierarchy. */
.pi-mobile-menu__list a,
.pi-mobile-menu__list .sub-menu a,
.pi-mobile-menu__list .sub-menu .sub-menu a,
.pi-mobile-menu__list .sub-menu .sub-menu .sub-menu a {
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}
.pi-mobile-menu__list .sub-menu a              { padding: 12px 22px 12px 38px; }
.pi-mobile-menu__list .sub-menu .sub-menu a    { padding-left: 54px; }
.pi-mobile-menu__list .sub-menu .sub-menu .sub-menu a { padding-left: 70px; }

/* Contacts strip sticky at bottom */
.pi-mobile-menu__contacts {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 22px 22px;
	border-top: 1px solid rgba(255,255,255,.08);
	background: #050505;
}
.pi-mobile-menu__contact {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	transition: color .15s;
}
.pi-mobile-menu__contact:hover {
	color: var(--pi-color-brand);
}
.pi-mobile-menu__contact-icon {
	color: var(--pi-color-brand);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Accent CTA at the very bottom of the drawer (full-width). */
.pi-mobile-menu__cta {
	display: block;
	margin-top: 14px;
	padding: 14px 16px;
	background: #B82308;
	color: #fff !important;
	text-align: center;
	text-decoration: none;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	border-radius: 4px;
	text-transform: uppercase;
	transition: background .15s, transform .1s;
}
.pi-mobile-menu__cta:hover {
	background: #971b06;
}
.pi-mobile-menu__cta:active {
	transform: translateY(1px);
}

/* ============================================================
   Footer — black bg with decorative stain glow (matches reference)
   ============================================================ */

footer.pi-footer {
	background: #000 !important;
	color: #cfcfcf;
	font-family: var(--pi-font-body);
	margin-top: 100px;
	position: relative;
	overflow: hidden;
}

.pi-footer::before,
.pi-footer::after {
	content: '';
	position: absolute;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 1;
	z-index: 0;
	filter: brightness(.5);
}
.pi-footer::before {
	background-image: url('/wp-content/uploads/2023/01/stain-left-370x271.png');
	left: 0;
	bottom: 0;
	width: 28%;
	max-width: 420px;
	aspect-ratio: 370 / 271;
	background-position: left bottom;
}
.pi-footer::after {
	background-image: url('/wp-content/uploads/2023/01/stain-right.png');
	right: 0;
	top: 0;
	width: 32%;
	max-width: 480px;
	aspect-ratio: 370 / 271;
	background-position: right top;
}

.pi-footer > * {
	position: relative;
	z-index: 1;
}

.pi-footer__cols {
	display: grid;
	grid-template-columns: 1.2fr 2fr 0.8fr;
	gap: 56px;
	padding-block: 70px 40px;
	align-items: start;
}

.pi-footer__col--brand {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.pi-footer__col--brand .pi-footer__heading {
	margin-top: 6px;
}
.pi-footer__logo img {
	max-width: 170px;
	height: auto;
	display: block;
}

.pi-footer__heading {
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 16px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.pi-footer a {
	color: #fff;
	text-decoration: none;
	transition: color .15s;
}
.pi-footer a:hover {
	color: var(--pi-color-brand);
}

.pi-footer__menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.pi-footer__menu li { margin-bottom: 16px; }
.pi-footer__menu a {
	font-size: 15px;
	font-weight: 500;
	color: #fff;
}

.pi-footer__cats {
	list-style: none;
	padding: 0;
	margin: 0;
}
.pi-footer__cats li {
	font-size: 14px;
	line-height: 1.5;
	margin-bottom: 12px;
}
.pi-footer__cats a {
	color: #fff;
	font-weight: 500;
}

.pi-footer__contacts-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.pi-footer__contacts-list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	font-size: 15px;
	line-height: 1.5;
	color: #fff;
}
.pi-footer__rowicon {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--pi-color-brand);
}
.pi-footer__contact-link {
	color: #fff !important;
	font-weight: 500;
}
.pi-footer__contact-link:hover {
	color: var(--pi-color-brand) !important;
}
/* Sub-phone row (second phone number under the first) shares the row icon
   column but draws no icon to read as a continuation. */
.pi-footer__contacts-list li.pi-footer__contact-li--sub {
	margin-top: -8px;
}
.pi-footer__contacts-list li.pi-footer__contact-li--sub .pi-footer__rowicon {
	visibility: hidden;
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
/* Working hours row — keep the clock icon aligned with the first line of
   the multi-line text. */
.pi-footer__contacts-list li.pi-footer__contact-li--hours {
	align-items: flex-start;
}
.pi-footer__hours {
	color: #fff;
	font-weight: 500;
}

.pi-socials {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 12px;
}
.pi-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	transition: background .15s, color .15s, border-color .15s;
}
.pi-socials a:hover {
	background: var(--pi-color-brand);
	border-color: var(--pi-color-brand);
	color: #fff;
}

.pi-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding-block: 24px;
}
.pi-footer__copyright {
	margin: 0;
	font-size: 13px;
	color: #888;
	text-align: center;
}

@media (max-width: 1100px) {
	.pi-footer__cols {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
	.pi-footer__col--cats { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
	.pi-footer__cols {
		grid-template-columns: 1fr;
		gap: 32px;
		padding-block: 50px 32px;
	}
	.pi-footer__col--cats { grid-column: auto; }
}

/* ============================================================
   Homepage native sections (categories, brands, clients)
   ============================================================ */

.pi-section {
	padding: 50px 0;
	font-family: var(--pi-font-body);
}
.pi-section__title {
	margin: 0 0 32px;
	text-align: center;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--pi-color-text);
}
.pi-section__title--script {
	text-transform: none;
}

/* Categories grid */
.pi-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
a.pi-cat-tile,
.pi-cat-grid > a.pi-cat-tile {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 0;
	border-radius: 8px;
	text-decoration: none;
	color: var(--pi-color-text);
	box-shadow: 0 4px 14px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04) !important;
	transition: transform .2s, box-shadow .2s;
}
/* Keep the image rounded inside the card without clipping the card's
   own shadow. */
.pi-cat-tile__media {
	overflow: hidden;
	border-radius: 8px 8px 0 0;
}
a.pi-cat-tile:hover,
.pi-cat-grid > a.pi-cat-tile:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08) !important;
}
.pi-cat-tile__media {
	aspect-ratio: 4 / 3;
	background: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.pi-cat-tile__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .25s;
}
.pi-cat-tile:hover .pi-cat-tile__media img {
	transform: scale(1.04);
}
.pi-cat-tile__media--placeholder {
	background: #fff;
}
.pi-cat-tile__name {
	margin: 0;
	padding: 16px 18px;
	font-size: 14px;
	font-weight: 500;
	text-transform: none;
	line-height: 1.3;
	min-height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

@media (max-width: 1100px) {
	.pi-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
	.pi-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.pi-cat-tile__name { padding: 12px; font-size: 13px; min-height: 56px; }
}
@media (max-width: 420px) {
	.pi-cat-grid { grid-template-columns: 1fr; }
}

/* Brands section — dark bg + arrow-driven slider (matches reference site) */
.pi-section--brands {
	background: #000;
	color: #fff;
	padding: 70px 0;
}
.pi-section--brands .pi-section__title { color: #fff; }

.pi-brands-carousel {
	position: relative;
	padding-bottom: 56px; /* room for arrows */
}
.pi-brands-viewport {
	overflow: hidden;
	/* Desktop: 50px gap between section title and carousel for breathing room. */
	margin: 50px 0 0;
}
@media (max-width: 768px) {
	.pi-brands-viewport { margin-top: 24px; }
}
.pi-brands-track {
	display: flex;
	gap: 24px;
	transition: transform .5s cubic-bezier(.4,0,.2,1);
	will-change: transform;
}
.pi-brand-slide {
	flex: 0 0 calc((100% - 24px * 4) / 5);
	min-width: 0;
	height: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-decoration: none;
	color: #fff;
	transition: transform .2s, opacity .2s;
}
.pi-brand-slide:hover { transform: translateY(-2px); }
.pi-brand-slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: filter .2s;
}
.pi-brand-slide__name {
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	text-align: center;
}
.pi-brands-arrows {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	display: flex;
	gap: 16px;
}
.pi-brands-arrow {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255,255,255,.4);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, border-color .15s, color .15s;
}
.pi-brands-arrow:hover {
	background: var(--pi-color-brand);
	border-color: var(--pi-color-brand);
	color: #fff;
}
@media (max-width: 1100px) {
	.pi-brand-slide { flex-basis: calc((100% - 24px * 3) / 4); }
}
@media (max-width: 768px) {
	.pi-brand-slide { flex-basis: calc((100% - 24px * 2) / 3); height: 90px; }
}
@media (max-width: 540px) {
	/* Show 3 brand logos per view on mobile; let carousel escape the
	   container so the slider is full-bleed across the dark section. */
	.pi-section--brands .pi-container { max-width: none !important; padding-inline: 0 !important; }
	.pi-brands-viewport { padding-inline: 0 !important; margin-inline: 0; overflow: hidden; }
	.pi-brand-slide { flex-basis: calc(100% / 3) !important; height: 70px; padding: 8px 6px; }
	.pi-brands-track { gap: 0 !important; }
	.pi-section--brands .pi-section__title,
	.pi-section--brands .pi-brands-arrows { padding-inline: 16px; }
}

/* Clients grid (legacy) */
.pi-clients-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 16px;
	align-items: center;
}
.pi-client-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	padding: 10px;
}
.pi-client-logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	filter: grayscale(1) opacity(.6);
	transition: filter .2s;
}
.pi-client-logo:hover img {
	filter: none;
}

/* Clients infinite-loop marquee carousel */
.pi-clients-marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
	mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.pi-clients-track {
	display: flex;
	align-items: center;
	gap: 60px;
	width: max-content;
	animation: pi-marquee 30s linear infinite;
}
.pi-clients-marquee:hover .pi-clients-track {
	animation-play-state: paused;
}
.pi-client-slide {
	flex-shrink: 0;
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
}
.pi-client-slide img {
	max-height: 80px;
	max-width: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(.5);
	transition: filter .2s;
}
.pi-client-slide:hover img {
	filter: none;
}
@keyframes pi-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.pi-clients-track {
		animation: none;
	}
}

/* ============================================================
   Generic page banner (category / brand / catalog / static pages)
   ============================================================ */

/* Fabrica's WC integration hides .list_products_header — force it back when
   we render a banner or a category grid inside it. */
.list_products_header:has(.pi-page-banner),
.list_products_header:has(.pi-cat-grid),
.woocommerce-products-header:has(.pi-page-banner),
.woocommerce-products-header:has(.pi-cat-grid) {
	display: block !important;
	width: 100%;
}

.pi-page-banner {
	background-color: #1a1a1a;
	background-size: cover;
	background-position: center;
	color: #fff;
	min-height: 320px;
	display: flex;
	align-items: stretch;
	margin-bottom: 40px;
	position: relative;
	/* Escape any constrained parent container so the banner is true
	   full-bleed across the viewport while inner content stays in the
	   .pi-container width. */
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: 100vw;
}
/* Prevent horizontal overflow caused by the 100vw trick when the
   document has a scrollbar. */
html, body { overflow-x: hidden; }
.pi-page-banner--dark { background-color: #111; }
.pi-page-banner__overlay {
	background: rgba(0,0,0,.5);
	width: 100%;
	display: flex;
	align-items: center;
	padding: 50px 0;
}
.pi-page-banner__inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}
.pi-page-banner__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	color: #fff;
}
.pi-page-banner__subtitle,
.pi-page-banner__description {
	margin: 0;
	font-size: 16px;
	color: rgba(255,255,255,.85);
	line-height: 1.5;
	max-width: 720px;
}
.pi-page-banner__description p { margin: 0 0 8px; }

.pi-breadcrumbs {
	font-size: 13px;
	line-height: 120%;
	color: rgba(255,255,255,.75);
}
.pi-breadcrumbs a {
	color: rgba(255,255,255,.75);
	text-decoration: none;
}
.pi-breadcrumbs a:hover { color: var(--pi-color-brand); }
.pi-breadcrumbs__sep {
	margin: 0 6px;
	opacity: .6;
}

.pi-page-banner__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 16px;
}
.pi-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 24px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: background .15s, transform .15s, color .15s, border-color .15s;
	cursor: pointer;
	line-height: 1.2;
	border: 0;
}
.pi-cta--primary {
	background: var(--pi-color-brand);
	color: #fff;
}
.pi-cta--primary:hover {
	background: #B82308;
	color: #fff;
	transform: translateY(-1px);
}
.pi-cta--secondary {
	background: #111;
	color: #fff;
	border: 1px solid #333;
}
.pi-cta--secondary:hover {
	background: #000;
	border-color: var(--pi-color-brand);
	color: #fff;
	transform: translateY(-1px);
}

@media (max-width: 768px) {
	.pi-page-banner { min-height: 220px; }
	.pi-page-banner__overlay { padding: 32px 0; }
	.pi-cta { padding: 12px 18px; font-size: 13px; }
}

/* Light page header — used on internal singular pages instead of the
   dark banner. Just a row with breadcrumbs and an H1 inside the
   container, no overlay. */
.pi-page-head {
	padding: 32px 0 40px;
	background: transparent;
}
.pi-page-head__title {
	margin: 6px 0 0;
	font-size: clamp(24px, 3vw, 36px);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: var(--pi-color-text);
}

/* On the brand listing pages the trx_addons list is full-bleed; let
   the page-head also span the full width with zero inner padding so
   the heading aligns with the list. */
body.page-id-6914 .pi-page-head .pi-container,
body.page-id-7178 .pi-page-head .pi-container {
	max-width: none;
	padding-inline: 0;
}
body.page-id-6914 .pi-page-head,
body.page-id-7178 .pi-page-head {
	padding-bottom: 48px;
}

/* Constrain the custom A-Z brand listing to the container so it doesn't
   sit flush against the viewport edge (especially noticeable on mobile). */
body.page-id-6914 .brands-a-z-custom,
body.page-id-7178 .brands-a-z-custom {
	max-width: var(--pi-container-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
	box-sizing: border-box;
}

/* Brand archive (taxonomy-product_brand) — hide the duplicated WC term
   description that repeats what's already in the banner subtitle. */
.tax-product_brand .term-description {
	display: none;
}

/* Brand archive on mobile — collapse the gap between the banner and the
   "Показано X-Y із Z" result count to 16px. Desktop keeps the original
   spacing (banner margin-bottom 40px + list_products_header padding 2em).
   The !important is needed to beat the global `.woocommerce-page
   .list_products_header { padding-bottom: 2em !important }` rule lower
   in this file. */
@media (max-width: 760px) {
	html body.tax-product_brand .pi-page-banner {
		margin-bottom: 0;
	}
	html body.tax-product_brand .list_products_header {
		padding-bottom: 16px !important;
	}
}

.pi-page-head__title { padding-left: 0; margin-left: 0; }

/* ALL headings sitewide → bold + uppercase per client request */
.pi-page-head__title,
.pi-page-banner__title,
.pi-section__title,
.pi-footer__heading,
.pi-baked-page h1,
.pi-baked-page h2,
.pi-baked-page h3,
.pi-baked-page h4,
.pi-baked-page h5,
.pi-baked-page h6,
.pi-baked-page .elementor-heading-title,
.woocommerce-page h1.product_title,
.woocommerce h2.woocommerce-loop-product__title,
.entry-title,
.page-title {
	text-transform: uppercase !important;
	font-weight: 800 !important;
	letter-spacing: .01em;
}
.pi-baked-page .elementor-heading-title { font-weight: 800 !important; }

/* ----- Hero (homepage) CTA buttons restyle -----
   trx_sc_button renders <a class="sc_button sc_button_default ...">.
   First in DOM = primary (orange darker), second = secondary (dark
   panel with white border accent). */
.pi-baked-2257 .elementor-section:first-of-type a.sc_button,
.pi-baked-7180 .elementor-section:first-of-type a.sc_button {
	border-radius: 4px !important;
	padding: 16px 28px !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	letter-spacing: .01em !important;
	border: 1px solid transparent !important;
	transition: background .15s, transform .15s, border-color .15s, color .15s !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	line-height: 1.2;
}
.pi-baked-2257 .elementor-section:first-of-type a.sc_button:hover,
.pi-baked-7180 .elementor-section:first-of-type a.sc_button:hover {
	transform: translateY(-1px);
}
/* Primary = first sc_button in the hero. Darker brand red. */
.pi-baked-2257 .elementor-section:first-of-type a.sc_button:not(.header-popup),
.pi-baked-7180 .elementor-section:first-of-type a.sc_button:not(.header-popup) {
	background: #B82308 !important;
	color: #fff !important;
	border-color: #B82308 !important;
}
.pi-baked-2257 .elementor-section:first-of-type a.sc_button:not(.header-popup):hover,
.pi-baked-7180 .elementor-section:first-of-type a.sc_button:not(.header-popup):hover {
	background: #971b06 !important;
	border-color: #971b06 !important;
	color: #fff !important;
}
/* Secondary = the one with .header-popup class (opens the form modal).
   Dark panel, white text, brand-orange border on hover. */
.pi-baked-2257 .elementor-section:first-of-type a.sc_button.header-popup,
.pi-baked-7180 .elementor-section:first-of-type a.sc_button.header-popup {
	background: #111 !important;
	color: #fff !important;
	border-color: #2a2a2a !important;
}
.pi-baked-2257 .elementor-section:first-of-type a.sc_button.header-popup:hover,
.pi-baked-7180 .elementor-section:first-of-type a.sc_button.header-popup:hover {
	background: #000 !important;
	border-color: var(--pi-color-brand) !important;
	color: #fff !important;
}

/* ----- Hero section: tighten heading→text gap, reduce internal padding ----- */
.pi-baked-2257 > .elementor > .elementor-section:first-of-type,
.pi-baked-7180 > .elementor > .elementor-section:first-of-type {
	padding-top: 50px !important;
	padding-bottom: 50px !important;
}
.pi-baked-2257 .elementor-section:first-of-type .elementor-widget-heading,
.pi-baked-7180 .elementor-section:first-of-type .elementor-widget-heading {
	margin-bottom: 2px !important;
}
.pi-baked-2257 .elementor-section:first-of-type .elementor-widget-heading + *,
.pi-baked-7180 .elementor-section:first-of-type .elementor-widget-heading + * {
	margin-top: 0 !important;
}
.pi-baked-2257 .elementor-section:first-of-type .elementor-widget-spacer,
.pi-baked-7180 .elementor-section:first-of-type .elementor-widget-spacer {
	display: none !important;
}
.pi-baked-2257 .elementor-section:first-of-type .elementor-widget-text-editor,
.pi-baked-7180 .elementor-section:first-of-type .elementor-widget-text-editor {
	margin-bottom: 16px !important;
	margin-top: 0 !important;
}

/* ----- About / Trust sections (with image) — collapse cavernous columns ----- */
.pi-baked-2257 .elementor-section .elementor-column .elementor-element-populated,
.pi-baked-7180 .elementor-section .elementor-column .elementor-element-populated {
	padding: 0 !important;
}
.pi-baked-2257 .elementor-widget-image,
.pi-baked-7180 .elementor-widget-image {
	margin-bottom: 0 !important;
}
.pi-baked-2257 .elementor-widget-image img,
.pi-baked-7180 .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* ----- Process steps (як ми працюємо) — tighten ----- */
.pi-baked-2257 .elementor-widget-heading + .elementor-widget-divider,
.pi-baked-2257 .elementor-widget-divider + .elementor-widget-heading,
.pi-baked-7180 .elementor-widget-heading + .elementor-widget-divider,
.pi-baked-7180 .elementor-widget-divider + .elementor-widget-heading {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ----- Heading-only sections (Pro nas / Nam doviraut on homepage):
   collapse vertically so they hug the next content section.
   Detection: section has a heading widget but no image, text-editor,
   button, divider, or trx_sc_* widget. Desktop only — on mobile the
   heading sits flush against the image column below it (overridden in
   the mobile block at the end of this file). */
@media (min-width: 769px) {
	.pi-baked-2257 .elementor-section.elementor-top-section:has(.elementor-widget-heading):not(:has(.elementor-widget-image)):not(:has(.elementor-widget-text-editor)):not(:has(.elementor-widget-button)):not(:has(.elementor-widget-trx_sc_icons)):not(:has(.elementor-widget-divider)):not(:has(.elementor-widget-trx_sc_button)),
	.pi-baked-7180 .elementor-section.elementor-top-section:has(.elementor-widget-heading):not(:has(.elementor-widget-image)):not(:has(.elementor-widget-text-editor)):not(:has(.elementor-widget-button)):not(:has(.elementor-widget-trx_sc_icons)):not(:has(.elementor-widget-divider)):not(:has(.elementor-widget-trx_sc_button)) {
		padding-top: 16px !important;
		padding-bottom: 0 !important;
	}
}
/* Scope the 60px desktop gap to ONLY the homepage two-column sections
   that follow a heading-only section. The about-us page has a different
   layout that doesn't need this extra padding. */
@media (min-width: 1024px) {
	.pi-baked-2257 .elementor-section.elementor-top-section:has(.elementor-widget-heading):not(:has(.elementor-widget-image)):not(:has(.elementor-widget-text-editor)):not(:has(.elementor-widget-button)):not(:has(.elementor-widget-trx_sc_icons)):not(:has(.elementor-widget-divider)):not(:has(.elementor-widget-trx_sc_button)) + .elementor-section.elementor-top-section,
	.pi-baked-7180 .elementor-section.elementor-top-section:has(.elementor-widget-heading):not(:has(.elementor-widget-image)):not(:has(.elementor-widget-text-editor)):not(:has(.elementor-widget-button)):not(:has(.elementor-widget-trx_sc_icons)):not(:has(.elementor-widget-divider)):not(:has(.elementor-widget-trx_sc_button)) + .elementor-section.elementor-top-section {
		padding-top: 20px !important;
	}
}

/* Kill the fadeinup animation on the homepage advantages section icons
   so they render statically (no entrance animation). */
.pi-baked-2257 .sc_icons_columns_wrap .sc_icons_item,
.pi-baked-7180 .sc_icons_columns_wrap .sc_icons_item,
.pi-baked-2257 .sc_icons_columns_wrap .sc_icons_item.fabrica-fadeinup,
.pi-baked-7180 .sc_icons_columns_wrap .sc_icons_item.fabrica-fadeinup,
.pi-baked-2257 .sc_icons_columns_wrap .sc_icons_item.animated,
.pi-baked-7180 .sc_icons_columns_wrap .sc_icons_item.animated {
	animation: none !important;
	transition: none !important;
	opacity: 1 !important;
	transform: none !important;
}

/* Force images in homepage about/clients sections to render at full column width.
   Also override visibility:hidden that Fabrica/Elementor lazy-load applies
   waiting for JS init that never fires now that Elementor is uninstalled. */
.pi-baked-2257 .elementor-widget-image .elementor-image,
.pi-baked-7180 .elementor-widget-image .elementor-image,
.pi-baked-2257 .elementor-widget-image img,
.pi-baked-7180 .elementor-widget-image img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	visibility: visible !important;
	opacity: 1 !important;
}
/* Global rule: any image inside baked content must be visible — kill any
   leftover lazy-load styles from removed plugins. */
.pi-baked-page img {
	visibility: visible !important;
	opacity: 1 !important;
}
.pi-baked-page .elementor-invisible {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
}

/* ----- Submenus: remove top/bottom inner padding so the highlighted item
   reaches the trigger edge without a gap (user complaint: extra padding) - */
.pi-menu .sub-menu,
.pi-menu .sub-menu .sub-menu {
	padding: 0 !important;
}
.pi-menu .sub-menu a {
	padding: 12px 18px !important;
}

/* About-us — kill the first section entirely if it only contains a spacer
   (baked Elementor leaves an empty 116px "decorative" row). */
.pi-baked-621 > .elementor > .elementor-section:first-of-type,
.pi-baked-7184 > .elementor > .elementor-section:first-of-type {
	display: none !important;
}
.pi-page-head + * .elementor-section.elementor-top-section:first-of-type {
	padding-top: 0 !important;
}

/* Contacts page: lift the "Наші контакти" heading so it sits flush with
   the top of the form's Ім'я field. The trx_addons layout places a
   spacer widget BEFORE the title — collapse that spacer to zero. */
.pi-baked-713 .elementor-column .elementor-element-populated,
.pi-baked-7183 .elementor-column .elementor-element-populated {
	padding-top: 0 !important;
}
.pi-baked-713 .elementor-widget-spacer:first-child,
.pi-baked-713 .elementor-widget-spacer:first-child .elementor-spacer-inner,
.pi-baked-7183 .elementor-widget-spacer:first-child,
.pi-baked-7183 .elementor-widget-spacer:first-child .elementor-spacer-inner {
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}
.pi-baked-713 .elementor-widget-spacer:first-child {
	display: none !important;
}
.pi-baked-7183 .elementor-widget-spacer:first-child {
	display: none !important;
}

/* Contacts page: rebuilt list (replaces trx_sc_icons widget) */
.pi-cinfo-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.pi-cinfo-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--pi-color-text);
}
.pi-cinfo__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--pi-color-brand);
}
.pi-cinfo__link {
	color: var(--pi-color-text);
	text-decoration: none;
	font-weight: 600;
	transition: color .15s;
}
.pi-cinfo__link:hover { color: var(--pi-color-brand); }

/* Contacts page — tighten the spacer above the social icons by half */
.pi-baked-713 .elementor-widget-trx_sc_socials,
.pi-baked-7183 .elementor-widget-trx_sc_socials {
	margin-top: 8px !important;
}
.pi-baked-713 .elementor-widget-spacer + .elementor-widget-trx_sc_socials,
.pi-baked-7183 .elementor-widget-spacer + .elementor-widget-trx_sc_socials {
	margin-top: 0 !important;
}
.pi-baked-713 .elementor-widget-trx_sc_socials + .elementor-widget-spacer .elementor-spacer-inner,
.pi-baked-7183 .elementor-widget-trx_sc_socials + .elementor-widget-spacer .elementor-spacer-inner,
.pi-baked-713 .pi-cinfo-list + .elementor-widget-spacer .elementor-spacer-inner,
.pi-baked-7183 .pi-cinfo-list + .elementor-widget-spacer .elementor-spacer-inner {
	height: 4px !important;
}
.pi-breadcrumbs--light {
	color: var(--pi-color-text-muted);
	font-size: 13px;
}
.pi-breadcrumbs--light a {
	color: var(--pi-color-text-muted);
}
.pi-breadcrumbs--light a:hover {
	color: var(--pi-color-brand);
}
.pi-breadcrumbs--light .pi-breadcrumbs__sep {
	color: var(--pi-color-text-muted);
	opacity: .8;
}

/* Static page content: tighten the giant elementor padding only for
   non-home baked pages (about, contacts) and constrain to container. */
.pi-baked-page:not(.pi-baked-2257):not(.pi-baked-7180) .elementor-section.elementor-top-section {
	padding-top: 18px !important;
	padding-bottom: 18px !important;
}
.pi-baked-page:not(.pi-baked-2257):not(.pi-baked-7180) .elementor-section:first-of-type {
	padding-top: 18px !important;
}

/* ============================================================
   CF7 popup modal
   ============================================================ */

.pi-popup {
	position: fixed;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 300;
	padding: 16px;
}
body.pi-popup-open .pi-popup--active {
	display: flex;
}
.pi-popup__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.6);
}
.pi-popup__panel {
	position: relative;
	background: #fff;
	border-radius: 8px;
	max-width: 480px;
	width: 100%;
	padding: 32px;
	max-height: 90vh;
	overflow-y: auto;
}
.pi-popup__close {
	position: absolute;
	top: 12px;
	right: 16px;
	background: transparent;
	border: 0;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	color: #555;
}
.pi-popup__close:hover {
	color: var(--pi-color-brand);
}

/* ============================================================
   MOBILE / PHONE FIXES — collapse multi-column baked Elementor
   grids to one column so headings don't break mid-word, ensure
   readable section padding, and tighten dynamic blocks.
   ============================================================ */
@media (max-width: 760px) {
	/* trx_addons columns of any kind → full width on phone */
	.pi-baked-page .trx_addons_columns_wrap > [class*="trx_addons_column-"],
	.pi-baked-page .elementor-row .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
	}
	/* Force elementor-column .elementor-element-populated padding sane */
	.pi-baked-page .elementor-column .elementor-element-populated {
		padding: 24px !important;
	}
	/* Headings: keep uppercase+bold but never break mid-word, scale down */
	.pi-baked-page h1,
	.pi-baked-page h2,
	.pi-baked-page h3,
	.pi-baked-page h4,
	.pi-baked-page h5,
	.pi-baked-page h6,
	.pi-baked-page .elementor-heading-title {
		word-break: keep-all !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
	}
	.pi-baked-page h4.sc_icons_item_title { font-size: 16px !important; line-height: 1.3 !important; }
	.pi-baked-page h1, .pi-baked-page .elementor-heading-title.elementor-size-xl { font-size: 28px !important; line-height: 1.15 !important; }
	.pi-baked-page h2 { font-size: 24px !important; line-height: 1.2 !important; }
	.pi-baked-page h3 { font-size: 20px !important; line-height: 1.25 !important; }
	.pi-baked-page h4 { font-size: 18px !important; line-height: 1.3 !important; }
	.pi-baked-page h6 { font-size: 13px !important; line-height: 1.35 !important; }

	/* Section vertical padding — clamp for mobile breathing room */
	.pi-baked-page .elementor-section.elementor-top-section {
		padding-top: 36px !important;
		padding-bottom: 36px !important;
	}
	.pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-9fe3651,
	.pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-9fe3651 {
		margin-top: 48px !important;
		padding: 32px 0 !important;
	}
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-9fe3651 .elementor-element-populated,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-9fe3651 .elementor-element-populated {
		padding: 24px !important;
	}

	/* Hero CTAs: full width stacked, never wrap text mid-button. */
	.pi-baked-2257 .elementor-section:first-of-type a.sc_button,
	.pi-baked-7180 .elementor-section:first-of-type a.sc_button,
	.pi-baked-2257 .elementor-section:first-of-type a.sc_button span,
	.pi-baked-7180 .elementor-section:first-of-type a.sc_button span {
		white-space: nowrap !important;
	}
	.pi-baked-2257 .elementor-section:first-of-type a.sc_button,
	.pi-baked-7180 .elementor-section:first-of-type a.sc_button {
		width: 100%;
		text-align: center;
		font-size: 13px !important;
		padding: 14px 12px !important;
	}
	/* Hero — section uses only container padding (no extra section pad on
	   sides), and the gap between text and first CTA is halved. */
	.pi-baked-2257 .elementor-section:first-of-type,
	.pi-baked-7180 .elementor-section:first-of-type {
		padding: 32px 0 !important;
	}
	.pi-baked-2257 .elementor-section:first-of-type .elementor-element-populated,
	.pi-baked-7180 .elementor-section:first-of-type .elementor-element-populated {
		padding: 0 16px !important;
	}
	/* Halve top gap before the CTA cluster */
	.pi-baked-2257 .elementor-section:first-of-type .elementor-element:has(a.sc_button) .elementor-widget-container,
	.pi-baked-7180 .elementor-section:first-of-type .elementor-element:has(a.sc_button) .elementor-widget-container {
		margin-top: 8px !important;
	}
	.pi-baked-2257 .elementor-section:first-of-type .elementor-element:has(a.sc_button),
	.pi-baked-7180 .elementor-section:first-of-type .elementor-element:has(a.sc_button) {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	/* ---- ПЕРЕВАГИ: bigger section heading, horizontal cards ---- */
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item {
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		gap: 16px;
		min-height: 0 !important;
		height: auto !important;
		padding: 12px 0 !important;
		text-align: left !important;
		background: transparent !important;
	}
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item:hover {
		transform: none !important;
		background: transparent !important;
	}
	/* Icon size = 2.6em — applied once on the wrapper; the inner icon-font
	   span inherits font-size and renders at 1em so it doesn't compound. */
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_icon {
		font-size: 2.6em !important;
		line-height: 1 !important;
		width: 1em !important;
		height: 1em !important;
		min-width: 1em !important;
		flex: 0 0 1em !important;
		margin: 0 !important;
		align-self: center;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
	}
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_icon > span {
		font-size: 1em !important;
		line-height: 1 !important;
		display: inline-block !important;
		width: 1em !important;
		height: 1em !important;
	}
	/* trx_addons specifically sets the icon ::before to 4.6em via the
	   .sc_icons_accent2.sc_icons_size_large rule — pin it to 1em on mobile. */
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_icon::before,
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_icon > span::before,
	.pi-baked-page .sc_icons.sc_icons_accent2.sc_icons_size_large .sc_icons_icon::before,
	.pi-baked-page .sc_icons.sc_icons_accent2.sc_icons_size_large .sc_icons_icon > span::before {
		font-size: 1em !important;
		line-height: 1 !important;
		width: 1em !important;
		height: 1em !important;
	}
	/* Drop the leftover spacing that pushes the title away from the icon. */
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item_details {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
	/* Hide empty descriptive blocks/links left by the baked HTML — only
	   the title remains beside the icon. */
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item_description:empty,
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item_details p:empty,
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item_details a:empty,
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item_details br,
	.pi-baked-page .sc_icons_columns_wrap a.sc_icons_item_link {
		display: none !important;
	}
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item_title a {
		color: inherit !important;
		text-decoration: none !important;
	}
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_icon img,
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_icon svg {
		width: 1em !important;
		height: 1em !important;
		object-fit: contain;
	}
	/* Vertically center the title beside the icon. */
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item {
		align-items: center !important;
	}
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item_details {
		align-self: center;
	}
	.pi-baked-page .sc_icons_columns_wrap .sc_icons_item_details {
		flex: 1 1 auto;
		min-width: 0;
	}
	.pi-baked-page h4.sc_icons_item_title {
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		margin: 0 !important;
		text-transform: uppercase;
	}
	/* Container width — overriding earlier rule that forced trx_addons_column-* to 100% (good) */

	/* Section titles in baked content take the same treatment as our
	   native .pi-section__title — proper, container-sized headings. */
	html body .pi-baked-page .elementor-widget-heading h1,
	html body .pi-baked-page .elementor-widget-heading h2,
	html body .pi-baked-page .elementor-widget-heading h3,
	html body .pi-baked-page .sc_item_title .sc_item_title_text,
	html body .pi-baked-page .sc_title_title,
	html body .pi-baked-page h1.sc_item_title .sc_item_title_text,
	html body .pi-baked-page h2.sc_item_title .sc_item_title_text {
		font-size: 24px !important;
		line-height: 1.15 !important;
		font-weight: 800 !important;
		text-transform: uppercase !important;
		letter-spacing: .01em !important;
	}

	/* ---- CATEGORIES: 2-up grid, weight 500, default case, 13px ---- */
	.pi-cat-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
	.pi-cat-tile { padding: 8px !important; }
	html body .pi-cat-tile h3.pi-cat-tile__name,
	html body .pi-cat-grid h3.pi-cat-tile__name,
	html body .pi-baked-page .pi-cat-tile__name,
	html body .pi-cat-tile__name {
		font-size: 13px !important;
		font-weight: 500 !important;
		line-height: 1.25 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		padding: 8px 4px !important;
	}
	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
	.products .product-title {
		font-size: 13px !important;
		font-weight: 500 !important;
		text-transform: none !important;
	}

	/* ---- ABOUT US section: full-bleed image, smaller text, full-width CTA ---- */
	.pi-baked-2257 .elementor-widget-image img,
	.pi-baked-7180 .elementor-widget-image img {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		height: auto !important;
		display: block;
	}
	.pi-baked-page .elementor-widget-text-editor,
	.pi-baked-page .elementor-widget-text-editor p,
	.pi-baked-page .elementor-widget-text-editor li,
	.pi-baked-page .elementor-widget-icon-list li,
	.pi-baked-page .elementor-icon-list-text {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}
	/* Wrappers around baked sc_button → expand so the button can fill width. */
	.pi-baked-page .sc_item_button,
	.pi-baked-page .sc_button_wrap {
		display: block !important;
		width: 100% !important;
	}
	/* Generic baked button → full width on mobile, secondary look (matches hero secondary). */
	.pi-baked-page a.sc_button {
		width: 100%;
		text-align: center;
		display: block !important;
		background: #111 !important;
		color: #fff !important;
		border: 1px solid #333 !important;
		border-radius: 4px !important;
		padding: 14px 18px !important;
		font-weight: 600 !important;
		font-size: 14px !important;
		text-decoration: none !important;
		white-space: nowrap !important;
	}
	/* Hero primary button keeps brand-red */
	.pi-baked-2257 .elementor-section:first-of-type a.sc_button:not(.header-popup),
	.pi-baked-7180 .elementor-section:first-of-type a.sc_button:not(.header-popup) {
		background: #B82308 !important;
		border-color: #B82308 !important;
	}

	/* ---- HALVE GAP after the clients section ---- */
	.pi-baked-page .elementor-section.elementor-top-section + .elementor-section.elementor-top-section {
		margin-top: 0 !important;
	}

	/* ---- PROCESS SECTION (9fe3651) — per latest spec:
	   no margins, 30px vertical padding on the section, 30px inner padding
	   on the white populated wrap (no extra horizontal offset). ---- */
	.pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-9fe3651,
	.pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-9fe3651 {
		margin: 0 !important;
		padding: 30px 0 !important;
	}
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-9fe3651 .elementor-element-populated,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-9fe3651 .elementor-element-populated {
		padding: 30px !important;
	}
	.pi-baked-page.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget-heading,
	.pi-baked-page.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget-heading {
		padding-bottom: 10px !important;
		margin-bottom: 10px !important;
	}
	.pi-baked-page.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget-heading + .elementor-widget-heading,
	.pi-baked-page.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget-heading + .elementor-widget-heading {
		margin-top: 8px !important;
	}

	/* Process steps: tighter borders */
	.pi-baked-page.pi-baked-2257 .elementor-element-9fe3651 .elementor-widget-heading,
	.pi-baked-page.pi-baked-7180 .elementor-element-9fe3651 .elementor-widget-heading {
		padding-bottom: 12px !important;
		margin-bottom: 12px !important;
	}

	/* Dynamic categories grid (from inc/homepage-sections.php) → 1 col */
	.pi-cats-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
	/* Brands carousel: ensure arrows visible inside viewport */
	.pi-brands-viewport { padding-inline: 32px; }
	/* Clients marquee: scale logos down */
	.pi-clients-track img { max-height: 56px !important; }

	/* Container padding tighten */
	.pi-container { padding-inline: 16px !important; }

	/* Hide elementor lazy-load animated placeholders that may still hold space */
	.pi-baked-page .elementor-invisible { visibility: visible !important; opacity: 1 !important; }

	/* Neutralize absolute-positioned overlays from baked Elementor sections —
	   on mobile they collide (e.g. the big "2004" year over the team image
	   on About). Reset everything to flow, and let inline-positioned widgets
	   stack naturally. */
	.pi-baked-page .elementor-widget-wrap > .elementor-widget[style*="position:absolute"],
	.pi-baked-page .elementor-widget-wrap > .elementor-widget[style*="position: absolute"],
	.pi-baked-page .elementor-element[style*="position:absolute"],
	.pi-baked-page .elementor-element[style*="position: absolute"] {
		position: static !important;
		inset: auto !important;
		transform: none !important;
		margin: 16px 0 !important;
	}
	/* Generic anchor for any element absolutely-positioned via class
	   "elementor-absolute" (Elementor's positioning helper). */
	.pi-baked-page .elementor-absolute {
		position: static !important;
		inset: auto !important;
	}
	/* The "2004" year heading on About is typically wrapped in a large
	   heading with absolute position; drop its overlap. */
	.pi-baked-page .elementor-widget-heading.elementor-absolute,
	.pi-baked-page .elementor-widget.elementor-widget-heading[style*="position"] {
		position: static !important;
		text-align: center !important;
	}

	/* CF7 + trx_addons column-based forms → stack on mobile so phone input
	   isn't truncated. Covers .column-1_2, .column-1_3 etc. */
	.wpcf7-form .columns_wrap > [class*="column-"],
	.wpcf7-form .columns_wrap > .column-1_2,
	.wpcf7-form .columns_wrap > .column-1_3 {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		float: none !important;
	}
	.wpcf7-form input,
	.wpcf7-form textarea,
	.wpcf7-form select {
		width: 100% !important;
		box-sizing: border-box;
	}
}

/* Very small phones — extra tightening */
@media (max-width: 420px) {
	.pi-baked-page h1, .pi-baked-page .elementor-heading-title.elementor-size-xl { font-size: 24px !important; }
	/* Keep h2 at 24px so baked section titles match the native
	   .pi-section__title sizing on phones. */
	.pi-baked-page h2 { font-size: 24px !important; }
	.pi-baked-page h3 { font-size: 18px !important; }
	.pi-baked-page .elementor-column .elementor-element-populated { padding: 18px !important; }
}

/* ============================================================
   ABOUT US PAGE (page-id-621 UA / page-id-7183 RU) tweaks
   ============================================================ */

/* 1) Mobile: pull "2004" out of Elementor's absolute layer so it flows
   inline at the top of the column. Desktop: re-anchor it as the
   top-left overlay of the photo composite (see Composite below). */
body.page-id-621 .elementor-widget-trx_sc_skills,
body.page-id-7183 .elementor-widget-trx_sc_skills {
	position: static !important;
	inset: auto !important;
	transform: none !important;
	margin-bottom: 16px !important;
	text-align: left !important;
}
body.page-id-621 .elementor-widget-trx_sc_skills .sc_skills_total,
body.page-id-7183 .elementor-widget-trx_sc_skills .sc_skills_total,
body.page-id-621 .elementor-widget-trx_sc_skills .sc_skills,
body.page-id-7183 .elementor-widget-trx_sc_skills .sc_skills {
	text-align: left !important;
	margin-left: 0 !important;
}

/* === Desktop only: two-square overlapping photo composite ===
   - Left column becomes positioning context.
   - 9973e97 (metal pipes) → top-left square.
   - 2e89089 (workers)     → bottom-right square (overlapping ~30%).
   - 2004 skill widget     → absolute top-left of composite. */
@media (min-width: 1024px) {
	body.page-id-621 .elementor-col-50:first-child > .elementor-element-populated,
	body.page-id-7183 .elementor-col-50:first-child > .elementor-element-populated {
		position: relative;
		min-height: 540px;
		padding: 0 !important;
	}
	/* Break the inner Elementor section / inner column / inner populated
	   wrap out of being a positioning context, so absolutely-positioned
	   image widgets reference the OUTER populated (580px) instead of the
	   tiny inner column (110px). */
	body.page-id-621 .elementor-col-50:first-child .elementor-inner-section,
	body.page-id-7183 .elementor-col-50:first-child .elementor-inner-section,
	body.page-id-621 .elementor-col-50:first-child .elementor-inner-section .elementor-container,
	body.page-id-7183 .elementor-col-50:first-child .elementor-inner-section .elementor-container,
	body.page-id-621 .elementor-col-50:first-child .elementor-inner-column,
	body.page-id-7183 .elementor-col-50:first-child .elementor-inner-column,
	body.page-id-621 .elementor-col-50:first-child .elementor-inner-column > .elementor-element-populated,
	body.page-id-7183 .elementor-col-50:first-child .elementor-inner-column > .elementor-element-populated {
		position: static !important;
	}
	body.page-id-621 .elementor-col-50:first-child .elementor-widget-spacer,
	body.page-id-7183 .elementor-col-50:first-child .elementor-widget-spacer {
		display: none !important;
	}
	body.page-id-621 .elementor-element.elementor-element-88ed40f,
	body.page-id-7183 .elementor-element.elementor-element-88ed40f {
		position: absolute !important;
		bottom: 8px !important;
		left: 8px !important;
		top: auto !important;
		z-index: 4 !important;
		margin: 0 !important;
		width: auto !important;
	}
	body.page-id-621 .elementor-element.elementor-element-9973e97,
	body.page-id-7183 .elementor-element.elementor-element-9973e97 {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		width: 62% !important;
		aspect-ratio: 1 / 1 !important;
		z-index: 1 !important;
		margin: 0 !important;
	}
	body.page-id-621 .elementor-element.elementor-element-2e89089,
	body.page-id-7183 .elementor-element.elementor-element-2e89089 {
		position: absolute !important;
		bottom: 0 !important;
		right: 0 !important;
		width: 62% !important;
		aspect-ratio: 1 / 1 !important;
		z-index: 2 !important;
		margin: 0 !important;
		box-shadow: -16px -16px 0 #fff;
	}
	body.page-id-621 .elementor-element-9973e97 > .elementor-widget-container,
	body.page-id-7183 .elementor-element-9973e97 > .elementor-widget-container,
	body.page-id-621 .elementor-element-2e89089 > .elementor-widget-container,
	body.page-id-7183 .elementor-element-2e89089 > .elementor-widget-container {
		width: 100% !important;
		height: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}
	body.page-id-621 .elementor-element-9973e97 img,
	body.page-id-7183 .elementor-element-9973e97 img,
	body.page-id-621 .elementor-element-2e89089 img,
	body.page-id-7183 .elementor-element-2e89089 img {
		width: 100% !important;
		height: 100% !important;
		max-height: none !important;
		aspect-ratio: 1 / 1 !important;
		object-fit: cover !important;
		display: block;
	}
}
/* The odometer-style counter never animates (Elementor JS is gone)
   and renders broken digit placeholders. Hide the digit machinery
   entirely and surface the target year via the data-stop attribute. */
body.page-id-621 .sc_skills_total .sc_skills_digits,
body.page-id-7183 .sc_skills_total .sc_skills_digits {
	display: none !important;
}
body.page-id-621 .sc_skills_total::before,
body.page-id-7183 .sc_skills_total::before {
	content: attr(data-stop);
}

/* 2) Hide the small "Про нас / О нас" subtitle above the main heading. */
body.page-id-621 .sc_item_subtitle.sc_title_subtitle,
body.page-id-7183 .sc_item_subtitle.sc_title_subtitle {
	display: none !important;
}

/* 3) Reduce the main h1 to an h2-sized heading visually. */
body.page-id-621 h1.sc_item_title.sc_title_title,
body.page-id-7183 h1.sc_item_title.sc_title_title {
	font-size: clamp(24px, 3vw, 32px) !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	text-transform: uppercase !important;
	margin: 0 0 16px !important;
}

/* 4) Hide the working-hours text editor (0ddb953) on About — hours now
   live in the footer contacts column. */
body.page-id-621 .elementor-element-0ddb953,
body.page-id-7183 .elementor-element-0ddb953 {
	display: none !important;
}

/* Tighten the gap between the "ПРО НАС" h1 and the photo composite —
   was ~85px (40 head pb + 18 sec pt + line-height), aim for ~28px. */
body.page-id-621 .pi-page-head,
body.page-id-7183 .pi-page-head {
	padding-bottom: 8px !important;
}
html body.page-id-621 .pi-baked-page.pi-baked-621 .elementor-621 .elementor-section.elementor-top-section.elementor-element.elementor-element-0b6d634,
html body.page-id-7183 .pi-baked-page.pi-baked-7183 .elementor-7183 .elementor-section.elementor-top-section.elementor-element.elementor-element-0b6d634 {
	padding-top: 0 !important;
}

/* About page: paragraph section b08227f has Elementor inline padding
   AND the .pi-baked-page:not(2257):not(7180) baseline sets longhand
   18px padding-top/bottom !important — chain enough classes to beat
   both with the same longhand props. */
html body.page-id-621 .pi-baked-page.pi-baked-621 .elementor-621 .elementor-section.elementor-top-section.elementor-element.elementor-element-b08227f,
html body.page-id-7183 .pi-baked-page.pi-baked-7183 .elementor-7183 .elementor-section.elementor-top-section.elementor-element.elementor-element-b08227f {
	padding-top: 0 !important;
	padding-right: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
}
body.page-id-621 .sc_item_descr,
body.page-id-7183 .sc_item_descr,
body.page-id-621 .sc_item_descr p,
body.page-id-7183 .sc_item_descr p {
	color: var(--pi-color-text) !important;
}
@media (max-width: 1023px) {
	body.page-id-621 .sc_item_descr,
	body.page-id-7183 .sc_item_descr,
	body.page-id-621 .sc_item_descr p,
	body.page-id-7183 .sc_item_descr p {
		font-size: 13px !important;
		line-height: 150% !important;
	}
}
/* Force any remaining baked text on About to use the standard color
   instead of the leftover trx_addons dark-blue rgb(24,29,78). */
body.page-id-621 .pi-baked-page .elementor-widget-text-editor,
body.page-id-7183 .pi-baked-page .elementor-widget-text-editor,
body.page-id-621 .pi-baked-page .elementor-widget-text-editor *,
body.page-id-7183 .pi-baked-page .elementor-widget-text-editor * {
	color: var(--pi-color-text) !important;
}

/* 5) Vertically center the elements inside any populated column on
   about so the description sits next to the image instead of pinning
   to the top. */
body.page-id-621 .pi-baked-page .elementor-widget-wrap.elementor-element-populated,
body.page-id-7183 .pi-baked-page .elementor-widget-wrap.elementor-element-populated {
	justify-content: center !important;
}


/* === Mobile only: simplified About hero === */
@media (max-width: 1023px) {
	/* Hide the metal pipes image and the "2004" skill widget on mobile —
	   leave only the workers photo. */
	body.page-id-621 .elementor-element-9973e97,
	body.page-id-7183 .elementor-element-9973e97,
	body.page-id-621 .elementor-element-88ed40f,
	body.page-id-7183 .elementor-element-88ed40f {
		display: none !important;
	}
	/* Elementor inline-CSS sets margin: -50% 0% 0% 35% on the inner
	   column's populated wrap to create a desktop overlap. Kill it on
	   mobile so the workers image flows naturally below the page-head. */
	body.page-id-621 .elementor-element.elementor-element-103071f > .elementor-element-populated,
	body.page-id-7183 .elementor-element.elementor-element-103071f > .elementor-element-populated {
		margin: 0 !important;
	}
	/* Reset every ancestor between the image and the body so width:100vw
	   actually aligns with the viewport (parent containers were inner-cols
	   sitting at an inner offset, which threw off the full-bleed math). */
	body.page-id-621 .elementor-col-50:first-child .elementor-inner-section,
	body.page-id-7183 .elementor-col-50:first-child .elementor-inner-section,
	body.page-id-621 .elementor-col-50:first-child .elementor-inner-section > .elementor-container,
	body.page-id-7183 .elementor-col-50:first-child .elementor-inner-section > .elementor-container,
	body.page-id-621 .elementor-col-50:first-child .elementor-inner-column,
	body.page-id-7183 .elementor-col-50:first-child .elementor-inner-column,
	body.page-id-621 .elementor-col-50:first-child .elementor-inner-column > .elementor-element-populated,
	body.page-id-7183 .elementor-col-50:first-child .elementor-inner-column > .elementor-element-populated {
		width: 100vw !important;
		max-width: 100vw !important;
		margin-left: calc(50% - 50vw) !important;
		margin-right: calc(50% - 50vw) !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Workers image: takes the full bleed of its (now-100vw) parent. */
	body.page-id-621 .elementor-element-2e89089,
	body.page-id-7183 .elementor-element-2e89089 {
		position: static !important;
		left: auto !important;
		right: auto !important;
		margin: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	body.page-id-621 .elementor-element-2e89089 > .elementor-widget-container,
	body.page-id-7183 .elementor-element-2e89089 > .elementor-widget-container {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}
	body.page-id-621 .elementor-element-2e89089 img,
	body.page-id-7183 .elementor-element-2e89089 img {
		width: 100% !important;
		height: 100vw !important;
		aspect-ratio: 1 / 1 !important;
		object-fit: cover !important;
		max-height: none !important;
		display: block;
	}
	/* Kill the spacer widgets above/below the photo on mobile so the
	   image hugs the page-head and the heading. */
	body.page-id-621 .elementor-col-50:first-child .elementor-widget-spacer,
	body.page-id-7183 .elementor-col-50:first-child .elementor-widget-spacer {
		display: none !important;
	}
	/* Remove the gap between the page-head and the first content section
	   on the About page. */
	body.page-id-621 .pi-page-head,
	body.page-id-7183 .pi-page-head {
		padding-bottom: 8px !important;
	}
	body.page-id-621 .pi-baked-page .elementor-section.elementor-top-section:first-of-type,
	body.page-id-7183 .pi-baked-page .elementor-section.elementor-top-section:first-of-type {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}
	/* Content uses full container width (drop extra inner padding from
	   the inner column populated wraps on About). */
	body.page-id-621 .pi-baked-page .elementor-element-populated,
	body.page-id-7183 .pi-baked-page .elementor-element-populated {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* All body text on About mobile: 13px / 1.5. */
	body.page-id-621 .pi-baked-page,
	body.page-id-7183 .pi-baked-page,
	body.page-id-621 .pi-baked-page p,
	body.page-id-7183 .pi-baked-page p,
	body.page-id-621 .pi-baked-page li,
	body.page-id-7183 .pi-baked-page li,
	body.page-id-621 .pi-baked-page .elementor-widget-text-editor,
	body.page-id-7183 .pi-baked-page .elementor-widget-text-editor,
	body.page-id-621 .pi-baked-page .elementor-widget-text-editor p,
	body.page-id-7183 .pi-baked-page .elementor-widget-text-editor p,
	body.page-id-621 .pi-baked-page .sc_item_descr,
	body.page-id-7183 .pi-baked-page .sc_item_descr,
	body.page-id-621 .pi-baked-page .sc_item_descr p,
	body.page-id-7183 .pi-baked-page .sc_item_descr p {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}
}

/* ============================================================
   SITEWIDE CTA RECOLOR — brand orange #DB2B0E was used as button
   background; user wants buttons in dark red #B82308 instead, while
   icons and text accents keep the original orange. Override the
   common button selectors here. The brand orange variable stays
   intact for non-button accents (icons, links, dividers).
   ============================================================ */
.pi-cta--primary,
.pi-header__search-panel button,
input[type="submit"].wpcf7-submit,
button.wpcf7-submit,
.wpcf7-submit,
.pi-baked-page a.sc_button:not(.header-popup):not([href*="popup"]),
.pi-baked-page button.sc_button,
.elementor-button-wrapper .elementor-button,
.products .button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: #B82308 !important;
	background-color: #B82308 !important;
	border-color: #B82308 !important;
	color: #fff !important;
}
.pi-cta--primary:hover,
.pi-header__search-panel button:hover,
.pi-baked-page a.sc_button:not(.header-popup):hover,
.woocommerce a.button.alt:hover {
	background: #971b06 !important;
	border-color: #971b06 !important;
}

/* CF7 submit buttons — render in the .pi-cta--secondary style (dark panel
   with rounded corners) instead of the brand-red CTA. Applies to header
   popup, homepage CTA-bar form, contacts page form. The `html body` prefix
   bumps specificity above the !important brand-red rules above. */
html body .wpcf7-submit,
html body input[type="submit"].wpcf7-submit,
html body button.wpcf7-submit {
	background: #111 !important;
	background-color: #111 !important;
	color: #fff !important;
	border: 1px solid #333 !important;
	border-radius: 4px !important;
	padding: 14px 24px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}
html body .wpcf7-submit:hover,
html body input[type="submit"].wpcf7-submit:hover,
html body button.wpcf7-submit:hover {
	background: #000 !important;
	background-color: #000 !important;
	border-color: var(--pi-color-brand) !important;
}

/* (Removed) old per-section dark button override — now handled by the
   unified button system at the end of this file. About/Trust/Process
   CTAs render as primary (orange) since their sections have light
   backgrounds; only explicit `.header-popup` / dark-scheme contexts
   produce the secondary look. */

/* === WooCommerce: replace margin-bottom with padding-bottom on the
   products header (so the breadcrumbs/banner row owns its bottom space
   instead of leaking it via margin-collapse). */
.woocommerce .list_products_header,
.woocommerce-page .list_products_header {
	margin-bottom: 0 !important;
	padding-bottom: 2em !important;
}

/* === Category tiles: light 1px border, same vibe as the hero
   secondary CTA outline. */
a.pi-cat-tile,
.pi-cat-grid > a.pi-cat-tile {
	border: 1px solid #e5e5e5 !important;
}

/* === Product cards (loops, related, archives):
   border lives on the INNER .post_item which is the element that actually
   lifts on hover — so the outline travels with the card instead of staying
   pinned to the static <li>. Outer <li> has no border to avoid double rings. */
html body .products li.product,
html body .woocommerce ul.products li.product,
html body .woocommerce-page ul.products li.product {
	border: 0 !important;
	background: transparent !important;
}
html body .products li.product > .post_item,
html body .woocommerce ul.products li.product > .post_item,
html body .woocommerce-page ul.products li.product > .post_item {
	border: 1px solid #e5e5e5 !important;
	border-radius: 8px !important;
	background: #fff !important;
	overflow: hidden !important;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
	height: 100%;
	display: flex;
	flex-direction: column;
}
html body .products li.product > .post_item:hover,
html body .woocommerce ul.products li.product > .post_item:hover,
html body .woocommerce-page ul.products li.product > .post_item:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 14px 32px rgba(0, 0, 0, .10), 0 2px 8px rgba(0, 0, 0, .06) !important;
	border-color: #d0d0d0 !important;
}

/* Card structure: spacing + footer (button) sticks to bottom so cards in a
   row stay aligned regardless of title length. */
html body ul.products li.product .post_item .post_data {
	padding: 14px 14px 16px !important;
}
html body ul.products li.product .post_item .post_data_inner {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
}
html body ul.products li.product .post_item .add_to_cart_wrap {
	margin-top: auto !important;
}
/* "Замовити" / cart button — match unified secondary look (dark fill,
   rounded), full-width within the card. */
html body ul.products li.product .post_item .add_to_cart_wrap .button,
html body ul.products li.product .post_item .add_to_cart_wrap .added_to_cart {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
	background: #111 !important;
	color: #fff !important;
	border: 1px solid #2A2A2A !important;
	border-radius: 4px !important;
	padding: 11px 16px !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	letter-spacing: .02em !important;
	transition: background .15s, border-color .15s, color .15s, transform .15s !important;
	margin: 0 !important;
}
html body ul.products li.product .post_item .add_to_cart_wrap .button:hover,
html body ul.products li.product .post_item .add_to_cart_wrap .added_to_cart:hover {
	background: var(--pi-color-brand, #DB2B0E) !important;
	border-color: var(--pi-color-brand, #DB2B0E) !important;
	color: #fff !important;
}

/* Title: a touch more breathing room above; keep it readable but not loud. */
html body ul.products li.product .post_item .woocommerce-loop-product__title {
	margin: 0 !important;
	min-height: 2.4em;
	font-size: 15px !important;
	line-height: 1.3 !important;
}
html body ul.products li.product .post_item .woocommerce-loop-product__title a {
	color: #111 !important;
}

/* Image area: pure white backdrop (user preference). */
html body ul.products li.product .post_item .post_featured {
	background: #fff !important;
}

/* Remove any lingering left-edge dark gradient (Fabrica/trx_addons
   decorative overlays). Common ones live on .scheme_dark wrappers or
   the .body_wrap pseudo. Reset their pseudo backgrounds. */
.body_wrap::before,
.body_wrap::after,
.page_wrap::before,
.page_wrap::after,
.scheme_dark::before,
.scheme_dark::after {
	display: none !important;
	content: none !important;
}

/* Parent theme's mobile menu shell (.menu_mobile_inner) is a full-viewport
   absolute black panel rendered behind the content. We use our own
   custom drawer (.pi-mobile-menu) instead — kill the parent shell. */
.menu_mobile_inner,
.menu_mobile_overlay,
.menu_mobile_content_wrap,
.menu_mobile_aside_inner {
	display: none !important;
}

/* Fabrica wraps content in .content_wrap_fullscreen with overflow:clip
   which clips box-shadows on cards at the viewport edges. Restore
   visible overflow; horizontal scroll is already prevented at
   html/body level. */
.content_wrap_fullscreen,
.content_wrap,
.content {
	overflow: visible !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Product order popup (#order-product-popup). CSS lifted from parent
 * Fabrica theme (themes/fabrica/functions.php:1500-1679) because we
 * unhooked the parent's wp_footer callback that emitted both the markup
 * AND this style block. Our replacement in inc/product-order-popup.php
 * keeps the markup but relies on this CSS staying loaded.
 * ───────────────────────────────────────────────────────────────────── */
.order-popup-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	box-sizing: border-box;
}
.order-popup-container {
	position: relative;
	background: #fff;
	max-width: 500px;
	width: 90%;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	padding: 50px 60px;
}
.order-popup-close {
	position: absolute;
	top: 15px;
	right: 20px;
	background: none;
	border: none;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	color: #333;
	padding: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.3s ease;
}
.order-popup-close:hover { color: var(--theme-color-text_link); }
.order-popup-title {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 25px;
	text-align: left;
	color: #333;
}
.order-popup-product-info { margin-bottom: 25px; }
.order-popup-info-row {
	background: #f5f5f5;
	padding: 12px 15px;
	margin-bottom: 8px;
	font-size: 14px;
	color: #333;
}
.order-popup-info-row:last-child { margin-bottom: 0; }
.order-popup-label { color: #666; font-weight: 500; }
.order-popup-value { color: #333; }
.order-popup-form .wpcf7-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.order-popup-form .wpcf7-form p { margin: 0; }
.order-popup-form .wpcf7-form-control-wrap { display: block; position: relative; }
.order-popup-form input[type="text"],
.order-popup-form input[type="email"],
.order-popup-form input[type="tel"],
.order-popup-form textarea {
	width: 100%;
	padding: 15px 20px 15px 50px;
	border: none;
	border-bottom: 1px solid #e0e0e0;
	font-size: 16px;
	background: transparent;
	outline: none;
	transition: border-color 0.3s ease;
	box-sizing: border-box;
}
.order-popup-form input[type="text"]:focus,
.order-popup-form input[type="email"]:focus,
.order-popup-form input[type="tel"]:focus,
.order-popup-form textarea:focus { border-bottom-color: var(--theme-color-text_link); }
.order-popup-form textarea { min-height: 80px; resize: vertical; }
.order-popup-form input[type="submit"],
.order-popup-form .wpcf7-submit {
	width: 100%;
	padding: 18px 30px;
	background: #333;
	color: #fff;
	border: none;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top: 10px;
}
.order-popup-form input[type="submit"]:hover,
.order-popup-form .wpcf7-submit:hover { background: var(--theme-color-text_link); }
body.popup-open { overflow: hidden; }
.order-product-btn {
	background: #333 !important;
	color: #fff !important;
	border: none !important;
}
.order-product-btn:hover { background: var(--theme-color-text_link) !important; }
@media (max-width: 767px) {
	.order-popup-container { padding: 40px 30px; }
	.order-popup-title { font-size: 24px; }
	.order-popup-info-row { padding: 10px 12px; font-size: 13px; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Single-product page: tighten paragraph spacing in the description
 * block (was 24px which created huge whitespace gaps between props).
 * Applied sitewide because the selector is product-scoped already.
 * ───────────────────────────────────────────────────────────────────── */
.single-product div.product .fabrica-product-description p {
	margin-bottom: 12px !important;
}

/* Mobile (≤1023px) on product pages: shrink default copy to 13px to
   match the tighter mobile rhythm we use elsewhere (About / homepage). */
@media (max-width: 1023px) {
	body.single-product .fabrica-product-description,
	body.single-product .fabrica-product-description p,
	body.single-product .fabrica-product-description li,
	body.single-product .fabrica-product-description span,
	body.single-product .woocommerce-product-details__short-description,
	body.single-product .woocommerce-product-details__short-description p,
	body.single-product .woocommerce-Tabs-panel,
	body.single-product .woocommerce-Tabs-panel p,
	body.single-product .woocommerce-Tabs-panel li {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Homepage numbered-list items (about / trust / process). Baked HTML
 * already contains an accent-number `<span style="color:#db2b0e">01.</span>`;
 * here we force the surrounding h6 to medium weight so the body text
 * after the number is also 500-weight.
 * ───────────────────────────────────────────────────────────────────── */
body.page-id-2257 .elementor-widget-heading h6.elementor-heading-title,
body.page-id-7180 .elementor-widget-heading h6.elementor-heading-title {
	font-weight: 500 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Homepage advantages icons grid: keep the original size (per user
 * request — earlier -20% felt too small on desktop); normal case (not
 * uppercase), medium weight stay.
 * ───────────────────────────────────────────────────────────────────── */
body.page-id-2257 .sc_icons_item_title,
body.page-id-7180 .sc_icons_item_title,
body.page-id-2257 .sc_icons_item_title a,
body.page-id-7180 .sc_icons_item_title a,
body.page-id-2257 .sc_icons_item_title span,
body.page-id-7180 .sc_icons_item_title span {
	text-transform: none !important;
	font-weight: 500 !important;
}

/* Advantages section hover — brand-colour background, white icon + text.
   Overrides trx_addons' qw-stylish default (light accent2 bg + dark text). */
body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item,
body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item {
	transition: background-color .2s ease, color .2s ease;
}
body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover,
body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover {
	background-color: var(--pi-color-brand) !important;
}
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_icon,
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_icon,
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_icon::before,
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_icon::before,
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_icon > *,
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_icon > *,
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_icon > *::before,
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_icon > *::before,
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover [class*="sc_icon_type_"],
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover [class*="sc_icon_type_"],
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover [class*="sc_icon_type_"]::before,
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover [class*="sc_icon_type_"]::before,
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_item_title,
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_item_title,
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_item_title a,
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_item_title a,
html body.page-id-2257 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_item_title span,
html body.page-id-7180 .sc_icons_columns_wrap .sc_icons_item:hover .sc_icons_item_title span {
	color: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Cards (categories + products): default case (no uppercase), weight
 * 500. Override the global .pi-baked-page h2 uppercase rule which
 * otherwise capitalises every WC product title on baked pages.
 * Broad selector list catches every variant trx_addons / WC / our own
 * partial may emit.
 * ───────────────────────────────────────────────────────────────────── */
html body .pi-cat-tile__name,
html body .pi-cat-tile h3,
html body .pi-cat-tile h4,
html body .pi-cat-tile a,
html body.pi-baked-page h3.pi-cat-tile__name,
html body .pi-baked-page h2.woocommerce-loop-product__title,
html body .woocommerce h2.woocommerce-loop-product__title,
html body .woocommerce-page h2.woocommerce-loop-product__title,
html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
html body .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
html body ul.products li.product h2,
html body ul.products li.product h3,
html body ul.products li.product .product-title,
html body .products .product-title,
html body .post_item .post_title,
html body .post_item .post_title a {
	text-transform: none !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Mobile (homepage only): kill the 30px top/bottom padding Elementor
 * bakes into about- and trust-block populated columns. Without this,
 * the page has two huge empty bands between the photo+text and the
 * next section.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	body.page-id-2257 .elementor-element.elementor-element-325d3bf > .elementor-element-populated,
	body.page-id-2257 .elementor-element.elementor-element-91acd68 > .elementor-element-populated,
	body.page-id-7180 .elementor-element.elementor-element-325d3bf > .elementor-element-populated,
	body.page-id-7180 .elementor-element.elementor-element-91acd68 > .elementor-element-populated,
	/* Generic fallback: any homepage content column on mobile loses
	   excess top/bottom padding that creates the two huge gaps. */
	body.page-id-2257 .elementor-widget-wrap.elementor-element-populated,
	body.page-id-7180 .elementor-widget-wrap.elementor-element-populated {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
}

/* ╔═══════════════════════════════════════════════════════════════════╗
 * ║  UNIFIED BUTTON SYSTEM                                            ║
 * ║  Every CTA on the site uses the same shape (4px radius, 1px       ║
 * ║  border, 16/28 padding, 15px/600 text — matches the hero CTAs).   ║
 * ║  Primary = brand orange. Secondary = dark fill with subtle border ║
 * ║  (used on dark surfaces or when an element opts in via            ║
 * ║  `.header-popup` / `.pi-cta--secondary`).                          ║
 * ╚═══════════════════════════════════════════════════════════════════╝ */

/* — Base PRIMARY look applied to every button-shaped element — */
html body a.sc_button,
html body a.sc_button.sc_button_default,
html body a.pi-cta,
html body a.pi-cta--primary,
html body .pi-header__cta,
html body .pi-mobile-menu__cta,
html body .pi-footer__cta,
html body .pi-brands-arrow,
html body button[type="submit"],
html body input[type="submit"],
html body .wpcf7-submit,
html body .order-popup-form .wpcf7-submit,
html body .order-popup-form input[type="submit"],
html body .elementor-button,
html body .button.product_type_simple,
html body a.shop_cart,
html body button.shop_cart,
html body .single_add_to_cart_button,
html body button.button:not(.wp-element-button),
html body a.button:not(.wp-element-button) {
	background-color: #B82308 !important;
	color: #fff !important;
	border: 1px solid #B82308 !important;
	border-radius: 4px !important;
	padding: 16px 28px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	letter-spacing: .02em !important;
	text-decoration: none !important;
	cursor: pointer !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
	box-shadow: none !important;
}

/* Reset any WP admin bar form controls — they inherit the UBS otherwise
   and turn into giant brand-red blobs over the toolbar. Surgically undo
   only the offending properties so dashicons (font-family inheritance to
   ::before pseudos) keep working — `all: revert` blew them away. */
#wpadminbar button,
#wpadminbar input,
#wpadminbar a {
	background-color: transparent !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	font-weight: normal !important;
	line-height: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	box-shadow: none !important;
	cursor: pointer !important;
	color: inherit !important;
}
#wpadminbar a:hover,
#wpadminbar .ab-item:hover { color: #00b9eb !important; }
/* The search input gets some breathing room back */
#wpadminbar #adminbarsearch input.adminbar-input {
	padding: 0 25px 0 5px !important;
	font-size: 13px !important;
}
#wpadminbar #adminbarsearch input.adminbar-button {
	padding: 0 !important;
}
/* Inline-flex for clean vertical centering; don't override block-level
   CTAs that already use flex: full-width drawer CTA stays full-width. */
html body a.sc_button,
html body a.pi-cta,
html body .pi-header__cta,
html body button[type="submit"],
html body input[type="submit"],
html body .wpcf7-submit,
html body .elementor-button,
html body .button.product_type_simple,
html body .shop_cart {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}

/* — PRIMARY hover — */
html body a.sc_button:hover,
html body a.pi-cta:hover,
html body a.pi-cta--primary:hover,
html body .pi-header__cta:hover,
html body .pi-mobile-menu__cta:hover,
html body button[type="submit"]:hover,
html body input[type="submit"]:hover,
html body .wpcf7-submit:hover,
html body .elementor-button:hover,
html body .button.product_type_simple:hover,
html body .shop_cart:hover,
html body .single_add_to_cart_button:hover {
	background-color: #9b1d05 !important;
	border-color: #9b1d05 !important;
	color: #fff !important;
}

/* — SECONDARY look: dark fill + subtle border. Triggered by:
   1. Explicit class (`.pi-cta--secondary`, `.header-popup`, `.sc_button_simple`)
   2. Living inside a dark-themed surface (footer / mobile drawer /
      dark-themed sections / dark-overlay sections). — */
html body a.sc_button.header-popup,
html body a.sc_button.sc_button_simple,
html body a.pi-cta--secondary,
html body .pi-section--brands a.sc_button,
html body .pi-section--brands button[type="submit"],
html body .pi-section--clients a.sc_button,
html body .pi-footer a.sc_button,
html body .pi-footer button[type="submit"],
html body .pi-mobile-menu a.sc_button,
html body .scheme_dark a.sc_button:not(.header-popup),
html body section.scheme_dark a.sc_button,
html body section[class*="elementor-element-acc57bf"] a.sc_button.header-popup {
	background-color: #111 !important;
	border-color: #2A2A2A !important;
	color: #fff !important;
}
html body a.sc_button.header-popup:hover,
html body a.sc_button.sc_button_simple:hover,
html body a.pi-cta--secondary:hover,
html body .pi-section--brands a.sc_button:hover,
html body .pi-section--clients a.sc_button:hover,
html body .pi-footer a.sc_button:hover,
html body .pi-mobile-menu a.sc_button:hover,
html body .scheme_dark a.sc_button:not(.header-popup):hover {
	background-color: #1f1f1f !important;
	border-color: #555 !important;
}

/* — Brands carousel arrows are square icons, keep that ratio. Force
   secondary (dark) look since they sit on light/dark mixed contexts. — */
html body .pi-brands-arrow {
	padding: 10px !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;
	background-color: #111 !important;
	border: 1px solid #2A2A2A !important;
	color: #fff !important;
	border-radius: 4px !important;
}
html body .pi-brands-arrow:hover {
	background-color: #1f1f1f !important;
	border-color: #555 !important;
}

/* — Override: on the homepage, EVERY CTA except the hero's first button
     and the header CTA renders as secondary (dark). Hero's second
     button (`.header-popup`) is already secondary. The site-wide
     accent-orange look is reserved for hero + header. — */
body.page-id-2257 .pi-baked-page .elementor-section:not(:first-of-type) a.sc_button,
body.page-id-7180 .pi-baked-page .elementor-section:not(:first-of-type) a.sc_button,
body.page-id-2257 .pi-baked-page .elementor-section:not(:first-of-type) button.sc_button,
body.page-id-7180 .pi-baked-page .elementor-section:not(:first-of-type) button.sc_button,
body.page-id-2257 .pi-baked-page .elementor-section:not(:first-of-type) .elementor-button,
body.page-id-7180 .pi-baked-page .elementor-section:not(:first-of-type) .elementor-button {
	background-color: #111 !important;
	border: 1px solid #2A2A2A !important;
	color: #fff !important;
}
body.page-id-2257 .pi-baked-page .elementor-section:not(:first-of-type) a.sc_button:hover,
body.page-id-7180 .pi-baked-page .elementor-section:not(:first-of-type) a.sc_button:hover,
body.page-id-2257 .pi-baked-page .elementor-section:not(:first-of-type) button.sc_button:hover,
body.page-id-7180 .pi-baked-page .elementor-section:not(:first-of-type) button.sc_button:hover {
	background-color: #1f1f1f !important;
	border-color: #555 !important;
}

/* — Contact-Form 7 submit (every page): secondary (dark) look with the
     proper rounded corners + thin border. Parent fabrica injects
     `.wpcf7.wpcf7-submit-style .wpcf7-submit { background: transparent
     !important }` from its plugin stylesheet (specificity 0,0,3,0); to
     win we mirror or exceed that. — */
html body .wpcf7.wpcf7-submit-style .wpcf7-submit,
html body .wpcf7 .wpcf7-submit-style .wpcf7-submit,
html body .wpcf7 form .wpcf7-submit,
html body .wpcf7-form .wpcf7-submit,
html body p .wpcf7-submit,
html body input[type="submit"].wpcf7-submit,
html body button[type="submit"].wpcf7-submit,
html body .order-popup-form .wpcf7-submit,
html body .order-popup-form input[type="submit"],
html body .order-popup-form button[type="submit"],
html body form.wpcf7-form input[type="submit"],
html body form.wpcf7-form button[type="submit"] {
	background-color: #111 !important;
	background: #111 !important;
	color: #fff !important;
	border: 1px solid #2A2A2A !important;
	border-radius: 4px !important;
	padding: 16px 28px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	text-transform: uppercase !important;
	letter-spacing: .02em !important;
	cursor: pointer !important;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}
html body .wpcf7.wpcf7-submit-style .wpcf7-submit:hover,
html body .wpcf7 .wpcf7-submit-style .wpcf7-submit:hover,
html body .wpcf7 form .wpcf7-submit:hover,
html body .wpcf7-form .wpcf7-submit:hover,
html body p .wpcf7-submit:hover,
html body input[type="submit"].wpcf7-submit:hover,
html body button[type="submit"].wpcf7-submit:hover,
html body .order-popup-form .wpcf7-submit:hover,
html body .order-popup-form input[type="submit"]:hover,
html body form.wpcf7-form input[type="submit"]:hover,
html body form.wpcf7-form button[type="submit"]:hover {
	background-color: #1f1f1f !important;
	background: #1f1f1f !important;
	border-color: #555 !important;
}

/* — Mobile sizing: slightly more compact so 2-up CTAs fit narrow viewports — */
@media (max-width: 768px) {
	html body a.sc_button,
	html body a.pi-cta,
	html body .pi-mobile-menu__cta,
	html body button[type="submit"],
	html body input[type="submit"],
	html body .wpcf7-submit,
	html body .elementor-button,
	html body .button.product_type_simple,
	html body .shop_cart,
	html body .single_add_to_cart_button {
		padding: 14px 22px !important;
		font-size: 14px !important;
	}
	/* The header CTA stays compact — it shares a tight row with the search
	   icon and burger, so the full 14/22 mobile padding makes it dominate.
	   Targeted override beats both the UBS rule above and the underlying
	   `.pi-header__cta--mobile` block defined in the header section. */
	html body .pi-header__cta,
	html body .pi-header__cta--mobile {
		padding: 9px 14px !important;
		font-size: 12px !important;
	}
	/* Burger ~20% narrower — frees space in the header cluster. */
	html body .pi-header__burger {
		width: 24px !important;
		min-width: 24px !important;
		padding: 4px 2px !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Single-product page polish:
 *   1) Breadcrumbs — parent fabrica hides .woocommerce-breadcrumb via
 *      display:none. We unhide + restyle as a small grey trail above the
 *      product article. Sits on white, low-contrast, with brand colour on
 *      hover.
 *   2) Main gallery image — 8px inner padding so the photo doesn't kiss
 *      the card edges. Applied to .flex-viewport (multi-image / slider
 *      case) and to .woocommerce-product-gallery__image directly (single-
 *      image case).
 * ───────────────────────────────────────────────────────────────────── */
/* Breadcrumbs: same look + same top spacing as `.pi-page-head` on About
   (32px top padding, 13px / #898a8e text, brand-orange on hover). */
html body.single-product .woocommerce-breadcrumb {
	display: block !important;
	padding: 32px 0 0 !important;
	margin: 0 0 24px !important;
	font-size: 13px !important;
	color: #898a8e !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
}
html body.single-product .woocommerce-breadcrumb a {
	color: #898a8e !important;
	text-decoration: none !important;
	transition: color .15s ease;
}
html body.single-product .woocommerce-breadcrumb a:hover {
	color: var(--pi-color-brand, #DB2B0E) !important;
}
html body.single-product .woocommerce-breadcrumb .woocommerce-breadcrumb-delimiter {
	display: inline-block;
	margin: 0 8px;
	color: #c0c0c0 !important;
}
html body.single-product .woocommerce-breadcrumb .woocommerce-breadcrumb-delimiter::before {
	content: '/';
}
@media (max-width: 600px) {
	html body.single-product .woocommerce-breadcrumb {
		padding-top: 20px !important;
		margin-bottom: 16px !important;
		font-size: 12px !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Product-page typography: mirror About page (Про нас).
 *   - H1 product title  → 36px / 800 / uppercase / line-height 1.0
 *     (matches `.pi-page-head__title`)
 *   - Section h2 "Супутні товари" → 28.9px / 800 / uppercase
 *     (matches About's «МІСІЯ:», «СТРАТЕГІЧНА МЕТА:» etc.)
 *   - Body description copy → 17px / line-height 28px / #000
 *     (matches About's intro paragraphs)
 * ───────────────────────────────────────────────────────────────────── */
html body.single-product .woocommerce div.product .product_title,
html body.single-product div.product .product_title,
html body.single-product .summary h1.product_title,
html body.single-product .summary h1 {
	font-size: 36px !important;
	font-weight: 800 !important;
	line-height: 1.0 !important;
	text-transform: uppercase !important;
	color: #000 !important;
	margin: 0 0 18px !important;
	letter-spacing: 0 !important;
}
@media (max-width: 600px) {
	html body.single-product .woocommerce div.product .product_title,
	html body.single-product div.product .product_title,
	html body.single-product .summary h1.product_title,
	html body.single-product .summary h1 {
		font-size: 28px !important;
		margin-bottom: 14px !important;
	}
}

html body.single-product .related h2,
html body.single-product .upsells h2,
html body.single-product .related .h2,
html body.single-product section.related > h2 {
	font-size: 29px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
	text-transform: uppercase !important;
	color: #000 !important;
	margin: 0 0 24px !important;
	letter-spacing: 0 !important;
}
@media (max-width: 600px) {
	html body.single-product .related h2,
	html body.single-product .upsells h2 {
		font-size: 22px !important;
		margin-bottom: 18px !important;
	}
}

/* Product description / short description body copy on the summary
   column — mirrors About's body paragraph styling. */
html body.single-product .summary .fabrica-product-description,
html body.single-product .summary .fabrica-product-description p,
html body.single-product .summary .woocommerce-product-details__short-description,
html body.single-product .summary .woocommerce-product-details__short-description p {
	font-size: 17px !important;
	line-height: 28px !important;
	color: #000 !important;
	font-weight: 400 !important;
	margin: 0 0 14px !important;
}
html body.single-product .summary .fabrica-product-description p:last-child,
html body.single-product .summary .woocommerce-product-details__short-description p:last-child {
	margin-bottom: 0 !important;
}

/* Mobile: keep description readable. */
@media (max-width: 600px) {
	html body.single-product .summary .fabrica-product-description,
	html body.single-product .summary .fabrica-product-description p,
	html body.single-product .summary .woocommerce-product-details__short-description,
	html body.single-product .summary .woocommerce-product-details__short-description p {
		font-size: 15px !important;
		line-height: 24px !important;
		margin-bottom: 12px !important;
	}
}

/* 8px breathing room around the main product photo */
body.single-product div.product div.images .flex-viewport,
body.single-product div.product .woocommerce-product-gallery--single-image,
body.single-product div.product .woocommerce-product-gallery--without-thumbs {
	padding: 8px !important;
	box-sizing: border-box !important;
	background: #fff !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Custom product-image lightbox (.pi-lightbox).
 * Markup is injected by main.js — see /assets/js/main.js. WC PhotoSwipe
 * is disabled via /inc/product-lightbox.php so this is the only lightbox
 * on the product page.
 * ───────────────────────────────────────────────────────────────────── */
.pi-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.94);
	z-index: 999999;
	display: none;
	flex-direction: column;
	padding: 24px;
	box-sizing: border-box;
}
.pi-lightbox.is-open { display: flex; }
body.pi-lightbox-open { overflow: hidden; }

.pi-lightbox__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	transition: background .15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.pi-lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }

.pi-lightbox__counter {
	position: absolute;
	top: 28px;
	left: 28px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-weight: 500;
	z-index: 5;
	font-feature-settings: 'tnum';
}

.pi-lightbox__stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	cursor: zoom-out;
}
.pi-lightbox__img {
	max-width: 90%;
	max-height: 100%;
	object-fit: contain;
	cursor: default;
	display: block;
}

.pi-lightbox__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #111;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease, border-color .15s ease;
	padding: 0;
}
.pi-lightbox__arrow:hover {
	background: var(--pi-color-brand, #DB2B0E);
	border-color: var(--pi-color-brand, #DB2B0E);
}
.pi-lightbox__arrow--prev { left: 24px; }
.pi-lightbox__arrow--next { right: 24px; }
.pi-lightbox__arrow::before {
	content: '';
	width: 14px;
	height: 14px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	display: block;
}
.pi-lightbox__arrow--prev::before {
	transform: rotate(-135deg);
	margin-left: 4px;
}
.pi-lightbox__arrow--next::before {
	transform: rotate(45deg);
	margin-right: 4px;
}

.pi-lightbox__thumbs {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 16px auto 0 !important;
	padding: 8px;
	overflow-x: auto;
	max-width: 100%;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
	justify-content: flex-start;
}
.pi-lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.pi-lightbox__thumbs::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 3px;
}

.pi-lightbox__thumb {
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, 0.06);
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.55;
	transition: opacity .15s ease, border-color .15s ease;
	padding: 4px;
	box-sizing: border-box;
	margin: 0;
	list-style: none;
}
.pi-lightbox__thumb:hover { opacity: 0.85; }
.pi-lightbox__thumb.is-active {
	opacity: 1;
	border-color: var(--pi-color-brand, #DB2B0E);
}
.pi-lightbox__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@media (max-width: 600px) {
	.pi-lightbox { padding: 12px; }
	.pi-lightbox__arrow {
		width: 42px;
		height: 42px;
	}
	.pi-lightbox__arrow--prev { left: 8px; }
	.pi-lightbox__arrow--next { right: 8px; }
	.pi-lightbox__thumb {
		width: 56px;
		height: 56px;
	}
	.pi-lightbox__counter {
		top: 18px;
		left: 18px;
		font-size: 13px;
	}
	.pi-lightbox__close {
		top: 10px;
		right: 10px;
		width: 38px;
		height: 38px;
		font-size: 24px;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * About page — gap between the photo-collage column (left) and the
 * text column (right). Default Elementor layout puts them flush
 * together; we add ~50px breathing room on desktop. On mobile the
 * columns stack so we drop the side padding and add a small vertical
 * separator instead. Same data-ids on UA (621) and RU (7184).
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
	body.page-id-621 .elementor-element.elementor-element-1fc7ac4,
	body.page-id-7184 .elementor-element.elementor-element-1fc7ac4 {
		padding-left: 50px !important;
	}
}
@media (max-width: 768px) {
	body.page-id-621 .elementor-element.elementor-element-1fc7ac4,
	body.page-id-7184 .elementor-element.elementor-element-1fc7ac4 {
		padding-left: 0 !important;
		margin-top: 28px !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Contacts page (713 / 7183) — the contacts+form inner section has an
 * Elementor `.elementor-container` with `padding: 0 40px`, which insets
 * the "НАШІ КОНТАКТИ" column 40px past the map's left edge above it. Zero
 * the padding so both columns align with the map and other container
 * edges. Same data-id on UA + RU.
 * ───────────────────────────────────────────────────────────────────── */
body.page-id-713 .elementor-element-7ab59bee > .elementor-container,
body.page-id-7183 .elementor-element-7ab59bee > .elementor-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Product / category cards — 8px breathing room around the photo so it
 * doesn't kiss the card border. Applied to the .post_featured wrap which
 * holds the <img>. Cards keep the white image background from earlier.
 * ───────────────────────────────────────────────────────────────────── */
html body ul.products li.product .post_item .post_featured,
html body ul.products li.product-category .post_item .post_featured {
	padding: 8px !important;
	box-sizing: border-box !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Search results page polish: tighter vertical rhythm — the parent
 * `.content` wrapper applies `padding: 102px 0` to every WC archive
 * which makes the empty-state float in the middle of the screen. We
 * reduce that to a normal 24-32px stack on search results. Also
 * tightens the `.pi-page-head` paddings used by the search header.
 * ───────────────────────────────────────────────────────────────────── */
body.search-results .content,
body.search-no-results .content,
body.search.search-results .content,
body.search.search-no-results .content {
	padding-top: 0 !important;
	padding-bottom: 32px !important;
}
body.search .pi-page-head {
	padding: 24px 0 8px !important;
}
body.search .woocommerce-no-products-found,
body.search .woocommerce-no-products-found .woocommerce-info {
	padding: 0 !important;
	margin: 0 !important;
	font-size: 15px !important;
	color: #444 !important;
	text-align: left !important;
	background: transparent !important;
	border: 0 !important;
}
body.search .woocommerce-no-products-found { padding-top: 16px !important; padding-bottom: 24px !important; }

/* ─────────────────────────────────────────────────────────────────────
 * Mobile homepage hero: kill BOTH the section's own outer padding and
 * the inner column's padding so the H1 + subtitle + CTAs sit tight under
 * the header. Elementor's column-populated had ~30px top/bottom + sides
 * and the section itself ~32px top/bottom — together they created a much
 * bigger empty band than the rest of the page uses.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-top-section:first-of-type,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-top-section:first-of-type {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-top-section:first-of-type .elementor-element-populated,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-top-section:first-of-type .elementor-element-populated {
		padding: 0 !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Mobile homepage: kill margin-top on heading widgets so the "НАМ
 * ДОВІРЯЮТЬ…" / "НАШІ КЛІЄНТИ ЦІНУЮТЬ:" titles sit flush against the
 * preceding section instead of floating ~30-40px below it. Headings
 * only — leaves text-editor/spacer widget gaps untouched.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.pi-baked-2257 .elementor-widget-heading > .elementor-widget-container,
	.pi-baked-7180 .elementor-widget-heading > .elementor-widget-container {
		margin-top: 0 !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Brands section — drop the dark band's vertical padding on mobile so
 * it doesn't dominate the scroll. 70px top/bottom → 30px top/bottom.
 * Title→carousel gap on desktop already widened to 50px via
 * `.pi-brands-viewport { margin-top: 50px }` above.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.pi-section--brands { padding: 30px 0 !important; }
}

/* ─────────────────────────────────────────────────────────────────────
 * Mobile homepage — kill the stacked vertical padding around the photos
 * in the "Про нас" (sections 6e0d1ac + inner 91d2d6f) and "Нам
 * довіряють" (sections 081d9df + inner f07e6a0) blocks. The outer
 * section had 24px top/bottom and the inner one another 32px, which
 * compounded into ~56-72px empty band above + below each image on
 * mobile. Flush on phone; desktop layout untouched.
 *
 * Heading-only sections (a85d2e6 "ПРО НАС" and e20f6f3 "НАМ ДОВІРЯЮТЬ"):
 * keep a 24px bottom padding so the title has breathing room above the
 * image column underneath, but no top padding (the divider with the
 * preceding section is already handled).
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-a85d2e6,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-a85d2e6,
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-e20f6f3,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-e20f6f3 {
		padding-top: 0 !important;
		padding-bottom: 24px !important;
	}
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-6e0d1ac,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-6e0d1ac,
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-081d9df,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-081d9df,
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-91d2d6f,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-91d2d6f,
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-f07e6a0,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-f07e6a0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	/* The about content section (6e0d1ac) has padding 0 15px from baked CSS,
	   which compounds with the column's 16px to indent text 31px from the
	   viewport edge — too much vs the clients section (just 16px). Zero the
	   section sides so content lines up at the container edge. */
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-element-6e0d1ac,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-element-6e0d1ac {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	/* Image-column and text-column stack on mobile (col-50 → 100%). The
	   text column's `.elementor-element-populated` carries a 30px top
	   margin which becomes the image→text gap once stacked. Tighten to
	   16px so it matches the container side padding. Targets the two
	   homepage content columns: 325d3bf (Про нас) and 91acd68 (Нам
	   довіряют). */
	html body .pi-baked-page.pi-baked-2257 .elementor-column.elementor-element-325d3bf > .elementor-element-populated,
	html body .pi-baked-page.pi-baked-7180 .elementor-column.elementor-element-325d3bf > .elementor-element-populated,
	html body .pi-baked-page.pi-baked-2257 .elementor-column.elementor-element-91acd68 > .elementor-element-populated,
	html body .pi-baked-page.pi-baked-7180 .elementor-column.elementor-element-91acd68 > .elementor-element-populated {
		margin-top: 16px !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * "Дізнатися більше" buttons in the About + Clients homepage blocks —
 * baked Elementor spacers above them are only ~2px which leaves the
 * button kissing the last numbered item. Mobile needs more breathing
 * room (50px) because items stack tightly; desktop already has more
 * vertical air from the wider column so 16px is enough.
 *   f48b497 = button in section 6e0d1ac (Про нас)
 *   df8649f = button in section 081d9df (Нам довіряють)
 * ───────────────────────────────────────────────────────────────────── */
html body .pi-baked-page.pi-baked-2257 .elementor-element.elementor-element-f48b497,
html body .pi-baked-page.pi-baked-7180 .elementor-element.elementor-element-f48b497,
html body .pi-baked-page.pi-baked-2257 .elementor-element.elementor-element-df8649f,
html body .pi-baked-page.pi-baked-7180 .elementor-element.elementor-element-df8649f {
	margin-top: 16px !important;
}
@media (max-width: 768px) {
	html body .pi-baked-page.pi-baked-2257 .elementor-element.elementor-element-f48b497,
	html body .pi-baked-page.pi-baked-7180 .elementor-element.elementor-element-f48b497,
	html body .pi-baked-page.pi-baked-2257 .elementor-element.elementor-element-df8649f,
	html body .pi-baked-page.pi-baked-7180 .elementor-element.elementor-element-df8649f {
		margin-top: 0 !important;
		margin-bottom: 40px !important;
	}
	/* Heading "НАМ ДОВІРЯЮТЬ" (widget 24fce74) — restore the baked
	   margin-top: 39px so the title gets visible breathing room above on
	   mobile. The earlier blanket "zero all heading margin-tops" override
	   was too aggressive here. */
	html body .pi-baked-page.pi-baked-2257 .elementor-element.elementor-element-24fce74 > .elementor-widget-container,
	html body .pi-baked-page.pi-baked-7180 .elementor-element.elementor-element-24fce74 > .elementor-widget-container {
		margin: 39px 0 0 0 !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Hero (first section, acc57bf) on mobile — add a 16px bottom band
 * under the secondary CTA so the section doesn't end flush with the
 * next section (matches the horizontal container padding). The whole
 * section's padding was zeroed to remove the top dead zone; we just
 * re-add the bottom.
 * ───────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	html body .pi-baked-page.pi-baked-2257 .elementor-section.elementor-top-section:first-of-type,
	html body .pi-baked-page.pi-baked-7180 .elementor-section.elementor-top-section:first-of-type {
		padding-bottom: 16px !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * Cards (categories + products) — title typography:
 *   Desktop (>= 769px): 17px / weight 600 (cleaner, more presence).
 *   Mobile  (<= 768px): keep prior 13px / weight 500 (compact).
 * ───────────────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
	html body .pi-cat-tile__name,
	html body .pi-cat-tile h3,
	html body .pi-cat-tile h4,
	html body ul.products li.product .post_item .woocommerce-loop-product__title,
	html body ul.products li.product .post_item .woocommerce-loop-product__title a,
	html body .woocommerce ul.products li.product .woocommerce-loop-product__title,
	html body .woocommerce-page ul.products li.product .woocommerce-loop-product__title,
	html body ul.products li.product .product-title,
	html body .products .product-title {
		font-size: 17px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
	}
}

/* ─────────────────────────────────────────────────────────────────────
 * "ПЕРЕВАГИ ПРОМ-ІНДУСТРІ" icon-list (homepage section 17551da4) —
 * trx_addons paints these in a bright "accent2" color (#FA4729) which
 * reads as acid-orange. Recolor to the site's brand red so they match
 * the CTAs and other accents. Same trx widget used on RU mirror 7180.
 * ───────────────────────────────────────────────────────────────────── */
html body .pi-baked-page.pi-baked-2257 .sc_icons .sc_icons_icon,
html body .pi-baked-page.pi-baked-2257 .sc_icons .sc_icons_icon:before,
html body .pi-baked-page.pi-baked-7180 .sc_icons .sc_icons_icon,
html body .pi-baked-page.pi-baked-7180 .sc_icons .sc_icons_icon:before {
	color: var(--pi-color-brand) !important;
}