/* ==========================================================================
   Brand pages: Марки hub (1371), SONAX (1372), KROON-OIL (1373), PUTOLINE (1374), QUIXY (1375).
   Built by server/build-brands.php from one template. Shared system: common.css.
   Root: .sx.sx-brand-page.sx-brand-<slug>. Each brand sets its own accent (--sxb-accent):
     SONAX red (its own red logo) · KROON-OIL yellow #FFD400 (Kroon house style) ·
     PUTOLINE steel (chrome) · QUIXY red on a light hero. Buttons stay Senax red/black everywhere.
   ========================================================================== */

.sx-brand-page {
	--sxb-accent: var(--sx-red);
	--sxb-accent-ink: #fff;
	--sxb-accent-soft: rgba(255, 0, 0, .12);
}
.sx-brand-kroon-oil { --sxb-accent: #ffd400; --sxb-accent-ink: #121212; --sxb-accent-soft: rgba(255, 212, 0, .22); }
.sx-brand-putoline { --sxb-accent: #aeb8c2; --sxb-accent-ink: #121212; --sxb-accent-soft: rgba(120, 136, 150, .16); }

/* ---------------------------------------------------------------- shared bits */
/* Row containers: children size to their content (Elementor gives nested containers width 100%). */
.sx-brand-page .sxb-b2b__row > .e-con,
.sx-brand-page .sxb-advisor__bar > .e-con,
.sx-brand-page .sxb-empty > .e-con,
.sx-brand-page .sxb-lm > .e-con,
.sx-brand-page .sxb-where__head > .e-con,
.sx-brand-page .sxb-usp > .e-con { width: auto; --width: auto; min-width: 0; }
/* Elementor paints its background overlay with .e-con::before (full size); reset it where we use ::before. */
.sx-brand-page .sxb-new__media::before { width: auto; height: auto; right: auto; bottom: auto; }
.sx-brand-page .sxb-train__media::before { width: auto; height: auto; }
.sx-brand-page .sxb-cat__media--icon::before { width: auto; height: auto; }
.sx-brand-page .sxb-icon .elementor-icon-wrapper { display: flex; line-height: 0; }
.sx-brand-page .sxb-icon .elementor-icon { font-size: 24px; color: inherit; fill: currentColor; line-height: 1; }
.sx-brand-page .sxb-icon .elementor-icon svg { width: 1em; height: 1em; fill: currentColor; }
.sx-brand-page .sxb-icon .elementor-icon i { color: inherit; }
.sx-brand-page .sxb-more .elementor-heading-title {
	margin: 0;
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sx-ink);
	transition: color .2s, transform .3s var(--sx-ease);
}
.sx-brand-page a:hover .sxb-more .elementor-heading-title { color: var(--sx-red); transform: translateX(4px); }
.sx-brand-page .sxb-ticks ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 34px; }
.sx-brand-page .sxb-ticks li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: #fff; }
.sx-brand-page .sxb-ticks li::before { content: ''; flex: none; width: 16px; height: 11px; background: var(--sx-red); clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%); }

/* ---------------------------------------------------------------- 01 hero */
.sx-brand-page .sxb-hero {
	min-height: clamp(540px, 44vw, 720px);
	justify-content: flex-end;
	padding-top: clamp(110px, 11vw, 170px);
	padding-bottom: clamp(56px, 6vw, 96px);
	background-color: var(--sx-dark);
	color: #fff;
	isolation: isolate;
}
.sx-brand-page .sxb-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .72) 36%, rgba(10, 10, 10, .15) 70%, rgba(10, 10, 10, 0) 100%),
		linear-gradient(0deg, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, 0) 45%);
}
.sx-brand-page .sxb-hero::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: clamp(120px, 22vw, 340px);
	height: 6px;
	background: var(--sxb-accent);
}
.sx-brand-page .sxb-hero__content { gap: 22px; }
.sx-brand-page .sxb-hero__content > * { max-width: 720px; }
.sx-brand-page .sxb-hero .sx-eyebrow,
.sx-brand-page .sxb-hero .sx-eyebrow .elementor-heading-title { margin: 0; color: rgba(255, 255, 255, .8); }
.sx-brand-page .sxb-hero .sx-eyebrow .elementor-heading-title::before { background: var(--sxb-accent); }
.sx-brand-page .sxb-hero__title .elementor-heading-title { color: #fff; max-width: 13ch; }
.sx-brand-page .sxb-hero__title span { color: var(--sxb-accent); }
.sx-brand-page .sxb-hero .sx-lead p { max-width: 580px; color: rgba(255, 255, 255, .84); }
.sx-brand-page .sxb-hero .sx-btns { margin-top: 10px; }

/* Text wordmarks (no logo files yet), one treatment per brand. */
.sx-brand-page .sxb-wordmark .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	margin: 0 0 6px;
	padding: 10px 16px 9px;
	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: .1em;
	color: #fff;
	background: var(--sx-red);
}
.sx-brand-putoline .sxb-wordmark .elementor-heading-title {
	background: transparent;
	padding: 0 0 10px;
	border-bottom: 3px solid var(--sxb-accent);
	letter-spacing: .22em;
	font-weight: 800;
}
.sx-brand-quixy .sxb-wordmark .elementor-heading-title {
	background: transparent;
	padding: 0;
	font-size: clamp(34px, 3.6vw, 54px);
	font-style: italic;
	letter-spacing: .14em;
	color: #fff;
}
.sx-brand-quixy .sxb-wordmark .elementor-heading-title::after {
	content: '';
	width: 22px;
	height: 15px;
	margin-left: 12px;
	background: var(--sx-red);
	clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.sx-brand-page .sxb-logo-img img { width: clamp(150px, 14vw, 210px); height: auto; display: block; }

/* QUIXY: light hero (own brand, lighter mood). */
.sx-brand-quixy .sxb-hero { color: var(--sx-ink); background-color: #dfe3e6; }
.sx-brand-quixy .sxb-hero::before {
	background:
		linear-gradient(90deg, rgba(246, 246, 244, .97) 0%, rgba(246, 246, 244, .9) 38%, rgba(246, 246, 244, .25) 72%, rgba(246, 246, 244, 0) 100%);
}
.sx-brand-quixy .sxb-hero .sxb-wordmark .elementor-heading-title,
.sx-brand-quixy .sxb-hero__title .elementor-heading-title { color: var(--sx-ink); }
.sx-brand-quixy .sxb-hero .sx-eyebrow .elementor-heading-title { color: var(--sx-ink-2); }
.sx-brand-quixy .sxb-hero .sx-lead p { color: var(--sx-ink-2); }
.sx-brand-quixy .sxb-hero .sx-btn--ghost .elementor-button { color: var(--sx-ink); }
.sx-brand-quixy .sxb-hero .sx-btn--ghost .elementor-button:hover { background: var(--sx-ink); border-color: var(--sx-ink); color: #fff; }

/* KROON-OIL hero: bigger uppercase H1 and room for the advisor bar overlapping the bottom edge. */
.sx-brand-kroon-oil .sxb-hero { min-height: clamp(600px, 50vw, 780px); padding-bottom: clamp(130px, 11vw, 170px); }
.sx-brand-kroon-oil .sxb-hero::after { display: none; }
.sx-brand-kroon-oil .sxb-hero__title .elementor-heading-title { text-transform: uppercase; max-width: 11ch; font-size: clamp(42px, 6.8vw, 104px); }

/* ---------------------------------------------------------------- KROON-OIL oil advisor bar */
.sx-brand-page .sxb-advisor { padding-top: 0; padding-bottom: 0; overflow: visible; z-index: 2; }
.sx-brand-page .sxb-advisor__bar {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 28px 48px;
	margin-top: calc(clamp(70px, 6vw, 96px) * -1);
	padding: clamp(24px, 2.6vw, 38px) clamp(24px, 3vw, 44px);
	max-width: 1080px;
	background: var(--sx-dark-2);
	border-top: 4px solid var(--sxb-accent);
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .55);
	color: #fff;
}
.sx-brand-page .sxb-advisor__text { gap: 8px; flex: 1 1 420px; }
.sx-brand-page .sxb-advisor__text .sx-eyebrow,
.sx-brand-page .sxb-advisor__text .sx-eyebrow .elementor-heading-title { margin: 0; }
.sx-brand-page .sxb-advisor__text .sx-eyebrow .elementor-heading-title::before { background: var(--sxb-accent); }
.sx-brand-page .sxb-advisor__text .sx-h3 .elementor-heading-title { color: #fff; font-size: clamp(20px, 1.8vw, 26px); }
.sx-brand-page .sxb-advisor__text .sx-body p { color: rgba(255, 255, 255, .72); font-size: 15px; }
.sx-brand-page .sxb-advisor__btns { flex: 0 0 auto; flex-wrap: nowrap; }

/* ---------------------------------------------------------------- 02 mission */
.sx-brand-page .sxb-mission { padding-top: clamp(72px, 9vw, 140px); padding-bottom: clamp(64px, 8vw, 120px); }
.sx-brand-page .sxb-mission .sx-wrap { align-items: center; text-align: center; gap: 30px; }
.sx-brand-page .sxb-chev { display: inline-flex; gap: 4px; }
.sx-brand-page .sxb-chev i {
	display: block;
	width: 20px;
	height: 26px;
	background: var(--sx-red);
	clip-path: polygon(0 0, 45% 0, 100% 50%, 45% 100%, 0 100%, 55% 50%);
}
.sx-brand-page .sxb-chev i:nth-child(2) { opacity: .6; }
.sx-brand-page .sxb-chev i:nth-child(3) { opacity: .3; }
.sx-brand-kroon-oil .sxb-chev i { background: #e8b800; }
.sx-brand-page .sxb-mission__text p {
	margin: 0 auto;
	max-width: 980px;
	font-size: clamp(24px, 2.8vw, 42px);
	line-height: 1.3;
	font-weight: 500;
	font-style: italic;
	letter-spacing: -.02em;
	color: var(--sx-ink);
}

/* ---------------------------------------------------------------- category tiles */
.sx-brand-page .sxb-cats__grid { display: grid !important; gap: clamp(14px, 1.6vw, 24px); width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sx-brand-page .sxb-cats__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx-brand-page .sxb-cats__grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sx-brand-page .sxb-cat { display: flex !important; flex-direction: column; color: var(--sx-ink); }
.sx-brand-page .sxb-cat__media {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	margin-bottom: 16px;
	overflow: hidden;
}
.sx-brand-page .sxb-cat__media::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	width: 0;
	background: var(--sxb-accent);
	transition: width .45s var(--sx-ease);
}
.sx-brand-page .sxb-cat:hover .sxb-cat__media::after { width: 100%; }
.sx-brand-page .sxb-cat__media--shot { padding: 12%; background: radial-gradient(120% 90% at 50% 100%, #e6e6e2 0%, #fff 70%); }
.sx-brand-page .sx-sec--soft .sxb-cat__media--shot { background: radial-gradient(120% 90% at 50% 100%, #ececea 0%, #fff 70%); }
.sx-brand-page :not(.sx-sec--soft) > .sx-wrap .sxb-cat__media--shot { background: radial-gradient(120% 90% at 50% 100%, #e4e4e0 0%, var(--sx-soft) 70%); }
.sx-brand-page .sxb-cat__img,
.sx-brand-page .sxb-cat__img .elementor-widget-container { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
.sx-brand-page .sxb-cat__img img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--sx-ease); }
.sx-brand-page .sxb-cat:hover .sxb-cat__img img { transform: scale(1.07) rotate(-1.5deg); }
/* Icon tiles (no products yet / no fitting photo). */
.sx-brand-page .sxb-cat__media--icon {
	background: var(--sx-dark);
	color: #fff;
	transition: background .35s var(--sx-ease);
}
.sx-brand-page .sxb-cat__media--icon::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='72' viewBox='0 0 88 72'%3E%3Cpath d='M8 8h16l14 14-14 14H8l14-14z' fill='%23ffffff' fill-opacity='.05'/%3E%3Cpath d='M52 44h16l14 14-14 14H52l14-14z' fill='%23ffffff' fill-opacity='.04'/%3E%3C/svg%3E");
}
.sx-brand-page .sxb-cat__icon { position: relative; z-index: 1; }
.sx-brand-page .sxb-cat__icon .elementor-icon { font-size: clamp(38px, 3.6vw, 56px); color: #fff; transition: transform .45s var(--sx-ease), color .3s; }
.sx-brand-page .sxb-cat:hover .sxb-cat__icon .elementor-icon { transform: scale(1.1); color: var(--sxb-accent); }
.sx-brand-page .sxb-cat__n { position: absolute; top: 14px; left: 16px; z-index: 1; }
.sx-brand-page .sxb-cat__n .elementor-heading-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .45); }
.sx-brand-page .sxb-cat__label .elementor-heading-title {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
	margin: 0;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--sx-ink);
	min-height: 3.2em;
	line-height: 1.25;
	font-size: clamp(15px, 1.15vw, 18px);
	font-weight: 800;
	color: var(--sx-ink);
}
.sx-brand-page .sxb-cat__label .elementor-heading-title::after { content: '→'; transition: transform .3s var(--sx-ease); }
.sx-brand-page .sxb-cat:hover .sxb-cat__label .elementor-heading-title { color: var(--sx-red); border-color: var(--sx-red); }
.sx-brand-page .sxb-cat:hover .sxb-cat__label .elementor-heading-title::after { transform: translateX(6px); }
.sx-brand-page .sxb-cat__sub p { margin: 8px 0 0; font-size: 13px; color: var(--sx-ink-3); }

/* ---------------------------------------------------------------- USP strip */
.sx-brand-page .sxb-usps { border-bottom: 1px solid var(--sx-line); }
.sx-brand-page .sxb-usps.sx-sec--soft { border-bottom: 0; }
.sx-brand-page .sxb-usps__grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px clamp(20px, 3vw, 48px); width: 100%; }
.sx-brand-page .sxb-usp { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 18px; }
.sx-brand-page .sxb-usp > .sxb-usp__text { flex: 1 1 auto; }
.sx-brand-page .sxb-usp__icon {
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 2px solid var(--sxb-accent);
	background: var(--sxb-accent-soft);
	color: var(--sx-ink);
}
.sx-brand-sonax .sxb-usp__icon, .sx-brand-quixy .sxb-usp__icon { color: var(--sx-red); }
.sx-brand-page .sxb-usp__icon .elementor-icon { font-size: 22px; }
.sx-brand-page .sxb-usp__text .elementor-heading-title { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 800; color: var(--sx-ink); }

/* ---------------------------------------------------------------- top products (wd_products carousel) */
.sx-brand-page .sxb-products__carousel { width: 100%; }
.sx-brand-page .sxb-products .wd-product { background: #fff; }
.sx-brand-page .sxb-products .wd-carousel-container { position: relative; }
/* Fallback block: shown only while the brand has no products (the carousel then renders nothing). */
.sx-brand-page .sxb-empty {
	display: none !important;
	flex-direction: row;
	align-items: center;
	gap: 24px 36px;
	padding: clamp(24px, 3vw, 44px);
	background: #fff;
	border: 1px solid var(--sx-line);
	border-left: 4px solid var(--sxb-accent);
}
.sx-brand-page .sx-sec--soft .sxb-empty { background: #fff; }
.sx-brand-page :not(.sx-sec--soft) > .sx-wrap > .sxb-empty { background: var(--sx-soft); }
.sx-brand-page .sxb-products:not(:has(.wd-product)) .sxb-empty { display: flex !important; }
.sx-brand-page .sxb-products:not(:has(.wd-product)) .sxb-products__carousel { display: none; }
.sx-brand-page .sxb-empty > .sxb-empty__icon {
	flex: 0 0 76px;
	width: 76px;
	--width: 76px;
	height: 76px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	background: var(--sx-dark);
	color: #fff;
}
.sx-brand-page .sxb-empty__icon .elementor-icon { font-size: 30px; }
.sx-brand-page .sxb-empty__text { flex: 1 1 380px; gap: 8px; }
.sx-brand-page .sxb-empty .sx-btns { flex: 0 0 auto; }

/* ---------------------------------------------------------------- new product */
.sx-brand-page .sxb-new__split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.sx-brand-page .sxb-new__media {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 8%;
	background: radial-gradient(120% 90% at 50% 100%, #e6e6e2 0%, var(--sx-soft) 65%);
	overflow: hidden;
}
.sx-brand-page .sxb-new__media::before {
	display: none; /* review: the "Ново" eyebrow beside it already says this */
	content: 'Ново';
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 1;
	padding: 6px 10px;
	background: var(--sx-red);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.sx-brand-page .sxb-new__img,
.sx-brand-page .sxb-new__img .elementor-widget-container,
.sx-brand-page .sxb-new__img a { height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; }
.sx-brand-page .sxb-new__img img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--sx-ease); }
.sx-brand-page .sxb-new__media:hover img { transform: scale(1.05) rotate(-1deg); }
.sx-brand-page .sxb-new__text { gap: 18px; }
.sx-brand-page .sxb-new__text .sx-eyebrow { margin-bottom: -8px; }
.sx-brand-page .sxb-new__name .elementor-heading-title { font-size: clamp(20px, 1.8vw, 26px); color: var(--sx-ink); }
.sx-brand-page .sxb-new__text .sx-btns { margin-top: 8px; }

/* ---------------------------------------------------------------- SONAX trainings (#obuchenia) */
.sx-brand-page .sxb-train { scroll-margin-top: 90px; }
.sx-brand-page .sxb-train__split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.sx-brand-page .sxb-train__media { position: relative; }
.sx-brand-page .sxb-train__media::before { content: ''; position: absolute; inset: 22px 22px -22px -22px; border: 2px solid var(--sx-red); }
.sx-brand-page .sxb-train__img { position: relative; z-index: 1; }
.sx-brand-page .sxb-train__img img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sx-brand-page .sxb-train__tag { position: absolute; right: 0; bottom: 0; z-index: 2; }
.sx-brand-page .sxb-train__tag .elementor-heading-title { margin: 0; padding: 16px 22px; background: var(--sx-red); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sx-brand-page .sxb-train__text { gap: 22px; }
.sx-brand-page .sxb-train__text .sx-eyebrow { margin-bottom: -6px; }
.sx-brand-page .sxb-train .sx-lead p { max-width: 620px; }
.sx-brand-page .sxb-days { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sx-brand-page .sxb-day { padding: 22px 22px 20px; background: rgba(255, 255, 255, .05); border-top: 3px solid var(--sx-red); gap: 6px; }
.sx-brand-page .sxb-day__n .elementor-heading-title { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.sx-brand-page .sxb-day__title .elementor-heading-title { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #fff; }
.sx-brand-page .sxb-day__list ul { margin: 0; padding: 0; list-style: none; }
.sx-brand-page .sxb-day__list li { position: relative; padding-left: 16px; margin: 0 0 7px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.sx-brand-page .sxb-day__list li::before { content: ''; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--sx-red); }
.sx-brand-page .sxb-train .sxb-ticks { margin-top: 4px; }
.sx-brand-page .sxb-steps {
	display: grid !important;
	grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr));
	gap: 0;
	margin-top: clamp(56px, 6vw, 88px);
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.sx-brand-page .sxb-steps__title .elementor-heading-title { margin: 0; padding: 28px 24px 0 0; font-size: clamp(20px, 1.8vw, 26px); font-weight: 900; letter-spacing: -.02em; color: #fff; }
.sx-brand-page .sxb-step { padding: 28px 24px 0; border-left: 1px solid rgba(255, 255, 255, .12); gap: 8px; }
.sx-brand-page .sxb-step__n .elementor-heading-title { margin: 0 0 6px; font-size: 44px; line-height: 1; font-weight: 900; letter-spacing: -.04em; color: var(--sx-red); }
.sx-brand-page .sxb-step__title .elementor-heading-title { margin: 0; font-size: 15px; font-weight: 800; color: #fff; }
.sx-brand-page .sxb-step__text p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .65); }

/* ---------------------------------------------------------------- KROON-OIL industries */
.sx-brand-page .sxb-inds__grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); width: 100%; }
.sx-brand-page .sxb-ind {
	display: flex !important;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--sx-line);
	color: var(--sx-ink);
	transition: border-color .25s var(--sx-ease), box-shadow .25s var(--sx-ease), transform .25s var(--sx-ease);
}
.sx-brand-page .sxb-ind:hover { border-color: var(--sx-ink); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); transform: translateY(-3px); }
.sx-brand-page .sxb-ind__top {
	position: relative;
	display: flex !important;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--sx-dark);
	color: #fff;
	overflow: hidden;
}
.sx-brand-page .sxb-ind__top::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--sxb-accent); transition: width .45s var(--sx-ease); }
.sx-brand-page .sxb-ind:hover .sxb-ind__top::after { width: 100%; }
.sx-brand-page .sxb-ind__icon .elementor-icon { font-size: clamp(36px, 3.2vw, 50px); color: #fff; transition: color .3s, transform .45s var(--sx-ease); }
.sx-brand-page .sxb-ind:hover .sxb-ind__icon .elementor-icon { color: var(--sxb-accent); transform: scale(1.08); }
.sx-brand-page .sxb-ind__n { position: absolute; top: 14px; left: 16px; }
.sx-brand-page .sxb-ind__n .elementor-heading-title { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .14em; color: rgba(255, 255, 255, .45); }
.sx-brand-page .sxb-ind__body { padding: 20px 20px 22px; gap: 8px; flex: 1; }
.sx-brand-page .sxb-ind__body .sx-h3 .elementor-heading-title { font-size: 18px; }
.sx-brand-page .sxb-ind__body .sx-body { flex: 1; }
.sx-brand-page .sxb-ind__body .sx-body p { font-size: 14px; line-height: 1.55; }
.sx-brand-page .sxb-ind__body .sxb-more { margin-top: 6px; }

/* ---------------------------------------------------------------- QUIXY where to buy */
.sx-brand-page .sxb-where { scroll-margin-top: 90px; }
.sx-brand-page .sxb-where__head { display: flex !important; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 24px 48px; margin-bottom: clamp(28px, 3vw, 44px); flex-wrap: wrap; }
.sx-brand-page .sxb-where__text { gap: 14px; flex: 1 1 520px; }
.sx-brand-page .sxb-where__text .sx-eyebrow { margin-bottom: 4px; }

/* ---------------------------------------------------------------- B2B band */
.sx-brand-page .sxb-b2b { padding-top: clamp(56px, 6.5vw, 100px); padding-bottom: clamp(56px, 6.5vw, 100px); }
.sx-brand-page .sxb-b2b__row { display: flex !important; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 28px 64px; }
.sx-brand-page .sxb-b2b__text { gap: 18px; flex: 1 1 600px; }
.sx-brand-page .sxb-b2b__text .sx-eyebrow { margin-bottom: 0; }
.sx-brand-page .sxb-b2b .sx-h2 .elementor-heading-title { max-width: 18ch; }
.sx-brand-page .sxb-b2b__btns { flex: 0 0 auto; }

/* ---------------------------------------------------------------- about */
.sx-brand-page .sxb-about__split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.sx-brand-page .sxb-about__media { position: relative; }
.sx-brand-page .sxb-about__media::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 34%; height: 6px; background: var(--sxb-accent); }
.sx-brand-page .sxb-about__img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sx-brand-page .sxb-about__text { gap: 20px; }
.sx-brand-page .sxb-about__text .sx-eyebrow { margin-bottom: -6px; }
.sx-brand-page .sxb-badges { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.sx-brand-page .sxb-badge { padding: 18px 16px 16px; border: 1px solid var(--sx-line); border-top: 3px solid var(--sxb-accent); gap: 6px; background: #fff; }
.sx-brand-page .sxb-badge__big .elementor-heading-title { margin: 0; overflow-wrap: break-word; font-size: clamp(15px, 1.3vw, 21px); line-height: 1.1; font-weight: 900; letter-spacing: -.02em; color: var(--sx-ink); }
.sx-brand-page .sxb-badge__small p { margin: 0; font-size: 12px; line-height: 1.4; font-weight: 600; color: var(--sx-ink-3); }

/* ---------------------------------------------------------------- tips (hand-picked posts) */
.sx-brand-page .sxb-post { display: flex !important; flex-direction: column; background: #fff; color: var(--sx-ink); transition: transform .3s var(--sx-ease), box-shadow .3s var(--sx-ease); }
.sx-brand-page .sxb-post:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .35); }
.sx-brand-page .sxb-post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sx-soft); }
.sx-brand-page .sxb-post__img,
.sx-brand-page .sxb-post__img .elementor-widget-container { height: 100%; }
.sx-brand-page .sxb-post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--sx-ease); }
.sx-brand-page .sxb-post:hover .sxb-post__img img { transform: scale(1.05); }
.sx-brand-page .sxb-post__body { padding: 22px 24px 24px; gap: 10px; flex: 1; }
.sx-brand-page .sxb-post__eyebrow .elementor-heading-title { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sx-red); }
.sx-brand-page .sxb-post__title { flex: 1; }
.sx-brand-page .sxb-post__title .elementor-heading-title { margin: 0 0 8px; font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--sx-ink); transition: color .2s; }
.sx-brand-page .sxb-post:hover .sxb-post__title .elementor-heading-title { color: var(--sx-red); }
.sx-brand-page .sxb-post__more .elementor-heading-title { margin: 0; font-size: 13px; font-weight: 800; color: var(--sx-ink); }

/* ---------------------------------------------------------------- hub /marki/ */
.sx-brand-hub .sxb-hero--hub { min-height: clamp(440px, 36vw, 580px); }
.sx-brand-hub .sxb-hero__title .elementor-heading-title { max-width: none; }
.sx-brand-hub .sxb-hubcard { display: flex !important; flex-direction: column; gap: 14px; color: var(--sx-ink); }
.sx-brand-hub .sxb-hubcard__photo { aspect-ratio: 3 / 4; gap: 6px; }
.sx-brand-hub .sxb-hubcard__photo::before { background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .1) 35%, rgba(0, 0, 0, .86) 100%); }
.sx-brand-hub .sxb-hubcard:hover .sxb-hubcard__photo::after { width: 100%; }
.sx-brand-hub .sxb-hubcard__origin { position: absolute; top: clamp(20px, 2vw, 30px); left: clamp(20px, 2vw, 32px); }
.sx-brand-hub .sxb-hubcard__origin p { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.sx-brand-hub .sxb-hubcard__mark .elementor-heading-title { margin: 0; font-size: clamp(26px, 2.4vw, 38px); font-weight: 900; letter-spacing: .02em; line-height: 1; color: #fff; }
.sx-brand-hub .sxb-hubcard__desc p { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--sx-ink-2); }
.sx-brand-hub .sxb-hubcard .sxb-more { margin-top: auto; }
.sx-brand-hub .sxb-lm {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	margin-top: clamp(40px, 5vw, 72px);
	padding: clamp(24px, 3vw, 40px);
	border: 1px solid var(--sx-line);
	border-left: 4px solid var(--sx-red);
	background: var(--sx-soft);
}
.sx-brand-hub .sxb-lm__text { gap: 10px; flex: 1 1 420px; }
.sx-brand-hub .sxb-lm__text .sx-eyebrow { margin-bottom: 0; }
.sx-brand-hub .sxb-lm__mark .elementor-heading-title { margin: 0; font-size: clamp(26px, 2.4vw, 36px); font-weight: 900; letter-spacing: .04em; color: var(--sx-ink); }

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1024px) {
	.sx-brand-page .sxb-new__split,
	.sx-brand-page .sxb-train__split,
	.sx-brand-page .sxb-about__split { grid-template-columns: 1fr; }
	.sx-brand-page .sxb-new__media { aspect-ratio: 16 / 9; padding: 5%; }
	.sx-brand-page .sxb-about__img img { aspect-ratio: 16 / 9; }
	.sx-brand-page .sxb-hero::before { background: linear-gradient(0deg, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .6) 55%, rgba(10, 10, 10, .25) 100%); }
	.sx-brand-quixy .sxb-hero::before { background: linear-gradient(0deg, rgba(246, 246, 244, .97) 0%, rgba(246, 246, 244, .85) 55%, rgba(246, 246, 244, .35) 100%); }
	.sx-brand-page .sxb-cats__grid,
	.sx-brand-page .sxb-cats__grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sx-brand-page .sxb-cats__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sx-brand-page .sxb-usps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* review: 5 industry cards as 3 + 2 without an empty slot; shorter dark icon areas */
	.sx-brand-page .sxb-inds__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.sx-brand-page .sxb-inds__grid > .sxb-ind { grid-column: span 2; }
	.sx-brand-page .sxb-inds__grid > .sxb-ind:nth-child(n+4) { grid-column: span 3; }
	.sx-brand-page .sxb-ind__top { aspect-ratio: auto; height: 170px; }
	.sx-brand-page .sxb-cat__media--icon { aspect-ratio: 4 / 3; }
	.sx-brand-page .sxb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sx-brand-page .sxb-steps__title { grid-column: 1 / -1; }
	.sx-brand-page .sxb-step { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .12); padding: 24px 24px 0 0; }
	.sx-brand-page .sxb-train__media::before { display: none; }
	.sx-brand-page .sxb-train__img img { aspect-ratio: 16 / 10; }
	.sx-brand-page .sxb-about__media::after { display: none; }
	.sx-brand-page .sxb-advisor__bar { flex-wrap: wrap; }
	.sx-brand-page .sxb-b2b__row { flex-wrap: wrap; align-items: flex-start; }
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 767px) {
	.sx-brand-page .sxb-hero { min-height: 560px; padding-top: 100px; padding-bottom: 48px; }
	.sx-brand-kroon-oil .sxb-hero { min-height: 600px; padding-bottom: 110px; }
	.sx-brand-page .sxb-hero__title .elementor-heading-title { font-size: clamp(36px, 10.5vw, 46px); }
	.sx-brand-kroon-oil .sxb-hero__title .elementor-heading-title { font-size: clamp(38px, 11.5vw, 50px); }
	.sx-brand-page .sxb-hero__content { gap: 18px; }
	.sx-brand-page .sxb-hero .sx-eyebrow .elementor-heading-title { font-size: 11px; letter-spacing: .14em; }

	.sx-brand-page .sxb-advisor__bar { flex-direction: column; align-items: stretch; margin-top: -70px; padding: 24px 20px; }
	.sx-brand-page .sxb-advisor__btns { flex-wrap: wrap; }
	.sx-brand-page .sxb-advisor__text { flex-basis: auto; }

	.sx-brand-page .sxb-mission .sx-wrap { gap: 22px; }
	.sx-brand-page .sxb-mission__text p { font-size: 22px; line-height: 1.38; }

	.sx-brand-page .sxb-cats__grid.sx-rail,
	.sx-brand-page .sxb-inds__grid.sx-rail { display: flex !important; }
	.sx-brand-page .sxb-cats__grid.sx-rail > .sxb-cat { flex-basis: 58% !important; max-width: 58%; }
	.sx-brand-page .sxb-inds__grid.sx-rail > .sxb-ind { flex-basis: 72% !important; max-width: 72%; }
	.sx-brand-page .sx-rail > .sxb-post { flex-basis: 82% !important; max-width: 82%; }
	.sx-brand-hub .sx-rail > .sxb-hubcard { flex-basis: 72% !important; max-width: 72%; }

	.sx-brand-page .sxb-usps__grid { grid-template-columns: 1fr; gap: 16px; }
	.sx-brand-page .sxb-usp__icon { flex-basis: 52px; width: 52px; height: 52px; }

	.sx-brand-page .sxb-empty { flex-direction: column; align-items: flex-start; }
	.sx-brand-page .sxb-empty .sx-btns { width: 100%; }

	.sx-brand-page .sxb-days { grid-template-columns: 1fr; }
	.sx-brand-page .sxb-ticks ul { grid-template-columns: 1fr; }
	.sx-brand-page .sxb-steps { grid-template-columns: 1fr; margin-top: 48px; }
	.sx-brand-page .sxb-step { display: grid !important; grid-template-columns: 48px 1fr; column-gap: 12px; padding: 18px 0 0; }
	.sx-brand-page .sxb-step__n { grid-row: span 2; }
	.sx-brand-page .sxb-step__n .elementor-heading-title { font-size: 34px; }

	.sx-brand-page .sxb-b2b__row { flex-direction: column; align-items: stretch; }
	.sx-brand-page .sxb-b2b__row > .e-con { width: 100%; --width: 100%; }
	.sx-brand-page .sxb-b2b__text,
	.sx-brand-page .sxb-where__text,
	.sx-brand-page .sxb-empty__text,
	.sx-brand-hub .sxb-lm__text { flex: 0 0 auto; }
	.sx-brand-page .sxb-badges { grid-template-columns: 1fr 1fr; }
	.sx-brand-page .sxb-badges .sxb-badge:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.sx-brand-page .sxb-where__head { flex-direction: column; align-items: stretch; }
	.sx-brand-page .sxb-where__head .sx-btns { width: 100%; }
	.sx-brand-hub .sxb-lm { flex-direction: column; align-items: stretch; }
}