@font-face {
	font-family: 'Helvetica Neue';
	src: url(./fonts/HelveticaNeueRegular.woff2) format('woff2'),
		url(./fonts/HelveticaNeueRegular.ttf) format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url(./fonts/HelveticaNeueBold.woff2) format('woff2'),
		url(./fonts/HelveticaNeueBold.ttf) format('truetype');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Helvetica Neue';
	src: url(./fonts/HelveticaNeueMedium.woff2) format('woff2'),
		url(./fonts/HelveticaNeueMedium.ttf) format('truetype');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url(./fonts/Inter-Light.woff2) format('woff2'),
		url(./fonts/Inter-Light.ttf) format('truetype');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url(./fonts/Inter-Regular.woff2) format('woff2'),
		url(./fonts/Inter-Regular.ttf) format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url(./fonts/Inter-SemiBold.woff2) format('woff2'),
		url(./fonts/Inter-SemiBold.ttf) format('truetype');
	font-weight: 600;
	font-display: swap;
}

:root {
	--primary-font: 'Helvetica Neue', sans-serif;
	--secondary-font: 'Inter', sans-serif;

	--primary-light: #FF7A1A;
	--primary-dark: #FF7A1A;
	--primary-gradient-start: #F2522E;
	--primary-gradient-end: #FF7A1A;
	--accent-text: #fff;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	max-width: 480px;
	width: 100%;

	margin: 0 auto;

	background: #2c2c2c;
	font-family: var(--primary-font);
	font-weight: 400;
	font-size: 15px;
	line-height: 100%;
	color: #fff;
	cursor: default;
}

img {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

ul,
ol,
li {
	list-style: none;
}

.container {
	padding: 0 16px;
}

.main_wrapper {
	margin: 0 auto;
	max-width: 480px;
	width: 100%;

	background: #000;
	min-height: 100vh;

	display: flex;
	flex-direction: column;
}

.header {
	overflow: hidden;
	pointer-events: none;
}

.header__wrapper {
	display: flex;
	gap: 12px;
	width: max-content;

	white-space: nowrap;

	background: var(--primary-dark);
	color: var(--accent-text);

	padding: 13px 0px;

	will-change: transform;
	animation: scrolling 10s linear infinite;
}

.header__content {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
}

.header__item {
	display: inline-block;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 400;
	line-height: 100%;
}

.header__content img {
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
}

.header--static .header__wrapper,
.header__wrapper--static {
	width: 100%;
	justify-content: center;
	animation: none !important;
	transform: none !important;
}

.header--static .header__content,
.header__content--static {
	width: 100%;
	justify-content: center;
}

.header--static .header__content img,
.header__content--static img {
	display: none;
}

.header--static .header__item,
.header__item--static {
	text-align: center;
}

@keyframes marquee {
	0% {
		transform: translateX(100%);
	}

	100% {
		transform: translateX(-100%);
	}
}

@keyframes scroll-text {
	to {
		transform: translateX(-100%);
	}
}

@keyframes scrolling {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(calc(-100% / 3));
	}
}


.hero__img-wrapper {
	position: relative;
}

.hero__img-wrapper::before {
	content: '';

	background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000200 80% 100%);
	position: absolute;

	z-index: 1;

	width: 100%;
	height: 28px;

	left: 0;
	right: 0;
	bottom: 0;
}

.hero__img-wrapper::after {
	content: '';

	background: linear-gradient(180deg, #000200 0%, rgba(0, 0, 0, 0) 100%);
	position: absolute;

	z-index: 2;

	width: 100%;
	height: 28px;

	left: 0;
	right: 0;
	top: 0;
}

.hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

.hero__content {
	position: relative;
	top: -8px;

	background: #000;
	z-index: 1;

	padding-top: 40px;
}

.hero__price {
	outline: 2px solid var(--primary-light);
	display: inline-block;

	position: absolute;
	top: -31px;
	left: 50%;
	transform: translateX(-50%);

	border-radius: 5px;
}

.hero__price-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;

	background: var(--primary-light);
	margin: 2px;

	border-radius: 5px;

	padding: 6px 10px;
}

.hero__price-col {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hero__price-tag {

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1px;
	border-radius: 3px;

	font-size: 8px;
	font-weight: 400;

	background: #000;
	color: #fff;
}

.hero__price-old {
	font-weight: 400;
	font-size: 16px;
	text-decoration: line-through;
	color: rgba(0, 0, 0, 0.5);
	text-wrap: nowrap;
	white-space: nowrap;
}

.hero__price-line {
	height: 30px;
	width: 1px;

	background: var(--primary-dark);
	flex-shrink: 0;
}

.hero__price-now {
	font-weight: 700;
	font-size: 36px;
	text-wrap: nowrap;
	white-space: nowrap;
	color: #000;
}

.hero__title {
	font-weight: 700;
	font-size: 20px;
	line-height: 120%;
}

.hero__rating {
	display: flex;
	align-items: center;
	gap: 8px;

	margin-top: 8px;
}

.hero__rating-value {
	font-weight: 500;
	font-size: 16px;
	color: #fff;
}

.hero__rating-reviews {
	font-size: 15px;
	font-weight: 400;
	text-decoration: underline;

	color: rgba(255, 255, 255, 0.6)
}

.hero__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;

	margin-top: 20px;
}


.hero__card {
	display: flex;
	align-items: center;
	gap: 8px;

	position: relative;

	border: 1px solid #323431;
	border-radius: 8px;

	overflow: hidden;
}

.hero__card-img {
	position: relative;
	top: -1px;
	bottom: -1px;
	left: -1px;

	margin-bottom: -2px;
	padding: 7px;

	background: #242424;
	border: 1px solid #323431;
	border-radius: 8px;
}

.hero__card-img img {
	width: 24px;
	height: 24px;
	object-fit: contain;
	object-position: center;
}

.hero__card-desc {
	font-weight: 400;
	font-weight: 14;
	text-align: center;
}

.hero__btn {
	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;

	margin: 30px 20px;
	padding: 16px 0px;

	border: none;
	border-radius: 8px;
	background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	color: var(--accent-text);

	font-family: var(--primary-font);
	font-weight: 500;
	font-size: 20px;

	line-height: 120%;

	cursor: pointer;

	transition: 0.3s;
}

.hero__btn:hover {
	opacity: 0.8;
}

.hero__btn span {
	font-weight: 400;
	font-size: 20px;
	color: rgba(255, 255, 255, 0.72);
	text-decoration: line-through;
}


.offer {
	margin: 0 16px 25px 16px;
}

.offer-header {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

.offer-timer {
	color: var(--primary-dark);
	font-size: 18px;
	font-weight: bold;
}

.offer-container {
	/* background: #fff; */
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Who: Amir Khusenov */
/* When: 2026-03-29 */
/* What: Show offer options by default; previously hidden container prevented
   radio options from rendering despite markup being present. */
.offer .offer-container {
	display: flex;
}

/* Who: Amir Khusenov */
/* When: 2026-03-29 */
/* What: Hide full offer options container when admin disables all offer
   options without removing the surrounding offer section. */
.offer .offer-container.offer-container--hidden {
	display: none !important;
}

.offer-option {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 15px 20px;
	cursor: pointer;
	position: relative;
	transition: border 0.3s ease;
	background-color: #242424;
	border: 1px solid transparent;
	border-radius: 10px;
}

/* Who: Amir Khusenov
   When: 2026-04-25
   What: Give the active offer card an orange border without layout shift;
         support both JS-selected class and native checked-radio state. */
.offer-option--selected,
.offer-option:has(.offer-radio:checked) {
	border: 1px solid var(--primary-light);
	/* background-color: #f0f5ed; */
}

.offer-radio {
	display: none;
}

/* Who: Amir Khusenov */
/* When: 2026-03-29 */
/* What: Restore visible offer option indicator so users can see the selected
   radio choice; previously the marker was hidden entirely. */
.custom-radio-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 2px solid var(--primary-dark);
	border-radius: 50%;
	flex: 0 0 auto;
}

.offer-radio:checked+.custom-radio-mark::before {
	content: "";
	width: 10px;
	height: 10px;
	background-color: var(--primary-dark);
	border-radius: 50%;
}

.offer-label-right {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.offer-label-top-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.offer-label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: white;
}

.offer-label-top-line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.offer-title {
	font-size: 18px;
	font-weight: bold;
	color: white;
}

.offer-subtext {
	padding-top: 7px;
	font-size: 14px;
	color: white;
}

.offer-pricing {
	text-align: right;
}

.offer-price-current {
	margin-top: 5px;
	font-size: 18px;
	font-weight: bold;
	color: white;

}

.offer-price-old {
	padding-top: 5px;
	font-size: 14px;
	text-decoration: line-through;
	-webkit-text-decoration-line: line-through;
	color: #aaa;
}

.offer-discount {
	background: var(--primary-dark);
	color: #1B1B1B;
	font-size: 12px;
	border-radius: 2px;
	padding: 1px 6px;
	display: inline-block;
}

.offer-badge {
	position: absolute;
	top: -10px;
	right: 10px;
	background: var(--primary-dark);
	color: #1B1B1B;
	font-size: 10px;
	padding: 4px 8px;
	border-radius: 3px;
	font-weight: bold;
}


.offer-button {
	display: block;
	margin-top: 20px;
	background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	color: var(--accent-text);
	padding: 15px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	border-radius: 5px;
	cursor: pointer;

	border: 0;
	width: 100%;
}

.offer-quantity {
	text-align: center;
	margin-top: 15px;
	font-size: 12px;
}

.offer-quantity-number {
	background-color: var(--primary-dark);
	color: #1B1B1B;
	font-weight: bold;
	padding: 5px;
}

.offer-button:hover {
	filter: brightness(1.05);
}

.advantages {
	margin-bottom: 1.5rem;
}

.advantages__inner {
	display: flex;
	justify-content: space-between;

	position: relative;
}

.advantages__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;

	width: 101px;

	z-index: 1;
}

.advantages__item-img {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 72px;
	height: 72px;

	background: #1B1B1B;
	border: 2px solid #373535;
	outline: 3px solid #000;
	border-radius: 50%;
}

.advantages__item-title {
	margin-top: 13px;

	font-weight: 700;
	font-size: 14px;
}

.advantages__item-desc {
	margin-top: 7px;

	color: rgba(255, 255, 255, 0.5);

	font-weight: 400;
	font-size: 14px;
	line-height: 120%;
}

.advantages__hr {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 36px;
	height: 2px;

	background: #373535;
}

/* Who: Amir Khusenov
   When: 2026-04-23
   What: Replace legacy history card styling with new screenshot-based layout:
         gradient panel, hero image with text overlay, three icon cards, and
         bottom accent note block with highlighted left border. */
.history {}

/* Who: Amir Khusenov
   When: 2026-04-24
   What: Restore legacy history block styling (old layout mode) including the
         orange reward icon badge and classic image/content card structure. */
.history--legacy .history__item {
	background: #1B1B1B;
	border: 2px solid #373535;
	border-radius: 24px;
	overflow: hidden;
}

.history--legacy .history__item-img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

.history--legacy .history__item-content {
	position: relative;
	padding: 20px;
}

.history--legacy .history__item-content::after {
	content: '';
	position: absolute;
	top: -10px;
	right: 0;
	width: 52px;
	height: 52px;
	background-color: #FF8A00;
	-webkit-mask-image: url(./imgs/icons/reward.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-image: url(./imgs/icons/reward.svg);
	mask-repeat: no-repeat;
	mask-size: contain;
}

.history--legacy .history__item-title {
	font-weight: 700;
	font-size: 20px;
}

.history--legacy .history__item-desc {
	margin-top: 14px;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 137%;
	letter-spacing: 0.25px;
}

.history__panel {
	position: relative;

	padding: 12px 12px 14px;

	background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
	border: 1px solid #373535;
	border-radius: 26px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

	overflow: hidden;
}

.history__hero {
	position: relative;

	border-radius: 20px;
	border: 1px solid #373535;

	overflow: hidden;
}

.history__hero::after {
	content: '';

	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;

	background:
		linear-gradient(180deg, rgba(255, 122, 26, 0.14) 0%, rgba(0, 0, 0, 0) 32%),
		linear-gradient(180deg, rgba(5, 5, 5, 0.08) 0%, rgba(5, 5, 5, 0.94) 78%, #050505 100%);
}

.history__hero-img {
	width: 100%;
	height: auto;
	min-height: 335px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
}

.history__hero-content {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 16px;
	z-index: 1;

	text-align: center;
}

.history__hero-kicker {
	margin-bottom: 8px;

	color: rgba(255, 255, 255, 0.78);

	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 12px;
	line-height: 138%;
	letter-spacing: 0.2px;
}

.history__hero-kicker:empty {
	display: none;
}

.history__hero-title {
	font-weight: 700;
	font-size: 20px;
	line-height: 96%;
	letter-spacing: 0.35px;
	text-transform: uppercase;
	text-wrap: balance;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.history__hero-subtitle {
	margin-top: 10px;

	color: rgba(255, 255, 255, 0.84);

	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 140%;
	letter-spacing: 0.2px;
}

.history__cards {
	margin-top: 14px;

	display: grid;
	gap: 12px;
}

.history__card {
	display: grid;
	grid-template-columns: 66px 1fr;
	align-items: start;
	gap: 12px;

	padding: 14px;

	background: linear-gradient(180deg, #1b1b1b 0%, #131313 100%);
	border: 1px solid #373535;
	border-radius: 14px;
}

.history__card-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 66px;
	height: 56px;

	background: linear-gradient(180deg, #3a2419 0%, #2b1b14 100%);
	border: 1px solid rgba(255, 122, 26, 0.22);
	border-radius: 14px;
}

/* Who: Amir Khusenov
   When: 2026-04-25
   What: Tint history SVG icons through CSS masks instead of img filters so
         iOS Safari applies the brand orange color consistently. */
.history__card-icon-wrap::before {
	content: '';

	display: block;
	width: 28px;
	height: 28px;

	background-color: var(--primary-dark);
	-webkit-mask-image: var(--history-card-icon-url);
	mask-image: var(--history-card-icon-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.history__card-icon {
	width: 28px;
	height: 28px;
	object-fit: contain;
	/* Who: Amir Khusenov
	   When: 2026-04-25
	   What: Keep the img as a DOM fallback/source reference while the visible
	         icon is rendered by the mask pseudo-element for Safari reliability. */
	display: none;
}

.history__card-copy {
	min-width: 0;
}

.history__card-title {
	font-weight: 700;
	font-size: 16px;
	line-height: 120%;
	letter-spacing: 0.2px;
	text-transform: uppercase;
}

.history__card-text {
	margin-top: 6px;

	color: rgba(255, 255, 255, 0.8);

	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 136%;
	letter-spacing: 0.12px;
}

.history__note {
	margin-top: 14px;

	padding: 13px 14px 13px 16px;

	background: linear-gradient(90deg, rgba(44, 20, 8, 0.98) 0%, rgba(30, 14, 8, 0.94) 100%);
	border-left: 4px solid var(--primary-dark);
	border-radius: 12px;

	color: rgba(255, 241, 226, 0.98);

	font-family: var(--secondary-font);
	font-style: italic;
	font-weight: 600;
	font-size: 14px;
	line-height: 138%;
	letter-spacing: 0.2px;
}

/* Who: Amir Khusenov
   When: 2026-04-23
   What: Reduce history card icon-wrap footprint on narrow screens (<410px)
         so text has more room and card layout stays balanced without overflow. */
@media (max-width: 409px) {
	.history__card {
		grid-template-columns: 58px 1fr;
		gap: 10px;
		padding: 12px;
	}

	.history__card-icon-wrap {
		width: 58px;
		height: 48px;
		border-radius: 12px;
	}

	.history__card-icon {
		width: 24px;
		height: 24px;
	}

	.history__card-icon-wrap::before {
		width: 24px;
		height: 24px;
	}
}

.desc {

	position: relative;
}

.desc-image {
	margin-top: 14px;

	position: relative;
}

/* Who: Amir Khusenov
   When: 2026-04-10
   What: Add explicit overlay stacking and pointer-event isolation for desc-image
         gradients so iOS Safari consistently renders top/bottom shading above the
         media and does not lose it under replaced element paint quirks. */
.desc-image::before {
	content: '';

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;

	height: 98px;
	background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
	;
}

.desc-image::after {
	content: '';

	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;

	height: 110px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
	;
}


.desc__img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 1/1;

}

.desc__title {
	margin-top: 24px;

	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	text-align: center;
}


.desc__options {
	margin-top: 20px;
}

.desc__item {
	display: flex;
	justify-content: space-between;
	padding-bottom: 12px;

	border-bottom: 1px solid #3B3D3B;
}

.desc__item:not(:first-child) {
	padding-top: 15px;
}

.desc__item:last-child {
	border: none;
}

.desc__item-title {
	display: flex;
	gap: 8px;


	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;

	color: rgba(255, 255, 255, 0.7);
}

.desc__item-title::before {
	content: '';

	display: block;
	width: 14px;
	height: 14px;
	background-image: url(./imgs/icons/green-star.svg);
	background-repeat: no-repeat;
	background-size: contain;
}

.desc__item-span {
	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 14px;
	line-height: 100%;
	text-align: right;
}

.forwho {
	position: relative;

	margin-top: 14px;
	overflow: hidden;
}

.forwho::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 28px;
	background: linear-gradient(180deg, #000200 0%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	z-index: 1;
}

.forwho::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 28px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000200 80% 100%);
	pointer-events: none;
	z-index: 1;
}

.forwho__img {
	display: block;
	width: 100%;
	height: auto;
}

.forwho__card {
	position: absolute;
	bottom: 20px;
	left: 16px;
	right: 16px;
	z-index: 2;

	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 16px 20px;

	border: 1px solid #353535;
	border-radius: 20px;
	background: #1B1B1B;
}

.forwho__card-title {
	font-weight: 400;
	font-size: 16px;
	text-transform: uppercase;
	line-height: 120%;
}

.forwho__card-desc {
	margin-top: 8px;

	font-weight: 700;
	font-size: 16px;
	line-height: 115%;
	text-align: center;
}

/* Who: Amir Khusenov
   When: 2026-04-02
   What: Explicitly block content-visibility on .clients — Safari 18 has
         rendering bugs (WebKit #277573) where sections with JS sliders stay
         invisible. Belt-and-suspenders alongside removing it from @supports. */
.clients {
	margin-top: 32px;
	content-visibility: visible;
}

.clients__title {
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	text-align: center;
}

.clients__rating {
	display: flex;
	align-items: center;

	margin: 0 auto;

	width: fit-content;

	margin-top: 8px;
	padding: 0 0 0 12px;

	border: 1px solid #2E2F2E;
	border-radius: 20px;

	overflow: hidden;
}

.clients__rating-img {
	width: 88px;
}

.clients__rating-value {
	margin-left: 5px;

	color: var(--primary-dark);

	font-weight: 700;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: -1px;
}

.clients__rating-reviews {
	background: #242424;

	padding: 9px 11px;
	margin-left: 8px;

	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: -0.25px;
}

/* Who: Amir Khusenov
   When: 2026-04-23
   What: Style clients CTA replacement as offer-option cards (same visual
         language as offer block) with dedicated vertical spacing in clients. */
.clients-offer-options {
	margin: 24px 16px 30px;
	gap: 14px;
}

/* Who: Amir Khusenov
   When: 2026-04-25
   What: Show the admin-controlled clients offer-options title above the cards
         in the clients block where the field belongs. */
.clients-offer-options__title {
	margin: 0 0 2px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	line-height: 120%;
	text-transform: uppercase;
	color: #fff;
}

.clients-offer-options .offer-option {
	margin: 0;
	border: 1px solid transparent;
	border-radius: 14px;
}

.clients-offer-options .offer-label-top-line {
	justify-content: flex-start;
}

.clients-offer-options .offer-pricing {
	min-width: 92px;
}

.clients-offer-options .offer-badge {
	top: -12px;
	right: 12px;
	border-radius: 6px;
	padding: 4px 10px;
	font-size: 10px;
}

.clients__splide {
	position: relative;
	margin-top: 16px;
}

/* Who: Amir Khusenov
   When: 2026-04-02
   What: Override Swiper's .swiper-wrapper { height:100% } — Safari resolves
         100% of an auto-height overflow:hidden parent as 0, collapsing the
         entire slider. height:auto sizes from content instead. */
.clients__list {
	padding-left: 16px;
	height: auto !important;
}

.clients__slide {
	height: auto !important;

	padding: 16px 8px 8px;

	border-radius: 20px;
	background: #1B1B1B;

	display: flex !important;
	flex-direction: column;

	flex-shrink: 0;
}



.clients__slide-header-img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
}

/* Who: Amir Khusenov
   When: 2026-04-10
   What: Ensure review header layout works across both markup variants
         (stars inside info or as direct header sibling) by giving the left
         cluster flexible width and pinning stars to the right edge. */
.clients__slide-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 0px 8px;
}

.clients__slide-header-left {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
}

.clients__slide-info {
	display: flex;
	column-gap: 40px;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	margin-left: 5px;
}

.clients__slide-about {
	margin-left: 16px;
	display: flex;
	flex-direction: column;
}

.clients__slide-name {
	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 14px;
	line-height: 100%;

	color: #fff;
}

.clients__slide-city {
	margin-top: 5px;

	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;

	color: rgba(255, 255, 255, 0.7);
}

.clients__slide-stars {
	width: 88px;
	display: block;
	flex: 0 0 auto;
	margin-left: auto;
}

/* Who: Amir Khusenov
   When: 2026-04-02
   What: Replaced height:100% with flex:1 — percentage height does not resolve
         when parent has height:auto. flex:1 fills remaining slide space
         reliably across all browsers without vendor prefixes. */
.clients__slide-content {
	display: flex;
	flex-direction: column;

	margin-top: 12px;
	flex: 1 1 0%;
	min-height: 0;
}

.clients__slide-p {
	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;

	margin: 0 8px 12px;
	padding-top: 8px;

	border-top: 1px solid #292929;
}

/* Who: Amir Khusenov
   When: 2026-04-02
   What: Replaced vendor-specific height (-moz-available, -webkit-fill-available,
         stretch) with flex + aspect-ratio combo. flex-basis:auto uses the
         aspect-ratio 1/1 square as minimum size; flex-grow:1 stretches beyond
         the square when Swiper equalises card heights. Cross-browser, no
         vendor prefixes. */
.clients__slide-img-dior {
	margin-top: auto;

	width: 100%;
	border-radius: 16px;

	flex: 1 1 auto;
	aspect-ratio: 1 / 1;

	object-fit: cover;
	object-position: center;
}

.banners {
	position: relative;
	overflow: hidden;
	height: 200px;
}

.banners__line {
	display: flex;
	align-items: center;
	gap: 12px;

	background: var(--primary-dark);
	padding: 6px;

	box-shadow: 0px 4px 4px 0px #00000040;

	position: absolute;
}

.banners__line:nth-child(1) {
	transform: rotate(-11.5deg);
	left: -96px;
	top: 24%;
}

.banners__line:nth-child(2) {
	transform: rotate(13.5deg);
	left: -152px;
	top: 38%;
}

.banners__line-item {
	font-weight: 400;
	font-size: 14px;
	line-height: 100%;
	color: #000;
	text-wrap: nowrap;
	white-space: nowrap;
}

.banners__line img {
	width: 12px;
	height: 12px;
	object-fit: contain;
	object-position: center;
}

.catalog {
	margin-top: -64px;
}

.catalog__title {
	margin-left: 16px;

	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	text-transform: uppercase;
}

.catalog__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;

	margin-top: 20px;
}

.catalog__card {
	padding: 4px;

	border-radius: 16px;
	border: 1px solid #353535;

	background: #1B1B1B;
}

.catalog__card-img {
	border-radius: 12px;
	aspect-ratio: 152/138;
	width: 100%;

	object-fit: cover;
	object-position: center;
}

.catalog__card-title {
	margin-top: 10px;

	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
}

.catalog__card-desc {
	text-align: center;
	font-family: var(--secondary-font);
	font-size: 12px;
	line-height: 20px;
	font-weight: 300;
}

.catalog__card-price {
	margin-top: 2px;

	text-align: center;
	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 20px;
	line-height: 20px;

	color: var(--primary-light);
}

.catalog__card-price span:nth-child(2) {
	font-size: 14px;
	color: #fff;
	text-decoration: line-through;
	font-weight: 400;
}

.catalog__card-btn {
	margin-top: 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 12px;
	padding: 12px 9px;
	width: 100%;

	background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	color: var(--accent-text);
	border: none;

	font-family: var(--primary-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 100%;
	letter-spacing: -0.5px;
	text-decoration: none;
	text-align: center;

	cursor: pointer;

	transition: background 0.3s;
}

.catalog__card-btn:hover {
	filter: brightness(1.05);
}

.order {
	margin-top: 38px;
}

.order__title {
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	text-transform: uppercase;
	color: #fff;
}

.order__cards {
	margin-top: 14px;

	display: flex;
	flex-direction: column;
	gap: 8px;
}

.order__card {
	display: flex;
	align-items: center;
	gap: 16px;

	padding: 6px;
	padding-right: 24px;

	border-radius: 20px;
	border: 1px solid #353535;
	background: #1B1B1B;
}

.order__card:nth-child(2n) {
	flex-direction: row-reverse;
	padding-right: 6px;
	padding-left: 24px;
}

.order__card-img {
	border-radius: 16px;
	width: 110px;

	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;
}

.order__card-title {
	color: rgba(255, 255, 255, 0.4);

	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
}

.order__card-desc {
	color: #fff;

	font-weight: 700;
	font-size: 16px;
	line-height: 120%;

	margin-top: 8px;
}

.cart {
	margin-top: 20px;
	padding: 20px 0px 16px;
	background: #1B1B1B;
}

.cart__title {
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	text-transform: uppercase;
	color: #fff;
}

.cart__list {
	margin-top: 24px;
}

.cart__item {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 12px;

	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid #3D3D3D;
}

/*
Who: Amir Khusenov
When: 2026-03-29
What: Enforced fixed square thumbnails and cover scaling for cart images to avoid
      stretched tall photos and keep the cart grid aligned.
*/
.cart__item-img {
	width: 88px;
	height: 88px;
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
	display: block;
}

.cart__item-title {
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;
	text-transform: uppercase;
}

.cart__item-info {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.cart__item-price {
	margin-top: 4px;

	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 20px;
	line-height: 20px;
	color: #fff;
}

.cart__item-price span {
	font-size: 16px;
	text-decoration: line-through;

	color: #878787;
}

.cart__item-size {
	font-family: var(--secondary-font);
	font-weight: 300;
	font-size: 12px;
	line-height: 20px;
	color: #fff;
}

.cart__item-amount {
	display: flex;
	justify-content: space-between;
	align-items: center;

	margin-top: 8px;

	border-radius: 8px;
	border: 1px solid #3d3d3d;
}

.cart__item-minus {
	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: 8px;
	border: 1px solid #1B1B1B;
	background: #41423E;

	font-family: var(--primary-font);
	font-weight: 500;
	font-size: 32px;
	line-height: 100%;
	text-align: center;

	color: var(--primary-dark);

	width: 77px;
	height: 34px;

	cursor: pointer;

	transition: opacity 0.3s;
}

.cart__item-minus:hover {
	opacity: 0.8;
}

.cart__item-plus {
	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: 8px;
	border: 1px solid #1B1B1B;
	background: #41423E;

	font-family: var(--primary-font);
	font-weight: 500;
	font-size: 32px;
	line-height: 100%;
	text-align: center;

	background: var(--primary-dark);
	color: #41423E;

	width: 77px;
	height: 34px;

	cursor: pointer;

	transition: opacity 0.3s;
}

.cart__item-plus:hover {
	opacity: 0.8;
}

.cart__item-count {
	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 18px;
	line-height: 20px;
}

.cart__total {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 12px;
}

.cart__total-title {
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
}

.cart__total-price {
	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 20px;
	line-height: 20px;

	color: var(--primary-light);
}

.cart__total-price-old {
	font-size: 14px;
	font-weight: 400;
	text-decoration: line-through;

	color: #fff;
}

.order-form {
	background: #1B1B1B;
	padding: 24px 0px 20px;
}

.order-form__title {
	margin: 0 0 20px 0;
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	text-transform: uppercase;
	color: #fff;
}

.order-form__form {}

.order-form__field {
	padding: 12px;
	margin-bottom: 8px;
	width: 100%;

	border: 1px solid #FFFFFF26;
	border-radius: 8px;

	font-family: var(--primary-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;

	color: #fff;
	background: transparent;
}

/* Who: Amir Khusenov
   When: 2026-04-25
   What: Make the name and phone inputs slightly lighter and add more space
         after the phone field so adjacent form fields are visually separated. */
.order-form__field#name,
.order-form__field#tel,
.order-form__field[name="name"],
.order-form__field[name="tel"] {
	background: rgba(255, 255, 255, 0.055);
}

.order-form__field#tel,
.order-form__field[name="tel"] {
	margin-bottom: 20px;
}


.order-form__field::placeholder {
	font-family: var(--primary-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 100%;

	color: #FFFFFF80;
}

.order-form__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	margin-top: 16px;
	padding: 16px 0px;
	width: 100%;

	border: none;
	border-radius: 8px;

	background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	color: var(--accent-text);

	font-family: var(--primary-font);
	font-weight: 500;
	font-size: 20px;
	line-height: 120%;

	cursor: pointer;

	transition: opacity 0.3s;
}

.order-form__btn--promocja::after {
	content: attr(data-rabat);

	position: absolute;
	top: -10px;
	right: 14px;

	padding: 5px 9px;
	border-radius: 6px;
	border: 1px solid #F9D7C9;
	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2);

	font-weight: 700;
	font-size: 11px;
	line-height: 100%;
	letter-spacing: 0.2px;

	color: #6E2E18;
	background: linear-gradient(90deg, #F7CDBE 0%, #F3B8A3 55%, #EEA487 100%);
}

.order-form__btn:hover {
	opacity: 0.8;
}

.order-form__price-old {
	margin-left: 5px;
	color: #00000080;
	text-decoration: line-through;
}

.order-form__payment {
	margin-top: 10px;
	text-align: center;
	font-size: 14px;
	color: rgb(250 247 247 / 50%)
}

.timer {
	background-color: #242424;
	padding: 20px 0;
}

.timer__title {
	font-weight: 400;
	line-height: 100%;
	text-align: center;

	margin-bottom: 15px;
}

.timer-container {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	font-size: 40px;
	font-weight: bold;
	margin-bottom: 10px;
}

.digit-group {
	display: flex;
	gap: 5px;
}

.digit {
	background: var(--primary-dark);
	padding: 15px 15px;
	border-radius: 10px;
	font-size: 20px;
	width: 40px;
	color: #1B1B1B;
}

.label-row {
	display: flex;
	justify-content: center;
	gap: 75px;
}

.unit-label {
	font-size: 14px;
	font-weight: normal;
	margin-top: 5px;
	color: white;
}

.accordion {
	padding: 0 20px 20px 20px;
}

.accordion-item {
	border-bottom: 1px solid #3B3D3B;
	padding: 16px 0;
	position: relative;
}

.accordion-summary {
	list-style: none;
	font-weight: bold;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.accordion-summary::-webkit-details-marker {
	display: none;
}

.accordion-arrow {
	width: 24px;
	height: 24px;
	padding: 3px 3px;
	background-color: var(--primary-dark);
	color: #1B1B1B;
	border-radius: 50%;
	transition: transform 0.3s linear;
}

details[open] .accordion-arrow {
	transform: rotate(180deg);
}

.accordion-content {
	padding-top: 12px;
	font-size: 14px;
	color: rgb(163, 163, 163)
}

.footer {
	margin-top: auto;
	background: #242424;
	opacity: 1;
}

.footer__links {
	display: flex;
	/* Who: Amir Khusenov
	   When: 2026-04-25
	   What: Force footer legal links to stay in one horizontal row on iOS,
	         preventing Safari from wrapping them into a single-column layout. */
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 16px;

	padding: 12px 0;
	border-bottom: 1px solid #FFFFFF26;
}

.footer__link {
	font-family: var(--primary-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	text-align: center;
	text-decoration: underline;
	white-space: nowrap;
	flex: 0 1 auto;
	min-width: 0;

	color: #FFFFFFB2;

	transition: color 0.3s;
}

.footer__link:hover {
	color: #fff;
}

.footer__copyright {
	padding: 10px 0 12px;

	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	text-align: center;

	color: #FFFFFF66;
}

.success-hero {
	padding-top: 16px;
	margin-bottom: 24px;
}

.success-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 24px 16px;

	background: #1B1B1B;
	border: 2px solid #373535;
	border-radius: 24px;
}

.success-hero__img {
	width: 100px;
	height: 100px;
	object-fit: contain;
	object-position: center;
}

.success-hero__title {
	margin-top: 16px;

	font-family: var(--primary-font);
	font-weight: 700;
	font-size: 20px;
	line-height: 100%;
	text-align: center;
}

.success-hero__desc {
	margin-top: 8px;

	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	text-align: center;


	color: #FFFFFFB2;
}

.success-upsell {
	margin-bottom: 28px;
}

.success-upsell.is-hidden {
	display: none;
}

.success-confirmation.is-hidden {
	display: none;
}

.success-details.is-hidden {
	display: none;
}

.success-upsell__inner {
	padding-top: 14px;
}

.success-upsell__title {
	font-weight: 700;
	font-size: 24px;
	line-height: 100%;
	text-transform: uppercase;
	text-align: center;
}

.success-upsell__notice {
	margin-top: 12px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 122, 26, 0.45);
	border-radius: 10px;
	background: rgba(255, 122, 26, 0.12);
	color: #ffe1c5;
	font-family: var(--secondary-font);
	font-size: 13px;
	line-height: 130%;
}

.success-upsell__timer {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.success-upsell__timer-label {
	font-family: var(--secondary-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 110%;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
}

.success-upsell__timer-track {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 18px;
}

.success-upsell__timer-unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
}

.success-upsell__timer-digits {
	display: flex;
	gap: 6px;
}

.success-upsell__timer-digit {
	width: 40px;
	height: 52px;
	border-radius: 10px;
	background: var(--primary-light);
	color: #1B1B1B;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.success-upsell__timer-caption {
	font-family: var(--secondary-font);
	font-weight: 500;
	font-size: 13px;
	line-height: 100%;
	text-transform: uppercase;
	color: #fff;
}

.success-upsell__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 14px;
	align-items: stretch;
}

.success-upsell__card {
	display: flex;
	flex-direction: column;
	padding: 5px;
	border-radius: 16px;
	border: 1px solid #353535;
	background: #1B1B1B;
	height: 100%;
}

.success-upsell__card-img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	background: #fff;
	border-radius: 12px;
	padding: 0;
}

.success-upsell__card-title {
	margin-top: 10px;
	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 18px;
	line-height: 110%;
	text-align: center;
}

.success-upsell__card-size {
	margin-top: 4px;
	font-family: var(--secondary-font);
	font-weight: 300;
	font-size: 12px;
	line-height: 100%;
	text-align: center;
	white-space: nowrap;
	color: #FFFFFFB2;
}

.success-upsell__card-picked {
	display: none;
}

.success-upsell__card-price {
	margin-top: 8px;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}

.success-upsell__card-price-now {
	color: var(--primary-light);
	font-family: var(--secondary-font);
	font-weight: 700;
	font-size: 32px;
	line-height: 90%;
}

.success-upsell__card-price-old {
	font-family: var(--secondary-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 100%;
	text-decoration: line-through;
	color: #FFFFFF8C;
}

.success-upsell__add {
	margin-top: auto;
	padding: 11px 8px;
	width: 100%;
	border: 0;
	border-radius: 11px;
	background: #fff;
	color: #131313;
	font-family: var(--secondary-font);
	font-weight: 600;
	font-size: 14px;
	line-height: 100%;
	cursor: pointer;
}

.success-upsell__add.is-hidden {
	display: none;
}

.success-upsell__add[disabled] {
	background: #D8D8D8;
	color: #4b4b4b;
	cursor: default;
}

.success-upsell__qty {
	margin-top: 10px;
	display: grid;
	grid-template-columns: 62px 1fr 62px;
	gap: 8px;
	align-items: center;
}

.success-upsell__qty.is-hidden {
	display: none;
}

.success-upsell__qty-btn {
	height: 42px;
	border: 1px solid #4A4A4A;
	border-radius: 11px;
	background: #2A2A2A;
	color: var(--primary-light);
	font-family: var(--secondary-font);
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
}

.success-upsell__qty-btn--plus {
	border: 0;
	background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	color: var(--accent-text);
}

.success-upsell__qty-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.success-upsell__qty-value {
	height: 42px;
	padding: 0 10px;
	border: 1px solid #4A4A4A;
	border-radius: 11px;
	background: #1F1F1F;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-size: 18px;
	line-height: 100%;
}

.success-upsell__qty-value span {
	font-size: 32px;
	line-height: 100%;
}

.success-upsell__actions {
	margin-top: 12px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
}

.success-upsell__order {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(90deg, var(--primary-gradient-start) 0%, var(--primary-gradient-end) 100%);
	color: var(--accent-text);
	font-family: var(--secondary-font);
	font-weight: 700;
	font-size: 14px;
	line-height: 100%;
	cursor: pointer;
}

.success-upsell__order.is-hidden {
	display: none;
}

.success-upsell__order[disabled] {
	opacity: 0.65;
	cursor: default;
}

.success-upsell__skip {
	display: block;
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #4A4A4A;
	border-radius: 11px;
	background: transparent;
	color: #D6D6D6;
	font-family: var(--secondary-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 100%;
	cursor: pointer;
}

.success-upsell__skip:hover {
	border-color: #6A6A6A;
	color: #fff;
}

@media (max-width: 438px) {
	.clients__slide-info {
		flex-direction: column;
	}

	/* Who: Amir Khusenov
	   When: 2026-04-10
	   What: Keep review stars pinned to the right edge on narrow screens for both
	         header markup variants (stars inside/outside info block), removing
	         old left padding that visually shifted stars on iOS. */
	.clients__slide-stars {
		padding: 5px 0 0;
		margin-left: auto;
		align-self: flex-end;
	}
}

@media (max-width: 410px) {

	/* Who: Amir Khusenov
	   When: 2026-04-23
	   What: Keep clients offer-option cards compact on very narrow screens so
	         radio marker, prices and badges stay readable without overlap. */
	.clients-offer-options {
		margin: 18px 10px 24px;
		gap: 10px;
	}

	.clients-offer-options .offer-option {
		padding: 12px 14px;
	}

	.clients-offer-options .offer-title {
		font-size: 14px;
	}

	.clients-offer-options .offer-price-current {
		font-size: 16px;
	}

	.clients-offer-options .offer-price-old {
		font-size: 12px;
	}

	.clients-offer-options .offer-badge {
		font-size: 10px;
		padding: 4px 8px;
	}
}

@media (max-width: 400px) {
	.offer-label {
		align-items: flex-start;
	}

	.offer-label-top-line {
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-start;
	}

	.offer-quantity {
		line-height: 1.5;
	}

	.success-upsell__title {
		font-size: 21px;
	}

	.success-upsell__timer {
		gap: 8px;
	}

	.success-upsell__timer-track {
		gap: 10px;
	}

	.success-upsell__timer-digit {
		width: 34px;
		height: 44px;
		border-radius: 8px;
		font-size: 28px;
	}

	.success-upsell__timer-caption {
		font-size: 11px;
	}

	.success-upsell__card-title {
		font-size: 16px;
	}

	.success-upsell__card-price-now {
		font-size: 28px;
	}

	.success-upsell__card-price-old {
		font-size: 13px;
	}

	.success-upsell__qty {
		grid-template-columns: 56px 1fr 56px;
		gap: 6px;
	}

	.success-upsell__qty-btn,
	.success-upsell__qty-value {
		height: 38px;
		border-radius: 9px;
	}

	.success-upsell__qty-btn {
		font-size: 30px;
	}

	.success-upsell__qty-value {
		font-size: 16px;
	}

	.success-upsell__qty-value span {
		font-size: 28px;
	}
}

@media (max-width: 359px) {
	.cart__item-count {
		font-size: 14px;
	}

	.cart__item-plus,
	.cart__item-minus {
		font-size: 26px;
		width: 60px;
	}

	.cart__item-title {
		font-size: 14px;
	}

	.timer-container {
		gap: 20px;
	}
}

@media (max-width: 345px) {
	.offer-subtext {
		font-size: 10px;
	}
}

.back-button {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2px;

	width: 100px;

	background-color: black;

	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s;

	z-index: 3;
}

/* Who: Amir Khusenov */
/* When: 2026-04-10 */
/* What: Keep static review fallback scrollable and force cards to 76% width
   so the next card preview remains visible on iOS/static mode even when
   Swiper leaves inline width/transform styles from previous initialization. */
.clients__splide--static {
	overflow: visible !important;
	overflow-x: auto !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.clients__splide--static .clients__list {
	display: flex;
	transform: none !important;
	width: auto !important;
	column-gap: 8px;
	padding-right: 16px;
}

.clients__splide--static .clients__slide {
	min-width: 76% !important;
	flex: 0 0 76% !important;
	max-width: 76%;
	width: 76% !important;
	scroll-snap-align: start;
}

.low-end-device .header__wrapper {
	animation: none;
	transform: none;
}

.low-end-device .banners__line {
	box-shadow: none;
}

.low-end-device .hero__btn,
.low-end-device .order-form__btn,
.low-end-device .catalog__card-btn,
.low-end-device .footer__link,
.low-end-device .back-button {
	transition: none;
}

.low-end-device .offer-button:hover,
.low-end-device .catalog__card-btn:hover {
	filter: none;
}

/* Who: Amir Khusenov
   When: 2026-04-02
   What: Removed .clients from content-visibility:auto — Safari 18 passes
         the @supports check but has rendering bugs (WebKit #277573, #281570)
         that keep sections with JS sliders invisible. */
@supports (content-visibility: auto) {

	.history,
	.desc,
	.forwho,
	.banners,
	.catalog,
	.order,
	.cart,
	.timer,
	.accordion,
	.footer {
		content-visibility: auto;
		contain-intrinsic-size: 1px 720px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.header__wrapper {
		animation: none !important;
	}
}